|
|
<template>
|
|
|
<div class="child-group-container g_flex_column_between g_bg_page">
|
|
|
<scroll-view class="g_flex_1" enable-flex :style="{ 'min-height': `calc(100vh - ${0}px)` }" :scroll-y="true">
|
|
|
<div class="g_flex_column_between" :style="{ 'min-height': `calc(100vh - ${0}px)` }">
|
|
|
<div class>
|
|
|
<div class="g_h_10"></div>
|
|
|
<div class="r_box g_ml_10 g_mr_10" style="border-radius: 8px;background-color: #fff;">
|
|
|
<div v-for="(item, index) in memberList" :key="'m_' + item.id" @click="editMember(item)"
|
|
|
class="g_flex_row_between g_fs_18" style="padding: 0 10px">
|
|
|
<div class="g_flex_c g_flex_none g_mr_10">
|
|
|
<img :src="item.avatar || 'https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/pugongying/default.svg'"
|
|
|
alt="" style="width: 40px;height: 40px;border-radius: 50%;">
|
|
|
</div>
|
|
|
<div class="g_flex_column_between g_flex_1"
|
|
|
:style="(index === memberList.length - 1 && teamList.length === 0) ? 'padding: 9px 0;' : 'border-bottom: 0.5px solid #eee;padding: 9px 0;'"
|
|
|
>
|
|
|
<div class="g_flex_1 g_flex_row_start" style="font-size: 17px;color: rgba(0, 0, 0, 0.9);">
|
|
|
{{ item.aliasName || item.userName }}
|
|
|
<div class="g_flex_column_center">
|
|
|
<div class="g_flex_row_start">
|
|
|
<div class="g_fs_12 g_pl_2 g_h_18 g_pr_2 g_radius_4 g_flex_c g_ml_4"
|
|
|
v-for="(role, rIndex) in getDisplayRoles(item.agencyRoleNameList)"
|
|
|
:key="rIndex"
|
|
|
:class="role !== '...' ? (role == '创建人' ? 'creator' : role == '管理员' ? 'manager' : 'member') : ''"
|
|
|
v-show="role && role.trim()">
|
|
|
{{ role }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="g_flex_none" style="font-size: 14px;color: #999999;">
|
|
|
@{{ agencyInfo.fullName }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-for="(item, index) in teamList" :key="'t_' + item.id" @click="goChildGroup(item)"
|
|
|
class="g_flex_row_start" style="padding: 0 10px;">
|
|
|
<div class="g_flex_none g_flex_column_center" style="margin-right: 10px;">
|
|
|
<div class="g_flex_c" style="width: 40px;height: 40px;background-color: rgba(2, 122, 255, 0.1);color: #1890ff;border-radius: 50%;">
|
|
|
<i class="iconfont icon-folder-fill" style="font-size: 20px;"></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="g_flex_1 g_flex_column_center"
|
|
|
:style="index === teamList.length - 1 ? 'padding: 9px 0;height: 60px;' : 'border-bottom: 0.5px solid #eee;padding: 9px 0;height: 60px;'"
|
|
|
>
|
|
|
<div style="font-size: 17px;color: rgba(2, 122, 255, 1);" class="g_ell_1">
|
|
|
{{ item.teamName }}({{ item.userNum }})
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-if="memberList.length === 0 && teamList.length === 0" class="g_text_c g_c_9" style="padding: 40px 0;">
|
|
|
暂无数据
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="g_h_40"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</scroll-view>
|
|
|
|
|
|
<u-popup v-model="addMemberShow" mode="bottom" z-index="999999" border-radius="12" :closeable="false" :mask-close-able="true" @close="addMemberShow = false">
|
|
|
<view class="g_text_c g_bg_f_5 g_fs_17">
|
|
|
<view class="g_bg_f">
|
|
|
<view class="g_c_3">
|
|
|
<view class="g_p_16 g_border_e_t" @click="goPage('/root/merchantManagement/addOrUpdataMember')">手动添加</view>
|
|
|
<view class="g_p_16 g_border_e_t" @click="goPage('/root/merchantManagement/memberApplyQRCode')">微信邀请</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="g_p_16 g_mt_10 g_bg_f" style="padding-bottom: calc(constant(safe-area-inset-bottom) + 16px); padding-bottom: calc(env(safe-area-inset-bottom) + 16px)" @click="addMemberShow = false">取消</view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
|
|
|
<u-popup v-model="operateShow" mode="bottom" z-index="999999" border-radius="12" :closeable="false" :mask-close-able="true" @close="operateShow = false">
|
|
|
<view class="g_text_c g_bg_f_5 g_fs_17">
|
|
|
<view class="g_bg_f">
|
|
|
<view class="g_c_3">
|
|
|
<view class="g_p_16 g_border_e_t" @click="onOperate('editName')">修改当前部门名称</view>
|
|
|
<view class="g_p_16 g_border_e_t" @click="onOperate('delete')">删除当前部门</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="g_p_16 g_mt_10 g_bg_f" style="padding-bottom: calc(constant(safe-area-inset-bottom) + 16px); padding-bottom: calc(env(safe-area-inset-bottom) + 16px)" @click="operateShow = false">取消</view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
|
|
|
<u-modal v-model="editNameShow" width="90%" negativeTop="150" :showTitle="false" :showConfirmButton="false" :maskCloseAble="true">
|
|
|
<div class="g_fs_17 g_text_c">
|
|
|
<div style="padding: 32px 24px">
|
|
|
<div class="g_text_c g_fw_600 g_c_0 g_mb_16">修改当前部门名称</div>
|
|
|
<div class="">
|
|
|
<u-input v-model="editNameValue"
|
|
|
:customStyle="{
|
|
|
fontSize: '17px',
|
|
|
borderRadius: '4px',
|
|
|
backgroundColor: '#fff',
|
|
|
}"
|
|
|
height="80"
|
|
|
border
|
|
|
border-color="#dddddd"
|
|
|
placeholder="请输入部门名称"
|
|
|
placeholder-style="color:#999;font-size: 17px;"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="g_flex_row_center flex_center g_fw_600 g_border_e_t">
|
|
|
<div class="g_flex_1 g_text_c g_border_e_r" hover-class="thover" @click="editNameShow = false" style="height: 56px;line-height: 56px;font-size: 17px;color: #333;">取消</div>
|
|
|
<div class="g_flex_1 g_text_c g_c_sub" hover-class="thover" @click="submitEditName" style="height: 56px;line-height: 56px;font-size: 17px;color: #576b95;">
|
|
|
<u-loading mode="circle" size="16" v-if="editNameLoading"></u-loading>
|
|
|
<span v-else>确定</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</u-modal>
|
|
|
|
|
|
<u-modal v-model="deleteShow" width="90%" negativeTop="150" :showTitle="false" :showConfirmButton="false" :maskCloseAble="true">
|
|
|
<div class="g_fs_17 g_text_c">
|
|
|
<div style="padding: 32px 24px">
|
|
|
<div style="font-size: 17px;color: #000;">确定将"{{ pageTitle }}"删除吗?</div>
|
|
|
</div>
|
|
|
<div class="g_flex_row_center flex_center g_fw_600 g_border_e_t">
|
|
|
<div class="g_flex_1 g_text_c g_border_e_r" hover-class="thover" @click="deleteShow = false" style="height: 56px;line-height: 56px;font-size: 17px;color: #333;">取消</div>
|
|
|
<div class="g_flex_1 g_text_c g_c_sub" hover-class="thover" @click="submitDelete" style="height: 56px;line-height: 56px;font-size: 17px;color: #576b95;">
|
|
|
<u-loading mode="circle" size="16" v-if="deleteLoading"></u-loading>
|
|
|
<span v-else>确定</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</u-modal>
|
|
|
|
|
|
<u-modal v-model="addTeamShow" width="90%" negativeTop="150" :showTitle="false" :showConfirmButton="false" :maskCloseAble="true">
|
|
|
<div class="g_fs_17 g_text_c">
|
|
|
<div style="padding: 32px 24px">
|
|
|
<div class="g_text_c g_fw_600 g_c_0 g_mb_16">添加子部门</div>
|
|
|
<div class="">
|
|
|
<u-input v-model="teamName"
|
|
|
:customStyle="{
|
|
|
fontSize: '17px',
|
|
|
borderRadius: '4px',
|
|
|
backgroundColor: '#fff',
|
|
|
}"
|
|
|
height="80"
|
|
|
border
|
|
|
border-color="#dddddd"
|
|
|
placeholder="请输入子部门名称"
|
|
|
placeholder-style="color:#999;font-size: 17px;"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="g_flex_row_center flex_center g_fw_600 g_border_e_t">
|
|
|
<div class="g_flex_1 g_text_c g_border_e_r" hover-class="thover" @click="addTeamShow = false" style="height: 56px;line-height: 56px;font-size: 17px;color: #333;">取消</div>
|
|
|
<div class="g_flex_1 g_text_c g_c_sub" hover-class="thover" @click="submitAddTeam" style="height: 56px;line-height: 56px;font-size: 17px;color: #576b95;">
|
|
|
<u-loading mode="circle" size="16" v-if="addTeamLoading"></u-loading>
|
|
|
<span v-else>确定</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</u-modal>
|
|
|
|
|
|
<div style="height: 40px;"></div>
|
|
|
<g-panel-fixed>
|
|
|
<slot>
|
|
|
<div class="g_flex_row_between" style="padding: 0 10px;">
|
|
|
<div style="font-size: 17px;color: rgba(2, 122, 255, 1);" @click="addMemberShow = true">添加成员</div>
|
|
|
<div v-if="!hideAddTeam" style="font-size: 17px;color: rgba(2, 122, 255, 1);" @click="addTeamShow = true">添加子部门</div>
|
|
|
<div style="font-size: 17px;color: rgba(2, 122, 255, 1);" @click="operateShow = true">操作</div>
|
|
|
<div style="font-size: 17px;color: rgba(2, 122, 255, 1);" @click="goPage('/root/person/info?active=1')">更多管理</div>
|
|
|
</div>
|
|
|
</slot>
|
|
|
</g-panel-fixed>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
memberList: [],
|
|
|
teamList: [],
|
|
|
currentId: "",
|
|
|
currentParentId: "",
|
|
|
pageTitle: "",
|
|
|
addMemberShow: false,
|
|
|
operateShow: false,
|
|
|
editNameShow: false,
|
|
|
editNameLoading: false,
|
|
|
editNameValue: "",
|
|
|
deleteShow: false,
|
|
|
deleteLoading: false,
|
|
|
addTeamShow: false,
|
|
|
addTeamLoading: false,
|
|
|
teamName: "",
|
|
|
hideAddTeam: false,
|
|
|
agencyInfo: uni.getStorageSync("agencyInfo"),
|
|
|
};
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
this.currentId = options.id || "";
|
|
|
this.currentParentId = options.pId || "";
|
|
|
this.pageTitle = decodeURIComponent(options.teamName || "");
|
|
|
this.editNameValue = this.pageTitle;
|
|
|
uni.setNavigationBarTitle({
|
|
|
title: this.pageTitle,
|
|
|
});
|
|
|
},
|
|
|
onShow() {
|
|
|
this.getList();
|
|
|
},
|
|
|
methods: {
|
|
|
compare(a, b) {
|
|
|
let sortList = ["创建人", "管理员", "成员"];
|
|
|
if (sortList.includes(a) && sortList.includes(b)) {
|
|
|
return sortList.indexOf(a) - sortList.indexOf(b);
|
|
|
} else if (sortList.includes(a)) {
|
|
|
return -1;
|
|
|
} else if (sortList.includes(b)) {
|
|
|
return 1;
|
|
|
} else {
|
|
|
return a.localeCompare(b);
|
|
|
}
|
|
|
},
|
|
|
getDisplayRoles(roles) {
|
|
|
if (!roles || roles.length <= 2) {
|
|
|
return (roles || []).filter(role => role && role.trim());
|
|
|
}
|
|
|
const filteredRoles = (roles || []).filter(role => role && role.trim());
|
|
|
if (filteredRoles.length <= 3) {
|
|
|
return filteredRoles;
|
|
|
}
|
|
|
return [...filteredRoles.slice(0, 3), '...'];
|
|
|
},
|
|
|
getList() {
|
|
|
let that = this;
|
|
|
uni.showLoading({
|
|
|
title: "加载中...",
|
|
|
});
|
|
|
that.G.Post('/yishoudan/agency/team/list', {}, (teamRes) => {
|
|
|
let currentChild = that.findChildById(teamRes.list, that.currentId);
|
|
|
that.teamList = currentChild ? (currentChild.childs || []) : [];
|
|
|
that.hideAddTeam = currentChild && currentChild.levels > 4;
|
|
|
|
|
|
that.G.Get(that.api.order_peopleList, {
|
|
|
pageSize: 500,
|
|
|
agencyTeamIds: that.currentId,
|
|
|
}, (res) => {
|
|
|
that.memberList = res.recordList || [];
|
|
|
that.memberList.forEach((item) => {
|
|
|
item.agencyRoleNameList = item.agencyRoleName.split("；");
|
|
|
item.agencyRoleNameList = item.agencyRoleNameList.sort(that.compare);
|
|
|
});
|
|
|
uni.hideLoading();
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
editMember(_item) {
|
|
|
uni.navigateTo({
|
|
|
url: "/root/merchantManagement/addOrUpdataMember?info=" + JSON.stringify(_item),
|
|
|
});
|
|
|
},
|
|
|
goChildGroup(item) {
|
|
|
uni.setStorageSync("childGroup_childs", item.childs || []);
|
|
|
uni.navigateTo({
|
|
|
url: `/root/merchantManagement/childGroup?id=${item.id}&teamName=${encodeURIComponent(item.teamName)}&pId=${this.currentId}`,
|
|
|
});
|
|
|
},
|
|
|
goPage(url) {
|
|
|
uni.navigateTo({
|
|
|
url,
|
|
|
});
|
|
|
this.addMemberShow = false;
|
|
|
this.operateShow = false;
|
|
|
},
|
|
|
onOperate(type) {
|
|
|
this.operateShow = false;
|
|
|
if (type === 'editName') {
|
|
|
this.editNameValue = this.pageTitle;
|
|
|
this.editNameShow = true;
|
|
|
} else if (type === 'delete') {
|
|
|
this.deleteShow = true;
|
|
|
}
|
|
|
},
|
|
|
submitEditName() {
|
|
|
if (!this.editNameValue || !this.editNameValue.trim()) {
|
|
|
uni.showToast({
|
|
|
title: "请输入部门名称",
|
|
|
icon: "none",
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
if (this.editNameLoading) return;
|
|
|
this.editNameLoading = true;
|
|
|
this.G.Post("/yishoudan/agency/team/update", {
|
|
|
teamName: this.editNameValue.trim(),
|
|
|
recordId: this.currentId,
|
|
|
parentId: this.currentParentId,
|
|
|
}, (res) => {
|
|
|
this.editNameLoading = false;
|
|
|
uni.showToast({
|
|
|
title: "修改成功",
|
|
|
icon: "success",
|
|
|
});
|
|
|
this.editNameShow = false;
|
|
|
this.pageTitle = this.editNameValue.trim();
|
|
|
uni.setNavigationBarTitle({
|
|
|
title: this.pageTitle,
|
|
|
});
|
|
|
this.getList();
|
|
|
}, (err) => {
|
|
|
this.editNameLoading = false;
|
|
|
});
|
|
|
},
|
|
|
submitDelete() {
|
|
|
if (this.deleteLoading) return;
|
|
|
this.deleteLoading = true;
|
|
|
this.G.Post(`/yishoudan/agency/team/del/${this.currentId}`, {}, (res) => {
|
|
|
this.deleteLoading = false;
|
|
|
uni.showToast({
|
|
|
title: "删除成功",
|
|
|
icon: "success",
|
|
|
});
|
|
|
uni.navigateBack();
|
|
|
}, (err) => {
|
|
|
this.deleteLoading = false;
|
|
|
});
|
|
|
},
|
|
|
submitAddTeam() {
|
|
|
if (!this.teamName || !this.teamName.trim()) {
|
|
|
uni.showToast({
|
|
|
title: "请输入子部门名称",
|
|
|
icon: "none",
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
if (this.addTeamLoading) return;
|
|
|
this.addTeamLoading = true;
|
|
|
this.G.Post("/yishoudan/agency/team/add", {
|
|
|
teamName: this.teamName.trim(),
|
|
|
parentId: this.currentId,
|
|
|
}, (res) => {
|
|
|
this.addTeamLoading = false;
|
|
|
uni.showToast({
|
|
|
title: "添加成功",
|
|
|
icon: "success",
|
|
|
});
|
|
|
this.addTeamShow = false;
|
|
|
this.teamName = "";
|
|
|
this.getList();
|
|
|
}, (err) => {
|
|
|
this.addTeamLoading = false;
|
|
|
});
|
|
|
},
|
|
|
findChildById(list, id) {
|
|
|
for (let item of list) {
|
|
|
if (String(item.id) === String(id)) {
|
|
|
return item;
|
|
|
}
|
|
|
if (item.childs && item.childs.length > 0) {
|
|
|
let found = this.findChildById(item.childs, id);
|
|
|
if (found) return found;
|
|
|
}
|
|
|
}
|
|
|
return null;
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.creator {
|
|
|
color: #fff;
|
|
|
background-color: #ff4d4f;
|
|
|
zoom: 0.9;
|
|
|
line-height: 18px;
|
|
|
}
|
|
|
.member {
|
|
|
color: #fff;
|
|
|
background-color: rgba(0, 0, 0, 0.25);
|
|
|
zoom: 0.9;
|
|
|
line-height: 18px;
|
|
|
}
|
|
|
.manager {
|
|
|
background-color: rgba(0, 145, 255, 1);
|
|
|
color: #fff;
|
|
|
zoom: 0.9;
|
|
|
line-height: 18px;
|
|
|
}
|
|
|
</style>
|