wzy 提交，完成平台选品以及指定关系等等

src/api/address.js

@@ -18,4 +18,13 @@ export function getChildAreaList(parentId) {
       parentId
     }
   })
+}
+
+//  查询小区
+export function getCommunityList(params) {
+  return request({
+    url: '/cityCommunity/selectCommunity',
+    method: 'GET',
+    params
+  })
 }

src/api/commodity.js

@@ -1,6 +1,24 @@
 import request from '@/utils/request'
 
 //* ******************** 添加商品  *********************
+// 商品类别管理查询
+export function commdityClassGetAll(data) {
+  return request({
+    url: '/classify/getAll',
+    method: 'post',
+    data
+  })
+}
+
+//  商家分组查询
+export function commdityClassGetGroup(data) {
+  return request({
+    url: '/shopGroup/getAll',
+    method: 'post',
+    data
+  })
+}
+
 // 选择商品分组查询
 export function getGroupSelect(data) {
   return request({

src/api/customerMage.js

@@ -119,4 +119,14 @@ export function appointRelationship(data){
     method:"post",
     data
   })
+}
+
+
+//  指定用户关系 团长 合伙人等
+export function appointUserRelationship(data){
+  return request({
+    url:"/shopApi/syncShop",
+    method:"post",
+    data
+  })
 }

src/api/platformProduct.js

@@ -200,4 +200,22 @@ export function getProductMerchantList(data) {
     method: "post",
     data,
   });
+}
+
+//  加入选品库
+export function addProduct(data) {
+  return request({
+    url: "/selection/addSelectionLibrary",
+    method: "post",
+    data,
+  });
+}
+
+//  获取商品详情
+export function getProductDetail(data) {
+  return request({
+    url: "/selection/getProductDetails",
+    method: "post",
+    data,
+  });
 }

src/api/proxyStore.js

@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+
+
+//  店铺管理查询
+export function customerMageGetById(data) {
+    return request({
+      url: '/shopApi/syncShop',
+      method: 'post',
+      data
+    })
+  }

src/views/member/memberList/index.vue

@@ -113,7 +113,7 @@
         <el-checkbox-group v-model="checkList">
           <el-checkbox v-for="(item, index) in tipsList" :key="index" class="checkBoxStyle" :label="item.buyerLabelId">
             {{
-              item.labelName }}
+          item.labelName }}
           </el-checkbox>
         </el-checkbox-group>
       </div>
@@ -146,18 +146,57 @@
     </el-dialog>
 
     <!--  指定关系 -->
-    <el-dialog title="选择关系" :visible.sync="appointDialog" width="25%" center :close-on-click-modal="false"
+    <el-dialog title="选择关系" :visible.sync="appointDialog" width="40%" center :close-on-click-modal="false"
       @close="appintClose">
       <span slot="footer" class="dialog-footer">
-        <el-form label-width="120px">
-          <el-form-item label="请选择区域:">
-            <el-cascader :props="areaData" ref="cascaderRef" @change="handleCascaderChange"></el-cascader>
-          </el-form-item>
-          <el-form-item label="是否为加盟商:">
+        <el-form label-width="120px" :model="appintForm" :rules="rules" ref="ruleForm">
+          <div class="lable-list">
+            <div class="lable-item">
+              <el-form-item label="加盟商名称:" prop="name">
+                <el-input v-model="appintForm.name" placeholder="请输入名称"></el-input>
+              </el-form-item>
+            </div>
+            <div class="lable-item">
+              <el-form-item label="加盟商电话:" prop="phone">
+                <el-input v-model="appintForm.phone" placeholder="请输入电话"></el-input>
+              </el-form-item>
+            </div>
+          </div>
+          <div class="lable-list">
+            <div class="lable-item">
+              <el-form-item label="请选择区域:" prop="area">
+                <!-- <el-cascader  :props="{checkStrictly: true}"  ref="cascaderRef" @change="handleCascaderChange"></el-cascader> -->
+                <el-cascader :props="areaData" ref="cascaderRef" @change="handleCascaderChange"></el-cascader>
+              </el-form-item>
+            </div>
+            <div class="lable-item">
+              <el-form-item label="详细地址:" prop="address">
+                <el-input v-model="appintForm.address" placeholder="请输入详细地址"></el-input>
+              </el-form-item>
+            </div>
+          </div>
+          <div class="lable-list">
+            <div class="lable-item">
+              <el-form-item label="店长名称:" prop="chargePersonName">
+                <el-input v-model="appintForm.chargePersonName" placeholder="请输入店长名称"></el-input>
+              </el-form-item>
+            </div>
+            <div class="lable-item" v-if="appintForm.type == 5">
+              <el-form-item label="选择小区:" prop="communityId">
+                <el-select v-model="communityId" placeholder="请选择">
+                  <el-option v-for="item in communityList" :key="item.id" :label="item.communityName" :value="item.id">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </div>
+          </div>
+          <el-form-item label="选择指定关系:" prop="type">
             <template>
-              <el-radio v-model="appintForm.isType" label="1">加盟商</el-radio>
-              <el-radio v-model="appintForm.isType" label="2">代理商</el-radio>
-              <el-radio v-model="appintForm.isType" label="3">撤销状态</el-radio>
+              <el-radio v-model="appintForm.type" :label="1">团长</el-radio>
+              <el-radio v-model="appintForm.type" :label="2">合伙人</el-radio>
+              <el-radio v-model="appintForm.type" :label="3">加盟商</el-radio>
+              <el-radio v-model="appintForm.type" :label="4">区代理</el-radio>
+              <el-radio v-model="appintForm.type" :label="5">小区</el-radio>
             </template>
           </el-form-item>
         </el-form>
@@ -177,9 +216,9 @@ import {
   customerBlacklist,
   updateBuyerCredit,
   exportBuyerUser,
-  appointRelationship
+  appointUserRelationship
 } from '@/api/customerMage'
-import { getProvinceList, getChildAreaList } from '@/api/address'
+import { getProvinceList, getChildAreaList, getCommunityList } from '@/api/address'
 // import { getSelect } from '../../../api/renovation'
 import memberDetails from './details'
 // import { constants } from 'fs';
@@ -220,6 +259,7 @@ export default {
       appointDialog: false, // 指定关系的弹出框
       areaData: {
         lazy: true,
+        checkStrictly: true,
         label: 'name',
         value: 'id',
         lazyLoad(node, resolve) {
@@ -227,6 +267,7 @@ export default {
           if (level === 0) {
             getProvinceList().then(res => {
               resolve(res.data)
+              console.log(res);
             })
           } else if (level != 0) {
             getChildAreaList(value).then(res => {
@@ -238,10 +279,44 @@ export default {
           }
         }
       },
+      //  
+      cityId: "",
       appintForm: {
-        buyerUserId: null,
-        region: null,
-        isType: '1'
+        userId: null,
+        area: null,
+        type: '',
+        name: "",
+        phone: "",
+        address: "",
+        chargePersonName: ""
+      },
+
+      // 小区数据
+      communityList: [],
+      //  小区的id
+      communityId: "",
+
+      //  指定关系正则校验
+      rules: {
+        name: [
+          { required: true, message: '请填写加盟商名称', trigger: 'change' }
+        ],
+        phone: [
+          { required: true, message: '请填写加盟商电话', trigger: 'change' },
+          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'change' }
+        ],
+        area: [
+          { required: true, message: '请选择区域', trigger: 'change' }
+        ],
+        address: [
+          { required: true, message: '请填写详细地址', trigger: 'change' }
+        ],
+        chargePersonName: [
+          { required: true, message: '请输入店长名称', trigger: 'change' }
+        ],
+        type: [
+          { required: true, message: '请选择你需要指定的关系', trigger: 'change' }
+        ],
       }
     }
   },
@@ -344,14 +419,21 @@ export default {
     },
     //  指定关系
     appointBtn(row) {
-      this.appintForm.buyerUserId = row.buyerUserId
+      this.appintForm.userId = row.buyerUserId
       this.appointDialog = true
     },
     // 获取省数据
-    handleCascaderChange() {
+    async handleCascaderChange() {
       const checkedNode = this.$refs.cascaderRef.getCheckedNodes()
       const nodeData = checkedNode[0].data
-      this.appintForm.region = nodeData.id
+      let res = await getChildAreaList(nodeData.id)
+      if (res.data.length == 0) {
+        let res2 = await getCommunityList({ cityId: nodeData.id })
+        this.communityList = res2.data
+      }
+      console.log(res);
+
+      this.appintForm.area = nodeData.id
     },
     //  指定关系取消
     appintCan() {
@@ -359,27 +441,59 @@ export default {
     },
     //  指定关系确认
     async appintDetermine() {
-      if (this.appintForm.region == null && this.appintForm.isType != '3') {
-        this.$message.error("请选择区域");
-        return
-      }
-      let res = await appointRelationship(this.appintForm);
-      if (res.code == "") {
-        this.$message.success("指定关系成功")
-        this.appointDialog = false
-      }
+      //  先进行校验
+      this.$refs['ruleForm'].validate(async (valid) => {
+        if (valid) {
+          if(this.appintForm.type == 5 && this.communityId == ""){
+            this.$message.error("请选择小区，如没有小区的话，是该区域没有小区，请选择有区域的小区");
+            return
+          }
+          if(this.appintForm.type == 5 && this.communityId != ""){
+            this.appintForm.communityId = this.communityId;
+          }
+          let res = await appointUserRelationship(this.appintForm);
+          if(res.code == ""){
+            this.$message({
+              message: "添加成功",
+              type: res.message
+            });
+            this.appointDialog = false;
+            this.search();
+          }
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+
+      // if (this.appintForm.region == null && this.appintForm.isType != '3') {
+      //   this.$message.error("请选择区域");
+      //   return
+      // }
+      // let res = await appointRelationship(this.appintForm);
+      // if (res.code == "") {
+      //   this.$message.success("指定关系成功")
+      //   this.appointDialog = false
+      // }
       //  重新获取数据
       this.getAll(this.formParams)
     },
     //  弹窗关闭 把数据重置
     appintClose() {
       this.appintForm = {
-        buyerUserId: null,
-        region: null,
-        isType: '1'
+        userId: null,
+        area: null,
+        type: "",
+        name: "",
+        phone: "",
+        address: "",
+        chargePersonName: "",
+        communityId:""
       }
+      this.communityId = ""
+      this.communityList = []
       this.$refs.cascaderRef.inputValue = ""
-      console.log(this.$refs.cascaderRef);
+      this.$refs['ruleForm'].resetFields();
     },
     // 加入黑名单
     addBlackList(row) {
@@ -505,5 +619,18 @@ export default {
 .checkBoxStyle {
   margin-bottom: 20px;
 }
-</style>
 
+.lable-list {
+  display: flex;
+  align-items: center;
+
+  .lable-item {
+    // flex: 1;
+    width: 50%;
+  }
+}
+
+::v-deep .el-cascader {
+  width: 100%
+}
+</style>

src/views/platformProduct/beSelected/addCommodity.vue

@@ -0,0 +1,285 @@
+<template>
+  <el-dialog :close-on-click-modal="false" title="详情" width="74%" :visible.sync="visible">
+    <div>
+      <el-card class="box-card">
+        <span class="addTitle">商品详情</span>
+        <el-button type="success" class="btnList" @click="back">关闭</el-button>
+        <el-button
+          v-if="productItem.shelveState === 2" type="primary" class="btnList"
+          @click="examineShow(productData)"
+        >
+          审核
+        </el-button>
+      </el-card>
+      <el-card class="box-card">
+        <label>商品详情</label>
+        <div class="GoodBox">
+          <el-row class="detail-box">
+            <el-col :span="12">
+              <div>商品名称：{{ productItem.productName }}</div>
+              <div>商品卖点：{{ productItem.productBrief }}</div>
+              <div>
+                商品图片：
+                <div>
+                  <img
+                    v-for="(item, index) in productItem.images" :key="index" class="proImage" :src="item.imgPath"
+                    alt="" @click="handlePictureCardPreview(item)"
+                  >
+                </div>
+              </div>
+              <div>商品款式：</div>
+            </el-col>
+            <el-col :span="12">
+              <div>官方分类：{{ productItem.classifyName }}</div>
+              <div>商家分组：{{ productItem.shopGroupName }}</div>
+              <div>商家名称：{{ productItem.shopName }}</div>
+              <div>
+                商品状态：
+                <span v-if="productItem.shelveState == 0">已下架 </span>
+                <span v-if="productItem.shelveState == 1">已上架</span>
+                <span v-if="productItem.shelveState == 2">待审核</span>
+                <span v-if="productItem.shelveState == 3">审核失败</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row class="detail-box">
+            <el-col :span="24">
+              <el-table
+                :data="productItem.skuList" style="width: 100%"
+                :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
+              >
+                <el-table-column v-for="(skuAttr, index) in skuAttrName" :key="index" :label="skuAttr.skuName">
+                  <template slot-scope="scope">
+                    {{
+                      scope.row.skuAttrCodeDTOList &&
+                        scope.row.skuAttrCodeDTOList[index]
+                        | attrValueFilter(productItem.skuAttrList)
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column label="优惠价">
+                  <template slot-scope="scope">
+                    <el-input
+                      v-model="scope.row.price" maxlength="9" disabled
+                      oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="市场价">
+                  <template slot-scope="scope">
+                    <el-input
+                      v-model="scope.row.originalPrice" maxlength="9" disabled
+                      oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="供货价">
+                  <template slot-scope="scope">
+                    <el-input
+                      v-model="scope.row.manufacturerBasePrice" maxlength="9" disabled
+                      oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="库存">
+                  <template slot-scope="scope">
+                    <el-input
+                      v-model="scope.row.stockNumber" maxlength="9" disabled
+                      oninput="value=value.replace(/[^\d]/g,'')"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="重量(KG)">
+                  <template slot-scope="scope">
+                    <el-input
+                      v-model="scope.row.weight" maxlength="9" disabled
+                      oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="SKU">
+                  <template slot-scope="scope">
+                    <el-input v-model="scope.row.sku" maxlength="20" disabled />
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-col>
+          </el-row>
+        </div>
+      </el-card>
+
+      <el-card class="box-card">
+        <label>商品简介</label>
+        <!-- <Tinymce
+        ref="content"
+        v-model="productItem.productText"
+        class="tinymce-wrap"
+        :height="180"
+      /> -->
+        <br>
+        <br>
+        <div v-html="productItem.productText" />
+      </el-card>
+
+      <el-dialog :visible.sync="dialogVisible" append-to-body class="check-image-dialog" title="查看图片" center="center">
+        <div class="img">
+          <img width="80%" height="80%" :src="dialogImageUrl" alt>
+        </div>
+      </el-dialog>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+// import Tinymce from '@/components/Tinymce';
+import { getProductDetail } from '@/api/platformProduct'
+// import { uploadUrl } from '@/utils/request';
+// import StyleInformation from './addComponent';
+export default {
+  name: 'AddCommodity',
+  components: {
+    // Tinymce,
+    // StyleInformation,
+  },
+  filters: {
+    attrValueFilter(map, list) {
+      const hasChilds =
+        list &&
+        list.filter((skuAttr) => {
+          const hasChild = skuAttr.values.some((attr) => attr.skuValue)
+          return skuAttr.skuName && hasChild
+        })
+      if (!map) {
+        return ''
+      }
+      const { code, valueCode } = map
+      let codeStr = ''
+      hasChilds.map((item) => {
+        const { values } = item
+        values &&
+          values.some((attr) => {
+            const isSome = item.code === code && attr.valueCode === valueCode
+            if (isSome) {
+              codeStr = attr.skuValue
+            }
+            return isSome
+          })
+      })
+      return codeStr
+    }
+  },
+  props: {
+    examineShow: {
+      type: Function,
+      default: null
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      dialogVisible: false,
+      dialogImageUrl: '',
+      productItem: {},
+      productData: {
+        productId: 0,
+        isDetail: true
+      }
+    }
+  },
+  computed: {
+    skuAttrName() {
+      return (
+        this.productItem.skuAttrList &&
+        this.productItem.skuAttrList.filter((skuAttr) => {
+          const hasChilds = skuAttr.values.some((attr) => attr.skuValue)
+          return skuAttr.skuName && hasChilds
+        })
+      )
+    }
+  },
+  methods: {
+    show(id) {
+      this.visible = true
+      this.productData.productId = id
+      this.details()
+    },
+    handlePictureCardPreview(item) {
+      this.dialogImageUrl = item.imgPath
+      this.dialogVisible = true
+    },
+
+    // 返回
+    back() {
+      this.visible = false
+    },
+    // 获取详情
+    async details() {
+      const res = await getProductDetail({ productId: this.productData.productId })
+      console.log(res)
+      this.productItem = res.data
+      this.productItem.skuAttrList = res.data.names
+      this.productItem.skuAttrList.forEach((item) => {
+        var data = {}
+        var arr = Object.keys(data)
+        if (arr.length === 0) {
+          item.needImg = false
+        }
+      })
+      console.log(this.productItem.skuAttrList, 'skuAttrList')
+      this.productItem.skuList = this.productItem.skus
+    }
+  }
+}
+</script>
+
+<style scoped lang='scss'>
+@import url("../../../styles/elDialog.scss");
+
+.box-card {
+	margin: 20px;
+}
+
+.btnList {
+	float: right;
+	padding: 3px 0;
+	width: 100px;
+	height: 48px;
+	border-radius: 4px;
+	margin-right: 30px;
+}
+
+.addTitle {
+	font-size: 24px;
+	color: #333333;
+	line-height: 50px;
+}
+
+.GoodBox {
+	padding: 40px;
+
+	.detail-box {
+		div {
+			line-height: 60px;
+
+			.proImage {
+				margin-right: 20px;
+				width: 80px;
+				height: 80px;
+			}
+		}
+	}
+}
+
+.tinymce-wrap {
+	margin-top: 10px;
+}
+
+.check-image-dialog {
+	margin-top: -100px;
+	text-align: center;
+
+	.img {
+		text-align: center;
+	}
+}
+</style>

src/views/platformProduct/beSelected/index.vue

@@ -0,0 +1,141 @@
+<template>
+    <div class="mySelection">
+        <el-table :data="tableData" style="width: 100%;" align="center" border row-key="id"
+            :header-cell-style="{ background: '#EEF3FF', color: '#333333', textAlign: 'center' }"
+            :tree-props="{ children: 'childs' }">
+            <el-table-column prop="productId" align="center" label="商品id" show-overflow-tooltip width="80" />
+            <el-table-column label="商品主图" width="150" align="center">
+                <template slot-scope="scope">
+                    <img height="80" width="80" :src="scope.row.image.replace('http://', 'https://')" alt srcset>
+                </template>
+            </el-table-column>
+            <el-table-column prop="productName" align="center" label="商品名称" width="180" />
+            <el-table-column prop="shopName" align="center" label="商家名称" width="180" />
+            <el-table-column prop="supplierName" align="center" label="供应商名称" width="180" />
+            <el-table-column prop="classifyHierarchy" align="center" label="分类层级" width="180" />
+            <el-table-column prop="sectionPrice" align="center" label="售价区间" show-overflow-tooltip />
+            <el-table-column prop="stockNumber" align="center" label="库存" show-overflow-tooltip />
+            <el-table-column prop="volume" align="center" label="实际销售" show-overflow-tooltip />
+            <el-table-column prop="fictitiousNumber" align="center" label="虚拟销售" show-overflow-tooltip />
+            <el-table-column prop="createTime" align="center" label="创建时间" width="180" />
+            <el-table-column prop="shelveState" align="center" label="上架状态" show-overflow-tooltip>
+                <template slot-scope="scope">
+                    <span v-if="scope.row.shelveState == 0">已下架</span>
+                    <span v-if="scope.row.shelveState == 1">已上架</span>
+                    <span v-if="scope.row.shelveState == 2">待审核</span>
+                    <span v-if="scope.row.shelveState == 3">审核失败</span>
+                </template>
+            </el-table-column>
+            <el-table-column width="200" label="编辑">
+                <template slot-scope="scope">
+                    <el-button type="text" @click="open(scope.row)">加入选品</el-button>
+                    <el-button type="text" @click="Godetails(scope.row)">查看详情</el-button>
+                    <!-- <el-button type="text" @click.native.prevent="updateRow(scope.row)">编辑</el-button> -->
+                    <!-- <el-button type="text" @click="updateRow(scope.row.priceId)">编辑</el-button>
+                    <el-button type="text" @click="open(scope.row.priceId)">删除</el-button> -->
+                </template>
+            </el-table-column>
+        </el-table>
+        <div class="fenye">
+            <el-pagination :current-page="currentPage" :page-sizes="[5, 10, 20, 50, 100]" :page-size="5"
+                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+                @current-change="handleCurrentChange" />
+        </div>
+        <AddCommodity ref="addCommodity" @reset="reset" />
+    </div>
+</template>
+
+<script>
+import {  addProduct, getProductMerchantList } from "@/api/platformProduct"
+import AddCommodity from './addCommodity'
+export default {
+    components: { AddCommodity },
+    created() {
+        this.getMySelection()
+    },
+    data() {
+        return {
+            tableData: [],
+            searchMyProduct: {
+                shelveState: "",
+                productName: "",
+                productId: "",
+                shopName: "",
+                page: 1,
+                pageSize: 5,
+                shopId: "",
+                type: 0,
+                shopId: 186,
+                ifSelection: 0
+            },
+            currentPage: 1,
+            total: null
+        }
+    },
+    methods: {
+        open(item) {
+            this.$confirm('是否将该商品加入平台选品?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.updateRow(item.productId)
+
+            }).catch(() => {
+                this.$message({
+                    type: 'info',
+                    message: '取消加入选品'
+                });
+            });
+        },
+        async updateRow(id) {
+            try {
+                let res = await addProduct({ productId: id })
+                this.$message({
+                    type: 'success',
+                    message: '添加成功!'
+                });
+            } catch (error) {
+                console.log(error);
+            }
+            console.log(res);
+        },
+        // 获取我的选品列表
+        async getMySelection() {
+            let res = await getProductMerchantList(this.searchMyProduct);
+            // console.log(res.data);
+            this.tableData = res.data.list
+            this.total = res.data.total
+            // console.log(res);
+        },
+        //  查看详情
+        Godetails(row) {
+            this.$refs.addCommodity.show(row.productId)
+        },
+        //  关闭详情
+        reset() {
+            this.getMySelection()
+        },
+        handleSizeChange(val) {
+            this.searchMyProduct.pageSize = val
+            this.getMySelection()
+        },
+        handleCurrentChange(val) {
+            this.searchMyProduct.page = val
+            this.getMySelection()
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.mySelection {
+    padding: 80px 50px 0;
+}
+
+.fenye {
+    margin: 50px auto;
+    display: flex;
+    justify-content: center;
+}
+</style>

src/views/platformProduct/business/index.vue

@@ -46,34 +46,29 @@
         </div>
         <el-dialog width="70%" title="商家选品列表" :visible.sync="showDialog" center :close-on-click-modal="false"
             @close="closeDialog">
-            <div class="select-box">
+            <!-- <div class="select-box">
                 <span>请选择要查看的类型：</span>
                 <el-select v-model="value" placeholder="请选择" @change="selectBlur">
                     <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                     </el-option>
                 </el-select>
-            </div>
+            </div> -->
             <el-table :data="dataProduct" style="width: 100%;" align="center" border row-key="id"
                 :header-cell-style="{ background: '#EEF3FF', color: '#333333', textAlign: 'center' }"
                 :tree-props="{ children: 'childs' }" v-loading="loading">
-                <el-table-column prop="productId" label="商品id" show-overflow-tooltip />
+                <el-table-column prop="productId" align="center" label="商品id" show-overflow-tooltip />
                 <el-table-column label="商品主图" width="150" align="center">
                     <template slot-scope="scope">
                         <img height="80" width="80" :src="scope.row.image" alt srcset>
                     </template>
                 </el-table-column>
-                <el-table-column prop="productName" label="商品名称" width="220" />
-                <el-table-column prop="section" label="售价区间" show-overflow-tooltip />
-                <el-table-column prop="memberSection" label="会员价" show-overflow-tooltip />
-                <el-table-column prop="ifCredit" label="积分兑换" show-overflow-tooltip>
-                    <template slot-scope="scope">
-                        <span v-if="scope.row.ifCredit == 1">允许</span>
-                        <span v-if="scope.row.ifCredit == 0">不允许</span>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="stockNumber" label="库存" show-overflow-tooltip />
-                <el-table-column prop="volume" label="销量" show-overflow-tooltip />
-                <el-table-column prop="volume" label="上架状态" show-overflow-tooltip>
+                <el-table-column prop="productName" align="center" label="商品名称" width="220" />
+                <el-table-column prop="manufacturerBasePriceInterval" align="center" label="供货价区间" width="220" />
+                <el-table-column prop="sectionOriginalPrice" align="center" label="原价区间" width="220" />
+                <el-table-column prop="sectionPrice" align="center" label="售价区间" width="220" />
+                <el-table-column prop="stockNumber" align="center" label="库存" show-overflow-tooltip />
+                <el-table-column prop="volume" align="center" label="销量" show-overflow-tooltip />
+                <el-table-column prop="volume" align="center" label="上架状态" show-overflow-tooltip>
                     <template slot-scope="scope">
                         <span v-if="scope.row.shelveState == 0">未上架</span>
                         <span v-if="scope.row.shelveState == 1">已上架</span>
@@ -81,8 +76,8 @@
                         <span v-if="scope.row.shelveState == 3">审核失败</span>
                     </template>
                 </el-table-column>
-                <el-table-column prop="reject" label="驳回原因" show-overflow-tooltip />
-                <el-table-column prop="createTime" label="创建时间" width="180" />
+                <el-table-column prop="reject" align="center" label="驳回原因" show-overflow-tooltip />
+                <el-table-column prop="createTime" align="center" label="创建时间" width="180" />
             </el-table>
             <div class="dialog-footer">
                 <el-pagination :current-page="currentPage" :page-sizes="[5, 10, 20, 50, 100]" :page-size="5"
@@ -110,30 +105,34 @@ export default {
                 contractState: "",
                 page: 1,
                 pageSize: 10,
-                shopType: 2
+                shopType: "2"
             },
             currentPage: 1,
             total: null,
             showDialog: false,
             options: [
                 {
-                    value: '1',
+                    value: 0,
+                    label: '自己'
+                },
+                {
+                    value: 1,
                     label: '团长'
                 },
                 {
-                    value: '2',
+                    value: 2,
                     label: '合伙人'
                 },
                 {
-                    value: '3',
+                    value: 3,
                     label: '加盟商'
                 },
                 {
-                    value: '4',
+                    value: 4,
                     label: '代理商'
                 },
             ],
-            value: "",
+            value: 0,
             //  选品商家的商品查询参数
             selectionProduct: {
                 shelveState: "",
@@ -156,7 +155,7 @@ export default {
         // 获取我的选品列表
         async getMyBusiness() {
             let res = await getProductMerchant(this.searchBusiness)
-            console.log(res);
+            // console.log(res);
             this.tableData = res.data.list
             this.total = res.data.total
         },
@@ -181,7 +180,7 @@ export default {
                 let res = await getProductMerchantList(this.selectionProduct)
                 this.dataProduct = res.data.list
                 this.totalDia = res.data.total
-                 //  关闭 loading
+                //  关闭 loading
                 this.loading = false
             } catch (error) {
                 this.loading = false
@@ -203,7 +202,7 @@ export default {
         },
         //  关闭弹框 重置数据
         closeDialog() {
-            this.value = ""
+            this.value = 0
             this.selectionProduct = {
                 shelveState: "",
                 productName: "",
@@ -238,7 +237,8 @@ export default {
         margin-right: 30px;
     }
 }
-.dialog-footer{
+
+.dialog-footer {
     margin: 20px 0;
     display: flex;
     justify-content: center;

src/views/platformProduct/fixedPrice/index.vue

@@ -32,7 +32,7 @@
                 </div>
                 <div class="select">
                     <span>增加定价方案的类型：</span>
-                    <el-select v-model="value" placeholder="请选择">
+                    <el-select v-model="addQuery.type" placeholder="请选择">
                         <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                         </el-option>
                     </el-select>
@@ -88,7 +88,7 @@ export default {
                 channelPrice: "",
                 startTime: "1",
                 endTime: "1",
-                type:""
+                type:0
             },
             //  分页获取列表
             searchList: {
@@ -102,23 +102,26 @@ export default {
             //  增加的类型
             options: [
                 {
-                    value: '1',
+                    value: 0,
+                    label: '自己'
+                },
+                {
+                    value: 1,
                     label: '团长'
                 },
                 {
-                    value: '2',
+                    value: 2,
                     label: '合伙人'
                 },
                 {
-                    value: '3',
+                    value: 3,
                     label: '加盟商'
                 },
                 {
-                    value: '4',
+                    value: 4,
                     label: '代理商'
                 },
             ],
-            value: "",
         }
     },
     methods: {
@@ -137,7 +140,8 @@ export default {
                 supplyPrice: "",
                 channelPrice: "",
                 startTime: "1",
-                endTime: "1"
+                endTime: "1",
+                type:0
             }
         },
         //   获取方案列表
@@ -154,7 +158,6 @@ export default {
         },
         //  保存文件
         async preserve() {
-            this.addQuery.type = this.value
             if (this.addQuery.programmeName == "") {
                 this.$message({
                     message: '请输入方案名称',
@@ -162,13 +165,6 @@ export default {
                 });
                 return false;
             }
-            if(this.addQuery.type == ""){
-                this.$message({
-                    message: '请选择增加方案类型',
-                    type: 'error'
-                });
-                return false;
-            }
             //  判断是保存还是修改
             if (!this.isEdit) {
                 try {
@@ -226,6 +222,7 @@ export default {
                         ...this.addQuery,
                         ...res.data
                     }
+                    // this.value = res.data.type
                     console.log(this.addQuery);
                     this.addFormDialog = true
                 }

src/views/platformProduct/mySelection/addCommodity.vue

@@ -0,0 +1,285 @@
+<template>
+  <el-dialog :close-on-click-modal="false" title="详情" width="74%" :visible.sync="visible">
+    <div>
+      <el-card class="box-card">
+        <span class="addTitle">商品详情</span>
+        <el-button type="success" class="btnList" @click="back">关闭</el-button>
+        <el-button
+          v-if="productItem.shelveState === 2" type="primary" class="btnList"
+          @click="examineShow(productData)"
+        >
+          审核
+        </el-button>
+      </el-card>
+      <el-card class="box-card">
+        <label>商品详情</label>
+        <div class="GoodBox">
+          <el-row class="detail-box">
+            <el-col :span="12">
+              <div>商品名称：{{ productItem.productName }}</div>
+              <div>商品卖点：{{ productItem.productBrief }}</div>
+              <div>
+                商品图片：
+                <div>
+                  <img
+                    v-for="(item, index) in productItem.images" :key="index" class="proImage" :src="item.imgPath"
+                    alt="" @click="handlePictureCardPreview(item)"
+                  >
+                </div>
+              </div>
+              <div>商品款式：</div>
+            </el-col>
+            <el-col :span="12">
+              <div>官方分类：{{ productItem.classifyName }}</div>
+              <div>商家分组：{{ productItem.shopGroupName }}</div>
+              <div>商家名称：{{ productItem.shopName }}</div>
+              <div>
+                商品状态：
+                <span v-if="productItem.shelveState == 0">已下架 </span>
+                <span v-if="productItem.shelveState == 1">已上架</span>
+                <span v-if="productItem.shelveState == 2">待审核</span>
+                <span v-if="productItem.shelveState == 3">审核失败</span>
+              </div>
+            </el-col>
+          </el-row>
+          <el-row class="detail-box">
+            <el-col :span="24">
+              <el-table
+                :data="productItem.skuList" style="width: 100%"
+                :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
+              >
+                <el-table-column v-for="(skuAttr, index) in skuAttrName" :key="index" :label="skuAttr.skuName">
+                  <template slot-scope="scope">
+                    {{
+                      scope.row.skuAttrCodeDTOList &&
+                        scope.row.skuAttrCodeDTOList[index]
+                        | attrValueFilter(productItem.skuAttrList)
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column label="优惠价">
+                  <template slot-scope="scope">
+                    <el-input
+                      v-model="scope.row.price" maxlength="9" disabled
+                      oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="市场价">
+                  <template slot-scope="scope">
+                    <el-input
+                      v-model="scope.row.originalPrice" maxlength="9" disabled
+                      oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="供货价">
+                  <template slot-scope="scope">
+                    <el-input
+                      v-model="scope.row.manufacturerBasePrice" maxlength="9" disabled
+                      oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="库存">
+                  <template slot-scope="scope">
+                    <el-input
+                      v-model="scope.row.stockNumber" maxlength="9" disabled
+                      oninput="value=value.replace(/[^\d]/g,'')"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="重量(KG)">
+                  <template slot-scope="scope">
+                    <el-input
+                      v-model="scope.row.weight" maxlength="9" disabled
+                      oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column label="SKU">
+                  <template slot-scope="scope">
+                    <el-input v-model="scope.row.sku" maxlength="20" disabled />
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-col>
+          </el-row>
+        </div>
+      </el-card>
+
+      <el-card class="box-card">
+        <label>商品简介</label>
+        <!-- <Tinymce
+        ref="content"
+        v-model="productItem.productText"
+        class="tinymce-wrap"
+        :height="180"
+      /> -->
+        <br>
+        <br>
+        <div v-html="productItem.productText" />
+      </el-card>
+
+      <el-dialog :visible.sync="dialogVisible" append-to-body class="check-image-dialog" title="查看图片" center="center">
+        <div class="img">
+          <img width="80%" height="80%" :src="dialogImageUrl" alt>
+        </div>
+      </el-dialog>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+// import Tinymce from '@/components/Tinymce';
+import { getProductDetail } from '@/api/platformProduct'
+// import { uploadUrl } from '@/utils/request';
+// import StyleInformation from './addComponent';
+export default {
+  name: 'AddCommodity',
+  components: {
+    // Tinymce,
+    // StyleInformation,
+  },
+  filters: {
+    attrValueFilter(map, list) {
+      const hasChilds =
+        list &&
+        list.filter((skuAttr) => {
+          const hasChild = skuAttr.values.some((attr) => attr.skuValue)
+          return skuAttr.skuName && hasChild
+        })
+      if (!map) {
+        return ''
+      }
+      const { code, valueCode } = map
+      let codeStr = ''
+      hasChilds.map((item) => {
+        const { values } = item
+        values &&
+          values.some((attr) => {
+            const isSome = item.code === code && attr.valueCode === valueCode
+            if (isSome) {
+              codeStr = attr.skuValue
+            }
+            return isSome
+          })
+      })
+      return codeStr
+    }
+  },
+  props: {
+    examineShow: {
+      type: Function,
+      default: null
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      dialogVisible: false,
+      dialogImageUrl: '',
+      productItem: {},
+      productData: {
+        productId: 0,
+        isDetail: true
+      }
+    }
+  },
+  computed: {
+    skuAttrName() {
+      return (
+        this.productItem.skuAttrList &&
+        this.productItem.skuAttrList.filter((skuAttr) => {
+          const hasChilds = skuAttr.values.some((attr) => attr.skuValue)
+          return skuAttr.skuName && hasChilds
+        })
+      )
+    }
+  },
+  methods: {
+    show(id) {
+      this.visible = true
+      this.productData.productId = id
+      this.details()
+    },
+    handlePictureCardPreview(item) {
+      this.dialogImageUrl = item.imgPath
+      this.dialogVisible = true
+    },
+
+    // 返回
+    back() {
+      this.visible = false
+    },
+    // 获取详情
+    async details() {
+      const res = await getProductDetail({ productId: this.productData.productId })
+      console.log(res)
+      this.productItem = res.data
+      this.productItem.skuAttrList = res.data.names
+      this.productItem.skuAttrList.forEach((item) => {
+        var data = {}
+        var arr = Object.keys(data)
+        if (arr.length === 0) {
+          item.needImg = false
+        }
+      })
+      console.log(this.productItem.skuAttrList, 'skuAttrList')
+      this.productItem.skuList = this.productItem.skus
+    }
+  }
+}
+</script>
+
+<style scoped lang='scss'>
+@import url("../../../styles/elDialog.scss");
+
+.box-card {
+	margin: 20px;
+}
+
+.btnList {
+	float: right;
+	padding: 3px 0;
+	width: 100px;
+	height: 48px;
+	border-radius: 4px;
+	margin-right: 30px;
+}
+
+.addTitle {
+	font-size: 24px;
+	color: #333333;
+	line-height: 50px;
+}
+
+.GoodBox {
+	padding: 40px;
+
+	.detail-box {
+		div {
+			line-height: 60px;
+
+			.proImage {
+				margin-right: 20px;
+				width: 80px;
+				height: 80px;
+			}
+		}
+	}
+}
+
+.tinymce-wrap {
+	margin-top: 10px;
+}
+
+.check-image-dialog {
+	margin-top: -100px;
+	text-align: center;
+
+	.img {
+		text-align: center;
+	}
+}
+</style>

src/views/platformProduct/mySelection/index.vue

@@ -26,11 +26,9 @@
                     <span v-if="scope.row.shelveState == 3">审核失败</span>
                 </template>
             </el-table-column>
-            <el-table-column>
+            <el-table-column label="操作" width="120" align="center">
                 <template slot-scope="scope">
-                    <!-- <el-button type="text" @click.native.prevent="updateRow(scope.row)">编辑</el-button> -->
-                    <!-- <el-button type="text" @click="updateRow(scope.row.priceId)">编辑</el-button>
-                    <el-button type="text" @click="open(scope.row.priceId)">删除</el-button> -->
+                    <el-button type="text" @click="Godetails(scope.row)">查看详情</el-button>
                 </template>
             </el-table-column>
         </el-table>
@@ -39,13 +37,16 @@
                 layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                 @current-change="handleCurrentChange" />
         </div>
+        <AddCommodity ref="addCommodity" @reset="reset" />
+
     </div>
 </template>
 
 <script>
-import { getMyProduct } from "@/api/platformProduct"
-
+import { getProductMerchantList } from "@/api/platformProduct"
+import AddCommodity from './addCommodity'
 export default {
+    components: { AddCommodity },
     created() {
         this.getMySelection()
     },
@@ -53,27 +54,29 @@ export default {
         return {
             tableData: [],
             searchMyProduct: {
-                page: 1,
-                pageSize: 5,
-                productId: "",
-                productName: "",
                 shelveState: "",
+                productName: "",
+                productId: "",
                 shopName: "",
+                page: 1,
+                pageSize: 5,
+                shopId: "",
+                type: 0,
                 shopId: 186,
                 ifSelection: 1
             },
-            currentPage:1,
-            total:null
+            currentPage: 1,
+            total: null
         }
     },
     methods: {
         // 获取我的选品列表
         async getMySelection() {
-            let res = await getMyProduct(this.searchMyProduct);
-            console.log(res.data);
+            let res = await getProductMerchantList(this.searchMyProduct);
+            // console.log(res.data);
             this.tableData = res.data.list
             this.total = res.data.total
-            console.log(res);
+            // console.log(res);
         },
         handleSizeChange(val) {
             this.searchMyProduct.pageSize = val
@@ -83,6 +86,12 @@ export default {
             this.searchMyProduct.page = val
             this.getMySelection()
         },
+        Godetails(row) {
+            this.$refs.addCommodity.show(row.productId)
+        },
+        reset() {
+            this.getMySelection()
+        }
     },
 }
 </script>
@@ -91,7 +100,8 @@ export default {
 .mySelection {
     padding: 80px 50px 0;
 }
-.fenye{
+
+.fenye {
     margin: 50px auto;
     display: flex;
     justify-content: center;

src/views/proxyStore/manage/index.vue

@@ -0,0 +1,123 @@
+<template>
+    <div class="manage">
+        <!-- 搜索 -->
+      <div class="formSearch">
+        <el-form :inline="true" :model="queryData">
+          <el-form-item label="店铺名称">
+            <el-input v-model="queryData.shopName" maxlength="20" placeholder="请输入店铺名称" />
+          </el-form-item>
+          <el-form-item label="店铺编码">
+            <el-input v-model="queryData.shopCode" maxlength="20" placeholder="请输入店铺编码" />
+          </el-form-item>
+          <el-form-item label="负责人">
+            <el-input v-model="queryData.chargePersonName" maxlength="20" placeholder="请输入负责人" />
+          </el-form-item>
+          <el-form-item label="合同状态">
+            <el-select v-model="queryData.contractState" placeholder="请选择">
+              <el-option label="有效" value="1" />
+              <el-option label="无效" value="0" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="店铺类型">
+            <el-select v-model="queryData.shopType" placeholder="请选择类型">
+              <el-option label="品牌工厂" value="1" />
+              <el-option label="商圈" value="2" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="代理级别">
+            <el-select v-model="queryData.shopType" placeholder="请选择代理级别">
+              <el-option label="团长" value="1" />
+              <el-option label="合伙人" value="2" />
+              <el-option label="加盟商" value="3" />
+              <el-option label="代理商" value="4" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" plain @click="onSubmit">
+              查询
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+        <div class="tableBox">
+            <el-table ref="multipleTable" :data="tableData" border
+                :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark"
+                style="width: 100%">
+                <el-table-column label="店铺名称" width="220" align="center">
+                    <template slot-scope="scope">{{ scope.row.shopName }}</template>
+                </el-table-column>
+                <el-table-column prop="shopCode" align="center" label="店铺编码" />
+                <el-table-column prop="chargePersonName" align="center" label="负责人" />
+                <el-table-column prop="chargePersonPhone" align="center" label="联系电话" />
+                <el-table-column label="合同状态" align="center">
+                    <template slot-scope="scope">
+                        <span v-if="scope.row.contractState === 0">无效</span>
+                        <span v-if="scope.row.contractState === 1">有效</span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="createTime" align="center" label="创建时间" />
+            </el-table>
+            <div class="fenye">
+                <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="10"
+                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+                    @current-change="handleCurrentChange" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { customerMageGetById } from '@/api/proxyStore'
+export default {
+    created () {
+        // this.getAll()
+    },
+    data() {
+        return {
+            tableData: [],
+            //  请求的参数
+            queryData:{
+                shopName:"",
+                shopCode:"",
+                chargePersonName:"",
+                contractState:"",
+                page:"1",
+                pageSize:"10",
+                shopType:"",
+                agentLevel:"1"
+            },
+            total: null,
+            currentPage: 1
+        }
+    },
+    methods: {
+        handleSizeChange(val) {
+            this.queryData.pageSize = val
+        },
+        handleCurrentChange(val) {
+            this.queryData.page = val
+        },
+        async getAll(){
+            let res = await customerMageGetById(this.queryData)
+            console.log(res);
+        },
+        onSubmit(){
+            this.getAll()
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.manage {
+    width: 100%;
+    padding: 40px 30px;
+    box-sizing: border-box;
+}
+.fenye{
+    margin-top: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+</style>

src/views/renovation/commoditySystem/index.vue

@@ -42,10 +42,8 @@
       </div>
       <!-- 表格 -->
       <div class="tableBox">
-        <el-table
-          ref="multipleTable" v-loading="loading" :data="tableData" border
-          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
-        >
+        <el-table ref="multipleTable" v-loading="loading" :data="tableData" border
+          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%">
           <el-table-column prop="productId" label="商品id" show-overflow-tooltip width="80" />
           <el-table-column label="商品主图" width="150" align="center">
             <template slot-scope="scope">
@@ -57,7 +55,7 @@
           <el-table-column prop="supplierName" label="供应商名称" width="180" />
           <el-table-column prop="classifyHierarchy" label="分类层级" width="180" />
           <!-- classifyHierarchy -->
-          <el-table-column prop="sectionPrice" label="售价区间" show-overflow-tooltip />  
+          <el-table-column prop="sectionPrice" label="售价区间" show-overflow-tooltip />
           <!-- <el-table-column
             prop="memberSection"
             label="会员价"
@@ -78,10 +76,8 @@
           <el-table-column label="操作" width="200">
             <template slot-scope="scope">
               <div class="btnList">
-                <el-button
-                  v-if="scope.row.shelveState == 1" slot="reference" style="margin-right: 10px" type="text"
-                  @click="OutForced(scope.row)"
-                >
+                <el-button v-if="scope.row.shelveState == 1" slot="reference" style="margin-right: 10px" type="text"
+                  @click="OutForced(scope.row)">
                   强制下架
                 </el-button>
                 <el-button v-if="scope.row.shelveState == 1" type="text" @click="setFictitious(scope.row)">
@@ -89,17 +85,15 @@
                 </el-button>
                 <el-button v-if="scope.row.shelveState == 2" type="text" @click="examineShow(scope.row)">审核</el-button>
                 <el-button type="text" @click="Godetails(scope.row)">查看详情</el-button>
-                <el-button  type="text" v-if="scope.row.shelveState == 1" @click="addProduct(scope.row)">加入选品</el-button>
+                <el-button type="text" v-if="scope.row.shelveState == 1" @click="addProduct(scope.row)">加入选品</el-button>
               </div>
             </template>
           </el-table-column>
         </el-table>
         <div class="fenye">
-          <el-pagination
-            :current-page="currentPage" :page-sizes="[5, 10, 20, 50, 100]" :page-size="5"
+          <el-pagination :current-page="currentPage" :page-sizes="[5, 10, 20, 50, 100]" :page-size="5"
             layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-          />
+            @current-change="handleCurrentChange" />
         </div>
       </div>
     </div>
@@ -125,7 +119,8 @@
     <el-dialog title="自定义虚拟销量" :visible.sync="FictitiousVisible" width="460px">
       <el-form :model="ForcedForm">
         <el-form-item label="" label-width="110px">
-          <el-input-number v-model="ForcedForm.fictitiousNumber" :precision="0" :min="1" :max="999999999" label="请输入整数" />
+          <el-input-number v-model="ForcedForm.fictitiousNumber" :precision="0" :min="1" :max="999999999"
+            label="请输入整数" />
         </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
@@ -133,20 +128,39 @@
         <el-button type="primary" @click="FicSubmintUs">确 定</el-button>
       </span>
     </el-dialog>
-    <el-dialog title="是否加入选品商品" :visible.sync="selectionDia" width="30%" style="margin-top:10%" @close="selectionClonse">
+    <el-dialog title="选择商品" :visible.sync="selectionDia" width="30%" style="margin-top:10%" @close="selectionClonse">
       <div class="selection-box">
         <div class="box-item">
           <span>商家Id：</span>
           <el-input v-model="productData.productIdproductId" placeholder="请输入商家id"></el-input>
         </div>
+        <!-- <div class="box-item">
+          <span>平台分类选择：</span>
+          
+          <el-select v-model="productData.classifyId" placeholder="请选择">
+            <el-option v-for="item in options" :key="item.classifyId" :label="item.classifyName"
+              :value="item.classifyId">
+            </el-option>
+          </el-select>
+        </div> -->
+        <div class="box-item">
+          <span>商家分组选择：</span>
+          <!-- <el-cascader :options="shopGroup" :props="optionProps"></el-cascader> -->
+          <el-cascader :options="shopGroup" :props="optionProps" v-model="shopProps"></el-cascader>
+          <!-- <el-select v-model="productData.shopGroupId" placeholder="请选择">
+            <el-option v-for="item in shopGroup" :key="item.shopGroupId" :label="item.groupName"
+              :value="item.shopGroupId">
+            </el-option>
+          </el-select> -->
+        </div>
         <div class="box-item">
           <span>是否加入选品：</span>
-          <el-radio v-model="productData.shelveState" label="1">是</el-radio>
-          <el-radio v-model="productData.shelveState" label="0">不是</el-radio>
+          <el-radio v-model="productData.shelveState" :label="1">是</el-radio>
+          <el-radio v-model="productData.shelveState" :label="0">不是</el-radio>
         </div>
       </div>
       <div class="btn-list">
-        <el-button type="primary" @click="addSelection" :disabled="productData.shelveState == '0'">加入选品</el-button>
+        <el-button type="primary" @click="addSelection">加入选品</el-button>
         <el-button @click="selectionDia = false">取 消</el-button>
       </div>
     </el-dialog>
@@ -163,7 +177,9 @@ import {
   examine,
   productExport,
   getProductById,
-  addProductFixed
+  addProductFixed,
+  commdityClassGetAll,
+  commdityClassGetGroup
 } from '@/api/commodity'
 import AddCommodity from './addCommodity'
 export default {
@@ -197,14 +213,26 @@ export default {
       examineVisible: false,
       isDetail: false,
       //  选品弹窗
-      selectionDia:false,
+      selectionDia: false,
       //  加入选品的参数
       productData: {
         productId: 0,
         productIdproductId: 186,
-        shopParentId:"",
-        shopGroupId:"",
-        shelveState:"1"
+        shopParentId: "",
+        shopGroupId: "",
+        shelveState: 1,
+      },
+      //  商品类别
+      options: [],
+      //  商家分组
+      shopGroup: [],
+      //  级联选择器绑定的数据
+      shopProps:"",
+      optionProps:{
+        checkStrictly:true,
+        value:"shopGroupId",
+        label:"groupName",
+        children:"childs"
       }
     }
   },
@@ -213,44 +241,84 @@ export default {
   // 监控data中的数据变化
   watch: {},
   // 生命周期 - 创建完成（可以访问当前this实例）
-  created() { },
+  created() {
+  },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    this.getAll(this.formInline)
+    this.getAll(this.formInline);
+    //  获取分类
+    this.getAllClass();
+    //  获取商家分组
+    this.getGroupSelect()
   },
   // 方法集合
   methods: {
+    //  获取商品类别
+    async getAllClass() {
+      try {
+        let res = await commdityClassGetAll({ page: 1, pageSize: "15" })
+        this.options = res.data.list
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 商家分组查询
+    async getGroupSelect() {
+      try {
+        let res = await commdityClassGetGroup({ search:"",page: 1, pageSize: "15" })
+        console.log(res.data.list);
+        this.shopGroup = res.data.list
+      } catch (error) {
+        console.log(error);
+      }
+    },
     //  加入选品
-    async addProduct(row){
+    async addProduct(row) {
       this.productData.productId = row.productId
       //  获取商品详情
       const res = await getProductById({ productId: row.productId })
       console.log(res);
       this.productData.shopParentId = res.data.shopId
-      this.productData.shopGroupId = res.data.shopGroupId
+      // this.productData.shopGroupId = res.data.shopGroupId
       this.selectionDia = true
     },
     //  保存选品
-    async addSelection(){
-      if(this.productData.productIdproductId == ""){
+    async addSelection() {
+      //  对于商家分组选择做处理
+      let length = this.shopProps.length
+      if(length == 1){
+        this.productData.shopGroupId = this.shopProps[0]
+      }else{
+        this.productData.shopGroupId = this.shopProps[length - 1]
+      }
+
+      //  判断是否符合要求
+      if (this.productData.productIdproductId == "") {
         this.$message.error("商家id不能为空")
         return
       }
+      if (!this.productData.shopGroupId) {
+        this.$message.error("请选择商家分组")
+        return
+      }
+      //  对选品的数组做处理
+
       // console.log(this.productData);
       let res = await addProductFixed(this.productData)
-      if(res.code == ""){
+      if (res.code == "") {
         this.$message.success("选品添加成功")
         this.selectionDia = false
       }
     },
     //  选品弹窗关闭
-    selectionClonse(){
+    selectionClonse() {
+      this.shopProps = ""
       this.productData = {
         productId: 0,
         productIdproductId: 186,
-        shopParentId:"",
-        shopGroupId:"",
-        shelveState:"1"
+        shopParentId: "",
+        shopGroupId: "",
+        shelveState: 1
       }
     },
     // 查看详情
@@ -359,7 +427,7 @@ export default {
       if (!res) {
         return
       }
-      const blob = new Blob([ res ], { type: 'application/vnd.ms-excel' })
+      const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
       const fileName = '商品数据明细表.xls'
       if ('download' in document.createElement('a')) {
         // 非IE下载
@@ -395,71 +463,85 @@ export default {
 @import url("../../../styles/elDialog.scss");
 
 .pending {
-	padding: 30px;
+  padding: 30px;
 }
 
 .fenye {
-	margin-top: 20px;
+  margin-top: 20px;
 }
 
 .clickMe {
-	color: #3a68f2;
-	cursor: pointer;
+  color: #3a68f2;
+  cursor: pointer;
 }
 
 .vipDialog {
-	.priceTable {
-		table {
-			width: 100%;
-			text-align: center;
-			border-left: 1px solid #ebeef5;
-			border-bottom: 1px solid #ebeef5;
-			font-size: 14px;
-			color: #606266;
-			border-collapse: collapse;
+  .priceTable {
+    table {
+      width: 100%;
+      text-align: center;
+      border-left: 1px solid #ebeef5;
+      border-bottom: 1px solid #ebeef5;
+      font-size: 14px;
+      color: #606266;
+      border-collapse: collapse;
 
-			tr {
-				border-top: 1px solid #ebeef5;
+      tr {
+        border-top: 1px solid #ebeef5;
 
-				th {
-					padding: 12px 0;
-					background: #eef3ff;
-					color: #333;
-					border-right: 1px solid #ebeef5;
-				}
+        th {
+          padding: 12px 0;
+          background: #eef3ff;
+          color: #333;
+          border-right: 1px solid #ebeef5;
+        }
 
-				td {
-					padding: 12px 0;
-					border-right: 1px solid #ebeef5;
+        td {
+          padding: 12px 0;
+          border-right: 1px solid #ebeef5;
 
-					&:nth-child(1),
-					&:nth-child(2) {
-						width: 80px;
-					}
+          &:nth-child(1),
+          &:nth-child(2) {
+            width: 80px;
+          }
 
-					.el-input {
-						width: 100px;
-						margin-right: 10px;
-					}
-				}
-			}
-		}
-	}
+          .el-input {
+            width: 100px;
+            margin-right: 10px;
+          }
+        }
+      }
+    }
+  }
 }
-.selection-box{
-  .box-item{
+
+.selection-box {
+  .box-item {
     margin-bottom: 30px;
     display: flex;
     align-items: center;
-    span{
+
+    span {
+      text-align: end;
       width: 200px;
+      padding-right: 30px;
+      box-sizing: border-box;
       font-size: 18px;
     }
+
+    ::v-deep .el-input {
+      flex: 1;
+    }
   }
 }
-.btn-list{
+
+.btn-list {
   display: flex;
   align-items: center;
   justify-content: center;
 }
+
+::v-deep .el-select {
+  flex: 1;
+}
 </style>

src/views/setup/agentMenus/Icons.vue

@@ -0,0 +1,587 @@
+<template>
+  <el-dialog :close-on-click-modal="false" title="icon" :visible.sync="isVisible" :width="width" top="50px" center>
+    <el-input
+      v-model="name" maxlength="20" class="filter-item search-item" clearable
+      placeholder="icon"
+      @keyup.native="searchIcon"
+    />
+    <el-tabs v-model="activeName" style="margin-top: -1rem">
+      <el-tab-pane label="通用类" name="first">
+        <ul>
+          <li v-for="icon in icons.commonIcons" :key="icon" class="icons-item">
+            <span :class="{ active: activeIndex === icon }">
+              <el-icon :class="icon" :title="icon" @click.native="chooseIcon(icon)" @dblclick.native="confirm" />
+            </span>
+            <p>{{ icon }}</p>
+          </li>
+        </ul>
+      </el-tab-pane>
+      <el-tab-pane label="指向性" name="second">
+        <ul>
+          <li v-for="icon in icons.directivityIcons" :key="icon">
+            <span :class="{ active: activeIndex === icon }">
+              <el-icon :class="icon" :title="icon" @click.native="chooseIcon(icon)" @dblclick.native="confirm" />
+            </span>
+            <p>{{ icon }}</p>
+          </li>
+        </ul>
+      </el-tab-pane>
+      <el-tab-pane label="填充类" name="third">
+        <ul>
+          <li v-for="icon in icons.solidIcons" :key="icon">
+            <span :class="{ active: activeIndex === icon }">
+              <el-icon :class="icon" :title="icon" @click.native="chooseIcon(icon)" @dblclick.native="confirm" />
+            </span>
+            <p>{{ icon }}</p>
+          </li>
+        </ul>
+      </el-tab-pane>
+      <el-tab-pane label="食品类" name="fourth">
+        <ul>
+          <li v-for="icon in icons.foodIcons" :key="icon">
+            <span :class="{ active: activeIndex === icon }">
+              <el-icon :class="icon" :title="icon" @click.native="chooseIcon(icon)" @dblclick.native="confirm" />
+            </span>
+            <p>{{ icon }}</p>
+          </li>
+        </ul>
+      </el-tab-pane>
+      <el-tab-pane label="自定义" name="fifth">
+        <ul>
+          <li v-for="icon in icons.customIcons" :key="icon">
+            <span :class="{ active: activeIndex === icon }">
+              <el-icon :class="icon" :title="icon" @click.native="chooseIcon(icon)" @dblclick.native="confirm" />
+            </span>
+            <p>{{ icon }}</p>
+          </li>
+        </ul>
+      </el-tab-pane>
+    </el-tabs>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="isVisible = false"> 取消 </el-button>
+      <el-button type="primary" @click="confirm"> 确定 </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+const commonIcons = [
+  'el-icon-eleme',
+  'el-icon-delete',
+  'el-icon-setting',
+  'el-icon-user',
+  'el-icon-phone-outline',
+  'el-icon-more-outline',
+  'el-icon-star-off',
+  'el-icon-goods',
+  'el-icon-warning-outline',
+  'el-icon-zoom-in',
+  'el-icon-zoom-out',
+  'el-icon-remove-outline',
+  'el-icon-circle-plus-outline',
+  'el-icon-circle-check',
+  'el-icon-circle-close',
+  'el-icon-help',
+  'el-icon-minus',
+  'el-icon-plus',
+  'el-icon-check',
+  'el-icon-close',
+  'el-icon-picture-outline',
+  'el-icon-picture-outline-round',
+  'el-icon-upload2',
+  'el-icon-download',
+  'el-icon-camera',
+  'el-icon-video-camera',
+  'el-icon-bell',
+  'el-icon-video-pause',
+  'el-icon-video-play',
+  'el-icon-refresh',
+  'el-icon-refresh-right',
+  'el-icon-refresh-left',
+  'el-icon-finished',
+  'el-icon-loading',
+  'el-icon-view',
+  'el-icon-c-scale-to-original',
+  'el-icon-date',
+  'el-icon-edit',
+  'el-icon-edit-outline',
+  'el-icon-folder',
+  'el-icon-folder-opened',
+  'el-icon-folder-add',
+  'el-icon-folder-remove',
+  'el-icon-folder-delete',
+  'el-icon-folder-checked',
+  'el-icon-tickets',
+  'el-icon-document-remove',
+  'el-icon-document-delete',
+  'el-icon-document-copy',
+  'el-icon-document-checked',
+  'el-icon-document',
+  'el-icon-document-add',
+  'el-icon-printer',
+  'el-icon-paperclip',
+  'el-icon-takeaway-box',
+  'el-icon-search',
+  'el-icon-monitor',
+  'el-icon-attract',
+  'el-icon-mobile',
+  'el-icon-scissors',
+  'el-icon-umbrella',
+  'el-icon-headset',
+  'el-icon-brush',
+  'el-icon-mouse',
+  'el-icon-coordinate',
+  'el-icon-magic-stick',
+  'el-icon-reading',
+  'el-icon-data-line',
+  'el-icon-data-board',
+  'el-icon-pie-chart',
+  'el-icon-data-analysis',
+  'el-icon-collection-tag',
+  'el-icon-film',
+  'el-icon-suitcase',
+  'el-icon-suitcase-1',
+  'el-icon-receiving',
+  'el-icon-collection',
+  'el-icon-files',
+  'el-icon-notebook-1',
+  'el-icon-notebook-2',
+  'el-icon-toilet-paper',
+  'el-icon-office-building',
+  'el-icon-school',
+  'el-icon-table-lamp',
+  'el-icon-house',
+  'el-icon-no-smoking',
+  'el-icon-smoking',
+  'el-icon-shopping-cart-full',
+  'el-icon-shopping-cart-1',
+  'el-icon-shopping-cart-2',
+  'el-icon-shopping-bag-1',
+  'el-icon-shopping-bag-2',
+  'el-icon-sold-out',
+  'el-icon-sell',
+  'el-icon-present',
+  'el-icon-box',
+  'el-icon-bank-card',
+  'el-icon-money',
+  'el-icon-coin',
+  'el-icon-wallet',
+  'el-icon-discount',
+  'el-icon-price-tag',
+  'el-icon-news',
+  'el-icon-guide',
+  'el-icon-male',
+  'el-icon-female',
+  'el-icon-thumb',
+  'el-icon-cpu',
+  'el-icon-link',
+  'el-icon-connection',
+  'el-icon-open',
+  'el-icon-turn-off',
+  'el-icon-set-up',
+  'el-icon-chat-round',
+  'el-icon-chat-line-round',
+  'el-icon-chat-square',
+  'el-icon-chat-dot-round',
+  'el-icon-chat-dot-square',
+  'el-icon-chat-line-square',
+  'el-icon-message',
+  'el-icon-postcard',
+  'el-icon-position',
+  'el-icon-turn-off-microphone',
+  'el-icon-microphone',
+  'el-icon-close-notification',
+  'el-icon-bangzhu',
+  'el-icon-time',
+  'el-icon-odometer',
+  'el-icon-crop',
+  'el-icon-aim',
+  'el-icon-switch-button',
+  'el-icon-full-screen',
+  'el-icon-copy-document',
+  'el-icon-mic',
+  'el-icon-stopwatch',
+  'el-icon-medal-1',
+  'el-icon-medal',
+  'el-icon-trophy',
+  'el-icon-trophy-1',
+  'el-icon-first-aid-kit',
+  'el-icon-discover',
+  'el-icon-place',
+  'el-icon-location-outline',
+  'el-icon-location-information',
+  'el-icon-add-location',
+  'el-icon-delete-location',
+  'el-icon-map-location',
+  'el-icon-alarm-clock',
+  'el-icon-timer',
+  'el-icon-watch-1',
+  'el-icon-watch',
+  'el-icon-lock',
+  'el-icon-unlock',
+  'el-icon-key',
+  'el-icon-service',
+  'el-icon-mobile-phone',
+  'el-icon-bicycle',
+  'el-icon-truck',
+  'el-icon-ship',
+  'el-icon-basketball',
+  'el-icon-football',
+  'el-icon-soccer',
+  'el-icon-baseball'
+]
+const directivityIcons = [
+  'el-icon-d-caret',
+  'el-icon-caret-left',
+  'el-icon-caret-right',
+  'el-icon-caret-bottom',
+  'el-icon-caret-top',
+  'el-icon-bottom-left',
+  'el-icon-bottom-right',
+  'el-icon-back',
+  'el-icon-right',
+  'el-icon-bottom',
+  'el-icon-top',
+  'el-icon-top-left',
+  'el-icon-top-right',
+  'el-icon-arrow-left',
+  'el-icon-arrow-right',
+  'el-icon-arrow-down',
+  'el-icon-arrow-up',
+  'el-icon-d-arrow-left',
+  'el-icon-d-arrow-right',
+  'el-icon-sort',
+  'el-icon-sort-up',
+  'el-icon-sort-down',
+  'el-icon-rank'
+]
+const solidIcons = [
+  'el-icon-question',
+  'el-icon-info',
+  'el-icon-remove',
+  'el-icon-circle-plus',
+  'el-icon-success',
+  'el-icon-error',
+  'el-icon-platform-eleme',
+  'el-icon-delete-solid',
+  'el-icon-s-tools',
+  'el-icon-user-solid',
+  'el-icon-phone',
+  'el-icon-star-on',
+  'el-icon-s-goods',
+  'el-icon-warning',
+  'el-icon-s-help',
+  'el-icon-picture',
+  'el-icon-upload',
+  'el-icon-camera-solid',
+  'el-icon-video-camera-solid',
+  'el-icon-message-solid',
+  'el-icon-s-cooperation',
+  'el-icon-s-order',
+  'el-icon-s-platform',
+  'el-icon-s-fold',
+  'el-icon-s-unfold',
+  'el-icon-s-operation',
+  'el-icon-s-promotion',
+  'el-icon-s-home',
+  'el-icon-s-release',
+  'el-icon-s-ticket',
+  'el-icon-s-management',
+  'el-icon-s-open',
+  'el-icon-s-shop',
+  'el-icon-s-marketing',
+  'el-icon-s-flag',
+  'el-icon-s-comment',
+  'el-icon-s-finance',
+  'el-icon-s-claim',
+  'el-icon-s-custom',
+  'el-icon-s-opportunity',
+  'el-icon-s-data',
+  'el-icon-s-check',
+  'el-icon-s-grid',
+  'el-icon-menu',
+  'el-icon-share',
+  'el-icon-d-caret',
+  'el-icon-caret-left',
+  'el-icon-caret-right',
+  'el-icon-caret-bottom',
+  'el-icon-caret-top',
+  'el-icon-location'
+]
+const foodIcons = [
+  'el-icon-dish',
+  'el-icon-dish-1',
+  'el-icon-food',
+  'el-icon-chicken',
+  'el-icon-fork-spoon',
+  'el-icon-knife-fork',
+  'el-icon-burger',
+  'el-icon-tableware',
+  'el-icon-sugar',
+  'el-icon-dessert',
+  'el-icon-ice-cream',
+  'el-icon-hot-water',
+  'el-icon-water-cup',
+  'el-icon-coffee-cup',
+  'el-icon-cold-drink',
+  'el-icon-goblet',
+  'el-icon-goblet-full',
+  'el-icon-goblet-square',
+  'el-icon-goblet-square-full',
+  'el-icon-refrigerator',
+  'el-icon-grape',
+  'el-icon-watermelon',
+  'el-icon-cherry',
+  'el-icon-apple',
+  'el-icon-pear',
+  'el-icon-orange',
+  'el-icon-coffee',
+  'el-icon-ice-tea',
+  'el-icon-ice-drink',
+  'el-icon-milk-tea',
+  'el-icon-potato-strips',
+  'el-icon-lollipop',
+  'el-icon-ice-cream-square',
+  'el-icon-ice-cream-round'
+]
+const customIcons = [
+  'zk-icon-activity',
+  'zk-icon-binding',
+  'zk-icon-cash',
+  'zk-icon-client-list',
+  'zk-icon-commodity-group',
+  'zk-icon-commodity-set',
+  'zk-icon-coupon',
+  'zk-icon-customer-details',
+  'zk-icon-discount',
+  'zk-icon-finance',
+  'zk-icon-finance-details',
+  'zk-icon-generalize',
+  'zk-icon-group-booking',
+  'zk-icon-label',
+  'zk-icon-logistics-set',
+  'zk-icon-management-customer',
+  'zk-icon-management-rule',
+  'zk-icon-management-server',
+  'zk-icon-marketing',
+  'zk-icon-material',
+  'zk-icon-member',
+  'zk-icon-menu',
+  'zk-icon-operation-plan',
+  'zk-icon-operation-plan2',
+  'zk-icon-order',
+  'zk-icon-pending-order',
+  'zk-icon-Price-bundling',
+  'zk-icon-sales-order',
+  'zk-icon-scene',
+  'zk-icon-seckill',
+  'zk-icon-segmentation',
+  'zk-icon-setting',
+  'zk-icon-shop-decoration',
+  'zk-icon-spell-group',
+  'zk-icon-store',
+  'zk-icon-store-set',
+  'zk-icon-system',
+  'zk-icon-user',
+  'zk-icon-wallet'
+
+]
+export default {
+  name: 'Icons',
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      name: '',
+      icons: {
+        commonIcons,
+        directivityIcons,
+        solidIcons,
+        foodIcons,
+        customIcons
+      },
+      activeIndex: '',
+      choosedIcon: '',
+      activeName: 'first',
+      screenWidth: 0,
+      width: this.initWidth()
+    }
+  },
+  computed: {
+    isVisible: {
+      get() {
+        return this.dialogVisible
+      },
+      set() {
+        this.close()
+      }
+    }
+  },
+  mounted() {
+    window.onresize = () => (() => {
+      this.width = this.initWidth()
+    })()
+  },
+  methods: {
+    initWidth() {
+      this.screenWidth = document.body.clientWidth
+      if (this.screenWidth < 991) {
+        return '90%'
+      } else if (this.screenWidth < 1400) {
+        return '60%'
+      }
+      return '800px'
+    },
+    close() {
+      this.$emit('close')
+      this.activeName = 'first'
+      this.choosedIcon = this.activeIndex = ''
+    },
+    chooseIcon(icon) {
+      console.log(icon)
+      this.activeIndex = icon
+      this.choosedIcon = icon
+    },
+    confirm() {
+      if (!this.choosedIcon) {
+        this.$message({
+          message: '请选择图标',
+          type: 'warning'
+        })
+        return
+      }
+      this.$emit('choose', this.choosedIcon)
+      this.activeName = 'first'
+      this.choosedIcon = this.activeIndex = ''
+    },
+    searchIcon() {
+      if (this.name.trim() === '') {
+        this.icons.commonIcons = commonIcons
+        this.icons.directivityIcons = directivityIcons
+        this.icons.solidIcons = solidIcons
+        this.icons.foodIcons = foodIcons
+        this.icons.customIcons = customIcons
+        this.activeName = 'first'
+      }
+      const commonList = commonIcons.filter((item) => item.indexOf(this.name) !== -1)
+      const directivityList = directivityIcons.filter((item) => item.indexOf(this.name) !== -1)
+      const solidList = solidIcons.filter((item) => item.indexOf(this.name) !== -1)
+      const foodIconsList = foodIcons.filter((item) => item.indexOf(this.name) !== -1)
+      const customIcons = customIcons.filter((item) => item.indexOf(this.name) !== -1)
+
+      this.icons.commonIcons = commonList
+      this.icons.directivityIcons = directivityList
+      this.icons.solidIcons = solidList
+      this.icons.foodIcons = foodIconsList
+      this.icons.customIcons = customIcons
+
+      if (commonList.length > 0) {
+        this.activeName = 'first'
+        return
+      }
+
+      if (directivityList.length > 0) {
+        this.activeName = 'second'
+        return
+      }
+
+      if (solidList.length > 0) {
+        this.activeName = 'third'
+        return
+      }
+
+      if (foodIconsList.length > 0) {
+        this.activeName = 'fourth'
+        return
+      }
+
+      if (customIcons.length > 0) {
+        this.activeName = 'fifth'
+        return
+      }
+
+      this.activeName = 'first'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.search-item {
+	margin: 0px 0 10px;
+}
+
+ul {
+	// overflow-y: auto;
+	// padding-left: 0rem;
+	// margin-top: 0rem;
+	padding: 0;
+	margin: 0;
+	overflow: auto;
+	zoom: 1;
+	height: 500px;
+
+	li {
+		// list-style: none;
+		// float: left;
+		// width: 60px;
+		// text-align: center;
+		// cursor: pointer;
+		// color: #555;
+		// transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+		// position: relative;
+		// // margin: 3px 0;
+		// border-radius: 4px;
+		// background-color: #fff;
+		// overflow: hidden;
+		padding: 0;
+		float: left;
+		margin: 2px;
+		width: 100px;
+		text-align: center;
+		list-style: none;
+		cursor: pointer;
+		color: #5c6b77;
+		transition: all 0.2s ease;
+		position: relative;
+	}
+
+	span.active {
+		i {
+			border-radius: 2px;
+			border-color: #4a4a48;
+			background-color: #4a4a48;
+			color: #fff;
+			transition: all 0.3s;
+		}
+	}
+
+	i {
+		font-size: 1.7rem;
+		border: 1px solid #f1f1f1;
+		padding: 0.2rem;
+		margin: 0.3rem;
+		cursor: pointer;
+
+		&:hover {
+			border-radius: 2px;
+			border-color: #4a4a48;
+			background-color: #4a4a48;
+			color: #fff;
+			transition: all 0.3s;
+		}
+	}
+
+	li p {
+		word-break: break-all;
+		overflow: hidden;
+		margin: 2px 0;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+</style>

src/views/setup/agentMenus/index.vue

@@ -1,13 +1,523 @@
 <template>
-    <div class="agentMenus">
-        <h1>代理商菜单</h1>
+    <div class="userStyleMenus">
+      <!-- 搜索 -->
+      <FixedNav class="formSearch" :height="200">
+        <div class="searchInput">
+          <span>菜单名：</span>
+          <el-input v-model="formInline.permissionName" maxlength="20" placeholder="请输入菜单名" />
+        </div>
+        <el-button type="primary" plain @click="search">查询</el-button>
+        <el-button type="info" plain @click="clear">重置</el-button>
+        <el-button type="success" plain @click="add(1)">新增父级目录</el-button>
+        <el-button type="success" plain @click="add(2)">新增子级菜单</el-button>
+        <el-button type="success" plain @click="add(3)">新增子级按钮</el-button>
+        <el-button type="success" plain @click="syncMenu()">同步菜单</el-button>
+      </FixedNav>
+      <!-- 表 格   default-expand-all -->
+      <div class="tableBox">
+        <el-table
+          ref="menuList" :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="permissionId"
+          border
+          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
+          :tree-props="{ children: 'childs', hasChildren: 'hasChildren' }" @select="select" @select-all="selectAll"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column prop="permissionName" label="菜单名称" />
+          <el-table-column label="图标">
+            <template slot-scope="scope">
+              <div>
+                <i :class="scope.row.icon" />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="permission" label="菜单标识" />
+          <el-table-column prop="createTime" label="创建时间" />
+          <el-table-column label="操作" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <div class="btnList">
+                <el-button type="text" @click="edit(scope.row)">编辑</el-button>
+                <el-button type="text" @click="del(scope.row)">删除</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="fenye">
+          <el-pagination
+            :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="10"
+            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </div>
+      </div>
+  
+      <!-- *************对话框开始************* -->
+      <el-dialog
+        :title="userState ? '新增菜单' : '修改菜单'" :visible.sync="addFormDialog" width="30%" center
+        :close-on-click-modal="false"
+      >
+        <!-- 新增角色 -->
+        <div>
+          <el-form ref="ruleForm" :model="addForm" label-width="80px" :rules="userRules">
+            <el-form-item label="父节点ID">
+              <el-input v-model="addForm.permissionPid" maxlength="20" :disabled="true" placeholder="请输入角色名称" />
+            </el-form-item>
+            <el-form-item label="菜单名称" prop="permissionName">
+              <el-input v-model="addForm.permissionName" maxlength="20" placeholder="请输入菜单名称" />
+            </el-form-item>
+            <el-form-item label="菜单路径" prop="permission">
+              <el-input v-model="addForm.permission" maxlength="100" placeholder="请输入菜单路径" />
+            </el-form-item>
+            <el-form-item label="图标地址" prop="icon">
+              <el-input v-model="addForm.icon" :prefix-icon="addForm.icon" placeholder="请输入图片地址" @focus="getFocus" />
+            </el-form-item>
+            <el-form-item label="菜单描述">
+              <el-input v-model="addForm.describe" maxlength="60" placeholder="请输入菜单描述" />
+            </el-form-item>
+            <el-form-item label="排序值" prop="sort">
+              <el-input
+                v-model="addForm.sort" maxlength="9" placeholder="请输入排序值"
+                oninput="value=value.replace(/[^\d]/g,'')"
+              />
+            </el-form-item>
+            <el-form-item label="权限类型" prop="resourceType">
+              <el-select v-model="addForm.resourceType" placeholder="请选择活动区域">
+                <el-option label="菜单" value="menu" />
+                <el-option label="按钮" value="button" />
+                <el-option label="目录" value="catalog" />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="addFormDialog = false">取 消</el-button>
+          <el-button type="primary" @click="addForm_enter('ruleForm')">确 定</el-button>
+        </span>
+      </el-dialog>
+  
+      <!-- *************同步菜单对话框开始************* -->
+      <el-dialog title="同步菜单" :visible.sync="syncMenuDialog" width="30%" center :close-on-click-modal="false">
+        <!-- 新增角色 -->
+        <div>
+          <el-form ref="syncMenuForm" :model="syncMenuForm" label-width="80px" :rules="syncMenuRules">
+            <el-form-item label="同步范围" prop="syncAll">
+              <el-radio-group v-model="syncMenuForm.syncAll">
+                <el-radio :label="true">同步所有</el-radio>
+                <el-radio :label="false">同步指定商家</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="删除菜单">
+              <el-checkbox v-model="syncMenuForm.delMenu" />
+            </el-form-item>
+            <el-form-item v-if="syncMenuForm.syncAll == false" label="商家账号">
+              <el-input v-model="syncMenuForm.syncBusinessUsername" maxlength="20" placeholder="请输入商家账号" />
+            </el-form-item>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="syncMenuDialog = false">取 消</el-button>
+          <el-button type="primary" :loading="loading" @click="submitSyncMenu('syncMenuForm')">确 定</el-button>
+        </span>
+      </el-dialog>
+  
+      <Icons :dialog-visible="iconVisible" @choose="chooseIcon" @close="iconVisible = false" />
     </div>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style lang="scss" scoped></style>
+  </template>
+  
+  <script>
+  import {
+    businessTabsGetAll,
+    businessTabsAdd,
+    businessTabsGetById,
+    businessTabsUpdate,
+    businessTabsDelete,
+    businessGetMaxSort,
+    businessSyncMenu
+  } from '@/api/setup'
+  import Icons from './Icons'
+  import { Message } from 'element-ui'
+  import FixedNav from '@/components/FixedNav/index.vue'
+  export default {
+    // import引入的组件需要注入到对象中才能使用
+    components: {
+      Icons,
+      FixedNav
+    },
+    data() {
+      // 这里存放数据
+      return {
+        formInline: {
+          permissionName: '', // 搜索字段
+          project: -4, // 权限类型: 0-商家菜单 -1-团长菜单 -2-合伙人菜单 -3-加盟商菜单 -4-代理商菜单
+          page: '1', // 当前页
+          pageSize: '10', // 每页记录数
+        },
+        total: 1,
+        tableData: [],
+        currentPage: 1,
+        userState: 1,
+        addForm: {
+          permissionPid: '', // 父节点id
+          permissionName: '', // 权限名称
+          permissionUri: '', // URI
+          permission: '', // 组件
+          icon: '', // 图标地址
+          describe: '', // 描述
+          resourceType: 'menu', // 权限类型 menu-菜单 button-按钮 catalog-目录
+          sort: '', // 排序值
+          project: -4
+        },
+        syncMenuForm: {
+          syncAll: false,
+          syncBusinessUsername: '',
+          delMenu: false
+        },
+        addFormDialog: false,
+        syncMenuDialog: false,
+        userRules: {
+          permissionName: [
+            { required: true, message: '请输入权限名称', trigger: 'blur' }
+          ],
+          permission: [
+            { required: true, message: '请输入菜单路径', trigger: 'blur' }
+          ],
+          resourceType: [
+            { required: true, message: '请选择活动区域', trigger: 'change' }
+          ],
+          sort: [ { required: true, message: '请输入菜单路径', trigger: 'blur' } ],
+          icon: [ { required: true, message: '请输入图标地址', trigger: 'blur' } ]
+        },
+        syncMenuRules: {},
+        iconVisible: false,
+        multipleSelection: [],
+        loading: false
+      }
+    },
+    mounted() {
+      this.getAll(this.formInline)
+    },
+    // 方法集合
+    methods: {
+      handleSelectionChange(val) {
+        // console.dir(this.$refs.menuList.selection)
+        // const sel = this.extract(val)
+        this.multipleSelection = val
+        // console.dir(this.$refs.menuList)
+      },
+      setChildren(children, type) {
+        // 编辑多个子层级
+        children.map((j) => {
+          this.toggleSelection(j, type)
+          if (j.childs) {
+            this.setChildren(j.childs, type)
+          }
+        })
+      },
+      // 选中父节点时，子节点一起选中取消
+      select(selection, row) {
+        if (selection.some((el) => row.permissionId === el.permissionId)) {
+          if (row.childs) {
+            // row.childList.map(j => {
+            //     this.toggleSelection(j, true)
+            // })
+            // 解决子组件没有被勾选到
+            this.setChildren(row.childs, true)
+          }
+        } else if (row.childs) {
+          // row.childList.map(j => {
+          //     this.toggleSelection(j, false)
+          // })
+          this.setChildren(row.childs, false)
+        }
+      },
+      toggleSelection(row, select) {
+        if (row) {
+          this.$nextTick(() => {
+            this.$refs.menuList && this.$refs.menuList.toggleRowSelection(row, select)
+          })
+        }
+      },
+      // 选择全部
+      selectAll(selection) {
+        // tabledata第一层只要有在selection里面就是全选
+        const isSelect = selection.some((el) => {
+          const tableDataIds = this.tableData.map((j) => j.permissionId)
+          return tableDataIds.includes(el.permissionId)
+        })
+        // tableDate第一层只要有不在selection里面就是全不选
+        const isCancel = !this.tableData.every((el) => {
+          const selectIds = selection.map((j) => j.permissionId)
+          return selectIds.includes(el.permissionId)
+        })
+        console.log(isSelect, 'isSelect')
+        if (isSelect) {
+          selection.map((el) => {
+            if (el.childs) {
+              // el.childList.map(j => {
+              //     this.toggleSelection(j, true)
+              // })
+              // 解决子组件没有被勾选到
+              this.setChildren(el.childs, true)
+            }
+          })
+        }
+        if (isCancel) {
+          this.tableData.map((el) => {
+            if (el.childs) {
+              // el.childList.map(j => {
+              //     this.toggleSelection(j, false)
+              // })
+              // 解决子组件没有被勾选到
+              this.setChildren(el.childs, false)
+            }
+          })
+        }
+        this.$emit('handleSelect', this.tableData)
+      },
+      handleSizeChange(val) {
+        this.formInline.pageSize = val
+        this.getAll(this.formInline)
+      },
+      handleCurrentChange(val) {
+        this.formInline.page = val
+        this.getAll(this.formInline)
+      },
+      // 查询
+      search() {
+        this.total = 1
+        this.formInline.page = 1
+        this.getAll(this.formInline)
+      },
+      // 清除
+      clear() {
+        this.formInline = {
+          permissionName: '', // 搜索字段
+          page: '1', // 当前页
+          pageSize: '10', // 每页记录数
+          project: -4
+        }
+        this.getAll(this.formInline)
+      },
+      // 新增角色
+      add(index) {
+        this.userState = 1
+        businessGetMaxSort().then((res) => {
+          if (index === 1) {
+            if (this.multipleSelection.length >= 1) {
+              this.$message({
+                message: '请勿选择节点进行操作'
+              })
+              return
+            }
+            this.addForm = {
+              permissionPid: '', // 父节点id
+              permissionName: '', // 权限名称
+              permissionUri: '', // URI
+              permission: '', // 组件
+              icon: '', // 图标地址
+              describe: '', // 描述
+              resourceType: 'catalog', // 权限类型 menu-菜单 button-按钮 catalog-目录
+              sort: parseInt(res.data), // 排序值
+              project: -4
+            }
+            this.addFormDialog = true
+          } else if (index === 2) {
+            if (this.multipleSelection.length === 0) {
+              this.$message({
+                message: '请选择父节点'
+              })
+              return
+            }
+            if (this.multipleSelection[0].permissionPid !== 0) {
+              this.$message({
+                message: '请选择父节点进行操作'
+              })
+              return
+            }
+            this.addForm = {
+              permissionPid: this.multipleSelection[0].permissionId, // 父节点id
+              permissionName: '', // 权限名称
+              permissionUri: '', // URI
+              permission: '', // 组件
+              icon: '', // 图标地址
+              describe: '', // 描述
+              resourceType: 'menu', // 权限类型 menu-菜单 button-按钮 catalog-目录
+              sort: parseInt(res.data), // 排序值
+              project: -4
+            }
+            this.addFormDialog = true
+          } else if (index === 3) {
+            if (this.multipleSelection.length === 0) {
+              this.$message({
+                message: '请选择子节点'
+              })
+              return
+            }
+            if (
+              this.multipleSelection[0].permissionPid === 0 &&
+              this.multipleSelection[0].childs.length !== 0
+            ) {
+              this.$message({
+                message: '请勿选择父节点进行操作'
+              })
+              return
+            }
+            this.addForm = {
+              permissionPid: this.multipleSelection[0].permissionId, // 父节点id
+              permissionName: '', // 权限名称
+              permissionUri: '', // URI
+              permission: '', // 组件
+              icon: 'el-icon-minus', // 图标地址
+              describe: '', // 描述
+              resourceType: 'button', // 权限类型 menu-菜单 button-按钮 catalog-目录
+              sort: parseInt(res.data), // 排序值
+              project: -4
+            }
+            this.addFormDialog = true
+          }
+        })
+      },
+      syncMenu() {
+        if (this.multipleSelection.length === 0) {
+          this.$message({
+            message: '请选择要同步的节点'
+          })
+          return
+        }
+        this.syncMenuForm.syncAll = true
+        this.syncMenuForm.syncBusinessUsername = ''
+        this.syncMenuForm.delMenu = false
+        this.syncMenuDialog = true
+      },
+      submitSyncMenu(syncMenuForm) {
+        const that = this
+        this.$refs[syncMenuForm].validate((valid) => {
+          if (valid) {
+            if (that.syncMenuForm.syncAll === false && that.syncMenuForm.syncBusinessUsername === '') {
+              this.$message({
+                message: '请输入要同步的商家账号'
+              })
+              return
+            }
+            this.loading = true
+            businessSyncMenu(Object.assign({}, this.syncMenuForm, { syncMenu: this.multipleSelection })).then((res) => {
+              if (res.code === '') {
+                this.$message({
+                  message: '同步成功',
+                  type: 'success'
+                })
+              }
+              this.loading = false
+              this.syncMenuDialog = false
+            })
+              .catch((error) => {
+                if (error && error.message.includes('timeout')) {
+                  Message({
+                    message: '后台正在异步处理，请关注商家端菜单变化',
+                    type: 'error',
+                    duration: 2 * 1000
+                  })
+                }
+                this.loading = false
+                this.syncMenuDialog = false
+              })
+          }
+        })
+      },
+      // 确认新增角色
+      addForm_enter(ruleForm) {
+        this.$refs[ruleForm].validate((valid) => {
+          if (valid) {
+            if (this.userState) {
+              businessTabsAdd(this.addForm).then((res) => {
+                if (res.code === '') {
+                  this.$message({
+                    message: '新增成功',
+                    type: 'success'
+                  })
+                }
+                this.getAll(this.formInline)
+                this.addFormDialog = false
+              })
+            } else {
+              businessTabsUpdate(this.addForm).then((res) => {
+                if (res.code === '') {
+                  this.$message({
+                    message: '修改成功',
+                    type: 'success'
+                  })
+                }
+                this.getAll(this.formInline)
+                this.addFormDialog = false
+              })
+            }
+          } else {
+            console.log('error submit!!')
+            return false
+          }
+        })
+      },
+      // 编辑角色
+      edit(row) {
+        this.userState = 0
+        this.addFormDialog = true
+        businessTabsGetById({ permissionId: row.permissionId }).then((res) => {
+          this.addForm = res.data
+          // this.addForm.roleIds = [1];
+        })
+      },
+      // 删除角色
+      async del(row) {
+        const res = await businessTabsDelete({ permissionId: row.permissionId })
+        if (res.code === '') {
+          this.$message({
+            message: '删除成功',
+            type: 'success'
+          })
+        }
+        this.getAll(this.formInline)
+      },
+      // 组件传回值
+      chooseIcon(icon) {
+        this.addForm.icon = icon
+        this.iconVisible = false
+      },
+      getFocus() {
+        this.iconVisible = true
+      },
+      // 初始化查询所有数据
+      async getAll(formInline) {
+        const res = await businessTabsGetAll(formInline)
+        this.tableData = res.data.list
+        this.total = res.data.total
+      }
+    }
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+  //@import url(); 引入公共css类
+  @import url("../../../styles/elDialog.scss");
+  
+  .userStyleMenus {
+      .formSearch {
+          padding: 20px 30px;
+          display: flex;
+  
+          .searchInput {
+              margin-right: 20px;
+              display: flex;
+              align-items: center;
+  
+              span {
+                  min-width: 80px;
+              }
+          }
+      }
+  
+      .tableBox {
+          margin: 0 20px 20px;
+      }
+  }
+  </style>
+  

src/views/setup/franchiseesMenus/Icons.vue

@@ -0,0 +1,587 @@
+<template>
+  <el-dialog :close-on-click-modal="false" title="icon" :visible.sync="isVisible" :width="width" top="50px" center>
+    <el-input
+      v-model="name" maxlength="20" class="filter-item search-item" clearable
+      placeholder="icon"
+      @keyup.native="searchIcon"
+    />
+    <el-tabs v-model="activeName" style="margin-top: -1rem">
+      <el-tab-pane label="通用类" name="first">
+        <ul>
+          <li v-for="icon in icons.commonIcons" :key="icon" class="icons-item">
+            <span :class="{ active: activeIndex === icon }">
+              <el-icon :class="icon" :title="icon" @click.native="chooseIcon(icon)" @dblclick.native="confirm" />
+            </span>
+            <p>{{ icon }}</p>
+          </li>
+        </ul>
+      </el-tab-pane>
+      <el-tab-pane label="指向性" name="second">
+        <ul>
+          <li v-for="icon in icons.directivityIcons" :key="icon">
+            <span :class="{ active: activeIndex === icon }">
+              <el-icon :class="icon" :title="icon" @click.native="chooseIcon(icon)" @dblclick.native="confirm" />
+            </span>
+            <p>{{ icon }}</p>
+          </li>
+        </ul>
+      </el-tab-pane>
+      <el-tab-pane label="填充类" name="third">
+        <ul>
+          <li v-for="icon in icons.solidIcons" :key="icon">
+            <span :class="{ active: activeIndex === icon }">
+              <el-icon :class="icon" :title="icon" @click.native="chooseIcon(icon)" @dblclick.native="confirm" />
+            </span>
+            <p>{{ icon }}</p>
+          </li>
+        </ul>
+      </el-tab-pane>
+      <el-tab-pane label="食品类" name="fourth">
+        <ul>
+          <li v-for="icon in icons.foodIcons" :key="icon">
+            <span :class="{ active: activeIndex === icon }">
+              <el-icon :class="icon" :title="icon" @click.native="chooseIcon(icon)" @dblclick.native="confirm" />
+            </span>
+            <p>{{ icon }}</p>
+          </li>
+        </ul>
+      </el-tab-pane>
+      <el-tab-pane label="自定义" name="fifth">
+        <ul>
+          <li v-for="icon in icons.customIcons" :key="icon">
+            <span :class="{ active: activeIndex === icon }">
+              <el-icon :class="icon" :title="icon" @click.native="chooseIcon(icon)" @dblclick.native="confirm" />
+            </span>
+            <p>{{ icon }}</p>
+          </li>
+        </ul>
+      </el-tab-pane>
+    </el-tabs>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="isVisible = false"> 取消 </el-button>
+      <el-button type="primary" @click="confirm"> 确定 </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+const commonIcons = [
+  'el-icon-eleme',
+  'el-icon-delete',
+  'el-icon-setting',
+  'el-icon-user',
+  'el-icon-phone-outline',
+  'el-icon-more-outline',
+  'el-icon-star-off',
+  'el-icon-goods',
+  'el-icon-warning-outline',
+  'el-icon-zoom-in',
+  'el-icon-zoom-out',
+  'el-icon-remove-outline',
+  'el-icon-circle-plus-outline',
+  'el-icon-circle-check',
+  'el-icon-circle-close',
+  'el-icon-help',
+  'el-icon-minus',
+  'el-icon-plus',
+  'el-icon-check',
+  'el-icon-close',
+  'el-icon-picture-outline',
+  'el-icon-picture-outline-round',
+  'el-icon-upload2',
+  'el-icon-download',
+  'el-icon-camera',
+  'el-icon-video-camera',
+  'el-icon-bell',
+  'el-icon-video-pause',
+  'el-icon-video-play',
+  'el-icon-refresh',
+  'el-icon-refresh-right',
+  'el-icon-refresh-left',
+  'el-icon-finished',
+  'el-icon-loading',
+  'el-icon-view',
+  'el-icon-c-scale-to-original',
+  'el-icon-date',
+  'el-icon-edit',
+  'el-icon-edit-outline',
+  'el-icon-folder',
+  'el-icon-folder-opened',
+  'el-icon-folder-add',
+  'el-icon-folder-remove',
+  'el-icon-folder-delete',
+  'el-icon-folder-checked',
+  'el-icon-tickets',
+  'el-icon-document-remove',
+  'el-icon-document-delete',
+  'el-icon-document-copy',
+  'el-icon-document-checked',
+  'el-icon-document',
+  'el-icon-document-add',
+  'el-icon-printer',
+  'el-icon-paperclip',
+  'el-icon-takeaway-box',
+  'el-icon-search',
+  'el-icon-monitor',
+  'el-icon-attract',
+  'el-icon-mobile',
+  'el-icon-scissors',
+  'el-icon-umbrella',
+  'el-icon-headset',
+  'el-icon-brush',
+  'el-icon-mouse',
+  'el-icon-coordinate',
+  'el-icon-magic-stick',
+  'el-icon-reading',
+  'el-icon-data-line',
+  'el-icon-data-board',
+  'el-icon-pie-chart',
+  'el-icon-data-analysis',
+  'el-icon-collection-tag',
+  'el-icon-film',
+  'el-icon-suitcase',
+  'el-icon-suitcase-1',
+  'el-icon-receiving',
+  'el-icon-collection',
+  'el-icon-files',
+  'el-icon-notebook-1',
+  'el-icon-notebook-2',
+  'el-icon-toilet-paper',
+  'el-icon-office-building',
+  'el-icon-school',
+  'el-icon-table-lamp',
+  'el-icon-house',
+  'el-icon-no-smoking',
+  'el-icon-smoking',
+  'el-icon-shopping-cart-full',
+  'el-icon-shopping-cart-1',
+  'el-icon-shopping-cart-2',
+  'el-icon-shopping-bag-1',
+  'el-icon-shopping-bag-2',
+  'el-icon-sold-out',
+  'el-icon-sell',
+  'el-icon-present',
+  'el-icon-box',
+  'el-icon-bank-card',
+  'el-icon-money',
+  'el-icon-coin',
+  'el-icon-wallet',
+  'el-icon-discount',
+  'el-icon-price-tag',
+  'el-icon-news',
+  'el-icon-guide',
+  'el-icon-male',
+  'el-icon-female',
+  'el-icon-thumb',
+  'el-icon-cpu',
+  'el-icon-link',
+  'el-icon-connection',
+  'el-icon-open',
+  'el-icon-turn-off',
+  'el-icon-set-up',
+  'el-icon-chat-round',
+  'el-icon-chat-line-round',
+  'el-icon-chat-square',
+  'el-icon-chat-dot-round',
+  'el-icon-chat-dot-square',
+  'el-icon-chat-line-square',
+  'el-icon-message',
+  'el-icon-postcard',
+  'el-icon-position',
+  'el-icon-turn-off-microphone',
+  'el-icon-microphone',
+  'el-icon-close-notification',
+  'el-icon-bangzhu',
+  'el-icon-time',
+  'el-icon-odometer',
+  'el-icon-crop',
+  'el-icon-aim',
+  'el-icon-switch-button',
+  'el-icon-full-screen',
+  'el-icon-copy-document',
+  'el-icon-mic',
+  'el-icon-stopwatch',
+  'el-icon-medal-1',
+  'el-icon-medal',
+  'el-icon-trophy',
+  'el-icon-trophy-1',
+  'el-icon-first-aid-kit',
+  'el-icon-discover',
+  'el-icon-place',
+  'el-icon-location-outline',
+  'el-icon-location-information',
+  'el-icon-add-location',
+  'el-icon-delete-location',
+  'el-icon-map-location',
+  'el-icon-alarm-clock',
+  'el-icon-timer',
+  'el-icon-watch-1',
+  'el-icon-watch',
+  'el-icon-lock',
+  'el-icon-unlock',
+  'el-icon-key',
+  'el-icon-service',
+  'el-icon-mobile-phone',
+  'el-icon-bicycle',
+  'el-icon-truck',
+  'el-icon-ship',
+  'el-icon-basketball',
+  'el-icon-football',
+  'el-icon-soccer',
+  'el-icon-baseball'
+]
+const directivityIcons = [
+  'el-icon-d-caret',
+  'el-icon-caret-left',
+  'el-icon-caret-right',
+  'el-icon-caret-bottom',
+  'el-icon-caret-top',
+  'el-icon-bottom-left',
+  'el-icon-bottom-right',
+  'el-icon-back',
+  'el-icon-right',
+  'el-icon-bottom',
+  'el-icon-top',
+  'el-icon-top-left',
+  'el-icon-top-right',
+  'el-icon-arrow-left',
+  'el-icon-arrow-right',
+  'el-icon-arrow-down',
+  'el-icon-arrow-up',
+  'el-icon-d-arrow-left',
+  'el-icon-d-arrow-right',
+  'el-icon-sort',
+  'el-icon-sort-up',
+  'el-icon-sort-down',
+  'el-icon-rank'
+]
+const solidIcons = [
+  'el-icon-question',
+  'el-icon-info',
+  'el-icon-remove',
+  'el-icon-circle-plus',
+  'el-icon-success',
+  'el-icon-error',
+  'el-icon-platform-eleme',
+  'el-icon-delete-solid',
+  'el-icon-s-tools',
+  'el-icon-user-solid',
+  'el-icon-phone',
+  'el-icon-star-on',
+  'el-icon-s-goods',
+  'el-icon-warning',
+  'el-icon-s-help',
+  'el-icon-picture',
+  'el-icon-upload',
+  'el-icon-camera-solid',
+  'el-icon-video-camera-solid',
+  'el-icon-message-solid',
+  'el-icon-s-cooperation',
+  'el-icon-s-order',
+  'el-icon-s-platform',
+  'el-icon-s-fold',
+  'el-icon-s-unfold',
+  'el-icon-s-operation',
+  'el-icon-s-promotion',
+  'el-icon-s-home',
+  'el-icon-s-release',
+  'el-icon-s-ticket',
+  'el-icon-s-management',
+  'el-icon-s-open',
+  'el-icon-s-shop',
+  'el-icon-s-marketing',
+  'el-icon-s-flag',
+  'el-icon-s-comment',
+  'el-icon-s-finance',
+  'el-icon-s-claim',
+  'el-icon-s-custom',
+  'el-icon-s-opportunity',
+  'el-icon-s-data',
+  'el-icon-s-check',
+  'el-icon-s-grid',
+  'el-icon-menu',
+  'el-icon-share',
+  'el-icon-d-caret',
+  'el-icon-caret-left',
+  'el-icon-caret-right',
+  'el-icon-caret-bottom',
+  'el-icon-caret-top',
+  'el-icon-location'
+]
+const foodIcons = [
+  'el-icon-dish',
+  'el-icon-dish-1',
+  'el-icon-food',
+  'el-icon-chicken',
+  'el-icon-fork-spoon',
+  'el-icon-knife-fork',
+  'el-icon-burger',
+  'el-icon-tableware',
+  'el-icon-sugar',
+  'el-icon-dessert',
+  'el-icon-ice-cream',
+  'el-icon-hot-water',
+  'el-icon-water-cup',
+  'el-icon-coffee-cup',
+  'el-icon-cold-drink',
+  'el-icon-goblet',
+  'el-icon-goblet-full',
+  'el-icon-goblet-square',
+  'el-icon-goblet-square-full',
+  'el-icon-refrigerator',
+  'el-icon-grape',
+  'el-icon-watermelon',
+  'el-icon-cherry',
+  'el-icon-apple',
+  'el-icon-pear',
+  'el-icon-orange',
+  'el-icon-coffee',
+  'el-icon-ice-tea',
+  'el-icon-ice-drink',
+  'el-icon-milk-tea',
+  'el-icon-potato-strips',
+  'el-icon-lollipop',
+  'el-icon-ice-cream-square',
+  'el-icon-ice-cream-round'
+]
+const customIcons = [
+  'zk-icon-activity',
+  'zk-icon-binding',
+  'zk-icon-cash',
+  'zk-icon-client-list',
+  'zk-icon-commodity-group',
+  'zk-icon-commodity-set',
+  'zk-icon-coupon',
+  'zk-icon-customer-details',
+  'zk-icon-discount',
+  'zk-icon-finance',
+  'zk-icon-finance-details',
+  'zk-icon-generalize',
+  'zk-icon-group-booking',
+  'zk-icon-label',
+  'zk-icon-logistics-set',
+  'zk-icon-management-customer',
+  'zk-icon-management-rule',
+  'zk-icon-management-server',
+  'zk-icon-marketing',
+  'zk-icon-material',
+  'zk-icon-member',
+  'zk-icon-menu',
+  'zk-icon-operation-plan',
+  'zk-icon-operation-plan2',
+  'zk-icon-order',
+  'zk-icon-pending-order',
+  'zk-icon-Price-bundling',
+  'zk-icon-sales-order',
+  'zk-icon-scene',
+  'zk-icon-seckill',
+  'zk-icon-segmentation',
+  'zk-icon-setting',
+  'zk-icon-shop-decoration',
+  'zk-icon-spell-group',
+  'zk-icon-store',
+  'zk-icon-store-set',
+  'zk-icon-system',
+  'zk-icon-user',
+  'zk-icon-wallet'
+
+]
+export default {
+  name: 'Icons',
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      name: '',
+      icons: {
+        commonIcons,
+        directivityIcons,
+        solidIcons,
+        foodIcons,
+        customIcons
+      },
+      activeIndex: '',
+      choosedIcon: '',
+      activeName: 'first',
+      screenWidth: 0,
+      width: this.initWidth()
+    }
+  },
+  computed: {
+    isVisible: {
+      get() {
+        return this.dialogVisible
+      },
+      set() {
+        this.close()
+      }
+    }
+  },
+  mounted() {
+    window.onresize = () => (() => {
+      this.width = this.initWidth()
+    })()
+  },
+  methods: {
+    initWidth() {
+      this.screenWidth = document.body.clientWidth
+      if (this.screenWidth < 991) {
+        return '90%'
+      } else if (this.screenWidth < 1400) {
+        return '60%'
+      }
+      return '800px'
+    },
+    close() {
+      this.$emit('close')
+      this.activeName = 'first'
+      this.choosedIcon = this.activeIndex = ''
+    },
+    chooseIcon(icon) {
+      console.log(icon)
+      this.activeIndex = icon
+      this.choosedIcon = icon
+    },
+    confirm() {
+      if (!this.choosedIcon) {
+        this.$message({
+          message: '请选择图标',
+          type: 'warning'
+        })
+        return
+      }
+      this.$emit('choose', this.choosedIcon)
+      this.activeName = 'first'
+      this.choosedIcon = this.activeIndex = ''
+    },
+    searchIcon() {
+      if (this.name.trim() === '') {
+        this.icons.commonIcons = commonIcons
+        this.icons.directivityIcons = directivityIcons
+        this.icons.solidIcons = solidIcons
+        this.icons.foodIcons = foodIcons
+        this.icons.customIcons = customIcons
+        this.activeName = 'first'
+      }
+      const commonList = commonIcons.filter((item) => item.indexOf(this.name) !== -1)
+      const directivityList = directivityIcons.filter((item) => item.indexOf(this.name) !== -1)
+      const solidList = solidIcons.filter((item) => item.indexOf(this.name) !== -1)
+      const foodIconsList = foodIcons.filter((item) => item.indexOf(this.name) !== -1)
+      const customIcons = customIcons.filter((item) => item.indexOf(this.name) !== -1)
+
+      this.icons.commonIcons = commonList
+      this.icons.directivityIcons = directivityList
+      this.icons.solidIcons = solidList
+      this.icons.foodIcons = foodIconsList
+      this.icons.customIcons = customIcons
+
+      if (commonList.length > 0) {
+        this.activeName = 'first'
+        return
+      }
+
+      if (directivityList.length > 0) {
+        this.activeName = 'second'
+        return
+      }
+
+      if (solidList.length > 0) {
+        this.activeName = 'third'
+        return
+      }
+
+      if (foodIconsList.length > 0) {
+        this.activeName = 'fourth'
+        return
+      }
+
+      if (customIcons.length > 0) {
+        this.activeName = 'fifth'
+        return
+      }
+
+      this.activeName = 'first'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.search-item {
+	margin: 0px 0 10px;
+}
+
+ul {
+	// overflow-y: auto;
+	// padding-left: 0rem;
+	// margin-top: 0rem;
+	padding: 0;
+	margin: 0;
+	overflow: auto;
+	zoom: 1;
+	height: 500px;
+
+	li {
+		// list-style: none;
+		// float: left;
+		// width: 60px;
+		// text-align: center;
+		// cursor: pointer;
+		// color: #555;
+		// transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+		// position: relative;
+		// // margin: 3px 0;
+		// border-radius: 4px;
+		// background-color: #fff;
+		// overflow: hidden;
+		padding: 0;
+		float: left;
+		margin: 2px;
+		width: 100px;
+		text-align: center;
+		list-style: none;
+		cursor: pointer;
+		color: #5c6b77;
+		transition: all 0.2s ease;
+		position: relative;
+	}
+
+	span.active {
+		i {
+			border-radius: 2px;
+			border-color: #4a4a48;
+			background-color: #4a4a48;
+			color: #fff;
+			transition: all 0.3s;
+		}
+	}
+
+	i {
+		font-size: 1.7rem;
+		border: 1px solid #f1f1f1;
+		padding: 0.2rem;
+		margin: 0.3rem;
+		cursor: pointer;
+
+		&:hover {
+			border-radius: 2px;
+			border-color: #4a4a48;
+			background-color: #4a4a48;
+			color: #fff;
+			transition: all 0.3s;
+		}
+	}
+
+	li p {
+		word-break: break-all;
+		overflow: hidden;
+		margin: 2px 0;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+</style>

src/views/setup/franchiseesMenus/index.vue

@@ -1,13 +1,523 @@
 <template>
-    <div class="franchiseesMenus">
-        <h1>加盟商菜单</h1>
+    <div class="userStyleMenus">
+      <!-- 搜索 -->
+      <FixedNav class="formSearch" :height="200">
+        <div class="searchInput">
+          <span>菜单名：</span>
+          <el-input v-model="formInline.permissionName" maxlength="20" placeholder="请输入菜单名" />
+        </div>
+        <el-button type="primary" plain @click="search">查询</el-button>
+        <el-button type="info" plain @click="clear">重置</el-button>
+        <el-button type="success" plain @click="add(1)">新增父级目录</el-button>
+        <el-button type="success" plain @click="add(2)">新增子级菜单</el-button>
+        <el-button type="success" plain @click="add(3)">新增子级按钮</el-button>
+        <el-button type="success" plain @click="syncMenu()">同步菜单</el-button>
+      </FixedNav>
+      <!-- 表 格   default-expand-all -->
+      <div class="tableBox">
+        <el-table
+          ref="menuList" :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="permissionId"
+          border
+          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
+          :tree-props="{ children: 'childs', hasChildren: 'hasChildren' }" @select="select" @select-all="selectAll"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column prop="permissionName" label="菜单名称" />
+          <el-table-column label="图标">
+            <template slot-scope="scope">
+              <div>
+                <i :class="scope.row.icon" />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="permission" label="菜单标识" />
+          <el-table-column prop="createTime" label="创建时间" />
+          <el-table-column label="操作" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <div class="btnList">
+                <el-button type="text" @click="edit(scope.row)">编辑</el-button>
+                <el-button type="text" @click="del(scope.row)">删除</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="fenye">
+          <el-pagination
+            :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="10"
+            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </div>
+      </div>
+  
+      <!-- *************对话框开始************* -->
+      <el-dialog
+        :title="userState ? '新增菜单' : '修改菜单'" :visible.sync="addFormDialog" width="30%" center
+        :close-on-click-modal="false"
+      >
+        <!-- 新增角色 -->
+        <div>
+          <el-form ref="ruleForm" :model="addForm" label-width="80px" :rules="userRules">
+            <el-form-item label="父节点ID">
+              <el-input v-model="addForm.permissionPid" maxlength="20" :disabled="true" placeholder="请输入角色名称" />
+            </el-form-item>
+            <el-form-item label="菜单名称" prop="permissionName">
+              <el-input v-model="addForm.permissionName" maxlength="20" placeholder="请输入菜单名称" />
+            </el-form-item>
+            <el-form-item label="菜单路径" prop="permission">
+              <el-input v-model="addForm.permission" maxlength="100" placeholder="请输入菜单路径" />
+            </el-form-item>
+            <el-form-item label="图标地址" prop="icon">
+              <el-input v-model="addForm.icon" :prefix-icon="addForm.icon" placeholder="请输入图片地址" @focus="getFocus" />
+            </el-form-item>
+            <el-form-item label="菜单描述">
+              <el-input v-model="addForm.describe" maxlength="60" placeholder="请输入菜单描述" />
+            </el-form-item>
+            <el-form-item label="排序值" prop="sort">
+              <el-input
+                v-model="addForm.sort" maxlength="9" placeholder="请输入排序值"
+                oninput="value=value.replace(/[^\d]/g,'')"
+              />
+            </el-form-item>
+            <el-form-item label="权限类型" prop="resourceType">
+              <el-select v-model="addForm.resourceType" placeholder="请选择活动区域">
+                <el-option label="菜单" value="menu" />
+                <el-option label="按钮" value="button" />
+                <el-option label="目录" value="catalog" />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="addFormDialog = false">取 消</el-button>
+          <el-button type="primary" @click="addForm_enter('ruleForm')">确 定</el-button>
+        </span>
+      </el-dialog>
+  
+      <!-- *************同步菜单对话框开始************* -->
+      <el-dialog title="同步菜单" :visible.sync="syncMenuDialog" width="30%" center :close-on-click-modal="false">
+        <!-- 新增角色 -->
+        <div>
+          <el-form ref="syncMenuForm" :model="syncMenuForm" label-width="80px" :rules="syncMenuRules">
+            <el-form-item label="同步范围" prop="syncAll">
+              <el-radio-group v-model="syncMenuForm.syncAll">
+                <el-radio :label="true">同步所有</el-radio>
+                <el-radio :label="false">同步指定商家</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="删除菜单">
+              <el-checkbox v-model="syncMenuForm.delMenu" />
+            </el-form-item>
+            <el-form-item v-if="syncMenuForm.syncAll == false" label="商家账号">
+              <el-input v-model="syncMenuForm.syncBusinessUsername" maxlength="20" placeholder="请输入商家账号" />
+            </el-form-item>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="syncMenuDialog = false">取 消</el-button>
+          <el-button type="primary" :loading="loading" @click="submitSyncMenu('syncMenuForm')">确 定</el-button>
+        </span>
+      </el-dialog>
+  
+      <Icons :dialog-visible="iconVisible" @choose="chooseIcon" @close="iconVisible = false" />
     </div>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style lang="scss" scoped></style>
+  </template>
+  
+  <script>
+  import {
+    businessTabsGetAll,
+    businessTabsAdd,
+    businessTabsGetById,
+    businessTabsUpdate,
+    businessTabsDelete,
+    businessGetMaxSort,
+    businessSyncMenu
+  } from '@/api/setup'
+  import Icons from './Icons'
+  import { Message } from 'element-ui'
+  import FixedNav from '@/components/FixedNav/index.vue'
+  export default {
+    // import引入的组件需要注入到对象中才能使用
+    components: {
+      Icons,
+      FixedNav
+    },
+    data() {
+      // 这里存放数据
+      return {
+        formInline: {
+          permissionName: '', // 搜索字段
+          project: -3, // 权限类型: 0-商家菜单 -1-团长菜单 -2-合伙人菜单 -3-加盟商菜单 -4-代理商菜单
+          page: '1', // 当前页
+          pageSize: '10', // 每页记录数
+        },
+        total: 1,
+        tableData: [],
+        currentPage: 1,
+        userState: 1,
+        addForm: {
+          permissionPid: '', // 父节点id
+          permissionName: '', // 权限名称
+          permissionUri: '', // URI
+          permission: '', // 组件
+          icon: '', // 图标地址
+          describe: '', // 描述
+          resourceType: 'menu', // 权限类型 menu-菜单 button-按钮 catalog-目录
+          sort: '', // 排序值
+          project: -3
+        },
+        syncMenuForm: {
+          syncAll: false,
+          syncBusinessUsername: '',
+          delMenu: false
+        },
+        addFormDialog: false,
+        syncMenuDialog: false,
+        userRules: {
+          permissionName: [
+            { required: true, message: '请输入权限名称', trigger: 'blur' }
+          ],
+          permission: [
+            { required: true, message: '请输入菜单路径', trigger: 'blur' }
+          ],
+          resourceType: [
+            { required: true, message: '请选择活动区域', trigger: 'change' }
+          ],
+          sort: [ { required: true, message: '请输入菜单路径', trigger: 'blur' } ],
+          icon: [ { required: true, message: '请输入图标地址', trigger: 'blur' } ]
+        },
+        syncMenuRules: {},
+        iconVisible: false,
+        multipleSelection: [],
+        loading: false
+      }
+    },
+    mounted() {
+      this.getAll(this.formInline)
+    },
+    // 方法集合
+    methods: {
+      handleSelectionChange(val) {
+        // console.dir(this.$refs.menuList.selection)
+        // const sel = this.extract(val)
+        this.multipleSelection = val
+        // console.dir(this.$refs.menuList)
+      },
+      setChildren(children, type) {
+        // 编辑多个子层级
+        children.map((j) => {
+          this.toggleSelection(j, type)
+          if (j.childs) {
+            this.setChildren(j.childs, type)
+          }
+        })
+      },
+      // 选中父节点时，子节点一起选中取消
+      select(selection, row) {
+        if (selection.some((el) => row.permissionId === el.permissionId)) {
+          if (row.childs) {
+            // row.childList.map(j => {
+            //     this.toggleSelection(j, true)
+            // })
+            // 解决子组件没有被勾选到
+            this.setChildren(row.childs, true)
+          }
+        } else if (row.childs) {
+          // row.childList.map(j => {
+          //     this.toggleSelection(j, false)
+          // })
+          this.setChildren(row.childs, false)
+        }
+      },
+      toggleSelection(row, select) {
+        if (row) {
+          this.$nextTick(() => {
+            this.$refs.menuList && this.$refs.menuList.toggleRowSelection(row, select)
+          })
+        }
+      },
+      // 选择全部
+      selectAll(selection) {
+        // tabledata第一层只要有在selection里面就是全选
+        const isSelect = selection.some((el) => {
+          const tableDataIds = this.tableData.map((j) => j.permissionId)
+          return tableDataIds.includes(el.permissionId)
+        })
+        // tableDate第一层只要有不在selection里面就是全不选
+        const isCancel = !this.tableData.every((el) => {
+          const selectIds = selection.map((j) => j.permissionId)
+          return selectIds.includes(el.permissionId)
+        })
+        console.log(isSelect, 'isSelect')
+        if (isSelect) {
+          selection.map((el) => {
+            if (el.childs) {
+              // el.childList.map(j => {
+              //     this.toggleSelection(j, true)
+              // })
+              // 解决子组件没有被勾选到
+              this.setChildren(el.childs, true)
+            }
+          })
+        }
+        if (isCancel) {
+          this.tableData.map((el) => {
+            if (el.childs) {
+              // el.childList.map(j => {
+              //     this.toggleSelection(j, false)
+              // })
+              // 解决子组件没有被勾选到
+              this.setChildren(el.childs, false)
+            }
+          })
+        }
+        this.$emit('handleSelect', this.tableData)
+      },
+      handleSizeChange(val) {
+        this.formInline.pageSize = val
+        this.getAll(this.formInline)
+      },
+      handleCurrentChange(val) {
+        this.formInline.page = val
+        this.getAll(this.formInline)
+      },
+      // 查询
+      search() {
+        this.total = 1
+        this.formInline.page = 1
+        this.getAll(this.formInline)
+      },
+      // 清除
+      clear() {
+        this.formInline = {
+          permissionName: '', // 搜索字段
+          page: '1', // 当前页
+          pageSize: '10', // 每页记录数
+          project: -3
+        }
+        this.getAll(this.formInline)
+      },
+      // 新增角色
+      add(index) {
+        this.userState = 1
+        businessGetMaxSort().then((res) => {
+          if (index === 1) {
+            if (this.multipleSelection.length >= 1) {
+              this.$message({
+                message: '请勿选择节点进行操作'
+              })
+              return
+            }
+            this.addForm = {
+              permissionPid: '', // 父节点id
+              permissionName: '', // 权限名称
+              permissionUri: '', // URI
+              permission: '', // 组件
+              icon: '', // 图标地址
+              describe: '', // 描述
+              resourceType: 'catalog', // 权限类型 menu-菜单 button-按钮 catalog-目录
+              sort: parseInt(res.data), // 排序值
+              project: -3
+            }
+            this.addFormDialog = true
+          } else if (index === 2) {
+            if (this.multipleSelection.length === 0) {
+              this.$message({
+                message: '请选择父节点'
+              })
+              return
+            }
+            if (this.multipleSelection[0].permissionPid !== 0) {
+              this.$message({
+                message: '请选择父节点进行操作'
+              })
+              return
+            }
+            this.addForm = {
+              permissionPid: this.multipleSelection[0].permissionId, // 父节点id
+              permissionName: '', // 权限名称
+              permissionUri: '', // URI
+              permission: '', // 组件
+              icon: '', // 图标地址
+              describe: '', // 描述
+              resourceType: 'menu', // 权限类型 menu-菜单 button-按钮 catalog-目录
+              sort: parseInt(res.data), // 排序值
+              project: -3
+            }
+            this.addFormDialog = true
+          } else if (index === 3) {
+            if (this.multipleSelection.length === 0) {
+              this.$message({
+                message: '请选择子节点'
+              })
+              return
+            }
+            if (
+              this.multipleSelection[0].permissionPid === 0 &&
+              this.multipleSelection[0].childs.length !== 0
+            ) {
+              this.$message({
+                message: '请勿选择父节点进行操作'
+              })
+              return
+            }
+            this.addForm = {
+              permissionPid: this.multipleSelection[0].permissionId, // 父节点id
+              permissionName: '', // 权限名称
+              permissionUri: '', // URI
+              permission: '', // 组件
+              icon: 'el-icon-minus', // 图标地址
+              describe: '', // 描述
+              resourceType: 'button', // 权限类型 menu-菜单 button-按钮 catalog-目录
+              sort: parseInt(res.data), // 排序值
+              project: -3
+            }
+            this.addFormDialog = true
+          }
+        })
+      },
+      syncMenu() {
+        if (this.multipleSelection.length === 0) {
+          this.$message({
+            message: '请选择要同步的节点'
+          })
+          return
+        }
+        this.syncMenuForm.syncAll = true
+        this.syncMenuForm.syncBusinessUsername = ''
+        this.syncMenuForm.delMenu = false
+        this.syncMenuDialog = true
+      },
+      submitSyncMenu(syncMenuForm) {
+        const that = this
+        this.$refs[syncMenuForm].validate((valid) => {
+          if (valid) {
+            if (that.syncMenuForm.syncAll === false && that.syncMenuForm.syncBusinessUsername === '') {
+              this.$message({
+                message: '请输入要同步的商家账号'
+              })
+              return
+            }
+            this.loading = true
+            businessSyncMenu(Object.assign({}, this.syncMenuForm, { syncMenu: this.multipleSelection })).then((res) => {
+              if (res.code === '') {
+                this.$message({
+                  message: '同步成功',
+                  type: 'success'
+                })
+              }
+              this.loading = false
+              this.syncMenuDialog = false
+            })
+              .catch((error) => {
+                if (error && error.message.includes('timeout')) {
+                  Message({
+                    message: '后台正在异步处理，请关注商家端菜单变化',
+                    type: 'error',
+                    duration: 2 * 1000
+                  })
+                }
+                this.loading = false
+                this.syncMenuDialog = false
+              })
+          }
+        })
+      },
+      // 确认新增角色
+      addForm_enter(ruleForm) {
+        this.$refs[ruleForm].validate((valid) => {
+          if (valid) {
+            if (this.userState) {
+              businessTabsAdd(this.addForm).then((res) => {
+                if (res.code === '') {
+                  this.$message({
+                    message: '新增成功',
+                    type: 'success'
+                  })
+                }
+                this.getAll(this.formInline)
+                this.addFormDialog = false
+              })
+            } else {
+              businessTabsUpdate(this.addForm).then((res) => {
+                if (res.code === '') {
+                  this.$message({
+                    message: '修改成功',
+                    type: 'success'
+                  })
+                }
+                this.getAll(this.formInline)
+                this.addFormDialog = false
+              })
+            }
+          } else {
+            console.log('error submit!!')
+            return false
+          }
+        })
+      },
+      // 编辑角色
+      edit(row) {
+        this.userState = 0
+        this.addFormDialog = true
+        businessTabsGetById({ permissionId: row.permissionId }).then((res) => {
+          this.addForm = res.data
+          // this.addForm.roleIds = [1];
+        })
+      },
+      // 删除角色
+      async del(row) {
+        const res = await businessTabsDelete({ permissionId: row.permissionId })
+        if (res.code === '') {
+          this.$message({
+            message: '删除成功',
+            type: 'success'
+          })
+        }
+        this.getAll(this.formInline)
+      },
+      // 组件传回值
+      chooseIcon(icon) {
+        this.addForm.icon = icon
+        this.iconVisible = false
+      },
+      getFocus() {
+        this.iconVisible = true
+      },
+      // 初始化查询所有数据
+      async getAll(formInline) {
+        const res = await businessTabsGetAll(formInline)
+        this.tableData = res.data.list
+        this.total = res.data.total
+      }
+    }
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+  //@import url(); 引入公共css类
+  @import url("../../../styles/elDialog.scss");
+  
+  .userStyleMenus {
+      .formSearch {
+          padding: 20px 30px;
+          display: flex;
+  
+          .searchInput {
+              margin-right: 20px;
+              display: flex;
+              align-items: center;
+  
+              span {
+                  min-width: 80px;
+              }
+          }
+      }
+  
+      .tableBox {
+          margin: 0 20px 20px;
+      }
+  }
+  </style>
+  

src/views/setup/partnerMenus/Icons.vue

@@ -0,0 +1,587 @@
+<template>
+  <el-dialog :close-on-click-modal="false" title="icon" :visible.sync="isVisible" :width="width" top="50px" center>
+    <el-input
+      v-model="name" maxlength="20" class="filter-item search-item" clearable
+      placeholder="icon"
+      @keyup.native="searchIcon"
+    />
+    <el-tabs v-model="activeName" style="margin-top: -1rem">
+      <el-tab-pane label="通用类" name="first">
+        <ul>
+          <li v-for="icon in icons.commonIcons" :key="icon" class="icons-item">
+            <span :class="{ active: activeIndex === icon }">
+              <el-icon :class="icon" :title="icon" @click.native="chooseIcon(icon)" @dblclick.native="confirm" />
+            </span>
+            <p>{{ icon }}</p>
+          </li>
+        </ul>
+      </el-tab-pane>
+      <el-tab-pane label="指向性" name="second">
+        <ul>
+          <li v-for="icon in icons.directivityIcons" :key="icon">
+            <span :class="{ active: activeIndex === icon }">
+              <el-icon :class="icon" :title="icon" @click.native="chooseIcon(icon)" @dblclick.native="confirm" />
+            </span>
+            <p>{{ icon }}</p>
+          </li>
+        </ul>
+      </el-tab-pane>
+      <el-tab-pane label="填充类" name="third">
+        <ul>
+          <li v-for="icon in icons.solidIcons" :key="icon">
+            <span :class="{ active: activeIndex === icon }">
+              <el-icon :class="icon" :title="icon" @click.native="chooseIcon(icon)" @dblclick.native="confirm" />
+            </span>
+            <p>{{ icon }}</p>
+          </li>
+        </ul>
+      </el-tab-pane>
+      <el-tab-pane label="食品类" name="fourth">
+        <ul>
+          <li v-for="icon in icons.foodIcons" :key="icon">
+            <span :class="{ active: activeIndex === icon }">
+              <el-icon :class="icon" :title="icon" @click.native="chooseIcon(icon)" @dblclick.native="confirm" />
+            </span>
+            <p>{{ icon }}</p>
+          </li>
+        </ul>
+      </el-tab-pane>
+      <el-tab-pane label="自定义" name="fifth">
+        <ul>
+          <li v-for="icon in icons.customIcons" :key="icon">
+            <span :class="{ active: activeIndex === icon }">
+              <el-icon :class="icon" :title="icon" @click.native="chooseIcon(icon)" @dblclick.native="confirm" />
+            </span>
+            <p>{{ icon }}</p>
+          </li>
+        </ul>
+      </el-tab-pane>
+    </el-tabs>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="isVisible = false"> 取消 </el-button>
+      <el-button type="primary" @click="confirm"> 确定 </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+const commonIcons = [
+  'el-icon-eleme',
+  'el-icon-delete',
+  'el-icon-setting',
+  'el-icon-user',
+  'el-icon-phone-outline',
+  'el-icon-more-outline',
+  'el-icon-star-off',
+  'el-icon-goods',
+  'el-icon-warning-outline',
+  'el-icon-zoom-in',
+  'el-icon-zoom-out',
+  'el-icon-remove-outline',
+  'el-icon-circle-plus-outline',
+  'el-icon-circle-check',
+  'el-icon-circle-close',
+  'el-icon-help',
+  'el-icon-minus',
+  'el-icon-plus',
+  'el-icon-check',
+  'el-icon-close',
+  'el-icon-picture-outline',
+  'el-icon-picture-outline-round',
+  'el-icon-upload2',
+  'el-icon-download',
+  'el-icon-camera',
+  'el-icon-video-camera',
+  'el-icon-bell',
+  'el-icon-video-pause',
+  'el-icon-video-play',
+  'el-icon-refresh',
+  'el-icon-refresh-right',
+  'el-icon-refresh-left',
+  'el-icon-finished',
+  'el-icon-loading',
+  'el-icon-view',
+  'el-icon-c-scale-to-original',
+  'el-icon-date',
+  'el-icon-edit',
+  'el-icon-edit-outline',
+  'el-icon-folder',
+  'el-icon-folder-opened',
+  'el-icon-folder-add',
+  'el-icon-folder-remove',
+  'el-icon-folder-delete',
+  'el-icon-folder-checked',
+  'el-icon-tickets',
+  'el-icon-document-remove',
+  'el-icon-document-delete',
+  'el-icon-document-copy',
+  'el-icon-document-checked',
+  'el-icon-document',
+  'el-icon-document-add',
+  'el-icon-printer',
+  'el-icon-paperclip',
+  'el-icon-takeaway-box',
+  'el-icon-search',
+  'el-icon-monitor',
+  'el-icon-attract',
+  'el-icon-mobile',
+  'el-icon-scissors',
+  'el-icon-umbrella',
+  'el-icon-headset',
+  'el-icon-brush',
+  'el-icon-mouse',
+  'el-icon-coordinate',
+  'el-icon-magic-stick',
+  'el-icon-reading',
+  'el-icon-data-line',
+  'el-icon-data-board',
+  'el-icon-pie-chart',
+  'el-icon-data-analysis',
+  'el-icon-collection-tag',
+  'el-icon-film',
+  'el-icon-suitcase',
+  'el-icon-suitcase-1',
+  'el-icon-receiving',
+  'el-icon-collection',
+  'el-icon-files',
+  'el-icon-notebook-1',
+  'el-icon-notebook-2',
+  'el-icon-toilet-paper',
+  'el-icon-office-building',
+  'el-icon-school',
+  'el-icon-table-lamp',
+  'el-icon-house',
+  'el-icon-no-smoking',
+  'el-icon-smoking',
+  'el-icon-shopping-cart-full',
+  'el-icon-shopping-cart-1',
+  'el-icon-shopping-cart-2',
+  'el-icon-shopping-bag-1',
+  'el-icon-shopping-bag-2',
+  'el-icon-sold-out',
+  'el-icon-sell',
+  'el-icon-present',
+  'el-icon-box',
+  'el-icon-bank-card',
+  'el-icon-money',
+  'el-icon-coin',
+  'el-icon-wallet',
+  'el-icon-discount',
+  'el-icon-price-tag',
+  'el-icon-news',
+  'el-icon-guide',
+  'el-icon-male',
+  'el-icon-female',
+  'el-icon-thumb',
+  'el-icon-cpu',
+  'el-icon-link',
+  'el-icon-connection',
+  'el-icon-open',
+  'el-icon-turn-off',
+  'el-icon-set-up',
+  'el-icon-chat-round',
+  'el-icon-chat-line-round',
+  'el-icon-chat-square',
+  'el-icon-chat-dot-round',
+  'el-icon-chat-dot-square',
+  'el-icon-chat-line-square',
+  'el-icon-message',
+  'el-icon-postcard',
+  'el-icon-position',
+  'el-icon-turn-off-microphone',
+  'el-icon-microphone',
+  'el-icon-close-notification',
+  'el-icon-bangzhu',
+  'el-icon-time',
+  'el-icon-odometer',
+  'el-icon-crop',
+  'el-icon-aim',
+  'el-icon-switch-button',
+  'el-icon-full-screen',
+  'el-icon-copy-document',
+  'el-icon-mic',
+  'el-icon-stopwatch',
+  'el-icon-medal-1',
+  'el-icon-medal',
+  'el-icon-trophy',
+  'el-icon-trophy-1',
+  'el-icon-first-aid-kit',
+  'el-icon-discover',
+  'el-icon-place',
+  'el-icon-location-outline',
+  'el-icon-location-information',
+  'el-icon-add-location',
+  'el-icon-delete-location',
+  'el-icon-map-location',
+  'el-icon-alarm-clock',
+  'el-icon-timer',
+  'el-icon-watch-1',
+  'el-icon-watch',
+  'el-icon-lock',
+  'el-icon-unlock',
+  'el-icon-key',
+  'el-icon-service',
+  'el-icon-mobile-phone',
+  'el-icon-bicycle',
+  'el-icon-truck',
+  'el-icon-ship',
+  'el-icon-basketball',
+  'el-icon-football',
+  'el-icon-soccer',
+  'el-icon-baseball'
+]
+const directivityIcons = [
+  'el-icon-d-caret',
+  'el-icon-caret-left',
+  'el-icon-caret-right',
+  'el-icon-caret-bottom',
+  'el-icon-caret-top',
+  'el-icon-bottom-left',
+  'el-icon-bottom-right',
+  'el-icon-back',
+  'el-icon-right',
+  'el-icon-bottom',
+  'el-icon-top',
+  'el-icon-top-left',
+  'el-icon-top-right',
+  'el-icon-arrow-left',
+  'el-icon-arrow-right',
+  'el-icon-arrow-down',
+  'el-icon-arrow-up',
+  'el-icon-d-arrow-left',
+  'el-icon-d-arrow-right',
+  'el-icon-sort',
+  'el-icon-sort-up',
+  'el-icon-sort-down',
+  'el-icon-rank'
+]
+const solidIcons = [
+  'el-icon-question',
+  'el-icon-info',
+  'el-icon-remove',
+  'el-icon-circle-plus',
+  'el-icon-success',
+  'el-icon-error',
+  'el-icon-platform-eleme',
+  'el-icon-delete-solid',
+  'el-icon-s-tools',
+  'el-icon-user-solid',
+  'el-icon-phone',
+  'el-icon-star-on',
+  'el-icon-s-goods',
+  'el-icon-warning',
+  'el-icon-s-help',
+  'el-icon-picture',
+  'el-icon-upload',
+  'el-icon-camera-solid',
+  'el-icon-video-camera-solid',
+  'el-icon-message-solid',
+  'el-icon-s-cooperation',
+  'el-icon-s-order',
+  'el-icon-s-platform',
+  'el-icon-s-fold',
+  'el-icon-s-unfold',
+  'el-icon-s-operation',
+  'el-icon-s-promotion',
+  'el-icon-s-home',
+  'el-icon-s-release',
+  'el-icon-s-ticket',
+  'el-icon-s-management',
+  'el-icon-s-open',
+  'el-icon-s-shop',
+  'el-icon-s-marketing',
+  'el-icon-s-flag',
+  'el-icon-s-comment',
+  'el-icon-s-finance',
+  'el-icon-s-claim',
+  'el-icon-s-custom',
+  'el-icon-s-opportunity',
+  'el-icon-s-data',
+  'el-icon-s-check',
+  'el-icon-s-grid',
+  'el-icon-menu',
+  'el-icon-share',
+  'el-icon-d-caret',
+  'el-icon-caret-left',
+  'el-icon-caret-right',
+  'el-icon-caret-bottom',
+  'el-icon-caret-top',
+  'el-icon-location'
+]
+const foodIcons = [
+  'el-icon-dish',
+  'el-icon-dish-1',
+  'el-icon-food',
+  'el-icon-chicken',
+  'el-icon-fork-spoon',
+  'el-icon-knife-fork',
+  'el-icon-burger',
+  'el-icon-tableware',
+  'el-icon-sugar',
+  'el-icon-dessert',
+  'el-icon-ice-cream',
+  'el-icon-hot-water',
+  'el-icon-water-cup',
+  'el-icon-coffee-cup',
+  'el-icon-cold-drink',
+  'el-icon-goblet',
+  'el-icon-goblet-full',
+  'el-icon-goblet-square',
+  'el-icon-goblet-square-full',
+  'el-icon-refrigerator',
+  'el-icon-grape',
+  'el-icon-watermelon',
+  'el-icon-cherry',
+  'el-icon-apple',
+  'el-icon-pear',
+  'el-icon-orange',
+  'el-icon-coffee',
+  'el-icon-ice-tea',
+  'el-icon-ice-drink',
+  'el-icon-milk-tea',
+  'el-icon-potato-strips',
+  'el-icon-lollipop',
+  'el-icon-ice-cream-square',
+  'el-icon-ice-cream-round'
+]
+const customIcons = [
+  'zk-icon-activity',
+  'zk-icon-binding',
+  'zk-icon-cash',
+  'zk-icon-client-list',
+  'zk-icon-commodity-group',
+  'zk-icon-commodity-set',
+  'zk-icon-coupon',
+  'zk-icon-customer-details',
+  'zk-icon-discount',
+  'zk-icon-finance',
+  'zk-icon-finance-details',
+  'zk-icon-generalize',
+  'zk-icon-group-booking',
+  'zk-icon-label',
+  'zk-icon-logistics-set',
+  'zk-icon-management-customer',
+  'zk-icon-management-rule',
+  'zk-icon-management-server',
+  'zk-icon-marketing',
+  'zk-icon-material',
+  'zk-icon-member',
+  'zk-icon-menu',
+  'zk-icon-operation-plan',
+  'zk-icon-operation-plan2',
+  'zk-icon-order',
+  'zk-icon-pending-order',
+  'zk-icon-Price-bundling',
+  'zk-icon-sales-order',
+  'zk-icon-scene',
+  'zk-icon-seckill',
+  'zk-icon-segmentation',
+  'zk-icon-setting',
+  'zk-icon-shop-decoration',
+  'zk-icon-spell-group',
+  'zk-icon-store',
+  'zk-icon-store-set',
+  'zk-icon-system',
+  'zk-icon-user',
+  'zk-icon-wallet'
+
+]
+export default {
+  name: 'Icons',
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      name: '',
+      icons: {
+        commonIcons,
+        directivityIcons,
+        solidIcons,
+        foodIcons,
+        customIcons
+      },
+      activeIndex: '',
+      choosedIcon: '',
+      activeName: 'first',
+      screenWidth: 0,
+      width: this.initWidth()
+    }
+  },
+  computed: {
+    isVisible: {
+      get() {
+        return this.dialogVisible
+      },
+      set() {
+        this.close()
+      }
+    }
+  },
+  mounted() {
+    window.onresize = () => (() => {
+      this.width = this.initWidth()
+    })()
+  },
+  methods: {
+    initWidth() {
+      this.screenWidth = document.body.clientWidth
+      if (this.screenWidth < 991) {
+        return '90%'
+      } else if (this.screenWidth < 1400) {
+        return '60%'
+      }
+      return '800px'
+    },
+    close() {
+      this.$emit('close')
+      this.activeName = 'first'
+      this.choosedIcon = this.activeIndex = ''
+    },
+    chooseIcon(icon) {
+      console.log(icon)
+      this.activeIndex = icon
+      this.choosedIcon = icon
+    },
+    confirm() {
+      if (!this.choosedIcon) {
+        this.$message({
+          message: '请选择图标',
+          type: 'warning'
+        })
+        return
+      }
+      this.$emit('choose', this.choosedIcon)
+      this.activeName = 'first'
+      this.choosedIcon = this.activeIndex = ''
+    },
+    searchIcon() {
+      if (this.name.trim() === '') {
+        this.icons.commonIcons = commonIcons
+        this.icons.directivityIcons = directivityIcons
+        this.icons.solidIcons = solidIcons
+        this.icons.foodIcons = foodIcons
+        this.icons.customIcons = customIcons
+        this.activeName = 'first'
+      }
+      const commonList = commonIcons.filter((item) => item.indexOf(this.name) !== -1)
+      const directivityList = directivityIcons.filter((item) => item.indexOf(this.name) !== -1)
+      const solidList = solidIcons.filter((item) => item.indexOf(this.name) !== -1)
+      const foodIconsList = foodIcons.filter((item) => item.indexOf(this.name) !== -1)
+      const customIcons = customIcons.filter((item) => item.indexOf(this.name) !== -1)
+
+      this.icons.commonIcons = commonList
+      this.icons.directivityIcons = directivityList
+      this.icons.solidIcons = solidList
+      this.icons.foodIcons = foodIconsList
+      this.icons.customIcons = customIcons
+
+      if (commonList.length > 0) {
+        this.activeName = 'first'
+        return
+      }
+
+      if (directivityList.length > 0) {
+        this.activeName = 'second'
+        return
+      }
+
+      if (solidList.length > 0) {
+        this.activeName = 'third'
+        return
+      }
+
+      if (foodIconsList.length > 0) {
+        this.activeName = 'fourth'
+        return
+      }
+
+      if (customIcons.length > 0) {
+        this.activeName = 'fifth'
+        return
+      }
+
+      this.activeName = 'first'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.search-item {
+	margin: 0px 0 10px;
+}
+
+ul {
+	// overflow-y: auto;
+	// padding-left: 0rem;
+	// margin-top: 0rem;
+	padding: 0;
+	margin: 0;
+	overflow: auto;
+	zoom: 1;
+	height: 500px;
+
+	li {
+		// list-style: none;
+		// float: left;
+		// width: 60px;
+		// text-align: center;
+		// cursor: pointer;
+		// color: #555;
+		// transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+		// position: relative;
+		// // margin: 3px 0;
+		// border-radius: 4px;
+		// background-color: #fff;
+		// overflow: hidden;
+		padding: 0;
+		float: left;
+		margin: 2px;
+		width: 100px;
+		text-align: center;
+		list-style: none;
+		cursor: pointer;
+		color: #5c6b77;
+		transition: all 0.2s ease;
+		position: relative;
+	}
+
+	span.active {
+		i {
+			border-radius: 2px;
+			border-color: #4a4a48;
+			background-color: #4a4a48;
+			color: #fff;
+			transition: all 0.3s;
+		}
+	}
+
+	i {
+		font-size: 1.7rem;
+		border: 1px solid #f1f1f1;
+		padding: 0.2rem;
+		margin: 0.3rem;
+		cursor: pointer;
+
+		&:hover {
+			border-radius: 2px;
+			border-color: #4a4a48;
+			background-color: #4a4a48;
+			color: #fff;
+			transition: all 0.3s;
+		}
+	}
+
+	li p {
+		word-break: break-all;
+		overflow: hidden;
+		margin: 2px 0;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+</style>

src/views/setup/partnerMenus/index.vue

@@ -1,15 +1,523 @@
 <template>
-    <div class="partnerMenus">
-        <h1>合伙人菜单</h1>
+    <div class="userStyleMenus">
+      <!-- 搜索 -->
+      <FixedNav class="formSearch" :height="200">
+        <div class="searchInput">
+          <span>菜单名：</span>
+          <el-input v-model="formInline.permissionName" maxlength="20" placeholder="请输入菜单名" />
+        </div>
+        <el-button type="primary" plain @click="search">查询</el-button>
+        <el-button type="info" plain @click="clear">重置</el-button>
+        <el-button type="success" plain @click="add(1)">新增父级目录</el-button>
+        <el-button type="success" plain @click="add(2)">新增子级菜单</el-button>
+        <el-button type="success" plain @click="add(3)">新增子级按钮</el-button>
+        <el-button type="success" plain @click="syncMenu()">同步菜单</el-button>
+      </FixedNav>
+      <!-- 表 格   default-expand-all -->
+      <div class="tableBox">
+        <el-table
+          ref="menuList" :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="permissionId"
+          border
+          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
+          :tree-props="{ children: 'childs', hasChildren: 'hasChildren' }" @select="select" @select-all="selectAll"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column prop="permissionName" label="菜单名称" />
+          <el-table-column label="图标">
+            <template slot-scope="scope">
+              <div>
+                <i :class="scope.row.icon" />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="permission" label="菜单标识" />
+          <el-table-column prop="createTime" label="创建时间" />
+          <el-table-column label="操作" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <div class="btnList">
+                <el-button type="text" @click="edit(scope.row)">编辑</el-button>
+                <el-button type="text" @click="del(scope.row)">删除</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="fenye">
+          <el-pagination
+            :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="10"
+            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </div>
+      </div>
+  
+      <!-- *************对话框开始************* -->
+      <el-dialog
+        :title="userState ? '新增菜单' : '修改菜单'" :visible.sync="addFormDialog" width="30%" center
+        :close-on-click-modal="false"
+      >
+        <!-- 新增角色 -->
+        <div>
+          <el-form ref="ruleForm" :model="addForm" label-width="80px" :rules="userRules">
+            <el-form-item label="父节点ID">
+              <el-input v-model="addForm.permissionPid" maxlength="20" :disabled="true" placeholder="请输入角色名称" />
+            </el-form-item>
+            <el-form-item label="菜单名称" prop="permissionName">
+              <el-input v-model="addForm.permissionName" maxlength="20" placeholder="请输入菜单名称" />
+            </el-form-item>
+            <el-form-item label="菜单路径" prop="permission">
+              <el-input v-model="addForm.permission" maxlength="100" placeholder="请输入菜单路径" />
+            </el-form-item>
+            <el-form-item label="图标地址" prop="icon">
+              <el-input v-model="addForm.icon" :prefix-icon="addForm.icon" placeholder="请输入图片地址" @focus="getFocus" />
+            </el-form-item>
+            <el-form-item label="菜单描述">
+              <el-input v-model="addForm.describe" maxlength="60" placeholder="请输入菜单描述" />
+            </el-form-item>
+            <el-form-item label="排序值" prop="sort">
+              <el-input
+                v-model="addForm.sort" maxlength="9" placeholder="请输入排序值"
+                oninput="value=value.replace(/[^\d]/g,'')"
+              />
+            </el-form-item>
+            <el-form-item label="权限类型" prop="resourceType">
+              <el-select v-model="addForm.resourceType" placeholder="请选择活动区域">
+                <el-option label="菜单" value="menu" />
+                <el-option label="按钮" value="button" />
+                <el-option label="目录" value="catalog" />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="addFormDialog = false">取 消</el-button>
+          <el-button type="primary" @click="addForm_enter('ruleForm')">确 定</el-button>
+        </span>
+      </el-dialog>
+  
+      <!-- *************同步菜单对话框开始************* -->
+      <el-dialog title="同步菜单" :visible.sync="syncMenuDialog" width="30%" center :close-on-click-modal="false">
+        <!-- 新增角色 -->
+        <div>
+          <el-form ref="syncMenuForm" :model="syncMenuForm" label-width="80px" :rules="syncMenuRules">
+            <el-form-item label="同步范围" prop="syncAll">
+              <el-radio-group v-model="syncMenuForm.syncAll">
+                <el-radio :label="true">同步所有</el-radio>
+                <el-radio :label="false">同步指定商家</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="删除菜单">
+              <el-checkbox v-model="syncMenuForm.delMenu" />
+            </el-form-item>
+            <el-form-item v-if="syncMenuForm.syncAll == false" label="商家账号">
+              <el-input v-model="syncMenuForm.syncBusinessUsername" maxlength="20" placeholder="请输入商家账号" />
+            </el-form-item>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="syncMenuDialog = false">取 消</el-button>
+          <el-button type="primary" :loading="loading" @click="submitSyncMenu('syncMenuForm')">确 定</el-button>
+        </span>
+      </el-dialog>
+  
+      <Icons :dialog-visible="iconVisible" @choose="chooseIcon" @close="iconVisible = false" />
     </div>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>
+  </template>
+  
+  <script>
+  import {
+    businessTabsGetAll,
+    businessTabsAdd,
+    businessTabsGetById,
+    businessTabsUpdate,
+    businessTabsDelete,
+    businessGetMaxSort,
+    businessSyncMenu
+  } from '@/api/setup'
+  import Icons from './Icons'
+  import { Message } from 'element-ui'
+  import FixedNav from '@/components/FixedNav/index.vue'
+  export default {
+    // import引入的组件需要注入到对象中才能使用
+    components: {
+      Icons,
+      FixedNav
+    },
+    data() {
+      // 这里存放数据
+      return {
+        formInline: {
+          permissionName: '', // 搜索字段
+          project: -2, // 权限类型: 0-商家菜单 -1-团长菜单 -2-合伙人菜单 -3-加盟商菜单 -4-代理商菜单
+          page: '1', // 当前页
+          pageSize: '10', // 每页记录数
+        },
+        total: 1,
+        tableData: [],
+        currentPage: 1,
+        userState: 1,
+        addForm: {
+          permissionPid: '', // 父节点id
+          permissionName: '', // 权限名称
+          permissionUri: '', // URI
+          permission: '', // 组件
+          icon: '', // 图标地址
+          describe: '', // 描述
+          resourceType: 'menu', // 权限类型 menu-菜单 button-按钮 catalog-目录
+          sort: '', // 排序值
+          project: -2
+        },
+        syncMenuForm: {
+          syncAll: false,
+          syncBusinessUsername: '',
+          delMenu: false
+        },
+        addFormDialog: false,
+        syncMenuDialog: false,
+        userRules: {
+          permissionName: [
+            { required: true, message: '请输入权限名称', trigger: 'blur' }
+          ],
+          permission: [
+            { required: true, message: '请输入菜单路径', trigger: 'blur' }
+          ],
+          resourceType: [
+            { required: true, message: '请选择活动区域', trigger: 'change' }
+          ],
+          sort: [ { required: true, message: '请输入菜单路径', trigger: 'blur' } ],
+          icon: [ { required: true, message: '请输入图标地址', trigger: 'blur' } ]
+        },
+        syncMenuRules: {},
+        iconVisible: false,
+        multipleSelection: [],
+        loading: false
+      }
+    },
+    mounted() {
+      this.getAll(this.formInline)
+    },
+    // 方法集合
+    methods: {
+      handleSelectionChange(val) {
+        // console.dir(this.$refs.menuList.selection)
+        // const sel = this.extract(val)
+        this.multipleSelection = val
+        // console.dir(this.$refs.menuList)
+      },
+      setChildren(children, type) {
+        // 编辑多个子层级
+        children.map((j) => {
+          this.toggleSelection(j, type)
+          if (j.childs) {
+            this.setChildren(j.childs, type)
+          }
+        })
+      },
+      // 选中父节点时，子节点一起选中取消
+      select(selection, row) {
+        if (selection.some((el) => row.permissionId === el.permissionId)) {
+          if (row.childs) {
+            // row.childList.map(j => {
+            //     this.toggleSelection(j, true)
+            // })
+            // 解决子组件没有被勾选到
+            this.setChildren(row.childs, true)
+          }
+        } else if (row.childs) {
+          // row.childList.map(j => {
+          //     this.toggleSelection(j, false)
+          // })
+          this.setChildren(row.childs, false)
+        }
+      },
+      toggleSelection(row, select) {
+        if (row) {
+          this.$nextTick(() => {
+            this.$refs.menuList && this.$refs.menuList.toggleRowSelection(row, select)
+          })
+        }
+      },
+      // 选择全部
+      selectAll(selection) {
+        // tabledata第一层只要有在selection里面就是全选
+        const isSelect = selection.some((el) => {
+          const tableDataIds = this.tableData.map((j) => j.permissionId)
+          return tableDataIds.includes(el.permissionId)
+        })
+        // tableDate第一层只要有不在selection里面就是全不选
+        const isCancel = !this.tableData.every((el) => {
+          const selectIds = selection.map((j) => j.permissionId)
+          return selectIds.includes(el.permissionId)
+        })
+        console.log(isSelect, 'isSelect')
+        if (isSelect) {
+          selection.map((el) => {
+            if (el.childs) {
+              // el.childList.map(j => {
+              //     this.toggleSelection(j, true)
+              // })
+              // 解决子组件没有被勾选到
+              this.setChildren(el.childs, true)
+            }
+          })
+        }
+        if (isCancel) {
+          this.tableData.map((el) => {
+            if (el.childs) {
+              // el.childList.map(j => {
+              //     this.toggleSelection(j, false)
+              // })
+              // 解决子组件没有被勾选到
+              this.setChildren(el.childs, false)
+            }
+          })
+        }
+        this.$emit('handleSelect', this.tableData)
+      },
+      handleSizeChange(val) {
+        this.formInline.pageSize = val
+        this.getAll(this.formInline)
+      },
+      handleCurrentChange(val) {
+        this.formInline.page = val
+        this.getAll(this.formInline)
+      },
+      // 查询
+      search() {
+        this.total = 1
+        this.formInline.page = 1
+        this.getAll(this.formInline)
+      },
+      // 清除
+      clear() {
+        this.formInline = {
+          permissionName: '', // 搜索字段
+          page: '1', // 当前页
+          pageSize: '10', // 每页记录数
+          project: -2
+        }
+        this.getAll(this.formInline)
+      },
+      // 新增角色
+      add(index) {
+        this.userState = 1
+        businessGetMaxSort().then((res) => {
+          if (index === 1) {
+            if (this.multipleSelection.length >= 1) {
+              this.$message({
+                message: '请勿选择节点进行操作'
+              })
+              return
+            }
+            this.addForm = {
+              permissionPid: '', // 父节点id
+              permissionName: '', // 权限名称
+              permissionUri: '', // URI
+              permission: '', // 组件
+              icon: '', // 图标地址
+              describe: '', // 描述
+              resourceType: 'catalog', // 权限类型 menu-菜单 button-按钮 catalog-目录
+              sort: parseInt(res.data), // 排序值
+              project: -2
+            }
+            this.addFormDialog = true
+          } else if (index === 2) {
+            if (this.multipleSelection.length === 0) {
+              this.$message({
+                message: '请选择父节点'
+              })
+              return
+            }
+            if (this.multipleSelection[0].permissionPid !== 0) {
+              this.$message({
+                message: '请选择父节点进行操作'
+              })
+              return
+            }
+            this.addForm = {
+              permissionPid: this.multipleSelection[0].permissionId, // 父节点id
+              permissionName: '', // 权限名称
+              permissionUri: '', // URI
+              permission: '', // 组件
+              icon: '', // 图标地址
+              describe: '', // 描述
+              resourceType: 'menu', // 权限类型 menu-菜单 button-按钮 catalog-目录
+              sort: parseInt(res.data), // 排序值
+              project: -2
+            }
+            this.addFormDialog = true
+          } else if (index === 3) {
+            if (this.multipleSelection.length === 0) {
+              this.$message({
+                message: '请选择子节点'
+              })
+              return
+            }
+            if (
+              this.multipleSelection[0].permissionPid === 0 &&
+              this.multipleSelection[0].childs.length !== 0
+            ) {
+              this.$message({
+                message: '请勿选择父节点进行操作'
+              })
+              return
+            }
+            this.addForm = {
+              permissionPid: this.multipleSelection[0].permissionId, // 父节点id
+              permissionName: '', // 权限名称
+              permissionUri: '', // URI
+              permission: '', // 组件
+              icon: 'el-icon-minus', // 图标地址
+              describe: '', // 描述
+              resourceType: 'button', // 权限类型 menu-菜单 button-按钮 catalog-目录
+              sort: parseInt(res.data), // 排序值
+              project: -2
+            }
+            this.addFormDialog = true
+          }
+        })
+      },
+      syncMenu() {
+        if (this.multipleSelection.length === 0) {
+          this.$message({
+            message: '请选择要同步的节点'
+          })
+          return
+        }
+        this.syncMenuForm.syncAll = true
+        this.syncMenuForm.syncBusinessUsername = ''
+        this.syncMenuForm.delMenu = false
+        this.syncMenuDialog = true
+      },
+      submitSyncMenu(syncMenuForm) {
+        const that = this
+        this.$refs[syncMenuForm].validate((valid) => {
+          if (valid) {
+            if (that.syncMenuForm.syncAll === false && that.syncMenuForm.syncBusinessUsername === '') {
+              this.$message({
+                message: '请输入要同步的商家账号'
+              })
+              return
+            }
+            this.loading = true
+            businessSyncMenu(Object.assign({}, this.syncMenuForm, { syncMenu: this.multipleSelection })).then((res) => {
+              if (res.code === '') {
+                this.$message({
+                  message: '同步成功',
+                  type: 'success'
+                })
+              }
+              this.loading = false
+              this.syncMenuDialog = false
+            })
+              .catch((error) => {
+                if (error && error.message.includes('timeout')) {
+                  Message({
+                    message: '后台正在异步处理，请关注商家端菜单变化',
+                    type: 'error',
+                    duration: 2 * 1000
+                  })
+                }
+                this.loading = false
+                this.syncMenuDialog = false
+              })
+          }
+        })
+      },
+      // 确认新增角色
+      addForm_enter(ruleForm) {
+        this.$refs[ruleForm].validate((valid) => {
+          if (valid) {
+            if (this.userState) {
+              businessTabsAdd(this.addForm).then((res) => {
+                if (res.code === '') {
+                  this.$message({
+                    message: '新增成功',
+                    type: 'success'
+                  })
+                }
+                this.getAll(this.formInline)
+                this.addFormDialog = false
+              })
+            } else {
+              businessTabsUpdate(this.addForm).then((res) => {
+                if (res.code === '') {
+                  this.$message({
+                    message: '修改成功',
+                    type: 'success'
+                  })
+                }
+                this.getAll(this.formInline)
+                this.addFormDialog = false
+              })
+            }
+          } else {
+            console.log('error submit!!')
+            return false
+          }
+        })
+      },
+      // 编辑角色
+      edit(row) {
+        this.userState = 0
+        this.addFormDialog = true
+        businessTabsGetById({ permissionId: row.permissionId }).then((res) => {
+          this.addForm = res.data
+          // this.addForm.roleIds = [1];
+        })
+      },
+      // 删除角色
+      async del(row) {
+        const res = await businessTabsDelete({ permissionId: row.permissionId })
+        if (res.code === '') {
+          this.$message({
+            message: '删除成功',
+            type: 'success'
+          })
+        }
+        this.getAll(this.formInline)
+      },
+      // 组件传回值
+      chooseIcon(icon) {
+        this.addForm.icon = icon
+        this.iconVisible = false
+      },
+      getFocus() {
+        this.iconVisible = true
+      },
+      // 初始化查询所有数据
+      async getAll(formInline) {
+        const res = await businessTabsGetAll(formInline)
+        this.tableData = res.data.list
+        this.total = res.data.total
+      }
+    }
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+  //@import url(); 引入公共css类
+  @import url("../../../styles/elDialog.scss");
+  
+  .userStyleMenus {
+      .formSearch {
+          padding: 20px 30px;
+          display: flex;
+  
+          .searchInput {
+              margin-right: 20px;
+              display: flex;
+              align-items: center;
+  
+              span {
+                  min-width: 80px;
+              }
+          }
+      }
+  
+      .tableBox {
+          margin: 0 20px 20px;
+      }
+  }
+  </style>
+  

src/views/setup/teamMenus/Icons.vue

@@ -0,0 +1,587 @@
+<template>
+  <el-dialog :close-on-click-modal="false" title="icon" :visible.sync="isVisible" :width="width" top="50px" center>
+    <el-input
+      v-model="name" maxlength="20" class="filter-item search-item" clearable
+      placeholder="icon"
+      @keyup.native="searchIcon"
+    />
+    <el-tabs v-model="activeName" style="margin-top: -1rem">
+      <el-tab-pane label="通用类" name="first">
+        <ul>
+          <li v-for="icon in icons.commonIcons" :key="icon" class="icons-item">
+            <span :class="{ active: activeIndex === icon }">
+              <el-icon :class="icon" :title="icon" @click.native="chooseIcon(icon)" @dblclick.native="confirm" />
+            </span>
+            <p>{{ icon }}</p>
+          </li>
+        </ul>
+      </el-tab-pane>
+      <el-tab-pane label="指向性" name="second">
+        <ul>
+          <li v-for="icon in icons.directivityIcons" :key="icon">
+            <span :class="{ active: activeIndex === icon }">
+              <el-icon :class="icon" :title="icon" @click.native="chooseIcon(icon)" @dblclick.native="confirm" />
+            </span>
+            <p>{{ icon }}</p>
+          </li>
+        </ul>
+      </el-tab-pane>
+      <el-tab-pane label="填充类" name="third">
+        <ul>
+          <li v-for="icon in icons.solidIcons" :key="icon">
+            <span :class="{ active: activeIndex === icon }">
+              <el-icon :class="icon" :title="icon" @click.native="chooseIcon(icon)" @dblclick.native="confirm" />
+            </span>
+            <p>{{ icon }}</p>
+          </li>
+        </ul>
+      </el-tab-pane>
+      <el-tab-pane label="食品类" name="fourth">
+        <ul>
+          <li v-for="icon in icons.foodIcons" :key="icon">
+            <span :class="{ active: activeIndex === icon }">
+              <el-icon :class="icon" :title="icon" @click.native="chooseIcon(icon)" @dblclick.native="confirm" />
+            </span>
+            <p>{{ icon }}</p>
+          </li>
+        </ul>
+      </el-tab-pane>
+      <el-tab-pane label="自定义" name="fifth">
+        <ul>
+          <li v-for="icon in icons.customIcons" :key="icon">
+            <span :class="{ active: activeIndex === icon }">
+              <el-icon :class="icon" :title="icon" @click.native="chooseIcon(icon)" @dblclick.native="confirm" />
+            </span>
+            <p>{{ icon }}</p>
+          </li>
+        </ul>
+      </el-tab-pane>
+    </el-tabs>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="isVisible = false"> 取消 </el-button>
+      <el-button type="primary" @click="confirm"> 确定 </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+const commonIcons = [
+  'el-icon-eleme',
+  'el-icon-delete',
+  'el-icon-setting',
+  'el-icon-user',
+  'el-icon-phone-outline',
+  'el-icon-more-outline',
+  'el-icon-star-off',
+  'el-icon-goods',
+  'el-icon-warning-outline',
+  'el-icon-zoom-in',
+  'el-icon-zoom-out',
+  'el-icon-remove-outline',
+  'el-icon-circle-plus-outline',
+  'el-icon-circle-check',
+  'el-icon-circle-close',
+  'el-icon-help',
+  'el-icon-minus',
+  'el-icon-plus',
+  'el-icon-check',
+  'el-icon-close',
+  'el-icon-picture-outline',
+  'el-icon-picture-outline-round',
+  'el-icon-upload2',
+  'el-icon-download',
+  'el-icon-camera',
+  'el-icon-video-camera',
+  'el-icon-bell',
+  'el-icon-video-pause',
+  'el-icon-video-play',
+  'el-icon-refresh',
+  'el-icon-refresh-right',
+  'el-icon-refresh-left',
+  'el-icon-finished',
+  'el-icon-loading',
+  'el-icon-view',
+  'el-icon-c-scale-to-original',
+  'el-icon-date',
+  'el-icon-edit',
+  'el-icon-edit-outline',
+  'el-icon-folder',
+  'el-icon-folder-opened',
+  'el-icon-folder-add',
+  'el-icon-folder-remove',
+  'el-icon-folder-delete',
+  'el-icon-folder-checked',
+  'el-icon-tickets',
+  'el-icon-document-remove',
+  'el-icon-document-delete',
+  'el-icon-document-copy',
+  'el-icon-document-checked',
+  'el-icon-document',
+  'el-icon-document-add',
+  'el-icon-printer',
+  'el-icon-paperclip',
+  'el-icon-takeaway-box',
+  'el-icon-search',
+  'el-icon-monitor',
+  'el-icon-attract',
+  'el-icon-mobile',
+  'el-icon-scissors',
+  'el-icon-umbrella',
+  'el-icon-headset',
+  'el-icon-brush',
+  'el-icon-mouse',
+  'el-icon-coordinate',
+  'el-icon-magic-stick',
+  'el-icon-reading',
+  'el-icon-data-line',
+  'el-icon-data-board',
+  'el-icon-pie-chart',
+  'el-icon-data-analysis',
+  'el-icon-collection-tag',
+  'el-icon-film',
+  'el-icon-suitcase',
+  'el-icon-suitcase-1',
+  'el-icon-receiving',
+  'el-icon-collection',
+  'el-icon-files',
+  'el-icon-notebook-1',
+  'el-icon-notebook-2',
+  'el-icon-toilet-paper',
+  'el-icon-office-building',
+  'el-icon-school',
+  'el-icon-table-lamp',
+  'el-icon-house',
+  'el-icon-no-smoking',
+  'el-icon-smoking',
+  'el-icon-shopping-cart-full',
+  'el-icon-shopping-cart-1',
+  'el-icon-shopping-cart-2',
+  'el-icon-shopping-bag-1',
+  'el-icon-shopping-bag-2',
+  'el-icon-sold-out',
+  'el-icon-sell',
+  'el-icon-present',
+  'el-icon-box',
+  'el-icon-bank-card',
+  'el-icon-money',
+  'el-icon-coin',
+  'el-icon-wallet',
+  'el-icon-discount',
+  'el-icon-price-tag',
+  'el-icon-news',
+  'el-icon-guide',
+  'el-icon-male',
+  'el-icon-female',
+  'el-icon-thumb',
+  'el-icon-cpu',
+  'el-icon-link',
+  'el-icon-connection',
+  'el-icon-open',
+  'el-icon-turn-off',
+  'el-icon-set-up',
+  'el-icon-chat-round',
+  'el-icon-chat-line-round',
+  'el-icon-chat-square',
+  'el-icon-chat-dot-round',
+  'el-icon-chat-dot-square',
+  'el-icon-chat-line-square',
+  'el-icon-message',
+  'el-icon-postcard',
+  'el-icon-position',
+  'el-icon-turn-off-microphone',
+  'el-icon-microphone',
+  'el-icon-close-notification',
+  'el-icon-bangzhu',
+  'el-icon-time',
+  'el-icon-odometer',
+  'el-icon-crop',
+  'el-icon-aim',
+  'el-icon-switch-button',
+  'el-icon-full-screen',
+  'el-icon-copy-document',
+  'el-icon-mic',
+  'el-icon-stopwatch',
+  'el-icon-medal-1',
+  'el-icon-medal',
+  'el-icon-trophy',
+  'el-icon-trophy-1',
+  'el-icon-first-aid-kit',
+  'el-icon-discover',
+  'el-icon-place',
+  'el-icon-location-outline',
+  'el-icon-location-information',
+  'el-icon-add-location',
+  'el-icon-delete-location',
+  'el-icon-map-location',
+  'el-icon-alarm-clock',
+  'el-icon-timer',
+  'el-icon-watch-1',
+  'el-icon-watch',
+  'el-icon-lock',
+  'el-icon-unlock',
+  'el-icon-key',
+  'el-icon-service',
+  'el-icon-mobile-phone',
+  'el-icon-bicycle',
+  'el-icon-truck',
+  'el-icon-ship',
+  'el-icon-basketball',
+  'el-icon-football',
+  'el-icon-soccer',
+  'el-icon-baseball'
+]
+const directivityIcons = [
+  'el-icon-d-caret',
+  'el-icon-caret-left',
+  'el-icon-caret-right',
+  'el-icon-caret-bottom',
+  'el-icon-caret-top',
+  'el-icon-bottom-left',
+  'el-icon-bottom-right',
+  'el-icon-back',
+  'el-icon-right',
+  'el-icon-bottom',
+  'el-icon-top',
+  'el-icon-top-left',
+  'el-icon-top-right',
+  'el-icon-arrow-left',
+  'el-icon-arrow-right',
+  'el-icon-arrow-down',
+  'el-icon-arrow-up',
+  'el-icon-d-arrow-left',
+  'el-icon-d-arrow-right',
+  'el-icon-sort',
+  'el-icon-sort-up',
+  'el-icon-sort-down',
+  'el-icon-rank'
+]
+const solidIcons = [
+  'el-icon-question',
+  'el-icon-info',
+  'el-icon-remove',
+  'el-icon-circle-plus',
+  'el-icon-success',
+  'el-icon-error',
+  'el-icon-platform-eleme',
+  'el-icon-delete-solid',
+  'el-icon-s-tools',
+  'el-icon-user-solid',
+  'el-icon-phone',
+  'el-icon-star-on',
+  'el-icon-s-goods',
+  'el-icon-warning',
+  'el-icon-s-help',
+  'el-icon-picture',
+  'el-icon-upload',
+  'el-icon-camera-solid',
+  'el-icon-video-camera-solid',
+  'el-icon-message-solid',
+  'el-icon-s-cooperation',
+  'el-icon-s-order',
+  'el-icon-s-platform',
+  'el-icon-s-fold',
+  'el-icon-s-unfold',
+  'el-icon-s-operation',
+  'el-icon-s-promotion',
+  'el-icon-s-home',
+  'el-icon-s-release',
+  'el-icon-s-ticket',
+  'el-icon-s-management',
+  'el-icon-s-open',
+  'el-icon-s-shop',
+  'el-icon-s-marketing',
+  'el-icon-s-flag',
+  'el-icon-s-comment',
+  'el-icon-s-finance',
+  'el-icon-s-claim',
+  'el-icon-s-custom',
+  'el-icon-s-opportunity',
+  'el-icon-s-data',
+  'el-icon-s-check',
+  'el-icon-s-grid',
+  'el-icon-menu',
+  'el-icon-share',
+  'el-icon-d-caret',
+  'el-icon-caret-left',
+  'el-icon-caret-right',
+  'el-icon-caret-bottom',
+  'el-icon-caret-top',
+  'el-icon-location'
+]
+const foodIcons = [
+  'el-icon-dish',
+  'el-icon-dish-1',
+  'el-icon-food',
+  'el-icon-chicken',
+  'el-icon-fork-spoon',
+  'el-icon-knife-fork',
+  'el-icon-burger',
+  'el-icon-tableware',
+  'el-icon-sugar',
+  'el-icon-dessert',
+  'el-icon-ice-cream',
+  'el-icon-hot-water',
+  'el-icon-water-cup',
+  'el-icon-coffee-cup',
+  'el-icon-cold-drink',
+  'el-icon-goblet',
+  'el-icon-goblet-full',
+  'el-icon-goblet-square',
+  'el-icon-goblet-square-full',
+  'el-icon-refrigerator',
+  'el-icon-grape',
+  'el-icon-watermelon',
+  'el-icon-cherry',
+  'el-icon-apple',
+  'el-icon-pear',
+  'el-icon-orange',
+  'el-icon-coffee',
+  'el-icon-ice-tea',
+  'el-icon-ice-drink',
+  'el-icon-milk-tea',
+  'el-icon-potato-strips',
+  'el-icon-lollipop',
+  'el-icon-ice-cream-square',
+  'el-icon-ice-cream-round'
+]
+const customIcons = [
+  'zk-icon-activity',
+  'zk-icon-binding',
+  'zk-icon-cash',
+  'zk-icon-client-list',
+  'zk-icon-commodity-group',
+  'zk-icon-commodity-set',
+  'zk-icon-coupon',
+  'zk-icon-customer-details',
+  'zk-icon-discount',
+  'zk-icon-finance',
+  'zk-icon-finance-details',
+  'zk-icon-generalize',
+  'zk-icon-group-booking',
+  'zk-icon-label',
+  'zk-icon-logistics-set',
+  'zk-icon-management-customer',
+  'zk-icon-management-rule',
+  'zk-icon-management-server',
+  'zk-icon-marketing',
+  'zk-icon-material',
+  'zk-icon-member',
+  'zk-icon-menu',
+  'zk-icon-operation-plan',
+  'zk-icon-operation-plan2',
+  'zk-icon-order',
+  'zk-icon-pending-order',
+  'zk-icon-Price-bundling',
+  'zk-icon-sales-order',
+  'zk-icon-scene',
+  'zk-icon-seckill',
+  'zk-icon-segmentation',
+  'zk-icon-setting',
+  'zk-icon-shop-decoration',
+  'zk-icon-spell-group',
+  'zk-icon-store',
+  'zk-icon-store-set',
+  'zk-icon-system',
+  'zk-icon-user',
+  'zk-icon-wallet'
+
+]
+export default {
+  name: 'Icons',
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      name: '',
+      icons: {
+        commonIcons,
+        directivityIcons,
+        solidIcons,
+        foodIcons,
+        customIcons
+      },
+      activeIndex: '',
+      choosedIcon: '',
+      activeName: 'first',
+      screenWidth: 0,
+      width: this.initWidth()
+    }
+  },
+  computed: {
+    isVisible: {
+      get() {
+        return this.dialogVisible
+      },
+      set() {
+        this.close()
+      }
+    }
+  },
+  mounted() {
+    window.onresize = () => (() => {
+      this.width = this.initWidth()
+    })()
+  },
+  methods: {
+    initWidth() {
+      this.screenWidth = document.body.clientWidth
+      if (this.screenWidth < 991) {
+        return '90%'
+      } else if (this.screenWidth < 1400) {
+        return '60%'
+      }
+      return '800px'
+    },
+    close() {
+      this.$emit('close')
+      this.activeName = 'first'
+      this.choosedIcon = this.activeIndex = ''
+    },
+    chooseIcon(icon) {
+      console.log(icon)
+      this.activeIndex = icon
+      this.choosedIcon = icon
+    },
+    confirm() {
+      if (!this.choosedIcon) {
+        this.$message({
+          message: '请选择图标',
+          type: 'warning'
+        })
+        return
+      }
+      this.$emit('choose', this.choosedIcon)
+      this.activeName = 'first'
+      this.choosedIcon = this.activeIndex = ''
+    },
+    searchIcon() {
+      if (this.name.trim() === '') {
+        this.icons.commonIcons = commonIcons
+        this.icons.directivityIcons = directivityIcons
+        this.icons.solidIcons = solidIcons
+        this.icons.foodIcons = foodIcons
+        this.icons.customIcons = customIcons
+        this.activeName = 'first'
+      }
+      const commonList = commonIcons.filter((item) => item.indexOf(this.name) !== -1)
+      const directivityList = directivityIcons.filter((item) => item.indexOf(this.name) !== -1)
+      const solidList = solidIcons.filter((item) => item.indexOf(this.name) !== -1)
+      const foodIconsList = foodIcons.filter((item) => item.indexOf(this.name) !== -1)
+      const customIcons = customIcons.filter((item) => item.indexOf(this.name) !== -1)
+
+      this.icons.commonIcons = commonList
+      this.icons.directivityIcons = directivityList
+      this.icons.solidIcons = solidList
+      this.icons.foodIcons = foodIconsList
+      this.icons.customIcons = customIcons
+
+      if (commonList.length > 0) {
+        this.activeName = 'first'
+        return
+      }
+
+      if (directivityList.length > 0) {
+        this.activeName = 'second'
+        return
+      }
+
+      if (solidList.length > 0) {
+        this.activeName = 'third'
+        return
+      }
+
+      if (foodIconsList.length > 0) {
+        this.activeName = 'fourth'
+        return
+      }
+
+      if (customIcons.length > 0) {
+        this.activeName = 'fifth'
+        return
+      }
+
+      this.activeName = 'first'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.search-item {
+	margin: 0px 0 10px;
+}
+
+ul {
+	// overflow-y: auto;
+	// padding-left: 0rem;
+	// margin-top: 0rem;
+	padding: 0;
+	margin: 0;
+	overflow: auto;
+	zoom: 1;
+	height: 500px;
+
+	li {
+		// list-style: none;
+		// float: left;
+		// width: 60px;
+		// text-align: center;
+		// cursor: pointer;
+		// color: #555;
+		// transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+		// position: relative;
+		// // margin: 3px 0;
+		// border-radius: 4px;
+		// background-color: #fff;
+		// overflow: hidden;
+		padding: 0;
+		float: left;
+		margin: 2px;
+		width: 100px;
+		text-align: center;
+		list-style: none;
+		cursor: pointer;
+		color: #5c6b77;
+		transition: all 0.2s ease;
+		position: relative;
+	}
+
+	span.active {
+		i {
+			border-radius: 2px;
+			border-color: #4a4a48;
+			background-color: #4a4a48;
+			color: #fff;
+			transition: all 0.3s;
+		}
+	}
+
+	i {
+		font-size: 1.7rem;
+		border: 1px solid #f1f1f1;
+		padding: 0.2rem;
+		margin: 0.3rem;
+		cursor: pointer;
+
+		&:hover {
+			border-radius: 2px;
+			border-color: #4a4a48;
+			background-color: #4a4a48;
+			color: #fff;
+			transition: all 0.3s;
+		}
+	}
+
+	li p {
+		word-break: break-all;
+		overflow: hidden;
+		margin: 2px 0;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+</style>

src/views/setup/teamMenus/index.vue

@@ -1,15 +1,523 @@
 <template>
-    <div class="teamMenus">
-        <h1>团长菜单</h1>
+    <div class="userStyleMenus">
+      <!-- 搜索 -->
+      <FixedNav class="formSearch" :height="200">
+        <div class="searchInput">
+          <span>菜单名：</span>
+          <el-input v-model="formInline.permissionName" maxlength="20" placeholder="请输入菜单名" />
+        </div>
+        <el-button type="primary" plain @click="search">查询</el-button>
+        <el-button type="info" plain @click="clear">重置</el-button>
+        <el-button type="success" plain @click="add(1)">新增父级目录</el-button>
+        <el-button type="success" plain @click="add(2)">新增子级菜单</el-button>
+        <el-button type="success" plain @click="add(3)">新增子级按钮</el-button>
+        <el-button type="success" plain @click="syncMenu()">同步菜单</el-button>
+      </FixedNav>
+      <!-- 表 格   default-expand-all -->
+      <div class="tableBox">
+        <el-table
+          ref="menuList" :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="permissionId"
+          border
+          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
+          :tree-props="{ children: 'childs', hasChildren: 'hasChildren' }" @select="select" @select-all="selectAll"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column prop="permissionName" label="菜单名称" />
+          <el-table-column label="图标">
+            <template slot-scope="scope">
+              <div>
+                <i :class="scope.row.icon" />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="permission" label="菜单标识" />
+          <el-table-column prop="createTime" label="创建时间" />
+          <el-table-column label="操作" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <div class="btnList">
+                <el-button type="text" @click="edit(scope.row)">编辑</el-button>
+                <el-button type="text" @click="del(scope.row)">删除</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="fenye">
+          <el-pagination
+            :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="10"
+            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </div>
+      </div>
+  
+      <!-- *************对话框开始************* -->
+      <el-dialog
+        :title="userState ? '新增菜单' : '修改菜单'" :visible.sync="addFormDialog" width="30%" center
+        :close-on-click-modal="false"
+      >
+        <!-- 新增角色 -->
+        <div>
+          <el-form ref="ruleForm" :model="addForm" label-width="80px" :rules="userRules">
+            <el-form-item label="父节点ID">
+              <el-input v-model="addForm.permissionPid" maxlength="20" :disabled="true" placeholder="请输入角色名称" />
+            </el-form-item>
+            <el-form-item label="菜单名称" prop="permissionName">
+              <el-input v-model="addForm.permissionName" maxlength="20" placeholder="请输入菜单名称" />
+            </el-form-item>
+            <el-form-item label="菜单路径" prop="permission">
+              <el-input v-model="addForm.permission" maxlength="100" placeholder="请输入菜单路径" />
+            </el-form-item>
+            <el-form-item label="图标地址" prop="icon">
+              <el-input v-model="addForm.icon" :prefix-icon="addForm.icon" placeholder="请输入图片地址" @focus="getFocus" />
+            </el-form-item>
+            <el-form-item label="菜单描述">
+              <el-input v-model="addForm.describe" maxlength="60" placeholder="请输入菜单描述" />
+            </el-form-item>
+            <el-form-item label="排序值" prop="sort">
+              <el-input
+                v-model="addForm.sort" maxlength="9" placeholder="请输入排序值"
+                oninput="value=value.replace(/[^\d]/g,'')"
+              />
+            </el-form-item>
+            <el-form-item label="权限类型" prop="resourceType">
+              <el-select v-model="addForm.resourceType" placeholder="请选择活动区域">
+                <el-option label="菜单" value="menu" />
+                <el-option label="按钮" value="button" />
+                <el-option label="目录" value="catalog" />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="addFormDialog = false">取 消</el-button>
+          <el-button type="primary" @click="addForm_enter('ruleForm')">确 定</el-button>
+        </span>
+      </el-dialog>
+  
+      <!-- *************同步菜单对话框开始************* -->
+      <el-dialog title="同步菜单" :visible.sync="syncMenuDialog" width="30%" center :close-on-click-modal="false">
+        <!-- 新增角色 -->
+        <div>
+          <el-form ref="syncMenuForm" :model="syncMenuForm" label-width="80px" :rules="syncMenuRules">
+            <el-form-item label="同步范围" prop="syncAll">
+              <el-radio-group v-model="syncMenuForm.syncAll">
+                <el-radio :label="true">同步所有</el-radio>
+                <el-radio :label="false">同步指定商家</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="删除菜单">
+              <el-checkbox v-model="syncMenuForm.delMenu" />
+            </el-form-item>
+            <el-form-item v-if="syncMenuForm.syncAll == false" label="商家账号">
+              <el-input v-model="syncMenuForm.syncBusinessUsername" maxlength="20" placeholder="请输入商家账号" />
+            </el-form-item>
+          </el-form>
+        </div>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="syncMenuDialog = false">取 消</el-button>
+          <el-button type="primary" :loading="loading" @click="submitSyncMenu('syncMenuForm')">确 定</el-button>
+        </span>
+      </el-dialog>
+  
+      <Icons :dialog-visible="iconVisible" @choose="chooseIcon" @close="iconVisible = false" />
     </div>
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>
+  </template>
+  
+  <script>
+  import {
+    businessTabsGetAll,
+    businessTabsAdd,
+    businessTabsGetById,
+    businessTabsUpdate,
+    businessTabsDelete,
+    businessGetMaxSort,
+    businessSyncMenu
+  } from '@/api/setup'
+  import Icons from './Icons'
+  import { Message } from 'element-ui'
+  import FixedNav from '@/components/FixedNav/index.vue'
+  export default {
+    // import引入的组件需要注入到对象中才能使用
+    components: {
+      Icons,
+      FixedNav
+    },
+    data() {
+      // 这里存放数据
+      return {
+        formInline: {
+          permissionName: '', // 搜索字段
+          project: -1, // 权限类型: 0-商家菜单 -1-团长菜单 -2-合伙人菜单 -3-加盟商菜单 -4-代理商菜单
+          page: '1', // 当前页
+          pageSize: '10', // 每页记录数
+        },
+        total: 1,
+        tableData: [],
+        currentPage: 1,
+        userState: 1,
+        addForm: {
+          permissionPid: '', // 父节点id
+          permissionName: '', // 权限名称
+          permissionUri: '', // URI
+          permission: '', // 组件
+          icon: '', // 图标地址
+          describe: '', // 描述
+          resourceType: 'menu', // 权限类型 menu-菜单 button-按钮 catalog-目录
+          sort: '', // 排序值
+          project: -1
+        },
+        syncMenuForm: {
+          syncAll: false,
+          syncBusinessUsername: '',
+          delMenu: false
+        },
+        addFormDialog: false,
+        syncMenuDialog: false,
+        userRules: {
+          permissionName: [
+            { required: true, message: '请输入权限名称', trigger: 'blur' }
+          ],
+          permission: [
+            { required: true, message: '请输入菜单路径', trigger: 'blur' }
+          ],
+          resourceType: [
+            { required: true, message: '请选择活动区域', trigger: 'change' }
+          ],
+          sort: [ { required: true, message: '请输入菜单路径', trigger: 'blur' } ],
+          icon: [ { required: true, message: '请输入图标地址', trigger: 'blur' } ]
+        },
+        syncMenuRules: {},
+        iconVisible: false,
+        multipleSelection: [],
+        loading: false
+      }
+    },
+    mounted() {
+      this.getAll(this.formInline)
+    },
+    // 方法集合
+    methods: {
+      handleSelectionChange(val) {
+        // console.dir(this.$refs.menuList.selection)
+        // const sel = this.extract(val)
+        this.multipleSelection = val
+        // console.dir(this.$refs.menuList)
+      },
+      setChildren(children, type) {
+        // 编辑多个子层级
+        children.map((j) => {
+          this.toggleSelection(j, type)
+          if (j.childs) {
+            this.setChildren(j.childs, type)
+          }
+        })
+      },
+      // 选中父节点时，子节点一起选中取消
+      select(selection, row) {
+        if (selection.some((el) => row.permissionId === el.permissionId)) {
+          if (row.childs) {
+            // row.childList.map(j => {
+            //     this.toggleSelection(j, true)
+            // })
+            // 解决子组件没有被勾选到
+            this.setChildren(row.childs, true)
+          }
+        } else if (row.childs) {
+          // row.childList.map(j => {
+          //     this.toggleSelection(j, false)
+          // })
+          this.setChildren(row.childs, false)
+        }
+      },
+      toggleSelection(row, select) {
+        if (row) {
+          this.$nextTick(() => {
+            this.$refs.menuList && this.$refs.menuList.toggleRowSelection(row, select)
+          })
+        }
+      },
+      // 选择全部
+      selectAll(selection) {
+        // tabledata第一层只要有在selection里面就是全选
+        const isSelect = selection.some((el) => {
+          const tableDataIds = this.tableData.map((j) => j.permissionId)
+          return tableDataIds.includes(el.permissionId)
+        })
+        // tableDate第一层只要有不在selection里面就是全不选
+        const isCancel = !this.tableData.every((el) => {
+          const selectIds = selection.map((j) => j.permissionId)
+          return selectIds.includes(el.permissionId)
+        })
+        console.log(isSelect, 'isSelect')
+        if (isSelect) {
+          selection.map((el) => {
+            if (el.childs) {
+              // el.childList.map(j => {
+              //     this.toggleSelection(j, true)
+              // })
+              // 解决子组件没有被勾选到
+              this.setChildren(el.childs, true)
+            }
+          })
+        }
+        if (isCancel) {
+          this.tableData.map((el) => {
+            if (el.childs) {
+              // el.childList.map(j => {
+              //     this.toggleSelection(j, false)
+              // })
+              // 解决子组件没有被勾选到
+              this.setChildren(el.childs, false)
+            }
+          })
+        }
+        this.$emit('handleSelect', this.tableData)
+      },
+      handleSizeChange(val) {
+        this.formInline.pageSize = val
+        this.getAll(this.formInline)
+      },
+      handleCurrentChange(val) {
+        this.formInline.page = val
+        this.getAll(this.formInline)
+      },
+      // 查询
+      search() {
+        this.total = 1
+        this.formInline.page = 1
+        this.getAll(this.formInline)
+      },
+      // 清除
+      clear() {
+        this.formInline = {
+          permissionName: '', // 搜索字段
+          page: '1', // 当前页
+          pageSize: '10', // 每页记录数
+          project: -1
+        }
+        this.getAll(this.formInline)
+      },
+      // 新增角色
+      add(index) {
+        this.userState = 1
+        businessGetMaxSort().then((res) => {
+          if (index === 1) {
+            if (this.multipleSelection.length >= 1) {
+              this.$message({
+                message: '请勿选择节点进行操作'
+              })
+              return
+            }
+            this.addForm = {
+              permissionPid: '', // 父节点id
+              permissionName: '', // 权限名称
+              permissionUri: '', // URI
+              permission: '', // 组件
+              icon: '', // 图标地址
+              describe: '', // 描述
+              resourceType: 'catalog', // 权限类型 menu-菜单 button-按钮 catalog-目录
+              sort: parseInt(res.data), // 排序值
+              project: -1
+            }
+            this.addFormDialog = true
+          } else if (index === 2) {
+            if (this.multipleSelection.length === 0) {
+              this.$message({
+                message: '请选择父节点'
+              })
+              return
+            }
+            if (this.multipleSelection[0].permissionPid !== 0) {
+              this.$message({
+                message: '请选择父节点进行操作'
+              })
+              return
+            }
+            this.addForm = {
+              permissionPid: this.multipleSelection[0].permissionId, // 父节点id
+              permissionName: '', // 权限名称
+              permissionUri: '', // URI
+              permission: '', // 组件
+              icon: '', // 图标地址
+              describe: '', // 描述
+              resourceType: 'menu', // 权限类型 menu-菜单 button-按钮 catalog-目录
+              sort: parseInt(res.data), // 排序值
+              project: -1
+            }
+            this.addFormDialog = true
+          } else if (index === 3) {
+            if (this.multipleSelection.length === 0) {
+              this.$message({
+                message: '请选择子节点'
+              })
+              return
+            }
+            if (
+              this.multipleSelection[0].permissionPid === 0 &&
+              this.multipleSelection[0].childs.length !== 0
+            ) {
+              this.$message({
+                message: '请勿选择父节点进行操作'
+              })
+              return
+            }
+            this.addForm = {
+              permissionPid: this.multipleSelection[0].permissionId, // 父节点id
+              permissionName: '', // 权限名称
+              permissionUri: '', // URI
+              permission: '', // 组件
+              icon: 'el-icon-minus', // 图标地址
+              describe: '', // 描述
+              resourceType: 'button', // 权限类型 menu-菜单 button-按钮 catalog-目录
+              sort: parseInt(res.data), // 排序值
+              project: -1
+            }
+            this.addFormDialog = true
+          }
+        })
+      },
+      syncMenu() {
+        if (this.multipleSelection.length === 0) {
+          this.$message({
+            message: '请选择要同步的节点'
+          })
+          return
+        }
+        this.syncMenuForm.syncAll = true
+        this.syncMenuForm.syncBusinessUsername = ''
+        this.syncMenuForm.delMenu = false
+        this.syncMenuDialog = true
+      },
+      submitSyncMenu(syncMenuForm) {
+        const that = this
+        this.$refs[syncMenuForm].validate((valid) => {
+          if (valid) {
+            if (that.syncMenuForm.syncAll === false && that.syncMenuForm.syncBusinessUsername === '') {
+              this.$message({
+                message: '请输入要同步的商家账号'
+              })
+              return
+            }
+            this.loading = true
+            businessSyncMenu(Object.assign({}, this.syncMenuForm, { syncMenu: this.multipleSelection })).then((res) => {
+              if (res.code === '') {
+                this.$message({
+                  message: '同步成功',
+                  type: 'success'
+                })
+              }
+              this.loading = false
+              this.syncMenuDialog = false
+            })
+              .catch((error) => {
+                if (error && error.message.includes('timeout')) {
+                  Message({
+                    message: '后台正在异步处理，请关注商家端菜单变化',
+                    type: 'error',
+                    duration: 2 * 1000
+                  })
+                }
+                this.loading = false
+                this.syncMenuDialog = false
+              })
+          }
+        })
+      },
+      // 确认新增角色
+      addForm_enter(ruleForm) {
+        this.$refs[ruleForm].validate((valid) => {
+          if (valid) {
+            if (this.userState) {
+              businessTabsAdd(this.addForm).then((res) => {
+                if (res.code === '') {
+                  this.$message({
+                    message: '新增成功',
+                    type: 'success'
+                  })
+                }
+                this.getAll(this.formInline)
+                this.addFormDialog = false
+              })
+            } else {
+              businessTabsUpdate(this.addForm).then((res) => {
+                if (res.code === '') {
+                  this.$message({
+                    message: '修改成功',
+                    type: 'success'
+                  })
+                }
+                this.getAll(this.formInline)
+                this.addFormDialog = false
+              })
+            }
+          } else {
+            console.log('error submit!!')
+            return false
+          }
+        })
+      },
+      // 编辑角色
+      edit(row) {
+        this.userState = 0
+        this.addFormDialog = true
+        businessTabsGetById({ permissionId: row.permissionId }).then((res) => {
+          this.addForm = res.data
+          // this.addForm.roleIds = [1];
+        })
+      },
+      // 删除角色
+      async del(row) {
+        const res = await businessTabsDelete({ permissionId: row.permissionId })
+        if (res.code === '') {
+          this.$message({
+            message: '删除成功',
+            type: 'success'
+          })
+        }
+        this.getAll(this.formInline)
+      },
+      // 组件传回值
+      chooseIcon(icon) {
+        this.addForm.icon = icon
+        this.iconVisible = false
+      },
+      getFocus() {
+        this.iconVisible = true
+      },
+      // 初始化查询所有数据
+      async getAll(formInline) {
+        const res = await businessTabsGetAll(formInline)
+        this.tableData = res.data.list
+        this.total = res.data.total
+      }
+    }
+  }
+  </script>
+  
+  <style lang='scss' scoped>
+  //@import url(); 引入公共css类
+  @import url("../../../styles/elDialog.scss");
+  
+  .userStyleMenus {
+      .formSearch {
+          padding: 20px 30px;
+          display: flex;
+  
+          .searchInput {
+              margin-right: 20px;
+              display: flex;
+              align-items: center;
+  
+              span {
+                  min-width: 80px;
+              }
+          }
+      }
+  
+      .tableBox {
+          margin: 0 20px 20px;
+      }
+  }
+  </style>
+  

vue.config.js

@@ -41,8 +41,8 @@ module.exports = {
     // before: require('./mock/mock-server.js'),
     proxy: {
       '/api': {
-        target: 'https://nsadminapi.tuanfengkeji.cn', // 测试
-        // target: 'http://192.168.0.91:9103', // 平台端
+        // target: 'https://nsadminapi.tuanfengkeji.cn', // 测试
+        target: 'http://192.168.0.91:9103', // 平台端
         // target: 'http://192.168.0.91:9003', // 商家端
         changeOrigin: true,
         pathRewrite: {