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

<template>
    <basic-container>
        <!-- 公告表单组件 -->
        <announcement-form
            :visible.sync="announcementFormVisible"
            :is-edit="isEditMode"
            :announcement-id="editAnnouncementId"
            @save-success="handleFormSaveSuccess"
        />

        <!-- 公告列表 -->
        <avue-crud
            v-if="!announcementFormVisible"
            :option="option"
            :data="data"
            ref="crud"
            v-model="form"
            :page.sync="page"
            :permission="permissionList"
            :before-open="beforeOpen"
            :table-loading="loading"
            @row-update="rowUpdate"
            @row-save="rowSave"
            @search-change="searchChange"
            @search-reset="searchReset"
            @selection-change="selectionChange"
            @current-change="currentChange"
            @size-change="sizeChange"
            @refresh-change="refreshChange"
            @on-load="onLoad"
        >
            <template slot="menu" slot-scope="{ row, index }">
                <el-button
                    type="text"
                    size="small"
                    icon="el-icon-view"
                    @click="handleDetail(row)"
                >预览</el-button>
                <el-button
                    type="text"
                    size="small"
                    icon="el-icon-delete"
                    @click="handleRowDelete(row)"
                >删除</el-button>
            </template>

            <!-- 客户黑名单字段自定义插槽 -->
            <template slot="customerBlacklistForm" slot-scope="{value, column}">
                <el-select
                    v-model="form.customerBlacklist"
                    multiple
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入客户名称进行搜索"
                    :remote-method="remoteSearchCustomers"
                    :loading="customerOptionsLoading"
                    value-key="id"
                    @change="handleCustomerBlacklistChange"
                    @clear="clearCustomerOptions"
                    style="width: 100%;"
                    clearable
                >
                    <el-option
                        v-for="customer in customerBlacklistOptions"
                        :key="customer.id"
                        :label="getCustomerDisplayName(customer)"
                        :value="customer"
                    >
                        <span style="float: left">{{ customer.Customer_NAME }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">
                            {{ customer.Customer_CODE }}
                        </span>
                    </el-option>
                </el-select>
            </template>

            <!-- 其他现有插槽 -->
            <template slot-scope="{row}" slot="categoryName">
                <el-tag type="primary">{{ row.categoryName }}</el-tag>
            </template>
            <template slot-scope="{row}" slot="status">
                <el-tag :type="getStatusTagType(row.status)">
                    {{ getStatusLabel(row.status) }}
                </el-tag>
            </template>
            <template slot-scope="{row}" slot="visibleRoles">
                <span v-for="role in parseRolesMask(row.visibleRoles)" :key="role.value">
                    <el-tag :type="getRoleTagType(role.value)" size="mini" style="margin-right: 4px;">
                        {{ role.label }}
                    </el-tag>
                </span>
            </template>
        </avue-crud>

        <!-- 详情对话框 -->
        <el-dialog title="公告详情" :visible.sync="detailVisible" append-to-body width="60%" :close-on-click-modal="false">
            <div class="detail-content" v-if="currentDetail.id">
                <!-- 仅展示富文本内容 -->
                <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 AnnouncementIndexMixin from './mixins/announcementIndex.js';
import AnnouncementForm from '@/components/announcement/index.vue';

/**
 * 公告管理组件
 * @component NoticeIndex
 */
export default {
    name: 'NoticeIndex',
    components: {
        AnnouncementForm
    },
    mixins: [AnnouncementIndexMixin],
    mounted() {
        if (typeof this.onShow === 'function') {
            this.onShow();
        }
    },
    activated() {
        if (typeof this.onShow === 'function') {
            this.onShow();
        }
    }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>