395 lines
14 KiB
Vue
395 lines
14 KiB
Vue
<template>
|
|
<div class="p-2 page-shell system-csAgent-page">
|
|
<div class="search-wrap">
|
|
<pagecrumb></pagecrumb>
|
|
<el-card :class="{ 'is-collapsed': !showSearch }" class="search-panel" shadow="hover">
|
|
<el-form ref="queryFormRef" :inline="true" :model="queryParams" class="query-form" label-position="top">
|
|
|
|
<el-form-item label="客服姓名" prop="name">
|
|
<el-input v-model="queryParams.name" clearable placeholder="请输入客服姓名" size="large"
|
|
style="width:240px;"
|
|
@keyup.enter="handleQuery"/>
|
|
</el-form-item>
|
|
<el-form-item label="客服工号" prop="jobNo">
|
|
<el-input v-model="queryParams.jobNo" clearable placeholder="请输入客服工号" size="large"
|
|
style="width:240px;"
|
|
@keyup.enter="handleQuery"/>
|
|
</el-form-item>
|
|
<el-form-item label="账号状态" prop="status">
|
|
<el-select v-model="queryParams.status" clearable placeholder="请选择账号状态" size="large"
|
|
style="width:180px;">
|
|
<el-option :value="true" label="是"/>
|
|
<el-option :value="false" label="否"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="在线状态" prop="onlineStatus">
|
|
<el-select v-model="queryParams.onlineStatus" clearable placeholder="请选择在线状态" size="large"
|
|
style="width:180px;">
|
|
<el-option :value="true" label="是"/>
|
|
<el-option :value="false" label="否"/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button size="large" type="primary" @click="handleQuery">查询</el-button>
|
|
<el-button size="large" @click="resetQuery">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
</div>
|
|
|
|
<el-card class="table-panel" shadow="hover">
|
|
<template #header>
|
|
<div class="toolbar-shell">
|
|
<div class="table-heading">
|
|
<el-button type="primary">
|
|
<span style="margin:0 8px;color: #fff;">全部</span>
|
|
<span style="color: #fff;font-weight: bold">1286</span>
|
|
</el-button>
|
|
<tableTag circle-color="#16a34a" num="6" title="在线"></tableTag>
|
|
<tableTag circle-color="#ea580c" num="2" title="忙碌"></tableTag>
|
|
<tableTag circle-color="#94a3b8" num="4" title="离线"></tableTag>
|
|
</div>
|
|
<div class="toolbar-actions">
|
|
<el-button v-hasPermi="['system:csAgent:edit']" :disabled="single" plain type="info"
|
|
@click="handleUpdate()">批量禁用账号
|
|
</el-button>
|
|
<el-button v-hasPermi="['system:csAgent:add']" type="primary" @click="handleAdd">新增客服
|
|
</el-button>
|
|
<right-toolbar v-model:show-search="showSearch" :search="false" @query-table="getList"></right-toolbar>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<el-table v-loading="loading" :data="csAgentList" border class="data-table"
|
|
@selection-change="handleSelectionChange">
|
|
<el-table-column align="center" type="selection" width="55"/>
|
|
<el-table-column align="center" label="主键" prop="agentId"/>
|
|
<el-table-column align="center" label="客服编号，如 KF-001" prop="agentNo"/>
|
|
<el-table-column align="center" label="工号" prop="jobNo"/>
|
|
<el-table-column align="center" label="客服姓名" prop="name"/>
|
|
<el-table-column align="center" label="登录账号" prop="account"/>
|
|
<el-table-column align="center" label="密码" prop="password"/>
|
|
<el-table-column align="center" label="手机号" prop="phone"/>
|
|
<el-table-column align="center" label="头像 oss_id" prop="avatarOssId"/>
|
|
<el-table-column align="center" label="在线状态" prop="onlineStatus" width="120">
|
|
<template #default="scope">
|
|
<el-switch
|
|
v-model="scope.row.onlineStatus"
|
|
:active-value="true"
|
|
:inactive-value="false"
|
|
disabled
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="账号状态" prop="status" width="120">
|
|
<template #default="scope">
|
|
<el-switch
|
|
v-model="scope.row.status"
|
|
:active-value="true"
|
|
:inactive-value="false"
|
|
disabled
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" class-name="small-padding fixed-width" label="操作">
|
|
<template #default="scope">
|
|
<el-tooltip content="修改" placement="top">
|
|
<el-button v-hasPermi="['system:csAgent:edit']" icon="Edit" link type="primary"
|
|
@click="handleUpdate(scope.row)"></el-button>
|
|
</el-tooltip>
|
|
<el-tooltip content="删除" placement="top">
|
|
<el-button v-hasPermi="['system:csAgent:remove']" icon="Delete" link type="primary"
|
|
@click="handleDelete(scope.row)"></el-button>
|
|
</el-tooltip>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<pagination v-show="total > 0" v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNum"
|
|
:total="total" @pagination="getList"/>
|
|
</el-card>
|
|
<!-- 添加或修改客服人员对话框 -->
|
|
<el-dialog v-model="dialog.visible" :title="dialog.title" append-to-body width="500px">
|
|
<el-form ref="csAgentFormRef" :model="form" :rules="rules" label-width="80px">
|
|
<el-form-item label="客服编号，如 KF-001" prop="agentNo">
|
|
<el-input v-model="form.agentNo" placeholder="请输入客服编号，如 KF-001"/>
|
|
</el-form-item>
|
|
<el-form-item label="工号" prop="jobNo">
|
|
<el-input v-model="form.jobNo" placeholder="请输入工号"/>
|
|
</el-form-item>
|
|
<el-form-item label="客服姓名" prop="name">
|
|
<el-input v-model="form.name" placeholder="请输入客服姓名"/>
|
|
</el-form-item>
|
|
<el-form-item label="登录账号" prop="account">
|
|
<el-input v-model="form.account" placeholder="请输入登录账号"/>
|
|
</el-form-item>
|
|
<el-form-item label="密码" prop="password">
|
|
<el-input v-model="form.password" placeholder="请输入密码"/>
|
|
</el-form-item>
|
|
<el-form-item label="手机号" prop="phone">
|
|
<el-input v-model="form.phone" placeholder="请输入手机号"/>
|
|
</el-form-item>
|
|
<el-form-item label="头像 oss_id" prop="avatarOssId">
|
|
<el-input-number v-model="form.avatarOssId" controls-position="right"/>
|
|
</el-form-item>
|
|
<el-form-item label="在线状态" prop="onlineStatus">
|
|
<el-switch
|
|
v-model="form.onlineStatus"
|
|
:active-value="true"
|
|
:inactive-value="false"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="账号状态" prop="status">
|
|
<el-switch
|
|
v-model="form.status"
|
|
:active-value="true"
|
|
:inactive-value="false"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="创建部门" prop="createDept">
|
|
<el-input-number v-model="form.createDept" controls-position="right"/>
|
|
</el-form-item>
|
|
<el-form-item label="创建者" prop="createBy">
|
|
<el-input-number v-model="form.createBy" controls-position="right"/>
|
|
</el-form-item>
|
|
<el-form-item label="创建时间" prop="createTime">
|
|
<el-date-picker v-model="form.createTime"
|
|
clearable
|
|
placeholder="请选择创建时间"
|
|
type="datetime"
|
|
value-format="YYYY-MM-DD HH:mm:ss">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="更新者" prop="updateBy">
|
|
<el-input-number v-model="form.updateBy" controls-position="right"/>
|
|
</el-form-item>
|
|
<el-form-item label="更新时间" prop="updateTime">
|
|
<el-date-picker v-model="form.updateTime"
|
|
clearable
|
|
placeholder="请选择更新时间"
|
|
type="datetime"
|
|
value-format="YYYY-MM-DD HH:mm:ss">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
|
|
<el-button @click="cancel">取 消</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" name="CsAgent" setup>
|
|
import tableTag from '@/components/tableTag/index.vue'
|
|
import {
|
|
addCsAgent,
|
|
delCsAgent,
|
|
getCsAgent,
|
|
listCsAgent,
|
|
updateCsAgent
|
|
} from '@/api/system/cssAgent';
|
|
import {CsAgentForm, CsAgentQuery, CsAgentVO} from '@/api/system/cssAgent/types';
|
|
import {useLoading} from '@/hooks/async/useLoading';
|
|
import {useFormDialog} from '@/hooks/dialog/useFormDialog';
|
|
import {useDateRangeQuery} from '@/hooks/form/useDateRangeQuery';
|
|
import {useSearchReset} from '@/hooks/form/useSearchReset';
|
|
import {useSearchToggle} from '@/hooks/form/useSearchToggle';
|
|
import {useTableSelection} from '@/hooks/table/useTableSelection';
|
|
import modal from '@/plugins/modal';
|
|
import {download as requestDownload} from '@/utils/request';
|
|
|
|
|
|
const csAgentList = ref<CsAgentVO[]>([]);
|
|
const buttonLoading = ref(false);
|
|
const {loading, withLoading} = useLoading(true);
|
|
const {showSearch} = useSearchToggle();
|
|
const total = ref(0);
|
|
const {
|
|
dateRange: dateRangeCreateTime,
|
|
applyDateRange: applyCreateTimeDateRange,
|
|
resetDateRange: resetCreateTimeDateRange
|
|
} = useDateRangeQuery('CreateTime');
|
|
const {
|
|
dateRange: dateRangeUpdateTime,
|
|
applyDateRange: applyUpdateTimeDateRange,
|
|
resetDateRange: resetUpdateTimeDateRange
|
|
} = useDateRangeQuery('UpdateTime');
|
|
|
|
const queryFormRef = ref<ElFormInstance>();
|
|
const csAgentFormRef = ref<ElFormInstance>();
|
|
|
|
const initFormData: CsAgentForm = {
|
|
agentId: undefined,
|
|
agentNo: undefined,
|
|
jobNo: undefined,
|
|
name: undefined,
|
|
account: undefined,
|
|
password: undefined,
|
|
phone: undefined,
|
|
avatarOssId: undefined,
|
|
onlineStatus: undefined,
|
|
status: undefined,
|
|
createDept: undefined,
|
|
createBy: undefined,
|
|
createTime: undefined,
|
|
updateBy: undefined,
|
|
updateTime: undefined,
|
|
}
|
|
const data = reactive<PageData<CsAgentForm, CsAgentQuery>>({
|
|
form: {...initFormData},
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
agentNo: undefined,
|
|
jobNo: undefined,
|
|
name: undefined,
|
|
account: undefined,
|
|
password: undefined,
|
|
phone: undefined,
|
|
avatarOssId: undefined,
|
|
onlineStatus: undefined,
|
|
status: undefined,
|
|
createDept: undefined,
|
|
createBy: undefined,
|
|
updateBy: undefined,
|
|
params: {
|
|
createTime: undefined,
|
|
updateTime: undefined,
|
|
}
|
|
},
|
|
rules: {
|
|
agentId: [
|
|
{required: true, message: "主键不能为空", trigger: "change"}
|
|
],
|
|
agentNo: [
|
|
{required: true, message: "客服编号，如 KF-001不能为空", trigger: "blur"}
|
|
],
|
|
jobNo: [
|
|
{required: true, message: "工号不能为空", trigger: "blur"}
|
|
],
|
|
name: [
|
|
{required: true, message: "客服姓名不能为空", trigger: "blur"}
|
|
],
|
|
account: [
|
|
{required: true, message: "登录账号不能为空", trigger: "blur"}
|
|
],
|
|
password: [
|
|
{required: true, message: "密码不能为空", trigger: "blur"}
|
|
],
|
|
onlineStatus: [
|
|
{required: true, message: "在线状态不能为空", trigger: "change"}
|
|
],
|
|
status: [
|
|
{required: true, message: "账号状态不能为空", trigger: "change"}
|
|
],
|
|
}
|
|
});
|
|
|
|
const {queryParams, form, rules} = toRefs(data);
|
|
const {ids, single, multiple, handleSelectionChange} = useTableSelection<CsAgentVO>(item => item.agentId);
|
|
const {dialog, resetForm: reset, openDialog, showDialog, closeDialog} = useFormDialog({
|
|
form,
|
|
formRef: csAgentFormRef,
|
|
initialFormData: initFormData
|
|
});
|
|
|
|
/** 查询客服人员列表 */
|
|
const getList = async () => {
|
|
await withLoading(async () => {
|
|
let params = queryParams.value;
|
|
params = applyCreateTimeDateRange(params);
|
|
params = applyUpdateTimeDateRange(params);
|
|
const res = await listCsAgent(params);
|
|
csAgentList.value = res.data?.rows;
|
|
total.value = res.data?.total;
|
|
});
|
|
};
|
|
|
|
/** 取消按钮 */
|
|
const cancel = () => {
|
|
reset();
|
|
closeDialog();
|
|
};
|
|
|
|
/** 搜索按钮操作 */
|
|
const handleQuery = () => {
|
|
queryParams.value.pageNum = 1;
|
|
getList();
|
|
};
|
|
|
|
const {resetQuery} = useSearchReset({
|
|
queryFormRef,
|
|
queryParams,
|
|
pageNumKey: 'pageNum',
|
|
pageSizeKey: 'pageSize',
|
|
initialPageSize: 10,
|
|
resetExtras: () => {
|
|
resetCreateTimeDateRange();
|
|
resetUpdateTimeDateRange();
|
|
},
|
|
afterReset: () => {
|
|
handleQuery();
|
|
}
|
|
});
|
|
|
|
/** 新增按钮操作 */
|
|
const handleAdd = () => {
|
|
openDialog('添加客服人员');
|
|
};
|
|
|
|
/** 修改按钮操作 */
|
|
const handleUpdate = async (row?: Partial<CsAgentVO>) => {
|
|
reset();
|
|
const _agentId = row?.agentId || ids.value[0];
|
|
const res = await getCsAgent(_agentId);
|
|
Object.assign(form.value, res.data);
|
|
showDialog('修改客服人员');
|
|
};
|
|
|
|
/** 提交按钮 */
|
|
const submitForm = () => {
|
|
csAgentFormRef.value?.validate(async (valid: boolean) => {
|
|
if (valid) {
|
|
buttonLoading.value = true;
|
|
if (form.value.agentId) {
|
|
await updateCsAgent(form.value).finally(() => (buttonLoading.value = false));
|
|
} else {
|
|
await addCsAgent(form.value).finally(() => (buttonLoading.value = false));
|
|
}
|
|
modal.msgSuccess('操作成功');
|
|
closeDialog();
|
|
await getList();
|
|
}
|
|
});
|
|
};
|
|
|
|
/** 删除按钮操作 */
|
|
const handleDelete = async (row?: Partial<CsAgentVO>) => {
|
|
const _agentIds = row?.agentId || ids.value;
|
|
await modal.confirm('是否确认删除客服人员编号为"' + _agentIds + '"的数据项？');
|
|
await delCsAgent(_agentIds);
|
|
modal.msgSuccess('删除成功');
|
|
await getList();
|
|
};
|
|
|
|
/** 导出按钮操作 */
|
|
const handleExport = () => {
|
|
requestDownload(
|
|
'system/csAgent/export',
|
|
{
|
|
...queryParams.value
|
|
},
|
|
`csAgent_${new Date().getTime()}.xlsx`
|
|
);
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
getList();
|
|
});
|
|
</script>
|
|
|