|
|
@@ -1,26 +1,21 @@
|
|
|
<template>
|
|
|
<div class="tels-callLog-container layout-padding">
|
|
|
<div class="layout-padding-auto layout-padding-view pd20">
|
|
|
- <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
|
|
|
- <el-form-item prop="UserName">
|
|
|
- <el-input v-model="state.queryParams.UserName" placeholder="坐席人员" clearable @keyup.enter="handleQuery" class="keyword-input" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="StaffNo">
|
|
|
- <el-input v-model="state.queryParams.StaffNo" placeholder="工号" clearable @keyup.enter="handleQuery" class="keyword-input" />
|
|
|
+ <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline :disabled="state.loading">
|
|
|
+ <el-form-item prop="crTime">
|
|
|
+ <statistical-time v-model="state.queryParams.crTime" @change="handleQuery" ref="statisticalTimeRef" :disabled="state.loading" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item prop="GroupId">
|
|
|
- <el-input v-model="state.queryParams.GroupId" placeholder="工作组" clearable @keyup.enter="handleQuery" class="keyword-input" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="OperateState">
|
|
|
- <el-select v-model="state.queryParams.OperateState" placeholder="动作类型" clearable class="w100" @change="handleQuery">
|
|
|
- <el-option v-for="item in state.operations" :value="item.key" :key="item.key" :label="item.value" />
|
|
|
- </el-select>
|
|
|
+ <el-form-item prop="OperateState" label="动作类型">
|
|
|
+ <el-select v-model="state.queryParams.OperateState" placeholder="动作类型" clearable class="w100" @change="handleQuery">
|
|
|
+ <el-option v-for="item in state.operations" :value="item.key" :key="item.key" :label="item.value" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="UserName" label="坐席人员">
|
|
|
+ <el-input v-model="state.queryParams.UserName" placeholder="坐席人员" clearable @keyup.enter="handleQuery" class="keyword-input" />
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
|
|
|
- <el-button @click="resetQuery(ruleFormRef)" class="default-button" :loading="state.loading">
|
|
|
- <SvgIcon name="ele-Refresh" class="mr5" />重置
|
|
|
- </el-button>
|
|
|
+ <el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<vxe-toolbar
|
|
|
@@ -58,28 +53,53 @@
|
|
|
{{ formatDate(row.operateTime, 'YYYY-mm-dd HH:MM:SS') }}
|
|
|
</template>
|
|
|
</vxe-column>
|
|
|
+ <vxe-column field="operateTime" title="结束时间" width="160">
|
|
|
+ <template #default="{ row }">
|
|
|
+ {{ formatDate(row.operateTime, 'YYYY-mm-dd HH:MM:SS') }}
|
|
|
+ </template>
|
|
|
+ </vxe-column>
|
|
|
+ <vxe-column field="operateTime" title="时长(秒)" min-width="120"> </vxe-column>
|
|
|
</vxe-table>
|
|
|
</div>
|
|
|
- <div class="flex-end">
|
|
|
- <el-pagination
|
|
|
- layout="prev, pager, next"
|
|
|
- :total="state.total"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- :page-size="state.queryParams.PageSize"
|
|
|
- :current-page="state.queryParams.PageIndex"
|
|
|
- />
|
|
|
- </div>
|
|
|
+ <pagination
|
|
|
+ @pagination="queryList"
|
|
|
+ :total="state.total"
|
|
|
+ v-model:current-page="state.queryParams.PageIndex"
|
|
|
+ v-model:page-size="state.queryParams.PageSize"
|
|
|
+ :disabled="state.loading"
|
|
|
+ />
|
|
|
</div>
|
|
|
+ <!-- 更多查询 -->
|
|
|
+ <el-drawer v-model="drawer" title="更多查询" size="500px">
|
|
|
+ <el-form-item label="分机号" prop="TelNo">
|
|
|
+ <el-input v-model="state.queryParams.TelNo" placeholder="分机号" clearable @keyup.enter="handleQuery" class="keyword-input" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form :model="state.queryParams" ref="drawerRuleFormRef" @submit.native.prevent label-width="90px" :disabled="state.loading">
|
|
|
+ <el-form-item prop="StaffNo" label="工号">
|
|
|
+ <el-input v-model="state.queryParams.StaffNo" placeholder="工号" clearable @keyup.enter="handleQuery" class="keyword-input" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="GroupId" label="工作组">
|
|
|
+ <el-input v-model="state.queryParams.GroupId" placeholder="工作组" clearable @keyup.enter="handleQuery" class="keyword-input" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
|
|
|
+ <el-button @click="resetQuery(drawerRuleFormRef)" class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
|
|
|
+ </template>
|
|
|
+ </el-drawer>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="tsx" setup name="telsPhoneAction">
|
|
|
-import { onMounted, reactive, ref } from 'vue';
|
|
|
+import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
|
|
|
import type { FormInstance } from 'element-plus';
|
|
|
-import { getNeedArr } from '@/utils/tools';
|
|
|
import { formatDate } from '@/utils/formatTime';
|
|
|
import Other from '@/utils/other';
|
|
|
-import { getCallCenterOperateRecord, getCallCenterOperateRecordBaseData } from '@/api/callCenter';
|
|
|
+import { getCallCenterOperateRecord, getCallCenterOperateRecordBaseData, getCallCenterOperateRecordTotal } from '@/api/callCenter';
|
|
|
+import { defaultDate } from '@/utils/constants';
|
|
|
+
|
|
|
+const StatisticalTime = defineAsyncComponent(() => import('@/components/StatisticalTime/index.vue')); // 日期类型选择组件
|
|
|
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
|
|
|
|
|
|
// 定义变量内容
|
|
|
const state = reactive<any>({
|
|
|
@@ -90,6 +110,10 @@ const state = reactive<any>({
|
|
|
StaffNo: null, // 工号
|
|
|
GroupId: null, // 工作组
|
|
|
OperateState: null, // 操作类型
|
|
|
+ crTime: defaultDate,
|
|
|
+ StartTime: null,
|
|
|
+ EndTime: null,
|
|
|
+ TelNo: null,
|
|
|
},
|
|
|
tableData: [], // 列表数据
|
|
|
loading: false, // 加载
|
|
|
@@ -97,59 +121,48 @@ const state = reactive<any>({
|
|
|
callDirection: [],
|
|
|
operations: [],
|
|
|
});
|
|
|
-const ruleFormRef = ref<FormInstance>(); // 表单ref
|
|
|
// 手动查询，将页码设置为1
|
|
|
const handleQuery = () => {
|
|
|
state.queryParams.PageIndex = 1;
|
|
|
- queryIndex.value = 0;
|
|
|
- queryList(true);
|
|
|
-};
|
|
|
-// 改变页码
|
|
|
-const queryIndex = ref(0); // 数据批次
|
|
|
-const totalTable = ref([]); // 数据总数
|
|
|
-const handleCurrentChange = (val: number) => {
|
|
|
- state.queryParams.PageIndex = val;
|
|
|
- // 判断当前页是否是数据的最后一页
|
|
|
- if (val === Math.ceil(state.total / state.queryParams.PageSize)) {
|
|
|
- queryList();
|
|
|
- } else {
|
|
|
- state.tableData = getNeedArr(totalTable.value, state.queryParams.PageSize)[state.queryParams.PageIndex - 1]; //当前页的表格数据
|
|
|
- }
|
|
|
+ queryList();
|
|
|
+ getTotal();
|
|
|
};
|
|
|
-/** 通话记录列表 */
|
|
|
+/** 很滑稽动作列表 */
|
|
|
const requestParams = ref<EmptyObjectType>({});
|
|
|
-const queryList = async (isQuery: boolean = false) => {
|
|
|
+const queryList = async () => {
|
|
|
state.loading = true;
|
|
|
requestParams.value = Other.deepClone(state.queryParams);
|
|
|
- requestParams.value.QueryIndex = queryIndex.value; // 数据批次
|
|
|
- state.loading = true;
|
|
|
+ requestParams.value.StartTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[0];
|
|
|
+ requestParams.value.EndTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
|
|
|
+ Reflect.deleteProperty(requestParams.value, 'crTime');
|
|
|
getCallCenterOperateRecord(requestParams.value)
|
|
|
.then((response: any) => {
|
|
|
- if (isQuery) {
|
|
|
- // 如果是查询
|
|
|
- totalTable.value = []; // 先清空
|
|
|
- totalTable.value = response?.result;
|
|
|
- state.total = totalTable.value.length;
|
|
|
- state.tableData = getNeedArr(totalTable.value, state.queryParams.PageSize)[state.queryParams.PageIndex - 1]; //当前页的表格数据
|
|
|
- queryIndex.value = 1;
|
|
|
- } else {
|
|
|
- if (response?.result.length) queryIndex.value++;
|
|
|
- totalTable.value = totalTable.value.concat(response?.result);
|
|
|
- state.total = totalTable.value.length;
|
|
|
- state.tableData = getNeedArr(totalTable.value, state.queryParams.PageSize)[state.queryParams.PageIndex - 1]; //当前页的表格数据
|
|
|
- }
|
|
|
+ state.tableData = response?.result ?? [];
|
|
|
state.loading = false;
|
|
|
})
|
|
|
.catch(() => {
|
|
|
state.loading = false;
|
|
|
});
|
|
|
};
|
|
|
+// 查询总数
|
|
|
+const getTotal = () => {
|
|
|
+ getCallCenterOperateRecordTotal(requestParams.value)
|
|
|
+ .then((res) => {
|
|
|
+ state.total = res.result ?? 0;
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+};
|
|
|
/** 重置按钮操作 */
|
|
|
+const statisticalTimeRef = ref<RefType>();
|
|
|
+const drawerRuleFormRef = ref();
|
|
|
+const ruleFormRef = ref<RefType>(); // 表单ref
|
|
|
+const drawer = ref(false);
|
|
|
const resetQuery = (formEl: FormInstance | undefined) => {
|
|
|
if (!formEl) return;
|
|
|
formEl.resetFields();
|
|
|
- queryIndex.value = 0;
|
|
|
- queryList(true);
|
|
|
+ statisticalTimeRef.value.reset();
|
|
|
+ ruleFormRef.value?.resetFields();
|
|
|
+ queryList();
|
|
|
};
|
|
|
// 基础信息
|
|
|
const getBaseData = async () => {
|
|
|
@@ -165,6 +178,7 @@ const tableRef = ref<RefType>();
|
|
|
onMounted(() => {
|
|
|
getBaseData();
|
|
|
queryList();
|
|
|
+ getTotal();
|
|
|
if (tableRef.value && toolbarRef.value) {
|
|
|
tableRef.value.connect(toolbarRef.value);
|
|
|
}
|
zhangchong