fix: 修改编辑授权

src/components/company/store-auth-group.vue

@@ -4,7 +4,7 @@
  * @Author: 无尘
  * @Date: 2020-07-21 10:10:57
  * @LastEditors: 无尘
- * @LastEditTime: 2020-08-05 10:35:14
+ * @LastEditTime: 2020-08-05 13:49:08
  -->
 <!--
   门店绑定-选择分组
@@ -19,7 +19,7 @@
     <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 }" @click="toShowMsg(node, data)">
-          <span class="font-14 color-606266">{{ node.label }}</span><span v-if="data.bindFlag == 1" class="font-12 color-909399">{{ data.bindWxEnterpriseName }} 企业已授权</span>
+          <span class="font-14 color-606266">{{ node.label }}</span><span v-if="data.bindFlag == 1" class="font-12 color-909399 p-l-10">{{ data.bindWxEnterpriseName }} 企业已授权</span>
         </span>
       </el-tree>
     </div>

src/components/company/store-auth-store.vue

@@ -4,7 +4,7 @@
  * @Author: 无尘
  * @Date: 2020-07-21 10:10:57
  * @LastEditors: 无尘
- * @LastEditTime: 2020-08-04 10:41:05
+ * @LastEditTime: 2020-08-05 13:49:19
  -->
 <!--
   门店绑定-选择门店(限制50个)
@@ -26,7 +26,7 @@
           <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" @click.stop="toShowMsg(item)">
               <el-checkbox :disabled="item.bindFlag == 1" :label="item.storeInfoId" >{{ item.storeInfoName }}</el-checkbox>
-              <span v-if="item.bindFlag == 1" class="font-12 color-909399">{{ data.bindWxEnterpriseName }} 企业已授权</span>
+              <span v-if="item.bindFlag == 1" class="font-12 color-909399 p-l-10">{{ data.bindWxEnterpriseName }} 企业已授权</span>
             </li>
             <li v-if="!stores.length" class="text-center"><span>暂无数据</span></li>
           </ul>

src/components/set/select-admin.vue

@@ -4,43 +4,39 @@
  * @Author: 无尘
  * @Date: 2020-07-21 10:10:57
  * @LastEditors: 无尘
- * @LastEditTime: 2020-08-05 11:13:56
+ * @LastEditTime: 2020-08-05 14:53:53
  -->
 <!--
   选择管理员
-  <select-admin :selectGroup="selectGroup" @checkGroupIds="checkGroupIds"></select-admin>
+  <select-admin :selectAdmin="selectAdmin" @checkAdmins="checkAdmins"></select-admin>
   import selectAdmin from '@/components/set/select-admin.vue';
   -->
 <template>
+  <el-dialog width="554px" title="添加管理员" :visible.sync="setVisible" append-to-body :before-close="handleClose">
     <div class="bind-store-body">
-    <div class="select-search">
+      <div class="font-14 color-606266">已选择 <span class="color-303133">{{}}</span> 人</div>
+      <div class="select-search m-t-10">
         <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 }" @click="toShowMsg(node, data)">
-          <span class="font-14 color-606266">{{ node.label }}</span><span v-if="data.bindFlag == 1" class="font-12 color-909399">{{ data.bindWxEnterpriseName }} 企业已授权</span>
+        <el-tree ref="groupTree" :filter-node-method="filterNode" :load="loadNode" lazy :data="groupData" :props="defaultProps" :expand-on-click-node="false" >
+          <span class="custom-tree-node"  slot-scope="{ node, data }"  @click="toShowMsg(node, data)">
+            <el-checkbox v-if="data.isPeople" :disabled="data.bindFlag == 1" v-model="data.checked"></el-checkbox><span class="font-14 color-606266 p-l-10">{{ node.label }}</span><span v-if="data.bindFlag == 1" class="font-12 color-909399">已选中</span>
           </span>
         </el-tree>
       </div>
     </div>
+  </el-dialog>
 </template>
 <script>
 import {  _debounce } from '@/common/js/public';
-import fetch from '@/api/merchantAuth.js';
-const { getGroupList } = fetch;
+import fetch from '@/api/contact.js';
+const { getCompanyDepartList, getStaffList } = fetch;
 import showMsg from '@/common/js/showmsg';
 export default {
   props: {
-    companyId: {
-      type: String,
-      default: ''
-    },
-    storeType: {
-      type: String,
-      default: '1' // 1 门店绑定， 2 门店共享
-    },
-    selectGroup: {
+
+    selectAdmin: {
       type: [Object, Array],
       default () {
         return {};
@@ -54,7 +50,7 @@ export default {
       groupDataCopy: [],
       defaultProps: {
         children: 'children',
-        label: 'storeGroupName'
+        label: 'label'
       }
     };
   },
@@ -63,16 +59,22 @@ export default {
     searchSelect(val) {
       this.$refs.groupTree.filter(val);
     },
-    selectGroup(val) {
+    //selectAdmin(val) {}
+  },
+  methods: {
+    /**
+     * 加载更多
+     */
+    async loadNode(node, resolve) {
+      // console.log(node, resolve);
       const that = this;
-      if (val.length) {
-        that.$nextTick(()=>{
-          that.$refs.groupTree.setCheckedKeys(val.map(ele=>ele.storeGroupId));
-        })
-      }
+      if (node.level === 0) {
+        return resolve(that.getGroup());
+      } else if(node.data.hasSonNode) {
+        // 判断是不是叶子结点
+        // await that.getStaff(node, node.data, resolve)
       }
     },
-  methods: {
     /**
      *  判断提示
      */
@@ -106,91 +108,42 @@ export default {
       // that.groupData = JSON.parse(JSON.stringify(that.groupDataCopy));
     },
     /**
-     *  选择 tree 节点,获取选择节点信息
+     * 获取人
      */
-    checkGroup: function(e, checkedKeys) {
+    getStaff(node, data, resolve) {
       const that = this;
-      // 如果是共享的也要限制勾选父级子级禁用
-      /*  if (that.storeType == 2) {
-        that.$emit('checkGroupIds', that.$refs.groupTree.getCheckedNodes());
-        return false
-      } */
-      if(!!e.children) {
-        // 父级已被绑定，子级要红色显示（暂时去掉）
-        const className = document.getElementById(e.storeGroupId).previousElementSibling.children[0].className;
-        const parentNode = !!that.$refs.groupTree.getNode(e.storeGroupId) ? that.$refs.groupTree.getNode(e.storeGroupId).parent : '';
-
-        const checkFlag = checkedKeys.checkedKeys.includes(e.storeGroupId);
-        // 选择并且父级已绑定
-        if (className.includes('is-checked') && !!parentNode &&parentNode.data.bindFlag == 1) {
-          // document.getElementById(e.storeGroupId).previousElementSibling.children[0].children[0].style.borderColor = '#f5222d';
-          // document.getElementById(e.storeGroupId).previousElementSibling.children[0].children[0].style.backgroundColor = '#f5222d';
-        }/* else {
-          document.getElementById(e.storeGroupId).previousElementSibling.children[0].children[0].style.borderColor = '#dcdfe6';
-          document.getElementById(e.storeGroupId).previousElementSibling.children[0].children[0].style.backgroundColor = '#ffffff';
-        } */
-        // 取消红色
-        if (!checkFlag) {
-          document.getElementById(e.storeGroupId).previousElementSibling.children[0].children[0].setAttribute('style', '');
-        }
-
-        that.$refs.groupTree.setChecked(e.storeGroupId,checkFlag,true)
-        e.children.forEach(ele => {
-          that.$refs.groupTree.setChecked(ele.storeGroupId,checkFlag,true);
-          if (checkFlag) {
-            ele.disabled = true;
-          }else {
-            ele.disabled = ele.bindFlag ? true :false;
-          }
-          // 递归子级禁用和选中
-          if (!!ele.children && !!ele.children.length) {
-            that.checkChild(ele, checkFlag);
+      const para = {
+        departmentId: data.departmentId,
+        wxEnterpriseId: that.wxEnterpriseId
+      };
+      if (node && !data.hasSonNode ) {
+        resolve([]);
+        return false;
       }
+      getStaffList(para)
+        .then(res => {
+          if (!!res.result && res.result.length) {
+            res.result.forEach(ele => {
+              ele.children = [];
+              ele.isPeople = true;
+              ele.checked = false; // 还需要根据已选数据设置
+              ele.label = ele.staffName;
             });
           }
-      // 这里还要过滤已选的数据，把非禁用的数据过滤出来
-      const groups = that.$refs.groupTree.getCheckedNodes();
-      if (!!groups.length) {
-        let arr = [];
-        groups.forEach(ele => {
-          if (!ele.disabled) {
-            arr.push(ele)
-          }
-        })
-        that.$emit('checkGroupIds', arr);
-      }else {
-        that.$emit('checkGroupIds', []);
-      }
-      that.$nextTick(()=> {
-        // 被禁用时的红色,去掉样式
-        const nodes = document.querySelectorAll('.el-checkbox__input');
-        if (!!nodes && !!nodes.length) {
-          nodes.forEach(ele => {
-            if (ele.className.includes('is-checked')&& ele.className.includes('is-disabled')) {
-              ele.children[0].setAttribute('style', '');
-            }
-          })
+          resolve(res.result);
+          if (!data.children) {
+            that.$set(data, 'children', []);
           }
+          data.children = res.result || [];
+          that.$forceUpdate();
         })
+        .catch(function(error) {
+
+        });
     },
     /**
-     *  checkchild
+     * 处理分组
      */
-    checkChild(arr,checkFlag) {
-      const that = this;
-      arr.children.forEach(ele => {
-        that.$refs.groupTree.setChecked(ele.storeGroupId,checkFlag,true);
-        if (checkFlag) {
-          ele.disabled = true;
-        }else {
-          ele.disabled = ele.bindFlag ? true :false;
-        }
-        // 递归子级禁用和选中
-        if (!!ele.children && !!ele.children.length) {
-          that.checkChild(ele, checkFlag);
-        }
-      })
-    },
     treeData(data) {
       let tree = data.filter(father => {
         //循环所有项
@@ -210,69 +163,25 @@ export default {
     },
 
     /**
-     * 设置回显数据
-     */
-    setSelectCheck() {
-      const that = this;
-      const ids = that.selectGroup.map(ele=>ele.storeGroupId);
-      that.groupData.forEach(ele => {
-        // 如果父级选中了，设置子级禁用
-        if (ids.includes(ele.storeGroupId) && !!ele.children.length) {
-          that.checkChild(ele, true);
-        }
-        // 如果父级没有选中，查找子级，再判断父级有没有禁用
-        if (!ids.includes(ele.storeGroupId)) {
-          that.disableChild(ele, ids);
-        }
-      })
-    },
-    /**
-     *  disableChild
-     */
-    disableChild(arr,ids) {
-      const that = this;
-      arr.children.forEach(ele => {
-        // 如果父级选中了，设置子级禁用
-        if (ids.includes(ele.storeGroupId) && !!ele.children.length) {
-          that.checkChild(ele, true);
-        }
-        // 如果父级没有选中，查找子级，再判断父级有没有禁用
-        if (!ids.includes(ele.storeGroupId) && !!ele.children.length) {
-          that.disableChild(ele,ids);
-        }
-      })
-    },
-    /**
-     * 获取门店分组
+     * 获取分组
      */
     getGroup() {
       const that = this;
-      const para = {
-        type: that.storeType,
-        enterpriseId: that.companyId
-      };
-
-      getGroupList(para)
+      const para = {};
+      getCompanyDepartList(para)
         .then(async res => {
           if (!!res.result && res.result.length) {
             res.result.forEach(ele => {
               ele.expand = false;
               ele.children = [];
-              ele.disabled = ele.bindFlag == 1? true : false;
-              ele.label = ele.storeGroupName;
+              ele.isPeople = false;
+              ele.label = ele.departmentName;
             });
           }
           that.groupData = await that.treeData(JSON.parse(JSON.stringify(res.result))) || [];
           // 存一份数据自己搜索
-          //console.log(that.groupData)
           that.groupDataCopy = JSON.parse(JSON.stringify(res.result));
-          that.$nextTick(()=>{
-            // 如果是共享门店，也去设置禁用子级
-            /*if (that.storeType == 2) {
-              return false;
-            }*/
-            that.setSelectCheck();
-          })
+
         })
         .catch(function(error) {
 
@@ -283,11 +192,6 @@ export default {
   mounted() {
     const that = this;
     that.getGroup();
-    if (that.selectGroup.length) {
-      that.$nextTick(()=>{
-        that.$refs.groupTree.setCheckedKeys(that.selectGroup.map(ele=>ele.storeGroupId));
-      })
-    }
   }
 };
 </script>

src/views/business/new-auth-merchant.vue

@@ -4,7 +4,7 @@
  * @Author: 无尘
  * @Date: 2019-03-20 14:36:37
  * @LastEditors: 无尘
- * @LastEditTime: 2020-08-04 16:44:05
+ * @LastEditTime: 2020-08-05 15:29:51
  -->
 <template>
   <div class="my-customer-wrap common-set-wrap">
@@ -293,8 +293,8 @@ export default {
         shareRange: that.authForm.shareStoreMode != 0 ? that.authForm.shareStoreMode == 1 ? that.authForm.shareRange.map(ele=>ele.storeGroupId).join(',') : that.authForm.shareRange.map(ele=>ele.storeInfoId).join(',') : '',
         bindRange: that.authForm.bindStoreMode != 0 ? that.authForm.bindStoreMode == 1 ? that.authForm.bindRange.map(ele=>ele.storeGroupId).join(',') : that.authForm.bindRange.map(ele=>ele.storeInfoId).join(',') : '',
         auditReason: that.authForm.auditReason,
-        shareStoreMode: String(that.authForm.shareStoreMode), // 0 全部 1部分分组 2 部分门店
-        bindStoreMode: String(that.authForm.bindStoreMode),
+        shareStoreMode: !that.authForm.shareRange.length && that.authForm.shareStoreMode != 0 ? '' : String(that.authForm.shareStoreMode), // 0 全部 1部分分组 2 部分门店
+        bindStoreMode: !that.authForm.bindRange.length && that.authForm.bindStoreMode != 0 ? '' : String(that.authForm.bindStoreMode),
         auditorName: that.auditorName
       }
       postEnterpriseAuth(para)

src/views/enterprise/edit-admin.vue

@@ -4,7 +4,7 @@
  * @Author: 无尘
  * @Date: 2019-03-20 14:36:37
  * @LastEditors: 无尘
- * @LastEditTime: 2020-08-05 12:53:36
+ * @LastEditTime: 2020-08-05 14:52:20
  -->
 <template>
   <div class="my-customer-wrap common-set-wrap">
@@ -13,7 +13,8 @@
       <div class="apps-content-right border-box">
         <el-form :model="adminForm" :rules="rules" ref="adminForm" label-width="100px" >
           <el-form-item label="活动名称" prop="adminList">
-          <div class="admin-list-wrap">
+            <div v-if="$route.query.staffId">{{ adminName || '--'}}</div>
+            <div v-if="!$route.query.staffId" class="admin-list-wrap">
               <div class="el-select store-item-content admin-select" @click="showAdmin">
                 <div v-if="!!adminForm.adminList.length" class="el-select__tags">
                   <span style="display:block;">
@@ -31,7 +32,7 @@
               </div>
             </div>
           </el-form-item>
-        <el-form-item label="活动区域" prop="tableData">
+          <el-form-item label="活动区域" prop="enterpriseList">
             <el-table ref="multipleTable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width: 100%">
               <el-table-column label="商户名称" width="150">
                 <template slot-scope="scope">
@@ -40,21 +41,20 @@
               </el-table-column>
               <el-table-column label="授权范围">
                 <template slot-scope="scope">
-                <div class="el-select store-item-content" @click="showStore(1)">
-                  <div v-if="!!scope.row.enterpriseList.length" class="el-select__tags">
+                  <el-radio v-model="scope.row.radio" label="1">授权</el-radio>
+                  <div v-if="scope.row.radio==1" class="el-select store-item-content" @click="showAuth">
+                    <div class="el-select__tags">
                       <span style="display:block;">
-                      <template v-for="(item, index) in scope.row.enterpriseList">
+                        <template v-for="(item, index) in scope.row.bindRange">
                           <span class="el-tag el-tag--info el-tag--small" :key="index+'bind'">
                             <span class="el-select__tags-text">{{ item.storeInfoName || item.storeGroupName }}</span>
-                          <i class="el-tag__close el-icon-close" @click.stop="delStore(index, scope.row.enterpriseList)"></i>
+                            <i class="el-tag__close el-icon-close" @click.stop="delAuth(index, scope.row.bindRange)"></i>
                           </span>
                         </template>
                       </span>
                     </div>
-                  <div v-if="!scope.row.enterpriseList.length" class="add-admin-btn font-14 color-606266 cursor-pointer" @click="addAdmin">
-                    <span class="iconfont icontianjiajiahaowubiankuang font-12"></span><span class="p-l-10">添加</span>
-                  </div>
                   </div>
+                  <el-radio class="m-l-10" v-model="scope.row.radio" label="2">不授权</el-radio>
                 </template>
               </el-table-column>
             </el-table>
@@ -63,11 +63,14 @@
       </div>
 
     </div>
+    <select-admin v-if="showAdminFlag" :selectAdmin="adminForm.adminList" @checkAdmins="checkAdmins"></select-admin>
+
     <!-- <vue-gic-footer></vue-gic-footer> -->
   </div>
 </template>
 <script>
 import navCrumb from '@/components/nav/nav.vue';
+import selectAdmin from '@/components/set/select-admin.vue';
 import fetch from '@/api/merchantAuth.js';
 const { getAuthEnterprise } = fetch;
 // import { _debounce } from '@/common/js/public';
@@ -90,18 +93,25 @@ export default {
       adminName: !!this.$route.query.staffName ? this.$route.query.staffName : '',
       adminForm: {
         adminList: [],
-        tableData: [],
+        enterpriseList: [],
       },
       rules: {
         adminList: [
           { type: 'array', required: true, message: '请选择管理员', trigger: 'change' },
         ],
-        tableData: [
+        enterpriseList: [
           { type: 'array', required: true, message: '请选择授权范围', trigger: 'change' },
         ]
       },
-      tableData: [],
-      showAdminFlag: false,
+      tableData: [{
+        enterpriseId: '',
+        enterpriseName: '',
+        radio: '1',
+        bindStoreMode: '',
+        bindRange: [],
+      }],
+      showAdminFlag: false, // 显示选择管理员
+      showAuthFlag: false // 显示右侧门店授权范围
     };
   },
   computed: {},
@@ -111,6 +121,10 @@ export default {
      */
     showAdmin() {
       const that = this;
+      // 编辑不可再选管理员
+      if (that.$route.query.staffId) {
+        return false
+      }
       that.showAdminFlag = true;
     },
     closeAdmin() {
@@ -118,6 +132,25 @@ export default {
       that.showAdminFlag = false;
     },
     /**
+     * 删除已选管理员
+     */
+    delAdmin(index, arr) {
+      arr.splice(index, 1);
+    },
+    /**
+     * 显示授权
+     */
+    showAuth(){
+      const that = this;
+      that.showAuthFlag = true;
+    },
+    /**
+     * 删除已选授权
+     */
+    delAuth(index, arr) {
+      arr.splice(index, 1);
+    },
+    /**
      * 路由跳转
      */
     changeRoute(path) {
@@ -156,7 +189,8 @@ export default {
     document.documentElement.style.backgroundColor = '#fff';
   },
   components: {
-    navCrumb
+    navCrumb,
+    selectAdmin
   }
 };
 </script>
@@ -179,8 +213,12 @@ export default {
         border: 1px solid rgba(228,231,237,1);
 
       }
+
+    }
     .store-item-content {
       position: relative;
+      display: inline-block;
+      vertical-align: middle;
       width: 302px;
       height: 32px;
       overflow: hidden;
@@ -199,7 +237,6 @@ export default {
       }
     }
   }
-  }
 }
 
 </style>