|
@@ -0,0 +1,410 @@
|
|
|
+<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: 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
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ 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)
|
|
|
+ addBtn: true,
|
|
|
+ viewBtn: true,
|
|
|
+ delBtn: true,
|
|
|
+ editBtn: true
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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>
|