导出订单

src/main/java/com/izouma/immall/domain/VipUser.java

@@ -13,6 +13,7 @@ import javax.persistence.*;
 import java.io.Serializable;
 import java.math.BigDecimal;
 import java.time.LocalDateTime;
+import java.util.List;
 
 @Getter
 @Setter
@@ -71,4 +72,7 @@ public class VipUser extends BaseEntity implements Serializable {
 
     @Builder.Default
     private Boolean enabled = true;
+
+    @Transient
+    private List<VipUser> children;
 }

src/main/java/com/izouma/immall/service/VipUserService.java

@@ -1,5 +1,6 @@
 package com.izouma.immall.service;
 
+import com.alibaba.fastjson.JSON;
 import com.izouma.immall.config.DateConfig;
 import com.izouma.immall.domain.User;
 import com.izouma.immall.domain.VipUser;
@@ -18,6 +19,10 @@ import org.springframework.stereotype.Service;
 import java.math.BigDecimal;
 import java.time.LocalDateTime;
 import java.time.format.DateTimeFormatter;
+import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
 
 import static com.izouma.immall.web.BaseController.toPageRequest;
 import static com.izouma.immall.web.BaseController.toSpecification;
@@ -120,5 +125,4 @@ public class VipUserService {
         }
         return vipUserRepo.findAll(specification, toPageRequest(pageQuery));
     }
-
 }

src/main/java/com/izouma/immall/web/DealerDepotController.java

@@ -42,6 +42,7 @@ public class DealerDepotController extends BaseController {
 //    @PreAuthorize("hasRole('ADMIN')")
     @GetMapping("/all")
     public Page<DealerDepot> all(PageQuery pageQuery) {
+        pageQuery.setSort("createdAt,desc");
         return dealerDepotRepo.findAll(toSpecification(pageQuery,DealerDepot.class), toPageRequest(pageQuery));
     }
 

src/main/java/com/izouma/immall/web/FinancialController.java

@@ -42,6 +42,7 @@ public class FinancialController extends BaseController {
     @PreAuthorize("hasRole('ADMIN')")
     @GetMapping("/all")
     public Page<Financial> all(PageQuery pageQuery) {
+        pageQuery.setSort("createdAt,desc");
         return financialRepo.findAll(toSpecification(pageQuery,Financial.class), toPageRequest(pageQuery));
     }
 

src/main/java/com/izouma/immall/web/OrderFormController.java

@@ -6,7 +6,6 @@ import com.izouma.immall.dto.OrderFormInfoVO;
 import com.izouma.immall.dto.OrderFormShowVO;
 import com.izouma.immall.dto.OrderFormVO;
 import com.izouma.immall.enums.OrderFormStatus;
-import com.izouma.immall.enums.RefundReason;
 import com.izouma.immall.service.OrderFormService;
 import com.izouma.immall.dto.PageQuery;
 import com.izouma.immall.exception.BusinessException;
@@ -170,7 +169,6 @@ public class OrderFormController extends BaseController {
         return orderFormService.checkLogistics(orderFormId);
     }
 
-
     @GetMapping("/getOrderNum")
     @ApiModelProperty("获取待处理角标")
     public Map<OrderFormStatus, Integer> getOrderNum() {

src/main/java/com/izouma/immall/web/VipUserController.java

@@ -86,22 +86,9 @@ public class VipUserController extends BaseController {
             vipUser.setExpired(true);
             vipUserRepo.save(vipUser);
         }
-//        if (BigDecimal.ZERO.compareTo(vipUser.getMoney()) < 0) {
-//            vipUser.setMoney(balanceFlowRepo.countMoney(id));
-//        }
         return vipUser;
     }
 
-/*    @GetMapping("/buy")
-    public VipUser buy() {
-        return vipUserService.buyVip(SecurityUtils.getAuthenticatedUser().getId());
-    }*/
-
-//    @GetMapping("/search")
-//    public Page<VipUser> search(String search, Pageable pageable) {
-//        return vipUserService.getVipUser(search, pageable);
-//    }
-
     @GetMapping("/search")
     public Page<VipUser> search(PageQuery pageQuery) {
         Map<String, Object> query = pageQuery.getQuery();

src/main/vue/src/router.js

@@ -369,19 +369,11 @@ const router = new Router({
                                 {
                     path: '/setList',
                     name: 'SetList',
-                    component: () => import(/* webpackChunkName: "setEdit" */ '@/views/SetList.vue'),
+                    component: () => import(/* webpackChunkName: "setList" */ '@/views/SetList.vue'),
                     meta: {
                         title: '套餐列表',
                     },
                 },
-                {
-                    path: '/feedbackList',
-                    name: 'FeedbackList',
-                    component: () => import(/* webpackChunkName: "feedbackList" */ '@/views/FeedbackList.vue'),
-                    meta: {
-                        title: '评价列表',
-                    },
-                },
                 {
                     path: '/financialList',
                     name: 'FinancialList',
@@ -393,11 +385,19 @@ const router = new Router({
                 {
                     path: '/dealerDepotList',
                     name: 'DealerDepotList',
-                    component: () => import(/* webpackChunkName: "financialList" */ '@/views/DealerDepotList.vue'),
+                    component: () => import(/* webpackChunkName: "dealerDepotList" */ '@/views/DealerDepotList.vue'),
                     meta: {
                         title: '进出货记录',
                     },
                 },
+                {
+                    path: '/dealerUser',
+                    name: 'DealerUser',
+                    component: () => import(/* webpackChunkName: "dealerUser" */ '@/views/user/DealerUser.vue'),
+                    meta: {
+                        title: '经销商下级',
+                    },
+                }
             ],
         },
         {

src/main/vue/src/views/AuthorityMenuEdit.vue

@@ -1,174 +1,174 @@
 <template>
-    <div class="edit-view">
-        <el-form
-            :model="formData"
-            :rules="rules"
-            ref="form"
-            label-width="71px"
-            label-position="right"
-            size="small"
-            style="max-width: 500px;"
-        >
-            <el-form-item prop="authorityName" label="角色名">
-                <el-input v-model="formData.authorityName" placeholder="请选择" disabled> </el-input>
-            </el-form-item>
-            <el-form-item prop="menuIds" label="菜单权限">
-                <!--:render-content="renderContent"-->
-                <el-tree
-                    ref="menuTree"
-                    :data="menus"
-
-                    :highlight-current="true"
-                    :expand-on-click-node="false"
-                    :props="treeProps"
-                    node-key="id"
-                    label="name"
-                    show-checkbox
-                    default-expand-all
-                >
-                </el-tree>
-            </el-form-item>
-            <el-form-item>
-                <el-button @click="onSave" :loading="$store.state.fetchingData" type="primary">保存</el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+  <div class="edit-view">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="71px"
+      label-position="right"
+      size="small"
+      style="max-width: 500px;"
+    >
+      <el-form-item prop="authorityName" label="角色名">
+        <el-input v-model="formData.authorityName" placeholder="请选择" disabled></el-input>
+      </el-form-item>
+      <el-form-item prop="menuIds" label="菜单权限">
+        <!--:render-content="renderContent"-->
+        <el-tree
+          ref="menuTree"
+          :data="menus"
+          :highlight-current="true"
+          :expand-on-click-node="false"
+          :props="treeProps"
+          node-key="id"
+          label="name"
+          show-checkbox
+          default-expand-all
+        ></el-tree>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="onSave" :loading="$store.state.fetchingData" type="primary">保存</el-button>
+        <el-button @click="$router.go(-1)">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script>
 export default {
-    name: 'AuthorityMenuEdit',
-    created() {
-        if (this.$route.query.authorityName) {
-            this.$http
-                .get('authorityMenu/getAuthorityMenuMap', {
-                    authorityName: this.$route.query.authorityName
-                })
-                .then(res => {
-                    if (res.menuIds) {
-                        this.$refs.menuTree.setCheckedKeys(res.menuIds);
-                    }
-                    if (res.canEditMenuIds) {
-                        this.canEditMenuIds = res.canEditMenuIds;
-                        this.getMenus();
-                    }
-                    this.formData = res;
-                    this.formData.authorityName = this.$route.query.authorityName;
-                })
-                .catch(e => {
-                    console.log(e);
-                    this.$message.error(e.error);
-                });
-        }
-    },
-    data() {
-        return {
-            saving: false,
-            formData: {},
-            rules: {},
-            treeProps: {
-                label: 'name'
-            },
-            menus: [],
-            authorities: [],
-            canEditMenuIds: []
-        };
+  name: "AuthorityMenuEdit",
+  created() {
+    if (this.$route.query.authorityName) {
+      this.$http
+        .get("authorityMenu/getAuthorityMenuMap", {
+          authorityName: this.$route.query.authorityName
+        })
+        .then(res => {
+          if (res.menuIds) {
+            this.$refs.menuTree.setCheckedKeys(res.menuIds);
+          }
+          if (res.canEditMenuIds) {
+            this.canEditMenuIds = res.canEditMenuIds;
+            this.getMenus();
+          }
+          this.formData = res;
+          this.formData.authorityName = this.$route.query.authorityName;
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    }
+  },
+  data() {
+    return {
+      saving: false,
+      formData: {},
+      rules: {},
+      treeProps: {
+        label: "name"
+      },
+      menus: [],
+      authorities: [],
+      canEditMenuIds: []
+    };
+  },
+  methods: {
+    getMenus() {
+      this.$http
+        .get("/menu/all")
+        .then(res => {
+          console.log(this.getTreeMenu(res));
+          this.menus = this.getTreeMenu(res);
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
     },
-    methods: {
-        getMenus() {
-            this.$http
-                .get('/menu/all')
-                .then(res => {
-                    console.log(this.getTreeMenu(res));
-                    this.menus = this.getTreeMenu(res);
-                })
-                .catch(e => {
-                    console.log(e);
-                    this.$message.error(e.error);
-                });
-        },
-        getTreeMenu(list) {
-            list.forEach(item => {
-                if (this.canEditMenuIds.indexOf(item.id) != -1) {
-                    item.canEdit = true;
-                } else {
-                    item.canEdit = false;
-                }
+    getTreeMenu(list) {
+      list.forEach(item => {
+        if (this.canEditMenuIds.indexOf(item.id) != -1) {
+          item.canEdit = true;
+        } else {
+          item.canEdit = false;
+        }
 
-                if (item.children.length != 0) {
-                    this.getTreeMenu(item.children);
-                }
-            });
+        if (item.children.length != 0) {
+          this.getTreeMenu(item.children);
+        }
+      });
 
-            return list;
-        },
-        onSave() {
-            this.$refs.form.validate(valid => {
-                if (valid) {
-                    this.submit();
-                } else {
-                    return false;
-                }
-            });
-        },
-        submit() {
-            this.formData.menus = this.$refs.menuTree.getCheckedNodes(false);
-            this.formData.halfCheckedMenus = this.$refs.menuTree.getHalfCheckedNodes(true);
+      return list;
+    },
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
+        }
+      });
+    },
+    submit() {
+      this.formData.menus = this.$refs.menuTree.getCheckedNodes(false);
+      this.formData.halfCheckedMenus = this.$refs.menuTree.getHalfCheckedNodes(
+        true
+      );
 
-            //console.log(this.formData)
-            let myMenus = [];
-            this.formData.menus.forEach(item => {
-                item.halfCheckedKey = false;
-                // item.canEdit = true;
-                myMenus.push(item);
-            });
+      //console.log(this.formData)
+      let myMenus = [];
+      this.formData.menus.forEach(item => {
+        item.halfCheckedKey = false;
+        // item.canEdit = true;
+        myMenus.push(item);
+      });
 
-            // console.log(myMenus)
-            this.formData.halfCheckedMenus.forEach(item => {
-                item.halfCheckedKey = true;
-                item.canEdit = true;
-                myMenus.push(item);
-            });
-            console.log(myMenus);
+      // console.log(myMenus)
+      this.formData.halfCheckedMenus.forEach(item => {
+        item.halfCheckedKey = true;
+        item.canEdit = true;
+        myMenus.push(item);
+      });
+      console.log(myMenus);
 
-            let data = {
-                authorityName: this.formData.authorityName,
-                menuList: myMenus
-            };
+      let data = {
+        authorityName: this.formData.authorityName,
+        menuList: myMenus
+      };
 
-            this.$store.commit('updateFetchingData', true);
-            // return;
+      this.$store.commit("updateFetchingData", true);
+      // return;
 
-            //console.log(data)
-            this.$http
-                .post('/authorityMenu/saveMenus', data, { body: 'json' })
-                .then(res => {
-                    this.$store.commit('updateFetchingData', false);
-                    this.$message.success('成功');
-                    this.$router.go(-1);
-                })
-                .catch(e => {
-                    this.$store.commit('updateFetchingData', false);
-                    console.log(e);
-                    this.$message.error(e.error);
-                });
-        },
-        renderContent(h, { node, data, store }) {
-            return (
-                <span class="custom-tree-node">
-                    <span style="flex-grow:1">{data.name}</span>
+      //console.log(data)
+      this.$http
+        .post("/authorityMenu/saveMenus", data, { body: "json" })
+        .then(res => {
+          this.$store.commit("updateFetchingData", false);
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          this.$store.commit("updateFetchingData", false);
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    },
+    renderContent(h, { node, data, store }) {
+      return (
+        <span class="custom-tree-node">
+          <span style="flex-grow:1">{data.name}</span>
 
-                    <el-switch
-                        class="opt"
-                        size="mini"
-                        v-model={data.canEdit}
-                        active-text="可编辑"
-                        inactive-text="不可编辑"
-                    ></el-switch>
-                </span>
-            );
-        }
+          <el-switch
+            class="opt"
+            size="mini"
+            v-model={data.canEdit}
+            active-text="可编辑"
+            inactive-text="不可编辑"
+          ></el-switch>
+        </span>
+      );
     }
+  }
 };
 </script>
 <style lang="less" scoped></style>

src/main/vue/src/views/BalanceFlowEdit.vue

@@ -1,135 +1,149 @@
 <template>
-    <div class="edit-view">
-        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small"
-                 style="max-width: 500px;">
-            <el-form-item prop="userId" label="用户ID">
-                <el-input-number type="number" v-model="formData.userId"></el-input-number>
-            </el-form-item>
-            <el-form-item prop="transactionType" label="交易类型">
-                <el-select v-model="formData.transactionType" clearable filterable placeholder="请选择">
-                    <el-option
-                            v-for="item in transactionTypeOptions"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value">
-                    </el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item prop="money" label="交易金额">
-                <el-input-number type="number" v-model="formData.money"></el-input-number>
-            </el-form-item>
-            <el-form-item prop="payMethod" label="支付方式">
-                <el-select v-model="formData.payMethod" clearable filterable placeholder="请选择">
-                    <el-option
-                            v-for="item in payMethodOptions"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value">
-                    </el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item prop="settleTime" label="交易时间">
-                <el-date-picker
-                        v-model="formData.settleTime"
-                        type="datetime"
-                        value-format="yyyy-MM-dd HH:mm:ss"
-                        placeholder="选择日期时间">
-                </el-date-picker>
-            </el-form-item>
-            <el-form-item prop="transactionId" label="交易单号">
-                <el-input v-model="formData.transactionId"></el-input>
-            </el-form-item>
-            <el-form-item prop="remark" label="备注">
-                <el-input v-model="formData.remark"></el-input>
-            </el-form-item>
-            <!--                <el-form-item prop="enabled" label="有效">
+  <div class="edit-view">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="80px"
+      label-position="right"
+      size="small"
+      style="max-width: 500px;"
+    >
+      <el-form-item prop="userId" label="用户ID">
+        <el-input-number type="number" v-model="formData.userId"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="transactionType" label="交易类型">
+        <el-select v-model="formData.transactionType" clearable filterable placeholder="请选择">
+          <el-option
+            v-for="item in transactionTypeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="money" label="交易金额">
+        <el-input-number type="number" v-model="formData.money"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="payMethod" label="支付方式">
+        <el-select v-model="formData.payMethod" clearable filterable placeholder="请选择">
+          <el-option
+            v-for="item in payMethodOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="settleTime" label="交易时间">
+        <el-date-picker
+          v-model="formData.settleTime"
+          type="datetime"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="选择日期时间"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item prop="transactionId" label="交易单号">
+        <el-input v-model="formData.transactionId"></el-input>
+      </el-form-item>
+      <el-form-item prop="remark" label="备注">
+        <el-input v-model="formData.remark"></el-input>
+      </el-form-item>
+      <!--                <el-form-item prop="enabled" label="有效">
                                         <el-switch v-model="formData.enabled"></el-switch>
-                            </el-form-item>-->
-            <el-form-item>
-                <el-button @click="onSave" :loading="saving"
-                           type="primary">保存
-                </el-button>
-                <el-button @click="onDelete" :loading="saving"
-                           type="danger" v-if="formData.id">删除
-                </el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+      </el-form-item>-->
+      <el-form-item>
+        <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+        <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除</el-button>
+        <el-button @click="$router.go(-1)">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script>
-    export default {
-        name: 'BalanceFlowEdit',
-        created() {
-            if (this.$route.query.id) {
-                this.$http
-                    .get('balanceFlow/get/' + this.$route.query.id)
-                    .then(res => {
-                        this.formData = res;
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    });
-            }
-        },
-        data() {
-            return {
-                saving: false,
-                formData: {},
-                rules: {},
-                transactionTypeOptions: [{"label": "提现", "value": "TIXIAN"}, {
-                    "label": "购买套餐",
-                    "value": "XINYOGNHU"
-                }, {"label": "领取面膜", "value": "YONGHUXIAOFEI"}],
-                payMethodOptions: [{"label": "微信", "value": "WEIXIN"}, {"label": "余额", "value": "YUE"}, {
-                    "label": "支付宝",
-                    "value": "ZHIFUBAO"
-                }],
-            }
+export default {
+  name: "BalanceFlowEdit",
+  created() {
+    if (this.$route.query.id) {
+      this.$http
+        .get("balanceFlow/get/" + this.$route.query.id)
+        .then(res => {
+          this.formData = res;
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    }
+  },
+  data() {
+    return {
+      saving: false,
+      formData: {},
+      rules: {},
+      transactionTypeOptions: [
+        { label: "提现", value: "TIXIAN" },
+        {
+          label: "购买套餐",
+          value: "XINYOGNHU"
         },
-        methods: {
-            onSave() {
-                this.$refs.form.validate((valid) => {
-                    if (valid) {
-                        this.submit();
-                    } else {
-                        return false;
-                    }
-                });
-            },
-            submit() {
-                let data = {...this.formData};
-
-                this.saving = true;
-                this.$http
-                    .post('/balanceFlow/save', data, {body: 'json'})
-                    .then(res => {
-                        this.saving = false;
-                        this.$message.success('成功');
-                        this.$router.go(-1);
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.saving = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            onDelete() {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/balanceFlow/del/${this.formData.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.$router.go(-1);
-                }).catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                })
-            },
+        { label: "领取面膜", value: "YONGHUXIAOFEI" }
+      ],
+      payMethodOptions: [
+        { label: "微信", value: "WEIXIN" },
+        { label: "余额", value: "YUE" },
+        {
+          label: "支付宝",
+          value: "ZHIFUBAO"
         }
+      ]
+    };
+  },
+  methods: {
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
+        }
+      });
+    },
+    submit() {
+      let data = { ...this.formData };
+
+      this.saving = true;
+      this.$http
+        .post("/balanceFlow/save", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/balanceFlow/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/BalanceFlowList.vue

@@ -1,92 +1,78 @@
 <template>
-    <div class="list-view">
-        <div class="filters-container">
-            <el-input placeholder="输入关键字" v-model="search" clearable
-                      class="filter-item"></el-input>
-            <el-button @click="getData" type="primary" icon="el-icon-search"
-                       class="filter-item">搜索
-            </el-button>
-            <el-button @click="addRow" type="primary" icon="el-icon-plus"
-                       class="filter-item">添加
-            </el-button>
-<!--            <el-button @click="download" type="primary" icon="el-icon-download"
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加</el-button>
+      <!--            <el-button @click="download" type="primary" icon="el-icon-download"
                        :loading="downloading" class="filter-item">导出EXCEL
-            </el-button>-->
-            <el-select v-model="transactionType" class="filter-item" placeholder="筛选状态" clearable filterable
-                       @change="getData">
-                <el-option
-                        v-for="item in transactionTypeOptions"
-                        :label="item.label"
-                        :value="item.value"
-                        :key="item.value"
-                />
-            </el-select>
-        </div>
-        <el-table :data="tableData" row-key="id" ref="table"
-                  header-row-class-name="table-header-row"
-                  header-cell-class-name="table-header-cell"
-                  row-class-name="table-row" cell-class-name="table-cell"
-                  :height="tableHeight">
-            <el-table-column v-if="multipleMode" align="center" type="selection"
-                             width="50">
-            </el-table-column>
-            <el-table-column prop="id" label="ID" width="70">
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort"
-                                     @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-<!--            <el-table-column prop="userId" label="用户ID"
-            ></el-table-column>-->
-            <el-table-column prop="user.nickname" label="用户名">
-            </el-table-column>
-            <el-table-column prop="transactionType" label="交易类型"
-                             :formatter="transactionTypeFormatter"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="money" label="金额" width="80"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="payMethod" label="支付" width="100"
-                             :formatter="payMethodFormatter"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="settleTime" label="交易时间"
-                             :formatter="datetimeFormatter"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="transactionId" label="交易单号"
-            width="250px">
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="remark" label="备注"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <!--                    <el-table-column prop="enabled" label="有效"
+      </el-button>-->
+      <el-select
+        v-model="transactionType"
+        class="filter-item"
+        placeholder="筛选状态"
+        clearable
+        filterable
+        @change="getData"
+      >
+        <el-option
+          v-for="item in transactionTypeOptions"
+          :label="item.label"
+          :value="item.value"
+          :key="item.value"
+        />
+      </el-select>
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column prop="id" label="ID" width="70">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <!--            <el-table-column prop="userId" label="用户ID"
+      ></el-table-column>-->
+      <el-table-column prop="user.nickname" label="用户名"></el-table-column>
+      <el-table-column prop="transactionType" label="交易类型" :formatter="transactionTypeFormatter">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="money" label="金额" width="80">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="payMethod" label="支付" width="100" :formatter="payMethodFormatter">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="settleTime" label="交易时间" :formatter="datetimeFormatter">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="transactionId" label="交易单号" width="250px">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="remark" label="备注">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <!--                    <el-table-column prop="enabled" label="有效"
             >
                                     <template slot="header" slot-scope="{column}">
                                         <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
@@ -95,177 +81,189 @@
                                         <template slot-scope="{row}">
                                             <el-tag :type="row.enabled?'':'info'">{{row.enabled}}</el-tag>
                                         </template>
-                                </el-table-column>-->
-            <el-table-column
-                    label="操作"
-                    align="center"
-                    fixed="right"
-                    min-width="150">
-                <template slot-scope="{row}">
-                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
-                    <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper">
-                <el-button v-if="!multipleMode"
-                           @click="toggleMultipleMode(true)">批量编辑
-                </el-button>
-                <el-button-group v-else>
-                    <el-button @click="operation1">批量操作1</el-button>
-                    <el-button @click="operation2">批量操作2</el-button>
-                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
-                </el-button-group>
-            </div>
-            <el-pagination background @size-change="onSizeChange"
-                           @current-change="onCurrentChange" :current-page="page"
-                           :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalElements">
-            </el-pagination>
-        </div>
-
+      </el-table-column>-->
+      <el-table-column label="操作" align="center" fixed="right" min-width="150">
+        <template slot-scope="{row}">
+          <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+          <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
     </div>
+  </div>
 </template>
 <script>
-    import {mapState} from "vuex";
-    import pageableTable from "@/mixins/pageableTable";
+import { mapState } from "vuex";
+import pageableTable from "@/mixins/pageableTable";
 
-    export default {
-        name: 'BalanceFlowList',
-        mixins: [pageableTable],
-        created() {
-            this.getData();
-        },
-        data() {
-            return {
-                multipleMode: false,
-                search: "",
-                url: "/balanceFlow/all",
-                downloading: false,
-                transactionTypeOptions: [{"label": "提现", "value": "TIXIAN"}, {
-                    "label": "购买套餐",
-                    "value": "XINYOGNHU"
-                }, {"label": "领取面膜", "value": "YONGHUXIAOFEI"}],
-                payMethodOptions: [{"label": "微信", "value": "WEIXIN"}, {"label": "余额", "value": "YUE"}, {
-                    "label": "支付宝",
-                    "value": "ZHIFUBAO"
-                }],
-                transactionType:''
-            }
+export default {
+  name: "BalanceFlowList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/balanceFlow/all",
+      downloading: false,
+      transactionTypeOptions: [
+        { label: "提现", value: "TIXIAN" },
+        {
+          label: "购买套餐",
+          value: "XINYOGNHU"
         },
-        computed: {
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
-        },
-        methods: {
-            transactionTypeFormatter(row, column, cellValue, index) {
-                let selectedOption = this.transactionTypeOptions.find(i => i.value === cellValue);
-                if (selectedOption) {
-                    return selectedOption.label;
-                }
-                return '';
-            },
-            payMethodFormatter(row, column, cellValue, index) {
-                let selectedOption = this.payMethodOptions.find(i => i.value === cellValue);
-                if (selectedOption) {
-                    return selectedOption.label;
-                }
-                return '';
-            },
-            beforeGetData() {
-                /*if (this.search) {
+        { label: "领取面膜", value: "YONGHUXIAOFEI" }
+      ],
+      payMethodOptions: [
+        { label: "微信", value: "WEIXIN" },
+        { label: "余额", value: "YUE" },
+        {
+          label: "支付宝",
+          value: "ZHIFUBAO"
+        }
+      ],
+      transactionType: ""
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    transactionTypeFormatter(row, column, cellValue, index) {
+      let selectedOption = this.transactionTypeOptions.find(
+        i => i.value === cellValue
+      );
+      if (selectedOption) {
+        return selectedOption.label;
+      }
+      return "";
+    },
+    payMethodFormatter(row, column, cellValue, index) {
+      let selectedOption = this.payMethodOptions.find(
+        i => i.value === cellValue
+      );
+      if (selectedOption) {
+        return selectedOption.label;
+      }
+      return "";
+    },
+    beforeGetData() {
+      /*if (this.search) {
                     return {search: this.search};
                 }*/
-                return {
-                    search: this.search,
-                    query: {
-                        transactionType: this.transactionType
-                    }
-                };
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            addRow() {
-                this.$router.push({
-                    path: "/balanceFlowEdit",
-                    query: {
-                        ...this.$route.query
-                    }
-                });
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: "/balanceFlowEdit",
-                    query: {
-                        id: row.id
-                    }
-                });
-            },
-            download() {
-                this.downloading = true;
-                this.$axios
-                    .get("/balanceFlow/excel", {
-                        responseType: "blob",
-                        params: {size: 10000}
-                    })
-                    .then(res => {
-                        console.log(res);
-                        this.downloading = false;
-                        const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
-                        const link = document.createElement("a");
-                        link.href = downloadUrl;
-                        link.setAttribute(
-                            "download",
-                            res.headers["content-disposition"].split("filename=")[1]
-                        );
-                        document.body.appendChild(link);
-                        link.click();
-                        link.remove();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.downloading = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            deleteRow(row) {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/balanceFlow/del/${row.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.getData();
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
-                    } else {
-                        this.$message.error('删除失败');
-                    }
-                })
-            },
-        },
-        watch: {
-            transactionType() {
-                this.page = 1;
-                this.getData();
-            }
+      return {
+        search: this.search,
+        query: {
+          transactionType: this.transactionType
         }
+      };
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addRow() {
+      this.$router.push({
+        path: "/balanceFlowEdit",
+        query: {
+          ...this.$route.query
+        }
+      });
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/balanceFlowEdit",
+        query: {
+          id: row.id
+        }
+      });
+    },
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/balanceFlow/excel", {
+          responseType: "blob",
+          params: { size: 10000 }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    deleteRow(row) {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/balanceFlow/del/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("删除取消");
+          } else {
+            this.$message.error("删除失败");
+          }
+        });
+    }
+  },
+  watch: {
+    transactionType() {
+      this.page = 1;
+      this.getData();
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/BannerInfoEdit.vue

@@ -1,48 +1,47 @@
 <template>
-    <div class="edit-view">
-        <el-form
-            :model="formData"
-            :rules="rules"
-            ref="form"
-            label-width="80px"
-            label-position="right"
-            size="small"
-            style="max-width: 500px;"
-        >
-<!--            <el-form-item prop="id" label="id">
+  <div class="edit-view">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="80px"
+      label-position="right"
+      size="small"
+      style="max-width: 500px;"
+    >
+      <!--            <el-form-item prop="id" label="id">
                 <el-input-number
                     type="number"
                     v-model="formData.id"
                 ></el-input-number>
-            </el-form-item>-->
-            <el-form-item prop="location" label="位置">
-                <!-- <el-input v-model="formData.location"></el-input> -->
-                <el-select v-model="formData.location" placeholder="请选择">
-                    <el-option
-                        v-for="item in locations"
-                        :key="item.value"
-                        :label="item.label"
-                        :value="item.value"
-                    >
-                    </el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item prop="title" label="标题">
-                <el-input v-model="formData.title"></el-input>
-            </el-form-item>
-            <el-form-item prop="subTitle" label="分标题">
-                <el-input v-model="formData.subTitle"></el-input>
-            </el-form-item>
-            <el-form-item prop="url" label="地址">
-                <el-input v-model="formData.url"></el-input>
-            </el-form-item>
-            <el-form-item prop="img" label="图片">
-                <single-upload v-model="formData.img"></single-upload>
-            </el-form-item>
-            <el-form-item prop="remark" label="备注">
-                <el-input v-model="formData.remark"></el-input>
-            </el-form-item>
-            <!--   <el-form-item prop="type" label="type">
+      </el-form-item>-->
+      <el-form-item prop="location" label="位置">
+        <!-- <el-input v-model="formData.location"></el-input> -->
+        <el-select v-model="formData.location" placeholder="请选择">
+          <el-option
+            v-for="item in locations"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="title" label="标题">
+        <el-input v-model="formData.title"></el-input>
+      </el-form-item>
+      <el-form-item prop="subTitle" label="分标题">
+        <el-input v-model="formData.subTitle"></el-input>
+      </el-form-item>
+      <el-form-item prop="url" label="地址">
+        <el-input v-model="formData.url"></el-input>
+      </el-form-item>
+      <el-form-item prop="img" label="图片">
+        <single-upload v-model="formData.img"></single-upload>
+      </el-form-item>
+      <el-form-item prop="remark" label="备注">
+        <el-input v-model="formData.remark"></el-input>
+      </el-form-item>
+      <!--   <el-form-item prop="type" label="type">
                    <el-input v-model="formData.type"></el-input>
                </el-form-item>
                <el-form-item prop="rank" label="rank">
@@ -50,104 +49,94 @@
                </el-form-item>
                <el-form-item prop="disabled" label="disabled">
                    <el-input v-model="formData.disabled"></el-input>
-               </el-form-item>-->
-            <el-form-item>
-                <el-button @click="onSave" :loading="saving" type="primary"
-                    >保存</el-button
-                >
-                <el-button
-                    @click="onDelete"
-                    :loading="saving"
-                    type="danger"
-                    v-if="formData.id"
-                    >删除
-                </el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+      </el-form-item>-->
+      <el-form-item>
+        <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+        <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除</el-button>
+        <el-button @click="$router.go(-1)">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script>
 export default {
-    name: "BannerInfoEdit",
-    created() {
-        if (this.$route.query.id) {
-            this.$http
-                .get("bannerInfo/get/" + this.$route.query.id)
-                .then(res => {
-                    this.formData = res;
-                })
-                .catch(e => {
-                    console.log(e);
-                    this.$message.error(e.error);
-                });
+  name: "BannerInfoEdit",
+  created() {
+    if (this.$route.query.id) {
+      this.$http
+        .get("bannerInfo/get/" + this.$route.query.id)
+        .then(res => {
+          this.formData = res;
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    }
+  },
+  data() {
+    return {
+      saving: false,
+      formData: {},
+      rules: {},
+      locations: [
+        {
+          value: 0,
+          label: "顶部宣传语句或图片模块"
+        },
+        {
+          value: 1,
+          label: "商品长图推荐模块"
         }
+      ]
+    };
+  },
+  methods: {
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
+        }
+      });
     },
-    data() {
-        return {
-            saving: false,
-            formData: {},
-            rules: {},
-            locations: [
-                {
-                    value: 0,
-                    label: "顶部宣传语句或图片模块"
-                },
-                {
-                    value: 1,
-                    label: "商品长图推荐模块"
-                }
-            ]
-        };
-    },
-    methods: {
-        onSave() {
-            this.$refs.form.validate(valid => {
-                if (valid) {
-                    this.submit();
-                } else {
-                    return false;
-                }
-            });
-        },
-        submit() {
-            let data = { ...this.formData };
+    submit() {
+      let data = { ...this.formData };
 
-            this.saving = true;
-            this.$http
-                .post("/bannerInfo/save", data, { body: "json" })
-                .then(res => {
-                    this.saving = false;
-                    this.$message.success("成功");
-                    this.$router.go(-1);
-                })
-                .catch(e => {
-                    console.log(e);
-                    this.saving = false;
-                    this.$message.error(e.error);
-                });
-        },
-        onDelete() {
-            this.$alert("删除将无法恢复，确认要删除么？", "警告", {
-                type: "error"
-            })
-                .then(() => {
-                    return this.$http.post(
-                        `/bannerInfo/del/${this.formData.id}`
-                    );
-                })
-                .then(() => {
-                    this.$message.success("删除成功");
-                    this.$router.go(-1);
-                })
-                .catch(e => {
-                    if (e !== "cancel") {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                });
-        }
+      this.saving = true;
+      this.$http
+        .post("/bannerInfo/save", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+        type: "error"
+      })
+        .then(() => {
+          return this.$http.post(`/bannerInfo/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
     }
+  }
 };
 </script>
 <style lang="less" scoped>

src/main/vue/src/views/BannerInfoList.vue

@@ -1,68 +1,52 @@
 <template>
-    <div class="list-view">
-        <div class="filters-container">
-            <el-input placeholder="输入关键字" v-model="search" clearable
-                      class="filter-item"></el-input>
-            <el-button @click="getData" type="primary" icon="el-icon-search"
-                       class="filter-item">搜索
-            </el-button>
-            <el-button @click="addRow" type="primary" icon="el-icon-plus"
-                       class="filter-item">添加
-            </el-button>
-            <!--            <el-button @click="download" type="primary" icon="el-icon-download"
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加</el-button>
+      <!--            <el-button @click="download" type="primary" icon="el-icon-download"
                                    :loading="downloading" class="filter-item">导出EXCEL
-                        </el-button>-->
-        </div>
-        <el-table :data="tableData" row-key="id" ref="table"
-                  header-row-class-name="table-header-row"
-                  header-cell-class-name="table-header-cell"
-                  row-class-name="table-row" cell-class-name="table-cell"
-                  :height="tableHeight">
-            <el-table-column v-if="multipleMode" align="center" type="selection"
-                             width="50">
-            </el-table-column>
-            <el-table-column prop="id" label="ID" width="100">
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort"
-                                     @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <!--<el-table-column prop="id" label="id"
+      </el-button>-->
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column prop="id" label="ID" width="100">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <!--<el-table-column prop="id" label="id"
             >
                                     <template slot="header" slot-scope="{column}">
                                         <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
                                         </sortable-header>
                                     </template>
-                                </el-table-column>-->
-            <el-table-column prop="location" label="位置"
-                             :formatter="locationsFormatter"
-            >
-            </el-table-column>
-            <el-table-column prop="title" label="标题"
-            >
-            </el-table-column>
-            <el-table-column prop="subTitle" label="分标题"
-            >
-            </el-table-column>
-            <el-table-column prop="url" label="地址"
-            >
-            </el-table-column>
-            <el-table-column prop="img" label="图片"
-            >
-                <template slot-scope="{ row }">
-                    <el-image
-                            style="width: 30px; height: 30px"
-                            :src="row.img"
-                            fit="cover"
-                            :preview-src-list="[row.img]"
-                    />
-                </template>
-            </el-table-column>
-            <el-table-column prop="remark" label="备注"
-            >
-            </el-table-column>
-<!--            <el-table-column prop="type" label="类型"
+      </el-table-column>-->
+      <el-table-column prop="location" label="位置" :formatter="locationsFormatter"></el-table-column>
+      <el-table-column prop="title" label="标题"></el-table-column>
+      <el-table-column prop="subTitle" label="分标题"></el-table-column>
+      <el-table-column prop="url" label="地址"></el-table-column>
+      <el-table-column prop="img" label="图片">
+        <template slot-scope="{ row }">
+          <el-image
+            style="width: 30px; height: 30px"
+            :src="row.img"
+            fit="cover"
+            :preview-src-list="[row.img]"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column prop="remark" label="备注"></el-table-column>
+      <!--            <el-table-column prop="type" label="类型"
             >
             </el-table-column>
             <el-table-column prop="rank" label="rank"
@@ -70,159 +54,159 @@
             </el-table-column>
             <el-table-column prop="disabled" label="disabled"
             >
-            </el-table-column>-->
-            <el-table-column
-                    label="操作"
-                    align="center"
-                    fixed="right"
-                    min-width="150">
-                <template slot-scope="{row}">
-                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
-                    <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper">
-                <el-button v-if="!multipleMode"
-                           @click="toggleMultipleMode(true)">批量编辑
-                </el-button>
-                <el-button-group v-else>
-                    <el-button @click="operation1">批量操作1</el-button>
-                    <el-button @click="operation2">批量操作2</el-button>
-                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
-                </el-button-group>
-            </div>
-            <el-pagination background @size-change="onSizeChange"
-                           @current-change="onCurrentChange" :current-page="page"
-                           :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalElements">
-            </el-pagination>
-        </div>
-
+      </el-table-column>-->
+      <el-table-column label="操作" align="center" fixed="right" min-width="150">
+        <template slot-scope="{row}">
+          <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+          <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
     </div>
+  </div>
 </template>
 <script>
-    import {mapState} from "vuex";
-    import pageableTable from "@/mixins/pageableTable";
+import { mapState } from "vuex";
+import pageableTable from "@/mixins/pageableTable";
 
-    export default {
-        name: 'BannerInfoList',
-        mixins: [pageableTable],
-        created() {
-            this.getData();
+export default {
+  name: "BannerInfoList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/bannerInfo/all",
+      downloading: false,
+      locations: [
+        {
+          value: 0,
+          label: "顶部宣传语句或图片模块"
         },
-        data() {
-            return {
-                multipleMode: false,
-                search: "",
-                url: "/bannerInfo/all",
-                downloading: false,
-                locations: [
-                    {
-                        value: 0,
-                        label: "顶部宣传语句或图片模块"
-                    },
-                    {
-                        value: 1,
-                        label: "商品长图推荐模块"
-                    }
-                ]
-            }
-        },
-        computed: {
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
-        },
-        methods: {
-            locationsFormatter(row, column, cellValue, index) {
-                let selectedOption = this.locations.find(i => i.value === cellValue);
-                if (selectedOption) {
-                    return selectedOption.label;
-                }
-                return '';
-            },
-            beforeGetData() {
-                if (this.search) {
-                    return {search: this.search};
-                }
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            addRow() {
-                this.$router.push({
-                    path: "/bannerInfoEdit",
-                    query: {
-                        ...this.$route.query
-                    }
-                });
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: "/bannerInfoEdit",
-                    query: {
-                        id: row.id
-                    }
-                });
-            },
-            download() {
-                this.downloading = true;
-                this.$axios
-                    .get("/bannerInfo/excel", {
-                        responseType: "blob",
-                        params: {size: 10000}
-                    })
-                    .then(res => {
-                        console.log(res);
-                        this.downloading = false;
-                        const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
-                        const link = document.createElement("a");
-                        link.href = downloadUrl;
-                        link.setAttribute(
-                            "download",
-                            res.headers["content-disposition"].split("filename=")[1]
-                        );
-                        document.body.appendChild(link);
-                        link.click();
-                        link.remove();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.downloading = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            deleteRow(row) {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/bannerInfo/del/${row.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.getData();
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
-                    } else {
-                        this.$message.error('删除失败');
-                    }
-                })
-            },
+        {
+          value: 1,
+          label: "商品长图推荐模块"
+        }
+      ]
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    locationsFormatter(row, column, cellValue, index) {
+      let selectedOption = this.locations.find(i => i.value === cellValue);
+      if (selectedOption) {
+        return selectedOption.label;
+      }
+      return "";
+    },
+    beforeGetData() {
+      if (this.search) {
+        return { search: this.search };
+      }
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addRow() {
+      this.$router.push({
+        path: "/bannerInfoEdit",
+        query: {
+          ...this.$route.query
+        }
+      });
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/bannerInfoEdit",
+        query: {
+          id: row.id
         }
+      });
+    },
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/bannerInfo/excel", {
+          responseType: "blob",
+          params: { size: 10000 }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    deleteRow(row) {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/bannerInfo/del/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("删除取消");
+          } else {
+            this.$message.error("删除失败");
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/CartEdit.vue

@@ -1,100 +1,105 @@
 <template>
-    <div class="edit-view">
-        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small"
-                 style="max-width: 500px;">
-                <el-form-item prop="id" label="id">
-                            <el-input-number type="number" v-model="formData.id"></el-input-number>
-                </el-form-item>
-                <el-form-item prop="goodsId" label="goodsId">
-                            <el-input-number type="number" v-model="formData.goodsId"></el-input-number>
-                </el-form-item>
-                <el-form-item prop="userId" label="userId">
-                            <el-input-number type="number" v-model="formData.userId"></el-input-number>
-                </el-form-item>
-                <el-form-item prop="piece" label="piece">
-                            <el-input v-model="formData.piece"></el-input>
-                </el-form-item>
-                <el-form-item prop="disabled" label="disabled">
-                            <el-input v-model="formData.disabled"></el-input>
-                </el-form-item>
-            <el-form-item>
-                <el-button @click="onSave" :loading="saving"
-                           type="primary">保存</el-button>
-                <el-button @click="onDelete" :loading="saving"
-                           type="danger" v-if="formData.id">删除
-                </el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+  <div class="edit-view">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="80px"
+      label-position="right"
+      size="small"
+      style="max-width: 500px;"
+    >
+      <el-form-item prop="id" label="id">
+        <el-input-number type="number" v-model="formData.id"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="goodsId" label="goodsId">
+        <el-input-number type="number" v-model="formData.goodsId"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="userId" label="userId">
+        <el-input-number type="number" v-model="formData.userId"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="piece" label="piece">
+        <el-input v-model="formData.piece"></el-input>
+      </el-form-item>
+      <el-form-item prop="disabled" label="disabled">
+        <el-input v-model="formData.disabled"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+        <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除</el-button>
+        <el-button @click="$router.go(-1)">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script>
-    export default {
-        name: 'CartEdit',
-        created() {
-            if (this.$route.query.id) {
-                this.$http
-                    .get('cart/get/'+this.$route.query.id)
-                    .then(res => {
-                        this.formData = res;
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    });
-            }
-        },
-        data() {
-            return {
-                saving: false,
-                formData: {
-                },
-                rules: {
-                },
-            }
-        },
-        methods: {
-            onSave() {
-                this.$refs.form.validate((valid) => {
-                    if (valid) {
-                        this.submit();
-                    } else {
-                        return false;
-                    }
-                });
-            },
-            submit() {
-                let data = {...this.formData};
-
-                this.saving = true;
-                this.$http
-                    .post('/cart/save', data, {body: 'json'})
-                    .then(res => {
-                        this.saving = false;
-                        this.$message.success('成功');
-                        this.$router.go(-1);
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.saving = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            onDelete() {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/cart/del/${this.formData.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.$router.go(-1);
-                }).catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                })
-            },
+export default {
+  name: "CartEdit",
+  created() {
+    if (this.$route.query.id) {
+      this.$http
+        .get("cart/get/" + this.$route.query.id)
+        .then(res => {
+          this.formData = res;
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    }
+  },
+  data() {
+    return {
+      saving: false,
+      formData: {},
+      rules: {}
+    };
+  },
+  methods: {
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
         }
+      });
+    },
+    submit() {
+      let data = { ...this.formData };
+
+      this.saving = true;
+      this.$http
+        .post("/cart/save", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/cart/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/CartList.vue

@@ -1,202 +1,189 @@
 <template>
-    <div  class="list-view">
-        <div class="filters-container">
-            <el-input placeholder="输入关键字" v-model="search" clearable
-                      class="filter-item"></el-input>
-            <el-button @click="getData" type="primary" icon="el-icon-search"
-                       class="filter-item">搜索
-            </el-button>
-            <el-button @click="addRow" type="primary" icon="el-icon-plus"
-                       class="filter-item">添加
-            </el-button>
-<!--            <el-button @click="download" type="primary" icon="el-icon-download"
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加</el-button>
+      <!--            <el-button @click="download" type="primary" icon="el-icon-download"
                        :loading="downloading" class="filter-item">导出EXCEL
-            </el-button>-->
-        </div>
-        <el-table :data="tableData" row-key="id" ref="table"
-                  header-row-class-name="table-header-row"
-                  header-cell-class-name="table-header-cell"
-                  row-class-name="table-row" cell-class-name="table-cell"
-                  :height="tableHeight">
-            <el-table-column v-if="multipleMode" align="center" type="selection"
-                             width="50">
-            </el-table-column>
-            <el-table-column prop="id" label="ID" width="100">
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort"
-                                     @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-                                <el-table-column prop="id" label="id"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="goodsId" label="goodsId"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="userId" label="userId"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="piece" label="piece"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="disabled" label="disabled"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-            <el-table-column
-                    label="操作"
-                    align="center"
-                    fixed="right"
-                    min-width="150">
-                <template slot-scope="{row}">
-                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
-                    <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper">
-                <el-button v-if="!multipleMode"
-                           @click="toggleMultipleMode(true)">批量编辑</el-button>
-                <el-button-group v-else>
-                    <el-button @click="operation1">批量操作1</el-button>
-                    <el-button @click="operation2">批量操作2</el-button>
-                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
-                </el-button-group>
-            </div>
-            <el-pagination background @size-change="onSizeChange"
-                           @current-change="onCurrentChange" :current-page="page"
-                           :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalElements">
-            </el-pagination>
-        </div>
-
+      </el-button>-->
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column prop="id" label="ID" width="100">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="id" label="id">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="goodsId" label="goodsId">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="userId" label="userId">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="piece" label="piece">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="disabled" label="disabled">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" fixed="right" min-width="150">
+        <template slot-scope="{row}">
+          <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+          <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
     </div>
+  </div>
 </template>
 <script>
-    import { mapState } from "vuex";
-    import pageableTable from "@/mixins/pageableTable";
+import { mapState } from "vuex";
+import pageableTable from "@/mixins/pageableTable";
 
-    export default {
-        name: 'CartList',
-        mixins: [pageableTable],
-        created() {
-            this.getData();
-        },
-        data() {
-            return {
-                multipleMode: false,
-                search: "",
-                url: "/cart/all",
-                downloading: false,
-            }
-        },
-        computed: {
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
-        },
-        methods: {
-            beforeGetData() {
-                if (this.search) {
-                    return { search: this.search };
-                }
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            addRow() {
-                this.$router.push({
-                    path: "/cartEdit",
-                    query: {
-                    ...this.$route.query
-                    }
-                });
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: "/cartEdit",
-                    query: {
-                    id: row.id
-                    }
-                });
-            },
-            download() {
-                this.downloading = true;
-                this.$axios
-                    .get("/cart/excel", { 
-                        responseType: "blob",
-                        params: { size: 10000 }
-                    })
-                    .then(res => {
-                        console.log(res);
-                        this.downloading = false;
-                        const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
-                        const link = document.createElement("a");
-                        link.href = downloadUrl;
-                        link.setAttribute(
-                            "download",
-                            res.headers["content-disposition"].split("filename=")[1]
-                        );
-                        document.body.appendChild(link);
-                        link.click();
-                        link.remove();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.downloading = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            deleteRow(row) {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/cart/del/${row.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.getData();
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
-                    } else {
-                        this.$message.error('删除失败');
-                    }
-                })
-            },
+export default {
+  name: "CartList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/cart/all",
+      downloading: false
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    beforeGetData() {
+      if (this.search) {
+        return { search: this.search };
+      }
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addRow() {
+      this.$router.push({
+        path: "/cartEdit",
+        query: {
+          ...this.$route.query
+        }
+      });
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/cartEdit",
+        query: {
+          id: row.id
         }
+      });
+    },
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/cart/excel", {
+          responseType: "blob",
+          params: { size: 10000 }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    deleteRow(row) {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/cart/del/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("删除取消");
+          } else {
+            this.$message.error("删除失败");
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/CategoryEdit.vue

@@ -1,91 +1,96 @@
 <template>
-    <div class="edit-view">
-        <el-form :model="formData" :rules="rules" ref="form" label-width="52px" label-position="right" size="small"
-                 style="max-width: 500px;">
-                <el-form-item prop="name" label="名称">
-                            <el-input v-model="formData.name"></el-input>
-                </el-form-item>
-<!--                <el-form-item prop="num" label="数量">
+  <div class="edit-view">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="52px"
+      label-position="right"
+      size="small"
+      style="max-width: 500px;"
+    >
+      <el-form-item prop="name" label="名称">
+        <el-input v-model="formData.name"></el-input>
+      </el-form-item>
+      <!--                <el-form-item prop="num" label="数量">
                             <el-input-number type="number" v-model="formData.num"></el-input-number>
-                </el-form-item>-->
-            <el-form-item>
-                <el-button @click="onSave" :loading="saving"
-                           type="primary">保存</el-button>
-                <el-button @click="onDelete" :loading="saving"
-                           type="danger" v-if="formData.id">删除
-                </el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+      </el-form-item>-->
+      <el-form-item>
+        <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+        <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除</el-button>
+        <el-button @click="$router.go(-1)">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script>
-    export default {
-        name: 'GoodsCategoryEdit',
-        created() {
-            if (this.$route.query.id) {
-                this.$http
-                    .get('category/get/'+this.$route.query.id)
-                    .then(res => {
-                        this.formData = res;
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    });
-            }
-        },
-        data() {
-            return {
-                saving: false,
-                formData: {
-                },
-                rules: {
-                },
-            }
-        },
-        methods: {
-            onSave() {
-                this.$refs.form.validate((valid) => {
-                    if (valid) {
-                        this.submit();
-                    } else {
-                        return false;
-                    }
-                });
-            },
-            submit() {
-                let data = {...this.formData};
-
-                this.saving = true;
-                this.$http
-                    .post('/category/save', data, {body: 'json'})
-                    .then(res => {
-                        this.saving = false;
-                        this.$message.success('成功');
-                        this.$router.go(-1);
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.saving = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            onDelete() {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/category/del/${this.formData.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.$router.go(-1);
-                }).catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                })
-            },
+export default {
+  name: "GoodsCategoryEdit",
+  created() {
+    if (this.$route.query.id) {
+      this.$http
+        .get("category/get/" + this.$route.query.id)
+        .then(res => {
+          this.formData = res;
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    }
+  },
+  data() {
+    return {
+      saving: false,
+      formData: {},
+      rules: {}
+    };
+  },
+  methods: {
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
         }
+      });
+    },
+    submit() {
+      let data = { ...this.formData };
+
+      this.saving = true;
+      this.$http
+        .post("/category/save", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/category/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/CategoryList.vue

@@ -1,250 +1,238 @@
 <template>
-    <div class="list-view">
-        <div class="filters-container">
-            <el-input placeholder="输入关键字" v-model="search" clearable
-                      class="filter-item"></el-input>
-            <el-button @click="getData" type="primary" icon="el-icon-search"
-                       class="filter-item">搜索
-            </el-button>
-            <el-button @click="addRow" type="primary" icon="el-icon-plus"
-                       class="filter-item">添加
-            </el-button>
-            <!--            <el-button @click="download" type="primary" icon="el-icon-download"
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加</el-button>
+      <!--            <el-button @click="download" type="primary" icon="el-icon-download"
                                    :loading="downloading" class="filter-item">导出EXCEL
-                        </el-button>-->
-        </div>
-        <el-table :data="tableData" row-key="id" ref="table"
-                  header-row-class-name="table-header-row"
-                  header-cell-class-name="table-header-cell"
-                  row-class-name="table-row" cell-class-name="table-cell"
-                  :height="tableHeight">
-            <el-table-column v-if="multipleMode" align="center" type="selection"
-                             width="50">
-            </el-table-column>
-            <el-table-column prop="id" label="ID" min-width="100">
-
-            </el-table-column>
-            <el-table-column prop="name" label="名称"
-            >
-            </el-table-column>
-            <el-table-column prop="num" label="数量"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column
-                    label="操作"
-
-                    fixed="right"
-                    min-width="150">
-                <template slot-scope="{row}">
-                    <el-button @click="showGoods(row)" type="success" size="mini" plain>查看</el-button>
-                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
-                    <el-button @click="deleteRow(row)" type="danger" size="mini" plain
-                               v-if="row.id!=14720 &&  row.id!=11112 && row.id!=11113">删除
-                    </el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-
-        <el-dialog
-                title="商品列表"
-                center
-                :visible.sync="dialogTable"
-        >
-            <el-table :data="categoryGoods" ref="table">
-                <el-table-column prop="name" label="商品名" min-width="200"></el-table-column>
-                <el-table-column prop="icon" label="图标" min-width="100">
-                    <template slot-scope="{ row }">
-                        <el-image
-                                style="width: 30px; height: 30px"
-                                :src="picList(row.icon)"
-                                fit="cover"
-                        ></el-image>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="vipPrice" label="会员价">
-                </el-table-column>
-                <el-table-column prop="price" label="原价">
-                </el-table-column>
-                <el-table-column label="操作" align="center" fixed="right">
-                    <template slot-scope="{ row }">
-                        <el-button @click="removeRow(row)" type="warning" plain>移除</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-        </el-dialog>
+      </el-button>-->
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column prop="id" label="ID" min-width="100"></el-table-column>
+      <el-table-column prop="name" label="名称"></el-table-column>
+      <el-table-column prop="num" label="数量">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" fixed="right" min-width="150">
+        <template slot-scope="{row}">
+          <el-button @click="showGoods(row)" type="success" size="mini" plain>查看</el-button>
+          <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+          <el-button
+            @click="deleteRow(row)"
+            type="danger"
+            size="mini"
+            plain
+            v-if="row.id!=14720 &&  row.id!=11112 && row.id!=11113"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
 
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper">
-                <el-button v-if="!multipleMode"
-                           @click="toggleMultipleMode(true)">批量编辑
-                </el-button>
-                <el-button-group v-else>
-                    <el-button @click="operation1">批量操作1</el-button>
-                    <el-button @click="operation2">批量操作2</el-button>
-                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
-                </el-button-group>
-            </div>
-            <el-pagination background @size-change="onSizeChange"
-                           @current-change="onCurrentChange" :current-page="page"
-                           :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalElements">
-            </el-pagination>
-        </div>
+    <el-dialog title="商品列表" center :visible.sync="dialogTable">
+      <el-table :data="categoryGoods" ref="table">
+        <el-table-column prop="name" label="商品名" min-width="200"></el-table-column>
+        <el-table-column prop="icon" label="图标" min-width="100">
+          <template slot-scope="{ row }">
+            <el-image style="width: 30px; height: 30px" :src="picList(row.icon)" fit="cover"></el-image>
+          </template>
+        </el-table-column>
+        <el-table-column prop="vipPrice" label="会员价"></el-table-column>
+        <el-table-column prop="price" label="原价"></el-table-column>
+        <el-table-column label="操作" align="center" fixed="right">
+          <template slot-scope="{ row }">
+            <el-button @click="removeRow(row)" type="warning" plain>移除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
 
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
     </div>
+  </div>
 </template>
 <script>
-    import {mapState} from "vuex";
-    import pageableTable from "@/mixins/pageableTable";
+import { mapState } from "vuex";
+import pageableTable from "@/mixins/pageableTable";
 
-    export default {
-        name: 'GoodsCategoryList',
-        mixins: [pageableTable],
-        created() {
-            this.getData();
-        },
-        data() {
-            return {
-                multipleMode: false,
-                search: "",
-                url: "/category/all",
-                downloading: false,
-                categoryGoods: [],
-                dialogTable: false,
-                categoryId: "",
-            }
-        },
-        computed: {
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
-        },
-        methods: {
-            picList(row) {
-                if (row) {
-                    return row.split(",")[0];
-                } else {
-                    return "";
-                }
-            },
-            beforeGetData() {
-                if (this.search) {
-                    return {search: this.search};
-                }
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            addRow() {
-                this.$router.push({
-                    path: "/categoryEdit",
-                    query: {
-                        ...this.$route.query
-                    }
-                });
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: "/categoryEdit",
-                    query: {
-                        id: row.id
-                    }
-                });
-            },
-            download() {
-                this.downloading = true;
-                this.$axios
-                    .get("/goodsCategory/excel", {
-                        responseType: "blob",
-                        params: {size: 10000}
-                    })
-                    .then(res => {
-                        console.log(res);
-                        this.downloading = false;
-                        const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
-                        const link = document.createElement("a");
-                        link.href = downloadUrl;
-                        link.setAttribute(
-                            "download",
-                            res.headers["content-disposition"].split("filename=")[1]
-                        );
-                        document.body.appendChild(link);
-                        link.click();
-                        link.remove();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.downloading = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            deleteRow(row) {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/goodsCategory/del/${row.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.getData();
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
-                    } else {
-                        this.$message.error('删除失败');
-                    }
-                })
-            },
-            showGoods(row) {
-                this.dialogTable = true;
-                this.categoryId = row.id;
-                this.$http
-                    .get('/goods/categoryGoods', {
-                        categoryId: this.categoryId,
-                    })
-                    .then(res => {
-                        this.categoryGoods = res;
-                        //console.log(this.coupons)
-                    })
-                    .catch(e => {
-                        console.log(e);
-                    });
-            },
-            removeRow(row) {
-                this.$alert('确认移除么？', '提示', {type: 'primary'}).then(() => {
-                    return this.$http.get('/goods/remove', {
-                            categoryId: this.categoryId,
-                            goodsId: row.id
-                        },
-                    )
-                }).then(() => {
-                    this.$message.success('移除成功');
-                    this.getData();
-                    history.go(0);
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('移除取消');
-                    } else {
-                        this.$message.error('移除失败');
-                    }
-                })
-            },
+export default {
+  name: "GoodsCategoryList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/category/all",
+      downloading: false,
+      categoryGoods: [],
+      dialogTable: false,
+      categoryId: ""
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    picList(row) {
+      if (row) {
+        return row.split(",")[0];
+      } else {
+        return "";
+      }
+    },
+    beforeGetData() {
+      if (this.search) {
+        return { search: this.search };
+      }
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addRow() {
+      this.$router.push({
+        path: "/categoryEdit",
+        query: {
+          ...this.$route.query
+        }
+      });
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/categoryEdit",
+        query: {
+          id: row.id
         }
+      });
+    },
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/goodsCategory/excel", {
+          responseType: "blob",
+          params: { size: 10000 }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    deleteRow(row) {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/goodsCategory/del/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("删除取消");
+          } else {
+            this.$message.error("删除失败");
+          }
+        });
+    },
+    showGoods(row) {
+      this.dialogTable = true;
+      this.categoryId = row.id;
+      this.$http
+        .get("/goods/categoryGoods", {
+          categoryId: this.categoryId
+        })
+        .then(res => {
+          this.categoryGoods = res;
+          //console.log(this.coupons)
+        })
+        .catch(e => {
+          console.log(e);
+        });
+    },
+    removeRow(row) {
+      this.$alert("确认移除么？", "提示", { type: "primary" })
+        .then(() => {
+          return this.$http.get("/goods/remove", {
+            categoryId: this.categoryId,
+            goodsId: row.id
+          });
+        })
+        .then(() => {
+          this.$message.success("移除成功");
+          this.getData();
+          history.go(0);
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("移除取消");
+          } else {
+            this.$message.error("移除失败");
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/Dashboard.vue

@@ -1,155 +1,155 @@
-<template>
-    <div>
-        <grid-layout
-            style="margin:0 -10px;"
-            :layout="layout"
-            :col-num="12"
-            :row-height="30"
-            :is-draggable="editable"
-            :is-resizable="editable"
-            :is-mirrored="false"
-            :vertical-compact="true"
-            :margin="[10, 10]"
-            :use-css-transforms="true"
-        >
-            <grid-item
-                v-for="item in layout"
-                class="widget-wrapper"
-                :x="item.x"
-                :y="item.y"
-                :w="item.w"
-                :h="item.h"
-                :i="item.i"
-                :key="item.i"
-            >
-                <component :is="item.name" :value="$data[item.key]"></component>
-            </grid-item>
-        </grid-layout>
-        <el-button v-if="editable" @click="save">保存</el-button>
-        <!--        <el-button v-else @click="editable=true">编辑</el-button>-->
-    </div>
-</template>
-
-<script>
-import { GridLayout, GridItem } from "vue-grid-layout";
-import UserWidget from "../widgets/UserWidget";
-import VipUserWidget from "../widgets/VipUserWidget";
-import GoodsWidget from "../widgets/GoodsWidget";
-import OrderWidget from "../widgets/OrderWidget";
-import LineChartWidget from "../widgets/LineChartWidget";
-import BarChartWidget from "../widgets/BarChartWidget";
-import OrderListWidget from "../widgets/OrderListWidget";
-
-export default {
-    created() {
-        // 请求数据
-        this.$axios.get("/summary/getHomePage").then(res => {
-            this.tableList = res.data["今日商品销量排行"];
-            this.vipNum = res.data["会员总数"];
-            this.goodsNum = res.data["商品总数"];
-            this.orderNum = res.data["订单总数"];
-            this.userNum = res.data["用户总数"];
-            this.LineChartInfo = res.data["月份新入会员统计"];
-        });
-    },
-    data() {
-        return {
-            layout: [
-                {
-                    x: 0,
-                    y: 0,
-                    w: 3,
-                    h: 4,
-                    i: "0",
-                    name: "UserWidget",
-                    key: "userNum"
-                },
-                {
-                    x: 3,
-                    y: 0,
-                    w: 3,
-                    h: 4,
-                    i: "1",
-                    name: "VipUserWidget",
-                    key: "vipNum"
-                },
-                {
-                    x: 6,
-                    y: 0,
-                    w: 3,
-                    h: 4,
-                    i: "2",
-                    name: "GoodsWidget",
-                    key: "goodsNum"
-                },
-                {
-                    x: 9,
-                    y: 0,
-                    w: 3,
-                    h: 4,
-                    i: "3",
-                    name: "OrderWidget",
-                    key: "orderNum"
-                },
-                {
-                    x: 0,
-                    y: 4,
-                    w: 6,
-                    h: 12,
-                    i: "5",
-                    name: "LineChartWidget",
-                    key: "LineChartInfo"
-                },
-                // { x: 0, y: 10, w: 6, h: 6, i: "4", name: "BarChartWidget" },
-                {
-                    x: 6,
-                    y: 4,
-                    w: 6,
-                    h: 12,
-                    i: "6",
-                    name: "OrderListWidget",
-                    key: "tableList"
-                }
-            ],
-            editable: false,
-            tableList: [],
-            vipNum: 0,
-            goodsNum: 0,
-            userNum: 0,
-            orderNum: 0,
-            LineChartInfo: {}
-        };
-    },
-    methods: {
-        save() {
-            console.log(JSON.stringify(this.layout));
-            this.editable = false;
-        },
-        getValue(key) {
-            console.log(this.$data);
-            return this[key];
-        }
-    },
-    components: {
-        GridLayout,
-        GridItem,
-        UserWidget,
-        VipUserWidget,
-        OrderWidget,
-        GoodsWidget,
-        LineChartWidget,
-        BarChartWidget,
-        OrderListWidget
-    }
-};
-</script>
-
-<style lang="less">
-.widget-wrapper {
-    display: flex;
-    flex-direction: column;
-    .el-card {
-        flex-grow: 1;
-    }
-}
-</style>
+<template>
+  <div>
+    <grid-layout
+      style="margin:0 -10px;"
+      :layout="layout"
+      :col-num="12"
+      :row-height="30"
+      :is-draggable="editable"
+      :is-resizable="editable"
+      :is-mirrored="false"
+      :vertical-compact="true"
+      :margin="[10, 10]"
+      :use-css-transforms="true"
+    >
+      <grid-item
+        v-for="item in layout"
+        class="widget-wrapper"
+        :x="item.x"
+        :y="item.y"
+        :w="item.w"
+        :h="item.h"
+        :i="item.i"
+        :key="item.i"
+      >
+        <component :is="item.name" :value="$data[item.key]"></component>
+      </grid-item>
+    </grid-layout>
+    <el-button v-if="editable" @click="save">保存</el-button>
+    <!--        <el-button v-else @click="editable=true">编辑</el-button>-->
+  </div>
+</template>
+
+<script>
+import { GridLayout, GridItem } from "vue-grid-layout";
+import UserWidget from "../widgets/UserWidget";
+import VipUserWidget from "../widgets/VipUserWidget";
+import GoodsWidget from "../widgets/GoodsWidget";
+import OrderWidget from "../widgets/OrderWidget";
+import LineChartWidget from "../widgets/LineChartWidget";
+import BarChartWidget from "../widgets/BarChartWidget";
+import OrderListWidget from "../widgets/OrderListWidget";
+
+export default {
+  created() {
+    // 请求数据
+    this.$axios.get("/summary/getHomePage").then(res => {
+      this.tableList = res.data["今日商品销量排行"];
+      this.vipNum = res.data["会员总数"];
+      this.goodsNum = res.data["商品总数"];
+      this.orderNum = res.data["订单总数"];
+      this.userNum = res.data["用户总数"];
+      this.LineChartInfo = res.data["月份新入会员统计"];
+    });
+  },
+  data() {
+    return {
+      layout: [
+        {
+          x: 0,
+          y: 0,
+          w: 3,
+          h: 4,
+          i: "0",
+          name: "UserWidget",
+          key: "userNum"
+        },
+        {
+          x: 3,
+          y: 0,
+          w: 3,
+          h: 4,
+          i: "1",
+          name: "VipUserWidget",
+          key: "vipNum"
+        },
+        {
+          x: 6,
+          y: 0,
+          w: 3,
+          h: 4,
+          i: "2",
+          name: "GoodsWidget",
+          key: "goodsNum"
+        },
+        {
+          x: 9,
+          y: 0,
+          w: 3,
+          h: 4,
+          i: "3",
+          name: "OrderWidget",
+          key: "orderNum"
+        },
+        {
+          x: 0,
+          y: 4,
+          w: 6,
+          h: 12,
+          i: "5",
+          name: "LineChartWidget",
+          key: "LineChartInfo"
+        },
+        // { x: 0, y: 10, w: 6, h: 6, i: "4", name: "BarChartWidget" },
+        {
+          x: 6,
+          y: 4,
+          w: 6,
+          h: 12,
+          i: "6",
+          name: "OrderListWidget",
+          key: "tableList"
+        }
+      ],
+      editable: false,
+      tableList: [],
+      vipNum: 0,
+      goodsNum: 0,
+      userNum: 0,
+      orderNum: 0,
+      LineChartInfo: {}
+    };
+  },
+  methods: {
+    save() {
+      console.log(JSON.stringify(this.layout));
+      this.editable = false;
+    },
+    getValue(key) {
+      console.log(this.$data);
+      return this[key];
+    }
+  },
+  components: {
+    GridLayout,
+    GridItem,
+    UserWidget,
+    VipUserWidget,
+    OrderWidget,
+    GoodsWidget,
+    LineChartWidget,
+    BarChartWidget,
+    OrderListWidget
+  }
+};
+</script>
+
+<style lang="less">
+.widget-wrapper {
+  display: flex;
+  flex-direction: column;
+  .el-card {
+    flex-grow: 1;
+  }
+}
+</style>

src/main/vue/src/views/DealerDepotList.vue

@@ -1,178 +1,191 @@
 <template>
-    <div  class="list-view">
-        <div class="filters-container">
-            <el-input placeholder="输入关键字" v-model="search" clearable
-                      class="filter-item"></el-input>
-            <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
-            <!--<el-button @click="download" type="primary" icon="el-icon-download"
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <!--<el-button @click="download" type="primary" icon="el-icon-download"
                        :loading="downloading" class="filter-item">导出EXCEL
-            </el-button>-->
-            <el-select
-                    v-model="type"
-                    class="filter-item"
-                    placeholder="筛选类型"
-                    clearable
-                    filterable
-                    @change="getData"
-            >
-                <el-option v-for="item in typeOptions" :label="item.label" :value="item.value" :key="item.value"/>
-            </el-select>
-        </div>
-        <el-table :data="tableData" row-key="id" ref="table"
-                  header-row-class-name="table-header-row"
-                  header-cell-class-name="table-header-cell"
-                  row-class-name="table-row" cell-class-name="table-cell"
-                  :height="tableHeight">
-            <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
-            <el-table-column prop="id" label="ID" width="100">
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="user.nickname" label="用户昵称"></el-table-column>
-            <el-table-column prop="type" label="类型" :formatter="typeFormatter"></el-table-column>
-            <el-table-column prop="num" label="数量"></el-table-column>
-            <el-table-column prop="remark" label="备注"></el-table-column>
-            <el-table-column prop="dateTime" label="日期"></el-table-column>
-            <!--<el-table-column label="操作" align="center" fixed="right" min-width="150">
+      </el-button>-->
+      <el-select
+        v-model="type"
+        class="filter-item"
+        placeholder="筛选类型"
+        clearable
+        filterable
+        @change="getData"
+      >
+        <el-option
+          v-for="item in typeOptions"
+          :label="item.label"
+          :value="item.value"
+          :key="item.value"
+        />
+      </el-select>
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column prop="id" label="ID" width="100">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="user.nickname" label="用户昵称"></el-table-column>
+      <el-table-column prop="type" label="类型" :formatter="typeFormatter"></el-table-column>
+      <el-table-column prop="num" label="数量"></el-table-column>
+      <el-table-column prop="remark" label="备注"></el-table-column>
+      <el-table-column prop="dateTime" label="日期"></el-table-column>
+      <!--<el-table-column label="操作" align="center" fixed="right" min-width="150">
                 <template slot-scope="{row}">
                     <el-button @click="show(row)" type="primary" size="mini" plain>补仓</el-button>
                     &lt;!&ndash;<el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>&ndash;&gt;
                 </template>
-            </el-table-column>-->
-        </el-table>
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper">
-                <el-button v-if="!multipleMode"
-                           @click="toggleMultipleMode(true)">批量编辑</el-button>
-                <el-button-group v-else>
-                    <el-button @click="operation1">批量操作1</el-button>
-                    <el-button @click="operation2">批量操作2</el-button>
-                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
-                </el-button-group>
-            </div>
-            <el-pagination background @size-change="onSizeChange"
-                           @current-change="onCurrentChange" :current-page="page"
-                           :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalElements">
-            </el-pagination>
-        </div>
+      </el-table-column>-->
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
     </div>
+  </div>
 </template>
 <script>
-    import { mapState } from "vuex";
-    import pageableTable from "@/mixins/pageableTable";
+import { mapState } from "vuex";
+import pageableTable from "@/mixins/pageableTable";
 
-    export default {
-        name: 'DealerDepotList',
-        mixins: [pageableTable],
-        created() {
-            this.getData();
-        },
-        data() {
-            return {
-                multipleMode: false,
-                search: "",
-                url: "/dealerDepot/all",
-                downloading: false,
-                showDialog: false,
-                dealerRuleId: '',
-                dealerRules: {},
-                userId: '',
-                saving: false,
-                typeOptions: [
-                    {label: "新增会员-线上", value: "NEW_MEMBER_ON"},
-                    {label: "新增会员-线下", value: "NEW_MEMBER_OFF"},
-                    {label: "补仓订单", value: "COVER_ORDER"}
-                ],
-                type: ''
-            }
-        },
-        computed: {
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
-        },
-        methods: {
-            typeFormatter(row, column, cellValue, index) {
-                let selectedOption = this.typeOptions.find(
-                    i => i.value === cellValue
-                );
-                if (selectedOption) {
-                    return selectedOption.label;
-                }
-                return "";
-            },
-            beforeGetData() {
-                let data = {sort: '', query: {}};
-                if (this.search) {
-                    data.search = this.search;
-                }
-                if (this.type) {
-                    data.query.type = this.type;
-                }
+export default {
+  name: "DealerDepotList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/dealerDepot/all",
+      downloading: false,
+      showDialog: false,
+      dealerRuleId: "",
+      dealerRules: {},
+      userId: "",
+      saving: false,
+      typeOptions: [
+        { label: "新增会员-线上", value: "NEW_MEMBER_ON" },
+        { label: "新增会员-线下", value: "NEW_MEMBER_OFF" },
+        { label: "补仓订单", value: "COVER_ORDER" }
+      ],
+      type: ""
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    typeFormatter(row, column, cellValue, index) {
+      let selectedOption = this.typeOptions.find(i => i.value === cellValue);
+      if (selectedOption) {
+        return selectedOption.label;
+      }
+      return "";
+    },
+    beforeGetData() {
+      let data = { sort: "", query: {} };
+      if (this.search) {
+        data.search = this.search;
+      }
+      if (this.type) {
+        data.query.type = this.type;
+      }
 
-                return data;
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            download() {
-                this.downloading = true;
-                this.$axios
-                    .get("/dealer/excel", { 
-                        responseType: "blob",
-                        params: { size: 10000 }
-                    })
-                    .then(res => {
-                        console.log(res);
-                        this.downloading = false;
-                        const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
-                        const link = document.createElement("a");
-                        link.href = downloadUrl;
-                        link.setAttribute(
-                            "download",
-                            res.headers["content-disposition"].split("filename=")[1]
-                        );
-                        document.body.appendChild(link);
-                        link.click();
-                        link.remove();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.downloading = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            deleteRow(row) {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/dealer/del/${row.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.getData();
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
-                    } else {
-                        this.$message.error('删除失败');
-                    }
-                })
-            }
-        }
+      return data;
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/dealer/excel", {
+          responseType: "blob",
+          params: { size: 10000 }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    deleteRow(row) {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/dealer/del/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("删除取消");
+          } else {
+            this.$message.error("删除失败");
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/DealerEdit.vue

@@ -1,116 +1,144 @@
 <template>
-    <div class="edit-view">
-        <el-form :model="formData" :rules="rules" ref="form" label-width="107px" label-position="right" size="small"
-                 style="max-width: 600px;">
-                <el-form-item prop="userId" label="用户Id">
-                    <el-input-number class="el-input-number_width" type="number" v-model="formData.userId" />
-                </el-form-item>
-                <el-form-item prop="dealerRuleId" label="套餐">
-                    <el-select v-model="formData.dealerRuleId">
-                        <el-option v-for="item in dealerRules" :key="item.id" :value="item.id" :label="item.name" />
-                    </el-select>
-                </el-form-item>
-                <el-form-item prop="remainingVIP" label="剩余名额">
-                    <el-input-number type="number" v-model="formData.remainingVIP" class="el-input-number_width"/>
-                </el-form-item>
-                <el-form-item prop="salesAmount" label="销售金额">
-                    <el-input-number type="number" v-model="formData.salesAmount" class="el-input-number_width"/>
-                </el-form-item>
-                <el-form-item prop="canWithdrawals" label="可提现金额">
-                    <el-input-number type="number" v-model="formData.canWithdrawals" class="el-input-number_width"/>
-                </el-form-item>
-                <el-form-item prop="cloudStorage" label="云存储数量">
-                    <el-input-number type="number" v-model="formData.cloudStorage" class="el-input-number_width"/>
-                </el-form-item>
-            <el-form-item>
-                <el-button @click="onSave" :loading="saving"
-                           type="primary">保存</el-button>
-                <el-button @click="onDelete" :loading="saving"
-                           type="danger" v-if="formData.id">删除
-                </el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+  <div class="edit-view">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="107px"
+      label-position="right"
+      size="small"
+      style="max-width: 600px;"
+    >
+      <el-form-item prop="userId" label="用户Id">
+        <el-input-number class="el-input-number_width" type="number" v-model="formData.userId" />
+      </el-form-item>
+      <el-form-item prop="dealerRuleId" label="套餐">
+        <el-select v-model="formData.dealerRuleId">
+          <el-option
+            v-for="item in dealerRules"
+            :key="item.id"
+            :value="item.id"
+            :label="item.name"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="remainingVIP" label="剩余名额">
+        <el-input-number
+          type="number"
+          v-model="formData.remainingVIP"
+          class="el-input-number_width"
+        />
+      </el-form-item>
+      <el-form-item prop="salesAmount" label="销售金额">
+        <el-input-number
+          type="number"
+          v-model="formData.salesAmount"
+          class="el-input-number_width"
+        />
+      </el-form-item>
+      <el-form-item prop="canWithdrawals" label="可提现金额">
+        <el-input-number
+          type="number"
+          v-model="formData.canWithdrawals"
+          class="el-input-number_width"
+        />
+      </el-form-item>
+      <el-form-item prop="cloudStorage" label="云存储数量">
+        <el-input-number
+          type="number"
+          v-model="formData.cloudStorage"
+          class="el-input-number_width"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+        <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除</el-button>
+        <el-button @click="$router.go(-1)">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script>
-    export default {
-        name: 'DealerEdit',
-        created() {
-            if (this.$route.query.id) {
-                this.$http
-                    .get('dealer/get/'+this.$route.query.id)
-                    .then(res => {
-                        this.formData = res;
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    });
-            }
-            this.$http
-                .get('dealerRule/backAll')
-                .then(res => {
-                    this.dealerRules = res.content;
-                })
-                .catch(e => {
-                    console.log(e);
-                    this.$message.error(e.error);
-                });
-        },
-        data() {
-            return {
-                saving: false,
-                formData: {},
-                rules: {},
-                dealerRules: {}
-            }
-        },
-        methods: {
-            onSave() {
-                this.$refs.form.validate((valid) => {
-                    if (valid) {
-                        this.submit();
-                    } else {
-                        return false;
-                    }
-                });
-            },
-            submit() {
-                let data = {...this.formData};
-
-                this.saving = true;
-                this.$http
-                    .post('/dealer/save', data, {body: 'json'})
-                    .then(res => {
-                        this.saving = false;
-                        this.$message.success('成功');
-                        this.$router.go(-1);
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.saving = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            onDelete() {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/dealer/del/${this.formData.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.$router.go(-1);
-                }).catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                })
-            },
+export default {
+  name: "DealerEdit",
+  created() {
+    if (this.$route.query.id) {
+      this.$http
+        .get("dealer/get/" + this.$route.query.id)
+        .then(res => {
+          this.formData = res;
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    }
+    this.$http
+      .get("dealerRule/backAll")
+      .then(res => {
+        this.dealerRules = res.content;
+      })
+      .catch(e => {
+        console.log(e);
+        this.$message.error(e.error);
+      });
+  },
+  data() {
+    return {
+      saving: false,
+      formData: {},
+      rules: {},
+      dealerRules: {}
+    };
+  },
+  methods: {
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
         }
+      });
+    },
+    submit() {
+      let data = { ...this.formData };
+
+      this.saving = true;
+      this.$http
+        .post("/dealer/save", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/dealer/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
-    .el-input-number_width {
-        width: 190px;
-    }
+.el-input-number_width {
+  width: 190px;
+}
 </style>

src/main/vue/src/views/DealerList.vue

@@ -1,235 +1,254 @@
 <template>
-    <div  class="list-view">
-        <div class="filters-container">
-            <el-input placeholder="输入关键字" v-model="search" clearable
-                      class="filter-item"></el-input>
-            <el-button @click="getData" type="primary" icon="el-icon-search"
-                       class="filter-item">搜索
-            </el-button>
-            <el-button @click="addRow" type="primary" icon="el-icon-plus"
-                       class="filter-item">添加
-            </el-button>
-            <!--<el-button @click="download" type="primary" icon="el-icon-download"
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加</el-button>
+      <!--<el-button @click="download" type="primary" icon="el-icon-download"
                        :loading="downloading" class="filter-item">导出EXCEL
-            </el-button>-->
-        </div>
-        <el-table :data="tableData" row-key="id" ref="table"
-                  header-row-class-name="table-header-row"
-                  header-cell-class-name="table-header-cell"
-                  row-class-name="table-row" cell-class-name="table-cell"
-                  :height="tableHeight">
-            <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
-            <el-table-column prop="id" label="ID" width="100">
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="userNickname" label="用户昵称"></el-table-column>
-            <el-table-column prop="dealerRuleName" label="经销商套餐名称"></el-table-column>
-            <el-table-column prop="remainingVIP" label="剩余名额">
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="salesAmount" label="销售金额">
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="canWithdrawals" label="可提现金额">
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="cloudStorage" label="云存储数量">
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column label="操作" align="center" fixed="right" min-width="150">
-                <template slot-scope="{row}">
-                    <el-button @click="show(row)" type="primary" size="mini" plain>补仓</el-button>
-                    <!--<el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>-->
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper">
-                <el-button v-if="!multipleMode"
-                           @click="toggleMultipleMode(true)">批量编辑</el-button>
-                <el-button-group v-else>
-                    <el-button @click="operation1">批量操作1</el-button>
-                    <el-button @click="operation2">批量操作2</el-button>
-                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
-                </el-button-group>
-            </div>
-            <el-pagination background @size-change="onSizeChange"
-                           @current-change="onCurrentChange" :current-page="page"
-                           :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalElements">
-            </el-pagination>
-        </div>
-        <el-dialog :visible.sync="showDialog" width="400px">
-            <el-form label-width="80px" label-position="right" size="small">
-                <el-form-item prop="dealerRuleId" label="选择套餐">
-                    <el-select v-model="dealerRuleId">
-                        <el-option v-for="item in dealerRules" :key="item.id" :value="item.id" :label="item.name" />
-                    </el-select>
-                </el-form-item>
-            </el-form>
-            <div slot="footer">
-                <el-button type="primary" size="mini" @click="becomeDealer" :loading="saving">开通</el-button>
-            </div>
-        </el-dialog>
+      </el-button>-->
     </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column prop="id" label="ID" width="100">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="userNickname" label="用户昵称"></el-table-column>
+      <el-table-column prop="dealerRuleName" label="经销商套餐名称"></el-table-column>
+      <el-table-column prop="remainingVIP" label="剩余名额">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="salesAmount" label="销售金额">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="canWithdrawals" label="可提现金额">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="cloudStorage" label="云存储数量">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" fixed="right" min-width="150">
+        <template slot-scope="{row}">
+          <el-button @click="show(row)" type="primary" size="mini" plain>补仓</el-button>
+          <el-button @click="chidren(row)" type="primary" size="mini" plain>下级</el-button>
+          <!--<el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>-->
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
+    </div>
+    <el-dialog :visible.sync="showDialog" width="400px">
+      <el-form label-width="80px" label-position="right" size="small">
+        <el-form-item prop="dealerRuleId" label="选择套餐">
+          <el-select v-model="dealerRuleId">
+            <el-option
+              v-for="item in dealerRules"
+              :key="item.id"
+              :value="item.id"
+              :label="item.name"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button type="primary" size="mini" @click="becomeDealer" :loading="saving">开通</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 <script>
-    import { mapState } from "vuex";
-    import pageableTable from "@/mixins/pageableTable";
+import { mapState } from "vuex";
+import pageableTable from "@/mixins/pageableTable";
 
-    export default {
-        name: 'DealerList',
-        mixins: [pageableTable],
-        created() {
-            this.getData();
-        },
-        data() {
-            return {
-                multipleMode: false,
-                search: "",
-                url: "/dealer/allDto",
-                downloading: false,
-                showDialog: false,
-                dealerRuleId: '',
-                dealerRules: {},
-                userId: '',
-                saving: false
-            }
-        },
-        computed: {
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
-        },
-        methods: {
-            beforeGetData() {
-                if (this.search) {
-                    return { search: this.search };
-                }
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            addRow() {
-                this.$router.push({
-                    path: "/dealerEdit",
-                    query: {
-                    ...this.$route.query
-                    }
-                });
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: "/dealerEdit",
-                    query: {
-                    id: row.id
-                    }
-                });
-            },
-            download() {
-                this.downloading = true;
-                this.$axios
-                    .get("/dealer/excel", { 
-                        responseType: "blob",
-                        params: { size: 10000 }
-                    })
-                    .then(res => {
-                        console.log(res);
-                        this.downloading = false;
-                        const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
-                        const link = document.createElement("a");
-                        link.href = downloadUrl;
-                        link.setAttribute(
-                            "download",
-                            res.headers["content-disposition"].split("filename=")[1]
-                        );
-                        document.body.appendChild(link);
-                        link.click();
-                        link.remove();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.downloading = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            deleteRow(row) {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/dealer/del/${row.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.getData();
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
-                    } else {
-                        this.$message.error('删除失败');
-                    }
-                })
-            },
-            show(row) {
-                this.showDialog = true;
-                this.userId = row.userId;
-                this.$http
-                    .get('dealerRule/backAll')
-                    .then(res => {
-                        this.dealerRules = res.content;
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    });
-            },
-            becomeDealer() {
-                this.saving = true;
-                this.$alert('确认要开通么？', '提醒', {type: 'error'}).then(() => {
-                    return this.$http.get('/dealer/become',{
-                        userId: this.userId,
-                        dealerRuleId: this.dealerRuleId
-                    })
-                }).then(() => {
-                    this.$message.success('开通成功');
-                    // this.$router.go(-1);
-                    this.showDialog = false;
-                    this.saving = false;
-                    this.getData();
-                }).catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                        this.saving = false;
-                    }
-                })
-            }
+export default {
+  name: "DealerList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/dealer/allDto",
+      downloading: false,
+      showDialog: false,
+      dealerRuleId: "",
+      dealerRules: {},
+      userId: "",
+      saving: false
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    beforeGetData() {
+      if (this.search) {
+        return { search: this.search };
+      }
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addRow() {
+      this.$router.push({
+        path: "/dealerEdit",
+        query: {
+          ...this.$route.query
+        }
+      });
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/dealerEdit",
+        query: {
+          id: row.id
+        }
+      });
+    },
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/dealer/excel", {
+          responseType: "blob",
+          params: { size: 10000 }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    deleteRow(row) {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/dealer/del/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("删除取消");
+          } else {
+            this.$message.error("删除失败");
+          }
+        });
+    },
+    show(row) {
+      this.showDialog = true;
+      this.userId = row.userId;
+      this.$http
+        .get("dealerRule/backAll")
+        .then(res => {
+          this.dealerRules = res.content;
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    },
+    becomeDealer() {
+      this.saving = true;
+      this.$alert("确认要开通么？", "提醒", { type: "error" })
+        .then(() => {
+          return this.$http.get("/dealer/become", {
+            userId: this.userId,
+            dealerRuleId: this.dealerRuleId
+          });
+        })
+        .then(() => {
+          this.$message.success("开通成功");
+          // this.$router.go(-1);
+          this.showDialog = false;
+          this.saving = false;
+          this.getData();
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+            this.saving = false;
+          }
+        });
+    },
+    chidren(row) {
+      this.$router.push({
+        path: "/dealerUser",
+        query: {
+          id: row.userId
         }
+      });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/DealerRuleEdit.vue

@@ -1,106 +1,106 @@
 <template>
-    <div class="edit-view">
-        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small"
-                 style="max-width: 500px;">
-            <el-form-item prop="name" label="名称">
-                <el-input v-model="formData.name" style="width: 400px"></el-input>
-            </el-form-item>
-            <el-form-item prop="detail" label="文字描述">
-                <el-input type="textarea" autosize v-model="formData.detail" style="width: 400px"></el-input>
-            </el-form-item>
-            <el-form-item prop="amount" label="价格">
-                <el-input-number controls-position="right" type="number" v-model="formData.amount"></el-input-number>
-            </el-form-item>
-            <el-form-item prop="quota" label="名额">
-                <el-input-number controls-position="right" type="number" v-model="formData.quota"></el-input-number>
-            </el-form-item>
-            <el-form-item>
-                <el-button @click="onSave" :loading="saving"
-                           type="primary">保存
-                </el-button>
-                <el-button @click="onDelete" :loading="saving"
-                           type="danger" v-if="formData.id">删除
-                </el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+  <div class="edit-view">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="80px"
+      label-position="right"
+      size="small"
+      style="max-width: 500px;"
+    >
+      <el-form-item prop="name" label="名称">
+        <el-input v-model="formData.name" style="width: 400px"></el-input>
+      </el-form-item>
+      <el-form-item prop="detail" label="文字描述">
+        <el-input type="textarea" autosize v-model="formData.detail" style="width: 400px"></el-input>
+      </el-form-item>
+      <el-form-item prop="amount" label="价格">
+        <el-input-number controls-position="right" type="number" v-model="formData.amount"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="quota" label="名额">
+        <el-input-number controls-position="right" type="number" v-model="formData.quota"></el-input-number>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+        <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除</el-button>
+        <el-button @click="$router.go(-1)">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script>
-    export default {
-        name: 'DealerRuleEdit',
-        created() {
-            if (this.$route.query.id) {
-                this.$http
-                    .get('dealerRule/get/' + this.$route.query.id)
-                    .then(res => {
-                        this.formData = res;
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    });
-            }
-        },
-        data() {
-            return {
-                saving: false,
-                formData: {},
-                rules: {
-                    name: [
-                        {required: true, message: '请输入名称', trigger: 'blur'},
-                    ],
-                    amount: [
-                        {required: true, message: '请输入价格', trigger: 'blur'},
-                    ],
-                    quota: [
-                        {required: true, message: '请输入名额', trigger: 'blur'},
-                    ],
-                },
-            }
-        },
-        methods: {
-            onSave() {
-                this.$refs.form.validate((valid) => {
-                    if (valid) {
-                        this.submit();
-                    } else {
-                        return false;
-                    }
-                });
-            },
-            submit() {
-                let data = {...this.formData};
-
-                this.saving = true;
-                this.$http
-                    .post('/dealerRule/save', data, {body: 'json'})
-                    .then(res => {
-                        this.saving = false;
-                        this.$message.success('成功');
-                        this.$router.go(-1);
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.saving = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            onDelete() {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/dealerRule/del/${this.formData.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.$router.go(-1);
-                }).catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                })
-            },
+export default {
+  name: "DealerRuleEdit",
+  created() {
+    if (this.$route.query.id) {
+      this.$http
+        .get("dealerRule/get/" + this.$route.query.id)
+        .then(res => {
+          this.formData = res;
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    }
+  },
+  data() {
+    return {
+      saving: false,
+      formData: {},
+      rules: {
+        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
+        amount: [{ required: true, message: "请输入价格", trigger: "blur" }],
+        quota: [{ required: true, message: "请输入名额", trigger: "blur" }]
+      }
+    };
+  },
+  methods: {
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
         }
+      });
+    },
+    submit() {
+      let data = { ...this.formData };
+
+      this.saving = true;
+      this.$http
+        .post("/dealerRule/save", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/dealerRule/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/DealerRuleList.vue

@@ -1,190 +1,179 @@
 <template>
-    <div class="list-view">
-        <div class="filters-container">
-            <el-input placeholder="输入关键字" v-model="search" clearable
-                      class="filter-item"></el-input>
-            <el-button @click="getData" type="primary" icon="el-icon-search"
-                       class="filter-item">搜索
-            </el-button>
-            <el-button @click="addRow" type="primary" icon="el-icon-plus"
-                       class="filter-item">添加
-            </el-button>
-            <!--<el-button @click="download" type="primary" icon="el-icon-download"
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加</el-button>
+      <!--<el-button @click="download" type="primary" icon="el-icon-download"
                        :loading="downloading" class="filter-item">导出EXCEL
-            </el-button>-->
-        </div>
-        <el-table :data="tableData" row-key="id" ref="table"
-                  header-row-class-name="table-header-row"
-                  header-cell-class-name="table-header-cell"
-                  row-class-name="table-row" cell-class-name="table-cell"
-                  :height="tableHeight">
-            <el-table-column v-if="multipleMode" align="center" type="selection"
-                             width="50">
-            </el-table-column>
-            <el-table-column prop="id" label="ID" width="100">
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort"
-                                     @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="name" label="名称"
-            >
-            </el-table-column>
-            <el-table-column prop="detail" label="文字描述"
-            >
-            </el-table-column>
-            <el-table-column prop="amount" label="价格"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="quota" label="名额"
-            >
-            </el-table-column>
-            <el-table-column prop="enabled" label="上架">
-                <template slot-scope="{row}">
-                    <el-tag :type="row.enabled?'':'info'"> {{ row.enabled }}</el-tag>
-                </template>
-            </el-table-column>
-            <el-table-column
-                    label="操作"
-                    align="center"
-                    fixed="right"
-                    min-width="150">
-                <template slot-scope="{row}">
-                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
-                    <el-button @click="deleteRow(row)" type="danger" size="mini" plain v-if="row.enabled">下架</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper">
-                <el-button v-if="!multipleMode"
-                           @click="toggleMultipleMode(true)">批量编辑
-                </el-button>
-                <el-button-group v-else>
-                    <el-button @click="operation1">批量操作1</el-button>
-                    <el-button @click="operation2">批量操作2</el-button>
-                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
-                </el-button-group>
-            </div>
-            <el-pagination background @size-change="onSizeChange"
-                           @current-change="onCurrentChange" :current-page="page"
-                           :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalElements">
-            </el-pagination>
-        </div>
-
-
+      </el-button>-->
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column prop="id" label="ID" width="100">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="名称"></el-table-column>
+      <el-table-column prop="detail" label="文字描述"></el-table-column>
+      <el-table-column prop="amount" label="价格">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="quota" label="名额"></el-table-column>
+      <el-table-column prop="enabled" label="上架">
+        <template slot-scope="{row}">
+          <el-tag :type="row.enabled?'':'info'">{{ row.enabled }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" fixed="right" min-width="150">
+        <template slot-scope="{row}">
+          <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+          <el-button @click="deleteRow(row)" type="danger" size="mini" plain v-if="row.enabled">下架</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
     </div>
+  </div>
 </template>
 <script>
-    import {mapState} from "vuex";
-    import pageableTable from "@/mixins/pageableTable";
+import { mapState } from "vuex";
+import pageableTable from "@/mixins/pageableTable";
 
-    export default {
-        name: 'DealerRuleList',
-        mixins: [pageableTable],
-        created() {
-            this.getData();
-        },
-        data() {
-            return {
-                multipleMode: false,
-                search: "",
-                url: "/dealerRule/backAll",
-                downloading: false,
-            }
-        },
-        computed: {
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
-        },
-        methods: {
-            beforeGetData() {
-                if (this.search) {
-                    return {search: this.search};
-                }
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            addRow() {
-                this.$router.push({
-                    path: "/dealerRuleEdit",
-                    query: {
-                        ...this.$route.query
-                    }
-                });
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: "/dealerRuleEdit",
-                    query: {
-                        id: row.id
-                    }
-                });
-            },
-            download() {
-                this.downloading = true;
-                this.$axios
-                    .get("/dealerRule/excel", {
-                        responseType: "blob",
-                        params: {size: 10000}
-                    })
-                    .then(res => {
-                        console.log(res);
-                        this.downloading = false;
-                        const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
-                        const link = document.createElement("a");
-                        link.href = downloadUrl;
-                        link.setAttribute(
-                            "download",
-                            res.headers["content-disposition"].split("filename=")[1]
-                        );
-                        document.body.appendChild(link);
-                        link.click();
-                        link.remove();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.downloading = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            deleteRow(row) {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/dealerRule/del/${row.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.getData();
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
-                    } else {
-                        this.$message.error('删除失败');
-                    }
-                })
-            },
+export default {
+  name: "DealerRuleList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/dealerRule/backAll",
+      downloading: false
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    beforeGetData() {
+      if (this.search) {
+        return { 
+          search: this.search,
+        };
+      }
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addRow() {
+      this.$router.push({
+        path: "/dealerRuleEdit",
+        query: {
+          ...this.$route.query
+        }
+      });
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/dealerRuleEdit",
+        query: {
+          id: row.id
         }
+      });
+    },
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/dealerRule/excel", {
+          responseType: "blob",
+          params: { size: 10000 }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    deleteRow(row) {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/dealerRule/del/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("删除取消");
+          } else {
+            this.$message.error("删除失败");
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/FeedbackEdit.vue

@@ -1,109 +1,114 @@
 <template>
-    <div class="edit-view">
-        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small"
-                 style="max-width: 500px;">
-                <el-form-item prop="id" label="id">
-                            <el-input-number type="number" v-model="formData.id"></el-input-number>
-                </el-form-item>
-                <el-form-item prop="userId" label="用户编号">
-                            <el-input-number type="number" v-model="formData.userId"></el-input-number>
-                </el-form-item>
-                <el-form-item prop="goodsId" label="商品编号">
-                            <el-input-number type="number" v-model="formData.goodsId"></el-input-number>
-                </el-form-item>
-                <el-form-item prop="rate" label="评分">
-                            <el-input v-model="formData.rate"></el-input>
-                </el-form-item>
-                <el-form-item prop="type" label="类型">
-                            <el-input v-model="formData.type"></el-input>
-                </el-form-item>
-                <el-form-item prop="content" label="内容">
-                            <el-input v-model="formData.content"></el-input>
-                </el-form-item>
-                <el-form-item prop="img" label="图片">
-                            <el-input v-model="formData.img"></el-input>
-                </el-form-item>
-                <el-form-item prop="title" label="标题">
-                            <el-input v-model="formData.title"></el-input>
-                </el-form-item>
-            <el-form-item>
-                <el-button @click="onSave" :loading="saving"
-                           type="primary">保存</el-button>
-                <el-button @click="onDelete" :loading="saving"
-                           type="danger" v-if="formData.id">删除
-                </el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+  <div class="edit-view">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="80px"
+      label-position="right"
+      size="small"
+      style="max-width: 500px;"
+    >
+      <el-form-item prop="id" label="id">
+        <el-input-number type="number" v-model="formData.id"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="userId" label="用户编号">
+        <el-input-number type="number" v-model="formData.userId"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="goodsId" label="商品编号">
+        <el-input-number type="number" v-model="formData.goodsId"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="rate" label="评分">
+        <el-input v-model="formData.rate"></el-input>
+      </el-form-item>
+      <el-form-item prop="type" label="类型">
+        <el-input v-model="formData.type"></el-input>
+      </el-form-item>
+      <el-form-item prop="content" label="内容">
+        <el-input v-model="formData.content"></el-input>
+      </el-form-item>
+      <el-form-item prop="img" label="图片">
+        <el-input v-model="formData.img"></el-input>
+      </el-form-item>
+      <el-form-item prop="title" label="标题">
+        <el-input v-model="formData.title"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+        <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除</el-button>
+        <el-button @click="$router.go(-1)">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script>
-    export default {
-        name: 'FeedbackEdit',
-        created() {
-            if (this.$route.query.id) {
-                this.$http
-                    .get('feedback/get/'+this.$route.query.id)
-                    .then(res => {
-                        this.formData = res;
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    });
-            }
-        },
-        data() {
-            return {
-                saving: false,
-                formData: {
-                },
-                rules: {
-                },
-            }
-        },
-        methods: {
-            onSave() {
-                this.$refs.form.validate((valid) => {
-                    if (valid) {
-                        this.submit();
-                    } else {
-                        return false;
-                    }
-                });
-            },
-            submit() {
-                let data = {...this.formData};
-
-                this.saving = true;
-                this.$http
-                    .post('/feedback/save', data, {body: 'json'})
-                    .then(res => {
-                        this.saving = false;
-                        this.$message.success('成功');
-                        this.$router.go(-1);
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.saving = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            onDelete() {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/feedback/del/${this.formData.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.$router.go(-1);
-                }).catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                })
-            },
+export default {
+  name: "FeedbackEdit",
+  created() {
+    if (this.$route.query.id) {
+      this.$http
+        .get("feedback/get/" + this.$route.query.id)
+        .then(res => {
+          this.formData = res;
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    }
+  },
+  data() {
+    return {
+      saving: false,
+      formData: {},
+      rules: {}
+    };
+  },
+  methods: {
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
         }
+      });
+    },
+    submit() {
+      let data = { ...this.formData };
+
+      this.saving = true;
+      this.$http
+        .post("/feedback/save", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/feedback/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/FeedbackList.vue

@@ -1,238 +1,229 @@
 <template>
-    <div class="list-view">
-        <div class="filters-container">
-            <el-input placeholder="输入关键字" v-model="search" clearable
-                      class="filter-item"></el-input>
-            <el-button @click="getData" type="primary" icon="el-icon-search"
-                       class="filter-item">搜索
-            </el-button>
-   <!--         <el-button @click="addRow" type="primary" icon="el-icon-plus"
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <!--         <el-button @click="addRow" type="primary" icon="el-icon-plus"
                        class="filter-item">添加
-            </el-button>-->
-            <!--            <el-button @click="download" type="primary" icon="el-icon-download"
+      </el-button>-->
+      <!--            <el-button @click="download" type="primary" icon="el-icon-download"
                                    :loading="downloading" class="filter-item">导出EXCEL
-                        </el-button>-->
-        </div>
-        <el-table :data="tableData" row-key="id" ref="table"
-                  header-row-class-name="table-header-row"
-                  header-cell-class-name="table-header-cell"
-                  row-class-name="table-row" cell-class-name="table-cell"
-                  :height="tableHeight">
-            <el-table-column v-if="multipleMode" align="center" type="selection"
-                             width="50">
-            </el-table-column>
-            <!--            <el-table-column prop="id" label="ID" width="100">
+      </el-button>-->
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <!--            <el-table-column prop="id" label="ID" width="100">
                             <template slot="header" slot-scope="{column}">
                                 <sortable-header :column="column" :current-sort="sort"
                                                  @changeSort="changeSort">
                                 </sortable-header>
                             </template>
-                        </el-table-column>-->
-            <el-table-column prop="nickname" label="用户昵称"
-            >
-            </el-table-column>
-            <el-table-column prop="goodsname" label="商品名称" min-width="100"
-            >
-            </el-table-column>
-            <el-table-column label="商品图" min-width="50">
-                <template slot-scope="{ row }">
-                    <el-image
-                            style="width: 30px; height: 30px"
-                            :src="strToArr(row.goodsimg)"
-                            fit="cover"
-                            :preview-src-list="[strToArr(row.goodsimg)]"
-                    ></el-image>
-                </template>
-            </el-table-column>
+      </el-table-column>-->
+      <el-table-column prop="nickname" label="用户昵称"></el-table-column>
+      <el-table-column prop="goodsname" label="商品名称" min-width="100"></el-table-column>
+      <el-table-column label="商品图" min-width="50">
+        <template slot-scope="{ row }">
+          <el-image
+            style="width: 30px; height: 30px"
+            :src="strToArr(row.goodsimg)"
+            fit="cover"
+            :preview-src-list="[strToArr(row.goodsimg)]"
+          ></el-image>
+        </template>
+      </el-table-column>
 
-            <el-table-column prop="rate" label="评分" min-width="40"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <!--            <el-table-column prop="type" label="类型"
+      <el-table-column prop="rate" label="评分" min-width="40">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <!--            <el-table-column prop="type" label="类型"
                         >
                             <template slot="header" slot-scope="{column}">
                                 <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
                                 </sortable-header>
                             </template>
-                        </el-table-column>-->
-            <el-table-column prop="content" label="内容" min-width="150"
-            >
-                <template slot-scope="{row}">
-                    <el-popover trigger="hover" placement="top">
-                        <p> {{ row.content }}</p>
-                        <div slot="reference" class="name-wrapper">
-                            {{ row.content }}
-                        </div>
-                    </el-popover>
-                </template>
-            </el-table-column>
-            <el-table-column prop="img" label="图片"
-            >
-                <template slot-scope="{row}">
-                    <el-image style="width: 30px; height: 30px"
-                              :src="picList(row.img)"
-                              fit="cover"
-                              :preview-src-list="list(row.img)"
-                    ></el-image>
-                </template>
-            </el-table-column>
-            <!--            <el-table-column prop="title" label="标题"
+      </el-table-column>-->
+      <el-table-column prop="content" label="内容" min-width="150">
+        <template slot-scope="{row}">
+          <el-popover trigger="hover" placement="top">
+            <p>{{ row.content }}</p>
+            <div slot="reference" class="name-wrapper">{{ row.content }}</div>
+          </el-popover>
+        </template>
+      </el-table-column>
+      <el-table-column prop="img" label="图片">
+        <template slot-scope="{row}">
+          <el-image
+            style="width: 30px; height: 30px"
+            :src="picList(row.img)"
+            fit="cover"
+            :preview-src-list="list(row.img)"
+          ></el-image>
+        </template>
+      </el-table-column>
+      <!--            <el-table-column prop="title" label="标题"
                         >
-                        </el-table-column>-->
-            <el-table-column
-                    label="操作"
-                    align="center"
-                    fixed="right"
-                    min-width="60">
-                <template slot-scope="{row}">
-                    <!--                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>-->
-                    <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper">
-                <el-button v-if="!multipleMode"
-                           @click="toggleMultipleMode(true)">批量编辑
-                </el-button>
-                <el-button-group v-else>
-                    <el-button @click="operation1">批量操作1</el-button>
-                    <el-button @click="operation2">批量操作2</el-button>
-                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
-                </el-button-group>
-            </div>
-            <el-pagination background @size-change="onSizeChange"
-                           @current-change="onCurrentChange" :current-page="page"
-                           :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalElements">
-            </el-pagination>
-        </div>
-
+      </el-table-column>-->
+      <el-table-column label="操作" align="center" fixed="right" min-width="60">
+        <template slot-scope="{row}">
+          <!--                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>-->
+          <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
     </div>
+  </div>
 </template>
 <script>
-    import {mapState} from "vuex";
-    import pageableTable from "@/mixins/pageableTable";
+import { mapState } from "vuex";
+import pageableTable from "@/mixins/pageableTable";
 
-    export default {
-        name: 'FeedbackList',
-        mixins: [pageableTable],
-        created() {
-            this.getData();
-        },
-        data() {
-            return {
-                multipleMode: false,
-                search: "",
-                url: "/feedback/allDTO",
-                downloading: false,
-            }
-        },
-        computed: {
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
-        },
-        methods: {
-            picList(row) {
-                const arr = row.split(',');
-                if (arr.length > 0) {
-                    return arr[0]
-                } else {
-                    return ''
-                }
-            },
-            list(row){
-                return row.split(',');
-            },
-            strToArr(str) {
-                const arr = str.split(',');
-                return arr[0];
-            },
-            beforeGetData() {
-                if (this.search) {
-                    return {search: this.search};
-                }
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            addRow() {
-                this.$router.push({
-                    path: "/feedbackEdit",
-                    query: {
-                        ...this.$route.query
-                    }
-                });
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: "/feedbackEdit",
-                    query: {
-                        id: row.id
-                    }
-                });
-            },
-            download() {
-                this.downloading = true;
-                this.$axios
-                    .get("/feedback/excel", {
-                        responseType: "blob",
-                        params: {size: 10000}
-                    })
-                    .then(res => {
-                        console.log(res);
-                        this.downloading = false;
-                        const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
-                        const link = document.createElement("a");
-                        link.href = downloadUrl;
-                        link.setAttribute(
-                            "download",
-                            res.headers["content-disposition"].split("filename=")[1]
-                        );
-                        document.body.appendChild(link);
-                        link.click();
-                        link.remove();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.downloading = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            deleteRow(row) {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/feedback/del/${row.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.getData();
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
-                    } else {
-                        this.$message.error('删除失败');
-                    }
-                })
-            },
+export default {
+  name: "FeedbackList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/feedback/allDTO",
+      downloading: false
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    picList(row) {
+      const arr = row.split(",");
+      if (arr.length > 0) {
+        return arr[0];
+      } else {
+        return "";
+      }
+    },
+    list(row) {
+      return row.split(",");
+    },
+    strToArr(str) {
+      const arr = str.split(",");
+      return arr[0];
+    },
+    beforeGetData() {
+      if (this.search) {
+        return { search: this.search };
+      }
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addRow() {
+      this.$router.push({
+        path: "/feedbackEdit",
+        query: {
+          ...this.$route.query
+        }
+      });
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/feedbackEdit",
+        query: {
+          id: row.id
         }
+      });
+    },
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/feedback/excel", {
+          responseType: "blob",
+          params: { size: 10000 }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    deleteRow(row) {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/feedback/del/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("删除取消");
+          } else {
+            this.$message.error("删除失败");
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/FinancialEdit.vue

@@ -1,124 +1,137 @@
 <template>
-    <div class="edit-view">
-        <el-form :model="formData" :rules="rules" ref="form" label-width="122px" label-position="right" size="small"
-                 style="max-width: 500px;">
-                <el-form-item prop="payMethod" label="支付方式">
-                            <el-select v-model="formData.payMethod" clearable filterable  placeholder="请选择">
-                                <el-option
-                                        v-for="item in payMethodOptions"
-                                        :key="item.value"
-                                        :label="item.label"
-                                        :value="item.value">
-                                </el-option>
-                            </el-select>
-                </el-form-item>
-                <el-form-item prop="type" label="流水类型">
-                            <el-select v-model="formData.type" clearable filterable  placeholder="请选择">
-                                <el-option
-                                        v-for="item in typeOptions"
-                                        :key="item.value"
-                                        :label="item.label"
-                                        :value="item.value">
-                                </el-option>
-                            </el-select>
-                </el-form-item>
-                <el-form-item prop="money" label="金额">
-                            <el-input-number type="number" v-model="formData.money"></el-input-number>
-                </el-form-item>
-                <el-form-item prop="extendId" label="相关数据的ID号">
-                            <el-input-number type="number" v-model="formData.extendId"></el-input-number>
-                </el-form-item>
-                <el-form-item prop="transactionId" label="交易编号">
-                            <el-input v-model="formData.transactionId"></el-input>
-                </el-form-item>
-                <el-form-item prop="settleTime" label="发生时间">
-                            <el-date-picker
-                                    v-model="formData.settleTime"
-                                    type="datetime"
-                                    value-format="yyyy-MM-dd HH:mm:ss"
-                                    placeholder="选择日期时间">
-                            </el-date-picker>
-                </el-form-item>
-            <el-form-item>
-                <el-button @click="onSave" :loading="saving"
-                           type="primary">保存</el-button>
-                <el-button @click="onDelete" :loading="saving"
-                           type="danger" v-if="formData.id">删除
-                </el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+  <div class="edit-view">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="122px"
+      label-position="right"
+      size="small"
+      style="max-width: 500px;"
+    >
+      <el-form-item prop="payMethod" label="支付方式">
+        <el-select v-model="formData.payMethod" clearable filterable placeholder="请选择">
+          <el-option
+            v-for="item in payMethodOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="type" label="流水类型">
+        <el-select v-model="formData.type" clearable filterable placeholder="请选择">
+          <el-option
+            v-for="item in typeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="money" label="金额">
+        <el-input-number type="number" v-model="formData.money"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="extendId" label="相关数据的ID号">
+        <el-input-number type="number" v-model="formData.extendId"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="transactionId" label="交易编号">
+        <el-input v-model="formData.transactionId"></el-input>
+      </el-form-item>
+      <el-form-item prop="settleTime" label="发生时间">
+        <el-date-picker
+          v-model="formData.settleTime"
+          type="datetime"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="选择日期时间"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+        <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除</el-button>
+        <el-button @click="$router.go(-1)">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script>
-    export default {
-        name: 'FinancialEdit',
-        created() {
-            if (this.$route.query.id) {
-                this.$http
-                    .get('financial/get/'+this.$route.query.id)
-                    .then(res => {
-                        this.formData = res;
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    });
-            }
-        },
-        data() {
-            return {
-                saving: false,
-                formData: {
-                },
-                rules: {
-                },
-                            payMethodOptions:[{"label":"微信","value":"WEIXIN"},{"label":"支付宝","value":"ZHIFUBAO"},{"label":"余额","value":"YUE"}],
-                            typeOptions:[{"label":"购买","value":"BUY"},{"label":"退款","value":"REFUND"},{"label":"提现","value":"WITHDRAW"}],
-            }
-        },
-        methods: {
-            onSave() {
-                this.$refs.form.validate((valid) => {
-                    if (valid) {
-                        this.submit();
-                    } else {
-                        return false;
-                    }
-                });
-            },
-            submit() {
-                let data = {...this.formData};
-
-                this.saving = true;
-                this.$http
-                    .post('/financial/save', data, {body: 'json'})
-                    .then(res => {
-                        this.saving = false;
-                        this.$message.success('成功');
-                        this.$router.go(-1);
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.saving = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            onDelete() {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/financial/del/${this.formData.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.$router.go(-1);
-                }).catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                })
-            },
+export default {
+  name: "FinancialEdit",
+  created() {
+    if (this.$route.query.id) {
+      this.$http
+        .get("financial/get/" + this.$route.query.id)
+        .then(res => {
+          this.formData = res;
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    }
+  },
+  data() {
+    return {
+      saving: false,
+      formData: {},
+      rules: {},
+      payMethodOptions: [
+        { label: "微信", value: "WEIXIN" },
+        { label: "支付宝", value: "ZHIFUBAO" },
+        { label: "余额", value: "YUE" }
+      ],
+      typeOptions: [
+        { label: "购买", value: "BUY" },
+        { label: "退款", value: "REFUND" },
+        { label: "提现", value: "WITHDRAW" }
+      ]
+    };
+  },
+  methods: {
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
         }
+      });
+    },
+    submit() {
+      let data = { ...this.formData };
+
+      this.saving = true;
+      this.$http
+        .post("/financial/save", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/financial/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/FinancialList.vue

@@ -1,79 +1,60 @@
 <template>
-    <div  class="list-view">
-        <div class="filters-container">
-            <el-input placeholder="输入关键字" v-model="search" clearable
-                      class="filter-item"></el-input>
-            <el-button @click="getData" type="primary" icon="el-icon-search"
-                       class="filter-item">搜索
-            </el-button>
-            <el-button @click="addRow" type="primary" icon="el-icon-plus"
-                       class="filter-item">添加
-            </el-button>
-<!--            <el-button @click="download" type="primary" icon="el-icon-download"
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加</el-button>
+      <!--            <el-button @click="download" type="primary" icon="el-icon-download"
                        :loading="downloading" class="filter-item">导出EXCEL
-            </el-button>-->
-        </div>
-        <el-table :data="tableData" row-key="id" ref="table"
-                  header-row-class-name="table-header-row"
-                  header-cell-class-name="table-header-cell"
-                  row-class-name="table-row" cell-class-name="table-cell"
-                  :height="tableHeight">
-            <el-table-column v-if="multipleMode" align="center" type="selection"
-                             width="50">
-            </el-table-column>
-            <el-table-column prop="id" label="ID" width="100">
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort"
-                                     @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-                                <el-table-column prop="payMethod" label="支付方式"
-                            :formatter="payMethodFormatter"
-                        >
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="type" label="流水类型"
-                            :formatter="typeFormatter"
-                        >
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="money" label="金额"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="extendId" label="相关数据的ID号"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="transactionId" label="交易编号"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="settleTime" label="发生时间"
-                            :formatter="datetimeFormatter"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-<!--            <el-table-column
+      </el-button>-->
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column prop="id" label="ID" width="100">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="payMethod" label="支付方式" :formatter="payMethodFormatter">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="type" label="流水类型" :formatter="typeFormatter">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="money" label="金额">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="extendId" label="相关数据的ID号">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="transactionId" label="交易编号">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="settleTime" label="发生时间" :formatter="datetimeFormatter">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <!--            <el-table-column
                     label="操作"
                     align="center"
                     fixed="right"
@@ -82,147 +63,162 @@
                     <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
 &lt;!&ndash;                    <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>&ndash;&gt;
                 </template>
-            </el-table-column>-->
-        </el-table>
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper">
-                <el-button v-if="!multipleMode"
-                           @click="toggleMultipleMode(true)">批量编辑</el-button>
-                <el-button-group v-else>
-                    <el-button @click="operation1">批量操作1</el-button>
-                    <el-button @click="operation2">批量操作2</el-button>
-                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
-                </el-button-group>
-            </div>
-            <el-pagination background @size-change="onSizeChange"
-                           @current-change="onCurrentChange" :current-page="page"
-                           :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalElements">
-            </el-pagination>
-        </div>
-
+      </el-table-column>-->
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
     </div>
+  </div>
 </template>
 <script>
-    import { mapState } from "vuex";
-    import pageableTable from "@/mixins/pageableTable";
+import { mapState } from "vuex";
+import pageableTable from "@/mixins/pageableTable";
 
-    export default {
-        name: 'FinancialList',
-        mixins: [pageableTable],
-        created() {
-            this.getData();
-        },
-        data() {
-            return {
-                multipleMode: false,
-                search: "",
-                url: "/financial/all",
-                downloading: false,
-                        payMethodOptions:[{"label":"微信","value":"WEIXIN"},{"label":"支付宝","value":"ZHIFUBAO"},{"label":"余额","value":"YUE"}],
-                        typeOptions:[{"label":"购买","value":"BUY"},{"label":"退款","value":"REFUND"},{"label":"提现","value":"WITHDRAW"}],
-            }
-        },
-        computed: {
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
-        },
-        methods: {
-                    payMethodFormatter(row, column, cellValue, index) {
-                        let selectedOption = this.payMethodOptions.find(i => i.value === cellValue);
-                        if (selectedOption) {
-                            return selectedOption.label;
-                        }
-                        return '';
-                    },
-                    typeFormatter(row, column, cellValue, index) {
-                        let selectedOption = this.typeOptions.find(i => i.value === cellValue);
-                        if (selectedOption) {
-                            return selectedOption.label;
-                        }
-                        return '';
-                    },
-            beforeGetData() {
-                if (this.search) {
-                    return { search: this.search };
-                }
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            addRow() {
-                this.$router.push({
-                    path: "/financialEdit",
-                    query: {
-                    ...this.$route.query
-                    }
-                });
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: "/financialEdit",
-                    query: {
-                    id: row.id
-                    }
-                });
-            },
-            download() {
-                this.downloading = true;
-                this.$axios
-                    .get("/financial/excel", { 
-                        responseType: "blob",
-                        params: { size: 10000 }
-                    })
-                    .then(res => {
-                        console.log(res);
-                        this.downloading = false;
-                        const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
-                        const link = document.createElement("a");
-                        link.href = downloadUrl;
-                        link.setAttribute(
-                            "download",
-                            res.headers["content-disposition"].split("filename=")[1]
-                        );
-                        document.body.appendChild(link);
-                        link.click();
-                        link.remove();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.downloading = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            // deleteRow(row) {
-            //     this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-            //         return this.$http.post(`/financial/del/${row.id}`)
-            //     }).then(() => {
-            //         this.$message.success('删除成功');
-            //         this.getData();
-            //     }).catch(action => {
-            //         if (action === 'cancel') {
-            //             this.$message.info('删除取消');
-            //         } else {
-            //             this.$message.error('删除失败');
-            //         }
-            //     })
-            // },
+export default {
+  name: "FinancialList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/financial/all",
+      downloading: false,
+      payMethodOptions: [
+        { label: "微信", value: "WEIXIN" },
+        { label: "支付宝", value: "ZHIFUBAO" },
+        { label: "余额", value: "YUE" }
+      ],
+      typeOptions: [
+        { label: "购买", value: "BUY" },
+        { label: "退款", value: "REFUND" },
+        { label: "提现", value: "WITHDRAW" }
+      ]
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    payMethodFormatter(row, column, cellValue, index) {
+      let selectedOption = this.payMethodOptions.find(
+        i => i.value === cellValue
+      );
+      if (selectedOption) {
+        return selectedOption.label;
+      }
+      return "";
+    },
+    typeFormatter(row, column, cellValue, index) {
+      let selectedOption = this.typeOptions.find(i => i.value === cellValue);
+      if (selectedOption) {
+        return selectedOption.label;
+      }
+      return "";
+    },
+    beforeGetData() {
+      // if (this.search) {
+      return {
+        sort: 'createdAt,desc',
+        search: this.search
+      };
+      // }
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addRow() {
+      this.$router.push({
+        path: "/financialEdit",
+        query: {
+          ...this.$route.query
+        }
+      });
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/financialEdit",
+        query: {
+          id: row.id
         }
+      });
+    },
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/financial/excel", {
+          responseType: "blob",
+          params: { size: 10000 }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
     }
+    // deleteRow(row) {
+    //     this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
+    //         return this.$http.post(`/financial/del/${row.id}`)
+    //     }).then(() => {
+    //         this.$message.success('删除成功');
+    //         this.getData();
+    //     }).catch(action => {
+    //         if (action === 'cancel') {
+    //             this.$message.info('删除取消');
+    //         } else {
+    //             this.$message.error('删除失败');
+    //         }
+    //     })
+    // },
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/GenCodeEdit.vue

@@ -1,793 +1,767 @@
 <template>
-    <div v-loading="loading" element-loading-text="拼命加载中">
-        <el-form :model="formData" :rules="rules" ref="form" label-width="80px"
-                 label-position="right" size="mini">
+  <div v-loading="loading" element-loading-text="拼命加载中">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="80px"
+      label-position="right"
+      size="mini"
+    >
+      <el-form-item prop="tableName" label="表名">
+        <el-select
+          placeholder="表名"
+          clearable
+          filterable
+          v-model="formData.tableName"
+          @change="changeTableName"
+          class="filter-item"
+        >
+          <el-option
+            v-for="item in tableList"
+            :label="item.name"
+            :value="item.name"
+            :key="item.name"
+          ></el-option>
+        </el-select>
+      </el-form-item>
 
-            <el-form-item prop="tableName" label="表名">
-                <el-select placeholder="表名" clearable filterable
-                           v-model="formData.tableName" @change="changeTableName"
-                           class="filter-item">
-                    <el-option v-for="item in tableList" :label="item.name"
-                               :value="item.name" :key="item.name"></el-option>
-                </el-select>
+      <el-form-item prop="className" label="类名">
+        <el-input v-model="formData.className" style="width: 400px;"></el-input>
+      </el-form-item>
 
-            </el-form-item>
+      <el-form-item prop="tablePackage" label="包名">
+        <el-input v-model="formData.tablePackage" style="width: 400px;"></el-input>
+      </el-form-item>
 
-            <el-form-item prop="className" label="类名">
-                <el-input v-model="formData.className" style="width: 400px;">
-                </el-input>
-            </el-form-item>
+      <el-form-item prop="remark" label="描述">
+        <el-input v-model="formData.remark" style="width: 400px;"></el-input>
+      </el-form-item>
 
-            <el-form-item prop="tablePackage" label="包名">
-                <el-input v-model="formData.tablePackage" style="width: 400px;">
-                </el-input>
-            </el-form-item>
+      <el-form-item label="目录">
+        {{formData.javaPath}}
+        <br />
+        {{formData.viewPath}}
+        <br />
+        {{formData.routerPath}}
+        <br />
+        {{formData.resourcesPath}}
+      </el-form-item>
 
-            <el-form-item prop="remark" label="描述">
-                <el-input v-model="formData.remark" style="width: 400px;">
-                </el-input>
-            </el-form-item>
-
-            <el-form-item label="目录">
-                {{formData.javaPath}}<br>
-                {{formData.viewPath}}<br>
-                {{formData.routerPath}}<br>
-                {{formData.resourcesPath}}
-            </el-form-item>
-
-            <el-form-item prop="genCode" label="生成">
-                <el-checkbox v-model="formData.genClass" label="类">
-                </el-checkbox>
-                <el-checkbox v-model="formData.genList" label="列表">
-                </el-checkbox>
-                <el-checkbox v-model="formData.genForm" label="表单">
-                </el-checkbox>
-                <el-checkbox v-model="formData.genRouter" label="路由">
-                </el-checkbox>
-            </el-form-item>
-            <el-form-item prop="fields" label="数据">
-                <el-tabs value="1" type="border-card">
-                    <el-tab-pane label="字段" name="1">
-                        <el-table :data="fields">
-                            <el-table-column prop="name" label="字段名" width="200"
-                                             align="center">
-                                <template slot-scope="{row}">
-                                    <el-input v-model="row.name"></el-input>
-                                </template>
-                            </el-table-column>
-                            <el-table-column prop="remark" label="描述"
-                                             align="center" width="200">
-                                <template slot-scope="{row}">
-                                    <el-input v-model="row.remark"></el-input>
-                                </template>
-                            </el-table-column>
-                            <el-table-column width="130" align="center">
-                                <template slot-scope="{ row, column, $index }">
-                                    <el-button @click="moveUp($index)"
-                                               type="text">上移</el-button>
-                                    <el-button @click="moveDown($index)"
-                                               type="text">下移</el-button>
-                                    <el-button @click="removeField($index)"
-                                               type="text">删除</el-button>
-                                </template>
-                            </el-table-column>
-                        </el-table>
-                        <el-button @click="addField" type="text"
-                                   icon="el-icon-plus">添加</el-button>
-                    </el-tab-pane>
-                    <el-tab-pane label="页面属性" name="2">
-                        <el-table :data="editableFields">
-                            <el-table-column prop="name" label="字段" width="200">
-                            </el-table-column>
-                            <el-table-column prop="showInList" label="列表"
-                                             width="50" align="center">
-                                <template slot-scope="{row}">
-                                    <el-checkbox v-model="row.showInList">
-                                    </el-checkbox>
-                                </template>
-                            </el-table-column>
-                            <el-table-column prop="showInForm" label="表单"
-                                             width="50" align="center">
-                                <template slot-scope="{row}">
-                                    <el-checkbox v-model="row.showInForm"
-                                                 :disabled="row.primaryKey&&!formData.readTable">
-                                    </el-checkbox>
-                                </template>
-                            </el-table-column>
-                            <!-- <el-table-column prop="sortable" label="排序" width="50" align="center">
+      <el-form-item prop="genCode" label="生成">
+        <el-checkbox v-model="formData.genClass" label="类"></el-checkbox>
+        <el-checkbox v-model="formData.genList" label="列表"></el-checkbox>
+        <el-checkbox v-model="formData.genForm" label="表单"></el-checkbox>
+        <el-checkbox v-model="formData.genRouter" label="路由"></el-checkbox>
+      </el-form-item>
+      <el-form-item prop="fields" label="数据">
+        <el-tabs value="1" type="border-card">
+          <el-tab-pane label="字段" name="1">
+            <el-table :data="fields">
+              <el-table-column prop="name" label="字段名" width="200" align="center">
+                <template slot-scope="{row}">
+                  <el-input v-model="row.name"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="remark" label="描述" align="center" width="200">
+                <template slot-scope="{row}">
+                  <el-input v-model="row.remark"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column width="130" align="center">
+                <template slot-scope="{ row, column, $index }">
+                  <el-button @click="moveUp($index)" type="text">上移</el-button>
+                  <el-button @click="moveDown($index)" type="text">下移</el-button>
+                  <el-button @click="removeField($index)" type="text">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <el-button @click="addField" type="text" icon="el-icon-plus">添加</el-button>
+          </el-tab-pane>
+          <el-tab-pane label="页面属性" name="2">
+            <el-table :data="editableFields">
+              <el-table-column prop="name" label="字段" width="200"></el-table-column>
+              <el-table-column prop="showInList" label="列表" width="50" align="center">
+                <template slot-scope="{row}">
+                  <el-checkbox v-model="row.showInList"></el-checkbox>
+                </template>
+              </el-table-column>
+              <el-table-column prop="showInForm" label="表单" width="50" align="center">
+                <template slot-scope="{row}">
+                  <el-checkbox
+                    v-model="row.showInForm"
+                    :disabled="row.primaryKey&&!formData.readTable"
+                  ></el-checkbox>
+                </template>
+              </el-table-column>
+              <!-- <el-table-column prop="sortable" label="排序" width="50" align="center">
                                 <template slot-scope="{row}">
                                     <el-checkbox v-model="row.sortable"></el-checkbox>
                                 </template>
-                            </el-table-column> -->
-                            <el-table-column prop="formType" label="表单类型"
-                                             width="150" align="center">
-                                <template slot-scope="{row}">
-                                    <el-select v-model="row.formType">
-                                        <el-option v-for="item in formTypes"
-                                                   :label="item.label"
-                                                   :value="item.value"
-                                                   :key="item.value"></el-option>
-                                    </el-select>
-                                </template>
-                            </el-table-column>
-                            <el-table-column prop="apiFlag" label="接口"
-                                             width="300" align="center">
-                                <template slot-scope="{row}">
-                                    <el-radio v-model="row.apiFlag" label="1"
-                                              :disabled="row.formType!=='select'&&row.formType!=='multiSelect'">
-                                        枚举
-                                    </el-radio>
-                                    <el-radio v-model="row.apiFlag" label="2"
-                                              :disabled="row.formType!=='select'&&row.formType!=='multiSelect'">
-                                        接口
-                                    </el-radio>
-                                </template>
-                            </el-table-column>
-                            <el-table-column prop="optionsValue" label="选项"
-                                             min-width="150" align="center">
-                                <template slot-scope="{row}">
-                                    <el-input class="code"
-                                              v-model="row.optionsValue" autosize
-                                              v-if="row.apiFlag==='1'&&(row.formType==='select'||row.formType==='multiSelect')">
-                                        <el-button slot="append" type="text"
-                                                   @click="editOptions(row)">编辑
-                                        </el-button>
-                                    </el-input>
-                                    <el-input class="code"
-                                              :value="optionsInfo(row)" disabled
-                                              v-if="(row.apiFlag==='2'||row.apiFlag==='3')&&(row.formType==='select'||row.formType==='multiSelect')">
-                                        <el-button slot="append" type="text"
-                                                   @click="editSelectField(row)">编辑
-                                        </el-button>
-                                    </el-input>
-                                </template>
-                            </el-table-column>
-                            <!-- <el-table-column prop="searchMethod" label="搜索方式" width="150" align="center">
+              </el-table-column>-->
+              <el-table-column prop="formType" label="表单类型" width="150" align="center">
+                <template slot-scope="{row}">
+                  <el-select v-model="row.formType">
+                    <el-option
+                      v-for="item in formTypes"
+                      :label="item.label"
+                      :value="item.value"
+                      :key="item.value"
+                    ></el-option>
+                  </el-select>
+                </template>
+              </el-table-column>
+              <el-table-column prop="apiFlag" label="接口" width="300" align="center">
+                <template slot-scope="{row}">
+                  <el-radio
+                    v-model="row.apiFlag"
+                    label="1"
+                    :disabled="row.formType!=='select'&&row.formType!=='multiSelect'"
+                  >枚举</el-radio>
+                  <el-radio
+                    v-model="row.apiFlag"
+                    label="2"
+                    :disabled="row.formType!=='select'&&row.formType!=='multiSelect'"
+                  >接口</el-radio>
+                </template>
+              </el-table-column>
+              <el-table-column prop="optionsValue" label="选项" min-width="150" align="center">
+                <template slot-scope="{row}">
+                  <el-input
+                    class="code"
+                    v-model="row.optionsValue"
+                    autosize
+                    v-if="row.apiFlag==='1'&&(row.formType==='select'||row.formType==='multiSelect')"
+                  >
+                    <el-button slot="append" type="text" @click="editOptions(row)">编辑</el-button>
+                  </el-input>
+                  <el-input
+                    class="code"
+                    :value="optionsInfo(row)"
+                    disabled
+                    v-if="(row.apiFlag==='2'||row.apiFlag==='3')&&(row.formType==='select'||row.formType==='multiSelect')"
+                  >
+                    <el-button slot="append" type="text" @click="editSelectField(row)">编辑</el-button>
+                  </el-input>
+                </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>
-                    </el-tab-pane>
-                    <el-tab-pane label="表单校验" name="3">
-                        <el-table :data="fields">
-                            <el-table-column prop="name" label="字段" width="200">
-                            </el-table-column>
-                            <!-- <el-table-column prop="logicalKey" label="逻辑关键字"
+              </el-table-column>-->
+            </el-table>
+          </el-tab-pane>
+          <el-tab-pane label="表单校验" name="3">
+            <el-table :data="fields">
+              <el-table-column prop="name" label="字段" width="200"></el-table-column>
+              <!-- <el-table-column prop="logicalKey" label="逻辑关键字"
                                              width="100" align="center">
                                 <template slot-scope="{row}">
                                     <el-checkbox v-model="row.logicalKey">
                                     </el-checkbox>
                                 </template>
-                            </el-table-column> -->
-                            <el-table-column prop="required" label="必填"
-                                             width="50" align="center">
-                                <template slot-scope="{row}">
-                                    <el-checkbox v-model="row.required">
-                                    </el-checkbox>
-                                </template>
-                            </el-table-column>
-                            <el-table-column prop="validate" label="校验"
-                                             width="50" align="center">
-                                <template slot-scope="{row}">
-                                    <el-checkbox v-model="row.validate">
-                                    </el-checkbox>
-                                </template>
-                            </el-table-column>
-                            <el-table-column prop="minLength" label="最短"
-                                             min-width="80" align="center">
-                                <template slot-scope="{row}">
-                                    <el-input v-model.number="row.minLength">
-                                    </el-input>
-                                </template>
-                            </el-table-column>
-                            <el-table-column prop="maxLength" label="最长"
-                                             min-width="80" align="center">
-                                <template slot-scope="{row}">
-                                    <el-input v-model.number="row.maxLength">
-                                    </el-input>
-                                </template>
-                            </el-table-column>
-                            <el-table-column prop="min" label="最小值"
-                                             min-width="80" align="center">
-                                <template slot-scope="{row}">
-                                    <el-input v-model="row.min"></el-input>
-                                </template>
-                            </el-table-column>
-                            <el-table-column prop="max" label="最大值"
-                                             min-width="80" align="center">
-                                <template slot-scope="{row}">
-                                    <el-input v-model="row.max"></el-input>
-                                </template>
-                            </el-table-column>
-                            <el-table-column prop="validatorType" label="校验类型"
-                                             min-width="150" align="center">
-                                <template slot-scope="{row}">
-                                    <el-select v-model="row.validatorType"
-                                               clearable>
-                                        <el-option
-                                                   v-for="item in validatorTypes"
-                                                   :label="item.label"
-                                                   :value="item.value"
-                                                   :key="item.value"></el-option>
-                                    </el-select>
-                                </template>
-                            </el-table-column>
-                        </el-table>
-                    </el-tab-pane>
-                    <el-tab-pane label="子表" name="4">
-                        <el-table :data="subtables">
+              </el-table-column>-->
+              <el-table-column prop="required" label="必填" width="50" align="center">
+                <template slot-scope="{row}">
+                  <el-checkbox v-model="row.required"></el-checkbox>
+                </template>
+              </el-table-column>
+              <el-table-column prop="validate" label="校验" width="50" align="center">
+                <template slot-scope="{row}">
+                  <el-checkbox v-model="row.validate"></el-checkbox>
+                </template>
+              </el-table-column>
+              <el-table-column prop="minLength" label="最短" min-width="80" align="center">
+                <template slot-scope="{row}">
+                  <el-input v-model.number="row.minLength"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="maxLength" label="最长" min-width="80" align="center">
+                <template slot-scope="{row}">
+                  <el-input v-model.number="row.maxLength"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="min" label="最小值" min-width="80" align="center">
+                <template slot-scope="{row}">
+                  <el-input v-model="row.min"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="max" label="最大值" min-width="80" align="center">
+                <template slot-scope="{row}">
+                  <el-input v-model="row.max"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="validatorType" label="校验类型" min-width="150" align="center">
+                <template slot-scope="{row}">
+                  <el-select v-model="row.validatorType" clearable>
+                    <el-option
+                      v-for="item in validatorTypes"
+                      :label="item.label"
+                      :value="item.value"
+                      :key="item.value"
+                    ></el-option>
+                  </el-select>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-tab-pane>
+          <el-tab-pane label="子表" name="4">
+            <el-table :data="subtables">
+              <el-table-column prop="name" label="控件名" width="150" align="center">
+                <template slot-scope="{row}">
+                  <el-input v-model="row.name"></el-input>
+                </template>
+              </el-table-column>
 
-                            <el-table-column prop="name" label="控件名" width="150"
-                                             align="center">
-                                <template slot-scope="{row}">
-                                    <el-input v-model="row.name"></el-input>
-                                </template>
-                            </el-table-column>
+              <el-table-column prop="column" label="主表字段" width="150" align="center">
+                <template slot-scope="{row}">
+                  <el-input v-model="row.column"></el-input>
+                </template>
+              </el-table-column>
 
-                            <el-table-column prop="column" label="主表字段"
-                                             width="150" align="center">
-                                <template slot-scope="{row}">
-                                    <el-input v-model="row.column"></el-input>
-                                </template>
-                            </el-table-column>
-
-                            <el-table-column prop="subColumn" label="子表字段"
-                                             width="150" align="center">
-                                <template slot-scope="{row}">
-                                    <el-input v-model="row.subColumn">
-                                    </el-input>
-                                </template>
-                            </el-table-column>
-                            <el-table-column prop="subCode" label="子表类"
-                                             width="150" align="center">
-                                <template slot-scope="{row}">
-                                    <el-select v-model="row.subCode" clearable>
-                                        <el-option v-for="item in subCodes"
-                                                   :label="item.className"
-                                                   :value="item.className"
-                                                   :key="item.className"></el-option>
-                                    </el-select>
-                                </template>
-                            </el-table-column>
-                            <el-table-column width="60" align="center">
-                                <template slot-scope="{ row, column, $index }">
-                                    <el-button @click="removeSubtable($index)"
-                                               type="text">删除</el-button>
-                                </template>
-                            </el-table-column>
-                        </el-table>
-                        <el-button @click="addSubtable" type="text"
-                                   icon="el-icon-plus">添加</el-button>
-                    </el-tab-pane>
-                </el-tabs>
+              <el-table-column prop="subColumn" label="子表字段" width="150" align="center">
+                <template slot-scope="{row}">
+                  <el-input v-model="row.subColumn"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="subCode" label="子表类" width="150" align="center">
+                <template slot-scope="{row}">
+                  <el-select v-model="row.subCode" clearable>
+                    <el-option
+                      v-for="item in subCodes"
+                      :label="item.className"
+                      :value="item.className"
+                      :key="item.className"
+                    ></el-option>
+                  </el-select>
+                </template>
+              </el-table-column>
+              <el-table-column width="60" align="center">
+                <template slot-scope="{ row, column, $index }">
+                  <el-button @click="removeSubtable($index)" type="text">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+            <el-button @click="addSubtable" type="text" icon="el-icon-plus">添加</el-button>
+          </el-tab-pane>
+        </el-tabs>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="onSave" :loading="$store.state.fetchingData" type="primary">保存</el-button>
+        <el-button @click="$router.go(-1)">取消</el-button>
+      </el-form-item>
+    </el-form>
 
-            </el-form-item>
-            <el-form-item>
-                <el-button @click="onSave" :loading="$store.state.fetchingData"
-                           type="primary">保存</el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
+    <el-dialog title="接口选项" :visible.sync="showApiSelectDialog">
+      <el-form :model="selectField" label-position="right" label-width="80px">
+        <el-form-item label="接口">
+          <el-select
+            placeholder="接口"
+            filterable
+            clearable
+            v-model="selectField.optionsMethod"
+            class="filter-item"
+          >
+            <el-option
+              v-for="item in selectMappings"
+              :label="item.url"
+              :value="item.url"
+              :key="item.url"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="显示">
+          <el-input v-model="selectField.optionsLabel"></el-input>
+        </el-form-item>
+        <el-form-item label="选项">
+          <el-input v-model="selectField.optionsValue"></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="selectMappingSubmit">确定</el-button>
+      </span>
+    </el-dialog>
 
-        <el-dialog title="接口选项" :visible.sync="showApiSelectDialog">
-            <el-form :model="selectField" label-position="right"
-                     label-width="80px">
-                <el-form-item label="接口">
-                    <el-select placeholder="接口" filterable clearable
-                               v-model="selectField.optionsMethod" class="filter-item">
-                        <el-option v-for="item in selectMappings"
-                                   :label="item.url" :value="item.url" :key="item.url">
-                        </el-option>
-                    </el-select>
-                </el-form-item>
-                <el-form-item label="显示">
-                    <el-input
-                              v-model="selectField.optionsLabel">
-                    </el-input>
-                </el-form-item>
-                <el-form-item label="选项">
-                    <el-input
-                              v-model="selectField.optionsValue">
-                    </el-input>
-                </el-form-item>
-            </el-form>
-            <span slot="footer" class="dialog-footer">
-                <el-button type="primary" @click="selectMappingSubmit">确定
-                </el-button>
-            </span>
-        </el-dialog>
-
-        <gen-option-dialog :visible.sync="showGenOptionsDialog"
-                           v-model="tempRow.optionsValue"></gen-option-dialog>
-    </div>
+    <gen-option-dialog :visible.sync="showGenOptionsDialog" v-model="tempRow.optionsValue"></gen-option-dialog>
+  </div>
 </template>
 
 <script>
-import GenOptionDialog from '../components/GenOptionsDialog';
+import GenOptionDialog from "../components/GenOptionsDialog";
 
 export default {
-    created() {
-        if (this.$route.query.className) {
-            this.loading = true;
-            this.$http
-                .get('/genCode/getOne', {
-                    className: this.$route.query.className,
-                })
-                .then(res => {
-                    console.log(res);
-                    this.loading = false;
+  created() {
+    if (this.$route.query.className) {
+      this.loading = true;
+      this.$http
+        .get("/genCode/getOne", {
+          className: this.$route.query.className
+        })
+        .then(res => {
+          console.log(res);
+          this.loading = false;
 
-                    this.$http
-                        .get('/genCode/tableFields', {
-                            className: res.tablePackage,
-                        })
-                        .then(fields => {
-                            this.formData = {
-                                ...this.formData,
-                                ...res,
-                                className: res.className,
-                                tableName: res.tableName,
-                                genRouter: false,
-                            };
-                            let finalFields = [];
+          this.$http
+            .get("/genCode/tableFields", {
+              className: res.tablePackage
+            })
+            .then(fields => {
+              this.formData = {
+                ...this.formData,
+                ...res,
+                className: res.className,
+                tableName: res.tableName,
+                genRouter: false
+              };
+              let finalFields = [];
 
-                            fields.forEach(field => {
-                                let f = this.formData.fields.find(i => {
-                                    return (i.modelName = field.modalName);
-                                });
-                                if (f) {
-                                    finalFields.push(f);
-                                } else {
-                                    finalFields.push(field);
-                                }
-                            });
-                            this.fields = finalFields;
-                            this.subtables = this.formData.subtables;
-                        })
-                        .catch(e => {
-                            console.log(e);
-                        });
-                })
-                .catch(e => {
-                    console.log(e);
-                    this.loading = false;
+              fields.forEach(field => {
+                let f = this.formData.fields.find(i => {
+                  return (i.modelName = field.modalName);
                 });
-        }
-        Promise.resolve()
-            .then(() => {
-                if (this.$route.query.className) {
-                    this.loading = true;
-                    return this.$http.get('/genCode/getOne', {
-                        className: this.$route.query.className,
-                    });
+                if (f) {
+                  finalFields.push(f);
                 } else {
-                    return Promise.resolve();
-                }
-            })
-            .then(res => {
-                this.loading = false;
-                if (res) {
-                    this.$http
-                        .get('/genCode/tableFields', {
-                            className: res.tablePackage,
-                        })
-                        .then(fields => {
-                            this.formData = {
-                                ...this.formData,
-                                ...res,
-                                className: res.className,
-                                tableName: res.tableName,
-                                genRouter: false,
-                            };
-                            let finalFields = [];
-
-                            fields.forEach(field => {
-                                let f = res.fields.find(item => {
-                                    return item.modelName === field.modelName;
-                                });
-                                if (f) {
-                                    finalFields.push(f);
-                                } else {
-                                    finalFields.push(field);
-                                }
-                            });
-                            this.fields = finalFields;
-                            this.subtables = this.formData.subtables;
-                        })
-                        .catch(e => {
-                            console.log(e);
-                        });
+                  finalFields.push(field);
                 }
-                return this.$http.get('/genCode/getSrcPath');
-            })
-            .then(res => {
-                this.formData.javaPath = res.javaPath;
-                this.formData.viewPath = res.viewPath;
-                this.formData.routerPath = res.routerPath;
-                this.formData.resourcesPath = res.resourcesPath;
+              });
+              this.fields = finalFields;
+              this.subtables = this.formData.subtables;
             })
             .catch(e => {
-                console.log(e);
-                this.$message.error(e.error);
-                this.loading = false;
+              console.log(e);
             });
-
-        this.$http
-            .get('/genCode/all')
-            .then(res => {
-                this.subCodes = res;
+        })
+        .catch(e => {
+          console.log(e);
+          this.loading = false;
+        });
+    }
+    Promise.resolve()
+      .then(() => {
+        if (this.$route.query.className) {
+          this.loading = true;
+          return this.$http.get("/genCode/getOne", {
+            className: this.$route.query.className
+          });
+        } else {
+          return Promise.resolve();
+        }
+      })
+      .then(res => {
+        this.loading = false;
+        if (res) {
+          this.$http
+            .get("/genCode/tableFields", {
+              className: res.tablePackage
             })
-            .catch(e => {
-                console.log(e);
-            });
+            .then(fields => {
+              this.formData = {
+                ...this.formData,
+                ...res,
+                className: res.className,
+                tableName: res.tableName,
+                genRouter: false
+              };
+              let finalFields = [];
 
-        this.$http
-            .get('/dev/selectMappings')
-            .then(res => {
-                let temp = {};
-                if (res.length > 0) {
-                    res.forEach(item => {
-                        temp[item.url] = item;
-                    });
+              fields.forEach(field => {
+                let f = res.fields.find(item => {
+                  return item.modelName === field.modelName;
+                });
+                if (f) {
+                  finalFields.push(f);
+                } else {
+                  finalFields.push(field);
                 }
-                this.selectMappingsJson = temp;
-                this.selectMappings = res;
+              });
+              this.fields = finalFields;
+              this.subtables = this.formData.subtables;
             })
             .catch(e => {
-                console.log(e);
+              console.log(e);
             });
+        }
+        return this.$http.get("/genCode/getSrcPath");
+      })
+      .then(res => {
+        this.formData.javaPath = res.javaPath;
+        this.formData.viewPath = res.viewPath;
+        this.formData.routerPath = res.routerPath;
+        this.formData.resourcesPath = res.resourcesPath;
+      })
+      .catch(e => {
+        console.log(e);
+        this.$message.error(e.error);
+        this.loading = false;
+      });
 
-        this.getDatabaseTables();
-    },
-    data() {
-        return {
-            loading: false,
-            fieldTypes: [
-                'char',
-                'varchar',
-                'int',
-                'bit',
-                'text',
-                'timestamp',
-                'datetime',
-                'decimal',
-                'float',
-                'vue',
-            ],
-            searchMethods: [
-                '=',
-                '!=',
-                '>',
-                '>=',
-                '<',
-                '<=',
-                'between',
-                'like',
-                'left like',
-                'right like',
-            ],
-            formTypes: [
-                { label: '单行文本', value: 'singleLineText' },
-                { label: '数字', value: 'number' },
-                { label: '日期选择', value: 'date' },
-                { label: '日期时间选择', value: 'datetime' },
-                { label: '登录名', value: 'loginName' },
-                { label: '当前时间', value: 'currentTime' },
-                { label: '当前日期', value: 'currentDate' },
-                { label: '单选下拉框', value: 'select' },
-                { label: '多选下拉框', value: 'multiSelect' },
-                { label: '单图上传', value: 'singleImage' },
-                { label: '多图上传', value: 'multiImage' },
-                { label: '文件上传', value: 'fileUpload' },
-                { label: '树形选择', value: 'tree' },
-                { label: '开关', value: 'switch' },
-                { label: '多行文本', value: 'textarea' },
-                { label: '富文本', value: 'richText' },
-            ],
-            validatorTypes: [
-                { label: '英文', value: 'english' },
-                { label: '数字', value: 'number' },
-                { label: '手机', value: 'phone' },
-                { label: '网址', value: 'url' },
-                { label: '电子邮件', value: 'email' },
-                { label: '身份证', value: 'id' },
-            ],
-            rules: {
-                className: [
-                    { required: true, message: '请填写类名', trigger: 'blur' },
-                    {
-                        validator: (rule, value, callback) => {
-                            if (value) {
-                                if (
-                                    /^[\u4e00-\u9fa5a-zA-Z0-9_]*$/.test(value)
-                                ) {
-                                    callback();
-                                } else {
-                                    callback(new Error('类名不正确'));
-                                }
-                            }
-                        },
-                        trigger: 'blur',
-                    },
-                ],
-                tableName: [
-                    { required: true, message: '请填写表名', trigger: 'blur' },
-                    {
-                        validator: (rule, value, callback) => {
-                            if (value) {
-                                if (
-                                    /^[\u4e00-\u9fa5a-zA-Z0-9_]*$/.test(value)
-                                ) {
-                                    callback();
-                                } else {
-                                    callback(new Error('表名不正确'));
-                                }
-                            }
-                        },
-                        trigger: 'blur',
-                    },
-                ],
-                remark: [
-                    { required: true, message: '请填写描述', trigger: 'blur' },
-                ],
-                dataBaseType: [
-                    {
-                        required: true,
-                        message: '请选择数据库类型',
-                        trigger: 'blur',
-                    },
-                ],
-                dataSourceCode: [
-                    {
-                        required: true,
-                        message: '请填选择数据库',
-                        trigger: 'blur',
-                    },
-                ],
-                typeFlag: [
-                    {
-                        required: true,
-                        message: '请填填写分类',
-                        trigger: 'blur',
-                    },
-                ],
-            },
-            formData: {
-                tableName: '',
-                remark: '',
-                genTable: true,
-                genClass: true,
-                genList: true,
-                genForm: true,
-                genRouter: true,
-                javaPathRelative: '',
-                viewPathRelative: '',
-                dataBaseType: 'Mysql',
-                readTable: false,
-                dataSourceCode: 'dataSource',
-                className: '',
-                subtables: [],
-                fields: [],
+    this.$http
+      .get("/genCode/all")
+      .then(res => {
+        this.subCodes = res;
+      })
+      .catch(e => {
+        console.log(e);
+      });
+
+    this.$http
+      .get("/dev/selectMappings")
+      .then(res => {
+        let temp = {};
+        if (res.length > 0) {
+          res.forEach(item => {
+            temp[item.url] = item;
+          });
+        }
+        this.selectMappingsJson = temp;
+        this.selectMappings = res;
+      })
+      .catch(e => {
+        console.log(e);
+      });
+
+    this.getDatabaseTables();
+  },
+  data() {
+    return {
+      loading: false,
+      fieldTypes: [
+        "char",
+        "varchar",
+        "int",
+        "bit",
+        "text",
+        "timestamp",
+        "datetime",
+        "decimal",
+        "float",
+        "vue"
+      ],
+      searchMethods: [
+        "=",
+        "!=",
+        ">",
+        ">=",
+        "<",
+        "<=",
+        "between",
+        "like",
+        "left like",
+        "right like"
+      ],
+      formTypes: [
+        { label: "单行文本", value: "singleLineText" },
+        { label: "数字", value: "number" },
+        { label: "日期选择", value: "date" },
+        { label: "日期时间选择", value: "datetime" },
+        { label: "登录名", value: "loginName" },
+        { label: "当前时间", value: "currentTime" },
+        { label: "当前日期", value: "currentDate" },
+        { label: "单选下拉框", value: "select" },
+        { label: "多选下拉框", value: "multiSelect" },
+        { label: "单图上传", value: "singleImage" },
+        { label: "多图上传", value: "multiImage" },
+        { label: "文件上传", value: "fileUpload" },
+        { label: "树形选择", value: "tree" },
+        { label: "开关", value: "switch" },
+        { label: "多行文本", value: "textarea" },
+        { label: "富文本", value: "richText" }
+      ],
+      validatorTypes: [
+        { label: "英文", value: "english" },
+        { label: "数字", value: "number" },
+        { label: "手机", value: "phone" },
+        { label: "网址", value: "url" },
+        { label: "电子邮件", value: "email" },
+        { label: "身份证", value: "id" }
+      ],
+      rules: {
+        className: [
+          { required: true, message: "请填写类名", trigger: "blur" },
+          {
+            validator: (rule, value, callback) => {
+              if (value) {
+                if (/^[\u4e00-\u9fa5a-zA-Z0-9_]*$/.test(value)) {
+                  callback();
+                } else {
+                  callback(new Error("类名不正确"));
+                }
+              }
             },
-            fields: [],
-            tableList: [],
-            subtables: [],
-            subCodes: [],
-            selectMappings: [],
-            selectMappingsJson: {},
-            showApiSelectDialog: false,
-            selectField: {},
-            showTableSelectDialog: false,
-            optionsTableList: [],
-            optionsFields: [],
-            showGenOptionsDialog: false,
-            tempRow: {},
-        };
-    },
-    computed: {
-        editableFields() {
-            return this.fields.filter(i => {
-                return i.name;
-            });
-        },
-    },
-    methods: {
-        onSave() {
-            this.$refs.form.validate(valid => {
-                if (valid) {
-                    this.submit();
+            trigger: "blur"
+          }
+        ],
+        tableName: [
+          { required: true, message: "请填写表名", trigger: "blur" },
+          {
+            validator: (rule, value, callback) => {
+              if (value) {
+                if (/^[\u4e00-\u9fa5a-zA-Z0-9_]*$/.test(value)) {
+                  callback();
                 } else {
-                    return false;
+                  callback(new Error("表名不正确"));
                 }
-            });
-        },
-        submit() {
-            this.formData.fields = this.fields;
-            this.formData.subtables = this.subtables;
-            this.formData.genJson = '';
+              }
+            },
+            trigger: "blur"
+          }
+        ],
+        remark: [{ required: true, message: "请填写描述", trigger: "blur" }],
+        dataBaseType: [
+          {
+            required: true,
+            message: "请选择数据库类型",
+            trigger: "blur"
+          }
+        ],
+        dataSourceCode: [
+          {
+            required: true,
+            message: "请填选择数据库",
+            trigger: "blur"
+          }
+        ],
+        typeFlag: [
+          {
+            required: true,
+            message: "请填填写分类",
+            trigger: "blur"
+          }
+        ]
+      },
+      formData: {
+        tableName: "",
+        remark: "",
+        genTable: true,
+        genClass: true,
+        genList: true,
+        genForm: true,
+        genRouter: true,
+        javaPathRelative: "",
+        viewPathRelative: "",
+        dataBaseType: "Mysql",
+        readTable: false,
+        dataSourceCode: "dataSource",
+        className: "",
+        subtables: [],
+        fields: []
+      },
+      fields: [],
+      tableList: [],
+      subtables: [],
+      subCodes: [],
+      selectMappings: [],
+      selectMappingsJson: {},
+      showApiSelectDialog: false,
+      selectField: {},
+      showTableSelectDialog: false,
+      optionsTableList: [],
+      optionsFields: [],
+      showGenOptionsDialog: false,
+      tempRow: {}
+    };
+  },
+  computed: {
+    editableFields() {
+      return this.fields.filter(i => {
+        return i.name;
+      });
+    }
+  },
+  methods: {
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
+        }
+      });
+    },
+    submit() {
+      this.formData.fields = this.fields;
+      this.formData.subtables = this.subtables;
+      this.formData.genJson = "";
 
-            this.$alert(
-                '生成代码可能会删除已有同名表、数据或文件，确认要生成么？',
-                '警告',
-                { type: 'error' },
-            )
-                .then(() => {
-                    this.loading = true;
-                    return this.$http.post('/genCode/save', this.formData, {
-                        body: 'json',
-                    });
-                })
-                .then(() => {
-                    this.loading = false;
-                    this.$message.success('代码生成成功');
-                    this.$router.go(-1);
-                })
-                .catch(e => {
-                    this.loading = false;
-                    if ('cancel' === e) {
-                        this.$message.info('生成取消');
-                    } else {
-                        this.$message.error(eval);
-                    }
-                });
-        },
-        addField() {
-            this.fields.push({
-                name: '',
-                jdbcType: 'varchar',
-                notNull: false,
-                primaryKey: false,
-                autoIncrease: false,
-                remark: '',
-                showInList: true,
-                showInForm: true,
-                formType: 'singleLineText',
-                sortable: true,
-            });
-        },
-        removeField(i) {
-            if (this.fields.length > 0) {
-                this.fields.splice(i, 1);
-            }
-        },
-        getDatabaseTables() {
-            this.tableList = [];
-            this.$http
-                .get('/dev/entities')
-                .then(res => {
-                    this.tableList = res;
-                })
-                .catch(e => {
-                    console.log(e);
-                });
-        },
-        getPackageByTableName(tableName) {
-            var packageName = '';
-            this.tableList.forEach(item => {
-                if (item.name == tableName) {
-                    packageName = item.package;
-                }
-            });
-            return packageName;
-        },
-        changeTableName() {
-            this.fields = [];
-            this.formData.className = this.formData.tableName;
-            this.formData.tablePackage = this.getPackageByTableName(
-                this.formData.tableName,
-            );
-            this.getTableFields(this.formData.tableName);
-        },
-        changeOptionsTableName() {
-            this.optionsFields = [];
+      this.$alert(
+        "生成代码可能会删除已有同名表、数据或文件，确认要生成么？",
+        "警告",
+        { type: "error" }
+      )
+        .then(() => {
+          this.loading = true;
+          return this.$http.post("/genCode/save", this.formData, {
+            body: "json"
+          });
+        })
+        .then(() => {
+          this.loading = false;
+          this.$message.success("代码生成成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          this.loading = false;
+          if ("cancel" === e) {
+            this.$message.info("生成取消");
+          } else {
+            this.$message.error(eval);
+          }
+        });
+    },
+    addField() {
+      this.fields.push({
+        name: "",
+        jdbcType: "varchar",
+        notNull: false,
+        primaryKey: false,
+        autoIncrease: false,
+        remark: "",
+        showInList: true,
+        showInForm: true,
+        formType: "singleLineText",
+        sortable: true
+      });
+    },
+    removeField(i) {
+      if (this.fields.length > 0) {
+        this.fields.splice(i, 1);
+      }
+    },
+    getDatabaseTables() {
+      this.tableList = [];
+      this.$http
+        .get("/dev/entities")
+        .then(res => {
+          this.tableList = res;
+        })
+        .catch(e => {
+          console.log(e);
+        });
+    },
+    getPackageByTableName(tableName) {
+      var packageName = "";
+      this.tableList.forEach(item => {
+        if (item.name == tableName) {
+          packageName = item.package;
+        }
+      });
+      return packageName;
+    },
+    changeTableName() {
+      this.fields = [];
+      this.formData.className = this.formData.tableName;
+      this.formData.tablePackage = this.getPackageByTableName(
+        this.formData.tableName
+      );
+      this.getTableFields(this.formData.tableName);
+    },
+    changeOptionsTableName() {
+      this.optionsFields = [];
 
-            this.getOptionsTableFields(this.selectField.optionsMethod);
-        },
-        getTableFields(tableName) {
-            var data = {
-                className: this.getPackageByTableName(tableName),
-            };
-            this.$http
-                .get('/genCode/tableFields', data)
-                .then(res => {
-                    this.fields = res;
-                })
-                .catch(e => {
-                    console.log(e);
-                });
-        },
-        getOptionsTableFields(tableName) {
-            var data = {
-                className: this.getPackageByTableName(tableName),
-            };
-            this.$http
-                .get('/genCode/tableFields', data)
-                .then(res => {
-                    this.optionsFields = res;
-                })
-                .catch(e => {
-                    console.log(e);
-                });
-        },
-        addSubtable() {
-            this.subtables.push({
-                name: '',
-                column: '',
-                subColumn: '',
-                subCode: '',
-            });
-        },
-        removeSubtable(i) {
-            if (this.subtables.length > 0) {
-                this.subtables.splice(i, 1);
-            }
-        },
-        moveUp(i) {
-            if (i > 0) {
-                let tempFields = [...this.fields];
-                let tempField = tempFields[i - 1];
+      this.getOptionsTableFields(this.selectField.optionsMethod);
+    },
+    getTableFields(tableName) {
+      var data = {
+        className: this.getPackageByTableName(tableName)
+      };
+      this.$http
+        .get("/genCode/tableFields", data)
+        .then(res => {
+          this.fields = res;
+        })
+        .catch(e => {
+          console.log(e);
+        });
+    },
+    getOptionsTableFields(tableName) {
+      var data = {
+        className: this.getPackageByTableName(tableName)
+      };
+      this.$http
+        .get("/genCode/tableFields", data)
+        .then(res => {
+          this.optionsFields = res;
+        })
+        .catch(e => {
+          console.log(e);
+        });
+    },
+    addSubtable() {
+      this.subtables.push({
+        name: "",
+        column: "",
+        subColumn: "",
+        subCode: ""
+      });
+    },
+    removeSubtable(i) {
+      if (this.subtables.length > 0) {
+        this.subtables.splice(i, 1);
+      }
+    },
+    moveUp(i) {
+      if (i > 0) {
+        let tempFields = [...this.fields];
+        let tempField = tempFields[i - 1];
 
-                tempFields[i - 1] = tempFields[i];
-                tempFields[i] = tempField;
+        tempFields[i - 1] = tempFields[i];
+        tempFields[i] = tempField;
 
-                this.fields = tempFields;
-            }
-        },
-        moveDown(i) {
-            if (this.fields.length - 1 > i) {
-                let tempFields = [...this.fields];
+        this.fields = tempFields;
+      }
+    },
+    moveDown(i) {
+      if (this.fields.length - 1 > i) {
+        let tempFields = [...this.fields];
 
-                let tempField = tempFields[i + 1];
+        let tempField = tempFields[i + 1];
 
-                tempFields[i + 1] = tempFields[i];
-                tempFields[i] = tempField;
+        tempFields[i + 1] = tempFields[i];
+        tempFields[i] = tempField;
 
-                this.fields = tempFields;
-            }
-        },
-        editSelectField(row) {
-            this.selectField = row;
+        this.fields = tempFields;
+      }
+    },
+    editSelectField(row) {
+      this.selectField = row;
 
-            if (row.apiFlag === '2') {
-                this.showApiSelectDialog = true;
-            }
-        },
-        optionsInfo(row) {
-            let value = '';
-            if (row.apiFlag === '1') {
-                value = row.optionsValue;
-            } else if (row.apiFlag === '2') {
-                value =
-                    row.optionsMethod +
-                    ',' +
-                    row.optionsLabel +
-                    ',' +
-                    row.optionsValue;
-            }
-            return value;
-        },
-        selectMappingSubmit() {
-            if (this.selectField.apiFlag === '2') {
-                this.showApiSelectDialog = false;
-            }
-        },
-        editOptions(row) {
-            this.tempRow = row;
-            this.showGenOptionsDialog = true;
-        },
+      if (row.apiFlag === "2") {
+        this.showApiSelectDialog = true;
+      }
+    },
+    optionsInfo(row) {
+      let value = "";
+      if (row.apiFlag === "1") {
+        value = row.optionsValue;
+      } else if (row.apiFlag === "2") {
+        value =
+          row.optionsMethod + "," + row.optionsLabel + "," + row.optionsValue;
+      }
+      return value;
     },
-    components: {
-        GenOptionDialog,
+    selectMappingSubmit() {
+      if (this.selectField.apiFlag === "2") {
+        this.showApiSelectDialog = false;
+      }
     },
+    editOptions(row) {
+      this.tempRow = row;
+      this.showGenOptionsDialog = true;
+    }
+  },
+  components: {
+    GenOptionDialog
+  }
 };
 </script>
 
 <style lang="less" scoped>
 .code {
-    font-family: 'dejavu sans mono', 'droid sans mono', consolas, monaco,
-        'lucida console', 'courier new', courier, monospace, sans-serif;
+  font-family: "dejavu sans mono", "droid sans mono", consolas, monaco,
+    "lucida console", "courier new", courier, monospace, sans-serif;
 }
 </style>

src/main/vue/src/views/GenCodeList.vue

@@ -1,15 +1,10 @@
 <template>
-    <div class="edit-view">
-        <div class="filters-container">
-            <el-input placeholder="输入关键字" v-model="search" clearable
-                      class="filter-item"></el-input>
-            <el-button @click="getData" type="primary" icon="el-icon-search"
-                       class="filter-item">搜索
-            </el-button>
-            <el-button @click="addRow" type="primary" icon="el-icon-plus"
-                       class="filter-item">添加
-            </el-button>
-            <!-- <el-dropdown trigger="click" size="medium"
+  <div class="edit-view">
+    <div class="filters-container">
+      <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加</el-button>
+      <!-- <el-dropdown trigger="click" size="medium"
                          class="table-column-filter">
                 <span>
                     筛选数据
@@ -21,118 +16,108 @@
                                  v-model="item.show">{{item.label}}
                     </el-checkbox>
                 </el-dropdown-menu>
-            </el-dropdown> -->
-        </div>
-        <el-table :data="tableData" row-key="id" ref="table">
-            <el-table-column type="index" min-width="50" align="center">
-            </el-table-column>
-            <el-table-column v-if="isColumnShow('tableName')" prop="tableName"
-                             label="表名" min-width="100">
-            </el-table-column>
-            <el-table-column v-if="isColumnShow('className')" prop="className"
-                             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('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>
-                </template>
-            </el-table-column>
-        </el-table>
-
+      </el-dropdown>-->
     </div>
+    <el-table :data="tableData" row-key="id" ref="table">
+      <el-table-column type="index" min-width="50" align="center"></el-table-column>
+      <el-table-column v-if="isColumnShow('tableName')" prop="tableName" label="表名" min-width="100"></el-table-column>
+      <el-table-column v-if="isColumnShow('className')" prop="className" 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('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>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
 </template>
 <script>
-import { mapState } from 'vuex';
+import { mapState } from "vuex";
 export default {
-    created() {
-        this.getData();
-    },
-    data() {
-        return {
-            search: '',
-            url: '/genCode/all',
-            tableData: [],
-            tableColumns: [
-                {
-                    label: '表名',
-                    value: 'tableName',
-                    show: true,
-                },
-                {
-                    label: '类名',
-                    value: 'className',
-                    show: true,
-                },
-                {
-                    label: '分类',
-                    value: 'typeFlag',
-                    show: true,
-                },
-                {
-                    label: '备注',
-                    value: 'remark',
-                    show: true,
-                },
-            ],
-        };
-    },
-    computed: {},
-    methods: {
-        getData() {
-            let data = {
-                searchKey: this.search,
-            };
-
-            this.$http
-                .get(this.url, data)
-                .then(res => {
-                    this.tableData = res;
-                })
-                .catch(e => {
-                    console.log(e);
-                    this.$message.error(e.error);
-                });
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      search: "",
+      url: "/genCode/all",
+      tableData: [],
+      tableColumns: [
+        {
+          label: "表名",
+          value: "tableName",
+          show: true
         },
-
-        addRow() {
-            this.$router.push({
-                path: '/genCodeEdit',
-                query: {
-                    ...this.$route.query,
-                },
-            });
+        {
+          label: "类名",
+          value: "className",
+          show: true
         },
-        editRow(row) {
-            this.$router.push({
-                path: '/genCodeEdit',
-                query: {
-                    className: row.className,
-                },
-            });
+        {
+          label: "分类",
+          value: "typeFlag",
+          show: true
         },
+        {
+          label: "备注",
+          value: "remark",
+          show: true
+        }
+      ]
+    };
+  },
+  computed: {},
+  methods: {
+    getData() {
+      let data = {
+        searchKey: this.search
+      };
 
-        isColumnShow(column) {
-            var row = this.tableColumns.find(i => i.value === column);
-            return row ? row.show : false;
-        },
-        operation1() {
-            this.$notify({
-                title: '提示',
-                message: this.selection,
-            });
-        },
-        operation2() {
-            this.$message('操作2');
-        },
+      this.$http
+        .get(this.url, data)
+        .then(res => {
+          this.tableData = res;
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    },
+
+    addRow() {
+      this.$router.push({
+        path: "/genCodeEdit",
+        query: {
+          ...this.$route.query
+        }
+      });
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/genCodeEdit",
+        query: {
+          className: row.className
+        }
+      });
+    },
+
+    isColumnShow(column) {
+      var row = this.tableColumns.find(i => i.value === column);
+      return row ? row.show : false;
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
     },
+    operation2() {
+      this.$message("操作2");
+    }
+  }
 };
 </script>
 <style lang="less" scoped>

src/main/vue/src/views/GoodsEdit.vue

@@ -1,186 +1,186 @@
 <template>
-    <div class="edit-view">
-        <el-tabs type="border-card" class="my-tabs" v-model="activeName">
-            <el-tab-pane label="商品信息" name="first">
-                <GoodsEdit @next="goNext" />
-            </el-tab-pane>
-            <el-tab-pane label="详情页面" :disabled="!id" name="second">
-                <GoodsInformationEdit ref="goodsInfo" :goodsId="id" />
-            </el-tab-pane>
-        </el-tabs>
-    </div>
+  <div class="edit-view">
+    <el-tabs type="border-card" class="my-tabs" v-model="activeName">
+      <el-tab-pane label="商品信息" name="first">
+        <GoodsEdit @next="goNext" />
+      </el-tab-pane>
+      <el-tab-pane label="详情页面" :disabled="!id" name="second">
+        <GoodsInformationEdit ref="goodsInfo" :goodsId="id" />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
 </template>
 <script>
-import GoodsEdit from '../components/GoodsEdit';
-import GoodsInformationEdit from '../components/GoodsInformationEdit';
+import GoodsEdit from "../components/GoodsEdit";
+import GoodsInformationEdit from "../components/GoodsInformationEdit";
 export default {
-    name: 'GoodsEditMain',
-    data() {
-        return {
-            id: 0,
-            inputVisible: false,
-            inputValue: '',
-            saving: false,
-            dynamicTags: ['标签一', '标签二', '标签三'],
-            activeName: 'first',
-            formData: {
-                icon: [],
-                specs: [],
-                ruleData: [],
-                categories: []
-            },
-            specs: [],
-            goodsTypeOption: [
-                { label: '普通商品', value: 'NORMAL' },
-                { label: '面膜商品（购买后为会员）', value: 'VIP' }
-            ],
-            showSubGoodsList: false,
-            categories: []
-        };
+  name: "GoodsEditMain",
+  data() {
+    return {
+      id: 0,
+      inputVisible: false,
+      inputValue: "",
+      saving: false,
+      dynamicTags: ["标签一", "标签二", "标签三"],
+      activeName: "first",
+      formData: {
+        icon: [],
+        specs: [],
+        ruleData: [],
+        categories: []
+      },
+      specs: [],
+      goodsTypeOption: [
+        { label: "普通商品", value: "NORMAL" },
+        { label: "面膜商品（购买后为会员）", value: "VIP" }
+      ],
+      showSubGoodsList: false,
+      categories: []
+    };
+  },
+  created() {
+    if (this.$route.query.id) {
+      this.id = this.$route.query.id;
+    }
+  },
+  watch: {
+    id() {
+      if (this.id) {
+        this.$refs.goodsInfo.getInfo(this.id);
+      }
     },
-    created() {
-        if (this.$route.query.id) {
-            this.id = this.$route.query.id;
-        }
+    $route() {
+      if (this.$route.query.id) {
+        this.id = this.$route.query.id;
+      }
+    }
+  },
+  methods: {
+    goNext() {
+      this.$nextTick(() => {
+        this.activeName = "second";
+      });
     },
-    watch: {
-        id() {
-            if (this.id) {
-                this.$refs.goodsInfo.getInfo(this.id);
-            }
-        },
-        $route() {
-            if (this.$route.query.id) {
-                this.id = this.$route.query.id;
-            }
-        }
+    deleteSpec(item) {
+      this.formData.specs.splice(this.formData.specs.indexOf(item), 1);
+    },
+    handleClose(item, tag) {
+      item.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
     },
-    methods: {
-        goNext() {
-            this.$nextTick(() => {
-                this.activeName = 'second';
-            });
-        },
-        deleteSpec(item) {
-            this.formData.specs.splice(this.formData.specs.indexOf(item), 1);
-        },
-        handleClose(item, tag) {
-            item.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
-        },
-
-        addRule(item) {
-            item.dynamicTags.push(item.inputValue);
-            item.inputValue = '';
-        },
 
-        addSpec() {
-            const newOne = {
-                tagTitle: '请输入规格标题,不超过五个字,例:选择尺码',
-                dynamicTags: []
-            };
-            this.formData.specs.push(newOne);
-        },
-        toGoodsList() {
-            this.showSubGoodsList = true;
-        },
-        onSave() {
-            this.$refs.form.validate(valid => {
-                if (valid) {
-                    this.submit();
-                } else {
-                    return false;
-                }
-            });
-        },
-        submit() {
-            let data = { ...this.formData };
-            data.icon = data.icon.join(',');
+    addRule(item) {
+      item.dynamicTags.push(item.inputValue);
+      item.inputValue = "";
+    },
 
-            this.saving = true;
-            this.$http
-                .post('/goods/save', data, { body: 'json' })
-                .then(res => {
-                    this.saving = false;
-                    this.$message.success('成功');
-                    this.$router.go(-1);
-                })
-                .catch(e => {
-                    console.log(e);
-                    this.saving = false;
-                    this.$message.error(e.error);
-                });
-        },
-        onDelete() {
-            this.$alert('删除将无法恢复，确认要删除么？', '警告', {
-                type: 'error'
-            })
-                .then(() => {
-                    return this.$http.post(`/goods/del/${this.formData.id}`);
-                })
-                .then(() => {
-                    this.$message.success('删除成功');
-                    this.$router.go(-1);
-                })
-                .catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                });
-        }
+    addSpec() {
+      const newOne = {
+        tagTitle: "请输入规格标题,不超过五个字,例:选择尺码",
+        dynamicTags: []
+      };
+      this.formData.specs.push(newOne);
+    },
+    toGoodsList() {
+      this.showSubGoodsList = true;
     },
-    filters: {
-        numFilter(value) {
-            let realVal = '';
-            if (!isNaN(value) && value !== '') {
-                // 截取当前数据到小数点后两位
-                realVal = parseFloat(value).toFixed(2);
-            } else {
-                realVal = '--';
-            }
-            return realVal;
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
         }
+      });
     },
-    components: {
-        GoodsEdit,
-        GoodsInformationEdit
+    submit() {
+      let data = { ...this.formData };
+      data.icon = data.icon.join(",");
+
+      this.saving = true;
+      this.$http
+        .post("/goods/save", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+        type: "error"
+      })
+        .then(() => {
+          return this.$http.post(`/goods/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
+    }
+  },
+  filters: {
+    numFilter(value) {
+      let realVal = "";
+      if (!isNaN(value) && value !== "") {
+        // 截取当前数据到小数点后两位
+        realVal = parseFloat(value).toFixed(2);
+      } else {
+        realVal = "--";
+      }
+      return realVal;
     }
+  },
+  components: {
+    GoodsEdit,
+    GoodsInformationEdit
+  }
 };
 </script>
 <style lang="less" scoped>
 .el-tag + .el-tag {
-    margin-left: 10px;
+  margin-left: 10px;
 }
 
 .button-new-tag {
-    margin-left: 10px;
-    height: 32px;
-    line-height: 30px;
-    padding-top: 0;
-    padding-bottom: 0;
+  margin-left: 10px;
+  height: 32px;
+  line-height: 30px;
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 .input-new-tag {
-    width: 90px;
-    margin-left: 10px;
-    vertical-align: bottom;
+  width: 90px;
+  margin-left: 10px;
+  vertical-align: bottom;
 }
 
 .edit-view,
 .el-tabs {
-    height: 100%;
+  height: 100%;
 }
 .el-tabs {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 .el-tab-pane {
-    flex-grow: 1;
-    overflow: auto;
+  flex-grow: 1;
+  overflow: auto;
 }
 
 .save-btn {
-    padding: 40px;
+  padding: 40px;
 }
 </style>

src/main/vue/src/views/GoodsInformationEdit.vue

@@ -1,146 +1,134 @@
 <template>
-    <div class="edit-view">
-        <el-form
-            :model="formData"
-            :rules="rules"
-            ref="form"
-            label-width="77px"
-            label-position="right"
-            size="small"
-            style="max-width: 500px;"
-        >
-         <!--   <el-form-item prop="goodsId" label="goodsId">
+  <div class="edit-view">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="77px"
+      label-position="right"
+      size="small"
+      style="max-width: 500px;"
+    >
+      <!--   <el-form-item prop="goodsId" label="goodsId">
                 <el-input type="number" v-model="formData.goodsId"></el-input>
-            </el-form-item>-->
-            <!-- <el-form-item prop="title" label="标题">
+      </el-form-item>-->
+      <!-- <el-form-item prop="title" label="标题">
                 <el-input v-model="formData.title"></el-input>
-            </el-form-item> -->
-            <el-form-item prop="img" label="详情图">
-               <!-- <multi-upload v-model="formData.img"></multi-upload>-->
-                <el-upload
-                        class="upload-demo"
-                        :action="$baseUrl + 'upload/file'"
-                        :on-preview="handlePreview"
-                        :on-remove="onRemove"
-                        :file-list="formData.img"
-                        list-type="picture">
-                    <el-button size="small" type="primary">点击上传</el-button>
-                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
-                </el-upload>
-            </el-form-item>
-            <!-- <el-form-item prop="content" label="内容">
+      </el-form-item>-->
+      <el-form-item prop="img" label="详情图">
+        <!-- <multi-upload v-model="formData.img"></multi-upload>-->
+        <el-upload
+          class="upload-demo"
+          :action="$baseUrl + 'upload/file'"
+          :on-preview="handlePreview"
+          :on-remove="onRemove"
+          :file-list="formData.img"
+          list-type="picture"
+        >
+          <el-button size="small" type="primary">点击上传</el-button>
+          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+        </el-upload>
+      </el-form-item>
+      <!-- <el-form-item prop="content" label="内容">
                 <el-input v-model="formData.content"></el-input>
-            </el-form-item> -->
-            <el-form-item>
-                <el-button @click="onSave" :loading="saving" type="primary"
-                    >保存</el-button
-                >
-                <el-button
-                    @click="onDelete"
-                    :loading="saving"
-                    type="danger"
-                    v-if="formData.id"
-                    >删除
-                </el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+      </el-form-item>-->
+      <el-form-item>
+        <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+        <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除</el-button>
+        <el-button @click="$router.go(-1)">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script>
 export default {
-    name: "GoodsInformationEdit",
-    created() {
-        if (this.$route.query.goodsId) {
-            this.$http
-                .get(
-                    "goodsInformation/findByGoodsId/" +
-                        this.$route.query.goodsId
-                )
-                .then(res => {
-                    if (!res) {
-                        this.formData = {
-                            goodsId: this.$route.query.goodsId,
-                            title: "",
-                            img: [],
-                            content: ""
-                        };
-                    } else {
-                        res.img = res.img.split(",");
-                        this.formData = res;
-                    }
-                })
-                .catch(e => {
-                    console.log(e);
-                    this.$message.error(e.error);
-                });
-        }
+  name: "GoodsInformationEdit",
+  created() {
+    if (this.$route.query.goodsId) {
+      this.$http
+        .get("goodsInformation/findByGoodsId/" + this.$route.query.goodsId)
+        .then(res => {
+          if (!res) {
+            this.formData = {
+              goodsId: this.$route.query.goodsId,
+              title: "",
+              img: [],
+              content: ""
+            };
+          } else {
+            res.img = res.img.split(",");
+            this.formData = res;
+          }
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    }
+  },
+  data() {
+    return {
+      saving: false,
+      formData: {
+        img: []
+      },
+      rules: {},
+      fileList: []
+    };
+  },
+  methods: {
+    onRemove(file, fileList) {
+      this.fileList = fileList;
     },
-    data() {
-        return {
-            saving: false,
-            formData: {
-                img: []
-            },
-            rules: {},
-            fileList: []
-        };
+    handlePreview(file) {
+      console.log(file);
     },
-    methods: {
-        onRemove(file, fileList) {
-            this.fileList = fileList;
-        },
-        handlePreview(file) {
-            console.log(file);
-        },
-        onSave() {
-            this.$refs.form.validate(valid => {
-                if (valid) {
-                    this.submit();
-                } else {
-                    return false;
-                }
-            });
-        },
-        submit() {
-            let data = { ...this.formData };
-            data.img = data.img.join(",");
-
-            this.saving = true;
-            this.$http
-                .post("/goodsInformation/save", data, { body: "json" })
-                .then(res => {
-                    this.saving = false;
-                    this.$message.success("成功");
-                    this.$router.go(-1);
-                })
-                .catch(e => {
-                    console.log(e);
-                    this.saving = false;
-                    this.$message.error(e.error);
-                });
-        },
-        onDelete() {
-            this.$alert("删除将无法恢复，确认要删除么？", "警告", {
-                type: "error"
-            })
-                .then(() => {
-                    return this.$http.post(
-                        `/goodsInformation/del/${this.formData.id}`
-                    );
-                })
-                .then(() => {
-                    this.$message.success("删除成功");
-                    this.$router.go(-1);
-                })
-                .catch(e => {
-                    if (e !== "cancel") {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                });
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
         }
+      });
+    },
+    submit() {
+      let data = { ...this.formData };
+      data.img = data.img.join(",");
+
+      this.saving = true;
+      this.$http
+        .post("/goodsInformation/save", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+        type: "error"
+      })
+        .then(() => {
+          return this.$http.post(`/goodsInformation/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
     }
+  }
 };
 </script>
 <style lang="less" scoped>

src/main/vue/src/views/GoodsInformationList.vue

@@ -1,195 +1,184 @@
 <template>
-    <div  class="list-view">
-        <div class="filters-container">
-            <el-input placeholder="输入关键字" v-model="search" clearable
-                      class="filter-item"></el-input>
-            <el-button @click="getData" type="primary" icon="el-icon-search"
-                       class="filter-item">搜索
-            </el-button>
-            <el-button @click="addRow" type="primary" icon="el-icon-plus"
-                       class="filter-item">添加
-            </el-button>
-<!--            <el-button @click="download" type="primary" icon="el-icon-download"
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加</el-button>
+      <!--            <el-button @click="download" type="primary" icon="el-icon-download"
                        :loading="downloading" class="filter-item">导出EXCEL
-            </el-button>-->
-        </div>
-        <el-table :data="tableData" row-key="id" ref="table"
-                  header-row-class-name="table-header-row"
-                  header-cell-class-name="table-header-cell"
-                  row-class-name="table-row" cell-class-name="table-cell"
-                  :height="tableHeight">
-            <el-table-column v-if="multipleMode" align="center" type="selection"
-                             width="50">
-            </el-table-column>
-            <el-table-column prop="id" label="ID" width="100">
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort"
-                                     @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-                                <el-table-column prop="goodsId" label="goodsId"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="title" label="标题"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="img" label="图片"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="content" label="内容"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-            <el-table-column
-                    label="操作"
-                    align="center"
-                    fixed="right"
-                    min-width="150">
-                <template slot-scope="{row}">
-                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
-                    <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper">
-                <el-button v-if="!multipleMode"
-                           @click="toggleMultipleMode(true)">批量编辑</el-button>
-                <el-button-group v-else>
-                    <el-button @click="operation1">批量操作1</el-button>
-                    <el-button @click="operation2">批量操作2</el-button>
-                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
-                </el-button-group>
-            </div>
-            <el-pagination background @size-change="onSizeChange"
-                           @current-change="onCurrentChange" :current-page="page"
-                           :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalElements">
-            </el-pagination>
-        </div>
-
+      </el-button>-->
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column prop="id" label="ID" width="100">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="goodsId" label="goodsId">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="title" label="标题">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="img" label="图片">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="content" label="内容">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" fixed="right" min-width="150">
+        <template slot-scope="{row}">
+          <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+          <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
     </div>
+  </div>
 </template>
 <script>
-    import { mapState } from "vuex";
-    import pageableTable from "@/mixins/pageableTable";
+import { mapState } from "vuex";
+import pageableTable from "@/mixins/pageableTable";
 
-    export default {
-        name: 'GoodsInformationList',
-        mixins: [pageableTable],
-        created() {
-            this.getData();
-        },
-        data() {
-            return {
-                multipleMode: false,
-                search: "",
-                url: "/goodsInformation/all",
-                downloading: false,
-            }
-        },
-        computed: {
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
-        },
-        methods: {
-            beforeGetData() {
-                if (this.search) {
-                    return { search: this.search };
-                }
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            addRow() {
-                this.$router.push({
-                    path: "/goodsInformationEdit",
-                    query: {
-                    ...this.$route.query
-                    }
-                });
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: "/goodsInformationEdit",
-                    query: {
-                    id: row.id
-                    }
-                });
-            },
-            download() {
-                this.downloading = true;
-                this.$axios
-                    .get("/goodsInformation/excel", { 
-                        responseType: "blob",
-                        params: { size: 10000 }
-                    })
-                    .then(res => {
-                        console.log(res);
-                        this.downloading = false;
-                        const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
-                        const link = document.createElement("a");
-                        link.href = downloadUrl;
-                        link.setAttribute(
-                            "download",
-                            res.headers["content-disposition"].split("filename=")[1]
-                        );
-                        document.body.appendChild(link);
-                        link.click();
-                        link.remove();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.downloading = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            deleteRow(row) {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/goodsInformation/del/${row.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.getData();
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
-                    } else {
-                        this.$message.error('删除失败');
-                    }
-                })
-            },
+export default {
+  name: "GoodsInformationList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/goodsInformation/all",
+      downloading: false
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    beforeGetData() {
+      if (this.search) {
+        return { search: this.search };
+      }
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addRow() {
+      this.$router.push({
+        path: "/goodsInformationEdit",
+        query: {
+          ...this.$route.query
+        }
+      });
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/goodsInformationEdit",
+        query: {
+          id: row.id
         }
+      });
+    },
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/goodsInformation/excel", {
+          responseType: "blob",
+          params: { size: 10000 }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    deleteRow(row) {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/goodsInformation/del/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("删除取消");
+          } else {
+            this.$message.error("删除失败");
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/GoodsList.vue

@@ -1,70 +1,42 @@
 <template>
-    <div class="list-view">
-        <div class="filters-container">
-            <el-input
-                    placeholder="输入关键字"
-                    v-model="search"
-                    clearable
-                    class="filter-item"
-            ></el-input>
-            <el-button
-                    @click="getData"
-                    type="primary"
-                    icon="el-icon-search"
-                    class="filter-item"
-            >搜索
-            </el-button>
-            <el-button
-                    @click="addRow"
-                    type="primary"
-                    icon="el-icon-plus"
-                    class="filter-item"
-            >添加
-            </el-button>
-<!--            <el-button
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加</el-button>
+      <!--            <el-button
                     @click="addSet"
                     type="primary"
                     icon="el-icon-plus"
                     class="filter-item"
             >套餐
-            </el-button>-->
-            <!--            <el-button
+      </el-button>-->
+      <!--            <el-button
                             @click="download"
                             type="primary"
                             icon="el-icon-download"
                             :loading="downloading"
                             class="filter-item"
                             >导出EXCEL
-                        </el-button>-->
-        </div>
-        <el-table
-                :data="tableData"
-                row-key="id"
-                ref="table"
-                header-row-class-name="table-header-row"
-                header-cell-class-name="table-header-cell"
-                row-class-name="table-row"
-                cell-class-name="table-cell"
-                :height="tableHeight"
-        >
-            <el-table-column
-                    v-if="multipleMode"
-                    align="center"
-                    type="selection"
-                    width="50"
-            >
-            </el-table-column>
-            <el-table-column prop="id" label="ID" width="100">
-                <template slot="header" slot-scope="{ column }">
-                    <sortable-header
-                            :column="column"
-                            :current-sort="sort"
-                            @changeSort="changeSort"
-                    >
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <!--            <el-table-column prop="id" label="id">
+      </el-button>-->
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column prop="id" label="ID" width="100">
+        <template slot="header" slot-scope="{ column }">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <!--            <el-table-column prop="id" label="id">
                             <template slot="header" slot-scope="{ column }">
                                 <sortable-header
                                     :column="column"
@@ -73,59 +45,39 @@
                                 >
                                 </sortable-header>
                             </template>
-                        </el-table-column>-->
-            <el-table-column label="图标" min-width="90">
-                <template slot-scope="{ row }">
-                    <el-image
-                            style="width: 30px; height: 30px"
-                            :src="row.icon"
-                            fit="cover"
-                            :preview-src-list="row.images"
-                    ></el-image>
-                </template>
-            </el-table-column>
-            <el-table-column prop="tags" label="标签"></el-table-column>
-            <el-table-column prop="vipPrice" label="价格">
-                <template slot="header" slot-scope="{ column }">
-                    <sortable-header
-                            :column="column"
-                            :current-sort="sort"
-                            @changeSort="changeSort"
-                    >
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="price" label="首单价格">
-                <template slot="header" slot-scope="{ column }">
-                    <sortable-header
-                            :column="column"
-                            :current-sort="sort"
-                            @changeSort="changeSort"
-                    >
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="inventory" label="库存">
-                <template slot="header" slot-scope="{ column }">
-                    <sortable-header
-                            :column="column"
-                            :current-sort="sort"
-                            @changeSort="changeSort"
-                    >
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="total" label="总计">
-                <template slot="header" slot-scope="{ column }">
-                    <sortable-header
-                            :column="column"
-                            :current-sort="sort"
-                            @changeSort="changeSort"
-                    >
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <!--       <el-table-column prop="type" label="类型">
+      </el-table-column>-->
+      <el-table-column label="图标" min-width="90">
+        <template slot-scope="{ row }">
+          <el-image
+            style="width: 30px; height: 30px"
+            :src="row.icon"
+            fit="cover"
+            :preview-src-list="row.images"
+          ></el-image>
+        </template>
+      </el-table-column>
+      <el-table-column prop="tags" label="标签"></el-table-column>
+      <el-table-column prop="vipPrice" label="价格">
+        <template slot="header" slot-scope="{ column }">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="price" label="首单价格">
+        <template slot="header" slot-scope="{ column }">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="inventory" label="库存">
+        <template slot="header" slot-scope="{ column }">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="total" label="总计">
+        <template slot="header" slot-scope="{ column }">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <!--       <el-table-column prop="type" label="类型">
                        <template slot="header" slot-scope="{ column }">
                            <sortable-header
                                :column="column"
@@ -134,170 +86,140 @@
                            >
                            </sortable-header>
                        </template>
-                   </el-table-column>-->
-            <!--            <el-table-column prop="period" label="增加规则"-->
-            <!--            >-->
-            <!--                <template slot="header" slot-scope="{column}">-->
-            <!--                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">-->
-            <!--                    </sortable-header>-->
-            <!--                </template>-->
-            <!--            </el-table-column>-->
-            <el-table-column prop="salesVolume" label="销量">
-                <template slot="header" slot-scope="{ column }">
-                    <sortable-header
-                            :column="column"
-                            :current-sort="sort"
-                            @changeSort="changeSort"
-                    >
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <!-- <el-table-column prop="disabled" label="是否可用">
-             </el-table-column>-->
-            <el-table-column prop="name" label="商品名" min-width="120px"></el-table-column>
-            <el-table-column prop="categories" label="分类" min-width="100px">
-                <template slot-scope="{ row }">
-                    <el-tag v-for="item in row.categories" type="info" :key="item.id">{{ item.name }}</el-tag>
-                </template>
-            </el-table-column>
+      </el-table-column>-->
+      <!--            <el-table-column prop="period" label="增加规则"-->
+      <!--            >-->
+      <!--                <template slot="header" slot-scope="{column}">-->
+      <!--                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">-->
+      <!--                    </sortable-header>-->
+      <!--                </template>-->
+      <!--            </el-table-column>-->
+      <el-table-column prop="salesVolume" label="销量">
+        <template slot="header" slot-scope="{ column }">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column prop="disabled" label="是否可用">
+      </el-table-column>-->
+      <el-table-column prop="name" label="商品名" min-width="120px"></el-table-column>
+      <el-table-column prop="categories" label="分类" min-width="100px">
+        <template slot-scope="{ row }">
+          <el-tag v-for="item in row.categories" type="info" :key="item.id">{{ item.name }}</el-tag>
+        </template>
+      </el-table-column>
 
-            <!--<el-table-column prop="sellWell" label="热卖">
+      <!--<el-table-column prop="sellWell" label="热卖">
                 <template slot-scope="{ row }">
                     <el-tag :type="row.sellWell?'':'info'">{{row.sellWell?"是":"否"}}</el-tag>
                 </template>
-            </el-table-column>-->
+      </el-table-column>-->
 
-            <el-table-column
-                    label="操作"
-                    align="center"
-                    fixed="right"
-                    min-width="200"
-            >
-                <template slot-scope="{ row }">
-                   <!-- <el-button
+      <el-table-column label="操作" align="center" fixed="right" min-width="200">
+        <template slot-scope="{ row }">
+          <!-- <el-button
                             @click="editGoodsInformation(row)"
                             type="primary"
                             size="mini"
                             plain
                     >详情
                     </el-button
-                    >-->
-                    <el-button
-                            @click="editRow(row)"
-                            type="primary"
-                            size="mini"
-                            plain
-                    >编辑
-                    </el-button
-                    >
-                    <el-button
-                            @click="deleteRow(row)"
-                            type="danger"
-                            size="mini"
-                            plain
-                            v-if="row.disabled===0"
-                    >下架
-                    </el-button
-                    >
-                    <el-button
-                            @click="uploadRow(row)"
-                            size="mini"
-                            type="success"
-                            plain
-                            v-if="row.disabled===1"
-                    >恢复
-                    </el-button
-                    >
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper">
-                <el-button
-                        v-if="!multipleMode"
-                        @click="toggleMultipleMode(true)"
-                >批量编辑
-                </el-button
-                >
-                <el-button-group v-else>
-                    <el-button @click="operation1">批量操作1</el-button>
-                    <el-button @click="operation2">批量操作2</el-button>
-                    <el-button @click="toggleMultipleMode(false)"
-                    >取消
-                    </el-button
-                    >
-                </el-button-group>
-            </div>
-            <el-pagination
-                    background
-                    @size-change="onSizeChange"
-                    @current-change="onCurrentChange"
-                    :current-page="page"
-                    :page-sizes="[10, 20, 30, 40, 50]"
-                    :page-size="pageSize"
-                    layout="total, sizes, prev, pager, next, jumper"
-                    :total="totalElements"
-            >
-            </el-pagination>
-        </div>
+          >-->
+          <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+          <el-button
+            @click="deleteRow(row)"
+            type="danger"
+            size="mini"
+            plain
+            v-if="row.disabled===0"
+          >下架</el-button>
+          <el-button
+            @click="uploadRow(row)"
+            size="mini"
+            type="success"
+            plain
+            v-if="row.disabled===1"
+          >恢复</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
     </div>
+  </div>
 </template>
 <script>
-    import {mapState} from "vuex";
-    import pageableTable from "@/mixins/pageableTable";
+import { mapState } from "vuex";
+import pageableTable from "@/mixins/pageableTable";
 
-    export default {
-        name: "GoodsList",
-        mixins: [pageableTable],
-        created() {
-            this.getData();
-        },
-        data() {
-            return {
-                multipleMode: false,
-                search: "",
-                url: "/goods/backAll",
-                downloading: false
-            };
-        },
-        computed: {
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
-        },
-        methods: {
-            checkRes(res) {
-                res.forEach(item => {
-                    item.images = item.icon.split(",");
-                    if (item.images.length > 0) {
-                        item.icon = item.images[0];
-                    } else {
-                        item.icon = "";
-                    }
-                });
+export default {
+  name: "GoodsList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/goods/backAll",
+      downloading: false
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    checkRes(res) {
+      res.forEach(item => {
+        item.images = item.icon.split(",");
+        if (item.images.length > 0) {
+          item.icon = item.images[0];
+        } else {
+          item.icon = "";
+        }
+      });
 
-                return res;
-            },
-            beforeGetData() {
-                if (this.search) {
-                    return {searchKey: this.search};
-                }
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            addRow() {
-                this.$router.push({
-                    path: "/goodsEdit",
-                    query: {
-                        ...this.$route.query
-                    }
-                });
-            },
-/*            addSet() {
+      return res;
+    },
+    beforeGetData() {
+      if (this.search) {
+        return { searchKey: this.search };
+      }
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addRow() {
+      this.$router.push({
+        path: "/goodsEdit",
+        query: {
+          ...this.$route.query
+        }
+      });
+    },
+    /*            addSet() {
                 this.$router.push({
                     path: "/SetEdit",
                     query: {
@@ -305,100 +227,98 @@
                     }
                 });
             },*/
-            editGoodsInformation(row) {
-                this.$router.push({
-                    path: "/goodsInformationEdit",
-                    query: {
-                        goodsId: row.id
-                    }
-                });
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: "/goodsEdit",
-                    query: {
-                        id: row.id
-                    }
-                });
-            },
-            download() {
-                this.downloading = true;
-                this.$axios
-                    .get("/goods/excel", {
-                        responseType: "blob",
-                        params: {size: 10000}
-                    })
-                    .then(res => {
-                        console.log(res);
-                        this.downloading = false;
-                        const downloadUrl = window.URL.createObjectURL(
-                            new Blob([res.data])
-                        );
-                        const link = document.createElement("a");
-                        link.href = downloadUrl;
-                        link.setAttribute(
-                            "download",
-                            res.headers["content-disposition"].split("filename=")[1]
-                        );
-                        document.body.appendChild(link);
-                        link.click();
-                        link.remove();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.downloading = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            operation1() {
-                this.$notify({
-                    title: "提示",
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message("操作2");
-            },
-            uploadRow(row) {
-                this.$alert("恢复后该商品将重新可以购买，确定恢复吗？", "提示", {
-                    type: "error"
-                })
-                    .then(() => {
-                        return this.$http.post(`/goods/disableGood/${row.id}`);
-                    })
-                    .then(() => {
-                        this.$message.success("恢复成功");
-                        this.getData();
-                    })
-                    .catch(action => {
-                        if (action === "cancel") {
-                            this.$message.info("恢复取消");
-                        } else {
-                            this.$message.error("恢复失败");
-                        }
-                    });
-            },
-            deleteRow(row) {
-                this.$alert("下架后该商品不会展示在小程序端，确定下架吗？", "提示", {
-                    type: "error"
-                })
-                    .then(() => {
-                        return this.$http.post(`/goods/disableGood/${row.id}`);
-                    })
-                    .then(() => {
-                        this.$message.success("下架成功");
-                        this.getData();
-                    })
-                    .catch(action => {
-                        if (action === "cancel") {
-                            this.$message.info("下架取消");
-                        } else {
-                            this.$message.error("下架失败");
-                        }
-                    });
-            }
+    editGoodsInformation(row) {
+      this.$router.push({
+        path: "/goodsInformationEdit",
+        query: {
+          goodsId: row.id
         }
-    };
+      });
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/goodsEdit",
+        query: {
+          id: row.id
+        }
+      });
+    },
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/goods/excel", {
+          responseType: "blob",
+          params: { size: 10000 }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    uploadRow(row) {
+      this.$alert("恢复后该商品将重新可以购买，确定恢复吗？", "提示", {
+        type: "error"
+      })
+        .then(() => {
+          return this.$http.post(`/goods/disableGood/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("恢复成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("恢复取消");
+          } else {
+            this.$message.error("恢复失败");
+          }
+        });
+    },
+    deleteRow(row) {
+      this.$alert("下架后该商品不会展示在小程序端，确定下架吗？", "提示", {
+        type: "error"
+      })
+        .then(() => {
+          return this.$http.post(`/goods/disableGood/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("下架成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("下架取消");
+          } else {
+            this.$message.error("下架失败");
+          }
+        });
+    }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/HelpInformationEdit.vue

@@ -1,100 +1,105 @@
 <template>
-    <div class="edit-view">
-        <el-form :model="formData" :rules="rules" ref="form" label-width="108px" label-position="right" size="small"
-                 style="max-width: 500px;">
-                <el-form-item prop="id" label="帮助文章编号">
-                            <el-input-number type="number" v-model="formData.id"></el-input-number>
-                </el-form-item>
-                <el-form-item prop="tag" label="标签">
-                            <el-input v-model="formData.tag"></el-input>
-                </el-form-item>
-                <el-form-item prop="title" label="标题">
-                            <el-input v-model="formData.title"></el-input>
-                </el-form-item>
-                <el-form-item prop="content" label="内容">
-                            <el-input v-model="formData.content"></el-input>
-                </el-form-item>
-                <el-form-item prop="img" label="图片">
-                            <el-input v-model="formData.img"></el-input>
-                </el-form-item>
-            <el-form-item>
-                <el-button @click="onSave" :loading="saving"
-                           type="primary">保存</el-button>
-                <el-button @click="onDelete" :loading="saving"
-                           type="danger" v-if="formData.id">删除
-                </el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+  <div class="edit-view">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="108px"
+      label-position="right"
+      size="small"
+      style="max-width: 500px;"
+    >
+      <el-form-item prop="id" label="帮助文章编号">
+        <el-input-number type="number" v-model="formData.id"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="tag" label="标签">
+        <el-input v-model="formData.tag"></el-input>
+      </el-form-item>
+      <el-form-item prop="title" label="标题">
+        <el-input v-model="formData.title"></el-input>
+      </el-form-item>
+      <el-form-item prop="content" label="内容">
+        <el-input v-model="formData.content"></el-input>
+      </el-form-item>
+      <el-form-item prop="img" label="图片">
+        <el-input v-model="formData.img"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+        <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除</el-button>
+        <el-button @click="$router.go(-1)">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script>
-    export default {
-        name: 'HelpInformationEdit',
-        created() {
-            if (this.$route.query.id) {
-                this.$http
-                    .get('helpInformation/get/'+this.$route.query.id)
-                    .then(res => {
-                        this.formData = res;
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    });
-            }
-        },
-        data() {
-            return {
-                saving: false,
-                formData: {
-                },
-                rules: {
-                },
-            }
-        },
-        methods: {
-            onSave() {
-                this.$refs.form.validate((valid) => {
-                    if (valid) {
-                        this.submit();
-                    } else {
-                        return false;
-                    }
-                });
-            },
-            submit() {
-                let data = {...this.formData};
-
-                this.saving = true;
-                this.$http
-                    .post('/helpInformation/save', data, {body: 'json'})
-                    .then(res => {
-                        this.saving = false;
-                        this.$message.success('成功');
-                        this.$router.go(-1);
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.saving = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            onDelete() {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/helpInformation/del/${this.formData.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.$router.go(-1);
-                }).catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                })
-            },
+export default {
+  name: "HelpInformationEdit",
+  created() {
+    if (this.$route.query.id) {
+      this.$http
+        .get("helpInformation/get/" + this.$route.query.id)
+        .then(res => {
+          this.formData = res;
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    }
+  },
+  data() {
+    return {
+      saving: false,
+      formData: {},
+      rules: {}
+    };
+  },
+  methods: {
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
         }
+      });
+    },
+    submit() {
+      let data = { ...this.formData };
+
+      this.saving = true;
+      this.$http
+        .post("/helpInformation/save", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/helpInformation/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/HelpInformationList.vue

@@ -1,202 +1,189 @@
 <template>
-    <div  class="list-view">
-        <div class="filters-container">
-            <el-input placeholder="输入关键字" v-model="search" clearable
-                      class="filter-item"></el-input>
-            <el-button @click="getData" type="primary" icon="el-icon-search"
-                       class="filter-item">搜索
-            </el-button>
-            <el-button @click="addRow" type="primary" icon="el-icon-plus"
-                       class="filter-item">添加
-            </el-button>
-<!--            <el-button @click="download" type="primary" icon="el-icon-download"
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加</el-button>
+      <!--            <el-button @click="download" type="primary" icon="el-icon-download"
                        :loading="downloading" class="filter-item">导出EXCEL
-            </el-button>-->
-        </div>
-        <el-table :data="tableData" row-key="id" ref="table"
-                  header-row-class-name="table-header-row"
-                  header-cell-class-name="table-header-cell"
-                  row-class-name="table-row" cell-class-name="table-cell"
-                  :height="tableHeight">
-            <el-table-column v-if="multipleMode" align="center" type="selection"
-                             width="50">
-            </el-table-column>
-            <el-table-column prop="id" label="ID" width="100">
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort"
-                                     @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-                                <el-table-column prop="id" label="帮助文章编号"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="tag" label="标签"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="title" label="标题"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="content" label="内容"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="img" label="图片"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-            <el-table-column
-                    label="操作"
-                    align="center"
-                    fixed="right"
-                    min-width="150">
-                <template slot-scope="{row}">
-                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
-                    <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper">
-                <el-button v-if="!multipleMode"
-                           @click="toggleMultipleMode(true)">批量编辑</el-button>
-                <el-button-group v-else>
-                    <el-button @click="operation1">批量操作1</el-button>
-                    <el-button @click="operation2">批量操作2</el-button>
-                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
-                </el-button-group>
-            </div>
-            <el-pagination background @size-change="onSizeChange"
-                           @current-change="onCurrentChange" :current-page="page"
-                           :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalElements">
-            </el-pagination>
-        </div>
-
+      </el-button>-->
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column prop="id" label="ID" width="100">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="id" label="帮助文章编号">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="tag" label="标签">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="title" label="标题">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="content" label="内容">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="img" label="图片">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" fixed="right" min-width="150">
+        <template slot-scope="{row}">
+          <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+          <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
     </div>
+  </div>
 </template>
 <script>
-    import { mapState } from "vuex";
-    import pageableTable from "@/mixins/pageableTable";
+import { mapState } from "vuex";
+import pageableTable from "@/mixins/pageableTable";
 
-    export default {
-        name: 'HelpInformationList',
-        mixins: [pageableTable],
-        created() {
-            this.getData();
-        },
-        data() {
-            return {
-                multipleMode: false,
-                search: "",
-                url: "/helpInformation/all",
-                downloading: false,
-            }
-        },
-        computed: {
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
-        },
-        methods: {
-            beforeGetData() {
-                if (this.search) {
-                    return { search: this.search };
-                }
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            addRow() {
-                this.$router.push({
-                    path: "/helpInformationEdit",
-                    query: {
-                    ...this.$route.query
-                    }
-                });
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: "/helpInformationEdit",
-                    query: {
-                    id: row.id
-                    }
-                });
-            },
-            download() {
-                this.downloading = true;
-                this.$axios
-                    .get("/helpInformation/excel", { 
-                        responseType: "blob",
-                        params: { size: 10000 }
-                    })
-                    .then(res => {
-                        console.log(res);
-                        this.downloading = false;
-                        const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
-                        const link = document.createElement("a");
-                        link.href = downloadUrl;
-                        link.setAttribute(
-                            "download",
-                            res.headers["content-disposition"].split("filename=")[1]
-                        );
-                        document.body.appendChild(link);
-                        link.click();
-                        link.remove();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.downloading = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            deleteRow(row) {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/helpInformation/del/${row.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.getData();
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
-                    } else {
-                        this.$message.error('删除失败');
-                    }
-                })
-            },
+export default {
+  name: "HelpInformationList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/helpInformation/all",
+      downloading: false
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    beforeGetData() {
+      if (this.search) {
+        return { search: this.search };
+      }
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addRow() {
+      this.$router.push({
+        path: "/helpInformationEdit",
+        query: {
+          ...this.$route.query
+        }
+      });
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/helpInformationEdit",
+        query: {
+          id: row.id
         }
+      });
+    },
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/helpInformation/excel", {
+          responseType: "blob",
+          params: { size: 10000 }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    deleteRow(row) {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/helpInformation/del/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("删除取消");
+          } else {
+            this.$message.error("删除失败");
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/Index.vue

@@ -1,14 +1,12 @@
 <template>
-    <div>
-        欢迎登陆！{{ userInfo.nickname }}
-    </div>
+  <div>欢迎登陆！{{ userInfo.nickname }}</div>
 </template>
 <script>
-    import {mapState} from "vuex";
+import { mapState } from "vuex";
 
-    export default {
-        computed: {
-            ...mapState(["userInfo", "canEdit"])
-        },
-    }
+export default {
+  computed: {
+    ...mapState(["userInfo", "canEdit"])
+  }
+};
 </script>

src/main/vue/src/views/Login.vue

@@ -1,336 +1,326 @@
 <template>
-    <div class="container"
-        :style="{backgroundImage :'url(' + require('../assets/bg_login.jpg') + ')'}">
-        <transition :name="`slide-${register?'in':'out'}`">
-            <div class="login-wrapper" @keyup.enter="doRegister" v-if="register"
-                key="register">
+  <div
+    class="container"
+    :style="{backgroundImage :'url(' + require('../assets/bg_login.jpg') + ')'}"
+  >
+    <transition :name="`slide-${register?'in':'out'}`">
+      <div class="login-wrapper" @keyup.enter="doRegister" v-if="register" key="register">
+        <el-page-header @back="register=false" title="登录" style="width: 350px;line-height: 60px;">
+          <div class="register-title" slot="content">注册账号</div>
+        </el-page-header>
 
-                <el-page-header @back="register=false" title="登录"
-                    style="width: 350px;line-height: 60px;">
-                    <div class="register-title" slot="content">注册账号</div>
-                </el-page-header>
-
-                <el-form :model="registerInfo" style="width: 350px"
-                    ref="registerForm">
-                    <el-form-item prop="username"
-                        :rules="{required: true, message: '请输入用户名', trigger: 'blur'}">
-                        <el-input v-model="registerInfo.username"
-                            placeholder="用户名">
-                        </el-input>
-                    </el-form-item>
-                    <el-form-item prop="password"
-                        :rules="{required: true, message: '请输入密码', trigger: 'blur'}">
-                        <el-input v-model="registerInfo.password"
-                            placeholder="密码" type="password"></el-input>
-                    </el-form-item>
-                    <el-form-item>
-                        <el-button :loading="loading" @click="doRegister"
-                            type="primary" style="width: 100%;">注册</el-button>
-                    </el-form-item>
-                </el-form>
-            </div>
-            <div class="login-wrapper" @keyup.enter="login" v-else key="login">
-                <div class="title">欢迎登录</div>
-                <el-tabs v-model="activeName" stretch class="tab-list">
-                    <el-tab-pane label="用户名登陆" name="first">
-                        <el-form :model="userInfo" style="width: 350px"
-                            ref="form">
-                            <el-form-item prop="username"
-                                :rules="{required: true, message: '请输入用户名', trigger: 'blur'}">
-                                <el-input v-model="userInfo.username"
-                                    placeholder="用户名">
-                                </el-input>
-                            </el-form-item>
-                            <el-form-item prop="password"
-                                :rules="{required: true, message: '请输入密码', trigger: 'blur'}">
-                                <el-input v-model="userInfo.password"
-                                          placeholder="密码" type="password"/>
-                            </el-form-item>
-                            <el-form-item>
-                                <el-button :loading="loading" @click="login"
-                                    type="primary" style="width: 100%;">登录
-                                </el-button>
-                            </el-form-item>
-                            <!-- <el-form-item>
+        <el-form :model="registerInfo" style="width: 350px" ref="registerForm">
+          <el-form-item
+            prop="username"
+            :rules="{required: true, message: '请输入用户名', trigger: 'blur'}"
+          >
+            <el-input v-model="registerInfo.username" placeholder="用户名"></el-input>
+          </el-form-item>
+          <el-form-item
+            prop="password"
+            :rules="{required: true, message: '请输入密码', trigger: 'blur'}"
+          >
+            <el-input v-model="registerInfo.password" placeholder="密码" type="password"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button :loading="loading" @click="doRegister" type="primary" style="width: 100%;">注册</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="login-wrapper" @keyup.enter="login" v-else key="login">
+        <div class="title">欢迎登录</div>
+        <el-tabs v-model="activeName" stretch class="tab-list">
+          <el-tab-pane label="用户名登陆" name="first">
+            <el-form :model="userInfo" style="width: 350px" ref="form">
+              <el-form-item
+                prop="username"
+                :rules="{required: true, message: '请输入用户名', trigger: 'blur'}"
+              >
+                <el-input v-model="userInfo.username" placeholder="用户名"></el-input>
+              </el-form-item>
+              <el-form-item
+                prop="password"
+                :rules="{required: true, message: '请输入密码', trigger: 'blur'}"
+              >
+                <el-input v-model="userInfo.password" placeholder="密码" type="password" />
+              </el-form-item>
+              <el-form-item>
+                <el-button :loading="loading" @click="login" type="primary" style="width: 100%;">登录</el-button>
+              </el-form-item>
+              <!-- <el-form-item>
                                 <el-button :loading="loading"
                                     @click="phonelogin" type="primary"
                                     style="width: 100%;">手机登录</el-button>
-                            </el-form-item> -->
-                            <el-form-item label="">
-                                <el-checkbox v-model="rememberMe">7天内免登录
-                                </el-checkbox>
-                                <el-button type="text" style="float: right;"
-                                    @click="register=true">注册账号
-                                </el-button>
-                            </el-form-item>
-                        </el-form>
-                    </el-tab-pane>
-                    <el-tab-pane label="验证码登陆" name="second">
-                        <el-form :model="userInfo" style="width: 350px"
-                            ref="form2">
-                            <el-form-item prop="phone"
-                                :rules="{required: true, message: '请输入手机号', trigger: 'blur'}">
-                                <el-input v-model="userInfo.phone" name="phone"
-                                    placeholder="手机号">
-                                </el-input>
-                            </el-form-item>
-                            <el-form-item prop="code"
-                                :rules="{required: true, message: '验证码', trigger: 'blur'}">
-                                <div class="code">
-                                    <el-input v-model="userInfo.code"
-                                              placeholder="请输入验证码"/>
+              </el-form-item>-->
+              <el-form-item label>
+                <el-checkbox v-model="rememberMe">7天内免登录</el-checkbox>
+                <el-button type="text" style="float: right;" @click="register=true">注册账号</el-button>
+              </el-form-item>
+            </el-form>
+          </el-tab-pane>
+          <el-tab-pane label="验证码登陆" name="second">
+            <el-form :model="userInfo" style="width: 350px" ref="form2">
+              <el-form-item
+                prop="phone"
+                :rules="{required: true, message: '请输入手机号', trigger: 'blur'}"
+              >
+                <el-input v-model="userInfo.phone" name="phone" placeholder="手机号"></el-input>
+              </el-form-item>
+              <el-form-item prop="code" :rules="{required: true, message: '验证码', trigger: 'blur'}">
+                <div class="code">
+                  <el-input v-model="userInfo.code" placeholder="请输入验证码" />
 
-                                    <el-button :loading="sending"
-                                        @click="sendMsg" type="primary"
-                                        :disabled="time!==0">
-                                        {{time ===0 ? '发送验证码' : `重新发送（${time}s）`}}
-                                    </el-button>
-                                </div>
-                            </el-form-item>
-                            <!-- <el-form-item>
+                  <el-button
+                    :loading="sending"
+                    @click="sendMsg"
+                    type="primary"
+                    :disabled="time!==0"
+                  >{{time ===0 ? '发送验证码' : `重新发送（${time}s）`}}</el-button>
+                </div>
+              </el-form-item>
+              <!-- <el-form-item>
                                 <el-button :loading="loading" @click="login"
                                     type="primary" style="width: 100%;">登录
                                 </el-button>
-                            </el-form-item> -->
-                            <el-form-item>
-                                <el-button :loading="loading"
-                                    @click="phonelogin" type="primary"
-                                    style="width: 100%;">手机登录</el-button>
-                            </el-form-item>
-                            <el-form-item label="">
-                                <el-checkbox v-model="rememberMe">7天内免登录
-                                </el-checkbox>
-                                <el-button type="text" style="float: right;"
-                                    @click="register=true">注册账号
-                                </el-button>
-                            </el-form-item>
-                        </el-form>
-                    </el-tab-pane>
-                </el-tabs>
-
-            </div>
-        </transition>
-    </div>
+              </el-form-item>-->
+              <el-form-item>
+                <el-button
+                  :loading="loading"
+                  @click="phonelogin"
+                  type="primary"
+                  style="width: 100%;"
+                >手机登录</el-button>
+              </el-form-item>
+              <el-form-item label>
+                <el-checkbox v-model="rememberMe">7天内免登录</el-checkbox>
+                <el-button type="text" style="float: right;" @click="register=true">注册账号</el-button>
+              </el-form-item>
+            </el-form>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </transition>
+  </div>
 </template>
 <script>
 export default {
-    data() {
-        return {
-            rememberMe: false,
-            loading: false,
-            userInfo: {
-                username: "",
-                password: "",
-                phone: "",
-                code: ""
-            },
-            register: false,
-            registerInfo: {
-                username: "",
-                password: ""
-            },
-            activeName: "first",
-            time: 0,
-            sending: false
-        };
-    },
-    methods: {
-        login() {
-            this.$refs.form.validate(valid => {
-                if (valid) {
-                    this.loading = true;
-                    this.$http
-                        .post("/auth/blackLogin", {
-                            username: this.userInfo.username,
-                            password: this.userInfo.password,
-                            remember: this.rememberMe
-                        })
-                        .then(res => {
-                            localStorage.setItem("token", res);
-                            return this.$http.get("/user/my");
-                        })
-                        .then(res => {
-                            this.loading = false;
-                            this.$store.commit("updateUserInfo", res);
-                            this.$router.replace({
-                                name: this.$route.params.name || "dashboard"
-                            });
-                        })
-                        .catch(e => {
-                            console.log(e);
-                            this.loading = false;
-                            this.$message.error(e.error);
-                        });
-                }
+  data() {
+    return {
+      rememberMe: false,
+      loading: false,
+      userInfo: {
+        username: "",
+        password: "",
+        phone: "",
+        code: ""
+      },
+      register: false,
+      registerInfo: {
+        username: "",
+        password: ""
+      },
+      activeName: "first",
+      time: 0,
+      sending: false
+    };
+  },
+  methods: {
+    login() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.loading = true;
+          this.$http
+            .post("/auth/blackLogin", {
+              username: this.userInfo.username,
+              password: this.userInfo.password,
+              remember: this.rememberMe
+            })
+            .then(res => {
+              localStorage.setItem("token", res);
+              return this.$http.get("/user/my");
+            })
+            .then(res => {
+              this.loading = false;
+              this.$store.commit("updateUserInfo", res);
+              this.$router.replace({
+                name: this.$route.params.name || "dashboard"
+              });
+            })
+            .catch(e => {
+              console.log(e);
+              this.loading = false;
+              this.$message.error(e.error);
             });
-        },
-        phonelogin() {
-            this.$refs.form2.validate(valid => {
-                if (valid) {
-                    this.loading = true;
-                    this.$http
-                        .post("/auth/bPhoneLogin", {
-                            phone: this.userInfo.phone
-                        })
-                        .then(res => {
-                            localStorage.setItem("token", res);
-                            return this.$http.get("/user/my");
-                        })
-                        .then(res => {
-                            this.loading = false;
-                            this.$store.commit("updateUserInfo", res);
-                            this.$router.replace({
-                                name: this.$route.params.name || "dashboard"
-                            });
-                        })
-                        .catch(e => {
-                            console.log(e);
-                            this.loading = false;
-                            this.$message.error(e.error);
-                        });
-                }
+        }
+      });
+    },
+    phonelogin() {
+      this.$refs.form2.validate(valid => {
+        if (valid) {
+          this.loading = true;
+          this.$http
+            .post("/auth/bPhoneLogin", {
+              phone: this.userInfo.phone
+            })
+            .then(res => {
+              localStorage.setItem("token", res);
+              return this.$http.get("/user/my");
+            })
+            .then(res => {
+              this.loading = false;
+              this.$store.commit("updateUserInfo", res);
+              this.$router.replace({
+                name: this.$route.params.name || "dashboard"
+              });
+            })
+            .catch(e => {
+              console.log(e);
+              this.loading = false;
+              this.$message.error(e.error);
             });
-        },
-        doRegister() {
-            this.$refs.registerForm.validate(valid => {
-                if (valid) {
-                    this.loading = true;
-                    this.$http
-                        .post("/user/register", {
-                            username: this.registerInfo.username,
-                            password: this.registerInfo.password
-                        })
-                        .then(res => {
-                            this.loading = false;
-                            this.$message.success("注册成功");
-                            this.register = false;
-                        })
-                        .catch(e => {
-                            console.log(e);
-                            this.loading = false;
-                            this.$message.error(e.error);
-                        });
-                }
+        }
+      });
+    },
+    doRegister() {
+      this.$refs.registerForm.validate(valid => {
+        if (valid) {
+          this.loading = true;
+          this.$http
+            .post("/user/register", {
+              username: this.registerInfo.username,
+              password: this.registerInfo.password
+            })
+            .then(res => {
+              this.loading = false;
+              this.$message.success("注册成功");
+              this.register = false;
+            })
+            .catch(e => {
+              console.log(e);
+              this.loading = false;
+              this.$message.error(e.error);
             });
-        },
-        sendMsg() {
-            if (!/^1[3-9]\d{9}$/.test(this.userInfo.phone)) {
-                this.$message.warning("手机号格式错误");
-                return;
-            }
-            this.sending = true;
-            this.$http
-                .get("/sms/sendVerify", {
-                    phone: this.userInfo.phone
-                })
-                .then(res => {
-                    this.sending = false;
-                    this.checkTime();
-                })
-                .catch(e => {
-                    this.sending = false;
-                    console.log(e);
-                    this.$message.error(e.error);
-                });
-        },
-        checkTime() {
-            this.time = 60;
-            let i = setInterval(() => {
-                this.time--;
-                if (this.time === 0) {
-                    clearInterval(i);
-                }
-            }, 1000);
         }
+      });
+    },
+    sendMsg() {
+      if (!/^1[3-9]\d{9}$/.test(this.userInfo.phone)) {
+        this.$message.warning("手机号格式错误");
+        return;
+      }
+      this.sending = true;
+      this.$http
+        .get("/sms/sendVerify", {
+          phone: this.userInfo.phone
+        })
+        .then(res => {
+          this.sending = false;
+          this.checkTime();
+        })
+        .catch(e => {
+          this.sending = false;
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    },
+    checkTime() {
+      this.time = 60;
+      let i = setInterval(() => {
+        this.time--;
+        if (this.time === 0) {
+          clearInterval(i);
+        }
+      }, 1000);
     }
+  }
 };
 </script>
 <style lang="less" scoped>
 .container {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #ebebeb;
-    background-image: url("https://microball.oss-cn-hangzhou.aliyuncs.com/izouma/application/rawpixel-com-565462-unsplash%20%281%29.jpg");
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    position: relative;
-    overflow: hidden;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #ebebeb;
+  background-image: url("https://microball.oss-cn-hangzhou.aliyuncs.com/izouma/application/rawpixel-com-565462-unsplash%20%281%29.jpg");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  position: relative;
+  overflow: hidden;
 }
 
 .login-wrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    border-radius: 5px;
-    background: white;
-    border: 1px #eaeaea solid;
-    position: absolute;
-    right: 100px;
-    top: 100px;
-    width: 400px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+  background: white;
+  border: 1px #eaeaea solid;
+  position: absolute;
+  right: 100px;
+  top: 100px;
+  width: 400px;
 
-    .title {
-        color: #20a0ff;
-        font-weight: bold;
-        width: 350px;
-        line-height: 60px;
-    }
-    .register-title {
-        color: #20a0ff;
-        font-weight: bold;
-        font-size: 15px;
-    }
+  .title {
+    color: #20a0ff;
+    font-weight: bold;
+    width: 350px;
+    line-height: 60px;
+  }
+  .register-title {
+    color: #20a0ff;
+    font-weight: bold;
+    font-size: 15px;
+  }
 }
 @media screen and (max-width: 600px) {
-    .login-wrapper {
-        right: 0;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        margin: auto;
-        height: 265px;
-        width: calc(100vw - 30px);
-    }
+  .login-wrapper {
+    right: 0;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    height: 265px;
+    width: calc(100vw - 30px);
+  }
 }
 .slide-in-enter {
-    opacity: 0;
-    transform: translateX(50%);
+  opacity: 0;
+  transform: translateX(50%);
 }
 .slide-in-enter-active {
-    transition: all 0.3s;
+  transition: all 0.3s;
 }
 .slide-in-leave-active {
-    opacity: 0;
-    transform: translateX(-50%);
-    transition: all 0.3s;
+  opacity: 0;
+  transform: translateX(-50%);
+  transition: all 0.3s;
 }
 .slide-out-enter {
-    opacity: 0;
-    transform: translateX(-50%);
+  opacity: 0;
+  transform: translateX(-50%);
 }
 .slide-out-enter-active {
-    transition: all 0.3s;
+  transition: all 0.3s;
 }
 .slide-out-leave-active {
-    opacity: 0;
-    transform: translateX(50%);
-    transition: all 0.3s;
+  opacity: 0;
+  transform: translateX(50%);
+  transition: all 0.3s;
 }
 
 .tab-list {
-    width: 350px;
+  width: 350px;
 }
 
 .code {
-    display: flex;
-    .el-button {
-        margin-left: 15px;
-        min-width: 120px;
-    }
+  display: flex;
+  .el-button {
+    margin-left: 15px;
+    min-width: 120px;
+  }
 }
 </style>

src/main/vue/src/views/LogisticEdit.vue

@@ -1,100 +1,105 @@
 <template>
-    <div class="edit-view">
-        <el-form :model="formData" :rules="rules" ref="form" label-width="94px" label-position="right" size="small"
-                 style="max-width: 500px;">
-                <el-form-item prop="oNum" label="订单号">
-                            <el-input v-model="formData.oNum"></el-input>
-                </el-form-item>
-                <el-form-item prop="goodsId" label="商品ID">
-                            <el-input-number type="number" v-model="formData.goodsId"></el-input-number>
-                </el-form-item>
-                <el-form-item prop="piece" label="商品件数">
-                            <el-input-number type="number" v-model="formData.piece"></el-input-number>
-                </el-form-item>
-                <el-form-item prop="logisticCode" label="快递单号">
-                            <el-input v-model="formData.logisticCode"></el-input>
-                </el-form-item>
-                <el-form-item prop="corpId" label="快递公司ID">
-                            <el-input v-model="formData.corpId"></el-input>
-                </el-form-item>
-            <el-form-item>
-                <el-button @click="onSave" :loading="saving"
-                           type="primary">保存</el-button>
-                <el-button @click="onDelete" :loading="saving"
-                           type="danger" v-if="formData.id">删除
-                </el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+  <div class="edit-view">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="94px"
+      label-position="right"
+      size="small"
+      style="max-width: 500px;"
+    >
+      <el-form-item prop="oNum" label="订单号">
+        <el-input v-model="formData.oNum"></el-input>
+      </el-form-item>
+      <el-form-item prop="goodsId" label="商品ID">
+        <el-input-number type="number" v-model="formData.goodsId"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="piece" label="商品件数">
+        <el-input-number type="number" v-model="formData.piece"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="logisticCode" label="快递单号">
+        <el-input v-model="formData.logisticCode"></el-input>
+      </el-form-item>
+      <el-form-item prop="corpId" label="快递公司ID">
+        <el-input v-model="formData.corpId"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+        <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除</el-button>
+        <el-button @click="$router.go(-1)">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script>
-    export default {
-        name: 'LogisticEdit',
-        created() {
-            if (this.$route.query.id) {
-                this.$http
-                    .get('logistic/get/'+this.$route.query.id)
-                    .then(res => {
-                        this.formData = res;
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    });
-            }
-        },
-        data() {
-            return {
-                saving: false,
-                formData: {
-                },
-                rules: {
-                },
-            }
-        },
-        methods: {
-            onSave() {
-                this.$refs.form.validate((valid) => {
-                    if (valid) {
-                        this.submit();
-                    } else {
-                        return false;
-                    }
-                });
-            },
-            submit() {
-                let data = {...this.formData};
-
-                this.saving = true;
-                this.$http
-                    .post('/logistic/save', data, {body: 'json'})
-                    .then(res => {
-                        this.saving = false;
-                        this.$message.success('成功');
-                        this.$router.go(-1);
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.saving = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            onDelete() {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/logistic/del/${this.formData.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.$router.go(-1);
-                }).catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                })
-            },
+export default {
+  name: "LogisticEdit",
+  created() {
+    if (this.$route.query.id) {
+      this.$http
+        .get("logistic/get/" + this.$route.query.id)
+        .then(res => {
+          this.formData = res;
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    }
+  },
+  data() {
+    return {
+      saving: false,
+      formData: {},
+      rules: {}
+    };
+  },
+  methods: {
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
         }
+      });
+    },
+    submit() {
+      let data = { ...this.formData };
+
+      this.saving = true;
+      this.$http
+        .post("/logistic/save", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/logistic/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/LogisticList.vue

@@ -1,202 +1,189 @@
 <template>
-    <div  class="list-view">
-        <div class="filters-container">
-            <el-input placeholder="输入关键字" v-model="search" clearable
-                      class="filter-item"></el-input>
-            <el-button @click="getData" type="primary" icon="el-icon-search"
-                       class="filter-item">搜索
-            </el-button>
-            <el-button @click="addRow" type="primary" icon="el-icon-plus"
-                       class="filter-item">添加
-            </el-button>
-<!--            <el-button @click="download" type="primary" icon="el-icon-download"
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加</el-button>
+      <!--            <el-button @click="download" type="primary" icon="el-icon-download"
                        :loading="downloading" class="filter-item">导出EXCEL
-            </el-button>-->
-        </div>
-        <el-table :data="tableData" row-key="id" ref="table"
-                  header-row-class-name="table-header-row"
-                  header-cell-class-name="table-header-cell"
-                  row-class-name="table-row" cell-class-name="table-cell"
-                  :height="tableHeight">
-            <el-table-column v-if="multipleMode" align="center" type="selection"
-                             width="50">
-            </el-table-column>
-            <el-table-column prop="id" label="ID" width="100">
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort"
-                                     @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-                                <el-table-column prop="oNum" label="订单号"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="goodsId" label="商品ID"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="piece" label="商品件数"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="logisticCode" label="快递单号"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="corpId" label="快递公司ID"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-            <el-table-column
-                    label="操作"
-                    align="center"
-                    fixed="right"
-                    min-width="150">
-                <template slot-scope="{row}">
-                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
-                    <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper">
-                <el-button v-if="!multipleMode"
-                           @click="toggleMultipleMode(true)">批量编辑</el-button>
-                <el-button-group v-else>
-                    <el-button @click="operation1">批量操作1</el-button>
-                    <el-button @click="operation2">批量操作2</el-button>
-                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
-                </el-button-group>
-            </div>
-            <el-pagination background @size-change="onSizeChange"
-                           @current-change="onCurrentChange" :current-page="page"
-                           :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalElements">
-            </el-pagination>
-        </div>
-
+      </el-button>-->
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column prop="id" label="ID" width="100">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="oNum" label="订单号">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="goodsId" label="商品ID">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="piece" label="商品件数">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="logisticCode" label="快递单号">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="corpId" label="快递公司ID">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" fixed="right" min-width="150">
+        <template slot-scope="{row}">
+          <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+          <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
     </div>
+  </div>
 </template>
 <script>
-    import { mapState } from "vuex";
-    import pageableTable from "@/mixins/pageableTable";
+import { mapState } from "vuex";
+import pageableTable from "@/mixins/pageableTable";
 
-    export default {
-        name: 'LogisticList',
-        mixins: [pageableTable],
-        created() {
-            this.getData();
-        },
-        data() {
-            return {
-                multipleMode: false,
-                search: "",
-                url: "/logistic/all",
-                downloading: false,
-            }
-        },
-        computed: {
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
-        },
-        methods: {
-            beforeGetData() {
-                if (this.search) {
-                    return { search: this.search };
-                }
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            addRow() {
-                this.$router.push({
-                    path: "/logisticEdit",
-                    query: {
-                    ...this.$route.query
-                    }
-                });
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: "/logisticEdit",
-                    query: {
-                    id: row.id
-                    }
-                });
-            },
-            download() {
-                this.downloading = true;
-                this.$axios
-                    .get("/logistic/excel", { 
-                        responseType: "blob",
-                        params: { size: 10000 }
-                    })
-                    .then(res => {
-                        console.log(res);
-                        this.downloading = false;
-                        const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
-                        const link = document.createElement("a");
-                        link.href = downloadUrl;
-                        link.setAttribute(
-                            "download",
-                            res.headers["content-disposition"].split("filename=")[1]
-                        );
-                        document.body.appendChild(link);
-                        link.click();
-                        link.remove();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.downloading = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            deleteRow(row) {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/logistic/del/${row.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.getData();
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
-                    } else {
-                        this.$message.error('删除失败');
-                    }
-                })
-            },
+export default {
+  name: "LogisticList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/logistic/all",
+      downloading: false
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    beforeGetData() {
+      if (this.search) {
+        return { search: this.search };
+      }
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addRow() {
+      this.$router.push({
+        path: "/logisticEdit",
+        query: {
+          ...this.$route.query
+        }
+      });
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/logisticEdit",
+        query: {
+          id: row.id
         }
+      });
+    },
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/logistic/excel", {
+          responseType: "blob",
+          params: { size: 10000 }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    deleteRow(row) {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/logistic/del/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("删除取消");
+          } else {
+            this.$message.error("删除失败");
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/OrderFormEdit.vue

@@ -1,278 +1,311 @@
 <template>
-    <div class="edit-view">
-        <el-form :model="formData" :rules="rules" ref="form" label-width="82px" label-position="left" size="small"
-                 style="max-width: 500px;" class="rt-input">
-            <span>
-                <span style="margin-bottom: 50px;border-left: #1e6abc solid;border-width: 5px" align="left">&nbsp;&nbsp;订单信息</span>
-                <hr size="1" noshade="true"/>
-                <el-form-item prop="id" label="id">
-                            <el-input type="number" v-model="formData.id" disabled></el-input>
-                </el-form-item>
-                <el-form-item prop="nickname" label="昵称">
-                            <el-input v-model="formData.nickname" disabled></el-input>
-                </el-form-item>
-                <el-form-item prop="totalPrice" label="总价">
-                            <el-input v-model="formData.totalPrice" disabled></el-input>
-                </el-form-item>
-                <el-form-item prop="isBenefit" label="是否优惠">
-                            <el-input type="number" v-model="formData.isBenefit" disabled></el-input>
-                </el-form-item>
-                <el-form-item prop="payment" label="实付金额">
-                            <el-input type="number" v-model="formData.payment" disabled></el-input>
-                </el-form-item>
-                <el-form-item prop="payType" label="支付方式">
-                            <el-input v-model="formData.payType" disabled></el-input>
-                </el-form-item>
-            <el-form-item prop="status" label="订单状态">
-                <el-select v-model="formData.status"
-                           placeholder="请选择" :disabled="true">
-                    <el-option v-for="item in statusOptions" :key="item.value"
-                               :label="item.label" :value="item.value">
-                    </el-option>
-                </el-select>
-            </el-form-item>
-                <el-form-item prop="remark" label="备注">
-                            <el-input v-model="formData.remark"></el-input>
-                </el-form-item>
-                <el-form-item prop="orderCode" label="订单号">
-                            <el-input v-model="formData.orderCode" disabled></el-input>
-                </el-form-item>
-                <el-form-item prop="payedAt" label="支付时间">
-                <el-date-picker
-                        :disabled="true"
-                        v-model="formData.payedAt"
-                        type="datetime"
-                        value-format="yyyy-MM-dd HH:mm:ss"
-                        placeholder="选择日期时间">
-                </el-date-picker>
-                </el-form-item>
-                <el-form-item prop="confirmedAt" label="确认时间">
-                            <el-input v-model="formData.confirmedAt" disabled></el-input>
-                </el-form-item>
-                </span>
-            <span style="margin-bottom: 50px;border-left: #1e6abc solid;border-width: 5px"
-                  align="left">&nbsp;&nbsp;商品列表</span>
-            <hr size="1" noshade="true"/>
-            <el-form-item prop="goods" label="商品列表">
-                <div id='app-1'>
-                    <div v-for="v in formData.goods"
-                         style="height: 110px;width: 350px;border-radius: 4px;background:rgba(242,244,245,1);">
-                        <img :src="strToArr(v.icon)" alt=""
-                             style="height: 100px;width: 100px;border-radius: 4px;margin-top: 5px;margin-left: 5px">
-                        <p style="float: right;" align="right">{{v.name}} <br>{{v.piece}}&nbsp; 份&nbsp; &nbsp;
-                            {{v.price}} &nbsp;元 &nbsp; </p>
-                    </div>
-                </div>
-            </el-form-item>
+  <div class="edit-view">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="82px"
+      label-position="left"
+      size="small"
+      style="max-width: 500px;"
+      class="rt-input"
+    >
+      <span>
+        <span
+          style="margin-bottom: 50px;border-left: #1e6abc solid;border-width: 5px"
+          align="left"
+        >&nbsp;&nbsp;订单信息</span>
+        <hr />
+        <el-form-item prop="id" label="id">
+          <el-input type="number" v-model="formData.id" disabled></el-input>
+        </el-form-item>
+        <el-form-item prop="nickname" label="昵称">
+          <el-input v-model="formData.nickname" disabled></el-input>
+        </el-form-item>
+        <el-form-item prop="totalPrice" label="总价">
+          <el-input v-model="formData.totalPrice" disabled></el-input>
+        </el-form-item>
+        <el-form-item prop="isBenefit" label="是否优惠">
+          <el-input type="number" v-model="formData.isBenefit" disabled></el-input>
+        </el-form-item>
+        <el-form-item prop="payment" label="实付金额">
+          <el-input type="number" v-model="formData.payment" disabled></el-input>
+        </el-form-item>
+        <el-form-item prop="payType" label="支付方式">
+          <el-input v-model="formData.payType" disabled></el-input>
+        </el-form-item>
+        <el-form-item prop="status" label="订单状态">
+          <el-select v-model="formData.status" placeholder="请选择" :disabled="true">
+            <el-option
+              v-for="item in statusOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="remark" label="备注">
+          <el-input v-model="formData.remark"></el-input>
+        </el-form-item>
+        <el-form-item prop="orderCode" label="订单号">
+          <el-input v-model="formData.orderCode" disabled></el-input>
+        </el-form-item>
+        <el-form-item prop="payedAt" label="支付时间">
+          <el-date-picker
+            :disabled="true"
+            v-model="formData.payedAt"
+            type="datetime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            placeholder="选择日期时间"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item prop="confirmedAt" label="确认时间">
+          <el-input v-model="formData.confirmedAt" disabled></el-input>
+        </el-form-item>
+      </span>
+      <span
+        style="margin-bottom: 50px;border-left: #1e6abc solid;border-width: 5px"
+        align="left"
+      >&nbsp;&nbsp;商品列表</span>
+      <hr />
+      <el-form-item prop="goods" label="商品列表">
+        <div id="app-1">
+          <div
+            v-for="v in formData.goods"
+            :key="v.id"
+            style="height: 110px;width: 350px;border-radius: 4px;background:rgba(242,244,245,1);"
+          >
+            <img
+              :src="strToArr(v.icon)"
+              alt
+              style="height: 100px;width: 100px;border-radius: 4px;margin-top: 5px;margin-left: 5px"
+            />
+            <p style="float: right;">
+              {{v.name}}
+              <br />
+              {{v.piece}}&nbsp; 份&nbsp; &nbsp;
+              {{v.price}} &nbsp;元 &nbsp;
+            </p>
+          </div>
+        </div>
+      </el-form-item>
 
-            <span style="margin-bottom: 50px;border-left: #1e6abc solid;border-width: 5px"
-                  align="left">&nbsp;&nbsp;物流信息</span>
-            <hr size="1" noshade="true"/>
-            <el-form-item prop="userAddress.address" label="用户地址">
-                <span style="margin-top: 20px">
-                <el-input v-model="userAddress.province" style="width: 100px;margin-top: 10px"
-                ></el-input>
-                <el-input v-model="userAddress.citry" style="width: 100px;margin-left: 25px;margin-top: 10px"
-                ></el-input>
-                <el-input v-model="userAddress.district"
-                          style="width: 100px;margin-left: 25px;margin-top: 10px"></el-input>
-                </span>
-                <br/>
-                <span style="margin-top: 20px">
-                <el-input v-model="userAddress.address" style="width:350px;margin-top: 10px"
-                ></el-input>
-                </span>
-                <br/>
-                <span style="margin-top: 20px">
-                <el-input v-model="userAddress.name" style="width: 100px;margin-top: 10px"
-                ></el-input>
-                <el-input v-model="userAddress.phone" style="width: 150px;margin-top: 10px;margin-left: 100px"
-                ></el-input>
-                </span>
-            </el-form-item>
-            <el-form-item prop="logisticsNo" label="快递单号">
-                <el-input v-model="formData.logisticsNo"></el-input>
-            </el-form-item>
-            <el-form-item prop="logisticsType" label="物流公司">
-                <el-select
-                        v-model="formData.logisticsType"
-                        style="width:270px"
-                        filterable
-                        placeholder="请选择"
-                >
-                    <el-option
-                            v-for="item in logisticsOptions"
-                            :key="item.type"
-                            :label="item.name"
-                            :value="item.type"
-                    >
-                    </el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item>
-                <el-button
-                        v-if="formData.status === 'PAYED'"
-                        :loading="formData.loading" @click="submit1" type="primary">保存
-                </el-button>
-                <el-button @click="$router.go(-1)">返回</el-button>
-            </el-form-item>
-        </el-form>
+      <span
+        style="margin-bottom: 50px;border-left: #1e6abc solid;border-width: 5px"
+        align="left"
+      >&nbsp;&nbsp;物流信息</span>
+      <hr />
+      <el-form-item prop="userAddress.address" label="用户地址">
+        <span style="margin-top: 20px">
+          <el-input v-model="userAddress.province" style="width: 100px;margin-top: 10px"></el-input>
+          <el-input
+            v-model="userAddress.citry"
+            style="width: 100px;margin-left: 25px;margin-top: 10px"
+          ></el-input>
+          <el-input
+            v-model="userAddress.district"
+            style="width: 100px;margin-left: 25px;margin-top: 10px"
+          ></el-input>
+        </span>
+        <br />
+        <span style="margin-top: 20px">
+          <el-input v-model="userAddress.address" style="width:350px;margin-top: 10px"></el-input>
+        </span>
+        <br />
+        <span style="margin-top: 20px">
+          <el-input v-model="userAddress.name" style="width: 100px;margin-top: 10px"></el-input>
+          <el-input
+            v-model="userAddress.phone"
+            style="width: 150px;margin-top: 10px;margin-left: 100px"
+          ></el-input>
+        </span>
+      </el-form-item>
+      <el-form-item prop="logisticsNo" label="快递单号">
+        <el-input v-model="formData.logisticsNo"></el-input>
+      </el-form-item>
+      <el-form-item prop="logisticsType" label="物流公司">
+        <el-select
+          v-model="formData.logisticsType"
+          style="width:270px"
+          filterable
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in logisticsOptions"
+            :key="item.type"
+            :label="item.name"
+            :value="item.type"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          v-if="formData.status === 'PAYED'"
+          :loading="formData.loading"
+          @click="submit1"
+          type="primary"
+        >保存</el-button>
+        <el-button @click="$router.go(-1)">返回</el-button>
+      </el-form-item>
+    </el-form>
 
-        <el-dialog title="填写发货信息" :visible.sync="showSetLogistics" center width="600px">
-            <el-form>
-                <el-select v-model="formData.logisticsType">
-                    <el-option
-                            v-for="item in logisticsOptions"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                    >
-                    </el-option>
-                </el-select>
-                <el-form-item prop="logisticsNo" label="快递单号">
-                    <el-input v-model="formData.logisticsNo"></el-input>
-                </el-form-item>
-                <el-form-item align="center">
-                    <el-button @click="submit" type="primary">保存</el-button>
-                    <el-button @click="closeLogistics">返回</el-button>
-                </el-form-item>
-            </el-form>
-        </el-dialog>
-    </div>
+    <el-dialog title="填写发货信息" :visible.sync="showSetLogistics" center width="600px">
+      <el-form>
+        <el-select v-model="formData.logisticsType">
+          <el-option
+            v-for="item in logisticsOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+        <el-form-item prop="logisticsNo" label="快递单号">
+          <el-input v-model="formData.logisticsNo"></el-input>
+        </el-form-item>
+        <el-form-item align="center">
+          <el-button @click="submit" type="primary">保存</el-button>
+          <el-button @click="closeLogistics">返回</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
 </template>
 <script>
-    export default {
-        name: 'OrderFormEdit',
-        created() {
-            if (this.$route.query.id) {
-                this.$http
-                    .get('orderForm/get/' + this.$route.query.id)
-                    .then(res => {
-                        this.formData = res;
-                        if (res.userAddress != null) {
-                            this.userAddress = res.userAddress;
-                        }
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    });
-                this.$http.get("/logisticsInformation/all").then(res => {
-                    this.logisticsOptions = res;
-                });
-            }
-        },
-        data() {
-            return {
-                saving: false,
-                formData: {
-                    userAddress: {}
-                },
-                rules: {},
-                statusOptions: [
-                    {"label": "未支付", "value": "CREATED"},
-                    {"label": "已取消", "value": "CANCELED"},
-                    {"label": "未发货", "value": "PAYED"},
-                    {"label": "已发货", "value": "SENTED"},
-                    {"label": "已收货", "value": "TAKEN"},
-                    {"label": "申请退款", "value": "REFUND"},
-                    {"label": "已退款", "value": "REFUNDED"},
-                    {"label": "已完成", "value": "COMPETED"}],
-                logisticsOptions: [],
-                showSetLogistics: false,
-                userAddress: {
-                    province: '',
-                    citry: '',
-                    district: '',
-                    address: '',
-                    name: '',
-                    phone: ''
-                }
-            }
-        },
-        methods: {
-            statusFormatter(row, column, cellValue, index) {
-                let selectedOption = this.statusOptions.find(i => i.value === cellValue);
-                if (selectedOption) {
-                    return selectedOption.label;
-                }
-                return '';
-            },
-            showSetLogistic() {
-                this.showSetLogistics = true;
-            },
-            closeLogistics() {
-                this.showSetLogistics = false;
-            },
-            strToArr(str) {
-                const arr = str.split(',');
-                return arr[0];
-            },
-            onSave() {
-                this.$refs.form.validate((valid) => {
-                    if (valid) {
-                        this.submit();
-                    } else {
-                        return false;
-                    }
-                });
-            },
-            submit() {
-                let data = {
-                    orderId: this.formData.id,
-                    logisticsType: this.formData.logisticsType,
-                    logisticsNo: this.formData.logisticsNo,
-                };
-                this.saving = true;
-                this.$http
-                    .post('/orderForm/shipOrderForm', data)
-                    .then(res => {
-                        this.saving = false;
-                        this.$message.success('成功');
-                        this.showSetLogistics = false;
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.saving = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            submit1() {
-                let data = {...this.formData};
-
-                this.saving = true;
-                this.$http
-                    .post('/orderForm/saveVO', data, {body: 'json'})
-                    .then(res => {
-                        this.saving = false;
-                        this.$message.success('成功');
-                        this.$router.go(-1);
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.saving = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            onDelete() {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/orderForm/del/${this.formData.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.$router.go(-1);
-                }).catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                })
-            },
+export default {
+  name: "OrderFormEdit",
+  created() {
+    if (this.$route.query.id) {
+      this.$http
+        .get("orderForm/get/" + this.$route.query.id)
+        .then(res => {
+          this.formData = res;
+          if (res.userAddress != null) {
+            this.userAddress = res.userAddress;
+          }
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+      this.$http.get("/logisticsInformation/all").then(res => {
+        this.logisticsOptions = res;
+      });
+    }
+  },
+  data() {
+    return {
+      saving: false,
+      formData: {
+        userAddress: {}
+      },
+      rules: {},
+      statusOptions: [
+        { label: "未支付", value: "CREATED" },
+        { label: "已取消", value: "CANCELED" },
+        { label: "未发货", value: "PAYED" },
+        { label: "已发货", value: "SENTED" },
+        { label: "已收货", value: "TAKEN" },
+        { label: "申请退款", value: "REFUND" },
+        { label: "已退款", value: "REFUNDED" },
+        { label: "已完成", value: "COMPETED" }
+      ],
+      logisticsOptions: [],
+      showSetLogistics: false,
+      userAddress: {
+        province: "",
+        citry: "",
+        district: "",
+        address: "",
+        name: "",
+        phone: ""
+      }
+    };
+  },
+  methods: {
+    statusFormatter(row, column, cellValue, index) {
+      let selectedOption = this.statusOptions.find(i => i.value === cellValue);
+      if (selectedOption) {
+        return selectedOption.label;
+      }
+      return "";
+    },
+    showSetLogistic() {
+      this.showSetLogistics = true;
+    },
+    closeLogistics() {
+      this.showSetLogistics = false;
+    },
+    strToArr(str) {
+      const arr = str.split(",");
+      return arr[0];
+    },
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
         }
+      });
+    },
+    submit() {
+      let data = {
+        orderId: this.formData.id,
+        logisticsType: this.formData.logisticsType,
+        logisticsNo: this.formData.logisticsNo
+      };
+      this.saving = true;
+      this.$http
+        .post("/orderForm/shipOrderForm", data)
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.showSetLogistics = false;
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    submit1() {
+      let data = { ...this.formData };
+
+      this.saving = true;
+      this.$http
+        .post("/orderForm/saveVO", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/orderForm/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
-    .rt-input /deep/ .el-input__inner {
-        color: rgb(13, 16, 32) !important;
-
-    }
+.rt-input /deep/ .el-input__inner {
+  color: rgb(13, 16, 32) !important;
+}
 </style>

src/main/vue/src/views/OrderFormGoodEdit.vue

@@ -1,97 +1,102 @@
 <template>
-    <div class="edit-view">
-        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small"
-                 style="max-width: 500px;">
-                <el-form-item prop="id" label="id">
-                            <el-input-number type="number" v-model="formData.id"></el-input-number>
-                </el-form-item>
-                <el-form-item prop="orderFormId" label="订单id">
-                            <el-input-number type="number" v-model="formData.orderFormId"></el-input-number>
-                </el-form-item>
-                <el-form-item prop="goodsId" label="商品id">
-                            <el-input-number type="number" v-model="formData.goodsId"></el-input-number>
-                </el-form-item>
-                <el-form-item prop="piece" label="商品件数">
-                            <el-input-number type="number" v-model="formData.piece"></el-input-number>
-                </el-form-item>
-            <el-form-item>
-                <el-button @click="onSave" :loading="saving"
-                           type="primary">保存</el-button>
-                <el-button @click="onDelete" :loading="saving"
-                           type="danger" v-if="formData.id">删除
-                </el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+  <div class="edit-view">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="80px"
+      label-position="right"
+      size="small"
+      style="max-width: 500px;"
+    >
+      <el-form-item prop="id" label="id">
+        <el-input-number type="number" v-model="formData.id"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="orderFormId" label="订单id">
+        <el-input-number type="number" v-model="formData.orderFormId"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="goodsId" label="商品id">
+        <el-input-number type="number" v-model="formData.goodsId"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="piece" label="商品件数">
+        <el-input-number type="number" v-model="formData.piece"></el-input-number>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+        <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除</el-button>
+        <el-button @click="$router.go(-1)">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script>
-    export default {
-        name: 'OrderFormGoodEdit',
-        created() {
-            if (this.$route.query.id) {
-                this.$http
-                    .get('orderFormGood/get/'+this.$route.query.id)
-                    .then(res => {
-                        this.formData = res;
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    });
-            }
-        },
-        data() {
-            return {
-                saving: false,
-                formData: {
-                },
-                rules: {
-                },
-            }
-        },
-        methods: {
-            onSave() {
-                this.$refs.form.validate((valid) => {
-                    if (valid) {
-                        this.submit();
-                    } else {
-                        return false;
-                    }
-                });
-            },
-            submit() {
-                let data = {...this.formData};
-
-                this.saving = true;
-                this.$http
-                    .post('/orderFormGood/save', data, {body: 'json'})
-                    .then(res => {
-                        this.saving = false;
-                        this.$message.success('成功');
-                        this.$router.go(-1);
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.saving = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            onDelete() {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/orderFormGood/del/${this.formData.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.$router.go(-1);
-                }).catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                })
-            },
+export default {
+  name: "OrderFormGoodEdit",
+  created() {
+    if (this.$route.query.id) {
+      this.$http
+        .get("orderFormGood/get/" + this.$route.query.id)
+        .then(res => {
+          this.formData = res;
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    }
+  },
+  data() {
+    return {
+      saving: false,
+      formData: {},
+      rules: {}
+    };
+  },
+  methods: {
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
         }
+      });
+    },
+    submit() {
+      let data = { ...this.formData };
+
+      this.saving = true;
+      this.$http
+        .post("/orderFormGood/save", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/orderFormGood/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/OrderFormGoodList.vue

@@ -1,192 +1,183 @@
 <template>
-    <div  class="list-view">
-        <div class="filters-container">
-            <el-input placeholder="输入关键字" v-model="search" clearable
-                      class="filter-item"></el-input>
-            <el-button @click="getData" type="primary" icon="el-icon-search"
-                       class="filter-item">搜索
-            </el-button>
-<!--            <el-button @click="download" type="primary" icon="el-icon-download"
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <!--            <el-button @click="download" type="primary" icon="el-icon-download"
                        :loading="downloading" class="filter-item">导出EXCEL
-            </el-button>-->
-        </div>
-        <el-table :data="tableData" row-key="id" ref="table"
-                  header-row-class-name="table-header-row"
-                  header-cell-class-name="table-header-cell"
-                  row-class-name="table-row" cell-class-name="table-cell"
-                  :height="tableHeight">
-            <el-table-column v-if="multipleMode" align="center" type="selection"
-                             width="50">
-            </el-table-column>
-            <el-table-column prop="id" label="ID" width="100">
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort"
-                                     @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-                                <el-table-column prop="id" label="id"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="orderFormId" label="订单id"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="goodsId" label="商品id"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="piece" label="商品件数"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-            <el-table-column
-                    label="操作"
-                    align="center"
-                    fixed="right"
-                    min-width="150">
-                <template slot-scope="{row}">
-                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
-                    <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper">
-                <el-button v-if="!multipleMode"
-                           @click="toggleMultipleMode(true)">批量编辑</el-button>
-                <el-button-group v-else>
-                    <el-button @click="operation1">批量操作1</el-button>
-                    <el-button @click="operation2">批量操作2</el-button>
-                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
-                </el-button-group>
-            </div>
-            <el-pagination background @size-change="onSizeChange"
-                           @current-change="onCurrentChange" :current-page="page"
-                           :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalElements">
-            </el-pagination>
-        </div>
-
+      </el-button>-->
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column prop="id" label="ID" width="100">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="id" label="id">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="orderFormId" label="订单id">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="goodsId" label="商品id">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="piece" label="商品件数">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" fixed="right" min-width="150">
+        <template slot-scope="{row}">
+          <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+          <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
     </div>
+  </div>
 </template>
 <script>
-    import { mapState } from "vuex";
-    import pageableTable from "@/mixins/pageableTable";
+import { mapState } from "vuex";
+import pageableTable from "@/mixins/pageableTable";
 
-    export default {
-        name: 'OrderFormGoodList',
-        mixins: [pageableTable],
-        created() {
-            this.getData();
-        },
-        data() {
-            return {
-                multipleMode: false,
-                search: "",
-                url: "/orderFormGood/all",
-                downloading: false,
-            }
-        },
-        computed: {
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
-        },
-        methods: {
-            beforeGetData() {
-                if (this.search) {
-                    return { search: this.search };
-                }
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            addRow() {
-                this.$router.push({
-                    path: "/orderFormGoodEdit",
-                    query: {
-                    ...this.$route.query
-                    }
-                });
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: "/orderFormGoodEdit",
-                    query: {
-                    id: row.id
-                    }
-                });
-            },
-            download() {
-                this.downloading = true;
-                this.$axios
-                    .get("/orderFormGood/excel", { 
-                        responseType: "blob",
-                        params: { size: 10000 }
-                    })
-                    .then(res => {
-                        console.log(res);
-                        this.downloading = false;
-                        const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
-                        const link = document.createElement("a");
-                        link.href = downloadUrl;
-                        link.setAttribute(
-                            "download",
-                            res.headers["content-disposition"].split("filename=")[1]
-                        );
-                        document.body.appendChild(link);
-                        link.click();
-                        link.remove();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.downloading = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            deleteRow(row) {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/orderFormGood/del/${row.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.getData();
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
-                    } else {
-                        this.$message.error('删除失败');
-                    }
-                })
-            },
+export default {
+  name: "OrderFormGoodList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/orderFormGood/all",
+      downloading: false
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    beforeGetData() {
+      if (this.search) {
+        return { search: this.search };
+      }
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addRow() {
+      this.$router.push({
+        path: "/orderFormGoodEdit",
+        query: {
+          ...this.$route.query
+        }
+      });
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/orderFormGoodEdit",
+        query: {
+          id: row.id
         }
+      });
+    },
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/orderFormGood/excel", {
+          responseType: "blob",
+          params: { size: 10000 }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    deleteRow(row) {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/orderFormGood/del/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("删除取消");
+          } else {
+            this.$message.error("删除失败");
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/OrderFormList.vue

@@ -1,486 +1,512 @@
 <template>
-    <div class="list-view">
-        <div class="filters-container">
-            <el-input
-                placeholder="输入昵称"
-                v-model="search"
-                clearable
-                class="filter-item"
-            ></el-input>
-            <el-button
-                @click="getData"
-                type="primary"
-                icon="el-icon-search"
-                class="filter-item"
-                >搜索
-            </el-button>
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入昵称" v-model="search" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <el-input placeholder="输入订单号/收件人/电话" v-model="search2" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <el-select
+        v-model="status"
+        class="filter-item"
+        placeholder="筛选状态"
+        clearable
+        filterable
+        @change="getData"
+      >
+        <el-option
+          v-for="item in statusOptions"
+          :label="item.label"
+          :value="item.value"
+          :key="item.value"
+        />
+      </el-select>
+      <el-date-picker
+        v-model="dateRange"
+        type="daterange"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="请选择开始时间"
+        end-placeholder="请选择结束时间"
+        range-separator="至"
+        :default-time="['00:00:00', '23:59:59']"
+        class="filter-item"
+        :picker-options="pickerOptions"
+        @change="getData"
+      ></el-date-picker>
+      <el-select
+        placeholder="请选择金额"
+        v-model="amount"
+        clearable
+        class="filter-item"
+        @change="getData"
+      >
+        <el-option
+          v-for="(item,index) in amounts"
+          :key="index"
+          :label="item.label"
+          :value="item.value"
+        ></el-option>
+      </el-select>
+      <el-button
+        @click="download"
+        type="primary"
+        icon="el-icon-download"
+        :loading="downloading"
+        class="filter-item"
+      >导出EXCEL</el-button>
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+      :default-sort="{ prop: 'payedAt', order: 'descending' }"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column prop="desc" label="订单状态" align="center">
+        <template slot-scope="scope">
+          <el-tag :type="addClassStatus(scope.row.status)">
+            <span>{{ scope.row.status | statusFilter }}</span>
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="orderCode" label="订单号" min-width="150"></el-table-column>
+      <el-table-column prop="nickname" label="用户昵称" width="150"></el-table-column>
+      <el-table-column prop="avatar" label="头像">
+        <template slot-scope="{ row }">
+          <el-image
+            style="width: 30px; height: 30px"
+            :src="row.avatar"
+            fit="cover"
+            :preview-src-list="[row.avatar]"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column prop="totalPrice" label="总价"></el-table-column>
+      <el-table-column prop="realName" label="收件人"></el-table-column>
+      <el-table-column prop="phone" label="电话" min-width="100px"></el-table-column>
+      <el-table-column prop="remark" label="备注"></el-table-column>
+      <el-table-column prop="payedAt" label="下单时间" show-overflow-tooltip></el-table-column>
+      <el-table-column label="操作" fixed="right" min-width="150">
+        <template slot-scope="{ row }">
+          <el-button @click="editRow(row)" type="primary" align="right" size="mini" plain>详情</el-button>
+          <el-button
+            v-if="row.status === 'PAYED'"
+            :loading="row.loading"
+            @click="showSetLogistic(row)"
+            type="warning"
+            size="mini"
+            plain
+          >发货</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-dialog title="填写发货信息" :visible.sync="showSetLogistics" center width="400px">
+        <el-form :model="formData" v-loading="false" :rules="logisticsRule" label-width="80px">
+          <el-form-item prop="userAddress" label="收货人">
+            <el-input v-model="formData.userName" class="read" readonly></el-input>
+          </el-form-item>
+          <el-form-item prop="userAddress" label="收货手机">
+            <el-input class="read" v-model="formData.phone" readonly></el-input>
+          </el-form-item>
+          <el-form-item label="收货地址">
             <el-input
-                placeholder="输入订单号/收件人/电话"
-                v-model="search2"
-                clearable
-                class="filter-item"
+              class="read"
+              v-model="formData.allAddress"
+              type="textarea"
+              autosize
+              readonly
+              style="width:270px"
+              ref="address"
             ></el-input>
-            <el-button
-                @click="getData"
-                type="primary"
-                icon="el-icon-search"
-                class="filter-item"
-                >搜索
-            </el-button>
-            <el-select
-                v-model="status"
-                class="filter-item"
-                placeholder="筛选状态"
-                clearable
-                filterable
-                @change="getData"
-            >
-                <el-option
-                    v-for="item in statusOptions"
-                    :label="item.label"
-                    :value="item.value"
-                    :key="item.value"
-                />
-            </el-select>
-            <el-button
-                @click="download"
-                type="primary"
-                icon="el-icon-download"
-                :loading="downloading"
-                class="filter-item"
-                >导出EXCEL
-            </el-button>
-        </div>
-        <el-table
-            :data="tableData"
-            row-key="id"
-            ref="table"
-            header-row-class-name="table-header-row"
-            header-cell-class-name="table-header-cell"
-            row-class-name="table-row"
-            cell-class-name="table-cell"
-            :height="tableHeight"
-            :default-sort="{ prop: 'payedAt', order: 'descending' }"
-        >
-            <el-table-column
-                v-if="multipleMode"
-                align="center"
-                type="selection"
-                width="50"
-            >
-            </el-table-column>
-            <el-table-column prop="desc" label="订单状态" align="center">
-                <template slot-scope="scope">
-                    <el-tag :type="addClassStatus(scope.row.status)">
-                        <span>{{ scope.row.status | statusFilter }}</span>
-                    </el-tag>
-                </template>
-            </el-table-column>
-            <el-table-column prop="orderCode" label="订单号" min-width="150">
-            </el-table-column>
-            <el-table-column prop="nickname" label="用户昵称" width="150">
-            </el-table-column>
-            <el-table-column prop="avatar" label="头像">
-                <template slot-scope="{ row }">
-                    <el-image
-                        style="width: 30px; height: 30px"
-                        :src="row.avatar"
-                        fit="cover"
-                        :preview-src-list="[row.avatar]"
-                    />
-                </template>
-            </el-table-column>
-            <el-table-column prop="totalPrice" label="总价"> </el-table-column>
-            <el-table-column prop="realName" label="收件人"> </el-table-column>
-            <el-table-column prop="phone" label="电话" min-width="100px">
-            </el-table-column>
-            <el-table-column prop="remark" label="备注"></el-table-column>
-            <el-table-column prop="payedAt" label="下单时间" show-overflow-tooltip>
-            </el-table-column>
-            <el-table-column label="操作" fixed="right" min-width="150">
-                <template slot-scope="{ row }">
-                    <el-button
-                        @click="editRow(row)"
-                        type="primary"
-                        align="right"
-                        size="mini"
-                        plain
-                        >详情
-                    </el-button>
-                    <el-button
-                        v-if="row.status === 'PAYED'"
-                        :loading="row.loading"
-                        @click="showSetLogistic(row)"
-                        type="warning"
-                        size="mini"
-                        plain
-                        >发货
-                    </el-button>
-                    <!--                    <el-button @click="deleteRow(row)" type="danger" size="mini" plain>取消</el-button>-->
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper">
-                <el-button
-                    v-if="!multipleMode"
-                    @click="toggleMultipleMode(true)"
-                    >批量编辑
-                </el-button>
-                <el-button-group v-else>
-                    <el-button @click="operation1">批量操作1</el-button>
-                    <el-button @click="operation2">批量操作2</el-button>
-                    <el-button @click="toggleMultipleMode(false)"
-                        >取消
-                    </el-button>
-                </el-button-group>
-            </div>
-            <el-dialog
-                title="填写发货信息"
-                :visible.sync="showSetLogistics"
-                center
-                width="400px"
-            >
-                <el-form
-                    :model="formData"
-                    v-loading="false"
-                    :rules="logisticsRule"
-                    label-width="80px"
-                >
-                    <el-form-item prop="userAddress" label="收货人">
-                        <el-input
-                            v-model="formData.userName"
-                            class="read"
-                            readonly
-                        ></el-input>
-                    </el-form-item>
-                    <el-form-item prop="userAddress" label="收货手机">
-                        <el-input
-                            class="read"
-                            v-model="formData.phone"
-                            readonly
-                        ></el-input>
-                    </el-form-item>
-                    <el-form-item label="收货地址">
-                        <el-input
-                            class="read"
-                            v-model="formData.allAddress"
-                            type="textarea"
-                            autosize
-                            readonly
-                            style="width:270px"
-                            ref="address"
-                        ></el-input>
 
-                        <div style="margin-top:10px">
-                            <el-button type="primary" size="mini" @click="copy"
-                                >一键复制</el-button
-                            >
-                        </div>
-                    </el-form-item>
-                    <el-form-item prop="orderId" label="订单编号" required>
-                        <el-input
-                            v-model="formData.orderId"
-                            disabled
-                        ></el-input>
-                    </el-form-item>
-                    <el-form-item prop="logisticsType" label="物流公司">
-                        <el-select
-                            v-model="formData.logisticsType"
-                            style="width:270px"
-                            filterable
-                        >
-                            <el-option
-                                v-for="item in logisticsOptions"
-                                :key="item.type"
-                                :label="item.name"
-                                :value="item.type"
-                            >
-                            </el-option>
-                        </el-select>
-                    </el-form-item>
+            <div style="margin-top:10px">
+              <el-button type="primary" size="mini" @click="copy">一键复制</el-button>
+            </div>
+          </el-form-item>
+          <el-form-item prop="orderId" label="订单编号" required>
+            <el-input v-model="formData.orderId" disabled></el-input>
+          </el-form-item>
+          <el-form-item prop="logisticsType" label="物流公司">
+            <el-select v-model="formData.logisticsType" style="width:270px" filterable>
+              <el-option
+                v-for="item in logisticsOptions"
+                :key="item.type"
+                :label="item.name"
+                :value="item.type"
+              ></el-option>
+            </el-select>
+          </el-form-item>
 
-                    <el-form-item prop="logisticsNo" label="物流单号">
-                        <el-input v-model="formData.logisticsNo"></el-input>
-                    </el-form-item>
-                    <el-form-item align="center">
-                        <el-button @click="submit" type="primary"
-                            >发货
-                        </el-button>
-                        <el-button @click="closeLogistics">返回</el-button>
-                    </el-form-item>
-                </el-form>
-            </el-dialog>
-            <el-pagination
-                background
-                @size-change="onSizeChange"
-                @current-change="onCurrentChange"
-                :current-page="page"
-                :page-sizes="[10, 20, 30, 40, 50]"
-                :page-size="pageSize"
-                layout="total, sizes, prev, pager, next, jumper"
-                :total="totalElements"
-            >
-            </el-pagination>
-        </div>
+          <el-form-item prop="logisticsNo" label="物流单号">
+            <el-input v-model="formData.logisticsNo"></el-input>
+          </el-form-item>
+          <el-form-item align="center">
+            <el-button @click="submit" type="primary">发货</el-button>
+            <el-button @click="closeLogistics">返回</el-button>
+          </el-form-item>
+        </el-form>
+      </el-dialog>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
     </div>
+  </div>
 </template>
 <script>
 import pageableTable from "@/mixins/pageableTable";
-
+import format from "date-fns/format";
+import startOfDay from "date-fns/startOfDay";
+import endOfDay from "date-fns/endOfDay";
+import addDays from "date-fns/addDays";
+import addMonths from "date-fns/addMonths";
 export default {
-    name: "OrderFormList",
-    mixins: [pageableTable],
-    created() {
-        this.getData();
-        this.$http.get("/logisticsInformation/all").then(res => {
-            this.logisticsOptions = res;
+  name: "OrderFormList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+    this.$http.get("/logisticsInformation/all").then(res => {
+      this.logisticsOptions = res;
+    });
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      search2: "",
+      sort: "",
+      url: "/orderForm/all",
+      downloading: false,
+      formData: {
+        user: {},
+        userAddress: {}
+      },
+      status: "",
+      statusOptions: [
+        { label: "未支付", value: "CREATED" },
+        { label: "已取消", value: "CANCELED" },
+        { label: "未发货", value: "PAYED" },
+        { label: "已发货", value: "SENTED" },
+        { label: "已收货", value: "TAKEN" },
+        { label: "申请退款", value: "REFUND" },
+        { label: "已退款", value: "REFUNDED" },
+        { label: "已完成", value: "COMPETED" }
+      ],
+      logisticsOptions: [],
+      showSetLogistics: false,
+      logisticsRule: {
+        logisticsType: [
+          {
+            required: true,
+            message: "请选择快递名称",
+            trigger: "blur"
+          }
+        ],
+        logisticsNo: [
+          {
+            required: true,
+            message: "请输入快递公司单号",
+            trigger: "blur"
+          }
+        ]
+      },
+      amounts: [
+        { label: "78元", value: 78 },
+        { label: "15元", value: 15 },
+        { label: "19元", value: 19 },
+        { label: "29元", value: 29 },
+        { label: "39元", value: 39 },
+        { label: "49元", value: 49 }
+      ],
+      amount: '',
+      startTime: "",
+      dateRange: [],
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "今天",
+            onClick(picker) {
+              picker.$emit("pick", [
+                format(startOfDay(new Date()), "yyyy-MM-dd HH:mm:ss"),
+                format(endOfDay(new Date()), "yyyy-MM-dd HH:mm:ss")
+              ]);
+            }
+          },
+          {
+            text: "近一周",
+            onClick(picker) {
+              const date = addDays(new Date(), -7);
+              picker.$emit("pick", [
+                format(startOfDay(date), "yyyy-MM-dd HH:mm:ss"),
+                format(endOfDay(new Date()), "yyyy-MM-dd HH:mm:ss")
+              ]);
+            }
+          },
+          {
+            text: "近一月",
+            onClick(picker) {
+              const date = addMonths(new Date(), -1);
+              picker.$emit("pick", [
+                format(startOfDay(date), "yyyy-MM-dd HH:mm:ss"),
+                format(endOfDay(new Date()), "yyyy-MM-dd HH:mm:ss")
+              ]);
+            }
+          },
+          {
+            text: "近三月",
+            onClick(picker) {
+              const date = addMonths(new Date(), -3);
+              picker.$emit("pick", [
+                format(startOfDay(date), "yyyy-MM-dd HH:mm:ss"),
+                format(endOfDay(new Date()), "yyyy-MM-dd HH:mm:ss")
+              ]);
+            }
+          }
+        ]
+      }
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  filters: {
+    statusFilter: function(value) {
+      switch (value) {
+        case "CREATED":
+          return "未支付";
+        case "CANCELED":
+          return "已取消";
+        case "PAYED":
+          return "已支付";
+        case "SENTED":
+          return "已发货";
+        case "TAKEN":
+          return "已收货";
+        case "REFUND":
+          return "申请退款";
+        case "REFUNDED":
+          return "已退款";
+        case "COMPETED":
+          return "已完成";
+      }
+    }
+  },
+  methods: {
+    addClassStatus(i) {
+      switch (i) {
+        case "PAYED":
+          return "warning";
+        case "SENTED":
+          return "success";
+        case "REFUND":
+          return "warning";
+        case "TAKEN":
+          return "success";
+        case "CANCELED":
+          return "info";
+        case "COMPETED":
+          return "info";
+        case "REFUNDED":
+          return "info";
+      }
+    },
+    showSetLogistic(row) {
+      this.showSetLogistics = true;
+      this.formData.orderId = row.id;
+      this.formData.allAddress =
+        row.userAddress.province +
+        row.userAddress.citry +
+        row.userAddress.district +
+        row.userAddress.address +
+        " " +
+        row.userAddress.name +
+        " " +
+        row.userAddress.phone;
+      this.formData.userName = row.userAddress.name;
+      this.formData.phone = row.userAddress.phone;
+    },
+    closeLogistics() {
+      this.showSetLogistics = false;
+      this.$router.go(0);
+    },
+    submit() {
+      // if (this.formData.logisticsType === null || this.formData.logisticsNo === null ){
+      //     return new Error('请正确输入物流信息');
+      // }
+      let data = {
+        orderId: this.formData.orderId,
+        logisticsType: this.formData.logisticsType,
+        logisticsNo: this.formData.logisticsNo
+      };
+      this.saving = true;
+      this.$http
+        .post("/orderForm/shipOrderForm", data)
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.showSetLogistics = false;
+          this.$router.go(0);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
         });
     },
-    data() {
-        return {
-            multipleMode: false,
-            search: "",
-            search2: "",
-            sort: "",
-            url: "/orderForm/all",
-            downloading: false,
-            formData: {
-                user: {},
-                userAddress: {}
-            },
-            status: "",
-            statusOptions: [
-                { label: "未支付", value: "CREATED" },
-                { label: "已取消", value: "CANCELED" },
-                { label: "未发货", value: "PAYED" },
-                { label: "已发货", value: "SENTED" },
-                { label: "已收货", value: "TAKEN" },
-                { label: "申请退款", value: "REFUND" },
-                { label: "已退款", value: "REFUNDED" },
-                { label: "已完成", value: "COMPETED" }
-            ],
-            /*    {"label": "申通", "value": "STO"}, {
-                            "label": "顺丰",
-                                "value": "SFEXPRESS"
-                        }, {"label": "圆通", "value": "YTO"}*/
-            logisticsOptions: [],
-            showSetLogistics: false,
-            logisticsRule: {
-                logisticsType: [
-                    {
-                        required: true,
-                        message: "请选择快递名称",
-                        trigger: "blur"
-                    }
-                ],
-                logisticsNo: [
-                    {
-                        required: true,
-                        message: "请输入快递公司单号",
-                        trigger: "blur"
-                    }
-                ]
-            }
-        };
+    statusFormatter(row, column, cellValue, index) {
+      let selectedOption = this.statusOptions.find(i => i.value === cellValue);
+      if (selectedOption) {
+        return selectedOption.label;
+      }
+      return "";
+    },
+    beforeOnCreate() {
+      if (this.$route.query.dateRange) {
+        this.dateRange = decodeURIComponent(this.$route.query.dateRange).split(
+          ","
+        );
+      } else {
+        this.dateRange = [
+          format(startOfDay(new Date()), "yyyy-MM-dd HH:mm:ss"),
+          format(endOfDay(new Date()), "yyyy-MM-dd HH:mm:ss")
+        ];
+      }
     },
-    computed: {
-        selection() {
-            return this.$refs.table.selection.map(i => i.id);
+    beforeGetData() {
+      let data = { query: {} };
+      if (this.search) {
+        data.search = this.search;
+      }
+      if (this.search2) {
+        data.search2 = this.search2;
+      }
+      if (this.dateRange && this.dateRange.length > 0) {
+        data.query.paidAt = this.dateRange[0] + "," + this.dateRange[1];
+      }
+      if (this.status) {
+        data.query.status = this.status;
+      }
+    //   if (this.amount) {
+        data.query.totalPrice = this.amount;
+    //   }
+      return data;
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addRow() {
+      this.$router.push({
+        path: "/orderFormEdit",
+        query: {
+          ...this.$route.query
         }
+      });
     },
-    filters: {
-        statusFilter: function(value) {
-            switch (value) {
-                case "CREATED":
-                    return "未支付";
-                case "CANCELED":
-                    return "已取消";
-                case "PAYED":
-                    return "已支付";
-                case "SENTED":
-                    return "已发货";
-                case "TAKEN":
-                    return "已收货";
-                case "REFUND":
-                    return "申请退款";
-                case "REFUNDED":
-                    return "已退款";
-                case "COMPETED":
-                    return "已完成";
-            }
+    editRow(row) {
+      this.$router.push({
+        path: "/orderFormEdit",
+        query: {
+          id: row.id
         }
+      });
     },
-    methods: {
-        addClassStatus(i) {
-            switch (i) {
-                case "PAYED":
-                    return "warning";
-                case "SENTED":
-                    return "success";
-                case "REFUND":
-                    return "warning";
-                case "TAKEN":
-                    return "success";
-                case "CANCELED":
-                    return "info";
-                case "COMPETED":
-                    return "info";
-                case "REFUNDED":
-                    return "info";
-            }
-        },
-        showSetLogistic(row) {
-            this.showSetLogistics = true;
-            this.formData.orderId = row.id;
-            this.formData.allAddress =
-                row.userAddress.province +
-                row.userAddress.citry +
-                row.userAddress.district +
-                row.userAddress.address +
-                " " +
-                row.userAddress.name +
-                " " +
-                row.userAddress.phone;
-            this.formData.userName = row.userAddress.name;
-            this.formData.phone = row.userAddress.phone;
-        },
-        closeLogistics() {
-            this.showSetLogistics = false;
-            this.$router.go(0);
-        },
-        submit() {
-            // if (this.formData.logisticsType === null || this.formData.logisticsNo === null ){
-            //     return new Error('请正确输入物流信息');
-            // }
-            let data = {
-                orderId: this.formData.orderId,
-                logisticsType: this.formData.logisticsType,
-                logisticsNo: this.formData.logisticsNo
-            };
-            this.saving = true;
-            this.$http
-                .post("/orderForm/shipOrderForm", data)
-                .then(res => {
-                    this.saving = false;
-                    this.$message.success("成功");
-                    this.showSetLogistics = false;
-                    this.$router.go(0);
-                })
-                .catch(e => {
-                    console.log(e);
-                    this.saving = false;
-                    this.$message.error(e.error);
-                });
-        },
-        statusFormatter(row, column, cellValue, index) {
-            let selectedOption = this.statusOptions.find(
-                i => i.value === cellValue
-            );
-            if (selectedOption) {
-                return selectedOption.label;
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/orderForm/excel", {
+          responseType: "blob",
+          params: {
+            size: 10000,
+            search: this.search,
+            query: {
+              status: this.status,
+              paidAt: this.dateRange[0] + "," + this.dateRange[1]
             }
-            return "";
-        },
-        beforeGetData() {
-            return {
-                search: this.search,
-                search2: this.search2,
-                query: {
-                    status: this.status
-                }
-            };
-        },
-        toggleMultipleMode(multipleMode) {
-            this.multipleMode = multipleMode;
-            if (!multipleMode) {
-                this.$refs.table.clearSelection();
-            }
-        },
-        addRow() {
-            this.$router.push({
-                path: "/orderFormEdit",
-                query: {
-                    ...this.$route.query
-                }
-            });
-        },
-        editRow(row) {
-            this.$router.push({
-                path: "/orderFormEdit",
-                query: {
-                    id: row.id
-                }
-            });
-        },
-        download() {
-            this.downloading = true;
-            this.$axios
-                .get("/orderForm/excel", {
-                    responseType: "blob",
-                    params: { size: 10000 }
-                })
-                .then(res => {
-                    console.log(res);
-                    this.downloading = false;
-                    const downloadUrl = window.URL.createObjectURL(
-                        new Blob([res.data])
-                    );
-                    const link = document.createElement("a");
-                    link.href = downloadUrl;
-                    link.setAttribute(
-                        "download",
-                        res.headers["content-disposition"].split("filename=")[1]
-                    );
-                    document.body.appendChild(link);
-                    link.click();
-                    link.remove();
-                })
-                .catch(e => {
-                    console.log(e);
-                    this.downloading = false;
-                    this.$message.error(e.error);
-                });
-        },
-        operation1() {
-            this.$notify({
-                title: "提示",
-                message: this.selection
-            });
-        },
-        operation2() {
-            this.$message("操作2");
-        },
-        copy() {
-            this.$refs.address.select(); // 选择对象
-            document.execCommand("Copy");
-            this.$message.success("复制成功");
-        }
-        // deleteRow(row) {
-        //     this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-        //         return this.$http.post(`/orderForm/del/${row.id}`)
-        //     }).then(() => {
-        //         this.$message.success('删除成功');
-        //         this.getData();
-        //     }).catch(action => {
-        //         if (action === 'cancel') {
-        //             this.$message.info('删除取消');
-        //         } else {
-        //             this.$message.error('删除失败');
-        //         }
-        //     })
-        // },
+          }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
     },
-    watch: {
-        selected() {
-            this.page = 1;
-            this.getData();
-        }
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    copy() {
+      this.$refs.address.select(); // 选择对象
+      document.execCommand("Copy");
+      this.$message.success("复制成功");
+    }
+    // deleteRow(row) {
+    //     this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
+    //         return this.$http.post(`/orderForm/del/${row.id}`)
+    //     }).then(() => {
+    //         this.$message.success('删除成功');
+    //         this.getData();
+    //     }).catch(action => {
+    //         if (action === 'cancel') {
+    //             this.$message.info('删除取消');
+    //         } else {
+    //             this.$message.error('删除失败');
+    //         }
+    //     })
+    // },
+  },
+  watch: {
+    selected() {
+      this.page = 1;
+      this.getData();
     }
+  }
 };
 </script>
 <style lang="less" scoped>
 .zi {
-    color: #ffffff;
+  color: #ffffff;
 }
 </style>

src/main/vue/src/views/OrderRefundApplyEdit.vue

@@ -1,11 +1,18 @@
 <template>
-    <div class="edit-view">
-        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small"
-                 style="max-width: 500px;">
-            <el-form-item prop="orderId" label="订单ID">
-                <el-input  v-model="formData.orderId"></el-input>
-            </el-form-item>
-            <!--<el-form-item prop="reason" label="理由">
+  <div class="edit-view">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="80px"
+      label-position="right"
+      size="small"
+      style="max-width: 500px;"
+    >
+      <el-form-item prop="orderId" label="订单ID">
+        <el-input v-model="formData.orderId"></el-input>
+      </el-form-item>
+      <!--<el-form-item prop="reason" label="理由">
                 <el-select v-model="formData.reason" clearable filterable placeholder="请选择">
                     <el-option
                             v-for="item in reasonOptions"
@@ -14,135 +21,135 @@
                             :value="item.value">
                     </el-option>
                 </el-select>
-            </el-form-item>-->
-            <el-form-item prop="remark" label="备注">
-                <el-input v-model="formData.remark"></el-input>
-            </el-form-item>
-            <el-form-item prop="status" label="状态">
-                <el-select v-model="formData.status" clearable filterable placeholder="请选择">
-                    <el-option
-                            v-for="item in statusOptions"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value">
-                    </el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item prop="applyTime" label="申请时间">
-                <el-date-picker
-                        v-model="formData.applyTime"
-                        type="datetime"
-                        value-format="yyyy-MM-dd HH:mm:ss"
-                        placeholder="选择日期时间">
-                </el-date-picker>
-            </el-form-item>
-            <el-form-item prop="auditTime" label="审核时间">
-                <el-date-picker
-                        v-model="formData.auditTime"
-                        type="datetime"
-                        value-format="yyyy-MM-dd HH:mm:ss"
-                        placeholder="选择日期时间">
-                </el-date-picker>
-            </el-form-item>
-            <el-form-item prop="refundTime" label="退款时间">
-                <el-date-picker
-                        v-model="formData.refundTime"
-                        type="datetime"
-                        value-format="yyyy-MM-dd HH:mm:ss"
-                        placeholder="选择日期时间">
-                </el-date-picker>
-            </el-form-item>
-            <el-form-item prop="refundId" label="退款单号">
-                <el-input v-model="formData.refundId"></el-input>
-            </el-form-item>
-            <el-form-item>
-                <el-button @click="onSave" :loading="saving"
-                           type="primary">保存
-                </el-button>
-                <el-button @click="onDelete" :loading="saving"
-                           type="danger" v-if="formData.id">删除
-                </el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+      </el-form-item>-->
+      <el-form-item prop="remark" label="备注">
+        <el-input v-model="formData.remark"></el-input>
+      </el-form-item>
+      <el-form-item prop="status" label="状态">
+        <el-select v-model="formData.status" clearable filterable placeholder="请选择">
+          <el-option
+            v-for="item in statusOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="applyTime" label="申请时间">
+        <el-date-picker
+          v-model="formData.applyTime"
+          type="datetime"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="选择日期时间"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item prop="auditTime" label="审核时间">
+        <el-date-picker
+          v-model="formData.auditTime"
+          type="datetime"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="选择日期时间"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item prop="refundTime" label="退款时间">
+        <el-date-picker
+          v-model="formData.refundTime"
+          type="datetime"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="选择日期时间"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item prop="refundId" label="退款单号">
+        <el-input v-model="formData.refundId"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+        <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除</el-button>
+        <el-button @click="$router.go(-1)">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script>
-    export default {
-        name: 'OrderRefundApplyEdit',
-        created() {
-            if (this.$route.query.id) {
-                this.$http
-                    .get('orderRefundApply/get/' + this.$route.query.id)
-                    .then(res => {
-                        this.formData = res;
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    });
-            }
-        },
-        data() {
-            return {
-                saving: false,
-                formData: {},
-                rules: {},
-                statusOptions: [
-                    {"label": "待处理", "value": "PENDING"},
-                    /*{"label": "退款中","value": "REFUNDING"},*/
-                    {"label": "成功", "value": "SUCCESS"},
-                    {"label": "失败", "value": "DENY"}],
-                /*reasonOptions: [
+export default {
+  name: "OrderRefundApplyEdit",
+  created() {
+    if (this.$route.query.id) {
+      this.$http
+        .get("orderRefundApply/get/" + this.$route.query.id)
+        .then(res => {
+          this.formData = res;
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    }
+  },
+  data() {
+    return {
+      saving: false,
+      formData: {},
+      rules: {},
+      statusOptions: [
+        { label: "待处理", value: "PENDING" },
+        /*{"label": "退款中","value": "REFUNDING"},*/
+        { label: "成功", value: "SUCCESS" },
+        { label: "失败", value: "DENY" }
+      ]
+      /*reasonOptions: [
                     {"label": "未按约定时间发货", "value": "SHIP_ON_TIME"},
                     {"label": "多拍/错拍商品", "value": "MISTAKE"},
                     {"label": "暂时不想买了", "value": "WANT_TO_BUY"},
                     {"label": "其他", "value": "OTHER"}
                 ],*/
-            }
-        },
-        methods: {
-            onSave() {
-                this.$refs.form.validate((valid) => {
-                    if (valid) {
-                        this.submit();
-                    } else {
-                        return false;
-                    }
-                });
-            },
-            submit() {
-                let data = {...this.formData};
-
-                this.saving = true;
-                this.$http
-                    .post('/orderRefundApply/add', data, {body: 'json'})
-                    .then(res => {
-                        this.saving = false;
-                        this.$message.success('成功');
-                        this.$router.go(-1);
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.saving = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            onDelete() {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/orderRefundApply/del/${this.formData.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.$router.go(-1);
-                }).catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                })
-            },
+    };
+  },
+  methods: {
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
         }
+      });
+    },
+    submit() {
+      let data = { ...this.formData };
+
+      this.saving = true;
+      this.$http
+        .post("/orderRefundApply/add", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/orderRefundApply/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/OrderRefundApplyList.vue

@@ -1,65 +1,73 @@
 <template>
-    <div class="list-view">
-        <div class="filters-container">
-            <el-input placeholder="输入关键字" v-model="search" clearable
-                      class="filter-item"></el-input>
-            <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
-            <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加</el-button>
-            <!--            <el-button @click="download" type="primary" icon="el-icon-download"
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加</el-button>
+      <!--            <el-button @click="download" type="primary" icon="el-icon-download"
                                    :loading="downloading" class="filter-item">导出EXCEL
-                        </el-button>-->
-            <el-select v-model="status" class="filter-item" placeholder="筛选状态" clearable filterable
-                       @change="getData">
-                <el-option v-for="item in statusOptions" :label="item.label" :value="item.value" :key="item.value"/>
-            </el-select>
-        </div>
-        <el-table :data="tableData" row-key="id" ref="table"
-                  header-row-class-name="table-header-row"
-                  header-cell-class-name="table-header-cell"
-                  row-class-name="table-row" cell-class-name="table-cell"
-                  :height="tableHeight">
-            <el-table-column v-if="multipleMode" align="center" type="selection"
-                             width="50">
-            </el-table-column>
-            <el-table-column prop="id" label="ID" width="100">
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort"
-                                     @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="orderForm.num" label="订单号"></el-table-column>
-            <el-table-column prop="remark" label="备注"></el-table-column>
-            <!--<el-table-column prop="reason" label="理由" :formatter="reasonFormatter">
-            </el-table-column>-->
-            <el-table-column prop="status" label="状态"
-                             :formatter="statusFormatter"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="applyTime" label="申请时间" :formatter="datetimeFormatter">
-                <!--<template slot="header" slot-scope="{column}">
+      </el-button>-->
+      <el-select
+        v-model="status"
+        class="filter-item"
+        placeholder="筛选状态"
+        clearable
+        filterable
+        @change="getData"
+      >
+        <el-option
+          v-for="item in statusOptions"
+          :label="item.label"
+          :value="item.value"
+          :key="item.value"
+        />
+      </el-select>
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column prop="id" label="ID" width="100">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="orderForm.num" label="订单号"></el-table-column>
+      <el-table-column prop="remark" label="备注"></el-table-column>
+      <!--<el-table-column prop="reason" label="理由" :formatter="reasonFormatter">
+      </el-table-column>-->
+      <el-table-column prop="status" label="状态" :formatter="statusFormatter">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="applyTime" label="申请时间" :formatter="datetimeFormatter">
+        <!--<template slot="header" slot-scope="{column}">
                     <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
                     </sortable-header>
-                </template>-->
-            </el-table-column>
-            <el-table-column prop="auditTime" label="审核时间" :formatter="datetimeFormatter">
-                <!--<template slot="header" slot-scope="{column}">
+        </template>-->
+      </el-table-column>
+      <el-table-column prop="auditTime" label="审核时间" :formatter="datetimeFormatter">
+        <!--<template slot="header" slot-scope="{column}">
                     <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
                     </sortable-header>
-                </template>-->
-            </el-table-column>
-            <el-table-column prop="refundTime" label="退款时间" :formatter="datetimeFormatter">
-                <!--<template slot="header" slot-scope="{column}">
+        </template>-->
+      </el-table-column>
+      <el-table-column prop="refundTime" label="退款时间" :formatter="datetimeFormatter">
+        <!--<template slot="header" slot-scope="{column}">
                     <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
                     </sortable-header>
-                </template>-->
-            </el-table-column>
-            <el-table-column prop="refundId" label="退款单号"></el-table-column>
-            <!--            <el-table-column
+        </template>-->
+      </el-table-column>
+      <el-table-column prop="refundId" label="退款单号"></el-table-column>
+      <!--            <el-table-column
                                 label="操作"
                                 align="center"
                                 fixed="right"
@@ -68,205 +76,208 @@
                                 <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
                                 <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
                             </template>
-                        </el-table-column>-->
-            <el-table-column label="操作" align="center" fixed="right" min-width="150">
-                <template slot-scope="{ row }">
-                    <el-button
-                            v-if="row.status === 'PENDING'"
-                            :loading="row.loading"
-                            @click="audit(row, true)"
-                            type="primary"
-                            size="mini"
-                            plain
-                    >通过
-                    </el-button>
-                    <el-button
-                            v-if="row.status === 'PENDING'"
-                            @click="audit(row, false)"
-                            type="danger"
-                            size="mini"
-                            plain
-                    >拒绝
-                    </el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper">
-                <el-button v-if="!multipleMode"
-                           @click="toggleMultipleMode(true)">批量编辑
-                </el-button>
-                <el-button-group v-else>
-                    <el-button @click="operation1">批量操作1</el-button>
-                    <el-button @click="operation2">批量操作2</el-button>
-                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
-                </el-button-group>
-            </div>
-            <el-pagination background @size-change="onSizeChange"
-                           @current-change="onCurrentChange" :current-page="page"
-                           :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalElements">
-            </el-pagination>
-        </div>
-
+      </el-table-column>-->
+      <el-table-column label="操作" align="center" fixed="right" min-width="150">
+        <template slot-scope="{ row }">
+          <el-button
+            v-if="row.status === 'PENDING'"
+            :loading="row.loading"
+            @click="audit(row, true)"
+            type="primary"
+            size="mini"
+            plain
+          >通过</el-button>
+          <el-button
+            v-if="row.status === 'PENDING'"
+            @click="audit(row, false)"
+            type="danger"
+            size="mini"
+            plain
+          >拒绝</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
     </div>
+  </div>
 </template>
 <script>
-    import {mapState} from "vuex";
-    import pageableTable from "@/mixins/pageableTable";
+import { mapState } from "vuex";
+import pageableTable from "@/mixins/pageableTable";
 
-    export default {
-        name: 'OrderRefundApplyList',
-        mixins: [pageableTable],
-        created() {
-            this.getData();
-        },
-        data() {
-            return {
-                multipleMode: false,
-                search: "",
-                url: "/orderRefundApply/all",
-                downloading: false,
-                statusOptions: [
-                    {"label": "待处理", "value": "PENDING"},
-                    {"label": "退款中", "value": "REFUNDING"},
-                    {"label": "成功", "value": "SUCCESS"},
-                    {"label": "失败", "value": "DENY"},
-                    {"label": "取消退款", "value": "CANCEL"}],
-                /*reasonOptions: [
+export default {
+  name: "OrderRefundApplyList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/orderRefundApply/all",
+      downloading: false,
+      statusOptions: [
+        { label: "待处理", value: "PENDING" },
+        { label: "退款中", value: "REFUNDING" },
+        { label: "成功", value: "SUCCESS" },
+        { label: "失败", value: "DENY" },
+        { label: "取消退款", value: "CANCEL" }
+      ],
+      /*reasonOptions: [
                     {"label": "未按约定时间发货", "value": "SHIP_ON_TIME"},
                     {"label": "多拍/错拍商品", "value": "MISTAKE"},
                     {"label": "暂时不想买了", "value": "WANT_TO_BUY"},
                     {"label": "其他", "value": "OTHER"}
                 ],*/
-                status: ''
-            }
-        },
-        computed: {
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
-        },
-        methods: {
-            /*reasonFormatter(row, column, cellValue, index) {
+      status: ""
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    /*reasonFormatter(row, column, cellValue, index) {
                 let selectedOption = this.reasonOptions.find(i => i.value === cellValue);
                 if (selectedOption) {
                     return selectedOption.label;
                 }
                 return '';
             },*/
-            statusFormatter(row, column, cellValue, index) {
-                let selectedOption = this.statusOptions.find(i => i.value === cellValue);
-                if (selectedOption) {
-                    return selectedOption.label;
-                }
-                return '';
-            },
-            beforeGetData() {
-                /*if (this.search) {
+    statusFormatter(row, column, cellValue, index) {
+      let selectedOption = this.statusOptions.find(i => i.value === cellValue);
+      if (selectedOption) {
+        return selectedOption.label;
+      }
+      return "";
+    },
+    beforeGetData() {
+      /*if (this.search) {
                     return {search: this.search};
                 }*/
-                return {
-                    search: this.search,
-                    query: {
-                        status: this.status
-                    },
-                    sort: "applyTime,desc"
-                };
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            addRow() {
-                this.$router.push({
-                    path: "/orderRefundApplyEdit",
-                    query: {
-                        ...this.$route.query
-                    }
-                });
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: "/orderRefundApplyEdit",
-                    query: {
-                        id: row.id
-                    }
-                });
-            },
-            download() {
-                this.downloading = true;
-                this.$axios
-                    .get("/orderRefundApply/excel", {
-                        responseType: "blob",
-                        params: {size: 10000}
-                    })
-                    .then(res => {
-                        console.log(res);
-                        this.downloading = false;
-                        const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
-                        const link = document.createElement("a");
-                        link.href = downloadUrl;
-                        link.setAttribute(
-                            "download",
-                            res.headers["content-disposition"].split("filename=")[1]
-                        );
-                        document.body.appendChild(link);
-                        link.click();
-                        link.remove();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.downloading = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            deleteRow(row) {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/orderRefundApply/del/${row.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.getData();
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
-                    } else {
-                        this.$message.error('删除失败');
-                    }
-                })
-            },
-            audit(row, consent) {
-                this.$set(row, 'loading', true);
-                this.$http
-                    .get('/orderRefundApply/audit', {
-                        id: row.id,
-                        consent: consent
-                    })
-                    .then(res => {
-                        this.$set(row, 'loading', false);
-                        this.$message.success('OK');
-                        this.getData();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.$set(row, 'loading', false);
-                        this.$message.error(e.error);
-                    });
-            }
+      return {
+        search: this.search,
+        query: {
+          status: this.status
+        },
+        sort: "applyTime,desc"
+      };
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addRow() {
+      this.$router.push({
+        path: "/orderRefundApplyEdit",
+        query: {
+          ...this.$route.query
+        }
+      });
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/orderRefundApplyEdit",
+        query: {
+          id: row.id
         }
+      });
+    },
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/orderRefundApply/excel", {
+          responseType: "blob",
+          params: { size: 10000 }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    deleteRow(row) {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/orderRefundApply/del/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("删除取消");
+          } else {
+            this.$message.error("删除失败");
+          }
+        });
+    },
+    audit(row, consent) {
+      this.$set(row, "loading", true);
+      this.$http
+        .get("/orderRefundApply/audit", {
+          id: row.id,
+          consent: consent
+        })
+        .then(res => {
+          this.$set(row, "loading", false);
+          this.$message.success("OK");
+          this.getData();
+        })
+        .catch(e => {
+          console.log(e);
+          this.$set(row, "loading", false);
+          this.$message.error(e.error);
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/PointEdit.vue

@@ -1,105 +1,114 @@
 <template>
-    <div class="edit-view">
-        <el-form :model="formData" :rules="rules" ref="form" label-width="65px" label-position="right" size="small"
-                 style="max-width: 500px;">
-                <el-form-item prop="userId" label="userId">
-                            <el-input-number type="number" v-model="formData.userId"></el-input-number>
-                </el-form-item>
-                <el-form-item prop="type" label="类型">
-                            <el-select v-model="formData.type" clearable filterable  placeholder="请选择">
-                                <el-option
-                                        v-for="item in typeOptions"
-                                        :key="item.value"
-                                        :label="item.label"
-                                        :value="item.value">
-                                </el-option>
-                            </el-select>
-                </el-form-item>
-                <el-form-item prop="integral" label="积分">
-                            <el-input-number type="number" v-model="formData.integral"></el-input-number>
-                </el-form-item>
-                <el-form-item prop="remark" label="备注">
-                            <el-input v-model="formData.remark"></el-input>
-                </el-form-item>
-            <el-form-item>
-                <el-button @click="onSave" :loading="saving"
-                           type="primary">保存</el-button>
-                <el-button @click="onDelete" :loading="saving"
-                           type="danger" v-if="formData.id">删除
-                </el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+  <div class="edit-view">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="65px"
+      label-position="right"
+      size="small"
+      style="max-width: 500px;"
+    >
+      <el-form-item prop="userId" label="userId">
+        <el-input-number type="number" v-model="formData.userId"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="type" label="类型">
+        <el-select v-model="formData.type" clearable filterable placeholder="请选择">
+          <el-option
+            v-for="item in typeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="integral" label="积分">
+        <el-input-number type="number" v-model="formData.integral"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="remark" label="备注">
+        <el-input v-model="formData.remark"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+        <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除</el-button>
+        <el-button @click="$router.go(-1)">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script>
-    export default {
-        name: 'PointEdit',
-        created() {
-            if (this.$route.query.id) {
-                this.$http
-                    .get('point/get/'+this.$route.query.id)
-                    .then(res => {
-                        this.formData = res;
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    });
-            }
-        },
-        data() {
-            return {
-                saving: false,
-                formData: {
-                },
-                rules: {
-                },
-                            typeOptions:[{"label":"收入","value":"INCOME"},{"label":"支出","value":"EXPEND"},{"label":"退款收回","value":"REFUND"}],
-            }
-        },
-        methods: {
-            onSave() {
-                this.$refs.form.validate((valid) => {
-                    if (valid) {
-                        this.submit();
-                    } else {
-                        return false;
-                    }
-                });
-            },
-            submit() {
-                let data = {...this.formData};
-
-                this.saving = true;
-                this.$http
-                    .post('/point/save', data, {body: 'json'})
-                    .then(res => {
-                        this.saving = false;
-                        this.$message.success('成功');
-                        this.$router.go(-1);
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.saving = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            onDelete() {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/point/del/${this.formData.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.$router.go(-1);
-                }).catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                })
-            },
+export default {
+  name: "PointEdit",
+  created() {
+    if (this.$route.query.id) {
+      this.$http
+        .get("point/get/" + this.$route.query.id)
+        .then(res => {
+          this.formData = res;
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    }
+  },
+  data() {
+    return {
+      saving: false,
+      formData: {},
+      rules: {},
+      typeOptions: [
+        { label: "收入", value: "INCOME" },
+        { label: "支出", value: "EXPEND" },
+        { label: "退款收回", value: "REFUND" }
+      ]
+    };
+  },
+  methods: {
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
         }
+      });
+    },
+    submit() {
+      let data = { ...this.formData };
+
+      this.saving = true;
+      this.$http
+        .post("/point/save", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/point/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/PointList.vue

@@ -1,204 +1,200 @@
 <template>
-    <div  class="list-view">
-        <div class="filters-container">
-            <el-input placeholder="输入关键字" v-model="search" clearable
-                      class="filter-item"></el-input>
-            <el-button @click="getData" type="primary" icon="el-icon-search"
-                       class="filter-item">搜索
-            </el-button>
-            <el-button @click="addRow" type="primary" icon="el-icon-plus"
-                       class="filter-item">添加
-            </el-button>
-            <el-button @click="download" type="primary" icon="el-icon-download"
-                       :loading="downloading" class="filter-item">导出EXCEL
-            </el-button>
-        </div>
-        <el-table :data="tableData" row-key="id" ref="table"
-                  header-row-class-name="table-header-row"
-                  header-cell-class-name="table-header-cell"
-                  row-class-name="table-row" cell-class-name="table-cell"
-                  :height="tableHeight">
-            <el-table-column v-if="multipleMode" align="center" type="selection"
-                             width="50">
-            </el-table-column>
-            <el-table-column prop="id" label="ID" width="100">
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort"
-                                     @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-                                <el-table-column prop="userId" label="userId"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="type" label="类型"
-                            :formatter="typeFormatter"
-                        >
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="integral" label="积分"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="remark" label="备注"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-            <el-table-column
-                    label="操作"
-                    align="center"
-                    fixed="right"
-                    min-width="150">
-                <template slot-scope="{row}">
-                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
-                    <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper">
-                <el-button v-if="!multipleMode"
-                           @click="toggleMultipleMode(true)">批量编辑</el-button>
-                <el-button-group v-else>
-                    <el-button @click="operation1">批量操作1</el-button>
-                    <el-button @click="operation2">批量操作2</el-button>
-                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
-                </el-button-group>
-            </div>
-            <el-pagination background @size-change="onSizeChange"
-                           @current-change="onCurrentChange" :current-page="page"
-                           :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalElements">
-            </el-pagination>
-        </div>
-
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加</el-button>
+      <el-button
+        @click="download"
+        type="primary"
+        icon="el-icon-download"
+        :loading="downloading"
+        class="filter-item"
+      >导出EXCEL</el-button>
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column prop="id" label="ID" width="100">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="userId" label="userId">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="type" label="类型" :formatter="typeFormatter">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="integral" label="积分">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="remark" label="备注">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" fixed="right" min-width="150">
+        <template slot-scope="{row}">
+          <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+          <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
     </div>
+  </div>
 </template>
 <script>
-    import { mapState } from "vuex";
-    import pageableTable from "@/mixins/pageableTable";
+import { mapState } from "vuex";
+import pageableTable from "@/mixins/pageableTable";
 
-    export default {
-        name: 'PointList',
-        mixins: [pageableTable],
-        created() {
-            this.getData();
-        },
-        data() {
-            return {
-                multipleMode: false,
-                search: "",
-                url: "/point/all",
-                downloading: false,
-                        typeOptions:[{"label":"收入","value":"INCOME"},{"label":"支出","value":"EXPEND"},{"label":"退款收回","value":"REFUND"}],
-            }
-        },
-        computed: {
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
-        },
-        methods: {
-                    typeFormatter(row, column, cellValue, index) {
-                        let selectedOption = this.typeOptions.find(i => i.value === cellValue);
-                        if (selectedOption) {
-                            return selectedOption.label;
-                        }
-                        return '';
-                    },
-            beforeGetData() {
-                if (this.search) {
-                    return { search: this.search };
-                }
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            addRow() {
-                this.$router.push({
-                    path: "/pointEdit",
-                    query: {
-                    ...this.$route.query
-                    }
-                });
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: "/pointEdit",
-                    query: {
-                    id: row.id
-                    }
-                });
-            },
-            download() {
-                this.downloading = true;
-                this.$axios
-                    .get("/point/excel", { 
-                        responseType: "blob",
-                        params: { size: 10000 }
-                    })
-                    .then(res => {
-                        console.log(res);
-                        this.downloading = false;
-                        const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
-                        const link = document.createElement("a");
-                        link.href = downloadUrl;
-                        link.setAttribute(
-                            "download",
-                            res.headers["content-disposition"].split("filename=")[1]
-                        );
-                        document.body.appendChild(link);
-                        link.click();
-                        link.remove();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.downloading = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            deleteRow(row) {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/point/del/${row.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.getData();
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
-                    } else {
-                        this.$message.error('删除失败');
-                    }
-                })
-            },
+export default {
+  name: "PointList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/point/all",
+      downloading: false,
+      typeOptions: [
+        { label: "收入", value: "INCOME" },
+        { label: "支出", value: "EXPEND" },
+        { label: "退款收回", value: "REFUND" }
+      ]
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    typeFormatter(row, column, cellValue, index) {
+      let selectedOption = this.typeOptions.find(i => i.value === cellValue);
+      if (selectedOption) {
+        return selectedOption.label;
+      }
+      return "";
+    },
+    beforeGetData() {
+      if (this.search) {
+        return { search: this.search };
+      }
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addRow() {
+      this.$router.push({
+        path: "/pointEdit",
+        query: {
+          ...this.$route.query
+        }
+      });
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/pointEdit",
+        query: {
+          id: row.id
         }
+      });
+    },
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/point/excel", {
+          responseType: "blob",
+          params: { size: 10000 }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    deleteRow(row) {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/point/del/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("删除取消");
+          } else {
+            this.$message.error("删除失败");
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/SetEdit.vue

@@ -1,196 +1,192 @@
 <template>
-    <div class="edit-view">
-        <el-tabs type="border-card" class="my-tabs" v-model="active">
-            <el-tab-pane label="商品信息" name="first">
-                <SetEdit @next="goNext" />
-            </el-tab-pane>
-            <el-tab-pane label="详情页面" :disabled="!id" name="second">
-                <GoodsInformationEdit
-                    ref="goodsInfo"
-                    :goodsId="id"
-                    @next="goNext"
-                />
-            </el-tab-pane>
-            <el-tab-pane label="套餐子商品" :disabled="!id" name="third">
-                <SetGoodsTable ref="setList" />
-            </el-tab-pane>
-        </el-tabs>
-    </div>
+  <div class="edit-view">
+    <el-tabs type="border-card" class="my-tabs" v-model="active">
+      <el-tab-pane label="商品信息" name="first">
+        <SetEdit @next="goNext" />
+      </el-tab-pane>
+      <el-tab-pane label="详情页面" :disabled="!id" name="second">
+        <GoodsInformationEdit ref="goodsInfo" :goodsId="id" @next="goNext" />
+      </el-tab-pane>
+      <el-tab-pane label="套餐子商品" :disabled="!id" name="third">
+        <SetGoodsTable ref="setList" />
+      </el-tab-pane>
+    </el-tabs>
+  </div>
 </template>
 <script>
-import SetEdit from '../components/SetEdit';
-import GoodsInformationEdit from '../components/GoodsInformationEdit';
-import SetGoodsTable from '../components/SetGoodsTable';
+import SetEdit from "../components/SetEdit";
+import GoodsInformationEdit from "../components/GoodsInformationEdit";
+import SetGoodsTable from "../components/SetGoodsTable";
 export default {
-    name: 'SetEditMain',
-    data() {
-        return {
-            id: 0,
-            inputVisible: false,
-            inputValue: '',
-            saving: false,
-            dynamicTags: ['标签一', '标签二', '标签三'],
-            formData: {
-                icon: [],
-                specs: [],
-                ruleData: [],
-                categories: []
-            },
-            specs: [],
-            goodsTypeOption: [
-                { label: '普通商品', value: 'NORMAL' },
-                { label: '面膜商品（购买后为会员）', value: 'VIP' }
-            ],
-            showSubGoodsList: false,
-            categories: [],
-            active: 'first'
-        };
+  name: "SetEditMain",
+  data() {
+    return {
+      id: 0,
+      inputVisible: false,
+      inputValue: "",
+      saving: false,
+      dynamicTags: ["标签一", "标签二", "标签三"],
+      formData: {
+        icon: [],
+        specs: [],
+        ruleData: [],
+        categories: []
+      },
+      specs: [],
+      goodsTypeOption: [
+        { label: "普通商品", value: "NORMAL" },
+        { label: "面膜商品（购买后为会员）", value: "VIP" }
+      ],
+      showSubGoodsList: false,
+      categories: [],
+      active: "first"
+    };
+  },
+  created() {
+    if (this.$route.query.id) {
+      this.id = this.$route.query.id;
+    }
+  },
+  watch: {
+    id() {
+      if (this.id) {
+        this.$refs.goodsInfo.getInfo(this.id);
+        this.$refs.setList.getList(this.id);
+      }
     },
-    created() {
-        if (this.$route.query.id) {
-            this.id = this.$route.query.id;
-        }
+    $route() {
+      console.log(this.$route);
+      if (this.$route.query.id) {
+        this.id = this.$route.query.id;
+      }
+    }
+  },
+  methods: {
+    goNext(page) {
+      this.active = page;
     },
-    watch: {
-        id() {
-            if (this.id) {
-                this.$refs.goodsInfo.getInfo(this.id);
-                this.$refs.setList.getList(this.id);
-            }
-        },
-        $route() {
-            console.log(this.$route);
-            if (this.$route.query.id) {
-                this.id = this.$route.query.id;
-            }
-        }
+    deleteSpec(item) {
+      this.formData.specs.splice(this.formData.specs.indexOf(item), 1);
+    },
+    handleClose(item, tag) {
+      item.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
     },
-    methods: {
-        goNext(page) {
-            this.active = page;
-        },
-        deleteSpec(item) {
-            this.formData.specs.splice(this.formData.specs.indexOf(item), 1);
-        },
-        handleClose(item, tag) {
-            item.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
-        },
-
-        addRule(item) {
-            item.dynamicTags.push(item.inputValue);
-            item.inputValue = '';
-        },
 
-        addSpec() {
-            const newOne = {
-                tagTitle: '请输入规格标题,不超过五个字,例:选择尺码',
-                dynamicTags: []
-            };
-            this.formData.specs.push(newOne);
-        },
-        toGoodsList() {
-            this.showSubGoodsList = true;
-        },
-        onSave() {
-            this.$refs.form.validate(valid => {
-                if (valid) {
-                    this.submit();
-                } else {
-                    return false;
-                }
-            });
-        },
-        submit() {
-            let data = { ...this.formData };
-            data.icon = data.icon.join(',');
-            console.log(data.icon);
+    addRule(item) {
+      item.dynamicTags.push(item.inputValue);
+      item.inputValue = "";
+    },
 
-            this.saving = true;
-            this.$http
-                .post('/goods/save', data, { body: 'json' })
-                .then(res => {
-                    this.saving = false;
-                    this.$message.success('成功');
-                    this.$router.go(-1);
-                })
-                .catch(e => {
-                    console.log(e);
-                    this.saving = false;
-                    this.$message.error(e.error);
-                });
-        },
-        onDelete() {
-            this.$alert('删除将无法恢复，确认要删除么？', '警告', {
-                type: 'error'
-            })
-                .then(() => {
-                    return this.$http.post(`/goods/del/${this.formData.id}`);
-                })
-                .then(() => {
-                    this.$message.success('删除成功');
-                    this.$router.go(-1);
-                })
-                .catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                });
-        }
+    addSpec() {
+      const newOne = {
+        tagTitle: "请输入规格标题,不超过五个字,例:选择尺码",
+        dynamicTags: []
+      };
+      this.formData.specs.push(newOne);
+    },
+    toGoodsList() {
+      this.showSubGoodsList = true;
     },
-    filters: {
-        numFilter(value) {
-            let realVal = '';
-            if (!isNaN(value) && value !== '') {
-                // 截取当前数据到小数点后两位
-                realVal = parseFloat(value).toFixed(2);
-            } else {
-                realVal = '--';
-            }
-            return realVal;
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
         }
+      });
     },
-    components: {
-        SetEdit,
-        GoodsInformationEdit,
-        SetGoodsTable
+    submit() {
+      let data = { ...this.formData };
+      data.icon = data.icon.join(",");
+      console.log(data.icon);
+
+      this.saving = true;
+      this.$http
+        .post("/goods/save", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+        type: "error"
+      })
+        .then(() => {
+          return this.$http.post(`/goods/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
+    }
+  },
+  filters: {
+    numFilter(value) {
+      let realVal = "";
+      if (!isNaN(value) && value !== "") {
+        // 截取当前数据到小数点后两位
+        realVal = parseFloat(value).toFixed(2);
+      } else {
+        realVal = "--";
+      }
+      return realVal;
     }
+  },
+  components: {
+    SetEdit,
+    GoodsInformationEdit,
+    SetGoodsTable
+  }
 };
 </script>
 <style lang="less" scoped>
 .el-tag + .el-tag {
-    margin-left: 10px;
+  margin-left: 10px;
 }
 
 .button-new-tag {
-    margin-left: 10px;
-    height: 32px;
-    line-height: 30px;
-    padding-top: 0;
-    padding-bottom: 0;
+  margin-left: 10px;
+  height: 32px;
+  line-height: 30px;
+  padding-top: 0;
+  padding-bottom: 0;
 }
 
 .input-new-tag {
-    width: 90px;
-    margin-left: 10px;
-    vertical-align: bottom;
+  width: 90px;
+  margin-left: 10px;
+  vertical-align: bottom;
 }
 
 .edit-view,
 .el-tabs {
-    height: 100%;
+  height: 100%;
 }
 .el-tabs {
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 .el-tab-pane {
-    flex-grow: 1;
-    overflow: auto;
+  flex-grow: 1;
+  overflow: auto;
 }
 
 .save-btn {
-    padding: 40px;
+  padding: 40px;
 }
 </style>

src/main/vue/src/views/SetGoodsEdit.vue

@@ -1,93 +1,99 @@
 <template>
-    <div class="edit-view">
-        <el-form :model="formData" :rules="rules" ref="form" label-width="65px" label-position="right" size="small"
-                 style="max-width: 500px;">
-            <el-form-item prop="goodsId" label="商品id">
-                <el-input-number type="number" v-model="formData.goodsId"></el-input-number>
-            </el-form-item>
-            <el-form-item prop="setId" label="套餐id">
-                <el-input-number type="number" v-model="formData.setId"></el-input-number>
-            </el-form-item>
-            <el-form-item prop="deadLine" label="期限">
-                <el-input v-model="formData.deadLine"></el-input>
-            </el-form-item>
-            <el-form-item>
-                <el-button @click="onSave" :loading="saving"
-                           type="primary">保存
-                </el-button>
-                <el-button @click="onDelete" :loading="saving"
-                           type="danger" v-if="formData.id">删除
-                </el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+  <div class="edit-view">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="65px"
+      label-position="right"
+      size="small"
+      style="max-width: 500px;"
+    >
+      <el-form-item prop="goodsId" label="商品id">
+        <el-input-number type="number" v-model="formData.goodsId"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="setId" label="套餐id">
+        <el-input-number type="number" v-model="formData.setId"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="deadLine" label="期限">
+        <el-input v-model="formData.deadLine"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+        <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除</el-button>
+        <el-button @click="$router.go(-1)">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script>
-    export default {
-        name: 'SetGoodsEdit',
-        created() {
-            if (this.$route.query.id) {
-                this.$http
-                    .get('setGoods/get/' + this.$route.query.id)
-                    .then(res => {
-                        this.formData = res;
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    });
-            }
-        },
-        data() {
-            return {
-                saving: false,
-                formData: {},
-                rules: {},
-            }
-        },
-        methods: {
-            onSave() {
-                this.$refs.form.validate((valid) => {
-                    if (valid) {
-                        this.submit();
-                    } else {
-                        return false;
-                    }
-                });
-            },
-            submit() {
-                let data = {...this.formData};
-
-                this.saving = true;
-                this.$http
-                    .post('/setGoods/save', data, {body: 'json'})
-                    .then(res => {
-                        this.saving = false;
-                        this.$message.success('成功');
-                        this.$router.go(-1);
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.saving = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            onDelete() {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/setGoods/del/${this.formData.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.$router.go(-1);
-                }).catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                })
-            },
+export default {
+  name: "SetGoodsEdit",
+  created() {
+    if (this.$route.query.id) {
+      this.$http
+        .get("setGoods/get/" + this.$route.query.id)
+        .then(res => {
+          this.formData = res;
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    }
+  },
+  data() {
+    return {
+      saving: false,
+      formData: {},
+      rules: {}
+    };
+  },
+  methods: {
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
         }
+      });
+    },
+    submit() {
+      let data = { ...this.formData };
+
+      this.saving = true;
+      this.$http
+        .post("/setGoods/save", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/setGoods/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/SetGoodsList.vue

@@ -1,188 +1,179 @@
 <template>
-    <div  class="list-view">
-        <div class="filters-container">
-            <el-input placeholder="输入关键字" v-model="search" clearable
-                      class="filter-item"></el-input>
-            <el-button @click="getData" type="primary" icon="el-icon-search"
-                       class="filter-item">搜索
-            </el-button>
-            <el-button @click="addRow" type="primary" icon="el-icon-plus"
-                       class="filter-item">添加
-            </el-button>
-<!--            <el-button @click="download" type="primary" icon="el-icon-download"
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加</el-button>
+      <!--            <el-button @click="download" type="primary" icon="el-icon-download"
                        :loading="downloading" class="filter-item">导出EXCEL
-            </el-button>-->
-        </div>
-        <el-table :data="tableData" row-key="id" ref="table"
-                  header-row-class-name="table-header-row"
-                  header-cell-class-name="table-header-cell"
-                  row-class-name="table-row" cell-class-name="table-cell"
-                  :height="tableHeight">
-            <el-table-column v-if="multipleMode" align="center" type="selection"
-                             width="50">
-            </el-table-column>
-            <el-table-column prop="id" label="ID" width="100">
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort"
-                                     @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-                                <el-table-column prop="goodsId" label="商品id"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="setId" label="套餐id"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="deadLine" label="期限"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-            <el-table-column
-                    label="操作"
-                    align="center"
-                    fixed="right"
-                    min-width="150">
-                <template slot-scope="{row}">
-                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
-                    <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper">
-                <el-button v-if="!multipleMode"
-                           @click="toggleMultipleMode(true)">批量编辑</el-button>
-                <el-button-group v-else>
-                    <el-button @click="operation1">批量操作1</el-button>
-                    <el-button @click="operation2">批量操作2</el-button>
-                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
-                </el-button-group>
-            </div>
-            <el-pagination background @size-change="onSizeChange"
-                           @current-change="onCurrentChange" :current-page="page"
-                           :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalElements">
-            </el-pagination>
-        </div>
-
+      </el-button>-->
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column prop="id" label="ID" width="100">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="goodsId" label="商品id">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="setId" label="套餐id">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="deadLine" label="期限">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" fixed="right" min-width="150">
+        <template slot-scope="{row}">
+          <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+          <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
     </div>
+  </div>
 </template>
 <script>
-    import { mapState } from "vuex";
-    import pageableTable from "@/mixins/pageableTable";
+import { mapState } from "vuex";
+import pageableTable from "@/mixins/pageableTable";
 
-    export default {
-        name: 'SetGoodsList',
-        mixins: [pageableTable],
-        created() {
-            this.getData();
-        },
-        data() {
-            return {
-                multipleMode: false,
-                search: "",
-                url: "/setGoods/all",
-                downloading: false,
-            }
-        },
-        computed: {
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
-        },
-        methods: {
-            beforeGetData() {
-                if (this.search) {
-                    return { search: this.search };
-                }
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            addRow() {
-                this.$router.push({
-                    path: "/setGoodsEdit",
-                    query: {
-                    ...this.$route.query
-                    }
-                });
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: "/setGoodsEdit",
-                    query: {
-                    id: row.id
-                    }
-                });
-            },
-            download() {
-                this.downloading = true;
-                this.$axios
-                    .get("/setGoods/excel", { 
-                        responseType: "blob",
-                        params: { size: 10000 }
-                    })
-                    .then(res => {
-                        console.log(res);
-                        this.downloading = false;
-                        const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
-                        const link = document.createElement("a");
-                        link.href = downloadUrl;
-                        link.setAttribute(
-                            "download",
-                            res.headers["content-disposition"].split("filename=")[1]
-                        );
-                        document.body.appendChild(link);
-                        link.click();
-                        link.remove();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.downloading = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            deleteRow(row) {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/setGoods/del/${row.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.getData();
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
-                    } else {
-                        this.$message.error('删除失败');
-                    }
-                })
-            },
+export default {
+  name: "SetGoodsList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/setGoods/all",
+      downloading: false
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    beforeGetData() {
+      if (this.search) {
+        return { search: this.search };
+      }
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addRow() {
+      this.$router.push({
+        path: "/setGoodsEdit",
+        query: {
+          ...this.$route.query
+        }
+      });
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/setGoodsEdit",
+        query: {
+          id: row.id
         }
+      });
+    },
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/setGoods/excel", {
+          responseType: "blob",
+          params: { size: 10000 }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    deleteRow(row) {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/setGoods/del/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("删除取消");
+          } else {
+            this.$message.error("删除失败");
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/SetList.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="list-view">
-        <div class="filters-container">
-            <!--            <el-input
+  <div class="list-view">
+    <div class="filters-container">
+      <!--            <el-input
                                 placeholder="输入关键字"
                                 v-model="search"
                                 clearable
@@ -13,152 +13,102 @@
                                 icon="el-icon-search"
                                 class="filter-item"
                         >搜索
-                        </el-button>-->
-            <!--            <el-button
+      </el-button>-->
+      <!--            <el-button
                                 @click="addRow"
                                 type="primary"
                                 icon="el-icon-plus"
                                 class="filter-item"
                         >添加
-                        </el-button>-->
-            <el-button
-                    @click="addSet"
-                    type="primary"
-                    icon="el-icon-plus"
-                    class="filter-item"
-            >套餐
-            </el-button>
-            <!--            <el-button
+      </el-button>-->
+      <el-button @click="addSet" type="primary" icon="el-icon-plus" class="filter-item">套餐</el-button>
+      <!--            <el-button
                             @click="download"
                             type="primary"
                             icon="el-icon-download"
                             :loading="downloading"
                             class="filter-item"
                             >导出EXCEL
-                        </el-button>-->
-        </div>
-        <el-table
-                :data="tableData"
-                row-key="id"
-                ref="table"
-                header-row-class-name="table-header-row"
-                header-cell-class-name="table-header-cell"
-                row-class-name="table-row"
-                cell-class-name="table-cell"
-                :height="tableHeight"
-        >
-            <el-table-column
-                    v-if="multipleMode"
-                    align="center"
-                    type="selection"
-                    width="50"
-            >
-            </el-table-column>
-            <el-table-column prop="id" label="ID" width="100">
-                <template slot="header" slot-scope="{ column }">
-                    <sortable-header
-                            :column="column"
-                            :current-sort="sort"
-                            @changeSort="changeSort"
-                    >
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column label="图标" min-width="90">
-                <template slot-scope="{ row }">
-                    <el-image
-                            style="width: 30px; height: 30px"
-                            :src="row.icon"
-                            fit="cover"
-                            :preview-src-list="row.images"
-                    ></el-image>
-                </template>
-            </el-table-column>
-            <el-table-column prop="tags" label="标签"></el-table-column>
-            <el-table-column prop="vipPrice" label="价格">
-            </el-table-column>
-            <el-table-column prop="inventory" label="库存">
-                <template slot="header" slot-scope="{ column }">
-                    <sortable-header
-                            :column="column"
-                            :current-sort="sort"
-                            @changeSort="changeSort"
-                    >
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="total" label="总计">
-                <template slot="header" slot-scope="{ column }">
-                    <sortable-header
-                            :column="column"
-                            :current-sort="sort"
-                            @changeSort="changeSort"
-                    >
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="salesVolume" label="销量">
-                <template slot="header" slot-scope="{ column }">
-                    <sortable-header
-                            :column="column"
-                            :current-sort="sort"
-                            @changeSort="changeSort"
-                    >
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <!-- <el-table-column prop="disabled" label="是否可用">
-             </el-table-column>-->
-            <el-table-column prop="name" label="商品名" min-width="120px"></el-table-column>
-            <el-table-column prop="types" label="套餐类型" min-width="120px"
-                             :formatter="goodsTypeFormatter"></el-table-column>
-            <el-table-column
-                    label="操作"
-                    align="center"
-                    fixed="right"
-                    min-width="280"
-            >
-                <template slot-scope="{ row }">
-                    <el-button @click="showGoods(row)" type="warning" size="mini" plain>查看</el-button>
-                    <!--<el-button
+      </el-button>-->
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column prop="id" label="ID" width="100">
+        <template slot="header" slot-scope="{ column }">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column label="图标" min-width="90">
+        <template slot-scope="{ row }">
+          <el-image
+            style="width: 30px; height: 30px"
+            :src="row.icon"
+            fit="cover"
+            :preview-src-list="row.images"
+          ></el-image>
+        </template>
+      </el-table-column>
+      <el-table-column prop="tags" label="标签"></el-table-column>
+      <el-table-column prop="vipPrice" label="价格"></el-table-column>
+      <el-table-column prop="inventory" label="库存">
+        <template slot="header" slot-scope="{ column }">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="total" label="总计">
+        <template slot="header" slot-scope="{ column }">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="salesVolume" label="销量">
+        <template slot="header" slot-scope="{ column }">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column prop="disabled" label="是否可用">
+      </el-table-column>-->
+      <el-table-column prop="name" label="商品名" min-width="120px"></el-table-column>
+      <el-table-column prop="types" label="套餐类型" min-width="120px" :formatter="goodsTypeFormatter"></el-table-column>
+      <el-table-column label="操作" align="center" fixed="right" min-width="280">
+        <template slot-scope="{ row }">
+          <el-button @click="showGoods(row)" type="warning" size="mini" plain>查看</el-button>
+          <!--<el-button
                             @click="editGoodsInformation(row)"
                             type="primary"
                             size="mini"
                             plain
                     >详情
                     </el-button
-                    >-->
-                    <el-button
-                            @click="editRow(row)"
-                            type="primary"
-                            size="mini"
-                            plain
-                    >编辑
-                    </el-button
-                    >
-                    <el-button
-                            @click="deleteRow(row)"
-                            type="danger"
-                            size="mini"
-                            plain
-                            v-if="row.disabled===0"
-                    >下架
-                    </el-button
-                    >
-                    <el-button
-                            @click="uploadRow(row)"
-                            size="mini"
-                            type="success"
-                            plain
-                            v-if="row.disabled===1"
-                    >恢复
-                    </el-button
-                    >
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination-wrapper">
-            <!--<div class="multiple-mode-wrapper">
+          >-->
+          <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+          <el-button
+            @click="deleteRow(row)"
+            type="danger"
+            size="mini"
+            plain
+            v-if="row.disabled===0"
+          >下架</el-button>
+          <el-button
+            @click="uploadRow(row)"
+            size="mini"
+            type="success"
+            plain
+            v-if="row.disabled===1"
+          >恢复</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-wrapper">
+      <!--<div class="multiple-mode-wrapper">
                 <el-button
                         v-if="!multipleMode"
                         @click="toggleMultipleMode(true)"
@@ -173,225 +123,217 @@
                     </el-button
                     >
                 </el-button-group>
-            </div>-->
-            <el-pagination
-                    background
-                    @size-change="onSizeChange"
-                    @current-change="onCurrentChange"
-                    :current-page="page"
-                    :page-sizes="[10, 20, 30, 40, 50]"
-                    :page-size="pageSize"
-                    layout="total, sizes, prev, pager, next, jumper"
-                    :total="totalElements"
-            >
-            </el-pagination>
-        </div>
-
-        <el-dialog
-                title="商品列表"
-                center
-                :visible.sync="dislogTable"
-        >
-            <el-table :data="setGoods" ref="table">
-                <el-table-column prop="name" label="商品名" min-width="200"></el-table-column>
-                <el-table-column prop="icon" label="图标" min-width="100">
-                    <template slot-scope="{ row }">
-                        <el-image
-                                style="width: 30px; height: 30px"
-                                :src="picList(row.icon)"
-                                fit="cover"
-                        ></el-image>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="vipPrice" label="会员价">
-                </el-table-column>
-                <el-table-column prop="price" label="原价">
-                </el-table-column>
-                <el-table-column label="操作" align="center" fixed="right">
-                    <template slot-scope="{ row }">
-                        <el-button @click="removeRow(row)" type="warning" plain>移除</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-        </el-dialog>
-
+      </div>-->
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
     </div>
+
+    <el-dialog title="商品列表" center :visible.sync="dislogTable">
+      <el-table :data="setGoods" ref="table">
+        <el-table-column prop="name" label="商品名" min-width="200"></el-table-column>
+        <el-table-column prop="icon" label="图标" min-width="100">
+          <template slot-scope="{ row }">
+            <el-image style="width: 30px; height: 30px" :src="picList(row.icon)" fit="cover"></el-image>
+          </template>
+        </el-table-column>
+        <el-table-column prop="vipPrice" label="会员价"></el-table-column>
+        <el-table-column prop="price" label="原价"></el-table-column>
+        <el-table-column label="操作" align="center" fixed="right">
+          <template slot-scope="{ row }">
+            <el-button @click="removeRow(row)" type="warning" plain>移除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+  </div>
 </template>
 <script>
-    import {mapState} from "vuex";
-    import pageableTable from "@/mixins/pageableTable";
+import { mapState } from "vuex";
+import pageableTable from "@/mixins/pageableTable";
 
-    export default {
-        name: "GoodsList",
-        mixins: [pageableTable],
-        created() {
-            this.getData();
-        },
-        data() {
-            return {
-                multipleMode: false,
-                search: "",
-                url: "/goods/set",
-                downloading: false,
-                goodsTypeOption: [
-                    {label: '面膜包年', value: 1},
-                    {label: '洗护包年', value: 2}
-                ],
-                dislogTable: false,
-                setGoods: [],
-                setId: '',
-            };
-        },
-        computed: {
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
-        },
-        methods: {
-            picList(row) {
-                if (row) {
-                    return row.split(",")[0];
-                } else {
-                    return "";
-                }
-            },
-            goodsTypeFormatter(row, column, cellValue, index) {
-                let selectedOption = this.goodsTypeOption.find(i => i.value === cellValue);
-                if (selectedOption) {
-                    return selectedOption.label;
-                }
-                return '';
-            },
-            checkRes(res) {
-                res.forEach(item => {
-                    item.images = item.icon.split(",");
-                    if (item.images.length > 0) {
-                        item.icon = item.images[0];
-                    } else {
-                        item.icon = "";
-                    }
-                });
+export default {
+  name: "GoodsList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/goods/set",
+      downloading: false,
+      goodsTypeOption: [
+        { label: "面膜包年", value: 1 },
+        { label: "洗护包年", value: 2 }
+      ],
+      dislogTable: false,
+      setGoods: [],
+      setId: ""
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    picList(row) {
+      if (row) {
+        return row.split(",")[0];
+      } else {
+        return "";
+      }
+    },
+    goodsTypeFormatter(row, column, cellValue, index) {
+      let selectedOption = this.goodsTypeOption.find(
+        i => i.value === cellValue
+      );
+      if (selectedOption) {
+        return selectedOption.label;
+      }
+      return "";
+    },
+    checkRes(res) {
+      res.forEach(item => {
+        item.images = item.icon.split(",");
+        if (item.images.length > 0) {
+          item.icon = item.images[0];
+        } else {
+          item.icon = "";
+        }
+      });
 
-                return res;
-            },
-            beforeGetData() {
-                if (this.search) {
-                    return {searchKey: this.search};
-                }
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            addSet() {
-                this.$router.push({
-                    path: "/SetEdit",
-                    query: {
-                        ...this.$route.query
-                    }
-                });
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: "/setEdit",
-                    query: {
-                        id: row.id
-                    }
-                });
-            },
-            operation1() {
-                this.$notify({
-                    title: "提示",
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message("操作2");
-            },
-            uploadRow(row) {
-                this.$alert("恢复后该商品将重新可以购买，确定恢复吗？", "提示", {
-                    type: "error"
-                })
-                    .then(() => {
-                        return this.$http.post(`/goods/disableGood/${row.id}`);
-                    })
-                    .then(() => {
-                        this.$message.success("恢复成功");
-                        this.getData();
-                    })
-                    .catch(action => {
-                        if (action === "cancel") {
-                            this.$message.info("恢复取消");
-                        } else {
-                            this.$message.error("恢复失败");
-                        }
-                    });
-            },
-            deleteRow(row) {
-                this.$alert("下架后该商品不会展示在小程序端，确定下架吗？", "提示", {
-                    type: "error"
-                })
-                    .then(() => {
-                        return this.$http.post(`/goods/disableGood/${row.id}`);
-                    })
-                    .then(() => {
-                        this.$message.success("下架成功");
-                        this.getData();
-                    })
-                    .catch(action => {
-                        if (action === "cancel") {
-                            this.$message.info("下架取消");
-                        } else {
-                            this.$message.error("下架失败");
-                        }
-                    });
-            },
-            editGoodsInformation(row) {
-                this.$router.push({
-                    path: "/goodsInformationEdit",
-                    query: {
-                        goodsId: row.id
-                    }
-                });
-            },
-            showGoods(row) {
-                this.dislogTable = true;
-                this.setId = row.id;
-                this.$http
-                    .get('/goods/setGoods', {
-                        setId: row.id,
-                    })
-                    .then(res => {
-                        this.setGoods = res;
-                        //console.log(this.coupons)
-                    })
-                    .catch(e => {
-                        console.log(e);
-                    });
-            },
-            removeRow(row) {
-                this.$alert('确认移除么？', '提示', {type: 'primary'}).then(() => {
-                    return this.$http.get('/setGoods/remove', {
-                            setId: this.setId,
-                            goodsId: row.id
-                        },
-                    )
-                }).then(() => {
-                    this.$message.success('移除成功');
-                    this.getData();
-                    history.go(0);
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('移除取消');
-                    } else {
-                        this.$message.error('移除失败');
-                    }
-                })
-            },
+      return res;
+    },
+    beforeGetData() {
+      if (this.search) {
+        return { searchKey: this.search };
+      }
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addSet() {
+      this.$router.push({
+        path: "/SetEdit",
+        query: {
+          ...this.$route.query
         }
-    };
+      });
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/setEdit",
+        query: {
+          id: row.id
+        }
+      });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    uploadRow(row) {
+      this.$alert("恢复后该商品将重新可以购买，确定恢复吗？", "提示", {
+        type: "error"
+      })
+        .then(() => {
+          return this.$http.post(`/goods/disableGood/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("恢复成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("恢复取消");
+          } else {
+            this.$message.error("恢复失败");
+          }
+        });
+    },
+    deleteRow(row) {
+      this.$alert("下架后该商品不会展示在小程序端，确定下架吗？", "提示", {
+        type: "error"
+      })
+        .then(() => {
+          return this.$http.post(`/goods/disableGood/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("下架成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("下架取消");
+          } else {
+            this.$message.error("下架失败");
+          }
+        });
+    },
+    editGoodsInformation(row) {
+      this.$router.push({
+        path: "/goodsInformationEdit",
+        query: {
+          goodsId: row.id
+        }
+      });
+    },
+    showGoods(row) {
+      this.dislogTable = true;
+      this.setId = row.id;
+      this.$http
+        .get("/goods/setGoods", {
+          setId: row.id
+        })
+        .then(res => {
+          this.setGoods = res;
+          //console.log(this.coupons)
+        })
+        .catch(e => {
+          console.log(e);
+        });
+    },
+    removeRow(row) {
+      this.$alert("确认移除么？", "提示", { type: "primary" })
+        .then(() => {
+          return this.$http.get("/setGoods/remove", {
+            setId: this.setId,
+            goodsId: row.id
+          });
+        })
+        .then(() => {
+          this.$message.success("移除成功");
+          this.getData();
+          history.go(0);
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("移除取消");
+          } else {
+            this.$message.error("移除失败");
+          }
+        });
+    }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/SysConfigEdit.vue

@@ -1,138 +1,116 @@
 <template>
-    <div class="edit-view">
-        <el-form
-            :model="formData"
-            :rules="rules"
-            ref="form"
-            label-width="98px"
-            label-position="right"
-            size="small"
-            style="max-width: 500px;"
-        >
-            <el-form-item prop="name" label="名称">
-                <el-input v-model="formData.name" disabled></el-input>
-            </el-form-item>
-            <el-form-item prop="description" label="描述">
-                <el-input v-model="formData.description"></el-input>
-            </el-form-item>
-            <el-form-item prop="value" label="值">
-                <el-input
-                    v-if="valueType === 'String'"
-                    v-model="formData.value"
-                ></el-input>
-                <el-input-number
-                    v-else-if="valueType === 'Number'"
-                    v-model="formData.value"
-                    :min="0"
-                ></el-input-number>
-                <rich-text
-                    v-else
-                    :height="500"
-                    v-model="formData.value"
-                    :noImage="true"
-                ></rich-text>
-            </el-form-item>
-            <el-form-item>
-                <el-button @click="onSave" :loading="saving" type="primary"
-                    >保存</el-button
-                >
-                <el-button
-                    @click="onDelete"
-                    :loading="saving"
-                    type="danger"
-                    v-if="formData.id"
-                    >删除
-                </el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+  <div class="edit-view">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="98px"
+      label-position="right"
+      size="small"
+      style="max-width: 500px;"
+    >
+      <el-form-item prop="name" label="名称">
+        <el-input v-model="formData.name" disabled></el-input>
+      </el-form-item>
+      <el-form-item prop="description" label="描述">
+        <el-input v-model="formData.description"></el-input>
+      </el-form-item>
+      <el-form-item prop="value" label="值">
+        <el-input v-if="valueType === 'String'" v-model="formData.value"></el-input>
+        <el-input-number v-else-if="valueType === 'Number'" v-model="formData.value" :min="0"></el-input-number>
+        <rich-text v-else :height="500" v-model="formData.value" :noImage="true"></rich-text>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+        <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除</el-button>
+        <el-button @click="$router.go(-1)">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script>
 export default {
-    name: 'SysConfigEdit',
-    created() {
-        if (this.$route.query.id) {
-            this.$http
-                .get('sysConfig/get/' + this.$route.query.id)
-                .then(res => {
-                    this.formData = res;
-                })
-                .catch(e => {
-                    console.log(e);
-                    this.$message.error(e.error);
-                });
+  name: "SysConfigEdit",
+  created() {
+    if (this.$route.query.id) {
+      this.$http
+        .get("sysConfig/get/" + this.$route.query.id)
+        .then(res => {
+          this.formData = res;
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    }
+  },
+  data() {
+    return {
+      saving: false,
+      formData: {},
+      rules: {},
+      stringTypes: ["KEFU"],
+      NumTypes: ["DIST", "NUMBER_OF_BOXES", "BUY_DIS", "POSTAGE"]
+    };
+  },
+  computed: {
+    valueType() {
+      if (this.formData.name) {
+        if (this.stringTypes.indexOf(this.formData.name) !== -1) {
+          return "String";
+        } else if (this.NumTypes.indexOf(this.formData.name) !== -1) {
+          return "Number";
         }
-    },
-    data() {
-        return {
-            saving: false,
-            formData: {},
-            rules: {},
-            stringTypes: ['KEFU'],
-            NumTypes: ['DIST', 'NUMBER_OF_BOXES', 'BUY_DIS', 'POSTAGE']
-        };
-    },
-    computed: {
-        valueType() {
-            if (this.formData.name) {
-                if (this.stringTypes.indexOf(this.formData.name) !== -1) {
-                    return 'String';
-                } else if (this.NumTypes.indexOf(this.formData.name) !== -1) {
-                    return 'Number';
-                }
-            }
-            return '';
+      }
+      return "";
+    }
+  },
+  methods: {
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
         }
+      });
     },
-    methods: {
-        onSave() {
-            this.$refs.form.validate(valid => {
-                if (valid) {
-                    this.submit();
-                } else {
-                    return false;
-                }
-            });
-        },
-        submit() {
-            let data = { ...this.formData };
+    submit() {
+      let data = { ...this.formData };
 
-            this.saving = true;
-            this.$http
-                .post('/sysConfig/save', data, { body: 'json' })
-                .then(res => {
-                    this.saving = false;
-                    this.$message.success('成功');
-                    this.$router.go(-1);
-                })
-                .catch(e => {
-                    console.log(e);
-                    this.saving = false;
-                    this.$message.error(e.error);
-                });
-        },
-        onDelete() {
-            this.$alert('删除将无法恢复，确认要删除么？', '警告', {
-                type: 'error'
-            })
-                .then(() => {
-                    return this.$http.post(
-                        `/sysConfig/del/${this.formData.id}`
-                    );
-                })
-                .then(() => {
-                    this.$message.success('删除成功');
-                    this.$router.go(-1);
-                })
-                .catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                });
-        }
+      this.saving = true;
+      this.$http
+        .post("/sysConfig/save", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+        type: "error"
+      })
+        .then(() => {
+          return this.$http.post(`/sysConfig/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
     }
+  }
 };
 </script>
 <style lang="less" scoped></style>

src/main/vue/src/views/SysConfigList.vue

@@ -1,188 +1,183 @@
 <template>
-    <div  class="list-view">
-        <div class="filters-container">
-            <el-input placeholder="输入关键字" v-model="search" clearable
-                      class="filter-item"></el-input>
-            <el-button @click="getData" type="primary" icon="el-icon-search"
-                       class="filter-item">搜索
-            </el-button>
-<!--            <el-button @click="addRow" type="primary" icon="el-icon-plus"
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <!--            <el-button @click="addRow" type="primary" icon="el-icon-plus"
                        class="filter-item">添加
-            </el-button>-->
-<!--            <el-button @click="download" type="primary" icon="el-icon-download"
+      </el-button>-->
+      <!--            <el-button @click="download" type="primary" icon="el-icon-download"
                        :loading="downloading" class="filter-item">导出EXCEL
-            </el-button>-->
-        </div>
-        <el-table :data="tableData" row-key="id" ref="table"
-                  header-row-class-name="table-header-row"
-                  header-cell-class-name="table-header-cell"
-                  row-class-name="table-row" cell-class-name="table-cell"
-                  :height="tableHeight">
-            <el-table-column v-if="multipleMode" align="center" type="selection"
-                             width="50">
-            </el-table-column>
-<!--            <el-table-column prop="id" label="ID" width="100">
+      </el-button>-->
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <!--            <el-table-column prop="id" label="ID" width="100">
                 <template slot="header" slot-scope="{column}">
                     <sortable-header :column="column" :current-sort="sort"
                                      @changeSort="changeSort">
                     </sortable-header>
                 </template>
-            </el-table-column>-->
-                                <el-table-column prop="name" label="名称"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="description" label="描述"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="value" label="值"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-            <el-table-column
-                    label="操作"
-                    align="center"
-                    fixed="right"
-                    min-width="150">
-                <template slot-scope="{row}">
-                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
-                    <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper">
-                <el-button v-if="!multipleMode"
-                           @click="toggleMultipleMode(true)">批量编辑</el-button>
-                <el-button-group v-else>
-                    <el-button @click="operation1">批量操作1</el-button>
-                    <el-button @click="operation2">批量操作2</el-button>
-                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
-                </el-button-group>
-            </div>
-            <el-pagination background @size-change="onSizeChange"
-                           @current-change="onCurrentChange" :current-page="page"
-                           :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalElements">
-            </el-pagination>
-        </div>
-
+      </el-table-column>-->
+      <el-table-column prop="name" label="名称">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="description" label="描述">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="value" label="值">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" fixed="right" min-width="150">
+        <template slot-scope="{row}">
+          <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+          <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
     </div>
+  </div>
 </template>
 <script>
-    import { mapState } from "vuex";
-    import pageableTable from "@/mixins/pageableTable";
+import { mapState } from "vuex";
+import pageableTable from "@/mixins/pageableTable";
 
-    export default {
-        name: 'SysConfigList',
-        mixins: [pageableTable],
-        created() {
-            this.getData();
-        },
-        data() {
-            return {
-                multipleMode: false,
-                search: "",
-                url: "/sysConfig/all",
-                downloading: false,
-            }
-        },
-        computed: {
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
-        },
-        methods: {
-            beforeGetData() {
-                if (this.search) {
-                    return { search: this.search };
-                }
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            addRow() {
-                this.$router.push({
-                    path: "/sysConfigEdit",
-                    query: {
-                    ...this.$route.query
-                    }
-                });
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: "/sysConfigEdit",
-                    query: {
-                    id: row.id
-                    }
-                });
-            },
-            download() {
-                this.downloading = true;
-                this.$axios
-                    .get("/sysConfig/excel", { 
-                        responseType: "blob",
-                        params: { size: 10000 }
-                    })
-                    .then(res => {
-                        console.log(res);
-                        this.downloading = false;
-                        const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
-                        const link = document.createElement("a");
-                        link.href = downloadUrl;
-                        link.setAttribute(
-                            "download",
-                            res.headers["content-disposition"].split("filename=")[1]
-                        );
-                        document.body.appendChild(link);
-                        link.click();
-                        link.remove();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.downloading = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            deleteRow(row) {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/sysConfig/del/${row.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.getData();
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
-                    } else {
-                        this.$message.error('删除失败');
-                    }
-                })
-            },
+export default {
+  name: "SysConfigList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/sysConfig/all",
+      downloading: false
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    beforeGetData() {
+      if (this.search) {
+        return { search: this.search };
+      }
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addRow() {
+      this.$router.push({
+        path: "/sysConfigEdit",
+        query: {
+          ...this.$route.query
+        }
+      });
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/sysConfigEdit",
+        query: {
+          id: row.id
         }
+      });
+    },
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/sysConfig/excel", {
+          responseType: "blob",
+          params: { size: 10000 }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    deleteRow(row) {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/sysConfig/del/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("删除取消");
+          } else {
+            this.$message.error("删除失败");
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/UserSetEdit.vue

@@ -1,106 +1,111 @@
 <template>
-    <div class="edit-view">
-        <el-form :model="formData" :rules="rules" ref="form" label-width="94px" label-position="right" size="small"
-                 style="max-width: 500px;">
-                <el-form-item prop="orderNum" label="订单Num">
-                            <el-input v-model="formData.orderNum"></el-input>
-                </el-form-item>
-                <el-form-item prop="userId" label="用户id">
-                            <el-input-number type="number" v-model="formData.userId"></el-input-number>
-                </el-form-item>
-                <el-form-item prop="goodsId" label="套餐id">
-                            <el-input-number type="number" v-model="formData.goodsId"></el-input-number>
-                </el-form-item>
-                <el-form-item prop="unclaimedPieces" label="待领取数量">
-                            <el-input-number type="number" v-model="formData.unclaimedPieces"></el-input-number>
-                </el-form-item>
-                <el-form-item prop="availablePieces" label="可领取数量">
-                            <el-input-number type="number" v-model="formData.availablePieces"></el-input-number>
-                </el-form-item>
-                <el-form-item prop="takenPieces" label="未领取数量">
-                            <el-input-number type="number" v-model="formData.takenPieces"></el-input-number>
-                </el-form-item>
-                <el-form-item prop="isDisabled" label="是否可用">
-                            <el-input v-model="formData.isDisabled"></el-input>
-                </el-form-item>
-            <el-form-item>
-                <el-button @click="onSave" :loading="saving"
-                           type="primary">保存</el-button>
-                <el-button @click="onDelete" :loading="saving"
-                           type="danger" v-if="formData.id">删除
-                </el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+  <div class="edit-view">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="94px"
+      label-position="right"
+      size="small"
+      style="max-width: 500px;"
+    >
+      <el-form-item prop="orderNum" label="订单Num">
+        <el-input v-model="formData.orderNum"></el-input>
+      </el-form-item>
+      <el-form-item prop="userId" label="用户id">
+        <el-input-number type="number" v-model="formData.userId"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="goodsId" label="套餐id">
+        <el-input-number type="number" v-model="formData.goodsId"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="unclaimedPieces" label="待领取数量">
+        <el-input-number type="number" v-model="formData.unclaimedPieces"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="availablePieces" label="可领取数量">
+        <el-input-number type="number" v-model="formData.availablePieces"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="takenPieces" label="未领取数量">
+        <el-input-number type="number" v-model="formData.takenPieces"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="isDisabled" label="是否可用">
+        <el-input v-model="formData.isDisabled"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+        <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除</el-button>
+        <el-button @click="$router.go(-1)">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script>
-    export default {
-        name: 'UserSetEdit',
-        created() {
-            if (this.$route.query.id) {
-                this.$http
-                    .get('userSet/get/'+this.$route.query.id)
-                    .then(res => {
-                        this.formData = res;
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    });
-            }
-        },
-        data() {
-            return {
-                saving: false,
-                formData: {
-                },
-                rules: {
-                },
-            }
-        },
-        methods: {
-            onSave() {
-                this.$refs.form.validate((valid) => {
-                    if (valid) {
-                        this.submit();
-                    } else {
-                        return false;
-                    }
-                });
-            },
-            submit() {
-                let data = {...this.formData};
-
-                this.saving = true;
-                this.$http
-                    .post('/userSet/save', data, {body: 'json'})
-                    .then(res => {
-                        this.saving = false;
-                        this.$message.success('成功');
-                        this.$router.go(-1);
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.saving = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            onDelete() {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/userSet/del/${this.formData.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.$router.go(-1);
-                }).catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                })
-            },
+export default {
+  name: "UserSetEdit",
+  created() {
+    if (this.$route.query.id) {
+      this.$http
+        .get("userSet/get/" + this.$route.query.id)
+        .then(res => {
+          this.formData = res;
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    }
+  },
+  data() {
+    return {
+      saving: false,
+      formData: {},
+      rules: {}
+    };
+  },
+  methods: {
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
         }
+      });
+    },
+    submit() {
+      let data = { ...this.formData };
+
+      this.saving = true;
+      this.$http
+        .post("/userSet/save", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/userSet/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/UserSetList.vue

@@ -1,216 +1,199 @@
 <template>
-    <div  class="list-view">
-        <div class="filters-container">
-            <el-input placeholder="输入关键字" v-model="search" clearable
-                      class="filter-item"></el-input>
-            <el-button @click="getData" type="primary" icon="el-icon-search"
-                       class="filter-item">搜索
-            </el-button>
-            <el-button @click="addRow" type="primary" icon="el-icon-plus"
-                       class="filter-item">添加
-            </el-button>
-<!--            <el-button @click="download" type="primary" icon="el-icon-download"
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加</el-button>
+      <!--            <el-button @click="download" type="primary" icon="el-icon-download"
                        :loading="downloading" class="filter-item">导出EXCEL
-            </el-button>-->
-        </div>
-        <el-table :data="tableData" row-key="id" ref="table"
-                  header-row-class-name="table-header-row"
-                  header-cell-class-name="table-header-cell"
-                  row-class-name="table-row" cell-class-name="table-cell"
-                  :height="tableHeight">
-            <el-table-column v-if="multipleMode" align="center" type="selection"
-                             width="50">
-            </el-table-column>
-            <el-table-column prop="id" label="ID" width="100">
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort"
-                                     @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-                                <el-table-column prop="orderNum" label="订单Num"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="userId" label="用户id"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="goodsId" label="套餐id"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="unclaimedPieces" label="待领取数量"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="availablePieces" label="可领取数量"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="takenPieces" label="未领取数量"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-                    <el-table-column prop="isDisabled" label="是否可用"
->
-                        <template slot="header" slot-scope="{column}">
-                            <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                            </sortable-header>
-                        </template>
-                    </el-table-column>
-            <el-table-column
-                    label="操作"
-                    align="center"
-                    fixed="right"
-                    min-width="150">
-                <template slot-scope="{row}">
-                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
-                    <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper">
-                <el-button v-if="!multipleMode"
-                           @click="toggleMultipleMode(true)">批量编辑</el-button>
-                <el-button-group v-else>
-                    <el-button @click="operation1">批量操作1</el-button>
-                    <el-button @click="operation2">批量操作2</el-button>
-                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
-                </el-button-group>
-            </div>
-            <el-pagination background @size-change="onSizeChange"
-                           @current-change="onCurrentChange" :current-page="page"
-                           :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalElements">
-            </el-pagination>
-        </div>
-
+      </el-button>-->
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column prop="id" label="ID" width="100">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="orderNum" label="订单Num">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="userId" label="用户id">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="goodsId" label="套餐id">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="unclaimedPieces" label="待领取数量">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="availablePieces" label="可领取数量">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="takenPieces" label="未领取数量">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="isDisabled" label="是否可用">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" fixed="right" min-width="150">
+        <template slot-scope="{row}">
+          <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+          <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
     </div>
+  </div>
 </template>
 <script>
-    import { mapState } from "vuex";
-    import pageableTable from "@/mixins/pageableTable";
+import { mapState } from "vuex";
+import pageableTable from "@/mixins/pageableTable";
 
-    export default {
-        name: 'UserSetList',
-        mixins: [pageableTable],
-        created() {
-            this.getData();
-        },
-        data() {
-            return {
-                multipleMode: false,
-                search: "",
-                url: "/userSet/all",
-                downloading: false,
-            }
-        },
-        computed: {
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
-        },
-        methods: {
-            beforeGetData() {
-                if (this.search) {
-                    return { search: this.search };
-                }
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            addRow() {
-                this.$router.push({
-                    path: "/userSetEdit",
-                    query: {
-                    ...this.$route.query
-                    }
-                });
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: "/userSetEdit",
-                    query: {
-                    id: row.id
-                    }
-                });
-            },
-            download() {
-                this.downloading = true;
-                this.$axios
-                    .get("/userSet/excel", { 
-                        responseType: "blob",
-                        params: { size: 10000 }
-                    })
-                    .then(res => {
-                        console.log(res);
-                        this.downloading = false;
-                        const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
-                        const link = document.createElement("a");
-                        link.href = downloadUrl;
-                        link.setAttribute(
-                            "download",
-                            res.headers["content-disposition"].split("filename=")[1]
-                        );
-                        document.body.appendChild(link);
-                        link.click();
-                        link.remove();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.downloading = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            deleteRow(row) {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/userSet/del/${row.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.getData();
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
-                    } else {
-                        this.$message.error('删除失败');
-                    }
-                })
-            },
+export default {
+  name: "UserSetList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/userSet/all",
+      downloading: false
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    beforeGetData() {
+      if (this.search) {
+        return { search: this.search };
+      }
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addRow() {
+      this.$router.push({
+        path: "/userSetEdit",
+        query: {
+          ...this.$route.query
+        }
+      });
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/userSetEdit",
+        query: {
+          id: row.id
         }
+      });
+    },
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/userSet/excel", {
+          responseType: "blob",
+          params: { size: 10000 }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    deleteRow(row) {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/userSet/del/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("删除取消");
+          } else {
+            this.$message.error("删除失败");
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/VipFeeEdit.vue

@@ -1,130 +1,140 @@
 <template>
-    <div class="edit-view">
-        <el-form :model="formData" :rules="rules" ref="form" label-width="94px" label-position="right" size="small"
-                 style="max-width: 500px;">
-            <el-form-item prop="userId" label="用户ID">
-                <el-input-number type="number" v-model="formData.userId"></el-input-number>
-            </el-form-item>
-            <el-form-item prop="vipTypeName" label="费用类型">
-                <el-input v-model="formData.vipTypeName"></el-input>
-            </el-form-item>
-            <el-form-item prop="money" label="费用金额">
-                <el-input-number type="number" v-model="formData.money"></el-input-number>
-            </el-form-item>
-            <el-form-item prop="payMethod" label="支付方式">
-                <el-select v-model="formData.payMethod" clearable filterable placeholder="请选择">
-                    <el-option
-                            v-for="item in payMethodOptions"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value">
-                    </el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item prop="realMoney" label="实际扣费">
-                <el-input-number type="number" v-model="formData.realMoney"></el-input-number>
-            </el-form-item>
-            <el-form-item prop="settleTime" label="缴费时间">
-                <el-date-picker
-                        v-model="formData.settleTime"
-                        type="datetime"
-                        value-format="yyyy-MM-dd HH:mm:ss"
-                        placeholder="选择日期时间">
-                </el-date-picker>
-            </el-form-item>
-            <el-form-item prop="transactionId" label="第三方单号">
-                <el-input v-model="formData.transactionId"></el-input>
-            </el-form-item>
-            <el-form-item prop="openId" label="openId">
-                <el-input v-model="formData.openId"></el-input>
-            </el-form-item>
-            <el-form-item prop="remark" label="备注">
-                <el-input v-model="formData.remark"></el-input>
-            </el-form-item>
-            <el-form-item prop="enabled" label="有效">
-                <el-switch v-model="formData.enabled"></el-switch>
-            </el-form-item>
-            <el-form-item>
-                <el-button @click="onSave" :loading="saving"
-                           type="primary">保存
-                </el-button>
-                <el-button @click="onDelete" :loading="saving"
-                           type="danger" v-if="formData.id">删除
-                </el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+  <div class="edit-view">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="94px"
+      label-position="right"
+      size="small"
+      style="max-width: 500px;"
+    >
+      <el-form-item prop="userId" label="用户ID">
+        <el-input-number type="number" v-model="formData.userId"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="vipTypeName" label="费用类型">
+        <el-input v-model="formData.vipTypeName"></el-input>
+      </el-form-item>
+      <el-form-item prop="money" label="费用金额">
+        <el-input-number type="number" v-model="formData.money"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="payMethod" label="支付方式">
+        <el-select v-model="formData.payMethod" clearable filterable placeholder="请选择">
+          <el-option
+            v-for="item in payMethodOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="realMoney" label="实际扣费">
+        <el-input-number type="number" v-model="formData.realMoney"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="settleTime" label="缴费时间">
+        <el-date-picker
+          v-model="formData.settleTime"
+          type="datetime"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="选择日期时间"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item prop="transactionId" label="第三方单号">
+        <el-input v-model="formData.transactionId"></el-input>
+      </el-form-item>
+      <el-form-item prop="openId" label="openId">
+        <el-input v-model="formData.openId"></el-input>
+      </el-form-item>
+      <el-form-item prop="remark" label="备注">
+        <el-input v-model="formData.remark"></el-input>
+      </el-form-item>
+      <el-form-item prop="enabled" label="有效">
+        <el-switch v-model="formData.enabled"></el-switch>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+        <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除</el-button>
+        <el-button @click="$router.go(-1)">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script>
-    export default {
-        name: 'VipFeeEdit',
-        created() {
-            if (this.$route.query.id) {
-                this.$http
-                    .get('vipFee/get/' + this.$route.query.id)
-                    .then(res => {
-                        this.formData = res;
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    });
-            }
-        },
-        data() {
-            return {
-                saving: false,
-                formData: {},
-                rules: {},
-                payMethodOptions: [{"label": "微信", "value": "WEIXIN"}, {
-                    "label": "支付宝",
-                    "value": "ZHIFUBAO"
-                }, {"label": "余额", "value": "YUE"}],
-            }
+export default {
+  name: "VipFeeEdit",
+  created() {
+    if (this.$route.query.id) {
+      this.$http
+        .get("vipFee/get/" + this.$route.query.id)
+        .then(res => {
+          this.formData = res;
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    }
+  },
+  data() {
+    return {
+      saving: false,
+      formData: {},
+      rules: {},
+      payMethodOptions: [
+        { label: "微信", value: "WEIXIN" },
+        {
+          label: "支付宝",
+          value: "ZHIFUBAO"
         },
-        methods: {
-            onSave() {
-                this.$refs.form.validate((valid) => {
-                    if (valid) {
-                        this.submit();
-                    } else {
-                        return false;
-                    }
-                });
-            },
-            submit() {
-                let data = {...this.formData};
-
-                this.saving = true;
-                this.$http
-                    .post('/vipFee/save', data, {body: 'json'})
-                    .then(res => {
-                        this.saving = false;
-                        this.$message.success('成功');
-                        this.$router.go(-1);
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.saving = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            onDelete() {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/vipFee/del/${this.formData.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.$router.go(-1);
-                }).catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                })
-            },
+        { label: "余额", value: "YUE" }
+      ]
+    };
+  },
+  methods: {
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
         }
+      });
+    },
+    submit() {
+      let data = { ...this.formData };
+
+      this.saving = true;
+      this.$http
+        .post("/vipFee/save", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/vipFee/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/VipFeeList.vue

@@ -1,250 +1,230 @@
 <template>
-    <div class="list-view">
-        <div class="filters-container">
-            <el-input placeholder="输入关键字" v-model="search" clearable
-                      class="filter-item"></el-input>
-            <el-button @click="getData" type="primary" icon="el-icon-search"
-                       class="filter-item">搜索
-            </el-button>
-            <el-button @click="addRow" type="primary" icon="el-icon-plus"
-                       class="filter-item">添加
-            </el-button>
-<!--            <el-button @click="download" type="primary" icon="el-icon-download"
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加</el-button>
+      <!--            <el-button @click="download" type="primary" icon="el-icon-download"
                        :loading="downloading" class="filter-item">导出EXCEL
-            </el-button>-->
-        </div>
-        <el-table :data="tableData" row-key="id" ref="table"
-                  header-row-class-name="table-header-row"
-                  header-cell-class-name="table-header-cell"
-                  row-class-name="table-row" cell-class-name="table-cell"
-                  :height="tableHeight">
-            <el-table-column v-if="multipleMode" align="center" type="selection"
-                             width="50">
-            </el-table-column>
-            <el-table-column prop="id" label="ID" width="100">
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort"
-                                     @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="userId" label="用户ID"
-            >
-            </el-table-column>
-            <el-table-column prop="vipTypeName" label="费用类型"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="money" label="费用金额"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="payMethod" label="支付方式"
-                             :formatter="payMethodFormatter"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="realMoney" label="实际扣费"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="settleTime" label="缴费时间"
-                             :formatter="datetimeFormatter"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="transactionId" label="第三方单号"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="openId" label="openId"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="remark" label="备注"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="enabled" label="有效"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-                <template slot-scope="{row}">
-                    <el-tag :type="row.enabled?'':'info'">{{row.enabled}}</el-tag>
-                </template>
-            </el-table-column>
-            <el-table-column
-                    label="操作"
-                    align="center"
-                    fixed="right"
-                    min-width="150">
-                <template slot-scope="{row}">
-                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
-                    <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper">
-                <el-button v-if="!multipleMode"
-                           @click="toggleMultipleMode(true)">批量编辑
-                </el-button>
-                <el-button-group v-else>
-                    <el-button @click="operation1">批量操作1</el-button>
-                    <el-button @click="operation2">批量操作2</el-button>
-                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
-                </el-button-group>
-            </div>
-            <el-pagination background @size-change="onSizeChange"
-                           @current-change="onCurrentChange" :current-page="page"
-                           :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalElements">
-            </el-pagination>
-        </div>
-
+      </el-button>-->
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column prop="id" label="ID" width="100">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="userId" label="用户ID"></el-table-column>
+      <el-table-column prop="vipTypeName" label="费用类型">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="money" label="费用金额">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="payMethod" label="支付方式" :formatter="payMethodFormatter">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="realMoney" label="实际扣费">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="settleTime" label="缴费时间" :formatter="datetimeFormatter">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="transactionId" label="第三方单号">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="openId" label="openId">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="remark" label="备注">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="enabled" label="有效">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+        <template slot-scope="{row}">
+          <el-tag :type="row.enabled?'':'info'">{{row.enabled}}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" fixed="right" min-width="150">
+        <template slot-scope="{row}">
+          <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+          <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
     </div>
+  </div>
 </template>
 <script>
-    import {mapState} from "vuex";
-    import pageableTable from "@/mixins/pageableTable";
+import { mapState } from "vuex";
+import pageableTable from "@/mixins/pageableTable";
 
-    export default {
-        name: 'VipFeeList',
-        mixins: [pageableTable],
-        created() {
-            this.getData();
-        },
-        data() {
-            return {
-                multipleMode: false,
-                search: "",
-                url: "/vipFee/all",
-                downloading: false,
-                payMethodOptions: [{"label": "微信", "value": "WEIXIN"}, {
-                    "label": "支付宝",
-                    "value": "ZHIFUBAO"
-                }, {"label": "余额", "value": "YUE"}],
-            }
+export default {
+  name: "VipFeeList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/vipFee/all",
+      downloading: false,
+      payMethodOptions: [
+        { label: "微信", value: "WEIXIN" },
+        {
+          label: "支付宝",
+          value: "ZHIFUBAO"
         },
-        computed: {
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
-        },
-        methods: {
-            payMethodFormatter(row, column, cellValue, index) {
-                let selectedOption = this.payMethodOptions.find(i => i.value === cellValue);
-                if (selectedOption) {
-                    return selectedOption.label;
-                }
-                return '';
-            },
-            beforeGetData() {
-                if (this.search) {
-                    return {search: this.search};
-                }
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            addRow() {
-                this.$router.push({
-                    path: "/vipFeeEdit",
-                    query: {
-                        ...this.$route.query
-                    }
-                });
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: "/vipFeeEdit",
-                    query: {
-                        id: row.id
-                    }
-                });
-            },
-            download() {
-                this.downloading = true;
-                this.$axios
-                    .get("/vipFee/excel", {
-                        responseType: "blob",
-                        params: {size: 10000}
-                    })
-                    .then(res => {
-                        console.log(res);
-                        this.downloading = false;
-                        const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
-                        const link = document.createElement("a");
-                        link.href = downloadUrl;
-                        link.setAttribute(
-                            "download",
-                            res.headers["content-disposition"].split("filename=")[1]
-                        );
-                        document.body.appendChild(link);
-                        link.click();
-                        link.remove();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.downloading = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            deleteRow(row) {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/vipFee/del/${row.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.getData();
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
-                    } else {
-                        this.$message.error('删除失败');
-                    }
-                })
-            },
+        { label: "余额", value: "YUE" }
+      ]
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    payMethodFormatter(row, column, cellValue, index) {
+      let selectedOption = this.payMethodOptions.find(
+        i => i.value === cellValue
+      );
+      if (selectedOption) {
+        return selectedOption.label;
+      }
+      return "";
+    },
+    beforeGetData() {
+      if (this.search) {
+        return { search: this.search };
+      }
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addRow() {
+      this.$router.push({
+        path: "/vipFeeEdit",
+        query: {
+          ...this.$route.query
+        }
+      });
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/vipFeeEdit",
+        query: {
+          id: row.id
         }
+      });
+    },
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/vipFee/excel", {
+          responseType: "blob",
+          params: { size: 10000 }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    deleteRow(row) {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/vipFee/del/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("删除取消");
+          } else {
+            this.$message.error("删除失败");
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/VipIdentityEdit.vue

@@ -1,112 +1,117 @@
 <template>
-    <div class="edit-view">
-        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small"
-                 style="max-width: 500px;">
-<!--                <el-form-item prop="id" label="id">
+  <div class="edit-view">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="80px"
+      label-position="right"
+      size="small"
+      style="max-width: 500px;"
+    >
+      <!--                <el-form-item prop="id" label="id">
                             <el-input-number type="number" v-model="formData.id"></el-input-number>
-                </el-form-item>-->
-                <el-form-item prop="name" label="名称">
-                            <el-input v-model="formData.name"></el-input>
-                </el-form-item>
-                <el-form-item prop="distribution" label="会员分销">
-                            <el-input-number type="number" v-model="formData.distribution"></el-input-number>
-                </el-form-item>
-<!--                <el-form-item prop="secondDistribution" label="二级分销">
+      </el-form-item>-->
+      <el-form-item prop="name" label="名称">
+        <el-input v-model="formData.name"></el-input>
+      </el-form-item>
+      <el-form-item prop="distribution" label="会员分销">
+        <el-input-number type="number" v-model="formData.distribution"></el-input-number>
+      </el-form-item>
+      <!--                <el-form-item prop="secondDistribution" label="二级分销">
                             <el-input-number type="number" v-model="formData.secondDistribution"></el-input-number>
                 </el-form-item>
                 <el-form-item prop="thirdDistribution" label="三级分销">
                             <el-input-number type="number" v-model="formData.thirdDistribution"></el-input-number>
-                </el-form-item>-->
-<!--                <el-form-item prop="postage" label="邮费分销">
+      </el-form-item>-->
+      <!--                <el-form-item prop="postage" label="邮费分销">
                             <el-input-number type="number" v-model="formData.postage"></el-input-number>
-                </el-form-item>-->
-<!--                <el-form-item prop="secondPostage" label="二级邮费">
+      </el-form-item>-->
+      <!--                <el-form-item prop="secondPostage" label="二级邮费">
                             <el-input-number type="number" v-model="formData.secondPostage"></el-input-number>
                 </el-form-item>
                 <el-form-item prop="thirdPostage" label="三级邮费">
                             <el-input-number type="number" v-model="formData.thirdPostage"></el-input-number>
-                </el-form-item>-->
-                <el-form-item prop="fansNum" label="粉丝数量">
-                            <el-input-number type="number" v-model="formData.fansNum"></el-input-number>
-                </el-form-item>
-            <el-form-item>
-                <el-button @click="onSave" :loading="saving"
-                           type="primary">保存</el-button>
-                <el-button @click="onDelete" :loading="saving"
-                           type="danger" v-if="formData.id">删除
-                </el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+      </el-form-item>-->
+      <el-form-item prop="fansNum" label="粉丝数量">
+        <el-input-number type="number" v-model="formData.fansNum"></el-input-number>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+        <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除</el-button>
+        <el-button @click="$router.go(-1)">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script>
-    export default {
-        name: 'VipIdentityEdit',
-        created() {
-            if (this.$route.query.id) {
-                this.$http
-                    .get('vipIdentity/get/'+this.$route.query.id)
-                    .then(res => {
-                        this.formData = res;
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    });
-            }
-        },
-        data() {
-            return {
-                saving: false,
-                formData: {
-                },
-                rules: {
-                },
-            }
-        },
-        methods: {
-            onSave() {
-                this.$refs.form.validate((valid) => {
-                    if (valid) {
-                        this.submit();
-                    } else {
-                        return false;
-                    }
-                });
-            },
-            submit() {
-                let data = {...this.formData};
-
-                this.saving = true;
-                this.$http
-                    .post('/vipIdentity/save', data, {body: 'json'})
-                    .then(res => {
-                        this.saving = false;
-                        this.$message.success('成功');
-                        this.$router.go(-1);
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.saving = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            onDelete() {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/vipIdentity/del/${this.formData.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.$router.go(-1);
-                }).catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                })
-            },
+export default {
+  name: "VipIdentityEdit",
+  created() {
+    if (this.$route.query.id) {
+      this.$http
+        .get("vipIdentity/get/" + this.$route.query.id)
+        .then(res => {
+          this.formData = res;
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    }
+  },
+  data() {
+    return {
+      saving: false,
+      formData: {},
+      rules: {}
+    };
+  },
+  methods: {
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
         }
+      });
+    },
+    submit() {
+      let data = { ...this.formData };
+
+      this.saving = true;
+      this.$http
+        .post("/vipIdentity/save", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/vipIdentity/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/VipIdentityList.vue

@@ -1,48 +1,40 @@
 <template>
-    <div class="list-view">
-        <div class="filters-container">
-            <el-input placeholder="输入关键字" v-model="search" clearable
-                      class="filter-item"></el-input>
-            <el-button @click="getData" type="primary" icon="el-icon-search"
-                       class="filter-item">搜索
-            </el-button>
-            <el-button @click="addRow" type="primary" icon="el-icon-plus"
-                       class="filter-item">添加
-            </el-button>
-<!--            <el-button @click="download" type="primary" icon="el-icon-download"
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加</el-button>
+      <!--            <el-button @click="download" type="primary" icon="el-icon-download"
                        :loading="downloading" class="filter-item">导出EXCEL
-            </el-button>-->
-        </div>
-        <el-table :data="tableData" row-key="id" ref="table"
-                  header-row-class-name="table-header-row"
-                  header-cell-class-name="table-header-cell"
-                  row-class-name="table-row" cell-class-name="table-cell"
-                  :height="tableHeight">
-            <el-table-column v-if="multipleMode" align="center" type="selection"
-                             width="50">
-            </el-table-column>
-            <el-table-column prop="id" label="ID" width="100">
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort"
-                                     @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="name" label="名称"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="distribution" label="会员分销"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-<!--            <el-table-column prop="secondDistribution" label="二级分销"
+      </el-button>-->
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column prop="id" label="ID" width="100">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="name" label="名称">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="distribution" label="会员分销">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <!--            <el-table-column prop="secondDistribution" label="二级分销"
             >
                 <template slot="header" slot-scope="{column}">
                     <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
@@ -55,15 +47,15 @@
                     <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
                     </sortable-header>
                 </template>
-            </el-table-column>-->
-<!--            <el-table-column prop="postage" label="邮费分销"
+      </el-table-column>-->
+      <!--            <el-table-column prop="postage" label="邮费分销"
             >
                 <template slot="header" slot-scope="{column}">
                     <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
                     </sortable-header>
                 </template>
-            </el-table-column>-->
-<!--            <el-table-column prop="secondPostage" label="二级邮费"
+      </el-table-column>-->
+      <!--            <el-table-column prop="secondPostage" label="二级邮费"
             >
                 <template slot="header" slot-scope="{column}">
                     <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
@@ -76,149 +68,147 @@
                     <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
                     </sortable-header>
                 </template>
-            </el-table-column>-->
-            <el-table-column prop="fansNum" label="粉丝数量"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column
-                    label="操作"
-                    align="center"
-                    fixed="right"
-                    min-width="150">
-                <template slot-scope="{row}">
-                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
-                    <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper">
-                <el-button v-if="!multipleMode"
-                           @click="toggleMultipleMode(true)">批量编辑
-                </el-button>
-                <el-button-group v-else>
-                    <el-button @click="operation1">批量操作1</el-button>
-                    <el-button @click="operation2">批量操作2</el-button>
-                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
-                </el-button-group>
-            </div>
-            <el-pagination background @size-change="onSizeChange"
-                           @current-change="onCurrentChange" :current-page="page"
-                           :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalElements">
-            </el-pagination>
-        </div>
-
+      </el-table-column>-->
+      <el-table-column prop="fansNum" label="粉丝数量">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" fixed="right" min-width="150">
+        <template slot-scope="{row}">
+          <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+          <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
     </div>
+  </div>
 </template>
 <script>
-    import {mapState} from "vuex";
-    import pageableTable from "@/mixins/pageableTable";
+import { mapState } from "vuex";
+import pageableTable from "@/mixins/pageableTable";
 
-    export default {
-        name: 'VipIdentityList',
-        mixins: [pageableTable],
-        created() {
-            this.getData();
-        },
-        data() {
-            return {
-                multipleMode: false,
-                search: "",
-                url: "/vipIdentity/all",
-                downloading: false,
-            }
-        },
-        computed: {
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
-        },
-        methods: {
-            beforeGetData() {
-                if (this.search) {
-                    return {search: this.search};
-                }
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            addRow() {
-                this.$router.push({
-                    path: "/vipIdentityEdit",
-                    query: {
-                        ...this.$route.query
-                    }
-                });
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: "/vipIdentityEdit",
-                    query: {
-                        id: row.id
-                    }
-                });
-            },
-            download() {
-                this.downloading = true;
-                this.$axios
-                    .get("/vipIdentity/excel", {
-                        responseType: "blob",
-                        params: {size: 10000}
-                    })
-                    .then(res => {
-                        console.log(res);
-                        this.downloading = false;
-                        const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
-                        const link = document.createElement("a");
-                        link.href = downloadUrl;
-                        link.setAttribute(
-                            "download",
-                            res.headers["content-disposition"].split("filename=")[1]
-                        );
-                        document.body.appendChild(link);
-                        link.click();
-                        link.remove();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.downloading = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            deleteRow(row) {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/vipIdentity/del/${row.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.getData();
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
-                    } else {
-                        this.$message.error('删除失败');
-                    }
-                })
-            },
+export default {
+  name: "VipIdentityList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/vipIdentity/all",
+      downloading: false
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    beforeGetData() {
+      if (this.search) {
+        return { search: this.search };
+      }
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addRow() {
+      this.$router.push({
+        path: "/vipIdentityEdit",
+        query: {
+          ...this.$route.query
+        }
+      });
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/vipIdentityEdit",
+        query: {
+          id: row.id
         }
+      });
+    },
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/vipIdentity/excel", {
+          responseType: "blob",
+          params: { size: 10000 }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    deleteRow(row) {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/vipIdentity/del/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("删除取消");
+          } else {
+            this.$message.error("删除失败");
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/WithdrawalsEdit.vue

@@ -1,134 +1,146 @@
 <template>
-    <div class="edit-view">
-        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small"
-                 style="max-width: 500px;">
-            <el-form-item prop="userId" label="用户ID">
-                <el-input-number type="number" v-model="formData.userId"></el-input-number>
-            </el-form-item>
-            <el-form-item prop="amount" label="提现金额">
-                <el-input-number type="number" v-model="formData.amount"></el-input-number>
-            </el-form-item>
-            <el-form-item prop="balance" label="剩余金额">
-                <el-input-number type="number" v-model="formData.balance"></el-input-number>
-            </el-form-item>
-            <el-form-item prop="account" label="账号">
-                <el-input v-model="formData.account"></el-input>
-            </el-form-item>
-            <el-form-item prop="realName" label="真实姓名">
-                <el-input v-model="formData.realName"></el-input>
-            </el-form-item>
-            <el-form-item prop="withdrawTime" label="提现时间">
-                <el-date-picker
-                        v-model="formData.withdrawTime"
-                        type="datetime"
-                        value-format="yyyy-MM-dd HH:mm:ss"
-                        placeholder="选择日期时间">
-                </el-date-picker>
-            </el-form-item>
-            <el-form-item prop="payMethod" label="提现方式">
-                <el-select v-model="formData.payMethod" clearable filterable placeholder="请选择">
-                    <el-option
-                            v-for="item in payMethodOptions"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value">
-                    </el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item prop="status" label="提现状态">
-                <el-select v-model="formData.status" clearable filterable placeholder="请选择">
-                    <el-option
-                            v-for="item in statusOptions"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value">
-                    </el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item>
-                <el-button @click="onSave" :loading="saving"
-                           type="primary">保存
-                </el-button>
-                <el-button @click="onDelete" :loading="saving"
-                           type="danger" v-if="formData.id">删除
-                </el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+  <div class="edit-view">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="80px"
+      label-position="right"
+      size="small"
+      style="max-width: 500px;"
+    >
+      <el-form-item prop="userId" label="用户ID">
+        <el-input-number type="number" v-model="formData.userId"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="amount" label="提现金额">
+        <el-input-number type="number" v-model="formData.amount"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="balance" label="剩余金额">
+        <el-input-number type="number" v-model="formData.balance"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="account" label="账号">
+        <el-input v-model="formData.account"></el-input>
+      </el-form-item>
+      <el-form-item prop="realName" label="真实姓名">
+        <el-input v-model="formData.realName"></el-input>
+      </el-form-item>
+      <el-form-item prop="withdrawTime" label="提现时间">
+        <el-date-picker
+          v-model="formData.withdrawTime"
+          type="datetime"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="选择日期时间"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item prop="payMethod" label="提现方式">
+        <el-select v-model="formData.payMethod" clearable filterable placeholder="请选择">
+          <el-option
+            v-for="item in payMethodOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="status" label="提现状态">
+        <el-select v-model="formData.status" clearable filterable placeholder="请选择">
+          <el-option
+            v-for="item in statusOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+        <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除</el-button>
+        <el-button @click="$router.go(-1)">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script>
-    export default {
-        name: 'WithdrawalsRecordEdit',
-        created() {
-            if (this.$route.query.id) {
-                this.$http
-                    .get('withdrawalsRecord/get/' + this.$route.query.id)
-                    .then(res => {
-                        this.formData = res;
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    });
-            }
-        },
-        data() {
-            return {
-                saving: false,
-                formData: {},
-                rules: {},
-                payMethodOptions: [{"label": "微信", "value": "WEIXIN"}, {"label": "余额", "value": "YUE"}, {
-                    "label": "支付宝",
-                    "value": "ZHIFUBAO"
-                }],
-                statusOptions: [{"label": "待处理", "value": "PENDING"},
-                    // {"label": "成功", "value": "SUCCESS"},
-                    {"label": "失败", "value": "FAIL"}],
-            }
-        },
-        methods: {
-            onSave() {
-                this.$refs.form.validate((valid) => {
-                    if (valid) {
-                        this.submit();
-                    } else {
-                        return false;
-                    }
-                });
-            },
-            submit() {
-                let data = {...this.formData};
-
-                this.saving = true;
-                this.$http
-                    .post('/withdrawals/save', data, {body: 'json'})
-                    .then(res => {
-                        this.saving = false;
-                        this.$message.success('成功');
-                        this.$router.go(-1);
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.saving = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            onDelete() {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/withdrawals/del/${this.formData.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.$router.go(-1);
-                }).catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                })
-            },
+export default {
+  name: "WithdrawalsRecordEdit",
+  created() {
+    if (this.$route.query.id) {
+      this.$http
+        .get("withdrawalsRecord/get/" + this.$route.query.id)
+        .then(res => {
+          this.formData = res;
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    }
+  },
+  data() {
+    return {
+      saving: false,
+      formData: {},
+      rules: {},
+      payMethodOptions: [
+        { label: "微信", value: "WEIXIN" },
+        { label: "余额", value: "YUE" },
+        {
+          label: "支付宝",
+          value: "ZHIFUBAO"
         }
+      ],
+      statusOptions: [
+        { label: "待处理", value: "PENDING" },
+        // {"label": "成功", "value": "SUCCESS"},
+        { label: "失败", value: "FAIL" }
+      ]
+    };
+  },
+  methods: {
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
+        }
+      });
+    },
+    submit() {
+      let data = { ...this.formData };
+
+      this.saving = true;
+      this.$http
+        .post("/withdrawals/save", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/withdrawals/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/WithdrawalsList.vue

@@ -1,80 +1,72 @@
 <template>
-    <div class="list-view">
-        <div class="filters-container">
-            <el-input placeholder="输入真实姓名/账号" v-model="search" clearable
-                      class="filter-item"></el-input>
-            <el-button @click="getData" type="primary" icon="el-icon-search"
-                       class="filter-item">搜索
-            </el-button>
-            <el-button @click="addRow" type="primary" icon="el-icon-plus"
-                       class="filter-item">添加
-            </el-button>
-            <!--            <el-button @click="download" type="primary" icon="el-icon-download"
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入真实姓名/账号" v-model="search" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加</el-button>
+      <!--            <el-button @click="download" type="primary" icon="el-icon-download"
                                    :loading="downloading" class="filter-item">导出EXCEL
-                        </el-button>-->
-            <el-select v-model="status" class="filter-item" placeholder="筛选状态" clearable filterable
-                       @change="getData">
-                <el-option
-                        v-for="item in statusOptions"
-                        :label="item.label"
-                        :value="item.value"
-                        :key="item.value"
-                />
-            </el-select>
-        </div>
-        <el-table :data="tableData" row-key="id" ref="table"
-                  header-row-class-name="table-header-row"
-                  header-cell-class-name="table-header-cell"
-                  row-class-name="table-row" cell-class-name="table-cell"
-                  :height="tableHeight">
-            <el-table-column v-if="multipleMode" align="center" type="selection"
-                             width="50">
-            </el-table-column>
-            <el-table-column prop="id" label="ID" width="100">
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort"
-                                     @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <!--            <el-table-column prop="userId" label="用户ID"
-                        ></el-table-column>-->
-            <el-table-column prop="user.nickname" label="用户名">
-            </el-table-column>
-            <el-table-column prop="amount" label="提现金额"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="balance" label="剩余金额"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="withdrawTime" label="提现时间"
-                             :formatter="datetimeFormatter"
-            >
-                <!--<template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>-->
-            </el-table-column>
-            <el-table-column prop="payMethod" label="提现方式"
-                             :formatter="payMethodFormatter"
-            >
-                <template slot="header" slot-scope="{column}">
+      </el-button>-->
+      <el-select
+        v-model="status"
+        class="filter-item"
+        placeholder="筛选状态"
+        clearable
+        filterable
+        @change="getData"
+      >
+        <el-option
+          v-for="item in statusOptions"
+          :label="item.label"
+          :value="item.value"
+          :key="item.value"
+        />
+      </el-select>
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column prop="id" label="ID" width="100">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <!--            <el-table-column prop="userId" label="用户ID"
+      ></el-table-column>-->
+      <el-table-column prop="user.nickname" label="用户名"></el-table-column>
+      <el-table-column prop="amount" label="提现金额">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="balance" label="剩余金额">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="withdrawTime" label="提现时间" :formatter="datetimeFormatter">
+        <!--<template slot="header" slot-scope="{column}">
                     <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
                     </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="status" label="状态" :formatter="statusFormatter"/>
-            <!--<el-table-column prop="account" label="账号"/>-->
-            <el-table-column prop="realName" label="微信名"/>
-            <!--            <el-table-column
+        </template>-->
+      </el-table-column>
+      <el-table-column prop="payMethod" label="提现方式" :formatter="payMethodFormatter">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="状态" :formatter="statusFormatter" />
+      <!--<el-table-column prop="account" label="账号"/>-->
+      <el-table-column prop="realName" label="微信名" />
+      <!--            <el-table-column
                                 label="操作"
                                 align="center"
                                 fixed="right"
@@ -83,210 +75,220 @@
                                 <el-button @click="successRow(row)" type="primary" size="mini" plain>成功</el-button>
                                 <el-button @click="failRow(row)" type="danger" size="mini" plain>失败</el-button>
                             </template>
-                        </el-table-column>-->
-            <el-table-column label="操作" align="center" fixed="right" min-width="150">
-                <template slot-scope="{ row }">
-                    <el-button
-                            v-if="row.status === 'PENDING'"
-                            :loading="row.loading"
-                            @click="audit(row, true)"
-                            type="primary"
-                            size="mini"
-                            plain
-                    >通过
-                    </el-button
-                    >
-                    <el-button
-                            v-if="row.status === 'PENDING'"
-                            @click="audit(row, false)"
-                            type="danger"
-                            size="mini"
-                            plain
-                    >拒绝
-                    </el-button
-                    >
-                </template>
-            </el-table-column>
-
-        </el-table>
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper">
-                <el-button v-if="!multipleMode"
-                           @click="toggleMultipleMode(true)">批量编辑
-                </el-button>
-                <el-button-group v-else>
-                    <el-button @click="operation1">批量操作1</el-button>
-                    <el-button @click="operation2">批量操作2</el-button>
-                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
-                </el-button-group>
-            </div>
-            <el-pagination background @size-change="onSizeChange"
-                           @current-change="onCurrentChange" :current-page="page"
-                           :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalElements">
-            </el-pagination>
-        </div>
-
+      </el-table-column>-->
+      <el-table-column label="操作" align="center" fixed="right" min-width="150">
+        <template slot-scope="{ row }">
+          <el-button
+            v-if="row.status === 'PENDING'"
+            :loading="row.loading"
+            @click="audit(row, true)"
+            type="primary"
+            size="mini"
+            plain
+          >通过</el-button>
+          <el-button
+            v-if="row.status === 'PENDING'"
+            @click="audit(row, false)"
+            type="danger"
+            size="mini"
+            plain
+          >拒绝</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
     </div>
+  </div>
 </template>
 <script>
-    import {mapState} from "vuex";
-    import pageableTable from "@/mixins/pageableTable";
+import { mapState } from "vuex";
+import pageableTable from "@/mixins/pageableTable";
 
-    export default {
-        name: 'WithdrawalsRecordList',
-        mixins: [pageableTable],
-        created() {
-            this.getData();
-        },
-        data() {
-            return {
-                multipleMode: false,
-                search: "",
-                url: "/withdrawals/all",
-                downloading: false,
-                payMethodOptions: [{"label": "微信", "value": "WEIXIN"}, {"label": "余额", "value": "YUE"}, {
-                    "label": "支付宝",
-                    "value": "ZHIFUBAO"
-                }],
-                statusOptions: [{"label": "待处理", "value": "PENDING"}, {
-                    "label": "成功", "value": "SUCCESS"
-                }, {"label": "失败", "value": "FAIL"}],
-                status: ''
-            }
-        },
-        computed: {
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
+export default {
+  name: "WithdrawalsRecordList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/withdrawals/all",
+      downloading: false,
+      payMethodOptions: [
+        { label: "微信", value: "WEIXIN" },
+        { label: "余额", value: "YUE" },
+        {
+          label: "支付宝",
+          value: "ZHIFUBAO"
+        }
+      ],
+      statusOptions: [
+        { label: "待处理", value: "PENDING" },
+        {
+          label: "成功",
+          value: "SUCCESS"
         },
-        methods: {
-            payMethodFormatter(row, column, cellValue, index) {
-                let selectedOption = this.payMethodOptions.find(i => i.value === cellValue);
-                if (selectedOption) {
-                    return selectedOption.label;
-                }
-                return '';
-            },
-            statusFormatter(row, column, cellValue, index) {
-                let selectedOption = this.statusOptions.find(i => i.value === cellValue);
-                if (selectedOption) {
-                    return selectedOption.label;
-                }
-                return '';
-            },
-            beforeGetData() {
-                /* if (this.search) {
+        { label: "失败", value: "FAIL" }
+      ],
+      status: ""
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    payMethodFormatter(row, column, cellValue, index) {
+      let selectedOption = this.payMethodOptions.find(
+        i => i.value === cellValue
+      );
+      if (selectedOption) {
+        return selectedOption.label;
+      }
+      return "";
+    },
+    statusFormatter(row, column, cellValue, index) {
+      let selectedOption = this.statusOptions.find(i => i.value === cellValue);
+      if (selectedOption) {
+        return selectedOption.label;
+      }
+      return "";
+    },
+    beforeGetData() {
+      /* if (this.search) {
                      return {search: this.search};
                  }*/
-                return {
-                    search: this.search,
-                    query: {
-                        status: this.status
-                    },
-                    sort: "withdrawTime,desc"
-                };
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            addRow() {
-                this.$router.push({
-                    path: "/withdrawalsEdit",
-                    query: {
-                        ...this.$route.query
-                    }
-                });
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: "/withdrawalsEdit",
-                    query: {
-                        id: row.id
-                    }
-                });
-            },
-            download() {
-                this.downloading = true;
-                this.$axios
-                    .get("/withdrawals/excel", {
-                        responseType: "blob",
-                        params: {size: 10000}
-                    })
-                    .then(res => {
-                        console.log(res);
-                        this.downloading = false;
-                        const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
-                        const link = document.createElement("a");
-                        link.href = downloadUrl;
-                        link.setAttribute(
-                            "download",
-                            res.headers["content-disposition"].split("filename=")[1]
-                        );
-                        document.body.appendChild(link);
-                        link.click();
-                        link.remove();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.downloading = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            deleteRow(row) {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/withdrawals/del/${row.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.getData();
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
-                    } else {
-                        this.$message.error('删除失败');
-                    }
-                })
-            },
-
-            audit(row, consent) {
-                this.$set(row, 'loading', true);
-                this.$http
-                    .get('/withdrawals/audit', {
-                        id: row.id,
-                        consent: consent
-                    })
-                    .then(res => {
-                        this.$set(row, 'loading', false);
-                        this.$message.success('OK');
-                        this.getData();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.$set(row, 'loading', false);
-                        this.$message.error(e.error);
-                    });
-            }
+      return {
+        search: this.search,
+        query: {
+          status: this.status
         },
-        watch: {
-            status() {
-                this.page = 1;
-                this.getData();
-            }
+        sort: "withdrawTime,desc"
+      };
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addRow() {
+      this.$router.push({
+        path: "/withdrawalsEdit",
+        query: {
+          ...this.$route.query
+        }
+      });
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/withdrawalsEdit",
+        query: {
+          id: row.id
         }
+      });
+    },
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/withdrawals/excel", {
+          responseType: "blob",
+          params: { size: 10000 }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    deleteRow(row) {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/withdrawals/del/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("删除取消");
+          } else {
+            this.$message.error("删除失败");
+          }
+        });
+    },
+
+    audit(row, consent) {
+      this.$set(row, "loading", true);
+      this.$http
+        .get("/withdrawals/audit", {
+          id: row.id,
+          consent: consent
+        })
+        .then(res => {
+          this.$set(row, "loading", false);
+          this.$message.success("OK");
+          this.getData();
+        })
+        .catch(e => {
+          console.log(e);
+          this.$set(row, "loading", false);
+          this.$message.error(e.error);
+        });
+    }
+  },
+  watch: {
+    status() {
+      this.page = 1;
+      this.getData();
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/user/DealerUser.vue

@@ -0,0 +1,314 @@
+<template>
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入昵称/手机号" v-model="search" clearable class="filter-item" />
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <!-- <el-select
+        v-model="identityId"
+        class="filter-item"
+        placeholder="筛选身份"
+        clearable
+        filterable
+        @change="getData"
+      >
+        <el-option
+          v-for="item in identityOptions"
+          :label="item.label"
+          :value="item.value"
+          :key="item.value"
+        />
+      </el-select> -->
+      <el-date-picker
+        v-model="dateRange"
+        type="daterange"
+        value-format="yyyy-MM-dd HH:mm:ss"
+        start-placeholder="请选择开始时间"
+        end-placeholder="请选择结束时间"
+        range-separator="至"
+        :default-time="['00:00:00', '23:59:59']"
+        class="filter-item"
+        :picker-options="pickerOptions"
+        @change="getData"
+      ></el-date-picker>
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column prop="userId" label="用户ID">
+        <template slot="header" slot-scope="{ column }">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="user.nickname" label="昵称" />
+      <el-table-column prop="user.phone" label="手机号"></el-table-column>
+      <el-table-column prop="startTime" label="会员开始时间" :formatter="datetimeFormatter"></el-table-column>
+      <el-table-column prop="fansNum" label="粉丝">
+        <template slot="header" slot-scope="{ column }">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="money" label="余额">
+        <template slot="header" slot-scope="{ column }">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" fixed="right" min-width="100">
+        <template slot-scope="{ row }">
+          <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+import pageableTable from "@/mixins/pageableTable";
+import startOfDay from "date-fns/startOfDay";
+import endOfDay from "date-fns/endOfDay";
+import addDays from "date-fns/addDays";
+import addMonths from "date-fns/addMonths";
+import format from "date-fns/format";
+
+export default {
+  name: "VipUserList",
+  mixins: [pageableTable],
+  created() {
+    if (this.$route.query.id) {
+      this.parentId = this.$route.query.id;
+    }
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/vipUser/search",
+      downloading: false,
+      identityOptions: [
+        { label: "合伙人", value: "32" },
+        { label: "经销商", value: "33" },
+        { label: "特约会员", value: "34" },
+        { label: "线下购买", value: "35" }
+      ],
+      identityId: "",
+      parentId: 0,
+      startTime: "",
+      dateRange: [],
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "今天",
+            onClick(picker) {
+              picker.$emit("pick", [
+                format(startOfDay(new Date()), "yyyy-MM-dd HH:mm:ss"),
+                format(endOfDay(new Date()), "yyyy-MM-dd HH:mm:ss")
+              ]);
+            }
+          },
+          {
+            text: "近一周",
+            onClick(picker) {
+              const date = addDays(new Date(), -7);
+              picker.$emit("pick", [
+                format(startOfDay(date), "yyyy-MM-dd HH:mm:ss"),
+                format(endOfDay(new Date()), "yyyy-MM-dd HH:mm:ss")
+              ]);
+            }
+          },
+          {
+            text: "近一月",
+            onClick(picker) {
+              const date = addMonths(new Date(), -1);
+              picker.$emit("pick", [
+                format(startOfDay(date), "yyyy-MM-dd HH:mm:ss"),
+                format(endOfDay(new Date()), "yyyy-MM-dd HH:mm:ss")
+              ]);
+            }
+          },
+          {
+            text: "近三月",
+            onClick(picker) {
+              const date = addMonths(new Date(), -3);
+              picker.$emit("pick", [
+                format(startOfDay(date), "yyyy-MM-dd HH:mm:ss"),
+                format(endOfDay(new Date()), "yyyy-MM-dd HH:mm:ss")
+              ]);
+            }
+          }
+        ]
+      }
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    beforeOnCreate() {
+      if (this.$route.query.dateRange) {
+        this.dateRange = decodeURIComponent(this.$route.query.dateRange).split(
+          ","
+        );
+      } else {
+        this.dateRange = [
+          format(startOfDay(new Date()), "yyyy-MM-dd HH:mm:ss"),
+          format(endOfDay(new Date()), "yyyy-MM-dd HH:mm:ss")
+        ];
+      }
+    },
+    identityFormatter(row, column, cellValue, index) {
+      let selectedOption = this.identityOptions.find(
+        i => i.value === cellValue
+      );
+      if (selectedOption) {
+        return selectedOption.label;
+      }
+      return "";
+    },
+    onCreate() {
+      // const date = new Date();
+      this.page = Number(this.$route.query.page) || 1;
+      if (this.$route.query.sort) {
+        let sort = {};
+        for (let s of this.$route.query.sort.split(";")) {
+          if (s) {
+            let [prop, order] = s.split(",");
+            sort[prop] = order;
+          }
+        }
+        this.sort = sort;
+      }
+      this.getData();
+    },
+    beforeGetData() {
+      let data = { sort: "createdAt,desc", query: {} };
+      if (this.search) {
+        data.search = this.search;
+      }
+      if (this.dateRange && this.dateRange.length > 0) {
+        data.query.startTime = this.dateRange[0] + "," + this.dateRange[1];
+      }
+      if (this.identityId > 0) {
+        data.query.identityId = this.identityId;
+      }
+      //   if (this.parentId > 0) {
+      data.query.parentId = this.parentId;
+      //   }
+      return data;
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addRow() {
+      this.$router.push({
+        path: "/vipUserEdit",
+        query: {
+          ...this.$route.query
+        }
+      });
+    },
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/vipUser/excel", {
+          responseType: "blob",
+          params: { size: 10000 }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/vipUserEdit",
+        query: {
+          id: row.id
+        }
+      });
+    },
+    deleteRow(row) {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", {
+        type: "error"
+      })
+        .then(() => {
+          return this.$http.post(`/vipUser/del/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("删除取消");
+          } else {
+            this.$message.error("删除失败");
+          }
+        });
+    }
+  },
+  watch: {
+    selected() {
+      this.page = 1;
+      this.getData();
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+</style>

src/main/vue/src/views/user/UserAddressEdit.vue

@@ -1,151 +1,157 @@
 <template>
-    <div class="edit-view">
-        <el-form :model="formData" :rules="rules" ref="form" label-width="136px" label-position="right" size="small"
-                 style="max-width: 500px;">
-                <el-form-item prop="userId" label="用户Id">
-                            <el-input v-model="formData.userId"></el-input>
-                </el-form-item>
-                <el-form-item prop="name" label="收件人姓名">
-                            <el-input v-model="formData.name"></el-input>
-                </el-form-item>
-                <el-form-item prop="phone" label="收件人电话">
-                            <el-input v-model="formData.phone"></el-input>
-                </el-form-item>
-                <el-form-item prop="province" label="收件人省">
-                            <el-input v-model="formData.province"></el-input>
-                </el-form-item>
-                <el-form-item prop="citry" label="收件人市">
-                            <el-input v-model="formData.citry"></el-input>
-                </el-form-item>
-                <el-form-item prop="district" label="收件人区">
-                            <el-input v-model="formData.district"></el-input>
-                </el-form-item>
-                <el-form-item prop="address" label="详细地址">
-                            <el-input v-model="formData.address"></el-input>
-                </el-form-item>
-                <el-form-item prop="enabled" label="是否选为默认地址">
-                            <el-switch v-model="formData.enabled"></el-switch>
-                </el-form-item>
-            <el-form-item>
-                <el-button @click="onSave" :loading="saving"
-                           type="primary">保存</el-button>
-                <el-button @click="onDelete" :loading="saving"
-                           type="danger" v-if="formData.id">删除
-                </el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+  <div class="edit-view">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="136px"
+      label-position="right"
+      size="small"
+      style="max-width: 500px;"
+    >
+      <el-form-item prop="userId" label="用户Id">
+        <el-input v-model="formData.userId"></el-input>
+      </el-form-item>
+      <el-form-item prop="name" label="收件人姓名">
+        <el-input v-model="formData.name"></el-input>
+      </el-form-item>
+      <el-form-item prop="phone" label="收件人电话">
+        <el-input v-model="formData.phone"></el-input>
+      </el-form-item>
+      <el-form-item prop="province" label="收件人省">
+        <el-input v-model="formData.province"></el-input>
+      </el-form-item>
+      <el-form-item prop="citry" label="收件人市">
+        <el-input v-model="formData.citry"></el-input>
+      </el-form-item>
+      <el-form-item prop="district" label="收件人区">
+        <el-input v-model="formData.district"></el-input>
+      </el-form-item>
+      <el-form-item prop="address" label="详细地址">
+        <el-input v-model="formData.address"></el-input>
+      </el-form-item>
+      <el-form-item prop="enabled" label="是否选为默认地址">
+        <el-switch v-model="formData.enabled"></el-switch>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+        <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除</el-button>
+        <el-button @click="$router.go(-1)">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script>
-    export default {
-        name: 'UserAddressEdit',
-        created() {
-            if (this.$route.query.id) {
-                this.$http
-                    .get('userAddress/get/'+this.$route.query.id)
-                    .then(res => {
-                        this.formData = res;
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    });
-            }
-        },
-        data() {
-            return {
-                saving: false,
-                formData: {
-                },
-                rules: {
-                        name: [
-                            {
-                                required: true,
-                                message: '请输入收件人姓名',
-                                trigger: 'blur'
-                            },
-                    ],
-                        phone: [
-                            {
-                                required: true,
-                                message: '请输入收件人电话',
-                                trigger: 'blur'
-                            },
-                    ],
-                        province: [
-                            {
-                                required: true,
-                                message: '请输入收件人省',
-                                trigger: 'blur'
-                            },
-                    ],
-                        citry: [
-                            {
-                                required: true,
-                                message: '请输入收件人市',
-                                trigger: 'blur'
-                            },
-                    ],
-                        district: [
-                            {
-                                required: true,
-                                message: '请输入收件人区',
-                                trigger: 'blur'
-                            },
-                    ],
-                        address: [
-                            {
-                                required: true,
-                                message: '请输入详细地址',
-                                trigger: 'blur'
-                            },
-                    ],
-                },
-            }
-        },
-        methods: {
-            onSave() {
-                this.$refs.form.validate((valid) => {
-                    if (valid) {
-                        this.submit();
-                    } else {
-                        return false;
-                    }
-                });
-            },
-            submit() {
-                let data = {...this.formData};
-
-                this.saving = true;
-                this.$http
-                    .post('/userAddress/save', data, {body: 'json'})
-                    .then(res => {
-                        this.saving = false;
-                        this.$message.success('成功');
-                        this.$router.go(-1);
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.saving = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            onDelete() {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/userAddress/del/${this.formData.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.$router.go(-1);
-                }).catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                })
-            },
+export default {
+  name: "UserAddressEdit",
+  created() {
+    if (this.$route.query.id) {
+      this.$http
+        .get("userAddress/get/" + this.$route.query.id)
+        .then(res => {
+          this.formData = res;
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    }
+  },
+  data() {
+    return {
+      saving: false,
+      formData: {},
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "请输入收件人姓名",
+            trigger: "blur"
+          }
+        ],
+        phone: [
+          {
+            required: true,
+            message: "请输入收件人电话",
+            trigger: "blur"
+          }
+        ],
+        province: [
+          {
+            required: true,
+            message: "请输入收件人省",
+            trigger: "blur"
+          }
+        ],
+        citry: [
+          {
+            required: true,
+            message: "请输入收件人市",
+            trigger: "blur"
+          }
+        ],
+        district: [
+          {
+            required: true,
+            message: "请输入收件人区",
+            trigger: "blur"
+          }
+        ],
+        address: [
+          {
+            required: true,
+            message: "请输入详细地址",
+            trigger: "blur"
+          }
+        ]
+      }
+    };
+  },
+  methods: {
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
         }
+      });
+    },
+    submit() {
+      let data = { ...this.formData };
+
+      this.saving = true;
+      this.$http
+        .post("/userAddress/save", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/userAddress/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/user/UserAddressList.vue

@@ -1,224 +1,213 @@
 <template>
-    <div class="list-view">
-        <div class="filters-container">
-            <el-input placeholder="输入关键字" v-model="search" clearable
-                      class="filter-item"></el-input>
-            <el-button @click="getData" type="primary" icon="el-icon-search"
-                       class="filter-item">搜索
-            </el-button>
-            <el-button @click="addRow" type="primary" icon="el-icon-plus"
-                       class="filter-item" v-if="canEdit">添加
-            </el-button>
-            <el-button @click="download" type="primary" icon="el-icon-download"
-                       :loading="downloading" class="filter-item">导出EXCEL
-            </el-button>
-        </div>
-        <el-table :data="tableData" row-key="id" ref="table"
-                  header-row-class-name="table-header-row"
-                  header-cell-class-name="table-header-cell"
-                  row-class-name="table-row" cell-class-name="table-cell"
-                  :height="tableHeight">
-            <el-table-column v-if="multipleMode" align="center" type="selection"
-                             width="50">
-            </el-table-column>
-            <el-table-column prop="id" label="ID" width="100">
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort"
-                                     @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="user.username" label="用户Id"
-            >
-
-            </el-table-column>
-            <el-table-column prop="name" label="收件人姓名"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="phone" label="收件人电话"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="province" label="收件人省"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="citry" label="收件人市"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="district" label="收件人区"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="address" label="详细地址"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <el-table-column prop="enabled" label="是否选为默认地址"
-            >
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-                <template slot-scope="{row}">
-                    <el-tag :type="row.enabled?'':'info'">{{row.enabled}}</el-tag>
-                </template>
-            </el-table-column>
-            <el-table-column
-                    label="操作"
-                    align="center"
-                    fixed="right"
-                    min-width="150" v-if="canEdit">
-                <template slot-scope="{row}">
-                    <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
-                    <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
-                </template>
-            </el-table-column>
-        </el-table>
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper">
-                <el-button v-if="!multipleMode"
-                           @click="toggleMultipleMode(true)">批量编辑
-                </el-button>
-                <el-button-group v-else>
-                    <el-button @click="operation1">批量操作1</el-button>
-                    <el-button @click="operation2">批量操作2</el-button>
-                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
-                </el-button-group>
-            </div>
-            <el-pagination background @size-change="onSizeChange"
-                           @current-change="onCurrentChange" :current-page="page"
-                           :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalElements">
-            </el-pagination>
-        </div>
-
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入关键字" v-model="search" clearable class="filter-item"></el-input>
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <el-button
+        @click="addRow"
+        type="primary"
+        icon="el-icon-plus"
+        class="filter-item"
+        v-if="canEdit"
+      >添加</el-button>
+      <el-button
+        @click="download"
+        type="primary"
+        icon="el-icon-download"
+        :loading="downloading"
+        class="filter-item"
+      >导出EXCEL</el-button>
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column prop="id" label="ID" width="100">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="user.username" label="用户Id"></el-table-column>
+      <el-table-column prop="name" label="收件人姓名">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="phone" label="收件人电话">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="province" label="收件人省">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="citry" label="收件人市">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="district" label="收件人区">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="address" label="详细地址">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <el-table-column prop="enabled" label="是否选为默认地址">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+        <template slot-scope="{row}">
+          <el-tag :type="row.enabled?'':'info'">{{row.enabled}}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" fixed="right" min-width="150" v-if="canEdit">
+        <template slot-scope="{row}">
+          <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
+          <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
     </div>
+  </div>
 </template>
 <script>
-    import {mapState} from "vuex";
-    import pageableTable from "@/mixins/pageableTable";
+import { mapState } from "vuex";
+import pageableTable from "@/mixins/pageableTable";
 
-    export default {
-        name: 'UserAddressList',
-        mixins: [pageableTable],
-        created() {
-            this.getData();
-        },
-        data() {
-            return {
-                multipleMode: false,
-                search: "",
-                url: "/userAddress/all",
-                downloading: false,
-            }
-        },
-        computed: {
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
-        },
-        methods: {
-            beforeGetData() {
-                if (this.search) {
-                    return {search: this.search};
-                }
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            addRow() {
-                this.$router.push({
-                    path: "/userAddressEdit",
-                    query: {
-                        ...this.$route.query
-                    }
-                });
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: "/userAddressEdit",
-                    query: {
-                        id: row.id
-                    }
-                });
-            },
-            download() {
-                this.downloading = true;
-                this.$axios
-                    .get("/userAddress/excel", {
-                        responseType: "blob",
-                        params: {size: 10000}
-                    })
-                    .then(res => {
-                        console.log(res);
-                        this.downloading = false;
-                        const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
-                        const link = document.createElement("a");
-                        link.href = downloadUrl;
-                        link.setAttribute(
-                            "download",
-                            res.headers["content-disposition"].split("filename=")[1]
-                        );
-                        document.body.appendChild(link);
-                        link.click();
-                        link.remove();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.downloading = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            deleteRow(row) {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/userAddress/del/${row.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.getData();
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
-                    } else {
-                        this.$message.error('删除失败');
-                    }
-                })
-            },
+export default {
+  name: "UserAddressList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/userAddress/all",
+      downloading: false
+    };
+  },
+  computed: {
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    beforeGetData() {
+      if (this.search) {
+        return { search: this.search };
+      }
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addRow() {
+      this.$router.push({
+        path: "/userAddressEdit",
+        query: {
+          ...this.$route.query
+        }
+      });
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/userAddressEdit",
+        query: {
+          id: row.id
         }
+      });
+    },
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/userAddress/excel", {
+          responseType: "blob",
+          params: { size: 10000 }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    deleteRow(row) {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/userAddress/del/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("删除取消");
+          } else {
+            this.$message.error("删除失败");
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/user/UserEdit.vue

@@ -1,33 +1,40 @@
 <template>
-    <div class="edit-view">
-        <el-form :model="formData" :rules="rules" ref="form" label-width="80px" label-position="right" size="small"
-                 style="max-width: 500px;">
-            <el-form-item prop="avatar" label="头像">
-                <crop-upload v-model="formData.avatar"></crop-upload>
-            </el-form-item>
-            <el-form-item prop="username" label="用户名">
-                <el-input v-model="formData.username"></el-input>
-            </el-form-item>
-            <el-form-item prop="nickname" label="昵称">
-                <el-input v-model="formData.nickname"></el-input>
-            </el-form-item>
-            <el-form-item prop="sex" label="性别">
-                <el-select v-model="formData.sex" clearable filterable placeholder="请选择">
-                    <el-option
-                            v-for="item in sexOptions"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value">
-                    </el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item prop="phone" label="手机号">
-                <el-input v-model="formData.phone"></el-input>
-            </el-form-item>
-            <el-form-item prop="parentId" label="邀请人">
-                <el-input v-model="formData.parentId"></el-input>
-            </el-form-item>
-<!--            <el-form-item prop="identityId" label="会员身份">
+  <div class="edit-view">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="80px"
+      label-position="right"
+      size="small"
+      style="max-width: 500px;"
+    >
+      <el-form-item prop="avatar" label="头像">
+        <crop-upload v-model="formData.avatar"></crop-upload>
+      </el-form-item>
+      <el-form-item prop="username" label="用户名">
+        <el-input v-model="formData.username"></el-input>
+      </el-form-item>
+      <el-form-item prop="nickname" label="昵称">
+        <el-input v-model="formData.nickname"></el-input>
+      </el-form-item>
+      <el-form-item prop="sex" label="性别">
+        <el-select v-model="formData.sex" clearable filterable placeholder="请选择">
+          <el-option
+            v-for="item in sexOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="phone" label="手机号">
+        <el-input v-model="formData.phone"></el-input>
+      </el-form-item>
+      <el-form-item prop="parentId" label="邀请人">
+        <el-input v-model="formData.parentId"></el-input>
+      </el-form-item>
+      <!--            <el-form-item prop="identityId" label="会员身份">
                 &lt;!&ndash;<el-input v-model="formData.identityId"></el-input>&ndash;&gt;
                 <el-select v-model="formData.identityId" clearable filterable
                            placeholder="请选择">
@@ -35,186 +42,178 @@
                                :label="item.label" :value="item.value">
                     </el-option>
                 </el-select>
-            </el-form-item>-->
-            <!--            <el-form-item prop="gitCount" label="已领取">
+      </el-form-item>-->
+      <!--            <el-form-item prop="gitCount" label="已领取">
                             <el-input v-model="formData.gitCount"/>
-                        </el-form-item>-->
-<!--            <el-form-item prop="fansNum" label="粉丝">
+      </el-form-item>-->
+      <!--            <el-form-item prop="fansNum" label="粉丝">
                 <el-input v-model="formData.fansNum"/>
             </el-form-item>
             <el-form-item prop="money" label="余额">
                 <el-input v-model="formData.money"/>
-            </el-form-item>-->
-            <el-form-item v-if="formData.id" label="密码">
-                <el-button type="primary" plain @click="resetPassword">重置 </el-button>
-            </el-form-item>
-            <el-form-item v-else prop="password" label="密码">
-                <el-input v-model="formData.password"></el-input>
-            </el-form-item>
-            <el-form-item prop="authorities" label="角色">
-                <el-select v-model="formData.authorities" multiple
-                           placeholder="请选择" value-key="name">
-                    <el-option v-for="item in authorities" :key="item.name"
-                               :label="item.name" :value="item">
-                    </el-option>
-                </el-select>
-            </el-form-item>
-            <el-form-item>
-                <el-button @click="onSave" :loading="saving"
-                           type="primary">保存
-                </el-button>
-                <el-button @click="onDelete" :loading="saving"
-                           type="danger" v-if="formData.id">删除
-                </el-button>
-                <el-button @click="$router.go(-1)">取消</el-button>
-            </el-form-item>
-        </el-form>
-    </div>
+      </el-form-item>-->
+      <el-form-item v-if="formData.id" label="密码">
+        <el-button type="primary" plain @click="resetPassword">重置</el-button>
+      </el-form-item>
+      <el-form-item v-else prop="password" label="密码">
+        <el-input v-model="formData.password"></el-input>
+      </el-form-item>
+      <el-form-item prop="authorities" label="角色">
+        <el-select v-model="formData.authorities" multiple placeholder="请选择" value-key="name">
+          <el-option v-for="item in authorities" :key="item.name" :label="item.name" :value="item"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="onSave" :loading="saving" type="primary">保存</el-button>
+        <el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除</el-button>
+        <el-button @click="$router.go(-1)">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 <script>
-    import {mapState} from "vuex";
+import { mapState } from "vuex";
 
-    export default {
-        name: 'UserEdit',
-        created() {
-            if (this.$route.query.id) {
-                this.$http
-                    .get('user/get/' + this.$route.query.id)
-                    .then(res => {
-                        this.formData = res;
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    });
-            }
-            this.$http
-                .get('/authority/all')
-                .then(res => {
-                    this.authorities = res;
-                })
-                .catch(e => {
-                    console.log(e);
-                });
-        },
-        data() {
-            return {
-                saving: false,
-                formData: {
-                    avatar:
-                        'https://zhumj.oss-cn-hangzhou.aliyuncs.com/image/user.jpg',
-                },
-                rules: {
-                    avatar: [
-                        {
-                            // required: true,
-                            regexp: /^[_.@A-Za-z0-9-]*$/,
-                            message: '请上传头像',
-                            trigger: 'blur',
-                        },
-                    ],
-                    username: [
-                        {required: true, message: '请输入昵称', trigger: 'blur'},
-                    ],
-                    nickname: [
-                        {required: true, message: '请输入昵称', trigger: 'blur'},
-                    ],
-                    password: [
-                        {required: true, message: '请输入密码', trigger: 'blur'},
-                    ],
-                    phone: [
-                        {
-                            // required: true,
-                            regexp: /^1[3-9]\d{9}$/,
-                            message: '请输入正确的手机号',
-                            trigger: 'blur',
-                        },
-                    ],
-                    authorities: [
-                        {required: true, message: '请选择角色', trigger: 'blur'},
-                    ],
-                },
-                sexOptions: [{"label": "男", "value": "男"}, {"label": "女", "value": "女"}],
-                authorities: [],
-/*                identityOptions: [
+export default {
+  name: "UserEdit",
+  created() {
+    if (this.$route.query.id) {
+      this.$http
+        .get("user/get/" + this.$route.query.id)
+        .then(res => {
+          this.formData = res;
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    }
+    this.$http
+      .get("/authority/all")
+      .then(res => {
+        this.authorities = res;
+      })
+      .catch(e => {
+        console.log(e);
+      });
+  },
+  data() {
+    return {
+      saving: false,
+      formData: {
+        avatar: "https://zhumj.oss-cn-hangzhou.aliyuncs.com/image/user.jpg"
+      },
+      rules: {
+        avatar: [
+          {
+            // required: true,
+            regexp: /^[_.@A-Za-z0-9-]*$/,
+            message: "请上传头像",
+            trigger: "blur"
+          }
+        ],
+        username: [{ required: true, message: "请输入昵称", trigger: "blur" }],
+        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
+        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
+        phone: [
+          {
+            // required: true,
+            regexp: /^1[3-9]\d{9}$/,
+            message: "请输入正确的手机号",
+            trigger: "blur"
+          }
+        ],
+        authorities: [
+          { required: true, message: "请选择角色", trigger: "blur" }
+        ]
+      },
+      sexOptions: [
+        { label: "男", value: "男" },
+        { label: "女", value: "女" }
+      ],
+      authorities: []
+      /*                identityOptions: [
                     {label: '普通会员', value: '34'},
                     {label: '特约会员', value: '33'},
                     {label: '总经销', value: '32'},
                 ],*/
-            }
-        },
-        methods: {
-            onSave() {
-                this.$refs.form.validate((valid) => {
-                    if (valid) {
-                        this.submit();
-                    } else {
-                        return false;
-                    }
-                });
-            },
-            submit() {
-                let data = {...this.formData};
+    };
+  },
+  methods: {
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
+        }
+      });
+    },
+    submit() {
+      let data = { ...this.formData };
 
-                this.saving = true;
+      this.saving = true;
+      this.$http
+        .post("/user/save", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/user/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
+    },
+    resetPassword() {
+      this.$prompt("请输入新密码", "重置密码", { inputType: "password" })
+        .then(res => {
+          console.log(res);
+          if (res.value) {
+            this.$alert("确定重置密码？", "提示", {
+              showCancelButton: true
+            })
+              .then(() => {
                 this.$http
-                    .post('/user/save', data, {body: 'json'})
-                    .then(res => {
-                        this.saving = false;
-                        this.$message.success('成功');
-                        this.$router.go(-1);
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.saving = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            onDelete() {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/user/del/${this.formData.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.$router.go(-1);
-                }).catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                })
-            },
-            resetPassword() {
-                this.$prompt('请输入新密码', '重置密码', { inputType: 'password' })
-                    .then(res => {
-                        console.log(res);
-                        if (res.value) {
-                            this.$alert('确定重置密码？', '提示', {
-                                showCancelButton: true
-                            })
-                                .then(() => {
-                                    this.$http
-                                        .post('user/resetPasswordAdmin', {
-                                            id: this.formData.id,
-                                            password: res.value
-                                        })
-                                        .then(res => {
-                                            this.$message.success('密码重置成功');
-                                        })
-                                        .catch(e => {
-                                            console.log(e);
-                                            this.$message.error(e.error);
-                                        });
-                                })
-                                .catch(e => {
-                                    console.log(e);
-                                    this.$message.error(e.error);
-                                });
-                        }
-                    })
-                    .catch(() => {});
-            }
-        }
+                  .post("user/resetPasswordAdmin", {
+                    id: this.formData.id,
+                    password: res.value
+                  })
+                  .then(res => {
+                    this.$message.success("密码重置成功");
+                  })
+                  .catch(e => {
+                    console.log(e);
+                    this.$message.error(e.error);
+                  });
+              })
+              .catch(e => {
+                console.log(e);
+                this.$message.error(e.error);
+              });
+          }
+        })
+        .catch(() => {});
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/user/UserList.vue

@@ -1,14 +1,13 @@
 <template>
-    <div class="list-view">
-        <div class="filters-container">
-            <el-input placeholder="输入ID/昵称/手机号" v-model="search" clearable
-                      class="filter-item"/>
-            <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
-            <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加</el-button>
-            <!--            <el-button @click="download" type="primary" icon="el-icon-download"
+  <div class="list-view">
+    <div class="filters-container">
+      <el-input placeholder="输入ID/昵称/手机号" v-model="search" clearable class="filter-item" />
+      <el-button @click="getData" type="primary" icon="el-icon-search" class="filter-item">搜索</el-button>
+      <el-button @click="addRow" type="primary" icon="el-icon-plus" class="filter-item">添加</el-button>
+      <!--            <el-button @click="download" type="primary" icon="el-icon-download"
                                    :loading="downloading" class="filter-item">导出EXCEL
-                        </el-button>-->
-            <!--            <el-select v-model="identityId" class="filter-item" placeholder="筛选状态" clearable filterable
+      </el-button>-->
+      <!--            <el-select v-model="identityId" class="filter-item" placeholder="筛选状态" clearable filterable
                                    @change="getData">
                             <el-option
                                     v-for="item in identityOptions"
@@ -16,53 +15,47 @@
                                     :value="item.value"
                                     :key="item.value"
                             />
-                        </el-select>-->
-        </div>
-        <el-table :data="tableData" row-key="id" ref="table"
-                  header-row-class-name="table-header-row"
-                  header-cell-class-name="table-header-cell"
-                  row-class-name="table-row" cell-class-name="table-cell"
-                  :height="tableHeight">
-            <el-table-column v-if="multipleMode" align="center" type="selection"
-                             width="50">
-            </el-table-column>
-            <el-table-column prop="id" label="ID">
-                <template slot="header" slot-scope="{column}">
-                    <sortable-header :column="column" :current-sort="sort"
-                                     @changeSort="changeSort">
-                    </sortable-header>
-                </template>
-            </el-table-column>
-            <!--<el-table-column prop="username" label="用户名"></el-table-column>-->
-            <el-table-column prop="nickname" label="昵称"></el-table-column>
-            <el-table-column label="头像" min-width="80">
-                <template slot-scope="{ row }">
-                    <el-image
-                            style="width: 30px; height: 30px"
-                            :src="row.avatar"
-                            fit="cover"
-                            :preview-src-list="[row.avatar]"
-                    />
-                </template>
-            </el-table-column>
-            <el-table-column prop="sex" label="性别"
-                             :formatter="sexFormatter"
-            >
-            </el-table-column>
-            <el-table-column prop="phone" label="手机">
-            </el-table-column>
-            <el-table-column prop="user.nickname" label="邀请人"
-            >
-            </el-table-column>
+      </el-select>-->
+    </div>
+    <el-table
+      :data="tableData"
+      row-key="id"
+      ref="table"
+      header-row-class-name="table-header-row"
+      header-cell-class-name="table-header-cell"
+      row-class-name="table-row"
+      cell-class-name="table-cell"
+      :height="tableHeight"
+    >
+      <el-table-column v-if="multipleMode" align="center" type="selection" width="50"></el-table-column>
+      <el-table-column prop="id" label="ID">
+        <template slot="header" slot-scope="{column}">
+          <sortable-header :column="column" :current-sort="sort" @changeSort="changeSort"></sortable-header>
+        </template>
+      </el-table-column>
+      <!--<el-table-column prop="username" label="用户名"></el-table-column>-->
+      <el-table-column prop="nickname" label="昵称"></el-table-column>
+      <el-table-column label="头像" min-width="80">
+        <template slot-scope="{ row }">
+          <el-image
+            style="width: 30px; height: 30px"
+            :src="row.avatar"
+            fit="cover"
+            :preview-src-list="[row.avatar]"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column prop="sex" label="性别" :formatter="sexFormatter"></el-table-column>
+      <el-table-column prop="phone" label="手机"></el-table-column>
+      <el-table-column prop="user.nickname" label="邀请人"></el-table-column>
 
-            <el-table-column prop="registerTime" label="注册时间" min-width="120">
-            </el-table-column>
-            <el-table-column prop="authorities" label="权限">
-                <template slot-scope="{ row }">
-                    <el-tag v-for="item in row.authorities" v-bind:key="item.id">{{ item.description }}</el-tag>
-                </template>
-            </el-table-column>
-            <!--            <el-table-column
+      <el-table-column prop="registerTime" label="注册时间" min-width="120"></el-table-column>
+      <el-table-column prop="authorities" label="权限">
+        <template slot-scope="{ row }">
+          <el-tag v-for="item in row.authorities" v-bind:key="item.id">{{ item.description }}</el-tag>
+        </template>
+      </el-table-column>
+      <!--            <el-table-column
                                 label="操作"
                                 align="center"
                                 fixed="right"
@@ -71,158 +64,167 @@
                                 <el-button @click="editRow(row)" type="primary" size="mini" plain>编辑</el-button>
                                 <el-button @click="deleteRow(row)" type="danger" size="mini" plain>删除</el-button>
                             </template>
-                        </el-table-column>-->
-        </el-table>
-        <div class="pagination-wrapper">
-            <div class="multiple-mode-wrapper">
-                <el-button v-if="!multipleMode"
-                           @click="toggleMultipleMode(true)">批量编辑
-                </el-button>
-                <el-button-group v-else>
-                    <el-button @click="operation1">批量操作1</el-button>
-                    <el-button @click="operation2">批量操作2</el-button>
-                    <el-button @click="toggleMultipleMode(false)">取消</el-button>
-                </el-button-group>
-            </div>
-            <el-pagination background @size-change="onSizeChange"
-                           @current-change="onCurrentChange" :current-page="page"
-                           :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
-                           layout="total, sizes, prev, pager, next, jumper"
-                           :total="totalElements">
-            </el-pagination>
-        </div>
-
+      </el-table-column>-->
+    </el-table>
+    <div class="pagination-wrapper">
+      <div class="multiple-mode-wrapper">
+        <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
+        <el-button-group v-else>
+          <el-button @click="operation1">批量操作1</el-button>
+          <el-button @click="operation2">批量操作2</el-button>
+          <el-button @click="toggleMultipleMode(false)">取消</el-button>
+        </el-button-group>
+      </div>
+      <el-pagination
+        background
+        @size-change="onSizeChange"
+        @current-change="onCurrentChange"
+        :current-page="page"
+        :page-sizes="[10, 20, 30, 40, 50]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalElements"
+      ></el-pagination>
     </div>
+  </div>
 </template>
 <script>
-    import {mapState} from "vuex";
-    import pageableTable from "@/mixins/pageableTable";
+import { mapState } from "vuex";
+import pageableTable from "@/mixins/pageableTable";
 
-    export default {
-        name: 'UserList',
-        mixins: [pageableTable],
-        created() {
-            this.getData();
-        },
-        data() {
-            return {
-                multipleMode: false,
-                search: "",
-                url: "/user/all",
-                downloading: false,
-                sexOptions: [{"label": "男", "value": "男"}, {"label": "女", "value": "女"}],
-                /*                identityOptions: [
+export default {
+  name: "UserList",
+  mixins: [pageableTable],
+  created() {
+    this.getData();
+  },
+  data() {
+    return {
+      multipleMode: false,
+      search: "",
+      url: "/user/all",
+      downloading: false,
+      sexOptions: [
+        { label: "男", value: "男" },
+        { label: "女", value: "女" }
+      ]
+      /*                identityOptions: [
                                     {label: '普通会员', value: 34},
                                     {label: '特约会员', value: 33},
                                     {label: '总经销', value: 32},
                                 ],
                                 identityId: '',*/
-            }
-        },
-        computed: {
-            ...mapState([]),
-            selection() {
-                return this.$refs.table.selection.map(i => i.id);
-            }
-        },
-        methods: {
-            identityFormatter(row, column, cellValue, index) {
-                let selectedOption = this.identityOptions.find(i => i.value === cellValue);
-                if (selectedOption) {
-                    return selectedOption.label;
-                }
-                return '';
-            },
-            sexFormatter(row, column, cellValue, index) {
-                let selectedOption = this.sexOptions.find(i => i.value === cellValue);
-                if (selectedOption) {
-                    return selectedOption.label;
-                }
-                return '';
-            },
-            beforeGetData() {
-                return {
-                    search: this.search,
-                    sort: "registerTime,desc"
-                    /*                    query: {
+    };
+  },
+  computed: {
+    ...mapState([]),
+    selection() {
+      return this.$refs.table.selection.map(i => i.id);
+    }
+  },
+  methods: {
+    identityFormatter(row, column, cellValue, index) {
+      let selectedOption = this.identityOptions.find(
+        i => i.value === cellValue
+      );
+      if (selectedOption) {
+        return selectedOption.label;
+      }
+      return "";
+    },
+    sexFormatter(row, column, cellValue, index) {
+      let selectedOption = this.sexOptions.find(i => i.value === cellValue);
+      if (selectedOption) {
+        return selectedOption.label;
+      }
+      return "";
+    },
+    beforeGetData() {
+      return {
+        search: this.search,
+        sort: "registerTime,desc"
+        /*                    query: {
                                             identityId: this.identityId
                                         }*/
-                };
-            },
-            toggleMultipleMode(multipleMode) {
-                this.multipleMode = multipleMode;
-                if (!multipleMode) {
-                    this.$refs.table.clearSelection();
-                }
-            },
-            addRow() {
-                this.$router.push({
-                    path: "/userEdit",
-                    query: {
-                        ...this.$route.query
-                    }
-                });
-            },
-            editRow(row) {
-                this.$router.push({
-                    path: "/userEdit",
-                    query: {
-                        id: row.id
-                    }
-                });
-            },
-            download() {
-                this.downloading = true;
-                this.$axios
-                    .get("/user/excel", {
-                        responseType: "blob",
-                        params: {size: 10000}
-                    })
-                    .then(res => {
-                        console.log(res);
-                        this.downloading = false;
-                        const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
-                        const link = document.createElement("a");
-                        link.href = downloadUrl;
-                        link.setAttribute(
-                            "download",
-                            res.headers["content-disposition"].split("filename=")[1]
-                        );
-                        document.body.appendChild(link);
-                        link.click();
-                        link.remove();
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.downloading = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            operation1() {
-                this.$notify({
-                    title: '提示',
-                    message: this.selection
-                });
-            },
-            operation2() {
-                this.$message('操作2');
-            },
-            deleteRow(row) {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/user/del/${row.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.getData();
-                }).catch(action => {
-                    if (action === 'cancel') {
-                        this.$message.info('删除取消');
-                    } else {
-                        this.$message.error('删除失败');
-                    }
-                })
-            },
-        },
+      };
+    },
+    toggleMultipleMode(multipleMode) {
+      this.multipleMode = multipleMode;
+      if (!multipleMode) {
+        this.$refs.table.clearSelection();
+      }
+    },
+    addRow() {
+      this.$router.push({
+        path: "/userEdit",
+        query: {
+          ...this.$route.query
+        }
+      });
+    },
+    editRow(row) {
+      this.$router.push({
+        path: "/userEdit",
+        query: {
+          id: row.id
+        }
+      });
+    },
+    download() {
+      this.downloading = true;
+      this.$axios
+        .get("/user/excel", {
+          responseType: "blob",
+          params: { size: 10000 }
+        })
+        .then(res => {
+          console.log(res);
+          this.downloading = false;
+          const downloadUrl = window.URL.createObjectURL(new Blob([res.data]));
+          const link = document.createElement("a");
+          link.href = downloadUrl;
+          link.setAttribute(
+            "download",
+            res.headers["content-disposition"].split("filename=")[1]
+          );
+          document.body.appendChild(link);
+          link.click();
+          link.remove();
+        })
+        .catch(e => {
+          console.log(e);
+          this.downloading = false;
+          this.$message.error(e.error);
+        });
+    },
+    operation1() {
+      this.$notify({
+        title: "提示",
+        message: this.selection
+      });
+    },
+    operation2() {
+      this.$message("操作2");
+    },
+    deleteRow(row) {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/user/del/${row.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.getData();
+        })
+        .catch(action => {
+          if (action === "cancel") {
+            this.$message.info("删除取消");
+          } else {
+            this.$message.error("删除失败");
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/user/VipUserEdit.vue

@@ -1,174 +1,192 @@
 <template>
-    <div class="edit-view">
-        <el-form :model="formData" :rules="rules" ref="form" label-width="108px" label-position="right" size="small"
-                 style="max-width: 500px;">
-            <!--<el-form-item prop="userId" label="用户Id">
+  <div class="edit-view">
+    <el-form
+      :model="formData"
+      :rules="rules"
+      ref="form"
+      label-width="108px"
+      label-position="right"
+      size="small"
+      style="max-width: 500px;"
+    >
+      <!--<el-form-item prop="userId" label="用户Id">
                 <el-input v-model="formData.userId"/>
-            </el-form-item>-->
-            <el-form-item prop="avatar" label="头像">
-                <el-image :src="formData.user.avatar"></el-image>
-            </el-form-item>
-            <el-form-item prop="nickname" label="昵称">
-                <el-input readonly v-model="formData.user.nickname"></el-input>
-            </el-form-item>
-            <el-form-item prop="sex" label="性别">
-                <el-input readonly v-model="formData.user.sex"></el-input>
-            </el-form-item>
-            <el-form-item prop="phone" label="手机号">
-                <el-input readonly v-model="formData.phone"></el-input>
-            </el-form-item>
-            <el-form-item prop="startTime" label="会员开始时间">
-                <el-date-picker
-                        :readonly="true"
-                        v-model="formData.startTime"
-                        type="datetime"
-                        value-format="yyyy-MM-dd HH:mm:ss"
-                        placeholder="选择日期时间">
-                </el-date-picker>
-            </el-form-item>
-<!--            <el-form-item prop="vipType" label="会员类型">
+      </el-form-item>-->
+      <el-form-item prop="avatar" label="头像">
+        <el-image :src="formData.user.avatar"></el-image>
+      </el-form-item>
+      <el-form-item prop="nickname" label="昵称">
+        <el-input readonly v-model="formData.user.nickname"></el-input>
+      </el-form-item>
+      <el-form-item prop="sex" label="性别">
+        <el-input readonly v-model="formData.user.sex"></el-input>
+      </el-form-item>
+      <el-form-item prop="phone" label="手机号">
+        <el-input readonly v-model="formData.phone"></el-input>
+      </el-form-item>
+      <el-form-item prop="startTime" label="会员开始时间">
+        <el-date-picker
+          :readonly="true"
+          v-model="formData.startTime"
+          type="datetime"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          placeholder="选择日期时间"
+        ></el-date-picker>
+      </el-form-item>
+      <!--            <el-form-item prop="vipType" label="会员类型">
                 <el-input v-model="formData.vipType"/>
-            </el-form-item>-->
-            <!--<el-form-item prop="identityId" label="会员身份">
+      </el-form-item>-->
+      <!--<el-form-item prop="identityId" label="会员身份">
                 <el-select v-model="formData.identityId" clearable filterable placeholder="请选择">
                     <el-option v-for="item in identityOptions" :key="item.id"
                                :label="item.name" :value="item.id">
                     </el-option>
                 </el-select>
-            </el-form-item>-->
+      </el-form-item>-->
 
-            <el-form-item prop="fansNum" label="粉丝">
-                <el-input readonly v-model="formData.fansNum"/>
-            </el-form-item>
-            <el-form-item prop="money" label="余额">
-                <el-input readonly v-model="formData.money"/>
-            </el-form-item>
-            <el-form-item>
-                <el-button @click="showDialog=true" type="primary" size="mini" plain>升级</el-button>
-                <!--<el-button @click="onSave" :loading="saving" type="primary">保存</el-button>-->
-                <!--<el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除</el-button>-->
-                <el-button @click="$router.go(-1)">返回</el-button>
-            </el-form-item>
-        </el-form>
+      <el-form-item prop="fansNum" label="粉丝">
+        <el-input readonly v-model="formData.fansNum" />
+      </el-form-item>
+      <el-form-item prop="money" label="余额">
+        <el-input readonly v-model="formData.money" />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="showDialog=true" type="primary" size="mini" plain>升级</el-button>
+        <!--<el-button @click="onSave" :loading="saving" type="primary">保存</el-button>-->
+        <!--<el-button @click="onDelete" :loading="saving" type="danger" v-if="formData.id">删除</el-button>-->
+        <el-button @click="$router.go(-1)">返回</el-button>
+      </el-form-item>
+    </el-form>
 
-        <el-dialog :visible.sync="showDialog" width="400px">
-            <el-form label-width="80px" label-position="right" size="small">
-                <el-form-item prop="dealerRuleId" label="选择套餐">
-                    <el-select v-model="dealerRuleId">
-                        <el-option v-for="item in dealerRules" :key="item.id" :value="item.id" :label="item.name" />
-                    </el-select>
-                </el-form-item>
-            </el-form>
-            <div slot="footer">
-                <el-button type="primary" size="mini" @click="becomeDealer" :loading="saving">开通</el-button>
-            </div>
-        </el-dialog>
-    </div>
+    <el-dialog :visible.sync="showDialog" width="400px">
+      <el-form label-width="80px" label-position="right" size="small">
+        <el-form-item prop="dealerRuleId" label="选择套餐">
+          <el-select v-model="dealerRuleId">
+            <el-option
+              v-for="item in dealerRules"
+              :key="item.id"
+              :value="item.id"
+              :label="item.name"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button type="primary" size="mini" @click="becomeDealer" :loading="saving">开通</el-button>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 <script>
-    export default {
-        name: 'VipUserEdit',
-        created() {
-            if (this.$route.query.id) {
-                this.$http
-                    .get('vipUser/get/' + this.$route.query.id)
-                    .then(res => {
-                        this.formData = res;
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    });
-            }
-            this.$http.get("/vipIdentity/all").then(res => {
-                this.identityOptions = res.content;
-            });
-            this.$http
-                .get('dealerRule/backAll')
-                .then(res => {
-                    this.dealerRules = res.content;
-                })
-                .catch(e => {
-                    console.log(e);
-                    this.$message.error(e.error);
-                });
-        },
-        data() {
-            return {
-                saving: false,
-                formData: {
-                    user: {}
-                },
-                rules: {},
-                identityOptions: [],
-/*                vipIdentities: [],*/
-                showDialog: false,
-                dealerRuleId: '',
-                dealerRules: {}
-            }
-        },
-        methods: {
-            onSave() {
-                this.$refs.form.validate((valid) => {
-                    if (valid) {
-                        this.submit();
-                    } else {
-                        return false;
-                    }
-                });
-            },
-            submit() {
-                let data = {...this.formData};
-
-                this.saving = true;
-                this.$http
-                    .post('/vipUser/save', data, {body: 'json'})
-                    .then(res => {
-                        this.saving = false;
-                        this.$message.success('成功');
-                        this.$router.go(-1);
-                    })
-                    .catch(e => {
-                        console.log(e);
-                        this.saving = false;
-                        this.$message.error(e.error);
-                    });
-            },
-            onDelete() {
-                this.$alert('删除将无法恢复，确认要删除么？', '警告', {type: 'error'}).then(() => {
-                    return this.$http.post(`/vipUser/del/${this.formData.id}`)
-                }).then(() => {
-                    this.$message.success('删除成功');
-                    this.$router.go(-1);
-                }).catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                    }
-                })
-            },
-            becomeDealer() {
-                this.saving = true;
-                this.$alert('确认要开通么？', '提醒', {type: 'error'}).then(() => {
-                    return this.$http.get('/dealer/become',{
-                        userId: this.formData.userId,
-                        dealerRuleId: this.dealerRuleId
-                    })
-                }).then(() => {
-                    this.$message.success('开通成功');
-                    // this.$router.go(-1);
-                    this.showDialog = false;
-                    this.saving = false;
-                }).catch(e => {
-                    if (e !== 'cancel') {
-                        console.log(e);
-                        this.$message.error(e.error);
-                        this.saving = false;
-                    }
-                })
-            },
+export default {
+  name: "VipUserEdit",
+  created() {
+    if (this.$route.query.id) {
+      this.$http
+        .get("vipUser/get/" + this.$route.query.id)
+        .then(res => {
+          this.formData = res;
+        })
+        .catch(e => {
+          console.log(e);
+          this.$message.error(e.error);
+        });
+    }
+    this.$http.get("/vipIdentity/all").then(res => {
+      this.identityOptions = res.content;
+    });
+    this.$http
+      .get("dealerRule/backAll")
+      .then(res => {
+        this.dealerRules = res.content;
+      })
+      .catch(e => {
+        console.log(e);
+        this.$message.error(e.error);
+      });
+  },
+  data() {
+    return {
+      saving: false,
+      formData: {
+        user: {}
+      },
+      rules: {},
+      identityOptions: [],
+      /*                vipIdentities: [],*/
+      showDialog: false,
+      dealerRuleId: "",
+      dealerRules: {}
+    };
+  },
+  methods: {
+    onSave() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.submit();
+        } else {
+          return false;
         }
+      });
+    },
+    submit() {
+      let data = { ...this.formData };
+
+      this.saving = true;
+      this.$http
+        .post("/vipUser/save", data, { body: "json" })
+        .then(res => {
+          this.saving = false;
+          this.$message.success("成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          console.log(e);
+          this.saving = false;
+          this.$message.error(e.error);
+        });
+    },
+    onDelete() {
+      this.$alert("删除将无法恢复，确认要删除么？", "警告", { type: "error" })
+        .then(() => {
+          return this.$http.post(`/vipUser/del/${this.formData.id}`);
+        })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.$router.go(-1);
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+          }
+        });
+    },
+    becomeDealer() {
+      this.saving = true;
+      this.$alert("确认要开通么？", "提醒", { type: "error" })
+        .then(() => {
+          return this.$http.get("/dealer/become", {
+            userId: this.formData.userId,
+            dealerRuleId: this.dealerRuleId
+          });
+        })
+        .then(() => {
+          this.$message.success("开通成功");
+          // this.$router.go(-1);
+          this.showDialog = false;
+          this.saving = false;
+        })
+        .catch(e => {
+          if (e !== "cancel") {
+            console.log(e);
+            this.$message.error(e.error);
+            this.saving = false;
+          }
+        });
     }
+  }
+};
 </script>
 <style lang="less" scoped>
 </style>

src/main/vue/src/views/user/VipUserList.vue

@@ -115,7 +115,7 @@
     </div>
 </template>
 <script>
-    import {mapState} from "vuex";
+    // import {mapState} from "vuex";
     import pageableTable from "@/mixins/pageableTable";
     import startOfDay from 'date-fns/startOfDay';
     import endOfDay from 'date-fns/endOfDay';
@@ -128,9 +128,6 @@
         mixins: [pageableTable],
         created() {
             this.getData();
-  /*          this.$http.get("/vipIdentity/all").then(res => {
-                this.identityOptions = res.content;
-            });*/
         },
         data() {
             return {
@@ -218,7 +215,7 @@
                 return "";
             },
             onCreate() {
-                const date = new Date();
+                // const date = new Date();
                 this.page = Number(this.$route.query.page) || 1;
                 if (this.$route.query.sort) {
                     let sort = {};