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-11-28 17:17:07 +08:00
parent 0ad816cc6d
commit 4c2fb2a189
11 changed files with 317 additions and 686 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,13 +4,13 @@
<div class="system-user-search mb15">
<el-form :inline="true">
<el-form-item label="客服ID">
<el-input size="default" v-model="tableData.param.roleName" 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 />
</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">
<el-option label="小红书" value="xiaohongshu" />
<el-option label="抖音" value="douyin" />
<el-option label="快手" value="kuaishou" />
<el-option label="小红书" value="小红书" />
<el-option label="抖音" value="抖音" />
<el-option label="快手" value="快手" />
</el-select>
</el-form-item>
<el-form-item>
@@ -31,26 +31,29 @@
</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="name" label="客服ID" show-overflow-tooltip></el-table-column>
<el-table-column prop="customerServiceId" label="客服ID" show-overflow-tooltip></el-table-column>
<el-table-column prop="status" label="客服状态" show-overflow-tooltip>
<template #default="scope">
<el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
<el-tag type="info" v-else>禁用</el-tag>
<el-button
size="small"
:type="scope.row.status === 1 ? 'success' : 'info'"
@click="handleStatusChange(scope.row)"
:loading="scope.row.statusLoading"
>
{{ scope.row.status === 1 ? '启用' : '禁用' }}
</el-button>
</template>
</el-table-column>
<el-table-column prop="remark" label="客服平台" show-overflow-tooltip></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="updater" label="修改人" show-overflow-tooltip></el-table-column>
<el-table-column prop="createdAt" label="创建时间" show-overflow-tooltip></el-table-column>
<el-table-column prop="updatedAt" 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 label="操作" width="220">
<template #default="scope">
<el-button size="small" text type="primary" @click="onOpenEditRole(scope.row)">
<el-button style="color: deepskyblue" size="small" text type="primary" @click="onOpenEditRole(scope.row)">
<el-icon><ele-EditPen /></el-icon>修改
</el-button>
<el-button size="small" text type="primary" @click="onRowDel(scope.row)">
<el-icon><ele-DeleteFilled /></el-icon>删除
</el-button>
</template>
</el-table-column>
</el-table>
@@ -59,40 +62,41 @@
:total="tableData.total"
v-model:page="tableData.param.pageNum"
v-model:limit="tableData.param.pageSize"
@pagination="handlePaginationChange"
@pagination="getList"
/>
</el-card>
<EditRole ref="editRoleRef" @getRoleList="roleList" />
<EditRole ref="editRoleRef" @getRoleList="getList" />
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import { ref, reactive, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EditRole from '/@/views/customerService/account/component/editRole.vue';
import { deleteRole, getRoleList } from '/@/api/customerService/account';
import { getaccountAdd, getaccountList, updatestate } from '/@/api/customerService/account';
import { number } from 'echarts';
// 定义类型接口
interface TableDataItem {
id: number;
id: string;
customerServiceId: string;
status: number;
listOrder: number;
name: string;
remark: string;
dataScope: number;
createdAt: string;
updatedAt: string;
key: string;
creator?: string;
updater?: string;
platform: string;
creator: string;
modifier: string;
createdAt: number;
createdAtString: string;
updatedAt: number;
updatedAtString: string;
statusLoading?: boolean;
}
interface TableParam {
roleName: string;
customerServiceId: string;
platform: string;
roleStatus: string;
pageNum: number;
pageSize: number;
status: number;
}
interface TableState {
@@ -102,99 +106,17 @@ interface TableState {
param: TableParam;
}
// 模拟数据
const mockData: TableDataItem[] = [
{
id: 1,
status: 1,
listOrder: 0,
name: '987698789',
remark: '小红书',
dataScope: 3,
createdAt: '2022-04-01 11:38:39',
updatedAt: '2022-04-28 10:00:15',
key: 'list',
creator: '张三',
updater: '李四',
},
{
id: 2,
status: 1,
listOrder: 0,
name: '987698789',
remark: '抖音',
dataScope: 3,
createdAt: '2022-04-01 11:38:39',
updatedAt: '2022-04-28 10:01:34',
key: 'list',
creator: '王五',
updater: '赵六',
},
{
id: 3,
status: 1,
listOrder: 0,
name: '987698789',
remark: '快手',
dataScope: 3,
createdAt: '2022-04-01 11:38:39',
updatedAt: '2022-04-01 11:38:39',
key: '李四',
creator: '孙七',
updater: '周八',
},
{
id: 4,
status: 1,
listOrder: 0,
name: '987698789',
remark: '抖音',
dataScope: 3,
createdAt: '2022-04-01 11:38:39',
updatedAt: '2022-04-01 11:38:39',
key: '张三',
creator: '吴九',
updater: '郑十',
},
{
id: 5,
status: 1,
listOrder: 0,
name: '987698789',
remark: '抖音',
dataScope: 2,
createdAt: '2022-04-01 11:38:39',
updatedAt: '2022-04-01 11:38:39',
key: 'zhang',
creator: '钱一',
updater: '孙二',
},
{
id: 8,
status: 1,
listOrder: 0,
name: '987698789',
remark: '快手',
dataScope: 2,
createdAt: '2022-04-01 11:38:39',
updatedAt: '2022-04-06 09:53:40',
key: 'list',
creator: '李三',
updater: '王四',
},
];
// 响应式数据
const tableData = reactive<TableState>({
data: [],
total: 0,
loading: false,
param: {
roleName: '',
customerServiceId: '',
platform: '',
roleStatus: '',
pageNum: 1,
pageSize: 10,
status: 0,
},
});
@@ -202,23 +124,19 @@ const tableData = reactive<TableState>({
const editRoleRef = ref<InstanceType<typeof EditRole>>();
/**
* 获取角色列表
* 获取客服账号列表
*/
const roleList = async () => {
const getList = async () => {
try {
tableData.loading = true;
// 实际API调用
// const res = await getRoleList(tableData.param);
// tableData.data = res.data.list || [];
// tableData.total = res.data.total || 0;
// 模拟数据
await new Promise((resolve) => setTimeout(resolve, 500)); // 模拟网络延迟
tableData.data = mockData;
tableData.total = mockData.length;
const res = await getaccountList(tableData.param);
tableData.data = (res.data.list || []).map((item: TableDataItem) => ({
...item,
statusLoading: false,
}));
tableData.total = res.data.total || 0;
} catch (error) {
console.error('获取角色列表失败:', error);
console.error('获取客服账号列表失败:', error);
ElMessage.error('获取数据失败');
} finally {
tableData.loading = false;
@@ -226,78 +144,79 @@ const roleList = async () => {
};
/**
* 处理搜索
* 处理客服状态切换
* @param row - 客服数据
*/
const handleSearch = () => {
tableData.param.pageNum = 1; // 重置到第一页
roleList();
};
/**
* 处理分页变化
* @param pagination - 分页参数
*/
const handlePaginationChange = (pagination: { page: number; limit: number }) => {
tableData.param.pageNum = pagination.page;
tableData.param.pageSize = pagination.limit;
roleList();
};
/**
* 打开新增角色对话框
*/
const onOpenAddRole = () => {
if (editRoleRef.value) {
editRoleRef.value.openDialog();
}
};
/**
* 打开编辑角色对话框
* @param row - 角色数据
*/
const onOpenEditRole = (row: TableDataItem) => {
if (editRoleRef.value) {
editRoleRef.value.openDialog();
}
};
/**
* 删除角色
* @param row - 角色数据
*/
const onRowDel = async (row: TableDataItem) => {
const handleStatusChange = async (row: TableDataItem) => {
try {
await ElMessageBox.confirm(`此操作将永久删除客服账号："${row.name}"，是否继续?`, '提示', {
confirmButtonText: '确认',
await ElMessageBox.confirm(`确定要${row.status === 1 ? '禁用' : '启用'}客服账号 "${row.customerServiceId}" 吗？`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
// 实际删除操作
// await deleteRole(row.id);
row.statusLoading = true;
const newStatus = row.status === 1 ? 0 : 1;
// 调用状态更新接口
await updatestate({
id: row.id,
status: newStatus,
});
// 模拟删除成功
ElMessage.success('删除成功');
ElMessage.success(`客服账号已${newStatus === 1 ? '启用' : '禁用'}`);
// 刷新列表
await roleList();
// 重新获取数据确保数据同步
await getList();
} catch (error) {
// 用户取消操作，不处理
console.log('用户取消删除操作');
if (error === 'cancel') {
console.log('用户取消状态切换');
return;
}
console.error('状态切换失败:', error);
ElMessage.error('状态切换失败');
} finally {
setTimeout(() => {
row.statusLoading = false;
}, 300);
}
};
/**
* 初始化表格数据
* 处理搜索
*/
const initTableData = () => {
roleList();
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();
};
/**
* 打开新增客服对话框
*/
const onOpenAddRole = () => {
editRoleRef.value?.openDialog();
};
/**
* 打开编辑客服对话框
*/
const onOpenEditRole = (row: TableDataItem) => {
editRoleRef.value?.openDialog(row);
};
// 生命周期
onMounted(() => {
initTableData();
getList();
});
</script>