소스 검색

feat(announcement): 新增公告管理模块及API接口

yz 2 달 전
부모
커밋
d9ad52fcfa
2개의 변경된 파일490개의 추가작업 그리고 0개의 파일을 삭제
  1. 65 0
      src/api/announcement/index.js
  2. 425 0
      src/views/announcement/index.vue

+ 65 - 0
src/api/announcement/index.js

@@ -0,0 +1,65 @@
+import request from '@/router/axios';
+
+export const getList = (current, size, params) => {
+  return request({
+    url: '/api/blade-announcement/list',
+    method: 'get',
+    params: {
+      ...params,
+      current,
+      size,
+    }
+  })
+}
+
+export const remove = (ids) => {
+  return request({
+    url: '/api/blade-announcement/remove',
+    method: 'post',
+    params: {
+      ids,
+    }
+  })
+}
+
+export const add = (row) => {
+  return request({
+    url: '/api/blade-announcement/submit',
+    method: 'post',
+    data: row
+  })
+}
+
+export const update = (row) => {
+  return request({
+    url: '/api/blade-announcement/submit',
+    method: 'post',
+    data: row
+  })
+}
+
+export const getAnnouncement = (id) => {
+  return request({
+    url: '/api/blade-announcement/detail',
+    method: 'get',
+    params: {
+      id
+    }
+  })
+}
+
+// 获取经销商列表
+export const getDealerList = () => {
+  return request({
+    url: '/api/blade-system/dealer/list',
+    method: 'get'
+  })
+}
+
+// 获取品牌列表
+export const getBrandList = () => {
+  return request({
+    url: '/api/blade-system/brand/list',
+    method: 'get'
+  })
+}

+ 425 - 0
src/views/announcement/index.vue

@@ -0,0 +1,425 @@
+<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} 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: true,
+        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
+          }
+        ]
+      },
+      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;
+        }
+      });
+    },
+    // 加载品牌选项
+    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;
+}
+
+.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>