NEZ-2977 fix：asset attribute text等类型增加 default 参数配置及显示

2023-07-13 13:44:55 +08:00
parent 2e869e9e1f
commit 0e32d59a6c
6 changed files with 49 additions and 23 deletions
--- a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
+++ b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
@@ -181,6 +181,14 @@
        }
      }
    }
+    .form__dotted-item-required {
+      .el-form-item__label {
+        display: flex;
+        .form__labels-label {
+          flex: 1;
+        }
+      }
+    }
    .form__create-btn {
      margin-bottom: 20px;
      width: 300px;
--- a/nezha-fronted/src/components/common/js/constants.js
+++ b/nezha-fronted/src/components/common/js/constants.js
@@ -176,7 +176,8 @@ export const asset = {
    INTEGER: 'INTEGER',
    DOUBLE: 'DOUBLE',
    DATETIME: 'DATETIME',
-    EMAIL: 'EMAIL'
+    EMAIL: 'EMAIL',
+    PASSWORD: 'PASSWORD'
  },
  labelSubTypeData: {
    date: 'date',
--- a/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/asset/assetBox.vue
@@ -84,8 +84,8 @@
          </el-form-item>
          <!-- labels -->
          <div class="form__sub-title">{{$t('overall.labels')}}</div>
-          <div v-for="(label, i) in editAsset.fields" :key="i" class="form__dotted-item">
-            <el-form-item :prop="'fields.' + i + '.value'">
+          <div v-for="(label, i) in editAsset.fields" :key="i" class="form__dotted-item form__dotted-item-required">
+            <el-form-item :prop="'fields.' + 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>
@@ -98,6 +98,9 @@
                <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.MULTITEXT">
                  <div v-for="(value, i) in label.value" :key="i" class="label__multi-text">
                    <el-input v-model="label.value[i]" size="small"/>
@@ -666,6 +669,7 @@ export default {
      label.value.splice(index, 1)
    },
    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) {
@@ -677,7 +681,7 @@ export default {
        }
        return arr
      } else if (label.type.toUpperCase() === this.assetConstants.labelTypeData.MULTITEXT || label.type.toUpperCase() === assetConstants.labelTypeData.TEXT || label.type.toUpperCase() === assetConstants.labelTypeData.TEXTAREA) {
-        return ['']
+        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) {
@@ -689,7 +693,7 @@ export default {
        }
        return arr
      } else {
-        return ['']
+        return [defaultValue]
      }
    },
    getParentAsset () {
--- a/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/assetMetaBox.vue
@@ -41,7 +41,7 @@
            </el-form-item>
            <el-form-item :label='$t("validate.required")' prop="display">
              <el-switch
-                v-model="editAssetMeta.required"
+                v-model="editAssetMeta.param.required"
                active-value="1"
                inactive-value="0">
              </el-switch>
@@ -279,15 +279,19 @@ export default {
      immediate: true,
      handler (n) {
        this.isEdit = true
+        const param = n.param && ((typeof n.param) === 'string') ? JSON.parse(n.param) : {}
+        if (!param.required) {
+          param.required = '0'
+        }
        this.editAssetMeta = {
          ...n,
          groupId: n.groupId ? Number(n.groupId) : '',
          search: `${n.search}`,
          display: `${n.display}`,
-          required: n.required ? `${n.required}` : '0',
-          param: n.param && ((typeof n.param) === 'string') ? JSON.parse(n.param) : {},
+          param: param,
          type: n.type.toUpperCase()
        }
+
        this.selectType(this.editAssetMeta.type, true)
      }
    },
@@ -359,11 +363,7 @@ export default {
              }
            }
          }
-          if (param.type !== 'RADIO' && param.type !== 'CHECKBOX' && param.type !== 'SELECT' && param.type !== 'DATETIME' && param.type !== 'DOUBLE') {
-            delete param.param
-          } else {
          param.param = JSON.stringify(param.param)
-          }
          if (this.editAssetMeta.id) {
            this.$put('asset/field/meta', param).then(response => {
              this.prevent_opt.save = false
@@ -432,7 +432,7 @@ export default {
          case 'TEXT' :
          case 'TEXTAREA' :
          case 'INTEGER' :
-          case 'PASSWORD' :
+          // case 'PASSWORD' :
            this.showParam = true
            break
          default:
@@ -441,13 +441,15 @@ export default {
        }
      } else {
        if (this.ready) {
+          const required = this.editAssetMeta.param.required
          switch (val) {
            case 'RADIO' :
            case 'CHECKBOX' :
            case 'SELECT' :
              this.showParam = true
              this.editAssetMeta.param = {
-                items: []
+                items: [],
+                required: required
              }
              this.editAssetMeta.param.items = [{
                name: 'Option 1',
@@ -460,6 +462,7 @@ export default {
            case 'DATETIME' :
              this.showParam = true
              this.editAssetMeta.param = {
+                required: required,
                subType: 'date',
                interval: false
              }
@@ -468,31 +471,41 @@ export default {
              this.showParam = true
              this.editAssetMeta.param = {
                decimals: 2,
-                default: undefined
+                default: undefined,
+                required: required
              }
              break
            case 'TEXT' :
              this.showParam = true
              this.editAssetMeta.param = {
-                default: ''
+                default: '',
+                required: required
              }
              break
            case 'TEXTAREA' :
              this.showParam = true
              this.editAssetMeta.param = {
-                default: ''
+                default: '',
+                required: required
              }
              break
            case 'INTEGER' :
              this.showParam = true
              this.editAssetMeta.param = {
-                default: undefined
+                default: undefined,
+                required: required
              }
              break
            case 'PASSWORD' :
-              this.showParam = true
+              this.showParam = false
              this.editAssetMeta.param = {
-                default: ''
+                required: required
+              }
+              break
+            case 'EMAIL' :
+              this.showParam = false
+              this.editAssetMeta.param = {
+                required: required
              }
              break
            default:
--- a/nezha-fronted/src/components/common/table/asset/assetMetaTable.vue
+++ b/nezha-fronted/src/components/common/table/asset/assetMetaTable.vue
@@ -75,6 +75,7 @@
          <div v-else-if="scope.row[item.prop].toUpperCase() == 'DOUBLE'"><i class="nz-icon nz-icon-double"></i>&nbsp;&nbsp;DOUBLE</div>
          <div v-else-if="scope.row[item.prop].toUpperCase() == 'DATETIME'"><i class="nz-icon nz-icon-dingshishijian"></i>&nbsp;&nbsp;DATETIME</div>
          <div v-else-if="scope.row[item.prop].toUpperCase() == 'EMAIL'"><i class="nz-icon nz-icon-email"></i>&nbsp;&nbsp;EMAIL</div>
+          <div v-else-if="scope.row[item.prop].toUpperCase() == 'PASSWORD'"><i class="nz-icon nz-icon-password"></i>&nbsp;&nbsp;PASSWORD</div>
        </div>
        <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop] || '-'}}</span>
        <template v-else>-</template>
--- a/nezha-fronted/src/components/page/config/assetMeta.vue
+++ b/nezha-fronted/src/components/page/config/assetMeta.vue
@@ -160,9 +160,8 @@ export default {
        group: {},
        search: '0',
        display: '0',
-        required: '0',
        type: 'TEXT',
-        param: {},
+        param: JSON.stringify({ required: '0' }),
        remark: ''
      },
      blankMetaGroup: {