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

<template>
    <basic-container>
        <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" ref="crud" @row-del="rowDel"
            v-model="form" :permission="permissionList" @row-update="rowUpdate" @row-save="rowSave"
            :before-open="beforeOpen" @search-change="searchChange" @search-reset="searchReset"
            @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
            @refresh-change="refreshChange" @on-load="onLoad">
            <template slot="menuLeft">
                <el-button type="danger" size="small" icon="el-icon-delete" plain v-if="permission.announcement_delete"
                    @click="handleDelete">删 除
                </el-button>
            </template>
            <template slot-scope="{row}" slot="dealer">
                <el-tag>{{ row.dealerName }}</el-tag>
            </template>
            <template slot-scope="{row}" slot="brand">
                <el-tag>{{ row.brandName }}</el-tag>
            </template>
            <template slot-scope="{row}" slot="detail">
                <el-button type="text" @click="viewDetail(row)">查看详情</el-button>
            </template>
        </avue-crud>

        <!-- 详情查看对话框 -->
        <el-dialog title="公告详情" :visible.sync="detailVisible" width="60%" append-to-body>
            <div class="detail-content">
                <h3>{{ currentDetail.title }}</h3>
                <div class="detail-info">
                    <p><strong>发布时间：</strong>{{ currentDetail.publishTime }}</p>
                    <p><strong>经销商：</strong>{{ currentDetail.dealerName }}</p>
                    <p><strong>品牌：</strong>{{ currentDetail.brandName }}</p>
                </div>
                <div class="detail-body" v-html="currentDetail.content"></div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="detailVisible = false">关 闭</el-button>
            </span>
        </el-dialog>
    </basic-container>
</template>

<script>
import { getList, remove, update, add, getAnnouncement, getDealerList, getBrandList, getCategoryList } from "@/api/announcement";
import { mapGetters } from "vuex";

/**
 * @typedef {Object} AnnouncementItem
 * @property {number} id - 公告ID
 * @property {string} title - 公告标题
 * @property {string} customerCode - 客户编号
 * @property {string} publishTime - 发布时间
 * @property {number} dealerId - 经销商ID
 * @property {string} dealerName - 经销商名称
 * @property {number} brandId - 品牌ID
 * @property {string} brandName - 品牌名称
 * @property {number} categoryId - 分类ID
 * @property {string} categoryName - 分类名称
 * @property {string} roleType - 角色类型
 * @property {string} content - 公告内容
 */

/**
 * @typedef {Object} OptionItem
 * @property {number} id - 选项ID
 * @property {string} dealerName - 经销商名称
 * @property {string} brandName - 品牌名称
 * @property {string} categoryName - 分类名称
 * @property {number} value - 选项值
 * @property {string} label - 选项标签
 */

/**
 * @typedef {Object} PageInfo
 * @property {number} pageSize - 每页大小
 * @property {number} currentPage - 当前页码
 * @property {number} total - 总记录数
 */

/**
 * @typedef {Object} QueryParams
 * @property {string} [title] - 公告标题
 * @property {string} [customerCode] - 客户编号
 * @property {Array<string>} [publishTime] - 发布时间范围
 * @property {number} [dealerId] - 经销商ID
 * @property {number} [brandId] - 品牌ID
 * @property {number} [categoryId] - 分类ID
 * @property {string} [roleType] - 角色类型
 */

/**
 * 公告管理组件
 * @component AnnouncementIndex
 */
export default {
    name: 'AnnouncementIndex',
    data() {
        return {
            /** @type {AnnouncementItem} 表单数据 */
            form: {},
            /** @type {QueryParams} 查询参数 */
            query: {},
            /** @type {boolean} 加载状态 */
            loading: true,
            /** @type {boolean} 详情对话框显示状态 */
            detailVisible: false,
            /** @type {AnnouncementItem} 当前查看的详情数据 */
            currentDetail: {},
            /** @type {PageInfo} 分页信息 */
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0
            },
            /** @type {Array<AnnouncementItem>} 选中的数据列表 */
            selectionList: [],
            /** @type {Array<OptionItem>} 经销商选项列表 */
            dealerOptions: [],
            /** @type {Array<OptionItem>} 品牌选项列表 */
            brandOptions: [],
            /** @type {Array<OptionItem>} 分类选项列表 */
            categoryOptions: [],
            /** @type {Object} 表格配置选项 */
            option: {
                height: 'auto',
                calcHeight: 30,
                dialogWidth: 950,
                tip: false,
                searchShow: true,
                searchMenuSpan: 6,
                border: true,
                index: true,
                viewBtn: true,
                selection: true,
                excelBtn: false,        // 隐藏下载按钮
                columnBtn: false,       // 隐藏列设置按钮
                dialogClickModal: false,
                column: [
                    {
                        label: "公告标题",
                        prop: "title",
                        span: 12,
                        search: true,
                        overHidden: true,
                        rules: [{
                            required: true,
                            message: "请输入公告标题",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "客户编号",
                        prop: "customerCode",
                        span: 12,
                        search: true,
                        overHidden: true
                    },
                    {
                        label: "发布时间",
                        prop: "publishTime",
                        type: "daterange",
                        format: "yyyy-MM-dd",
                        valueFormat: "yyyy-MM-dd",
                        rangeSeparator: "至",
                        searchRange: true,
                        startPlaceholder: "开始时间",
                        endPlaceholder: "结束时间",
                        overHidden: true,
                        search: true,
                        hide: true,  // 在表格中隐藏，只用于搜索
                        addDisplay: false,  // 新增时不显示
                        editDisplay: false, // 编辑时不显示
                        viewDisplay: false  // 查看时不显示
                    },
                    {
                        label: "经销商",
                        prop: "dealerId",
                        type: "select",
                        dicData: [],
                        props: {
                            label: "dealerName",
                            value: "id"
                        },
                        slot: true,
                        overHidden: true,
                        search: true,
                        span: 12,
                        rules: [{
                            required: true,
                            message: "请选择经销商",
                            trigger: "change"
                        }]
                    },
                    {
                        label: "品牌",
                        prop: "brandId",
                        type: "select",
                        dicData: [],
                        props: {
                            label: "brandName",
                            value: "id"
                        },
                        slot: true,
                        overHidden: true,
                        search: true,
                        span: 12,
                        rules: [{
                            required: true,
                            message: "请选择品牌",
                            trigger: "change"
                        }]
                    },
                    {
                        label: "分类",
                        prop: "categoryId",
                        type: "select",
                        dicData: [], // 初始为空，通过loadCategoryOptions方法动态加载
                        props: {
                            label: "categoryName", // 根据后端返回的字段名调整
                            value: "id"
                        },
                        search: true,
                        span: 12,
                        rules: [{
                            required: true,
                            message: "请选择分类",
                            trigger: "change"
                        }]
                    },
                    {
                        label: "角色",
                        prop: "roleType",
                        type: "select",
                        dicData: [
                            { label: "工厂", value: "factory" },
                            { label: "经销商", value: "dealer" },
                            { label: "零售商", value: "retailer" }
                        ],
                        search: true,
                        span: 12,
                        rules: [{
                            required: true,
                            message: "请选择角色",
                            trigger: "change"
                        }]
                    },
                    {
                        label: "公告内容",
                        prop: "content",
                        component: 'AvueUeditor',
                        options: {
                            action: '/api/blade-resource/oss/endpoint/put-file',
                            props: {
                                res: "data",
                                url: "link",
                            }
                        },
                        showColumn: false,
                        hide: true,
                        minRows: 6,
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入公告内容",
                            trigger: "blur"
                        }]
                    },
                ]
            },
            /** @type {Array<AnnouncementItem>} 表格数据 */
            data: []
        };
    },
    computed: {
        ...mapGetters(["permission"]),
        /**
         * 权限列表
         * @returns {Object} 权限配置对象
         */
        permissionList() {
            return {
                addBtn: this.vaildData(this.permission.announcement_add, false),
                viewBtn: this.vaildData(this.permission.announcement_view, false),
                delBtn: this.vaildData(this.permission.announcement_delete, false),
                editBtn: this.vaildData(this.permission.announcement_edit, false)
            };
        },
        /**
         * 选中的ID字符串
         * @returns {string} 逗号分隔的ID字符串
         */
        ids() {
            let ids = [];
            this.selectionList.forEach(ele => {
                ids.push(ele.id);
            });
            return ids.join(",");
        }
    },
    created() {
        this.loadDealerOptions();
        this.loadBrandOptions();
        this.loadCategoryOptions(); // 添加分类加载
    },
    methods: {
        /**
         * 加载分类选项
         * @async
         * @returns {Promise<void>}
         */
        async loadCategoryOptions() {
            try {
                const res = await getCategoryList();
                this.categoryOptions = res.data.data || [];
                const categoryColumn = this.option.column.find(col => col.prop === 'categoryId');
                if (categoryColumn) {
                    categoryColumn.dicData = this.categoryOptions;
                }
            } catch (error) {
                // 如果接口不存在，使用模拟数据
                this.categoryOptions = [
                    { id: 1, categoryName: '系统公告', value: 1, label: '系统公告' },
                    { id: 2, categoryName: '产品公告', value: 2, label: '产品公告' },
                    { id: 3, categoryName: '活动公告', value: 3, label: '活动公告' },
                    { id: 4, categoryName: '维护公告', value: 4, label: '维护公告' }
                ];
                const categoryColumn = this.option.column.find(col => col.prop === 'categoryId');
                if (categoryColumn) {
                    categoryColumn.dicData = this.categoryOptions;
                }
            }
        },
        /**
         * 查看详情
         * @param {AnnouncementItem} row - 行数据
         * @returns {void}
         */
        viewDetail(row) {
            this.currentDetail = row;
            this.detailVisible = true;
        },
        /**
         * 加载经销商选项
         * @async
         * @returns {Promise<void>}
         */
        async loadDealerOptions() {
            try {
                const res = await getDealerList();
                this.dealerOptions = res.data.data || [];
                const dealerColumn = this.option.column.find(col => col.prop === 'dealerId');
                if (dealerColumn) {
                    dealerColumn.dicData = this.dealerOptions;
                }
            } catch (error) {
                // 如果接口不存在，使用模拟数据
                this.dealerOptions = [
                    { id: 1, dealerName: '经销商A' },
                    { id: 2, dealerName: '经销商B' },
                    { id: 3, dealerName: '经销商C' }
                ];
                const dealerColumn = this.option.column.find(col => col.prop === 'dealerId');
                if (dealerColumn) {
                    dealerColumn.dicData = this.dealerOptions;
                }
            }
        },
        /**
         * 加载品牌选项
         * @async
         * @returns {Promise<void>}
         */
        async loadBrandOptions() {
            try {
                const res = await getBrandList();
                this.brandOptions = res.data.data || [];
                const brandColumn = this.option.column.find(col => col.prop === 'brandId');
                if (brandColumn) {
                    brandColumn.dicData = this.brandOptions;
                }
            } catch (error) {
                // 如果接口不存在，使用模拟数据
                this.brandOptions = [
                    { id: 1, brandName: '品牌A' },
                    { id: 2, brandName: '品牌B' },
                    { id: 3, brandName: '品牌C' }
                ];
                const brandColumn = this.option.column.find(col => col.prop === 'brandId');
                if (brandColumn) {
                    brandColumn.dicData = this.brandOptions;
                }
            }
        },
        /**
         * 保存行数据
         * @async
         * @param {AnnouncementItem} row - 行数据
         * @param {Function} done - 完成回调
         * @param {Function} loading - 加载回调
         * @returns {Promise<void>}
         */
        async rowSave(row, done, loading) {
            try {
                await add(row);
                this.onLoad(this.page);
                this.$message({
                    type: "success",
                    message: "操作成功!"
                });
                done();
            } catch (error) {
                console.log(error);
                loading();
            }
        },
        /**
         * 更新行数据
         * @async
         * @param {AnnouncementItem} row - 行数据
         * @param {number} index - 行索引
         * @param {Function} done - 完成回调
         * @param {Function} loading - 加载回调
         * @returns {Promise<void>}
         */
        async rowUpdate(row, index, done, loading) {
            try {
                await update(row);
                this.onLoad(this.page);
                this.$message({
                    type: "success",
                    message: "操作成功!"
                });
                done();
            } catch (error) {
                console.log(error);
                loading();
            }
        },
        /**
         * 删除行数据
         * @async
         * @param {AnnouncementItem} row - 行数据
         * @returns {Promise<void>}
         */
        async rowDel(row) {
            try {
                await this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                });
                await remove(row.id);
                this.onLoad(this.page);
                this.$message({
                    type: "success",
                    message: "操作成功!"
                });
            } catch (error) {
                // 用户取消删除或删除失败
                console.log(error);
            }
        },
        /**
         * 重置搜索
         * @returns {void}
         */
        searchReset() {
            this.query = {};
            this.onLoad(this.page);
        },
        /**
         * 搜索变化
         * @param {QueryParams} params - 搜索参数
         * @param {Function} done - 完成回调
         * @returns {void}
         */
        searchChange(params, done) {
            this.query = params;
            this.page.currentPage = 1;
            this.onLoad(this.page, params);
            done();
        },
        /**
         * 选择变化
         * @param {Array<AnnouncementItem>} list - 选中的数据列表
         * @returns {void}
         */
        selectionChange(list) {
            this.selectionList = list;
        },
        /**
         * 清空选择
         * @returns {void}
         */
        selectionClear() {
            this.selectionList = [];
            this.$refs.crud.toggleSelection();
        },
        /**
         * 批量删除
         * @async
         * @returns {Promise<void>}
         */
        async handleDelete() {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据");
                return;
            }
            try {
                await this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                });
                await remove(this.ids);
                this.onLoad(this.page);
                this.$message({
                    type: "success",
                    message: "操作成功!"
                });
                this.$refs.crud.toggleSelection();
            } catch (error) {
                // 用户取消删除或删除失败
                console.log(error);
            }
        },
        /**
         * 打开前回调
         * @async
         * @param {Function} done - 完成回调
         * @param {string} type - 操作类型
         * @returns {Promise<void>}
         */
        async beforeOpen(done, type) {
            if (["edit", "view"].includes(type)) {
                try {
                    const res = await getAnnouncement(this.form.id);
                    this.form = res.data.data;
                } catch (error) {
                    console.log(error);
                }
            }
            done();
        },
        /**
         * 当前页变化
         * @param {number} currentPage - 当前页码
         * @returns {void}
         */
        currentChange(currentPage) {
            this.page.currentPage = currentPage;
        },
        /**
         * 页大小变化
         * @param {number} pageSize - 页大小
         * @returns {void}
         */
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        },
        /**
         * 刷新变化
         * @returns {void}
         */
        refreshChange() {
            this.onLoad(this.page, this.query);
        },
        /**
         * 加载数据
         * @async
         * @param {PageInfo} page - 分页信息
         * @param {QueryParams} [params={}] - 查询参数
         * @returns {Promise<void>}
         */
        async onLoad(page, params = {}) {
            const { publishTime } = this.query;
            let values = {
                ...params,
            };
            if (publishTime) {
                values = {
                    ...params,
                    publishTimeStart: publishTime[0],
                    publishTimeEnd: publishTime[1],
                    ...this.query
                };
                values.publishTime = null;
            }
            this.loading = true;
            try {
                const res = await getList(page.currentPage, page.pageSize, values);
                const data = res.data.data;
                this.page.total = data.total;
                this.data = data.records;
                this.loading = false;
                this.selectionClear();
            } catch (error) {
                console.log(error);
                this.loading = false;
            }
        }
    }
};
</script>

<style scoped>
.detail-content {
    padding: 20px;
}

.detail-info {
    margin: 20px 0;
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 4px;
}

.detail-info p {
    margin: 8px 0;
}

.detail-body {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    min-height: 200px;
}
</style>