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

feat: 添加防抖指令和任务管理功能

Browse Source 
feat(anchor): 新增主播管理模块

feat(account): 完善客服账号管理功能

feat(knowledge): 添加任务列表查看和重新执行功能

feat(router): 增强路由组件动态导入逻辑

refactor: 优化多个视图的按钮防抖处理

style: 统一代码格式和样式

fix: 修复客服账号状态切换逻辑
This commit is contained in:
吴思建
2026-04-20 10:20:45 +08:00
parent 4f547b5bff
commit c4bdfe2bb3
15 changed files with 1035 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
src/views/trade/operation/setting/anchor/component/editAnchor.vue Normal file
View File

@@ -0,0 +1,196 @@
<template>
<div class="anchor-edit-dialog">
<el-dialog :title="(formData.id ? '修改' : '添加') + '主播'" v-model="isShowDialog" width="769px">
<el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px">
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="主播姓名" prop="name">
<el-input v-model="formData.name" placeholder="请输入主播姓名" clearable />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="联系电话" prop="phone">
<el-input v-model="formData.phone" placeholder="请输入联系电话" clearable />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="工号" prop="code">
<el-input v-model="formData.code" placeholder="请输入工号" clearable />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
<el-form-item label="状态" prop="status">
<el-select v-model="formData.status" placeholder="请选择状态" clearable style="width: 100%">
<el-option label="正常" :value="1" />
<el-option label="停用" :value="0" />
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
<el-form-item label="备注" prop="remark">
<el-input
v-model="formData.remark"
type="textarea"
:rows="4"
placeholder="请输入备注"
clearable
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="onCancel" size="default">取 消</el-button>
<el-button type="primary" @click="onSubmit" size="default" :loading="loading">
{{ formData.id ? '修 改' : '新 增' }}
</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, toRefs, nextTick } from 'vue';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { addAnchor, updateAnchor, getAnchorOne } from '/@/api/trade/operation/setting/anchor';
interface DialogFormData {
id?: string;
name: string;
phone: string;
code: string;
status: number;
remark: string;
}
const emit = defineEmits<{
(e: 'refresh'): void;
}>();
const state = reactive({
loading: false,
isShowDialog: false,
formData: {
id: '',
name: '',
phone: '',
code: '',
status: 1,
remark: '',
} as DialogFormData,
});
const rules: FormRules = {
name: [
{ required: true, message: '主播姓名不能为空', trigger: 'blur' },
{ min: 2, max: 50, message: '主播姓名长度在 2 到 50 个字符', trigger: 'blur' },
],
phone: [
{ required: true, message: '联系电话不能为空', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
],
code: [
{ required: true, message: '工号不能为空', trigger: 'blur' },
],
};
const formRef = ref<FormInstance>();
const { loading, isShowDialog, formData } = toRefs(state);
const openDialog = async (row?: DialogFormData) => {
resetForm();
if (row && row.id) {
try {
state.loading = true;
const res = await getAnchorOne({ id: row.id });
if (res.data) {
state.formData = {
id: res.data.id,
name: res.data.name || '',
phone: res.data.phone || '',
code: res.data.code || '',
status: res.data.status ?? 1,
remark: res.data.remark || '',
};
}
} catch (error) {
console.error('获取主播详情失败:', error);
ElMessage.error('获取主播详情失败');
} finally {
state.loading = false;
}
}
state.isShowDialog = true;
nextTick(() => {
formRef.value?.clearValidate();
});
};
const closeDialog = () => {
state.isShowDialog = false;
};
const onCancel = () => {
closeDialog();
};
const onSubmit = async () => {
if (!formRef.value) return;
try {
const valid = await formRef.value.validate();
if (!valid) return;
state.loading = true;
if (state.formData.id) {
await updateAnchor(state.formData);
ElMessage.success('修改成功');
} else {
await addAnchor(state.formData);
ElMessage.success('添加成功');
}
closeDialog();
emit('refresh');
} catch (error) {
console.error('操作失败:', error);
ElMessage.error('操作失败');
} finally {
state.loading = false;
}
};
const resetForm = () => {
state.formData = {
id: '',
name: '',
phone: '',
code: '',
status: 1,
remark: '',
};
};
defineExpose({
openDialog,
closeDialog,
});
</script>
<style scoped>
.status-tip {
font-size: 12px;
color: #999;
margin-top: 5px;
}
</style>

216
src/views/trade/operation/setting/anchor/index.vue Normal file
View File

@@ -0,0 +1,216 @@
<template>
<div class="trade-operation-setting-anchor">
<el-card shadow="never" class="search-card">
<el-form :inline="true" :model="searchForm" class="mb20">
<el-form-item label="主播姓名">
<el-input v-model="searchForm.name" placeholder="请输入主播姓名" clearable />
</el-form-item>
<el-form-item label="联系电话">
<el-input v-model="searchForm.phone" placeholder="请输入联系电话" clearable />
</el-form-item>
<el-form-item label="工号">
<el-input v-model="searchForm.code" placeholder="请输入工号" clearable />
</el-form-item>
<el-form-item label="状态">
<el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
<el-option label="正常" :value="1" />
<el-option label="停用" :value="0" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSearch" :loading="tableData.loading">
<el-icon><Search /></el-icon>
查询
</el-button>
<el-button @click="handleReset" :disabled="tableData.loading">
<el-icon><Refresh /></el-icon>
重置
</el-button>
<el-button type="success" @click="onOpenAdd">
<el-icon><Plus /></el-icon>
新增
</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card shadow="never" class="mt20">
<el-table v-loading="tableData.loading" :data="tableData.data" style="width: 100%">
<el-table-column prop="id" label="ID" width="200" />
<el-table-column prop="name" label="主播姓名" />
<el-table-column prop="phone" label="联系电话" />
<el-table-column prop="code" label="工号" />
<el-table-column prop="statusName" label="状态" width="100" />
<el-table-column prop="remark" label="备注" show-overflow-tooltip />
<el-table-column prop="createdAt" label="创建时间" width="180">
<template #default="{ row }">
{{ formatTimestamp(row.createdAt) }}
</template>
</el-table-column>
<el-table-column prop="updatedAt" label="更新时间" width="180">
<template #default="{ row }">
{{ formatTimestamp(row.updatedAt) }}
</template>
</el-table-column>
<el-table-column label="操作" width="150" fixed="right">
<template #default="{ row }">
<el-button size="small" type="primary" text @click="onOpenEdit(row)">
<el-icon><EditPen /></el-icon>修改
</el-button>
<el-button size="small" type="danger" text @click="handleDelete(row)">
<el-icon><Delete /></el-icon>删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
v-model:current-page="tableData.param.pageNum"
v-model:page-size="tableData.param.pageSize"
:page-sizes="[10, 20, 30, 50]"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
class="mt20"
/>
</el-card>
<EditAnchor ref="editAnchorRef" @refresh="getList" />
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search, Refresh, Plus, EditPen, Delete } from '@element-plus/icons-vue';
import { getAnchorList, deleteAnchor } from '/@/api/trade/operation/setting/anchor';
import EditAnchor from './component/editAnchor.vue';
interface TableDataItem {
id: string;
name: string;
phone: string;
code: string;
status: number;
statusName: string;
remark: string;
createdAt: number;
updatedAt: number;
}
const searchForm = reactive({
name: '',
phone: '',
code: '',
status: undefined as number | undefined,
});
const tableData = reactive({
loading: false,
data: [] as TableDataItem[],
total: 0,
param: {
pageNum: 1,
pageSize: 10,
},
});
const editAnchorRef = ref();
const handleSearch = () => {
tableData.param.pageNum = 1;
getList();
};
const handleReset = () => {
searchForm.name = '';
searchForm.phone = '';
searchForm.code = '';
searchForm.status = undefined;
tableData.param.pageNum = 1;
getList();
};
const handleSizeChange = (size: number) => {
tableData.param.pageSize = size;
getList();
};
const handleCurrentChange = (current: number) => {
tableData.param.pageNum = current;
getList();
};
const formatTimestamp = (timestamp: number) => {
if (!timestamp) return '';
const date = new Date(timestamp * 1000);
return date.toLocaleString('zh-CN');
};
const getList = async () => {
try {
tableData.loading = true;
const res = await getAnchorList({
...tableData.param,
name: searchForm.name || undefined,
phone: searchForm.phone || undefined,
code: searchForm.code || undefined,
status: searchForm.status,
});
if (res && res.data) {
tableData.data = res.data.list || [];
tableData.total = res.data.total || 0;
}
} catch (error) {
console.error('获取主播列表失败:', error);
ElMessage.error('获取主播列表失败');
} finally {
tableData.loading = false;
}
};
const onOpenAdd = () => {
editAnchorRef.value?.openDialog();
};
const onOpenEdit = (row: TableDataItem) => {
editAnchorRef.value?.openDialog(row);
};
const handleDelete = async (row: TableDataItem) => {
try {
await ElMessageBox.confirm(`确定要删除主播 "${row.name}" 吗？`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await deleteAnchor({ id: row.id });
ElMessage.success('删除成功');
getList();
} catch (error) {
if (error !== 'cancel') {
console.error('删除失败:', error);
ElMessage.error('删除失败');
}
}
};
onMounted(() => {
getList();
});
</script>
<style scoped lang="scss">
.trade-operation-setting-anchor {
padding: 20px;
}
.mb20 {
margin-bottom: 20px;
}
.mt20 {
margin-top: 20px;
}
</style>