perf: 修改完成 m2m json field

src/components/FormFields/JSONManyToManySelect/ValueField.vue

@@ -31,11 +31,42 @@ export default {
   },
   data() {
     return {
-      loading: false
+      loading: true,
+      type: 'string'
     }
   },
-  computed: {
+  watch: {
-    type() {
+    match() {
+      this.getSetType()
+    },
+    attr: {
+      handler() {
+        this.getSetType()
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.getSetType()
+    this.loading = false
+  },
+  methods: {
+    handleInput(value) {
+      this.$emit('input', value)
+    },
+    getSetType() {
+      this.loading = true
+      this.type = this.getType()
+      if (['select', 'array'].includes(this.type) && typeof this.value === 'string') {
+        const value = this.value ? this.value.split(',') : []
+        console.log('Type: ', this.type, 'Value: ', value)
+        this.handleInput(value)
+      }
+      this.$nextTick(() => {
+        this.loading = false
+      })
+    },
+    getType() {
       const attrType = this.attr.type
       if (attrType === 'm2m') {
         return 'select'
@@ -44,28 +75,12 @@ export default {
       } else if (attrType === 'select') {
         return 'select'
       }
-      if (this.match in ['in', 'ip_in']) {
+      if (['in', 'ip_in'].includes(this.match)) {
         return 'array'
       } else {
         return 'string'
       }
     }
-  },
-  watch: {
-    attr: {
-      handler() {
-        this.loading = true
-        this.$nextTick(() => {
-          this.loading = false
-        })
-      },
-      deep: true
-    }
-  },
-  methods: {
-    handleInput(value) {
-      this.$emit('input', value)
-    }
   }
 }
 </script>

src/components/FormFields/JSONManyToManySelect/index.vue

@@ -19,6 +19,7 @@
       </div>
     </div>
     <Dialog
+      v-if="attrFormVisible"
       :destroy-on-close="true"
       :show-buttons="false"
       :title="$tc('common.SelectAttrs')"
@@ -125,8 +126,9 @@ export default {
       iValue: Object.assign({ type: 'all' }, this.value),
       attrMatchTableConfig: {
         headerActions: {
-          hasRightActions: false,
           hasCreate: false,
+          hasImport: false,
+          hasExport: false,
           hasMoreActions: false
         },
         tableConfig: {
@@ -134,7 +136,8 @@ export default {
           columns: this.attrs.filter(item => item.inTable).map(item => {
             return {
               prop: item.name,
-              label: item.label
+              label: item.label,
+              formatter: item.formatter
             }
           })
         }
@@ -153,7 +156,7 @@ export default {
           { prop: 'name', label: this.$t('common.AttrName'), formatter: tableFormatter('name') },
           { prop: 'match', label: this.$t('common.Match'), formatter: tableFormatter('match') },
           { prop: 'value', label: this.$t('common.AttrValue'), formatter: ValueFormatter, formatterArgs: { attrs: this.attrs }},
-          { prop: 'action', label: this.$t('common.Action'), formatter: (row, col, cellValue, index) => {
+          { prop: 'action', label: this.$t('common.Action'), align: 'center', width: '120px', formatter: (row, col, cellValue, index) => {
             return (
               <div className='input-button'>
                 <el-button
@@ -198,7 +201,7 @@ export default {
                 attrMatchOptions.forEach((option) => {
                   option.hidden = !matchSupports.includes(option.value)
                 })
-                setTimeout(() => updateForm({ match: matchSupports[0] }), 0.1)
+                setTimeout(() => updateForm({ match: matchSupports[0], value: '' }), 0.1)
               }
             }
           },
@@ -226,6 +229,13 @@ export default {
       }
     }
   },
+  watch: {
+    attrFormVisible(val) {
+      if (!val) {
+        this.getAttrsCount()
+      }
+    }
+  },
   mounted() {
     this.formConfig.form = this.getDefaultAttrForm()
     if (this.value.type === 'attrs') {
@@ -240,13 +250,17 @@ export default {
       this.attrMatchTableConfig.tableConfig.url = setUrlParam(this.select2.url, 'attr_rules', attrFilter)
     },
     getAttrFilterKey() {
+      if (this.tableConfig.totalData.length === 0) return ''
       let attrFilter = { type: 'attrs', attrs: this.tableConfig.totalData }
       attrFilter = encodeURIComponent(btoa(JSON.stringify(attrFilter)))
       return attrFilter
     },
     getAttrsCount() {
       const attrFilter = this.getAttrFilterKey()
-      console.log('attrFilter', attrFilter)
+      if (!attrFilter) {
+        this.attrMatchCount = 0
+        return
+      }
       let url = setUrlParam(this.select2.url, 'attr_rules', attrFilter)
       url = setUrlParam(url, 'limit', 1)
       return this.$axios.get(url).then(res => {
@@ -288,7 +302,7 @@ export default {
       const options = this.formConfig.fields[0].options
       const used = this.tableConfig.totalData.map(attr => attr.name)
       options.forEach(opt => {
-        if (used.includes(opt.value)) {
+        if (used.includes(opt.value) && opt.value !== this.formConfig.form.name) {
           opt.disabled = true
         } else {
           delete opt.disabled

src/i18n/langs/zh.json

@@ -456,7 +456,7 @@
     "ReLoginErr": "登录时长已超过 5 分钟，请重新登录"
   },
   "common": {
-    "MatchedCount": "匹配条目",
+    "MatchedCount": "匹配结果",
     "SelectAttrs": "选择属性",
     "MatchResult": "匹配结果",
     "GreatEqualThan": "大于等于",

src/views/assets/Asset/AssetCreateUpdate/components/AssetAccounts.vue

@@ -19,7 +19,7 @@
             <span v-else>-</span>
           </template>
         </el-table-column>
-        <el-table-column :label="$tc('common.Actions')" align="right" class-name="buttons" fixed="right" width="135">
+        <el-table-column :label="$tc('common.Actions')" align="center" class-name="buttons" fixed="right" width="135">
           <template v-slot="scope">
             <el-button icon="el-icon-minus" size="mini" type="danger" @click="removeAccount(scope.row)" />
             <el-button :disabled="scope.row.template" icon="el-icon-edit" size="mini" type="primary" @click="onEditClick(scope.row)" />

src/views/assets/const.js

@@ -209,6 +209,7 @@ export const assetJSONSelectMeta = (vm) => {
           label: vm.$t('assets.Category'),
           type: 'select',
           inTable: true,
+          formatter: (row, column, cellValue) => cellValue.label,
           el: {
             options: categories
           }
@@ -218,6 +219,7 @@ export const assetJSONSelectMeta = (vm) => {
           label: vm.$t('assets.Type'),
           type: 'select',
           inTable: true,
+          formatter: (row, column, cellValue) => cellValue.label,
           el: {
             options: types
           }

src/views/users/User/UserList.vue

@@ -61,6 +61,11 @@ export default {
           source: {
             width: '120px'
           },
+          username: {
+            formatter: (row) => {
+              return row['username'].replace(' ', '*')
+            }
+          },
           system_roles: {
             width: '100px',
             label: this.$t('users.SystemRoles'),

src/views/users/const.js

@@ -7,7 +7,7 @@ export const userJSONSelectMeta = (vm) => {
       value: [],
       resource: vm.$t('users.Users'),
       select2: {
-        url: '/api/v1/users/users/?fields_size=mini',
+        url: '/api/v1/users/users/',
         ajax: {
           transformOption: (item) => {
             return { label: item.name + '(' + item.username + ')', value: item.id }