改版

src/views/dataGovernance/dataIndicator/components/editBase.vue

@@ -1,16 +1,16 @@
 <template>
   <div>
-    <form-list ref="form" :items="formItems">
+    <m-form ref="form" :items="formItems" v-model="formValues">
       <template #childrenId="{ item }">
         <search-nodes v-model="item.value" v-bind="item.options" :search-value="item.search"></search-nodes>
       </template>
-    </form-list>
+    </m-form>
   </div>
 </template>
 
 <script>
 
-import FormList from '@/components/Form/list'
+import MForm from '@/components/MForm'
 // import { combinationTagsPage } from '@/api/dataBook'
 import {
   metadata,
@@ -27,107 +27,23 @@ export default {
       default: () => ({})
     }
   },
-  components: { FormList, SearchNodes },
+  components: { MForm, SearchNodes },
   data () {
     return {
-      formItems: {
-        options: [
-          {
-            type: 'text',
-            key: 'name',
-            value: '指标_' + new Date().getTime(),
-            label: '请输入名称 *',
-            outlined: true,
-            dense: true,
-            rules: [v => !!v || '请输入名称']
-          },
-          {
-            type: 'autocomplete',
-            key: 'category',
-            value: '应用类',
-            label: '请选择分类 *',
-            outlined: true,
-            dense: true,
-            rules: [v => !!v || '请选择分类'],
-            items: metadata
-          },
-          {
-            type: 'text',
-            key: 'organization',
-            value: this.$store.getters.userInfo.username,
-            label: '请输入所属机构 *',
-            outlined: true,
-            dense: true,
-            rules: [v => !!v || '请输入所属机构']
-          },
-          {
-            type: 'text',
-            key: 'leader',
-            value: this.$store.getters.userInfo.username,
-            label: '请输入负责人 *',
-            outlined: true,
-            dense: true,
-            rules: [v => !!v || '请输入负责人']
-          },
-          {
-            key: 'childrenId',
-            slotName: 'childrenId',
-            search: null,
-            options: {
-              label: '请选择数据来源',
-              attach: true
-            },
-            value: []
-          },
-          {
-            type: 'autocomplete',
-            key: 'frequency',
-            value: '日',
-            label: '请选择更新频率 *',
-            outlined: true,
-            dense: true,
-            rules: [v => !!v || '请选择更新频率'],
-            items: frequency
-          },
-          {
-            type: 'autocomplete',
-            key: 'data_sensitivity',
-            value: '低',
-            label: '请选择数据敏感度 *',
-            outlined: true,
-            dense: true,
-            rules: [v => !!v || '请选择数据敏感度'],
-            items: sensitivity
-          },
-          {
-            type: 'autocomplete',
-            key: 'tag',
-            value: null,
-            label: '请选择标签',
-            outlined: true,
-            dense: true,
-            itemText: 'name',
-            itemValue: 'id',
-            items: []
-          },
-          {
-            type: 'text',
-            key: 'describe',
-            value: null,
-            outlined: true,
-            dense: true,
-            label: '请输入描述'
-          },
-          {
-            type: 'ifRadio',
-            key: 'status',
-            value: true,
-            label: '启用',
-            width: 120,
-            items: [{ label: '是', value: true }, { label: '否', value: false }]
-          }
-        ]
+      formValues: {
+        name: '指标_' + new Date().getTime(),
+        en_name: null,
+        category: '应用类',
+        organization: this.$store.getters.userInfo.username,
+        leader: this.$store.getters.userInfo.username,
+        childrenId: [],
+        frequency: '日',
+        data_sensitivity: '低',
+        tag: null,
+        describe: null,
+        status: true
       },
+      tagItems: [],
       pageInfo: {
         size: 10,
         current: 1
@@ -136,21 +52,50 @@ export default {
       loading: false
     }
   },
+  computed: {
+    formItems () {
+      return [
+        { type: 'text', key: 'name', label: '请输入名称 *', rules: [v => !!v || '请输入名称'] },
+        { type: 'autocomplete', key: 'category', label: '请选择分类 *', rules: [v => !!v || '请选择分类'], items: metadata },
+        { type: 'text', key: 'organization', label: '请输入所属机构 *', rules: [v => !!v || '请输入所属机构'] },
+        { type: 'text', key: 'leader', label: '请输入负责人 *', rules: [v => !!v || '请输入负责人'] },
+        {
+          key: 'childrenId',
+          slotName: 'childrenId',
+          search: null,
+          options: {
+            label: '请选择数据来源',
+            attach: true
+          }
+        },
+        { type: 'autocomplete', key: 'frequency', label: '请选择更新频率 *', rules: [v => !!v || '请选择更新频率'], items: frequency },
+        { type: 'autocomplete', key: 'data_sensitivity', label: '请选择数据敏感度 *', rules: [v => !!v || '请选择数据敏感度'], items: sensitivity },
+        { type: 'autocomplete', key: 'tag', label: '请选择标签', itemText: 'name', itemValue: 'id', items: this.tagItems },
+        { type: 'text', key: 'describe', label: '请输入描述' },
+        {
+          type: 'ifRadio',
+          key: 'status',
+          label: '启用',
+          width: 120,
+          items: [{ label: '是', value: true }, { label: '否', value: false }]
+        }
+      ]
+    }
+  },
   created () {
     this.init()
     if (!Object.keys(this.itemData).length) {
       return
     }
-    // const objItems = ['childrenId', 'tag']
-    this.formItems.options.forEach(item => {
-      if (!Object.prototype.hasOwnProperty.call(this.itemData, item.key)) {
+    Object.keys(this.formValues).forEach(key => {
+      if (!Object.prototype.hasOwnProperty.call(this.itemData, key)) {
         return
       }
-      if (item.key === 'childrenId') {
+      if (key === 'childrenId') {
         if (this.itemData.childrenId.length === 1 && this.itemData.childrenId[0].id === null) {
           return
         }
-        item.value = this.itemData.childrenId.map(e => {
+        this.formValues[key] = this.itemData.childrenId.map(e => {
           return {
             value: e.id,
             text: e.name
@@ -158,21 +103,12 @@ export default {
         })
         return
       }
-      if (item.key === 'tag') {
-        item.value = this.itemData.tag?.id ?? null
+      if (key === 'tag') {
+        this.formValues[key] = this.itemData.tag?.id ?? null
         return
       }
-      item.value = this.itemData[item.key]
-      // if (objItems.includes(item.key) && this.itemData[item.key]) {
-      //   item.value = this.itemData[item.key]?.id
-      //   if (Object.prototype.hasOwnProperty.call(item, 'search')) {
-      //     item.search = this.itemData[item.key]?.name
-      //   }
-      //   return
-      // }
-      // item.value = this.itemData[item.key]
+      this.formValues[key] = this.itemData[key]
     })
-    // this.initDetails()
   },
   methods: {
     async init () {
@@ -182,7 +118,7 @@ export default {
           const { data } = await api.dataLabelList({
             ...this.pageInfo
           })
-          this.formItems.options.find(e => e.key === 'tag').items = data.records
+          this.tagItems = data.records
           this.total = data.total
         } catch (error) {
           this.$snackbar.error(error)
@@ -197,21 +133,7 @@ export default {
       if (!this.$refs.form.validate()) {
         return
       }
-      return this.formItems.options.reduce((res, item) => {
-        // if (item.key === 'tag' && item.value) {
-        //   res.tag = {
-        //     id: item.value,
-        //     name: item.items.find(e => e.id === item.value)?.name ?? null
-        //   }
-        //   return res
-        // }
-        // if (item.key === 'childrenId') {
-        //   res.childrenId = item.value.map(e => e.value)
-        //   return res
-        // }
-        res[item.key] = item.value
-        return res
-      }, {})
+      return this.formValues
     }
   }
 }

src/views/dataGovernance/dataModules/components/edit.vue

@@ -386,7 +386,6 @@ export default {
       if (this.itemData.id) {
         Object.assign(query, {
           id: this.itemData.id,
-          en_name: this.itemData.en_name,
           origin: this.itemData.origin,
           metaData: idList
         })

src/views/dataGovernance/dataModules/components/editBase.vue

@@ -1,16 +1,16 @@
 <template>
   <div>
-    <form-list ref="form" :items="formItems">
+    <m-form ref="form" :items="formItems" v-model="formValues">
       <template #childrenId="{ item }">
         <search-nodes v-model="item.value" v-bind="item.options" :search-value="item.search"></search-nodes>
       </template>
-    </form-list>
+    </m-form>
   </div>
 </template>
 
 <script>
 
-import FormList from '@/components/Form/list'
+import MForm from '@/components/MForm'
 // import { combinationTagsPage } from '@/api/dataBook'
 import {
   metadata,
@@ -22,10 +22,6 @@ import SearchNodes from '../../components/searchNodes.vue'
 export default {
   name: 'edit-base',
   props: {
-    // hideEnName: {
-    //   type: Boolean,
-    //   default: false
-    // },
     itemData: {
       type: Object,
       default: () => ({})
@@ -35,149 +31,63 @@ export default {
       default: () => ({})
     }
   },
-  components: { FormList, SearchNodes },
+  components: { MForm, SearchNodes },
   data () {
     return {
-      formItems: {
-        options: [
-          {
-            type: 'text',
-            key: 'name',
-            value: '数据模型_' + new Date().getTime(),
-            label: '请输入名称 *',
-            outlined: true,
-            dense: true,
-            rules: [v => !!v || '请输入名称']
-          },
-          // {
-          //   type: 'text',
-          //   hide: this.hideEnName,
-          //   key: 'en_name',
-          //   value: null,
-          //   label: '请输入英文名称 *',
-          //   outlined: true,
-          //   dense: true,
-          //   rules: [v => !!v || '请输入英文名称']
-          // },
-          {
-            type: 'autocomplete',
-            key: 'category',
-            value: '应用类',
-            label: '请选择分类 *',
-            outlined: true,
-            dense: true,
-            rules: [v => !!v || '请选择分类'],
-            items: metadata
-          },
-          {
-            type: 'text',
-            key: 'organization',
-            value: this.$store.getters.userInfo.username,
-            label: '请输入所属机构 *',
-            // col: 6,
-            outlined: true,
-            dense: true,
-            rules: [v => !!v || '请输入所属机构']
-          },
-          {
-            type: 'text',
-            key: 'leader',
-            value: this.$store.getters.userInfo.username,
-            label: '请输入负责人 *',
-            // col: 6,
-            outlined: true,
-            dense: true,
-            rules: [v => !!v || '请输入负责人']
-          },
-          {
-            key: 'childrenId',
-            slotName: 'childrenId',
-            search: null,
-            options: {
-              label: '请选择数据来源',
-              attach: true
-            },
-            value: []
-          },
-          // {
-          //   type: 'number',
-          //   key: 'level',
-          //   value: 1,
-          //   label: '模型层级',
-          //   outlined: true,
-          //   dense: true,
-          //   rules: [v => (/^\d+$/.test(v) && parseInt(v, 10) > 0) || '请填写正确的模型层级']
-          // },
-          {
-            type: 'autocomplete',
-            key: 'frequency',
-            value: '日',
-            label: '请选择更新频率 *',
-            // col: 6,
-            outlined: true,
-            dense: true,
-            rules: [v => !!v || '请选择更新频率'],
-            items: frequency
-          },
-          {
-            type: 'autocomplete',
-            key: 'data_sensitivity',
-            value: '低',
-            label: '请选择数据敏感度 *',
-            // col: 6,
-            outlined: true,
-            dense: true,
-            rules: [v => !!v || '请选择数据敏感度'],
-            items: sensitivity
-          },
-          {
-            type: 'autocomplete',
-            key: 'tag',
-            value: null,
-            label: '请选择标签',
-            outlined: true,
-            dense: true,
-            itemText: 'name',
-            itemValue: 'id',
-            items: []
-          },
-          {
-            type: 'text',
-            key: 'describe',
-            value: null,
-            outlined: true,
-            dense: true,
-            label: '请输入描述'
-          },
-          {
-            type: 'ifRadio',
-            key: 'status',
-            value: true,
-            label: '启用',
-            width: 120,
-            items: [{ label: '是', value: true }, { label: '否', value: false }]
-          }
-        ]
+      formValues: {
+        name: '数据模型_' + new Date().getTime(),
+        en_name: null,
+        category: '应用类',
+        organization: this.$store.getters.userInfo.username,
+        leader: this.$store.getters.userInfo.username,
+        childrenId: [],
+        frequency: '日',
+        data_sensitivity: '低',
+        tag: null,
+        describe: null,
+        status: true
       },
       pageInfo: {
         size: 10,
         current: 1
       },
       total: 0,
-      loading: false
+      loading: false,
+      tagItems: []
     }
   },
-  watch: {
-    names: {
-      handler (val) {
-        this.formItems.options.forEach(e => {
-          if (e.key === 'name' || e.key === 'en_name') {
-            e.value = val[e.key] ? val[e.key] : e.value
+  computed: {
+    formItems () {
+      return [
+        { type: 'text', key: 'name', label: '请输入名称 *', rules: [v => !!v || '请输入名称'] },
+        { type: 'text', key: 'en_name', label: '请输入英文名称 *', rules: [v => !!v || '请输入英文名称'] },
+        { type: 'autocomplete', key: 'category', label: '请选择分类 *', rules: [v => !!v || '请选择分类'], items: metadata },
+        { type: 'text', key: 'organization', label: '请输入所属机构 *', rules: [v => !!v || '请输入所属机构'] },
+        { type: 'text', key: 'leader', label: '请输入负责人 *', rules: [v => !!v || '请输入负责人'] },
+        {
+          key: 'childrenId',
+          slotName: 'childrenId',
+          search: null,
+          options: {
+            label: '请选择数据来源',
+            attach: true
           }
-        })
-      },
-      deep: true,
-      immediate: true
+        },
+        { type: 'autocomplete', key: 'frequency', label: '请选择更新频率 *', rules: [v => !!v || '请选择更新频率'], items: frequency },
+        { type: 'autocomplete', key: 'data_sensitivity', label: '请选择数据敏感度 *', rules: [v => !!v || '请选择数据敏感度'], items: sensitivity },
+        { type: 'autocomplete', key: 'tag', label: '请选择标签', itemText: 'name', itemValue: 'id', items: this.tagItems },
+        { type: 'text', key: 'describe', label: '请输入描述' },
+        {
+          type: 'ifRadio',
+          key: 'status',
+          label: '启用',
+          width: 120,
+          items: [
+            { label: '是', value: true },
+            { label: '否', value: false }
+          ]
+        }
+      ]
     }
   },
   created () {
@@ -186,27 +96,20 @@ export default {
     if (!val || !Object.keys(val).length) {
       return
     }
-    this.formItems.options.forEach(item => {
-      if (!Object.prototype.hasOwnProperty.call(val, item.key)) {
-        return
-      }
-      if (item.key === 'childrenId') {
-        if (val.childrenId.length === 1 && val.childrenId[0].id === null) {
-          return
+    if (val.childrenId.length) {
+      this.formValues.childrenId = val.childrenId.map(e => {
+        return {
+          value: e.id,
+          text: e.name
         }
-        item.value = val.childrenId.map(e => {
-          return {
-            value: e.id,
-            text: e.name
-          }
-        })
-        return
-      }
-      if (item.key === 'tag') {
-        item.value = val.tag?.id ?? null
+      })
+    }
+    this.formValues.tag = val.tag?.id ?? null
+    this.formItems.forEach(item => {
+      if (!Object.prototype.hasOwnProperty.call(val, item.key) || item.key === 'childrenId' || item.key === 'tag') {
         return
       }
-      item.value = val[item.key]
+      this.formValues[item.key] = val[item.key]
     })
   },
   methods: {
@@ -217,7 +120,7 @@ export default {
           const { data } = await api.dataLabelList({
             ...this.pageInfo
           })
-          this.formItems.options.find(e => e.key === 'tag').items = data.records
+          this.tagItems = data.records
           this.total = data.total
         } catch (error) {
           this.$snackbar.error(error)
@@ -232,17 +135,11 @@ export default {
       if (!this.$refs.form.validate()) {
         return
       }
-      return this.formItems.options.reduce((res, item) => {
-        if (item.hide) {
-          return res
-        }
-        if (item.key === 'childrenId') {
-          res.childrenId = item.value.map(e => e.value)
-          return res
-        }
-        res[item.key] = item.value
-        return res
-      }, {})
+      const { childrenId, ...obj } = this.formValues
+      return {
+        ...obj,
+        childrenId: childrenId.map(e => e.value)
+      }
     }
   }
 }