标签管理

2022-02-12 17:45:04 +08:00
parent 6348b30939
commit 59b0ee8684
7 changed files with 241 additions and 108 deletions
@@ -12,6 +12,7 @@
  import moment from 'moment'
  import 'moment/locale/zh-cn'
  moment.locale('zh-cn')
+
  const EN = 'en-us'
  const ZH = 'zh-cn'

@@ -6,8 +6,22 @@
          <div class="form-title">基本信息</div>
          <a-divider dashed />
          <a-col :span="24">
-            <a-form-item label="所属模块" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <j-dict-select-tag type="list" v-decorator="['isModel', validatorRules.isModel]" :trigger-change="true" dictCode="onl_cgform_area,所属模块,is_model" placeholder="请选择所属模块(1文档库,0文档拆分)" />
+            <a-form-item label="所属模块" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="isModel">
+              <a-select
+                v-model="form.isModel"
+                v-decorator="[
+                  'select',
+                ]"
+                placeholder="请选择所属模块"
+              >
+                <a-select-option value="1">
+                  文档库
+                </a-select-option>
+                <a-select-option value="2">
+                  文档条款
+                </a-select-option>
+              </a-select>
+<!--              <j-dict-select-tag type="list" v-decorator="['isModel', validatorRules.isModel]" :trigger-change="true" dictCode="is_model" placeholder="请选择所属模块(1文档库,0文档拆分)" />-->
            </a-form-item>
          </a-col>
          <a-col :span="24">
@@ -118,7 +132,10 @@
    },
    data () {
      return {
-        form: this.$form.createForm(this),
+        form: {
+          isModel:'',
+
+        },
        model: {},
        labelCol: {
          xs: { span: 24 },
@@ -195,7 +212,17 @@
          add: "/tag/onlCgformTag/add",
          edit: "/tag/onlCgformTag/edit",
          queryById: "/tag/onlCgformTag/queryById"
-        }
+        },
+        is_model:[
+          {
+            label:1,
+            value:'文档库'
+          },
+          {
+            label:2,
+            value:'文档条款'
+          }
+        ]
      }
    },
    computed: {
@@ -11,7 +11,7 @@
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="所属模块" prop="isModel">
-          <a-select v-model="form.isModel" placeholder="请选择所属模块">
+          <a-select default-value="1" v-model="form.isModel" placeholder="请选择所属模块">
            <a-select-option value="1">
              文档库
            </a-select-option>
@@ -41,8 +41,13 @@
          />
        </a-form-model-item>
        <a-form-model-item ref="sort" label="排序号" prop="sort">
-          <a-input
+<!--          <a-input-number v-decorator="['input-number', { initialValue: 3 }]" :min="1" :max="100" />-->
+          <a-input-number
+            style="width:100%"
            v-model="form.sort"
+            :min="1"
+            :formatter="limitNumber"
+            :parser="limitNumber"
            @blur="
          () => {
            $refs.sort.onFieldBlur();
@@ -93,6 +98,7 @@
        selectedRowKeys: [],
        loading: false,
        ipagination:true,
+        editId:'',
        columns: [
          {
            title: '展示区域',
@@ -131,17 +137,23 @@
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
        form: {
-          isModel:'',
+          isModel:'1',
          showArea:'',
          enName:'',
          sort:''
        },
        rules: {
-          isModel:[{ required: true, message: '请选择所属模块', trigger: 'change' }],
+          isModel:[
+            { required: true, message: '请选择所属模块', trigger: 'change' },
+
+            ],
          showArea:[
-            { required: true, message: '请选择展示区域', trigger: 'blur' },
-            { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
+            { required: true, message: '请输入展示区域', trigger: 'blur' },
+            { min:1, max: 50, message: '长度在 1 - 50字符', trigger: 'blur' },
          ],
+          sort:[
+            { required: true, message: '请输入排序号', trigger: 'change' },
+          ]
        }
      }
    },
@@ -164,12 +176,13 @@
      },
      //新增
      hideModal() {
-        this.newVisible = false;
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
-            postAction(`/tag/onlCgformArea/add`,this.form).then(res=>{
+            //编辑
+            if(this.form.id){
+              putAction(`tag/onlCgformArea/edit`,this.form).then((res)=>{
                if(res.success){
-                  this.$emit('submitOk',res.result)
+                  this.$emit('updateOk',res.result)
                  this.form={
                    isModel:'',
                    showArea:'',
@@ -177,8 +190,24 @@
                    sort:''
                  }
                }
-              }
-            )
+
+              });
+            }else{
+              //新增
+              postAction(`/tag/onlCgformArea/add`,this.form).then(res=>{
+                  if(res.success){
+                    this.$emit('submitOk',res.result)
+                    this.form={
+                      isModel:'',
+                      showArea:'',
+                      enName:'',
+                      sort:''
+                    }
+                  }
+                }
+              )
+            }
+            this.newVisible = false;
          } else {
            // console.log('error submit!!');
            return false;
@@ -201,15 +230,28 @@
      },
      //编辑按钮
      editArea(val){
+        this.newVisible = true;
        let params={
          id:val
        }
        getAction(`tag/onlCgformArea/queryById`, params).then((res) => {
          if(res.success){
-
+            this.form={...res.result}
            // this.$emit('updateOk',res.result)
+
+
          }
        })
+      },
+      //正则替换小数点
+      limitNumber(value) {
+        if (typeof value === 'string') {
+          return !isNaN(Number(value)) ? value.replace(/\./g, '') : 0
+        } else if (typeof value === 'number') {
+          return !isNaN(value) ? String(value).replace(/\./g, '') : 0
+        } else {
+          return 0
+        }
      }
    }
  }
@@ -1,64 +0,0 @@
-<template>
-    <div class="content-manage">
-      <a-form-model
-        class="tag-module"
-        ref="ruleForm"
-        :model="form"
-        :rules="rules"
-        :label-col="labelCol"
-        :wrapper-col="wrapperCol"
-      >
-        <a-form-model-item label="所属模块" prop="isModel">
-          <a-select v-model="form.isModel" placeholder="请选择所属模块">
-            <a-select-option value="1">
-              文档库
-            </a-select-option>
-            <a-select-option value="2">
-              文档条款
-            </a-select-option>
-          </a-select>
-        </a-form-model-item>
-        <a-form-model-item ref="showArea" label="展示区域" prop="showArea">
-          <a-input
-            v-model="form.showArea"
-            @blur="
-          () => {
-            $refs.showArea.onFieldBlur();
-          }
-        "
-          />
-        </a-form-model-item>
-        <a-form-model-item ref="enName" label="英文名称" prop="enName">
-          <a-input
-            v-model="form.enName"
-            @blur="
-          () => {
-            $refs.enName.onFieldBlur();
-          }
-        "
-          />
-        </a-form-model-item>
-        <a-form-model-item ref="sort" label="排序号" prop="sort">
-          <a-input
-            v-model="form.sort"
-            @blur="
-          () => {
-            $refs.sort.onFieldBlur();
-          }
-        "
-          />
-        </a-form-model-item>
-      </a-form-model>
-
-    </div>
-</template>
-
-<script>
-  export default {
-    name: 'contentManage'
-  }
-</script>
-
-<style scoped>
-
-</style>
@@ -1,34 +1,91 @@
 <template>
  <div>
-    <onl-cgform-tag-form ref="realForm" @ok="submitCallback" :disabled="disableSubmit" normal></onl-cgform-tag-form>
+<!--    <onl-cgform-tag-form ref="tagForm" @ok="submitCallback" :disabled="disableSubmit" normal></onl-cgform-tag-form>-->

+
+<!--    <div class="tag-form">-->
+<!--      <a-form-model-->
+<!--        ref="tagForm"-->
+<!--        :form="form"-->
+<!--        :rules="rules"-->
+<!--        :label-col="labelCol"-->
+<!--        :wrapper-col="wrapperCol"-->
+<!--      >-->
+<!--          <div class="form-title">基本信息</div>-->
+<!--          <a-divider dashed />-->
+<!--        <a-form-model-item-->
+<!--          label="所属模块"-->
+<!--          prop="isModel"-->
+<!--        >-->
+<!--          <a-select v-model="form.isModel" placeholder="请选择所属模块">-->
+<!--            <a-select-option value="1">-->
+<!--              文档库-->
+<!--            </a-select-option>-->
+<!--            <a-select-option value="2">-->
+<!--              文档条款-->
+<!--            </a-select-option>-->
+<!--          </a-select>-->
+<!--        </a-form-model-item>-->
+<!--        <a-form-model-item-->
+<!--          label="属性名称"-->
+<!--          prop="dbFieldName"-->
+<!--        >-->
+<!--          <a-input placeholder="请输入属性名称" v-model="form.dbFieldName" ></a-input>-->
+<!--        </a-form-model-item>-->
+
+<!--      </a-form-model>-->
+<!--    </div>-->
    <div class="drawer-footer">
-      <a-button v-if="!disableSubmit"  @click="handleOk" type="primary" style="margin-bottom: 0;">保存</a-button>
+      <a-button v-if="!disableSubmit"  @click="submitForm" type="primary" style="margin-bottom: 0;">保存</a-button>
      <a-button @click="handleCancel" style="margin-bottom: 0;">关闭</a-button>
    </div>
  </div>
 </template>

 <script>
-
-  import OnlCgformTagForm from './OnlCgformTagForm'
+  import { httpAction, getAction } from '@/api/manage'
+  // import OnlCgformTagForm from './OnlCgformTagForm'

  export default {
    name: 'newDrawer',
    components: {
-      OnlCgformTagForm
+      // OnlCgformTagForm
    },
    data () {
      return {
        title:"操作",
        width:800,
        visible: false,
-        disableSubmit: false
+        disableSubmit: false,
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 5 },
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 16 },
+        },
+        form:{
+          isModel:'1',
+          dbFieldName:''
+        },
+        rules:{
+          isModel:[
+            { required: true, message: '请选择所属模块',trigger: 'change'},
+          ],
+          dbFieldName:[
+            { required: true, message: '请输入属性名称',trigger: 'blur'},
+            { min:1, max: 20, message: '长度在 1 - 20字符', trigger: 'blur' },
+          ]
+        }
      }
    },
    props:{
      drawerVisible:Boolean,
    },
+    // beforeCreate() {
+    //   this.form = this.$form.createForm(this, { name: 'validate_other' });
+    // },
    mounted() {
      this.visible=this.drawerVisible
    },
@@ -36,13 +93,13 @@
      add () {
        this.visible=true
        this.$nextTick(()=>{
-          this.$refs.realForm.add();
+          this.$refs.tagForm.add();
        })
      },
      edit (record) {
        this.visible=true
        this.$nextTick(()=>{
-          this.$refs.realForm.edit(record);
+          this.$refs.tagForm.edit(record);
        });
      },
      close () {
@@ -53,12 +110,51 @@
        this.$emit('ok');
        this.visible = false;
      },
-      handleOk () {
-        this.$refs.realForm.submitForm();
-      },
      handleCancel () {
        this.close()
-      }
+      },
+      //表单提交
+      submitForm () {
+        console.log('formValid',this.$refs.tagForm)
+        console.log('this.form',this.form)
+        const that = this;
+        // 触发表单验证
+        this.$refs.tagForm.validateField((err,values)=>{
+          console.log('validateddd',err)
+          if(!err){
+
+        // this.$refs.tagForm.validate(valid => {
+        //   console.log('validateddd',valid,)
+          // if(valid){
+
+        // this.form.validateFields((err, values) => {
+        //   if (!err) {
+        //     that.confirmLoading = true;
+        //     let httpurl = '';
+        //     let method = '';
+        //     if(!this.model.id){
+        //       httpurl+=this.url.add;
+        //       method = 'post';
+        //     }else{
+        //       httpurl+=this.url.edit;
+        //       method = 'put';
+        //     }
+        //     let formData = Object.assign(this.model, values);
+        //     console.log("表单提交数据",formData)
+        //     httpAction(httpurl,formData,method).then((res)=>{
+        //       if(res.success){
+        //         that.$message.success(res.message);
+        //         that.$emit('ok');
+        //       }else{
+        //         that.$message.warning(res.message);
+        //       }
+        //     }).finally(() => {
+        //       that.confirmLoading = false;
+        //     })
+          }
+
+        })
+      },
    }
  }
 </script>
@@ -72,7 +168,7 @@
  }
  .drawer-footer{
    position: absolute;
-    bottom: -8px;
+    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
@@ -14,7 +14,7 @@
      <a slot="name" slot-scope="text">{{ text }}</a>
      <span slot="customTitle">属性名称</span>
      <span slot="action" slot-scope="text, record">
-          <a>编辑</a>
+          <a @click="editVisible(record.id)">编辑</a>
          <a-divider type="vertical" />
          <a class="table-del">删除</a>
        </span>
@@ -30,7 +30,7 @@
        selectedRowKeys: [],
        loading: false,
        ipagination:true,
-
+        visibleEd:false,
      }
    },
    props:{
@@ -47,6 +47,9 @@
      },
      handleTableChange(){

+      },
+      editVisible(id){
+        this.$emit('visibleEd',true,id)
      }
    }
  }
@@ -29,7 +29,7 @@
      <a-button type="primary" @click="handleShow">展示区域管理</a-button>
    </div>
    <a-drawer class="show-drawer" title="新增标签项" placement="right" width="1000px" @close="close" :visible="drawerVisible">
-      <new-drawer v-if="drawerVisible"></new-drawer>
+      <new-drawer v-if="drawerVisible" :editData="editData"></new-drawer>
    </a-drawer>
    <a-modal class="show-area" v-model="areaVisible" title="展示区域管理" :footer="null" @cancel="hideModal">
      <area-manage v-if="areaVisible" @diaHide="diaHide" :areaTable="areaTable" @submitOk="submitOk" @deleteOk="deleteOk" @updateOk="updateOk"></area-manage>
@@ -37,7 +37,7 @@
    <div class="tag-doc-tab">
      <a-tabs default-active-key="1" @change="callbackTab">
        <a-tab-pane key="1" tab="文档库">
-          <tabTable :tableData="tableData" :columns="taglabColumns"></tabTable>
+          <tabTable :tableData="tableData" :columns="taglabColumns" @visibleEd="visibleEd"></tabTable>
        </a-tab-pane>
        <a-tab-pane key="2" tab="文档拆分" force-render>
          <tabTable :tableData="tableData" :columns="tagSplit"></tabTable>
@@ -69,6 +69,7 @@
          page:1,
          pageSize:10,
        },
+        editData:[],  //编辑的数据
        areas:[
          {
            value: 1,
@@ -102,10 +103,10 @@
        ],
        taglabColumns: [
          {
-            dataIndex: 'name',
-            key: 'name',
+            dataIndex: 'dbFieldName',
+            key: 'dbFieldName',
            slots: { title: 'customTitle' },
-            scopedSlots: { customRender: 'name' },
+            scopedSlots: { customRender: 'dbFieldName' },
            align: "center",
            width: 100,
          },
@@ -113,25 +114,25 @@
            title: '英文名称',
            align: "center",
            width: 100,
-            dataIndex: 'englishName',
+            dataIndex: 'dbFieldEnName',
          },
          {
            title: '属性类型',
            align: "center",
            width: 100,
-            dataIndex: 'type',
+            dataIndex: 'fieldShowType',
          },
          {
            title: '字段长度',
            align: "center",
            width: 80,
-            dataIndex: 'length'
+            dataIndex: 'fieldLength'
          },
          {
            title: '展示顺序',
            align: "center",
            width: 80,
-            dataIndex: 'numberSort'
+            dataIndex: 'orderNum'
          },
          {
            title: '展示区域',
@@ -184,9 +185,13 @@
        ],
        areaVisible:false,
        areaTable:[],
-        drawerVisible:false
+        drawerVisible:false,
+        value:1
      }
    },
+    mounted() {
+      this.loadData()
+    },
    methods:{
      searchQuery(){

@@ -197,6 +202,8 @@
      handleAdd(){
        this.drawerVisible=true
      },
+
+      //区域管理列表数据
      handleShow(){
        this.areaVisible=true
        getAction(`/tag/onlCgformArea/list`,{}).then(res=>{
@@ -205,11 +212,20 @@
          }
        })
      },
+      //标签项管理初始数据
+      loadData(){
+        getAction(`Field/onlCgformField/page`,{}).then(res=>{
+          if(res.success){
+            this.tableData= [ ...res.result.records]
+          }
+        })
+      },
+      //标签项管理tab切换
      callbackTab(value){
-        console.log('values',value)
        if(value==1){
-          this.tableData=this.taglab
-          this.tableData=this.taglabSplit
+          this.loadData()
+          // this.tableData=this.taglab
+          // this.tableData=this.taglabSplit
        }
      },
      diaHide(vis){
@@ -230,6 +246,18 @@
      //编辑按钮
      updateOk(value){
        this.handleShow()
+      },
+      //编辑
+      visibleEd(val,id){
+        this.drawerVisible=val
+        let params={
+          id:id
+        }
+        getAction(`Field/onlCgformField/queryById`,params).then(res=>{
+          if(res.success){
+            this.editData=res.result
+          }
+        })
      }
    }
  }