gubersail-platform-ui/src/views/announcement/category/category.vue

<template>
    <div>
        <basic-container>
            <avue-crud :option="option" :table-loading="loading" :data="data" ref="crud" v-model="form"
                :permission="permissionList" :before-open="beforeOpen" :before-close="beforeClose" @row-del="rowDel"
                @row-update="rowUpdate" @row-save="rowSave" @search-change="searchChange" @search-reset="searchReset"
                @selection-change="selectionChange" @refresh-change="refreshChange" @on-load="onLoad">
                <template slot="menuLeft">
                    <el-button type="danger" size="small" icon="el-icon-delete" v-if="permission.category_delete" plain
                        @click="handleDelete">
                        删除
                    </el-button>
                </template>

                <template slot-scope="{ row }" slot="status">
                    <el-switch v-model="row.status" :active-value="1" :inactive-value="0" active-color="#13ce66"
                        inactive-color="#ff4949" @change="handleStatusChange(row)"
                        >
                    </el-switch>
                </template>

                <template slot-scope="{ row }" slot="isSystem">
                    <el-tag :type="row.isSystem ? 'warning' : 'success'">
                        {{ row.isSystem ? '系统分类' : '自定义分类' }}
                    </el-tag>
                </template>
            </avue-crud>
        </basic-container>
    </div>
</template>

<script>
/**
 * 公告分类管理页面
 * @description 提供公告分类的完整CRUD功能，包括状态管理
 * @version 1.0.0
 */
import {
    getCategoryList,
    addCategory,
    updateCategory,
    removeCategory,
    getCategoryDetail,
    updateCategoryStatus
} from "@/api/announcement/category";
import { mapGetters } from "vuex";

/**
 * 分类数据类型定义
 * @typedef {Object} CategoryItem
 * @property {number} id - 分类ID
 * @property {string} name - 分类名称
 * @property {number} sortOrder - 排序
 * @property {number} orgId - 组织ID
 * @property {string} orgCode - 组织编码
 * @property {string} orgName - 组织名称
 * @property {number} isSystem - 是否系统分类 (0-否, 1-是)
 * @property {string} remark - 备注
 * @property {number} createUser - 创建用户ID
 * @property {number} createDept - 创建部门ID
 * @property {string|null} createTime - 创建时间
 * @property {number|null} updateUser - 更新用户ID
 * @property {string|null} updateTime - 更新时间
 * @property {number} status - 状态 (0-禁用, 1-启用)
 * @property {number} isDeleted - 是否删除 (0-否, 1-是)
 */

/**
 * 分类表单数据类型
 * @typedef {Object} CategoryForm
 * @property {number} [id] - 分类ID（编辑时存在）
 * @property {string} name - 分类名称
 * @property {number} sortOrder - 排序
 * @property {number} orgId - 组织ID
 * @property {string} orgCode - 组织编码
 * @property {string} orgName - 组织名称
 * @property {string} remark - 备注
 * @property {number} status - 状态
 */

/**
 * 查询参数类型
 * @typedef {Object} QueryParams
 * @property {string} [name] - 分类名称
 * @property {string} [orgName] - 组织名称
 * @property {number} [status] - 状态
 */

export default {
    name: "CategoryManagement",

    data() {
        return {
            /** @type {CategoryForm} 表单数据 */
            form: {},

            /** @type {Array<CategoryItem>} 选中的行数据 */
            selectionList: [],

            /** @type {QueryParams} 查询条件 */
            query: {},

            /** @type {boolean} 表格加载状态 */
            loading: true,

            /** @type {Array<CategoryItem>} 表格数据 */
            data: [],

            /** @type {Object} 表格配置选项 */
            option: {
                height: 'auto',
                calcHeight: 30,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                selection: true,
                viewBtn: true,
                dialogClickModal: false,
                column: [
                    {
                        label: "分类名称",
                        prop: "name",
                        search: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入分类名称",
                                trigger: "blur"
                            },
                            {
                                min: 2,
                                max: 50,
                                message: "分类名称长度在2到50个字符",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: "组织名称",
                        prop: "orgName",
                        search: true,
                        rules: [
                            {
                                required: true,
                                message: "请输入组织名称",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: "组织编码",
                        prop: "orgCode",
                        rules: [
                            {
                                required: true,
                                message: "请输入组织编码",
                                trigger: "blur"
                            },
                            {
                                pattern: /^[A-Z0-9_-]+$/,
                                message: "组织编码只能包含大写字母、数字、下划线和中横线",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: "组织ID",
                        prop: "orgId",
                        type: "number",
                        rules: [
                            {
                                required: true,
                                message: "请输入组织ID",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: "排序",
                        prop: "sortOrder",
                        type: "number",
                        value: 0,
                        rules: [
                            {
                                type: "number",
                                min: 0,
                                max: 9999,
                                message: "排序值范围为0-9999",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: "状态",
                        prop: "status",
                        type: "select",
                        slot: true,
                        dicData: [
                            {
                                label: "启用",
                                value: 1
                            },
                            {
                                label: "禁用",
                                value: 0
                            }
                        ],
                        search: true,
                        value: 1
                    },
                    {
                        label: "分类类型",
                        prop: "isSystem",
                        slot: true,
                        addDisplay: false,
                        editDisplay: false
                    },
                    {
                        label: "备注",
                        prop: "remark",
                        type: "textarea",
                        span: 24,
                        hide: true,
                        rules: [
                            {
                                max: 100,
                                message: "备注不能超过100个字符",
                                trigger: "blur"
                            }
                        ]
                    },
                    {
                        label: "创建时间",
                        prop: "createTime",
                        type: "datetime",
                        format: "yyyy-MM-dd HH:mm:ss",
                        valueFormat: "yyyy-MM-dd HH:mm:ss",
                        addDisplay: false,
                        editDisplay: false,
                        width: 180
                    }
                ]
            }
        };
    },

    computed: {
        ...mapGetters(["permission", "userInfo"]),

        /**
         * 权限列表配置
         * @returns {Object} 权限配置对象
         */
        permissionList() {
            return {
                // addBtn: this.vaildData(this.permission.category_add, false),
                // viewBtn: this.vaildData(this.permission.category_view, false),
                // delBtn: this.vaildData(this.permission.category_delete, false),
                // editBtn: this.vaildData(this.permission.category_edit, false)
                addBtn: true,
                viewBtn: false,
                delBtn: false,
                editBtn: true,
            };
        },

        /**
         * 表格行主键
         * @returns {string} 主键字段名
         */
        ids() {
            const ids = [];
            this.selectionList.forEach(ele => {
                ids.push(ele.id);
            });
            return ids.join(",");
        }
    },

    methods: {
        /**
         * 删除选中的分类
         * @description 批量删除选中的分类
         */
        async handleDelete() {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据");
                return;
            }

            // 检查是否包含系统分类
            const hasSystemCategory = this.selectionList.some(item => item.isSystem === 1);
            if (hasSystemCategory) {
                this.$message.error("系统分类不能删除");
                return;
            }

            try {
                await this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                });

                await removeCategory(this.ids);

                this.onLoad();
                this.$message({
                    type: "success",
                    message: "操作成功!"
                });
                this.$refs.crud.toggleSelection();
            } catch (error) {
                this.$message({
                    type: "info",
                    message: "已取消删除"
                });
            }
        },

        /**
         * 处理状态变更
         * @param {CategoryItem} row - 行数据
         */
        async handleStatusChange(row) {
            const statusText = row.status === 1 ? '启用' : '禁用';

            try {
                await this.$confirm(`确定${statusText}该分类吗？`, {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                });
        
                // 复用现有的更新接口，传递完整的行数据
                await updateCategory({
                    id: row.id,
                    name: row.name,
                    orgId: row.orgId,
                    orgCode: row.orgCode,
                    orgName: row.orgName,
                    sortOrder: row.sortOrder,
                    status: row.status,  // 新的状态值
                    remark: row.remark || ''
                });
        
                // 刷新页面数据
                this.onLoad();
                
                this.$message({
                    type: "success",
                    message: `${statusText}成功!`
                });
            } catch (error) {
                // 恢复原状态
                row.status = row.status === 1 ? 0 : 1;
        
                if (error !== 'cancel') {
                    console.error('状态更新失败:', error);
                    this.$message({
                        type: "error",
                        message: "状态更新失败"
                    });
                } else {
                    this.$message({
                        type: "info",
                        message: "已取消操作"
                    });
                }
            }
        },

        /**
         * 表单打开前的回调
         * @param {Function} done - 完成回调
         * @param {string} type - 操作类型 (add/edit/view)
         */
        async beforeOpen(done, type) {
            if (["edit", "view"].includes(type)) {
                // try {
                //     const res = await getCategoryDetail(this.form.id);
                //     this.form = res.data.data;
                // } catch (error) {
                //     console.error('获取分类详情失败:', error);
                // }
            } else if (type === "add") {
                // 新增时设置默认值
                this.form = {
                    createDept: this.userInfo.deptId || 1,
                    createUser: this.userInfo.userId || 1,
                    orgId: 1,
                    orgCode: "ORG_0001",
                    orgName: "库比森",
                    sortOrder: 0,
                    status: 1,
                    remark: ""
                };
            }
            done();
        },

        /**
         * 表单关闭前的回调
         * @param {Function} done - 完成回调
         */
        beforeClose(done) {
            this.form = {};
            done();
        },

        /**
         * 行删除回调
         * @param {CategoryItem} row - 行数据
         * @param {number} index - 行索引
         */
        async rowDel(row, index) {
            if (row.isSystem === 1) {
                this.$message.error("系统分类不能删除");
                return;
            }

            try {
                await this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                });

                await removeCategory(row.id);

                this.onLoad();
                this.$message({
                    type: "success",
                    message: "操作成功!"
                });
            } catch (error) {
                console.error('删除分类失败:', error);
            }
        },

        /**
         * 行更新回调
         * @param {CategoryForm} row - 行数据
         * @param {number} index - 行索引
         * @param {Function} done - 完成回调
         * @param {Function} loading - 加载状态回调
         */
        async rowUpdate(row, index, done, loading) {
            try {
                await updateCategory(row);

                this.onLoad();
                this.$message({
                    type: "success",
                    message: "操作成功!"
                });
                done();
            } catch (error) {
                console.error('更新分类失败:', error);
                loading();
            }
        },

        /**
         * 行保存回调
         * @param {CategoryForm} row - 行数据
         * @param {Function} done - 完成回调
         * @param {Function} loading - 加载状态回调
         */
        async rowSave(row, done, loading) {
            try {
                await addCategory(row);

                this.onLoad();
                this.$message({
                    type: "success",
                    message: "操作成功!"
                });
                done();
            } catch (error) {
                console.error('新增分类失败:', error);
                loading();
            }
        },

        /**
         * 搜索条件变化回调
         * @param {QueryParams} params - 搜索参数
         * @param {Function} done - 完成回调
         */
        searchChange(params, done) {
            this.query = params;
            this.onLoad(params);
            done();
        },

        /**
         * 搜索重置回调
         */
        searchReset() {
            this.query = {};
            this.onLoad();
        },

        /**
         * 选择变化回调
         * @param {Array<CategoryItem>} list - 选中的行数据列表
         */
        selectionChange(list) {
            this.selectionList = list;
        },

        /**
         * 清空选择
         */
        selectionClear() {
            this.selectionList = [];
            this.$refs.crud.toggleSelection();
        },

        /**
         * 刷新回调
         */
        refreshChange() {
            this.onLoad(this.query);
        },

        /**
         * 加载数据
         * @param {QueryParams} params - 查询参数
         */
        async onLoad(params = {}) {
            this.loading = true;

            try {
                const res = await getCategoryList(Object.assign(params, this.query));
                const data = res.data.data;
                this.data = Array.isArray(data) ? data : [];
                this.selectionClear();
            } catch (error) {
                console.error('加载分类列表失败:', error);
                this.data = [];
            } finally {
                this.loading = false;
            }
        }
    },

    /**
     * 组件挂载后初始化数据
     */
    mounted() {
        this.onLoad();
    }
};
</script>

<style scoped>
/* 组件样式 */
.el-tag {
    margin-right: 8px;
}

.el-switch {
    margin: 0;
}
</style>