更换组件

src/components/MForm/index.vue

@@ -16,12 +16,12 @@
                       :rules="item.rules"
                       :hide-details="item.hideDetails ?? false"
                       :disabled="item.disabled"
-                      :dense="item.dense"
+                      :dense="item.dense ?? true"
                       :style="{width: item.width}"
                       :color="item.color"
                       :label="item.label"
                       :placeholder="item.placeholder || item.label"
-                      :outlined="item.outlined"
+                      :outlined="item.outlined ?? true"
                       :autofocus="item.autofocus"
                       :required="item.required"
                       :class="item.class"
@@ -49,8 +49,8 @@
                       :items="item.items"
                       :item-text="item.itemText || 'label'"
                       :item-value="item.itemValue || 'value'"
-                      :outlined="item.outlined"
-                      :dense="item.dense"
+                      :outlined="item.outlined ?? true"
+                      :dense="item.dense ?? true"
                       :disabled="item.disabled"
                       :multiple="item.multiple"
                       :clearable="item.clearable"
@@ -82,8 +82,8 @@
                       :items="item.canCreate ? [inputUpdateValue, ...item.items].filter(Boolean) : item.items"
                       :item-text="item.itemText || 'label'"
                       :item-value="item.itemValue || 'value'"
-                      :outlined="item.outlined"
-                      :dense="item.dense"
+                      :outlined="item.outlined ?? true"
+                      :dense="item.dense ?? true"
                       :multiple="item.multiple"
                       :clearable="item.clearable"
                       :search-input.sync="item.searchInput"
@@ -107,8 +107,8 @@
                       :items="item.items"
                       :item-text="item.itemText || 'label'"
                       :item-value="item.itemValue || 'value'"
-                      :outlined="item.outlined"
-                      :dense="item.dense"
+                      :outlined="item.outlined ?? true"
+                      :dense="item.dense ?? true"
                       :clearable="item.clearable"
                       :disabled="item.disabled"
                       @change="handleChange(item)"
@@ -132,9 +132,9 @@
                     :label="item.label"
                     :placeholder="item.placeholder || item.label"
                     :no-resize="!item.resize"
-                    :outlined="item.outlined"
+                    :outlined="item.outlined ?? true"
                     :readonly="item.readonly"
-                    :dense="item.dense"
+                    :dense="item.dense ?? true"
                     :rows="item.rows || 3"
                     :disabled="item.disabled"
                     @change="handleChange(item)"
@@ -184,8 +184,8 @@
                     :append-icon="item.appendIcon"
                     :append-outer-icon="item.appendOuterIcon"
                     :show-size="item.showSize"
-                    :outlined="item.outlined"
-                    :dense="item.dense"
+                    :outlined="item.outlined ?? true"
+                    :dense="item.dense ?? true"
                     v-model="query[item.key]"
                     :placeholder="item.placeholder || item.label"
                     :hint="item.hint"

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

@@ -1,20 +1,16 @@
 <template>
-  <form-list ref="form" class="mt-5" :items="formItems"></form-list>
+  <m-form ref="form" class="mt-5" :items="formItems" v-model="formValues"></m-form>
 </template>
 
 <script>
-import FormList from '@/components/Form/list'
+import MForm from '@/components/MForm'
 
 import { metadata, metadataType } from '@/utils/dataGovernance'
 import { api } from '@/api/dataGovernance'
-const defaultOption = {
-  value: null,
-  outlined: true,
-  dense: true
-}
+
 export default {
   name: 'metadata-edit',
-  components: { FormList },
+  components: { MForm },
   props: {
     itemData: {
       type: Object,
@@ -23,88 +19,83 @@ export default {
   },
   data () {
     return {
-      formItems: {
-        options: [
-          {
-            type: 'text',
-            key: 'name',
-            label: '请输入中文名称 *',
-            ...defaultOption,
-            rules: [v => !!v || '请输入中文名称']
-          },
-          {
-            type: 'text',
-            key: 'en_name',
-            label: '请输入英文名称 *',
-            ...defaultOption,
-            rules: [v => !!v || '请输入英文名称']
-          },
-          {
-            type: 'autocomplete',
-            key: 'category',
-            label: '请选择分类 *',
-            noAttach: true,
-            ...defaultOption,
-            rules: [v => !!v || '请选择分类'],
-            items: metadata
-          },
-          {
-            type: 'text',
-            key: 'alias',
-            label: '请输入别名',
-            ...defaultOption
-          },
-          {
-            type: 'text',
-            key: 'affiliation',
-            label: '请输入制作单位',
-            ...defaultOption
-          },
-          {
-            type: 'autocomplete',
-            key: 'type',
-            label: '请选择数据类型 *',
-            col: 6,
-            noAttach: true,
-            ...defaultOption,
-            rules: [v => !!v || '请选择数据类型'],
-            items: metadataType
-          },
-          {
-            type: 'autocomplete',
-            key: 'tag',
-            value: null,
-            label: '请选择标签',
-            col: 6,
-            noAttach: true,
-            outlined: true,
-            dense: true,
-            itemText: 'name',
-            itemValue: 'id',
-            items: []
-          },
-          {
-            type: 'text',
-            key: 'describe',
-            label: '请输入描述',
-            ...defaultOption
-          },
-          {
-            type: 'ifRadio',
-            key: 'status',
-            value: 1,
-            label: '启用',
-            width: 120,
-            items: [{ label: '是', value: 1 }, { label: '否', value: 0 }]
-          }
-        ]
-      },
+      formValues: {},
       pageInfo: {
         size: 50,
         current: 1
       },
       total: 0,
-      loading: false
+      loading: false,
+      tagItems: []
+    }
+  },
+  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: '请选择分类 *',
+          noAttach: true,
+          rules: [v => !!v || '请选择分类'],
+          items: metadata
+        },
+        {
+          type: 'text',
+          key: 'alias',
+          label: '请输入别名'
+        },
+        {
+          type: 'text',
+          key: 'affiliation',
+          label: '请输入制作单位'
+        },
+        {
+          type: 'autocomplete',
+          key: 'type',
+          label: '请选择数据类型 *',
+          col: 6,
+          noAttach: true,
+          rules: [v => !!v || '请选择数据类型'],
+          items: metadataType
+        },
+        {
+          type: 'autocomplete',
+          key: 'tag',
+          value: null,
+          label: '请选择标签',
+          col: 6,
+          noAttach: true,
+          itemText: 'name',
+          itemValue: 'id',
+          items: this.tagItems
+        },
+        {
+          type: 'text',
+          key: 'describe',
+          label: '请输入描述'
+        },
+        {
+          type: 'ifRadio',
+          key: 'status',
+          value: 1,
+          label: '启用',
+          width: 120,
+          items: [{ label: '是', value: 1 }, { label: '否', value: 0 }]
+        }
+      ]
     }
   },
   created () {
@@ -112,8 +103,8 @@ export default {
     if (!this.itemData.id) {
       return
     }
-    this.formItems.options.forEach(item => {
-      item.value = this.itemData[item.key]
+    this.formItems.forEach(item => {
+      this.formValues[item.key] = this.itemData[item.key]
     })
   },
   methods: {
@@ -124,7 +115,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)
@@ -140,10 +131,10 @@ export default {
         return
       }
       const id = this.itemData.id
-      return this.formItems.options.reduce((res, item) => {
-        res[item.key] = item.value
-        return res
-      }, { id })
+      return {
+        ...this.formValues,
+        id
+      }
     }
   }
 

src/views/dataOrigin/unstructuredData/manualCollection/components/ManualImportEdit.vue

@@ -1,47 +1,41 @@
 <template>
-  <form-list :items="items"></form-list>
+  <m-form :items="formItems" v-model="formValues"></m-form>
 </template>
 
 <script>
-import FormList from '@/components/Form/list'
+import MForm from '@/components/MForm'
 export default {
   name: 'manual-import-edit',
   components: {
-    FormList
+    MForm
   },
   data () {
     return {
-      items: {
-        options: [
-          {
-            type: 'text',
-            key: 'title',
-            value: null,
-            label: '请输入标题 *',
-            outlined: true,
-            dense: true,
-            rules: [v => !!v || '请输入标题']
-          },
-          {
-            type: 'text',
-            key: 'name',
-            value: null,
-            label: '请输入姓名 *',
-            outlined: true,
-            dense: true,
-            rules: [v => !!v || '请输入姓名']
-          },
-          {
-            type: 'text',
-            key: 'origin',
-            value: null,
-            label: '请输入来源 *',
-            outlined: true,
-            dense: true,
-            rules: [v => !!v || '请输入来源']
-          }
-        ]
-      }
+      formValues: {
+        title: null,
+        name: null,
+        origin: null
+      },
+      formItems: [
+        {
+          type: 'text',
+          key: 'title',
+          label: '请输入标题 *',
+          rules: [v => !!v || '请输入标题']
+        },
+        {
+          type: 'text',
+          key: 'name',
+          label: '请输入姓名 *',
+          rules: [v => !!v || '请输入姓名']
+        },
+        {
+          type: 'text',
+          key: 'origin',
+          label: '请输入来源 *',
+          rules: [v => !!v || '请输入来源']
+        }
+      ]
     }
   },
   methods: {

src/views/systemManage/user/components/resetPassword.vue

@@ -1,28 +1,28 @@
 <template>
-  <form-list class="mt-5" ref="form" :items="option" />
+  <m-form class="mt-5" ref="form" :items="formItems" v-model="formValues" />
 </template>
 
 <script>
-import FormList from '@/components/Form/list'
+import MForm from '@/components/MForm'
 export default {
   name: 'reset-password',
-  components: { FormList },
+  components: { MForm },
   data () {
     return {
       value: null,
-      option: {
-        options: [
-          {
-            type: 'password',
-            key: 'newPwd',
-            value: null,
-            label: '请输入新密码 *',
-            outlined: true,
-            dense: true,
-            rules: [v => !!v || '请输入新密码']
-          }
-        ]
-      }
+      formValues: {
+        newPwd: ''
+      },
+      formItems: [
+        {
+          type: 'password',
+          key: 'newPwd',
+          label: '请输入新密码 *',
+          outlined: true,
+          dense: true,
+          rules: [v => !!v || '请输入新密码']
+        }
+      ]
     }
   },
   methods: {
@@ -30,10 +30,7 @@ export default {
       return this.$refs.form.$refs.form.validate()
     },
     getValue () {
-      return this.option.options.reduce((s, k) => {
-        s[k.key] = k.value
-        return s
-      }, {})
+      return this.formValues
     }
   }
 }