NEZ-3354 fix：Asset attributes 元数据不同步问题

nezha-fronted/src/components/common/rightBox/assetMetaBox.vue

@@ -17,7 +17,7 @@
               <el-input placeholder="" maxlength="64" show-word-limit v-model="editAssetMeta.name" size="small" id="editAssetMeta-box-input-name"></el-input>
             </el-form-item>
             <el-form-item :label='$t("overall.key")' prop="metaKey">
-              <el-input placeholder="" maxlength="128" show-word-limit v-model="editAssetMeta.metaKey" size="small" id="editAssetMeta-box-input-key"></el-input>
+              <el-input :disabled="!!(editAssetMeta.id)" placeholder="" maxlength="128" show-word-limit v-model="editAssetMeta.metaKey" size="small" id="editAssetMeta-box-input-key"></el-input>
             </el-form-item>
             <el-form-item :label='$t("dashboard.dashboard.chartForm.group")' prop="groupId">
               <el-select v-model="editAssetMeta.groupId" size="small" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top prevent-clickoutside" :popper-append-to-body="false">
@@ -336,9 +336,7 @@ export default {
           t.disabled = false
         })
       } else if (value == 1) {
-        if (this.editAssetMeta.type !== 'RADIO' &&
-            this.editAssetMeta.type !== 'CHECKBOX' &&
-            this.editAssetMeta.type !== 'SELECT') {
+        if (this.editAssetMeta.type !== 'RADIO' && this.editAssetMeta.type !== 'CHECKBOX' && this.editAssetMeta.type !== 'SELECT') {
           flag = false
           this.editAssetMeta.type = 'RADIO'
         }

nezha-fronted/src/components/common/rightBox/software/softwareAssetBox.vue

@@ -52,7 +52,7 @@
 <!--          <el-form-item v-for="(value, key) in editSoftwareAsset.params" :label="key" :key="key">-->
 <!--            <el-input maxlength="128" show-word-limit v-model="editSoftwareAsset.params[key]" size="small" type="text" @input="$forceUpdate()"></el-input>-->
 <!--          </el-form-item>-->
-          <el-form-item prop="paramObj">
+          <el-form-item prop="paramObj" v-my-loading="loading">
             <div v-for="(label, i) in editSoftwareAsset.paramObj" :key="i" class="form__dotted-item form__dotted-item-required">
               <el-form-item :prop="'paramObj.' + i + '.value.0'" :rules="[ { required: JSON.parse(label.param).required === '1', message: $t('validate.required'), trigger: 'blur' }]">
                 <template v-slot:label>
@@ -155,7 +155,7 @@ import editRigthBox from '../../mixin/editRigthBox'
 import { sysObjectIdInput } from '@/components/common/js/validate'
 import iconList from '@/components/common/js/iconList'
 import { asset as assetConstants } from '@/components/common/js/constants'
-
+import axios from 'axios'
 export default {
   name: 'softwareAssetBox',
   components: {
@@ -235,7 +235,8 @@ export default {
             return row.dc ? row.dc.name : ''
           }
         }
-      ]
+      ],
+      loading: false
     }
   },
   watch: {
@@ -245,13 +246,7 @@ export default {
       handler (n) {
         this.isEdit = true
         const editSoftwareAsset = JSON.parse(JSON.stringify(n))
-        editSoftwareAsset.paramObj = []
         editSoftwareAsset.assetId = ''
-        // if (editSoftwareAsset.params) {
-        //   Object.keys(editSoftwareAsset.params).forEach(key => {
-        //     editSoftwareAsset.paramObj.push(editSoftwareAsset.params[key])
-        //   })
-        // }
         this.editSoftwareAsset = editSoftwareAsset
         this.oldData = this.$lodash.cloneDeep(this.editSoftwareAsset)
       }
@@ -293,15 +288,14 @@ export default {
           const params = {
             ...this.editSoftwareAsset
           }
-          params.params = {}
-          params.paramObj.forEach(item => {
-            if (item.type === 'CHECKBOX') {
-              params.params[item.metaKey] = item.value
-            } else if (item.type === 'DATETIME' && JSON.parse(item.param).interval) {
-              params.params[item.metaKey] = item.value
-            } else {
-              params.params[item.metaKey] = item.value[0]
+          params.params = {
+            connectorAttributeKeys: []
           }
+          params.paramObj.forEach(item => {
+            params.params.connectorAttributeKeys.push({
+              key: item.metaKey,
+              value: item.value
+            })
           })
           params.icon = this.imageUrl
           if (this.editSoftwareAsset.id) {
@@ -356,21 +350,58 @@ export default {
         return assetData
       }
     },
-    renderParams () {
-      this.editSoftwareAsset.paramObj = []
+    async renderParams () {
+      // 获取当前type的attributes key
+      this.loading = true
       const findItem = this.softwareTypeArr.find(item => item.id == this.editSoftwareAsset.typeId)
-      if (findItem.params) {
-        Object.keys(findItem.params).forEach(key => {
-          if (findItem.params[key].type === 'CHECKBOX') {
-            findItem.params[key].value = this.editSoftwareAsset.params[key] ? this.editSoftwareAsset.params[key] : findItem.params[key].value
-          } else if (findItem.params[key].type === 'DATETIME' && JSON.parse(findItem.params[key].param).interval) {
-            findItem.params[key].value = this.editSoftwareAsset.params[key] ? this.editSoftwareAsset.params[key] : findItem.params[key].value
-          } else {
-            findItem.params[key].value = this.editSoftwareAsset.params[key] ? [this.editSoftwareAsset.params[key]] : findItem.params[key].value
-          }
-          this.editSoftwareAsset.paramObj.push(findItem.params[key])
+      const connectorAttributeKeys = this.$lodash.get(findItem, 'params.connectorAttributeKeys', [])
+      const requests = connectorAttributeKeys.map(key => {
+        return this.$get('asset/field/meta', { key: key })
       })
+      const paramObj = []
+      const res = await axios.all(requests)
+      res.forEach(response => {
+        const data = this.$lodash.get(response, 'data.list.0')
+        if (data) {
+          paramObj.push({ ...data, value: this.blankLabelValue(data), action: 0 })
+        }
+      })
+      // 设置填写过的值
+      const keyValue = this.$lodash.get(this.editSoftwareAsset, 'params.connectorAttributeKeys', [])
+      paramObj.forEach(item => {
+        const findValue = keyValue.find(subItem => subItem.key == item.metaKey)?.value
+        findValue && (item.value = findValue)
+      })
+      this.$set(this.editSoftwareAsset, 'paramObj', paramObj)
       this.oldData = this.$lodash.cloneDeep(this.editSoftwareAsset)
+      this.loading = false
+    },
+    blankLabelValue (label) {
+      const defaultValue = JSON.parse(label.param).default || ''
+      if (label.type.toUpperCase() === this.assetConstants.labelTypeData.CHECKBOX) {
+        const arr = []
+        if (label.param && JSON.parse(label.param).items) {
+          JSON.parse(label.param).items.forEach(item => {
+            if (item.check) {
+              arr.push(item.name)
+            }
+          })
+        }
+        return arr
+      } else if (label.type.toUpperCase() === this.assetConstants.labelTypeData.MULTITEXT || label.type.toUpperCase() === assetConstants.labelTypeData.TEXT || label.type.toUpperCase() === assetConstants.labelTypeData.TEXTAREA) {
+        return [defaultValue]
+      } else if (label.type.toUpperCase() === this.assetConstants.labelTypeData.RADIO || label.type.toUpperCase() === assetConstants.labelTypeData.SELECT) {
+        const arr = ['']
+        if (label.param && JSON.parse(label.param).items) {
+          JSON.parse(label.param).items.forEach(item => {
+            if (item.check) {
+              arr[0] = item.name
+            }
+          })
+        }
+        return arr
+      } else {
+        return [defaultValue]
       }
     }
   }

nezha-fronted/src/components/common/rightBox/software/softwareTypeBox.vue

@@ -44,7 +44,8 @@
           <div class="form__sub-title" >
             <span>{{$t('softwareType.params')}}</span>
           </div>
-          <el-form-item prop="paramObj">
+          <!-- 此处属性只展示不可修改 -->
+          <el-form-item prop="paramObj" v-my-loading="loading">
             <div v-for="(label, i) in editSoftwareType.paramObj" :key="i" class="form__dotted-item form__dotted-item-required">
               <el-form-item :prop="'paramObj.' + i + '.value.0'" :rules="[]">
                 <template v-slot:label>
@@ -56,56 +57,59 @@
                   </div>
                 </template>
                 <template v-if="label.action !== 1">
+                  <!-- TEXT -->
                   <template v-if="label.type.toUpperCase() === assetConstants.labelTypeData.TEXT">
-                    <el-input v-model="label.value[0]" size="small"/>
+                    <el-input disabled v-model="label.value[0]" size="small"/>
                   </template>
+                  <!-- PASSWORD -->
                   <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.PASSWORD">
-                    <el-input v-model="label.value[0]" type="password" size="small"/>
-                  </template>
-                  <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.MULTITEXT">
-                    <div v-for="(value, i) in label.value" :key="i" class="label__multi-text">
-                      <el-input v-model="label.value[i]" size="small"/>
-                      <span @click="addMultiTextRow(label)" style="margin: 0 5px" :title="$t('tip.add')"><i class="nz-icon nz-icon-plus"></i></span>
-                      <span @click="removeMultiTextRow(label, i)" :title="$t('overall.delete')"><i class="nz-icon nz-icon-minus"></i></span>
-                    </div>
+                    <el-input disabled v-model="label.value[0]" type="password" size="small"/>
                   </template>
+                  <!-- TEXTAREA -->
                   <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.TEXTAREA">
-                    <el-input v-model="label.value[0]" :maxlength="4096" show-word-limit size="small" :rows="2" type="textarea"/>
+                    <el-input disabled v-model="label.value[0]" :maxlength="4096" show-word-limit size="small" :rows="2" type="textarea"/>
                   </template>
+                  <!-- RADIO -->
                   <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.RADIO">
-                    <el-radio-group v-model="label.value[0]">
+                    <el-radio-group disabled v-model="label.value[0]">
                       <el-radio v-for="item in JSON.parse(label.param).items" :key="item.name" :label="item.name">{{item.name}}</el-radio>
                     </el-radio-group>
                   </template>
+                  <!-- CHECKBOX -->
                   <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.CHECKBOX">
-                    <el-checkbox-group v-model="label.value">
+                    <el-checkbox-group disabled v-model="label.value">
                       <el-checkbox v-for="item in JSON.parse(label.param).items" :key="item.name" :label="item.name" :value="item.name"></el-checkbox>
                     </el-checkbox-group>
                   </template>
+                  <!-- SELECT -->
                   <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.SELECT">
-                    <el-select v-model="label.value[0]" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top prevent-clickoutside" size="small">
+                    <el-select disabled v-model="label.value[0]" class="right-box__select" :placeholder="$t('el.select.placeholder')" popper-class="right-box-select-top prevent-clickoutside" size="small">
                       <el-option v-for="item in JSON.parse(label.param).items" :key="item.name" :label="item.name" :value="item.name"></el-option>
                     </el-select>
                   </template>
+                  <!-- INTEGER -->
                   <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.INTEGER">
-                    <el-input v-model="label.value[0]" oninput="value=value.replace(/[^\d]/g,'')" size="small"></el-input>
+                    <el-input disabled v-model="label.value[0]" oninput="value=value.replace(/[^\d]/g,'')" size="small"></el-input>
                   </template>
+                  <!-- DOUBLE -->
                   <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.DOUBLE">
-                    <el-input-number v-model="label.value[0]" :controls="false" size="small" :precision="JSON.parse(label.param).decimals" style="width: 100%;text-align: left" :max="10000000000000000000" :min="-10000000000000000000"></el-input-number>
+                    <el-input-number disabled v-model="label.value[0]" :controls="false" size="small" :precision="JSON.parse(label.param).decimals" style="width: 100%;text-align: left" :max="10000000000000000000" :min="-10000000000000000000"></el-input-number>
                   </template>
+                  <!-- DATETIME -->
                   <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.DATETIME">
                     <template v-if="JSON.parse(label.param).subType === assetConstants.labelSubTypeData.time">
                       <div v-if="JSON.parse(label.param).interval" style="display: flex; justify-content: space-between">
-                        <el-time-select v-model="label.value[0]" size="small"></el-time-select>
-                        <el-time-select v-model="label.value[1]" size="small"></el-time-select>
+                        <el-time-select disabled v-model="label.value[0]" size="small"></el-time-select>
+                        <el-time-select disabled v-model="label.value[1]" size="small"></el-time-select>
                       </div>
                       <template v-else>
-                        <el-time-select v-model="label.value[0]" size="small" style="width: 100%"></el-time-select>
+                        <el-time-select disabled v-model="label.value[0]" size="small" style="width: 100%"></el-time-select>
                       </template>
                     </template>
                     <template v-else>
                       <template v-if="JSON.parse(label.param).interval">
                         <my-date-picker
+                          disabled
                           id="asset-box-input-purchase-date"
                           v-model="label.value"
                           :type="JSON.parse(label.param).subType === assetConstants.labelSubTypeData.date ? 'daterange' : 'datetimerange'"
@@ -118,6 +122,7 @@
                       </template>
                       <template v-else>
                         <my-date-picker
+                          disabled
                           id="asset-box-input-parchase-date"
                           v-model="label.value[0]"
                           :type="JSON.parse(label.param).subType"
@@ -130,8 +135,9 @@
                       </template>
                     </template>
                   </template>
+                  <!-- EMAIL -->
                   <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.EMAIL">
-                    <el-input v-model="label.value[0]" size="small"/>
+                    <el-input disabled v-model="label.value[0]" size="small"/>
                   </template>
                 </template>
               </el-form-item>
@@ -171,7 +177,7 @@ import editRigthBox from '../../mixin/editRigthBox'
 import { sysObjectIdInput } from '@/components/common/js/validate'
 import iconList from '@/components/common/js/iconList'
 import { asset as assetConstants } from '@/components/common/js/constants'
-
+import axios from 'axios'
 export default {
   name: 'softwareTypeBox',
   components: {
@@ -252,7 +258,8 @@ export default {
             })
           }
         }
-      }
+      },
+      loading: false
     }
   },
   watch: {
@@ -263,13 +270,8 @@ export default {
         this.isEdit = true
         const editSoftwareType = JSON.parse(JSON.stringify(n))
         this.imageUrl = editSoftwareType.icon
-        editSoftwareType.paramObj = []
-        if (editSoftwareType.params) {
-          Object.keys(editSoftwareType.params).forEach(key => {
-            editSoftwareType.paramObj.push(editSoftwareType.params[key])
-          })
-        }
         this.editSoftwareType = editSoftwareType
+        this.renderParams()
       }
     }
   },
@@ -279,6 +281,24 @@ export default {
     this.getFieldGroupData()
   },
   methods: {
+    // 根据key 请求Asset attributes
+    async renderParams () {
+      this.loading = true
+      const connectorAttributeKeys = this.$lodash.get(this.editSoftwareType, 'params.connectorAttributeKeys', [])
+      const requests = connectorAttributeKeys.map(key => {
+        return this.$get('asset/field/meta', { key: key })
+      })
+      const paramObj = []
+      const res = await axios.all(requests)
+      res.forEach(response => {
+        const data = this.$lodash.get(response, 'data.list.0')
+        if (data) {
+          paramObj.push({ ...data, value: this.blankLabelValue(data), action: 0 })
+        }
+      })
+      this.$set(this.editSoftwareType, 'paramObj', paramObj)
+      this.loading = false
+    },
     clickOutside () {
       this.esc(false)
     },
@@ -313,9 +333,11 @@ export default {
             ...this.editSoftwareType
           }
           params.icon = this.imageUrl
-          params.params = {}
+          params.params = {
+            connectorAttributeKeys: []
+          }
           params.paramObj.forEach(item => {
-            params.params[item.metaKey] = item
+            params.params.connectorAttributeKeys.push(item.metaKey)
           })
           if (this.editSoftwareType.id) {
             this.$put(this.url, params).then(res => {

nezha-fronted/src/components/common/table/asset/assetMetaTable.vue

@@ -66,7 +66,7 @@
         </div>
         <div v-else-if=" item.prop === 'type' ">
           <div v-if="scope.row[item.prop].toUpperCase() == 'TEXT'"><i class="nz-icon nz-icon-text"></i>&nbsp;&nbsp;{{typeData[0].name}}</div>
-          <div v-else-if="scope.row[item.prop].toUpperCase() == 'MULTITEXT'"><i class="nz-icon nz-icon-multitext"></i>&nbsp;&nbsp;{{typeData[1].name}}</div>
+          <!-- <div v-else-if="scope.row[item.prop].toUpperCase() == 'MULTITEXT'"><i class="nz-icon nz-icon-multitext"></i>&nbsp;&nbsp;{{typeData[1].name}}</div> -->
           <div v-else-if="scope.row[item.prop].toUpperCase() == 'TEXTAREA'"><i class="nz-icon nz-icon-textarea"></i>&nbsp;&nbsp;{{typeData[1].name}}</div>
           <div v-else-if="scope.row[item.prop].toUpperCase() == 'RADIO'"><i class="nz-icon nz-icon-radio"></i>&nbsp;&nbsp;{{typeData[2].name}}</div>
           <div v-else-if="scope.row[item.prop].toUpperCase() == 'CHECKBOX'"><i class="nz-icon nz-icon-checkbox"></i>&nbsp;&nbsp;{{typeData[3].name}}</div>
@@ -245,7 +245,7 @@ export default {
           value: 'EMAIL',
           name: this.$t('config.assetLabel.email')
         }
-      ],
+      ]
     }
   },
   methods: {