特价菜模块UI优化

src/components/page/third/operate/StoreSpecials1.vue

@@ -0,0 +1,841 @@
+<template>
+    <div class="page-wrap">
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <i class="el-icon-eleme"></i> 特价菜列表
+            </el-breadcrumb>
+        </div>
+        <div class="background">
+            <div class="topbox">
+                <div class="topbox-left">
+                    <span class="page-title">特价菜活动管理</span>
+                </div>
+                <div class="topbox-right">
+                    <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="add">新增活动</el-button>
+                </div>
+            </div>
+            <div class="searchbox">
+                <span>活动名称</span>
+                <el-input v-model="activityName" placeholder="请输入活动名称" size="small" style="width:200px" clearable @clear="getDataList" @keyup.enter.native="getDataList"></el-input>
+                <el-button type="primary" icon="el-icon-search" size="small" @click="getDataList">查询</el-button>
+            </div>
+            <div class="tablebox">
+                <dptable ref="mainTable" :columns="columns" :dataSource="tableData" :options="options" :fetch="getDataList"/>
+            </div>
+        </div>
+        <el-dialog :title="editTitle" :class="isMobile ? 'el-dialog' : ''" :fullscreen="isMobile" :visible.sync="dialogVisible" :before-close="closeDia">
+            <div class="container" >
+                <div class="form-box" style="width: 100%">
+                    <el-form ref="form" :model="form" >
+                        <el-form-item label="活动名称" required>
+                            <el-input v-model="form.activityName" placeholder="活动名称20字以内" style="width: 220px;"></el-input>
+                        </el-form-item>
+                        <el-form-item label="活动描述" required>
+                            <el-input v-model="form.activityComment" placeholder="活动描述20字以内" style="width: 220px;"></el-input>
+                        </el-form-item>
+                        <el-form-item label="活动日期" required>
+                            <el-date-picker
+                                v-model="value1"
+                                type="daterange"
+                                range-separator="至"
+                                start-placeholder="开始日期"
+                                end-placeholder="结束日期"
+                                style="width: 220px">
+                            </el-date-picker>
+                        </el-form-item>
+                        <div class="crumbs" >
+                            <el-button class="added" type="primary" @click="added">选择商品</el-button>
+                        </div>
+                        <el-form-item label="活动商品" required>
+                            <dptable :columns="columns1" :dataSource="tableData1" :fetch="getDataList" :options="options1"/>
+                        </el-form-item>
+                        <el-form-item>
+                            <el-button type="primary" @click="save">保存</el-button>
+                            <el-button @click="closeDia">关闭</el-button>
+                        </el-form-item>
+                    </el-form>
+                </div>
+            </div>
+        </el-dialog>
+        <el-dialog :title="editTitle" :class="isMobile ? 'el-dialog' : ''" :fullscreen="isMobile" :visible.sync="getflg" :before-close="closeGetDia">
+            <div class="container" >
+                <div class="form-box" style="width: 100%">
+                    <el-form ref="form" :model="form" >
+                        <el-form-item label="活动名称">
+                            <el-input disabled v-model="form.activityName" placeholder="活动名称20字以内" style="width: 220px;"></el-input>
+                        </el-form-item>
+                        <el-form-item label="活动描述">
+                            <el-input disabled v-model="form.activityComment" placeholder="活动描述20字以内" style="width: 220px;"></el-input>
+                        </el-form-item>
+                        <el-form-item label="活动日期">
+                            <el-date-picker
+                                disabled
+                                v-model="value1"
+                                type="daterange"
+                                range-separator="至"
+                                start-placeholder="开始日期"
+                                end-placeholder="结束日期"
+                                style="width: 220px">
+                            </el-date-picker>
+                        </el-form-item>
+                       
+                        <el-form-item label="活动商品">
+                            <dptable :columns="columns3" :dataSource="tableData1" :fetch="getDataList" :options="options1"/>
+                        </el-form-item>
+
+                        <el-form-item>
+                            <el-button @click="closeGetDia">关闭</el-button>
+                        </el-form-item>
+                       
+                    </el-form>
+                </div>
+            </div>
+        </el-dialog>
+
+        <!-- 商品检索弹窗 -->
+        <el-dialog title="商品检索" :class="isMobile ? 'el-dialog' : ''" :fullscreen="isMobile" :visible.sync="dialogTableVisible1" :before-close="closeDia11">
+            <div class="container" >
+                <div class="handle-box-top" style="margin-top:-10px;height:20px;">
+                    <div style="padding-bottom:5px;">
+                        <span style="margin-left:5px">商品名称:</span>
+                        <el-input v-model="goodsName" placeholder="商品名称" class="handle-input mr10" style="width:150px"></el-input>
+                        <el-button style="margin-left:20px;" type="primary" icon="search" @click="getGoodsList">搜索</el-button>
+                    </div>
+                </div>
+            </div>
+            <div class="container" style="margin-top:10px">
+                <dptable style="margin-top:-10px;" :columns="columns2" :dataSource="goodsList" :options="options2"/>
+            </div>
+        </el-dialog>
+        <div class="img-preview" v-if="previewVisible" @click="previewVisible = false">
+            <img :src="previewImage" @click.stop />
+        </div>
+    </div>
+</template>
+
+<script>
+import dptable from "../../../common/Dptable";
+const querystring = require("querystring");
+
+export default {
+    components: {
+        dptable
+    },
+    data() {
+        return {
+            // 访问数据的地址
+            url: '/storeSpecialsThirdApi/getStoreSpecialActivityListForThird',
+            updateSpecialsUrl: '/storeSpecialsThirdApi/saveStoreSpecialActivityForThird',
+            getByIdUrl: '/storeSpecialsThirdApi/getStoreSpecialActivityByIdForThird',
+            goodsUrl: '/storeSpecialsThirdApi/getStoreSingleGoodsForSpecialForThird',
+            changeStatusUrl: '/storeSpecialsThirdApi/updateStoreSpecialActivityStatusForThird',
+            delurl: '/storeSpecialsThirdApi/deleteStoreSpecialActivityForThird',
+            activityName: "",
+            columns: [
+                {
+                    prop: "activityName",
+                    label: "活动名称",
+                },
+                {
+                    prop: "activityComment",
+                    label: "活动描述",
+                },
+                {
+                    prop: "startDate",
+                    label: "开始时间",
+                },
+                {
+                    prop: "endDate",
+                    label: "结束时间",
+                },
+                {
+                    prop: "status",
+                    label: "状态",
+                    width: 100,
+                    render: (row, column, index) => {
+                        if (row.status == 1) {
+                            return (
+                                <span style="color: green">进行中</span>
+                            )
+                        } else {
+                            return (
+                                <span style="color: red" >停止</span>
+                            )
+                        }
+                    }
+                },
+                {
+                    prop: "status",
+                    label: "更改状态",
+                    width: 100,
+                    render: (row, column, index) => {
+                        if (row.status == 1) {
+                            return (
+                                <button class="el-button  el-button--mini is-plain"
+                                        onClick={e => this.changeStatus(e, row)}>
+                                    停止
+                                </button>
+                            );
+                        } else {
+                            return (
+                                <button class="el-button el-button--danger el-button--mini is-plain"
+                                        onClick={e => this.changeStatus(e, row)}>
+                                    进行
+                                </button>
+                            );
+                        }
+                    }
+                },
+                {
+                    button: true,
+                    label: "操作",
+                    fixed: 'right',
+                    group: [
+                        {
+                            name: "查看",
+                            type: "primary",
+                            icon: "el-icon-info",
+                            plain: true,
+                            onClick: (row, index) => {
+                                this.getRow(row);
+                            }
+                        },
+                        {
+                            name: "编辑",
+                            type: "warning",
+                            icon: "el-icon-edit",
+                            plain: true,
+                            onClick: (row, index) => {
+                                this.enditRow(row);
+                            }
+                        },
+                        {
+                            name: '删除',
+                            type: 'danger',
+                            icon: 'el-icon-delete',
+                            plain: true,
+                            onClick: row => {
+                                this.deleteRow(row.storeSpecialActivityId);
+                            }
+                        },
+                    ]
+                }
+            ],
+            value1: [],
+            tableData: [],
+            options: {
+                mutiSelect: false, // 是否有前部的多选框
+                index: false, // 显示序号， 多选则 mutiSelect
+                initTable: true, // 是否一挂载就加载数据
+                height: "600"
+            },
+            dialogVisible: false,
+            getflg: false,
+            editTitle: '',
+            form: {
+                activityName: '',
+                activityComment: '',
+                status: 1,
+            },
+            goodsList: [],
+            store: {},
+            columns1: [
+                {
+                    prop: 'pictureUrl',
+                    label: '商品图片',
+                    width: 120,
+                    fixed: true,
+                    render: (row, column, index) => {
+                        if (row.pictureUrl != null && row.pictureUrl != '' &&  row.pictureUrl != undefined) {
+                            return (<img onClick={e => this.viewpictrue(row.pictureUrl)} style="height:80px;width:80px;" src={row.pictureUrl} />)
+                        }
+                    }
+                },
+                {
+                    prop: "goodsName",
+                    label: "菜品名称",
+                    width: 160
+                },
+                {
+                    prop: "costPrice",
+                    label: "原价",
+                    width: 80
+                },
+                {
+                    text: true,
+                    prop: "activityPrice",
+                    label: "活动价",
+                    width: 80,
+                },
+                {
+                    text: true,
+                    prop: "maxNum",
+                    label: "每单限购",
+                    width: 80,
+                },
+                {
+                    text: true,
+                    prop: "activityNum",
+                    label: "活动库存",
+                    width: 80,
+                },
+                {
+                    prop: "inventory",
+                    label: "剩余库存",
+                    width: 80
+                },
+                {
+                    button: true,
+                    label: "操作",
+                    group: [
+                        {
+                            name: '删除',
+                            type: 'danger',
+                            icon: 'el-icon-delete',
+                            plain: true,
+                            onClick: (row, index) => {
+                                this.onDeleteItem(
+                                    index
+                                );
+                            }
+                        }
+                    ]
+                }
+            ],
+            columns3: [
+                {
+                    prop: 'pictureUrl',
+                    label: '商品图片',
+                    width: 120,
+                    fixed: true,
+                    render: (row, column, index) => {
+                        if (row.pictureUrl != null && row.pictureUrl != '' &&  row.pictureUrl != undefined) {
+                            return (<img onClick={e => this.viewpictrue(row.pictureUrl)} style="height:80px;width:80px;" src={row.pictureUrl} />)
+                        }
+                    }
+                },
+                {
+                    prop: "goodsName",
+                    label: "菜品名称",
+                    width: 160
+                },
+                {
+                    prop: "costPrice",
+                    label: "原价",
+                    width: 80
+                },
+                {
+                    prop: "activityPrice",
+                    label: "活动价",
+                    width: 100,
+                },
+                {
+                    prop: "maxNum",
+                    label: "每单限购",
+                    width: 100,
+                },
+                {
+                    prop: "activityNum",
+                    label: "活动库存",
+                    width: 100,
+                },
+                {
+                    prop: "inventory",
+                    label: "剩余库存",
+                    width: 80
+                },
+            ],
+            tableData1: [],
+            options1: {
+                mutiSelect: false,// 是否有前部的多选框
+                index: false, // 显示序号， 多选则 mutiSelect
+                initTable: false, // 是否一挂载就加载数据
+                border: true
+            },
+            columns2: [
+                {
+                    prop: 'goodsName', label: '商品名称', width: 400,
+                },
+                {
+                    prop: 'pictureUrl',
+                    label: '商品图片',
+                    width: 120,
+                    fixed: true,
+                    render: (row, column, index) => {
+                        if (row.pictureUrl != null && row.pictureUrl != '' &&  row.pictureUrl != undefined) {
+                            return (<img onClick={e => this.viewpictrue(row.pictureUrl)} style="height:80px;width:80px;" src={row.pictureUrl} />)
+                        }
+                    }
+                },
+                {
+                    button: true,
+                    label: '操作',
+                    width: 100,
+                    group: [
+                        {
+                            name: '选择',
+                            type: 'warning',
+                            icon: 'el-icon-edit',
+                            plain: true,
+                            onClick: (row, index) => {
+                                this.selectRow(row);
+                            }
+                        },
+                    ]
+                }
+            ],
+            options2: {
+                mutiSelect: false,// 是否有前部的多选框
+                index: false, // 显示序号， 多选则 mutiSelect
+                initTable: false, // 是否一挂载就加载数据
+                border: true,
+                height: '500'
+            },
+            dialogTableVisible1: false,
+            goodsName: '',
+            isMobile: false,
+            editingRowId: null,
+            previewImage: '',
+            previewVisible: false
+        };
+    },
+    created () {
+        if (this.$isMobile()){
+            // 移动端
+            this.isMobile = true
+        } else {
+            // PC端
+            this.isMobile = false
+        }
+        this.store = JSON.parse(localStorage.getItem("storeInfo"));
+    },
+    methods: {
+        // 选择后关闭弹窗
+        selectRow(row) {
+            row.costPrice = this.moneyConverter(row.costPrice)
+            row.activityPrice = this.moneyConverter(row.activityPrice)
+            row.maxNum = ''
+            this.tableData1.push(row)
+            this.dialogTableVisible1 = false
+            this.goodsList = []
+            this.goodsName = ''
+        },
+        closeDia11 () {
+            this.dialogTableVisible1 = false
+            this.goodsList = []
+            this.goodsName = ''
+        },
+        onDeleteItem(index) {
+            this.tableData1.splice(index, 1);
+        },
+        added() {
+            this.getGoodsList()
+            this.dialogTableVisible1 = true
+        },
+        getGoodsList() {
+            const ids = this.tableData1.map(item => item.goodsId);
+
+            const idsStr = ids.join(',');
+            this.$axios.post(this.goodsUrl,querystring.stringify({
+                storeId: this.store.storeId,
+                goodsName: this.goodsName,
+                ids: idsStr
+            })).then(res => {
+                this.goodsList = res.data.list;
+            }).catch(error => {
+                console.log(error);
+            });
+        },
+        getDataList() {
+            this.options.loading = true;
+            this.$axios.post(this.url,querystring.stringify({
+                activityName: this.activityName,
+                storeId: this.store.storeId
+            })).then(res => {
+                this.tableData = res.data.list;
+                this.options.loading = false;
+            }).catch(error => {
+                console.log(error);
+                this.options.loading = false;
+            });
+        },
+        //添加品牌
+        add() {
+            this.editTitle = "新增特价菜活动";
+            this.dialogVisible = true;
+        },
+        getRow (row) {
+            this.highlightRow(row);
+            this.getActivityById(row.storeSpecialActivityId);
+            this.editTitle = "查看特价菜活动";
+            this.value1.push(row.startDate)
+            this.value1.push(row.endDate)
+            this.form = {
+                storeSpecialActivityId: row.storeSpecialActivityId,
+                storeId: row.storeId,
+                activityName: row.activityName,
+                activityComment: row.activityComment,
+                sort: row.sort,
+                minBuyNum: row.minBuyNum,
+                status: row.status,
+            }
+            this.dialogVisible = false;
+            this.getflg = true;
+        },
+        // 编辑行
+        enditRow(row) {
+            if (row.status === 1) {
+                this.$message.error("进行中的活动不可以修改，请先修改活动状态");
+                return;
+            }
+            this.getActivityById(row.storeSpecialActivityId);
+            this.editTitle = "编辑特价菜活动";
+            this.value1.push(row.startDate)
+            this.value1.push(row.endDate)
+            this.form = {
+                storeSpecialActivityId: row.storeSpecialActivityId,
+                storeId: row.storeId,
+                activityName: row.activityName,
+                activityComment: row.activityComment,
+                sort: row.sort,
+                minBuyNum: row.minBuyNum,
+                status: row.status,
+            }
+            this.dialogVisible = true;
+            this.highlightRow(row);
+        },
+        getActivityById(id) {
+            this.options.loading = true;
+            this.$axios.post(this.getByIdUrl,querystring.stringify({
+                id: id,
+                storeId: this.store.storeId
+            })).then(res => {
+                this.form = res.data.obj;
+                this.tableData1 = res.data.list;
+                for (let i = 0; i < this.tableData1.length; i++) {
+                    this.tableData1[i].costPrice = this.moneyConverter(this.tableData1[i].costPrice)
+                    this.tableData1[i].activityPrice = this.moneyConverter(this.tableData1[i].activityPrice)
+                }
+                this.options.loading = false;
+            }).catch(error => {
+                console.log(error);
+                this.options.loading = false;
+            });
+        },
+        // 删除活动
+        deleteRow(key) {
+            this.$confirm('确定要删除该特价菜活动吗?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.$axios.post(this.delurl, querystring.stringify({
+                    id: key,
+                    storeId: this.store.storeId
+                })).then(res => {
+                    if (res.data.rtnBean.rtnCode == 0) {
+                        this.$message.success("删除成功！");
+                    } else {
+                        this.$message.error(res.data.rtnBean.rtnMsg);
+                    }
+                    this.clearHighlight();
+                    this.getDataList();
+                }).catch((error) => {
+                    this.$message.error("数据处理异常，请与管理员联系！");
+                })
+            }).catch(() => {
+                this.$message.info('已取消删除');
+            });
+        },
+        save() {
+            let regPrice = (/^[0-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/);
+            if (!this.form.activityName) {
+                this.$message.error("请输入活动名称");
+                return;
+            }
+            if (this.form.activityName.length > 20) {
+                this.$message.error("活动名称不能超过20字");
+                return;
+            }
+            if (!this.form.activityComment) {
+                this.$message.error("请输入活动描述");
+                return;
+            }
+            if (this.form.activityComment.length > 30) {
+                this.$message.error("活动描述不能超过30个字符");
+                return;
+            }
+            if (!this.value1 || this.value1.length === 0){
+                this.$message.error("请选择活动时间范围");
+                return;
+            }
+            let start = ''
+            let end = ''
+            if (this.value1 && this.value1.length !== 0){
+                start = this.value1[0] ? this.$moment(this.value1[0]).format("YYYY-MM-DD") : '';
+                end = this.value1[1] ? this.$moment(this.value1[1]).format("YYYY-MM-DD") : '';
+            }
+
+            for (let i = 0; i < this.tableData1.length; i++) {
+                if (!this.tableData1[i].goodsId) {
+                    this.$message.error("请选择商品");
+                    return;
+                }
+                if (!this.tableData1[i].activityPrice) {
+                    this.$message.error("请输入活动价格");
+                    return;
+                }
+                if (!regPrice.test(this.tableData1[i].activityPrice)) {
+                    this.$message.error("活动价格只能是整数或小数点后两位");
+                    return;
+                }
+                if (this.tableData1[i].activityPrice >= this.tableData1[i].costPrice) {
+                    this.$message.error("活动价必须小于原价");
+                    return;
+                }
+                if (!this.tableData1[i].maxNum) {
+                    this.$message.error("请输入每单限购");
+                    return;
+                }
+                if (Number(this.tableData1[i].maxNum) <= 0) {
+                    this.$message.error("每单限购要大于0");
+                    return;
+                }
+                if (!this.tableData1[i].activityNum) {
+                    this.$message.error("请输入活动库存");
+                    return;
+                }
+                if (Number(this.tableData1[i].activityNum) <= 0) {
+                    this.$message.error("活动库存要大于0");
+                    return;
+                }
+                if (Number(this.tableData1[i].maxNum) > Number(this.tableData1[i].activityNum)) {
+                    this.$message.error("每单限购不能大于活动库存");
+                    return;
+                }
+                if (Number(this.tableData1[i].activityNum) > Number(9999)) {
+                    this.$message.error("活动库存不能超过9999");
+                    return;
+                }
+                
+            }
+
+            this.$axios.post(this.updateSpecialsUrl, querystring.stringify({
+                storeId: this.store.storeId,
+                storeSpecialActivityId: this.form.storeSpecialActivityId,
+                activityName: this.form.activityName,
+                activityComment: this.form.activityComment,
+                startDate: start,
+                endDate: end,
+                goodsListStr: JSON.stringify(this.tableData1)
+            })).then(res => {
+                if (res.data.rtnBean.rtnCode == 0) {
+                    this.$message.success(res.data.rtnBean.rtnMsg);
+                    this.dialogVisible = false;
+                    this.getDataList()
+                    this.initForm()
+                } else {
+                    this.$message.error(res.data.rtnBean.rtnMsg);
+                }
+            }).catch((error) => {
+                this.$message.error('更新失败了！')
+            })
+
+        },
+        changeStatus(e, row) {
+            this.highlightRow(row);
+            this.options.loading = true;
+            let status = row.status === 1 ? 0 : 1;
+            this.$axios.post(this.changeStatusUrl, querystring.stringify({
+                id: row.storeSpecialActivityId,
+                storeId: this.store.storeId,
+                status: status
+            })
+            ).then(res => {
+                if (res.data.rtnBean.rtnCode == 0) {
+                    this.$message.success(res.data.rtnBean.rtnMsg);
+                } else {
+                    this.$message.error(res.data.rtnBean.rtnMsg);
+                }
+                this.options.loading = false;
+                this.clearHighlight();
+                this.getDataList();
+            }).catch(error => {
+                console.log(error);
+                this.options.loading = false;
+            });
+        },
+        initForm() {
+            this.form = {
+                storeSpecialActivityId: '',
+                storeId: '',
+                activityName: '',
+                activityComment: '',
+                sort: '',
+                startDate: '',
+                status: 1,
+                endDate: ''
+            }
+            this.value1 = []
+            this.tableData1 = []
+        },
+        highlightRow(row) {
+            this.editingRowId = row.storeSpecialActivityId;
+            this.$nextTick(() => {
+                const elTable = this.$refs.mainTable && this.$refs.mainTable.$children[0];
+                if (elTable) elTable.setCurrentRow(row);
+            });
+        },
+        clearHighlight() {
+            this.editingRowId = null;
+            const elTable = this.$refs.mainTable && this.$refs.mainTable.$children[0];
+            if (elTable) elTable.setCurrentRow();
+        },
+        closeDia(){
+            this.dialogVisible = false;
+            this.clearHighlight();
+            this.initForm()
+        },
+        viewpictrue(url) {
+            if (url) {
+                this.previewImage = url;
+                this.previewVisible = true;
+            }
+        },
+        closeGetDia(){
+            this.getflg = false;
+            this.clearHighlight();
+            this.initForm()
+        },
+    }
+};
+</script>
+<style scoped>
+.page-wrap{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+.crumbs{
+    color: #666;
+    flex-shrink: 0;
+}
+.background{
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 0 10px 10px;
+}
+.topbox{
+    background: white;
+    box-shadow: 0 12px 20px -8px rgba(22, 50, 62, 0.3);
+    border-radius: 10px;
+    min-height: 52px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 16px;
+    flex-shrink: 0;
+}
+.topbox-left{ flex-shrink: 0; }
+.page-title{
+    font-size: 14px;
+    color: #409EFF;
+    font-weight: 600;
+}
+.topbox-right{
+    flex-shrink: 0;
+    display: flex;
+    gap: 8px;
+}
+.searchbox{
+    background: white;
+    box-shadow: 0 12px 20px -8px rgba(22, 50, 62, 0.3);
+    border-radius: 10px;
+    padding: 12px 16px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+    font-size: 13px;
+    color: #606266;
+}
+.tablebox{
+    flex: 1;
+    min-height: 0;
+    background: white;
+    box-shadow: 0 12px 20px -8px rgba(22, 50, 62, 0.3);
+    border-radius: 10px;
+    padding: 16px;
+    overflow: hidden;
+}
+</style>
+<style>
+.tablebox,
+.tablebox > div,
+.tablebox .el-table,
+.tablebox .el-table__inner-wrapper,
+.tablebox .el-table__body-wrapper {
+    border: none !important;
+    outline: none !important;
+    box-shadow: none !important;
+}
+.tablebox table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    border-radius: 8px;
+    overflow: hidden;
+    border: none !important;
+}
+.tablebox th,
+.tablebox td {
+    border: none !important;
+}
+.tablebox th {
+    background: #409EFF !important;
+    color: #fff !important;
+    font-weight: 500 !important;
+    font-size: 13px !important;
+    padding: 10px 8px !important;
+}
+.tablebox thead tr:first-child th:first-child { border-top-left-radius: 8px; }
+.tablebox thead tr:first-child th:last-child { border-top-right-radius: 8px; }
+.tablebox tbody tr:last-child td:first-child { border-bottom-left-radius: 8px; }
+.tablebox tbody tr:last-child td:last-child { border-bottom-right-radius: 8px; }
+.tablebox td {
+    padding: 8px !important;
+    font-size: 13px;
+    border-left: 1px solid #ebeef5 !important;
+}
+.tablebox td:first-child,
+.tablebox th:first-child {
+    border-left: none !important;
+}
+.tablebox .el-table__body tr.current-row > td:first-child,
+.tablebox .el-table__body tr:hover > td:first-child {
+    border-left: 3px solid #409EFF !important;
+    padding-left: 5px !important;
+}
+.tablebox tr:hover td { background: #f6faff; }
+.tablebox .el-button--mini { padding: 5px 10px; font-size: 12px; }
+.img-preview {
+    position: fixed;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: rgba(0,0,0,0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    cursor: zoom-out;
+}
+.img-preview img {
+    max-width: 80%;
+    max-height: 80%;
+    border-radius: 8px;
+    cursor: default;
+}
+</style>

src/router/index.js

@@ -635,7 +635,7 @@ export default new Router({
                 path: "/third/storeSpecials",
                 component: resolve =>
                   require([
-                    "@/components/page/third/operate/StoreSpecials.vue"
+                    "@/components/page/third/operate/StoreSpecials1.vue"
                   ], resolve),
                 meta: { title: "特价菜管理" }
               },