refactor(announcement): 优化公告页面代码格式和结构

src/views/announcement/index.vue

@@ -1,426 +1,406 @@
 <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>
+    <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} from "@/api/announcement";
-import {mapGetters} from "vuex";
+import { getList, remove, update, add, getAnnouncement, getDealerList, getBrandList } from "@/api/announcement";
+import { mapGetters } from "vuex";
 
 export default {
-  name: 'AnnouncementIndex',
-  data() {
-    return {
-      form: {},
-      query: {},
-      loading: true,
-      detailVisible: false,
-      currentDetail: {},
-      page: {
-        pageSize: 10,
-        currentPage: 1,
-        total: 0
-      },
-      selectionList: [],
-      dealerOptions: [],
-      brandOptions: [],
-      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: "publishTime",
-            type: "datetime",
-            format: "yyyy-MM-dd hh:mm:ss",
-            valueFormat: "yyyy-MM-dd hh:mm:ss",
-            overHidden: true,
-            search: true,
-            rules: [{
-              required: true,
-              message: "请选择发布时间",
-              trigger: "change"
-            }]
-          },
-          {
-            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"
+    name: 'AnnouncementIndex',
+    data() {
+        return {
+            form: {},
+            query: {},
+            loading: true,
+            detailVisible: false,
+            currentDetail: {},
+            page: {
+                pageSize: 10,
+                currentPage: 1,
+                total: 0
             },
-            slot: true,
-            overHidden: true,
-            search: true,
-            span: 12,
-            rules: [{
-              required: true,
-              message: "请选择品牌",
-              trigger: "change"
-            }]
-          },
-          {
-            label: "详情",
-            prop: "detail",
-            slot: true,
-            hide: true,
-            showColumn: false
-          },
-          {
-            label: "公告内容",
-            prop: "content",
-            component: 'AvueUeditor',
-            options: {
-              action: '/api/blade-resource/oss/endpoint/put-file',
-              props: {
-                res: "data",
-                url: "link",
-              }
+            selectionList: [],
+            dealerOptions: [],
+            brandOptions: [],
+            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: "publishTime",
+                        type: "datetime",
+                        format: "yyyy-MM-dd hh:mm:ss",
+                        valueFormat: "yyyy-MM-dd hh:mm:ss",
+                        overHidden: true,
+                        search: true,
+                        rules: [{
+                            required: true,
+                            message: "请选择发布时间",
+                            trigger: "change"
+                        }]
+                    },
+                    {
+                        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: "detail",
+                        slot: true,
+                        hide: true,
+                        showColumn: false
+                    },
+                    {
+                        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"
+                        }]
+                    },
+                    {
+                        label: "状态",
+                        prop: "status",
+                        type: "select",
+                        dicData: [
+                            { label: "启用", value: 1 },
+                            { label: "禁用", value: 0 }
+                        ],
+                        search: true,
+                        span: 12,
+                        value: 1
+                    }
+                ]
             },
-            showColumn: false,
-            hide: true,
-            minRows: 6,
-            span: 24,
-            rules: [{
-              required: true,
-              message: "请输入公告内容",
-              trigger: "blur"
-            }]
-          },
-          {
-            label: "状态",
-            prop: "status",
-            type: "select",
-            dicData: [
-              {label: "启用", value: 1},
-              {label: "禁用", value: 0}
-            ],
-            search: true,
-            span: 12,
-            value: 1
-          }
-        ]
-      },
-      data: []
-    };
-  },
-  computed: {
-    ...mapGetters(["permission"]),
-    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)
-      };
-    },
-    ids() {
-      let ids = [];
-      this.selectionList.forEach(ele => {
-        ids.push(ele.id);
-      });
-      return ids.join(",");
-    }
-  },
-  created() {
-    this.loadDealerOptions();
-    this.loadBrandOptions();
-  },
-  methods: {
-    // 查看详情
-    viewDetail(row) {
-      this.currentDetail = row;
-      this.detailVisible = true;
-    },
-    // 加载经销商选项
-    loadDealerOptions() {
-      getDealerList().then(res => {
-        this.dealerOptions = res.data.data || [];
-        const dealerColumn = this.option.column.find(col => col.prop === 'dealerId');
-        if (dealerColumn) {
-          dealerColumn.dicData = this.dealerOptions;
-        }
-      }).catch(() => {
-        // 如果接口不存在，使用模拟数据
-        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;
-        }
-      });
+            data: []
+        };
     },
-    // 加载品牌选项
-    loadBrandOptions() {
-      getBrandList().then(res => {
-        this.brandOptions = res.data.data || [];
-        const brandColumn = this.option.column.find(col => col.prop === 'brandId');
-        if (brandColumn) {
-          brandColumn.dicData = this.brandOptions;
-        }
-      }).catch(() => {
-        // 如果接口不存在，使用模拟数据
-        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;
+    computed: {
+        ...mapGetters(["permission"]),
+        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)
+            };
+        },
+        ids() {
+            let ids = [];
+            this.selectionList.forEach(ele => {
+                ids.push(ele.id);
+            });
+            return ids.join(",");
         }
-      });
-    },
-    rowSave(row, done, loading) {
-      add(row).then(() => {
-        this.onLoad(this.page);
-        this.$message({
-          type: "success",
-          message: "操作成功!"
-        });
-        done();
-      }, error => {
-        console.log(error);
-        loading();
-      });
-    },
-    rowUpdate(row, index, done, loading) {
-      update(row).then(() => {
-        this.onLoad(this.page);
-        this.$message({
-          type: "success",
-          message: "操作成功!"
-        });
-        done();
-      }, error => {
-        console.log(error);
-        loading();
-      });
     },
-    rowDel(row) {
-      this.$confirm("确定将选择数据删除?", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          return remove(row.id);
-        })
-        .then(() => {
-          this.onLoad(this.page);
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          });
-        });
+    created() {
+        this.loadDealerOptions();
+        this.loadBrandOptions();
     },
-    searchReset() {
-      this.query = {};
-      this.onLoad(this.page);
-    },
-    searchChange(params, done) {
-      this.query = params;
-      this.page.currentPage = 1;
-      this.onLoad(this.page, params);
-      done();
-    },
-    selectionChange(list) {
-      this.selectionList = list;
-    },
-    selectionClear() {
-      this.selectionList = [];
-      this.$refs.crud.toggleSelection();
-    },
-    handleDelete() {
-      if (this.selectionList.length === 0) {
-        this.$message.warning("请选择至少一条数据");
-        return;
-      }
-      this.$confirm("确定将选择数据删除?", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(() => {
-          return remove(this.ids);
-        })
-        .then(() => {
-          this.onLoad(this.page);
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          });
-          this.$refs.crud.toggleSelection();
-        });
-    },
-    beforeOpen(done, type) {
-      if (["edit", "view"].includes(type)) {
-        getAnnouncement(this.form.id).then(res => {
-          this.form = res.data.data;
-        });
-      }
-      done();
-    },
-    currentChange(currentPage) {
-      this.page.currentPage = currentPage;
-    },
-    sizeChange(pageSize) {
-      this.page.pageSize = pageSize;
-    },
-    refreshChange() {
-      this.onLoad(this.page, this.query);
-    },
-    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;
-      getList(page.currentPage, page.pageSize, values).then(res => {
-        const data = res.data.data;
-        this.page.total = data.total;
-        this.data = data.records;
-        this.loading = false;
-        this.selectionClear();
-      });
+    methods: {
+        // 查看详情
+        viewDetail(row) {
+            this.currentDetail = row;
+            this.detailVisible = true;
+        },
+        // 加载经销商选项
+        loadDealerOptions() {
+            getDealerList().then(res => {
+                this.dealerOptions = res.data.data || [];
+                const dealerColumn = this.option.column.find(col => col.prop === 'dealerId');
+                if (dealerColumn) {
+                    dealerColumn.dicData = this.dealerOptions;
+                }
+            }).catch(() => {
+                // 如果接口不存在，使用模拟数据
+                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;
+                }
+            });
+        },
+        // 加载品牌选项
+        loadBrandOptions() {
+            getBrandList().then(res => {
+                this.brandOptions = res.data.data || [];
+                const brandColumn = this.option.column.find(col => col.prop === 'brandId');
+                if (brandColumn) {
+                    brandColumn.dicData = this.brandOptions;
+                }
+            }).catch(() => {
+                // 如果接口不存在，使用模拟数据
+                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;
+                }
+            });
+        },
+        rowSave(row, done, loading) {
+            add(row).then(() => {
+                this.onLoad(this.page);
+                this.$message({
+                    type: "success",
+                    message: "操作成功!"
+                });
+                done();
+            }, error => {
+                console.log(error);
+                loading();
+            });
+        },
+        rowUpdate(row, index, done, loading) {
+            update(row).then(() => {
+                this.onLoad(this.page);
+                this.$message({
+                    type: "success",
+                    message: "操作成功!"
+                });
+                done();
+            }, error => {
+                console.log(error);
+                loading();
+            });
+        },
+        rowDel(row) {
+            this.$confirm("确定将选择数据删除?", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning"
+            })
+                .then(() => {
+                    return remove(row.id);
+                })
+                .then(() => {
+                    this.onLoad(this.page);
+                    this.$message({
+                        type: "success",
+                        message: "操作成功!"
+                    });
+                });
+        },
+        searchReset() {
+            this.query = {};
+            this.onLoad(this.page);
+        },
+        searchChange(params, done) {
+            this.query = params;
+            this.page.currentPage = 1;
+            this.onLoad(this.page, params);
+            done();
+        },
+        selectionChange(list) {
+            this.selectionList = list;
+        },
+        selectionClear() {
+            this.selectionList = [];
+            this.$refs.crud.toggleSelection();
+        },
+        handleDelete() {
+            if (this.selectionList.length === 0) {
+                this.$message.warning("请选择至少一条数据");
+                return;
+            }
+            this.$confirm("确定将选择数据删除?", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning"
+            })
+                .then(() => {
+                    return remove(this.ids);
+                })
+                .then(() => {
+                    this.onLoad(this.page);
+                    this.$message({
+                        type: "success",
+                        message: "操作成功!"
+                    });
+                    this.$refs.crud.toggleSelection();
+                });
+        },
+        beforeOpen(done, type) {
+            if (["edit", "view"].includes(type)) {
+                getAnnouncement(this.form.id).then(res => {
+                    this.form = res.data.data;
+                });
+            }
+            done();
+        },
+        currentChange(currentPage) {
+            this.page.currentPage = currentPage;
+        },
+        sizeChange(pageSize) {
+            this.page.pageSize = pageSize;
+        },
+        refreshChange() {
+            this.onLoad(this.page, this.query);
+        },
+        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;
+            getList(page.currentPage, page.pageSize, values).then(res => {
+                const data = res.data.data;
+                this.page.total = data.total;
+                this.data = data.records;
+                this.loading = false;
+                this.selectionClear();
+            });
+        }
     }
-  }
 };
 </script>
 
 <style scoped>
 .detail-content {
-  padding: 20px;
+    padding: 20px;
 }
 
 .detail-info {
-  margin: 20px 0;
-  padding: 15px;
-  background-color: #f5f5f5;
-  border-radius: 4px;
+    margin: 20px 0;
+    padding: 15px;
+    background-color: #f5f5f5;
+    border-radius: 4px;
 }
 
 .detail-info p {
-  margin: 8px 0;
+    margin: 8px 0;
 }
 
 .detail-body {
-  margin-top: 20px;
-  padding: 15px;
-  border: 1px solid #e4e7ed;
-  border-radius: 4px;
-  min-height: 200px;
+    margin-top: 20px;
+    padding: 15px;
+    border: 1px solid #e4e7ed;
+    border-radius: 4px;
+    min-height: 200px;
 }
-</style>
+</style>