替换表单组件

src/views/data/modules/dataIndexingModal.vue

@@ -10,40 +10,29 @@
     cancelText="关闭">
 
     <a-spin :spinning="confirmLoading">
-      <a-form :form="form">
-        <a-form-item label="索引名称" :labelCol="labelCol" >
-          <a-input v-decorator="['indexName',{
-             rules: [
-              { required: true, message: '索引名称不能为空' },
-              { min: 1, max: 60, message: '长度1-60位' },
-            ],
-            validateTrigger: 'change'
-          }]" ></a-input>
-        </a-form-item>
-        <a-form-item label="索引类型" >
-          <a-select placeholder="选择索引类型" option-filter-prop="children" size="large"  v-decorator="['indexTypeId', {
-             rules: [
-              { required: true, message: '选择索引类型' },
-            ],
-            validateTrigger: 'change'
-          }]">
-            <a-select-option key="0" value="0">
+      <a-form-model ref="ruleForm" :model="form" :rules="rules">
+        <a-form-model-item label="索引名称" :labelCol="labelCol" >
+          <a-input v-model="form.indexName" ></a-input>
+        </a-form-model-item>
+        <a-form-model-item label="索引类型" >
+          <a-select v-model="form.indexTypeId" placeholder="选择索引类型" option-filter-prop="children" size="large">
+            <a-select-option :value="0">
               普通索引
             </a-select-option>
-            <a-select-option key="1" value="1">
+            <a-select-option :value="1">
               唯一索引
             </a-select-option>
-            <a-select-option key="2" value="2">
+            <a-select-option :value="2">
               全文索引
             </a-select-option>
           </a-select>
-        </a-form-item>
-        <a-form-item label="字段" :labelCol="labelCol" >
-          <a-tree-select style="width: 100%"
+        </a-form-model-item>
+        <a-form-model-item label="字段" :labelCol="labelCol" >
+          <a-tree-select v-model="checkedList" style="width: 100%"
                         :tree-data="treeData" multiple search-placeholder="请选项" 
-                        :dropdownStyle="{ maxHeight: '400px', overflowY: 'auto'}" v-decorator="['columnName',{}]"/>
-        </a-form-item>
-      </a-form>
+                        :dropdownStyle="{ maxHeight: '400px', overflowY: 'auto'}"/>
+        </a-form-model-item>
+      </a-form-model>
     </a-spin>
   </a-modal>
 </template>
@@ -67,7 +56,15 @@ import pick from 'lodash.pick'
         status:'',
         model: {},
         confirmLoading: false,
-        form: this.$form.createForm(this),
+        form: {
+          indexName: '',
+          columnName: '',
+          indexTypeId: 0
+        },
+        rules: {
+          indexName: [{ required: true, message: '索引名称', trigger: 'blur' },{ min: 1, max: 60, message: '长度1-60位' },],
+          indexTypeId: [{ required: true, message: '请选择', trigger: 'change' }]
+        },
         strategys:[],
         dataStrategySelected:'',
         idcDataStrategyId:"",
@@ -84,7 +81,8 @@ import pick from 'lodash.pick'
         rangeTime:[],
         treeData: [],
         schemaMass:"",
-        tableName:""
+        tableName:"",
+        checkedList:[]
       }
     },
     created () {
@@ -107,8 +105,10 @@ import pick from 'lodash.pick'
         });
       },
       add (schemaMass,tableName) {
-        console.log(schemaMass,tableName);
-        this.edit(schemaMass,tableName,{});
+        this.schemaMass = schemaMass;
+        this.tableName = tableName;
+        this.visible =true;
+        this.getQuerytableColumns()
       },
       edit (schemaMass,tableName,record) {
         console.log(schemaMass,tableName);
@@ -116,12 +116,10 @@ import pick from 'lodash.pick'
         this.tableName = tableName;
         this.getQuerytableColumns()
         this.visible =true;
-        let that = this;
-        that.form.resetFields();
-        this.model = Object.assign({},record);
-        this.$nextTick(() => {
-          this.form.setFieldsValue(pick(this.model,'indexName','columnName','indexTypeId'));
-        });
+        this.form.indexName = record.indexName;
+        this.checkedList = record.columnName.split(',');
+        this.form.indexTypeCode = record.indexTypeId;
+
       },
       close () {
         this.visible =false;
@@ -129,13 +127,13 @@ import pick from 'lodash.pick'
       handleOk () {
         const that = this;
         // 触发表单验证
-        this.form.validateFields((err, values) => {
+        this.$refs.ruleForm.validate((valid, values) => {
           console.log('values',values)
-          if (!err) {
+          if (valid) {
             that.confirmLoading = true;
-            this.model.indexName = values.indexName;
-            this.model.columns = values.columnName;
-            this.model.indexTypeCode = values.indexTypeId;
+            this.model.indexName = this.form.indexName;
+            this.model.columns = this.checkedList.join(',');
+            this.model.indexTypeCode = this.form.indexTypeId;
             console.log(this.model);
             postAction("/tableIndex/updateIndexSafe?schemaMass="+this.schemaMass+"&tableName="+this.tableName+"&indexName="+this.model.indexName+"&columns="+this.model.columns+"&indexTypeCode="+this.model.indexTypeCode,{}).then(res => {
               if (res.success) {