Merge pull request #3224 from jumpserver/pr@dev@change_attr_form

perf: 优化 attr form 字段选择

src/components/FormFields/JSONManyToManySelect/AttrFormDialog.vue

@@ -62,24 +62,12 @@ export default {
             }),
             on: {
               change: ([val], updateForm) => {
+                // 变化会影响 match 的选项
                 const attr = this.attrs.find(attr => attr.name === val)
                 if (!attr) return
-                this.formConfig.fields[2].el.attr = attr
+                const matchOption = vm.updateMatchOptions(attr)
-                const attrType = attr.type || 'str'
-                const matchSupports = typeMatchMapper[attrType]
-                attrMatchOptions.forEach((option) => {
-                  option.hidden = !matchSupports.includes(option.value)
-                })
-                let defaultValue = ''
-                if (['m2m', 'select'].includes(attrType)) {
-                  defaultValue = []
-                } else if (['bool'].includes(attrType)) {
-                  defaultValue = !!this.currentValue
-                } else {
-                  defaultValue = typeof this.currentValue === 'string' ? this.currentValue : ''
-                }
                 setTimeout(() => {
-                  updateForm({ match: matchSupports[0], value: defaultValue })
+                  updateForm({ match: matchOption.value })
                 }, 10)
               }
             }
@@ -91,14 +79,8 @@ export default {
             options: attrMatchOptions,
             on: {
               change: ([value], updateForm) => {
-                let defaultValue = ''
+                // 变化会影响 value 的选项
-                if (['in', 'ip_in', 'm2m'].includes(value)) {
-                  defaultValue = []
-                } else if (typeof vm.currentValue === 'string') {
-                  defaultValue = vm.currentValue
-                }
                 setTimeout(() => {
-                  updateForm({ value: defaultValue })
                   this.formConfig.fields[2].el.match = value
                 }, 10)
               }
@@ -126,9 +108,8 @@ export default {
     if (this.form.index === undefined || this.form.index === -1) {
       Object.assign(this.form, this.getDefaultAttrForm())
     }
-    this.formConfig.fields[2].el.attr = this.attrs.find(attr => attr.name === this.form.name)
+    this.updateMatchOptions()
-    this.formConfig.fields[2].el.match = this.form.match
+    this.$log.debug('Attr Form config: ', this.formConfig)
-    this.$log.debug('Form config: ', this.formConfig)
     this.loading = false
   },
   methods: {
@@ -148,6 +129,22 @@ export default {
     },
     onAttrDialogConfirm(form) {
       this.$emit('confirm', form)
+    },
+    updateMatchOptions(attr) {
+      if (!attr) {
+        attr = this.attrs.find(attr => attr.name === this.form.name)
+      }
+      if (!attr) return
+      const attrType = attr.type || 'str'
+      const matchSupports = typeMatchMapper[attrType]
+      attrMatchOptions.forEach((option) => {
+        option.hidden = !matchSupports.includes(option.value)
+      })
+      this.formConfig.fields[2].el.attr = attr
+      const supports = attrMatchOptions.filter(option => !option.hidden)
+      const matchOption = supports.find(item => item.value === this.form.match) || supports[0]
+      this.formConfig.fields[2].el.match = matchOption.value
+      return matchOption
     }
   }
 }

src/components/FormFields/JSONManyToManySelect/ValueField.vue

@@ -1,9 +1,9 @@
 <template>
   <div v-if="!loading">
-    <TagInput v-if="type === 'array'" :value="value" @input="handleInput" />
+    <TagInput v-if="type === 'array'" :value="iValue" @input="handleInput" />
-    <Select2 v-else-if="type === 'select'" :value="value" v-bind="attr.el" @change="handleInput" @input="handleInput" />
+    <Select2 v-else-if="type === 'select'" :value="iValue" v-bind="attr.el" @change="handleInput" @input="handleInput" />
-    <Switcher v-else-if="type === 'bool'" :value="value" @change="handleInput" @input="handleInput" />
+    <Switcher v-else-if="type === 'bool'" :value="iValue" @change="handleInput" @input="handleInput" />
-    <el-input v-else :value="value" @input="handleInput" />
+    <el-input v-else :value="iValue" @input="handleInput" />
   </div>
 </template>
 
@@ -35,35 +35,52 @@ export default {
       type: 'string'
     }
   },
+  computed: {
+    iValue: {
+      get() {
+        const multipleTypes = ['array', 'select']
+        let newValue = this.value
+        if (multipleTypes.includes(this.type)) {
+          if (!Array.isArray(this.value)) {
+            newValue = []
+          }
+        } else if (this.type === 'bool') {
+          newValue = !!this.value
+        } else {
+          if (Array.isArray(this.value)) {
+            newValue = ''
+          } else {
+            newValue = this.value.toString()
+          }
+        }
+        if (this.value !== newValue) {
+          this.handleInput(newValue)
+        }
+        return newValue
+      }
+    }
+  },
   watch: {
     match() {
-      this.setTypeAndValue()
+      this.changeValueType()
     },
     attr: {
       handler() {
-        this.setTypeAndValue()
+        this.changeValueType()
       },
       deep: true
     }
   },
   mounted() {
-    this.setTypeAndValue()
+    this.changeValueType()
   },
   methods: {
     handleInput(value) {
       this.$emit('input', value)
     },
-    setTypeAndValue() {
+    changeValueType() {
       this.loading = true
       this.type = this.getType()
-      this.$log.debug('ValueField: Type: ', this.type, 'Value: ', this.value, 'attr: ', this.attr)
-      if (['select', 'array'].includes(this.type) && typeof this.value === 'string') {
-        const value = this.value ? this.value.split(',') : []
-        this.handleInput(value)
-      } else if (this.type === 'bool') {
-        const value = !!this.value
-        this.handleInput(value)
-      }
       this.$nextTick(() => {
         this.loading = false
       })

src/i18n/langs/zh.json

@@ -223,7 +223,7 @@
   },
   "assets": {
     "CustomType": "自定义类型",
-    "CustomHelpMessage": "自定义类型资产，需要 Applet 插件的支持，请确保对应 Applet 已部署安装",
+    "CustomHelpMessage": "自定义类型资产，依赖于远程应用，请前往系统设置在远程应用中配置",
     "CustomFields": "自定义属性",
     "CommentHelpText": "注意：备注信息会在 Luna 页面的用户授权资产树中进行悬停显示，普通用户可以查看，请不要填写敏感信息。",
     "BulkUpdatePlatformHelpText": "只有资产的原平台类型与所选平台类型相同时才会进行更新，若更新前后的平台类型不同则不会更新。",
@@ -326,7 +326,7 @@
     "Domain": "网域",
     "DomainDetail": "网域详情",
     "DomainHelpMessage": "网域功能是为了解决部分环境（如：混合云）无法直接连接而新增的功能，原理是通过网关服务器进行跳转登录。JMS => 网域网关 => 目标资产",
-    "WebHelpMessage": "Web 类型资产依赖于远程应用，请前往系统设置在远程应用中配置发布机。",
+    "WebHelpMessage": "Web 类型资产依赖于远程应用，请前往系统设置在远程应用中配置",
     "FullName": "全称",
     "Gateway": "网关",
     "GatewayProtocolHelpText": "SSH网关，支持代理SSH,RDP和VNC",