- <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>