perf: 优化资产授权-账号表单组件

src/i18n/langs/en.json

@@ -655,6 +655,11 @@
   },
   "perms": {
     "": "",
+    "AllAccounts": "All accounts",
+    "ManualInput": "Manual input",
+    "SameAccount": "Same account",
+    "SpecifyInput": "Specify input",
+    "Input": "Input",
     "permAccount": "Accounts",
     "Actions": "Actions",
     "Permission": "Permissions",

src/i18n/langs/ja.json

@@ -662,6 +662,11 @@
   },
   "perms": {
     "": "",
+    "AllAccounts": "すべてのアカウント",
+    "ManualInput": "手動入力",
+    "SameAccount": "同じ名前のアカウント",
+    "SpecifyInput": "入力の指定",
+    "Input": "入力",
     "permAccount": "認定アカウント",
     "Actions": "アクション",
     "Asset": "資産",

src/i18n/langs/zh.json

@@ -685,6 +685,11 @@
   },
   "perms": {
     "": "",
+    "AllAccounts": "所有账号",
+    "ManualInput": "手动输入",
+    "SameAccount": "同名账号",
+    "SpecifyInput": "指定输入",
+    "Input": "输入",
     "Account": "账号",
     "permAccount": "授权账号",
     "Actions": "动作",

src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue

@@ -108,11 +108,6 @@ export default {
           type: 'checkbox'
         }
       },
-      afterGetFormValue(validValues) {
-        console.log('>>>', validValues, validValues.accounts)
-        validValues.accounts = validValues.accounts ? validValues.accounts.toString() : ''
-        return validValues
-      },
       cleanFormValue(value) {
         if (!Array.isArray(value.accounts)) {
           value.accounts = value.accounts ? value.accounts.split(',') : []

src/views/perms/AssetPermission/components/AccountFormatter.vue

@@ -1,27 +1,116 @@
 <template>
-  <el-checkbox-group v-model="select">
-    <el-checkbox label="所有账号" value="@ALL" />
-    <el-checkbox label="手动输入" value="@INPUT" />
-    <el-checkbox label="同名账号" value="@USER" />
-    <el-checkbox label="指定输入" value="INPUT" />
-  </el-checkbox-group>
+  <div>
+    <el-checkbox-group v-model="select">
+      <el-checkbox
+        v-for="(i) in checkboxGroup"
+        :key="i.label"
+        :label="i.value"
+        :disabled="isDisabled(i)"
+        @change="handleItemChange"
+      >
+        {{ i.label }}
+      </el-checkbox>
+    </el-checkbox-group>
+    <TagInput
+      v-if="showInput"
+      :custom-tag="customTags"
+      @tagSearch="handleTagChange"
+    />
+  </div>
 </template>
 
 <script>
+import TagInput from './TagInput.vue'
+
 export default {
+  components: {
+    TagInput
+  },
   props: {
     value: {
-      type: [Array, String],
+      type: [Array],
       default: () => []
     }
   },
   data() {
+    const checkboxGroup = [
+      {
+        label: this.$t('perms.AllAccounts'),
+        value: '@ALL'
+      },
+      {
+        label: this.$t('perms.ManualInput'),
+        value: '@INPUT'
+      },
+      {
+        label: this.$t('perms.SameAccount'),
+        value: '@USER'
+      },
+      {
+        label: this.$t('perms.SpecifyInput'),
+        value: 'INPUT'
+      }
+    ]
     return {
+      checkboxGroup,
+      defaultOptions: ['@ALL', '@INPUT', '@USER'],
       select: [],
-      input3: ''
+      customTags: [],
+      showInput: false
+    }
+  },
+  computed: {
+    isDisabled() {
+      return (item) => (['@INPUT', '@USER'].includes(item.value) && this.select.includes('@ALL'))
+    }
+  },
+  created() {
+    this.init()
+    if (this.customTags.length > 0) {
+      this.select.push('INPUT')
+      this.showInput = true
+    }
+  },
+  methods: {
+    init() {
+      const select = []
+      const customTags = []
+      this.value.filter(i => {
+        if (this.defaultOptions.includes(i)) {
+          select.push(i)
+        } else {
+          customTags.push(i)
+        }
+      })
+      this.select = select
+      this.customTags = customTags
+    },
+    handleItemChange(val, event) {
+      if (val && event.target.defaultValue === '@ALL') {
+        this.select = Array.from(new Set([...this.select, ...this.defaultOptions]))
+      }
+      if (this.select.includes('INPUT')) {
+        this.showInput = true
+      } else {
+        this.showInput = false
+      }
+      this.setValue()
+    },
+    handleTagChange(val) {
+      if (this.select.includes('INPUT')) {
+        this.customTags = val
+        this.setValue()
+      }
+    },
+    setValue() {
+      const selectValue = this.select.filter(i => i !== 'INPUT')
+      if (this.select.includes('INPUT')) {
+        this.$emit('change', [...selectValue, ...this.customTags])
+      } else {
+        this.$emit('change', selectValue)
+      }
     }
   }
-
 }
 </script>
 
@@ -29,5 +118,4 @@ export default {
 .select >>> .el-input.el-input--suffix {
   width: 100px
 }
-
 </style>

src/views/perms/AssetPermission/components/TagInput.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="filter-field">
+    <el-tag
+      v-for="(v, k) in filterTags"
+      :key="k"
+      closable
+      size="small"
+      type="info"
+      :disable-transitions="true"
+      @close="handleTagClose(v)"
+      @click="handleTagClick(v,k)"
+    >
+      {{ v }}
+    </el-tag>
+    <el-input
+      ref="SearchInput"
+      v-model.trim="filterValue"
+      :placeholder="$tc('perms.Input')"
+      class="search-input"
+      @blur="focus = false"
+      @focus="focus = true"
+      @change="handleConfirm"
+      @keyup.enter.native="handleConfirm"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    customTag: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      filterTags: this.customTag,
+      focus: false,
+      filterValue: ''
+    }
+  },
+  methods: {
+    handleTagClose(tag) {
+      this.filterTags.splice(this.filterTags.indexOf(tag), 1)
+      this.$emit('tagSearch', this.filterTags)
+    },
+    handleConfirm() {
+      if (this.filterValue === '') return
+      if (!this.filterTags.includes(this.filterValue)) {
+        this.filterTags.push(this.filterValue)
+        this.filterValue = ''
+        this.$emit('tagSearch', this.filterTags)
+      }
+    },
+    handleTagClick(v, k) {
+      if (this.filterValue.length !== 0) {
+        this.handleConfirm()
+      }
+      this.$delete(this.filterTags, k)
+      this.filterValue = v
+      this.$refs.SearchInput.focus()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .el-tag + .el-tag {
+    margin-left: 10px;
+  }
+  .filter-field {
+    display: flex;
+    align-items:  center;
+    padding-left: 2px;
+    border: 1px solid #dcdee2;
+    border-radius: 1px;
+    background-color:#fff;
+    &:hover {
+      border-color: #C0C4CC;
+    }
+  }
+  .search-input >>> .el-input__inner {
+    max-width: 100%;
+    border: none;
+    padding-left: 5px;
+  }
+  .el-input >>> .el-input__inner{
+    border: none !important;
+    font-size: 13px;
+  }
+  .filter-field >>> .el-input__inner {
+    height: 30px;
+  }
+</style>