pref: 优化 perms 账号输入，增加 help text 等

src/i18n/langs/en.json

@@ -745,7 +745,8 @@
     "AllAccounts": "All accounts",
     "ManualInput": "Manual input",
     "SameAccount": "Same account",
-    "SpecifyInput": "Specify input",
+    "SpecifyAccounts": "Specify accounts",
+    "AccountsHelp": "All accounts: accounts exists on the asset; Specify accounts: specify accounts by username；Manual input: username/password; Same account: The account username name same with login user",
     "Input": "Input",
     "permAccount": "Accounts",
     "Actions": "Actions",

src/i18n/langs/ja.json

@@ -750,7 +750,8 @@
     "AllAccounts": "すべてのアカウント",
     "ManualInput": "手動入力",
     "SameAccount": "同じ名前のアカウント",
-    "SpecifyInput": "入力の指定",
+    "SpecifyAccounts": "入力の指定",
+    "AccountsHelp": "すべてのアカウント: アカウントはアセットに存在します。 アカウントの指定: ユーザー名でアカウントを指定します。手入力: ユーザー名/パスワード; 同一アカウント：ログインユーザーと同じアカウントのユーザー名",
     "Input": "入力",
     "permAccount": "認定アカウント",
     "Actions": "アクション",

src/i18n/langs/zh.json

@@ -941,10 +941,11 @@
   },
   "perms": {
     "": "",
+    "AccountsHelp": "所有账号: 资产上添加的账号; 指定账号：指定账号的用户名；手动输入: 用户名/密码 手动输入; 同名账号: 和账号使用者用户名相同的账号;",
     "AllAccounts": "所有账号",
     "ManualInput": "手动输入",
     "SameAccount": "同名账号",
-    "SpecifyInput": "指定输入",
+    "SpecifyAccounts": "指定账号",
     "Input": "输入",
     "Account": "账号",
     "permAccount": "授权账号",

src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue

@@ -1,8 +1,8 @@
 <template>
   <GenericCreateUpdatePage
     :fields="fields"
-    :initial="initial"
     :fields-meta="fieldsMeta"
+    :initial="initial"
     :url="url"
     v-bind="$data"
   />
@@ -34,7 +34,8 @@ export default {
         date_start: new Date().toISOString(),
         date_expired: getDayFuture(36500, new Date()).toISOString(),
         nodes: nodesInitial,
-        assets: assetsInitial
+        assets: assetsInitial,
+        accounts: ['@ALL']
       },
       fields: [
         [this.$t('common.Basic'), ['name']],
@@ -88,7 +89,8 @@ export default {
         accounts: {
           type: 'input',
           label: this.$t('perms.Account'),
-          component: AccountFormatter
+          component: AccountFormatter,
+          helpText: this.$t('perms.AccountsHelp')
         },
         actions: {
           label: this.$t('perms.Actions'),

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

@@ -1,19 +1,18 @@
 <template>
   <div>
-    <el-checkbox-group v-model="select">
+    <el-checkbox-group v-model="choicesSelected">
       <el-checkbox
-        v-for="(i) in checkboxGroup"
+        v-for="(i) in choices"
         :key="i.label"
-        :disabled="isDisabled(i)"
         :label="i.value"
-        @change="handleItemChange"
+        @change="handleCheckboxCheck(i, $event)"
       >
         {{ i.label }}
       </el-checkbox>
     </el-checkbox-group>
     <TagInput
-      v-if="showInput"
-      :value="customTags"
+      v-if="showSpecAccounts"
+      :value="specAccountsInput"
       @change="handleTagChange"
     />
   </div>
@@ -33,10 +32,16 @@ export default {
     }
   },
   data() {
-    const checkboxGroup = [
+    const ALL = '@ALL'
+    const SPEC = '@SPEC'
+    const choices = [
       {
         label: this.$t('perms.AllAccounts'),
-        value: '@ALL'
+        value: ALL
+      },
+      {
+        label: this.$t('perms.SpecifyAccounts'),
+        value: SPEC
       },
       {
         label: this.$t('perms.ManualInput'),
@@ -45,65 +50,55 @@ export default {
       {
         label: this.$t('perms.SameAccount'),
         value: '@USER'
-      },
-      {
-        label: this.$t('perms.SpecifyInput'),
-        value: 'INPUT'
       }
     ]
     return {
-      checkboxGroup,
-      defaultOptions: ['@ALL', '@INPUT', '@USER'],
-      select: [],
-      customTags: [],
-      showInput: false
+      ALL: ALL,
+      SPEC: SPEC,
+      choices: choices,
+      choicesSelected: [],
+      defaultChoices: [this.ALL],
+      specAccountsInput: [],
+      showSpecAccounts: false
     }
   },
-  computed: {
-    isDisabled() {
-      return (item) => (['@INPUT', '@USER', 'INPUT'].includes(item.value) && this.select.includes('@ALL'))
-    }
-  },
-  created() {
+  mounted() {
     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]))
+      const choicesSelected = this.value.filter(i => i.startsWith('@'))
+      const specAccountsInput = this.value.filter(i => !i.startsWith('@'))
+      if (specAccountsInput.length > 0 && !choicesSelected.includes(this.ALL)) {
+        choicesSelected.push(this.SPEC)
+        this.showSpecAccounts = true
       }
-      this.showInput = !this.select.includes('@ALL') && this.select.includes('INPUT')
-      this.setValue()
+      this.choicesSelected = choicesSelected
+      this.specAccountsInput = specAccountsInput
+    },
+    handleCheckboxCheck(item, checked) {
+      if (item.value === this.SPEC) {
+        this.showSpecAccounts = checked
+      } else if (item.value === this.ALL) {
+        this.showSpecAccounts = !checked
+      }
+
+      if (this.showSpecAccounts) {
+        this.choicesSelected = this.choicesSelected.filter(i => i !== this.ALL)
+      } else {
+        this.choicesSelected = this.choicesSelected.filter(i => i !== this.SPEC)
+      }
+      this.outputValue()
     },
     handleTagChange(val) {
-      if (this.select.includes('INPUT')) {
-        this.customTags = val
-        this.setValue()
-      }
+      this.specAccountsInput = val
+      this.outputValue()
     },
-    setValue() {
-      const selectValue = this.select.filter(i => i !== 'INPUT')
-      if (this.select.includes('INPUT')) {
-        this.$emit('change', [...selectValue, ...this.customTags])
+    outputValue() {
+      if (this.showSpecAccounts) {
+        this.$emit('change', [...this.choicesSelected, ...this.specAccountsInput])
       } else {
-        this.$emit('change', selectValue)
+        this.$emit('change', this.choicesSelected)
       }
     }
   }