09/17

src/main/vue/src/components/HomeProduct.vue

@@ -0,0 +1,233 @@
+<template>
+    <div>
+        <el-form :model="formData" :rules="rules" ref="form" label-width="120px"
+            label-position="right" size="small" style="max-width: 500px;">
+            <el-form-item prop="typeId" label="类型">
+                <el-select v-model="formData.typeId" filterable
+                    placeholder="请选择" size="small" disabled>
+                    <el-option v-for="item in homeProductTypes" :key="item.id"
+                        :label="item.typeName" :value="item.id">
+                    </el-option>
+                </el-select>
+
+            </el-form-item>
+            <el-form-item prop="productId" label="商品Id">
+                <el-input v-model="formData.productId" disabled
+                    style="width:120px"></el-input>
+                <el-button @click="showChoose=true" type="primary" plain>选择商品
+                </el-button>
+
+            </el-form-item>
+            <el-form-item prop="rank" label="排序">
+                <el-input type="number" v-model="formData.rank"
+                    :disabled="'rank'==subColumn"></el-input>
+            </el-form-item>
+            <el-form-item prop="storeId" label="店铺">
+                <el-input v-model="formData.storeId" disabled></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button @click="onSave" :loading="$store.state.fetchingData"
+                    type="primary">保存</el-button>
+                <el-button @click="onDelete" v-if="formData.id" type="danger">删除
+                </el-button>
+                <el-button @click="close">取消</el-button>
+            </el-form-item>
+        </el-form>
+        <el-dialog title="选择商品" :visible.sync="showChoose" append-to-body>
+            <choose-productInfo @close='showChoose=false' @submit="chooseId">
+            </choose-productInfo>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import formValidator from "../formValidator";
+import { mapState } from "vuex";
+import { format } from "date-fns";
+import zh from "date-fns/locale/zh_cn";
+import ChooseProductInfo from "../components/ChooseProductInfo";
+
+export default {
+    name: "HomeProduct",
+    props: {
+        homeProductInfo: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    created() {
+        if (this.$route.query.column) {
+            this.subColumn = this.$route.query.column.split(",")[1];
+            this.subValue = this.$route.query.column.split(",")[0];
+            if ("typeId" == this.subColumn) {
+                this.subValue = Number(this.subValue);
+            }
+        }
+
+        this.formData = { ...this.homeProductInfo };
+        this.getHomeProductTypes();
+    },
+    watch: {
+        homeProductInfo() {
+            this.formData = { ...this.homeProductInfo };
+        }
+    },
+    data() {
+        return {
+            saving: false,
+            formData: {
+                storeId: ""
+            },
+            rules: {
+                storeId: [
+                    { required: true, message: "请选择店铺", trigger: "blur" }
+                ],
+                typeId: [
+                    { required: true, message: "请选择类型", trigger: "blur" }
+                ],
+                productId: [
+                    { required: true, message: "请选择商品", trigger: "blur" }
+                ]
+            },
+            subColumn: "",
+            subValue: "",
+            showChoose: false,
+            homeProductTypes: []
+        };
+    },
+    computed: {
+        ...mapState(["userInfo", "storeId"])
+    },
+    watch: {
+        storeId() {
+            if (this.storeId) {
+                this.formData.storeId = this.storeId;
+            }
+
+            this.getHomeProductTypes();
+        }
+    },
+    methods: {
+        close() {
+            this.$emit("close");
+        },
+        chooseId(id) {
+            this.formData.productId = id;
+            this.showChoose = false;
+        },
+        onSave() {
+            if (!this.formData.productId) {
+                this.$message.warning("请选择商品");
+                return;
+            }
+            // this.$refs.form.validate(valid => {
+            //     if (valid) {
+            this.logicalValidate();
+            //     } else {
+            //         return false;
+            //     }
+            // });
+        },
+        logicalValidate() {
+            let logicalData = {};
+
+            if (JSON.stringify(logicalData) == "{}") {
+                this.submit();
+            } else {
+                this.$http
+                    .get({
+                        url: "/homeProduct/getOne",
+                        data: logicalData
+                    })
+                    .then(res => {
+                        if (res.success) {
+                            let logicalFlag = true;
+                            if (res.data) {
+                                if (this.formData.id) {
+                                    if (res.data.id != this.formData.id) {
+                                        logicalFlag = false;
+                                    }
+                                } else {
+                                    logicalFlag = false;
+                                }
+                            }
+
+                            if (logicalFlag) {
+                                this.submit();
+                            } else {
+                                this.$message.warning(
+                                    "逻辑关键字:" + "" + "验证失败"
+                                );
+                            }
+                        } else {
+                            this.$message.warning(
+                                "逻辑关键字:" + "" + "验证失败"
+                            );
+                        }
+                    });
+            }
+        },
+        submit() {
+            let data = { ...this.formData };
+
+            this.$http
+                .post({
+                    url: this.formData.id
+                        ? "/homeProduct/update"
+                        : "/homeProduct/save",
+                    data: data
+                })
+                .then(res => {
+                    if (res.success) {
+                        this.$message.success("成功");
+                        this.close();
+                    } else {
+                        this.$message.warning("失败");
+                    }
+                });
+        },
+        onDelete() {
+            this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+                type: "error"
+            })
+                .then(() => {
+                    return this.$http.post({
+                        url: "/homeProduct/del",
+                        data: { id: this.formData.id }
+                    });
+                })
+                .then(() => {
+                    this.$message.success("删除成功");
+                    this.close();
+                })
+                .catch(action => {
+                    if (action === "cancel") {
+                        this.$message.info("删除取消");
+                    } else {
+                        this.$message.error("删除失败");
+                    }
+                });
+        },
+        getHomeProductTypes() {
+            this.$http
+                .get({
+                    url: "/homeProductType/all",
+                    data: {
+                        storeId: this.storeId || ""
+                    }
+                })
+                .then(res => {
+                    if (res.success) {
+                        this.homeProductTypes = res.data;
+                    }
+                });
+        }
+    },
+    components: {
+        ChooseProductInfo
+    }
+};
+</script>
+<style lang="less" scoped>
+</style>

src/main/vue/src/components/HomeProducts.vue

@@ -0,0 +1,484 @@
+<template>
+    <div>
+        <div class="filters-container">
+
+            <el-input placeholder="关键字" size="small" v-model="filter1" clearable
+                class="filter-item"></el-input>
+            <el-button @click="searchData" type="primary" size="small"
+                icon="el-icon-search" class="filter-item">搜索
+            </el-button>
+            <el-button
+                @click="showAdvancedQueryDialog = !showAdvancedQueryDialog"
+                type="primary" size="small" icon="el-icon-search"
+                class="filter-item">高级查询
+            </el-button>
+            <el-button @click="showTableSortDialog = !showTableSortDialog"
+                type="primary" size="small" icon="el-icon-sort"
+                class="filter-item">排序
+            </el-button>
+            <el-button
+                @click="$router.push({path:'/homeProduct',query:{column:$route.query.column}})"
+                type="primary" size="small" icon="el-icon-edit"
+                class="filter-item">添加
+            </el-button>
+            <el-button @click="exportExcel" type="primary" size="small"
+                icon="el-icon-share" class="filter-item">导出EXCEL
+            </el-button>
+            <el-dropdown trigger="click" size="medium"
+                class="table-column-filter">
+                <span>
+                    筛选数据<i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown"
+                    class="table-column-filter-wrapper">
+                    <el-checkbox v-for="item in tableColumns" :key="item.value"
+                        v-model="item.show">{{item.label}}
+                    </el-checkbox>
+                </el-dropdown-menu>
+            </el-dropdown>
+        </div>
+        <el-table :data="tableData"  row-key="id"
+            ref="table">
+            <el-table-column v-if="multipleMode" align="center" type="selection"
+                width="50">
+            </el-table-column>
+            <el-table-column type="index" min-width="50" align="center">
+            </el-table-column>
+
+            <el-table-column v-if="isColumnShow('id')" prop="id" label="ID"
+                min-width="100">
+            </el-table-column>
+
+            <el-table-column v-if="isColumnShow('typeId')" prop="typeId"
+                label="类型" min-width="100">
+                <template slot-scope="{row}">
+                    {{row.typeFlag==1?'小图商品':'大图商品'}}
+                </template>
+            </el-table-column>
+
+            <el-table-column v-if="isColumnShow('productId')" prop="productId"
+                label="商品" min-width="100">
+            </el-table-column>
+
+            <el-table-column v-if="isColumnShow('rank')" prop="rank" label="排序"
+                min-width="100">
+            </el-table-column>
+            <el-table-column prop="storeId" label="店铺" min-width="100">
+            </el-table-column>
+            <el-table-column label="操作" align="center" fixed="right"
+                min-width="150">
+                <template slot-scope="scope">
+                    <el-button @click="editRow(scope.row)" type="primary"
+                        size="mini" plain>编辑</el-button>
+                    <el-button @click="deleteRow(scope.row)" type="danger"
+                        size="mini" plain>删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="pagination-wrapper">
+            <div class="multiple-mode-wrapper" v-if="0">
+                <el-button size="small" v-if="!multipleMode"
+                    @click="toggleMultipleMode(true)">批量编辑</el-button>
+                <el-button-group v-else>
+                    <el-button size="small" @click="operation1">批量操作1
+                    </el-button>
+                    <el-button size="small" @click="operation2">批量操作2
+                    </el-button>
+                    <el-button size="small" @click="toggleMultipleMode(false)">
+                        取消</el-button>
+                </el-button-group>
+            </div>
+            <el-pagination background @size-change="pageSizeChange"
+                @current-change="currentPageChange" :current-page="currentPage"
+                :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="totalNumber">
+            </el-pagination>
+        </div>
+        <el-dialog title="高级查询" :visible.sync="showAdvancedQueryDialog">
+            <el-button @click="addField" type="text" icon="el-icon-plus">添加
+            </el-button>
+            <el-table :data="advancedQueryFields">
+
+                <el-table-column prop="link" label="链接符" align="center">
+                    <template slot-scope="{row}">
+                        <el-select placeholder="链接" size="small"
+                            v-model="row.link" class="filter-item">
+                            <el-option label="AND" value="AND">
+                            </el-option>
+                            <el-option label="OR" value="OR">
+                            </el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="name" label="字段" align="center">
+                    <template slot-scope="{row}">
+                        <el-select v-model="row.name">
+
+                            <el-option v-for="item in advancedQueryColumns"
+                                :label="item.label" :value="item.value"
+                                :key="item.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="searchMethod" label="搜索方式" width="150"
+                    align="center">
+                    <template slot-scope="{row}">
+                        <el-select v-model="row.searchMethod">
+                            <el-option v-for="item in searchMethods"
+                                :label="item" :value="item" :key="item">
+                            </el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="value" label="参数" align="center">
+                    <template slot-scope="{row}">
+                        <el-input v-model="row.value"></el-input>
+                    </template>
+                </el-table-column>
+                <el-table-column width="60" align="center">
+                    <template slot-scope="{ row, column, $index }">
+                        <el-button @click="removeField($index)" size="small"
+                            type="text">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <span slot="footer" class="dialog-footer">
+
+                <el-button @click="advancedQuery"
+                    :loading="$store.state.fetchingData">确定</el-button>
+            </span>
+        </el-dialog>
+
+        <el-dialog title="排序" :visible.sync="showTableSortDialog">
+            <el-button @click="addSortField" type="text" icon="el-icon-plus">添加
+            </el-button>
+            <el-table :data="tableSortFields">
+
+                <el-table-column prop="name" label="字段" align="center">
+                    <template slot-scope="{row}">
+                        <el-select v-model="row.name">
+
+                            <el-option v-for="item in advancedQueryColumns"
+                                :label="item.label" :value="item.value"
+                                :key="item.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="order" label="排序" align="center">
+                    <template slot-scope="{row}">
+                        <el-select v-model="row.order">
+                            <el-option label="降序" value="desc">
+                            </el-option>
+                            <el-option label="升序" value="asc">
+                            </el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column width="60" align="center">
+                    <template slot-scope="{ row, column, $index }">
+                        <el-button @click="removeSortField($index)" size="small"
+                            type="text">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <span slot="footer" class="dialog-footer">
+
+                <el-button @click="tableSortQuery"
+                    :loading="$store.state.fetchingData">确定</el-button>
+            </span>
+        </el-dialog>
+
+        <el-dialog title="查看图片" :visible.sync="imageDialogVisible" size="small">
+            <img width="100%" :src="imgSrc" alt="">
+        </el-dialog>
+
+    </div>
+</template>
+<script>
+import { mapState } from "vuex";
+import { format } from "date-fns";
+import zh from "date-fns/locale/zh_cn";
+
+export default {
+    name: "HomeProducts",
+    props: {
+        typeId: {
+            type: Number,
+            default: 0
+        }
+    },
+    created() {
+        this.getData();
+    },
+    data() {
+        return {
+            totalNumber: 0,
+            totalPage: 10,
+            currentPage: 1,
+            pageSize: 20,
+            tableData: [],
+            filter1: "",
+            filter2: "",
+            tableColumns: [
+                {
+                    label: "ID",
+                    value: "id",
+                    show: true
+                },
+                {
+                    label: "类型",
+                    value: "typeId",
+                    show: true
+                },
+                {
+                    label: "商品",
+                    value: "productId",
+                    show: true
+                },
+                {
+                    label: "排序",
+                    value: "rank",
+                    show: true
+                }
+            ],
+            multipleMode: false,
+            showAdvancedQueryDialog: false,
+            advancedQueryFields: [],
+            showTableSortDialog: false,
+            tableSortFields: [],
+            searchMethods: ["=", "!=", ">", ">=", "<", "<=", "like"],
+            advancedQueryColumns: [
+                {
+                    label: "ID",
+                    value: "id"
+                },
+                {
+                    label: "类型",
+                    value: "type_id"
+                },
+                {
+                    label: "商品",
+                    value: "product_id"
+                },
+                {
+                    label: "排序",
+                    value: "rank"
+                }
+            ],
+            advancedQuerySearchKey: "",
+            orderByStr: "",
+            imgSrc: "",
+            imageDialogVisible: false
+        };
+    },
+    computed: {
+        ...mapState(["tableHeight", "storeId"]),
+        selection() {
+            return this.$refs.table.selection.map(i => i.id);
+        }
+    },
+    watch: {
+        storeId() {
+            this.searchData();
+        },
+        typeId(){
+            this.searchData();
+        }
+    },
+    methods: {
+        pageSizeChange(size) {
+            this.currentPage = 1;
+            this.pageSize = size;
+            this.getData();
+        },
+        currentPageChange(page) {
+            this.currentPage = page;
+            this.getData();
+        },
+        getData() {
+            var data = {
+                currentPage: this.currentPage,
+                pageNumber: this.pageSize,
+                searchKey: this.filter1,
+                advancedQuery: this.advancedQuerySearchKey,
+                orderByStr: this.orderByStr,
+                storeId: this.storeId || "",
+                typeId: this.typeId || ""
+            };
+
+            this.$http
+                .get({
+                    url: "/homeProduct/page",
+                    data: data
+                })
+                .then(res => {
+                    if (res.success) {
+                        this.totalNumber = res.data.page.totalNumber;
+                        this.tableData = res.data.pp;
+                    }
+                });
+        },
+        isColumnShow(column) {
+            var row = this.tableColumns.find(i => i.value === column);
+            return row ? row.show : false;
+        },
+        toggleMultipleMode(multipleMode) {
+            this.multipleMode = multipleMode;
+            if (!multipleMode) {
+                this.$refs.table.clearSelection();
+            }
+        },
+        editRow(row) {
+            this.$router.push({
+                path: "/homeProduct",
+                query: {
+                    id: row.id,
+                    column: this.$route.query.column
+                }
+            });
+        },
+        operation1() {
+            this.$notify({
+                title: "提示",
+                message: this.selection
+            });
+        },
+        operation2() {
+            this.$message("操作2");
+        },
+        addField() {
+            this.advancedQueryFields.push({
+                link: "AND",
+                name: "",
+                searchMethod: "=",
+                value: ""
+            });
+        },
+        removeField(i) {
+            if (this.advancedQueryFields.length > 0) {
+                this.advancedQueryFields.splice(i, 1);
+            }
+        },
+        advancedQuery() {
+            this.advancedQuerySearchKey = "";
+
+            if (this.advancedQueryFields.length > 0) {
+                var templist = [];
+
+                this.advancedQueryFields.forEach(item => {
+                    if (
+                        item.link &&
+                        item.name &&
+                        item.searchMethod &&
+                        item.value
+                    ) {
+                        var tempItem =
+                            item.link +
+                            "_," +
+                            item.name +
+                            "_," +
+                            item.searchMethod +
+                            "_," +
+                            item.value;
+                        templist.push(tempItem);
+                    }
+                });
+
+                if (templist.length > 0) {
+                    this.advancedQuerySearchKey = templist.join("_;");
+                }
+            }
+
+            this.getData();
+            this.showAdvancedQueryDialog = false;
+        },
+        addSortField() {
+            this.tableSortFields.push({
+                name: "",
+                order: "asc"
+            });
+        },
+        removeSortField(i) {
+            if (this.tableSortFields.length > 0) {
+                this.tableSortFields.splice(i, 1);
+            }
+        },
+        tableSortQuery() {
+            this.orderByStr = "";
+
+            if (this.tableSortFields.length > 0) {
+                var templist = [];
+
+                this.tableSortFields.forEach(item => {
+                    if (item.name && item.order) {
+                        var tempItem = item.name + "_," + item.order;
+                        templist.push(tempItem);
+                    }
+                });
+
+                if (templist.length > 0) {
+                    this.orderByStr = templist.join("_;");
+                }
+            }
+
+            this.getData();
+            this.showTableSortDialog = false;
+        },
+        exportExcel() {
+            window.location.href =
+                this.$baseUrl +
+                "/homeProduct/exportExcel?searchKey=" +
+                this.filter1 +
+                "&advancedQuery=" +
+                this.advancedQuerySearchKey +
+                "&orderByStr=" +
+                this.orderByStr;
+        },
+        searchData() {
+            this.currentPage = 1;
+            this.getData();
+        },
+        deleteRow(row) {
+            this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+                type: "error"
+            })
+                .then(() => {
+                    return this.$http.post({
+                        url: "/homeProduct/del",
+                        data: { id: row.id }
+                    });
+                })
+                .then(() => {
+                    this.$message.success("删除成功");
+                    this.getData();
+                })
+                .catch(action => {
+                    if (action === "cancel") {
+                        this.$message.info("删除取消");
+                    } else {
+                        this.$message.error("删除失败");
+                    }
+                });
+        },
+        DateTimeFormatter(row, column, cellValue) {
+            if (cellValue) {
+                return format(cellValue, "YYYY/MM/DD HH:mm", { locale: zh });
+            }
+        },
+        DateFormatter(row, column, cellValue) {
+            if (cellValue) {
+                return format(cellValue, "YYYY/MM/DD", { locale: zh });
+            }
+        },
+        showImg(img) {
+            this.imgSrc = img;
+            this.imageDialogVisible = true;
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+</style>

src/main/vue/src/components/OrderServices.vue

@@ -0,0 +1,616 @@
+<template>
+    <div>
+        <div class="filters-container">
+
+            <!-- <el-select v-model="storeId" size="small" clearable filterable placeholder="店铺" @change="searchData" style="width:120px">
+                <el-option v-for="item in storeInfos" :key="item.id" :label="item.storeName" :value="item.id"></el-option>
+            </el-select> -->
+            <el-select v-model="userId" size="small" clearable filterable placeholder="用户" @change="searchData" style="width:120px">
+                <el-option v-for="item in userInfos" :key="item.id" :label="item.nickname" :value="item.id"></el-option>
+            </el-select>
+            <el-input placeholder="关键字" size="small" v-model="filter1" clearable class="filter-item"></el-input>
+            <el-button @click="searchData" type="primary" size="small" icon="el-icon-search" class="filter-item">搜索
+            </el-button>
+            <el-button @click="showAdvancedQueryDialog = !showAdvancedQueryDialog" type="primary" size="small"
+                       icon="el-icon-search" class="filter-item">高级查询
+            </el-button>
+            <el-button @click="showTableSortDialog = !showTableSortDialog" type="primary" size="small"
+                       icon="el-icon-sort" class="filter-item">排序
+            </el-button>
+            <el-button @click="$router.push({path:'/orderService',query:{column:$route.query.column}})" type="primary"
+                       size="small" icon="el-icon-edit"
+                       class="filter-item">添加
+            </el-button>
+            <el-button @click="exportExcel" type="primary" size="small" icon="el-icon-share" class="filter-item">导出EXCEL
+            </el-button>
+            <el-dropdown trigger="click" size="medium" class="table-column-filter">
+                <span>
+                    筛选数据<i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown" class="table-column-filter-wrapper">
+                    <el-checkbox v-for="item in tableColumns" :key="item.value" v-model="item.show">{{item.label}}
+                    </el-checkbox>
+                </el-dropdown-menu>
+            </el-dropdown>
+        </div>
+        <el-table
+                  :data="tableData"
+                  :height="tableHeight"
+                  row-key="id"
+                  ref="table">
+            <el-table-column
+                             v-if="multipleMode"
+                             align="center"
+                             type="selection"
+                             width="50">
+            </el-table-column>
+            <el-table-column
+                             type="index"
+                             min-width="50"
+                             align="center">
+            </el-table-column>
+
+            <el-table-column
+                             v-if="isColumnShow('userId')"
+                             prop="userId"
+                             label="用户"
+                             min-width="70">
+            </el-table-column>
+
+            <el-table-column
+                             v-if="isColumnShow('storeId')"
+                             prop="storeId"
+                             label="店铺"
+                             min-width="70">
+            </el-table-column>
+
+            <el-table-column
+                             prop="storeService.typeFlag"
+                             label="类型"
+                             min-width="100"
+                             :formatter="TypeFlagFormatter">
+            </el-table-column>
+            <el-table-column
+                             prop="storeService.serviceName"
+                             label="服务"
+                             min-width="100">
+            </el-table-column>
+            <el-table-column
+                             v-if="isColumnShow('serviceId')"
+                             prop="serviceId"
+                             label="服务"
+                             min-width="70">
+            </el-table-column>
+            <el-table-column
+                             v-if="isColumnShow('orderId')"
+                             prop="orderId"
+                             label="订单"
+                             min-width="70">
+            </el-table-column>
+
+            <el-table-column
+                             v-if="isColumnShow('orderDetailId')"
+                             prop="orderDetailId"
+                             label="子订单"
+                             min-width="70">
+            </el-table-column>
+
+            <el-table-column
+                             v-if="isColumnShow('amount')"
+                             prop="amount"
+                             label="数量"
+                             min-width="100">
+            </el-table-column>
+
+            <el-table-column
+                             v-if="isColumnShow('message')"
+                             prop="message"
+                             label="留言"
+                             min-width="100">
+            </el-table-column>
+
+            <el-table-column
+                             v-if="isColumnShow('remark')"
+                             prop="remark"
+                             label="备注"
+                             min-width="100">
+            </el-table-column>
+
+            <el-table-column
+                             v-if="isColumnShow('miniId')"
+                             prop="miniId"
+                             label="小程序"
+                             min-width="100">
+            </el-table-column>
+            <el-table-column
+                             label="操作"
+                             align="center"
+                             fixed="right"
+                             min-width="150">
+                <template slot-scope="scope">
+                    <el-button @click="editRow(scope.row)" type="primary" size="mini" plain>编辑</el-button>
+                    <el-button @click="deleteRow(scope.row)" type="danger" size="mini" plain>删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="pagination-wrapper">
+            <div class="multiple-mode-wrapper" v-if="0">
+                <el-button size="small" v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+                <el-button-group v-else>
+                    <el-button size="small" @click="operation1">批量操作1</el-button>
+                    <el-button size="small" @click="operation2">批量操作2</el-button>
+                    <el-button size="small" @click="toggleMultipleMode(false)">取消</el-button>
+                </el-button-group>
+            </div>
+            <el-pagination
+                           background
+                           @size-change="pageSizeChange"
+                           @current-change="currentPageChange"
+                           :current-page="currentPage"
+                           :page-sizes="[10, 20, 30, 40, 50]"
+                           :page-size="pageSize"
+                           layout="total, sizes, prev, pager, next, jumper"
+                           :total="totalNumber">
+            </el-pagination>
+        </div>
+        <el-dialog title="高级查询" :visible.sync="showAdvancedQueryDialog">
+            <el-button @click="addField" type="text" icon="el-icon-plus">添加</el-button>
+            <el-table :data="advancedQueryFields">
+
+                <el-table-column prop="link" label="链接符" align="center">
+                    <template slot-scope="{row}">
+                        <el-select placeholder="链接" size="small" v-model="row.link" class="filter-item">
+                            <el-option label="AND" value="AND">
+                            </el-option>
+                            <el-option label="OR" value="OR">
+                            </el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="name" label="字段" align="center">
+                    <template slot-scope="{row}">
+                        <el-select v-model="row.name">
+
+                            <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value"
+                                       :key="item.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="searchMethod" label="搜索方式" width="150" align="center">
+                    <template slot-scope="{row}">
+                        <el-select v-model="row.searchMethod">
+                            <el-option v-for="item in searchMethods" :label="item" :value="item"
+                                       :key="item"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="value" label="参数" align="center">
+                    <template slot-scope="{row}">
+                        <el-input v-model="row.value"></el-input>
+                    </template>
+                </el-table-column>
+                <el-table-column width="60" align="center">
+                    <template slot-scope="{ row, column, $index }">
+                        <el-button @click="removeField($index)" size="small" type="text">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <span slot="footer" class="dialog-footer">
+
+                <el-button @click="advancedQuery" :loading="$store.state.fetchingData">确定</el-button>
+            </span>
+        </el-dialog>
+
+        <el-dialog title="排序" :visible.sync="showTableSortDialog">
+            <el-button @click="addSortField" type="text" icon="el-icon-plus">添加</el-button>
+            <el-table :data="tableSortFields">
+
+                <el-table-column prop="name" label="字段" align="center">
+                    <template slot-scope="{row}">
+                        <el-select v-model="row.name">
+
+                            <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value"
+                                       :key="item.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="order" label="排序" align="center">
+                    <template slot-scope="{row}">
+                        <el-select v-model="row.order">
+                            <el-option label="降序" value="desc">
+                            </el-option>
+                            <el-option label="升序" value="asc">
+                            </el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column width="60" align="center">
+                    <template slot-scope="{ row, column, $index }">
+                        <el-button @click="removeSortField($index)" size="small" type="text">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <span slot="footer" class="dialog-footer">
+
+                <el-button @click="tableSortQuery" :loading="$store.state.fetchingData">确定</el-button>
+            </span>
+        </el-dialog>
+
+        <el-dialog title="查看图片" :visible.sync="imageDialogVisible" size="small">
+            <img width="100%" :src="imgSrc" alt="">
+        </el-dialog>
+
+    </div>
+</template>
+<script>
+import { mapState } from 'vuex';
+import { format } from 'date-fns';
+import zh from 'date-fns/locale/zh_cn';
+
+export default {
+    name: 'OrderServices',
+    created() {
+        this.getData();
+
+        this.$http
+            .get({
+                url: '/storeServiceType/all',
+            })
+            .then(res => {
+                if (res.success) {
+                    this.typeFlagOptions = res.data;
+                }
+            });
+
+        this.$http
+            .get({
+                url: '/storeInfo/all',
+            })
+            .then(res => {
+                if (res.success) {
+                    this.storeInfos = res.data;
+                }
+            });
+
+        this.$http
+            .get({
+                url: '/userInfo/all',
+            })
+            .then(res => {
+                if (res.success) {
+                    this.userInfos = res.data;
+                }
+            });
+    },
+    data() {
+        return {
+            totalNumber: 0,
+            totalPage: 10,
+            currentPage: 1,
+            pageSize: 20,
+            tableData: [],
+            filter1: '',
+            filter2: '',
+            tableColumns: [
+                {
+                    label: '用户',
+                    value: 'userId',
+                    show: true,
+                },
+                {
+                    label: '店铺',
+                    value: 'storeId',
+                    show: true,
+                },
+                {
+                    label: '服务',
+                    value: 'serviceId',
+                    show: true,
+                },
+                {
+                    label: '订单',
+                    value: 'orderId',
+                    show: true,
+                },
+                {
+                    label: '子订单',
+                    value: 'orderDetailId',
+                    show: true,
+                },
+                {
+                    label: '数量',
+                    value: 'amount',
+                    show: true,
+                },
+                {
+                    label: '留言',
+                    value: 'message',
+                    show: true,
+                },
+                {
+                    label: '备注',
+                    value: 'remark',
+                    show: true,
+                },
+                {
+                    label: '小程序',
+                    value: 'miniId',
+                    show: true,
+                },
+            ],
+            multipleMode: false,
+            showAdvancedQueryDialog: false,
+            advancedQueryFields: [],
+            showTableSortDialog: false,
+            tableSortFields: [],
+            searchMethods: ['=', '!=', '>', '>=', '<', '<=', 'like'],
+            advancedQueryColumns: [
+                {
+                    label: '用户',
+                    value: 'user_id',
+                },
+                {
+                    label: '店铺',
+                    value: 'store_id',
+                },
+                {
+                    label: '服务',
+                    value: 'service_id',
+                },
+                {
+                    label: '订单',
+                    value: 'order_id',
+                },
+                {
+                    label: '子订单',
+                    value: 'order_detail_id',
+                },
+                {
+                    label: '数量',
+                    value: 'amount',
+                },
+                {
+                    label: '留言',
+                    value: 'message',
+                },
+                {
+                    label: '备注',
+                    value: 'remark',
+                },
+                {
+                    label: '小程序',
+                    value: 'mini_id',
+                },
+            ],
+            advancedQuerySearchKey: '',
+            orderByStr: '',
+            imgSrc: '',
+            imageDialogVisible: false,
+            typeFlagOptions: [],
+            storeInfos: [],
+            userInfos: [],
+            userId: '',
+        };
+    },
+    computed: {
+        ...mapState(['tableHeight', 'storeId']),
+        selection() {
+            return this.$refs.table.selection.map(i => i.id);
+        },
+    },
+    watch: {
+        storeId() {
+            this.searchData();
+        },
+    },
+    methods: {
+        pageSizeChange(size) {
+            this.currentPage = 1;
+            this.pageSize = size;
+            this.getData();
+        },
+        currentPageChange(page) {
+            this.currentPage = page;
+            this.getData();
+        },
+        getData() {
+            var data = {
+                currentPage: this.currentPage,
+                pageNumber: this.pageSize,
+                searchKey: this.filter1,
+                advancedQuery: this.advancedQuerySearchKey,
+                orderByStr: this.orderByStr,
+                storeId: this.storeId || '',
+                userId: this.userId,
+            };
+
+            if (this.$route.query.column) {
+                var tempColumn = this.$route.query.column;
+                data[tempColumn.split(',')[1]] = tempColumn.split(',')[0];
+            }
+
+            this.$http
+                .get({
+                    url: '/orderService/page',
+                    data: data,
+                })
+                .then(res => {
+                    if (res.success) {
+                        this.totalNumber = res.data.page.totalNumber;
+                        this.tableData = res.data.pp;
+                    }
+                });
+        },
+        isColumnShow(column) {
+            var row = this.tableColumns.find(i => i.value === column);
+            return row ? row.show : false;
+        },
+        toggleMultipleMode(multipleMode) {
+            this.multipleMode = multipleMode;
+            if (!multipleMode) {
+                this.$refs.table.clearSelection();
+            }
+        },
+        editRow(row) {
+            this.$router.push({
+                path: '/orderService',
+                query: {
+                    id: row.id,
+                    column: this.$route.query.column,
+                },
+            });
+        },
+        operation1() {
+            this.$notify({
+                title: '提示',
+                message: this.selection,
+            });
+        },
+        operation2() {
+            this.$message('操作2');
+        },
+        addField() {
+            this.advancedQueryFields.push({
+                link: 'AND',
+                name: '',
+                searchMethod: '=',
+                value: '',
+            });
+        },
+        removeField(i) {
+            if (this.advancedQueryFields.length > 0) {
+                this.advancedQueryFields.splice(i, 1);
+            }
+        },
+        advancedQuery() {
+            this.advancedQuerySearchKey = '';
+
+            if (this.advancedQueryFields.length > 0) {
+                var templist = [];
+
+                this.advancedQueryFields.forEach(item => {
+                    if (
+                        item.link &&
+                        item.name &&
+                        item.searchMethod &&
+                        item.value
+                    ) {
+                        var tempItem =
+                            item.link +
+                            '_,' +
+                            item.name +
+                            '_,' +
+                            item.searchMethod +
+                            '_,' +
+                            item.value;
+                        templist.push(tempItem);
+                    }
+                });
+
+                if (templist.length > 0) {
+                    this.advancedQuerySearchKey = templist.join('_;');
+                }
+            }
+
+            this.getData();
+            this.showAdvancedQueryDialog = false;
+        },
+        addSortField() {
+            this.tableSortFields.push({
+                name: '',
+                order: 'asc',
+            });
+        },
+        removeSortField(i) {
+            if (this.tableSortFields.length > 0) {
+                this.tableSortFields.splice(i, 1);
+            }
+        },
+        tableSortQuery() {
+            this.orderByStr = '';
+
+            if (this.tableSortFields.length > 0) {
+                var templist = [];
+
+                this.tableSortFields.forEach(item => {
+                    if (item.name && item.order) {
+                        var tempItem = item.name + '_,' + item.order;
+                        templist.push(tempItem);
+                    }
+                });
+
+                if (templist.length > 0) {
+                    this.orderByStr = templist.join('_;');
+                }
+            }
+
+            this.getData();
+            this.showTableSortDialog = false;
+        },
+        exportExcel() {
+            window.location.href =
+                this.$baseUrl +
+                '/orderService/exportExcel?searchKey=' +
+                this.filter1 +
+                '&advancedQuery=' +
+                this.advancedQuerySearchKey +
+                '&orderByStr=' +
+                this.orderByStr;
+        },
+        searchData() {
+            this.currentPage = 1;
+            this.getData();
+        },
+        deleteRow(row) {
+            this.$alert('删除将无法恢复，确认要删除么？', '警告', {
+                type: 'error',
+            })
+                .then(() => {
+                    return this.$http.post({
+                        url: '/orderService/del',
+                        data: { id: row.id },
+                    });
+                })
+                .then(() => {
+                    this.$message.success('删除成功');
+                    this.getData();
+                })
+                .catch(action => {
+                    if (action === 'cancel') {
+                        this.$message.info('删除取消');
+                    } else {
+                        this.$message.error('删除失败');
+                    }
+                });
+        },
+        DateTimeFormatter(row, column, cellValue) {
+            if (cellValue) {
+                return format(cellValue, 'YYYY/MM/DD HH:mm', { locale: zh });
+            }
+        },
+        DateFormatter(row, column, cellValue) {
+            if (cellValue) {
+                return format(cellValue, 'YYYY/MM/DD', { locale: zh });
+            }
+        },
+        showImg(img) {
+            this.imgSrc = img;
+            this.imageDialogVisible = true;
+        },
+        TypeFlagFormatter(row, column, cellValue) {
+            var valueStr = '';
+            this.typeFlagOptions.forEach(item => {
+                if (item.id == cellValue) {
+                    valueStr = item.name;
+                }
+            });
+
+            return valueStr;
+        },
+    },
+};
+</script>
+<style lang="less" scoped>
+</style>

src/main/vue/src/components/ProductComments.vue

@@ -0,0 +1,531 @@
+<template>
+    <div>
+        <!-- <div class="filters-container">
+            <el-input placeholder="关键字" size="small" v-model="filter1" clearable
+                class="filter-item"></el-input>
+            <el-button @click="searchData" type="primary" size="small"
+                icon="el-icon-search" class="filter-item">搜索</el-button>
+            <el-button @click="showAdvancedQueryDialog = !showAdvancedQueryDialog" type="primary" size="small" icon="el-icon-search" class="filter-item">高级查询
+      </el-button>
+            <el-button @click="showTableSortDialog = !showTableSortDialog"
+                type="primary" size="small" icon="el-icon-sort"
+                class="filter-item">排序</el-button>
+            <el-button
+                @click="$router.push({path:'/productComment',query:{column:$route.query.column}})"
+                type="primary" size="small" icon="el-icon-edit"
+                class="filter-item">添加</el-button>
+            <el-button @click="exportExcel" type="primary" size="small" icon="el-icon-share" class="filter-item">导出EXCEL
+      </el-button>
+            <el-dropdown trigger="click" size="medium"
+                class="table-column-filter">
+                <span>
+                    筛选数据
+                    <i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown"
+                    class="table-column-filter-wrapper">
+                    <el-checkbox v-for="item in tableColumns" :key="item.value"
+                        v-model="item.show">{{item.label}}</el-checkbox>
+                </el-dropdown-menu>
+            </el-dropdown>
+        </div> -->
+        <el-table :data="tableData" :height="totalHeight-450" row-key="id"
+            ref="table" >
+            <el-table-column v-if="multipleMode" align="center" type="selection"
+                width="50"></el-table-column>
+            <el-table-column type="expand">
+                <template slot-scope="props">
+                    <div class="imgList" v-if="props.row.productCommentImageList.length>0">
+                        <el-image style="width: 160px; height:80px"
+                            :src="item.imageUrl" fit="contain"
+                            @click="showImg(item.imageUrl)"
+                            v-for="(item,index) in props.row.productCommentImageList"
+                            :key="index"></el-image>
+
+                    </div>
+                    <div class="not" v-else>
+                        未上传图片
+                    </div>
+                </template>
+            </el-table-column>
+            <el-table-column type="index" min-width="50" align="center">
+            </el-table-column>
+
+            <!-- <el-table-column v-if="isColumnShow('productId')" prop="productId" label="商品ID" align="center" :show-overflow-tooltip="true" min-width="100"></!-->
+            -->
+
+            <el-table-column v-if="isColumnShow('orderId')" prop="orderId"
+                label="订单ID" align="center" :show-overflow-tooltip="true"
+                min-width="100"></el-table-column>
+
+            <el-table-column v-if="isColumnShow('userId')" prop="userId"
+                label="用户ID" align="center" :show-overflow-tooltip="true"
+                min-width="100"></el-table-column>
+
+            <el-table-column v-if="isColumnShow('storeId')" prop="storeId"
+                label="店铺ID" align="center" :show-overflow-tooltip="true"
+                min-width="100"></el-table-column>
+
+            <el-table-column v-if="isColumnShow('context')" prop="context"
+                label="评论" align="center" :show-overflow-tooltip="true"
+                min-width="100"></el-table-column>
+
+            <el-table-column v-if="isColumnShow('starLevel')" prop="starLevel"
+                label="星级" align="center" :show-overflow-tooltip="true"
+                min-width="100"></el-table-column>
+
+            <el-table-column v-if="isColumnShow('anonymous')" prop="anonymous"
+                label="是否匿名" align="center" :show-overflow-tooltip="true"
+                min-width="100">
+                <template
+                    slot-scope="{row}">{{row.anonymous=='Y'?'匿名':'否'}}</template>
+            </el-table-column>
+
+            <el-table-column v-if="isColumnShow('typeFlag')" prop="typeFlag"
+                label="类型" align="center" :show-overflow-tooltip="true"
+                min-width="100"></el-table-column>
+            <!-- <el-table-column label="操作" align="center" fixed="right"
+                min-width="150">
+                <template slot-scope="scope">
+                    <el-button
+                        @click="$router.push({path:'/ProductCommentImages',query:{column:scope.row.id+',commentId'}})"
+                        type="primary" size="small" plain>图片</el-button>
+                    <el-button @click="editRow(scope.row)" type="primary"
+                        size="mini" plain>编辑</el-button>
+                    <el-button @click="deleteRow(scope.row)" type="danger" size="mini" plain>删除</el-button>
+                </template>
+            </el-table-column> -->
+        </el-table>
+        <div class="pagination-wrapper">
+            <div class="multiple-mode-wrapper" v-if="0">
+                <el-button size="small" v-if="!multipleMode"
+                    @click="toggleMultipleMode(true)">批量编辑</el-button>
+                <el-button-group v-else>
+                    <el-button size="small" @click="operation1">批量操作1
+                    </el-button>
+                    <el-button size="small" @click="operation2">批量操作2
+                    </el-button>
+                    <el-button size="small" @click="toggleMultipleMode(false)">
+                        取消</el-button>
+                </el-button-group>
+            </div>
+            <el-pagination background @size-change="pageSizeChange"
+                @current-change="currentPageChange" :current-page="currentPage"
+                :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="totalNumber"></el-pagination>
+        </div>
+        <el-dialog title="高级查询" :visible.sync="showAdvancedQueryDialog">
+            <el-button @click="addField" type="text" icon="el-icon-plus">添加
+            </el-button>
+            <el-table :data="advancedQueryFields">
+                <el-table-column prop="link" label="链接符" align="center">
+                    <template slot-scope="{row}">
+                        <el-select placeholder="链接" size="small"
+                            v-model="row.link" class="filter-item">
+                            <el-option label="AND" value="AND"></el-option>
+                            <el-option label="OR" value="OR"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="name" label="字段" align="center">
+                    <template slot-scope="{row}">
+                        <el-select v-model="row.name">
+                            <el-option v-for="item in advancedQueryColumns"
+                                :label="item.label" :value="item.value"
+                                :key="item.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="searchMethod" label="搜索方式" width="150"
+                    align="center">
+                    <template slot-scope="{row}">
+                        <el-select v-model="row.searchMethod">
+                            <el-option v-for="item in searchMethods"
+                                :label="item" :value="item" :key="item">
+                            </el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="value" label="参数" align="center">
+                    <template slot-scope="{row}">
+                        <el-input v-model="row.value"></el-input>
+                    </template>
+                </el-table-column>
+                <el-table-column width="60" align="center">
+                    <template slot-scope="{ row, column, $index }">
+                        <el-button @click="removeField($index)" size="small"
+                            type="text">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="advancedQuery"
+                    :loading="$store.state.fetchingData">确定</el-button>
+            </span>
+        </el-dialog>
+
+        <el-dialog title="排序" :visible.sync="showTableSortDialog">
+            <el-button @click="addSortField" type="text" icon="el-icon-plus">添加
+            </el-button>
+            <el-table :data="tableSortFields">
+                <el-table-column prop="name" label="字段" align="center">
+                    <template slot-scope="{row}">
+                        <el-select v-model="row.name">
+                            <el-option v-for="item in advancedQueryColumns"
+                                :label="item.label" :value="item.value"
+                                :key="item.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="order" label="排序" align="center">
+                    <template slot-scope="{row}">
+                        <el-select v-model="row.order">
+                            <el-option label="降序" value="desc"></el-option>
+                            <el-option label="升序" value="asc"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column width="60" align="center">
+                    <template slot-scope="{ row, column, $index }">
+                        <el-button @click="removeSortField($index)" size="small"
+                            type="text">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <span slot="footer" class="dialog-footer">
+                <el-button @click="tableSortQuery"
+                    :loading="$store.state.fetchingData">确定</el-button>
+            </span>
+        </el-dialog>
+
+        <el-dialog title="查看图片" :visible.sync="imageDialogVisible" size="small"   append-to-body width="440px">
+            <!-- <img width="100%" :src="imgSrc" alt> -->
+             <el-image style="width: 400px; height:600px"
+                            :src="imgSrc" fit="contain"></el-image>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import { mapState } from "vuex";
+import { format } from "date-fns";
+import zh from "date-fns/locale/zh_cn";
+
+export default {
+    props: {
+        productId: {
+            type: Number,
+            default: 0
+        }
+    },
+    created() {
+        this.getData();
+    },
+    data() {
+        return {
+            totalNumber: 0,
+            totalPage: 10,
+            currentPage: 1,
+            pageSize: 20,
+            tableData: [],
+            filter1: "",
+            filter2: "",
+            tableColumns: [
+                {
+                    label: "商品",
+                    value: "productId",
+                    show: true
+                },
+                {
+                    label: "订单",
+                    value: "orderId",
+                    show: true
+                },
+                {
+                    label: "用户",
+                    value: "userId",
+                    show: true
+                },
+                {
+                    label: "店铺",
+                    value: "storeId",
+                    show: true
+                },
+                {
+                    label: "评论",
+                    value: "context",
+                    show: true
+                },
+                {
+                    label: "星级",
+                    value: "starLevel",
+                    show: true
+                },
+                {
+                    label: "匿名",
+                    value: "anonymous",
+                    show: true
+                },
+                {
+                    label: "类型",
+                    value: "typeFlag",
+                    show: true
+                }
+            ],
+            multipleMode: false,
+            showAdvancedQueryDialog: false,
+            advancedQueryFields: [],
+            showTableSortDialog: false,
+            tableSortFields: [],
+            searchMethods: ["=", "!=", ">", ">=", "<", "<=", "like"],
+            advancedQueryColumns: [
+                {
+                    label: "商品",
+                    value: "product_id"
+                },
+                {
+                    label: "订单",
+                    value: "order_id"
+                },
+                {
+                    label: "用户",
+                    value: "user_id"
+                },
+                {
+                    label: "店铺",
+                    value: "store_id"
+                },
+                {
+                    label: "评论",
+                    value: "context"
+                },
+                {
+                    label: "星级",
+                    value: "star_level"
+                },
+                {
+                    label: "匿名",
+                    value: "anonymous"
+                },
+                {
+                    label: "类型",
+                    value: "type_flag"
+                }
+            ],
+            advancedQuerySearchKey: "",
+            orderByStr: "",
+            imgSrc: "",
+            imageDialogVisible: false
+        };
+    },
+    watch: {
+        productId() {
+            this.getData();
+        }
+    },
+    computed: {
+        ...mapState(["totalHeight"]),
+        selection() {
+            return this.$refs.table.selection.map(i => i.id);
+        }
+    },
+    methods: {
+        pageSizeChange(size) {
+            this.currentPage = 1;
+            this.pageSize = size;
+            this.getData();
+        },
+        currentPageChange(page) {
+            this.currentPage = page;
+            this.getData();
+        },
+        getData() {
+            var data = {
+                currentPage: this.currentPage,
+                pageNumber: this.pageSize,
+                searchKey: this.filter1,
+                advancedQuery: this.advancedQuerySearchKey,
+                orderByStr: this.orderByStr,
+                productId:this.productId
+            };
+
+            if (this.$route.query.column) {
+                var tempColumn = this.$route.query.column;
+                data[tempColumn.split(",")[1]] = tempColumn.split(",")[0];
+            }
+
+            this.$http
+                .get({
+                    url: "/productComment/page",
+                    data: data
+                })
+                .then(res => {
+                    if (res.success) {
+                        this.totalNumber = res.data.page.totalNumber;
+                        this.tableData = res.data.pp;
+                    }
+                });
+        },
+        isColumnShow(column) {
+            var row = this.tableColumns.find(i => i.value === column);
+            return row ? row.show : false;
+        },
+        toggleMultipleMode(multipleMode) {
+            this.multipleMode = multipleMode;
+            if (!multipleMode) {
+                this.$refs.table.clearSelection();
+            }
+        },
+        editRow(row) {
+            this.$router.push({
+                path: "/productComment",
+                query: {
+                    id: row.id,
+                    column: this.$route.query.column
+                }
+            });
+        },
+        operation1() {
+            this.$notify({
+                title: "提示",
+                message: this.selection
+            });
+        },
+        operation2() {
+            this.$message("操作2");
+        },
+        addField() {
+            this.advancedQueryFields.push({
+                link: "AND",
+                name: "",
+                searchMethod: "=",
+                value: ""
+            });
+        },
+        removeField(i) {
+            if (this.advancedQueryFields.length > 0) {
+                this.advancedQueryFields.splice(i, 1);
+            }
+        },
+        advancedQuery() {
+            this.advancedQuerySearchKey = "";
+
+            if (this.advancedQueryFields.length > 0) {
+                var templist = [];
+
+                this.advancedQueryFields.forEach(item => {
+                    if (
+                        item.link &&
+                        item.name &&
+                        item.searchMethod &&
+                        item.value
+                    ) {
+                        var tempItem =
+                            item.link +
+                            "_," +
+                            item.name +
+                            "_," +
+                            item.searchMethod +
+                            "_," +
+                            item.value;
+                        templist.push(tempItem);
+                    }
+                });
+
+                if (templist.length > 0) {
+                    this.advancedQuerySearchKey = templist.join("_;");
+                }
+            }
+
+            this.getData();
+            this.showAdvancedQueryDialog = false;
+        },
+        addSortField() {
+            this.tableSortFields.push({
+                name: "",
+                order: "asc"
+            });
+        },
+        removeSortField(i) {
+            if (this.tableSortFields.length > 0) {
+                this.tableSortFields.splice(i, 1);
+            }
+        },
+        tableSortQuery() {
+            this.orderByStr = "";
+
+            if (this.tableSortFields.length > 0) {
+                var templist = [];
+
+                this.tableSortFields.forEach(item => {
+                    if (item.name && item.order) {
+                        var tempItem = item.name + "_," + item.order;
+                        templist.push(tempItem);
+                    }
+                });
+
+                if (templist.length > 0) {
+                    this.orderByStr = templist.join("_;");
+                }
+            }
+
+            this.getData();
+            this.showTableSortDialog = false;
+        },
+        exportExcel() {
+            window.location.href =
+                this.$baseUrl +
+                "/productComment/exportExcel?searchKey=" +
+                this.filter1 +
+                "&advancedQuery=" +
+                this.advancedQuerySearchKey +
+                "&orderByStr=" +
+                this.orderByStr;
+        },
+        searchData() {
+            this.currentPage = 1;
+            this.getData();
+        },
+        deleteRow(row) {
+            this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+                type: "error"
+            })
+                .then(() => {
+                    return this.$http.post({
+                        url: "/productComment/del",
+                        data: { id: row.id }
+                    });
+                })
+                .then(() => {
+                    this.$message.success("删除成功");
+                    this.getData();
+                })
+                .catch(action => {
+                    if (action === "cancel") {
+                        this.$message.info("删除取消");
+                    } else {
+                        this.$message.error("删除失败");
+                    }
+                });
+        },
+        DateTimeFormatter(row, column, cellValue) {
+            if (cellValue) {
+                return format(cellValue, "YYYY/MM/DD HH:mm", { locale: zh });
+            }
+        },
+        DateFormatter(row, column, cellValue) {
+            if (cellValue) {
+                return format(cellValue, "YYYY/MM/DD", { locale: zh });
+            }
+        },
+        showImg(img) {
+            this.imgSrc = img;
+            this.imageDialogVisible = true;
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+</style>

src/main/vue/src/components/ProductImage.vue

@@ -0,0 +1,210 @@
+<template>
+    <div>
+        <el-form :model="formData" :rules="rules" ref="form" label-width="120px"
+            label-position="right" size="small" style="max-width: 500px;">
+            <el-form-item prop="name" label="名称">
+                <el-input v-model="formData.name" :disabled="'name'==subColumn">
+                </el-input>
+            </el-form-item>
+            <el-form-item prop="productId" label="商品">
+                <template>
+                    <el-select v-model="formData.productId" clearable filterable
+                        placeholder="请选择" disabled>
+                        <el-option v-for="item in productIdOptions"
+                            :key="item.id" :label="item.title" :value="item.id">
+                        </el-option>
+                    </el-select>
+                </template>
+            </el-form-item>
+            <el-form-item prop="typeFlag" label="类型" >
+                <template>
+                    <el-select v-model="formData.typeFlag" clearable
+                        placeholder="请选择" disabled>
+                        <el-option v-for="item in typeFlagOptions"
+                            :key="item.value" :label="item.label"
+                            :value="item.value">
+                        </el-option>
+                    </el-select>
+                </template>
+            </el-form-item>
+            <el-form-item prop="image" label="图片">
+                <single-upload v-model="formData.image"
+                    :disabled="'image'==subColumn"></single-upload>
+            </el-form-item>
+            <el-form-item prop="remark" label="备注">
+                <el-input v-model="formData.remark"
+                    :disabled="'remark'==subColumn"></el-input>
+            </el-form-item>
+            <el-form-item prop="rank" label="排序">
+                <el-input type="number" v-model="formData.rank"
+                    :disabled="'rank'==subColumn"></el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button @click="onSave" :loading="$store.state.fetchingData"
+                    type="primary">保存</el-button>
+                <el-button @click="onDelete" v-if="formData.id" type="danger">删除
+                </el-button>
+                <el-button @click="close">取消</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+<script>
+import formValidator from "../formValidator";
+import { mapState } from "vuex";
+import { format } from "date-fns";
+import zh from "date-fns/locale/zh_cn";
+
+export default {
+    name: "ProductImage",
+    props: {
+        editInfo: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    created() {
+        this.$http
+            .get({
+                url: "/productInfo/all"
+            })
+            .then(res => {
+                if (res.success) {
+                    this.productIdOptions = res.data;
+                }
+            });
+
+        this.formData = { ...this.editInfo };
+    },
+    watch: {
+        editInfo() {
+            this.formData = { ...this.editInfo };
+        }
+    },
+    data() {
+        return {
+            saving: false,
+            formData: {
+                typeFlag: 0
+            },
+            rules: {},
+            productIdOptions: [],
+            typeFlagOptions: [
+                {
+                    value: 0,
+                    label: "轮播"
+                },
+                {
+                    value: 1,
+                    label: "客片"
+                }
+            ],
+            subColumn: "",
+            subValue: ""
+        };
+    },
+    computed: {
+        ...mapState(["userInfo"])
+    },
+    methods: {
+        close(){
+            this.$emit('close')
+        },
+        onSave() {
+            this.$refs.form.validate(valid => {
+                if (valid) {
+                    this.logicalValidate();
+                } else {
+                    return false;
+                }
+            });
+        },
+        logicalValidate() {
+            let logicalData = {};
+
+            if (JSON.stringify(logicalData) == "{}") {
+                this.submit();
+            } else {
+                this.$http
+                    .get({
+                        url: "/productImage/getOne",
+                        data: logicalData
+                    })
+                    .then(res => {
+                        if (res.success) {
+                            let logicalFlag = true;
+                            if (res.data) {
+                                if (this.formData.id) {
+                                    if (res.data.id != this.formData.id) {
+                                        logicalFlag = false;
+                                    }
+                                } else {
+                                    logicalFlag = false;
+                                }
+                            }
+
+                            if (logicalFlag) {
+                                this.submit();
+                            } else {
+                                this.$message.warning(
+                                    "逻辑关键字:" + "" + "验证失败"
+                                );
+                            }
+                        } else {
+                            this.$message.warning(
+                                "逻辑关键字:" + "" + "验证失败"
+                            );
+                        }
+                    });
+            }
+        },
+        submit() {
+            let data = { ...this.formData };
+
+            this.$http
+                .post({
+                    url: this.formData.id
+                        ? "/productImage/update"
+                        : "/productImage/save",
+                    data: data
+                })
+                .then(res => {
+                    if (res.success) {
+                        this.$message.success("成功");
+                    this.close()
+                        // this.$router.go(-1);
+                    } else {
+                        this.$message.warning("失败");
+                    }
+                });
+        },
+        onDelete() {
+            this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+                type: "error"
+            })
+                .then(() => {
+                    return this.$http.post({
+                        url: "/productImage/del",
+                        data: { id: this.formData.id }
+                    });
+                })
+                .then(() => {
+                    this.$message.success("删除成功");
+                    // this.$router.go(-1);
+                    this.close()
+                })
+                .catch(action => {
+                    if (action === "cancel") {
+                        this.$message.info("删除取消");
+                    } else {
+                        this.$message.error("删除失败");
+                    }
+                });
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+</style>

src/main/vue/src/components/ProductImages.vue

@@ -2,136 +2,99 @@
     <div>
         <div class="filters-container">
 
-            <el-select v-model="typeFlag" clearable filterable placeholder="类型" @change="searchData" size="small" style="width:120px">
-                <el-option v-for="item in typeFlagOptions" :key="item.value" :label="item.label" :value="item.value">
-                </el-option>
-            </el-select>
-
-            <el-input placeholder="关键字" size="small" v-model="filter1" clearable class="filter-item"></el-input>
-            <el-button @click="searchData" type="primary" size="small" icon="el-icon-search" class="filter-item">搜索
-            </el-button>
-            <el-button @click="showAdvancedQueryDialog = !showAdvancedQueryDialog" type="primary" size="small"
-                       icon="el-icon-search" class="filter-item">高级查询
+            <el-input placeholder="关键字" size="small" v-model="filter1" clearable
+                class="filter-item"></el-input>
+            <el-button @click="searchData" plain type="primary" size="small"
+                icon="el-icon-search" class="filter-item">搜索
             </el-button>
-            <!-- <el-button @click="showTableSortDialog = !showTableSortDialog" type="primary" size="small"
-                       icon="el-icon-sort" class="filter-item">排序
-            </el-button> -->
-            <el-button @click="$router.push({path:'/productImage',query:{column:$route.query.column}})" type="primary"
-                       size="small" icon="el-icon-edit"
-                       class="filter-item">添加
+
+            <el-button plain @click="addEdit" type="primary" size="small"
+                icon="el-icon-edit" class="filter-item">添加
             </el-button>
-            <!-- <el-button @click="exportExcel" type="primary" size="small" icon="el-icon-share" class="filter-item">导出EXCEL
-            </el-button> -->
-            <el-dropdown trigger="click" size="medium" class="table-column-filter">
-                <span>
-                    筛选数据<i class="el-icon-arrow-down el-icon--right"></i>
-                </span>
-                <el-dropdown-menu slot="dropdown" class="table-column-filter-wrapper">
-                    <el-checkbox v-for="item in tableColumns" :key="item.value" v-model="item.show">{{item.label}}
-                    </el-checkbox>
-                </el-dropdown-menu>
-            </el-dropdown>
+
         </div>
-        <el-table
-                  :data="tableData"
-                  :height="tableHeight"
-                  row-key="id"
-                  ref="table">
-            <el-table-column
-                             v-if="multipleMode"
-                             align="center"
-                             type="selection"
-                             width="50">
+        <el-table :data="tableData" :height="totalHeight-360" row-key="id"
+            ref="table" size='mini' >
+            <el-table-column v-if="multipleMode" align="center" type="selection"
+                width="50">
             </el-table-column>
-            <el-table-column
-                             type="index"
-                             min-width="50"
-                             align="center">
+            <el-table-column type="index" min-width="50" align="center">
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('name')"
-                             prop="name"
-                             label="名称"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('name')" prop="name" label="名称"
+                min-width="100">
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('productId')"
-                             prop="productId"
-                             label="商品"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('productId')" prop="productId"
+                label="商品" min-width="100">
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('typeFlag')"
-                             prop="typeFlag"
-                             label="类型"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('typeFlag')" prop="typeFlag"
+                label="类型" min-width="100">
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('image')"
-                             prop="image"
-                             label="图片"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('image')" prop="image"
+                label="图片" min-width="160">
                 <template slot-scope="{row}">
-                    <img :src="row.image" @click="showImg(row.image)" style="width: 100px;height: 100px;vertical-align: middle;" />
+                    <!-- <img :src="row.image" @click="showImg(row.image)"
+                        style="width: 100px;height: 100px;vertical-align: middle;" /> -->
+
+                    <el-image style="width: 160px; height:80px" :src="row.image"
+                        fit="contain" @click="showImg(row.image)">
+                        <div slot="error" class="image-slot">
+                            <i class="el-icon-picture-outline"></i>
+                        </div>
+                    </el-image>
                 </template>
 
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('remark')"
-                             prop="remark"
-                             label="备注"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('remark')" prop="remark"
+                label="备注" min-width="100">
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('rank')"
-                             prop="rank"
-                             label="排序"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('rank')" prop="rank" label="排序"
+                min-width="100">
             </el-table-column>
-            <el-table-column
-                             label="操作"
-                             align="center"
-                             fixed="right"
-                             min-width="150">
+            <el-table-column label="操作" align="center" fixed="right"
+                min-width="150">
                 <template slot-scope="scope">
-                    <el-button @click="editRow(scope.row)" type="primary" size="mini" plain>编辑</el-button>
-                    <el-button @click="deleteRow(scope.row)" type="danger" size="mini" plain>删除</el-button>
+                    <el-button @click="editRow(scope.row)" type="primary"
+                        size="mini" plain>编辑</el-button>
+                    <el-button @click="deleteRow(scope.row)" type="danger"
+                        size="mini" plain>删除</el-button>
                 </template>
             </el-table-column>
         </el-table>
         <div class="pagination-wrapper">
             <div class="multiple-mode-wrapper" v-if="0">
-                <el-button size="small" v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+                <el-button size="small" v-if="!multipleMode"
+                    @click="toggleMultipleMode(true)">批量编辑</el-button>
                 <el-button-group v-else>
-                    <el-button size="small" @click="operation1">批量操作1</el-button>
-                    <el-button size="small" @click="operation2">批量操作2</el-button>
-                    <el-button size="small" @click="toggleMultipleMode(false)">取消</el-button>
+                    <el-button size="small" @click="operation1">批量操作1
+                    </el-button>
+                    <el-button size="small" @click="operation2">批量操作2
+                    </el-button>
+                    <el-button size="small" @click="toggleMultipleMode(false)">
+                        取消</el-button>
                 </el-button-group>
             </div>
-            <el-pagination
-                           background
-                           @size-change="pageSizeChange"
-                           @current-change="currentPageChange"
-                           :current-page="currentPage"
-                           :page-sizes="[10, 20, 30, 40, 50]"
-                           :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalNumber">
+            <el-pagination background @size-change="pageSizeChange"
+                @current-change="currentPageChange" :current-page="currentPage"
+                :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="totalNumber">
             </el-pagination>
         </div>
         <el-dialog title="高级查询" :visible.sync="showAdvancedQueryDialog">
-            <el-button @click="addField" type="text" icon="el-icon-plus">添加</el-button>
+            <el-button @click="addField" type="text" icon="el-icon-plus">添加
+            </el-button>
             <el-table :data="advancedQueryFields">
 
                 <el-table-column prop="link" label="链接符" align="center">
                     <template slot-scope="{row}">
-                        <el-select placeholder="链接" size="small" v-model="row.link" class="filter-item">
+                        <el-select placeholder="链接" size="small"
+                            v-model="row.link" class="filter-item">
                             <el-option label="AND" value="AND">
                             </el-option>
                             <el-option label="OR" value="OR">
@@ -143,16 +106,19 @@
                     <template slot-scope="{row}">
                         <el-select v-model="row.name">
 
-                            <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value"
-                                       :key="item.value"></el-option>
+                            <el-option v-for="item in advancedQueryColumns"
+                                :label="item.label" :value="item.value"
+                                :key="item.value"></el-option>
                         </el-select>
                     </template>
                 </el-table-column>
-                <el-table-column prop="searchMethod" label="搜索方式" width="150" align="center">
+                <el-table-column prop="searchMethod" label="搜索方式" width="150"
+                    align="center">
                     <template slot-scope="{row}">
                         <el-select v-model="row.searchMethod">
-                            <el-option v-for="item in searchMethods" :label="item" :value="item"
-                                       :key="item"></el-option>
+                            <el-option v-for="item in searchMethods"
+                                :label="item" :value="item" :key="item">
+                            </el-option>
                         </el-select>
                     </template>
                 </el-table-column>
@@ -163,27 +129,31 @@
                 </el-table-column>
                 <el-table-column width="60" align="center">
                     <template slot-scope="{ row, column, $index }">
-                        <el-button @click="removeField($index)" size="small" type="text">删除</el-button>
+                        <el-button @click="removeField($index)" size="small"
+                            type="text">删除</el-button>
                     </template>
                 </el-table-column>
             </el-table>
 
             <span slot="footer" class="dialog-footer">
 
-                <el-button @click="advancedQuery" :loading="$store.state.fetchingData">确定</el-button>
+                <el-button @click="advancedQuery"
+                    :loading="$store.state.fetchingData">确定</el-button>
             </span>
         </el-dialog>
 
         <el-dialog title="排序" :visible.sync="showTableSortDialog">
-            <el-button @click="addSortField" type="text" icon="el-icon-plus">添加</el-button>
+            <el-button @click="addSortField" type="text" icon="el-icon-plus">添加
+            </el-button>
             <el-table :data="tableSortFields">
 
                 <el-table-column prop="name" label="字段" align="center">
                     <template slot-scope="{row}">
                         <el-select v-model="row.name">
 
-                            <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value"
-                                       :key="item.value"></el-option>
+                            <el-option v-for="item in advancedQueryColumns"
+                                :label="item.label" :value="item.value"
+                                :key="item.value"></el-option>
                         </el-select>
                     </template>
                 </el-table-column>
@@ -199,14 +169,16 @@
                 </el-table-column>
                 <el-table-column width="60" align="center">
                     <template slot-scope="{ row, column, $index }">
-                        <el-button @click="removeSortField($index)" size="small" type="text">删除</el-button>
+                        <el-button @click="removeSortField($index)" size="small"
+                            type="text">删除</el-button>
                     </template>
                 </el-table-column>
             </el-table>
 
             <span slot="footer" class="dialog-footer">
 
-                <el-button @click="tableSortQuery" :loading="$store.state.fetchingData">确定</el-button>
+                <el-button @click="tableSortQuery"
+                    :loading="$store.state.fetchingData">确定</el-button>
             </span>
         </el-dialog>
 
@@ -214,115 +186,145 @@
             <img width="100%" :src="imgSrc" alt="">
         </el-dialog>
 
+        <el-dialog title="编辑" :visible.sync="showEdit" size="small">
+            <productImage :editInfo='editInfo' @close='closeEdit'>
+            </productImage>
+        </el-dialog>
+
     </div>
 </template>
 <script>
-import { mapState } from 'vuex';
-import { format } from 'date-fns';
-import zh from 'date-fns/locale/zh_cn';
+import { mapState } from "vuex";
+import { format } from "date-fns";
+import zh from "date-fns/locale/zh_cn";
+import productImage from "../components/ProductImage";
 
 export default {
-    name: 'ProductImages',
+    name: "ProductImages",
+    props: {
+        typeFlag: {
+            type: Number,
+            default: 0
+        },
+        productId: {
+            type: Number,
+            default: 0
+        }
+    },
     created() {
         this.getData();
     },
     data() {
         return {
+            editInfo: {},
+            showEdit: false,
             totalNumber: 0,
             totalPage: 10,
             currentPage: 1,
             pageSize: 20,
             tableData: [],
-            filter1: '',
-            filter2: '',
+            filter1: "",
+            filter2: "",
             tableColumns: [
                 {
-                    label: '名称',
-                    value: 'name',
-                    show: true,
+                    label: "名称",
+                    value: "name",
+                    show: true
                 },
                 {
-                    label: '商品',
-                    value: 'productId',
-                    show: true,
+                    label: "商品",
+                    value: "productId",
+                    show: true
                 },
                 {
-                    label: '类型',
-                    value: 'typeFlag',
-                    show: true,
+                    label: "类型",
+                    value: "typeFlag",
+                    show: true
                 },
                 {
-                    label: '图片',
-                    value: 'image',
-                    show: true,
+                    label: "图片",
+                    value: "image",
+                    show: true
                 },
                 {
-                    label: '备注',
-                    value: 'remark',
-                    show: true,
+                    label: "备注",
+                    value: "remark",
+                    show: true
                 },
                 {
-                    label: '排序',
-                    value: 'rank',
-                    show: true,
-                },
+                    label: "排序",
+                    value: "rank",
+                    show: true
+                }
             ],
-            typeFlag: 0,
+            // typeFlag: 0,
             typeFlagOptions: [
                 {
                     value: 0,
-                    label: '轮播',
+                    label: "轮播"
                 },
                 {
                     value: 1,
-                    label: '客片',
-                },
+                    label: "客片"
+                }
             ],
             multipleMode: false,
             showAdvancedQueryDialog: false,
             advancedQueryFields: [],
             showTableSortDialog: false,
             tableSortFields: [],
-            searchMethods: ['=', '!=', '>', '>=', '<', '<=', 'like'],
+            searchMethods: ["=", "!=", ">", ">=", "<", "<=", "like"],
             advancedQueryColumns: [
                 {
-                    label: '名称',
-                    value: 'name',
+                    label: "名称",
+                    value: "name"
                 },
                 {
-                    label: '商品',
-                    value: 'product_id',
+                    label: "商品",
+                    value: "product_id"
                 },
                 {
-                    label: '类型',
-                    value: 'type_flag',
+                    label: "类型",
+                    value: "type_flag"
                 },
                 {
-                    label: '图片',
-                    value: 'image',
+                    label: "图片",
+                    value: "image"
                 },
                 {
-                    label: '备注',
-                    value: 'remark',
+                    label: "备注",
+                    value: "remark"
                 },
                 {
-                    label: '排序',
-                    value: 'rank',
-                },
+                    label: "排序",
+                    value: "rank"
+                }
             ],
-            advancedQuerySearchKey: '',
-            orderByStr: '',
-            imgSrc: '',
-            imageDialogVisible: false,
+            advancedQuerySearchKey: "",
+            orderByStr: "",
+            imgSrc: "",
+            imageDialogVisible: false
         };
     },
     computed: {
-        ...mapState(['tableHeight']),
+        ...mapState(["totalHeight"]),
         selection() {
             return this.$refs.table.selection.map(i => i.id);
-        },
+        }
     },
     methods: {
+        closeEdit() {
+            this.showEdit = false;
+            this.getData();
+        },
+        addEdit() {
+            this.editInfo = {
+                typeFlag: this.typeFlag,
+                productId: this.productId
+            };
+
+            this.showEdit = true;
+        },
         pageSizeChange(size) {
             this.currentPage = 1;
             this.pageSize = size;
@@ -340,17 +342,18 @@ export default {
                 advancedQuery: this.advancedQuerySearchKey,
                 orderByStr: this.orderByStr,
                 typeFlag: this.typeFlag,
+                productId: this.productId
             };
 
             if (this.$route.query.column) {
                 var tempColumn = this.$route.query.column;
-                data[tempColumn.split(',')[1]] = tempColumn.split(',')[0];
+                data[tempColumn.split(",")[1]] = tempColumn.split(",")[0];
             }
 
             this.$http
                 .get({
-                    url: '/productImage/page',
-                    data: data,
+                    url: "/productImage/page",
+                    data: data
                 })
                 .then(res => {
                     if (res.success) {
@@ -370,29 +373,31 @@ export default {
             }
         },
         editRow(row) {
-            this.$router.push({
-                path: '/productImage',
-                query: {
-                    id: row.id,
-                    column: this.$route.query.column,
-                },
-            });
+            this.showEdit = true;
+            this.editInfo = row;
+            // this.$router.push({
+            //     path: "/productImage",
+            //     query: {
+            //         id: row.id,
+            //         column: this.$route.query.column
+            //     }
+            // });
         },
         operation1() {
             this.$notify({
-                title: '提示',
-                message: this.selection,
+                title: "提示",
+                message: this.selection
             });
         },
         operation2() {
-            this.$message('操作2');
+            this.$message("操作2");
         },
         addField() {
             this.advancedQueryFields.push({
-                link: 'AND',
-                name: '',
-                searchMethod: '=',
-                value: '',
+                link: "AND",
+                name: "",
+                searchMethod: "=",
+                value: ""
             });
         },
         removeField(i) {
@@ -401,7 +406,7 @@ export default {
             }
         },
         advancedQuery() {
-            this.advancedQuerySearchKey = '';
+            this.advancedQuerySearchKey = "";
 
             if (this.advancedQueryFields.length > 0) {
                 var templist = [];
@@ -415,18 +420,18 @@ export default {
                     ) {
                         var tempItem =
                             item.link +
-                            '_,' +
+                            "_," +
                             item.name +
-                            '_,' +
+                            "_," +
                             item.searchMethod +
-                            '_,' +
+                            "_," +
                             item.value;
                         templist.push(tempItem);
                     }
                 });
 
                 if (templist.length > 0) {
-                    this.advancedQuerySearchKey = templist.join('_;');
+                    this.advancedQuerySearchKey = templist.join("_;");
                 }
             }
 
@@ -435,8 +440,8 @@ export default {
         },
         addSortField() {
             this.tableSortFields.push({
-                name: '',
-                order: 'asc',
+                name: "",
+                order: "asc"
             });
         },
         removeSortField(i) {
@@ -445,20 +450,20 @@ export default {
             }
         },
         tableSortQuery() {
-            this.orderByStr = '';
+            this.orderByStr = "";
 
             if (this.tableSortFields.length > 0) {
                 var templist = [];
 
                 this.tableSortFields.forEach(item => {
                     if (item.name && item.order) {
-                        var tempItem = item.name + '_,' + item.order;
+                        var tempItem = item.name + "_," + item.order;
                         templist.push(tempItem);
                     }
                 });
 
                 if (templist.length > 0) {
-                    this.orderByStr = templist.join('_;');
+                    this.orderByStr = templist.join("_;");
                 }
             }
 
@@ -468,11 +473,11 @@ export default {
         exportExcel() {
             window.location.href =
                 this.$baseUrl +
-                '/productImage/exportExcel?searchKey=' +
+                "/productImage/exportExcel?searchKey=" +
                 this.filter1 +
-                '&advancedQuery=' +
+                "&advancedQuery=" +
                 this.advancedQuerySearchKey +
-                '&orderByStr=' +
+                "&orderByStr=" +
                 this.orderByStr;
         },
         searchData() {
@@ -480,42 +485,45 @@ export default {
             this.getData();
         },
         deleteRow(row) {
-            this.$alert('删除将无法恢复，确认要删除么？', '警告', {
-                type: 'error',
+            this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+                type: "error"
             })
                 .then(() => {
                     return this.$http.post({
-                        url: '/productImage/del',
-                        data: { id: row.id },
+                        url: "/productImage/del",
+                        data: { id: row.id }
                     });
                 })
                 .then(() => {
-                    this.$message.success('删除成功');
+                    this.$message.success("删除成功");
                     this.getData();
                 })
                 .catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
+                    if (action === "cancel") {
+                        this.$message.info("删除取消");
                     } else {
-                        this.$message.error('删除失败');
+                        this.$message.error("删除失败");
                     }
                 });
         },
         DateTimeFormatter(row, column, cellValue) {
             if (cellValue) {
-                return format(cellValue, 'YYYY/MM/DD HH:mm', { locale: zh });
+                return format(cellValue, "YYYY/MM/DD HH:mm", { locale: zh });
             }
         },
         DateFormatter(row, column, cellValue) {
             if (cellValue) {
-                return format(cellValue, 'YYYY/MM/DD', { locale: zh });
+                return format(cellValue, "YYYY/MM/DD", { locale: zh });
             }
         },
         showImg(img) {
             this.imgSrc = img;
             this.imageDialogVisible = true;
-        },
+        }
     },
+    components: {
+        productImage
+    }
 };
 </script>
 <style lang="less" scoped>

src/main/vue/src/components/ProductInfo.vue

@@ -1,11 +1,14 @@
 <template>
     <div>
-        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small" style="max-width: 500px;">
+        <el-form :model="formData" :rules="rules" ref="form" label-width="80px"
+            label-position="right" size="small" style="max-width: 500px;">
 
             <el-form-item prop="storeId" label="店铺">
                 <template>
-                    <el-select v-model="formData.storeId" clearable filterable placeholder="请选择" :disabled="'storeId'==subColumn">
-                        <el-option v-for="item in storeInfos" :key="item.id" :label="item.storeName" :value="item.id">
+                    <el-select v-model="formData.storeId" clearable filterable
+                        placeholder="请选择" :disabled="'storeId'==subColumn">
+                        <el-option v-for="item in storeInfos" :key="item.id"
+                            :label="item.storeName" :value="item.id">
                         </el-option>
                     </el-select>
                 </template>
@@ -21,8 +24,10 @@
             </el-form-item> -->
 
             <el-form-item prop="serviceType" label="类目">
-                <el-select v-model="formData.serviceType" filterable placeholder="请选择" size="small">
-                    <el-option v-for="item in serviceTypes" :key="item.id" :label="item.typeName" :value="item.id">
+                <el-select v-model="formData.serviceType" filterable
+                    placeholder="请选择" size="small">
+                    <el-option v-for="item in serviceTypes" :key="item.id"
+                        :label="item.typeName" :value="item.id">
                     </el-option>
                 </el-select>
 
@@ -37,16 +42,20 @@
             </el-form-item> -->
 
             <el-form-item prop="title" label="标题">
-                <el-input v-model="formData.title" :disabled="'title'==subColumn"></el-input>
+                <el-input v-model="formData.title"
+                    :disabled="'title'==subColumn"></el-input>
             </el-form-item>
             <el-form-item prop="image" label="列表图">
-                <single-upload v-model="formData.image" :disabled="'image'==subColumn"></single-upload>
+                <single-upload v-model="formData.image"
+                    :disabled="'image'==subColumn"></single-upload>
             </el-form-item>
             <el-form-item prop="serviceDetail" label="服务详情">
-                <el-input type="textarea" v-model="formData.serviceDetail" :disabled="'serviceDetail'==subColumn"></el-input>
+                <el-input type="textarea" v-model="formData.serviceDetail"
+                    :disabled="'serviceDetail'==subColumn"></el-input>
             </el-form-item>
             <el-form-item prop="inventory" label="库存">
-                <el-input v-model="formData.inventory" :disabled="'inventory'==subColumn"></el-input>
+                <el-input v-model="formData.inventory"
+                    :disabled="'inventory'==subColumn"></el-input>
             </el-form-item>
             <el-form-item prop="price" label="默认价格">
                 <el-input v-model="formData.price"></el-input>
@@ -64,30 +73,37 @@
                 <el-input v-model="formData.fangda"></el-input>
             </el-form-item>
             <el-form-item prop="onShelf" label="上下架">
-                <el-switch v-model="formData.onShelf" active-color="#13ce66" inactive-color="#ff4949" :disabled="'onShelf'==subColumn">
+                <el-switch v-model="formData.onShelf" active-color="#13ce66"
+                    inactive-color="#ff4949" :disabled="'onShelf'==subColumn">
                 </el-switch>
             </el-form-item>
             <el-form-item prop="useFlag" label="可用">
-                <el-switch v-model="formData.useFlag" active-color="#13ce66" inactive-color="#ff4949" :disabled="'useFlag'==subColumn">
+                <el-switch v-model="formData.useFlag" active-color="#13ce66"
+                    inactive-color="#ff4949" :disabled="'useFlag'==subColumn">
                 </el-switch>
             </el-form-item>
-            <el-form-item prop="hotFlag" label="热门">
-                <el-switch v-model="formData.hotFlag" active-color="#13ce66" inactive-color="#ff4949" :disabled="'hotFlag'==subColumn">
+            <!-- <el-form-item prop="hotFlag" label="热门">
+                <el-switch v-model="formData.hotFlag" active-color="#13ce66"
+                    inactive-color="#ff4949" :disabled="'hotFlag'==subColumn">
                 </el-switch>
             </el-form-item>
             <el-form-item prop="homeFlag" label="首页">
-                <el-switch v-model="formData.homeFlag" active-color="#13ce66" inactive-color="#ff4949" :disabled="'homeFlag'==subColumn">
+                <el-switch v-model="formData.homeFlag" active-color="#13ce66"
+                    inactive-color="#ff4949" :disabled="'homeFlag'==subColumn">
                 </el-switch>
-            </el-form-item>
+            </el-form-item> -->
             <el-form-item prop="rank" label="排序">
-                <el-input v-model="formData.rank" :disabled="'rank'==subColumn"></el-input>
+                <el-input v-model="formData.rank" :disabled="'rank'==subColumn">
+                </el-input>
             </el-form-item>
 
             <el-form-item prop="salesVolume" label="销量">
-                <el-input v-model="formData.salesVolume" :disabled="'salesVolume'==subColumn"></el-input>
+                <el-input v-model="formData.salesVolume"
+                    :disabled="'salesVolume'==subColumn"></el-input>
             </el-form-item>
             <el-form-item prop="praise" label="好评">
-                <el-input v-model="formData.praise" :disabled="'praise'==subColumn"></el-input>
+                <el-input v-model="formData.praise"
+                    :disabled="'praise'==subColumn"></el-input>
             </el-form-item>
 
             <!-- <el-form-item prop="outFlag" label="外链">
@@ -99,68 +115,28 @@
                 <el-input v-model="formData.outUrl"></el-input>
             </el-form-item> -->
 
-           
         </el-form>
     </div>
 </template>
 <script>
-import formValidator from '../formValidator';
+import formValidator from "../formValidator";
 
 export default {
-    created() {
-        if (this.$route.query.column) {
-            this.subColumn = this.$route.query.column.split(',')[1];
-            this.subValue = this.$route.query.column.split(',')[0];
-        }
-
-        if (this.$route.query.id) {
-            this.$http
-                .get({
-                    url: '/productInfo/getOne',
-                    data: {
-                        id: this.$route.query.id,
-                    },
-                })
-                .then(res => {
-                    if (res.success) {
-                        this.formData = res.data;
-
-                        if (this.formData.serviceType) {
-                            this.formData.serviceType = Number(
-                                this.formData.serviceType,
-                            );
-                        }
-                        if (this.formData.subclass) {
-                            this.formData.subclass = Number(
-                                this.formData.subclass,
-                            );
-                        }
-
-                        this.formData.hotFlag =
-                            this.formData.hotFlag == 1 ? true : false;
-                        this.formData.homeFlag =
-                            this.formData.homeFlag == 1 ? true : false;
-                        this.formData.useFlag =
-                            this.formData.useFlag == 'Y' ? true : false;
-                        this.formData.onShelf =
-                            this.formData.onShelf == 'Y' ? true : false;
-                        this.formData.outFlag =
-                            this.formData.outFlag == 'Y' ? true : false;
-
-                        if (this.$route.query.column) {
-                            this.formData[this.subColumn] = this.subValue;
-                        }
-                    }
-                });
-        } else {
-            if (this.$route.query.column) {
-                this.formData[this.subColumn] = this.subValue;
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
             }
         }
-
+    },
+    created() {
+        if (this.info.id) {
+            this.formData = { ...this.info };
+        }
         this.$http
             .get({
-                url: '/storeInfo/all',
+                url: "/storeInfo/all"
             })
             .then(res => {
                 if (res.success) {
@@ -183,7 +159,7 @@ export default {
         // });
         this.$http
             .get({
-                url: '/itemType/all',
+                url: "/itemType/all"
             })
             .then(res => {
                 if (res.success) {
@@ -202,24 +178,48 @@ export default {
                 useFlag: true,
                 serviceType: 1,
                 onShelf: false,
-                storeId: '',
-                amount:10,
-                album:10,
-                fangda:10,
+                storeId: "",
+                amount: 10,
+                album: 10,
+                fangda: 10
             },
             rules: {},
-            subColumn: '',
-            subValue: '',
+            subColumn: "",
+            subValue: "",
             serviceTypes: [],
             serviceTypeDetails: {},
             typeFlagOptions: [
-                { label: '修图', value: 0 },
-                { label: '实体商品', value: 1 },
+                { label: "修图", value: 0 },
+                { label: "实体商品", value: 1 }
             ],
-            storeInfos: [],
+            storeInfos: []
         };
     },
+    watch: {
+        info() {
+            if (this.info.id) {
+                this.formData = { ...this.info };
+            }
+        }
+    },
     methods: {
+        getInfo() {
+            if (this.info.id) {
+                this.formData = { ...this.info };
+            }
+        },
+        checkChange() {
+            var res = false;
+            var nowForm = { ...this.formData };
+            for (var key in nowForm) {
+                if (nowForm[key] != this.info[key] && nowForm[key]) {
+                    console.log(nowForm[key], this.info[key]);
+                    res = true;
+                }
+            }
+
+            return res;
+        },
         onSave() {
             this.$refs.form.validate(valid => {
                 if (valid) {
@@ -230,55 +230,64 @@ export default {
             });
         },
         submit() {
-            var data = JSON.parse(JSON.stringify(this.formData));
+            return new Promise((resolve, reject) => {
+                var data = JSON.parse(JSON.stringify(this.formData));
 
-            data.hotFlag = this.formData.hotFlag ? 1 : 0;
-            data.homeFlag = this.formData.homeFlag ? 1 : 0;
-            data.useFlag = this.formData.useFlag ? 'Y' : 'N';
-            data.onShelf = this.formData.onShelf ? 'Y' : 'N';
-            data.outFlag = this.formData.outFlag ? 'Y' : 'N';
+                data.hotFlag = this.formData.hotFlag ? 1 : 0;
+                data.homeFlag = this.formData.homeFlag ? 1 : 0;
+                data.useFlag = this.formData.useFlag ? "Y" : "N";
+                data.onShelf = this.formData.onShelf ? "Y" : "N";
+                data.outFlag = this.formData.outFlag ? "Y" : "N";
 
-            delete data.productPriceList;
+                delete data.productPriceList;
 
-            this.$http
-                .post({
-                    url: this.formData.id
-                        ? '/productInfo/update'
-                        : '/productInfo/save',
-                    data: data,
-                })
-                .then(res => {
-                    if (res.success) {
-                        this.$message.success('成功');
-                        this.$router.go(-1);
-                    } else {
-                        this.$message.warning('失败');
-                    }
-                });
+                this.$http
+                    .post({
+                        url: this.formData.id
+                            ? "/productInfo/update"
+                            : "/productInfo/save",
+                        data: data
+                    })
+                    .then(res => {
+                        if (res.success) {
+                            this.$message.success("成功");
+                            if(this.formData.id){
+resolve();
+                            }
+                            else{
+                                resolve(res.data);
+                            }
+                            
+                        } else {
+                            this.$message.warning("失败");
+                            reject();
+                        }
+                    });
+            });
         },
         onDelete() {
-            this.$alert('删除将无法恢复，确认要删除么？', '警告', {
-                type: 'error',
+            this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+                type: "error"
             })
                 .then(() => {
                     return this.$http.post({
-                        url: '/productInfo/del',
-                        data: { id: this.formData.id },
+                        url: "/productInfo/del",
+                        data: { id: this.formData.id }
                     });
                 })
                 .then(() => {
-                    this.$message.success('删除成功');
+                    this.$message.success("删除成功");
                     this.$router.go(-1);
                 })
                 .catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
+                    if (action === "cancel") {
+                        this.$message.info("删除取消");
                     } else {
-                        this.$message.error('删除失败');
+                        this.$message.error("删除失败");
                     }
                 });
-        },
-    },
+        }
+    }
 };
 </script>
 <style lang="less" scoped>

src/main/vue/src/components/ProductParameter.vue

@@ -0,0 +1,206 @@
+<template>
+    <div>
+        <el-form :model="formData" :rules="rules" ref="form" label-width="120px"
+            label-position="right" size="small" style="max-width: 500px;">
+            <el-form-item prop="productId" label="商品">
+                <template>
+                    <el-select v-model="formData.productId" clearable filterable
+                        placeholder="请选择" disabled>
+                        <el-option v-for="item in productIdOptions"
+                            :key="item.id" :label="item.title" :value="item.id">
+                        </el-option>
+                    </el-select>
+                </template>
+            </el-form-item>
+            <el-form-item prop="parameterKey" label="产品参数Key">
+                <el-input v-model="formData.parameterKey"
+                    :disabled="'parameterKey'==subColumn"></el-input>
+            </el-form-item>
+            <el-form-item prop="parameterValue" label="产品参数值">
+                <template>
+                    <div v-for="(item,index) in formData.parameterValue"
+                        :key="index+item" style="margin-bottom:10px">
+                        <el-input v-model="formData.parameterValue[index]"
+                            style="width:180px"></el-input>
+                        <el-button @click="onDeleteKeyword(index)"
+                            type="danger">删除</el-button>
+                    </div>
+                    <el-button @click="addKeyword" type="primary">添加</el-button>
+                </template>
+
+            </el-form-item>
+            <el-form-item prop="remark" label="备注">
+                <el-input v-model="formData.remark"
+                    :disabled="'remark'==subColumn"></el-input>
+            </el-form-item>
+            <el-form-item prop="rank" label="排序">
+                <el-input v-model="formData.rank" :disabled="'rank'==subColumn">
+                </el-input>
+            </el-form-item>
+            <el-form-item>
+                <el-button @click="onSave" :loading="$store.state.fetchingData"
+                    type="primary">保存</el-button>
+                <el-button @click="onDelete" v-if="formData.id" type="danger">删除
+                </el-button>
+                <el-button @click="close">取消</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+<script>
+import formValidator from "../formValidator";
+import { mapState } from "vuex";
+import { format } from "date-fns";
+import zh from "date-fns/locale/zh_cn";
+
+export default {
+    name: "ProductParameter",
+    props: {
+        editInfo: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    created() {
+        this.formData = { ...this.editInfo };
+
+        this.$http
+            .get({
+                url: "/productInfo/all"
+            })
+            .then(res => {
+                if (res.success) {
+                    this.productIdOptions = res.data;
+                }
+            });
+    },
+    data() {
+        return {
+            saving: false,
+            formData: {
+                parameterValue: []
+            },
+            rules: {},
+            subColumn: "",
+            subValue: "",
+            productIdOptions: []
+        };
+    },
+    watch: {
+        editInfo() {
+            this.formData = { ...this.editInfo };
+        }
+    },
+    computed: {
+        ...mapState(["userInfo"])
+    },
+    methods: {
+        close() {
+            this.$emit("close");
+        },
+        onSave() {
+            this.$refs.form.validate(valid => {
+                if (valid) {
+                    this.logicalValidate();
+                } else {
+                    return false;
+                }
+            });
+        },
+        logicalValidate() {
+            let logicalData = {};
+
+            if (JSON.stringify(logicalData) == "{}") {
+                this.submit();
+            } else {
+                this.$http
+                    .get({
+                        url: "/productParameter/getOne",
+                        data: logicalData
+                    })
+                    .then(res => {
+                        if (res.success) {
+                            let logicalFlag = true;
+                            if (res.data) {
+                                if (this.formData.id) {
+                                    if (res.data.id != this.formData.id) {
+                                        logicalFlag = false;
+                                    }
+                                } else {
+                                    logicalFlag = false;
+                                }
+                            }
+
+                            if (logicalFlag) {
+                                this.submit();
+                            } else {
+                                this.$message.warning(
+                                    "逻辑关键字:" + "" + "验证失败"
+                                );
+                            }
+                        } else {
+                            this.$message.warning(
+                                "逻辑关键字:" + "" + "验证失败"
+                            );
+                        }
+                    });
+            }
+        },
+        submit() {
+            let data = { ...this.formData };
+
+            data.parameterValue = data.parameterValue.join();
+
+            this.$http
+                .post({
+                    url: this.formData.id
+                        ? "/productParameter/update"
+                        : "/productParameter/save",
+                    data: data
+                })
+                .then(res => {
+                    if (res.success) {
+                        this.$message.success("成功");
+                        this.$emit("close");
+                    } else {
+                        this.$message.warning("失败");
+                    }
+                });
+        },
+        onDelete() {
+            this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+                type: "error"
+            })
+                .then(() => {
+                    return this.$http.post({
+                        url: "/productParameter/del",
+                        data: { id: this.formData.id }
+                    });
+                })
+                .then(() => {
+                    this.$message.success("删除成功");
+                    this.$emit("close");
+                })
+                .catch(action => {
+                    if (action === "cancel") {
+                        this.$message.info("删除取消");
+                    } else {
+                        this.$message.error("删除失败");
+                    }
+                });
+        },
+        onDeleteKeyword(index) {
+            console.log("111");
+            this.formData.parameterValue.splice(index, 1);
+        },
+        addKeyword() {
+            this.formData.parameterValue.push("");
+            console.log("222");
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+</style>

src/main/vue/src/components/ProductParameters.vue

@@ -0,0 +1,496 @@
+<template>
+    <div>
+        <div class="filters-container">
+
+            <el-input placeholder="关键字" size="small" v-model="filter1" clearable
+                class="filter-item"></el-input>
+            <el-button @click="searchData" plain type="primary" size="small"
+                icon="el-icon-search" class="filter-item">搜索
+            </el-button>
+            <!-- <el-button @click="showAdvancedQueryDialog = !showAdvancedQueryDialog" type="primary" size="small"
+                       icon="el-icon-search" class="filter-item">高级查询
+            </el-button> -->
+            <!-- <el-button @click="showTableSortDialog = !showTableSortDialog" type="primary" size="small"
+                       icon="el-icon-sort" class="filter-item">排序
+            </el-button> -->
+            <el-button plain @click="addEdit" type="primary" size="small"
+                icon="el-icon-edit" class="filter-item">添加
+            </el-button>
+            <el-button plain @click="exportExcel" type="primary" size="small"
+                icon="el-icon-share" class="filter-item">导出EXCEL
+            </el-button>
+            <!-- <el-dropdown trigger="click" size="medium" class="table-column-filter">
+                <span>
+                    筛选数据<i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown" class="table-column-filter-wrapper">
+                    <el-checkbox v-for="item in tableColumns" :key="item.value" v-model="item.show">{{item.label}}
+                    </el-checkbox>
+                </el-dropdown-menu>
+            </el-dropdown> -->
+        </div>
+        <el-table :data="tableData" :height="totalHeight-360" row-key="id"
+            ref="table" size='mini'>
+            <el-table-column v-if="multipleMode" align="center" type="selection"
+                width="50">
+            </el-table-column>
+            <el-table-column type="index" min-width="50" align="center">
+            </el-table-column>
+
+            <el-table-column v-if="isColumnShow('productId')" prop="productId"
+                label="产品ID" min-width="50">
+            </el-table-column>
+
+            <el-table-column v-if="isColumnShow('parameterKey')"
+                prop="parameterKey" label="产品参数Key" min-width="100">
+            </el-table-column>
+
+            <el-table-column :show-overflow-tooltip="true"
+                v-if="isColumnShow('parameterValue')" prop="parameterValue"
+                label="产品参数值" min-width="100">
+            </el-table-column>
+
+            <el-table-column v-if="isColumnShow('remark')" prop="remark"
+                label="备注" min-width="100">
+            </el-table-column>
+
+            <el-table-column v-if="isColumnShow('rank')" prop="rank" label="排序"
+                min-width="100">
+            </el-table-column>
+            <el-table-column label="操作" align="center" min-width="150">
+                <template slot-scope="scope">
+                    <el-button @click="editRow(scope.row)" type="primary"
+                        size="mini" plain>编辑</el-button>
+                    <el-button @click="deleteRow(scope.row)" type="danger"
+                        size="mini" plain>删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="pagination-wrapper">
+            <div class="multiple-mode-wrapper" v-if="0">
+                <el-button size="small" v-if="!multipleMode"
+                    @click="toggleMultipleMode(true)">批量编辑</el-button>
+                <el-button-group v-else>
+                    <el-button size="small" @click="operation1">批量操作1
+                    </el-button>
+                    <el-button size="small" @click="operation2">批量操作2
+                    </el-button>
+                    <el-button size="small" @click="toggleMultipleMode(false)">
+                        取消</el-button>
+                </el-button-group>
+            </div>
+            <el-pagination background @size-change="pageSizeChange"
+                @current-change="currentPageChange" :current-page="currentPage"
+                :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="totalNumber">
+            </el-pagination>
+        </div>
+        <el-dialog title="高级查询" :visible.sync="showAdvancedQueryDialog">
+            <el-button @click="addField" type="text" icon="el-icon-plus">添加
+            </el-button>
+            <el-table :data="advancedQueryFields">
+
+                <el-table-column prop="link" label="链接符" align="center">
+                    <template slot-scope="{row}">
+                        <el-select placeholder="链接" size="small"
+                            v-model="row.link" class="filter-item">
+                            <el-option label="AND" value="AND">
+                            </el-option>
+                            <el-option label="OR" value="OR">
+                            </el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="name" label="字段" align="center">
+                    <template slot-scope="{row}">
+                        <el-select v-model="row.name">
+
+                            <el-option v-for="item in advancedQueryColumns"
+                                :label="item.label" :value="item.value"
+                                :key="item.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="searchMethod" label="搜索方式" width="150"
+                    align="center">
+                    <template slot-scope="{row}">
+                        <el-select v-model="row.searchMethod">
+                            <el-option v-for="item in searchMethods"
+                                :label="item" :value="item" :key="item">
+                            </el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="value" label="参数" align="center">
+                    <template slot-scope="{row}">
+                        <el-input v-model="row.value"></el-input>
+                    </template>
+                </el-table-column>
+                <el-table-column width="60" align="center">
+                    <template slot-scope="{ row, column, $index }">
+                        <el-button @click="removeField($index)" size="small"
+                            type="text">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <span slot="footer" class="dialog-footer">
+
+                <el-button @click="advancedQuery"
+                    :loading="$store.state.fetchingData">确定</el-button>
+            </span>
+        </el-dialog>
+
+        <el-dialog title="排序" :visible.sync="showTableSortDialog">
+            <el-button @click="addSortField" type="text" icon="el-icon-plus">添加
+            </el-button>
+            <el-table :data="tableSortFields">
+
+                <el-table-column prop="name" label="字段" align="center">
+                    <template slot-scope="{row}">
+                        <el-select v-model="row.name">
+
+                            <el-option v-for="item in advancedQueryColumns"
+                                :label="item.label" :value="item.value"
+                                :key="item.value"></el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="order" label="排序" align="center">
+                    <template slot-scope="{row}">
+                        <el-select v-model="row.order">
+                            <el-option label="降序" value="desc">
+                            </el-option>
+                            <el-option label="升序" value="asc">
+                            </el-option>
+                        </el-select>
+                    </template>
+                </el-table-column>
+                <el-table-column width="60" align="center">
+                    <template slot-scope="{ row, column, $index }">
+                        <el-button @click="removeSortField($index)" size="small"
+                            type="text">删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+
+            <span slot="footer" class="dialog-footer">
+
+                <el-button @click="tableSortQuery"
+                    :loading="$store.state.fetchingData">确定</el-button>
+            </span>
+        </el-dialog>
+
+        <el-dialog title="查看图片" :visible.sync="imageDialogVisible" size="small">
+            <img width="100%" :src="imgSrc" alt="">
+        </el-dialog>
+        <el-dialog title="编辑" :visible.sync="showEdit" size="small">
+            <productParameter :editInfo='editInfo' @close='close'>
+            </productParameter>
+        </el-dialog>
+    </div>
+</template>
+<script>
+import { mapState } from "vuex";
+import { format } from "date-fns";
+import zh from "date-fns/locale/zh_cn";
+import productParameter from "./ProductParameter";
+
+export default {
+    name: "ProductParameters",
+    props: {
+        productId: {
+            type: Number,
+            default: 0
+        }
+    },
+    created() {
+        this.getData();
+    },
+    data() {
+        return {
+            showEdit: false,
+            editInfo: {},
+            totalNumber: 0,
+            totalPage: 10,
+            currentPage: 1,
+            pageSize: 20,
+            tableData: [],
+            filter1: "",
+            filter2: "",
+            tableColumns: [
+                {
+                    label: "产品ID",
+                    value: "productId",
+                    show: true
+                },
+                {
+                    label: "产品参数Key",
+                    value: "parameterKey",
+                    show: true
+                },
+                {
+                    label: "产品参数值",
+                    value: "parameterValue",
+                    show: true
+                },
+                {
+                    label: "备注",
+                    value: "remark",
+                    show: true
+                },
+                {
+                    label: "排序",
+                    value: "rank",
+                    show: true
+                }
+            ],
+            multipleMode: false,
+            showAdvancedQueryDialog: false,
+            advancedQueryFields: [],
+            showTableSortDialog: false,
+            tableSortFields: [],
+            searchMethods: ["=", "!=", ">", ">=", "<", "<=", "like"],
+            advancedQueryColumns: [
+                {
+                    label: "产品ID",
+                    value: "product_id"
+                },
+                {
+                    label: "产品参数Key",
+                    value: "parameter_key"
+                },
+                {
+                    label: "产品参数值",
+                    value: "parameter_value"
+                },
+                {
+                    label: "备注",
+                    value: "remark"
+                },
+                {
+                    label: "排序",
+                    value: "rank"
+                }
+            ],
+            advancedQuerySearchKey: "",
+            orderByStr: "",
+            imgSrc: "",
+            imageDialogVisible: false
+        };
+    },
+    computed: {
+        ...mapState(["totalHeight"]),
+        selection() {
+            return this.$refs.table.selection.map(i => i.id);
+        }
+    },
+    methods: {
+        close() {
+            this.showEdit = false;
+            this.getData();
+        },
+        addEdit() {
+            this.editInfo = {
+                productId: this.productId,
+                parameterValue: []
+            };
+            this.showEdit = true;
+        },
+        pageSizeChange(size) {
+            this.currentPage = 1;
+            this.pageSize = size;
+            this.getData();
+        },
+        currentPageChange(page) {
+            this.currentPage = page;
+            this.getData();
+        },
+        getData() {
+            var data = {
+                currentPage: this.currentPage,
+                pageNumber: this.pageSize,
+                searchKey: this.filter1,
+                advancedQuery: this.advancedQuerySearchKey,
+                orderByStr: this.orderByStr,
+                productId: this.productId
+            };
+
+            if (this.$route.query.column) {
+                var tempColumn = this.$route.query.column;
+                data[tempColumn.split(",")[1]] = tempColumn.split(",")[0];
+            }
+
+            this.$http
+                .get({
+                    url: "/productParameter/page",
+                    data: data
+                })
+                .then(res => {
+                    if (res.success) {
+                        this.totalNumber = res.data.page.totalNumber;
+                        this.tableData = res.data.pp;
+                    }
+                });
+        },
+        isColumnShow(column) {
+            var row = this.tableColumns.find(i => i.value === column);
+            return row ? row.show : false;
+        },
+        toggleMultipleMode(multipleMode) {
+            this.multipleMode = multipleMode;
+            if (!multipleMode) {
+                this.$refs.table.clearSelection();
+            }
+        },
+        editRow(row) {
+            row.parameterValue = row.parameterValue.split(",");
+            this.editInfo = row;
+            this.showEdit = true;
+        },
+        operation1() {
+            this.$notify({
+                title: "提示",
+                message: this.selection
+            });
+        },
+        operation2() {
+            this.$message("操作2");
+        },
+        addField() {
+            this.advancedQueryFields.push({
+                link: "AND",
+                name: "",
+                searchMethod: "=",
+                value: ""
+            });
+        },
+        removeField(i) {
+            if (this.advancedQueryFields.length > 0) {
+                this.advancedQueryFields.splice(i, 1);
+            }
+        },
+        advancedQuery() {
+            this.advancedQuerySearchKey = "";
+
+            if (this.advancedQueryFields.length > 0) {
+                var templist = [];
+
+                this.advancedQueryFields.forEach(item => {
+                    if (
+                        item.link &&
+                        item.name &&
+                        item.searchMethod &&
+                        item.value
+                    ) {
+                        var tempItem =
+                            item.link +
+                            "_," +
+                            item.name +
+                            "_," +
+                            item.searchMethod +
+                            "_," +
+                            item.value;
+                        templist.push(tempItem);
+                    }
+                });
+
+                if (templist.length > 0) {
+                    this.advancedQuerySearchKey = templist.join("_;");
+                }
+            }
+
+            this.getData();
+            this.showAdvancedQueryDialog = false;
+        },
+        addSortField() {
+            this.tableSortFields.push({
+                name: "",
+                order: "asc"
+            });
+        },
+        removeSortField(i) {
+            if (this.tableSortFields.length > 0) {
+                this.tableSortFields.splice(i, 1);
+            }
+        },
+        tableSortQuery() {
+            this.orderByStr = "";
+
+            if (this.tableSortFields.length > 0) {
+                var templist = [];
+
+                this.tableSortFields.forEach(item => {
+                    if (item.name && item.order) {
+                        var tempItem = item.name + "_," + item.order;
+                        templist.push(tempItem);
+                    }
+                });
+
+                if (templist.length > 0) {
+                    this.orderByStr = templist.join("_;");
+                }
+            }
+
+            this.getData();
+            this.showTableSortDialog = false;
+        },
+        exportExcel() {
+            window.location.href =
+                this.$baseUrl +
+                "/productParameter/exportExcel?searchKey=" +
+                this.filter1 +
+                "&advancedQuery=" +
+                this.advancedQuerySearchKey +
+                "&orderByStr=" +
+                this.orderByStr;
+        },
+        searchData() {
+            this.currentPage = 1;
+            this.getData();
+        },
+        deleteRow(row) {
+            this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+                type: "error"
+            })
+                .then(() => {
+                    return this.$http.post({
+                        url: "/productParameter/del",
+                        data: { id: row.id }
+                    });
+                })
+                .then(() => {
+                    this.$message.success("删除成功");
+                    this.getData();
+                })
+                .catch(action => {
+                    if (action === "cancel") {
+                        this.$message.info("删除取消");
+                    } else {
+                        this.$message.error("删除失败");
+                    }
+                });
+        },
+        DateTimeFormatter(row, column, cellValue) {
+            if (cellValue) {
+                return format(cellValue, "YYYY/MM/DD HH:mm", { locale: zh });
+            }
+        },
+        DateFormatter(row, column, cellValue) {
+            if (cellValue) {
+                return format(cellValue, "YYYY/MM/DD", { locale: zh });
+            }
+        },
+        showImg(img) {
+            this.imgSrc = img;
+            this.imageDialogVisible = true;
+        }
+    },
+    components: {
+        productParameter
+    }
+};
+</script>
+<style lang="less" scoped>
+</style>

src/main/vue/src/components/SingleUpload.vue

@@ -1,15 +1,15 @@
 <template>
-    <el-upload
-        class="single-upload"
-        :action="url"
-        :show-file-list="false"
-        :on-success="onSuccess"
-        :before-upload="beforeUpload">
+    <el-upload class="single-upload" :action="url" :show-file-list="false"
+        :on-success="onSuccess" :before-upload="beforeUpload">
         <div></div>
         <div class="wrapper">
-            <img v-if="imageUrl" :src="imageUrl" class="avatar">
+            <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar"> -->
+            <el-image v-if="imageUrl" class="avatar" :src="imageUrl"
+                fit="contain">
+            </el-image>
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-            <div v-if="loading" class="loading"><i class="el-icon-loading"></i></div>
+            <div v-if="loading" class="loading"><i class="el-icon-loading"></i>
+            </div>
         </div>
         <div slot="tip" class="el-upload__tip">
             <slot></slot>
@@ -17,122 +17,127 @@
     </el-upload>
 </template>
 <script>
-    import {imageUrlPrefix} from '../config'
+import { imageUrlPrefix } from "../config";
 
-    const baseUrl = process.env.NODE_ENV === 'production' ? '../' : 'http://localhost:8080';
-    export default {
-        created() {
-            this.updateImageUrl(this.value);
+const baseUrl =
+    process.env.NODE_ENV === "production" ? "../" : "http://localhost:8080";
+export default {
+    created() {
+        this.updateImageUrl(this.value);
+    },
+    props: {
+        value: String,
+        usePrefix: {
+            type: Boolean,
+            default: true
         },
-        props: {
-            value: String,
-            usePrefix: {
-                type: Boolean,
-                default: true
-            },
-            prefix: {
-                type: String,
-                default: imageUrlPrefix
-            },
-            url: {
-                type: String,
-                default: baseUrl + '/assets/uploadFile'
+        prefix: {
+            type: String,
+            default: imageUrlPrefix
+        },
+        url: {
+            type: String,
+            default: baseUrl + "/assets/uploadFile"
+        }
+    },
+    data() {
+        return {
+            imageUrl: "",
+            loading: false
+        };
+    },
+    methods: {
+        onSuccess(res, file) {
+            this.loading = false;
+            this.imageUrl = URL.createObjectURL(file.raw);
+            var newVal = "";
+            if (res.data instanceof Array) {
+                newVal = res.data[0];
+            } else {
+                newVal = res.data;
             }
+            this.$emit("input", newVal);
         },
-        data() {
-            return {
-                imageUrl: '',
-                loading: false
-            };
+        onError(err, file, fileList) {
+            this.loading = false;
         },
-        methods: {
-            onSuccess(res, file) {
-                this.loading = false;
-                this.imageUrl = URL.createObjectURL(file.raw);
-                var newVal = '';
-                if (res.data instanceof Array) {
-                    newVal = res.data[0];
-                } else {
-                    newVal = res.data;
-                }
-                this.$emit('input', newVal);
-            },
-            onError(err, file, fileList) {
-                this.loading = false;
-            },
-            beforeUpload(file) {
-                this.loading = true;
-                return true;
-            },
-            updateImageUrl(url) {
-                if (this.usePrefix && url && url.indexOf(this.prefix) === -1 && url.indexOf('http') === -1) {
-                    this.imageUrl = this.prefix + url;
-                } else {
-                    this.imageUrl = url;
-                }
-            }
+        beforeUpload(file) {
+            this.loading = true;
+            return true;
         },
-        watch: {
-            value(val) {
-                this.updateImageUrl(val);
+        updateImageUrl(url) {
+            if (
+                this.usePrefix &&
+                url &&
+                url.indexOf(this.prefix) === -1 &&
+                url.indexOf("http") === -1
+            ) {
+                this.imageUrl = this.prefix + url;
+            } else {
+                this.imageUrl = url;
             }
         }
+    },
+    watch: {
+        value(val) {
+            this.updateImageUrl(val);
+        }
     }
+};
 </script>
 <style lang="less" scoped>
-    .avatar-uploader-icon {
-        font-size: 28px;
-        color: #8c939d;
-        width: 178px;
-        height: 178px;
-        line-height: 178px;
-        text-align: center;
-        border: 1px dashed #d9d9d9;
-        border-radius: 6px;
-        cursor: pointer;
-        position: relative;
-        overflow: hidden;
-        background-color: #fbfdff;
-        &:hover {
-            border-color: #409EFF;
-        }
+.avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 178px;
+    line-height: 178px;
+    text-align: center;
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    background-color: #fbfdff;
+    &:hover {
+        border-color: #409eff;
     }
+}
 
-    .avatar {
-        width: 178px;
-        height: 178px;
-        display: block;
-        border: 1px dashed #d9d9d9;
-        border-radius: 6px;
-        cursor: pointer;
-        position: relative;
-        overflow: hidden;
-        &:hover {
-            border-color: #409EFF;
-        }
+.avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    &:hover {
+        border-color: #409eff;
     }
+}
 
-    .wrapper {
-        position: relative;
-    }
+.wrapper {
+    position: relative;
+}
 
-    .single-upload .el-upload {
-        position: relative;
-    }
-
-    .loading {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        margin: auto;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: rgba(255, 255, 255, 0.6);
-        color: #333;
-        font-size: 24px;
-    }
+.single-upload .el-upload {
+    position: relative;
+}
 
+.loading {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.6);
+    color: #333;
+    font-size: 24px;
+}
 </style>

src/main/vue/src/main.less

@@ -122,4 +122,11 @@ ul, li {
   .useTree .el-tree-node__content{
      height:48px;
      border-bottom: 1px solid #eee
+  }
+
+  .image-slot{
+      background-color: #f2f4f5;
+      text-align: center;
+      line-height: 80px;
+      font-size: 30px;
   }

src/main/vue/src/pages/App.vue

@@ -3,20 +3,16 @@
         <el-aside :width="collapse ? '65px' : '200px'" class="aside">
             <div class="logo-wrapper">
                 <img v-if="!collapse" src="../assets/logo.png" alt="">
-                  <img v-else src="../assets/logo1.png" alt="">
+                <img v-else src="../assets/logo1.png" alt="">
             </div>
-            <el-menu
-                :collapse="collapse"
-                background-color="#324157"
-                text-color="#BFCBD9"
-                active-text-color="#20A0FF"
-                :unique-opened="true"
-                :router="true"
+            <el-menu :collapse="collapse" background-color="#324157"
+                text-color="#BFCBD9" active-text-color="#20A0FF"
+                :unique-opened="true" :router="true"
                 :default-active="activeMenu"
                 style="border-right: 1px solid #545c64"
-                class="el-menu-vertical-demo"
-            >
-                <sys-menu v-for="item in menus" :menu="item" :key="item.id"></sys-menu>
+                class="el-menu-vertical-demo">
+                <sys-menu v-for="item in menus" :menu="item" :key="item.id">
+                </sys-menu>
             </el-menu>
         </el-aside>
         <el-container>
@@ -27,44 +23,36 @@
                     </div>
                 </div>
                 <div style="flex-grow: 1; margin-left: 20px;">
-                    <router-link :to="{name:'dashboard'}">图途象小程序后台管理</router-link>
+                    <router-link :to="{name:'dashboard'}">图途象小程序后台管理
+                    </router-link>
                 </div>
 
                 <div class="select">
                     <span>当前店铺:</span>
-                    <el-select
-                        v-model="chooseStoreId"
-                        clearable
-                        filterable
-                        placeholder="店铺"
-                        @change="storeIdChange"
-                        size="small"
-                        style="width:120px"
-                    >
-                        <el-option
-                            v-for="item in storeInfos"
-                            :key="item.id"
-                            :label="item.storeName"
-                            :value="item.id"
-                        ></el-option>
+                    <el-select v-model="chooseStoreId" clearable filterable
+                        placeholder="店铺" @change="storeIdChange" size="small"
+                        style="width:120px">
+                        <el-option v-for="item in storeInfos" :key="item.id"
+                            :label="item.storeName" :value="item.id">
+                        </el-option>
                     </el-select>
                 </div>
 
-                <el-tooltip
-                    effect="dark"
-                    :content="isFullscreen ? '退出全屏' : '全屏'"
-                    placement="bottom"
-                    :open-delay="1000"
-                >
-                    <div class="header-btn" @click="toggleFullScreen" ref="fullscreen">
+                <el-tooltip effect="dark"
+                    :content="isFullscreen ? '退出全屏' : '全屏'" placement="bottom"
+                    :open-delay="1000">
+                    <div class="header-btn" @click="toggleFullScreen"
+                        ref="fullscreen">
                         <i class="fas fa-expand" style="font-size: 20px;"></i>
                     </div>
                 </el-tooltip>
 
                 <el-dropdown @command="onCommand" style="margin-left: 20px;">
-                    <img :src="userInfo ? userInfo.icon || '' : ''" class="avatar" />
+                    <img :src="userInfo ? userInfo.icon || '' : ''"
+                        class="avatar" />
                     <el-dropdown-menu slot="dropdown">
-                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
+                        <el-dropdown-item command="logout">退出登录
+                        </el-dropdown-item>
                     </el-dropdown-menu>
                 </el-dropdown>
             </el-header>
@@ -134,7 +122,10 @@ export default {
             const findActiveMenu = (parents, childMenus) => {
                 childMenus.forEach(i => {
                     let parents_copy = [...parents];
-                    if (i.href === path) {
+                    if (
+                        i.href === path ||
+                        i.href === this.$route.meta.menuInfo
+                    ) {
                         parents_copy.push(i);
                         this.menuPath = parents_copy.map(i => i.name);
                         this.activeMenu = "" + i.id;
@@ -284,8 +275,8 @@ export default {
         font-weight: 700;
         background: fade(black, 20%);
         padding: 0 20px;
-        img{
-            width:100%;
+        img {
+            width: 100%;
         }
     }
 }

src/main/vue/src/pages/BannerInfos.vue

@@ -2,53 +2,51 @@
     <div>
         <div class="filters-container">
 
-            <el-input placeholder="关键字" size="small" v-model="filter1" clearable class="filter-item"></el-input>
-            <el-button @click="searchData" type="primary" size="small" icon="el-icon-search" class="filter-item">搜索
+            <el-input placeholder="关键字" size="small" v-model="filter1" clearable
+                class="filter-item"></el-input>
+            <el-button @click="searchData" type="primary" size="small"
+                icon="el-icon-search" class="filter-item">搜索
             </el-button>
-            <el-button @click="showAdvancedQueryDialog = !showAdvancedQueryDialog" type="primary" size="small"
-                       icon="el-icon-search" class="filter-item">高级查询
+            <el-button
+                @click="showAdvancedQueryDialog = !showAdvancedQueryDialog"
+                type="primary" size="small" icon="el-icon-search"
+                class="filter-item">高级查询
             </el-button>
-            <el-button @click="showTableSortDialog = !showTableSortDialog" type="primary" size="small"
-                       icon="el-icon-sort" class="filter-item">排序
+            <el-button @click="showTableSortDialog = !showTableSortDialog"
+                type="primary" size="small" icon="el-icon-sort"
+                class="filter-item">排序
             </el-button>
-            <el-button @click="$router.push({path:'/bannerInfo',query:{column:$route.query.column}})" type="primary"
-                       size="small" icon="el-icon-edit"
-                       class="filter-item">添加
+            <el-button
+                @click="$router.push({path:'/bannerInfo',query:{column:$route.query.column}})"
+                type="primary" size="small" icon="el-icon-edit"
+                class="filter-item">添加
             </el-button>
-            <el-button @click="exportExcel" type="primary" size="small" icon="el-icon-share" class="filter-item">导出EXCEL
+            <el-button @click="exportExcel" type="primary" size="small"
+                icon="el-icon-share" class="filter-item">导出EXCEL
             </el-button>
-            <el-dropdown trigger="click" size="medium" class="table-column-filter">
+            <el-dropdown trigger="click" size="medium"
+                class="table-column-filter">
                 <span>
                     筛选数据<i class="el-icon-arrow-down el-icon--right"></i>
                 </span>
-                <el-dropdown-menu slot="dropdown" class="table-column-filter-wrapper">
-                    <el-checkbox v-for="item in tableColumns" :key="item.value" v-model="item.show">{{item.label}}
+                <el-dropdown-menu slot="dropdown"
+                    class="table-column-filter-wrapper">
+                    <el-checkbox v-for="item in tableColumns" :key="item.value"
+                        v-model="item.show">{{item.label}}
                     </el-checkbox>
                 </el-dropdown-menu>
             </el-dropdown>
         </div>
-        <el-table
-                  :data="tableData"
-                  :height="tableHeight"
-                  row-key="id"
-                  ref="table">
-            <el-table-column
-                             v-if="multipleMode"
-                             align="center"
-                             type="selection"
-                             width="50">
+        <el-table :data="tableData" :height="tableHeight" row-key="id"
+            ref="table">
+            <el-table-column v-if="multipleMode" align="center" type="selection"
+                width="50">
             </el-table-column>
-            <el-table-column
-                             type="index"
-                             min-width="50"
-                             align="center">
+            <el-table-column type="index" min-width="50" align="center">
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('id')"
-                             prop="id"
-                             label="ID"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('id')" prop="id" label="ID"
+                min-width="100">
             </el-table-column>
 
             <!-- <el-table-column
@@ -65,18 +63,12 @@
                                 min-width="100">
                         </el-table-column> -->
 
-            <el-table-column
-                             v-if="isColumnShow('storeId')"
-                             prop="storeId"
-                             label="店铺Id"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('storeId')" prop="storeId"
+                label="店铺Id" min-width="100">
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('typeFlag')"
-                             prop="typeFlag"
-                             label="类型"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('typeFlag')" prop="typeFlag"
+                label="类型" min-width="100">
                 <template slot-scope="{row}">
                     {{row.typeFlag==0?'商品':'小程序页面'}}
                 </template>
@@ -96,88 +88,75 @@
                                 min-width="100">
                         </el-table-column> -->
 
-            <el-table-column
-                             v-if="isColumnShow('imageUrl')"
-                             prop="imageUrl"
-                             label="图片"
-                             min-width="140">
+            <el-table-column v-if="isColumnShow('imageUrl')" prop="imageUrl"
+                label="图片" min-width="160">
                 <template slot-scope="{row}">
-                    <img :src="row.imageUrl" @click="showImg(row.imageUrl)" style="width: 100px;height: 100px;vertical-align: middle;" />
+                    <!-- <img :src="row.imageUrl" @click="showImg(row.imageUrl)" style="width: 100px;height: 100px;vertical-align: middle;" /> -->
+                    <el-image style="width: 160px; height: 80px"
+                        :src="row.imageUrl" fit="contain"
+                        @click="showImg(row.imageUrl)"></el-image>
+
                 </template>
 
             </el-table-column>
-            <el-table-column
-                             prop="productId"
-                             label="商品Id"
-                             min-width="100">
+            <el-table-column prop="productId" label="商品Id" min-width="100">
             </el-table-column>
-            <el-table-column
-                             v-if="isColumnShow('pathUrl')"
-                             prop="pathUrl"
-                             label="地址"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('pathUrl')" prop="pathUrl"
+                label="地址" min-width="100">
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('statusFlag')"
-                             prop="statusFlag"
-                             label="状态"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('statusFlag')" prop="statusFlag"
+                label="状态" min-width="100">
 
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('remark')"
-                             prop="remark"
-                             label="备注"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('remark')" prop="remark"
+                label="备注" min-width="100">
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('rank')"
-                             prop="rank"
-                             label="排序"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('rank')" prop="rank" label="排序"
+                min-width="100">
             </el-table-column>
 
-            <el-table-column
-                             label="操作"
-                             align="center"
-                             fixed="right"
-                             min-width="150">
+            <el-table-column label="操作" align="center" fixed="right"
+                min-width="150">
                 <template slot-scope="scope">
-                    <el-button @click="editRow(scope.row)" type="primary" size="mini" plain>编辑</el-button>
-                    <el-button @click="deleteRow(scope.row)" type="danger" size="mini" plain>删除</el-button>
+                    <el-button @click="editRow(scope.row)" type="primary"
+                        size="mini" plain>编辑</el-button>
+                    <el-button @click="deleteRow(scope.row)" type="danger"
+                        size="mini" plain>删除</el-button>
                 </template>
             </el-table-column>
         </el-table>
         <div class="pagination-wrapper">
             <div class="multiple-mode-wrapper" v-if="0">
-                <el-button size="small" v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+                <el-button size="small" v-if="!multipleMode"
+                    @click="toggleMultipleMode(true)">批量编辑</el-button>
                 <el-button-group v-else>
-                    <el-button size="small" @click="operation1">批量操作1</el-button>
-                    <el-button size="small" @click="operation2">批量操作2</el-button>
-                    <el-button size="small" @click="toggleMultipleMode(false)">取消</el-button>
+                    <el-button size="small" @click="operation1">批量操作1
+                    </el-button>
+                    <el-button size="small" @click="operation2">批量操作2
+                    </el-button>
+                    <el-button size="small" @click="toggleMultipleMode(false)">
+                        取消</el-button>
                 </el-button-group>
             </div>
-            <el-pagination
-                           background
-                           @size-change="pageSizeChange"
-                           @current-change="currentPageChange"
-                           :current-page="currentPage"
-                           :page-sizes="[10, 20, 30, 40, 50]"
-                           :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalNumber">
+            <el-pagination background @size-change="pageSizeChange"
+                @current-change="currentPageChange" :current-page="currentPage"
+                :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="totalNumber">
             </el-pagination>
         </div>
         <el-dialog title="高级查询" :visible.sync="showAdvancedQueryDialog">
-            <el-button @click="addField" type="text" icon="el-icon-plus">添加</el-button>
+            <el-button @click="addField" type="text" icon="el-icon-plus">添加
+            </el-button>
             <el-table :data="advancedQueryFields">
 
                 <el-table-column prop="link" label="链接符" align="center">
                     <template slot-scope="{row}">
-                        <el-select placeholder="链接" size="small" v-model="row.link" class="filter-item">
+                        <el-select placeholder="链接" size="small"
+                            v-model="row.link" class="filter-item">
                             <el-option label="AND" value="AND">
                             </el-option>
                             <el-option label="OR" value="OR">
@@ -189,16 +168,19 @@
                     <template slot-scope="{row}">
                         <el-select v-model="row.name">
 
-                            <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value"
-                                       :key="item.value"></el-option>
+                            <el-option v-for="item in advancedQueryColumns"
+                                :label="item.label" :value="item.value"
+                                :key="item.value"></el-option>
                         </el-select>
                     </template>
                 </el-table-column>
-                <el-table-column prop="searchMethod" label="搜索方式" width="150" align="center">
+                <el-table-column prop="searchMethod" label="搜索方式" width="150"
+                    align="center">
                     <template slot-scope="{row}">
                         <el-select v-model="row.searchMethod">
-                            <el-option v-for="item in searchMethods" :label="item" :value="item"
-                                       :key="item"></el-option>
+                            <el-option v-for="item in searchMethods"
+                                :label="item" :value="item" :key="item">
+                            </el-option>
                         </el-select>
                     </template>
                 </el-table-column>
@@ -209,27 +191,31 @@
                 </el-table-column>
                 <el-table-column width="60" align="center">
                     <template slot-scope="{ row, column, $index }">
-                        <el-button @click="removeField($index)" size="small" type="text">删除</el-button>
+                        <el-button @click="removeField($index)" size="small"
+                            type="text">删除</el-button>
                     </template>
                 </el-table-column>
             </el-table>
 
             <span slot="footer" class="dialog-footer">
 
-                <el-button @click="advancedQuery" :loading="$store.state.fetchingData">确定</el-button>
+                <el-button @click="advancedQuery"
+                    :loading="$store.state.fetchingData">确定</el-button>
             </span>
         </el-dialog>
 
         <el-dialog title="排序" :visible.sync="showTableSortDialog">
-            <el-button @click="addSortField" type="text" icon="el-icon-plus">添加</el-button>
+            <el-button @click="addSortField" type="text" icon="el-icon-plus">添加
+            </el-button>
             <el-table :data="tableSortFields">
 
                 <el-table-column prop="name" label="字段" align="center">
                     <template slot-scope="{row}">
                         <el-select v-model="row.name">
 
-                            <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value"
-                                       :key="item.value"></el-option>
+                            <el-option v-for="item in advancedQueryColumns"
+                                :label="item.label" :value="item.value"
+                                :key="item.value"></el-option>
                         </el-select>
                     </template>
                 </el-table-column>
@@ -245,14 +231,16 @@
                 </el-table-column>
                 <el-table-column width="60" align="center">
                     <template slot-scope="{ row, column, $index }">
-                        <el-button @click="removeSortField($index)" size="small" type="text">删除</el-button>
+                        <el-button @click="removeSortField($index)" size="small"
+                            type="text">删除</el-button>
                     </template>
                 </el-table-column>
             </el-table>
 
             <span slot="footer" class="dialog-footer">
 
-                <el-button @click="tableSortQuery" :loading="$store.state.fetchingData">确定</el-button>
+                <el-button @click="tableSortQuery"
+                    :loading="$store.state.fetchingData">确定</el-button>
             </span>
         </el-dialog>
 
@@ -263,12 +251,12 @@
     </div>
 </template>
 <script>
-import { mapState } from 'vuex';
-import { format } from 'date-fns';
-import zh from 'date-fns/locale/zh_cn';
+import { mapState } from "vuex";
+import { format } from "date-fns";
+import zh from "date-fns/locale/zh_cn";
 
 export default {
-    name: 'BannerInfos',
+    name: "BannerInfos",
     created() {
         this.getData();
     },
@@ -279,151 +267,151 @@ export default {
             currentPage: 1,
             pageSize: 20,
             tableData: [],
-            filter1: '',
-            filter2: '',
+            filter1: "",
+            filter2: "",
             tableColumns: [
                 {
-                    label: 'ID',
-                    value: 'id',
-                    show: true,
+                    label: "ID",
+                    value: "id",
+                    show: true
                 },
                 {
-                    label: '用户Id',
-                    value: 'userId',
-                    show: true,
+                    label: "用户Id",
+                    value: "userId",
+                    show: true
                 },
                 {
-                    label: '小程序',
-                    value: 'miniId',
-                    show: true,
+                    label: "小程序",
+                    value: "miniId",
+                    show: true
                 },
                 {
-                    label: '店铺',
-                    value: 'storeId',
-                    show: true,
+                    label: "店铺",
+                    value: "storeId",
+                    show: true
                 },
                 {
-                    label: '状态',
-                    value: 'statusFlag',
-                    show: true,
+                    label: "状态",
+                    value: "statusFlag",
+                    show: true
                 },
                 {
-                    label: '类型',
-                    value: 'typeFlag',
-                    show: true,
+                    label: "类型",
+                    value: "typeFlag",
+                    show: true
                 },
                 {
-                    label: '标题',
-                    value: 'title',
-                    show: true,
+                    label: "标题",
+                    value: "title",
+                    show: true
                 },
                 {
-                    label: '子标题',
-                    value: 'subtitle',
-                    show: true,
+                    label: "子标题",
+                    value: "subtitle",
+                    show: true
                 },
                 {
-                    label: '图片',
-                    value: 'imageUrl',
-                    show: true,
+                    label: "图片",
+                    value: "imageUrl",
+                    show: true
                 },
                 {
-                    label: '地址',
-                    value: 'pathUrl',
-                    show: true,
+                    label: "地址",
+                    value: "pathUrl",
+                    show: true
                 },
                 {
-                    label: '备注',
-                    value: 'remark',
-                    show: true,
+                    label: "备注",
+                    value: "remark",
+                    show: true
                 },
                 {
-                    label: '排序',
-                    value: 'rank',
-                    show: true,
+                    label: "排序",
+                    value: "rank",
+                    show: true
                 },
                 {
-                    label: '商品',
-                    value: 'productId',
-                    show: true,
-                },
+                    label: "商品",
+                    value: "productId",
+                    show: true
+                }
             ],
             multipleMode: false,
             showAdvancedQueryDialog: false,
             advancedQueryFields: [],
             showTableSortDialog: false,
             tableSortFields: [],
-            searchMethods: ['=', '!=', '>', '>=', '<', '<=', 'like'],
+            searchMethods: ["=", "!=", ">", ">=", "<", "<=", "like"],
             advancedQueryColumns: [
                 {
-                    label: 'ID',
-                    value: 'id',
+                    label: "ID",
+                    value: "id"
                 },
                 {
-                    label: '用户Id',
-                    value: 'user_id',
+                    label: "用户Id",
+                    value: "user_id"
                 },
                 {
-                    label: '小程序',
-                    value: 'mini_id',
+                    label: "小程序",
+                    value: "mini_id"
                 },
                 {
-                    label: '店铺',
-                    value: 'store_id',
+                    label: "店铺",
+                    value: "store_id"
                 },
                 {
-                    label: '状态',
-                    value: 'status_flag',
+                    label: "状态",
+                    value: "status_flag"
                 },
                 {
-                    label: '类型',
-                    value: 'type_flag',
+                    label: "类型",
+                    value: "type_flag"
                 },
                 {
-                    label: '标题',
-                    value: 'title',
+                    label: "标题",
+                    value: "title"
                 },
                 {
-                    label: '子标题',
-                    value: 'subtitle',
+                    label: "子标题",
+                    value: "subtitle"
                 },
                 {
-                    label: '图片',
-                    value: 'image_url',
+                    label: "图片",
+                    value: "image_url"
                 },
                 {
-                    label: '地址',
-                    value: 'path_url',
+                    label: "地址",
+                    value: "path_url"
                 },
                 {
-                    label: '备注',
-                    value: 'remark',
+                    label: "备注",
+                    value: "remark"
                 },
                 {
-                    label: '排序',
-                    value: 'rank',
+                    label: "排序",
+                    value: "rank"
                 },
                 {
-                    label: '商品',
-                    value: 'product_id',
-                },
+                    label: "商品",
+                    value: "product_id"
+                }
             ],
-            advancedQuerySearchKey: '',
-            orderByStr: '',
-            imgSrc: '',
-            imageDialogVisible: false,
+            advancedQuerySearchKey: "",
+            orderByStr: "",
+            imgSrc: "",
+            imageDialogVisible: false
         };
     },
     computed: {
-        ...mapState(['tableHeight','storeId']),
+        ...mapState(["tableHeight", "storeId"]),
         selection() {
             return this.$refs.table.selection.map(i => i.id);
-        },
+        }
     },
     watch: {
         storeId() {
             this.searchData();
-        },
+        }
     },
     methods: {
         pageSizeChange(size) {
@@ -442,18 +430,18 @@ export default {
                 searchKey: this.filter1,
                 advancedQuery: this.advancedQuerySearchKey,
                 orderByStr: this.orderByStr,
-                storeId: this.storeId || '',
+                storeId: this.storeId || ""
             };
 
             if (this.$route.query.column) {
                 var tempColumn = this.$route.query.column;
-                data[tempColumn.split(',')[1]] = tempColumn.split(',')[0];
+                data[tempColumn.split(",")[1]] = tempColumn.split(",")[0];
             }
 
             this.$http
                 .get({
-                    url: '/bannerInfo/page',
-                    data: data,
+                    url: "/bannerInfo/page",
+                    data: data
                 })
                 .then(res => {
                     if (res.success) {
@@ -474,28 +462,28 @@ export default {
         },
         editRow(row) {
             this.$router.push({
-                path: '/bannerInfo',
+                path: "/bannerInfo",
                 query: {
                     id: row.id,
-                    column: this.$route.query.column,
-                },
+                    column: this.$route.query.column
+                }
             });
         },
         operation1() {
             this.$notify({
-                title: '提示',
-                message: this.selection,
+                title: "提示",
+                message: this.selection
             });
         },
         operation2() {
-            this.$message('操作2');
+            this.$message("操作2");
         },
         addField() {
             this.advancedQueryFields.push({
-                link: 'AND',
-                name: '',
-                searchMethod: '=',
-                value: '',
+                link: "AND",
+                name: "",
+                searchMethod: "=",
+                value: ""
             });
         },
         removeField(i) {
@@ -504,7 +492,7 @@ export default {
             }
         },
         advancedQuery() {
-            this.advancedQuerySearchKey = '';
+            this.advancedQuerySearchKey = "";
 
             if (this.advancedQueryFields.length > 0) {
                 var templist = [];
@@ -518,18 +506,18 @@ export default {
                     ) {
                         var tempItem =
                             item.link +
-                            '_,' +
+                            "_," +
                             item.name +
-                            '_,' +
+                            "_," +
                             item.searchMethod +
-                            '_,' +
+                            "_," +
                             item.value;
                         templist.push(tempItem);
                     }
                 });
 
                 if (templist.length > 0) {
-                    this.advancedQuerySearchKey = templist.join('_;');
+                    this.advancedQuerySearchKey = templist.join("_;");
                 }
             }
 
@@ -538,8 +526,8 @@ export default {
         },
         addSortField() {
             this.tableSortFields.push({
-                name: '',
-                order: 'asc',
+                name: "",
+                order: "asc"
             });
         },
         removeSortField(i) {
@@ -548,20 +536,20 @@ export default {
             }
         },
         tableSortQuery() {
-            this.orderByStr = '';
+            this.orderByStr = "";
 
             if (this.tableSortFields.length > 0) {
                 var templist = [];
 
                 this.tableSortFields.forEach(item => {
                     if (item.name && item.order) {
-                        var tempItem = item.name + '_,' + item.order;
+                        var tempItem = item.name + "_," + item.order;
                         templist.push(tempItem);
                     }
                 });
 
                 if (templist.length > 0) {
-                    this.orderByStr = templist.join('_;');
+                    this.orderByStr = templist.join("_;");
                 }
             }
 
@@ -571,11 +559,11 @@ export default {
         exportExcel() {
             window.location.href =
                 this.$baseUrl +
-                '/bannerInfo/exportExcel?searchKey=' +
+                "/bannerInfo/exportExcel?searchKey=" +
                 this.filter1 +
-                '&advancedQuery=' +
+                "&advancedQuery=" +
                 this.advancedQuerySearchKey +
-                '&orderByStr=' +
+                "&orderByStr=" +
                 this.orderByStr;
         },
         searchData() {
@@ -583,42 +571,42 @@ export default {
             this.getData();
         },
         deleteRow(row) {
-            this.$alert('删除将无法恢复，确认要删除么？', '警告', {
-                type: 'error',
+            this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+                type: "error"
             })
                 .then(() => {
                     return this.$http.post({
-                        url: '/bannerInfo/del',
-                        data: { id: row.id },
+                        url: "/bannerInfo/del",
+                        data: { id: row.id }
                     });
                 })
                 .then(() => {
-                    this.$message.success('删除成功');
+                    this.$message.success("删除成功");
                     this.getData();
                 })
                 .catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
+                    if (action === "cancel") {
+                        this.$message.info("删除取消");
                     } else {
-                        this.$message.error('删除失败');
+                        this.$message.error("删除失败");
                     }
                 });
         },
         DateTimeFormatter(row, column, cellValue) {
             if (cellValue) {
-                return format(cellValue, 'YYYY/MM/DD HH:mm', { locale: zh });
+                return format(cellValue, "YYYY/MM/DD HH:mm", { locale: zh });
             }
         },
         DateFormatter(row, column, cellValue) {
             if (cellValue) {
-                return format(cellValue, 'YYYY/MM/DD', { locale: zh });
+                return format(cellValue, "YYYY/MM/DD", { locale: zh });
             }
         },
         showImg(img) {
             this.imgSrc = img;
             this.imageDialogVisible = true;
-        },
-    },
+        }
+    }
 };
 </script>
 <style lang="less" scoped>

src/main/vue/src/pages/CouponInfos.vue

@@ -4,9 +4,9 @@
         <div class="filters-container">
             <el-input style="width:150px" placeholder="关键字" size="small"
                 v-model="filter1" clearable></el-input>
-            <el-button @click="searchData" type="primary" plain size="small">搜索
+            <el-button @click="searchData"  icon="el-icon-search"  type="primary"  size="small">搜索
             </el-button>
-            <el-button @click="addRow" type="primary" size="small">添加</el-button>
+            <el-button @click="addRow" type="primary" plain size="small">添加</el-button>
 
         </div>
 
@@ -20,6 +20,7 @@
             <el-table-column align="center" prop="name" label="名称"
                 min-width="120"></el-table-column>
 
+
             <el-table-column align="center" prop="discription" label="描述"
                 min-width="100"></el-table-column>
 

src/main/vue/src/pages/HomeAds.vue

@@ -2,53 +2,51 @@
     <div>
         <div class="filters-container">
 
-            <el-input placeholder="关键字" size="small" v-model="filter1" clearable class="filter-item"></el-input>
-            <el-button @click="searchData" type="primary" size="small" icon="el-icon-search" class="filter-item">搜索
+            <el-input placeholder="关键字" size="small" v-model="filter1" clearable
+                class="filter-item"></el-input>
+            <el-button @click="searchData" type="primary" size="small"
+                icon="el-icon-search" class="filter-item">搜索
             </el-button>
-            <el-button @click="showAdvancedQueryDialog = !showAdvancedQueryDialog" type="primary" size="small"
-                       icon="el-icon-search" class="filter-item">高级查询
+            <el-button
+                @click="showAdvancedQueryDialog = !showAdvancedQueryDialog"
+                type="primary" size="small" icon="el-icon-search"
+                class="filter-item">高级查询
             </el-button>
-            <el-button @click="showTableSortDialog = !showTableSortDialog" type="primary" size="small"
-                       icon="el-icon-sort" class="filter-item">排序
+            <el-button @click="showTableSortDialog = !showTableSortDialog"
+                type="primary" size="small" icon="el-icon-sort"
+                class="filter-item">排序
             </el-button>
-            <el-button @click="$router.push({path:'/homeAd',query:{column:$route.query.column}})" type="primary"
-                       size="small" icon="el-icon-edit"
-                       class="filter-item">添加
+            <el-button
+                @click="$router.push({path:'/homeAd',query:{column:$route.query.column}})"
+                type="primary" size="small" icon="el-icon-edit"
+                class="filter-item">添加
             </el-button>
-            <el-button @click="exportExcel" type="primary" size="small" icon="el-icon-share" class="filter-item">导出EXCEL
+            <el-button @click="exportExcel" type="primary" size="small"
+                icon="el-icon-share" class="filter-item">导出EXCEL
             </el-button>
-            <el-dropdown trigger="click" size="medium" class="table-column-filter">
+            <el-dropdown trigger="click" size="medium"
+                class="table-column-filter">
                 <span>
                     筛选数据<i class="el-icon-arrow-down el-icon--right"></i>
                 </span>
-                <el-dropdown-menu slot="dropdown" class="table-column-filter-wrapper">
-                    <el-checkbox v-for="item in tableColumns" :key="item.value" v-model="item.show">{{item.label}}
+                <el-dropdown-menu slot="dropdown"
+                    class="table-column-filter-wrapper">
+                    <el-checkbox v-for="item in tableColumns" :key="item.value"
+                        v-model="item.show">{{item.label}}
                     </el-checkbox>
                 </el-dropdown-menu>
             </el-dropdown>
         </div>
-        <el-table
-                  :data="tableData"
-                  :height="tableHeight"
-                  row-key="id"
-                  ref="table">
-            <el-table-column
-                             v-if="multipleMode"
-                             align="center"
-                             type="selection"
-                             width="50">
+        <el-table :data="tableData" :height="tableHeight" row-key="id"
+            ref="table">
+            <el-table-column v-if="multipleMode" align="center" type="selection"
+                width="50">
             </el-table-column>
-            <el-table-column
-                             type="index"
-                             min-width="50"
-                             align="center">
+            <el-table-column type="index" min-width="50" align="center">
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('id')"
-                             prop="id"
-                             label="ID"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('id')" prop="id" label="ID"
+                min-width="100">
             </el-table-column>
 
             <!-- <el-table-column
@@ -65,24 +63,15 @@
                                 min-width="100">
                         </el-table-column> -->
 
-            <el-table-column
-                             v-if="isColumnShow('storeId')"
-                             prop="storeId"
-                             label="店铺Id"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('storeId')" prop="storeId"
+                label="店铺Id" min-width="100">
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('rank')"
-                             prop="rank"
-                             label="排序"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('rank')" prop="rank" label="排序"
+                min-width="100">
             </el-table-column>
-            <el-table-column
-                             v-if="isColumnShow('typeFlag')"
-                             prop="typeFlag"
-                             label="类型"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('typeFlag')" prop="typeFlag"
+                label="类型" min-width="100">
                 <template slot-scope="{row}">
                     {{row.typeFlag==0?'单排广告位':'双排广告位'}}
                 </template>
@@ -102,93 +91,86 @@
                              min-width="100">
             </el-table-column> -->
 
-            <el-table-column
-                             v-if="isColumnShow('imageUrl')"
-                             prop="imageUrl"
-                             label="图片1"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('imageUrl')" prop="imageUrl"
+                label="图片1" min-width="180">
                 <template slot-scope="{row}">
-                    <img :src="row.imageUrl" @click="showImg(row.imageUrl)" style="width: 100px;height: 100px;vertical-align: middle;" />
+                    <!-- <img :src="row.imageUrl" @click="showImg(row.imageUrl)" style="width: 100px;height: 100px;vertical-align: middle;" /> -->
+                    <el-image style="width: 160px; height: 80px"
+                        :src="row.imageUrl" fit="contain"
+                        @click="showImg(row.imageUrl)"></el-image>
                 </template>
 
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('productId')"
-                             prop="productId"
-                             label="商品1"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('productId')" prop="productId"
+                label="商品1" min-width="100">
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('image2Url')"
-                             prop="image2Url"
-                             label="图片2"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('image2Url')" prop="image2Url"
+                label="图片2" min-width="180">
                 <template slot-scope="{row}">
-                    <img :src="row.image2Url" @click="showImg(row.image2Url)" style="width: 100px;height: 100px;vertical-align: middle;" />
+                    <!-- <img :src="row.image2Url" @click="showImg(row.image2Url)" style="width: 100px;height: 100px;vertical-align: middle;" /> -->
+                    <el-image style="width: 160px; height: 80px"
+                        :src="row.image2Url" fit="contain"
+                        @click="showImg(row.image2Url)">
+                        <div slot="error" class="image-slot">
+                            <i class="el-icon-picture-outline"></i>
+                        </div>
+                    </el-image>
                 </template>
 
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('product2Id')"
-                             prop="product2Id"
-                             label="商品2"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('product2Id')" prop="product2Id"
+                label="商品2" min-width="100">
             </el-table-column>
-            <el-table-column
-                             v-if="isColumnShow('statusFlag')"
-                             prop="statusFlag"
-                             label="状态"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('statusFlag')" prop="statusFlag"
+                label="状态" min-width="100">
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('remark')"
-                             prop="remark"
-                             label="备注"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('remark')" prop="remark"
+                label="备注" min-width="100">
             </el-table-column>
 
-            <el-table-column
-                             label="操作"
-                             align="center"
-                             fixed="right"
-                             min-width="150">
+            <el-table-column label="操作" align="center" fixed="right"
+                min-width="150">
                 <template slot-scope="scope">
-                    <el-button @click="editRow(scope.row)" type="primary" size="mini" plain>编辑</el-button>
-                    <el-button @click="deleteRow(scope.row)" type="danger" size="mini" plain>删除</el-button>
+                    <el-button @click="editRow(scope.row)" type="primary"
+                        size="mini" plain>编辑</el-button>
+                    <el-button @click="deleteRow(scope.row)" type="danger"
+                        size="mini" plain>删除</el-button>
                 </template>
             </el-table-column>
         </el-table>
         <div class="pagination-wrapper">
             <div class="multiple-mode-wrapper" v-if="0">
-                <el-button size="small" v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+                <el-button size="small" v-if="!multipleMode"
+                    @click="toggleMultipleMode(true)">批量编辑</el-button>
                 <el-button-group v-else>
-                    <el-button size="small" @click="operation1">批量操作1</el-button>
-                    <el-button size="small" @click="operation2">批量操作2</el-button>
-                    <el-button size="small" @click="toggleMultipleMode(false)">取消</el-button>
+                    <el-button size="small" @click="operation1">批量操作1
+                    </el-button>
+                    <el-button size="small" @click="operation2">批量操作2
+                    </el-button>
+                    <el-button size="small" @click="toggleMultipleMode(false)">
+                        取消</el-button>
                 </el-button-group>
             </div>
-            <el-pagination
-                           background
-                           @size-change="pageSizeChange"
-                           @current-change="currentPageChange"
-                           :current-page="currentPage"
-                           :page-sizes="[10, 20, 30, 40, 50]"
-                           :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalNumber">
+            <el-pagination background @size-change="pageSizeChange"
+                @current-change="currentPageChange" :current-page="currentPage"
+                :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="totalNumber">
             </el-pagination>
         </div>
         <el-dialog title="高级查询" :visible.sync="showAdvancedQueryDialog">
-            <el-button @click="addField" type="text" icon="el-icon-plus">添加</el-button>
+            <el-button @click="addField" type="text" icon="el-icon-plus">添加
+            </el-button>
             <el-table :data="advancedQueryFields">
 
                 <el-table-column prop="link" label="链接符" align="center">
                     <template slot-scope="{row}">
-                        <el-select placeholder="链接" size="small" v-model="row.link" class="filter-item">
+                        <el-select placeholder="链接" size="small"
+                            v-model="row.link" class="filter-item">
                             <el-option label="AND" value="AND">
                             </el-option>
                             <el-option label="OR" value="OR">
@@ -200,16 +182,19 @@
                     <template slot-scope="{row}">
                         <el-select v-model="row.name">
 
-                            <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value"
-                                       :key="item.value"></el-option>
+                            <el-option v-for="item in advancedQueryColumns"
+                                :label="item.label" :value="item.value"
+                                :key="item.value"></el-option>
                         </el-select>
                     </template>
                 </el-table-column>
-                <el-table-column prop="searchMethod" label="搜索方式" width="150" align="center">
+                <el-table-column prop="searchMethod" label="搜索方式" width="150"
+                    align="center">
                     <template slot-scope="{row}">
                         <el-select v-model="row.searchMethod">
-                            <el-option v-for="item in searchMethods" :label="item" :value="item"
-                                       :key="item"></el-option>
+                            <el-option v-for="item in searchMethods"
+                                :label="item" :value="item" :key="item">
+                            </el-option>
                         </el-select>
                     </template>
                 </el-table-column>
@@ -220,27 +205,31 @@
                 </el-table-column>
                 <el-table-column width="60" align="center">
                     <template slot-scope="{ row, column, $index }">
-                        <el-button @click="removeField($index)" size="small" type="text">删除</el-button>
+                        <el-button @click="removeField($index)" size="small"
+                            type="text">删除</el-button>
                     </template>
                 </el-table-column>
             </el-table>
 
             <span slot="footer" class="dialog-footer">
 
-                <el-button @click="advancedQuery" :loading="$store.state.fetchingData">确定</el-button>
+                <el-button @click="advancedQuery"
+                    :loading="$store.state.fetchingData">确定</el-button>
             </span>
         </el-dialog>
 
         <el-dialog title="排序" :visible.sync="showTableSortDialog">
-            <el-button @click="addSortField" type="text" icon="el-icon-plus">添加</el-button>
+            <el-button @click="addSortField" type="text" icon="el-icon-plus">添加
+            </el-button>
             <el-table :data="tableSortFields">
 
                 <el-table-column prop="name" label="字段" align="center">
                     <template slot-scope="{row}">
                         <el-select v-model="row.name">
 
-                            <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value"
-                                       :key="item.value"></el-option>
+                            <el-option v-for="item in advancedQueryColumns"
+                                :label="item.label" :value="item.value"
+                                :key="item.value"></el-option>
                         </el-select>
                     </template>
                 </el-table-column>
@@ -256,14 +245,16 @@
                 </el-table-column>
                 <el-table-column width="60" align="center">
                     <template slot-scope="{ row, column, $index }">
-                        <el-button @click="removeSortField($index)" size="small" type="text">删除</el-button>
+                        <el-button @click="removeSortField($index)" size="small"
+                            type="text">删除</el-button>
                     </template>
                 </el-table-column>
             </el-table>
 
             <span slot="footer" class="dialog-footer">
 
-                <el-button @click="tableSortQuery" :loading="$store.state.fetchingData">确定</el-button>
+                <el-button @click="tableSortQuery"
+                    :loading="$store.state.fetchingData">确定</el-button>
             </span>
         </el-dialog>
 
@@ -274,12 +265,12 @@
     </div>
 </template>
 <script>
-import { mapState } from 'vuex';
-import { format } from 'date-fns';
-import zh from 'date-fns/locale/zh_cn';
+import { mapState } from "vuex";
+import { format } from "date-fns";
+import zh from "date-fns/locale/zh_cn";
 
 export default {
-    name: 'HomeAds',
+    name: "HomeAds",
     created() {
         this.getData();
     },
@@ -290,160 +281,160 @@ export default {
             currentPage: 1,
             pageSize: 20,
             tableData: [],
-            filter1: '',
-            filter2: '',
+            filter1: "",
+            filter2: "",
             tableColumns: [
                 {
-                    label: 'ID',
-                    value: 'id',
-                    show: true,
+                    label: "ID",
+                    value: "id",
+                    show: true
                 },
                 {
-                    label: '用户Id',
-                    value: 'userId',
-                    show: true,
+                    label: "用户Id",
+                    value: "userId",
+                    show: true
                 },
                 {
-                    label: '小程序',
-                    value: 'miniId',
-                    show: true,
+                    label: "小程序",
+                    value: "miniId",
+                    show: true
                 },
                 {
-                    label: '店铺',
-                    value: 'storeId',
-                    show: true,
+                    label: "店铺",
+                    value: "storeId",
+                    show: true
                 },
                 {
-                    label: '状态',
-                    value: 'statusFlag',
-                    show: true,
+                    label: "状态",
+                    value: "statusFlag",
+                    show: true
                 },
                 {
-                    label: '类型',
-                    value: 'typeFlag',
-                    show: true,
+                    label: "类型",
+                    value: "typeFlag",
+                    show: true
                 },
                 {
-                    label: '标题',
-                    value: 'title',
-                    show: true,
+                    label: "标题",
+                    value: "title",
+                    show: true
                 },
                 {
-                    label: '子标题',
-                    value: 'subtitle',
-                    show: true,
+                    label: "子标题",
+                    value: "subtitle",
+                    show: true
                 },
                 {
-                    label: '图片1',
-                    value: 'imageUrl',
-                    show: true,
+                    label: "图片1",
+                    value: "imageUrl",
+                    show: true
                 },
                 {
-                    label: '商品1',
-                    value: 'productId',
-                    show: true,
+                    label: "商品1",
+                    value: "productId",
+                    show: true
                 },
                 {
-                    label: '备注',
-                    value: 'remark',
-                    show: true,
+                    label: "备注",
+                    value: "remark",
+                    show: true
                 },
                 {
-                    label: '排序',
-                    value: 'rank',
-                    show: true,
+                    label: "排序",
+                    value: "rank",
+                    show: true
                 },
                 {
-                    label: '图片2',
-                    value: 'image2Url',
-                    show: true,
+                    label: "图片2",
+                    value: "image2Url",
+                    show: true
                 },
                 {
-                    label: '商品2',
-                    value: 'product2Id',
-                    show: true,
-                },
+                    label: "商品2",
+                    value: "product2Id",
+                    show: true
+                }
             ],
             multipleMode: false,
             showAdvancedQueryDialog: false,
             advancedQueryFields: [],
             showTableSortDialog: false,
             tableSortFields: [],
-            searchMethods: ['=', '!=', '>', '>=', '<', '<=', 'like'],
+            searchMethods: ["=", "!=", ">", ">=", "<", "<=", "like"],
             advancedQueryColumns: [
                 {
-                    label: 'ID',
-                    value: 'id',
+                    label: "ID",
+                    value: "id"
                 },
                 {
-                    label: '用户Id',
-                    value: 'user_id',
+                    label: "用户Id",
+                    value: "user_id"
                 },
                 {
-                    label: '小程序',
-                    value: 'mini_id',
+                    label: "小程序",
+                    value: "mini_id"
                 },
                 {
-                    label: '店铺',
-                    value: 'store_id',
+                    label: "店铺",
+                    value: "store_id"
                 },
                 {
-                    label: '状态',
-                    value: 'status_flag',
+                    label: "状态",
+                    value: "status_flag"
                 },
                 {
-                    label: '类型',
-                    value: 'type_flag',
+                    label: "类型",
+                    value: "type_flag"
                 },
                 {
-                    label: '标题',
-                    value: 'title',
+                    label: "标题",
+                    value: "title"
                 },
                 {
-                    label: '子标题',
-                    value: 'subtitle',
+                    label: "子标题",
+                    value: "subtitle"
                 },
                 {
-                    label: '图片1',
-                    value: 'image_url',
+                    label: "图片1",
+                    value: "image_url"
                 },
                 {
-                    label: '商品1',
-                    value: 'product_id',
+                    label: "商品1",
+                    value: "product_id"
                 },
                 {
-                    label: '备注',
-                    value: 'remark',
+                    label: "备注",
+                    value: "remark"
                 },
                 {
-                    label: '排序',
-                    value: 'rank',
+                    label: "排序",
+                    value: "rank"
                 },
                 {
-                    label: '图片2',
-                    value: 'image2_url',
+                    label: "图片2",
+                    value: "image2_url"
                 },
                 {
-                    label: '商品2',
-                    value: 'product2_id',
-                },
+                    label: "商品2",
+                    value: "product2_id"
+                }
             ],
-            advancedQuerySearchKey: '',
-            orderByStr: '',
-            imgSrc: '',
-            imageDialogVisible: false,
+            advancedQuerySearchKey: "",
+            orderByStr: "",
+            imgSrc: "",
+            imageDialogVisible: false
         };
     },
     computed: {
-        ...mapState(['tableHeight','storeId']),
+        ...mapState(["tableHeight", "storeId"]),
         selection() {
             return this.$refs.table.selection.map(i => i.id);
-        },
+        }
     },
     watch: {
         storeId() {
             this.searchData();
-        },
+        }
     },
     methods: {
         pageSizeChange(size) {
@@ -462,18 +453,18 @@ export default {
                 searchKey: this.filter1,
                 advancedQuery: this.advancedQuerySearchKey,
                 orderByStr: this.orderByStr,
-                storeId: this.storeId || '',
+                storeId: this.storeId || ""
             };
 
             if (this.$route.query.column) {
                 var tempColumn = this.$route.query.column;
-                data[tempColumn.split(',')[1]] = tempColumn.split(',')[0];
+                data[tempColumn.split(",")[1]] = tempColumn.split(",")[0];
             }
 
             this.$http
                 .get({
-                    url: '/homeAd/page',
-                    data: data,
+                    url: "/homeAd/page",
+                    data: data
                 })
                 .then(res => {
                     if (res.success) {
@@ -494,28 +485,28 @@ export default {
         },
         editRow(row) {
             this.$router.push({
-                path: '/homeAd',
+                path: "/homeAd",
                 query: {
                     id: row.id,
-                    column: this.$route.query.column,
-                },
+                    column: this.$route.query.column
+                }
             });
         },
         operation1() {
             this.$notify({
-                title: '提示',
-                message: this.selection,
+                title: "提示",
+                message: this.selection
             });
         },
         operation2() {
-            this.$message('操作2');
+            this.$message("操作2");
         },
         addField() {
             this.advancedQueryFields.push({
-                link: 'AND',
-                name: '',
-                searchMethod: '=',
-                value: '',
+                link: "AND",
+                name: "",
+                searchMethod: "=",
+                value: ""
             });
         },
         removeField(i) {
@@ -524,7 +515,7 @@ export default {
             }
         },
         advancedQuery() {
-            this.advancedQuerySearchKey = '';
+            this.advancedQuerySearchKey = "";
 
             if (this.advancedQueryFields.length > 0) {
                 var templist = [];
@@ -538,18 +529,18 @@ export default {
                     ) {
                         var tempItem =
                             item.link +
-                            '_,' +
+                            "_," +
                             item.name +
-                            '_,' +
+                            "_," +
                             item.searchMethod +
-                            '_,' +
+                            "_," +
                             item.value;
                         templist.push(tempItem);
                     }
                 });
 
                 if (templist.length > 0) {
-                    this.advancedQuerySearchKey = templist.join('_;');
+                    this.advancedQuerySearchKey = templist.join("_;");
                 }
             }
 
@@ -558,8 +549,8 @@ export default {
         },
         addSortField() {
             this.tableSortFields.push({
-                name: '',
-                order: 'asc',
+                name: "",
+                order: "asc"
             });
         },
         removeSortField(i) {
@@ -568,20 +559,20 @@ export default {
             }
         },
         tableSortQuery() {
-            this.orderByStr = '';
+            this.orderByStr = "";
 
             if (this.tableSortFields.length > 0) {
                 var templist = [];
 
                 this.tableSortFields.forEach(item => {
                     if (item.name && item.order) {
-                        var tempItem = item.name + '_,' + item.order;
+                        var tempItem = item.name + "_," + item.order;
                         templist.push(tempItem);
                     }
                 });
 
                 if (templist.length > 0) {
-                    this.orderByStr = templist.join('_;');
+                    this.orderByStr = templist.join("_;");
                 }
             }
 
@@ -591,11 +582,11 @@ export default {
         exportExcel() {
             window.location.href =
                 this.$baseUrl +
-                '/homeAd/exportExcel?searchKey=' +
+                "/homeAd/exportExcel?searchKey=" +
                 this.filter1 +
-                '&advancedQuery=' +
+                "&advancedQuery=" +
                 this.advancedQuerySearchKey +
-                '&orderByStr=' +
+                "&orderByStr=" +
                 this.orderByStr;
         },
         searchData() {
@@ -603,42 +594,42 @@ export default {
             this.getData();
         },
         deleteRow(row) {
-            this.$alert('删除将无法恢复，确认要删除么？', '警告', {
-                type: 'error',
+            this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+                type: "error"
             })
                 .then(() => {
                     return this.$http.post({
-                        url: '/homeAd/del',
-                        data: { id: row.id },
+                        url: "/homeAd/del",
+                        data: { id: row.id }
                     });
                 })
                 .then(() => {
-                    this.$message.success('删除成功');
+                    this.$message.success("删除成功");
                     this.getData();
                 })
                 .catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
+                    if (action === "cancel") {
+                        this.$message.info("删除取消");
                     } else {
-                        this.$message.error('删除失败');
+                        this.$message.error("删除失败");
                     }
                 });
         },
         DateTimeFormatter(row, column, cellValue) {
             if (cellValue) {
-                return format(cellValue, 'YYYY/MM/DD HH:mm', { locale: zh });
+                return format(cellValue, "YYYY/MM/DD HH:mm", { locale: zh });
             }
         },
         DateFormatter(row, column, cellValue) {
             if (cellValue) {
-                return format(cellValue, 'YYYY/MM/DD', { locale: zh });
+                return format(cellValue, "YYYY/MM/DD", { locale: zh });
             }
         },
         showImg(img) {
             this.imgSrc = img;
             this.imageDialogVisible = true;
-        },
-    },
+        }
+    }
 };
 </script>
 <style lang="less" scoped>

src/main/vue/src/pages/HomeProductType.vue

@@ -1,125 +1,134 @@
 <template>
     <div>
-        <el-form :model="formData" :rules="rules" ref="form" label-width="120px" label-position="right" size="small"
-                 style="max-width: 500px;">
-          
+        <el-form :model="formData" :rules="rules" ref="form" label-width="120px"
+            label-position="right" size="small" style="max-width: 500px;">
+
             <el-form-item prop="storeId" label="店铺">
-                <el-input v-model="formData.storeId" :disabled="'storeId'==subColumn"></el-input>
+                <el-input v-model="formData.storeId"
+                    :disabled="'storeId'==subColumn"></el-input>
             </el-form-item>
             <el-form-item prop="rank" label="排序">
-                <el-input type="number" v-model="formData.rank" :disabled="'rank'==subColumn"></el-input>
+                <el-input type="number" v-model="formData.rank"
+                    :disabled="'rank'==subColumn"></el-input>
             </el-form-item>
             <el-form-item prop="typeName" label="名称">
-                <el-input v-model="formData.typeName" :disabled="'typeName'==subColumn"></el-input>
+                <el-input v-model="formData.typeName"
+                    :disabled="'typeName'==subColumn"></el-input>
             </el-form-item>
             <el-form-item prop="remark" label="备注">
-                <el-input v-model="formData.remark" :disabled="'remark'==subColumn"></el-input>
+                <el-input v-model="formData.remark"
+                    :disabled="'remark'==subColumn"></el-input>
             </el-form-item>
             <el-form-item prop="typeFlag" label="类型">
                 <template>
-                    <el-select v-model="formData.typeFlag" clearable  placeholder="请选择" :disabled="'typeFlag'==subColumn">
-                        <el-option
-                            v-for="item in typeFlagOptions"
-                            :key="item.value"
-                            :label="item.label"
+                    <el-select v-model="formData.typeFlag" clearable
+                        placeholder="请选择" :disabled="'typeFlag'==subColumn">
+                        <el-option v-for="item in typeFlagOptions"
+                            :key="item.value" :label="item.label"
                             :value="item.value">
                         </el-option>
                     </el-select>
                 </template>
             </el-form-item>
 
-              <el-form-item prop="userId" label="用户">
-                <el-input v-model="formData.userId" :disabled="'userId'==subColumn"></el-input>
+            <el-form-item prop="userId" label="用户">
+                <el-input v-model="formData.userId"
+                    :disabled="'userId'==subColumn"></el-input>
             </el-form-item>
             <el-form-item prop="miniId" label="小程序">
-                <el-input v-model="formData.miniId" :disabled="'miniId'==subColumn"></el-input>
+                <el-input v-model="formData.miniId"
+                    :disabled="'miniId'==subColumn"></el-input>
             </el-form-item>
             <el-form-item>
-                <el-button @click="onSave" :loading="$store.state.fetchingData" type="primary">保存</el-button>
-                <el-button @click="onDelete" v-if="formData.id" type="danger">删除</el-button>
+                <el-button @click="onSave" :loading="$store.state.fetchingData"
+                    type="primary">保存</el-button>
+                <el-button @click="onDelete" v-if="formData.id" type="danger">删除
+                </el-button>
                 <el-button @click="$router.go(-1)">取消</el-button>
             </el-form-item>
         </el-form>
     </div>
 </template>
 <script>
-    import formValidator from '../formValidator'
-    import { mapState } from 'vuex'
-    import { format } from 'date-fns'
-    import zh from 'date-fns/locale/zh_cn'
-
-    export default {
-        name: 'HomeProductType',
-        created() {
+import formValidator from "../formValidator";
+import { mapState } from "vuex";
+import { format } from "date-fns";
+import zh from "date-fns/locale/zh_cn";
 
-            if (this.$route.query.column) {
-                this.subColumn = this.$route.query.column.split(',')[1];
-                this.subValue = this.$route.query.column.split(',')[0];
-            }
+export default {
+    name: "HomeProductType",
+    created() {
+        if (this.$route.query.column) {
+            this.subColumn = this.$route.query.column.split(",")[1];
+            this.subValue = this.$route.query.column.split(",")[0];
+        }
 
-            if (this.$route.query.id) {
-                this.$http.get({
-                    url: '/homeProductType/getOne',
+        if (this.$route.query.id) {
+            this.$http
+                .get({
+                    url: "/homeProductType/getOne",
                     data: {
                         id: this.$route.query.id
                     }
-                }).then(res => {
+                })
+                .then(res => {
                     if (res.success) {
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            this.formData = res.data;
+                        this.formData = res.data;
                         if (this.$route.query.column) {
                             this.formData[this.subColumn] = this.subValue;
                         }
                     }
-                })
-            } else {
-                if (this.$route.query.column) {
-                    this.formData[this.subColumn] = this.subValue;
-                }
+                });
+        } else {
+            if (this.$route.query.column) {
+                this.formData[this.subColumn] = this.subValue;
             }
-
-                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                },
-        data() {
-            return {
-                saving: false,
-                formData: {
-                },
-                rules: {
+        }
+    },
+    data() {
+        return {
+            saving: false,
+            formData: {},
+            rules: {},
+            typeFlagOptions: [
+                {
+                    value: 0,
+                    label: "小图商品"
                 },
-            typeFlagOptions:[{
-          value: 0,
-          label: '小图商品'
-        }, {
-          value:1,
-          label: '大图商品'
-        }],
-                subColumn: '',
-                subValue: '',
-            }
-        },
-        computed: {
-            ...mapState(['userInfo']),
+                {
+                    value: 1,
+                    label: "大图商品"
+                }
+            ],
+            subColumn: "",
+            subValue: ""
+        };
+    },
+    computed: {
+        ...mapState(["userInfo"])
+    },
+    methods: {
+        onSave() {
+            this.$refs.form.validate(valid => {
+                if (valid) {
+                    this.logicalValidate();
+                } else {
+                    return false;
+                }
+            });
         },
-        methods: {
-            onSave() {
-                this.$refs.form.validate((valid) => {
-                    if (valid) {
-                        this.logicalValidate();
-                    } else {
-                        return false;
-                    }
-                });
-            },
-            logicalValidate() {
-                let logicalData = {
-                };
+        logicalValidate() {
+            let logicalData = {};
 
-                if (JSON.stringify(logicalData) == '{}') {
-                    this.submit();
-                } else {
-                    this.$http.get({
-                        url: '/homeProductType/getOne',
+            if (JSON.stringify(logicalData) == "{}") {
+                this.submit();
+            } else {
+                this.$http
+                    .get({
+                        url: "/homeProductType/getOne",
                         data: logicalData
-                    }).then(res => {
+                    })
+                    .then(res => {
                         if (res.success) {
                             let logicalFlag = true;
                             if (res.data) {
@@ -135,50 +144,61 @@
                             if (logicalFlag) {
                                 this.submit();
                             } else {
-                                this.$message.warning('逻辑关键字:'+''+'验证失败')
+                                this.$message.warning(
+                                    "逻辑关键字:" + "" + "验证失败"
+                                );
                             }
-
                         } else {
-                            this.$message.warning('逻辑关键字:'+''+'验证失败')
+                            this.$message.warning(
+                                "逻辑关键字:" + "" + "验证失败"
+                            );
                         }
                     });
-                }
-            },
-            submit() {
-                let data = {...this.formData};
+            }
+        },
+        submit() {
+            let data = { ...this.formData };
 
-                                                                                                                                                                                                                                
-                this.$http.post({
-                    url: this.formData.id ? '/homeProductType/update' : '/homeProductType/save',
+            this.$http
+                .post({
+                    url: this.formData.id
+                        ? "/homeProductType/update"
+                        : "/homeProductType/save",
                     data: data
-                }).then(res => {
+                })
+                .then(res => {
                     if (res.success) {
-                        this.$message.success('成功');
+                        this.$message.success("成功");
                         this.$router.go(-1);
                     } else {
-                        this.$message.warning('失败')
+                        this.$message.warning("失败");
                     }
                 });
-            },
-            onDelete() {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' }).then(() => {
+        },
+        onDelete() {
+            this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+                type: "error"
+            })
+                .then(() => {
                     return this.$http.post({
-                        url: '/homeProductType/del',
+                        url: "/homeProductType/del",
                         data: { id: this.formData.id }
-                    })
-                }).then(() => {
-                    this.$message.success('删除成功');
+                    });
+                })
+                .then(() => {
+                    this.$message.success("删除成功");
                     this.$router.go(-1);
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
+                })
+                .catch(action => {
+                    if (action === "cancel") {
+                        this.$message.info("删除取消");
                     } else {
-                        this.$message.error('删除失败');
+                        this.$message.error("删除失败");
                     }
-                })
-            },
+                });
         }
     }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/pages/HomeProductTypes.vue

@@ -2,145 +2,171 @@
     <div>
         <div class="filters-container">
 
-            <el-input placeholder="关键字" size="small" v-model="filter1" clearable class="filter-item"></el-input>
-            <el-button @click="searchData" type="primary" size="small" icon="el-icon-search" class="filter-item">搜索
+            <el-input placeholder="关键字" size="small" v-model="filter1" clearable
+                class="filter-item"></el-input>
+            <el-button @click="searchData" type="primary" size="small"
+                icon="el-icon-search" class="filter-item">搜索
             </el-button>
-            <el-button @click="showAdvancedQueryDialog = !showAdvancedQueryDialog" type="primary" size="small"
-                       icon="el-icon-search" class="filter-item">高级查询
+            <el-button
+                @click="showAdvancedQueryDialog = !showAdvancedQueryDialog"
+                type="primary" size="small" icon="el-icon-search"
+                class="filter-item">高级查询
             </el-button>
-            <el-button @click="showTableSortDialog = !showTableSortDialog" type="primary" size="small"
-                       icon="el-icon-sort" class="filter-item">排序
+            <el-button @click="showTableSortDialog = !showTableSortDialog"
+                type="primary" size="small" icon="el-icon-sort"
+                class="filter-item">排序
             </el-button>
-            <el-button @click="$router.push({path:'/homeProductType',query:{column:$route.query.column}})" type="primary"
-                       size="small" icon="el-icon-edit"
-                       class="filter-item">添加
+            <el-button
+                @click="$router.push({path:'/homeProductType',query:{column:$route.query.column}})"
+                type="primary" size="small" icon="el-icon-edit"
+                class="filter-item">添加
             </el-button>
-            <el-button @click="exportExcel" type="primary" size="small" icon="el-icon-share" class="filter-item">导出EXCEL
+            <el-button @click="exportExcel" type="primary" size="small"
+                icon="el-icon-share" class="filter-item">导出EXCEL
             </el-button>
-            <el-dropdown trigger="click" size="medium" class="table-column-filter">
+            <el-dropdown trigger="click" size="medium"
+                class="table-column-filter">
                 <span>
                     筛选数据<i class="el-icon-arrow-down el-icon--right"></i>
                 </span>
-                <el-dropdown-menu slot="dropdown" class="table-column-filter-wrapper">
-                    <el-checkbox v-for="item in tableColumns" :key="item.value" v-model="item.show">{{item.label}}
+                <el-dropdown-menu slot="dropdown"
+                    class="table-column-filter-wrapper">
+                    <el-checkbox v-for="item in tableColumns" :key="item.value"
+                        v-model="item.show">{{item.label}}
                     </el-checkbox>
                 </el-dropdown-menu>
             </el-dropdown>
         </div>
-        <el-table
-                  :data="tableData"
-                  :height="tableHeight"
-                  row-key="id"
-                  ref="table">
-            <el-table-column
-                             v-if="multipleMode"
-                             align="center"
-                             type="selection"
-                             width="50">
+        <el-table :data="tableData" :height="tableHeight" row-key="id"
+            ref="table">
+            <el-table-column v-if="multipleMode" align="center" type="selection"
+                width="50">
             </el-table-column>
-            <el-table-column
-                             type="index"
-                             min-width="50"
-                             align="center">
+
+            <el-table-column align="center" type="expand" width="50">
+                <template slot-scope="props">
+                    <el-table :data="props.row.homeProductList" row-key="id"
+                        ref="table">
+                        <el-table-column type="index" min-width="50"
+                            align="center">
+                        </el-table-column>
+
+                        <!-- <el-table-column  prop="id"
+                            label="ID" min-width="100">
+                        </el-table-column> -->
+
+                        <!-- <el-table-column v-if="isColumnShow('typeId')"
+                            prop="typeId" label="类型" min-width="100">
+                            <template slot-scope="{row}">
+                                {{row.typeFlag==1?'小图商品':'大图商品'}}
+                            </template>
+                        </el-table-column> -->
+
+                        <el-table-column prop="productId" label="商品"
+                            min-width="100">
+                        </el-table-column>
+
+                        <el-table-column prop="rank" label="排序" min-width="100">
+                        </el-table-column>
+                        <!-- <el-table-column prop="storeId" label="店铺"
+                            min-width="100">
+                        </el-table-column> -->
+
+                        <el-table-column label="操作" align="center"
+                            min-width="150">
+                            <template slot-scope="scope">
+                                <el-button @click="editRowProduct(scope.row)"
+                                    type="primary" size="mini" plain>编辑
+                                </el-button>
+                                <el-button @click="deleteRowProduct(scope.row)"
+                                    type="danger" size="mini" plain>删除
+                                </el-button>
+                            </template>
+                        </el-table-column>
+
+                    </el-table>
+                </template>
+            </el-table-column>
+            <el-table-column type="index" min-width="50" align="center">
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('id')"
-                             prop="id"
-                             label="ID"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('id')" prop="id" label="ID"
+                min-width="100">
             </el-table-column>
-            <el-table-column
-                             v-if="isColumnShow('typeFlag')"
-                             prop="typeFlag"
-                             label="类型"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('typeFlag')" prop="typeFlag"
+                label="类型" min-width="100">
                 <template slot-scope="{row}">
                     {{row.typeFlag==0?'小图商品':'大图商品'}}
                 </template>
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('storeId')"
-                             prop="storeId"
-                             label="店铺"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('storeId')" prop="storeId"
+                label="店铺" min-width="100">
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('rank')"
-                             prop="rank"
-                             label="排序"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('rank')" prop="rank" label="排序"
+                min-width="100">
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('typeName')"
-                             prop="typeName"
-                             label="名称"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('typeName')" prop="typeName"
+                label="名称" min-width="100">
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('remark')"
-                             prop="remark"
-                             label="备注"
-                             min-width="100">
-            </el-table-column>
+            <!-- <el-table-column v-if="isColumnShow('remark')" prop="remark"
+                label="备注" min-width="100">
+            </el-table-column> -->
 
-            <el-table-column
-                             v-if="isColumnShow('userId')"
-                             prop="userId"
-                             label="用户"
-                             min-width="100">
+            <!-- <el-table-column v-if="isColumnShow('userId')" prop="userId"
+                label="用户" min-width="100">
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('miniId')"
-                             prop="miniId"
-                             label="小程序"
-                             min-width="100">
-            </el-table-column>
-            <el-table-column
-                             label="操作"
-                             align="center"
-                             fixed="right"
-                             min-width="200">
+            <el-table-column v-if="isColumnShow('miniId')" prop="miniId"
+                label="小程序" min-width="100"> -->
+            <!-- </el-table-column> -->
+            <el-table-column label="操作" align="center" min-width="200">
                 <template slot-scope="scope">
-                    <el-button @click="$router.push({path:'/HomeProducts',query:{column:scope.row.id+',typeId'}})" type="primary" size="small" plain>商品
+                    <el-button @click="homeProductInfo={
+                            storeId:scope.row.storeId,
+                            typeId:scope.row.id
+                        },productDialogVisible=true" type="success"
+                        size="small" plain>添加商品
                     </el-button>
-                    <el-button @click="editRow(scope.row)" type="primary" size="mini" plain>编辑</el-button>
-                    <el-button @click="deleteRow(scope.row)" type="danger" size="mini" plain>删除</el-button>
+                    <el-button @click="editRow(scope.row)" type="primary"
+                        size="mini" plain>编辑</el-button>
+                    <el-button @click="deleteRow(scope.row)" type="danger"
+                        size="mini" plain>删除</el-button>
                 </template>
             </el-table-column>
         </el-table>
         <div class="pagination-wrapper">
             <div class="multiple-mode-wrapper" v-if="0">
-                <el-button size="small" v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+                <el-button size="small" v-if="!multipleMode"
+                    @click="toggleMultipleMode(true)">批量编辑</el-button>
                 <el-button-group v-else>
-                    <el-button size="small" @click="operation1">批量操作1</el-button>
-                    <el-button size="small" @click="operation2">批量操作2</el-button>
-                    <el-button size="small" @click="toggleMultipleMode(false)">取消</el-button>
+                    <el-button size="small" @click="operation1">批量操作1
+                    </el-button>
+                    <el-button size="small" @click="operation2">批量操作2
+                    </el-button>
+                    <el-button size="small" @click="toggleMultipleMode(false)">
+                        取消</el-button>
                 </el-button-group>
             </div>
-            <el-pagination
-                           background
-                           @size-change="pageSizeChange"
-                           @current-change="currentPageChange"
-                           :current-page="currentPage"
-                           :page-sizes="[10, 20, 30, 40, 50]"
-                           :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalNumber">
+            <el-pagination background @size-change="pageSizeChange"
+                @current-change="currentPageChange" :current-page="currentPage"
+                :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
+                layout="total, sizes, prev, pager, next, jumper"
+                :total="totalNumber">
             </el-pagination>
         </div>
         <el-dialog title="高级查询" :visible.sync="showAdvancedQueryDialog">
-            <el-button @click="addField" type="text" icon="el-icon-plus">添加</el-button>
+            <el-button @click="addField" type="text" icon="el-icon-plus">添加
+            </el-button>
             <el-table :data="advancedQueryFields">
 
                 <el-table-column prop="link" label="链接符" align="center">
                     <template slot-scope="{row}">
-                        <el-select placeholder="链接" size="small" v-model="row.link" class="filter-item">
+                        <el-select placeholder="链接" size="small"
+                            v-model="row.link" class="filter-item">
                             <el-option label="AND" value="AND">
                             </el-option>
                             <el-option label="OR" value="OR">
@@ -152,16 +178,19 @@
                     <template slot-scope="{row}">
                         <el-select v-model="row.name">
 
-                            <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value"
-                                       :key="item.value"></el-option>
+                            <el-option v-for="item in advancedQueryColumns"
+                                :label="item.label" :value="item.value"
+                                :key="item.value"></el-option>
                         </el-select>
                     </template>
                 </el-table-column>
-                <el-table-column prop="searchMethod" label="搜索方式" width="150" align="center">
+                <el-table-column prop="searchMethod" label="搜索方式" width="150"
+                    align="center">
                     <template slot-scope="{row}">
                         <el-select v-model="row.searchMethod">
-                            <el-option v-for="item in searchMethods" :label="item" :value="item"
-                                       :key="item"></el-option>
+                            <el-option v-for="item in searchMethods"
+                                :label="item" :value="item" :key="item">
+                            </el-option>
                         </el-select>
                     </template>
                 </el-table-column>
@@ -172,27 +201,31 @@
                 </el-table-column>
                 <el-table-column width="60" align="center">
                     <template slot-scope="{ row, column, $index }">
-                        <el-button @click="removeField($index)" size="small" type="text">删除</el-button>
+                        <el-button @click="removeField($index)" size="small"
+                            type="text">删除</el-button>
                     </template>
                 </el-table-column>
             </el-table>
 
             <span slot="footer" class="dialog-footer">
 
-                <el-button @click="advancedQuery" :loading="$store.state.fetchingData">确定</el-button>
+                <el-button @click="advancedQuery"
+                    :loading="$store.state.fetchingData">确定</el-button>
             </span>
         </el-dialog>
 
         <el-dialog title="排序" :visible.sync="showTableSortDialog">
-            <el-button @click="addSortField" type="text" icon="el-icon-plus">添加</el-button>
+            <el-button @click="addSortField" type="text" icon="el-icon-plus">添加
+            </el-button>
             <el-table :data="tableSortFields">
 
                 <el-table-column prop="name" label="字段" align="center">
                     <template slot-scope="{row}">
                         <el-select v-model="row.name">
 
-                            <el-option v-for="item in advancedQueryColumns" :label="item.label" :value="item.value"
-                                       :key="item.value"></el-option>
+                            <el-option v-for="item in advancedQueryColumns"
+                                :label="item.label" :value="item.value"
+                                :key="item.value"></el-option>
                         </el-select>
                     </template>
                 </el-table-column>
@@ -208,14 +241,16 @@
                 </el-table-column>
                 <el-table-column width="60" align="center">
                     <template slot-scope="{ row, column, $index }">
-                        <el-button @click="removeSortField($index)" size="small" type="text">删除</el-button>
+                        <el-button @click="removeSortField($index)" size="small"
+                            type="text">删除</el-button>
                     </template>
                 </el-table-column>
             </el-table>
 
             <span slot="footer" class="dialog-footer">
 
-                <el-button @click="tableSortQuery" :loading="$store.state.fetchingData">确定</el-button>
+                <el-button @click="tableSortQuery"
+                    :loading="$store.state.fetchingData">确定</el-button>
             </span>
         </el-dialog>
 
@@ -223,127 +258,160 @@
             <img width="100%" :src="imgSrc" alt="">
         </el-dialog>
 
+        <el-dialog title="编辑商品" :visible.sync="productDialogVisible">
+            <HomeProduct :homeProductInfo='homeProductInfo'
+                @close='productClose'></HomeProduct>
+        </el-dialog>
+
     </div>
 </template>
 <script>
-import { mapState } from 'vuex';
-import { format } from 'date-fns';
-import zh from 'date-fns/locale/zh_cn';
+import { mapState } from "vuex";
+import { format } from "date-fns";
+import zh from "date-fns/locale/zh_cn";
+import HomeProduct from "../components/HomeProduct";
 
 export default {
-    name: 'HomeProductTypes',
+    name: "HomeProductTypes",
     created() {
         this.getData();
     },
     data() {
         return {
+            homeProductInfo: {},
             totalNumber: 0,
             totalPage: 10,
             currentPage: 1,
             pageSize: 20,
             tableData: [],
-            filter1: '',
-            filter2: '',
+            filter1: "",
+            filter2: "",
             tableColumns: [
                 {
-                    label: 'ID',
-                    value: 'id',
-                    show: true,
+                    label: "ID",
+                    value: "id",
+                    show: true
                 },
                 {
-                    label: '用户',
-                    value: 'userId',
-                    show: true,
+                    label: "用户",
+                    value: "userId",
+                    show: true
                 },
                 {
-                    label: '小程序',
-                    value: 'miniId',
-                    show: true,
+                    label: "小程序",
+                    value: "miniId",
+                    show: true
                 },
                 {
-                    label: '店铺',
-                    value: 'storeId',
-                    show: true,
+                    label: "店铺",
+                    value: "storeId",
+                    show: true
                 },
                 {
-                    label: '排序',
-                    value: 'rank',
-                    show: true,
+                    label: "排序",
+                    value: "rank",
+                    show: true
                 },
                 {
-                    label: '名称',
-                    value: 'typeName',
-                    show: true,
+                    label: "名称",
+                    value: "typeName",
+                    show: true
                 },
                 {
-                    label: '备注',
-                    value: 'remark',
-                    show: true,
+                    label: "备注",
+                    value: "remark",
+                    show: true
                 },
                 {
-                    label: '类型',
-                    value: 'typeFlag',
-                    show: true,
-                },
+                    label: "类型",
+                    value: "typeFlag",
+                    show: true
+                }
             ],
             multipleMode: false,
             showAdvancedQueryDialog: false,
             advancedQueryFields: [],
             showTableSortDialog: false,
             tableSortFields: [],
-            searchMethods: ['=', '!=', '>', '>=', '<', '<=', 'like'],
+            searchMethods: ["=", "!=", ">", ">=", "<", "<=", "like"],
             advancedQueryColumns: [
                 {
-                    label: 'ID',
-                    value: 'id',
+                    label: "ID",
+                    value: "id"
                 },
                 {
-                    label: '用户',
-                    value: 'user_id',
+                    label: "用户",
+                    value: "user_id"
                 },
                 {
-                    label: '小程序',
-                    value: 'mini_id',
+                    label: "小程序",
+                    value: "mini_id"
                 },
                 {
-                    label: '店铺',
-                    value: 'store_id',
+                    label: "店铺",
+                    value: "store_id"
                 },
                 {
-                    label: '排序',
-                    value: 'rank',
+                    label: "排序",
+                    value: "rank"
                 },
                 {
-                    label: '名称',
-                    value: 'type_name',
+                    label: "名称",
+                    value: "type_name"
                 },
                 {
-                    label: '备注',
-                    value: 'remark',
+                    label: "备注",
+                    value: "remark"
                 },
                 {
-                    label: '类型',
-                    value: 'type_flag',
-                },
+                    label: "类型",
+                    value: "type_flag"
+                }
             ],
-            advancedQuerySearchKey: '',
-            orderByStr: '',
-            imgSrc: '',
+            advancedQuerySearchKey: "",
+            orderByStr: "",
+            imgSrc: "",
             imageDialogVisible: false,
+            productDialogVisible: false,
+            typeId: 0
         };
     },
     computed: {
-        ...mapState(['tableHeight','storeId']),
+        ...mapState(["tableHeight", "storeId"]),
         selection() {
             return this.$refs.table.selection.map(i => i.id);
-        },
+        }
     },
     watch: {
         storeId() {
             this.searchData();
-        },
+        }
     },
     methods: {
+        productClose() {
+            this.productDialogVisible = false;
+            this.getData();
+        },
+        editRowProduct(row) {
+            this.homeProductInfo = row;
+            this.productDialogVisible = true;
+        },
+        deleteRowProduct(row) {
+            this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+                type: "error"
+            })
+                .then(() => {
+                    return this.$http.post({
+                        url: "/homeProduct/del",
+                        data: { id: row.id }
+                    });
+                })
+                .then(() => {
+                    this.$message.success("删除成功");
+                    this.getData();
+                })
+                .catch(action => {});
+        },
         pageSizeChange(size) {
             this.currentPage = 1;
             this.pageSize = size;
@@ -360,18 +428,18 @@ export default {
                 searchKey: this.filter1,
                 advancedQuery: this.advancedQuerySearchKey,
                 orderByStr: this.orderByStr,
-                storeId: this.storeId || '',
+                storeId: this.storeId || ""
             };
 
             if (this.$route.query.column) {
                 var tempColumn = this.$route.query.column;
-                data[tempColumn.split(',')[1]] = tempColumn.split(',')[0];
+                data[tempColumn.split(",")[1]] = tempColumn.split(",")[0];
             }
 
             this.$http
                 .get({
-                    url: '/homeProductType/page',
-                    data: data,
+                    url: "/homeProductType/page",
+                    data: data
                 })
                 .then(res => {
                     if (res.success) {
@@ -392,28 +460,28 @@ export default {
         },
         editRow(row) {
             this.$router.push({
-                path: '/homeProductType',
+                path: "/homeProductType",
                 query: {
                     id: row.id,
-                    column: this.$route.query.column,
-                },
+                    column: this.$route.query.column
+                }
             });
         },
         operation1() {
             this.$notify({
-                title: '提示',
-                message: this.selection,
+                title: "提示",
+                message: this.selection
             });
         },
         operation2() {
-            this.$message('操作2');
+            this.$message("操作2");
         },
         addField() {
             this.advancedQueryFields.push({
-                link: 'AND',
-                name: '',
-                searchMethod: '=',
-                value: '',
+                link: "AND",
+                name: "",
+                searchMethod: "=",
+                value: ""
             });
         },
         removeField(i) {
@@ -422,7 +490,7 @@ export default {
             }
         },
         advancedQuery() {
-            this.advancedQuerySearchKey = '';
+            this.advancedQuerySearchKey = "";
 
             if (this.advancedQueryFields.length > 0) {
                 var templist = [];
@@ -436,18 +504,18 @@ export default {
                     ) {
                         var tempItem =
                             item.link +
-                            '_,' +
+                            "_," +
                             item.name +
-                            '_,' +
+                            "_," +
                             item.searchMethod +
-                            '_,' +
+                            "_," +
                             item.value;
                         templist.push(tempItem);
                     }
                 });
 
                 if (templist.length > 0) {
-                    this.advancedQuerySearchKey = templist.join('_;');
+                    this.advancedQuerySearchKey = templist.join("_;");
                 }
             }
 
@@ -456,8 +524,8 @@ export default {
         },
         addSortField() {
             this.tableSortFields.push({
-                name: '',
-                order: 'asc',
+                name: "",
+                order: "asc"
             });
         },
         removeSortField(i) {
@@ -466,20 +534,20 @@ export default {
             }
         },
         tableSortQuery() {
-            this.orderByStr = '';
+            this.orderByStr = "";
 
             if (this.tableSortFields.length > 0) {
                 var templist = [];
 
                 this.tableSortFields.forEach(item => {
                     if (item.name && item.order) {
-                        var tempItem = item.name + '_,' + item.order;
+                        var tempItem = item.name + "_," + item.order;
                         templist.push(tempItem);
                     }
                 });
 
                 if (templist.length > 0) {
-                    this.orderByStr = templist.join('_;');
+                    this.orderByStr = templist.join("_;");
                 }
             }
 
@@ -489,11 +557,11 @@ export default {
         exportExcel() {
             window.location.href =
                 this.$baseUrl +
-                '/homeProductType/exportExcel?searchKey=' +
+                "/homeProductType/exportExcel?searchKey=" +
                 this.filter1 +
-                '&advancedQuery=' +
+                "&advancedQuery=" +
                 this.advancedQuerySearchKey +
-                '&orderByStr=' +
+                "&orderByStr=" +
                 this.orderByStr;
         },
         searchData() {
@@ -501,42 +569,45 @@ export default {
             this.getData();
         },
         deleteRow(row) {
-            this.$alert('删除将无法恢复，确认要删除么？', '警告', {
-                type: 'error',
+            this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+                type: "error"
             })
                 .then(() => {
                     return this.$http.post({
-                        url: '/homeProductType/del',
-                        data: { id: row.id },
+                        url: "/homeProductType/del",
+                        data: { id: row.id }
                     });
                 })
                 .then(() => {
-                    this.$message.success('删除成功');
+                    this.$message.success("删除成功");
                     this.getData();
                 })
                 .catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
+                    if (action === "cancel") {
+                        this.$message.info("删除取消");
                     } else {
-                        this.$message.error('删除失败');
+                        this.$message.error("删除失败");
                     }
                 });
         },
         DateTimeFormatter(row, column, cellValue) {
             if (cellValue) {
-                return format(cellValue, 'YYYY/MM/DD HH:mm', { locale: zh });
+                return format(cellValue, "YYYY/MM/DD HH:mm", { locale: zh });
             }
         },
         DateFormatter(row, column, cellValue) {
             if (cellValue) {
-                return format(cellValue, 'YYYY/MM/DD', { locale: zh });
+                return format(cellValue, "YYYY/MM/DD", { locale: zh });
             }
         },
         showImg(img) {
             this.imgSrc = img;
             this.imageDialogVisible = true;
-        },
+        }
     },
+    components: {
+        HomeProduct
+    }
 };
 </script>
 <style lang="less" scoped>

src/main/vue/src/pages/ProductInfo.vue

@@ -1,288 +1,245 @@
 <template>
     <div>
-        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small" style="max-width: 500px;">
 
-            <el-form-item prop="storeId" label="店铺">
-                <template>
-                    <el-select v-model="formData.storeId" clearable filterable placeholder="请选择" :disabled="'storeId'==subColumn">
-                        <el-option v-for="item in storeInfos" :key="item.id" :label="item.storeName" :value="item.id">
-                        </el-option>
-                    </el-select>
-                </template>
+        <el-tabs v-model="activeName" type="card" :before-leave='beforeLeave'>
+            <el-tab-pane label="商品信息" name="first">
+                <div :style="{height:totalHeight-200+'px'}"
+                    style="overflow:auto">
+                    <productInfo ref='productInfoTab' :info='productInfo'>
+                    </productInfo>
+                </div>
+            </el-tab-pane>
+            <el-tab-pane label="轮播主图" name="second" :disabled='!productId'>
+                <div :style="{height:totalHeight-200+'px'}"
+                    style="overflow:auto">
+                    <productImages ref='productImagesTab1' :typeFlag='0'
+                        :productId='productId'>
+                    </productImages>
+                </div>
+            </el-tab-pane>
+            <el-tab-pane label="客片展示" name="third" :disabled='!productId'>
+                <div :style="{height:totalHeight-200+'px'}"
+                    style="overflow:auto">
+                    <productImages ref='productImagesTab2' :typeFlag='1'
+                        :productId='productId'>
+                    </productImages>
+                </div>
+            </el-tab-pane>
+            <el-tab-pane label="产品详情" name="forth" :disabled='!productId'>
+                <productParameters ref='productParametersTab'
+                    :productId='productId'></productParameters>
+            </el-tab-pane>
+        </el-tabs>
+
+        <el-row style="margin:20px 20px 0">
+            <el-button @click="onSave" :loading="$store.state.fetchingData"
+                type="primary">{{activeName!='forth'?'下一步':'保存'}}</el-button>
+            <el-button @click="onDelete" v-if="productId" type="danger">删除该商品
+            </el-button>
+            <el-button @click="$router.go(-1)">取消</el-button>
+        </el-row>
 
-            </el-form-item>
-            <!-- <el-form-item prop="typeFlag" label="类型">
-                <template>
-                    <el-select v-model="formData.typeFlag" clearable placeholder="请选择">
-                        <el-option v-for="item in typeFlagOptions" :key="item.value" :label="item.label" :value="item.value">
-                        </el-option>
-                    </el-select>
-                </template>
-            </el-form-item> -->
-
-            <el-form-item prop="serviceType" label="类目">
-                <el-select v-model="formData.serviceType" filterable placeholder="请选择" size="small">
-                    <el-option v-for="item in serviceTypes" :key="item.id" :label="item.typeName" :value="item.id">
-                    </el-option>
-                </el-select>
-
-            </el-form-item>
-
-            <!-- <el-form-item prop="subclass" label="服务小类">
-                <el-select v-model="formData.subclass" filterable placeholder="请选择" size="small">
-                    <el-option v-for="item in serviceTypeDetails[formData.serviceType]" :key="item.id" :label="item.typeName" :value="item.id">
-                    </el-option>
-                </el-select>
-
-            </el-form-item> -->
-
-            <el-form-item prop="title" label="标题">
-                <el-input v-model="formData.title" :disabled="'title'==subColumn"></el-input>
-            </el-form-item>
-            <el-form-item prop="image" label="主图">
-                <single-upload v-model="formData.image" :disabled="'image'==subColumn"></single-upload>
-            </el-form-item>
-            <el-form-item prop="serviceDetail" label="服务详情">
-                <el-input type="textarea" v-model="formData.serviceDetail" :disabled="'serviceDetail'==subColumn"></el-input>
-            </el-form-item>
-            <el-form-item prop="inventory" label="库存">
-                <el-input v-model="formData.inventory" :disabled="'inventory'==subColumn"></el-input>
-            </el-form-item>
-            <el-form-item prop="price" label="默认价格">
-                <el-input v-model="formData.price"></el-input>
-            </el-form-item>
-            <el-form-item prop="downPayment" label="定金价格">
-                <el-input v-model="formData.downPayment"></el-input>
-            </el-form-item>
-            <el-form-item prop="amount" label="照片">
-                <el-input v-model="formData.amount"></el-input>
-            </el-form-item>
-            <el-form-item prop="album" label="相册">
-                <el-input v-model="formData.album"></el-input>
-            </el-form-item>
-            <el-form-item prop="fangda" label="放大">
-                <el-input v-model="formData.fangda"></el-input>
-            </el-form-item>
-            <el-form-item prop="onShelf" label="上下架">
-                <el-switch v-model="formData.onShelf" active-color="#13ce66" inactive-color="#ff4949" :disabled="'onShelf'==subColumn">
-                </el-switch>
-            </el-form-item>
-            <el-form-item prop="useFlag" label="可用">
-                <el-switch v-model="formData.useFlag" active-color="#13ce66" inactive-color="#ff4949" :disabled="'useFlag'==subColumn">
-                </el-switch>
-            </el-form-item>
-            <el-form-item prop="hotFlag" label="热门">
-                <el-switch v-model="formData.hotFlag" active-color="#13ce66" inactive-color="#ff4949" :disabled="'hotFlag'==subColumn">
-                </el-switch>
-            </el-form-item>
-            <el-form-item prop="homeFlag" label="首页">
-                <el-switch v-model="formData.homeFlag" active-color="#13ce66" inactive-color="#ff4949" :disabled="'homeFlag'==subColumn">
-                </el-switch>
-            </el-form-item>
-            <el-form-item prop="rank" label="排序">
-                <el-input v-model="formData.rank" :disabled="'rank'==subColumn"></el-input>
-            </el-form-item>
-
-            <el-form-item prop="salesVolume" label="销量">
-                <el-input v-model="formData.salesVolume" :disabled="'salesVolume'==subColumn"></el-input>
-            </el-form-item>
-            <el-form-item prop="praise" label="好评">
-                <el-input v-model="formData.praise" :disabled="'praise'==subColumn"></el-input>
-            </el-form-item>
-
-            <!-- <el-form-item prop="outFlag" label="外链">
-                <el-switch v-model="formData.outFlag" active-color="#13ce66" inactive-color="#ff4949">
-                </el-switch>
-            </el-form-item>
-
-            <el-form-item v-if="formData.outFlag" prop="outUrl" label="外链地址">
-                <el-input v-model="formData.outUrl"></el-input>
-            </el-form-item> -->
-
-            <el-form-item>
-                <el-button @click="onSave" :loading="$store.state.fetchingData" type="primary">保存</el-button>
-                <el-button @click="onDelete" v-if="formData.id" type="danger">删除</el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
     </div>
 </template>
 <script>
-import formValidator from '../formValidator';
+import formValidator from "../formValidator";
+import productInfo from "../components/ProductInfo";
+import productImages from "../components/ProductImages";
+import productParameters from "../components/ProductParameters";
+import { mapState } from "vuex";
 
 export default {
     created() {
-        if (this.$route.query.column) {
-            this.subColumn = this.$route.query.column.split(',')[1];
-            this.subValue = this.$route.query.column.split(',')[0];
-        }
-
         if (this.$route.query.id) {
-            this.$http
-                .get({
-                    url: '/productInfo/getOne',
-                    data: {
-                        id: this.$route.query.id,
-                    },
-                })
-                .then(res => {
-                    if (res.success) {
-                        this.formData = res.data;
-
-                        if (this.formData.serviceType) {
-                            this.formData.serviceType = Number(
-                                this.formData.serviceType,
-                            );
-                        }
-                        if (this.formData.subclass) {
-                            this.formData.subclass = Number(
-                                this.formData.subclass,
-                            );
-                        }
-
-                        this.formData.hotFlag =
-                            this.formData.hotFlag == 1 ? true : false;
-                        this.formData.homeFlag =
-                            this.formData.homeFlag == 1 ? true : false;
-                        this.formData.useFlag =
-                            this.formData.useFlag == 'Y' ? true : false;
-                        this.formData.onShelf =
-                            this.formData.onShelf == 'Y' ? true : false;
-                        this.formData.outFlag =
-                            this.formData.outFlag == 'Y' ? true : false;
-
-                        if (this.$route.query.column) {
-                            this.formData[this.subColumn] = this.subValue;
-                        }
-                    }
-                });
+            this.productId = Number(this.$route.query.id);
         } else {
-            if (this.$route.query.column) {
-                this.formData[this.subColumn] = this.subValue;
-            }
+            this.needCheck = false;
+        }
+        if (this.$route.query.id) {
+            this.getProduct();
         }
-
-        this.$http
-            .get({
-                url: '/storeInfo/all',
-            })
-            .then(res => {
-                if (res.success) {
-                    this.storeInfos = res.data;
-                }
-            });
-
-        // this.$http.get({
-        //     url: '/serviceType/all'
-        // }).then(res => {
-        //     if (res.success) {
-        //         this.serviceTypes = res.data;
-
-        //         this.serviceTypes.forEach(element => {
-
-        //             this.serviceTypeDetails[element.id] = element.serviceTypeDetailList
-
-        //         });
-        //     }
-        // });
-        this.$http
-            .get({
-                url: '/itemType/all',
-            })
-            .then(res => {
-                if (res.success) {
-                    this.serviceTypes = res.data;
-                }
-            });
     },
     data() {
         return {
+            activeName: "first",
+            stepList: ["first", "second", "third", "forth"],
+            productId: 0,
             saving: false,
-            formData: {
-                typeFlag: 0,
-                rank: 0,
-                responseTime: 0,
-                reworkRate: 0,
-                useFlag: true,
-                serviceType: 1,
-                onShelf: false,
-                storeId: '',
-                amount:10,
-                album:10,
-                fangda:10,
-            },
+            productInfo: {},
             rules: {},
-            subColumn: '',
-            subValue: '',
+            subColumn: "",
+            subValue: "",
             serviceTypes: [],
             serviceTypeDetails: {},
             typeFlagOptions: [
-                { label: '修图', value: 0 },
-                { label: '实体商品', value: 1 },
+                { label: "修图", value: 0 },
+                { label: "实体商品", value: 1 }
             ],
             storeInfos: [],
+            isFirst: false
         };
     },
+    computed: {
+        ...mapState(["totalHeight"])
+    },
     methods: {
-        onSave() {
-            this.$refs.form.validate(valid => {
-                if (valid) {
-                    this.submit();
-                } else {
-                    return false;
-                }
-            });
-        },
-        submit() {
-            var data = JSON.parse(JSON.stringify(this.formData));
-
-            data.hotFlag = this.formData.hotFlag ? 1 : 0;
-            data.homeFlag = this.formData.homeFlag ? 1 : 0;
-            data.useFlag = this.formData.useFlag ? 'Y' : 'N';
-            data.onShelf = this.formData.onShelf ? 'Y' : 'N';
-            data.outFlag = this.formData.outFlag ? 'Y' : 'N';
-
-            delete data.productPriceList;
+        beforeLeave(activeName, oldActiveName) {
+            if (
+                !this.isFirst &&
+                oldActiveName == "first" &&
+                this.$refs.productInfoTab.checkChange()
+            ) {
+                return new Promise((resolve, reject) => {
+                    this.$confirm("商品信息已经修改，是否保存?", "提示", {
+                        confirmButtonText: "确定",
+                        cancelButtonText: "取消",
+                        type: "warning"
+                    })
+                        .then(() => {
+                            this.$refs.productInfoTab
+                                .submit()
+                                .then(() => {
+                                    this.getProduct();
+                                    resolve();
+                                })
+                                .catch(() => {
+                                    this.getProduct();
+                                    reject();
+                                });
+                        })
+                        .catch(() => {
+                            this.getProduct();
+                            resolve();
+                        });
+                });
+            }
 
+            if (activeName == "second") {
+                this.$refs.productImagesTab1.searchData();
+            }
+            if (activeName == "third") {
+                this.$refs.productImagesTab1.searchData();
+            }
+        },
+        getProduct() {
             this.$http
-                .post({
-                    url: this.formData.id
-                        ? '/productInfo/update'
-                        : '/productInfo/save',
-                    data: data,
+                .get({
+                    url: "/productInfo/getOne",
+                    data: {
+                        id: this.productId
+                    }
                 })
                 .then(res => {
                     if (res.success) {
-                        this.$message.success('成功');
-                        this.$router.go(-1);
-                    } else {
-                        this.$message.warning('失败');
+                        if (res.data.serviceType) {
+                            res.data.serviceType = Number(res.data.serviceType);
+                        }
+                        if (res.data.subclass) {
+                            res.data.subclass = Number(res.data.subclass);
+                        }
+
+                        res.data.hotFlag = res.data.hotFlag == 1 ? true : false;
+                        res.data.homeFlag =
+                            res.data.homeFlag == 1 ? true : false;
+                        res.data.useFlag =
+                            res.data.useFlag == "Y" ? true : false;
+                        res.data.onShelf =
+                            res.data.onShelf == "Y" ? true : false;
+                        res.data.outFlag =
+                            res.data.outFlag == "Y" ? true : false;
+
+                        this.productInfo = res.data;
+                        this.$refs.productInfoTab.getInfo();
                     }
                 });
         },
+        onSave() {
+            if (this.activeName == "first") {
+                this.$refs.productInfoTab
+                    .submit()
+                    .then(id => {
+                        this.isFirst = true;
+                        if (id) {
+                            this.productId = id;
+                        }
+                        this.activeName = "second";
+                        this.getProduct();
+
+                        setTimeout(() => {
+                            this.isFirst = false;
+                        }, 500);
+                    })
+                    .catch(() => {
+                        this.getProduct();
+                    });
+            } else if (this.activeName == "second") {
+                this.activeName = "third";
+            } else if (this.activeName == "third") {
+                this.activeName = "forth";
+            } else {
+                this.$message.success("保存成功");
+
+                history.back();
+            }
+        },
+        submit() {
+            return new Promise((resolve, reject) => {
+                var data = JSON.parse(JSON.stringify(this.formData));
+
+                data.hotFlag = this.formData.hotFlag ? 1 : 0;
+                data.homeFlag = this.formData.homeFlag ? 1 : 0;
+                data.useFlag = this.formData.useFlag ? "Y" : "N";
+                data.onShelf = this.formData.onShelf ? "Y" : "N";
+                data.outFlag = this.formData.outFlag ? "Y" : "N";
+
+                delete data.productPriceList;
+
+                this.$http
+                    .post({
+                        url: this.formData.id
+                            ? "/productInfo/update"
+                            : "/productInfo/save",
+                        data: data
+                    })
+                    .then(res => {
+                        if (res.success) {
+                            this.$message.success("成功");
+                            resolve();
+                        } else {
+                            this.$message.warning("失败");
+                            reject();
+                        }
+                    });
+            });
+        },
         onDelete() {
-            this.$alert('删除将无法恢复，确认要删除么？', '警告', {
-                type: 'error',
+            this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+                type: "error"
             })
                 .then(() => {
                     return this.$http.post({
-                        url: '/productInfo/del',
-                        data: { id: this.formData.id },
+                        url: "/productInfo/del",
+                        data: { id: this.productId }
                     });
                 })
                 .then(() => {
-                    this.$message.success('删除成功');
+                    this.$message.success("删除成功");
                     this.$router.go(-1);
                 })
                 .catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
+                    if (action === "cancel") {
+                        this.$message.info("删除取消");
                     } else {
-                        this.$message.error('删除失败');
+                        this.$message.error("删除失败");
                     }
                 });
-        },
+        }
     },
+    components: {
+        productInfo,
+        productImages,
+        productParameters
+    }
 };
 </script>
 <style lang="less" scoped>

src/main/vue/src/pages/ProductInfo_new.vue

@@ -1,145 +0,0 @@
-<template>
-    <div>
-
-        <el-tabs v-model="activeName" type="card">
-            <el-tab-pane label="商品信息" name="first">
-                <div :style="{height:totalHeight-200+'px'}"
-                    style="overflow:auto">
-                    <productInfo></productInfo>
-                </div>
-            </el-tab-pane>
-            <el-tab-pane label="轮播主图" name="second" :disabled='!productId'>
-
-            </el-tab-pane>
-            <el-tab-pane label="客片展示" name="third" :disabled='!productId'>
-
-            </el-tab-pane>
-            <el-tab-pane label="产品详情" name="forth" :disabled='!productId'>
-
-            </el-tab-pane>
-        </el-tabs>
-
-        <el-row style="margin:20px 20px 0">
-            <el-button @click="onSave" :loading="$store.state.fetchingData"
-                type="primary">下一步</el-button>
-            <el-button @click="onDelete" v-if="productId" type="danger">删除该商品
-            </el-button>
-            <el-button @click="$router.go(-1)">取消</el-button>
-        </el-row>
-
-    </div>
-</template>
-<script>
-import formValidator from "../formValidator";
-import productInfo from "../components/ProductInfo";
-import { mapState } from "vuex";
-
-export default {
-    created() {
-        if (this.$route.query.id) {
-            this.productId = this.$route.query.id;
-         }
-
-    
-    },
-    data() {
-        return {
-            activeName: "first",
-            stepList:[ "first", "second", "third","forth"],
-            productId: 0,
-            saving: false,
-            formData: {
-                typeFlag: 0,
-                rank: 0,
-                responseTime: 0,
-                reworkRate: 0,
-                useFlag: true,
-                serviceType: 1,
-                onShelf: false,
-                storeId: "",
-                amount: 10,
-                album: 10,
-                fangda: 10
-            },
-            rules: {},
-            subColumn: "",
-            subValue: "",
-            serviceTypes: [],
-            serviceTypeDetails: {},
-            typeFlagOptions: [
-                { label: "修图", value: 0 },
-                { label: "实体商品", value: 1 }
-            ],
-            storeInfos: []
-        };
-    },
-    computed: {
-        ...mapState(["totalHeight"])
-    },
-    methods: {
-        onSave() {
-            this.$refs.form.validate(valid => {
-                if (valid) {
-                    this.submit();
-                } else {
-                    return false;
-                }
-            });
-        },
-        submit() {
-            var data = JSON.parse(JSON.stringify(this.formData));
-
-            data.hotFlag = this.formData.hotFlag ? 1 : 0;
-            data.homeFlag = this.formData.homeFlag ? 1 : 0;
-            data.useFlag = this.formData.useFlag ? "Y" : "N";
-            data.onShelf = this.formData.onShelf ? "Y" : "N";
-            data.outFlag = this.formData.outFlag ? "Y" : "N";
-
-            delete data.productPriceList;
-
-            this.$http
-                .post({
-                    url: this.formData.id
-                        ? "/productInfo/update"
-                        : "/productInfo/save",
-                    data: data
-                })
-                .then(res => {
-                    if (res.success) {
-                        this.$message.success("成功");
-                        this.$router.go(-1);
-                    } else {
-                        this.$message.warning("失败");
-                    }
-                });
-        },
-        onDelete() {
-            this.$alert("删除将无法恢复，确认要删除么？", "警告", {
-                type: "error"
-            })
-                .then(() => {
-                    return this.$http.post({
-                        url: "/productInfo/del",
-                        data: { id: this.formData.id }
-                    });
-                })
-                .then(() => {
-                    this.$message.success("删除成功");
-                    this.$router.go(-1);
-                })
-                .catch(action => {
-                    if (action === "cancel") {
-                        this.$message.info("删除取消");
-                    } else {
-                        this.$message.error("删除失败");
-                    }
-                });
-        }
-    },
-    components: {
-        productInfo
-    }
-};
-</script>
-<style lang="less" scoped>
-</style>

src/main/vue/src/pages/ProductInfo_old.vue

@@ -0,0 +1,289 @@
+<template>
+    <div>
+        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small" style="max-width: 500px;">
+
+            <el-form-item prop="storeId" label="店铺">
+                <template>
+                    <el-select v-model="formData.storeId" clearable filterable placeholder="请选择" :disabled="'storeId'==subColumn">
+                        <el-option v-for="item in storeInfos" :key="item.id" :label="item.storeName" :value="item.id">
+                        </el-option>
+                    </el-select>
+                </template>
+
+            </el-form-item>
+            <!-- <el-form-item prop="typeFlag" label="类型">
+                <template>
+                    <el-select v-model="formData.typeFlag" clearable placeholder="请选择">
+                        <el-option v-for="item in typeFlagOptions" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                    </el-select>
+                </template>
+            </el-form-item> -->
+
+            <el-form-item prop="serviceType" label="类目">
+                <el-select v-model="formData.serviceType" filterable placeholder="请选择" size="small">
+                    <el-option v-for="item in serviceTypes" :key="item.id" :label="item.typeName" :value="item.id">
+                    </el-option>
+                </el-select>
+
+            </el-form-item>
+
+            <!-- <el-form-item prop="subclass" label="服务小类">
+                <el-select v-model="formData.subclass" filterable placeholder="请选择" size="small">
+                    <el-option v-for="item in serviceTypeDetails[formData.serviceType]" :key="item.id" :label="item.typeName" :value="item.id">
+                    </el-option>
+                </el-select>
+
+            </el-form-item> -->
+
+            <el-form-item prop="title" label="标题">
+                <el-input v-model="formData.title" :disabled="'title'==subColumn"></el-input>
+            </el-form-item>
+            <el-form-item prop="image" label="主图">
+                <single-upload v-model="formData.image" :disabled="'image'==subColumn"></single-upload>
+            </el-form-item>
+            <el-form-item prop="serviceDetail" label="服务详情">
+                <el-input type="textarea" v-model="formData.serviceDetail" :disabled="'serviceDetail'==subColumn"></el-input>
+            </el-form-item>
+            <el-form-item prop="inventory" label="库存">
+                <el-input v-model="formData.inventory" :disabled="'inventory'==subColumn"></el-input>
+            </el-form-item>
+            <el-form-item prop="price" label="默认价格">
+                <el-input v-model="formData.price"></el-input>
+            </el-form-item>
+            <el-form-item prop="downPayment" label="定金价格">
+                <el-input v-model="formData.downPayment"></el-input>
+            </el-form-item>
+            <el-form-item prop="amount" label="照片">
+                <el-input v-model="formData.amount"></el-input>
+            </el-form-item>
+            <el-form-item prop="album" label="相册">
+                <el-input v-model="formData.album"></el-input>
+            </el-form-item>
+            <el-form-item prop="fangda" label="放大">
+                <el-input v-model="formData.fangda"></el-input>
+            </el-form-item>
+            <el-form-item prop="onShelf" label="上下架">
+                <el-switch v-model="formData.onShelf" active-color="#13ce66" inactive-color="#ff4949" :disabled="'onShelf'==subColumn">
+                </el-switch>
+            </el-form-item>
+            <el-form-item prop="useFlag" label="可用">
+                <el-switch v-model="formData.useFlag" active-color="#13ce66" inactive-color="#ff4949" :disabled="'useFlag'==subColumn">
+                </el-switch>
+            </el-form-item>
+            <el-form-item prop="hotFlag" label="热门">
+                <el-switch v-model="formData.hotFlag" active-color="#13ce66" inactive-color="#ff4949" :disabled="'hotFlag'==subColumn">
+                </el-switch>
+            </el-form-item>
+            <el-form-item prop="homeFlag" label="首页">
+                <el-switch v-model="formData.homeFlag" active-color="#13ce66" inactive-color="#ff4949" :disabled="'homeFlag'==subColumn">
+                </el-switch>
+            </el-form-item>
+            <el-form-item prop="rank" label="排序">
+                <el-input v-model="formData.rank" :disabled="'rank'==subColumn"></el-input>
+            </el-form-item>
+
+            <el-form-item prop="salesVolume" label="销量">
+                <el-input v-model="formData.salesVolume" :disabled="'salesVolume'==subColumn"></el-input>
+            </el-form-item>
+            <el-form-item prop="praise" label="好评">
+                <el-input v-model="formData.praise" :disabled="'praise'==subColumn"></el-input>
+            </el-form-item>
+
+            <!-- <el-form-item prop="outFlag" label="外链">
+                <el-switch v-model="formData.outFlag" active-color="#13ce66" inactive-color="#ff4949">
+                </el-switch>
+            </el-form-item>
+
+            <el-form-item v-if="formData.outFlag" prop="outUrl" label="外链地址">
+                <el-input v-model="formData.outUrl"></el-input>
+            </el-form-item> -->
+
+            <el-form-item>
+                <el-button @click="onSave" :loading="$store.state.fetchingData" type="primary">保存</el-button>
+                <el-button @click="onDelete" v-if="formData.id" type="danger">删除</el-button>
+                <el-button @click="$router.go(-1)">取消</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+<script>
+import formValidator from '../formValidator';
+
+export default {
+    created() {
+        if (this.$route.query.column) {
+            this.subColumn = this.$route.query.column.split(',')[1];
+            this.subValue = this.$route.query.column.split(',')[0];
+        }
+
+        if (this.$route.query.id) {
+            this.$http
+                .get({
+                    url: '/productInfo/getOne',
+                    data: {
+                        id: this.$route.query.id,
+                    },
+                })
+                .then(res => {
+                    if (res.success) {
+                        this.formData = res.data;
+
+                        if (this.formData.serviceType) {
+                            this.formData.serviceType = Number(
+                                this.formData.serviceType,
+                            );
+                        }
+                        if (this.formData.subclass) {
+                            this.formData.subclass = Number(
+                                this.formData.subclass,
+                            );
+                        }
+
+                        this.formData.hotFlag =
+                            this.formData.hotFlag == 1 ? true : false;
+                        this.formData.homeFlag =
+                            this.formData.homeFlag == 1 ? true : false;
+                        this.formData.useFlag =
+                            this.formData.useFlag == 'Y' ? true : false;
+                        this.formData.onShelf =
+                            this.formData.onShelf == 'Y' ? true : false;
+                        this.formData.outFlag =
+                            this.formData.outFlag == 'Y' ? true : false;
+
+                        if (this.$route.query.column) {
+                            this.formData[this.subColumn] = this.subValue;
+                        }
+                    }
+                });
+        } else {
+            if (this.$route.query.column) {
+                this.formData[this.subColumn] = this.subValue;
+            }
+        }
+
+        this.$http
+            .get({
+                url: '/storeInfo/all',
+            })
+            .then(res => {
+                if (res.success) {
+                    this.storeInfos = res.data;
+                }
+            });
+
+        // this.$http.get({
+        //     url: '/serviceType/all'
+        // }).then(res => {
+        //     if (res.success) {
+        //         this.serviceTypes = res.data;
+
+        //         this.serviceTypes.forEach(element => {
+
+        //             this.serviceTypeDetails[element.id] = element.serviceTypeDetailList
+
+        //         });
+        //     }
+        // });
+        this.$http
+            .get({
+                url: '/itemType/all',
+            })
+            .then(res => {
+                if (res.success) {
+                    this.serviceTypes = res.data;
+                }
+            });
+    },
+    data() {
+        return {
+            saving: false,
+            formData: {
+                typeFlag: 0,
+                rank: 0,
+                responseTime: 0,
+                reworkRate: 0,
+                useFlag: true,
+                serviceType: 1,
+                onShelf: false,
+                storeId: '',
+                amount:10,
+                album:10,
+                fangda:10,
+            },
+            rules: {},
+            subColumn: '',
+            subValue: '',
+            serviceTypes: [],
+            serviceTypeDetails: {},
+            typeFlagOptions: [
+                { label: '修图', value: 0 },
+                { label: '实体商品', value: 1 },
+            ],
+            storeInfos: [],
+        };
+    },
+    methods: {
+        onSave() {
+            this.$refs.form.validate(valid => {
+                if (valid) {
+                    this.submit();
+                } else {
+                    return false;
+                }
+            });
+        },
+        submit() {
+            var data = JSON.parse(JSON.stringify(this.formData));
+
+            data.hotFlag = this.formData.hotFlag ? 1 : 0;
+            data.homeFlag = this.formData.homeFlag ? 1 : 0;
+            data.useFlag = this.formData.useFlag ? 'Y' : 'N';
+            data.onShelf = this.formData.onShelf ? 'Y' : 'N';
+            data.outFlag = this.formData.outFlag ? 'Y' : 'N';
+
+            delete data.productPriceList;
+
+            this.$http
+                .post({
+                    url: this.formData.id
+                        ? '/productInfo/update'
+                        : '/productInfo/save',
+                    data: data,
+                })
+                .then(res => {
+                    if (res.success) {
+                        this.$message.success('成功');
+                        this.$router.go(-1);
+                    } else {
+                        this.$message.warning('失败');
+                    }
+                });
+        },
+        onDelete() {
+            this.$alert('删除将无法恢复，确认要删除么？', '警告', {
+                type: 'error',
+            })
+                .then(() => {
+                    return this.$http.post({
+                        url: '/productInfo/del',
+                        data: { id: this.formData.id },
+                    });
+                })
+                .then(() => {
+                    this.$message.success('删除成功');
+                    this.$router.go(-1);
+                })
+                .catch(action => {
+                    if (action === 'cancel') {
+                        this.$message.info('删除取消');
+                    } else {
+                        this.$message.error('删除失败');
+                    }
+                });
+        },
+    },
+};
+</script>
+<style lang="less" scoped>
+</style>

src/main/vue/src/pages/ProductInfos.vue

@@ -8,7 +8,7 @@
             </el-select> -->
 
             <div>
-                <el-radio-group v-model="onShelfFlag"  @change="getData">
+                <el-radio-group v-model="onShelfFlag" @change="getData">
                     <el-radio-button label="">全部</el-radio-button>
                     <el-radio-button label="N">已下架</el-radio-button>
                     <el-radio-button label="Y">已上架</el-radio-button>
@@ -17,7 +17,7 @@
             </div>
             <div style="padding:10px 0;">
                 <el-radio-group v-model="itemType" @change="getData">
-                     <el-radio-button label="" >全部</el-radio-button>
+                    <el-radio-button label="">全部</el-radio-button>
                     <el-radio-button :label="item.id" v-for="item in itemTypes"
                         :key="item.id">{{item.typeName}}</el-radio-button>
                 </el-radio-group>
@@ -47,10 +47,14 @@
                 type="primary" size="small" icon="el-icon-sort"
                 class="filter-item">排序
             </el-button>
-            <!-- <el-button @click="$router.push({path:'/productInfo',query:{column:$route.query.column}})" type="primary" size="small" icon="el-icon-edit" class="filter-item">添加
-            </el-button> -->
-            <!-- <el-button @click="exportExcel" type="primary" size="small" icon="el-icon-share" class="filter-item">导出EXCEL
-            </el-button> -->
+            <el-button
+                @click="$router.push({path:'/productInfo',query:{column:$route.query.column}})"
+                type="primary" size="small" icon="el-icon-edit"
+                class="filter-item">添加
+            </el-button>
+            <el-button @click="exportExcel" type="primary" size="small"
+                icon="el-icon-share" class="filter-item">导出EXCEL
+            </el-button>
             <el-dropdown trigger="click" size="medium"
                 class="table-column-filter">
                 <span>
@@ -156,11 +160,12 @@
                 <template slot-scope="scope">
                     <!-- <el-button @click="detailRow(scope.row)" type="primary" size="mini" plain>详情</el-button> -->
 
-                    <el-button type="primary" @click="editRow(scope.row)" size="mini" plain>编辑
+                    <el-button type="primary" @click="editRow(scope.row)"
+                        size="mini" plain>编辑
                     </el-button>
-                     <el-button
-                                @click="$router.push({path:'/productComments',query:{column:scope.row.id+',productId'}})"
-                                type="warning" size="mini" plain>查看评论</el-button>
+                    <el-button
+                        @click="showProdcut=scope.row.id,showComments=true"
+                        type="warning" size="mini" plain>查看评论</el-button>
 
                     <!-- <el-dropdown>
                         <el-button type="warning" size="mini" plain>
@@ -306,12 +311,19 @@
                 alt="">
         </el-dialog>
 
+        <el-dialog title="商品评论" :visible.sync="showComments" >
+           <productComments :productId='showProdcut'></productComments>
+        </el-dialog>
+
+        
+
     </div>
 </template>
 <script>
 import { mapState } from "vuex";
 import { format } from "date-fns";
 import zh from "date-fns/locale/zh_cn";
+import productComments from '../components/ProductComments'
 
 export default {
     created() {
@@ -353,6 +365,8 @@ export default {
     },
     data() {
         return {
+            showComments:false,
+            showProdcut:0,
             totalNumber: 0,
             totalPage: 10,
             currentPage: 1,
@@ -762,13 +776,16 @@ export default {
             return valueStr;
         },
         showImg(img) {
-            this.imgSrc = img ;
+            this.imgSrc = img;
             this.imageDialogVisible = true;
         },
         storeIdChange() {
             this.currentPage = 1;
             this.getData();
         }
+    },
+    components:{
+        productComments
     }
 };
 </script>

src/main/vue/src/pages/UserOrderDetails.vue

@@ -5,7 +5,8 @@
                 <el-option v-for="item in storeInfos" :key="item.id" :label="item.storeName" :value="item.id"></el-option>
             </el-select>-->
             <div style="padding:0 0 10px;">
-                <el-radio-group v-model="orderStatusKey" type='small' @change="getData">
+                <el-radio-group v-model="orderStatusKey" type='small'
+                    @change="getData">
                     <el-radio-button label="">全部</el-radio-button>
                     <el-radio-button v-for="item in orderStatusOptions"
                         :key="item.value" :label="item.value">{{item.label}}
@@ -61,6 +62,7 @@
             ref="table">
             <el-table-column v-if="multipleMode" align="center" type="selection"
                 width="50"></el-table-column>
+
             <el-table-column v-if="isColumnShow('id')" prop="id" label="ID"
                 min-width="50"></el-table-column>
 

src/main/vue/src/router/index.js

@@ -34,6 +34,9 @@ const router = new Router({
                     path: '/user',
                     name: 'user',
                     component: () => import('../pages/User'),
+                    meta: {
+                        menuInfo: '/users',
+                    },
                 },
                 {
                     path: '/menus',
@@ -49,6 +52,9 @@ const router = new Router({
                     path: '/role',
                     name: 'role',
                     component: () => import('../pages/Role'),
+                    meta: {
+                        menuInfo: '/roles',
+                    },
                 },
                 {
                     path: '/api',
@@ -64,6 +70,9 @@ const router = new Router({
                     path: '/genCode',
                     name: 'genCode',
                     component: () => import('../pages/GenCode'),
+                    meta: {
+                        menuInfo: '/genCodes',
+                    },
                 },
                 {
                     path: '/permissions',
@@ -74,6 +83,9 @@ const router = new Router({
                     path: '/permission',
                     name: 'permission',
                     component: () => import('../pages/Permission'),
+                    meta: {
+                        menuInfo: '/permissions',
+                    },
                 },
                 {
                     path: '/departs',
@@ -144,6 +156,9 @@ const router = new Router({
                     path: '/commonQuery',
                     name: 'commonQuery',
                     component: () => import('../pages/CommonQuery'),
+                    meta: {
+                        menuInfo: '/commonQuerys',
+                    },
                 },
                 {
                     path: '/commonIframe',
@@ -159,6 +174,9 @@ const router = new Router({
                     path: '/queryConfig',
                     name: 'queryConfig',
                     component: () => import('../pages/QueryConfig'),
+                    meta: {
+                        menuInfo: '/queryConfigs',
+                    },
                 },
                 {
                     path: '/dataSourceInfos',
@@ -169,6 +187,9 @@ const router = new Router({
                     path: '/dataSourceInfo',
                     name: 'dataSourceInfo',
                     component: () => import('../pages/DataSourceInfo'),
+                    meta: {
+                        menuInfo: '/dataSourceInfos',
+                    },
                 },
                 {
                     path: '/deploySystem',
@@ -185,6 +206,9 @@ const router = new Router({
                     path: '/userOrder',
                     name: 'UserOrder',
                     component: () => import('../pages/UserOrder'),
+                    meta: {
+                        menuInfo: '/userOrders',
+                    },
                 },
                 {
                     path: '/userOrders',
@@ -195,6 +219,9 @@ const router = new Router({
                     path: '/bannerInfo',
                     name: 'BannerInfo',
                     component: () => import('../pages/BannerInfo'),
+                    meta: {
+                        menuInfo: '/bannerInfos',
+                    },
                 },
                 {
                     path: '/bannerInfos',
@@ -205,6 +232,9 @@ const router = new Router({
                     path: '/storeInfo',
                     name: 'StoreInfo',
                     component: () => import('../pages/StoreInfo'),
+                    meta: {
+                        menuInfo: '/storeInfos',
+                    },
                 },
                 {
                     path: '/storeInfos',
@@ -215,6 +245,9 @@ const router = new Router({
                     path: '/userAddress',
                     name: 'UserAddress',
                     component: () => import('../pages/UserAddress'),
+                    meta: {
+                        menuInfo: '/UserAddresss',
+                    },
                 },
                 {
                     path: '/userAddresss',
@@ -225,6 +258,9 @@ const router = new Router({
                     path: '/orderAddress',
                     name: 'OrderAddress',
                     component: () => import('../pages/OrderAddress'),
+                    meta: {
+                        menuInfo: '/orderAddresss',
+                    },
                 },
                 {
                     path: '/orderAddresss',
@@ -235,6 +271,9 @@ const router = new Router({
                     path: '/productCollection',
                     name: 'ProductCollection',
                     component: () => import('../pages/ProductCollection'),
+                    meta: {
+                        menuInfo: '/productCollections',
+                    },
                 },
                 {
                     path: '/productCollections',
@@ -245,6 +284,9 @@ const router = new Router({
                     path: '/storeCollection',
                     name: 'StoreCollection',
                     component: () => import('../pages/StoreCollection'),
+                    meta: {
+                        menuInfo: '/storeCollections',
+                    },
                 },
                 {
                     path: '/storeCollections',
@@ -255,6 +297,9 @@ const router = new Router({
                     path: '/productComment',
                     name: 'ProductComment',
                     component: () => import('../pages/ProductComment'),
+                    meta: {
+                        menuInfo: '/productComments',
+                    },
                 },
                 {
                     path: '/productComments',
@@ -265,6 +310,9 @@ const router = new Router({
                     path: '/productCommentImage',
                     name: 'ProductCommentImage',
                     component: () => import('../pages/ProductCommentImage'),
+                    meta: {
+                        menuInfo: '/productCommentImages',
+                    },
                 },
                 {
                     path: '/productCommentImages',
@@ -275,6 +323,9 @@ const router = new Router({
                     path: '/couponInfo',
                     name: 'CouponInfo',
                     component: () => import('../pages/CouponInfo'),
+                    meta: {
+                        menuInfo: '/couponInfos',
+                    },
                 },
                 {
                     path: '/couponInfos',
@@ -285,6 +336,9 @@ const router = new Router({
                     path: '/userCoupon',
                     name: 'UserCoupon',
                     component: () => import('../pages/UserCoupon'),
+                    meta: {
+                        menuInfo: '/userCoupons',
+                    },
                 },
                 {
                     path: '/userCoupons',
@@ -295,6 +349,9 @@ const router = new Router({
                     path: '/memberCoin',
                     name: 'MemberCoin',
                     component: () => import('../pages/MemberCoin'),
+                    meta: {
+                        menuInfo: '/memberCoins',
+                    },
                 },
                 {
                     path: '/memberCoins',
@@ -310,6 +367,9 @@ const router = new Router({
                     path: '/memberCoinTixian',
                     name: 'MemberCoinTixian',
                     component: () => import('../pages/MemberCoinTixian'),
+                    meta: {
+                        menuInfo: '/memberCoinTixians',
+                    },
                 },
                 {
                     path: '/memberCoinTixians',
@@ -320,6 +380,9 @@ const router = new Router({
                     path: '/memberPoint',
                     name: 'MemberPoint',
                     component: () => import('../pages/MemberPoint'),
+                    meta: {
+                        menuInfo: '/MemberPoints',
+                    },
                 },
                 {
                     path: '/memberPoints',
@@ -330,6 +393,9 @@ const router = new Router({
                     path: '/productInfo',
                     name: 'ProductInfo',
                     component: () => import('../pages/ProductInfo'),
+                    meta: {
+                        menuInfo: '/productInfos',
+                    },
                 },
                 {
                     path: '/productInfos',
@@ -340,6 +406,9 @@ const router = new Router({
                     path: '/productPrice',
                     name: 'ProductPrice',
                     component: () => import('../pages/ProductPrice'),
+                    meta: {
+                        menuInfo: '/ProductPrices',
+                    },
                 },
                 {
                     path: '/productPrices',
@@ -350,6 +419,9 @@ const router = new Router({
                     path: '/productImage',
                     name: 'ProductImage',
                     component: () => import('../pages/ProductImage'),
+                    meta: {
+                        menuInfo: '/ProductImages',
+                    },
                 },
                 {
                     path: '/productImages',
@@ -360,6 +432,9 @@ const router = new Router({
                     path: '/systemConfig',
                     name: 'SystemConfig',
                     component: () => import('../pages/SystemConfig'),
+                    meta: {
+                        menuInfo: '/systemConfigs',
+                    },
                 },
                 {
                     path: '/systemConfigs',
@@ -370,6 +445,9 @@ const router = new Router({
                     path: '/storeLabel',
                     name: 'StoreLabel',
                     component: () => import('../pages/StoreLabel'),
+                    meta: {
+                        menuInfo: '/storeLabels',
+                    },
                 },
                 {
                     path: '/storeLabels',
@@ -380,6 +458,9 @@ const router = new Router({
                     path: '/alipayTemp',
                     name: 'AlipayTemp',
                     component: () => import('../pages/AlipayTemp'),
+                    meta: {
+                        menuInfo: '/alipayTemps',
+                    },
                 },
                 {
                     path: '/alipayTemps',
@@ -390,6 +471,9 @@ const router = new Router({
                     path: '/wxpayTemp',
                     name: 'WxpayTemp',
                     component: () => import('../pages/WxpayTemp'),
+                    meta: {
+                        menuInfo: '/wxpayTemps',
+                    },
                 },
                 {
                     path: '/wxpayTemps',
@@ -400,6 +484,9 @@ const router = new Router({
                     path: '/rechargeRecord',
                     name: 'RechargeRecord',
                     component: () => import('../pages/RechargeRecord'),
+                    meta: {
+                        menuInfo: '/rechargeRecords',
+                    },
                 },
                 {
                     path: '/rechargeRecords',
@@ -410,6 +497,9 @@ const router = new Router({
                     path: '/couponDetail',
                     name: 'CouponDetail',
                     component: () => import('../pages/CouponDetail'),
+                    meta: {
+                        menuInfo: '/couponDetails',
+                    },
                 },
                 {
                     path: '/couponDetails',
@@ -420,6 +510,9 @@ const router = new Router({
                     path: '/refundApplication',
                     name: 'RefundApplication',
                     component: () => import('../pages/RefundApplication'),
+                    meta: {
+                        menuInfo: '/refundApplications',
+                    },
                 },
                 {
                     path: '/refundApplications',
@@ -430,6 +523,9 @@ const router = new Router({
                     path: '/refundMessage',
                     name: 'RefundMessage',
                     component: () => import('../pages/RefundMessage'),
+                    meta: {
+                        menuInfo: '/refundMessages',
+                    },
                 },
                 {
                     path: '/refundMessages',
@@ -440,6 +536,9 @@ const router = new Router({
                     path: '/activityType',
                     name: 'ActivityType',
                     component: () => import('../pages/ActivityType'),
+                    meta: {
+                        menuInfo: '/activityTypes',
+                    },
                 },
                 {
                     path: '/activityTypes',
@@ -450,6 +549,9 @@ const router = new Router({
                     path: '/activityInfo',
                     name: 'ActivityInfo',
                     component: () => import('../pages/ActivityInfo'),
+                    meta: {
+                        menuInfo: '/activityInfos',
+                    },
                 },
                 {
                     path: '/activityInfos',
@@ -460,6 +562,9 @@ const router = new Router({
                     path: '/activityLog',
                     name: 'ActivityLog',
                     component: () => import('../pages/ActivityLog'),
+                    meta: {
+                        menuInfo: '/activityLogs',
+                    },
                 },
                 {
                     path: '/activityLogs',
@@ -470,6 +575,9 @@ const router = new Router({
                     path: '/activityBanner',
                     name: 'ActivityBanner',
                     component: () => import('../pages/ActivityBanner'),
+                    meta: {
+                        menuInfo: '/activityBanners',
+                    },
                 },
                 {
                     path: '/activityBanners',
@@ -480,6 +588,9 @@ const router = new Router({
                     path: '/logisticsInfo',
                     name: 'LogisticsInfo',
                     component: () => import('../pages/LogisticsInfo'),
+                    meta: {
+                        menuInfo: '/logisticsInfos',
+                    },
                 },
                 {
                     path: '/logisticsInfos',
@@ -490,6 +601,9 @@ const router = new Router({
                     path: '/orderLogistics',
                     name: 'OrderLogistics',
                     component: () => import('../pages/OrderLogistics'),
+                    meta: {
+                        menuInfo: '/orderLogisticss',
+                    },
                 },
                 {
                     path: '/orderLogisticss',
@@ -500,6 +614,9 @@ const router = new Router({
                     path: '/shoppingCart',
                     name: 'ShoppingCart',
                     component: () => import('../pages/ShoppingCart'),
+                    meta: {
+                        menuInfo: '/shoppingCarts',
+                    },
                 },
                 {
                     path: '/shoppingCarts',
@@ -510,6 +627,9 @@ const router = new Router({
                     path: '/productParameter',
                     name: 'ProductParameter',
                     component: () => import('../pages/ProductParameter'),
+                    meta: {
+                        menuInfo: '/productParameters',
+                    },
                 },
                 {
                     path: '/productParameters',
@@ -520,6 +640,9 @@ const router = new Router({
                     path: '/brandInfo',
                     name: 'BrandInfo',
                     component: () => import('../pages/BrandInfo'),
+                    meta: {
+                        menuInfo: '/brandInfos',
+                    },
                 },
                 {
                     path: '/brandInfos',
@@ -530,6 +653,9 @@ const router = new Router({
                     path: '/itemType',
                     name: 'ItemType',
                     component: () => import('../pages/ItemType'),
+                    meta: {
+                        menuInfo: '/itemTypes',
+                    },
                 },
                 {
                     path: '/itemTypes',
@@ -545,6 +671,9 @@ const router = new Router({
                     path: '/propertyName',
                     name: 'PropertyName',
                     component: () => import('../pages/PropertyName'),
+                    meta: {
+                        menuInfo: '/propertyNames',
+                    },
                 },
                 {
                     path: '/propertyNames',
@@ -555,6 +684,9 @@ const router = new Router({
                     path: '/propertyValue',
                     name: 'PropertyValue',
                     component: () => import('../pages/PropertyValue'),
+                    meta: {
+                        menuInfo: '/propertyValues',
+                    },
                 },
                 {
                     path: '/propertyValues',
@@ -565,6 +697,9 @@ const router = new Router({
                     path: '/productProperty',
                     name: 'ProductProperty',
                     component: () => import('../pages/ProductProperty'),
+                    meta: {
+                        menuInfo: '/productPropertys',
+                    },
                 },
                 {
                     path: '/productPropertys',
@@ -575,6 +710,9 @@ const router = new Router({
                     path: '/productSku',
                     name: 'ProductSku',
                     component: () => import('../pages/ProductSku'),
+                    meta: {
+                        menuInfo: '/productSkus',
+                    },
                 },
                 {
                     path: '/productSkus',
@@ -585,6 +723,9 @@ const router = new Router({
                     path: '/groupActivity',
                     name: 'GroupActivity',
                     component: () => import('../pages/GroupActivity'),
+                    meta: {
+                        menuInfo: '/groupActivitys',
+                    },
                 },
                 {
                     path: '/groupActivitys',
@@ -595,6 +736,9 @@ const router = new Router({
                     path: '/groupInfo',
                     name: 'GroupInfo',
                     component: () => import('../pages/GroupInfo'),
+                    meta: {
+                        menuInfo: '/groupInfos',
+                    },
                 },
                 {
                     path: '/groupInfos',
@@ -605,6 +749,9 @@ const router = new Router({
                     path: '/groupMember',
                     name: 'GroupMember',
                     component: () => import('../pages/GroupMember'),
+                    meta: {
+                        menuInfo: '/groupMembers',
+                    },
                 },
                 {
                     path: '/groupMembers',
@@ -615,6 +762,9 @@ const router = new Router({
                     path: '/homeMenu',
                     name: 'HomeMenu',
                     component: () => import('../pages/HomeMenu'),
+                    meta: {
+                        menuInfo: '/homeMenus',
+                    },
                 },
                 {
                     path: '/homeMenus',
@@ -625,6 +775,9 @@ const router = new Router({
                     path: '/homeAd',
                     name: 'HomeAd',
                     component: () => import('../pages/HomeAd'),
+                    meta: {
+                        menuInfo: '/homeAds',
+                    },
                 },
                 {
                     path: '/homeAds',
@@ -635,6 +788,9 @@ const router = new Router({
                     path: '/storeIntroduction',
                     name: 'StoreIntroduction',
                     component: () => import('../pages/StoreIntroduction'),
+                    meta: {
+                        menuInfo: '/storeIntroductions',
+                    },
                 },
                 {
                     path: '/storeIntroductions',
@@ -645,6 +801,9 @@ const router = new Router({
                     path: '/storeService',
                     name: 'StoreService',
                     component: () => import('../pages/StoreService'),
+                    meta: {
+                        menuInfo: '/storeServices',
+                    },
                 },
                 {
                     path: '/storeServices',
@@ -655,6 +814,9 @@ const router = new Router({
                     path: '/storeServiceLevel',
                     name: 'StoreServiceLevel',
                     component: () => import('../pages/StoreServiceLevel'),
+                    meta: {
+                        menuInfo: '/storeServiceLevels',
+                    },
                 },
                 {
                     path: '/storeServiceLevels',
@@ -665,6 +827,9 @@ const router = new Router({
                     path: '/storeCase',
                     name: 'StoreCase',
                     component: () => import('../pages/StoreCase'),
+                    meta: {
+                        menuInfo: '/storeCases',
+                    },
                 },
                 {
                     path: '/storeCases',
@@ -675,6 +840,9 @@ const router = new Router({
                     path: '/wxMiniprogram',
                     name: 'WxMiniprogram',
                     component: () => import('../pages/WxMiniprogram'),
+                    meta: {
+                        menuInfo: '/wxMiniprograms',
+                    },
                 },
                 {
                     path: '/wxMiniprograms',
@@ -685,6 +853,9 @@ const router = new Router({
                     path: '/userOrderDetail',
                     name: 'UserOrderDetail',
                     component: () => import('../pages/UserOrderDetail'),
+                    meta: {
+                        menuInfo: '/userOrderDetails',
+                    },
                 },
                 {
                     path: '/userOrderDetails',
@@ -695,6 +866,9 @@ const router = new Router({
                     path: '/hotSearch',
                     name: 'HotSearch',
                     component: () => import('../pages/HotSearch'),
+                    meta: {
+                        menuInfo: '/hotSearchs',
+                    },
                 },
                 {
                     path: '/hotSearchs',
@@ -705,6 +879,9 @@ const router = new Router({
                     path: '/orderService',
                     name: 'OrderService',
                     component: () => import('../pages/OrderService'),
+                    meta: {
+                        menuInfo: '/orderServices',
+                    },
                 },
                 {
                     path: '/orderServices',
@@ -715,6 +892,9 @@ const router = new Router({
                     path: '/homeProductType',
                     name: 'HomeProductType',
                     component: () => import('../pages/HomeProductType'),
+                    meta: {
+                        menuInfo: '/homeProductTypes',
+                    },
                 },
                 {
                     path: '/homeProductTypes',
@@ -725,6 +905,9 @@ const router = new Router({
                     path: '/homeProduct',
                     name: 'HomeProduct',
                     component: () => import('../pages/HomeProduct'),
+                    meta: {
+                        menuInfo: '/homeProductTypes',
+                    },
                 },
                 {
                     path: '/homeProducts',
@@ -735,46 +918,73 @@ const router = new Router({
                     path: '/storeServiceType',
                     name: 'StoreServiceType',
                     component: () => import('../pages/StoreServiceType'),
+                    meta: {
+                        menuInfo: '/storeServices',
+                    },
                 },
                 {
                     path: '/storeServiceTypes',
                     name: 'StoreServiceTypes',
                     component: () => import('../pages/StoreServiceTypes'),
+                    meta: {
+                        menuInfo: '/storeServices',
+                    },
                 },
                 {
                     path: '/orderUpload',
                     name: 'orderUpload',
                     component: () => import('../pages/OrderUpload'),
+                    meta: {
+                        menuInfo: '/userOrderDetails',
+                    },
                 },
                 {
                     path: '/choosePhoto',
                     name: 'choosePhoto',
                     component: () => import('../pages/ChoosePhoto'),
+                    meta: {
+                        menuInfo: '/userOrderDetails',
+                    },
                 },
                 {
                     path: '/orderUploadChange',
                     name: 'orderUploadChange',
                     component: () => import('../pages/OrderUploadChange'),
+                    meta: {
+                        menuInfo: '/userOrderDetails',
+                    },
                 },
                 {
                     path: '/orderUploadAlbum',
                     name: 'orderUploadAlbum',
                     component: () => import('../pages/OrderUploadAlbum'),
+                    meta: {
+                        menuInfo: '/userOrderDetails',
+                    },
                 },
                 {
                     path: '/orderUploadChangeAlbum',
                     name: 'orderUploadChangeAlbum',
                     component: () => import('../pages/OrderUploadChangeAlbum'),
+                    meta: {
+                        menuInfo: '/userOrderDetails',
+                    },
                 },
                 {
                     path: '/orderExamine',
                     name: 'orderExamine',
                     component: () => import('../pages/OrderExamine'),
+                    meta: {
+                        menuInfo: '/userOrderDetails',
+                    },
                 },
                 {
                     path: '/orderExamineAlbum',
                     name: 'orderExamineAlbum',
                     component: () => import('../pages/OrderExamineAlbum'),
+                    meta: {
+                        menuInfo: '/userOrderDetails',
+                    },
                 },
                 /**INSERT_LOCATION**/
             ],