Merge branch 'master' of gitee.com:beijing_hongye_huicheng/lilishop-ui

buyer/src/config/index.js

@@ -19,5 +19,9 @@ module.exports = {
   aMapSwitch:false, //是否开启高德定位
   enableCDN: true, //生产环境 是否启用cdn加载 vue等js
   port: 10000, //端口
-  inputMaxLength:'140' //全局输入框默认最大输入长度字
+  inputMaxLength:'140', //全局输入框默认最大输入长度字
+
+
+  PC_DOMAIN: "https://pc-b2b2c.pickmall.cn", // PC端域名
+  WAP_DOMAIN: "https://m-b2b2c.pickmall.cn", // WAP端域名
 };

buyer/src/pages/home/memberCenter/Distribution.vue

@@ -24,7 +24,7 @@
 
         <FormItem>
           <Button type="primary" :loading="applyLoading" @click="apply"
-            >提交申请</Button
+          >提交申请</Button
           >
         </FormItem>
       </Form>
@@ -34,7 +34,7 @@
       <Alert type="success">
         您提交的信息正在审核
         <template slot="desc"
-          >提交认证申请后，工作人员将在三个工作日进行核对完成审核</template
+        >提交认证申请后，工作人员将在三个工作日进行核对完成审核</template
         >
       </Alert>
     </div>
@@ -42,11 +42,11 @@
     <div v-if="status === 2">
       <div class="tips">
 
-          <p>分销下线付款之后会生成分销订单。</p>
+        <p>分销下线付款之后会生成分销订单。</p>
-          <p>
+        <p>
-            冻结金额：用户提现金额即为冻结金额，审核通过后扣除冻结金额，审核拒绝之后冻结金额返回可提现金额。
+          冻结金额：用户提现金额即为冻结金额，审核通过后扣除冻结金额，审核拒绝之后冻结金额返回可提现金额。
-          </p>
+        </p>
-          <p>可提现金额：分销订单佣金T+1解冻后可变为可提现金额。</p>
+        <p>可提现金额：分销订单佣金T+1解冻后可变为可提现金额。</p>
 
       </div>
 
@@ -54,7 +54,7 @@
         <div class="mb_20 account-price">
           <span class="subTips">可提现金额：</span>
           <span class="fontsize_48 global_color"
-            >￥{{ result.canRebate | unitPrice }}</span
+          >￥{{ result.canRebate | unitPrice }}</span
           >
           <span class="subTips">冻结金额：</span>
           <span class="">￥{{ result.commissionFrozen | unitPrice }}</span>
@@ -65,7 +65,7 @@
             size="small"
             class="ml_20"
             @click="withdrawApplyModal = true"
-            >申请提现</Button
+          >申请提现</Button
           >
         </div>
       </div>
@@ -102,13 +102,13 @@
                 size="small"
                 style="margin-right: 5px"
                 @click="fenxiao(row)"
-                >分销商品</Button
+              >分销商品</Button
               >
               <Button
                 type="error"
                 size="small"
                 @click="selectGoods(row.id, false)"
-                >取消选择</Button
+              >取消选择</Button
               >
             </template>
           </Table>
@@ -156,7 +156,7 @@
                 size="small"
                 style="margin-right: 5px"
                 @click="selectGoods(row.id, true)"
-                >选择商品</Button
+              >选择商品</Button
               >
             </template>
           </Table>
@@ -197,8 +197,8 @@
                   row.distributionCashStatus == "APPLY"
                     ? "待处理"
                     : row.distributionCashStatus == "VIA_AUDITING"
-                    ? "通过"
+                      ? "通过"
-                    : "拒绝"
+                      : "拒绝"
                 }}</span
               >
             </template>
@@ -222,11 +222,27 @@
       <Alert type="error">
         分销功能暂未开启
         <template slot="desc"
-          >提交认证申请后，工作人员将在三个工作日进行核对完成审核</template
+        >提交认证申请后，工作人员将在三个工作日进行核对完成审核</template
         >
       </Alert>
     </div>
+    <!-- 分销资格被清退 -->
+    <div v-if="status === 4">
+      <Alert type="error">
+        您的分销资格已被清退。请联系管理员或进行申诉
 
+        <Button style="margin-left: 50px;" type="warning" @click="repaying">申诉</Button>
+      </Alert>
+    </div>
+    <!-- 分销申诉审核 -->
+    <div v-if="status === 5">
+      <Alert type="success">
+        您提交的申诉正在审核
+        <template slot="desc"
+        >提交认证申请后，工作人员将在三个工作日进行核对完成审核</template
+        >
+      </Alert>
+    </div>
     <Modal v-model="withdrawApplyModal" width="530">
       <p slot="header">
         <Icon type="edit"></Icon>
@@ -234,7 +250,7 @@
       </p>
       <div>
         <Input v-model="withdrawPrice" size="large" number maxlength="9"
-          ><span slot="append">元</span></Input
+        ><span slot="append">元</span></Input
         >
       </div>
       <div slot="footer" style="text-align: center">
@@ -243,21 +259,39 @@
     </Modal>
     <Modal v-model="qrcodeShow" title="分销商品" width="800">
       <Alert type="warning"> 下载二维码或者复制链接分享商品 </Alert>
-      <div style="width: 200px; height: 200px; border: 1px solid #eee">
+      <div class="qrcode">
-        <vue-qr
+        <div style="width: 150px; height: 150px; border: 1px solid #eee">
-          :text="qrcode"
+          <vue-qr
-          :callback="qrcodeData"
+            :text="qrcode"
-          :margin="0"
+            :callback="qrcodeData"
-          colorDark="#000"
+            :margin="0"
-          colorLight="#fff"
+            colorDark="#000"
-          :size="200"
+            colorLight="#fff"
-        ></vue-qr>
+            :size="150"
-        <Button class="download-btn" type="success" @click="downloadQrcode"
+          ></vue-qr>
+          <div class="qrcode-platform">PC端</div>
+          <Button class="download-btn" type="success" @click="downloadQrcode"
           >下载二维码</Button
-        >
+          >
+        </div>
+        <div style="width: 150px; height: 150px; border: 1px solid #eee">
+          <vue-qr
+            :text="qrcodeH5"
+            :callback="qrcodeDataH5"
+            :margin="0"
+            colorDark="#000"
+            colorLight="#fff"
+            :size="150"
+          ></vue-qr>
+          <div class="qrcode-platform">移动应用端</div>
+          <Button class="download-btn" type="success" @click="downloadQrcodeH5"
+          >下载二维码</Button
+          >
+        </div>
       </div>
-      <div class="mt_10">
+
-        商品链接：<Input style="width: 400px" v-model="qrcode"></Input>
+      <div class="mt_10" style="margin-top: 100px;">
+        商品链接：<Input style="width: 600px" v-model="qrcode"></Input>
       </div>
     </Modal>
   </div>
@@ -280,6 +314,7 @@ export default {
   components: { vueQr },
   data() {
     return {
+      config:require('@/config'),
       status: 0, // 申请状态，0为未申请 1 申请中 2 申请完成 3 功能暂未开启
       applyForm: {}, // 申请表单
       rules: {
@@ -364,8 +399,10 @@ export default {
         order: "desc",
       },
       qrcode: "", // 二维码
+      qrcodeH5:"",//H5二维码
       qrcodeShow: false, // 显示二维码
       base64Img: "", // base64编码
+      base64ImgH5: "", // base64H5编码
       goodsNameCurr: "", // 当前分销商品名称
     };
   },
@@ -406,6 +443,10 @@ export default {
       // 二维码base64地址
       this.base64Img = data64;
     },
+    qrcodeDataH5(data64) {
+      // 二维码H5端base64地址
+      this.base64ImgH5 = data64;
+    },
     downloadQrcode() {
       // 下载二维码
       let a = document.createElement("a"); // 生成一个a元素
@@ -414,6 +455,14 @@ export default {
       a.href = this.base64Img; // 将生成的URL设置为a.href属性
       a.dispatchEvent(event); // 触发a的单击事件
     },
+    downloadQrcodeH5(){
+      // 下载H5二维码
+      let a = document.createElement("a"); // 生成一个a元素
+      let event = new MouseEvent("click"); // 创建一个单击事件
+      a.download = this.goodsNameCurr || "photo";
+      a.href = this.base64ImgH5; // 将生成的URL设置为a.href属性
+      a.dispatchEvent(event); // 触发a的单击事件
+    },
     tabPaneChange(tab) {
       // tab栏切换
       if (tab === "goodsChecked") {
@@ -453,7 +502,8 @@ export default {
     },
     fenxiao(row) {
       // 分销商品
-      this.qrcode = `${location.origin}/goodsDetail?skuId=${row.skuId}&goodsId=${row.goodsId}&distributionId=${this.result.id}`;
+      this.qrcode = `${this.config.PC_DOMAIN}/goodsDetail?skuId=${row.skuId}&goodsId=${row.goodsId}&distributionId=${this.result.id}`;
+      this.qrcodeH5 = `${this.config.WAP_DOMAIN}/pages/product/goods?skuId=${row.skuId}&goodsId=${row.goodsId}&distributionId=${this.result.id}`;
       this.goodsNameCurr = row.goodsName;
       this.qrcodeShow = true;
     },
@@ -469,19 +519,32 @@ export default {
         if (res.success) this.logData = res.result;
       });
     },
+    //申诉
+    repaying(){
+      applyDistribution().then((res) => {
+        this.applyLoading = false;
+        if (res.success) {
+          this.$Message.success("申诉已提交，请等待管理员审核");
+          // this.status = 1;
+        }
+      });
+    },
     distribution() {
       // 获取分销商信息
       distribution().then((res) => {
         if (res.result) {
           this.result = res.result;
           let type = res.result.distributionStatus;
-
           if (type === "PASS") {
             this.status = 2;
             this.getGoodsData();
-          } else if (type === "RETREAT" || type === "REFUSE") {
+          } else if ( type === "REFUSE") {
             this.status = 0;
-          } else {
+          } else if (type === "RETREAT") {
+            this.status = 4;
+          }else if (type === "APPEAL") {
+            this.status = 5;
+          }else {
             this.status = 1;
           }
         } else if (!res.data.success && res.data.code === 22000) {
@@ -523,9 +586,11 @@ export default {
   }
 }
 .download-btn {
-  position: relative;
+  // position: relative;
-  top: -200px;
+  // top: -200px;
-  left: 200px;
+  // left: 200px;
+  margin-left: 25px;
+  margin-top: 5px
 }
 /deep/ .ivu-alert-message {
   p {
@@ -540,4 +605,15 @@ export default {
     margin: 6px 0;
   }
 }
+.qrcode{
+  display: flex;
+  justify-content: space-evenly;
+  padding-top: 10px
+
+}
+.qrcode-platform{
+  text-align: center;
+  font-size: 14px;
+  margin: 5px;
+}
 </style>

manager/src/api/index.js

@@ -261,6 +261,38 @@ export const searchPermission = (params) => {
 /****************************** 权限结束 */
 
 
+/****************************** 店铺权限 */
+// 获取全部权限数据
+export const getStoreAllPermissionList = (params) => {
+  return getRequest("/permission/storeMenu/tree", params);
+};
+
+// 获取全部权限数据
+export const getStoreCurrentPermissionList = (params) => {
+  return getRequest("/permission/storeMenu/memberMenu", params);
+};
+
+// 添加权限
+export const addStorePermission = (params) => {
+  return postRequest("/permission/storeMenu", params);
+};
+
+// 编辑权限
+export const editStorePermission = (params) => {
+  return putRequest(`/permission/storeMenu/${params.id}`, params);
+};
+// 删除权限
+export const deleteStorePermission = (ids, params) => {
+  return deleteRequest(`/permission/storeMenu/${ids}`, params);
+};
+// 搜索权限
+export const searchStorePermission = (params) => {
+  return getRequest("/permission/storeMenu", params);
+};
+
+/****************************** 权限结束 */
+
+
 // 分页获取日志数据
 export const getLogListData = (params) => {
   return getRequest("/setting/log/getAllByPage", params);

manager/src/views/sys/menu-manage/menu.vue

@@ -0,0 +1,576 @@
+<template>
+  <div class="search">
+    <Card>
+      <!-- 筛选项和操作按钮 -->
+      <Row class="operation">
+        <i-switch
+          v-model="strict"
+          class="selectModel"
+          size="large"
+          style="margin-right: 5px"
+        >
+          <span slot="open">级联</span>
+          <span slot="close">单选</span>
+        </i-switch>
+        <Button @click="addRootMenu">添加顶级菜单</Button>
+        <Button @click="addMenu" type="primary">添加子菜单</Button>
+        <Button @click="delAll">批量删除</Button>
+        <Dropdown @on-click="handleDropdown">
+          <Button>
+            更多操作
+            <Icon type="md-arrow-dropdown"></Icon>
+          </Button>
+          <DropdownMenu slot="list">
+            <DropdownItem name="refresh">刷新</DropdownItem>
+            <DropdownItem name="expandOne">收合所有</DropdownItem>
+            <DropdownItem name="expandTwo">展开一级</DropdownItem>
+            <DropdownItem name="expandThree">展开两级</DropdownItem>
+            <DropdownItem name="expandAll">展开所有</DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+      </Row>
+      <!-- 页面主体，左侧树结构，右侧表单项 -->
+      <Row type="flex" justify="start">
+        <Col :md="8" :lg="8" :xl="6">
+          <Alert show-icon>
+            当前选择编辑：
+            <span class="select-title">{{ editTitle }}</span>
+            <a class="select-clear" v-if="form.id" @click="cancelEdit">取消选择</a>
+          </Alert>
+          <Input
+            v-model="searchKey"
+            suffix="ios-search"
+            @on-change="search"
+            placeholder="输入菜单名搜索"
+            clearable
+          />
+          <div class="tree-bar" :style="{ maxHeight: maxHeight }">
+            <Tree
+              ref="tree"
+              :data="data"
+              show-checkbox
+              :render="renderContent"
+              @on-select-change="selectTree"
+              @on-check-change="changeSelect"
+              :check-strictly="!strict"
+            ></Tree>
+            <Spin size="large" fix v-if="loading"></Spin>
+          </div>
+        </Col>
+        <Col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
+          <Form ref="form" :model="form" :label-width="110" :rules="formValidate">
+            <FormItem label="类型" prop="type">
+              <div v-show="form.level == 0">
+                <Icon
+                  type="ios-navigate-outline"
+                  size="16"
+                  style="margin-right: 5px"
+                ></Icon>
+                <span>顶级菜单</span>
+              </div>
+              <div v-show="form.level == 1 || form.level == 2">
+                <Icon
+                  type="ios-list-box-outline"
+                  size="16"
+                  style="margin-right: 5px"
+                ></Icon>
+                <span>页面菜单</span>
+              </div>
+            </FormItem>
+            <FormItem label="菜单名称" prop="title">
+              <Input class="menu-input" v-model="form.title" />
+            </FormItem>
+            <FormItem
+              label="路由地址"
+              prop="path"
+              v-if="form.level != 0"
+              class="block-tool"
+            >
+              <Tooltip
+                placement="right"
+                content="路由地址，英文唯一，跳转页面，路径展示用 "
+              >
+                <Input class="menu-input" v-model="form.path" />
+              </Tooltip>
+            </FormItem>
+            <FormItem label="路由名称" prop="name" class="block-tool">
+              <Tooltip
+                placement="right"
+                content="路由name，需英文唯一，跳转页面用"
+                transfer
+              >
+                <Input class="menu-input" v-model="form.name" />
+              </Tooltip>
+            </FormItem>
+            <FormItem label="文件路径" prop="frontRoute" v-if="form.level != 0">
+              <Input class="menu-input" v-model="form.frontRoute" />
+            </FormItem>
+            <FormItem label="权限url" v-if="form.level != 0" class="block-tool">
+              <Tooltip placement="right" content="*号模糊匹配，逗号分割" transfer>
+                <Input class="menu-input" v-model="form.permission" type="textarea" maxlength="1000"/>
+              </Tooltip>
+            </FormItem>
+            <FormItem label="排序值" prop="sortOrder">
+              <Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
+                <InputNumber :max="1000" :min="0" v-model="form.sortOrder"></InputNumber>
+              </Tooltip>
+            </FormItem>
+            <Form-item>
+              <Button
+                style="margin-right: 5px"
+                @click="submitEdit"
+                :loading="submitLoading"
+                type="primary"
+              >保存
+              </Button>
+              <Button @click="handleReset">重置</Button>
+            </Form-item>
+          </Form>
+        </Col>
+      </Row>
+    </Card>
+
+    <Modal
+      draggable
+      :title="modalTitle"
+      v-model="menuModalVisible"
+      :mask-closable="false"
+      :width="500"
+      :styles="{ top: '30px' }"
+    >
+      <Form ref="formAdd" :model="formAdd" :label-width="100" :rules="formValidate">
+        <div v-if="showParent">
+          <FormItem label="上级节点：">{{ parentTitle }}</FormItem>
+        </div>
+        <FormItem label="类型" prop="type">
+          <div v-show="formAdd.level == 0">
+            <Icon type="ios-navigate-outline" size="16" style="margin-right: 5px"></Icon>
+            <span>顶级菜单</span>
+          </div>
+          <div v-show="formAdd.level != 0">
+            <Icon type="ios-list-box-outline" size="16" style="margin-right: 5px"></Icon>
+            <span>页面菜单</span>
+          </div>
+        </FormItem>
+        <FormItem label="菜单名称" prop="title">
+          <Input class="menu-input" v-model="formAdd.title" />
+        </FormItem>
+
+        <FormItem label="路由地址" prop="path" v-if="formAdd.level != 0">
+          <Input v-model="formAdd.path" />
+        </FormItem>
+        <FormItem label="路由名称" prop="name" class="block-tool">
+          <Tooltip placement="right" content="路由name，需英文唯一，跳转页面用">
+            <Input v-model="formAdd.name" />
+          </Tooltip>
+        </FormItem>
+        <FormItem label="文件路径" prop="frontRoute" v-if="formAdd.level != 0">
+          <Input v-model="formAdd.frontRoute" />
+        </FormItem>
+        <FormItem label="权限url" v-if="formAdd.level != 0">
+          <Input v-model="formAdd.permission" type="textarea" />
+          <div class="desc">*号模糊匹配，逗号分割</div>
+        </FormItem>
+        <FormItem label="排序值" prop="sortOrder">
+          <Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
+            <InputNumber :max="1000" :min="0" v-model="formAdd.sortOrder"></InputNumber>
+          </Tooltip>
+        </FormItem>
+      </Form>
+      <div slot="footer">
+        <Button type="text" @click="menuModalVisible = false">取消</Button>
+        <Button type="primary" :loading="submitLoading" @click="submitAdd">提交</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import {
+  getAllPermissionList,
+  addPermission,
+  editPermission,
+  deletePermission,
+  searchPermission,
+} from "@/api/index";
+import util from "@/libs/util.js";
+import Cookies from "js-cookie";
+export default {
+  name: "menu-manage",
+  data() {
+    return {
+      loading: true, // 加载状态
+      strict: true, // 级联 单选
+      maxHeight: "500px", // 最大高度
+      expandLevel: 1, // 展开层级
+      menuModalVisible: false, // 添加菜单modal
+      selectList: [], // 已选列表
+      selectCount: 0, // 所选数量
+      showParent: false, // 展示父级
+      searchKey: "", // 搜索关键词
+      parentTitle: "", // 父级标题
+      editTitle: "", // 编辑标题
+      modalTitle: "", // modal标题
+      form: {
+        // 表单数据
+        id: "",
+        title: "",
+        name: "",
+        path: "",
+        frontRoute: "",
+        parentId: "",
+        sortOrder: 0,
+        level: 0,
+        permission: "",
+      },
+      formAdd: {
+        // 添加表单
+      },
+      formValidate: {
+        // 验证规则
+        title: [{ required: true, message: "菜单名称名称不能为空", trigger: "blur" }],
+        name: [{ required: true, message: "路由名称不能为空", trigger: "blur" }],
+        path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }],
+        frontRoute: [{ required: true, message: "文件地址不能为空", trigger: "blur" }],
+        sortOrder: [
+          {
+            required: true,
+            type: "number",
+            message: "排序值不能为空",
+            trigger: "blur",
+          },
+        ],
+      },
+      submitLoading: false, // 提交状态
+      data: [], // 数据
+    };
+  },
+  methods: {
+    // 初始化数据
+    init() {
+      this.getAllList();
+    },
+
+    renderContent(h, { root, node, data }) {
+      // 渲染树形结构前面图标
+      let icon = "";
+      if (data.level == 0) {
+        icon = "ios-navigate";
+      } else if (data.level == 1) {
+        icon = "md-list-box";
+      } else if (data.level == 2) {
+        icon = "md-list";
+      }
+      return h("span", [
+        h("span", [
+          h("Icon", {
+            props: {
+              type: icon,
+              size: "16",
+            },
+            style: {
+              "margin-right": "8px",
+              "margin-bottom": "3px",
+            },
+          }),
+          h("span", data.title),
+        ]),
+      ]);
+    },
+    // 更多操作
+    handleDropdown(name) {
+      if (name == "expandOne") {
+        this.expandLevel = 1;
+        this.getAllList();
+      } else if (name == "expandTwo") {
+        this.expandLevel = 2;
+        this.getAllList();
+      } else if (name == "expandThree") {
+        this.expandLevel = 3;
+        this.getAllList();
+      }
+      if (name == "expandAll") {
+        this.expandLevel = 4;
+        this.getAllList();
+      } else if (name == "refresh") {
+        this.getAllList();
+      }
+    },
+    // 获取所有菜单
+    getAllList() {
+      this.loading = true;
+      getAllPermissionList().then((res) => {
+        this.loading = false;
+        if (res.success) {
+          // 仅展开指定级数 默认后台已展开所有
+          let expandLevel = this.expandLevel;
+          res.result.forEach(function (e) {
+            if (expandLevel == 1) {
+              if (e.level == 0) {
+                e.expand = false;
+              }
+              if (e.children && e.children.length > 0) {
+                e.children.forEach(function (c) {
+                  if (c.level == 1) {
+                    c.expand = false;
+                  }
+                  if (c.children && c.children.length > 0) {
+                    c.children.forEach(function (b) {
+                      if (b.level == 2) {
+                        b.expand = false;
+                      }
+                    });
+                  }
+                });
+              }
+            } else if (expandLevel == 2) {
+              if (e.level == 0) {
+                e.expand = true;
+              }
+              if (e.children && e.children.length > 0) {
+                e.children.forEach(function (c) {
+                  if (c.level == 1) {
+                    c.expand = false;
+                  }
+                  if (c.children && c.children.length > 0) {
+                    c.children.forEach(function (b) {
+                      if (b.level == 2) {
+                        b.expand = false;
+                      }
+                    });
+                  }
+                });
+              }
+            } else if (expandLevel == 3) {
+              if (e.level == 0) {
+                e.expand = true;
+              }
+              if (e.children && e.children.length > 0) {
+                e.children.forEach(function (c) {
+                  if (c.level == 1) {
+                    c.expand = true;
+                  }
+                  if (c.children && c.children.length > 0) {
+                    c.children.forEach(function (b) {
+                      if (b.level == 2) {
+                        b.expand = false;
+                      }
+                    });
+                  }
+                });
+              }
+            } else if (expandLevel == 4) {
+              if (e.level == 0) {
+                e.expand = true;
+              }
+              if (e.children && e.children.length > 0) {
+                e.children.forEach(function (c) {
+                  if (c.level == 1) {
+                    c.expand = true;
+                  }
+                  if (c.children && c.children.length > 0) {
+                    c.children.forEach(function (b) {
+                      if (b.level == 2) {
+                        b.expand = true;
+                      }
+                    });
+                  }
+                });
+              }
+            }
+          });
+          this.data = res.result;
+        }
+      });
+    },
+    // 选择菜单
+    selectTree(v) {
+      if (v.length > 0) {
+        let str = JSON.stringify(v);
+        let menu = JSON.parse(str);
+        this.form = menu[0];
+        console.log(this.form);
+        this.editTitle = menu[0].title;
+      } else {
+        this.cancelEdit();
+      }
+    },
+    // 搜索菜单
+    search() {
+      if (this.searchKey) {
+        this.loading = true;
+        searchPermission({ title: this.searchKey }).then((res) => {
+          this.loading = false;
+          if (res.success) {
+            this.data = res.result;
+          }
+        });
+      } else {
+        this.getAllList();
+      }
+    },
+    // 取消选择
+    cancelEdit() {
+      let data = this.$refs.tree.getSelectedNodes()[0];
+      if (data) {
+        data.selected = false;
+      }
+      this.$refs.form.resetFields();
+      this.form.id = "";
+      this.editTitle = "";
+    },
+    // 重置表单
+    handleReset() {
+      this.$refs.form.resetFields();
+      this.form.frontRoute = "";
+    },
+    // 保存
+    submitEdit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          if (!this.form.id) {
+            this.$Message.warning("请先点击选择要修改的菜单节点");
+            return;
+          }
+          this.submitLoading = true;
+          if (this.form.sortOrder == null) {
+            this.form.sortOrder = 0;
+          }
+          // 删除一些之前添加的无用字段
+          delete this.form.icon;
+          delete this.form.frontComponent;
+          delete this.form.buttonType;
+          delete this.form.updateTime;
+          delete this.form.selected;
+          delete this.form.description;
+          delete this.form.children;
+          delete this.form.children;
+
+          editPermission(this.form).then((res) => {
+            this.submitLoading = false;
+            if (res.success) {
+              this.$Message.success("编辑成功");
+              // 标记重新获取菜单数据
+              this.$store.commit("setAdded", false);
+              util.initRouter(this);
+              this.init();
+              this.menuModalVisible = false;
+            }
+          });
+        }
+      });
+    },
+    // 添加
+    submitAdd() {
+      this.$refs.formAdd.validate((valid) => {
+        if (valid) {
+          this.submitLoading = true;
+
+          addPermission(this.formAdd).then((res) => {
+            this.submitLoading = false;
+            if (res.success) {
+              this.$Message.success("添加成功");
+              // 标记重新获取菜单数据
+              this.$store.commit("setAdded", false);
+              util.initRouter(this);
+              this.init();
+              this.menuModalVisible = false;
+            }
+          });
+        }
+      });
+    },
+    // 添加子菜单
+    addMenu() {
+      if (!this.form.id) {
+        this.$Message.warning("请先点击选择一个菜单权限节点");
+        return;
+      }
+      this.parentTitle = this.form.title;
+      this.modalTitle = "添加子节点";
+      this.showParent = true;
+      if (this.form.level == 2) {
+        this.$Modal.warning({
+          title: "抱歉，不能添加啦",
+          content: "仅支持2级菜单目录",
+        });
+        return;
+      }
+      this.formAdd = {
+        parentId: this.form.id,
+        level: Number(this.form.level) + 1,
+        sortOrder: 0,
+        permission: "", // 权限url
+      };
+      if (this.form.level == 0) {
+        this.formAdd.path = "/";
+        this.formAdd.frontRoute = "Main";
+      }
+      this.menuModalVisible = true;
+    },
+    // 添加顶级菜单
+    addRootMenu() {
+      this.modalTitle = "添加顶级菜单";
+      this.showParent = false;
+      this.formAdd = {
+        level: 0,
+        sortOrder: 0,
+      };
+      this.menuModalVisible = true;
+    },
+    // 选中菜单赋值
+    changeSelect(v) {
+      this.selectCount = v.length;
+      this.selectList = v;
+    },
+    // 批量删除菜单
+    delAll() {
+      if (this.selectCount <= 0) {
+        this.$Message.warning("您还未勾选要删除的数据");
+        return;
+      }
+      this.$Modal.confirm({
+        title: "确认删除",
+        content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
+        loading: true,
+        onOk: () => {
+          let ids = "";
+          this.selectList.forEach(function (e) {
+            ids += e.id + ",";
+          });
+          ids = ids.substring(0, ids.length - 1);
+          deletePermission(ids).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("删除成功");
+              // 标记重新获取菜单数据
+              this.$store.commit("setAdded", false);
+              util.initRouter(this);
+              this.selectList = [];
+              this.selectCount = 0;
+              this.cancelEdit();
+              this.init();
+            }
+          });
+        },
+      });
+    },
+  },
+  mounted() {
+    // 计算高度
+    let height = document.documentElement.clientHeight;
+    this.maxHeight = Number(height - 287) + "px";
+    this.init();
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/styles/tree-common.scss";
+.desc {
+  font-size: 12px;
+  color: #999;
+}
+.menu-input {
+  width: 362px;
+}
+</style>

manager/src/views/sys/menu-manage/menuManage.vue

@@ -1,576 +1,24 @@
 <template>
-  <div class="search">
+  <Tabs value="name1">
-    <Card>
+    <TabPane label="平台菜单" name="name1">
-      <!-- 筛选项和操作按钮 -->
+      <managerMenu></managerMenu>
-      <Row class="operation">
-        <i-switch
-          v-model="strict"
-          class="selectModel"
-          size="large"
-          style="margin-right: 5px"
-        >
-          <span slot="open">级联</span>
-          <span slot="close">单选</span>
-        </i-switch>
-        <Button @click="addRootMenu">添加顶级菜单</Button>
-        <Button @click="addMenu" type="primary">添加子菜单</Button>
-        <Button @click="delAll">批量删除</Button>
-        <Dropdown @on-click="handleDropdown">
-          <Button>
-            更多操作
-            <Icon type="md-arrow-dropdown"></Icon>
-          </Button>
-          <DropdownMenu slot="list">
-            <DropdownItem name="refresh">刷新</DropdownItem>
-            <DropdownItem name="expandOne">收合所有</DropdownItem>
-            <DropdownItem name="expandTwo">展开一级</DropdownItem>
-            <DropdownItem name="expandThree">展开两级</DropdownItem>
-            <DropdownItem name="expandAll">展开所有</DropdownItem>
-          </DropdownMenu>
-        </Dropdown>
-      </Row>
-      <!-- 页面主体，左侧树结构，右侧表单项 -->
-      <Row type="flex" justify="start">
-        <Col :md="8" :lg="8" :xl="6">
-          <Alert show-icon>
-            当前选择编辑：
-            <span class="select-title">{{ editTitle }}</span>
-            <a class="select-clear" v-if="form.id" @click="cancelEdit">取消选择</a>
-          </Alert>
-          <Input
-            v-model="searchKey"
-            suffix="ios-search"
-            @on-change="search"
-            placeholder="输入菜单名搜索"
-            clearable
-          />
-          <div class="tree-bar" :style="{ maxHeight: maxHeight }">
-            <Tree
-              ref="tree"
-              :data="data"
-              show-checkbox
-              :render="renderContent"
-              @on-select-change="selectTree"
-              @on-check-change="changeSelect"
-              :check-strictly="!strict"
-            ></Tree>
-            <Spin size="large" fix v-if="loading"></Spin>
-          </div>
-        </Col>
-        <Col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
-          <Form ref="form" :model="form" :label-width="110" :rules="formValidate">
-            <FormItem label="类型" prop="type">
-              <div v-show="form.level == 0">
-                <Icon
-                  type="ios-navigate-outline"
-                  size="16"
-                  style="margin-right: 5px"
-                ></Icon>
-                <span>顶级菜单</span>
-              </div>
-              <div v-show="form.level == 1 || form.level == 2">
-                <Icon
-                  type="ios-list-box-outline"
-                  size="16"
-                  style="margin-right: 5px"
-                ></Icon>
-                <span>页面菜单</span>
-              </div>
-            </FormItem>
-            <FormItem label="菜单名称" prop="title">
-              <Input class="menu-input" v-model="form.title" />
-            </FormItem>
-            <FormItem
-              label="路由地址"
-              prop="path"
-              v-if="form.level != 0"
-              class="block-tool"
-            >
-              <Tooltip
-                placement="right"
-                content="路由地址，英文唯一，跳转页面，路径展示用 "
-              >
-                <Input class="menu-input" v-model="form.path" />
-              </Tooltip>
-            </FormItem>
-            <FormItem label="路由名称" prop="name" class="block-tool">
-              <Tooltip
-                placement="right"
-                content="路由name，需英文唯一，跳转页面用"
-                transfer
-              >
-                <Input class="menu-input" v-model="form.name" />
-              </Tooltip>
-            </FormItem>
-            <FormItem label="文件路径" prop="frontRoute" v-if="form.level != 0">
-              <Input class="menu-input" v-model="form.frontRoute" />
-            </FormItem>
-            <FormItem label="权限url" v-if="form.level != 0" class="block-tool">
-              <Tooltip placement="right" content="*号模糊匹配，逗号分割" transfer>
-                <Input class="menu-input" v-model="form.permission" type="textarea" />
-              </Tooltip>
-            </FormItem>
-            <FormItem label="排序值" prop="sortOrder">
-              <Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
-                <InputNumber :max="1000" :min="0" v-model="form.sortOrder"></InputNumber>
-              </Tooltip>
-            </FormItem>
-            <Form-item>
-              <Button
-                style="margin-right: 5px"
-                @click="submitEdit"
-                :loading="submitLoading"
-                type="primary"
-                >保存
-              </Button>
-              <Button @click="handleReset">重置</Button>
-            </Form-item>
-          </Form>
-        </Col>
-      </Row>
-    </Card>
 
-    <Modal
+    </TabPane>
-      draggable
+    <TabPane label="店铺菜单" name="name2">
-      :title="modalTitle"
+      <storeMenu></storeMenu>
-      v-model="menuModalVisible"
-      :mask-closable="false"
-      :width="500"
-      :styles="{ top: '30px' }"
-    >
-      <Form ref="formAdd" :model="formAdd" :label-width="100" :rules="formValidate">
-        <div v-if="showParent">
-          <FormItem label="上级节点：">{{ parentTitle }}</FormItem>
-        </div>
-        <FormItem label="类型" prop="type">
-          <div v-show="formAdd.level == 0">
-            <Icon type="ios-navigate-outline" size="16" style="margin-right: 5px"></Icon>
-            <span>顶级菜单</span>
-          </div>
-          <div v-show="formAdd.level != 0">
-            <Icon type="ios-list-box-outline" size="16" style="margin-right: 5px"></Icon>
-            <span>页面菜单</span>
-          </div>
-        </FormItem>
-        <FormItem label="菜单名称" prop="title">
-          <Input class="menu-input" v-model="formAdd.title" />
-        </FormItem>
 
-        <FormItem label="路由地址" prop="path" v-if="formAdd.level != 0">
+    </TabPane>
-          <Input v-model="formAdd.path" />
+  </Tabs>
-        </FormItem>
-        <FormItem label="路由名称" prop="name" class="block-tool">
-          <Tooltip placement="right" content="路由name，需英文唯一，跳转页面用">
-            <Input v-model="formAdd.name" />
-          </Tooltip>
-        </FormItem>
-        <FormItem label="文件路径" prop="frontRoute" v-if="formAdd.level != 0">
-          <Input v-model="formAdd.frontRoute" />
-        </FormItem>
-        <FormItem label="权限url" v-if="formAdd.level != 0">
-          <Input v-model="formAdd.permission" type="textarea" />
-          <div class="desc">*号模糊匹配，逗号分割</div>
-        </FormItem>
-        <FormItem label="排序值" prop="sortOrder">
-          <Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
-            <InputNumber :max="1000" :min="0" v-model="formAdd.sortOrder"></InputNumber>
-          </Tooltip>
-        </FormItem>
-      </Form>
-      <div slot="footer">
-        <Button type="text" @click="menuModalVisible = false">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="submitAdd">提交</Button>
-      </div>
-    </Modal>
-  </div>
 </template>
-
 <script>
-import {
+
-  getAllPermissionList,
+import managerMenu from "./menu";
-  addPermission,
+import storeMenu from "./storeMenu";
-  editPermission,
+
-  deletePermission,
-  searchPermission,
-} from "@/api/index";
-import util from "@/libs/util.js";
-import Cookies from "js-cookie";
 export default {
-  name: "menu-manage",
+  components: {
-  data() {
+    managerMenu, storeMenu
-    return {
-      loading: true, // 加载状态
-      strict: true, // 级联 单选
-      maxHeight: "500px", // 最大高度
-      expandLevel: 1, // 展开层级
-      menuModalVisible: false, // 添加菜单modal
-      selectList: [], // 已选列表
-      selectCount: 0, // 所选数量
-      showParent: false, // 展示父级
-      searchKey: "", // 搜索关键词
-      parentTitle: "", // 父级标题
-      editTitle: "", // 编辑标题
-      modalTitle: "", // modal标题
-      form: {
-        // 表单数据
-        id: "",
-        title: "",
-        name: "",
-        path: "",
-        frontRoute: "",
-        parentId: "",
-        sortOrder: 0,
-        level: 0,
-        permission: "",
-      },
-      formAdd: {
-        // 添加表单
-      },
-      formValidate: {
-        // 验证规则
-        title: [{ required: true, message: "菜单名称名称不能为空", trigger: "blur" }],
-        name: [{ required: true, message: "路由名称不能为空", trigger: "blur" }],
-        path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }],
-        frontRoute: [{ required: true, message: "文件地址不能为空", trigger: "blur" }],
-        sortOrder: [
-          {
-            required: true,
-            type: "number",
-            message: "排序值不能为空",
-            trigger: "blur",
-          },
-        ],
-      },
-      submitLoading: false, // 提交状态
-      data: [], // 数据
-    };
   },
-  methods: {
-    // 初始化数据
-    init() {
-      this.getAllList();
-    },
 
-    renderContent(h, { root, node, data }) {
+}
-      // 渲染树形结构前面图标
-      let icon = "";
-      if (data.level == 0) {
-        icon = "ios-navigate";
-      } else if (data.level == 1) {
-        icon = "md-list-box";
-      } else if (data.level == 2) {
-        icon = "md-list";
-      }
-      return h("span", [
-        h("span", [
-          h("Icon", {
-            props: {
-              type: icon,
-              size: "16",
-            },
-            style: {
-              "margin-right": "8px",
-              "margin-bottom": "3px",
-            },
-          }),
-          h("span", data.title),
-        ]),
-      ]);
-    },
-    // 更多操作
-    handleDropdown(name) {
-      if (name == "expandOne") {
-        this.expandLevel = 1;
-        this.getAllList();
-      } else if (name == "expandTwo") {
-        this.expandLevel = 2;
-        this.getAllList();
-      } else if (name == "expandThree") {
-        this.expandLevel = 3;
-        this.getAllList();
-      }
-      if (name == "expandAll") {
-        this.expandLevel = 4;
-        this.getAllList();
-      } else if (name == "refresh") {
-        this.getAllList();
-      }
-    },
-    // 获取所有菜单
-    getAllList() {
-      this.loading = true;
-      getAllPermissionList().then((res) => {
-        this.loading = false;
-        if (res.success) {
-          // 仅展开指定级数 默认后台已展开所有
-          let expandLevel = this.expandLevel;
-          res.result.forEach(function (e) {
-            if (expandLevel == 1) {
-              if (e.level == 0) {
-                e.expand = false;
-              }
-              if (e.children && e.children.length > 0) {
-                e.children.forEach(function (c) {
-                  if (c.level == 1) {
-                    c.expand = false;
-                  }
-                  if (c.children && c.children.length > 0) {
-                    c.children.forEach(function (b) {
-                      if (b.level == 2) {
-                        b.expand = false;
-                      }
-                    });
-                  }
-                });
-              }
-            } else if (expandLevel == 2) {
-              if (e.level == 0) {
-                e.expand = true;
-              }
-              if (e.children && e.children.length > 0) {
-                e.children.forEach(function (c) {
-                  if (c.level == 1) {
-                    c.expand = false;
-                  }
-                  if (c.children && c.children.length > 0) {
-                    c.children.forEach(function (b) {
-                      if (b.level == 2) {
-                        b.expand = false;
-                      }
-                    });
-                  }
-                });
-              }
-            } else if (expandLevel == 3) {
-              if (e.level == 0) {
-                e.expand = true;
-              }
-              if (e.children && e.children.length > 0) {
-                e.children.forEach(function (c) {
-                  if (c.level == 1) {
-                    c.expand = true;
-                  }
-                  if (c.children && c.children.length > 0) {
-                    c.children.forEach(function (b) {
-                      if (b.level == 2) {
-                        b.expand = false;
-                      }
-                    });
-                  }
-                });
-              }
-            } else if (expandLevel == 4) {
-              if (e.level == 0) {
-                e.expand = true;
-              }
-              if (e.children && e.children.length > 0) {
-                e.children.forEach(function (c) {
-                  if (c.level == 1) {
-                    c.expand = true;
-                  }
-                  if (c.children && c.children.length > 0) {
-                    c.children.forEach(function (b) {
-                      if (b.level == 2) {
-                        b.expand = true;
-                      }
-                    });
-                  }
-                });
-              }
-            }
-          });
-          this.data = res.result;
-        }
-      });
-    },
-    // 选择菜单
-    selectTree(v) {
-      if (v.length > 0) {
-        let str = JSON.stringify(v);
-        let menu = JSON.parse(str);
-        this.form = menu[0];
-        console.log(this.form);
-        this.editTitle = menu[0].title;
-      } else {
-        this.cancelEdit();
-      }
-    },
-    // 搜索菜单
-    search() {
-      if (this.searchKey) {
-        this.loading = true;
-        searchPermission({ title: this.searchKey }).then((res) => {
-          this.loading = false;
-          if (res.success) {
-            this.data = res.result;
-          }
-        });
-      } else {
-        this.getAllList();
-      }
-    },
-    // 取消选择
-    cancelEdit() {
-      let data = this.$refs.tree.getSelectedNodes()[0];
-      if (data) {
-        data.selected = false;
-      }
-      this.$refs.form.resetFields();
-      this.form.id = "";
-      this.editTitle = "";
-    },
-    // 重置表单
-    handleReset() {
-      this.$refs.form.resetFields();
-      this.form.frontRoute = "";
-    },
-    // 保存
-    submitEdit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          if (!this.form.id) {
-            this.$Message.warning("请先点击选择要修改的菜单节点");
-            return;
-          }
-          this.submitLoading = true;
-          if (this.form.sortOrder == null) {
-            this.form.sortOrder = 0;
-          }
-          // 删除一些之前添加的无用字段
-          delete this.form.icon;
-          delete this.form.frontComponent;
-          delete this.form.buttonType;
-          delete this.form.updateTime;
-          delete this.form.selected;
-          delete this.form.description;
-          delete this.form.children;
-          delete this.form.children;
-
-          editPermission(this.form).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("编辑成功");
-              // 标记重新获取菜单数据
-              this.$store.commit("setAdded", false);
-              util.initRouter(this);
-              this.init();
-              this.menuModalVisible = false;
-            }
-          });
-        }
-      });
-    },
-    // 添加
-    submitAdd() {
-      this.$refs.formAdd.validate((valid) => {
-        if (valid) {
-          this.submitLoading = true;
-
-          addPermission(this.formAdd).then((res) => {
-            this.submitLoading = false;
-            if (res.success) {
-              this.$Message.success("添加成功");
-              // 标记重新获取菜单数据
-              this.$store.commit("setAdded", false);
-              util.initRouter(this);
-              this.init();
-              this.menuModalVisible = false;
-            }
-          });
-        }
-      });
-    },
-    // 添加子菜单
-    addMenu() {
-      if (!this.form.id) {
-        this.$Message.warning("请先点击选择一个菜单权限节点");
-        return;
-      }
-      this.parentTitle = this.form.title;
-      this.modalTitle = "添加子节点";
-      this.showParent = true;
-      if (this.form.level == 2) {
-        this.$Modal.warning({
-          title: "抱歉，不能添加啦",
-          content: "仅支持2级菜单目录",
-        });
-        return;
-      }
-      this.formAdd = {
-        parentId: this.form.id,
-        level: Number(this.form.level) + 1,
-        sortOrder: 0,
-        permission: "", // 权限url
-      };
-      if (this.form.level == 0) {
-        this.formAdd.path = "/";
-        this.formAdd.frontRoute = "Main";
-      }
-      this.menuModalVisible = true;
-    },
-    // 添加顶级菜单
-    addRootMenu() {
-      this.modalTitle = "添加顶级菜单";
-      this.showParent = false;
-      this.formAdd = {
-        level: 0,
-        sortOrder: 0,
-      };
-      this.menuModalVisible = true;
-    },
-    // 选中菜单赋值
-    changeSelect(v) {
-      this.selectCount = v.length;
-      this.selectList = v;
-    },
-    // 批量删除菜单
-    delAll() {
-      if (this.selectCount <= 0) {
-        this.$Message.warning("您还未勾选要删除的数据");
-        return;
-      }
-      this.$Modal.confirm({
-        title: "确认删除",
-        content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
-        loading: true,
-        onOk: () => {
-          let ids = "";
-          this.selectList.forEach(function (e) {
-            ids += e.id + ",";
-          });
-          ids = ids.substring(0, ids.length - 1);
-          deletePermission(ids).then((res) => {
-            this.$Modal.remove();
-            if (res.success) {
-              this.$Message.success("删除成功");
-              // 标记重新获取菜单数据
-              this.$store.commit("setAdded", false);
-              util.initRouter(this);
-              this.selectList = [];
-              this.selectCount = 0;
-              this.cancelEdit();
-              this.init();
-            }
-          });
-        },
-      });
-    },
-  },
-  mounted() {
-    // 计算高度
-    let height = document.documentElement.clientHeight;
-    this.maxHeight = Number(height - 287) + "px";
-    this.init();
-  },
-};
 </script>
-<style lang="scss" scoped>
-@import "@/styles/tree-common.scss";
-.desc {
-  font-size: 12px;
-  color: #999;
-}
-.menu-input {
-  width: 362px;
-}
-</style>

manager/src/views/sys/menu-manage/storeMenu.vue

@@ -0,0 +1,576 @@
+<template>
+  <div class="search">
+    <Card>
+      <!-- 筛选项和操作按钮 -->
+      <Row class="operation">
+        <i-switch
+          v-model="strict"
+          class="selectModel"
+          size="large"
+          style="margin-right: 5px"
+        >
+          <span slot="open">级联</span>
+          <span slot="close">单选</span>
+        </i-switch>
+        <Button @click="addRootMenu">添加顶级菜单</Button>
+        <Button @click="addMenu" type="primary">添加子菜单</Button>
+        <Button @click="delAll">批量删除</Button>
+        <Dropdown @on-click="handleDropdown">
+          <Button>
+            更多操作
+            <Icon type="md-arrow-dropdown"></Icon>
+          </Button>
+          <DropdownMenu slot="list">
+            <DropdownItem name="refresh">刷新</DropdownItem>
+            <DropdownItem name="expandOne">收合所有</DropdownItem>
+            <DropdownItem name="expandTwo">展开一级</DropdownItem>
+            <DropdownItem name="expandThree">展开两级</DropdownItem>
+            <DropdownItem name="expandAll">展开所有</DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+      </Row>
+      <!-- 页面主体，左侧树结构，右侧表单项 -->
+      <Row type="flex" justify="start">
+        <Col :md="8" :lg="8" :xl="6">
+          <Alert show-icon>
+            当前选择编辑：
+            <span class="select-title">{{ editTitle }}</span>
+            <a class="select-clear" v-if="form.id" @click="cancelEdit">取消选择</a>
+          </Alert>
+          <Input
+            v-model="searchKey"
+            suffix="ios-search"
+            @on-change="search"
+            placeholder="输入菜单名搜索"
+            clearable
+          />
+          <div class="tree-bar" :style="{ maxHeight: maxHeight }">
+            <Tree
+              ref="tree"
+              :data="data"
+              show-checkbox
+              :render="renderContent"
+              @on-select-change="selectTree"
+              @on-check-change="changeSelect"
+              :check-strictly="!strict"
+            ></Tree>
+            <Spin size="large" fix v-if="loading"></Spin>
+          </div>
+        </Col>
+        <Col :md="15" :lg="13" :xl="9" style="margin-left: 10px">
+          <Form ref="form" :model="form" :label-width="110" :rules="formValidate">
+            <FormItem label="类型" prop="type">
+              <div v-show="form.level == 0">
+                <Icon
+                  type="ios-navigate-outline"
+                  size="16"
+                  style="margin-right: 5px"
+                ></Icon>
+                <span>顶级菜单</span>
+              </div>
+              <div v-show="form.level == 1 || form.level == 2">
+                <Icon
+                  type="ios-list-box-outline"
+                  size="16"
+                  style="margin-right: 5px"
+                ></Icon>
+                <span>页面菜单</span>
+              </div>
+            </FormItem>
+            <FormItem label="菜单名称" prop="title">
+              <Input class="menu-input" v-model="form.title" />
+            </FormItem>
+            <FormItem
+              label="路由地址"
+              prop="path"
+              v-if="form.level != 0"
+              class="block-tool"
+            >
+              <Tooltip
+                placement="right"
+                content="路由地址，英文唯一，跳转页面，路径展示用 "
+              >
+                <Input class="menu-input" v-model="form.path" />
+              </Tooltip>
+            </FormItem>
+            <FormItem label="路由名称" prop="name" class="block-tool">
+              <Tooltip
+                placement="right"
+                content="路由name，需英文唯一，跳转页面用"
+                transfer
+              >
+                <Input class="menu-input" v-model="form.name" />
+              </Tooltip>
+            </FormItem>
+            <FormItem label="文件路径" prop="frontRoute" v-if="form.level != 0">
+              <Input class="menu-input" v-model="form.frontRoute" />
+            </FormItem>
+            <FormItem label="权限url" v-if="form.level != 0" class="block-tool">
+              <Tooltip placement="right" content="*号模糊匹配，逗号分割" transfer>
+                <Input class="menu-input" v-model="form.permission" type="textarea" maxlength="1000" />
+              </Tooltip>
+            </FormItem>
+            <FormItem label="排序值" prop="sortOrder">
+              <Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
+                <InputNumber :max="1000" :min="0" v-model="form.sortOrder"></InputNumber>
+              </Tooltip>
+            </FormItem>
+            <Form-item>
+              <Button
+                style="margin-right: 5px"
+                @click="submitEdit"
+                :loading="submitLoading"
+                type="primary"
+              >保存
+              </Button>
+              <Button @click="handleReset">重置</Button>
+            </Form-item>
+          </Form>
+        </Col>
+      </Row>
+    </Card>
+
+    <Modal
+      draggable
+      :title="modalTitle"
+      v-model="menuModalVisible"
+      :mask-closable="false"
+      :width="500"
+      :styles="{ top: '30px' }"
+    >
+      <Form ref="formAdd" :model="formAdd" :label-width="100" :rules="formValidate">
+        <div v-if="showParent">
+          <FormItem label="上级节点：">{{ parentTitle }}</FormItem>
+        </div>
+        <FormItem label="类型" prop="type">
+          <div v-show="formAdd.level == 0">
+            <Icon type="ios-navigate-outline" size="16" style="margin-right: 5px"></Icon>
+            <span>顶级菜单</span>
+          </div>
+          <div v-show="formAdd.level != 0">
+            <Icon type="ios-list-box-outline" size="16" style="margin-right: 5px"></Icon>
+            <span>页面菜单</span>
+          </div>
+        </FormItem>
+        <FormItem label="菜单名称" prop="title">
+          <Input class="menu-input" v-model="formAdd.title" />
+        </FormItem>
+
+        <FormItem label="路由地址" prop="path" v-if="formAdd.level != 0">
+          <Input v-model="formAdd.path" />
+        </FormItem>
+        <FormItem label="路由名称" prop="name" class="block-tool">
+          <Tooltip placement="right" content="路由name，需英文唯一，跳转页面用">
+            <Input v-model="formAdd.name" />
+          </Tooltip>
+        </FormItem>
+        <FormItem label="文件路径" prop="frontRoute" v-if="formAdd.level != 0">
+          <Input v-model="formAdd.frontRoute" />
+        </FormItem>
+        <FormItem label="权限url" v-if="formAdd.level != 0">
+          <Input v-model="formAdd.permission" type="textarea" />
+          <div class="desc">*号模糊匹配，逗号分割</div>
+        </FormItem>
+        <FormItem label="排序值" prop="sortOrder">
+          <Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数">
+            <InputNumber :max="1000" :min="0" v-model="formAdd.sortOrder"></InputNumber>
+          </Tooltip>
+        </FormItem>
+      </Form>
+      <div slot="footer">
+        <Button type="text" @click="menuModalVisible = false">取消</Button>
+        <Button type="primary" :loading="submitLoading" @click="submitAdd">提交</Button>
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import {
+  getStoreAllPermissionList,
+  addStorePermission,
+  editStorePermission,
+  deleteStorePermission,
+  searchStorePermission,
+} from "@/api/index";
+import util from "@/libs/util.js";
+import Cookies from "js-cookie";
+export default {
+  name: "store-menu-manage",
+  data() {
+    return {
+      loading: true, // 加载状态
+      strict: true, // 级联 单选
+      maxHeight: "500px", // 最大高度
+      expandLevel: 1, // 展开层级
+      menuModalVisible: false, // 添加菜单modal
+      selectList: [], // 已选列表
+      selectCount: 0, // 所选数量
+      showParent: false, // 展示父级
+      searchKey: "", // 搜索关键词
+      parentTitle: "", // 父级标题
+      editTitle: "", // 编辑标题
+      modalTitle: "", // modal标题
+      form: {
+        // 表单数据
+        id: "",
+        title: "",
+        name: "",
+        path: "",
+        frontRoute: "",
+        parentId: "",
+        sortOrder: 0,
+        level: 0,
+        permission: "",
+      },
+      formAdd: {
+        // 添加表单
+      },
+      formValidate: {
+        // 验证规则
+        title: [{ required: true, message: "菜单名称名称不能为空", trigger: "blur" }],
+        name: [{ required: true, message: "路由名称不能为空", trigger: "blur" }],
+        path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }],
+        frontRoute: [{ required: true, message: "文件地址不能为空", trigger: "blur" }],
+        sortOrder: [
+          {
+            required: true,
+            type: "number",
+            message: "排序值不能为空",
+            trigger: "blur",
+          },
+        ],
+      },
+      submitLoading: false, // 提交状态
+      data: [], // 数据
+    };
+  },
+  methods: {
+    // 初始化数据
+    init() {
+      this.getAllList();
+    },
+
+    renderContent(h, { root, node, data }) {
+      // 渲染树形结构前面图标
+      let icon = "";
+      if (data.level == 0) {
+        icon = "ios-navigate";
+      } else if (data.level == 1) {
+        icon = "md-list-box";
+      } else if (data.level == 2) {
+        icon = "md-list";
+      }
+      return h("span", [
+        h("span", [
+          h("Icon", {
+            props: {
+              type: icon,
+              size: "16",
+            },
+            style: {
+              "margin-right": "8px",
+              "margin-bottom": "3px",
+            },
+          }),
+          h("span", data.title),
+        ]),
+      ]);
+    },
+    // 更多操作
+    handleDropdown(name) {
+      if (name == "expandOne") {
+        this.expandLevel = 1;
+        this.getAllList();
+      } else if (name == "expandTwo") {
+        this.expandLevel = 2;
+        this.getAllList();
+      } else if (name == "expandThree") {
+        this.expandLevel = 3;
+        this.getAllList();
+      }
+      if (name == "expandAll") {
+        this.expandLevel = 4;
+        this.getAllList();
+      } else if (name == "refresh") {
+        this.getAllList();
+      }
+    },
+    // 获取所有菜单
+    getAllList() {
+      this.loading = true;
+      getStoreAllPermissionList().then((res) => {
+        this.loading = false;
+        if (res.success) {
+          // 仅展开指定级数 默认后台已展开所有
+          let expandLevel = this.expandLevel;
+          res.result.forEach(function (e) {
+            if (expandLevel == 1) {
+              if (e.level == 0) {
+                e.expand = false;
+              }
+              if (e.children && e.children.length > 0) {
+                e.children.forEach(function (c) {
+                  if (c.level == 1) {
+                    c.expand = false;
+                  }
+                  if (c.children && c.children.length > 0) {
+                    c.children.forEach(function (b) {
+                      if (b.level == 2) {
+                        b.expand = false;
+                      }
+                    });
+                  }
+                });
+              }
+            } else if (expandLevel == 2) {
+              if (e.level == 0) {
+                e.expand = true;
+              }
+              if (e.children && e.children.length > 0) {
+                e.children.forEach(function (c) {
+                  if (c.level == 1) {
+                    c.expand = false;
+                  }
+                  if (c.children && c.children.length > 0) {
+                    c.children.forEach(function (b) {
+                      if (b.level == 2) {
+                        b.expand = false;
+                      }
+                    });
+                  }
+                });
+              }
+            } else if (expandLevel == 3) {
+              if (e.level == 0) {
+                e.expand = true;
+              }
+              if (e.children && e.children.length > 0) {
+                e.children.forEach(function (c) {
+                  if (c.level == 1) {
+                    c.expand = true;
+                  }
+                  if (c.children && c.children.length > 0) {
+                    c.children.forEach(function (b) {
+                      if (b.level == 2) {
+                        b.expand = false;
+                      }
+                    });
+                  }
+                });
+              }
+            } else if (expandLevel == 4) {
+              if (e.level == 0) {
+                e.expand = true;
+              }
+              if (e.children && e.children.length > 0) {
+                e.children.forEach(function (c) {
+                  if (c.level == 1) {
+                    c.expand = true;
+                  }
+                  if (c.children && c.children.length > 0) {
+                    c.children.forEach(function (b) {
+                      if (b.level == 2) {
+                        b.expand = true;
+                      }
+                    });
+                  }
+                });
+              }
+            }
+          });
+          this.data = res.result;
+        }
+      });
+    },
+    // 选择菜单
+    selectTree(v) {
+      if (v.length > 0) {
+        let str = JSON.stringify(v);
+        let menu = JSON.parse(str);
+        this.form = menu[0];
+        console.log(this.form);
+        this.editTitle = menu[0].title;
+      } else {
+        this.cancelEdit();
+      }
+    },
+    // 搜索菜单
+    search() {
+      if (this.searchKey) {
+        this.loading = true;
+        searchStorePermission({ title: this.searchKey }).then((res) => {
+          this.loading = false;
+          if (res.success) {
+            this.data = res.result;
+          }
+        });
+      } else {
+        this.getAllList();
+      }
+    },
+    // 取消选择
+    cancelEdit() {
+      let data = this.$refs.tree.getSelectedNodes()[0];
+      if (data) {
+        data.selected = false;
+      }
+      this.$refs.form.resetFields();
+      this.form.id = "";
+      this.editTitle = "";
+    },
+    // 重置表单
+    handleReset() {
+      this.$refs.form.resetFields();
+      this.form.frontRoute = "";
+    },
+    // 保存
+    submitEdit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          if (!this.form.id) {
+            this.$Message.warning("请先点击选择要修改的菜单节点");
+            return;
+          }
+          this.submitLoading = true;
+          if (this.form.sortOrder == null) {
+            this.form.sortOrder = 0;
+          }
+          // 删除一些之前添加的无用字段
+          delete this.form.icon;
+          delete this.form.frontComponent;
+          delete this.form.buttonType;
+          delete this.form.updateTime;
+          delete this.form.selected;
+          delete this.form.description;
+          delete this.form.children;
+          delete this.form.children;
+
+          editStorePermission(this.form).then((res) => {
+            this.submitLoading = false;
+            if (res.success) {
+              this.$Message.success("编辑成功");
+              // 标记重新获取菜单数据
+              this.$store.commit("setAdded", false);
+              util.initRouter(this);
+              this.init();
+              this.menuModalVisible = false;
+            }
+          });
+        }
+      });
+    },
+    // 添加
+    submitAdd() {
+      this.$refs.formAdd.validate((valid) => {
+        if (valid) {
+          this.submitLoading = true;
+
+          addStorePermission(this.formAdd).then((res) => {
+            this.submitLoading = false;
+            if (res.success) {
+              this.$Message.success("添加成功");
+              // 标记重新获取菜单数据
+              this.$store.commit("setAdded", false);
+              util.initRouter(this);
+              this.init();
+              this.menuModalVisible = false;
+            }
+          });
+        }
+      });
+    },
+    // 添加子菜单
+    addMenu() {
+      if (!this.form.id) {
+        this.$Message.warning("请先点击选择一个菜单权限节点");
+        return;
+      }
+      this.parentTitle = this.form.title;
+      this.modalTitle = "添加子节点";
+      this.showParent = true;
+      if (this.form.level == 2) {
+        this.$Modal.warning({
+          title: "抱歉，不能添加啦",
+          content: "仅支持2级菜单目录",
+        });
+        return;
+      }
+      this.formAdd = {
+        parentId: this.form.id,
+        level: Number(this.form.level) + 1,
+        sortOrder: 0,
+        permission: "", // 权限url
+      };
+      if (this.form.level == 0) {
+        this.formAdd.path = "/";
+        this.formAdd.frontRoute = "Main";
+      }
+      this.menuModalVisible = true;
+    },
+    // 添加顶级菜单
+    addRootMenu() {
+      this.modalTitle = "添加顶级菜单";
+      this.showParent = false;
+      this.formAdd = {
+        level: 0,
+        sortOrder: 0,
+      };
+      this.menuModalVisible = true;
+    },
+    // 选中菜单赋值
+    changeSelect(v) {
+      this.selectCount = v.length;
+      this.selectList = v;
+    },
+    // 批量删除菜单
+    delAll() {
+      if (this.selectCount <= 0) {
+        this.$Message.warning("您还未勾选要删除的数据");
+        return;
+      }
+      this.$Modal.confirm({
+        title: "确认删除",
+        content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
+        loading: true,
+        onOk: () => {
+          let ids = "";
+          this.selectList.forEach(function (e) {
+            ids += e.id + ",";
+          });
+          ids = ids.substring(0, ids.length - 1);
+          deleteStorePermission(ids).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("删除成功");
+              // 标记重新获取菜单数据
+              this.$store.commit("setAdded", false);
+              util.initRouter(this);
+              this.selectList = [];
+              this.selectCount = 0;
+              this.cancelEdit();
+              this.init();
+            }
+          });
+        },
+      });
+    },
+  },
+  mounted() {
+    // 计算高度
+    let height = document.documentElement.clientHeight;
+    this.maxHeight = Number(height - 287) + "px";
+    this.init();
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/styles/tree-common.scss";
+.desc {
+  font-size: 12px;
+  color: #999;
+}
+.menu-input {
+  width: 362px;
+}
+</style>