red-future/admin-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善请求

Browse Source
This commit is contained in:
WUSIJIAN
2025-12-01 16:30:31 +08:00
parent 4128cd8c7b
commit 91ce6a597d
12 changed files with 402 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
src/views/customerService/account/index.vue
View File

@@ -4,7 +4,14 @@
<div class="system-user-search mb15">
<el-form :inline="true">
<el-form-item label="客服ID">
<el-input size="default" v-model="tableData.param.customerServiceId" placeholder="请输入客服ID" class="w-50 m-2" clearable />
<el-input
size="default"
v-model="tableData.param.customerServiceId"
placeholder="请输入客服ID"
class="w-50 m-2"
clearable
@keyup.enter="handleSearch"
/>
</el-form-item>
<el-form-item label="客服平台" prop="status" style="width: 200px">
<el-select v-model="tableData.param.platform" placeholder="请选择客服平台" clearable size="default" style="width: 240px">
@@ -14,7 +21,7 @@
</el-select>
</el-form-item>
<el-form-item>
<el-button size="default" type="primary" class="ml10" @click="handleSearch">
<el-button size="default" type="primary" class="ml10" @click="handleSearch" :loading="tableData.loading">
<el-icon>
<ele-Search />
</el-icon>
@@ -26,29 +33,43 @@
</el-icon>
新增客服
</el-button>
<!-- <el-button size="default" class="ml10" @click="handleReset" :disabled="tableData.loading">
<el-icon>
<ele-Refresh />
</el-icon>
重置
</el-button> -->
</el-form-item>
</el-form>
</div>
<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading">
<el-table-column type="index" label="序号" width="60" />
<el-table-column prop="customerServiceId" label="客服ID" show-overflow-tooltip></el-table-column>
<el-table-column prop="status" label="客服状态" show-overflow-tooltip>
<el-table-column prop="isDisabled" label="客服状态" show-overflow-tooltip>
<template #default="scope">
<el-button
size="small"
:type="scope.row.status === 1 ? 'success' : 'info'"
:type="scope.row.isDisabled == 1 ? 'success' : 'info'"
@click="handleStatusChange(scope.row)"
:loading="scope.row.statusLoading"
>
{{ scope.row.status === 1 ? '启用' : '禁用' }}
{{ scope.row.isDisabled == 1 ? '启用' : '禁用' }}
</el-button>
</template>
</el-table-column>
<el-table-column prop="platform" label="客服平台" show-overflow-tooltip></el-table-column>
<el-table-column prop="creator" label="创建人" show-overflow-tooltip></el-table-column>
<el-table-column prop="modifier" label="修改人" show-overflow-tooltip></el-table-column>
<el-table-column prop="createdAtString" label="创建时间" show-overflow-tooltip></el-table-column>
<el-table-column prop="updatedAtString" label="修改时间" show-overflow-tooltip></el-table-column>
<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip>
<template #default="{ row }">
{{ formatTime(row.createdAt) }}
</template>
</el-table-column>
<el-table-column prop="updatedAt" label="修改时间" show-overflow-tooltip>
<template #default="{ row }">
{{ formatTime(row.updatedAt) }}
</template>
</el-table-column>
<el-table-column label="操作" width="220">
<template #default="scope">
<el-button style="color: deepskyblue" size="small" text type="primary" @click="onOpenEditRole(scope.row)">
@@ -65,29 +86,26 @@
@pagination="getList"
/>
</el-card>
<EditRole ref="editRoleRef" @getRoleList="getList" />
<EditAccount ref="editRoleRef" @getRoleList="getList" />
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EditRole from '/@/views/customerService/account/component/editRole.vue';
import EditAccount from './component/editAccount.vue';
import { getaccountAdd, getaccountList, updatestate } from '/@/api/customerService/account';
import { number } from 'echarts';
// 定义类型接口
interface TableDataItem {
id: string;
customerServiceId: string;
status: number;
isDisabled: number; // 修正：应该是isDisabled而不是status
platform: string;
creator: string;
modifier: string;
createdAt: number;
createdAtString: string;
updatedAt: number;
updatedAtString: string;
statusLoading?: boolean;
}
@@ -96,7 +114,7 @@ interface TableParam {
platform: string;
pageNum: number;
pageSize: number;
status: number;
isDisabled: number;
}
interface TableState {
@@ -106,18 +124,21 @@ interface TableState {
param: TableParam;
}
// 初始参数（用于重置）
const initialParam: TableParam = {
customerServiceId: '',
platform: '',
pageNum: 1,
pageSize: 10,
isDisabled: 0,
};
// 响应式数据
const tableData = reactive<TableState>({
data: [],
total: 0,
loading: false,
param: {
customerServiceId: '',
platform: '',
pageNum: 1,
pageSize: 10,
status: 0,
},
param: { ...initialParam },
});
// 模板引用
@@ -129,47 +150,120 @@ const editRoleRef = ref<InstanceType<typeof EditRole>>();
const getList = async () => {
try {
tableData.loading = true;
const res = await getaccountList(tableData.param);
tableData.data = (res.data.list || []).map((item: TableDataItem) => ({
...item,
statusLoading: false,
}));
tableData.total = res.data.total || 0;
// 构建查询参数，过滤空值
const queryParams: any = {
pageNum: tableData.param.pageNum,
pageSize: tableData.param.pageSize,
customerServiceId: tableData.param.customerServiceId || undefined,
platform: tableData.param.platform || undefined,
};
const res = await getaccountList(queryParams);
if (res && res.data) {
tableData.data = (res.data.list || []).map((item: TableDataItem) => ({
...item,
statusLoading: false,
}));
tableData.total = res.data.total || 0;
} else {
tableData.data = [];
tableData.total = 0;
ElMessage.warning('暂无数据');
}
} catch (error) {
console.error('获取客服账号列表失败:', error);
ElMessage.error('获取数据失败');
tableData.data = [];
tableData.total = 0;
} finally {
tableData.loading = false;
}
};
/**
* 处理搜索
*/
const handleSearch = () => {
tableData.param.pageNum = 1; // 搜索时重置到第一页
getList();
};
/**
* 重置查询条件
*/
const handleReset = () => {
// 重新获取数据
getList();
};
// ==================== 时间处理函数 ====================
/**
* 格式化时间显示
*/
const formatTime = (time: string | number | Date): string => {
if (!time) return '-';
try {
let date: Date;
if (time instanceof Date) {
date = time;
} else if (typeof time === 'string') {
date = new Date(time);
} else {
let timestamp = time;
if (timestamp > 1000000000000) {
// 已经是毫秒时间戳
} else if (timestamp > 1000000000) {
// 秒时间戳，转换为毫秒
timestamp = timestamp * 1000;
}
date = new Date(timestamp);
}
if (isNaN(date.getTime())) {
return String(time);
}
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const hours = String(date.getHours()).padStart(2, '0');
const minutes = String(date.getMinutes()).padStart(2, '0');
const seconds = String(date.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
} catch (error) {
console.error('时间格式化错误:', error);
return String(time);
}
};
/**
* 处理客服状态切换
* @param row - 客服数据
*/
const handleStatusChange = async (row: TableDataItem) => {
try {
await ElMessageBox.confirm(`确定要${row.status === 1 ? '禁用' : '启用'}客服账号 "${row.customerServiceId}" 吗？`, '提示', {
await ElMessageBox.confirm(`确定要${row.isDisabled == 1 ? '禁用' : '启用'}客服账号 "${row.customerServiceId}" 吗？`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
row.statusLoading = true;
const newStatus = row.status === 1 ? 0 : 1;
// 调用状态更新接口
const newStatus = row.isDisabled == 1 ? 0 : 1; // 修正：使用isDisabled字段
await updatestate({
id: row.id,
status: newStatus,
status: newStatus, // 接口可能需要status字段
});
ElMessage.success(`客服账号已${newStatus === 1 ? '启用' : '禁用'}`);
// 重新获取数据确保数据同步
await getList();
ElMessage.success(`客服账号已${newStatus == 0 ? '禁用' : '启用'}`);
await getList(); // 重新获取数据
} catch (error) {
if (error === 'cancel') {
console.log('用户取消状态切换');
if (error == 'cancel') {
return;
}
console.error('状态切换失败:', error);
@@ -181,25 +275,6 @@ const handleStatusChange = async (row: TableDataItem) => {
}
};
/**
* 处理搜索
*/
const handleSearch = () => {
tableData.param.pageNum = 1;
getList();
};
/**
* 处理分页变化
* @param pagination - 分页参数 { page: number, limit: number }
*/
const handlePaginationChange = (pagination: { page: number; limit: number }) => {
console.log('分页参数:', pagination.limit); // 调试用
tableData.param.pageNum = pagination.page;
tableData.param.pageSize = pagination.limit;
getList();
};
/**
* 打开新增客服对话框
*/