Newer
Older
urbanLifeline_YanAn / src / views / RongyunCommunication / HistroyTalkdetail.vue
@zhangqy zhangqy on 3 Oct 13 KB first commit
  1. <template>
  2. <div class="app-container">
  3. <!-- <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
  4. <el-form-item label="接收用户" prop="answerThridUserId">
  5. <el-input v-model="queryParams.answerThridUserId" placeholder="请输入接收用户" clearable @keyup.enter="handleQuery" />
  6. </el-form-item>
  7.  
  8. <el-form-item label="接听时间" prop="answerTime" v-show="false">
  9. <el-date-picker
  10. clearable
  11. v-model="queryParams.answerTime"
  12. type="date"
  13. value-format="YYYY-MM-DD"
  14. placeholder="请选择接听时间"
  15. >
  16. </el-date-picker>
  17. </el-form-item>
  18. <el-form-item>
  19. <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
  20. <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  21. </el-form-item>
  22. </el-form> -->
  23.  
  24. <el-table v-loading="loading" :data="rcloudUnitHistroyTalkList" @selection-change="handleSelectionChange">
  25. <el-table-column type="index" label="序号" width="55" align="center" />
  26. <el-table-column prop="promoterName" label="发起方" align="center">
  27. <template #default="scope">
  28. <div style="display: flex; align-items: center; justify-content: center">
  29. <span>{{ scope.row.promoterName }}</span>
  30. <el-icon color="#79bbff" v-show="scope.row.answerPlatform == 'web'"><Monitor /></el-icon>
  31. <el-icon color="#79bbff" v-show="scope.row.answerPlatform == 'app'"><Iphone /></el-icon>
  32. </div>
  33. </template>
  34. </el-table-column>
  35. <el-table-column prop="answerName" label="接收方" align="center">
  36. <template #default="scope">
  37. <div style="display: flex; align-items: center">
  38. <span>{{ scope.row.answerName }}</span>
  39. <el-icon color="#79bbff" v-show="scope.row.answerPlatform == 'web'"><Monitor /></el-icon>
  40. <el-icon color="#79bbff" v-show="scope.row.answerPlatform == 'app'"><Iphone /></el-icon>
  41. </div>
  42. </template>
  43. </el-table-column>
  44. <el-table-column label="开始时间" align="center" prop="startTime" width="180">
  45. <template #default="scope">
  46. <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
  47. </template>
  48. </el-table-column>
  49. <el-table-column label="结束时间" align="center" prop="endTime" width="180">
  50. <template #default="scope">
  51. <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
  52. </template>
  53. </el-table-column>
  54. <el-table-column label="通话时间" align="center" prop="talkTime" width="180">
  55. <!-- <template #default="scope">
  56. </template> -->
  57. </el-table-column>
  58. <el-table-column label="通话类型" align="center" prop="type">
  59. <template #default="scope">
  60. {{ scope.row.type == 1 ? '音频' : '视频' }}
  61. </template>
  62. </el-table-column>
  63. <el-table-column label="呼叫类型" align="center" prop="groupId">
  64. <template #default="scope">
  65. {{ scope.row.groupId == '-1' ? '单呼' : '群呼' }}
  66. </template>
  67. </el-table-column>
  68.  
  69. <el-table-column label="接听类型" align="center" prop="answerType">
  70. <template #default="scope">
  71. <span>
  72. {{ proxy.selectDictLabel(nameList, scope.row.answerType) }}
  73. </span>
  74. </template>
  75. </el-table-column>
  76. <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  77. <template #default="scope">
  78. <el-button
  79. link
  80. type="primary"
  81. icon="View"
  82. @click="handleDetail(scope.row)"
  83. v-hasPermi="['rcloud:rcloudUnitHistroyTalk:view']"
  84. >详情</el-button
  85. >
  86. </template>
  87. </el-table-column>
  88. </el-table>
  89.  
  90. <pagination
  91. v-show="total > 0"
  92. :total="total"
  93. v-model:page="queryParams.pageNum"
  94. v-model:limit="queryParams.pageSize"
  95. @pagination="getList"
  96. />
  97.  
  98. <!-- 添加或修改融合通讯历史通话记录对话框 -->
  99. <el-dialog :title="title" v-model="open" width="500px" append-to-body>
  100. <el-form ref="rcloudUnitHistroyTalkRef" :model="form" :rules="rules" label-width="120px">
  101. <el-form-item label="开始时间" prop="startTime">
  102. <el-date-picker clearable v-model="form.startTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择开始时间">
  103. </el-date-picker>
  104. </el-form-item>
  105. <el-form-item label="结束时间" prop="endTime">
  106. <el-date-picker clearable v-model="form.endTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择结束时间">
  107. </el-date-picker>
  108. </el-form-item>
  109. <el-form-item label="呼叫类型" prop="groupId">
  110. <el-input v-model="form.groupId" placeholder="请输入呼叫类型" />
  111. </el-form-item>
  112. <el-form-item label="接听时间" prop="answerTime">
  113. <el-date-picker clearable v-model="form.answerTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择接听时间">
  114. </el-date-picker>
  115. </el-form-item>
  116. </el-form>
  117. <template #footer>
  118. <div class="dialog-footer">
  119. <el-button type="primary" @click="submitForm">确 定</el-button>
  120. <el-button @click="cancel">取 消</el-button>
  121. </div>
  122. </template>
  123. </el-dialog>
  124.  
  125. <!-- 融合通讯历史通话记录详情 -->
  126. <el-dialog title="融合通讯历史通话记录详情" v-model="detailOpen" width="800px" append-to-body class="dialog-detail-box">
  127. <div class="dialog-form-detail flex flex-r flex-wrap">
  128. <div class="flex flex-r">
  129. <div class="detail-label flex flex-align-center">开始时间</div>
  130. <div class="detail-value flex flex-align-center">
  131. <span>{{ parseTime(dialogFormDetail.startTime, '{y}-{m}-{d}') }}</span>
  132. </div>
  133. </div>
  134. <div class="flex flex-r">
  135. <div class="detail-label flex flex-align-center">结束时间</div>
  136. <div class="detail-value flex flex-align-center">
  137. <span>{{ parseTime(dialogFormDetail.endTime, '{y}-{m}-{d}') }}</span>
  138. </div>
  139. </div>
  140. <div class="flex flex-r">
  141. <div class="detail-label flex flex-align-center">通话时间</div>
  142. <div class="detail-value flex flex-align-center">
  143. <!-- <span>{{ parseTime(dialogFormDetail.talkTime, '{y}-{m}-{d}') }}</span> -->
  144. <span>{{ dialogFormDetail.talkTime }}</span>
  145. </div>
  146. </div>
  147.  
  148. <div class="flex flex-r">
  149. <div class="detail-label flex flex-align-center">通话类型</div>
  150. <div class="detail-value flex flex-align-center">
  151. {{ dialogFormDetail.type == 1 ? '音频' : '视频' }}
  152. </div>
  153. </div>
  154. <div class="flex flex-r">
  155. <div class="detail-label flex flex-align-center">呼叫类型</div>
  156. <div class="detail-value flex flex-align-center">
  157. {{ dialogFormDetail.groupId == '-1' ? '单呼' : '群呼' }}
  158. </div>
  159. </div>
  160. <div class="flex flex-r">
  161. <div class="detail-label flex flex-align-center">接听类型</div>
  162. <div class="detail-value flex flex-align-center">
  163. {{ proxy.selectDictLabel(nameList, dialogFormDetail.answerType) }}
  164. </div>
  165. </div>
  166. <div class="flex flex-r">
  167. <div class="detail-label flex flex-align-center">接听时间</div>
  168. <div class="detail-value flex flex-align-center">
  169. <span>{{ parseTime(dialogFormDetail.answerTime, '{y}-{m}-{d}') }}</span>
  170. </div>
  171. </div>
  172. <div class="flex flex-r">
  173. <div class="detail-label flex flex-align-center">发起方</div>
  174. <div class="detail-value flex flex-align-center">
  175. <span>{{ dialogFormDetail.promoterName }}</span>
  176. <el-icon color="#79bbff" v-show="dialogFormDetail.answerPlatform == 'web'"><Monitor /></el-icon>
  177. <el-icon color="#79bbff" v-show="dialogFormDetail.answerPlatform == 'app'"><Iphone /></el-icon>
  178. </div>
  179. </div>
  180. <div class="flex flex-r">
  181. <div class="detail-label flex flex-align-center">接收方</div>
  182. <div class="detail-value flex flex-align-center">
  183. <span>{{ dialogFormDetail.answerName }}</span>
  184. <el-icon color="#79bbff" v-show="dialogFormDetail.answerPlatform == 'web'"><Monitor /></el-icon>
  185. <el-icon color="#79bbff" v-show="dialogFormDetail.answerPlatform == 'app'"><Iphone /></el-icon>
  186. </div>
  187. </div>
  188. </div>
  189. <template #footer>
  190. <div class="dialog-footer">
  191. <el-button @click="cancel">关 闭</el-button>
  192. </div>
  193. </template>
  194. </el-dialog>
  195. </div>
  196. </template>
  197.  
  198. <script setup name="RcloudUnitHistroyTalk">
  199. import {
  200. pagercloudUnitHistroyTalk,
  201. getrcloudUnitHistroyTalk,
  202. delrcloudUnitHistroyTalk,
  203. addrcloudUnitHistroyTalk,
  204. updatercloudUnitHistroyTalk,
  205. } from '@/views/RongyunCommunication/rongyunjs/rcloudUnitHistroyTalk';
  206.  
  207. const { proxy } = getCurrentInstance();
  208.  
  209. const props = defineProps({
  210. detail: {
  211. type: Object,
  212. },
  213. });
  214.  
  215. const rcloudUnitHistroyTalkList = ref([]);
  216. const open = ref(false);
  217. const loading = ref(true);
  218. const showSearch = ref(true);
  219. const ids = ref([]);
  220. const single = ref(true);
  221. const multiple = ref(true);
  222. const total = ref(0);
  223. const title = ref('');
  224. const detailOpen = ref(false);
  225.  
  226. const nameList = ref([
  227. { label: '未响铃', value: 1 },
  228. { label: '响铃未接听', value: 2 },
  229. { label: '响铃后挂断', value: 3 },
  230. { label: '已接听', value: 4 },
  231. ]);
  232.  
  233. const data = reactive({
  234. form: {},
  235. queryParams: {
  236. pageNum: 1,
  237. pageSize: 10,
  238. promoterThridUserId: null,
  239. answerThridUserId: null,
  240. type: null,
  241. answerType: null,
  242. answerTime: null,
  243. status: null,
  244. talkTimeBegin: '',
  245. talkTimeEnd: '',
  246. },
  247. rules: {},
  248. dialogFormDetail: {}, //详情弹框数据
  249. });
  250.  
  251. const time = ref([
  252. proxy.moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
  253. proxy.moment().format('YYYY-MM-DD HH:mm:ss'),
  254. ]);
  255.  
  256. const { queryParams, form, rules, dialogFormDetail } = toRefs(data);
  257.  
  258. /** 查询融合通讯历史通话记录列表 */
  259. function getList() {
  260. loading.value = true;
  261. console.log('props.detail', props.detail);
  262. // if (time.value && time.value.length) {
  263. // queryParams.value.talkTimeBegin = time.value[0];
  264. // queryParams.value.talkTimeEnd = time.value[1];
  265. // } else {
  266. // queryParams.value.talkTimeBegin = '';
  267. // queryParams.value.talkTimeEnd = '';
  268. // }
  269. queryParams.value.promoterThridUserId = props.detail.promoterThridUserId;
  270. queryParams.value.startTime = props.detail.startTime;
  271.  
  272. pagercloudUnitHistroyTalk(queryParams.value).then(response => {
  273. console.log('response', response);
  274. rcloudUnitHistroyTalkList.value = response.data;
  275. total.value = response.total;
  276. loading.value = false;
  277. });
  278. }
  279.  
  280. // 取消按钮
  281. function cancel() {
  282. open.value = false;
  283. detailOpen.value = false;
  284. reset();
  285. }
  286.  
  287. // 表单重置
  288. function reset() {
  289. form.value = {
  290. id: null,
  291. registerThridUserId: null,
  292. startTime: null,
  293. endTime: null,
  294. type: null,
  295. groupId: null,
  296. answerType: null,
  297. answerTime: null,
  298. remark: null,
  299. status: null,
  300. delFlag: null,
  301. createBy: null,
  302. createTime: null,
  303. updateBy: null,
  304. updateTime: null,
  305. };
  306. proxy.resetForm('rcloudUnitHistroyTalkRef');
  307. }
  308.  
  309. /** 搜索按钮操作 */
  310. function handleQuery() {
  311. queryParams.value.pageNum = 1;
  312. getList();
  313. }
  314.  
  315. /** 重置按钮操作 */
  316. function resetQuery() {
  317. proxy.resetForm('queryRef');
  318. time.value = [
  319. proxy.moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
  320. proxy.moment().format('YYYY-MM-DD HH:mm:ss'),
  321. ];
  322. handleQuery();
  323. }
  324.  
  325. // 多选框选中数据
  326. function handleSelectionChange(selection) {
  327. ids.value = selection.map(item => item.id);
  328. single.value = selection.length != 1;
  329. multiple.value = !selection.length;
  330. }
  331.  
  332. /** 新增按钮操作 */
  333. function handleAdd() {
  334. reset();
  335. open.value = true;
  336. title.value = '添加融合通讯历史通话记录';
  337. }
  338.  
  339. /** 修改按钮操作 */
  340. function handleUpdate(row) {
  341. reset();
  342. const _id = row.id || ids.value;
  343. getrcloudUnitHistroyTalk(_id).then(response => {
  344. form.value = response.data;
  345. open.value = true;
  346. title.value = '修改融合通讯历史通话记录';
  347. });
  348. }
  349.  
  350. /** 提交按钮 */
  351. function submitForm() {
  352. proxy.$refs['rcloudUnitHistroyTalkRef'].validate(valid => {
  353. if (valid) {
  354. if (form.value.id != null) {
  355. updatercloudUnitHistroyTalk(form.value).then(response => {
  356. proxy.$modal.msgSuccess('修改成功');
  357. open.value = false;
  358. getList();
  359. });
  360. } else {
  361. addrcloudUnitHistroyTalk(form.value).then(response => {
  362. proxy.$modal.msgSuccess('新增成功');
  363. open.value = false;
  364. getList();
  365. });
  366. }
  367. }
  368. });
  369. }
  370.  
  371. /** 删除按钮操作 */
  372. function handleDelete(row) {
  373. const _ids = row.id || ids.value;
  374. proxy.$modal
  375. .confirm('是否确认删除融合通讯历史通话记录编号为"' + _ids + '"的数据项?')
  376. .then(function () {
  377. return delrcloudUnitHistroyTalk(_ids);
  378. })
  379. .then(() => {
  380. getList();
  381. proxy.$modal.msgSuccess('删除成功');
  382. })
  383. .catch(() => {});
  384. }
  385.  
  386. /** 导出按钮操作 */
  387. function handleExport() {
  388. proxy.download(
  389. 'rcloud/rcloudUnitHistroyTalk/export',
  390. {
  391. ...queryParams.value,
  392. },
  393. `rcloudUnitHistroyTalk_${new Date().getTime()}.xlsx`
  394. );
  395. }
  396. //查看详情操作
  397. function handleDetail(row) {
  398. detailOpen.value = true;
  399. dialogFormDetail.value = row;
  400. }
  401. onMounted(() => {
  402. getList();
  403. });
  404. </script>