Newer
Older
DH_Apicture / src / views / RongyunCommunication / ModalContact / index.vue
@chenke chenke on 3 Dec 15 KB 优化
  1. <template>
  2. <!-- 单呼群呼弹框 -->
  3. <el-dialog
  4. v-model="props.dialogShow"
  5. :close-on-click-modal="false"
  6. modal-class="pmpSitNewDialog"
  7. class="contactBoxRY"
  8. append-to-body
  9. width="900px"
  10. :z-index="9999"
  11. center
  12. :before-close="closeDalog"
  13. >
  14. <div class="dialogTitle">
  15. <div class="title">融云通讯录</div>
  16. <div class="closeIcon" @click="closeDalog"></div>
  17. </div>
  18. <div>
  19. <el-tabs
  20. v-model="activeName"
  21. :stretch="true"
  22. class="demo-tabs"
  23. @tab-click="changeTabs"
  24. >
  25. <el-tab-pane label="联系人" name="first"></el-tab-pane>
  26. <el-tab-pane label="群呼" name="second"></el-tab-pane>
  27. </el-tabs>
  28. </div>
  29. <!-- 搜索 -->
  30. <div
  31. v-if="activeName == 'first'"
  32. v-loading="tableInfo.loading"
  33. element-loading-background="rgba(3, 26, 47, 0.3)"
  34. >
  35. <el-form :model="parmsTable" inline style="padding-left: 10px">
  36. <el-form-item>
  37. <el-input
  38. v-model="parmsTable.account"
  39. placeholder="联系人/电话"
  40. @keyup.enter="onSubmit"
  41. />
  42. </el-form-item>
  43. <el-form-item v-show="false">
  44. <el-input v-model="parmsTable.account" placeholder="联系人/电话" />
  45. </el-form-item>
  46. <el-form-item>
  47. <el-button type="primary" icon="search" @click="onSubmit">搜索</el-button>
  48. </el-form-item>
  49. </el-form>
  50. <div class="tableRY">
  51. <el-table :data="tableData" style="width: 100%" :border="true">
  52. <el-table-column label="联系人" prop="name" align="center"> </el-table-column>
  53. <el-table-column label="电话" prop="phone" align="center">
  54. <template #default="scope">
  55. <span>{{ geTel(scope.row.phone) }}</span>
  56. </template>
  57. </el-table-column>
  58. <el-table-column label="在线状态" prop="userTokenList" align="center">
  59. <template #default="scope">
  60. <span v-for="item in scope.row.userTokenList" :key="item">
  61. <span :class="item.isOnlion == 1 ? 'onlinery' : 'offlinery'">
  62. <span>{{ item.registerPlatform }}</span>
  63. <span>{{ item.isOnlion == 1 ? "在线 " : "离线 " }}</span>
  64. </span>
  65. </span>
  66. </template>
  67. </el-table-column>
  68. <el-table-column label="操作" align="center">
  69. <template #default="scope">
  70. <span v-for="item in scope.row.userTokenList" :key="item">
  71. <img
  72. v-show="item.registerPlatform == 'web'"
  73. title="web端"
  74. src="/src/assets/images/rongYunImg/ryIcon_web.png"
  75. @click="rongYunCall(item)"
  76. style="cursor: pointer; margin-right: 15px"
  77. />
  78. <img
  79. v-show="item.registerPlatform == 'app'"
  80. title="app端"
  81. src="/src/assets/images/rongYunImg/ryIcon_app.png"
  82. alt=""
  83. @click="rongYunCall(item)"
  84. style="cursor: pointer; margin-right: 15px"
  85. />
  86. </span>
  87. <img
  88. title="同时呼叫"
  89. src="/src/assets/images/rongYunImg/ryIcon_webandapp.png"
  90. alt=""
  91. @click="beforegroupCall(scope.row.userTokenList)"
  92. style="cursor: pointer"
  93. />
  94. </template>
  95. </el-table-column>
  96. </el-table>
  97. <div class="paginationBox" style="z-index: 999999">
  98. <el-pagination
  99. v-model:current-page="tableInfo.current"
  100. v-model:page-size="tableInfo.size"
  101. layout="total, prev, pager, next, jumper"
  102. :total="tableInfo.total"
  103. @size-change="handleSizeChange"
  104. @current-change="handleCurrentChange"
  105. />
  106. </div>
  107. </div>
  108. </div>
  109. <div class="grouoDiv" v-if="activeName == 'second'">
  110. <div v-for="item in groupList" :key="item" :title="item.groupName" :name="item.id">
  111. <div class="TabLine">
  112. <div class="Line">{{ item.groupName }}</div>
  113. <el-checkbox-group v-model="item.checked">
  114. <el-checkbox :value="item.checked" @change="allCheckbox(item)"
  115. >全选</el-checkbox
  116. >
  117. </el-checkbox-group>
  118. </div>
  119. <div class="checkboxClass">
  120. <el-checkbox-group v-model="rowidarr">
  121. <el-checkbox
  122. v-for="row in item.userList"
  123. :label="row.id"
  124. :value="row.checked"
  125. :key="row.id"
  126. @change="radiocheck(row)"
  127. >
  128. <span style="color: #dedede"> {{ row.name }}</span>
  129. <span style="color: #dedede"> ( </span>
  130. <span
  131. v-for="p in row.userTokenList"
  132. :key="p"
  133. :class="p.isOnlion == 1 ? 'onlinery' : 'offlinery'"
  134. >
  135. <span>{{ p.registerPlatform }} </span>
  136. <span>{{ p.isOnlion == 1 ? "在线 " : "离线 " }}</span>
  137. </span>
  138. <span style="color: #dedede"> ) </span>
  139. </el-checkbox>
  140. </el-checkbox-group>
  141. </div>
  142. </div>
  143.  
  144. <el-button
  145. type="primary"
  146. size="small"
  147. icon="PhoneFilled"
  148. style="position: absolute; bottom: 20px; right: 55px; z-index: 1"
  149. @click="groupCall()"
  150. >呼叫
  151. </el-button>
  152. </div>
  153. </el-dialog>
  154. </template>
  155. <script setup>
  156. import { ref, reactive, onMounted, nextTick } from "vue";
  157. import {
  158. getUserStatus,
  159. rongyunGroupSave,
  160. queryPage,
  161. rongyunQueryList,
  162. } from "@/views/RongyunCommunication/rongyunjs/rongyunApi.js";
  163. import useUserStore from "@/store/modules/user";
  164. import { ElMessageBox } from "element-plus";
  165. const appStore = useUserStore();
  166. import bus from "@/utils/util";
  167. import { set } from "ol/transform";
  168. const { proxy } = getCurrentInstance();
  169. const emit = defineEmits(["dialogHide"]);
  170. const props = defineProps({
  171. dialogShow: Boolean,
  172. });
  173. watch(
  174. () => props.dialogShow,
  175. (newVal, oldVal) => {
  176. if (newVal) {
  177. console.log(" useUserStore();", useUserStore());
  178. getUserList();
  179. activeName.value = "first";
  180. }
  181. }
  182. );
  183.  
  184. const activeName = ref("first");
  185. const tableData = ref([]);
  186. const parmsTable = reactive({
  187. account: "",
  188. });
  189. // tab切换
  190. const handleClick = (e) => {};
  191. const tableInfo = reactive({
  192. loading: false,
  193. data: [],
  194. total: 0,
  195. size: 10,
  196. current: 1,
  197. });
  198. const geTel = (tel) => {
  199. var reg = /^(\d{3})\d{4}(\d{4})$/;
  200. return tel.replace(reg, "$1****$2");
  201. };
  202. const currenIndex = ref(0);
  203. // 查询联系人
  204. const getUserList = () => {
  205. tableData.value = [];
  206. let params = {
  207. name: parmsTable.account,
  208. pageNum: tableInfo.current,
  209. pageSize: tableInfo.size,
  210. };
  211. tableInfo.loading = true;
  212. queryPage(params).then((res) => {
  213. console.log(res, "res");
  214. let data = res.data;
  215. tableInfo.loading = false;
  216.  
  217. if (res.code == 200) {
  218. if (currenIndex.value == 0) {
  219. data.forEach((v) => {
  220. if (v.isme != 1) {
  221. tableData.value.push(v);
  222. }
  223. v.userTokenList.forEach((p) => {
  224. p.name = v.name;
  225. });
  226. });
  227. tableInfo.total = res.total;
  228. } else {
  229. data.forEach((v) => {
  230. if (v.isme != 1) {
  231. tableData.value.push({
  232. phone: v.phone,
  233. name: `${v.name} -- ${v.postName} -- ${v.deptName}`,
  234. });
  235. }
  236. });
  237. }
  238. console.log(tableData, "allData.tableData.");
  239. }
  240. });
  241. };
  242. function handleSizeChange(val) {
  243. tableInfo.size = val;
  244. console.log(`每页 ${val} 条`);
  245. getUserList();
  246. }
  247. function handleCurrentChange(val) {
  248. tableInfo.current = val;
  249. getUserList();
  250. console.log(`当前页: ${val}`);
  251. }
  252. const closeDalog = () => {
  253. emit("dialogHide", false);
  254. };
  255. // 搜索
  256. const onSubmit = () => {
  257. tableInfo.current = 1;
  258. getUserList();
  259. };
  260. // 群呼
  261. const groupList = ref([]);
  262. const selectGroup = ref([]); //从勾选的人员中 筛选出在线的人员账号
  263. const rowidarr = ref([]); //回显的checkbox的id数组集
  264. const userIDArr = ref([]);
  265.  
  266. // 查询分组
  267. const getGroupList = async () => {
  268. selectGroup.value = [];
  269. groupList.value = [];
  270.  
  271. let res = await rongyunQueryList();
  272. if (res.code == 200) {
  273. if (res.data) {
  274. res.data.forEach((e) => {
  275. e.checked = false;
  276. });
  277. }
  278. groupList.value = res.data;
  279.  
  280. console.log("groupListgroupList", groupList.value);
  281. }
  282. };
  283. const radiocheck = (item) => {
  284. console.log("点击单选", item, selectGroup.value);
  285. let at = selectGroup.value;
  286. let arr = [];
  287. if (!item.checked) {
  288. // 往里新增人员
  289. console.log("选中");
  290. // 过滤掉不在线的web而app不管在不在线都留下
  291. rowidarr.value.push(item.id);
  292. item.userTokenList.map((e) => {
  293. e.name = item.name;
  294. if (e.isOnlion == 1 && e.registerPlatform == "web") {
  295. arr.push(e);
  296. } else if (e.registerPlatform == "app") {
  297. arr.push(e);
  298. }
  299. });
  300. item.checked = true;
  301. } else {
  302. // 匹配删除人员
  303. item.checked = false;
  304. rowidarr.value = rowidarr.value.filter((p) => {
  305. return item.id != p;
  306. });
  307. console.log("arr222", at);
  308.  
  309. // 通过筛选反选的数据 从之前勾选的数据进行匹配删除
  310. item.userTokenList.map((p) => {
  311. at.map((x, index) => {
  312. if (x.id == p.id) {
  313. at.splice(index, 1);
  314. }
  315. });
  316. });
  317. console.log("arr22222222", at);
  318. }
  319. selectGroup.value = [...new Set(at), ...new Set(arr)];
  320.  
  321. console.log("selectGroup", selectGroup.value, rowidarr.value);
  322. };
  323.  
  324. const allCheckbox = (item) => {
  325. console.log("点击了全选", item);
  326.  
  327. let at = selectGroup.value;
  328. let arr = [];
  329. if (!item.checked) {
  330. //全选 往里新增人员
  331. if (item.userList) {
  332. console.log("选中");
  333. item.userList.map((p) => {
  334. console.log("选中", p);
  335. rowidarr.value.push(p.id);
  336. p.userTokenList.map((e) => {
  337. e.name = p.name;
  338. if (e.isOnlion == 1 && e.registerPlatform == "web") {
  339. arr.push(e);
  340. } else if (e.registerPlatform == "app") {
  341. arr.push(e);
  342. }
  343. });
  344. });
  345. }
  346. item.checked = true;
  347. } else {
  348. //全不选 匹配删除人员
  349. item.checked = false;
  350. var arr2 = item.userList;
  351. arr2.map((item) => {
  352. rowidarr.value = rowidarr.value.filter((p) => {
  353. console.log(item, p);
  354. return item.id != p;
  355. });
  356. });
  357. console.log("arr222", at, arr2);
  358.  
  359. // 通过筛选反选的数据 从之前勾选的数据进行匹配删除
  360. arr2.map((item) => {
  361. item.userTokenList.map((p) => {
  362. at.map((x, index) => {
  363. if (x.id == p.id) {
  364. at.splice(index, 1);
  365. }
  366. });
  367. });
  368. });
  369.  
  370. console.log("arr22222222", arr2, at);
  371. }
  372. selectGroup.value = [...new Set(at), ...new Set(arr)];
  373. console.log("selectGroup", selectGroup.value, rowidarr.value);
  374.  
  375. console.log(
  376. "全选赋值整个list的checkbox的checked状态,避免单选的状态判断错误",
  377. groupList.value,
  378. rowidarr.value
  379. );
  380. groupList.value.map((item) => {
  381. item.userList.map((p) => {
  382. if (rowidarr.value.includes(p.id)) {
  383. p.checked = true;
  384. }
  385. });
  386. });
  387. };
  388. const changeTabs = (item, event) => {
  389. // console.log('item', item, event, activeName.value);
  390. activeName.value = item.props.name;
  391. parmsTable.account = "";
  392. tableInfo.current = 1;
  393. tableInfo.total = 0;
  394. if (activeName.value == "first") {
  395. tableInfo.size = 10;
  396. getUserList();
  397. rowidarr.value = [];
  398. selectGroup.value = [];
  399. } else {
  400. tableInfo.size = 10;
  401. getGroupList();
  402. }
  403. };
  404. // 单呼
  405. const rongYunCall = async (item) => {
  406. console.log("rongYunCall", item);
  407. let params = {
  408. registerThridUserId: appStore.userInfo.phonenumber + "_web",
  409. };
  410. let res1 = await getUserStatus(params);
  411. let flag1 = null;
  412. console.log(res1, "111");
  413. if (res1.code == 200) {
  414. flag1 = JSON.parse(res1.data);
  415. }
  416. if (flag1 != 1) {
  417. ElMessageBox.confirm(
  418. `${appStore.userInfo.userName || "当前"}用户视频会商不在线,是否重新连接?, "提示"`,
  419. {
  420. confirmButtonText: "确定",
  421. cancelButtonText: "取消",
  422. type: "warning",
  423. }
  424. )
  425. .then(() => {
  426. console.log("????");
  427. bus.emit("rystatus");
  428. setTimeout(() => {
  429. getCallStatus(item);
  430. }, 1100);
  431. })
  432. .catch(() => {});
  433. } else {
  434. setTimeout(() => {
  435. getCallStatus(item);
  436. }, 1100);
  437. }
  438. };
  439. const getCallStatus = async (item) => {
  440. console.log("itemitem1111", item);
  441. item.phone = item.registerThridUserId;
  442.  
  443. let params = {
  444. registerThridUserId: item.phone,
  445. };
  446. let res = await getUserStatus(params);
  447. let flag = null;
  448. if (res.code == 200) {
  449. flag = JSON.parse(res.data);
  450. }
  451. if (flag != 1) {
  452. return proxy.$modal.msgWarning(`${item.name}用户视频会商不在线!`);
  453. } else {
  454. // 打开内层呼叫弹框
  455. bus.emit("OffRongYun", { ...item, type: 1 });
  456. }
  457. };
  458.  
  459. // 单呼页面 调群呼前处理数据
  460. const beforegroupCall = (item) => {
  461. console.log("同时拨打两个电话", item);
  462. selectGroup.value = [];
  463. item.forEach((e) => {
  464. // if (e.isOnlion == 1) {
  465. // selectGroup.value.push(e);
  466. // }
  467.  
  468. if (e.isOnlion == 1 && e.registerPlatform == "web") {
  469. selectGroup.value.push(e);
  470. } else if (e.registerPlatform == "app") {
  471. selectGroup.value.push(e);
  472. }
  473. });
  474. nextTick(() => {
  475. takeout();
  476. });
  477. };
  478.  
  479. // 群呼
  480. const groupCall = () => {
  481. userIDArr.value = [];
  482. if (selectGroup.value.length == 0) {
  483. proxy.$message({
  484. type: "warrning",
  485. message: "请选择需要呼叫的人员!!!",
  486. });
  487. return;
  488. }
  489.  
  490. takeout();
  491. };
  492. // 将群呼选择的人员方法抽离出来
  493. const takeout = () => {
  494. console.log(
  495. "进入takeout方法进行人员数量的判断",
  496. "获取通过勾选的多个人员账号生成临时的群呼id",
  497. selectGroup.value
  498. );
  499.  
  500. // 过滤数据 如果有自己就不加 没有自己就加进去
  501. const aarr = [
  502. ...selectGroup.value,
  503. {
  504. registerThridUserId: appStore.userInfo.phonenumber + "_web",
  505. name: appStore.userInfo.userName,
  506. },
  507. ];
  508.  
  509. const map = new Map();
  510. selectGroup.value = aarr.filter(
  511. (v) => !map.has(v.registerThridUserId) && map.set(v.registerThridUserId, 1)
  512. );
  513.  
  514. selectGroup.value.forEach((p) => {
  515. if (!userIDArr.value.includes(p.registerThridUserId)) {
  516. userIDArr.value.push(p.registerThridUserId);
  517. }
  518. });
  519.  
  520. console.log(
  521. "selectGroupxxxxxx",
  522. selectGroup.value,
  523. userIDArr.value,
  524. selectGroup.value.length
  525. );
  526.  
  527. if (selectGroup.value.length == 1) {
  528. console.log("单");
  529. rongYunCall(selectGroup.value[0], selectGroup.value[0].userName);
  530. } else if (selectGroup.value.length >= 2) {
  531. console.log("群");
  532. if (selectGroup.value.length <= 8) {
  533. saveGroup();
  534. } else {
  535. proxy.$message({
  536. type: "warrning",
  537. message: `当前勾选${selectGroup.value.length}人,群呼功能最多只能拨打8个人员(包含自己)`,
  538. });
  539. }
  540. }
  541. };
  542.  
  543. // 通过勾选的多个人员账号生成临时群呼id
  544. const saveGroup = async () => {
  545. console.log("通过勾选的多个人员账号生成临时群呼id");
  546.  
  547. let params = {
  548. ids: userIDArr.value.join(","),
  549. };
  550. let res = await rongyunGroupSave(params);
  551. if (res.code == 200) {
  552. let obj = {
  553. ...res.data,
  554. type: 2,
  555. userList: selectGroup.value,
  556. };
  557. console.log("群呼的", obj);
  558. bus.emit("OffRongYun", obj);
  559. }
  560. };
  561.  
  562. onMounted(() => {});
  563. </script>
  564. <style lang="scss">
  565. .el-tabs__item {
  566. color: #d5dee7;
  567. font-size: 13px;
  568. padding: 0;
  569. // border-bottom: 2px solid #3a3030;
  570. }
  571.  
  572. .is-active {
  573. color: #00b4ff;
  574. }
  575.  
  576. .el-tabs__active-bar {
  577. color: #00b4ff;
  578. }
  579.  
  580. .el-input__wrapper {
  581. background: transparent !important;
  582. box-shadow: none;
  583. border: 1px solid #4364ac;
  584. }
  585. </style>