NEZ-3070 fix:software asset列表编辑页面

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

@@ -57,6 +57,92 @@
           <div class="form__sub-title" >
             <span>{{$t('softwareAsset.Connector')}}</span>
           </div>
+<!--          <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">
+            <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>
+                  <div class="form__labels-label">
+                    <span>{{label.name}}</span>
+                  </div>
+                </template>
+                <template v-if="label.action !== 1">
+                  <template v-if="label.type.toUpperCase() === assetConstants.labelTypeData.TEXT">
+                    <el-input v-model="label.value[0]" size="small"/>
+                  </template>
+                  <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.TEXTAREA">
+                    <el-input v-model="label.value[0]" :maxlength="4096" show-word-limit size="small" :rows="2" type="textarea"/>
+                  </template>
+                  <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.RADIO">
+                    <el-radio-group 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>
+                  <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.CHECKBOX">
+                    <el-checkbox-group 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>
+                  <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-option v-for="item in JSON.parse(label.param).items" :key="item.name" :label="item.name" :value="item.name"></el-option>
+                    </el-select>
+                  </template>
+                  <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>
+                  </template>
+                  <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>
+                  </template>
+                  <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>
+                      </div>
+                      <template v-else>
+                        <el-time-select 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
+                          id="asset-box-input-purchase-date"
+                          v-model="label.value"
+                          :type="JSON.parse(label.param).subType === assetConstants.labelSubTypeData.date ? 'daterange' : 'datetimerange'"
+                          placeholder=""
+                          popper-class="right-box-select-top"
+                          size="small"
+                          :format="timeFormatStrToDatePickFormat(timeFormatMain,JSON.parse(label.param).subType === assetConstants.labelSubTypeData.date)"
+                          style="width: 100%">
+                        </my-date-picker>
+                      </template>
+                      <template v-else>
+                        <my-date-picker
+                          id="asset-box-input-parchase-date"
+                          v-model="label.value[0]"
+                          :type="JSON.parse(label.param).subType"
+                          placeholder=""
+                          popper-class="right-box-select-top"
+                          size="small"
+                          style="width: 100%"
+                          :format="timeFormatStrToDatePickFormat(timeFormatMain, JSON.parse(label.param).subType === assetConstants.labelSubTypeData.date)">
+                        </my-date-picker>
+                      </template>
+                    </template>
+                  </template>
+                  <template v-else-if="label.type.toUpperCase() === assetConstants.labelTypeData.EMAIL">
+                    <el-input v-model="label.value[0]" size="small"/>
+                  </template>
+                </template>
+              </el-form-item>
+            </div>
+          </el-form-item>
         </el-form>
       </div>
     </div>
@@ -100,6 +186,7 @@ export default {
     const vm = this
     return {
       assetConstants,
+      disabled: false,
       editSoftwareAsset: {
         id: '',
         name: '',
@@ -157,7 +244,7 @@ export default {
             return row.dc ? row.dc.name : ''
           }
         }
-      ],
+      ]
     }
   },
   watch: {
@@ -167,9 +254,16 @@ export default {
       handler (n) {
         this.isEdit = true
         const editSoftwareAsset = JSON.parse(JSON.stringify(n))
+        editSoftwareAsset.paramObj = []
+        // if (editSoftwareAsset.params) {
+        //   Object.keys(editSoftwareAsset.params).forEach(key => {
+        //     editSoftwareAsset.paramObj.push(editSoftwareAsset.params[key])
+        //   })
+        // }
+        editSoftwareAsset.assetId = editSoftwareAsset.assetId + ''
         this.editSoftwareAsset = editSoftwareAsset
       }
-    },
+    }
   },
   created () {
     this.getProjectList()
@@ -203,11 +297,11 @@ export default {
           const params = {
             ...this.editSoftwareAsset
           }
-          params.icon = this.imageUrl
           params.params = {}
           params.paramObj.forEach(item => {
-            params.params[item.name] = item
+            params.params[item.name] = item.value
           })
+          params.icon = this.imageUrl
           if (this.editSoftwareAsset.id) {
             this.$put(this.url, params).then(res => {
               this.prevent_opt.save = false
@@ -254,6 +348,9 @@ export default {
       this.$get('asset/software/type', { pageSize: -1, pageNo: 1 }).then(response => {
         if (response.code === 200) {
           this.softwareTypeArr = response.data.list
+          if (this.editSoftwareAsset.typeId) {
+            this.renderParams()
+          }
         }
       })
     },
@@ -266,7 +363,15 @@ export default {
       }
     },
     renderParams () {
-      this.editSoftwareAsset.params = {}
+      this.editSoftwareAsset.paramObj = []
+      const findItem = this.softwareTypeArr.find(item => item.id == this.editSoftwareAsset.typeId)
+      if (findItem.params) {
+        Object.keys(findItem.params).forEach(key => {
+          findItem.params[key].value = this.editSoftwareAsset.params[key] ? this.editSoftwareAsset.params[key].value : findItem.params[key].value
+          this.editSoftwareAsset.paramObj.push(findItem.params[key])
+        })
+        console.log(this.editSoftwareAsset.paramObj)
+      }
     }
   }
 }

nezha-fronted/src/components/common/table/settings/softwareTypeTable.vue

@@ -52,10 +52,10 @@
             </div>
           </span>
           <template v-else-if="item.prop === 'cts'">
-            <template>{{scope.row[item.prop] ? utcTimeToTimezoneStr(scope.row[item.prop]) : '-'}}</template>
+            <template>{{scope.row[item.prop] ? momentTz(scope.row[item.prop]) : '-'}}</template>
           </template>
           <template v-else-if="item.prop === 'uts'">
-            <template>{{scope.row[item.prop] ? utcTimeToTimezoneStr(scope.row[item.prop]) : '-'}}</template>
+            <template>{{scope.row[item.prop] ? momentTz(scope.row[item.prop]) : '-'}}</template>
           </template>
           <div v-else-if="item.prop === 'icon'"
                     @mouseenter="labelHover(scope.row, 'icon', true, false, $event)"