refactor(announcement): 提取角色和状态常量到独立文件

src/views/announcement/constants.js

@@ -0,0 +1,217 @@
+/**
+ * 公告模块常量定义
+ * @fileoverview 包含公告相关的枚举值、映射关系和配置常量
+ */
+
+/**
+ * 角色类型枚举
+ * @typedef {1|2|4} RoleType
+ * - 1: 工厂
+ * - 2: 经销商
+ * - 4: 零售商
+ */
+
+/**
+ * 可见角色掩码类型 (位运算)
+ * @typedef {number} VisibleRolesMask
+ * 支持的值：1(工厂) | 2(经销商) | 4(零售商) 及其组合
+ * 例如：3(工厂+经销商), 5(工厂+零售商), 6(经销商+零售商), 7(全部)
+ */
+
+/**
+ * 公告状态枚举类型
+ * @typedef {0|1|2} AnnouncementStatus
+ * - 0: 草稿
+ * - 1: 已发布
+ * - 2: 已下架
+ */
+
+/**
+ * 角色选项类型定义
+ * @typedef {Object} RoleOption
+ * @property {string} label - 角色显示名称
+ * @property {RoleType} value - 角色值(位运算)
+ */
+
+/**
+ * 状态选项类型定义
+ * @typedef {Object} StatusOption
+ * @property {string} label - 状态显示名称
+ * @property {AnnouncementStatus} value - 状态值
+ */
+
+// ==================== 角色相关常量 ====================
+
+/**
+ * 角色枚举值
+ * @type {Object<string, RoleType>}
+ */
+export const ROLE_TYPES = {
+    FACTORY: 1,      // 工厂
+    DEALER: 2,       // 经销商
+    RETAILER: 4      // 零售商
+};
+
+/**
+ * 角色标签映射
+ * @type {Object<RoleType, string>}
+ */
+export const ROLE_LABELS = {
+    [ROLE_TYPES.FACTORY]: '工厂',
+    [ROLE_TYPES.DEALER]: '经销商',
+    [ROLE_TYPES.RETAILER]: '零售商'
+};
+
+/**
+ * 角色标签类型映射 (Element UI Tag类型)
+ * @type {Object<RoleType, string>}
+ */
+export const ROLE_TAG_TYPES = {
+    [ROLE_TYPES.FACTORY]: 'success',    // 工厂 - 绿色
+    [ROLE_TYPES.DEALER]: 'warning',     // 经销商 - 橙色
+    [ROLE_TYPES.RETAILER]: 'info'       // 零售商 - 蓝色
+};
+
+/**
+ * 角色选项数据 (用于表单下拉框)
+ * @type {RoleOption[]}
+ */
+export const ROLE_OPTIONS = [
+    { label: ROLE_LABELS[ROLE_TYPES.FACTORY], value: ROLE_TYPES.FACTORY },
+    { label: ROLE_LABELS[ROLE_TYPES.DEALER], value: ROLE_TYPES.DEALER },
+    { label: ROLE_LABELS[ROLE_TYPES.RETAILER], value: ROLE_TYPES.RETAILER }
+];
+
+// ==================== 状态相关常量 ====================
+
+/**
+ * 公告状态枚举值
+ * @type {Object<string, AnnouncementStatus>}
+ */
+export const ANNOUNCEMENT_STATUS = {
+    DRAFT: 0,        // 草稿
+    PUBLISHED: 1,    // 已发布
+    ARCHIVED: 2      // 已下架
+};
+
+/**
+ * 状态标签映射
+ * @type {Object<AnnouncementStatus, string>}
+ */
+export const STATUS_LABELS = {
+    [ANNOUNCEMENT_STATUS.DRAFT]: '草稿',
+    [ANNOUNCEMENT_STATUS.PUBLISHED]: '已发布',
+    [ANNOUNCEMENT_STATUS.ARCHIVED]: '已下架'
+};
+
+/**
+ * 状态标签类型映射 (Element UI Tag类型)
+ * @type {Object<AnnouncementStatus, string>}
+ */
+export const STATUS_TAG_TYPES = {
+    [ANNOUNCEMENT_STATUS.DRAFT]: 'info',        // 草稿 - 蓝色
+    [ANNOUNCEMENT_STATUS.PUBLISHED]: 'success', // 已发布 - 绿色
+    [ANNOUNCEMENT_STATUS.ARCHIVED]: 'danger'    // 已下架 - 红色
+};
+
+/**
+ * 状态选项数据 (用于表单下拉框)
+ * @type {StatusOption[]}
+ */
+export const STATUS_OPTIONS = [
+    { label: STATUS_LABELS[ANNOUNCEMENT_STATUS.DRAFT], value: ANNOUNCEMENT_STATUS.DRAFT },
+    { label: STATUS_LABELS[ANNOUNCEMENT_STATUS.PUBLISHED], value: ANNOUNCEMENT_STATUS.PUBLISHED },
+    { label: STATUS_LABELS[ANNOUNCEMENT_STATUS.ARCHIVED], value: ANNOUNCEMENT_STATUS.ARCHIVED }
+];
+
+// ==================== 工具函数 ====================
+
+/**
+ * 获取角色标签文本
+ * @param {RoleType} roleValue - 角色值
+ * @returns {string} 角色标签文本
+ */
+export const getRoleLabel = (roleValue) => {
+    return ROLE_LABELS[roleValue] || '未知角色';
+};
+
+/**
+ * 获取角色标签类型
+ * @param {RoleType} roleValue - 角色值
+ * @returns {string} Element UI标签类型
+ */
+export const getRoleTagType = (roleValue) => {
+    return ROLE_TAG_TYPES[roleValue] || 'default';
+};
+
+/**
+ * 获取状态标签文本
+ * @param {AnnouncementStatus} statusValue - 状态值
+ * @returns {string} 状态标签文本
+ */
+export const getStatusLabel = (statusValue) => {
+    return STATUS_LABELS[statusValue] || '未知状态';
+};
+
+/**
+ * 获取状态标签类型
+ * @param {AnnouncementStatus} statusValue - 状态值
+ * @returns {string} Element UI标签类型
+ */
+export const getStatusTagType = (statusValue) => {
+    return STATUS_TAG_TYPES[statusValue] || 'default';
+};
+
+/**
+ * 计算角色掩码值 (位运算)
+ * @param {RoleType[]} selectedRoles - 选中的角色数组
+ * @returns {VisibleRolesMask} 角色掩码值
+ */
+export const calculateRolesMask = (selectedRoles) => {
+    if (!Array.isArray(selectedRoles) || selectedRoles.length === 0) {
+        return 0;
+    }
+    return selectedRoles.reduce((mask, role) => mask | role, 0);
+};
+
+/**
+ * 解析角色掩码为角色数组
+ * @param {VisibleRolesMask|string} rolesMask - 角色掩码值
+ * @returns {RoleOption[]} 角色选项数组
+ */
+export const parseRolesMask = (rolesMask) => {
+    // 处理空值
+    if (!rolesMask && rolesMask !== 0) {
+        return [];
+    }
+
+    // 转换为数字类型
+    const numericMask = typeof rolesMask === 'string' ? parseInt(rolesMask, 10) : rolesMask;
+
+    // 验证转换后的数字是否有效
+    if (typeof numericMask !== 'number' || isNaN(numericMask) || numericMask < 0) {
+        return [];
+    }
+
+    return ROLE_OPTIONS.filter(role => (numericMask & role.value) === role.value);
+};
+
+/**
+ * 获取可见角色文本数组
+ * @param {VisibleRolesMask} visibleRoles - 可见角色掩码
+ * @returns {string[]} 角色文本数组
+ */
+export const getVisibleRolesTextArray = (visibleRoles) => {
+    const roles = parseRolesMask(visibleRoles);
+    return roles.map(role => role.label);
+};
+
+/**
+ * 获取可见角色文本 (逗号分隔)
+ * @param {VisibleRolesMask} visibleRoles - 可见角色掩码
+ * @returns {string} 角色文本字符串
+ */
+export const getVisibleRolesText = (visibleRoles) => {
+    const textArray = getVisibleRolesTextArray(visibleRoles);
+    return textArray.length > 0 ? textArray.join('、') : '无';
+};

src/views/announcement/index.js

@@ -1,5 +1,17 @@
 import { getList, update, add, getAnnouncement, getCategoryList } from "@/api/announcement";
 import { mapGetters } from "vuex";
+import {
+    ROLE_OPTIONS,
+    STATUS_OPTIONS,
+    getRoleLabel,
+    getRoleTagType,
+    getStatusLabel,
+    getStatusTagType,
+    calculateRolesMask,
+    parseRolesMask,
+    getVisibleRolesText,
+    getVisibleRolesTextArray
+} from './constants';
 
 /**
  * 角色类型枚举
@@ -196,11 +208,7 @@ export default {
                         prop: "visibleRoles",
                         type: "select",
                         multiple: true,
-                        dicData: [
-                            { label: "工厂", value: 1 },
-                            { label: "经销商", value: 2 },
-                            { label: "零售商", value: 4 }
-                        ],
+                        dicData: ROLE_OPTIONS,
                         slot: true,
                         span: 12,
                         props: {
@@ -217,11 +225,7 @@ export default {
                         label: "状态",
                         prop: "status",
                         type: "select",
-                        dicData: [
-                            { label: "草稿", value: 0 },
-                            { label: "已发布", value: 1 },
-                            { label: "已下架", value: 2 }
-                        ],
+                        dicData: STATUS_OPTIONS,
                         slot: true,
                         addDisplay: false,
                         editDisplay: false,
@@ -328,6 +332,13 @@ export default {
         this.loadCategoryOptions();
     },
     methods: {
+        calculateRolesMask,
+        parseRolesMask,
+        getVisibleRolesText,
+        getVisibleRolesTextArray,
+        getRoleLabel,
+        getRoleTagType,
+        getStatusText: getStatusLabel,
         /**
          * 加载分类选项
          * @async
@@ -369,53 +380,6 @@ export default {
             }
         },
         /**
-         * 计算角色掩码值
-         * @param {RoleType[]} selectedRoles - 选中的角色数组
-         * @returns {VisibleRolesMask} 计算后的掩码值
-         */
-        calculateRolesMask(selectedRoles) {
-            if (!Array.isArray(selectedRoles) || selectedRoles.length === 0) {
-                return 0;
-            }
-            return selectedRoles.reduce((mask, role) => mask | role, 0);
-        },
-        /**
-         * 解析角色掩码为角色数组
-         * @param {VisibleRolesMask} rolesMask - 角色掩码值
-         * @returns {RoleType[]} 角色数组
-         */
-        parseRolesMask(rolesMask) {
-            const roles = [];
-            if (rolesMask & 1) roles.push(1); // 工厂
-            if (rolesMask & 2) roles.push(2); // 经销商
-            if (rolesMask & 4) roles.push(4); // 零售商
-            return roles;
-        },
-        /**
-         * 获取可见角色文本数组 (支持位运算掩码)
-         * @param {VisibleRolesMask} visibleRoles - 可见角色掩码值
-         * @returns {string[]} 角色文本数组
-         */
-        getVisibleRolesTextArray(visibleRoles) {
-            const roleValue = parseInt(visibleRoles, 10);
-            const roles = [];
-
-            // 位运算检查各角色
-            if (roleValue & 1) roles.push('工厂');      // 1: 工厂
-            if (roleValue & 2) roles.push('经销商');    // 2: 经销商
-            if (roleValue & 4) roles.push('零售商');    // 4: 零售商
-
-            return roles.length > 0 ? roles : ['未知角色'];
-        },
-        /**
-         * 获取可见角色文本 (支持位运算掩码)
-         * @param {VisibleRolesMask} visibleRoles - 可见角色掩码值
-         * @returns {string} 角色文本
-         */
-        getVisibleRolesText(visibleRoles) {
-            return this.getVisibleRolesTextArray(visibleRoles).join('+');
-        },
-        /**
          * 查看详情
          * @async
          * @returns {Promise<void>}
@@ -617,40 +581,6 @@ export default {
             this.onLoad(this.page, this.query);
         },
         /**
-         * 获取状态文本
-         * @param {AnnouncementStatus} status - 状态值
-         * @returns {string} 状态文本
-         */
-        getStatusText(status) {
-            const statusMap = {
-                0: '草稿',
-                1: '已发布',
-                2: '已下架'
-            };
-            return statusMap[status] ? statusMap[status] : '未知状态';
-        },
-        getRoleLabel(roleValue) {
-            const roleMap = {
-                1: '工厂',
-                2: '经销商',
-                4: '零售商'
-            };
-            return roleMap[roleValue] || '未知角色';
-        },
-        /**
-         * 获取角色标签类型
-         * @param {RoleType} roleValue - 角色值
-         * @returns {string} 标签类型
-         */
-        getRoleTagType(roleValue) {
-            const roleTagMap = {
-                1: 'success',    // 工厂
-                2: 'warning',    // 经销商
-                4: 'info'        // 零售商
-            };
-            return roleTagMap[roleValue] || 'default';
-        },
-        /**
          * 加载数据
          * @async
          * @param {PageInfo} page - 分页信息

src/views/announcement/index.vue

@@ -41,8 +41,8 @@
             </template>
             <template slot-scope="{row}" slot="visibleRoles">
                 <span v-for="role in parseRolesMask(row.visibleRoles)" :key="role.value">
-                    <el-tag :type="getRoleTagType(role)" size="mini" style="margin-right: 4px;">
-                        {{ getRoleLabel(role) }}
+                    <el-tag :type="getRoleTagType(role.value)" size="mini" style="margin-right: 4px;">
+                        {{ role.label }}
                     </el-tag>
                 </span>
             </template>