9/30
1. 设备管理界面完成 2. 用户管理界面完成 3. 会话列表完成
This commit is contained in:
Zy
394
src/views/system/cssAgent/index.vue
Normal file
394
src/views/system/cssAgent/index.vue
Normal file
@@ -0,0 +1,394 @@
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user