Skip to content

H
haoban-4
Commit 7d8e84c1 by 无尘
Options

fix: 修改编辑授权

parent 3d4a8bd2
Showing with 183 additions and 242 deletions
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>
<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>
<el-dialog width="554px" title="添加管理员" :visible.sync="setVisible" append-to-body :before-close="handleClose">
<div class="bind-store-body">
<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" :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>
<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>
</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,17 +59,23 @@ export default {
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));
})
}
}
//selectAdmin(val) {}
},
methods: {
/**
* 加载更多
*/
async loadNode(node, resolve) {
// console.log(node, resolve);
const that = this;
if (node.level === 0) {
return resolve(that.getGroup());
} else if(node.data.hasSonNode) {
// 判断是不是叶子结点
// await that.getStaff(node, node.data, resolve)
}
},
/**
* 判断提示
*/
toShowMsg(node, data) {
......@@ -98,99 +100,50 @@ export default {
}
}, 200),
/**
* 清空
*/
* 清空
*/
clearSearch() {
// const that = this;
return false;
// 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;
}
// 这里还要过滤已选的数据，把非禁用的数据过滤出来
const groups = that.$refs.groupTree.getCheckedNodes();
if (!!groups.length) {
let arr = [];
groups.forEach(ele => {
if (!ele.disabled) {
arr.push(ele)
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;
});
}
resolve(res.result);
if (!data.children) {
that.$set(data, 'children', []);
}
data.children = res.result || [];
that.$forceUpdate();
})
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', '');
}
})
}
})
.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">
......@@ -12,62 +12,65 @@
<div class="right-content">
<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 class="el-select store-item-content admin-select" @click="showAdmin">
<div v-if="!!adminForm.adminList.length" class="el-select__tags">
<span style="display:block;">
<template v-for="(item, index) in adminForm.adminList">
<span class="el-tag el-tag--info el-tag--small" :key="index+'bind'">
<span class="el-select__tags-text">{{ item.staffName || '--' }}</span>
<i class="el-tag__close el-icon-close" @click.stop="delAdmin(index, adminForm.adminList)"></i>
</span>
</template>
</span>
</div>
<div v-if="!adminForm.adminList.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>
<el-form-item label="活动名称" prop="adminList">
<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;">
<template v-for="(item, index) in adminForm.adminList">
<span class="el-tag el-tag--info el-tag--small" :key="index+'bind'">
<span class="el-select__tags-text">{{ item.staffName || '--' }}</span>
<i class="el-tag__close el-icon-close" @click.stop="delAdmin(index, adminForm.adminList)"></i>
</span>
</template>
</span>
</div>
<div v-if="!adminForm.adminList.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>
</div>
</div>
</el-form-item>
<el-form-item label="活动区域" prop="tableData">
<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">
{{scope.row.enterpriseName || '--'}}
</template>
</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">
<span style="display:block;">
<template v-for="(item, index) in scope.row.enterpriseList">
<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>
</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>
</el-form-item>
<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">
{{scope.row.enterpriseName || '--'}}
</template>
</el-table-column>
<el-table-column label="授权范围">
<template slot-scope="scope">
<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.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="delAuth(index, scope.row.bindRange)"></i>
</span>
</template>
</span>
</div>
</div>
</div>
</template>
</el-table-column>
</el-table>
</el-form-item>
</el-form>
<el-radio class="m-l-10" v-model="scope.row.radio" label="2">不授权</el-radio>
</template>
</el-table-column>
</el-table>
</el-form-item>
</el-form>
</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,24 +213,27 @@ export default {
border: 1px solid rgba(228,231,237,1);
}
.store-item-content {
position: relative;
width: 302px;
height: 32px;
overflow: hidden;
}
.store-item-content {
position: relative;
display: inline-block;
vertical-align: middle;
width: 302px;
height: 32px;
overflow: hidden;
white-space: nowrap;
border-radius: 2px;
border: 1px solid #c4c6cf;
cursor: pointer;
box-sizing: border-box;
&.admin-select {
border: none;
}
.el-select__tags {
max-width: 348px;
white-space: nowrap;
border-radius: 2px;
border: 1px solid #c4c6cf;
cursor: pointer;
box-sizing: border-box;
&.admin-select {
border: none;
}
.el-select__tags {
max-width: 348px;
white-space: nowrap;
overflow: hidden;
}
overflow: hidden;
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment