resolve conflict

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

@@ -226,7 +226,23 @@
         >
       </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>
@@ -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">
+        <div style="width: 150px; height: 150px; border: 1px solid #eee">
           <vue-qr
             :text="qrcode"
             :callback="qrcodeData"
             :margin="0"
             colorDark="#000"
             colorLight="#fff"
-          :size="200"
+            :size="150"
           ></vue-qr>
+          <div class="qrcode-platform">PC端</div>
           <Button class="download-btn" type="success" @click="downloadQrcode"
           >下载二维码</Button
           >
         </div>
-      <div class="mt_10">
+        <div style="width: 150px; height: 150px; border: 1px solid #eee">
-        商品链接：<Input style="width: 400px" v-model="qrcode"></Input>
+          <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" 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,18 +519,31 @@ 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 if (type === "RETREAT") {
+            this.status = 4;
+          }else if (type === "APPEAL") {
+            this.status = 5;
           }else {
             this.status = 1;
           }
@@ -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/components/affix-time.vue

@@ -4,9 +4,9 @@
       <span @click="clickBreadcrumb(item, index)" :class="{ 'active': item.selected }" v-for="(item, index) in dateList"
         :key="index"> {{ item.title }}</span>
       <div class="date-picker">
-        <Select @on-change="changeSelect(selectedWay)" v-model="month" placeholder="年月查询" clearable
+        <Select @on-change="changeSelect($event, selectedWay)" :value="month" placeholder="年月查询" clearable
           style="width:200px;margin-left:10px;">
-          <Option v-for="(item,index) in dates" :value="item.year+'-'+item.month" :key="index" clearable>
+          <Option v-for="(item, i) in dates" :value="item.year + '-' + item.month" :key="i" clearable>
             {{ item.year + '年' + item.month + '月' }}</Option>
         </Select>
       </div>
@@ -66,6 +66,29 @@ export default {
           searchType: "LAST_THIRTY",
         },
       ],
+      originDateList: [
+        // 筛选条件
+        {
+          title: "今天",
+          selected: false,
+          searchType: "TODAY",
+        },
+        {
+          title: "昨天",
+          selected: false,
+          searchType: "YESTERDAY",
+        },
+        {
+          title: "过去7天",
+          selected: true,
+          searchType: "LAST_SEVEN",
+        },
+        {
+          title: "过去30天",
+          selected: false,
+          searchType: "LAST_THIRTY",
+        },
+      ],
 
       shopTotal: "", // 店铺总数
       shopsData: [], // 店铺数据
@@ -126,8 +149,8 @@ export default {
       this.dates = dates.reverse();
     },
     // 改变已选店铺
-    changeSelect() {
+    changeSelect(e) {
-      console.log(this.month);
+      this.month = e
       if (this.month) {
         this.dateList.forEach((res) => {
           res.selected = false;
@@ -138,29 +161,36 @@ export default {
 
         this.$emit("selected", this.selectedWay);
       } else {
+
+        const current = this.dateList.find(item => { return item.selected })
+        this.selectedWay = current
+        this.clickBreadcrumb(current)
+        this.$emit("selected", this.selectedWay);
+
+
       }
     },
     // 变更时间
     clickBreadcrumb(item) {
-      this.dateList.forEach((res) => {
+
+      let currentIndex;
+      this.dateList.forEach((res,index) => {
         res.selected = false;
+        if(res.title === item.title){
+          currentIndex = index
+        }
       });
       item.selected = true;
       item.storeId = this.storeId;
       this.month = "";
-
       if (item.searchType == "") {
-        if (
+       let currentDate = this.originDateList[currentIndex].searchType
-          dateList.some((date) => {
+        if (currentDate) {
-            return date.title == item.title;
+          item.searchType = currentDate
-          })
-        ) {
-          item.searchType = date.searchType;
         } else {
           item.searchType = "LAST_SEVEN";
         }
       }
-
       this.selectedWay = item;
       this.selectedWay.year = new Date().getFullYear();
       this.selectedWay.month = "";
@@ -179,12 +209,14 @@ export default {
     cursor: pointer;
   }
 }
+
 .active {
   color: $theme_color;
   position: relative;
 }
-.date-picker {
+
-}
+.date-picker {}
+
 .active:before {
   content: "";
   position: absolute;

manager/src/components/lili-dialog/goods-dialog.vue

@@ -46,10 +46,8 @@
         </div>
       </div>
       <div>
-        <Scroll
+        <div
           class="wap-content-list"
-          :on-reach-bottom="handleReachBottom"
-          :distance-to-edge="[3, 3]"
         >
           <div
             class="wap-content-item"
@@ -63,8 +61,8 @@
             </div>
             <div class="wap-content-desc">
               <div class="wap-content-desc-title">{{ item.goodsName }}</div>
-              <div class="wap-sku">{{ item.goodsUnit }}</div>
+
-              <div class="wap-sku"><Tag :color="item.salesModel === 'RETAIL' ? 'default' : 'geekblue'">{{item.salesModel === "RETAIL" ? "零售型" : "批发型"}}</Tag></div>
+              <div class="wap-sku">{{ item.goodsUnit }}<Tag style="margin-left: 10px;" :color="item.salesModel === 'RETAIL' ? 'default' : 'geekblue'">{{item.salesModel === "RETAIL" ? "零售型" : "批发型"}}</Tag></div>
               <div class="wap-content-desc-bottom">
                 <div>￥{{ item.price | unitPrice }}</div>
               </div>
@@ -73,7 +71,18 @@
           <Spin size="large" fix v-if="loading"></Spin>
 
           <div v-if="empty" class="empty">暂无商品信息</div>
-        </Scroll>
+        </div>
+        <Page
+          :total="total"
+          class="pageration"
+          @on-change="changePageSize"
+          :page-size="goodsParams.pageSize"
+          size="small"
+          show-total
+          show-elevator
+
+        >
+        </Page>
       </div>
     </div>
   </div>
@@ -89,7 +98,7 @@ export default {
       goodsParams: {
         // 商品请求参数
         pageNumber: 1,
-        pageSize: 18,
+        pageSize: 15,
         order: "desc",
         goodsName: "",
         sn: "",
@@ -135,17 +144,9 @@ export default {
     this.init();
   },
   methods: {
-    // 触底加载更多方法
+    changePageSize(v){
-    handleReachBottom() {
+      this.goodsParams.pageNumber = v;
-      setTimeout(() => {
-        if (
-          this.goodsParams.pageNumber * this.goodsParams.pageSize <=
-          this.total
-        ) {
-          this.goodsParams.pageNumber++;
       this.getQueryGoodsList();
-        }
-      }, 1500);
     },
     // 获取商品列表
     getQueryGoodsList() {
@@ -169,7 +170,7 @@ export default {
          * 解决数据请求中，滚动栏会一直上下跳动
          */
         this.total = res.result.total;
-        this.goodsData.push(...res.result.records);
+        this.goodsData = res.result.records;
       } else {
         this.empty = true;
       }
@@ -180,13 +181,11 @@ export default {
         // 商品
         this.initGoods(res);
       });
-      if (localStorage.getItem("category")) {
+      API_Goods.getCategoryTree({deleteFlag: false}).then((res) => {
-        this.deepGroup(JSON.parse(localStorage.getItem("category")));
+        if (res.success) {
-      } else {
+          this.deepGroup(res.result);
-        setTimeout(() => {
-          this.deepGroup(JSON.parse(localStorage.getItem("category")));
-        }, 3000);
         }
+      });
     },
 
     deepGroup(val) {
@@ -271,7 +270,10 @@ export default {
   padding: 0;
 }
 .wap-content-list {
+  display: flex;
   position: relative;
+  flex-wrap: wrap;
+  height: 340px;
 }
 .wap-content-item {
   width: 210px;

manager/src/components/lili-dialog/style.scss

@@ -21,7 +21,8 @@
   font-size: 12px;
   color: #999;
   overflow: hidden;
-
+  display: flex;
+  align-items: center;
   text-overflow: ellipsis;
 
   white-space: nowrap;
@@ -65,13 +66,16 @@
   background: #ededed;
 }
 
-
+.pageration {
+  text-align: right;
+  padding-right: 20px;
+}
 .wap-content-item {
 
   cursor: pointer;
 
   display: flex;
-  height: 100px;
+  height: 90px;
   padding: 2px;
   overflow: hidden;
   align-items: center;

manager/src/components/lili-dialog/template/shops.vue

@@ -13,7 +13,7 @@
         </div>
       </div>
       <div>
-        <Scroll class="wap-content-list" :on-reach-bottom="handleReachBottom" :distance-to-edge="23">
+        <div class="wap-content-list" >
           <div class="wap-content-item" @click="clickShop(item,index)" :class="{ active:selected == index }" v-for="(item, index) in shopsData" :key="index">
             <div>
               <img class="shop-logo" :src="item.storeLogo" alt="" />
@@ -26,7 +26,18 @@
             </div>
           </div>
           <Spin size="large" fix v-if="loading"></Spin>
-        </Scroll>
+        </div>
+        <Page
+          :total="total"
+          class="pageration"
+          @on-change="changePageSize"
+          :page-size="params.pageSize"
+          size="small"
+          show-total
+          show-elevator
+
+        >
+        </Page>
       </div>
     </div>
   </div>
@@ -40,7 +51,7 @@ export default {
       total: "", // 总数
       params: { // 请求参数
         pageNumber: 1,
-        pageSize: 10,
+        pageSize: 12,
         storeDisable: "OPEN",
         storeName: "",
       },
@@ -54,13 +65,9 @@ export default {
     this.init();
   },
   methods: {
-    handleReachBottom() {
+    changePageSize(v){
-      setTimeout(() => {
+      this.params.pageNumber = v;
-        if (this.params.pageNumber * this.params.pageSize <= this.total) {
-          this.params.pageNumber++;
       this.init();
-        }
-      }, 1500);
     },
     init() {
       this.loading = true;
@@ -71,7 +78,7 @@ export default {
            */
           this.total = res.result.total;
 
-          this.shopsData.push(...res.result.records);
+          this.shopsData = res.result.records;
 
           this.loading = false;
         }
@@ -95,13 +102,15 @@ export default {
   color: #999;
 }
 .wap-content-list {
+  display: flex;
   flex-wrap: wrap;
+  height: 340px;
 }
+
 .shop-logo {
   object-fit: cover;
 }
-.wap-content-item {
+
-}
 .active {
   background: url("../../../assets/selected.png") no-repeat;
   background-position: right;

manager/src/views/order/after-order/afterSaleOrderDetail.vue

@@ -5,6 +5,19 @@
         <div class="div-flow-left">
           <div class="div-form-default">
             <h3>退货申请</h3>
+            <dl>
+              <dt>退货商品</dt>
+              <dd>
+                <div>
+                  <img :src="afterSaleInfo.goodsImage" style="height: 60px">
+                </div>
+                <a @click="linkTo(afterSaleInfo.goodsId, afterSaleInfo.skuId)">{{ afterSaleInfo.goodsName }}
+                </a><br>
+
+                <span>{{ afterSaleInfo.num }}(数量)</span>
+
+              </dd>
+            </dl>
             <dl>
               <dt>退货状态</dt>
               <dd>{{ afterSaleInfo.serviceName }}</dd>
@@ -155,43 +168,6 @@
         </div>
         <div class="div-flow-center"></div>
         <div class="div-flow-right">
-          <div class="div-form-default">
-            <h3>相关商品交易信息</h3>
-            <dl>
-              <dt>
-                <img :src="afterSaleInfo.goodsImage" height="60px" />
-              </dt>
-              <dd>
-                <div class="div-zoom">
-                  <a @click="linkTo(afterSaleInfo.goodsId, afterSaleInfo.skuId)">{{
-                    afterSaleInfo.goodsName
-                  }}</a>
-                  <Poptip trigger="hover" title="扫码在手机中查看" transfer>
-                    <div slot="content">
-                      <vue-qr
-                        :text="wapLinkTo(afterSaleInfo.goodsId, afterSaleInfo.skuId)"
-                        :margin="0"
-                        colorDark="#000"
-                        colorLight="#fff"
-                        :size="150"
-                      ></vue-qr>
-                    </div>
-                    <img
-                      src="../../../assets/qrcode.svg"
-                      style="vertical-align: middle"
-                      class="hover-pointer ml_10"
-                      width="20"
-                      height="20"
-                      alt=""
-                    />
-                  </Poptip>
-                </div>
-                <div style="color: #999; font-size: 10px">
-                  数量：x{{ afterSaleInfo.num }}
-                </div>
-              </dd>
-            </dl>
-          </div>
           <div class="div-form-default">
             <h3>订单相关信息</h3>
             <dl>

manager/src/views/order/after-order/orderComplaintDetail.vue

@@ -8,6 +8,13 @@
             <dl>
               <dt>投诉商品</dt>
               <dd>{{complaintInfo.goodsName}}</dd>
+              <dd>
+                <div>
+                  <img :src="complaintInfo.goodsImage" style="height: 60px">
+                </div>
+                <a>{{ complaintInfo.goodsName }}</a><br>
+                <span>{{ complaintInfo.num }}(数量)</span>
+              </dd>
             </dl>
             <dl>
               <dt>投诉状态</dt>
@@ -144,19 +151,6 @@
 
         </div>
         <div class="div-flow-right">
-          <div class="div-form-default">
-            <h3>相关商品交易信息</h3>
-            <dl>
-              <dt>
-                <img :src="complaintInfo.goodsImage" height="60px">
-              </dt>
-              <dd>
-                <a @click="linkTo(complaintInfo.goodsId, complaintInfo.skuId)">{{complaintInfo.goodsName}}</a><br>
-                <span>￥{{complaintInfo.goodsPrice}} * {{complaintInfo.num}}(数量)</span>
-              </dd>
-            </dl>
-
-          </div>
           <div class="div-form-default">
             <h3>订单相关信息</h3>
             <dl>

manager/src/views/page-decoration/renovation.vue

@@ -15,7 +15,7 @@
       <model-form ref="modelForm" :data="modelForm"></model-form>
     </div>
     <!-- 操作按钮 -->
-    <div class="btn-bar">
+    <div class="btn-bar" :class="{'top':isHiddenBar}">
       <Button type="primary" :loading="submitLoading" @click="saveTemplate">保存模板</Button>
       <Button class="ml_10" @click="resetTemplate">还原模板</Button>
       <Button class="ml_10" @click="witeLocalStore">将装修内容写入到本地</Button>
@@ -35,6 +35,8 @@ export default {
     ModelForm,
   },
   mounted() {
+    const setting = window.localStorage.getItem('admin-setting') ? JSON.parse(window.localStorage.getItem('admin-setting')) : {};
+    this.isHiddenBar = setting.isUseTabsRouter
      // 先读缓存，如果缓存有值则读缓存。
     const cache = this.getStore('managerPCPageCache')
     this.hasCache = !!cache;
@@ -71,6 +73,7 @@ export default {
       modelData, // 可选模块数据
       modelForm: { list: [] }, // 模板数据
       submitLoading: false, // 提交加载状态
+      isHiddenBar:true,
     };
   },
   methods: {
@@ -219,6 +222,9 @@ export default {
   padding: 10px;
   box-shadow: 1px 1px 10px #999;
   z-index: 99;
+
+}
+.top{
   top: 100px;
 }
 </style>

manager/src/views/page/article-manage/articleList.vue

@@ -36,7 +36,7 @@
             </Form>
           </Row>
           <Row class="operation padding-row">
-            <Button @click="add" type="primary">添加</Button>
+            <Button @click="add" v-if="!selected" type="primary">添加</Button>
           </Row>
           <Table
             :loading="loading"

manager/src/views/statistics/order.vue

@@ -172,18 +172,20 @@
         <div>
           <Table stripe :columns="columns" :data="data"></Table>
         </div>
+        <!-- (index) => {
+              refundParams.pageNumber = index;
+            } -->
+        <!-- (size) => {
+              (refundParams.pageSize = size), (refundParams.pageNumber = 1);
+            } -->
         <Page
           v-if="showRecords"
           size="small"
           @on-change="
-            (index) => {
+            pageNumberChange
-              refundParams.pageNumber = index;
-            }
           "
           @on-page-size-change="
-            (size) => {
+            pageSizeChange
-              (refundParams.pageSize = size), (refundParams.pageNumber = 1);
-            }
           "
           class="mt_10"
           show-total
@@ -523,6 +525,14 @@ export default {
     },
   },
   methods: {
+    pageNumberChange(val){
+      this.refundParams.pageNumber = val
+      this.getOrderList();
+    },
+    pageSizeChange(val){
+      this.refundParams.pageSize = val
+      this.getOrderList();
+    },
     // 订单图
     initOrderChart() {
       // 默认已经加载 legend-filter 交互
@@ -563,11 +573,13 @@ export default {
 
     clickBreadcrumb(item, index) {
       let callback = JSON.parse(JSON.stringify(item));
-
+      console.log("callback",callback)
       this.orderParams = callback;
 
       this.overViewParams = callback;
       this.refundParams = callback;
+      this.refundParams.pageNumber = 1
+      this.refundParams.pageSize = 10
     },
 
     // 实例化订单概览

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>

manager/src/views/sys/oss-manage/ossManage.vue

@@ -1,44 +1,62 @@
 <style lang="scss">
 @import "./ossManage.scss";
+.group-row {
+  padding-top: 10px;
+  border-top: 1px solid #ededed;
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  > * {
+    margin-right: 10px;
+  }
+}
+.article-category {
+  flex: 2;
+  min-width: 200px;
+}
+.table {
+  flex: 11;
+}
+.ivu-card {
+  width: 100%;
+}
+.modal-footer {
+  text-align: center;
+  > * {
+    margin: 0 10px;
+  }
+}
 </style>
 <template>
   <div class="search">
+    <Row>
       <Card>
         <div class="operation">
           <Row @keydown.enter.native="handleSearch">
-          <Form ref="searchForm" :model="searchForm" inline :label-width="85"    class="search-form"
+            <Form
+              ref="searchForm"
+              :label-width="85"
+              :model="searchForm"
+              class="search-form"
+              inline
             >
-            <Form-item label="原文件名" prop="name">
-              <Input
-                type="text"
-                v-model="searchForm.name"
-                placeholder="请输入原文件名"
-                clearable
-                style="width: 200px"
-              />
-            </Form-item>
-            <Form-item label="存储文件名" prop="fileKey">
-              <Input
-                type="text"
-                v-model="searchForm.fileKey"
-                placeholder="请输入存储文件名"
-                clearable
-                style="width: 200px"
-              />
-            </Form-item>
-
               <Form-item label="上传时间">
                 <DatePicker
                   v-model="selectDate"
-                type="daterange"
-                format="yyyy-MM-dd"
                   clearable
-                @on-change="selectDateRange"
+                  format="yyyy-MM-dd"
                   placeholder="选择起始时间"
                   style="width: 200px"
+                  type="daterange"
+                  @on-change="selectDateRange"
                 ></DatePicker>
               </Form-item>
-             <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn"
+              <Button
+                class="search-btn"
+                icon="ios-search"
+                type="primary"
+                @click="handleSearch"
               >搜索
               </Button>
             </Form>
@@ -46,62 +64,39 @@
           <div class="oss-operation padding-row">
             <div>
               <Upload
-              style="display:inline-block;"
-              :action="commonUrl + '/common/common/upload/file'"
-              :headers="accessToken"
-              :on-success="handleSuccess"
-              :on-error="handleError"
-              :show-upload-list="false"
-              :max-size="2048"
-              :on-exceeded-size="handleMaxSize"
-              multiple
                 ref="up"
+                :action="commonUrl + '/common/common/upload/file'"
+                :data="{
+                  directoryPath: searchForm.fileDirectoryId,
+                }"
+                :headers="accessToken"
+                :max-size="20480"
+                :on-error="handleError"
+                :on-exceeded-size="handleMaxSize"
+                :on-success="handleSuccess"
+                :show-upload-list="false"
+                multiple
+                style="display: inline-block"
               >
-              <Button type="primary">上传文件</Button>
+                <Button>上传图片</Button>
               </Upload>
-            <Dropdown @on-click="handleDropdown">
+              <Dropdown @on-click="handleDropdown" v-if="!isComponent">
                 <Button>
                   更多操作
                   <Icon type="md-arrow-dropdown"/>
                 </Button>
                 <DropdownMenu slot="list">
                   <DropdownItem name="refresh">刷新</DropdownItem>
-                <DropdownItem v-show="showType == 'list'" name="removeAll">批量删除
+                  <DropdownItem v-show="showType == 'list'" name="removeAll"
+                  >批量删除
                   </DropdownItem>
                 </DropdownMenu>
               </Dropdown>
             </div>
-
-          <div>
-            <RadioGroup
-              v-model="fileType"
-              @on-change="changeFileType"
-              type="button" button-style="solid"
-              style="margin-right: 25px"
-            >
-              <Radio label="all">所有类型</Radio>
-              <Radio label="pic">图片</Radio>
-              <Radio label="video">视频</Radio>
-            </RadioGroup>
-            <RadioGroup
-              v-model="showType"
-              type="button" button-style="solid"
-              @on-change="changeShowType"
-            >
-              <Radio title="列表" label="list">
-                <Icon type="md-list"></Icon>
-              </Radio>
-              <Radio title="缩略图" label="thumb">
-                <Icon type="ios-apps"></Icon>
-              </Radio>
-            </RadioGroup>
-          </div>
           </div>
         </div>
 
-      <div v-show="showType == 'list'">
+        <Alert show-icon v-if="!isComponent">
-        <Row >
-          <Alert show-icon>
           已选择
           <span>{{ selectCount }}</span> 项
           <a class="select-clear" @click="clearSelectAll">清空</a>
@@ -109,27 +104,60 @@
           >共计 {{ totalSize }} 存储量</span
           >
         </Alert>
-        </Row>
+
+        <div v-show="showType === 'list'" >
+          <div class="flex">
+            <div class="article-category mr_10">
+              <Tree
+                :data="treeData"
+                @on-contextmenu="handleContextMenu"
+                @on-select-change="handleCateChange"
+              >
+                <template slot="contextMenu" v-if="!isComponent">
+                  <DropdownItem @click.native="handleContextMenuEdit"
+                  >编辑
+                  </DropdownItem
+                  >
+                  <DropdownItem
+                    style="color: #ed4014"
+                    @click.native="handleContextMenuDelete"
+                  >删除
+                  </DropdownItem
+                  >
+                </template>
+              </Tree>
+              <Alert v-if="!isComponent">鼠标右键编辑/删除分组</Alert>
+              <div class="group-row flex" v-if="!isComponent">
+                <Button @click="handleClickAddGroup">添加分组</Button>
+              </div>
+            </div>
+
             <Table
+              ref="table"
+              :columns="isComponent ? viewColumns : columns"
+              :data="data"
               :loading="loading"
               border
-          :columns="columns"
+              class="table"
-          :data="data"
-          ref="table"
               sortable="custom"
               @on-sort-change="changeSort"
               @on-selection-change="changeSelect"
-        ></Table>
+            >
+              <template slot="fileKey" slot-scope="{ row }">
+                <a @click="copyFileUrl(row)">{{ row.fileKey }}</a>
+              </template>
+            </Table>
           </div>
-      <div v-show="showType == 'thumb'">
+        </div>
+        <div v-show="showType === 'thumb'">
           <div class="oss-wrapper">
             <Card v-for="(item, i) in data" :key="i" class="oss-card">
               <div class="content">
                 <img
-                @click="showPic(item)"
                   v-if="item.fileType.indexOf('image') >= 0"
-                class="img"
                   :src="item.url"
+                  class="img"
+                  @click="showPic(item)"
                 />
                 <div
                   v-else-if="item.fileType.indexOf('video') >= 0"
@@ -137,7 +165,7 @@
                   @click="showVideo(item)"
                 >
                   <!-- 文件小于5MB显示video -->
-                <video class="cover" v-if="item.fileSize < 1024 * 1024 * 5">
+                  <video v-if="item.fileSize < 1024 * 1024 * 5" class="cover">
                     <source :src="item.url"/>
                   </video>
                   <img class="play" src="@/assets/play.png"/>
@@ -155,17 +183,21 @@
                 <div class="actions">
                   <div class="btn">
                     <Tooltip content="下载" placement="top">
-                    <Icon @click="download(item)" type="md-download" size="16"/>
+                      <Icon
+                        size="16"
+                        type="md-download"
+                        @click="download(item)"
+                      />
                     </Tooltip>
                   </div>
                   <div class="btn">
                     <Tooltip content="重命名" placement="top">
-                    <Icon @click="rename(item)" type="md-create" size="16"/>
+                      <Icon size="16" type="md-create" @click="rename(item)"/>
                     </Tooltip>
                   </div>
                   <div class="btn-no">
                     <Tooltip content="删除" placement="top">
-                    <Icon @click="remove(item)" type="md-trash" size="16"/>
+                      <Icon size="16" type="md-trash" @click="remove(item)"/>
                     </Tooltip>
                   </div>
                 </div>
@@ -173,31 +205,29 @@
             </Card>
           </div>
         </div>
-      <Row type="flex" justify="end" class="mt_10">
+        <Row class="mt_10" justify="end" type="flex">
           <Page
             :current="searchForm.pageNumber"
-          :total="total"
             :page-size="searchForm.pageSize"
-          @on-change="changePage"
-          @on-page-size-change="changePageSize"
             :page-size-opts="pageSizeOpts"
-          size="small"
+            :total="total"
-          show-total
             show-elevator
             show-sizer
+            show-total
+            size="small"
+            @on-change="changePage"
+            @on-page-size-change="changePageSize"
           ></Page>
         </Row>
       </Card>
-
+    </Row>
-
-
     <Modal
-      :title="modalTitle"
       v-model="modalVisible"
       :mask-closable="false"
+      :title="modalTitle"
       :width="500"
     >
-      <Form ref="form" :model="form" :label-width="95" :rules="formValidate">
+      <Form ref="form" :label-width="95" :model="form" :rules="formValidate">
         <FormItem label="原文件名" prop="name">
           <Input v-model="form.name"/>
         </FormItem>
@@ -207,10 +237,9 @@
       </Form>
       <div slot="footer">
         <Button type="text" @click="handleCancel">取消</Button>
-        <Button type="primary" :loading="submitLoading" @click="handleSubmit"
+        <Button :loading="submitLoading" type="primary" @click="handleSubmit"
         >提交
-        </Button
+        </Button>
-        >
       </div>
     </Modal>
 
@@ -233,8 +262,8 @@
       v-model="videoVisible"
       :title="videoTitle"
       :width="800"
-      @on-cancel="closeVideo"
       draggable
+      @on-cancel="closeVideo"
     >
       <div id="dplayer"></div>
       <div slot="footer">
@@ -245,32 +274,96 @@
         >
       </div>
     </Modal>
+
+    <!-- 添加分组修改分组编辑框 -->
+    <Modal
+      v-model="enableGroup"
+      :title="insertOrUpdate === 'insert' ? '添加分组' : '修改分组'"
+      :loading="groupLoading"
+      @on-ok="submitAddGroup"
+      footer-hide
+    >
+      <Form
+        ref="formValidate"
+        :label-width="80"
+        :model="groupFormValidate"
+        :rules="groupRuleValidate"
+      >
+        <FormItem label="所在分组" prop="id">
+          <Cascader
+            v-model="groupFormValidate.id"
+            :data="treeData"
+            change-on-select
+          ></Cascader>
+        </FormItem>
+        <FormItem label="分组名称" prop="directoryName">
+          <Input v-model="groupFormValidate.directoryName"/>
+        </FormItem>
+      </Form>
+      <div class="modal-footer">
+        <Button @click="enableGroup = false">取消</Button>
+        <Button type="primary" @click="submitAddGroup">确定</Button>
+      </div>
+    </Modal>
   </div>
 </template>
 
 <script>
 import {
+  addFileDirectory,
+  deleteFile,
+  delFileDirectory,
+  getFileDirectory,
   getFileListData,
   renameFile,
-  deleteFile,
+  updateFileDirectory,
 } from "@/api/index";
 import DPlayer from "dplayer";
-
-const config = require('@/config/index')
 import { commonUrl } from "@/libs/axios";
-var dp;
+
+const config = require("@/config/index");
+
+let dp;
 export default {
   name: "oss-manage",
   props: {
     isComponent: {
       default: false,
-      type:Boolean
+      type: Boolean,
+    },
+    choose: {
+      type: String,
+      default: ""
     }
   },
   data() {
     return {
       commonUrl, // 上传文件路径
       config, // api地址
+      fileDirectoryId: "",
+
+      groupFormValidate: {
+        id: [],
+        directoryName: "",
+      },
+      groupRuleValidate: {
+        directoryName: [
+          {
+            required: true,
+            message: "请输入分组名称",
+            trigger: "blur",
+          },
+        ],
+        id: [
+          {
+            required: true,
+            message: "请选择分组",
+            trigger: "blur",
+            type: "array",
+          },
+        ],
+      },
+      enableGroup: false, // 是否展示分组
       selectImage: false, //是否是选择
       accessToken: {}, // 上传token鉴权
       loading: false, // 表单加载状态
@@ -297,7 +390,8 @@ export default {
       },
       selectDate: null, // 选择日期绑定modal
       oldKey: "", // 请求参数
-      form: { // 表单
+      form: {
+        // 表单
         name: "",
         fileKey: "",
       },
@@ -318,32 +412,16 @@ export default {
           width: 60,
           align: "center",
         },
-        {
-          title: "原文件名",
-          key: "name",
-          minWidth: 130,
-          sortable: true,
-          ellipsis: false,
-          tooltip: true,
-        },
-        {
-          title: "存储文件名",
-          key: "fileKey",
-          width: 165,
-          sortable: true,
-          ellipsis: false,
-          tooltip: true,
-        },
         {
           title: "缩略图(点击预览)",
           key: "url",
-          width: 150,
+          width: 300,
           align: "center",
           render: (h, params) => {
             if (params.row.fileType.includes("image") > 0) {
               return h("img", {
                 attrs: {
-                  src: params.row.url || '',
+                  src: params.row.url || "",
                   alt: "加载图片失败",
                 },
                 style: {
@@ -414,7 +492,6 @@ export default {
           title: "文件类型",
           key: "fileType",
           width: 115,
-          sortable: true,
           className: this.selectImage == true ? "none" : "",
         },
         {
@@ -432,46 +509,39 @@ export default {
         {
           title: "上传者",
           key: "createBy",
-          width: 120,
+          width: 200,
-          sortable: true,
           render: (h, params) => {
             let m = "";
             if (params.row.userEnums == "MANAGER") {
-            m="[管理员]"
+              m = "[管理员]";
             } else if (params.row.userEnums == "STORE") {
-              m="[店铺]"
+              m = "[店铺]";
             } else {
-              m="[会员]"
+              m = "[会员]";
             }
-            m += params.row.createBy
+            m += params.row.createBy;
             return h("span", m);
           },
         },
-        {
-          title: "上传时间",
-          key: "createTime",
-          width: 180,
-          sortable: true,
-          sortType: "desc",
-        },
         {
           title: "操作",
           key: "action",
           align: "center",
           fixed: "right",
-          width: 200,
+          // width: 300,
           render: (h, params) => {
             return h("div", [
               h(
                 "Button",
                 {
                   props: {
-                    type: "primary",
+                    type: "default",
                     size: "small",
                   },
                   style: {
                     marginRight: "5px",
-                    display: this.selectImage == true ? "inline-block" : "none",
+                    display:
+                      this.selectImage === true ? "inline-block" : "none",
                   },
                   on: {
                     click: () => {
@@ -500,25 +570,6 @@ export default {
                 },
                 "下载"
               ),
-              h(
-                "Button",
-                {
-                  props: {
-                    size: "small",
-                    type: 'success'
-                  },
-                  style: {
-                    marginRight: "5px",
-                    display: this.selectImage == true ? "none" : "inline-block",
-                  },
-                  on: {
-                    click: () => {
-                      this.rename(params.row);
-                    },
-                  },
-                },
-                "重命名"
-              ),
               h(
                 "Button",
                 {
@@ -541,17 +592,301 @@ export default {
           },
         },
       ],
+      viewColumns: [
+        {
+          title: "缩略图(点击预览)",
+          key: "url",
+          // width: 150,
+          align: "center",
+          render: (h, params) => {
+            if (params.row.fileType.includes("image") > 0) {
+              return h("img", {
+                attrs: {
+                  src: params.row.url || "",
+                  alt: "加载图片失败",
+                },
+                style: {
+                  cursor: "pointer",
+                  width: "80px",
+                  height: "60px",
+                  margin: "10px 0",
+                  "object-fit": "contain",
+                },
+                on: {
+                  click: () => {
+                    this.showPic(params.row);
+                  },
+                },
+              });
+            } else if (params.row.fileType.includes("video") > 0) {
+              // 如果视频文件大小超过5MB不予加载video
+              if (params.row.fileSize < 1024 * 1024 * 5) {
+                return h(
+                  "video",
+                  {
+                    style: {
+                      cursor: "pointer",
+                      width: "80px",
+                      height: "60px",
+                      margin: "10px 0",
+                      "object-fit": "contain",
+                    },
+                    on: {
+                      click: () => {
+                        this.showVideo(params.row);
+                      },
+                    },
+                  },
+                  [
+                    h("source", {
+                      attrs: {
+                        src: params.row.url,
+                      },
+                    }),
+                  ]
+                );
+              } else {
+                return h("img", {
+                  attrs: {
+                    src: require("@/assets/play.png"),
+                  },
+                  style: {
+                    cursor: "pointer",
+                    width: "80px",
+                    height: "60px",
+                    margin: "10px 0",
+                    "object-fit": "contain",
+                  },
+                  on: {
+                    click: () => {
+                      this.showVideo(params.row);
+                    },
+                  },
+                });
+              }
+            } else {
+              return h("span", "非多媒体类型");
+            }
+          },
+        },
+        {
+          title: "上传者",
+          key: "createBy",
+          width: 120,
+          sortable: true,
+          render: (h, params) => {
+            let m = "";
+            if (params.row.userEnums == "MANAGER") {
+              m = "[管理员]";
+            } else if (params.row.userEnums == "STORE") {
+              m = "[店铺]";
+            } else {
+              m = "[会员]";
+            }
+            m += params.row.createBy;
+            return h("span", m);
+          },
+        },
+        {
+          title: "操作",
+          key: "action",
+          align: "center",
+          fixed: "right",
+          width: 300,
+          render: (h, params) => {
+            return h("div", [
+              h(
+                "Button",
+                {
+                  props: {
+                    type: "default",
+                    size: "small",
+                  },
+                  style: {
+                    marginRight: "5px",
+                    display:
+                      this.selectImage === true ? "inline-block" : "none",
+                  },
+                  on: {
+                    click: () => {
+                      this.selectedParams(params.row);
+                    },
+                  },
+                },
+                "选择"
+              )
+            ]);
+          },
+        },
+      ],
       data: [], // 表单数据
       total: 0, // 表单数据总数
       pageSizeOpts: [5, 10, 20], // 页码展示项
+      list: [], // 列表
+      //树结构
+      treeData: [],
+      treeDataDefault: [],
+      selectedGroupData: "",
+      insertOrUpdate: "insert",
+      groupLoading: false,
     };
   },
   watch: {
     selectImage(val) {
-      if (val && !this.data.length) this.init()
+      if (val && !this.data.length) this.init();
+    },
+    choose(val) {
+      if (val) this.selectImage = val
     }
   },
+
   methods: {
+    handleContextMenu(val) {
+      console.log("val", val);
+      this.selectedGroupData = val;
+    },
+    // 编辑分组
+    handleContextMenuEdit(val) {
+      this.insertOrUpdate = "update";
+
+      this.enableGroup = true;
+      // this.groupFormValidate = this.selectedGroupData;
+
+      this.groupFormValidate.directoryName = this.selectedGroupData.title;
+      this.groupFormValidate.id = [this.selectedGroupData.value];
+      this.groupFormValidate.level = this.selectedGroupData.level;
+
+      this.groupFormValidate.parentId = this.selectedGroupData.parentId;
+      console.log(this.groupFormValidate);
+    },
+    // 删除分组
+    async handleContextMenuDelete(val) {
+      this.$Modal.confirm({
+        title: "提示",
+        content: "是否删除该分组",
+        onOk: async () => {
+          const res = await delFileDirectory(this.selectedGroupData.value);
+          if (res.success) {
+            this.$Message.success("删除成功!");
+            this.getAllList();
+          }
+        },
+      });
+    },
+    // 保存/修改分组
+    async submitAddGroup() {
+      this.$refs["formValidate"].validate(async (valid) => {
+        if (valid) {
+          let res
+          const params = { ...this.groupFormValidate };
+
+          if (this.insertOrUpdate === "insert") {
+            // params.directoryType = this.selectedGroupData.directoryType
+            params.parentId = params.id[params.id.length - 1];
+            // params.type = this.selectedGroupData.type
+            params.level =
+              params.parentId == "0" ? 0 : this.selectedGroupData.level + 1;
+            delete params.id;
+            res = await addFileDirectory(params);
+          } else {
+            params.id = params.id[params.id.length - 1];
+            res = await updateFileDirectory(params);
+          }
+
+          if (res.success) {
+            this.$Message.success("操作成功!");
+            this.enableGroup = false;
+            this.getAllList();
+          }
+          this.$Modal.remove();
+        } else {
+          this.$Message.error("请填写完整信息!");
+        }
+      });
+    },
+    // 添加/修改分组
+    handleClickAddGroup() {
+      this.insertOrUpdate = "insert";
+      if (this.selectedGroupData) {
+        this.groupFormValidate.id = [this.selectedGroupData.value];
+      } else {
+        this.groupFormValidate.id = ["0"];
+      }
+      this.enableGroup = true;
+      this.groupFormValidate.directoryName = "";
+    },
+    copyFileUrl(row) {
+      const textArea = document.createElement("textarea");
+      textArea.value = row.url;
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+      try {
+        document.execCommand("copy");
+        this.$Message.success("复制成功");
+      } catch (err) {
+        console.error("Unable to copy to clipboard", err);
+      }
+      document.body.removeChild(textArea);
+    },
+
+    // 获取全部文件目录
+    getAllList(parent_id) {
+      this.loading = true;
+      getFileDirectory(parent_id).then((res) => {
+        this.loading = false;
+        if (res.success) {
+          this.treeData = this.getTree(res.result);
+          this.treeDataDefault = this.getTree(res.result);
+          this.treeData.unshift({
+            title: "全部图片",
+            label: "全部分类",
+            value: "0",
+            level: 0,
+            children: [],
+            id: "0",
+            categoryId: 0,
+          });
+        }
+      });
+    },
+    // 文件目录分类格式化方法
+    getTree(tree = []) {
+      let arr = [];
+      if (!!tree && tree.length !== 0) {
+        tree.forEach((item) => {
+          let obj = {};
+          obj.title = item.directoryName;
+          obj.value = item.id; // 拥有者id
+          obj.type = item.directoryType; // 用户类型
+          obj.label = item.directoryName;
+          obj.level = item.level;
+          obj.expand = false;
+          obj.selected = false;
+          obj.contextmenu = true;
+          obj.parentId = item.parentId;
+          obj.children = this.getTree(item.children); // 递归调用
+          arr.push(obj);
+        });
+      }
+      return arr;
+    },
+
+    // 选择分类回调
+    handleCateChange(data) {
+      this.selectedGroupData = data[0];
+      let {value, type} = data[0];
+      this.list.push({
+        value,
+        type,
+      });
+      this.searchForm.fileDirectoryId = value;
+      if (value === "0") {
+        delete this.searchForm.fileDirectoryId;
+      }
+      this.searchForm.userEnums = type;
+      this.getDataList();
+    },
     /**
      * 选择
      */
@@ -560,9 +895,9 @@ export default {
     },
     // 更多操作
     handleDropdown(name) {
-      if (name == "refresh") {
+      if (name === "refresh") {
         this.getDataList();
-      } else if (name == "removeAll") {
+      } else if (name === "removeAll") {
         this.removeAll();
       }
     },
@@ -572,6 +907,7 @@ export default {
         accessToken: this.getStore("accessToken"),
       };
       this.getDataList();
+      this.getAllList();
     },
     // 查看大图
     showPic(v) {
@@ -725,13 +1061,16 @@ export default {
             ids += e.id + ",";
           });
           ids = ids.substring(0, ids.length - 1);
-          deleteFile(ids).then((res) => {
+          deleteFile({ids: ids}).then((res) => {
             this.$Modal.remove();
             if (res.success) {
               this.$Message.success("批量删除文件成功");
               this.clearSelectAll();
               this.getDataList();
             }
+          })
+            .catch((err) => {
+              console.log("失败", err);
             });
         },
       });
@@ -743,13 +1082,13 @@ export default {
         content: "您确认要删除文件 " + v.name + " ?",
         loading: true,
         onOk: () => {
-          deleteFile(v.id).then((res) => {
+          deleteFile({ids: v.id}).then((res) => {
             this.$Modal.remove();
             if (res.success) {
               this.$Message.success("删除文件 " + v.name + " 成功");
               this.getDataList();
             }
-          });
+          })
         },
       });
     },
@@ -792,6 +1131,7 @@ export default {
     },
     // 清除选中状态
     clearSelectAll() {
+      console.log("清除选中状态");
       this.$refs.table.selectAll(false);
       this.totalSize = "";
     },
@@ -807,10 +1147,10 @@ export default {
     },
   },
   mounted() {
-    if(!this.isComponent) { // 是组件的话，初始化不调用接口
+    if (!this.isComponent) {
+      // 是组件的话，初始化不调用接口
       this.init();
     }
   },
-
 };
 </script>

seller/src/views/goods/goods-seller/goodsOperationSec.vue

@@ -156,12 +156,12 @@
                       <div v-for="(item, $index) in skuInfo" :key="$index" class="sku-item-content">
                         <Card :bordered="true" class="ivu-card-body">
                           <Button slot="extra" type="primary" @click="handleCloseSkuItem($index, item)">
-                            删除规格
+                            删除规格项
                           </Button>
                           <div>
-                            <FormItem class="sku-item-content-val flex" label="规格名">
+                            <FormItem class="sku-item-content-val flex" label="规格项名">
                               <AutoComplete v-model="item.name" :data="skuData" :filter-method="filterMethod"
-                                :maxlength="30" placeholder="请输入规格名称" style="width: 150px"
+                                :maxlength="30" placeholder="请输入规格项名称" style="width: 150px"
                                 @on-focus="changeSkuItem(item.name)" @on-change="
                                   editSkuItem(item.name, $index, item)
                                   ">
@@ -1568,6 +1568,13 @@ export default {
             this.submitLoading = false;
             return;
           }
+
+          if (this.goodsUnitList && !this.goodsUnitList.find(i => i === this.baseInfoForm.goodsUnit)) {
+            submit.goodsUnit = ""
+            this.$Message.error("商品单位不存在");
+            this.submitLoading = false;
+            return;
+          }
           let skuInfoNames = this.skuInfo.map((n) => n.name);
           submit.skuList = [];
           this.skuTableData.map((sku) => {

seller/src/views/lili-components/affix-time.vue

@@ -1,45 +1,42 @@
 <template>
   <div>
     <div class="breadcrumb">
-      <span @click="clickBreadcrumb(item,index)" :class="{'active':item.selected}" v-for="(item,index) in dateList" :key="index"> {{item.title}}</span>
+      <span @click="clickBreadcrumb(item, index)" :class="{ 'active': item.selected }" v-for="(item, index) in dateList"
+        :key="index"> {{ item.title }}</span>
       <div class="date-picker">
-        <Select @on-change="changeSelect(selectedWay)" v-model="month" placeholder="年月查询" style="width:200px;margin-left:10px;">
+        <Select @on-change="changeSelect($event, selectedWay)" :value="month" placeholder="年月查询"
-          <Option v-for="(item,index) in dates" :value="item.year+'-'+item.month" :key="index">{{ item.year+'年'+item.month+'月' }}</Option>
+          style="width:200px;margin-left:10px;">
+          <Option v-for="(item, index) in dates" :value="item.year + '-' + item.month" :key="index">{{
+            item.year + '年' + item.month + '月' }}</Option>
         </Select>
       </div>
-
     </div>
   </div>
 </template>
 <script>
-import Cookies from "js-cookie";
+import { getShopListData } from "@/api/shops.js";
 export default {
   props: ["closeShop"],
   data() {
     return {
-      month: "", // 所选月份
+      month: "", // 月份
-
-      defuaultWay: {
-        title: "过去7天",
-        selected: true,
-        searchType: "LAST_SEVEN",
-      },
 
       selectedWay: {
+        // 可选时间项
         title: "过去7天",
         selected: true,
         searchType: "LAST_SEVEN",
       },
       storeId: "", // 店铺id
       dates: [], // 日期列表
-      params: { // 请求参数
+      params: {
+        // 请求参数
         pageNumber: 1,
         pageSize: 10,
         storeName: "",
-        storeId: "",
       },
-
       dateList: [
+        // 筛选条件
         {
           title: "今天",
           selected: false,
@@ -61,13 +58,67 @@ export default {
           searchType: "LAST_THIRTY",
         },
       ],
+      originDateList: [
+        // 筛选条件
+        {
+          title: "今天",
+          selected: false,
+          searchType: "TODAY",
+        },
+        {
+          title: "昨天",
+          selected: false,
+          searchType: "YESTERDAY",
+        },
+        {
+          title: "过去7天",
+          selected: true,
+          searchType: "LAST_SEVEN",
+        },
+        {
+          title: "过去30天",
+          selected: false,
+          searchType: "LAST_THIRTY",
+        },
+      ],
+
+      shopTotal: "", // 店铺总数
+      shopsData: [], // 店铺数据
     };
   },
   mounted() {
-   this.storeId = JSON.parse(Cookies.get("userInfoSeller")).id;
     this.getFiveYears();
+    this.getShopList();
   },
   methods: {
+    // 页面触底
+    handleReachBottom() {
+      setTimeout(() => {
+        if (this.params.pageNumber * this.params.pageSize <= this.shopTotal) {
+          this.params.pageNumber++;
+          this.getShopList();
+        }
+      }, 1500);
+    },
+    // 查询店铺列表
+    getShopList() {
+      getShopListData(this.params).then((res) => {
+        if (res.success) {
+          /**
+           * 解决数据请求中，滚动栏会一直上下跳动
+           */
+          this.shopTotal = res.result.total;
+
+          this.shopsData.push(...res.result.records);
+        }
+      });
+    },
+    // 变更店铺
+    changeshop(val) {
+      this.selectedWay.storeId = this.storeId;
+      this.$emit("selected", this.selectedWay);
+    },
+
     // 获取近5年 年月
     getFiveYears() {
       let getYear = new Date().getFullYear();
@@ -89,8 +140,9 @@ export default {
       }
       this.dates = dates.reverse();
     },
-    // 选择回调
+    // 改变已选店铺
-    changeSelect() {
+    changeSelect(e) {
+      this.month = e
       if (this.month) {
         this.dateList.forEach((res) => {
           res.selected = false;
@@ -101,29 +153,36 @@ export default {
 
         this.$emit("selected", this.selectedWay);
       } else {
+
+        const current = this.dateList.find(item => { return item.selected })
+        this.selectedWay = current
+        this.clickBreadcrumb(current)
+        this.$emit("selected", this.selectedWay);
+
+
       }
     },
-    // 点击时间筛选
+    // 变更时间
     clickBreadcrumb(item) {
-      this.dateList.forEach((res) => {
+
+      let currentIndex;
+      this.dateList.forEach((res,index) => {
         res.selected = false;
+        if(res.title === item.title){
+          currentIndex = index
+        }
       });
       item.selected = true;
       item.storeId = this.storeId;
       this.month = "";
-
       if (item.searchType == "") {
-        if (
+       let currentDate = this.originDateList[currentIndex].searchType
-          dateList.some((date) => {
+        if (currentDate) {
-            return date.title == item.title;
+          item.searchType = currentDate
-          })
-        ) {
-          item.searchType = date.searchType;
         } else {
           item.searchType = "LAST_SEVEN";
         }
       }
-
       this.selectedWay = item;
       this.selectedWay.year = new Date().getFullYear();
       this.selectedWay.month = "";
@@ -137,17 +196,20 @@ export default {
 .breadcrumb {
   display: flex;
   align-items: center;
+
   >span {
     margin-right: 15px;
     cursor: pointer;
   }
 }
+
 .active {
   color: $theme_color;
   position: relative;
 }
-.date-picker {
+
-}
+.date-picker {}
+
 .active:before {
   content: "";
   position: absolute;

seller/src/views/order/after-order/orderComplaintDetail.vue

@@ -7,7 +7,13 @@
             <h3>投诉信息</h3>
             <dl>
               <dt>投诉商品</dt>
-              <dd>{{ complaintInfo.goodsName }}</dd>
+              <dd>
+                <div>
+                  <img :src="complaintInfo.goodsImage" style="height: 60px">
+                </div>
+                <a>{{ complaintInfo.goodsName }}</a><br>
+                <span>￥{{ complaintInfo.goodsPrice | unitPrice }} * {{ complaintInfo.num }}(数量)</span>
+              </dd>
             </dl>
             <dl>
               <dt>投诉状态</dt>
@@ -160,19 +166,6 @@
 
         </div>
         <div class="div-flow-right">
-          <div class="div-form-default">
-            <h3>相关商品交易信息</h3>
-            <dl>
-              <dt>
-                <img :src="complaintInfo.goodsImage" height="60px">
-              </dt>
-              <dd>
-                <a>{{ complaintInfo.goodsName }}</a><br>
-                <span>￥{{ complaintInfo.goodsPrice | unitPrice }} * {{ complaintInfo.num }}(数量)</span>
-              </dd>
-            </dl>
-
-          </div>
           <div class="div-form-default">
             <h3>订单相关信息</h3>
             <dl>

seller/src/views/order/after-order/reurnGoodsOrderDetail.vue

@@ -8,8 +8,15 @@
             <div class="div-form-default">
               <h3>售后申请</h3>
               <dl>
-                <dt>售后状态</dt>
+                <dt>售后商品</dt>
-                <dd>{{filterStatus(afterSaleInfo.serviceStatus)}}</dd>
+                <dd>
+                  <div>
+                    <img :src="afterSaleInfo.goodsImage" style="height: 60px">
+                  </div>
+                  <a>{{ afterSaleInfo.goodsName }}</a><br>
+                  <span>{{ afterSaleInfo.num }}(数量)</span>
+                </dd>
+
               </dl>
 
               <dl>
@@ -155,20 +162,6 @@
 
           </div>
           <div class="div-flow-right">
-            <div class="div-form-default">
-              <h3>相关商品交易信息</h3>
-              <dl>
-                <dt>
-                  <img :src="afterSaleInfo.goodsImage" height="60px">
-                </dt>
-                <dd>
-                  <a>{{ afterSaleInfo.goodsName }}</a><br>
-                  <span>{{ afterSaleInfo.num }}(数量)</span><br>
-
-                </dd>
-              </dl>
-
-            </div>
             <div class="div-form-default">
               <h3>订单相关信息</h3>
               <dl>

seller/src/views/shop/renovation.vue

@@ -23,7 +23,7 @@
       <model-form ref="modelForm" :data="modelForm"></model-form>
     </div>
     <!-- 操作按钮 -->
-    <div class="btn-bar">
+    <div class="btn-bar" :class="{'top':isHiddenBar}">
       <Button type="primary" :loading="submitLoading" @click="saveTemplate"
         >保存模板</Button
       >
@@ -44,6 +44,8 @@ export default {
     ModelForm,
   },
   mounted() {
+    const setting = window.localStorage.getItem('admin-setting') ? JSON.parse(window.localStorage.getItem('admin-setting')) : {};
+    this.isHiddenBar = setting.isUseTabsRouter
       // 先读缓存，如果缓存有值则读缓存。
     const cache = this.getStore('sellerPCPageCache')
     this.hasCache = !!cache;
@@ -80,6 +82,7 @@ export default {
       modelData, // 可选模块数据
       modelForm: { list: [] }, // 模板数据
       submitLoading: false, // 提交加载状态
+      isHiddenBar:true,
     };
   },
   methods: {
@@ -225,4 +228,7 @@ export default {
   z-index: 99;
   top: 100px;
 }
+.top{
+  top: 100px;
+}
 </style>

seller/src/views/statistics/order.vue

@@ -152,7 +152,7 @@
         <div>
           <Table stripe :columns="columns" :data="data"></Table>
         </div>
-        <Page @on-change="(index)=>{refundParams.pageNumber = index}" @on-page-size-change="(size)=>{refundParams.pageSize= size}" class="mt_10" show-total show-elevator :total="total" />
+        <Page @on-change="pageNumberChange" @on-page-size-change="pageSizeChange" class="mt_10" show-total show-elevator :total="total" />
       </div>
     </Card>
 
@@ -459,6 +459,14 @@ export default {
     },
   },
   methods: {
+    pageNumberChange(val){
+      this.refundParams.pageNumber = val
+      this.getOrderList();
+    },
+    pageSizeChange(val){
+      this.refundParams.pageSize = val
+      this.getOrderList();
+    },
     // 订单图
     initOrderChart() {
       // 默认已经加载 legend-filter 交互