wans

src/views/test/Test1.vue

@@ -83,7 +83,7 @@
       </a-card>
     </a-col>
     <a-col :span="4">
-      <Detail :config="config" ref="detail" @delete="handleDelete"/>
+      <Detail :config="config" ref="detail" @delete="handleDelete" @addForm="addForm"/>
     </a-col>
     <SelectInfo ref="selectInfo" @selected="handleInfoSelected" />
   </a-row>
@@ -103,7 +103,6 @@ export default {
     Detail,
     MComponent,
     SelectInfo
-
   },
   data () {
     return {
@@ -111,6 +110,7 @@ export default {
       componentBaseList,
       componenHidetList,
       list2: [],
+      num: 1,
       detail: {},
       config: {
         layout: 2
@@ -124,6 +124,16 @@ export default {
       }
     }
   },
+  watch: {
+    list2: {
+      deep: true,
+      handler (val) {
+        this.num++
+      }
+    }
+  },
+  created () {
+  },
   mounted () {
     this.handleSelect({}, this.config)
   },
@@ -132,6 +142,7 @@ export default {
       // 生成随机id
       const val = {
         ...JSON.parse(JSON.stringify(element)),
+        value: `${element.value}${this.num}`,
         id: Math.floor(Math.random() * 10000000000000)
       }
       this.handleSelect(val)
@@ -140,6 +151,23 @@ export default {
     update (val) {
       console.log(val)
     },
+    addForm (val) {
+      val.forEach(item => {
+        this.list2.push({
+          id: item.bind,
+          name: '单行文本',
+          type: 'input',
+          value: item.bind,
+          dependentId: false,
+          required: true,
+          label: item.columnComment,
+          attrs: {
+            placeholder: '请输入',
+            disabled: true
+          }
+        })
+      })
+    },
     handleDelete (val) {
       this.list2 = this.list2.filter(v => v.id !== val.id)
     },
@@ -162,18 +190,25 @@ export default {
       this.$refs.selectInfo.base(item)
     },
     handleInfoSelected (keys, rows, detail) {
-      console.log(keys, rows, detail)
       const {
         form: { setFieldsValue }
       } = this
-      const data = rows[0]
-      const value = {}
-      detail.attrs.connect.forEach(item => {
-        value[item.bind] = data[item.columnName]
-      })
-      this.$nextTick(() => {
-        setFieldsValue(value)
-      })
+      if (detail.attrs.selectType === 'radio') {
+        const data = rows[0]
+        const value = {}
+        detail.attrs.connect.forEach(item => {
+          value[item.bind] = data[item.columnName]
+        })
+        this.$nextTick(() => {
+          setFieldsValue(value)
+        })
+      } else {
+        this.$nextTick(() => {
+          setFieldsValue({
+            [detail.attrs.connect[0].bind]: keys
+          })
+        })
+      }
     }
   }
 }

src/views/test/modules/Detail.vue

@@ -94,9 +94,33 @@
       <!-- 选择数据 -->
       <template v-if="model.type === 'dataSelect'">
         <a-form-item label="选择表单">
-          <a-select style="width:50%" v-model="model.attrs.dict" placeholder="请选择" :options="DictCache.getChildrenList('TABLE_MAPPING')">
+          <a-select v-model="model.attrs.dict" placeholder="请选择" :options="DictCache.getChildrenList('TABLE_MAPPING')" @change="dictChange">
           </a-select>
-          <a-button style="width:50%" type="primary" @click="bindTable(model.attrs.dict)">绑定字段</a-button>
+        </a-form-item>
+        <a-form-item label="选择类型">
+          <a-radio-group name="radioGroup" v-model="model.attrs.selectType" @change="selectTypeChange">
+            <a-radio value="radio">
+              单选
+            </a-radio>
+            <a-radio value="checkbox">
+              多选
+            </a-radio>
+          </a-radio-group>
+        </a-form-item>
+        <a-form-item label="默认字段" v-if="model.attrs.connect.length">
+          <a-select v-model="model.attrs.connect[0].columnName" placeholder="请选择">
+            <a-select-option v-for="item in tableList" :value="item.columnName" :key="item.columnName">
+              {{ item.columnComment }}
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+        <a-form-item label="附加字段" v-if="model.attrs.connect.length&&model.attrs.selectType=='radio'">
+          <a-select mode="multiple" v-model="additionalField" placeholder="请选择" @change="additionalFieldChange">
+            <a-select-option v-for="item in tableList" :value="item.columnName" :key="item.columnName" :label=" item.columnComment">
+              {{ item.columnComment }}
+            </a-select-option>
+          </a-select>
+          <a-button type="primary" @click="addForm()">添加到表单</a-button>
         </a-form-item>
       </template>
       <a-popconfirm
@@ -157,16 +181,21 @@ export default {
           key: '1',
           tab: '表单属性'
         }
-      ]
+      ],
+      tableList: [],
+      additionalField: []
     }
   },
-
   created () {
   },
   methods: {
     base (val, config) {
       this.model = val
       this.config = config
+      if (this.model.attrs.dict !== undefined && this.model.attrs.dict !== '') {
+        this.dictChange(this.model.attrs.dict)
+      }
+      this.additionalField = val.attrs.connect && val.attrs.connect.length > 1 ? val.attrs.connect.slice(1, val.attrs.connect.length).map(item => item.columnName) : []
     },
     addOption () {
       this.model.attrs.options.push({
@@ -180,11 +209,38 @@ export default {
     deleteModel () {
       this.$emit('delete', this.model)
     },
-    bindTable (tableName) {
+    dictChange (tableName) {
       getTableInfos({ tableName }).then(res => {
-        this.$refs.bindTable.base(res.data)
+        this.tableList = res.data
+        if (this.model.attrs.connect.length === 0) {
+          this.model.attrs.connect.push({
+            bind: 'id',
+            columnName: 'id',
+            columnComment: 'id'
+          })
+        }
       })
     },
+    selectTypeChange () {
+      this.model.attrs.connect.splice(1)
+      this.additionalField = []
+    },
+    additionalFieldChange (val, e) {
+      const arr = e.map(item => {
+        return {
+          bind: item.key,
+          columnName: item.key,
+          columnComment: item.componentOptions.propsData.label
+        }
+      })
+      this.model.attrs.connect.splice(1, this.model.attrs.connect.length - 1, ...arr)
+    },
+    addForm () {
+      this.$emit('addForm', this.model.attrs.connect.slice(1, this.model.attrs.connect.length))
+    },
+    bindTable (tableName) {
+      this.$refs.bindTable.base(this.tableList)
+    },
     handleBind (val) {
       this.model.attrs.connect = val
     },

src/views/test/modules/SelectInfo.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <StoreSelectModal v-if="active === 't_store'" ref="select" @selected="selected"/>
-    <SpareStoreSelectModal v-else-if="active === 't_spare_part_info'" ref="select" @selected="selected"/>
-    <SbInfoSelectModal v-else-if="active === 't_sb_info'" ref="select" @selected="selected" />
+    <StoreSelectModal :type="detail.attrs.selectType" v-if="active === 't_store'" ref="select" @selected="selected"/>
+    <SpareStoreSelectModal :type="detail.attrs.selectType" v-else-if="active === 't_spare_part_info'" ref="select" @selected="selected"/>
+    <SbInfoSelectModal :type="detail.attrs.selectType" v-else-if="active === 't_sb_info'" ref="select" @selected="selected" />
   </div>
 </template>
 
@@ -30,7 +30,9 @@ export default {
       }
       this.active = item.attrs.dict
       this.detail = item
-      this.$refs.select.base()
+      this.$nextTick(() => {
+        this.$refs.select.base()
+      })
     },
     selected (keys, rows) {
       this.$emit('selected', keys, rows, this.detail)

src/views/test/modules/SpareStoreSelectModal.vue

@@ -111,7 +111,7 @@ export default {
   props: {
     type: {
       type: String,
-      default: 'checkbox'
+      default: 'radio'
     },
     selectedRowKey: {
       type: Array,

src/views/test/modules/components.js

@@ -130,6 +130,7 @@ export const componenHidetList = [
     attrs: {
       placeholder: '请选择',
       disabled: true,
+      selectType: 'radio',
       dict: '',
       connect: []
     }