add: 页面添加

src/components/company/add-relatecopy.vue

+<!--
+ * @Descripttion : 当前组件信息
+ * @Author       : 无尘
+ * @Date         : 2020-02-13 16:13:59
+ * @LastEditors: Drama
+ * @LastEditTime: 2022-09-15 13:33:03
+ * @FilePath: /haoban-3/src/components/company/add-relatecopy.vue
+ -->
+<!--
+
+  <add-relate :departObj="departObj" @refreshData="refreshData"></add-relate>
+  import addRelate from '@/components/company/add-relate.vue';
+  -->
+
+<template>
+  <el-dialog custom-class="add-remote-dialog" width="600px" title="新增关联" :visible.sync="departVisible" append-to-body :before-close="handleClose">
+    <el-form :model="partForm" label-width="95px" :rules="rules" ref="partForm" class="dialog-form">
+      <!-- <el-form-item label="" prop="salerName">
+        <el-popover placement="bottom" title="" width="457" v-model="visible">
+          <div class="daily-store-select">
+            <div class="select-search">
+              <el-input placeholder="请输入code/手机号搜索进行账号关联" clearable maxlength="40" v-model="searchSelect" style="width: 100%" prefix-icon="el-icon-search" @keyup.native="(value) => toInput(value, searchSelect)" @clear="clearSearch"> </el-input>
+            </div>
+            <div class="el-scrollbar define-search-select">
+              <div class="el-select-dropdown__wrap el-scrollbar__wrap" style="margin-bottom: -5px; margin-right: -5px">
+                <ul class="el-scrollbar__view el-select-dropdown__list">
+                  <li :class="['el-select-dropdown__item', item.clerkId == selectId ? 'selected hover' : '']" v-for="item in storeData" :key="item.clerkId" @click="checkStore(item)">
+                    <div class="flex flex-space-between">
+                      <div style="line-height: 26px">
+                        <span class="block text-ellipsis">{{ item.clerkName }}（{{ item.clerkCode }}）</span>
+                        <div class="text-ellipsis font-12 color-909399">{{ item.storeName || '--' }}</div>
+                      </div>
+                      <span v-if="item.clerkId == selectId" class="font-12 color-2f54eb el-icon-check flex-align-center" style="display: flex"></span>
+                      <span v-if="item.relationStatus == 1" class="font-12 color-909399">已添加不能关联</span><el-button v-if="item.relationStatus == 1" class="m-l-10" type="text" @click.stop="toUnbind(item)">解绑</el-button>
+                    </div>
+                  </li>
+                  <li v-if="!storeData.length" class="text-center"><span>暂无数据</span></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="show-select-num cursor-pointer w-558" slot="reference">
+            <div>{{ partForm.salerName }} <span v-if="!partForm.salerName" class="font-14 color-c0c4cc">请输入code/手机号搜索进行账号关联</span></div>
+          </div>
+        </el-popover>
+      </el-form-item> -->
+      <el-form-item label="关联角色" prop="glrole">
+        <el-radio-group v-model="partForm.glrole">
+          <el-radio :label="1">导购</el-radio>
+          <el-radio :label="2">区经/督导</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="关联账号" prop="clerkId" class="test-wrap">
+        <dm-select-scroller v-model="partForm.clerkId" placeholder="请选择" :data="brandList" :props="props" :width="352" @load="load" @remote-search="remoteSearch" :total-count="totalCount" :clearable="true"></dm-select-scroller>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button class="btn-class" @click="cancel">取消</el-button>
+      <el-button class="btn-class" type="primary" :loading="loading" @click="submitForm('partForm')">确定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+import limitInput from '@/components/limit-input.vue';
+import { getRequest, postRequest } from '@/api/api';
+import errMsg from '@/common/js/error';
+import showMsg from '@/common/js/showmsg';
+import { _debounce } from '@/common/js/public';
+export default {
+  name: 'add-relate',
+  components: {
+    limitInput
+  },
+  props: {
+    departObj: {
+      type: [Object, Array],
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      partForm: {
+        salerName: '',
+        glrole: 1, // TODO: 关联角色 导购 区经/督导
+        clerkId: ''
+      },
+      brandParams: {
+        pageNum: 1,
+        pageSize: 10,
+        search: ''
+      }, // TODO: 远程搜索参数
+      rules: {
+        salerName: [
+          {
+            required: true,
+            message: '请选择导购',
+            trigger: 'change'
+          }
+        ]
+      },
+      searchSelect: '',
+      storeData: [],
+      selectId: '',
+      departVisible: true,
+      loading: false,
+      visible: false,
+      brandList: [], // TODO: 远程搜索数组
+      totalCount: 0,
+      props: {
+        label: 'clerkName',
+        value: 'clerkId',
+        childLabel: 'storeName'
+      }
+    };
+  },
+  methods: {
+    // TODO: 加载更多
+    load() {
+      console.log('load');
+      this.brandParams.pageNum++;
+      this.getRemoteAccountList();
+    },
+    // TODO: 远程搜索方法
+    remoteSearch(query) {
+      this.brandParams.search = query;
+      this.brandParams.pageNum = 1;
+      this.getRemoteAccountList();
+    },
+    // TODO: 获取远程关联账号数据
+    getRemoteAccountList(test) {
+      if (this.brandParams.pageNum == 1) {
+        this.brandList = [];
+      }
+      // if (!this.brandParams.search) return;
+
+      // getRequest('/', { ...this.brandParams }).then(res => {
+      //   // TODO: 逻辑确认
+      // });
+      console.log('zoule');
+      console.log(this.brandParams.search, 'search--');
+      console.log(this.partForm.clerkId, 'id--');
+      let testArray = [
+        {
+          clerkName: 'admin',
+          clerkCode: '1',
+          clerkId: '8e414a85362c436dad66385eadd2f318',
+          enterpriseName: null,
+          enterpriseId: 'ff8080815dacd3a2015dacd3ef5c0000',
+          storeId: 'ff808081732e0c720173325c1cf5001c',
+          storeName: '8300105乌鲁木齐新市汇嘉时代百货Yatlas哈哈哈哈哈哈哈哈哈哈',
+          relationStatus: 0,
+          staffId: null,
+          staffName: null
+        },
+        {
+          clerkName: 'admin222',
+          clerkCode: '1333',
+          clerkId: '8e414a85362c436dad66385eadd2f31822',
+          enterpriseName: null,
+          enterpriseId: 'ff8080815dacd3a2015dacd3ef5c000033',
+          storeId: 'ff808081732e0c720173325c1cf5001c44',
+          storeName: '号码摩托',
+          relationStatus: 0,
+          staffId: null,
+          staffName: null
+        }
+      ];
+      this.brandList = testArray;
+      // getRequest('/haoban-manage3-web/search-clerk-relation', {
+      //   search: test ? test : this.brandParams.search
+      // })
+      //   .then(res => {
+      //     let resData = res.data;
+      //     if (resData.errorCode == 1) {
+      //       this.brandList = resData.result || [];
+      //       return;
+      //     }
+      //     errMsg.errorMsg(resData);
+      //   })
+      //   .catch(function(error) {
+      //     this.$message.error({
+      //       duration: 1000,
+      //       message: error.message
+      //     });
+      //   });
+    },
+    /**
+     * 显示pop
+     */
+    showPop() {
+      const that = this;
+      that.visible = true;
+    },
+    /**
+     * 解绑
+     */
+    toUnbind(row) {
+      const that = this;
+      that
+        .$confirm(`导购账号（${row.clerkName}）已绑定${row.staffName}，是否确认解绑？`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+        .then(() => {
+          that.visible = true;
+          that.postUnbind(row);
+        })
+        .catch(() => {
+          that.visible = true;
+        });
+    },
+    postUnbind(row) {
+      const that = this;
+      let para = {
+        staffId: row.staffId,
+        clerkId: row.clerkId
+      };
+      postRequest('/haoban-manage3-web/del-clerk-relation', para)
+        .then(res => {
+          let resData = res.data;
+          if (resData.errorCode == 1) {
+            showMsg.showmsg('解绑成功', 'success');
+            that.getData();
+            that.visible = true;
+            return;
+          }
+          errMsg.errorMsg(resData);
+        })
+        .catch(function(error) {
+          that.$message.error({
+            duration: 1000,
+            message: error.message
+          });
+        });
+    },
+    /**
+     * 选择
+     */
+    checkStore(item) {
+      const that = this;
+      if (item.relationStatus == 1) {
+        return false;
+      }
+      that.selectId = item.clerkId;
+      that.partForm.salerName = item.clerkName;
+      that.$set(that.partForm, 'salerName', item.clerkName);
+      that.$forceUpdate();
+      that.$nextTick(() => {
+        that.$refs['partForm'].validate(valid => {
+          if (valid) {
+            return false;
+          }
+        });
+      });
+    },
+    /**
+     * 输入
+     */
+    toInput: _debounce(function(e, value) {
+      const that = this;
+      if (that.searchSelect.trim() == '') {
+        return false;
+      }
+      that.getData();
+    }, 500),
+    // 搜索清除
+    clearSearch() {
+      const that = this;
+      that.storeData = [];
+    },
+    /**
+     * 关闭弹窗
+     */
+    handleClose(done) {
+      const that = this;
+      that.$refs['partForm'].resetFields();
+      that.$emit('refreshData', 'close');
+      done();
+    },
+    cancel() {
+      const that = this;
+      that.$refs['partForm'].resetFields();
+      that.$emit('refreshData', 'close');
+    },
+    /**
+     * 确定保存
+     */
+    submitForm: _debounce(function(form) {
+      const that = this;
+      that.loading = true;
+      that.$refs[form].validate(valid => {
+        if (valid) {
+          that.postAdd();
+        } else {
+          that.loading = false;
+          return false;
+        }
+      });
+    }, 300),
+    postAdd() {
+      const that = this;
+      let params = {
+        staffId: that.departObj.staffId,
+        // clerkId: that.selectId
+        clerkId: that.partForm.clerkId
+      };
+      console.log(params, 'cscsc');
+      that.loading = false;
+
+      return;
+      postRequest('/haoban-manage3-web/add-clerk-relation', params)
+        .then(res => {
+          let resData = res.data;
+          that.loading = false;
+          if (resData.errorCode == 1) {
+            showMsg.showmsg('添加成功', 'success');
+            that.$emit('refreshData', that.partForm);
+            return false;
+          }
+          errMsg.errorMsg(resData);
+        })
+        .catch(function(error) {
+          that.loading = false;
+          that.$message.error({
+            duration: 1000,
+            message: error.message
+          });
+        });
+    },
+    getData() {
+      const that = this;
+      let para = {
+        search: that.searchSelect
+      };
+      getRequest('/haoban-manage3-web/search-clerk-relation', para)
+        .then(res => {
+          let resData = res.data;
+          if (resData.errorCode == 1) {
+            that.storeData = resData.result || [];
+            return;
+          }
+          errMsg.errorMsg(resData);
+        })
+        .catch(function(error) {
+          that.$message.error({
+            duration: 1000,
+            message: error.message
+          });
+        });
+    }
+  },
+  watch: {
+    departObj(newData) {
+      // const that = this;
+      if (Object.keys(newData).length) {
+        // that.partForm = newData;
+      }
+    }
+  },
+  mounted() {
+    // const that = this;
+    // that.getData();
+    /* if (Object.keys(that.departObj).length) {
+      that.partForm = that.departObj;
+    } */
+    // TODO: 初始化加载
+    // this.getRemoteAccountList();
+  }
+};
+</script>
+<style lang="less" scoped>
+/deep/ .add-remote-dialog {
+  // .el-dialog {
+  //   height: 221px;
+  // }
+  .el-dialog__header {
+    padding: 24px 24px 0 24px;
+    .el-dialog__title {
+      line-height: 25px;
+      font-size: 16px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #37383a;
+    }
+  }
+  .el-dialog__body {
+    padding: 30px;
+  }
+}
+// .damolish .el-select-dropdown .el-select-dropdown__empty {
+//   width: 352px;
+// }
+// .damolish .el-select-dropdown .el-select-dropdown__item {
+//   height: 45px;
+//   line-height: 45px;
+// }
+.w-95 {
+  width: 95px;
+}
+.w-352 {
+  width: 352px;
+}
+.m-l-30 {
+  margin-left: 30px;
+}
+.w-319 {
+  width: 319px;
+}
+.w-558 {
+  width: 558px;
+}
+.btn-class {
+  box-sizing: border-box;
+  padding: 5px 24px;
+  width: 80px;
+  height: 32px;
+}
+.damolish .el-popper {
+  min-width: 352px;
+}
+
+.text-ellipsis {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

src/views/apps/shoppingCenter/goodsShowSetCopy.vue

+<!--
+ * @Descripttion: 当前组件信息
+ * @version: 1.0.0
+ * @Author: 无尘
+ * @Date: 2019-03-20 14:36:37
+ * @LastEditors: Drama
+ * @LastEditTime: 2022-09-14 11:21:41
+ -->
+
+<template>
+  <div class="app-detail-wrap">
+    <!-- <div class="app-detail-pane border-box p-20">
+      <div class="m-b-20">
+        <span class="font-14 p-r-10">商品展示：</span>
+        <el-checkbox v-model="myCustomData.salesGoodsFlag">已上架商品</el-checkbox><el-checkbox v-model="myCustomData.notSalesGoodsFlag">未上架商品</el-checkbox>
+      </div>
+      <div><el-switch v-model="myCustomData.showPriceFlag"></el-switch><span class="font-14 color-303133 p-l-10">商品详情屏蔽价格</span><span class="font-12 color-909399 p-l-10">注：开启后，商品列表及商品详情中会屏蔽价格字段。关闭后显示价格。</span></div>
+      <div class="m-t-46">
+        <el-button v-if="$getButtonLimit($buttonCode.saveGoodsSet)" :limit-code="$buttonCode.saveGoodsSet" type="primary" :loading="loading" @click="submit('searchFlag')" :disabled="$store.state.wxEnterpriseType">保 存</el-button>
+      </div>
+    </div> -->
+    <div class="p-l-40 border-box p-t-30">
+      <el-form v-model="myCustomData" label-width="130px">
+        <el-form-item label="商品展示"><el-checkbox v-model="myCustomData.salesGoodsFlag">已上架商品</el-checkbox><el-checkbox v-model="myCustomData.notSalesGoodsFlag">未上架商品</el-checkbox></el-form-item>
+        <el-form-item label="商品详情价格" prop="showPriceFlag">
+          <div class="setting-radio-item">
+            <el-radio v-model="myCustomData.showPriceFlag" :label="false">屏蔽</el-radio>
+            <div class="set-tip-txt">商品列表及商品详情中不显示价格字段</div>
+          </div>
+          <div class="setting-radio-item">
+            <el-radio v-model="myCustomData.showPriceFlag" :label="true">不屏蔽</el-radio>
+            <div class="set-tip-txt">商品列表及商品详情中显示价格字段</div>
+          </div>
+        </el-form-item>
+        <!-- TODO: 字段确定 -->
+        <el-form-item label="商品品类名称" prop="test">
+          <div class="setting-radio-item m-b-30">
+            <el-radio v-model="myCustomData.test" label="1">一级品类名称</el-radio>
+            <div v-show="myCustomData.test == 1" class="tip-fixed">好办小程序 [客户详情] - [消费记录]的消费衣橱商品将按照此设置划分</div>
+          </div>
+          <div class="setting-radio-item m-b-30">
+            <el-radio v-model="myCustomData.test" label="2">二级品类名称</el-radio>
+            <div v-show="myCustomData.test == 2" class="tip-fixed">好办小程序 [客户详情] - [消费记录]的消费衣橱商品将按照此设置划分</div>
+          </div>
+          <div class="setting-radio-item m-b-30">
+            <el-radio v-model="myCustomData.test" label="3">三级品类名称</el-radio>
+            <div v-show="myCustomData.test == 3" class="tip-fixed">好办小程序 [客户详情] - [消费记录]的消费衣橱商品将按照此设置划分</div>
+          </div>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- TODO: save按钮 -->
+    <div class="fixed-save-btn border-box" v-if="$getButtonLimit($buttonCode.saveGoodsSet)">
+      <el-button :limit-code="$buttonCode.saveGoodsSet" type="primary" :loading="loading" @click="submit('searchFlag')" :disabled="$store.state.wxEnterpriseType">保存</el-button>
+    </div>
+  </div>
+</template>
+<script>
+import showMsg from '@/common/js/showmsg';
+import errMsg from '@/common/js/error';
+import { _debounce } from '@/common/js/public';
+import { postRequest } from '@/api/api';
+export default {
+  name: 'app-detail',
+  props: {
+    brandId: {
+      type: String,
+      default() {
+        return '';
+      }
+    }
+  },
+  data() {
+    return {
+      projectName: '', // 当前项目名
+      wxEnterpriseRelatedId: sessionStorage.getItem('userInfos') ? JSON.parse(sessionStorage.getItem('userInfos')).wxEnterpriseId : '',
+      myCustomData: {
+        salesGoodsFlag: false,
+        notSalesGoodsFlag: false,
+        showPriceFlag: false,
+        test: '1'
+      },
+      activeId: '1',
+      loading: false
+    };
+  },
+  methods: {
+    /**
+     * 保存
+     */
+    submit: _debounce(function(type) {
+      const that = this;
+      that.loading = true;
+      that.setData(type);
+    }, 500),
+
+    /**
+     * 保存-API
+     */
+    setData(type) {
+      const that = this;
+      let para = {
+        enterpriseId: that.brandId,
+        // wxEnterpriseRelatedId: that.wxEnterpriseRelatedId,
+        salesGoodsFlag: that.myCustomData.salesGoodsFlag ? 1 : '0',
+        notSalesGoodsFlag: that.myCustomData.notSalesGoodsFlag ? 1 : '0',
+        showPriceFlag: that.myCustomData.showPriceFlag ? 1 : '0'
+      };
+      console.log(para, 'para---');
+      const url = '/haoban-app-aggregation-web/save-goods-setting';
+      postRequest(url, para)
+        .then(res => {
+          let resData = res.data;
+          that.loading = false;
+          that.getCustomerSet();
+          if (resData.errorCode == 1) {
+            showMsg.showmsg('保存成功', 'success');
+            return;
+          }
+          errMsg.errorMsg(resData);
+        })
+        .catch(function(error) {
+          that.loading = false;
+          that.$message.error({
+            duration: 1000,
+            message: error.message
+          });
+        });
+    },
+
+    /**
+     * 获取数据
+     */
+    getCustomerSet(brandId) {
+      const that = this;
+      let para = {
+        enterpriseId: that.brandId,
+        wxEnterpriseRelatedId: that.wxEnterpriseRelatedId
+      };
+      postRequest('/haoban-app-aggregation-web/find-goods-setting', para)
+        .then(res => {
+          let resData = res.data;
+          if (resData.errorCode == 1) {
+            if (!!resData.result) {
+              that.myCustomData.salesGoodsFlag = resData.result.salesGoodsFlag == 1 ? true : false;
+              that.myCustomData.notSalesGoodsFlag = resData.result.notSalesGoodsFlag == 1 ? true : false;
+              that.myCustomData.showPriceFlag = resData.result.showPriceFlag == 1 ? true : false;
+            }
+            return;
+          }
+          errMsg.errorMsg(resData);
+        })
+        .catch(function(error) {
+          that.$message.error({
+            duration: 1000,
+            message: error.message
+          });
+        });
+    }
+  },
+  watch: {
+    brandId: function(newData, oldData) {
+      const that = this;
+      if (newData) {
+        that.getCustomerSet(that.brandId);
+      }
+    }
+  },
+  mounted() {
+    const that = this;
+    if (that.brandId) {
+      that.getCustomerSet(that.brandId);
+    }
+  },
+  components: {}
+};
+</script>
+<style lang="scss" scoped>
+.w-500 {
+  width: 500px;
+}
+
+.w-195 {
+  width: 195px;
+}
+
+.color-1890ff {
+  color: #2f54eb;
+}
+
+.p-20 {
+  padding: 20px;
+}
+
+.p-l-38 {
+  padding-left: 38px;
+}
+
+.p-l-199 {
+  padding-left: 199px;
+}
+
+.p-t-30 {
+  padding-top: 30px;
+}
+
+.m-b-30 {
+  margin-bottom: 30px;
+}
+
+.damolish .el-form-item {
+  margin-bottom: 30px;
+}
+
+.damolish .el-button {
+  padding: 8px 26px;
+}
+
+.app-detail-wrap {
+  height: 100%;
+  background: #fff;
+  .el-tabs {
+    background: #fff;
+    >>> .el-tabs__nav-wrap {
+      /* height: 48px;
+      line-height: 48px; */
+      &::after {
+        height: 1px;
+      }
+      /* .el-tabs__nav-scroll {
+        padding-left: 20px;
+      } */
+    }
+  }
+  .condition-tip {
+    width: 740px;
+    .el-alert--info {
+      background: #e6f7ff;
+      border: 1px solid rgba(145, 213, 255, 1);
+      .el-alert__icon {
+        font-size: 12px;
+      }
+    }
+  }
+  .setting-radio-item {
+    position: relative;
+    & + .setting-radio-item {
+      margin-top: 15px;
+    }
+    .set-tip-txt,
+    .tip-fixed {
+      padding: 0 0 0 25px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #909399;
+      line-height: 15px;
+    }
+    .tip-fixed {
+      position: absolute;
+      top: 10;
+    }
+  }
+  .fixed-save-btn {
+    position: fixed;
+    display: flex;
+    -webkit-box-pack: center;
+    -webkit-box-align: center;
+    align-items: center;
+    justify-content: center;
+    bottom: 0;
+    width: calc(100% - 206px);
+    height: 56px;
+    background: #ffffff;
+    box-shadow: 1px -2px 8px 0px rgba(220, 223, 230, 0.6);
+  }
+}
+</style>

src/views/enterprise/guide-setting-copy.vue

+<!--
+ * @Description:
+ * @Version: 1.0
+ * @Author: Drama
+ * @Date: 2022-09-14 11:09:43
+ * @LastEditors: Drama
+ * @LastEditTime: 2022-09-16 14:49:14
+ * @FilePath: /haoban-3/src/views/enterprise/guide-setting-copy.vue
+ * Copyright (C) 2022 huzhenhong. All rights reserved.
+-->
+<template>
+  <div class="app-detail-wrap">
+    <div class="border-box p-t-30 p-l-26 p-r-211">
+      <el-form v-model="roleForm" label-width="100px">
+        <el-form-item label="应用权限" required>
+          <div class="dis-f">
+            <div class="title-wrap border-box border-radio-2">
+              <div class=" border-box tag-wrap F-S-14 F-C-BLACK dis-center border-radio-2 cursor-pointer" v-for="(item, index) in titleList" :key="index" :class="[activeNum == index ? 'checked-status' : '', item.isEmpty ? 'empted-status' : '']" @click="chooseType(index)">{{ item.title }}</div>
+            </div>
+            <div v-if="isShowErrorTip" class="error-tip border-box border-radio-2">
+              <i class="el-icon-warning"></i>
+              <div class="F-C-BLACK F-S-12 m-l-9">当前有未填项</div>
+            </div>
+          </div>
+        </el-form-item>
+        <el-form-item label="" prop="" class="">
+          <!-- TODO: 权限树 是否使用vue-gic-auth-tree组件 -->
+          <!-- <div class="right-config">
+            <div class="title">
+              <p>权限设置</p>
+            </div>
+          </div> -->
+          <!-- <div class="right-wrap_ account-limit-wrap expend" v-loading="loading">
+            <elNewTree :data="treeData" show-checkbox ref="tree1" node-key="rightId" :default-checked-keys="withoutParents" :default-expanded-keys="setDefaultExpandedKeys(treeData)" :props="defaultProps"> </elNewTree>
+          </div> -->
+          <vue-gic-auth-tree class="auth-tree" :data="treeData" show-checkbox ref="tree" node-key="menuCode" :default-checked-keys="withoutParents" default-expand-all :props="defaultProps" showButtonFlag></vue-gic-auth-tree>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- TODO: save按钮 -->
+    <div class="fixed-save-btn border-box" v-if="$getButtonLimit($buttonCode.saveGoodsSet)">
+      <el-button :limit-code="$buttonCode.saveGoodsSet" type="primary" :loading="loading" @click="submit" :disabled="$store.state.wxEnterpriseType">保存</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import elNewTree from '@/components/tree/tree';
+import { deepClone, debounce, arrToTree } from '@/utils';
+import { getRequest } from '@/api/api';
+
+export default {
+  name: 'GuideSetting',
+  components: { elNewTree },
+  data() {
+    return {
+      roleForm: {},
+      titleList: [
+        { title: '导购', isEmpty: false },
+        { title: '店长', isEmpty: false },
+        { title: '区经/督导', isEmpty: false }
+      ],
+      activeNum: 0,
+      defaultProps: {
+        children: 'menuBOList',
+        label: 'menuName'
+      },
+      withoutParents: [], //不包含父节点
+      treeData: [],
+      withoutParents_0: [],
+      withoutParents_1: [],
+      withoutParents_2: [],
+      curMenuCode_0: [], // 拷贝当前节点了的按钮
+      curMenuCode_1: [],
+      curMenuCode_2: [],
+      roleId_0: '',
+      roleId_1: '',
+      roleId_2: '',
+      copyMenu: [],
+      loading: false,
+      isShowErrorTip: false
+    };
+  },
+  computed: {
+    setDefaultExpandedKeys() {
+      return treeData => treeData.map(el => el.rightId);
+    }
+  },
+  mounted() {
+    // TODO: 测试数据
+    // this.treeData = [
+    //   {
+    //     menuCode: 'workbench',
+    //     menuName: '工作台',
+    //     menuUrl: 'pages/workbench/workbench',
+    //     iconUrl: '',
+    //     menuLevel: null,
+    //     menuType: 0,
+    //     menuSort: 0,
+    //     parentCode: 0,
+    //     statusFlag: 1,
+    //     createTime: 1663145657000,
+    //     updateTime: 1663145657000,
+    //     routePath: '',
+    //     menuBOList: [
+    //       {
+    //         menuCode: 'dataSummary',
+    //         menuName: '数据面板',
+    //         menuUrl: 'pages/workbench/workbench',
+    //         iconUrl: '',
+    //         menuLevel: null,
+    //         menuType: 1,
+    //         menuSort: 0,
+    //         parentCode: 'workbench',
+    //         statusFlag: 1,
+    //         createTime: 1663145657000,
+    //         updateTime: 1663145657000,
+    //         routePath: '',
+    //         menuBOList: []
+    //       },
+    //       {
+    //         menuCode: 'customer',
+    //         menuName: '我的顾客',
+    //         menuUrl: 'pages/workbench/workbench',
+    //         iconUrl: '',
+    //         menuLevel: null,
+    //         menuType: 1,
+    //         menuSort: 0,
+    //         parentCode: 'workbench',
+    //         statusFlag: 1,
+    //         createTime: 1663145658000,
+    //         updateTime: 1663145658000,
+    //         routePath: 'pages/hbapp/customer/list/list',
+    //         menuBOList: [
+    //           {
+    //             menuLevel: null,
+    //             menuName: '全品牌搜索',
+    //             updateTime: 1663145658000,
+    //             routePath: 'pages/hbapp/customer/list/search/search',
+    //             menuUrl: 'pages/hbapp/customer/list/list',
+    //             parentCode: 'customer',
+    //             createTime: 1663145658000,
+    //             menuBOList: [],
+    //             menuCode: 'customerList_allSearch',
+    //             menuType: 1,
+    //             iconUrl: '',
+    //             menuSort: 0,
+    //             statusFlag: 1
+    //           },
+    //           {
+    //             menuLevel: null,
+    //             menuName: '分配会员',
+    //             updateTime: 1663145658000,
+    //             routePath: 'pages/hbapp/customer/distributeMember/distributeMember',
+    //             menuUrl: 'pages/hbapp/customer/list/list',
+    //             parentCode: 'customer',
+    //             createTime: 1663145658000,
+    //             menuBOList: [],
+    //             menuCode: 'customerList_distribute',
+    //             menuType: 1,
+    //             iconUrl: '',
+    //             menuSort: 0,
+    //             statusFlag: 1
+    //           },
+    //           {
+    //             menuLevel: null,
+    //             menuName: '离职继承',
+    //             updateTime: 1663145658000,
+    //             routePath: 'pages/hbapp/customer/dimissionInherit/inheritMain/inheritMain',
+    //             menuUrl: 'pages/hbapp/customer/list/list',
+    //             parentCode: 'customer',
+    //             createTime: 1663145658000,
+    //             menuBOList: [],
+    //             menuCode: 'customerList_inheritCustomer',
+    //             menuType: 1,
+    //             iconUrl: '',
+    //             menuSort: 0,
+    //             statusFlag: 1
+    //           },
+    //           {
+    //             menuLevel: null,
+    //             menuName: '群发助手',
+    //             updateTime: 1663145658000,
+    //             routePath: 'pages/hbapp/customer/massTextingAssistant/massTextingDetail/massTextingDetail',
+    //             menuUrl: 'pages/hbapp/customer/list/list',
+    //             parentCode: 'customer',
+    //             createTime: 1663145658000,
+    //             menuBOList: [],
+    //             menuCode: 'customerList_massAssistant',
+    //             menuType: 1,
+    //             iconUrl: '',
+    //             menuSort: 0,
+    //             statusFlag: 1
+    //           },
+    //           {
+    //             menuLevel: null,
+    //             menuName: '会员导出',
+    //             updateTime: 1663145658000,
+    //             routePath: 'pages/hbapp/customer/fileExport/exportList/exportList',
+    //             menuUrl: 'pages/hbapp/customer/list/list',
+    //             parentCode: 'customer',
+    //             createTime: 1663145658000,
+    //             menuBOList: [],
+    //             menuCode: 'customerList_customerExport',
+    //             menuType: 1,
+    //             iconUrl: '',
+    //             menuSort: 0,
+    //             statusFlag: 1
+    //           },
+    //           {
+    //             menuLevel: null,
+    //             menuName: '导购二维码',
+    //             updateTime: 1663145658000,
+    //             routePath: 'pages/hbapp/customer/list/guideQRCode/guideQRCode',
+    //             menuUrl: 'pages/hbapp/customer/list/list',
+    //             parentCode: 'customer',
+    //             createTime: 1663145658000,
+    //             menuBOList: [],
+    //             menuCode: 'customerList_clerkQRCode',
+    //             menuType: 1,
+    //             iconUrl: '',
+    //             menuSort: 0,
+    //             statusFlag: 1
+    //           },
+    //           {
+    //             menuLevel: null,
+    //             menuName: '联系好友',
+    //             updateTime: 1663145658000,
+    //             routePath: '',
+    //             menuUrl: 'pages/hbapp/customer/detail/detail',
+    //             parentCode: 'customer',
+    //             createTime: 1663145658000,
+    //             menuBOList: [],
+    //             menuCode: 'customerDetail_connectFriend',
+    //             menuType: 1,
+    //             iconUrl: '',
+    //             menuSort: 0,
+    //             statusFlag: 1
+    //           },
+    //           {
+    //             menuLevel: null,
+    //             menuName: '添加好友',
+    //             updateTime: 1663145658000,
+    //             routePath: '',
+    //             menuUrl: 'pages/hbapp/customer/detail/detail',
+    //             parentCode: 'customer',
+    //             createTime: 1663145658000,
+    //             menuBOList: [],
+    //             menuCode: 'customerDetail_addFriend',
+    //             menuType: 1,
+    //             iconUrl: '',
+    //             menuSort: 0,
+    //             statusFlag: 1
+    //           },
+    //           {
+    //             menuLevel: null,
+    //             menuName: '电话',
+    //             updateTime: 1663145658000,
+    //             routePath: '',
+    //             menuUrl: 'pages/hbapp/customer/detail/detail',
+    //             parentCode: 'customer',
+    //             createTime: 1663145658000,
+    //             menuBOList: [],
+    //             menuCode: 'customerDetail_call',
+    //             menuType: 1,
+    //             iconUrl: '',
+    //             menuSort: 0,
+    //             statusFlag: 1
+    //           },
+    //           {
+    //             menuLevel: null,
+    //             menuName: '短信',
+    //             updateTime: 1663145658000,
+    //             routePath: '',
+    //             menuUrl: 'pages/hbapp/customer/detail/detail',
+    //             parentCode: 'customer',
+    //             createTime: 1663145658000,
+    //             menuBOList: [],
+    //             menuCode: 'customerDetail_smsMsg',
+    //             menuType: 1,
+    //             iconUrl: '',
+    //             menuSort: 0,
+    //             statusFlag: 1
+    //           },
+    //           {
+    //             menuLevel: null,
+    //             menuName: '分配导购',
+    //             updateTime: 1663145658000,
+    //             routePath: 'pages/hbapp/customer/detail/changeGuide/changgeGuide',
+    //             menuUrl: 'pages/hbapp/customer/detail/detail',
+    //             parentCode: 'customer',
+    //             createTime: 1663145658000,
+    //             menuBOList: [],
+    //             menuCode: 'customerDetail_mainClerkExchange',
+    //             menuType: 1,
+    //             iconUrl: '',
+    //             menuSort: 0,
+    //             statusFlag: 1
+    //           },
+    //           {
+    //             menuLevel: null,
+    //             menuName: '打标签',
+    //             updateTime: 1663145658000,
+    //             routePath: '',
+    //             menuUrl: 'pages/hbapp/customer/detail/detail',
+    //             parentCode: 'customer',
+    //             createTime: 1663145658000,
+    //             menuBOList: [],
+    //             menuCode: 'customerDetail_mark',
+    //             menuType: 1,
+    //             iconUrl: '',
+    //             menuSort: 0,
+    //             statusFlag: 1
+    //           },
+    //           {
+    //             menuLevel: null,
+    //             menuName: '客户跟进',
+    //             updateTime: 1663145658000,
+    //             routePath: 'pages/hbapp/customer/list/guideQRCode/guideQRCode',
+    //             menuUrl: 'pages/hbapp/customer/detail/detail',
+    //             parentCode: 'customer',
+    //             createTime: 1663145658000,
+    //             menuBOList: [],
+    //             menuCode: 'customerDetail_clerkQRCode',
+    //             menuType: 1,
+    //             iconUrl: '',
+    //             menuSort: 0,
+    //             statusFlag: 1
+    //           }
+    //         ]
+    //       },
+    //       {
+    //         menuCode: 'marketingTask',
+    //         menuName: '营销任务',
+    //         menuUrl: 'pages/workbench/workbench',
+    //         iconUrl: '',
+    //         menuLevel: null,
+    //         menuType: 1,
+    //         menuSort: 0,
+    //         parentCode: 'workbench',
+    //         statusFlag: 1,
+    //         createTime: 1663145658000,
+    //         updateTime: 1663145658000,
+    //         routePath: 'pages/hbapp/marketingTask/taskList/taskList',
+    //         menuBOList: [
+    //           {
+    //             menuLevel: null,
+    //             menuName: '指派任务',
+    //             updateTime: 1663145658000,
+    //             routePath: 'pages/hbapp/task/phoneTaskDistribute/phoneTaskDistribute',
+    //             menuUrl: 'pages/hbapp/marketingTask/phoneTaskList/phoneTaskList',
+    //             parentCode: 'marketingTask',
+    //             createTime: 1663145658000,
+    //             menuBOList: [],
+    //             menuCode: 'marketingTaskList_distribute',
+    //             menuType: 1,
+    //             iconUrl: '',
+    //             menuSort: 0,
+    //             statusFlag: 1
+    //           }
+    //         ]
+    //       },
+    //       {
+    //         menuCode: 'dashboard',
+    //         menuName: '看数据',
+    //         menuUrl: 'pages/workbench/workbench',
+    //         iconUrl: '',
+    //         menuLevel: null,
+    //         menuType: 1,
+    //         menuSort: 0,
+    //         parentCode: 'workbench',
+    //         statusFlag: 1,
+    //         createTime: 1663145658000,
+    //         updateTime: 1663145658000,
+    //         routePath: 'pages/hbapp/reportManagement/summaryReport/summaryReport',
+    //         menuBOList: []
+    //       },
+    //       {
+    //         menuCode: 'dailyReport',
+    //         menuName: '云日报',
+    //         menuUrl: 'pages/workbench/workbench',
+    //         iconUrl: '',
+    //         menuLevel: null,
+    //         menuType: 1,
+    //         menuSort: 0,
+    //         parentCode: 'workbench',
+    //         statusFlag: 1,
+    //         createTime: 1663145658000,
+    //         updateTime: 1663145658000,
+    //         routePath: 'pages/hbapp/dailyReport/list/list',
+    //         menuBOList: []
+    //       },
+    //       {
+    //         menuCode: 'kpi',
+    //         menuName: '月指标',
+    //         menuUrl: 'pages/workbench/workbench',
+    //         iconUrl: '',
+    //         menuLevel: null,
+    //         menuType: 1,
+    //         menuSort: 0,
+    //         parentCode: 'workbench',
+    //         statusFlag: 1,
+    //         createTime: 1663145658000,
+    //         updateTime: 1663145658000,
+    //         routePath: 'pages/hbapp/kpi/monthlyList/monthlyList',
+    //         menuBOList: []
+    //       },
+    //       {
+    //         menuCode: 'commodityCenter',
+    //         menuName: '商品中心',
+    //         menuUrl: 'pages/workbench/workbench',
+    //         iconUrl: '',
+    //         menuLevel: null,
+    //         menuType: 1,
+    //         menuSort: 0,
+    //         parentCode: 'workbench',
+    //         statusFlag: 1,
+    //         createTime: 1663145658000,
+    //         updateTime: 1663145658000,
+    //         routePath: 'pages/hbapp/commodityCenter/commodityList/commondityList',
+    //         menuBOList: []
+    //       },
+    //       {
+    //         menuCode: 'orderComment',
+    //         menuName: '订单评价',
+    //         menuUrl: 'pages/workbench/workbench',
+    //         iconUrl: '',
+    //         menuLevel: null,
+    //         menuType: 1,
+    //         menuSort: 0,
+    //         parentCode: 'workbench',
+    //         statusFlag: 1,
+    //         createTime: 1663145658000,
+    //         updateTime: 1663145658000,
+    //         routePath: 'pages/hbapp/orderComment/orderComment/orderComment',
+    //         menuBOList: []
+    //       },
+    //       {
+    //         menuCode: 'writeOff',
+    //         menuName: '扫码核销',
+    //         menuUrl: 'pages/workbench/workbench',
+    //         iconUrl: '',
+    //         menuLevel: null,
+    //         menuType: 1,
+    //         menuSort: 0,
+    //         parentCode: 'workbench',
+    //         statusFlag: 1,
+    //         createTime: 1663145658000,
+    //         updateTime: 1663145658000,
+    //         routePath: 'pages/hbapp/cancelVerification/scan/scan',
+    //         menuBOList: []
+    //       },
+    //       {
+    //         menuCode: 'commission',
+    //         menuName: '订单评价',
+    //         menuUrl: 'pages/workbench/workbench',
+    //         iconUrl: '',
+    //         menuLevel: null,
+    //         menuType: 1,
+    //         menuSort: 0,
+    //         parentCode: 'workbench',
+    //         statusFlag: 1,
+    //         createTime: 1663145658000,
+    //         updateTime: 1663145658000,
+    //         routePath: 'pages/hbapp/commission/commissionReport/commissionReport',
+    //         menuBOList: []
+    //       }
+    //     ]
+    //   }
+    // ];
+    this.getMenuRoleList();
+  },
+  methods: {
+    chooseType(index) {
+      this.titleList.forEach(item => {
+        item.isEmpty = false;
+      });
+      let isChooseList = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
+      // 切换tab时 缓存上个tag选择的节点
+      this['withoutParents_' + this.activeNum] = [...isChooseList];
+      this.activeNum = index;
+      this.treeData = deepClone(this.copyMenu);
+      this.withoutParents = this['withoutParents_' + this.activeNum];
+      this.isShowErrorTip = false;
+      this.activeNum = index;
+    },
+    // TODO: 获取类型选择菜单
+    getQueryMenuList() {
+      // index 当前页签
+      let clerkType = 0;
+      if (this.activeNum == 2) {
+        clerkType = 3;
+      } else {
+        clerkType = this.activeNum;
+      }
+      let params = {
+        clerkType
+      };
+      getRequest('/haoban-manage3-web/role/queryMenuByClerkType', params).then(res => {
+        if (res.data.code == 0) {
+          if (res.data.result) {
+            // 接口当前选中
+            this.treeData = deepClone(this.copyMenu);
+            let resData = res.data;
+            let menuCodes = ['customerList_allSearch', 'workbench', 'customer'];
+            // let menuCodes = resData.result.menuCodes;
+            this['roleId_' + this.activeNum] = resData.result.roleId;
+            this['curMenuCode_' + this.activeNum] = [...menuCodes]; // 保存当前类别选中状态，保存的时候用用于记录操作的区别
+            let assginArr = [...new Set(this['withoutParents_' + this.activeNum].concat(menuCodes))];
+            this.withoutParents = [...assginArr];
+            console.log(assginArr, '去重');
+            console.log(this.withoutParents, '当前-----');
+          } else {
+            this.treeData = deepClone(this.copyMenu);
+            this.withoutParents = [];
+            console.log(this.withoutParents, 'aasdsadsa');
+          }
+        } else {
+          this.$message.error(res.data.message);
+        }
+      });
+    },
+    // TODO: 获取菜单列表
+    getMenuRoleList() {
+      const that = this;
+      let query = {
+        clerkType: this.activeNum
+      };
+      getRequest('/haoban-manage3-web/role/getHaobanMenuTreeList', query).then(res => {
+        if (res.data.code == 0) {
+          if (res.data.result) {
+            let resData = res.data;
+            let arr = resData.result;
+
+            arr.forEach(item => {
+              if (item.menuType == 0) {
+                item.parentCode = 0;
+              }
+              if (item.menuBOList.length) {
+                item.menuBOList = item.menuBOList.filter(data => data.menuType != 2);
+              }
+            });
+            that.treeData = arrToTree(arr, 0, { idName: 'menuCode', parentIdName: 'parentCode', childName: 'menuBOList' });
+            that.copyMenu = deepClone(that.treeData);
+            that.getQueryMenuList();
+          } else {
+            this.treeData = [];
+          }
+        } else {
+          this.$message.error(res.data.message);
+        }
+      });
+    },
+    submit: debounce(function() {
+      let currentChooseList = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
+      this['withoutParents_' + this.activeNum] = [...currentChooseList];
+      console.log(this.withoutParents_0);
+      console.log(this.withoutParents_1);
+      console.log(this.withoutParents_2);
+      let errFlag_0 = this.withoutParents_0.length ? true : false;
+      let errFlag_1 = this.withoutParents_1.length ? true : false;
+      let errFlag_2 = this.withoutParents_2.length ? true : false;
+      if (!errFlag_0 || !errFlag_1 || !errFlag_2) {
+        this.$set(this.titleList[0], 'isEmpty', !errFlag_0);
+        this.$set(this.titleList[1], 'isEmpty', !errFlag_1);
+        this.$set(this.titleList[2], 'isEmpty', !errFlag_2);
+      }
+    })
+  }
+};
+</script>
+<style lang="scss">
+.auth-tree .iconfont.auth-expanded {
+  font-family: 'element-icons' !important;
+}
+.auth-tree .el-tree-node__expand-icon.auth-tree-arrow {
+  font-family: 'element-icons' !important;
+}
+</style>
+<style lang="less" scoped>
+.el-icon-warning {
+  width: 12px;
+  font-size: 12px;
+  color: #fa8c16;
+}
+
+.m-l-9 {
+  margin-left: 9px;
+}
+
+.p-l-26 {
+  padding-left: 26px;
+}
+
+.p-r-211 {
+  padding-right: 211px;
+}
+
+.F-S-14 {
+  font-size: 14px;
+}
+
+.F-S-12 {
+  font-size: 12px;
+}
+
+.F-C-BLACK {
+  color: #303133;
+}
+
+.border-radio-2 {
+  border-radius: 2px;
+}
+
+.dis-f {
+  display: flex;
+}
+
+.p-t-30 {
+  padding-top: 30px;
+}
+
+.damolish .el-button {
+  padding: 8px 26px;
+}
+
+.dis-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.app-detail-wrap {
+  height: 100%;
+  background: #fff;
+  .title-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    padding: 4px 13px 4px 4px;
+    width: 201px;
+    height: 32px;
+    /* transform: translateY(-5px); */
+    border: 1px solid #dcdfe6;
+    background: #ffffff;
+    .tag-wrap {
+      padding: 0px 10px;
+      height: 24px;
+    }
+    .checked-status {
+      background: #ebeffe;
+      color: #2f54eb;
+    }
+
+    .empted-status {
+      color: #f5222d;
+      background: rgba(245, 34, 45, 0.11);
+    }
+  }
+  .error-tip {
+    display: flex;
+    align-items: center;
+    width: 129px;
+    padding: 4px 0px 4px 17px;
+    height: 32px;
+    margin-left: 8px;
+    background: #fcf6f1;
+  }
+  .right-config {
+    font-size: 14px;
+    .title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 50px;
+      box-sizing: border-box;
+      padding: 15px 20px 15px 30px;
+      color: #303133;
+      border: 1px solid #e4e7ed;
+      p {
+        font-weight: 600;
+      }
+    }
+  }
+}
+/*  权限设置 */
+.account-limit-wrap {
+  font-size: 0px;
+  .limit-item {
+    display: flex;
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    .fl-item {
+      flex: 0 0 225px;
+      width: 225px;
+      background: rgb(246, 246, 246);
+      border-right: 1px solid #dcdfe6;
+      font-size: 16px;
+      font-weight: 500;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .opr-icon {
+        color: #919191;
+        font-size: 13px;
+        padding: 6px 3px 3px;
+        margin-right: 12px;
+        cursor: pointer;
+      }
+    }
+    .fr-item {
+      flex: 1;
+      width: 100%;
+      color: #595959;
+      .item-title {
+        height: 45px;
+        line-height: 45px;
+        padding-left: 20px;
+        font-weight: 500;
+        background: rgb(246, 246, 246);
+      }
+    }
+  }
+}
+.expend {
+  height: auto;
+}
+.right-wrap_ {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+.fixed-save-btn {
+  position: fixed;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-box-align: center;
+  align-items: center;
+  justify-content: center;
+  bottom: 0;
+  width: calc(100% - 206px);
+  height: 56px;
+  background: #ffffff;
+  box-shadow: 1px -2px 8px 0px rgba(220, 223, 230, 0.6);
+}
+</style>