feat: 增加应用内选择门店分组和门店组件

src/components/app/app-select-group.vue

+<!--
+ * @Descripttion: 应用内选择门店分组
+ * @version: 1.0.0
+ * @Author: 无尘
+ * @Date: 2020-11-17 14:02:31
+ * @LastEditors: 无尘
+ * @LastEditTime: 2020-11-17 14:22:27
+-->
+<!--
+  <app-select-group :company-id="companyId" :store-type="storeType" :select-group="selectGroup"></app-select-group>
+  import appSelectGroup from '@/components/set/app-select-group.vue';
+  -->
+<template>
+  <div class="bind-store-body">
+    <div class="select-search">
+      <el-input placeholder="请输入分组名称" clearable v-model="searchSelect" @keyup.native="value => toInput(value, searchSelect)" @clear="clearSearch"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
+    </div>
+    <div class="select-tree-wrap auth-select-tree m-t-20">
+      <el-tree ref="groupTree" :filter-node-method="filterNode" check-strictly :data="groupData" node-key="storeGroupId" show-checkbox default-expand-all :props="defaultProps" :expand-on-click-node="false" @check="checkGroup">
+        <span :id="data.storeGroupId" class="custom-tree-node"  slot-scope="{ node, data }" >
+          <span class="font-14 color-606266">{{ node.label }}</span>
+        </span>
+      </el-tree>
+    </div>
+  </div>
+</template>
+<script>
+import {  _debounce } from '@/common/js/public';
+import fetch from '@/api/merchant-auth.js';
+const { getGroupList } = fetch;
+// import showMsg from '@/common/js/showmsg';
+export default {
+  name: 'AppSelectGroup',
+  props: {
+    companyId: {
+      type: String,
+      default: ''
+    },
+    storeType: {
+      type: String,
+      default: '1' // 1 门店绑定， 2 门店共享
+    },
+    selectGroup: {
+      type: [ Object, Array ],
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      searchSelect: '', // 搜索字段
+      groupData: [],
+      groupDataCopy: [],
+      defaultProps: {
+        children: 'children',
+        label: 'storeGroupName'
+      }
+    };
+  },
+  mounted() {
+    const that = this;
+    if (that.companyId) {
+      that.getGroup();
+    }
+    if (that.selectGroup.length) {
+      that.$nextTick(()=>{
+        that.$refs.groupTree.setCheckedKeys(that.selectGroup.map(ele=>ele.storeGroupId));
+      });
+    }else {
+      that.$nextTick(()=>{
+        that.$refs.groupTree.setCheckedKeys([]);
+      });
+    }
+  },
+  methods: {
+    /**
+     * @description: 过滤搜索
+     * @param {String} value
+     * @param {Object} data
+     * @returns {Boolean}
+     * @author: 无尘
+     */
+    filterNode(value, data) {
+      if (!value || !data.label) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    /**
+     * @description: 输入
+     * @param {Object} e
+     * @param {String} value
+     * @returns {Boolean}
+     * @author: 无尘
+     */
+    toInput: _debounce(function(e, value) {
+      const that = this;
+      if (!that.groupDataCopy.length) {
+        return false;
+      }
+    }, 200),
+    /**
+     * @description: 清空
+     * @returns {Boolean}
+     * @author: 无尘
+     */
+    clearSearch() {
+      // const that = this;
+      return false;
+      // that.groupData = JSON.parse(JSON.stringify(that.groupDataCopy));
+    },
+    /**
+     * @description: 选择 tree 节点,获取选择节点信息
+     * @param {Object} e
+     * @param {Array} checkedKeys
+     * @author: 无尘
+     */
+    checkGroup: function(e, checkedKeys) {
+      const that = this;
+      const groups = that.$refs.groupTree.getCheckedNodes();
+      that.$emit('checkGroupIds', groups);
+    },
+    /**
+     * @description: 简单数组-->父子结构
+     * @param {Array} data
+     * @returns {Array}
+     * @author: 无尘
+     */
+    treeData(data) {
+      let tree = data.filter(father => {
+        // 循环所有项
+        let branchArr = data.filter(child => {
+          return father.storeGroupId == child.parentId; // 返回每一项的子级数组
+        });
+        if (branchArr.length > 0) {
+          father.hasSonNode = true;
+          father.children = branchArr; // 如果存在子级，则给父级添加一个children属性，并赋值
+        } else {
+          father.children = [];
+          father.hasSonNode = false;
+        }
+        return father.parentId == 0; // 返回第一层
+      });
+      return tree;
+    },
+    /**
+     * @description: 获取门店分组
+     * @author: 无尘
+     */
+    getGroup() {
+      const that = this;
+      const para = {
+        type: that.storeType,
+        enterpriseId: that.companyId
+      };
+      getGroupList(para)
+        .then(async res => {
+          if (!!res.result && res.result.length) {
+            res.result.forEach(ele => {
+              ele.expand = false;
+              ele.children = [];
+              ele.disabled = false;
+              ele.label = ele.storeGroupName;
+            });
+          }
+          that.groupData = await that.treeData(JSON.parse(JSON.stringify(res.result))) || [];
+          // 存一份数据自己搜索
+          that.groupDataCopy = JSON.parse(JSON.stringify(res.result));
+
+        })
+        .catch(function(error) {
+
+        });
+    },
+  },
+  watch: {
+    searchSelect(val) {
+      this.$refs.groupTree.filter(val);
+    },
+    selectGroup(val) {
+      const that = this;
+      if (val.length) {
+        that.$nextTick(()=>{
+          that.$refs.groupTree.setCheckedKeys(val.map(ele=>ele.storeGroupId));
+        });
+      }else {
+        that.$nextTick(()=>{
+          that.$refs.groupTree.setCheckedKeys([]);
+        });
+      }
+    },
+    companyId(val) {
+      const that = this;
+      if (!!val) {
+        that.getGroup();
+      }
+    }
+  },
+
+};
+</script>
+<style lang="less" scoped>
+  .bind-store-body {
+    width: 331px;
+    padding: 10px;
+    margin: 20px 0 0 0 ;
+    border: 1px solid #e4e7ed;
+    .w-215 {
+      width: 215px;
+    }
+
+    .w-115 {
+      width: 115px;
+    }
+
+    .select-tree-wrap {
+      height: 323px;
+      overflow-y: auto;
+      .el-tree {
+        width: 309px;
+        height: 323px;
+        overflow-x: auto;
+        .custom-tree-node {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          font-size: 14px;
+          padding-right: 8px;
+        }
+      }
+    }
+  }
+</style>

src/components/app/app-select-store.vue

+<!--
+ * @Descripttion:  应用内选择门店
+ * @version: 1.0.0
+ * @Author: 无尘
+ * @Date: 2020-11-17 14:03:15
+ * @LastEditors: 无尘
+ * @LastEditTime: 2020-11-17 14:22:41
+-->
+<!--
+  <app-select-store :company-id="companyId" :store-type="storeType" ></app-select-store>
+  import appSelectStore from '@/components/set/app-select-store.vue';
+  -->
+<template>
+  <div class="daily-store-select">
+    <div class="select-search">
+      <el-input placeholder="请输入门店名称/代码" v-model="searchSelect" style="width: 100%;" clearable @keyup.native="value => toInput(value, searchSelect)" @clear="clearSearch"> <i slot="prefix" class="el-input__icon el-icon-search"></i> </el-input>
+    </div>
+    <!-- <div class="checkbox border-box" style="padding: 15px 20px;">
+      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
+    </div> -->
+    <div class="el-scrollbar define-search-select">
+      <div class="el-select-dropdown__wrap el-scrollbar__wrap" style="overflow: auto;">
+        <el-checkbox-group v-model="dailyRuleForm.stores" @change="handleStoresChange" :max="50">
+          <ul class="el-scrollbar__view el-select-dropdown__list">
+            <li :class="['el-select-dropdown__item', item.select ? 'selected hover' : '']" v-for="item in stores" :key="item.storeInfoId" >
+              <el-checkbox :label="item.storeInfoId" >{{ item.storeInfoName }}</el-checkbox>
+            </li>
+            <li v-if="!stores.length" class="text-center"><span>暂无数据</span></li>
+          </ul>
+        </el-checkbox-group>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { _debounce } from '@/common/js/public';
+import fetch from '@/api/merchant-auth.js';
+const { getStoreList } = fetch;
+import showMsg from '@/common/js/showmsg';
+export default {
+  name: 'AppSelectStore',
+  props: {
+    companyId: {
+      type: String,
+      default: ''
+    },
+    storeType: {
+      type: String,
+      default: '1' // 1 门店绑定， 2 门店共享
+    },
+    selectStore: {
+      type: [ Object, Array ],
+      default() {
+        return {};
+      }
+    }
+  },
+  data() {
+    return {
+      checkAll: false, // 全选
+      isIndeterminate: false,
+      searchSelect: '', // 搜索字段
+      stores: [], // 门店列表集合
+      storesCopy: [],
+      dailyRuleForm: {
+        stores: [], // 已选门店id结果集
+      },
+      pageNum: 1,
+      pageSize: 300
+    };
+  },
+  mounted() {
+    const that = this;
+    that.stores = [];
+    that.storesCopy = [];
+    if (!!that.companyId) {
+      that.pageNum = 1;
+      that.getStoreData();
+    }
+    if (!!that.selectStore.length) {
+      that.dailyRuleForm.stores = that.selectStore.map(el=>el.storeInfoId) || [];
+    }else {
+      that.dailyRuleForm.stores = [];
+    }
+  },
+  methods: {
+    /**
+     * @description: 判断提示
+     * @param {Object} data
+     * @author: 无尘
+     */
+    toShowMsg(data) {
+      if (data.bindFlag == 1) {
+        showMsg.showmsg('当前门店已被其他企业绑定，当前企业无法选择！', 'warning');
+      }
+    },
+    /**
+     * @description: 选择改变
+     * @param {Array} value
+     * @author: 无尘
+     */
+    handleStoresChange(value) {
+      const that = this;
+      let arr = [];
+      that.stores.forEach(ele => {
+        if (value.includes(ele.storeInfoId)) {
+          arr.push(ele);
+        }
+      });
+      that.$emit('checkStoreIds', JSON.parse(JSON.stringify(arr)));
+    },
+    /**
+     * @description: 输入
+     * @param {Object} e
+     * @param {String} value
+     * @author: 无尘
+     */
+    toInput: _debounce(function(e, value) {
+      const that = this;
+      if (that.searchSelect != '') {
+        that.stores = [];
+        that.pageNum = 1;
+        that.getStoreData();
+      }
+    }, 500),
+    /**
+     * @description: 清空
+     * @author: 无尘
+     */
+    clearSearch() {
+      const that = this;
+      that.stores = [];
+      that.pageNum = 1;
+      that.getStoreData();
+      // that.stores = JSON.parse(JSON.stringify(that.storesCopy));
+    },
+    /**
+     * @description: 获取门店
+     * @author: 无尘
+     */
+    getStoreData() {
+      const that = this;
+      const para = {
+        search: that.searchSelect,
+        enterpriseId: that.companyId,
+        type: that.storeType,
+        pageNum: that.pageNum,
+        pageSize: that.pageSize
+      };
+      getStoreList(para)
+        .then(res => {
+          if (that.pageNum == 1) {
+            that.stores = JSON.parse(JSON.stringify(res.result.result)) || [];
+            that.storesCopy = JSON.parse(JSON.stringify(res.result.result)) || [];
+          }else {
+            res.result.result.forEach(ele => {
+              that.stores.push(ele);
+              that.storesCopy.push(ele);
+            });
+          }
+          if (that.pageNum * that.pageSize < res.result.totalCount) {
+            that.pageNum ++;
+            that.$nextTick(()=>{
+              that.getStoreData();
+            });
+          }
+        })
+        .catch(function(error) {
+
+        });
+    }
+  },
+  watch: {
+    selectStore: function(newData, oldData) {
+      const that = this;
+      if (!!newData.length) {
+        that.dailyRuleForm.stores = newData.map(el=>el.storeInfoId) || [];
+      }else {
+        that.dailyRuleForm.stores = [];
+      }
+    },
+    companyId(val) {
+      const that = this;
+      if (!!val) {
+        that.pageNum = 1;
+        that.getStoreData();
+      }
+    }
+  }
+};
+</script>
+<style lang="less" scoped>
+  .daily-store-select {
+    position: relative;
+    width: 331px;
+    min-height: 398px;
+    margin: 20px 0 0 0;
+    padding: 10px;
+    border: 1px solid #e4e7ed;
+    .define-search-select {
+      .el-select-dropdown__wrap {
+        max-height: 343px;
+      }
+      .el-checkbox-group {
+        overflow-x: auto;
+        height: 338px;
+        ul {
+          height: 100%;
+          li {
+            overflow: unset;
+            text-overflow: unset;
+          }
+        }
+      }
+    }
+  }
+</style>