<template> <div class="contactBox"> <div class="tabList"> <div class="tab" v-for="item in tabList" :key="item.index" ::key="item.index" :class="item.index == currenIndex ? 'active' : ''" @click="changeTab(item)"> {{ item.lable }} </div> </div> <div class="ryBox"> <div class="personelDiv" v-if="currenIndex == 0"> <div class="searchDiv" style="margin: 20px 10px 10px 20px"> <el-input v-model="searchValue" style="width: 250px; margin-right: 10px" placeholder="联系人/电话"></el-input> <el-button type="primary" size="small" icon="search" @click="handleClick('search')">搜索 </el-button> </div> <el-table :data="tableData" style="width: 100%" :border="true"> <!-- :show-overflow-tooltip="true" --> <el-table-column label="联系人" prop="userName" 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="deptName" align="center"> </el-table-column> <el-table-column label="职位" prop="postName" align="center"> </el-table-column> <el-table-column label="在线状态" prop="online" align="center"> <template #default="scope"> <span class="online" v-if="scope.row.online == 1">在线</span> <span class="offline" v-else>离线</span> </template> </el-table-column> <el-table-column label="操作" align="center"> <template #default="scope"> <img style="cursor: pointer;" src="@/assets/images/ryIcon_active.png" alt="" @click="rongYunCall(scope.row)" /> <!-- <el-tag title="点击视频通话" @click="rongYunCall(scope.row)"> <i class="el-icon-video-camera"></i> </el-tag> --> </template> </el-table-column> </el-table> <div class="page-pagination"> <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="tableInfo.total" :pager-count="5" :page-sizes="[10, 20, 30, 40]" :page-size="tableInfo.size" :current-page="tableInfo.current" @current-change="handleCurrentChange" @size-change="handleSizeChange" /> </div> </div> <div class="grouoDiv" v-else> <!-- <div v-for="item in groupList" :key="item.classId"> {{ item.className }} </div> --> <!-- <el-collapse v-model="activeNames"> <el-collapse-item v-for="item in groupList" :key="item.classId" :title="item.className" :name="item.classId" > --> <!-- {{ groupList }} --> <div v-for="item in groupList" :key="item.classId" :title="item.className" :name="item.classId"> <h3>{{ item.className }}</h3> <el-checkbox-group v-model="selectGroup" @change="handleChecked"> <el-checkbox v-for="row in item.datalist.filter((i) => i.isme != 1)" :label="row" :key="row.userId" :disabled="row.online == 0"><span :style="{ color: row.online == 1 ? ' #68b2d8' : '#dedede' }">{{ row.userName }} </span> </el-checkbox> </el-checkbox-group> </div> <!-- </el-collapse-item> </el-collapse> --> <el-button type="primary" size="small" icon="search" style="position: absolute; bottom: 20px; right: 55px" @click="handleClick('callGroup')">呼叫 </el-button> </div> </div> </div> </template> <script setup> import { rongyunUser, rongyunGroupList, rongyunQueryList, rongyunGroupSave, getUserStatus, } from "@/api/rongyun/rongyunApi.js"; import useAppStore from "@/store/modules/user"; import { ElMessageBox } from "element-plus"; import bus from "@/utils"; const appStore = useAppStore(); const { proxy } = getCurrentInstance(); const allData = reactive({ checkboxGroup1: ["1"], selectGroup: [], userIDArr: [appStore.userInfo.phonenumber], tableData: [], tableInfo: { loading: false, data: [], total: "", size: 10, current: 1, }, show: false, searchValue: "", tabList: [ { lable: "联系人", index: 0, }, { lable: "群呼", index: 1, }, ], currenIndex: 0, personlList: [], personlGroupList: [], columns: [], groupList: [], columnsGroup: [ { title: "群组名称", width: "130", key: "groupName", align: "center", }, { title: "群组联系人", key: "userlist", align: "center", }, { title: "操作", key: "action", align: "center", width: "130", }, ], actionColumn: [ { size: "small", btnType: "primary", type: "edit", default: "修改", img: "editor", }, { size: "small", btnType: "primary", type: "delete", default: "删除", img: "delete", }, { size: "small", btnType: "primary", type: "callGroup", default: "拨号", img: "call", }, ], showAddGroup: false, title: null, formValue: { groupName: "", // groupId: "", ids: [], }, formRules: { groupName: { required: true, trigger: ["blur"], message: "分组名称不能为空", }, // groupId: { // required: true, // trigger: ["blur"], // message: "分组ID不能为空", // }, ids: { required: true, trigger: ["blur"], message: "分组联系人不能为空", type: "array", }, }, group1: [], userId: "", //当前登录账户 page: { pageSize: 10, currentPage: 1, total: 0, }, }); const { checkboxGroup1, selectGroup, userIDArr, tableData, tableInfo, show, searchValue, tabList, currenIndex, personlList, personlGroupList, columns, groupList, columnsGroup, actionColumn, showAddGroup, title, formValue, formRules, group1, userId, //当前登录账户 page, } = toRefs(allData); onMounted(() => { init(); }); const geTel = (tel) => { var reg = /^(\d{3})\d{4}(\d{4})$/; return tel.replace(reg, "$1****$2"); }; const saveGroup = async () => { let params = { ids: allData.userIDArr.join(), }; let res = await rongyunGroupSave(params); console.log(res); if (res.code == 200) { let obj = { ...res.data, type: 2, userList: allData.selectGroup.concat([ { phone: appStore.userInfo.phonenumber, userName: appStore.userInfo.userName, }, ]), }; console.log("群呼的", obj); bus.emit("OffRongYun", obj); } }; function handleChecked (val) { console.log(val, allData.selectGroup, "selectGroup"); } const rongYunCall = async (item) => { console.log(item); let formData1 = new FormData(); // formData1.append("userId", appStore.userInfo.phonenumber); formData1.append("userId", item.phone); let res1 = await getUserStatus(formData1); let flag1 = null; console.log(res1, "111"); if (res1.code == 200) { let data = JSON.parse(res1.msg); flag1 = data.status; } if (flag1 != 1) { ElMessageBox.confirm( `${item.userName}用户视频会商不在线,是否重新连接?`, { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning", } ) .then(() => { bus.emit("rystatus"); setTimeout(() => { getCallStatus(item); }, 1100); }) .catch(() => { }); } else { setTimeout(() => { getCallStatus(item); }, 1100); } }; const getCallStatus = async (item) => { let formData = new FormData(); formData.append("userId", item.phone); formData.append("userName", item.userName); let res = await getUserStatus(formData); let flag = null; if (res.code == 200) { let data = JSON.parse(res.msg); flag = data.status; } if (flag != 1) { return proxy.$modal.msgWarning(`${item.userName}用户视频会商不在线!`); } else { bus.emit("OffRongYun", { ...item, type: 1 }); } }; function handleSizeChange (val) { allData.tableInfo.size = val; console.log(`每页 ${val} 条`); getUserList(); } function handleCurrentChange (val) { allData.tableInfo.current = val; allData.getUserList(); console.log(`当前页: ${val}`); } function init () { // allData.show = true; getUserList(); // getUserInfo(); } function changeTab (item) { allData.currenIndex = item.index; allData.searchValue = ""; allData.tableInfo.current = 1; allData.tableInfo.total = 0; if (allData.currenIndex == 1) { allData.tableInfo.size = 100; getGroupList(); } else { allData.tableInfo.size = 10; getUserList(); } } // 查询联系人 const getUserList = () => { allData.tableData = []; let formData = new FormData(); formData.append("account", allData.searchValue); formData.append("current", allData.tableInfo.current); formData.append("size", allData.tableInfo.size); rongyunUser(formData).then((res) => { console.log(res, "res"); if (res.code == 200) { if (allData.currenIndex == 0) { res.data.forEach((v) => { if (v.isme != 1) { allData.tableData.push(v); } }); allData.tableInfo.total = res.total; } else { res.data.forEach((v) => { if (v.isme != 1) { allData.tableData.push({ phone: v.phone, userName: `${v.userName} -- ${v.postName} -- ${v.deptName}`, }); } }); } console.log(allData.tableData, "allData.tableData."); } }); const token = sessionStorage.getItem("token"); }; // 查询分组 const getGroupList = async () => { let formData = new FormData(); formData.append("account", ""); let res = await rongyunQueryList(formData); if (res.code == 200) { allData.groupList = res.data; } }; // 操作 function handleClick (type, row) { console.log(row); console.log(type); switch (type) { case "search": allData.tableInfo.current = 1; allData.tableInfo.size = 10; allData.getUserList(); break; case "call": // if (row.online == '0') { // $message.info('拨叫用户不在线,无法连接!!!') // return // } // if (row.isme == '1') { // $message.info('无法拨叫当前用户!!!') // return // } console.log('obj', obj, row); let obj = { type: 1, }; let pramas = { ...obj, ...row, }; bus.emit("ryCall", pramas); break; case "addGroup": allData.formValue.groupName = ""; allData.formValue.id = []; allData.title = "新增"; allData.showAddGroup = true; defaultCheckedKeys.value = []; break; case "edit": defaultCheckedKeys.value = []; allData.title = "修改"; allData.formValue.groupName = row.groupName; allData.formValue.ids = row.userName; allData.formValue.id = row.id; row.userlist.forEach((v) => { defaultCheckedKeys.value.push(v.phone); }); allData.showAddGroup = true; break; case "delete": allData.title = null; ElMessageBox.info({ title: "提示", content: `确定对选择项进行删除操作吗?`, positiveText: "确定", negativeText: "取消", onPositiveClick: () => { saveName([row.id]); }, onNegativeClick: () => { }, }); break; case "sureName": formRef.value.validate((errors) => { if (!errors) { saveName(); } else { proxy.$modal.msgWarning("验证失败"); } }); break; case "callGroup": allData.userIDArr = [appStore.userInfo.phonenumber] allData.selectGroup.forEach((i) => { allData.userIDArr.push(i.phone); }); if (allData.userIDArr.length <= 2) { proxy.$modal.msgWarning("请至少添加2名人员!!!"); return; } saveGroup(); break; } } async function saveName (id) { if (allData.title != null) { let ids = []; allData.formValue.ids.forEach((v) => { if (v == allData.userId) { ids.push(v); } }); if (ids.length == 0) { allData.formValue.ids = [allData.userId].concat(allData.formValue.ids); } } let res, pramas; if (allData.title == "新增") { pramas = { groupName: allData.formValue.groupName, // groupId: allData.formValue.groupId, ids: allData.formValue.ids.join(","), }; res = await rongyunGroupSave(pramas); if (res?.code == 200) { allData.showAddGroup = false; getGroupList(); allData.formValue.groupName = ""; allData.formValue.id = []; } } else if (allData.title == "修改") { pramas = { id: allData.formValue.id, groupName: allData.formValue.groupName, ids: allData.formValue.ids.join(","), }; res = await rongyunGroupUpdate(pramas); if (res?.code == 200) { allData.showAddGroup = false; getGroupList(); allData.formValue.groupName = ""; allData.formValue.id = []; } } else { let formData = new FormData(); formData.append("ids", id); res = await rongyunGroupRemove(formData); if (res?.code == 200) { getGroupList(); } } } const handleCheckedKeysChange = (keys) => { allData.formValue.ids = keys; console.log(allData.formValue.ids); }; const closeRyGroup = () => { allData.show = false; allData.currenIndex = 0; }; //获取当前用户信息 const getUserInfo = async () => { let res = await userInfo(); if (res?.code == 200) { allData.userId = res.data.phone; // allData.userId = "13000000001"; // allData.userName = res.data.name; // allData.id = res.data.id; } }; </script> <style lang="scss" scoped> //@import "@/assets/styles/cockpit.scss"; .contactBox { margin-top: -10px; } .tabList { display: flex; width: 100%; height: 40px; justify-content: center; align-items: center; // position: absolute; // top: 30px; // left: 0; .tab { width: 100px; color: #68b2d8; font-size: 16px; font-family: PingFang SC; font-weight: 400; cursor: pointer; text-align: center; &:after { content: "/"; margin-left: 20px; color: #0e3760; } &:last-child { &::after { content: ""; } } &.active { color: #f76402; } } } .ryBox { width: 100%; height: 460px; overflow: hidden; padding: 10px; position: relative; overflow-y: auto; } #addModal { background: rgba(0, 26, 81, 1); } ::v-deep(.n-data-table) { .n-data-table-wrapper { border: 1px solid #325bc1; border-radius: 10px; .n-data-table-thead { .n-data-table-tr { th { background-color: rgb(30, 55, 109); } } } .n-data-table-tbody { .n-data-table-tr { td { background-color: #0f0e5f; } } .n-data-table-tr--striped { td { background-color: rgb(30, 55, 109); } } } } } :deep(.el-table__inner-wrapper)::after { width: 0 !important; height: 0 !important; } :deep(.el-table__inner-wrapper)::before, :deep(.el-table__border-left-patch) { width: 0 !important; } :deep(.el-input__inner) { background-color: transparent !important; border: none !important; color: #fff !important; } :deep(.el-input__wrapper) { background: transparent !important; } :deep(.th), .el-table tr { background-color: transparent !important; border: none !important; } :deep(.el-pagination.is-background .btn-prev:disabled) { background-color: transparent !important; color: #fff; } :deep(.el-pagination.is-background .btn-prev) { background-color: transparent !important; color: #fff; } :deep(.el-pagination.is-background .el-pager li) { color: #fff; background-color: transparent !important; } :deep(.el-pagination__total) { color: #fff; } :deep(.el-pagination.is-background .el-pager li.is-active) { color: #409eff; } :deep(.el-pagination__goto) { color: #fff; } :deep(.el-pagination__classifier) { color: #fff; } :deep(.el-pagination.is-background .btn-next:disabled) { background: transparent; } :deep(.el-table), .el-table__header-wrapper { background-color: transparent; border: none !important; height: calc(100% - 90px); overflow: auto; th, tr, td { background-color: #001223 !important; border: none !important; color: #68b2d8 !important; } } .ryBox { :deep(.el-table::before) { background-color: transparent !important; } :deep(.el-table::after) { background-color: transparent !important; } } .online { color: green; } .offline { color: red; } :deep(.el-collapse-item__wrap), :deep(.el-collapse-item__header) { background-color: #00050d !important; color: #ffffff; } .personelDiv { height: 100%; overflow: hidden; } .page-pagination { position: absolute; right: 10px; } .grouoDiv { padding: 20px; } </style>