wans

src/views/custom/form/modules/component/modules/Detail.vue

@@ -1,20 +1,12 @@
 <template>
-  <a-card
-    :tab-list="tabList"
-    size="small"
-    style="min-height:600px"
-    :active-tab-key="selectKey"
-    @tabChange="onTabChange">
-    <a-form
-      v-show="model.id"
-      size="small"
-      v-if="selectKey === '0'">
+  <a-card :tab-list="tabList" size="small" style="min-height:600px" :active-tab-key="selectKey" @tabChange="onTabChange">
+    <a-form v-show="model.id" size="small" v-if="selectKey === '0'">
       <a-form-item label="标题">
         <a-input v-model="model.label" />
       </a-form-item>
       <template v-if="model.type!=='divider'">
         <a-form-item label="字段名称">
-          <a-input v-model="model.value" />
+          <a-input v-model="model.value" @blur="valueChange" />
         </a-form-item>
         <a-form-item label="是否必填">
           <a-switch v-model="model.required" />
@@ -53,16 +45,8 @@
       <!-- 下拉框 -->
       <template v-if="model.type === 'select'">
         <a-form-item label="选项">
-          <VueDraggable
-            v-model="model.attrs.options"
-            :animation="150"
-            handle=".handle"
-          >
-            <div
-              v-for="(item, index) in model.attrs.options"
-              :key="index"
-              class="options"
-            >
+          <VueDraggable v-model="model.attrs.options" :animation="150" handle=".handle">
+            <div v-for="(item, index) in model.attrs.options" :key="index" class="options">
               <a-space>
                 <a-icon class="handle cursor-move" type="unordered-list" />
                 <a-input-group compact>
@@ -82,7 +66,7 @@
           <a-switch v-model="model.attrs.showTime" />
         </a-form-item>
         <a-form-item label="时间格式">
-          <a-input placeholder="YYYY-MM-DD HH:mm:ss" v-model="model.attrs.format" ></a-input>
+          <a-input placeholder="YYYY-MM-DD HH:mm:ss" v-model="model.attrs.format"></a-input>
         </a-form-item>
       </template>
       <!-- 上传 -->
@@ -123,18 +107,11 @@
           <a-button type="primary" @click="addForm()">添加到表单</a-button>
         </a-form-item> -->
       </template>
-      <a-popconfirm
-        title="确定删除该组件?"
-        ok-text="确定"
-        cancel-text="取消"
-        @confirm="deleteModel"
-      >
+      <a-popconfirm title="确定删除该组件?" ok-text="确定" cancel-text="取消" @confirm="deleteModel">
         <a-button type="danger" style="width:100%">删除</a-button>
       </a-popconfirm>
     </a-form>
-    <a-form
-      size="small"
-      v-if="selectKey === '1'">
+    <a-form size="small" v-if="selectKey === '1'">
       <a-form-item label="布局">
         <a-radio-group name="radioGroup" v-model="config.layout">
           <a-radio :value="1">
@@ -154,105 +131,111 @@
 </template>
 
 <script>
-
 import { VueDraggable } from 'vue-draggable-plus'
 import { getTableInfos } from '@/api/custom/form'
 import BindTable from './BindTable.vue'
 export default {
   components: {
     VueDraggable,
-    BindTable
+    BindTable,
   },
-  data () {
+  data() {
     return {
       model: {
         attrs: {
-          placeholder: ''
-        }
+          placeholder: '',
+        },
       },
       config: {},
       selectKey: '0',
       tabList: [
         {
           key: '0',
-          tab: '字段属性'
+          tab: '字段属性',
         },
         {
           key: '1',
-          tab: '表单属性'
-        }
+          tab: '表单属性',
+        },
       ],
       tableList: [],
-      additionalField: []
+      additionalField: [],
     }
   },
-  created () {
-  },
+  created() {},
   methods: {
-    base (val, config) {
+    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) : []
+      this.additionalField =
+        val.attrs.connect && val.attrs.connect.length > 1
+          ? val.attrs.connect.slice(1, val.attrs.connect.length).map((item) => item.columnName)
+          : []
     },
-    addOption () {
+    addOption() {
       this.model.attrs.options.push({
         label: '选项' + (this.model.attrs.options.length + 1),
-        value: 'newValue' + (this.model.attrs.options.length + 1)
+        value: 'newValue' + (this.model.attrs.options.length + 1),
       })
     },
-    deleteOption (i) {
+    deleteOption(i) {
       this.model.attrs.options.splice(i, 1)
     },
-    deleteModel () {
+    deleteModel() {
       this.$emit('delete', this.model)
     },
-    dictChange (tableName) {
-      getTableInfos({ tableName }).then(res => {
+    dictChange(tableName) {
+      getTableInfos({ tableName }).then((res) => {
         this.tableList = res.data
         if (this.model.attrs.connect.length === 0) {
           this.model.attrs.connect.push({
-            bind: 'id',
+            bind: this.model.value,
             columnName: 'id',
-            columnComment: 'id'
+            columnComment: 'id',
           })
         }
       })
     },
-    selectTypeChange () {
+    valueChange() {
+      if (this.model.type === 'dataSelect' && this.model.attrs.connect.length > 0) {
+        this.model.attrs.connect[0].bind = this.model.value
+      }
+    },
+    selectTypeChange() {
       this.model.attrs.connect.splice(1)
       this.additionalField = []
     },
-    additionalFieldChange (val, e) {
-      const arr = e.map(item => {
+    additionalFieldChange(val, e) {
+      const arr = e.map((item) => {
         return {
           bind: item.key,
           columnName: item.key,
-          columnComment: item.componentOptions.propsData.label
+          columnComment: item.componentOptions.propsData.label,
         }
       })
       this.model.attrs.connect.splice(1, this.model.attrs.connect.length - 1, ...arr)
     },
-    addForm () {
+    addForm() {
       this.$emit('addForm', this.model.attrs.connect.slice(1, this.model.attrs.connect.length))
     },
-    bindTable (tableName) {
+    bindTable(tableName) {
       this.$refs.bindTable.base(this.tableList)
     },
-    handleBind (val) {
+    handleBind(val) {
       this.model.attrs.connect = val
     },
-    onTabChange (key) {
+    onTabChange(key) {
       this.selectKey = key
-    }
-  }
+    },
+  },
 }
 </script>
 
 <style lang="less" scoped>
-.options{
-  margin-bottom:5px ;
+.options {
+  margin-bottom: 5px;
 }
 </style>

src/views/custom/form/modules/component/modules/components.js

@@ -132,7 +132,13 @@ export const componenHidetList = [
       disabled: true,
       selectType: 'radio',
       dict: '',
-      connect: []
+      connect: [
+        // {
+        //   bind: 'form字段',
+        //   columnName: 'table字段名',
+        //   columnComment: 'table字段值'
+        // }
+      ]
     }
   }
 ]