09/12

src/main/vue/package.json

@@ -18,7 +18,7 @@
         "chart.js": "^2.7.2",
         "compression-webpack-plugin": "^2.0.0",
         "date-fns": "^1.29.0",
-        "element-ui": "^2.4.1",
+        "element-ui": "^2.12.0",
         "es6-promise": "^4.2.4",
         "less": "^3.0.4",
         "less-loader": "^4.1.0",

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

@@ -0,0 +1,522 @@
+<template>
+    <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-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>
+            <!-- <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('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>
+
+            <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">
+                <template slot-scope="{row}">
+                    <img :src="row.image" @click="showImg(row.image)" style="width: 100px;height: 100px;vertical-align: middle;" />
+                </template>
+
+            </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"
+                             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: 'ProductImages',
+    created() {
+        this.getData();
+    },
+    data() {
+        return {
+            totalNumber: 0,
+            totalPage: 10,
+            currentPage: 1,
+            pageSize: 20,
+            tableData: [],
+            filter1: '',
+            filter2: '',
+            tableColumns: [
+                {
+                    label: '名称',
+                    value: 'name',
+                    show: true,
+                },
+                {
+                    label: '商品',
+                    value: 'productId',
+                    show: true,
+                },
+                {
+                    label: '类型',
+                    value: 'typeFlag',
+                    show: true,
+                },
+                {
+                    label: '图片',
+                    value: 'image',
+                    show: true,
+                },
+                {
+                    label: '备注',
+                    value: 'remark',
+                    show: true,
+                },
+                {
+                    label: '排序',
+                    value: 'rank',
+                    show: true,
+                },
+            ],
+            typeFlag: 0,
+            typeFlagOptions: [
+                {
+                    value: 0,
+                    label: '轮播',
+                },
+                {
+                    value: 1,
+                    label: '客片',
+                },
+            ],
+            multipleMode: false,
+            showAdvancedQueryDialog: false,
+            advancedQueryFields: [],
+            showTableSortDialog: false,
+            tableSortFields: [],
+            searchMethods: ['=', '!=', '>', '>=', '<', '<=', 'like'],
+            advancedQueryColumns: [
+                {
+                    label: '名称',
+                    value: 'name',
+                },
+                {
+                    label: '商品',
+                    value: 'product_id',
+                },
+                {
+                    label: '类型',
+                    value: 'type_flag',
+                },
+                {
+                    label: '图片',
+                    value: 'image',
+                },
+                {
+                    label: '备注',
+                    value: 'remark',
+                },
+                {
+                    label: '排序',
+                    value: 'rank',
+                },
+            ],
+            advancedQuerySearchKey: '',
+            orderByStr: '',
+            imgSrc: '',
+            imageDialogVisible: false,
+        };
+    },
+    computed: {
+        ...mapState(['tableHeight']),
+        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,
+                typeFlag: this.typeFlag,
+            };
+
+            if (this.$route.query.column) {
+                var tempColumn = this.$route.query.column;
+                data[tempColumn.split(',')[1]] = tempColumn.split(',')[0];
+            }
+
+            this.$http
+                .get({
+                    url: '/productImage/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: '/productImage',
+                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 +
+                '/productImage/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: '/productImage/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/ProductInfo.vue

@@ -0,0 +1,285 @@
+<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>
+    </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/components/StoreServiceLevel.vue

@@ -0,0 +1,209 @@
+<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="typeFlag" label="类型">
+                <template>
+                    <el-select v-model="formData.typeFlag" disabled clearable
+                        placeholder="请选择">
+                        <el-option v-for="item in typeFlagOptions"
+                            :key="String(item.id)" :label="item.name"
+                            :value="String(item.id)">
+                        </el-option>
+                    </el-select>
+                </template>
+            </el-form-item>
+            <el-form-item prop="levelName" label="级别">
+                <el-input v-model="formData.levelName"
+                    :disabled="'levelName'==subColumn"></el-input>
+            </el-form-item>
+            <!-- <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-form-item>
+            <el-form-item prop="storeId" label="店铺">
+                <el-input v-model="formData.storeId"
+                    :disabled="'storeId'==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 prop="remark" label="备注">
+                <el-input v-model="formData.remark"
+                    :disabled="'remark'==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: "StoreServiceLevel",
+    props: {
+        editInfo: {
+            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];
+        }
+
+        this.formData = { ...this.editInfo };
+        this.$http
+            .get({
+                url: "/storeServiceType/all"
+            })
+            .then(res => {
+                if (res.success) {
+                    this.typeFlagOptions = res.data;
+                }
+            });
+    },
+    watch: {
+        editInfo() {
+            this.formData = { ...this.editInfo };
+            if (this.typeFlagOptions.length == 0) {
+                this.$http
+                    .get({
+                        url: "/storeServiceType/all"
+                    })
+                    .then(res => {
+                        if (res.success) {
+                            this.typeFlagOptions = res.data;
+                        }
+                    });
+            }
+        }
+    },
+    data() {
+        return {
+            saving: false,
+            formData: {},
+            rules: {},
+            typeFlagOptions: [],
+            subColumn: "",
+            subValue: ""
+        };
+    },
+    computed: {
+        ...mapState(["userInfo"])
+    },
+    methods: {
+        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: "/storeServiceLevel/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
+                        ? "/storeServiceLevel/update"
+                        : "/storeServiceLevel/save",
+                    data: data
+                })
+                .then(res => {
+                    if (res.success) {
+                        this.$message.success("成功");
+                        this.$emit("close");
+                    } else {
+                        this.$message.warning("失败");
+                    }
+                });
+        },
+        close() {
+            this.$emit("close");
+        },
+        onDelete() {
+            this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+                type: "error"
+            })
+                .then(() => {
+                    return this.$http.post({
+                        url: "/storeServiceLevel/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("删除失败");
+                    }
+                });
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+</style>

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

@@ -1,553 +1,617 @@
 <template>
-  <div class="couponInfoContainer">
-    <div class="pageTitle">
-      <span>店铺优惠券</span>
-      <div style="float:right">
-        <el-input style="width:150px" placeholder="关键字" size="mini" v-model="filter1" clearable></el-input>
-        <el-button @click="searchData" type="primary" plain size="mini">搜索</el-button>
-        <el-button @click="addRow" type="primary" size="mini">添加</el-button>
-      </div>
-    </div>
-
-    <el-table :data="tableData"  :height="totalHeight-200" row-key="id" ref="table">
-      <el-table-column type="index" min-width="50" align="center"></el-table-column>
-          <el-table-column align="center" prop="storeId" label="店铺Id" min-width="120" v-if="!storeLogin"></el-table-column>
-
-      <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>
-
-      <el-table-column align="center" prop="discountMoney" label="抵扣金额" min-width="100"></el-table-column>
+    <div>
 
-      <el-table-column align="center" prop="limitMoney" label="限制金额" min-width="100"></el-table-column>
-      <el-table-column align="center" prop="beginTime" label="开始时间" :formatter="DateFormatter" min-width="100"></el-table-column>
+        <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>
+            <el-button @click="addRow" type="primary" size="small">添加</el-button>
 
-      <el-table-column align="center" prop="endTime" label="结束时间" :formatter="DateFormatter" min-width="100"></el-table-column>
-      <el-table-column align="center" prop="useTimes" label="可用次数" min-width="100"></el-table-column>
-
-      <el-table-column align="center" prop="onShelf" label="是否上架" min-width="100">
-        <template slot-scope="scope">{{scope.row.onShelf=='Y'?'已上架':'未上架'}}</template>
-      </el-table-column>
-
-      <el-table-column align="center" prop="openFlag" label="是否首页展示" min-width="110">
-        <template slot-scope="scope">{{scope.row.openFlag=='Y'?'展示':'不展示'}}</template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" fixed="right" min-width="180">
-        <template slot-scope="scope">
-          <el-button @click="getCode(scope.row)" type="primary" size="mini" plain>优惠码</el-button>
-          <el-button @click="editRow(scope.row)" size="mini" plain>编辑</el-button>
-          
-        </template>
-      </el-table-column>
-    </el-table>
+        </div>
 
-      <div class="pagination-wrapper">
-            
-            <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-table :data="tableData" :height="tableHeight" row-key="id"
+            ref="table">
+            <el-table-column type="index" min-width="50" align="center">
+            </el-table-column>
+            <el-table-column align="center" prop="storeId" label="店铺Id"
+                min-width="120" v-if="!storeLogin"></el-table-column>
+
+            <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>
+
+            <el-table-column align="center" prop="discountMoney" label="抵扣金额"
+                min-width="100"></el-table-column>
+
+            <el-table-column align="center" prop="limitMoney" label="限制金额"
+                min-width="100"></el-table-column>
+            <el-table-column align="center" prop="beginTime" label="开始时间"
+                :formatter="DateFormatter" min-width="100"></el-table-column>
+
+            <el-table-column align="center" prop="endTime" label="结束时间"
+                :formatter="DateFormatter" min-width="100"></el-table-column>
+            <el-table-column align="center" prop="useTimes" label="可用次数"
+                min-width="100"></el-table-column>
+
+            <el-table-column align="center" prop="onShelf" label="是否上架"
+                min-width="100">
+                <template
+                    slot-scope="scope">{{scope.row.onShelf=='Y'?'已上架':'未上架'}}</template>
+            </el-table-column>
+
+            <el-table-column align="center" prop="openFlag" label="是否首页展示"
+                min-width="110">
+                <template
+                    slot-scope="scope">{{scope.row.openFlag=='Y'?'展示':'不展示'}}</template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" fixed="right"
+                min-width="180">
+                <template slot-scope="scope">
+                    
+                    <el-button @click="editRow(scope.row)" size="mini" type="primary" plain>编辑
+                    </el-button>
+                    <el-button @click="getCode(scope.row)" type="success"
+                        size="mini" plain>优惠码</el-button>
+
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <div class="pagination-wrapper">
+
+            <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="dialogVisible" width="800px" :top="totalHeight*0.1+'px'">
-      <div>
-        <el-form :inline="true" size="mini">
-          <el-form-item>
-            <el-input v-model="searchCode" clearable placeholder="优惠券码" @change="getRowData(1)"></el-input>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="getRowData(1)">查询</el-button>
-          </el-form-item>
-          <el-form-item>
-            <el-select v-model="isReceive" placeholder="筛选" clearable style="width:100px" @change="getRowData(1)">
-              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="primary" @click="addCode" plain>添加优惠券码</el-button>
-          </el-form-item>
-          <el-form-item>
-            <el-button type="warning" @click="outPutCode" plain>导出优惠券码</el-button>
-          </el-form-item>
-        </el-form>
-      </div>
-      <el-table :data="CodetableData" :max-height="totalHeight*0.8" row-key="id" ref="table" size="mini">
-        <el-table-column prop="couponCode" align="center" label="编码" min-width="100"></el-table-column>
-
-        <el-table-column prop="receiveFlag" align="center" label="领取人" min-width="100">
-             <template slot-scope="scope">{{scope.row.userId?scope.row.userInfo.nickname:''}}</template>
-        </el-table-column>
-
-        <el-table-column prop="receiveFlag" align="center" label="是否领取" min-width="100">
-          <template slot-scope="scope">{{scope.row.receiveFlag=='Y'?'已领取':'未领取'}}</template>
-        </el-table-column>
-
-        <el-table-column prop="receiveTime" align="center" label="领取时间" :formatter="DateFormatter" min-width="100"></el-table-column>
-
-        <el-table-column prop="useFlag" align="center" label="是否使用" min-width="100">
-          <template slot-scope="scope">{{scope.row.useFlag=='Y'?'已使用':'未使用'}}</template>
-        </el-table-column>
-
-        <el-table-column prop="useTime" align="center" label="使用时间" :formatter="DateFormatter" min-width="100"></el-table-column>
-        <el-table-column label="操作" align="center" fixed="right" min-width="150">
-          <template slot-scope="scope">
-            <el-button @click="deleteRow(scope.row)" type="danger" size="mini" plain>删除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-      <span slot="footer" class="dialog-footer">
-        <el-pagination background @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next" :total="rowtotalNumber"></el-pagination>
-      </span>
-    </el-dialog>
-  </div>
+        <el-dialog title="优惠券码" :visible.sync="dialogVisible" width="800px"
+            :top="totalHeight*0.1+'px'">
+            <div>
+                <el-form :inline="true" size="mini">
+                    <el-form-item>
+                        <el-input v-model="searchCode" clearable
+                            placeholder="优惠券码" @change="getRowData(1)">
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="getRowData(1)">查询
+                        </el-button>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-select v-model="isReceive" placeholder="筛选"
+                            clearable style="width:100px"
+                            @change="getRowData(1)">
+                            <el-option v-for="item in options" :key="item.value"
+                                :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="addCode" plain>添加优惠券码
+                        </el-button>
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="warning" @click="outPutCode" plain>
+                            导出优惠券码</el-button>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <el-table :data="CodetableData" :max-height="totalHeight*0.8"
+                row-key="id" ref="table" size="mini">
+                <el-table-column prop="couponCode" align="center" label="编码"
+                    min-width="100"></el-table-column>
+
+                <el-table-column prop="receiveFlag" align="center" label="领取人"
+                    min-width="100">
+                    <template
+                        slot-scope="scope">{{scope.row.userId?scope.row.userInfo.nickname:''}}</template>
+                </el-table-column>
+
+                <el-table-column prop="receiveFlag" align="center" label="是否领取"
+                    min-width="100">
+                    <template
+                        slot-scope="scope">{{scope.row.receiveFlag=='Y'?'已领取':'未领取'}}</template>
+                </el-table-column>
+
+                <el-table-column prop="receiveTime" align="center" label="领取时间"
+                    :formatter="DateFormatter" min-width="100">
+                </el-table-column>
+
+                <el-table-column prop="useFlag" align="center" label="是否使用"
+                    min-width="100">
+                    <template
+                        slot-scope="scope">{{scope.row.useFlag=='Y'?'已使用':'未使用'}}</template>
+                </el-table-column>
+
+                <el-table-column prop="useTime" align="center" label="使用时间"
+                    :formatter="DateFormatter" min-width="100">
+                </el-table-column>
+                <el-table-column label="操作" align="center" fixed="right"
+                    min-width="150">
+                    <template slot-scope="scope">
+                        <el-button @click="deleteRow(scope.row)" type="danger"
+                            size="mini" plain>删除</el-button>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <span slot="footer" class="dialog-footer">
+                <el-pagination background @current-change="handleCurrentChange"
+                    :page-size="10" layout="total, prev, pager, next"
+                    :total="rowtotalNumber"></el-pagination>
+            </span>
+        </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";
 
 export default {
-  created() {
-    this.getData();
-  },
-  data() {
-    return {
-      totalNumber: 0,
-      totalPage: 10,
-      currentPage: 1,
-      pageSize: 10,
-      tableData: [],
-      filter1: '',
-      tableColumns: [
-        {
-          label: 'id',
-          value: 'id',
-          show: true
-        },
-        {
-          label: '名称',
-          value: 'name',
-          show: true
-        },
-        {
-          label: '描述',
-          value: 'discription',
-          show: true
-        },
-        {
-          label: '抵扣金额',
-          value: 'discountMoney',
-          show: true
+    created() {
+        this.getData();
+    },
+    data() {
+        return {
+            totalNumber: 0,
+            totalPage: 10,
+            currentPage: 1,
+            pageSize: 10,
+            tableData: [],
+            filter1: "",
+            tableColumns: [
+                {
+                    label: "id",
+                    value: "id",
+                    show: true
+                },
+                {
+                    label: "名称",
+                    value: "name",
+                    show: true
+                },
+                {
+                    label: "描述",
+                    value: "discription",
+                    show: true
+                },
+                {
+                    label: "抵扣金额",
+                    value: "discountMoney",
+                    show: true
+                },
+                {
+                    label: "限制金额",
+                    value: "limitMoney",
+                    show: true
+                },
+                {
+                    label: "类型",
+                    value: "typeFlag",
+                    show: true
+                },
+                {
+                    label: "状态",
+                    value: "statusFlag",
+                    show: true
+                },
+                {
+                    label: "有效天数",
+                    value: "availableDays",
+                    show: true
+                },
+                {
+                    label: "可用次数",
+                    value: "useTimes",
+                    show: true
+                },
+                {
+                    label: "开始时间",
+                    value: "beginTime",
+                    show: true
+                },
+                {
+                    label: "结束时间",
+                    value: "endTime",
+                    show: true
+                },
+                {
+                    label: "发表上架",
+                    value: "onShelf",
+                    show: true
+                },
+                {
+                    label: "公开标识",
+                    value: "openFlag",
+                    show: true
+                },
+                {
+                    label: "店铺ID",
+                    value: "storeId",
+                    show: true
+                }
+            ],
+            multipleMode: false,
+            showAdvancedQueryDialog: false,
+            advancedQueryFields: [],
+            showTableSortDialog: false,
+            tableSortFields: [],
+            searchMethods: ["=", "!=", ">", ">=", "<", "<=", "like"],
+            advancedQueryColumns: [
+                {
+                    label: "id",
+                    value: "id"
+                },
+                {
+                    label: "名称",
+                    value: "name"
+                },
+                {
+                    label: "描述",
+                    value: "discription"
+                },
+                {
+                    label: "抵扣金额",
+                    value: "discount_money"
+                },
+                {
+                    label: "限制金额",
+                    value: "limit_money"
+                },
+                {
+                    label: "类型",
+                    value: "type_flag"
+                },
+                {
+                    label: "状态",
+                    value: "status_flag"
+                },
+                {
+                    label: "有效天数",
+                    value: "available_days"
+                },
+                {
+                    label: "可用次数",
+                    value: "use_times"
+                },
+                {
+                    label: "开始时间",
+                    value: "begin_time"
+                },
+                {
+                    label: "结束时间",
+                    value: "end_time"
+                },
+                {
+                    label: "发表上架",
+                    value: "on_shelf"
+                },
+                {
+                    label: "公开标识",
+                    value: "open_flag"
+                },
+                {
+                    label: "店铺ID",
+                    value: "store_id"
+                }
+            ],
+            advancedQuerySearchKey: "",
+            orderByStr: "",
+            imgSrc: "",
+            imageDialogVisible: false,
+            dialogVisible: false,
+            CodetableData: [],
+            RowcurrentPage: 1,
+            rowtotalNumber: 0,
+            codeRowId: 0,
+            searchCode: "",
+            isReceive: "",
+            options: [
+                {
+                    label: "已领取",
+                    value: "Y"
+                },
+                {
+                    label: "未领取",
+                    value: "N"
+                }
+            ]
+        };
+    },
+    computed: {
+        ...mapState([
+            "userInfo",
+            "totalHeight",
+            "storeId",
+            "tableHeight",
+            "storeLogin"
+        ]),
+        selection() {
+            return this.$refs.table.selection.map(i => i.id);
+        }
+    },
+    watch: {
+        storeId() {
+            this.currentPage = 1;
+            this.getData();
+        }
+    },
+    methods: {
+        pageSizeChange(size) {
+            this.currentPage = 1;
+            this.pageSize = size;
+            this.getData();
         },
-        {
-          label: '限制金额',
-          value: 'limitMoney',
-          show: true
+        currentPageChange(page) {
+            this.currentPage = page;
+            this.getData();
         },
-        {
-          label: '类型',
-          value: 'typeFlag',
-          show: true
+        getData() {
+            var data = {
+                currentPage: this.currentPage,
+                pageNumber: this.pageSize,
+                searchKey: this.filter1,
+                advancedQuery: this.advancedQuerySearchKey,
+                orderByStr: this.orderByStr,
+                storeId: this.storeId || ""
+            };
+
+            if (this.$route.query.column) {
+                var tempColumn = this.$route.query.column;
+                data[tempColumn.split(",")[1]] = tempColumn.split(",")[0];
+            }
+
+            this.$http
+                .get({
+                    url: "/couponInfo/page",
+                    data: data
+                })
+                .then(res => {
+                    if (res.success) {
+                        this.totalNumber = res.data.page.totalNumber;
+                        this.tableData = res.data.pp;
+                    }
+                });
         },
-        {
-          label: '状态',
-          value: 'statusFlag',
-          show: true
+        isColumnShow(column) {
+            var row = this.tableColumns.find(i => i.value === column);
+            return row ? row.show : false;
         },
-        {
-          label: '有效天数',
-          value: 'availableDays',
-          show: true
+        toggleMultipleMode(multipleMode) {
+            this.multipleMode = multipleMode;
+            if (!multipleMode) {
+                this.$refs.table.clearSelection();
+            }
         },
-        {
-          label: '可用次数',
-          value: 'useTimes',
-          show: true
+        addRow() {
+            this.$router.push({
+                path: "/couponInfo"
+            });
         },
-        {
-          label: '开始时间',
-          value: 'beginTime',
-          show: true
+        editRow(row) {
+            this.$router.push({
+                path: "/couponInfo",
+                query: {
+                    id: row.id
+                }
+            });
         },
-        {
-          label: '结束时间',
-          value: 'endTime',
-          show: true
+        operation1() {
+            this.$notify({
+                title: "提示",
+                message: this.selection
+            });
         },
-        {
-          label: '发表上架',
-          value: 'onShelf',
-          show: true
+        operation2() {
+            this.$message("操作2");
         },
-        {
-          label: '公开标识',
-          value: 'openFlag',
-          show: true
+        addField() {
+            this.advancedQueryFields.push({
+                link: "AND",
+                name: "",
+                searchMethod: "=",
+                value: ""
+            });
         },
-        {
-          label: '店铺ID',
-          value: 'storeId',
-          show: true
+        removeField(i) {
+            if (this.advancedQueryFields.length > 0) {
+                this.advancedQueryFields.splice(i, 1);
+            }
         },
-      ],
-      multipleMode: false,
-      showAdvancedQueryDialog: false,
-      advancedQueryFields: [],
-      showTableSortDialog: false,
-      tableSortFields: [],
-      searchMethods: ['=', '!=', '>', '>=', '<', '<=', 'like'],
-      advancedQueryColumns: [
-        {
-          label: 'id',
-          value: 'id'
+        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;
         },
-        {
-          label: '名称',
-          value: 'name'
+        addSortField() {
+            this.tableSortFields.push({
+                name: "",
+                order: "asc"
+            });
         },
-        {
-          label: '描述',
-          value: 'discription'
+        removeSortField(i) {
+            if (this.tableSortFields.length > 0) {
+                this.tableSortFields.splice(i, 1);
+            }
         },
-        {
-          label: '抵扣金额',
-          value: 'discount_money'
+        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;
         },
-        {
-          label: '限制金额',
-          value: 'limit_money'
+        exportExcel() {
+            window.location.href =
+                this.$baseUrl +
+                "/couponInfo/exportExcel?searchKey=" +
+                this.filter1 +
+                "&advancedQuery=" +
+                this.advancedQuerySearchKey +
+                "&orderByStr=" +
+                this.orderByStr;
         },
-        {
-          label: '类型',
-          value: 'type_flag'
+        searchData() {
+            this.currentPage = 1;
+            this.getData();
         },
-        {
-          label: '状态',
-          value: 'status_flag'
+
+        DateTimeFormatter(row, column, cellValue) {
+            if (cellValue) {
+                return format(cellValue, "YYYY/MM/DD HH:mm", { locale: zh });
+            }
         },
-        {
-          label: '有效天数',
-          value: 'available_days'
+        DateFormatter(row, column, cellValue) {
+            if (cellValue) {
+                return format(cellValue, "YYYY/MM/DD", { locale: zh });
+            }
         },
-        {
-          label: '可用次数',
-          value: 'use_times'
+        showImg(img) {
+            this.imgSrc = img;
+            this.imageDialogVisible = true;
         },
-        {
-          label: '开始时间',
-          value: 'begin_time'
+        getCode(row) {
+            this.codeRowId = row.id;
+            this.searchCode = "";
+            this.isReceive = "";
+            this.getRowData(1);
+            this.dialogVisible = true;
         },
-        {
-          label: '结束时间',
-          value: 'end_time'
+        handleCurrentChange(page) {
+            this.getRowData(page);
         },
-        {
-          label: '发表上架',
-          value: 'on_shelf'
+        outPutCode() {
+            window.location.href =
+                this.$baseUrl +
+                "/couponDetail/exportExcel?couponId=" +
+                this.codeRowId +
+                "&searchKey=" +
+                this.searchCode +
+                "&receiveFlag=" +
+                this.isReceive;
         },
-        {
-          label: '公开标识',
-          value: 'open_flag'
+        addCode() {
+            this.$prompt("请输入添加的优惠券码的数量", "添加优惠券码", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                inputPattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/,
+                inputErrorMessage: "请输入数字"
+            })
+                .then(({ value }) => {
+                    this.$http
+                        .post({
+                            url: "/couponDetail/create",
+                            data: {
+                                couponId: this.codeRowId,
+                                createNum: value
+                            }
+                        })
+                        .then(res => {
+                            if (res.success) {
+                                this.$message({
+                                    message: "生成成功！",
+                                    type: "success"
+                                });
+                                this.getRowData(1);
+                            }
+                        });
+                })
+                .catch(() => {});
         },
-        {
-          label: '店铺ID',
-          value: 'store_id'
+        getRowData(page) {
+            if (page) {
+                this.RowcurrentPage = page;
+            }
+            var data = {
+                currentPage: this.RowcurrentPage,
+                pageNumber: 10,
+                couponId: this.codeRowId
+            };
+            if (this.searchCode) {
+                data.searchKey = this.searchCode;
+            }
+            if (this.isReceive) {
+                data.receiveFlag = this.isReceive;
+            }
+            this.$http
+                .get({
+                    url: "/couponDetail/page",
+                    data: data
+                })
+                .then(res => {
+                    if (res.success) {
+                        this.rowtotalNumber = res.data.page.totalNumber;
+                        this.CodetableData = res.data.pp;
+                    }
+                });
         },
-      ],
-      advancedQuerySearchKey: '',
-      orderByStr: '',
-      imgSrc: '',
-      imageDialogVisible: false,
-      dialogVisible: false,
-      CodetableData: [],
-      RowcurrentPage: 1,
-      rowtotalNumber: 0,
-      codeRowId: 0,
-      searchCode: '',
-      isReceive: '',
-      options: [{
-        label: '已领取',
-        value: 'Y'
-      },
-      {
-        label: '未领取',
-        value: "N"
-      }]
-    }
-  },
-  computed: {
-    ...mapState(['userInfo', 'totalHeight','storeId','tableHeight','storeLogin',]),
-    selection() {
-      return this.$refs.table.selection.map(i => i.id);
-    }
-  },
-  watch:{
-      storeId(){
-          this.currentPage = 1;
-          this.getData()
-      }
-  },
-  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||''
-      }
-
-      if (this.$route.query.column) {
-        var tempColumn = this.$route.query.column;
-        data[tempColumn.split(',')[1]] = tempColumn.split(',')[0];
-      }
-
-      this.$http.get({
-        url: '/couponInfo/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();
-      }
-    },
-    addRow() {
-      this.$router.push({
-        path: '/couponInfo',
-      })
-    },
-    editRow(row) {
-      this.$router.push({
-        path: '/couponInfo',
-        query: {
-          id: row.id,
+        deleteRow(row) {
+            this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+                type: "error"
+            })
+                .then(() => {
+                    return this.$http.post({
+                        url: "/couponDetail/del",
+                        data: { id: row.id }
+                    });
+                })
+                .then(() => {
+                    this.$message.success("删除成功");
+                    this.getRowData();
+                })
+                .catch(action => {});
         }
-      })
-    },
-    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 + "/couponInfo/exportExcel?searchKey="
-        + this.filter1 + "&advancedQuery=" + this.advancedQuerySearchKey + "&orderByStr=" + this.orderByStr;
-    },
-    searchData() {
-      this.currentPage = 1;
-      this.getData();
-    },
-
-    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;
-    },
-    getCode(row) {
-
-      this.codeRowId = row.id
-      this.searchCode = ''
-      this.isReceive = ''
-      this.getRowData(1)
-      this.dialogVisible = true
-    },
-    handleCurrentChange(page) {
-      this.getRowData(page)
-    },
-    outPutCode() {
-      window.location.href = this.$baseUrl + '/couponDetail/exportExcel?couponId=' + this.codeRowId + '&searchKey=' + this.searchCode + '&receiveFlag=' + this.isReceive
-    },
-    addCode() {
-      this.$prompt('请输入添加的优惠券码的数量', '添加优惠券码', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        inputPattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/,
-        inputErrorMessage: '请输入数字'
-      }).then(({ value }) => {
-        this.$http.post({
-          url: '/couponDetail/create',
-          data: {
-            couponId: this.codeRowId,
-            createNum: value
-          }
-        }).then(res => {
-          if (res.success) {
-            this.$message({
-              message: '生成成功！',
-              type: 'success'
-            });
-            this.getRowData(1)
-          }
-        })
-      }).catch(() => {
-
-      });
-    },
-    getRowData(page) {
-      if (page) {
-        this.RowcurrentPage = page
-      }
-      var data = {
-        currentPage: this.RowcurrentPage,
-        pageNumber: 10,
-        couponId: this.codeRowId
-      }
-      if (this.searchCode) {
-        data.searchKey = this.searchCode
-      }
-      if (this.isReceive) {
-        data.receiveFlag = this.isReceive
-      }
-      this.$http.get({
-        url: '/couponDetail/page',
-        data: data
-      }).then(res => {
-        if (res.success) {
-          this.rowtotalNumber = res.data.page.totalNumber;
-          this.CodetableData = res.data.pp;
-        }
-      })
-    },
-    deleteRow(row) {
-      this.$alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' }).then(() => {
-        return this.$http.post({
-          url: '/couponDetail/del',
-          data: { id: row.id }
-        })
-      }).then(() => {
-        this.$message.success('删除成功');
-        this.getRowData();
-      }).catch(action => {
-
-      })
-    },
-
-  }
-}
+    }
+};
 </script>
 <style lang="less" scoped>
-.couponInfoContainer {
-  background: rgba(255, 255, 255, 1);
-  border-radius: 4px;
-  border: 1px solid rgba(234, 234, 234, 1);
-  min-height: 612px;
-  padding: 0 12px 20px;
-
-  .pageTitle {
-    font-size: 14px;
-    
-    font-weight: bold;
-    color: rgba(51, 51, 51, 1);
-    line-height: 19px;
-    padding: 21px 0 20px;
-    border-bottom: 1px solid #ebebeb;
-  }
-}
+
 </style>

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

@@ -0,0 +1,145 @@
+<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/ProductInfos.vue

@@ -6,142 +6,213 @@
                 <el-option v-for="item in storeInfos" :key="item.id" :label="item.storeName" :value="item.id">
                 </el-option>
             </el-select> -->
-            <el-select v-model="onShelfFlag" clearable filterable placeholder="上下架" @change="storeIdChange" size="small" style="width:120px">
+
+            <div>
+                <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>
+                </el-radio-group>
+
+            </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="item.id" v-for="item in itemTypes"
+                        :key="item.id">{{item.typeName}}</el-radio-button>
+                </el-radio-group>
+            </div>
+            <!-- <el-select v-model="onShelfFlag" clearable filterable
+                placeholder="上下架" @change="storeIdChange" size="small"
+                style="width:120px">
                 <el-option key="N" label="下架" value="N">
                 </el-option>
                 <el-option key="Y" label="上架" value="Y">
                 </el-option>
-            </el-select>
-            <el-select v-model="itemType" clearable filterable placeholder="类目" @change="storeIdChange" size="small" style="width:120px">
-                <el-option v-for="item in itemTypes" :key="item.id" :label="item.typeName" :value="item.id">
+            </el-select> -->
+            <!-- <el-select v-model="itemType" clearable filterable placeholder="类目"
+                @change="storeIdChange" size="small" style="width:120px">
+                <el-option v-for="item in itemTypes" :key="item.id"
+                    :label="item.typeName" :value="item.id">
                 </el-option>
-            </el-select>
-            <el-input placeholder="关键字" v-model="filter1" clearable class="filter-item" size="small" style="width:120px"></el-input>
-            <el-button @click="searchData" type="primary" size="small" icon="el-icon-search" class="filter-item">搜索
+            </el-select> -->
+            <el-input placeholder="关键字" v-model="filter1" clearable
+                class="filter-item" size="small" style="width:120px"></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 @click="showTableSortDialog = !showTableSortDialog"
+                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-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>
 
-            <el-table-column v-if="isColumnShow('serviceType')" align="center" :show-overflow-tooltip='true' prop="serviceType" label="大类" :formatter="ServiceTypeFormatter" min-width="100">
+            <el-table-column v-if="isColumnShow('serviceType')" align="center"
+                :show-overflow-tooltip='true' prop="serviceType" label="大类"
+                :formatter="ServiceTypeFormatter" min-width="100">
             </el-table-column>
 
             <!-- <el-table-column v-if="isColumnShow('subclass')" align="center" :show-overflow-tooltip='true' prop="subclass" label="小类" :formatter="ServiceTypeDetailFormatter" min-width="100">
             </el-table-column> -->
 
-            <el-table-column v-if="isColumnShow('title')" align="center" :show-overflow-tooltip='true' prop="title" label="标题" min-width="100">
+            <el-table-column v-if="isColumnShow('title')" align="center"
+                :show-overflow-tooltip='true' prop="title" 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="150">
                 <template slot-scope="{row}" v-if="row.image">
-                    <img :src="row.image+'?x-oss-process=image/resize,m_pad,h_60,w_60,color_FFFFFF'" style="cursor:pointer" @click="showImg(row.image)" />
+                    <img :src="row.image+'?x-oss-process=image/resize,m_pad,h_120,w_120'"
+                        style="cursor:pointer" @click="showImg(row.image)" />
                 </template>
 
             </el-table-column>
 
-            <el-table-column v-if="isColumnShow('serviceDetail')" align="center" :show-overflow-tooltip='true' prop="serviceDetail" label="服务详情" min-width="100">
+            <el-table-column v-if="isColumnShow('serviceDetail')" align="center"
+                :show-overflow-tooltip='true' prop="serviceDetail" label="服务详情"
+                min-width="100">
             </el-table-column>
 
-            <el-table-column v-if="isColumnShow('inventory')" align="center" :show-overflow-tooltip='true' prop="inventory" label="库存" min-width="100">
+            <el-table-column v-if="isColumnShow('inventory')" align="center"
+                :show-overflow-tooltip='true' prop="inventory" label="库存"
+                min-width="100">
             </el-table-column>
 
-            <el-table-column v-if="isColumnShow('onShelf')" align="center" prop="onShelf" label="上下架" min-width="100">
+            <el-table-column v-if="isColumnShow('onShelf')" align="center"
+                prop="onShelf" label="上下架" min-width="100">
                 <template slot-scope="{row}">
                     {{row.onShelf=='Y'?'上架':'下架'}}
                 </template>
             </el-table-column>
 
-            <el-table-column v-if="isColumnShow('useFlag')" align="center" prop="useFlag" label="可用" min-width="100">
+            <el-table-column v-if="isColumnShow('useFlag')" align="center"
+                prop="useFlag" label="可用" min-width="100">
                 <template slot-scope="{row}">
                     {{row.useFlag=='Y'?'可用':'不可用'}}
                 </template>
             </el-table-column>
 
-            <el-table-column v-if="isColumnShow('hotFlag')" align="center" prop="hotFlag" label="热门" :formatter="YNFormatter" min-width="100">
+            <el-table-column v-if="isColumnShow('hotFlag')" align="center"
+                prop="hotFlag" label="热门" :formatter="YNFormatter"
+                min-width="100">
                 <template slot-scope="{row}">
                     {{row.hotFlag==1?'热门':'不热门'}}
                 </template>
             </el-table-column>
 
-            <el-table-column v-if="isColumnShow('homeFlag')" align="center" prop="homeFlag" label="首页" :formatter="YNFormatter" min-width="100">
+            <el-table-column v-if="isColumnShow('homeFlag')" align="center"
+                prop="homeFlag" label="首页" :formatter="YNFormatter"
+                min-width="100">
                 <template slot-scope="{row}">
                     {{row.homeFlag==1?'是':'否'}}
                 </template>
             </el-table-column>
 
-            <el-table-column v-if="isColumnShow('rank')" align="center" prop="rank" label="排序" min-width="100">
+            <el-table-column v-if="isColumnShow('rank')" align="center"
+                prop="rank" label="排序" min-width="100">
             </el-table-column>
 
-            <el-table-column v-if="isColumnShow('storeId')" align="center" prop="storeId" label="店铺ID" min-width="100">
+            <el-table-column v-if="isColumnShow('storeId')" align="center"
+                prop="storeId" label="店铺ID" min-width="100">
             </el-table-column>
 
-            <el-table-column v-if="isColumnShow('typeFlag')" align="center" prop="typeFlag" label="类型" :formatter="TypeFlagFormatter" min-width="100">
+            <el-table-column v-if="isColumnShow('typeFlag')" align="center"
+                prop="typeFlag" label="类型" :formatter="TypeFlagFormatter"
+                min-width="100">
             </el-table-column>
 
-            <el-table-column v-if="isColumnShow('salesVolume')" align="center" prop="salesVolume" label="销量" min-width="100">
+            <el-table-column v-if="isColumnShow('salesVolume')" align="center"
+                prop="salesVolume" label="销量" min-width="100">
             </el-table-column>
-            <el-table-column label="操作" align="center" fixed="right" min-width="170">
+            <el-table-column label="操作" align="center" fixed="right"
+                min-width="170">
                 <template slot-scope="scope">
                     <!-- <el-button @click="detailRow(scope.row)" type="primary" size="mini" plain>详情</el-button> -->
 
-                    <el-button @click="editRow(scope.row)" size="mini" plain>编辑</el-button>
+                    <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-dropdown>
+                    <!-- <el-dropdown>
                         <el-button type="warning" size="mini" plain>
                             更多
                             <i class="el-icon-arrow-down el-icon--right"></i>
                         </el-button>
                         <el-dropdown-menu slot="dropdown">
-                            <el-button @click="$router.push({path:'/productImages',query:{column:scope.row.id+',productId'}})" type="primary" size="small" plain>图片</el-button>
-                            <el-button @click="$router.push({path:'/productParameters',query:{column:scope.row.id+',productId'}})" type="primary" size="small" plain>详情</el-button>
-                            <el-button @click="$router.push({path:'/productComments',query:{column:scope.row.id+',productId'}})" type="primary" size="small" plain>评论</el-button>
+                            <el-button
+                                @click="$router.push({path:'/productImages',query:{column:scope.row.id+',productId'}})"
+                                type="primary" size="small" plain>图片</el-button>
+                            <el-button
+                                @click="$router.push({path:'/productParameters',query:{column:scope.row.id+',productId'}})"
+                                type="primary" size="small" plain>详情</el-button>
+                            <el-button
+                                @click="$router.push({path:'/productComments',query:{column:scope.row.id+',productId'}})"
+                                type="primary" size="small" plain>评论</el-button>
 
                         </el-dropdown-menu>
-                    </el-dropdown>
+                    </el-dropdown> -->
 
                 </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">
@@ -153,14 +224,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>
@@ -171,26 +247,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>
@@ -206,27 +287,31 @@
                 </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>
 
-        <el-dialog title="查看图片" :visible.sync="imageDialogVisible" width="440px" size="small">
-            <img :src="imgSrc+'?x-oss-process=image/resize,m_pad,h_400,w_400,color_FFFFFF'" alt="">
+        <el-dialog title="查看图片" :visible.sync="imageDialogVisible" width="440px"
+            size="small">
+            <img :src="imgSrc+'?x-oss-process=image/resize,m_pad,h_400,w_400,color_FFFFFF'"
+                alt="">
         </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";
 
 export default {
     created() {
@@ -256,7 +341,7 @@ export default {
 
         this.$http
             .get({
-                url: '/itemType/all',
+                url: "/itemType/all"
             })
             .then(res => {
                 if (res.success) {
@@ -273,166 +358,166 @@ export default {
             currentPage: 1,
             pageSize: 20,
             tableData: [],
-            filter1: '',
-            filter2: '',
+            filter1: "",
+            filter2: "",
             tableColumns: [
                 {
-                    label: '大类',
-                    value: 'serviceType',
-                    show: true,
+                    label: "大类",
+                    value: "serviceType",
+                    show: true
                 },
                 {
-                    label: '小类',
-                    value: 'subclass',
-                    show: false,
+                    label: "小类",
+                    value: "subclass",
+                    show: false
                 },
                 {
-                    label: '标题',
-                    value: 'title',
-                    show: true,
+                    label: "标题",
+                    value: "title",
+                    show: true
                 },
                 {
-                    label: '主图',
-                    value: 'image',
-                    show: true,
+                    label: "主图",
+                    value: "image",
+                    show: true
                 },
                 {
-                    label: '服务详情',
-                    value: 'serviceDetail',
-                    show: true,
+                    label: "服务详情",
+                    value: "serviceDetail",
+                    show: true
                 },
                 {
-                    label: '库存',
-                    value: 'inventory',
-                    show: true,
+                    label: "库存",
+                    value: "inventory",
+                    show: true
                 },
                 {
-                    label: '上下架',
-                    value: 'onShelf',
-                    show: true,
+                    label: "上下架",
+                    value: "onShelf",
+                    show: true
                 },
                 {
-                    label: '可用',
-                    value: 'useFlag',
-                    show: true,
+                    label: "可用",
+                    value: "useFlag",
+                    show: true
                 },
                 {
-                    label: '热门',
-                    value: 'hotFlag',
-                    show: true,
+                    label: "热门",
+                    value: "hotFlag",
+                    show: true
                 },
                 {
-                    label: '首页',
-                    value: 'homeFlag',
-                    show: true,
+                    label: "首页",
+                    value: "homeFlag",
+                    show: true
                 },
                 {
-                    label: '排序',
-                    value: 'rank',
-                    show: true,
+                    label: "排序",
+                    value: "rank",
+                    show: true
                 },
                 {
-                    label: '店铺',
-                    value: 'storeId',
-                    show: true,
+                    label: "店铺",
+                    value: "storeId",
+                    show: true
                 },
                 {
-                    label: '类型',
-                    value: 'typeFlag',
-                    show: true,
+                    label: "类型",
+                    value: "typeFlag",
+                    show: true
                 },
                 {
-                    label: '销量',
-                    value: 'salesVolume',
-                    show: true,
-                },
+                    label: "销量",
+                    value: "salesVolume",
+                    show: true
+                }
             ],
             multipleMode: false,
             showAdvancedQueryDialog: false,
             advancedQueryFields: [],
             showTableSortDialog: false,
             tableSortFields: [],
-            searchMethods: ['=', '!=', '>', '>=', '<', '<=', 'like'],
+            searchMethods: ["=", "!=", ">", ">=", "<", "<=", "like"],
             advancedQueryColumns: [
                 {
-                    label: '大类',
-                    value: 'service_type',
+                    label: "大类",
+                    value: "service_type"
                 },
                 {
-                    label: '小类',
-                    value: 'subclass',
+                    label: "小类",
+                    value: "subclass"
                 },
                 {
-                    label: '标题',
-                    value: 'title',
+                    label: "标题",
+                    value: "title"
                 },
                 {
-                    label: '主图',
-                    value: 'image',
+                    label: "主图",
+                    value: "image"
                 },
                 {
-                    label: '服务详情',
-                    value: 'service_detail',
+                    label: "服务详情",
+                    value: "service_detail"
                 },
                 {
-                    label: '库存',
-                    value: 'inventory',
+                    label: "库存",
+                    value: "inventory"
                 },
                 {
-                    label: '上下架',
-                    value: 'on_shelf',
+                    label: "上下架",
+                    value: "on_shelf"
                 },
                 {
-                    label: '可用',
-                    value: 'use_flag',
+                    label: "可用",
+                    value: "use_flag"
                 },
                 {
-                    label: '热门',
-                    value: 'hot_flag',
+                    label: "热门",
+                    value: "hot_flag"
                 },
                 {
-                    label: '首页',
-                    value: 'home_flag',
+                    label: "首页",
+                    value: "home_flag"
                 },
                 {
-                    label: '排序',
-                    value: 'rank',
+                    label: "排序",
+                    value: "rank"
                 },
                 {
-                    label: '店铺',
-                    value: 'store_id',
+                    label: "店铺",
+                    value: "store_id"
                 },
                 {
-                    label: '类型',
-                    value: 'type_flag',
+                    label: "类型",
+                    value: "type_flag"
                 },
                 {
-                    label: '销量',
-                    value: 'sales_volume',
-                },
+                    label: "销量",
+                    value: "sales_volume"
+                }
             ],
-            advancedQuerySearchKey: '',
-            orderByStr: '',
-            imgSrc: '',
+            advancedQuerySearchKey: "",
+            orderByStr: "",
+            imgSrc: "",
             imageDialogVisible: false,
             serviceTypes: [],
             serviceTypeDetails: {},
             storeInfos: [],
-            onShelfFlag: '',
-            itemType: '',
-            itemTypes: [],
+            onShelfFlag: "",
+            itemType: "",
+            itemTypes: []
         };
     },
     computed: {
-        ...mapState(['tableHeight', 'storeId']),
+        ...mapState(["tableHeight", "storeId"]),
         selection() {
             return this.$refs.table.selection.map(i => i.id);
-        },
+        }
     },
     watch: {
         storeId() {
             this.searchData();
-        },
+        }
     },
     methods: {
         pageSizeChange(size) {
@@ -451,20 +536,20 @@ export default {
                 searchKey: this.filter1,
                 advancedQuery: this.advancedQuerySearchKey,
                 orderByStr: this.orderByStr,
-                storeId: this.storeId || '',
+                storeId: this.storeId || "",
                 onShelf: this.onShelfFlag,
-                serviceType: this.itemType,
+                serviceType: this.itemType
             };
 
             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: '/productInfo/page',
-                    data: data,
+                    url: "/productInfo/page",
+                    data: data
                 })
                 .then(res => {
                     if (res.success) {
@@ -485,35 +570,35 @@ export default {
         },
         editRow(row) {
             this.$router.push({
-                path: '/productInfo',
+                path: "/productInfo",
                 query: {
                     id: row.id,
-                    column: this.$route.query.column,
-                },
+                    column: this.$route.query.column
+                }
             });
         },
         detailRow(row) {
             window.open(
-                'https://www.tutuxiang.com/index#/product?id=' +
+                "https://www.tutuxiang.com/index#/product?id=" +
                     row.id +
-                    '&breHref=%E9%A6%96%E9%A1%B5',
+                    "&breHref=%E9%A6%96%E9%A1%B5"
             );
         },
         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) {
@@ -522,7 +607,7 @@ export default {
             }
         },
         advancedQuery() {
-            this.advancedQuerySearchKey = '';
+            this.advancedQuerySearchKey = "";
 
             if (this.advancedQueryFields.length > 0) {
                 var templist = [];
@@ -536,18 +621,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("_;");
                 }
             }
 
@@ -556,8 +641,8 @@ export default {
         },
         addSortField() {
             this.tableSortFields.push({
-                name: '',
-                order: 'asc',
+                name: "",
+                order: "asc"
             });
         },
         removeSortField(i) {
@@ -566,20 +651,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("_;");
                 }
             }
 
@@ -589,11 +674,11 @@ export default {
         exportExcel() {
             window.location.href =
                 this.$baseUrl +
-                '/productInfo/exportExcel?searchKey=' +
+                "/productInfo/exportExcel?searchKey=" +
                 this.filter1 +
-                '&advancedQuery=' +
+                "&advancedQuery=" +
                 this.advancedQuerySearchKey +
-                '&orderByStr=' +
+                "&orderByStr=" +
                 this.orderByStr;
         },
         searchData() {
@@ -601,40 +686,40 @@ export default {
             this.getData();
         },
         deleteRow(row) {
-            this.$alert('删除将无法恢复，确认要删除么？', '警告', {
-                type: 'error',
+            this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+                type: "error"
             })
                 .then(() => {
                     return this.$http.post({
-                        url: '/productInfo/del',
-                        data: { id: row.id },
+                        url: "/productInfo/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 });
             }
         },
         ServiceTypeFormatter(row, column, cellValue) {
             if (cellValue) {
-                var serviceType = '';
+                var serviceType = "";
                 this.itemTypes.forEach(item => {
                     if (item.id == Number(cellValue)) {
                         serviceType = item.typeName;
@@ -647,7 +732,7 @@ export default {
 
         ServiceTypeDetailFormatter(row, column, cellValue) {
             if (cellValue && row.serviceType) {
-                var serviceTypeDetail = '';
+                var serviceTypeDetail = "";
                 if (this.serviceTypeDetails[row.serviceType]) {
                     this.serviceTypeDetails[row.serviceType].forEach(item => {
                         if (item.id == Number(cellValue)) {
@@ -661,30 +746,30 @@ export default {
         },
 
         YNFormatter(row, column, cellValue) {
-            return cellValue ? 'Y' : 'N';
+            return cellValue ? "Y" : "N";
         },
         TypeFlagFormatter(row, column, cellValue) {
-            var valueStr = '';
+            var valueStr = "";
             switch (cellValue) {
                 case 0:
-                    valueStr = '修图';
+                    valueStr = "修图";
                     break;
                 case 1:
-                    valueStr = '实体商品';
+                    valueStr = "实体商品";
                     break;
             }
 
             return valueStr;
         },
         showImg(img) {
-            this.imgSrc = img + '?x-oss-process=image/resize,l_500';
+            this.imgSrc = img ;
             this.imageDialogVisible = true;
         },
         storeIdChange() {
             this.currentPage = 1;
             this.getData();
-        },
-    },
+        }
+    }
 };
 </script>
 <style lang="less" scoped>

src/main/vue/src/pages/StoreServiceLevels.vue

@@ -2,149 +2,130 @@
     <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.id" :label="item.name" :value="item.id">
+            <el-select v-model="typeFlag" clearable filterable placeholder="类型"
+                @change="searchData" size="small" style="width:120px">
+                <el-option v-for="item in typeFlagOptions" :key="item.id"
+                    :label="item.name" :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-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:'/storeServiceLevel',query:{column:$route.query.column}})" type="primary"
-                       size="small" icon="el-icon-edit"
-                       class="filter-item">添加
+            <el-button
+                @click="$router.push({path:'/storeServiceLevel',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
-                             v-if="isColumnShow('typeFlag')"
-                             prop="typeFlag"
-                             label="类型"
-                             min-width="100"
-                             :formatter="TypeFlagFormatter">
+            <el-table-column v-if="isColumnShow('typeFlag')" prop="typeFlag"
+                label="类型" min-width="100" :formatter="TypeFlagFormatter">
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('levelName')"
-                             prop="levelName"
-                             label="级别"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('levelName')" prop="levelName"
+                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 v-if="isColumnShow('miniId')" prop="miniId"
+                label="小程序" min-width="100">
             </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('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="220">
+            <el-table-column label="操作" align="center" fixed="right"
+                min-width="220">
                 <template slot-scope="scope">
-                    <el-button @click="$router.push({path:'/storeServices',query:{column:scope.row.id+',typeLevel'}})" type="primary" size="small" plain>服务
+                    <el-button
+                        @click="$router.push({path:'/storeServices',query:{column:scope.row.id+',typeLevel'}})"
+                        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>
+                    <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">
@@ -156,16 +137,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>
@@ -176,27 +160,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>
@@ -212,14 +200,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>
 
@@ -227,20 +217,26 @@
             <img width="100%" :src="imgSrc" alt="">
         </el-dialog>
 
+        <el-dialog title="编辑级别" :visible.sync="edit" size="small">
+            <storeServiceLevel :formData='editInfo' @close='edit=false'>
+            </storeServiceLevel>
+        </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 storeServiceLevel from "../components/StoreServiceLevel";
 
 export default {
-    name: 'StoreServiceLevels',
+    name: "StoreServiceLevels",
     created() {
         this.getData();
         this.$http
             .get({
-                url: '/storeServiceType/all',
+                url: "/storeServiceType/all"
             })
             .then(res => {
                 if (res.success) {
@@ -250,113 +246,115 @@ export default {
     },
     data() {
         return {
+            edit: false,
+            editInfo: {},
             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: 'typeFlag',
-                    show: true,
+                    label: "类型",
+                    value: "typeFlag",
+                    show: true
                 },
                 {
-                    label: '级别',
-                    value: 'levelName',
-                    show: true,
+                    label: "级别",
+                    value: "levelName",
+                    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: 'remark',
-                    show: true,
-                },
+                    label: "备注",
+                    value: "remark",
+                    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: 'type_flag',
+                    label: "类型",
+                    value: "type_flag"
                 },
                 {
-                    label: '级别',
-                    value: 'level_name',
+                    label: "级别",
+                    value: "level_name"
                 },
                 {
-                    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: 'remark',
-                },
+                    label: "备注",
+                    value: "remark"
+                }
             ],
-            advancedQuerySearchKey: '',
-            orderByStr: '',
-            imgSrc: '',
+            advancedQuerySearchKey: "",
+            orderByStr: "",
+            imgSrc: "",
             imageDialogVisible: false,
             typeFlagOptions: [],
-            typeFlag: '',
+            typeFlag: ""
         };
     },
     computed: {
-        ...mapState(['tableHeight','storeId']),
+        ...mapState(["tableHeight", "storeId"]),
         selection() {
             return this.$refs.table.selection.map(i => i.id);
-        },
+        }
     },
-     watch: {
+    watch: {
         storeId() {
             this.searchData();
-        },
+        }
     },
     methods: {
         pageSizeChange(size) {
@@ -376,18 +374,18 @@ export default {
                 advancedQuery: this.advancedQuerySearchKey,
                 orderByStr: this.orderByStr,
                 typeFlag: this.typeFlag,
-                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: '/storeServiceLevel/page',
-                    data: data,
+                    url: "/storeServiceLevel/page",
+                    data: data
                 })
                 .then(res => {
                     if (res.success) {
@@ -407,29 +405,31 @@ export default {
             }
         },
         editRow(row) {
-            this.$router.push({
-                path: '/storeServiceLevel',
-                query: {
-                    id: row.id,
-                    column: this.$route.query.column,
-                },
-            });
+            this.editInfo = row;
+            this.edit = true;
+            // this.$router.push({
+            //     path: '/storeServiceLevel',
+            //     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) {
@@ -438,7 +438,7 @@ export default {
             }
         },
         advancedQuery() {
-            this.advancedQuerySearchKey = '';
+            this.advancedQuerySearchKey = "";
 
             if (this.advancedQueryFields.length > 0) {
                 var templist = [];
@@ -452,18 +452,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("_;");
                 }
             }
 
@@ -472,8 +472,8 @@ export default {
         },
         addSortField() {
             this.tableSortFields.push({
-                name: '',
-                order: 'asc',
+                name: "",
+                order: "asc"
             });
         },
         removeSortField(i) {
@@ -482,20 +482,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("_;");
                 }
             }
 
@@ -505,11 +505,11 @@ export default {
         exportExcel() {
             window.location.href =
                 this.$baseUrl +
-                '/storeServiceLevel/exportExcel?searchKey=' +
+                "/storeServiceLevel/exportExcel?searchKey=" +
                 this.filter1 +
-                '&advancedQuery=' +
+                "&advancedQuery=" +
                 this.advancedQuerySearchKey +
-                '&orderByStr=' +
+                "&orderByStr=" +
                 this.orderByStr;
         },
         searchData() {
@@ -517,35 +517,35 @@ export default {
             this.getData();
         },
         deleteRow(row) {
-            this.$alert('删除将无法恢复，确认要删除么？', '警告', {
-                type: 'error',
+            this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+                type: "error"
             })
                 .then(() => {
                     return this.$http.post({
-                        url: '/storeServiceLevel/del',
-                        data: { id: row.id },
+                        url: "/storeServiceLevel/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) {
@@ -553,7 +553,7 @@ export default {
             this.imageDialogVisible = true;
         },
         TypeFlagFormatter(row, column, cellValue) {
-            var valueStr = '';
+            var valueStr = "";
             this.typeFlagOptions.forEach(item => {
                 if (item.id == cellValue) {
                     valueStr = item.name;
@@ -561,8 +561,11 @@ export default {
             });
 
             return valueStr;
-        },
+        }
     },
+    components: {
+        storeServiceLevel
+    }
 };
 </script>
 <style lang="less" scoped>

src/main/vue/src/pages/StoreServiceTypes.vue

@@ -2,162 +2,168 @@
     <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:'/storeServiceType',query:{column:$route.query.column}})" type="primary"
-                       size="small" icon="el-icon-edit"
-                       class="filter-item">添加
+            <el-button
+                @click="$router.push({path:'/storeServiceType',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="expand">
+                <template slot-scope="props">
+                    <el-table :data="props.row.storeServiceLevelList"
+                        row-key="id" ref="table" border>
+
+                      
+
+                        <el-table-column prop="id" label="ID" min-width="100">
+                        </el-table-column>
+
+                        <el-table-column prop="levelName" label="级别"
+                            min-width="100">
+                        </el-table-column>
+
+                        <el-table-column prop="rank" label="排序" min-width="100">
+                        </el-table-column>
+
+                          <el-table-column label="操作" align="center"
+                            min-width="120" >
+                            <template slot-scope="scope">
+                                <el-button @click="editLevel(scope.row)"
+                                    type="primary" size="mini" plain>编辑
+                                </el-button>
+                                <el-button @click="deleteLevel(scope.row)"
+                                    type="danger" size="mini" plain>删除
+                                </el-button>
+                            </template>
+                        </el-table-column>
+
+                    </el-table>
+                </template>
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('id')"
-                             prop="id"
-                             label="ID"
-                             min-width="100">
+            <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('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('mustFlag')"
-                             prop="mustFlag"
-                             label="必填"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('mustFlag')" prop="mustFlag"
+                label="必填" min-width="100">
             </el-table-column>
-            <el-table-column
-                             v-if="isColumnShow('multiple')"
-                             prop="multiple"
-                             label="多选"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('multiple')" prop="multiple"
+                label="多选" min-width="100">
             </el-table-column>
-            <el-table-column
-                             v-if="isColumnShow('basetype')"
-                             prop="basetype"
-                             label="基础类型"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('basetype')" prop="basetype"
+                label="基础类型" min-width="100">
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('sysFlag')"
-                             prop="sysFlag"
-                             label="系统"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('sysFlag')" prop="sysFlag"
+                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('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('miniId')"
-                             prop="miniId"
-                             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
-                             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('remark')"
-                             prop="remark"
-                             label="备注"
-                             min-width="100">
-            </el-table-column>
-            <el-table-column
-                             label="操作"
-                             align="left"
-                             fixed="right"
-                             min-width="220">
+            <!-- <el-table-column v-if="isColumnShow('remark')" prop="remark"
+                label="备注" min-width="100">
+            </el-table-column> -->
+            <el-table-column label="操作" align="left" 
+                min-width="220">
                 <template slot-scope="scope">
-                    <el-button @click="$router.push({path:'/storeServiceLevels',query:{column:scope.row.id+',typeFlag'}})" type="primary" size="small" plain>级别
+                    <el-button
+                        @click="addLevel(scope.row)"
+                        type="success" size="small" plain>添加级别
+                    </el-button>
+                    <el-button @click="editRow(scope.row)" type="primary"
+                        size="mini" plain v-if="scope.row.sysFlag!='Y'">编辑
+                    </el-button>
+                    <el-button @click="deleteRow(scope.row)" type="danger"
+                        size="mini" plain v-if="scope.row.sysFlag!='Y'">删除
                     </el-button>
-                    <el-button @click="editRow(scope.row)" type="primary" size="mini" plain v-if="scope.row.sysFlag!='Y'">编辑</el-button>
-                    <el-button @click="deleteRow(scope.row)" type="danger" size="mini" plain v-if="scope.row.sysFlag!='Y'">删除</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">
@@ -169,16 +175,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>
@@ -189,27 +198,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>
@@ -225,14 +238,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>
 
@@ -240,152 +255,163 @@
             <img width="100%" :src="imgSrc" alt="">
         </el-dialog>
 
+        <el-dialog title="编辑级别" :visible.sync="edit" size="small">
+            <storeServiceLevel :editInfo='editInfo' @close='edit=false'>
+            </storeServiceLevel>
+        </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 storeServiceLevel from "../components/StoreServiceLevel";
 
 export default {
-    name: 'StoreServiceTypes',
+    name: "StoreServiceTypes",
     created() {
         this.getData();
     },
     data() {
         return {
+            edit: false,
+            editInfo: {},
             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: 'name',
-                    show: true,
+                    label: "名称",
+                    value: "name",
+                    show: true
                 },
                 {
-                    label: '必填',
-                    value: 'mustFlag',
-                    show: true,
+                    label: "必填",
+                    value: "mustFlag",
+                    show: true
                 },
                 {
-                    label: '系统',
-                    value: 'sysFlag',
-                    show: true,
+                    label: "系统",
+                    value: "sysFlag",
+                    show: true
                 },
                 {
-                    label: '多选',
-                    value: 'multiple',
-                    show: true,
+                    label: "多选",
+                    value: "multiple",
+                    show: true
                 },
                 {
-                    label: '基础类型',
-                    value: 'basetype',
-                    show: true,
+                    label: "基础类型",
+                    value: "basetype",
+                    show: true
                 },
                 {
-                    label: '用户',
-                    value: 'userId',
-                    show: true,
+                    label: "用户",
+                    value: "userId",
+                    show: true
                 },
                 {
-                    label: '店铺',
-                    value: 'storeId',
-                    show: true,
+                    label: "店铺",
+                    value: "storeId",
+                    show: true
                 },
                 {
-                    label: '小程序',
-                    value: 'miniId',
-                    show: true,
+                    label: "小程序",
+                    value: "miniId",
+                    show: true
                 },
                 {
-                    label: '排序',
-                    value: 'rank',
-                    show: true,
+                    label: "排序",
+                    value: "rank",
+                    show: true
                 },
                 {
-                    label: '备注',
-                    value: 'remark',
-                    show: true,
-                },
+                    label: "备注",
+                    value: "remark",
+                    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: 'name',
+                    label: "名称",
+                    value: "name"
                 },
                 {
-                    label: '必填',
-                    value: 'must_flag',
+                    label: "必填",
+                    value: "must_flag"
                 },
                 {
-                    label: '系统',
-                    value: 'sys_flag',
+                    label: "系统",
+                    value: "sys_flag"
                 },
                 {
-                    label: '多选',
-                    value: 'multiple',
+                    label: "多选",
+                    value: "multiple"
                 },
                 {
-                    label: '基础类型',
-                    value: 'basetype',
+                    label: "基础类型",
+                    value: "basetype"
                 },
                 {
-                    label: '用户',
-                    value: 'user_id',
+                    label: "用户",
+                    value: "user_id"
                 },
                 {
-                    label: '店铺',
-                    value: 'store_id',
+                    label: "店铺",
+                    value: "store_id"
                 },
                 {
-                    label: '小程序',
-                    value: 'mini_id',
+                    label: "小程序",
+                    value: "mini_id"
                 },
                 {
-                    label: '排序',
-                    value: 'rank',
+                    label: "排序",
+                    value: "rank"
                 },
                 {
-                    label: '备注',
-                    value: 'remark',
-                },
+                    label: "备注",
+                    value: "remark"
+                }
             ],
-            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();
         },
+        edit(){
+            this.getData()
+        }
     },
     methods: {
         pageSizeChange(size) {
@@ -404,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: '/storeServiceType/page',
-                    data: data,
+                    url: "/storeServiceType/page",
+                    data: data
                 })
                 .then(res => {
                     if (res.success) {
@@ -436,28 +462,28 @@ export default {
         },
         editRow(row) {
             this.$router.push({
-                path: '/storeServiceType',
+                path: "/storeServiceType",
                 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) {
@@ -466,7 +492,7 @@ export default {
             }
         },
         advancedQuery() {
-            this.advancedQuerySearchKey = '';
+            this.advancedQuerySearchKey = "";
 
             if (this.advancedQueryFields.length > 0) {
                 var templist = [];
@@ -480,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("_;");
                 }
             }
 
@@ -500,8 +526,8 @@ export default {
         },
         addSortField() {
             this.tableSortFields.push({
-                name: '',
-                order: 'asc',
+                name: "",
+                order: "asc"
             });
         },
         removeSortField(i) {
@@ -510,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("_;");
                 }
             }
 
@@ -533,11 +559,11 @@ export default {
         exportExcel() {
             window.location.href =
                 this.$baseUrl +
-                '/storeServiceType/exportExcel?searchKey=' +
+                "/storeServiceType/exportExcel?searchKey=" +
                 this.filter1 +
-                '&advancedQuery=' +
+                "&advancedQuery=" +
                 this.advancedQuerySearchKey +
-                '&orderByStr=' +
+                "&orderByStr=" +
                 this.orderByStr;
         },
         searchData() {
@@ -545,42 +571,77 @@ export default {
             this.getData();
         },
         deleteRow(row) {
-            this.$alert('删除将无法恢复，确认要删除么？', '警告', {
-                type: 'error',
+            this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+                type: "error"
             })
                 .then(() => {
                     return this.$http.post({
-                        url: '/storeServiceType/del',
-                        data: { id: row.id },
+                        url: "/storeServiceType/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;
         },
+        editLevel(row) {
+            this.editInfo = row;
+            this.edit = true;
+        },
+        deleteLevel(row) {
+            this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+                type: "error"
+            })
+                .then(() => {
+                    return this.$http.post({
+                        url: "/storeServiceLevel/del",
+                        data: { id: row.id }
+                    });
+                })
+                .then(() => {
+                    this.$message.success("删除成功");
+                    this.getData();
+                })
+                .catch(action => {
+                    if (action === "cancel") {
+                        this.$message.info("删除取消");
+                    } else {
+                        this.$message.error("删除失败");
+                    }
+                });
+        },
+        addLevel(row){
+            this.editInfo={
+                typeFlag:String(row.id)
+            }
+            this.edit=true;
+        }
     },
+    components: {
+        storeServiceLevel
+    }
 };
 </script>
 <style lang="less" scoped>

src/main/vue/src/pages/StoreServices.vue

@@ -2,63 +2,75 @@
     <div>
         <div class="filters-container">
 
-            <el-select v-model="typeFlag" clearable filterable placeholder="类型" @change="typeFlagChange" size="small" style="width:120px">
-                <el-option v-for="item in typeFlagOptions" :key="item.id" :label="item.name" :value="item.id">
+            <!-- <el-select v-model="typeFlag" clearable filterable placeholder="类型"
+                @change="typeFlagChange" size="small" style="width:120px">
+                <el-option v-for="item in typeFlagOptions" :key="item.id"
+                    :label="item.name" :value="item.id">
                 </el-option>
-            </el-select>
+            </el-select> -->
+            <el-button @click="goStoreServiceType" plain type="primary"
+                class="filter-item">设置服务类型
+            </el-button>
+
+            <el-tabs v-model="typeFlag" type="card" @tab-click="hanldChange">
+                <el-tab-pane :label="item.name" :name='String(item.id)'
+                    v-for="(item,index) in typeFlagOptions" :key="index">
+                </el-tab-pane>
+            </el-tabs>
 
-            <el-select v-model="typeLevel" clearable filterable placeholder="级别" @change="searchData" size="small" style="width:120px">
-                <el-option v-for="item in typeLevelOptions" :key="item.id" :label="item.levelName" :value="item.id">
+            <el-select v-model="typeLevel" clearable filterable placeholder="级别"
+                @change="searchData" size="small" style="width:120px">
+                <el-option v-for="item in typeLevelOptions" :key="item.id"
+                    :label="item.levelName" :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-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:'/storeService',query:{column:$route.query.column}})" type="primary"
-                       size="small" icon="el-icon-edit"
-                       class="filter-item">添加
+            <el-button
+                @click="$router.push({path:'/storeService',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="50">
+            <el-table-column v-if="isColumnShow('id')" prop="id" label="ID"
+                min-width="50">
             </el-table-column>
 
             <!-- <el-table-column
@@ -68,24 +80,23 @@
                              min-width="100">
             </el-table-column> -->
 
-            <el-table-column
-                             v-if="isColumnShow('storeImage')"
-                             prop="storeImage"
-                             label="店铺图"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('storeImage')" prop="storeImage"
+                label="店铺图" min-width="150">
                 <template slot-scope="{row}" v-if="row.storeImage">
-                    <img :src="row.storeImage" @click="showImg(row.storeImage)" style="width: 100px;height: 100px;vertical-align: middle;" />
+
+                    <el-image style="width: 100px; height: 100px"
+                        :src="row.storeImage" fit="contain"
+                        @click="showImg(row.storeImage)"></el-image>
                 </template>
 
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('listImage')"
-                             prop="listImage"
-                             label="列表图"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('listImage')" prop="listImage"
+                label="列表图" min-width="150">
                 <template slot-scope="{row}" v-if="row.listImage">
-                    <img :src="row.listImage" @click="showImg(row.listImage)" style="width: 100px;height: 100px;vertical-align: middle;" />
+                    <el-image style="width: 100px; height: 100px"
+                        :src="row.listImage" fit="contain"
+                        @click="showImg(row.listImage)"></el-image>
                 </template>
 
             </el-table-column>
@@ -97,27 +108,16 @@
                              min-width="100">
             </el-table-column> -->
 
-            <el-table-column
-                             v-if="isColumnShow('typeFlag')"
-                             prop="typeFlag"
-                             label="类型"
-                             :formatter="TypeFlagFormatter"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('typeFlag')" prop="typeFlag"
+                label="类型" :formatter="TypeFlagFormatter" min-width="100">
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('typeLevel')"
-                             prop="typeLevel"
-                             label="级别"
-                             min-width="100"
-                             :formatter="TypeLevelFormatter">
+            <el-table-column v-if="isColumnShow('typeLevel')" prop="typeLevel"
+                label="级别" min-width="100" :formatter="TypeLevelFormatter">
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('serviceName')"
-                             prop="serviceName"
-                             label="名称"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('serviceName')"
+                prop="serviceName" label="名称" min-width="100">
             </el-table-column>
 
             <!-- <el-table-column
@@ -127,105 +127,79 @@
                              min-width="100">
             </el-table-column> -->
 
-            <el-table-column
-                             v-if="isColumnShow('price')"
-                             prop="price"
-                             label="价格"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('price')" prop="price"
+                label="价格" min-width="100">
             </el-table-column>
-            <el-table-column
-                             v-if="isColumnShow('photoAmount')"
-                             prop="photoAmount"
-                             label="照片"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('photoAmount')"
+                prop="photoAmount" label="照片" min-width="100">
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('shelfFlag')"
-                             prop="shelfFlag"
-                             label="上架"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('shelfFlag')" prop="shelfFlag"
+                label="上架" min-width="100">
             </el-table-column>
 
-            <el-table-column
-                             v-if="isColumnShow('storeFlag')"
-                             prop="storeFlag"
-                             label="店铺标识"
-                             min-width="100">
+            <el-table-column v-if="isColumnShow('storeFlag')" prop="storeFlag"
+                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 v-if="isColumnShow('miniId')" prop="miniId"
+                label="小程序" min-width="100">
+            </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('remark')"
-                             prop="remark"
-                             label="备注"
-                             min-width="100">
-            </el-table-column>
-            <el-table-column
-                             label="操作"
-                             align="center"
-                             fixed="right"
-                             min-width="150">
+            <!-- <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">
                 <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">
@@ -237,16 +211,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>
@@ -257,27 +234,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>
@@ -293,14 +274,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>
 
@@ -311,21 +294,27 @@
     </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: 'StoreServices',
+    name: "StoreServices",
     created() {
-        this.getData();
         this.$http
             .get({
-                url: '/storeServiceType/all',
+                url: "/storeServiceType/all"
             })
             .then(res => {
                 if (res.success) {
                     this.typeFlagOptions = res.data;
+                    if (res.data.length > 0) {
+                        this.typeFlag = String(res.data[0].id);
+
+                        this.getTypeLevelOptions(this.typeFlag);
+                    }
+
+                    this.getData();
                 }
             });
         this.changeTypeFlag();
@@ -337,202 +326,210 @@ 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: '介绍',
-                    value: 'introduction',
-                    show: true,
+                    label: "介绍",
+                    value: "introduction",
+                    show: true
                 },
                 {
-                    label: '店铺图',
-                    value: 'storeImage',
-                    show: true,
+                    label: "店铺图",
+                    value: "storeImage",
+                    show: true
                 },
                 {
-                    label: '列表图',
-                    value: 'listImage',
-                    show: true,
+                    label: "列表图",
+                    value: "listImage",
+                    show: true
                 },
                 {
-                    label: '轮播图',
-                    value: 'banner',
-                    show: true,
+                    label: "轮播图",
+                    value: "banner",
+                    show: true
                 },
                 {
-                    label: '类型',
-                    value: 'typeFlag',
-                    show: true,
+                    label: "类型",
+                    value: "typeFlag",
+                    show: true
                 },
                 {
-                    label: '级别',
-                    value: 'typeLevel',
-                    show: true,
+                    label: "级别",
+                    value: "typeLevel",
+                    show: true
                 },
                 {
-                    label: '名称',
-                    value: 'serviceName',
-                    show: true,
+                    label: "名称",
+                    value: "serviceName",
+                    show: true
                 },
                 {
-                    label: '标题',
-                    value: 'title',
-                    show: true,
+                    label: "标题",
+                    value: "title",
+                    show: true
                 },
                 {
-                    label: '价格',
-                    value: 'price',
-                    show: true,
+                    label: "价格",
+                    value: "price",
+                    show: true
                 },
                 {
-                    label: '照片',
-                    value: 'photoAmount',
-                    show: true,
+                    label: "照片",
+                    value: "photoAmount",
+                    show: true
                 },
                 {
-                    label: '上架',
-                    value: 'shelfFlag',
-                    show: true,
+                    label: "上架",
+                    value: "shelfFlag",
+                    show: true
                 },
                 {
-                    label: '店铺标识',
-                    value: 'storeFlag',
-                    show: true,
+                    label: "店铺标识",
+                    value: "storeFlag",
+                    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: 'remark',
-                    show: true,
-                },
+                    label: "备注",
+                    value: "remark",
+                    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: 'introduction',
+                    label: "介绍",
+                    value: "introduction"
                 },
                 {
-                    label: '店铺图',
-                    value: 'store_image',
+                    label: "店铺图",
+                    value: "store_image"
                 },
                 {
-                    label: '列表图',
-                    value: 'list_image',
+                    label: "列表图",
+                    value: "list_image"
                 },
                 {
-                    label: '轮播图',
-                    value: 'banner',
+                    label: "轮播图",
+                    value: "banner"
                 },
                 {
-                    label: '类型',
-                    value: 'type_flag',
+                    label: "类型",
+                    value: "type_flag"
                 },
                 {
-                    label: '级别',
-                    value: 'type_level',
+                    label: "级别",
+                    value: "type_level"
                 },
                 {
-                    label: '名称',
-                    value: 'service_name',
+                    label: "名称",
+                    value: "service_name"
                 },
                 {
-                    label: '标题',
-                    value: 'title',
+                    label: "标题",
+                    value: "title"
                 },
                 {
-                    label: '价格',
-                    value: 'price',
+                    label: "价格",
+                    value: "price"
                 },
                 {
-                    label: '照片',
-                    value: 'photo_amount',
+                    label: "照片",
+                    value: "photo_amount"
                 },
                 {
-                    label: '上架',
-                    value: 'shelf_flag',
+                    label: "上架",
+                    value: "shelf_flag"
                 },
                 {
-                    label: '店铺标识',
-                    value: 'store_flag',
+                    label: "店铺标识",
+                    value: "store_flag"
                 },
                 {
-                    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: 'remark',
-                },
+                    label: "备注",
+                    value: "remark"
+                }
             ],
-            advancedQuerySearchKey: '',
-            orderByStr: '',
-            imgSrc: '',
+            advancedQuerySearchKey: "",
+            orderByStr: "",
+            imgSrc: "",
             imageDialogVisible: false,
             typeFlagOptions: [],
-            typeFlag: '',
+            typeFlag: "",
             typeLevelOptions: [],
-            typeLevel: '',
+            typeLevel: ""
         };
     },
     computed: {
-        ...mapState(['tableHeight','storeId']),
+        ...mapState(["tableHeight", "storeId"]),
         selection() {
             return this.$refs.table.selection.map(i => i.id);
-        },
+        }
     },
     watch: {
         storeId() {
             this.searchData();
-        },
+        }
     },
     methods: {
+        goStoreServiceType() {
+            this.$router.push("/storeServiceTypes");
+        },
+        hanldChange() {
+            this.getTypeLevelOptions(this.typeFlag);
+            this.typeLevel = "";
+            this.getData();
+        },
         pageSizeChange(size) {
             this.currentPage = 1;
             this.pageSize = size;
@@ -551,18 +548,18 @@ export default {
                 orderByStr: this.orderByStr,
                 typeFlag: this.typeFlag,
                 typeLevel: this.typeLevel,
-                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: '/storeService/page',
-                    data: data,
+                    url: "/storeService/page",
+                    data: data
                 })
                 .then(res => {
                     if (res.success) {
@@ -583,28 +580,28 @@ export default {
         },
         editRow(row) {
             this.$router.push({
-                path: '/storeService',
+                path: "/storeService",
                 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) {
@@ -613,7 +610,7 @@ export default {
             }
         },
         advancedQuery() {
-            this.advancedQuerySearchKey = '';
+            this.advancedQuerySearchKey = "";
 
             if (this.advancedQueryFields.length > 0) {
                 var templist = [];
@@ -627,18 +624,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("_;");
                 }
             }
 
@@ -647,8 +644,8 @@ export default {
         },
         addSortField() {
             this.tableSortFields.push({
-                name: '',
-                order: 'asc',
+                name: "",
+                order: "asc"
             });
         },
         removeSortField(i) {
@@ -657,20 +654,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("_;");
                 }
             }
 
@@ -680,11 +677,11 @@ export default {
         exportExcel() {
             window.location.href =
                 this.$baseUrl +
-                '/storeService/exportExcel?searchKey=' +
+                "/storeService/exportExcel?searchKey=" +
                 this.filter1 +
-                '&advancedQuery=' +
+                "&advancedQuery=" +
                 this.advancedQuerySearchKey +
-                '&orderByStr=' +
+                "&orderByStr=" +
                 this.orderByStr;
         },
         typeFlagChange() {
@@ -697,35 +694,35 @@ export default {
             this.getData();
         },
         deleteRow(row) {
-            this.$alert('删除将无法恢复，确认要删除么？', '警告', {
-                type: 'error',
+            this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+                type: "error"
             })
                 .then(() => {
                     return this.$http.post({
-                        url: '/storeService/del',
-                        data: { id: row.id },
+                        url: "/storeService/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) {
@@ -734,17 +731,17 @@ export default {
         },
         changeTypeFlag() {
             this.typeLevelOptions = [];
-            this.typeLevel = '';
+            this.typeLevel = "";
 
             this.getTypeLevelOptions(this.typeFlag);
         },
         getTypeLevelOptions(typeFlag) {
             this.$http
                 .get({
-                    url: '/storeServiceLevel/all',
+                    url: "/storeServiceLevel/all",
                     data: {
-                        typeFlag: typeFlag,
-                    },
+                        typeFlag: typeFlag
+                    }
                 })
                 .then(res => {
                     if (res.success) {
@@ -753,7 +750,7 @@ export default {
                 });
         },
         TypeFlagFormatter(row, column, cellValue) {
-            var valueStr = '';
+            var valueStr = "";
             this.typeFlagOptions.forEach(item => {
                 if (item.id == cellValue) {
                     valueStr = item.name;
@@ -763,7 +760,7 @@ export default {
             return valueStr;
         },
         TypeLevelFormatter(row, column, cellValue) {
-            var valueStr = '';
+            var valueStr = "";
             this.typeLevelOptions.forEach(item => {
                 if (item.id == cellValue) {
                     valueStr = item.levelName;
@@ -771,8 +768,8 @@ export default {
             });
 
             return valueStr;
-        },
-    },
+        }
+    }
 };
 </script>
 <style lang="less" scoped>

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

@@ -4,6 +4,14 @@
             <!-- <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>-->
+            <div style="padding:0 0 10px;">
+                <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}}
+                    </el-radio-button>
+                </el-radio-group>
+            </div>
             <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"
@@ -19,13 +27,6 @@
                 <el-option v-for="item in typeFlagOptions" :key="item.value"
                     :label="item.label" :value="item.value"></el-option>
             </el-select>
-            <el-select v-model="orderStatusKey" size="small" clearable
-                filterable placeholder="订单状态" @change="searchData"
-                style="width:120px">
-                <el-option v-for="item in orderStatusOptions" :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"