324 lines
8.1 KiB
Vue
324 lines
8.1 KiB
Vue
<template>
|
||
<div class="system-role-container">
|
||
<el-card shadow="hover">
|
||
<div class="system-user-search mb15">
|
||
<el-form :inline="true">
|
||
<el-form-item label="客服账号">
|
||
<el-input
|
||
size="default"
|
||
v-model="tableData.param.accountName"
|
||
placeholder="请输入客服账号"
|
||
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">
|
||
<el-option label="小红书" value="小红书" />
|
||
<el-option label="抖音" value="抖音" />
|
||
<el-option label="快手" value="快手" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button size="default" type="primary" class="ml10" @click="handleSearch" :loading="tableData.loading">
|
||
<el-icon>
|
||
<ele-Search />
|
||
</el-icon>
|
||
查询
|
||
</el-button>
|
||
<el-button size="default" type="success" class="ml10 " @click="onOpenAddRole">
|
||
<el-icon>
|
||
<ele-FolderAdd />
|
||
</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="accountName" label="客服账号" show-overflow-tooltip></el-table-column>
|
||
<el-table-column prop="isDisabled" label="客服状态" show-overflow-tooltip>
|
||
<template #default="scope">
|
||
<el-button
|
||
size="small"
|
||
:type="!scope.row.isDisabled ? 'success' : 'info'"
|
||
@click="handleStatusChange(scope.row)"
|
||
:loading="scope.row.statusLoading"
|
||
>
|
||
{{ !scope.row.isDisabled ? '启用' : '禁用' }}
|
||
</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="updater" 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="150">
|
||
<template #default="scope">
|
||
<el-button style="color: deepskyblue" size="small" text type="primary" @click="onOpenEditRole(scope.row)">
|
||
<el-icon><ele-EditPen /></el-icon>修改
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<pagination
|
||
v-show="tableData.total > 0"
|
||
:total="tableData.total"
|
||
v-model:page="tableData.param.pageNum"
|
||
v-model:limit="tableData.param.pageSize"
|
||
@pagination="getList"
|
||
/>
|
||
</el-card>
|
||
<EditAccount ref="editRoleRef" @refresh="getList" />
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, reactive, onMounted } from 'vue';
|
||
import { ElMessageBox, ElMessage } from 'element-plus';
|
||
import EditAccount from './component/editAccount.vue';
|
||
import { addAccount, getaccountList, updatestate } from '/@/api/customerService/account';
|
||
|
||
// 定义类型接口
|
||
interface TableDataItem {
|
||
id: string;
|
||
accountName: string;
|
||
isDisabled: boolean; // 布尔值：false=启用，true=禁用
|
||
platform: string;
|
||
creator: string;
|
||
modifier: string;
|
||
createdAt: number;
|
||
updatedAt: number;
|
||
statusLoading?: boolean;
|
||
}
|
||
|
||
interface TableParam {
|
||
accountName: string;
|
||
platform: string;
|
||
pageNum: number;
|
||
pageSize: number;
|
||
isDisabled?: boolean;
|
||
}
|
||
|
||
interface TableState {
|
||
data: TableDataItem[];
|
||
total: number;
|
||
loading: boolean;
|
||
param: TableParam;
|
||
}
|
||
|
||
// 初始参数（用于重置）
|
||
const initialParam: TableParam = {
|
||
accountName: '',
|
||
platform: '',
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
};
|
||
|
||
// 响应式数据
|
||
const tableData = reactive<TableState>({
|
||
data: [],
|
||
total: 0,
|
||
loading: false,
|
||
param: { ...initialParam },
|
||
});
|
||
|
||
// 模板引用
|
||
const editRoleRef = ref<InstanceType<typeof EditAccount>>();
|
||
|
||
/**
|
||
* 获取客服账号列表
|
||
*/
|
||
const getList = async () => {
|
||
try {
|
||
tableData.loading = true;
|
||
|
||
// 构建查询参数，过滤空值
|
||
const queryParams: any = {
|
||
pageNum: tableData.param.pageNum,
|
||
pageSize: tableData.param.pageSize,
|
||
accountName: tableData.param.accountName || 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);
|
||
// 错误已由请求拦截器统一处理
|
||
tableData.data = [];
|
||
tableData.total = 0;
|
||
} finally {
|
||
tableData.loading = false;
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 处理搜索
|
||
*/
|
||
const handleSearch = () => {
|
||
tableData.param.pageNum = 1; // 搜索时重置到第一页
|
||
getList();
|
||
};
|
||
|
||
/**
|
||
* 重置查询条件
|
||
*/
|
||
const handleReset = () => {
|
||
// 重新获取数据
|
||
tableData.param = { ...initialParam };
|
||
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);
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 处理客服状态切换
|
||
*/
|
||
const handleStatusChange = async (row: TableDataItem) => {
|
||
try {
|
||
await ElMessageBox.confirm(`确定要${!row.isDisabled ? '禁用' : '启用'}客服账号 "${row.accountName}" 吗？`, '提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
});
|
||
|
||
row.statusLoading = true;
|
||
const newStatus = !row.isDisabled; // 切换布尔值
|
||
|
||
await updatestate({
|
||
id: row.id,
|
||
isDisabled: newStatus,
|
||
});
|
||
|
||
ElMessage.success(`客服账号已${newStatus ? '禁用' : '启用'}`);
|
||
await getList(); // 重新获取数据
|
||
} catch (error) {
|
||
if (error == 'cancel') {
|
||
return;
|
||
}
|
||
console.error('状态切换失败:', error);
|
||
// 错误已由请求拦截器统一处理
|
||
} finally {
|
||
setTimeout(() => {
|
||
row.statusLoading = false;
|
||
}, 300);
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 打开新增客服对话框
|
||
*/
|
||
const onOpenAddRole = () => {
|
||
editRoleRef.value?.openDialog();
|
||
};
|
||
|
||
/**
|
||
* 打开编辑客服对话框
|
||
*/
|
||
const onOpenEditRole = (row: any) => {
|
||
editRoleRef.value?.openDialog(row);
|
||
};
|
||
|
||
|
||
// 生命周期
|
||
onMounted(() => {
|
||
getList();
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.system-user-search {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.mb15 {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.ml10 {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.w-50 {
|
||
width: 240px;
|
||
}
|
||
|
||
.system-role-container {
|
||
padding: 20px;
|
||
}
|
||
|
||
:deep(.el-table) {
|
||
margin-top: 10px;
|
||
}
|
||
</style>
|