dandelionPlatformToB-uni-v3/root/merchantManagement/teamManage.vue

<template>
	<div class="team-manage-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="dom_1" style="width: calc(100% - 20px);margin: 0 auto;border-radius: 8px;background-color: #fff;position: relative;">
						<div class="">
							<div class="g_flex_row_center" style="padding-top: 10px;">
								<div style="width: 64px;height: 64px;overflow: hidden;margin-right: 10px;" class="g_flex_c g_flex_none">
									<img :src="agencyInfo.logo || 'https://bocai-cms.oss-cn-beijing.aliyuncs.com/web-resource/pugongying/default.svg'" 
											alt="" style="width: 64px;height: 64px;border-radius: 50%;">
								</div>
							</div>
							<div class="g_flex_1" style="padding: 8px 0 16px 0;border-bottom: 1px solid rgba(0, 0, 0, 0.1);">
								<div style="color: #000;font-size: 18px;margin-bottom: 8px;text-align: center;" class="g_ell_1">{{ agencyInfo.fullName }}</div>
								<div style="color: #999;font-size: 16px;text-align: center;" class="g_ell_1">{{ agencyInfo.agencyName }}</div>
							</div>
						</div>

						<i class="iconfont icon-edit-square" style="font-size: 18px;color: #999;position: absolute;right: 12px;top: 12px;"
						   @click="goPage('/root/person/info?active=1')" v-if="false"
						></i>
					</div>
					<view class="dom_2" style="margin-top: 10px;" v-if="applyNum && applyNum > 0">
						<view class="g_p_16 g_bg_f g_radius_8 g_flex_row_between flex_center g_ml_10 g_mr_10" hover-class="thover" 
									@click="goPage('/root/merchantManagement/applyManage')" style="padding: 10px 16px;">
							<view class="g_flex_row_start flex_center" style="width: 100%">
								<img src="https://bocai-cms.oss-cn-beijing.aliyuncs.com/bf586cad-c6f0-4417-86c8-6cf55310ace7_123456.svg" class="g_w_40 g_h_40 g_radius_50 g_flex_none" alt="" />
								<view class="g_flex_column_between g_ml_10 g_flex_1 g_mr_10">
									<view class="g_fs_17 g_c_0 g_mb_4">新的成员</view>
									<view class="g_c_9 g_fs_14" v-if="applyNum">您有{{applyNum}}条申请等待审核</view>
								</view>
								<div  class="g_flex_column_center g_flex_none" >
									<div class="g_flex_row_end">
										<div style="font-size: 14px;background-color: #ff4d4f; color: #fff; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;">
											{{ applyNum }}
										</div>
										<view class="g_flex_column_center">
											<i class="iconfont icon-gengduo11 g_c_c"></i>
										</view>
									</div>
								</div>
							</view>
						</view>
					</view>

					<div class="dom_3 r_box g_ml_10 g_mr_10"  style="margin-top: 10px;" data-remark="团队列表"> 
						<div data-remark="成员列表" v-for="(item, index) in memberList" :key="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 ? '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, index) in getDisplayRoles(item.agencyRoleNameList)" 
												:key="index" 
												: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 data-remark="部门列表">
							<div v-for="(item,index) in teamList" :key="index" class="g_flex_row_start titem" style="padding: 0px 10px;" @click="goChildGroup(item)">
								<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 rtime" :style="index === teamList.length - 1 ? 'padding: 9px 0px;height: 60px;' : 'padding: 9px 0px;border-top: 0.5px solid #eee;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>
					</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-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 32px;">
					<div style="font-size: 17px;color: rgba(2, 122, 255, 1);" @click="addMemberShow = true">添加成员</div>
					<div 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="goPage('/root/person/info?active=1')">更多管理</div>
				</div>
			</slot>
		</g-panel-fixed>
	</div>
</template>

<script>
import gPanelFormItem from "@/components/panel/formItem.vue";
export default {
	components: {
		gPanelFormItem,
	},
	data() {
		return {
			memberList: [],
			addMemberShow: false,
			addTeamShow: false,
			addTeamLoading: false,
			teamName: "",
			agencyInfo: uni.getStorageSync("agencyInfo"),
			applyNum: 0,
			teamList: [],
		};
	},
	onShow() {
		let that = this;
		this.getNewApplyNum(()=>{
			that.getMemberList();
		});
	},
	onLoad() {},
	created() {
		console.log(123123);
	},

	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);
			}
		},
		getMemberList() {
			let that = this;
			uni.showLoading({
				title: "加载中...",
			});
	    // 部门列表
			that.G.Post('/yishoudan/agency/team/list',{},(teamRes)=>{
				console.log('部门列表：', teamRes.list)

				// 成员列表
				this.G.Get(this.api.order_peopleList, { 
					pageSize: 500,
					agencyTeamIds:-1
				}, (res) => {
					console.log("成员列表：", res);
					that.memberList = res.recordList;
					that.memberList.forEach((item) => {
						item.agencyRoleNameList = item.agencyRoleName.split("；");
						item.agencyRoleNameList = item.agencyRoleNameList.sort(this.compare);
					});

					that.teamList = teamRes.list;

					uni.hideLoading();
				});
			})		
		},
		addMember() {
			this.addMemberShow = true;
		},
		editMember(_item) {
			uni.navigateTo({
				url: "/root/merchantManagement/addOrUpdataMember?info=" + JSON.stringify(_item),
			});
		},
		goPage(url) {
			uni.navigateTo({
				url,
			});
			this.addMemberShow = false;
		},
		getNewApplyNum(callback=() => {}) {
			let that = this;
			this.G.Get(this.api.order_getNewApplyNum, {}, (res) => {
				console.log("order_getNewApplyNum", res);
				that.applyNum = res;
				callback(res);
			});
		},
		openChoose() {
			console.log("openChoose");
			uni.showActionSheet({
        title: "请选择操作",
				itemList: ["添加团队成员", "修改企业资料"],
				success: (res) => {
					console.log(res);
					if (res.tapIndex == 0) {
						this.goPage("/root/merchantManagement/addOrUpdataMember");
					} else if (res.tapIndex == 1) {
						this.goPage("/root/person/info?active=1");
					}
				},
			});
		},
		// 新增方法：获取要显示的角色列表
		getDisplayRoles(roles) {
			if (!roles || roles.length <= 2) {
				// 过滤掉空值
				return (roles || []).filter(role => role && role.trim());
			}
			// 过滤掉空值并限制最多显示2个加省略号
			const filteredRoles = (roles || []).filter(role => role && role.trim());
			if (filteredRoles.length <= 3) {
				return filteredRoles;
			}
			return [...filteredRoles.slice(0, 3), '...'];
		},
		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() }, (res) => {
				this.addTeamLoading = false;
				uni.showToast({
					title: "添加成功",
					icon: "success",
				});
				this.addTeamShow = false;
				this.teamName = "";
				this.getMemberList();
			}, (err) => {
				this.addTeamLoading = false;
			});
		},
		goChildGroup(item) {
			uni.setStorageSync("childGroup_childs", item.childs || []);
			uni.navigateTo({
				url: `/root/merchantManagement/childGroup?id=${item.id}&teamName=${encodeURIComponent(item.teamName)}&pId=${item.parentId || ''}`,
			});
		}
	},
};
</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;
}
.sticky {
	position: sticky;
	bottom: 0;
	left: 0;
	z-index: 999;
}
</style>