- <template>
- <div class="app-container">
- <!-- <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
- <el-form-item label="接收用户" prop="answerThridUserId">
- <el-input v-model="queryParams.answerThridUserId" placeholder="请输入接收用户" clearable @keyup.enter="handleQuery" />
- </el-form-item>
-
- <el-form-item label="接听时间" prop="answerTime" v-show="false">
- <el-date-picker
- clearable
- v-model="queryParams.answerTime"
- type="date"
- value-format="YYYY-MM-DD"
- placeholder="请选择接听时间"
- >
- </el-date-picker>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
- <el-button icon="Refresh" @click="resetQuery">重置</el-button>
- </el-form-item>
- </el-form> -->
-
- <el-table v-loading="loading" :data="rcloudUnitHistroyTalkList" @selection-change="handleSelectionChange">
- <el-table-column type="index" label="序号" width="55" align="center" />
- <el-table-column prop="promoterName" label="发起方" align="center">
- <template #default="scope">
- <div style="display: flex; align-items: center; justify-content: center">
- <span>{{ scope.row.promoterName }}</span>
- <el-icon color="#79bbff" v-show="scope.row.answerPlatform == 'web'"><Monitor /></el-icon>
- <el-icon color="#79bbff" v-show="scope.row.answerPlatform == 'app'"><Iphone /></el-icon>
- </div>
- </template>
- </el-table-column>
- <el-table-column prop="answerName" label="接收方" align="center">
- <template #default="scope">
- <div style="display: flex; align-items: center">
- <span>{{ scope.row.answerName }}</span>
- <el-icon color="#79bbff" v-show="scope.row.answerPlatform == 'web'"><Monitor /></el-icon>
- <el-icon color="#79bbff" v-show="scope.row.answerPlatform == 'app'"><Iphone /></el-icon>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="开始时间" align="center" prop="startTime" width="180">
- <template #default="scope">
- <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
- </template>
- </el-table-column>
- <el-table-column label="结束时间" align="center" prop="endTime" width="180">
- <template #default="scope">
- <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
- </template>
- </el-table-column>
- <el-table-column label="通话时间" align="center" prop="talkTime" width="180">
- <!-- <template #default="scope">
- </template> -->
- </el-table-column>
- <el-table-column label="通话类型" align="center" prop="type">
- <template #default="scope">
- {{ scope.row.type == 1 ? '音频' : '视频' }}
- </template>
- </el-table-column>
- <el-table-column label="呼叫类型" align="center" prop="groupId">
- <template #default="scope">
- {{ scope.row.groupId == '-1' ? '单呼' : '群呼' }}
- </template>
- </el-table-column>
-
- <el-table-column label="接听类型" align="center" prop="answerType">
- <template #default="scope">
- <span>
- {{ proxy.selectDictLabel(nameList, scope.row.answerType) }}
- </span>
- </template>
- </el-table-column>
- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
- <template #default="scope">
- <el-button
- link
- type="primary"
- icon="View"
- @click="handleDetail(scope.row)"
- v-hasPermi="['rcloud:rcloudUnitHistroyTalk:view']"
- >详情</el-button
- >
- </template>
- </el-table-column>
- </el-table>
-
- <pagination
- v-show="total > 0"
- :total="total"
- v-model:page="queryParams.pageNum"
- v-model:limit="queryParams.pageSize"
- @pagination="getList"
- />
-
- <!-- 添加或修改融合通讯历史通话记录对话框 -->
- <el-dialog :title="title" v-model="open" width="500px" append-to-body>
- <el-form ref="rcloudUnitHistroyTalkRef" :model="form" :rules="rules" label-width="120px">
- <el-form-item label="开始时间" prop="startTime">
- <el-date-picker clearable v-model="form.startTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择开始时间">
- </el-date-picker>
- </el-form-item>
- <el-form-item label="结束时间" prop="endTime">
- <el-date-picker clearable v-model="form.endTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择结束时间">
- </el-date-picker>
- </el-form-item>
- <el-form-item label="呼叫类型" prop="groupId">
- <el-input v-model="form.groupId" placeholder="请输入呼叫类型" />
- </el-form-item>
- <el-form-item label="接听时间" prop="answerTime">
- <el-date-picker clearable v-model="form.answerTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择接听时间">
- </el-date-picker>
- </el-form-item>
- </el-form>
- <template #footer>
- <div class="dialog-footer">
- <el-button type="primary" @click="submitForm">确 定</el-button>
- <el-button @click="cancel">取 消</el-button>
- </div>
- </template>
- </el-dialog>
-
- <!-- 融合通讯历史通话记录详情 -->
- <el-dialog title="融合通讯历史通话记录详情" v-model="detailOpen" width="800px" append-to-body class="dialog-detail-box">
- <div class="dialog-form-detail flex flex-r flex-wrap">
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">开始时间</div>
- <div class="detail-value flex flex-align-center">
- <span>{{ parseTime(dialogFormDetail.startTime, '{y}-{m}-{d}') }}</span>
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">结束时间</div>
- <div class="detail-value flex flex-align-center">
- <span>{{ parseTime(dialogFormDetail.endTime, '{y}-{m}-{d}') }}</span>
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">通话时间</div>
- <div class="detail-value flex flex-align-center">
- <!-- <span>{{ parseTime(dialogFormDetail.talkTime, '{y}-{m}-{d}') }}</span> -->
- <span>{{ dialogFormDetail.talkTime }}</span>
- </div>
- </div>
-
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">通话类型</div>
- <div class="detail-value flex flex-align-center">
- {{ dialogFormDetail.type == 1 ? '音频' : '视频' }}
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">呼叫类型</div>
- <div class="detail-value flex flex-align-center">
- {{ dialogFormDetail.groupId == '-1' ? '单呼' : '群呼' }}
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">接听类型</div>
- <div class="detail-value flex flex-align-center">
- {{ proxy.selectDictLabel(nameList, dialogFormDetail.answerType) }}
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">接听时间</div>
- <div class="detail-value flex flex-align-center">
- <span>{{ parseTime(dialogFormDetail.answerTime, '{y}-{m}-{d}') }}</span>
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">发起方</div>
- <div class="detail-value flex flex-align-center">
- <span>{{ dialogFormDetail.promoterName }}</span>
- <el-icon color="#79bbff" v-show="dialogFormDetail.answerPlatform == 'web'"><Monitor /></el-icon>
- <el-icon color="#79bbff" v-show="dialogFormDetail.answerPlatform == 'app'"><Iphone /></el-icon>
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">接收方</div>
- <div class="detail-value flex flex-align-center">
- <span>{{ dialogFormDetail.answerName }}</span>
- <el-icon color="#79bbff" v-show="dialogFormDetail.answerPlatform == 'web'"><Monitor /></el-icon>
- <el-icon color="#79bbff" v-show="dialogFormDetail.answerPlatform == 'app'"><Iphone /></el-icon>
- </div>
- </div>
- </div>
- <template #footer>
- <div class="dialog-footer">
- <el-button @click="cancel">关 闭</el-button>
- </div>
- </template>
- </el-dialog>
- </div>
- </template>
-
- <script setup name="RcloudUnitHistroyTalk">
- import {
- pagercloudUnitHistroyTalk,
- getrcloudUnitHistroyTalk,
- delrcloudUnitHistroyTalk,
- addrcloudUnitHistroyTalk,
- updatercloudUnitHistroyTalk,
- } from '@/views/RongyunCommunication/rongyunjs/rcloudUnitHistroyTalk';
-
- const { proxy } = getCurrentInstance();
-
- const props = defineProps({
- detail: {
- type: Object,
- },
- });
-
- const rcloudUnitHistroyTalkList = ref([]);
- const open = ref(false);
- const loading = ref(true);
- const showSearch = ref(true);
- const ids = ref([]);
- const single = ref(true);
- const multiple = ref(true);
- const total = ref(0);
- const title = ref('');
- const detailOpen = ref(false);
-
- const nameList = ref([
- { label: '未响铃', value: 1 },
- { label: '响铃未接听', value: 2 },
- { label: '响铃后挂断', value: 3 },
- { label: '已接听', value: 4 },
- ]);
-
- const data = reactive({
- form: {},
- queryParams: {
- pageNum: 1,
- pageSize: 10,
- promoterThridUserId: null,
- answerThridUserId: null,
- type: null,
- answerType: null,
- answerTime: null,
- status: null,
- talkTimeBegin: '',
- talkTimeEnd: '',
- },
- rules: {},
- dialogFormDetail: {}, //详情弹框数据
- });
-
- const time = ref([
- proxy.moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
- proxy.moment().format('YYYY-MM-DD HH:mm:ss'),
- ]);
-
- const { queryParams, form, rules, dialogFormDetail } = toRefs(data);
-
- /** 查询融合通讯历史通话记录列表 */
- function getList() {
- loading.value = true;
- console.log('props.detail', props.detail);
- // if (time.value && time.value.length) {
- // queryParams.value.talkTimeBegin = time.value[0];
- // queryParams.value.talkTimeEnd = time.value[1];
- // } else {
- // queryParams.value.talkTimeBegin = '';
- // queryParams.value.talkTimeEnd = '';
- // }
- queryParams.value.promoterThridUserId = props.detail.promoterThridUserId;
- queryParams.value.startTime = props.detail.startTime;
-
- pagercloudUnitHistroyTalk(queryParams.value).then(response => {
- console.log('response', response);
- rcloudUnitHistroyTalkList.value = response.data;
- total.value = response.total;
- loading.value = false;
- });
- }
-
- // 取消按钮
- function cancel() {
- open.value = false;
- detailOpen.value = false;
- reset();
- }
-
- // 表单重置
- function reset() {
- form.value = {
- id: null,
- registerThridUserId: null,
- startTime: null,
- endTime: null,
- type: null,
- groupId: null,
- answerType: null,
- answerTime: null,
- remark: null,
- status: null,
- delFlag: null,
- createBy: null,
- createTime: null,
- updateBy: null,
- updateTime: null,
- };
- proxy.resetForm('rcloudUnitHistroyTalkRef');
- }
-
- /** 搜索按钮操作 */
- function handleQuery() {
- queryParams.value.pageNum = 1;
- getList();
- }
-
- /** 重置按钮操作 */
- function resetQuery() {
- proxy.resetForm('queryRef');
- time.value = [
- proxy.moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
- proxy.moment().format('YYYY-MM-DD HH:mm:ss'),
- ];
- handleQuery();
- }
-
- // 多选框选中数据
- function handleSelectionChange(selection) {
- ids.value = selection.map(item => item.id);
- single.value = selection.length != 1;
- multiple.value = !selection.length;
- }
-
- /** 新增按钮操作 */
- function handleAdd() {
- reset();
- open.value = true;
- title.value = '添加融合通讯历史通话记录';
- }
-
- /** 修改按钮操作 */
- function handleUpdate(row) {
- reset();
- const _id = row.id || ids.value;
- getrcloudUnitHistroyTalk(_id).then(response => {
- form.value = response.data;
- open.value = true;
- title.value = '修改融合通讯历史通话记录';
- });
- }
-
- /** 提交按钮 */
- function submitForm() {
- proxy.$refs['rcloudUnitHistroyTalkRef'].validate(valid => {
- if (valid) {
- if (form.value.id != null) {
- updatercloudUnitHistroyTalk(form.value).then(response => {
- proxy.$modal.msgSuccess('修改成功');
- open.value = false;
- getList();
- });
- } else {
- addrcloudUnitHistroyTalk(form.value).then(response => {
- proxy.$modal.msgSuccess('新增成功');
- open.value = false;
- getList();
- });
- }
- }
- });
- }
-
- /** 删除按钮操作 */
- function handleDelete(row) {
- const _ids = row.id || ids.value;
- proxy.$modal
- .confirm('是否确认删除融合通讯历史通话记录编号为"' + _ids + '"的数据项?')
- .then(function () {
- return delrcloudUnitHistroyTalk(_ids);
- })
- .then(() => {
- getList();
- proxy.$modal.msgSuccess('删除成功');
- })
- .catch(() => {});
- }
-
- /** 导出按钮操作 */
- function handleExport() {
- proxy.download(
- 'rcloud/rcloudUnitHistroyTalk/export',
- {
- ...queryParams.value,
- },
- `rcloudUnitHistroyTalk_${new Date().getTime()}.xlsx`
- );
- }
- //查看详情操作
- function handleDetail(row) {
- detailOpen.value = true;
- dialogFormDetail.value = row;
- }
- onMounted(() => {
- getList();
- });
- </script>