feat(emoji): manage grouped access rules

src/lang/messages/pages/en.js

@@ -5276,7 +5276,11 @@ export default {
         },
         table: {
           salePrice: 'Sale Price',
-          shelfStatus: 'On/Off Shelf'
+          shelfStatus: 'On/Off Shelf',
+          vipRange: 'VIP Range',
+          wealthRange: 'Wealth Range',
+          charmRange: 'Charm Range',
+          manageResources: 'Emojis'
         },
         form: {
           groupCode: 'Group Code',
@@ -5284,7 +5288,12 @@ export default {
           amount: 'Sale Price',
           shelfStatus: 'On/Off Shelf',
           ktvStatus: 'KTV Emoji',
-          weight: 'Weight'
+          weight: 'Weight',
+          accessRules: 'Access Rules',
+          vipRange: 'VIP Level Range',
+          wealthRange: 'Wealth Level Range',
+          charmRange: 'Charm Level Range',
+          rangeHelp: '0 means that boundary is unrestricted. Users must meet every configured level rule.'
         },
         placeholder: {
           groupCode: 'Group Code',
@@ -5321,14 +5330,16 @@ export default {
         offShelf: 'Off Shelf',
         yes: 'Yes',
         no: 'No',
-        free: 'Free'
+        free: 'Free',
+        unrestricted: 'Unrestricted'
       },
       dialog: {
         add: 'Add',
         edit: 'Edit'
       },
       validation: {
-        required: 'This field is required'
+        required: 'This field is required',
+        invalidLevelRange: 'Invalid level range: max must be 0 or greater than or equal to min'
       },
       message: {
         onShelfSuccess: 'Listed successfully',

src/lang/messages/pages/zh.js

@@ -5273,7 +5273,11 @@ export default {
         },
         table: {
           salePrice: '售卖价格',
-          shelfStatus: '上/下架'
+          shelfStatus: '上/下架',
+          vipRange: 'VIP区间',
+          wealthRange: '财富区间',
+          charmRange: '魅力区间',
+          manageResources: '表情资源'
         },
         form: {
           groupCode: '分组Code',
@@ -5281,7 +5285,12 @@ export default {
           amount: '售卖价格',
           shelfStatus: '上/下架',
           ktvStatus: 'KTV表情',
-          weight: '权重'
+          weight: '权重',
+          accessRules: '使用权限',
+          vipRange: 'VIP等级区间',
+          wealthRange: '财富等级区间',
+          charmRange: '魅力等级区间',
+          rangeHelp: '0表示该边界不限制；配置多类等级时，用户需要同时满足全部条件。'
         },
         placeholder: {
           groupCode: '分组Code',
@@ -5318,14 +5327,16 @@ export default {
         offShelf: '下架',
         yes: '是',
         no: '否',
-        free: '免费'
+        free: '免费',
+        unrestricted: '不限'
       },
       dialog: {
         add: '添加',
         edit: '修改'
       },
       validation: {
-        required: '必填字段不可为空'
+        required: '必填字段不可为空',
+        invalidLevelRange: '等级区间无效：最大值必须为0或不小于最小值'
       },
       message: {
         onShelfSuccess: '上架成功',

src/views/sys/emoji-config/emoji/index.vue

@@ -317,6 +317,12 @@ function getFormData() {
 export default {
   name: 'EmojiConfig',
   components: { Pagination },
+  props: {
+    initialGroup: {
+      type: Object,
+      default: null
+    }
+  },
   data() {
     const commonRules = [
       { required: true, message: this.$t('pages.emojiManagement.validation.required'), trigger: 'blur' }
@@ -389,10 +395,16 @@ export default {
   created() {
     const that = this
     const querySystem = this.permissionsSysOriginPlatforms[0]
-    if (!querySystem) {
+    const sysOrigin = this.initialGroup && this.initialGroup.sysOrigin
+      ? this.initialGroup.sysOrigin
+      : querySystem && querySystem.value
+    if (!sysOrigin) {
       return
     }
-    that.listQuery.sysOrigin = querySystem.value
+    that.listQuery.sysOrigin = sysOrigin
+    that.listQuery.groupId = this.initialGroup && this.initialGroup.id
+      ? this.initialGroup.id
+      : ''
     that.renderData()
     that.loadGroupList()
   },

src/views/sys/emoji-config/group/form-edit.vue

@@ -7,10 +7,10 @@
       :append-to-body="true"
       :before-close="handleClose"
       :close-on-click-modal="false"
-      width="450px"
+      width="720px"
     >
       <div v-loading="submitLoading">
-        <el-form ref="form" :model="form" label-width="110px" :rules="formRules" style="margin-right: 20px;">
+        <el-form ref="form" :model="form" label-width="150px" :rules="formRules" style="margin-right: 20px;">
           <el-form-item
             v-if="!form.id"
             :label="$t('pages.emojiManagement.common.system')"
@@ -77,6 +77,29 @@
             <el-input v-model.trim="form.sort" v-number :placeholder="$t('pages.emojiManagement.group.placeholder.weight')" />
           </el-form-item>
 
+          <el-divider content-position="left">{{ $t('pages.emojiManagement.group.form.accessRules') }}</el-divider>
+          <el-form-item :label="$t('pages.emojiManagement.group.form.vipRange')">
+            <el-input-number v-model="form.minVipLevel" :min="0" :max="6" controls-position="right" />
+            <span class="range-separator">-</span>
+            <el-input-number v-model="form.maxVipLevel" :min="0" :max="6" controls-position="right" />
+          </el-form-item>
+          <el-form-item :label="$t('pages.emojiManagement.group.form.wealthRange')">
+            <el-input-number v-model="form.minWealthLevel" :min="0" :max="9999" controls-position="right" />
+            <span class="range-separator">-</span>
+            <el-input-number v-model="form.maxWealthLevel" :min="0" :max="9999" controls-position="right" />
+          </el-form-item>
+          <el-form-item :label="$t('pages.emojiManagement.group.form.charmRange')">
+            <el-input-number v-model="form.minCharmLevel" :min="0" :max="9999" controls-position="right" />
+            <span class="range-separator">-</span>
+            <el-input-number v-model="form.maxCharmLevel" :min="0" :max="9999" controls-position="right" />
+          </el-form-item>
+          <el-alert
+            :title="$t('pages.emojiManagement.group.form.rangeHelp')"
+            type="info"
+            :closable="false"
+            show-icon
+          />
+
           <el-form-item>
             <el-button type="primary" @click="submitForm()">{{ $t('common.save') }}</el-button>
             <el-button @click="handleClose()">{{ $t('common.cancel') }}</el-button>
@@ -117,7 +140,13 @@ export default {
         sysOrigin: '',
         shelfStatus: '',
         ktvStatus: '',
-        amount: ''
+        amount: '',
+        minVipLevel: 0,
+        maxVipLevel: 0,
+        minWealthLevel: 0,
+        maxWealthLevel: 0,
+        minCharmLevel: 0,
+        maxCharmLevel: 0
       },
       formRules: {
         cover: commonRules,
@@ -155,6 +184,17 @@ export default {
         }
 
         this.form = deepClone(newVal)
+        const accessLevelFields = [
+          'minVipLevel',
+          'maxVipLevel',
+          'minWealthLevel',
+          'maxWealthLevel',
+          'minCharmLevel',
+          'maxCharmLevel'
+        ]
+        accessLevelFields.forEach(field => {
+          this.$set(this.form, field, Number(newVal[field] || 0))
+        })
         if (this.form.cover) {
           this.coverFileList = getElementUiUploadFile(this.form.cover)
         }
@@ -187,6 +227,11 @@ export default {
           console.error('error submit!!')
           return false
         }
+        // 0 表示该边界不限制；非 0 的最大值必须覆盖最小值.
+        if (!that.validateAccessLevelRanges()) {
+          that.$message.error(that.$t('pages.emojiManagement.validation.invalidLevelRange'))
+          return false
+        }
         that.submitLoading = true
         addOrUpdateGroup(that.form).then(res => {
           that.submitLoading = false
@@ -198,10 +243,23 @@ export default {
         })
         return
       })
+    },
+    validateAccessLevelRanges() {
+      return [
+        [this.form.minVipLevel, this.form.maxVipLevel],
+        [this.form.minWealthLevel, this.form.maxWealthLevel],
+        [this.form.minCharmLevel, this.form.maxCharmLevel]
+      ].every(([minLevel, maxLevel]) => {
+        const min = Number(minLevel || 0)
+        const max = Number(maxLevel || 0)
+        return min >= 0 && max >= 0 && (max === 0 || min <= max)
+      })
     }
   }
 }
 </script>
 <style scoped lang="scss">
-
+.range-separator {
+  margin: 0 10px;
+}
 </style>

src/views/sys/emoji-config/group/index.vue

@@ -105,16 +105,32 @@
           </div>
         </template>
       </el-table-column>
+      <el-table-column :label="$t('pages.emojiManagement.group.table.vipRange')" align="center" width="120">
+        <template slot-scope="scope">
+          {{ formatLevelRange(scope.row.minVipLevel, scope.row.maxVipLevel, 'VIP') }}
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('pages.emojiManagement.group.table.wealthRange')" align="center" width="120">
+        <template slot-scope="scope">
+          {{ formatLevelRange(scope.row.minWealthLevel, scope.row.maxWealthLevel) }}
+        </template>
+      </el-table-column>
+      <el-table-column :label="$t('pages.emojiManagement.group.table.charmRange')" align="center" width="120">
+        <template slot-scope="scope">
+          {{ formatLevelRange(scope.row.minCharmLevel, scope.row.maxCharmLevel) }}
+        </template>
+      </el-table-column>
       <el-table-column :label="$t('pages.emojiManagement.common.sort')" prop="sort" align="center" />
       <el-table-column :label="$t('pages.emojiManagement.common.createdAt')" prop="createTime" width="200" align="center">
         <template slot-scope="scope">
           {{ scope.row.createTime | dateFormat }}
         </template>
       </el-table-column>
-      <el-table-column :label="$t('pages.emojiManagement.common.actions')" fixed="right" align="center" width="100">
+      <el-table-column :label="$t('pages.emojiManagement.common.actions')" fixed="right" align="center" width="170">
         <template slot-scope="scope">
           <div>
             <el-button type="text" @click.native="clickEdit(scope.row)">{{ $t('pages.emojiManagement.common.edit') }}</el-button>
+            <el-button type="text" @click.native="clickManageResources(scope.row)">{{ $t('pages.emojiManagement.group.table.manageResources') }}</el-button>
           </div>
         </template>
       </el-table-column>
@@ -210,6 +226,23 @@ export default {
       this.thisClickRow = Object.assign({}, row)
       this.formEditVisiable = true
     },
+    clickManageResources(row) {
+      this.$emit('manage-resources', Object.assign({}, row))
+    },
+    formatLevelRange(minLevel, maxLevel, prefix = '') {
+      const min = Number(minLevel || 0)
+      const max = Number(maxLevel || 0)
+      const value = min === 0 && max === 0
+        ? this.$t('pages.emojiManagement.options.unrestricted')
+        : max === 0
+          ? `${min}+`
+          : min === 0
+            ? `≤${max}`
+            : `${min}-${max}`
+      return prefix && value !== this.$t('pages.emojiManagement.options.unrestricted')
+        ? `${prefix}${value}`
+        : value
+    },
     formEditSuccess() {
       this.handleSearch()
       this.formEditVisiable = false

src/views/sys/emoji-config/index.vue

@@ -2,7 +2,11 @@
   <div class="app-container">
     <el-tabs v-model="activeName">
       <el-tab-pane v-for="item in tables" :key="item.name" :label="$t(item.titleKey)" :name="item.component" />
-      <component :is="activeName" />
+      <component
+        :is="activeName"
+        v-bind="activeComponentProps"
+        @manage-resources="handleManageResources"
+      />
     </el-tabs>
   </div>
 </template>
@@ -15,6 +19,7 @@ export default {
   data() {
     return {
       activeName: 'EmojiGroup',
+      selectedGroup: null,
       tables: [
         {
           titleKey: 'pages.emojiManagement.tabs.group',
@@ -26,6 +31,19 @@ export default {
         }
       ]
     }
+  },
+  computed: {
+    activeComponentProps() {
+      return this.activeName === 'EmojiConf'
+        ? { initialGroup: this.selectedGroup }
+        : {}
+    }
+  },
+  methods: {
+    handleManageResources(group) {
+      this.selectedGroup = group
+      this.activeName = 'EmojiConf'
+    }
   }
 }
 </script>