<template> <!-- 单呼群呼弹框 --> <el-dialog v-model="props.dialogShow" :close-on-click-modal="false" modal-class="pmpSitNewDialog" class="contactBoxRY" append-to-body width="900px" z-index="9999" center :before-close="closeDalog" > <div class="dialogTitle"> <div class="title">融云通讯录</div> <div class="closeIcon" @click="closeDalog"></div> </div> <div> <el-tabs v-model="activeName" :stretch="true" class="demo-tabs" @tab-click="changeTabs" > <el-tab-pane label="联系人" name="first"></el-tab-pane> <el-tab-pane label="群呼" name="second"></el-tab-pane> </el-tabs> </div> <!-- 搜索 --> <div v-if="activeName == 'first'" v-loading="tableInfo.loading" element-loading-background="rgba(3, 26, 47, 0.3)" > <el-form :model="parmsTable" inline style="padding-left: 10px"> <el-form-item> <el-input v-model="parmsTable.account" placeholder="联系人/电话" @keyup.enter="onSubmit" /> </el-form-item> <el-form-item v-show="false"> <el-input v-model="parmsTable.account" placeholder="联系人/电话" /> </el-form-item> <el-form-item> <el-button type="primary" icon="search" @click="onSubmit">搜索</el-button> </el-form-item> </el-form> <div class="tableRY"> <el-table :data="tableData" style="width: 100%" :border="true"> <el-table-column label="联系人" prop="name" align="center"> </el-table-column> <el-table-column label="电话" prop="phone" align="center"> <template #default="scope"> <span>{{ geTel(scope.row.phone) }}</span> </template> </el-table-column> <el-table-column label="在线状态" prop="userTokenList" align="center"> <template #default="scope"> <span v-for="item in scope.row.userTokenList" :key="item"> <span :class="item.isOnlion == 1 ? 'onlinery' : 'offlinery'"> <span>{{ item.registerPlatform }}</span> <span>{{ item.isOnlion == 1 ? "在线 " : "离线 " }}</span> </span> </span> </template> </el-table-column> <el-table-column label="操作" align="center"> <template #default="scope"> <span v-for="item in scope.row.userTokenList" :key="item"> <img v-show="item.registerPlatform == 'web'" title="web端" src="/src/assets/images/rongYunImg/ryIcon_web.png" @click="rongYunCall(item)" style="cursor: pointer; margin-right: 15px" /> <img v-show="item.registerPlatform == 'app'" title="app端" src="/src/assets/images/rongYunImg/ryIcon_app.png" alt="" @click="rongYunCall(item)" style="cursor: pointer; margin-right: 15px" /> </span> <img title="同时呼叫" src="/src/assets/images/rongYunImg/ryIcon_webandapp.png" alt="" @click="beforegroupCall(scope.row.userTokenList)" style="cursor: pointer" /> </template> </el-table-column> </el-table> <div class="paginationBox" style="z-index: 999999"> <el-pagination v-model:current-page="tableInfo.current" v-model:page-size="tableInfo.size" layout="total, prev, pager, next, jumper" :total="tableInfo.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </div> </div> </div> <div class="grouoDiv" v-if="activeName == 'second'"> <div v-for="item in groupList" :key="item" :title="item.groupName" :name="item.id"> <div class="TabLine"> <div class="Line">{{ item.groupName }}</div> <el-checkbox-group v-model="item.checked"> <el-checkbox :value="item.checked" @change="allCheckbox(item)" >全选</el-checkbox > </el-checkbox-group> </div> <div class="checkboxClass"> <el-checkbox-group v-model="rowidarr"> <el-checkbox v-for="row in item.userList" :label="row.id" :value="row.checked" :key="row.id" @change="radiocheck(row)" > <span style="color: #dedede"> {{ row.name }}</span> <span style="color: #dedede"> ( </span> <span v-for="p in row.userTokenList" :key="p" :class="p.isOnlion == 1 ? 'onlinery' : 'offlinery'" > <span>{{ p.registerPlatform }} </span> <span>{{ p.isOnlion == 1 ? "在线 " : "离线 " }}</span> </span> <span style="color: #dedede"> ) </span> </el-checkbox> </el-checkbox-group> </div> </div> <el-button type="primary" size="small" icon="PhoneFilled" style="position: absolute; bottom: 20px; right: 55px; z-index: 1" @click="groupCall()" >呼叫 </el-button> </div> </el-dialog> </template> <script setup> import { ref, reactive, onMounted, nextTick } from "vue"; import { getUserStatus, rongyunGroupSave, queryPage, rongyunQueryList, } from "@/views/RongyunCommunication/rongyunjs/rongyunApi.js"; import useUserStore from "@/store/modules/user"; import { ElMessageBox } from "element-plus"; const appStore = useUserStore(); import bus from "@/utils/util"; import { set } from "ol/transform"; const { proxy } = getCurrentInstance(); const emit = defineEmits(["dialogHide"]); const props = defineProps({ dialogShow: Boolean, }); watch( () => props.dialogShow, (newVal, oldVal) => { if (newVal) { console.log(" useUserStore();", useUserStore()); getUserList(); activeName.value = "first"; } } ); const activeName = ref("first"); const tableData = ref([]); const parmsTable = reactive({ account: "", }); // tab切换 const handleClick = (e) => {}; const tableInfo = reactive({ loading: false, data: [], total: 0, size: 10, current: 1, }); const geTel = (tel) => { var reg = /^(\d{3})\d{4}(\d{4})$/; return tel.replace(reg, "$1****$2"); }; const currenIndex = ref(0); // 查询联系人 const getUserList = () => { tableData.value = []; let params = { name: parmsTable.account, pageNum: tableInfo.current, pageSize: tableInfo.size, }; tableInfo.loading = true; queryPage(params).then((res) => { console.log(res, "res"); let data = res.data; tableInfo.loading = false; if (res.code == 200) { if (currenIndex.value == 0) { data.forEach((v) => { if (v.isme != 1) { tableData.value.push(v); } v.userTokenList.forEach((p) => { p.name = v.name; }); }); tableInfo.total = res.total; } else { data.forEach((v) => { if (v.isme != 1) { tableData.value.push({ phone: v.phone, name: `${v.name} -- ${v.postName} -- ${v.deptName}`, }); } }); } console.log(tableData, "allData.tableData."); } }); }; function handleSizeChange(val) { tableInfo.size = val; console.log(`每页 ${val} 条`); getUserList(); } function handleCurrentChange(val) { tableInfo.current = val; getUserList(); console.log(`当前页: ${val}`); } const closeDalog = () => { emit("dialogHide", false); }; // 搜索 const onSubmit = () => { tableInfo.current = 1; getUserList(); }; // 群呼 const groupList = ref([]); const selectGroup = ref([]); //从勾选的人员中 筛选出在线的人员账号 const rowidarr = ref([]); //回显的checkbox的id数组集 const userIDArr = ref([]); // 查询分组 const getGroupList = async () => { selectGroup.value = []; groupList.value = []; let res = await rongyunQueryList(); if (res.code == 200) { if (res.data) { res.data.forEach((e) => { e.checked = false; }); } groupList.value = res.data; console.log("groupListgroupList", groupList.value); } }; const radiocheck = (item) => { console.log("点击单选", item, selectGroup.value); let at = selectGroup.value; let arr = []; if (!item.checked) { // 往里新增人员 console.log("选中"); // 过滤掉不在线的web而app不管在不在线都留下 rowidarr.value.push(item.id); item.userTokenList.map((e) => { e.name = item.name; if (e.isOnlion == 1 && e.registerPlatform == "web") { arr.push(e); } else if (e.registerPlatform == "app") { arr.push(e); } }); item.checked = true; } else { // 匹配删除人员 item.checked = false; rowidarr.value = rowidarr.value.filter((p) => { return item.id != p; }); console.log("arr222", at); // 通过筛选反选的数据 从之前勾选的数据进行匹配删除 item.userTokenList.map((p) => { at.map((x, index) => { if (x.id == p.id) { at.splice(index, 1); } }); }); console.log("arr22222222", at); } selectGroup.value = [...new Set(at), ...new Set(arr)]; console.log("selectGroup", selectGroup.value, rowidarr.value); }; const allCheckbox = (item) => { console.log("点击了全选", item); let at = selectGroup.value; let arr = []; if (!item.checked) { //全选 往里新增人员 if (item.userList) { console.log("选中"); item.userList.map((p) => { console.log("选中", p); rowidarr.value.push(p.id); p.userTokenList.map((e) => { e.name = p.name; if (e.isOnlion == 1 && e.registerPlatform == "web") { arr.push(e); } else if (e.registerPlatform == "app") { arr.push(e); } }); }); } item.checked = true; } else { //全不选 匹配删除人员 item.checked = false; var arr2 = item.userList; arr2.map((item) => { rowidarr.value = rowidarr.value.filter((p) => { console.log(item, p); return item.id != p; }); }); console.log("arr222", at, arr2); // 通过筛选反选的数据 从之前勾选的数据进行匹配删除 arr2.map((item) => { item.userTokenList.map((p) => { at.map((x, index) => { if (x.id == p.id) { at.splice(index, 1); } }); }); }); console.log("arr22222222", arr2, at); } selectGroup.value = [...new Set(at), ...new Set(arr)]; console.log("selectGroup", selectGroup.value, rowidarr.value); console.log( "全选赋值整个list的checkbox的checked状态,避免单选的状态判断错误", groupList.value, rowidarr.value ); groupList.value.map((item) => { item.userList.map((p) => { if (rowidarr.value.includes(p.id)) { p.checked = true; } }); }); }; const changeTabs = (item, event) => { // console.log('item', item, event, activeName.value); activeName.value = item.props.name; parmsTable.account = ""; tableInfo.current = 1; tableInfo.total = 0; if (activeName.value == "first") { tableInfo.size = 10; getUserList(); rowidarr.value = []; selectGroup.value = []; } else { tableInfo.size = 10; getGroupList(); } }; // 单呼 const rongYunCall = async (item) => { console.log("rongYunCall", item); let params = { registerThridUserId: appStore.userInfo.phonenumber + "_web", }; let res1 = await getUserStatus(params); let flag1 = null; console.log(res1, "111"); if (res1.code == 200) { flag1 = JSON.parse(res1.data); } if (flag1 != 1) { ElMessageBox.confirm( `${appStore.userInfo.userName || "当前"}用户视频会商不在线,是否重新连接?, "提示"`, { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", } ) .then(() => { console.log("????"); bus.emit("rystatus"); setTimeout(() => { getCallStatus(item); }, 1100); }) .catch(() => {}); } else { setTimeout(() => { getCallStatus(item); }, 1100); } }; const getCallStatus = async (item) => { console.log("itemitem1111", item); item.phone = item.registerThridUserId; let params = { registerThridUserId: item.phone, }; let res = await getUserStatus(params); let flag = null; if (res.code == 200) { flag = JSON.parse(res.data); } if (flag != 1) { return proxy.$modal.msgWarning(`${item.name}用户视频会商不在线!`); } else { // 打开内层呼叫弹框 bus.emit("OffRongYun", { ...item, type: 1 }); } }; // 单呼页面 调群呼前处理数据 const beforegroupCall = (item) => { console.log("同时拨打两个电话", item); selectGroup.value = []; item.forEach((e) => { // if (e.isOnlion == 1) { // selectGroup.value.push(e); // } if (e.isOnlion == 1 && e.registerPlatform == "web") { selectGroup.value.push(e); } else if (e.registerPlatform == "app") { selectGroup.value.push(e); } }); nextTick(() => { takeout(); }); }; // 群呼 const groupCall = () => { userIDArr.value = []; if (selectGroup.value.length == 0) { proxy.$message({ type: "warrning", message: "请选择需要呼叫的人员!!!", }); return; } takeout(); }; // 将群呼选择的人员方法抽离出来 const takeout = () => { console.log( "进入takeout方法进行人员数量的判断", "获取通过勾选的多个人员账号生成临时的群呼id", selectGroup.value ); // 过滤数据 如果有自己就不加 没有自己就加进去 const aarr = [ ...selectGroup.value, { registerThridUserId: appStore.userInfo.phonenumber + "_web", name: appStore.userInfo.userName, }, ]; const map = new Map(); selectGroup.value = aarr.filter( (v) => !map.has(v.registerThridUserId) && map.set(v.registerThridUserId, 1) ); selectGroup.value.forEach((p) => { if (!userIDArr.value.includes(p.registerThridUserId)) { userIDArr.value.push(p.registerThridUserId); } }); console.log( "selectGroupxxxxxx", selectGroup.value, userIDArr.value, selectGroup.value.length ); if (selectGroup.value.length == 1) { console.log("单"); rongYunCall(selectGroup.value[0], selectGroup.value[0].userName); } else if (selectGroup.value.length >= 2) { console.log("群"); if (selectGroup.value.length <= 8) { saveGroup(); } else { proxy.$message({ type: "warrning", message: `当前勾选${selectGroup.value.length}人,群呼功能最多只能拨打8个人员(包含自己)`, }); } } }; // 通过勾选的多个人员账号生成临时群呼id const saveGroup = async () => { console.log("通过勾选的多个人员账号生成临时群呼id"); let params = { ids: userIDArr.value.join(","), }; let res = await rongyunGroupSave(params); if (res.code == 200) { let obj = { ...res.data, type: 2, userList: selectGroup.value, }; console.log("群呼的", obj); bus.emit("OffRongYun", obj); } }; onMounted(() => {}); </script> <style lang="scss"> .el-tabs__item { color: #d5dee7; font-size: 13px; padding: 0; // border-bottom: 2px solid #3a3030; } .is-active { color: #00b4ff; } .el-tabs__active-bar { color: #00b4ff; } .el-input__wrapper { background: transparent !important; box-shadow: none; border: 1px solid #4364ac; } </style>