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

fix: 更新API请求方法和参数处理，优化路由组件解析逻辑

Browse Source 
- 将`updateAnchor`方法的请求方式改为PUT，`deleteAnchor`方法改为DELETE并使用params传递数据
- 在路由组件中添加`normalizeRouteComponent`和`resolveRouteComponent`函数，增强动态路由解析能力
- 更新多个组件中的ID处理逻辑，确保ID始终为字符串类型
- 修改样式以统一选择框的宽度
This commit is contained in:
吴思建
2026-04-21 15:55:28 +08:00
parent c4bdfe2bb3
commit 4271e7d2d9
11 changed files with 1189 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/views/trade/operation/setting/anchor/component/editAnchor.vue
View File

@@ -32,13 +32,7 @@
<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-input v-model="formData.remark" type="textarea" :rows="4" placeholder="请输入备注" clearable />
</el-form-item>
</el-col>
</el-row>
@@ -96,9 +90,7 @@ const rules: FormRules = {
{ required: true, message: '联系电话不能为空', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
],
code: [
{ required: true, message: '工号不能为空', trigger: 'blur' },
],
code: [{ required: true, message: '工号不能为空', trigger: 'blur' }],
};
const formRef = ref<FormInstance>();
@@ -110,10 +102,10 @@ const openDialog = async (row?: DialogFormData) => {
if (row && row.id) {
try {
state.loading = true;
const res = await getAnchorOne({ id: row.id });
const res = await getAnchorOne({ id: String(row.id) });
if (res.data) {
state.formData = {
id: res.data.id,
id: String(res.data.id),
name: res.data.name || '',
phone: res.data.phone || '',
code: res.data.code || '',
@@ -122,7 +114,6 @@ const openDialog = async (row?: DialogFormData) => {
};
}
} catch (error) {
console.error('获取主播详情失败:', error);
ElMessage.error('获取主播详情失败');
} finally {
state.loading = false;
@@ -152,18 +143,23 @@ const onSubmit = async () => {
state.loading = true;
if (state.formData.id) {
await updateAnchor(state.formData);
// 确保id是字符串类型
const submitData = {
...state.formData,
id: state.formData.id ? String(state.formData.id) : undefined,
};
if (submitData.id) {
await updateAnchor(submitData);
ElMessage.success('修改成功');
} else {
await addAnchor(state.formData);
await addAnchor(submitData);
ElMessage.success('添加成功');
}
closeDialog();
emit('refresh');
} catch (error) {
console.error('操作失败:', error);
ElMessage.error('操作失败');
} finally {
state.loading = false;
@@ -193,4 +189,4 @@ defineExpose({
color: #999;
margin-top: 5px;
}
</style>
</style>

13
src/views/trade/operation/setting/anchor/index.vue
View File

@@ -12,7 +12,7 @@
<el-input v-model="searchForm.code" placeholder="请输入工号" clearable />
</el-form-item>
<el-form-item label="状态">
<el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
<el-select v-model="searchForm.status" placeholder="请选择状态" clearable size="default" style="width: 160px">
<el-option label="正常" :value="1" />
<el-option label="停用" :value="0" />
</el-select>
@@ -159,11 +159,13 @@ const getList = async () => {
status: searchForm.status,
});
if (res && res.data) {
tableData.data = res.data.list || [];
tableData.data = (res.data.list || []).map((item: any) => ({
...item,
id: String(item.id),
}));
tableData.total = res.data.total || 0;
}
} catch (error) {
console.error('获取主播列表失败:', error);
ElMessage.error('获取主播列表失败');
} finally {
tableData.loading = false;
@@ -185,12 +187,11 @@ const handleDelete = async (row: TableDataItem) => {
cancelButtonText: '取消',
type: 'warning',
});
await deleteAnchor({ id: row.id });
await deleteAnchor({ id: String(row.id) });
ElMessage.success('删除成功');
getList();
} catch (error) {
if (error !== 'cancel') {
console.error('删除失败:', error);
ElMessage.error('删除失败');
}
}
@@ -213,4 +214,4 @@ onMounted(() => {
.mt20 {
margin-top: 20px;
}
</style>
</style>

159
src/views/trade/operation/setting/live-account/component/editLiveAccount.vue Normal file
View File

@@ -0,0 +1,159 @@
<template>
<el-dialog v-model="dialogVisible" :title="isEdit ? '修改直播账号' : '新增直播账号'" width="500px">
<el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
<el-form-item label="平台" prop="platform">
<el-select v-model="formData.platform" placeholder="请选择平台" style="width: 100%">
<el-option label="抖音" value="抖音" />
<el-option label="快手" value="快手" />
<el-option label="视频号" value="视频号" />
</el-select>
</el-form-item>
<el-form-item label="账号名称" prop="accountName">
<el-input v-model="formData.accountName" placeholder="请输入账号名称" />
</el-form-item>
<el-form-item label="账号ID" prop="accountId">
<el-input v-model="formData.accountId" placeholder="请输入账号ID" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-select v-model="formData.status" placeholder="请选择状态" style="width: 100%">
<el-option label="正常" :value="1" />
<el-option label="停用" :value="0" />
</el-select>
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" placeholder="请输入备注" type="textarea" rows="3" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSubmit" :loading="loading">
{{ isEdit ? '修改' : '新增' }}
</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import {
createLiveAccount,
getLiveAccountDetail,
updateLiveAccount,
type LiveAccountSaveParams,
} from '/@/api/trade/operation/setting/live-account';
const emit = defineEmits<{
(e: 'refresh'): void;
}>();
interface LiveAccountFormData extends LiveAccountSaveParams {}
const dialogVisible = ref(false);
const formRef = ref<FormInstance>();
const loading = ref(false);
const isEdit = ref(false);
const formData = reactive<LiveAccountFormData>({
id: '',
platform: '',
accountName: '',
accountId: '',
status: 1,
remark: '',
});
const rules: FormRules = {
platform: [{ required: true, message: '请选择平台', trigger: 'change' }],
accountName: [{ required: true, message: '请输入账号名称', trigger: 'blur' }],
accountId: [{ required: true, message: '请输入账号ID', trigger: 'blur' }],
status: [{ required: true, message: '请选择状态', trigger: 'change' }],
};
const resetForm = () => {
formData.id = '';
formData.platform = '';
formData.accountName = '';
formData.accountId = '';
formData.status = 1;
formData.remark = '';
};
const fillForm = (data: Partial<LiveAccountFormData>) => {
formData.id = data.id ? String(data.id) : '';
formData.platform = data.platform || '';
formData.accountName = data.accountName || '';
formData.accountId = data.accountId || '';
formData.status = data.status ?? 1;
formData.remark = data.remark || '';
};
const openDialog = async (row?: { id?: string }) => {
resetForm();
isEdit.value = !!row?.id;
if (!row?.id) {
dialogVisible.value = true;
return;
}
try {
loading.value = true;
const res = await getLiveAccountDetail({ id: String(row.id) });
if (res?.data) {
fillForm(res.data);
}
dialogVisible.value = true;
} catch (error) {
ElMessage.error('获取直播账号详情失败');
} finally {
loading.value = false;
}
};
const handleSubmit = async () => {
if (!formRef.value) return;
try {
await formRef.value.validate();
loading.value = true;
const payload: LiveAccountSaveParams = {
id: formData.id || undefined,
platform: formData.platform,
accountName: formData.accountName,
accountId: formData.accountId,
status: formData.status,
remark: formData.remark,
};
if (isEdit.value) {
await updateLiveAccount(payload);
ElMessage.success('修改成功');
} else {
await createLiveAccount(payload);
ElMessage.success('新增成功');
}
dialogVisible.value = false;
emit('refresh');
} catch (error) {
ElMessage.error(isEdit.value ? '修改失败' : '新增失败');
} finally {
loading.value = false;
}
};
defineExpose({
openDialog,
});
</script>
<style scoped>
.dialog-footer {
display: flex;
justify-content: flex-end;
}
</style>

247
src/views/trade/operation/setting/live-account/index.vue Normal file
View File

@@ -0,0 +1,247 @@
<template>
<div class="trade-operation-setting-live-account">
<el-card shadow="never" class="search-card">
<el-form :inline="true" :model="searchForm" class="mb20">
<el-form-item label="平台">
<el-select v-model="searchForm.platform" placeholder="请选择平台" clearable style="width: 120px">
<el-option label="抖音" :value="'抖音'" />
<el-option label="快手" :value="'快手'" />
<el-option label="视频号" :value="'视频号'" />
</el-select>
</el-form-item>
<el-form-item label="账号名称">
<el-input v-model="searchForm.accountName" placeholder="请输入账号名称" clearable style="width: 180px" />
</el-form-item>
<el-form-item label="账号ID">
<el-input v-model="searchForm.accountId" placeholder="请输入账号ID" clearable style="width: 180px" />
</el-form-item>
<el-form-item label="状态">
<el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 120px">
<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" class="mr10">
<el-icon><Search /></el-icon>
查询
</el-button>
<el-button @click="handleReset" :disabled="tableData.loading" class="mr10">
<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%" stripe border empty-text="暂无直播账号数据">
<el-table-column prop="id" label="ID" width="200" align="center" />
<el-table-column prop="platform" label="平台" min-width="100" />
<el-table-column prop="accountName" label="账号名称" min-width="150" />
<el-table-column prop="accountId" label="账号ID" min-width="150" />
<el-table-column prop="statusName" label="状态" width="100" align="center">
<template #default="{ row }">
<el-tag :type="row.status === 1 ? 'success' : 'info'">
{{ row.statusName }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip />
<el-table-column prop="createdAt" label="创建时间" width="180" align="center">
<template #default="{ row }">
{{ formatTimestamp(row.createdAt) }}
</template>
</el-table-column>
<el-table-column prop="updatedAt" label="更新时间" width="180" align="center">
<template #default="{ row }">
{{ formatTimestamp(row.updatedAt) }}
</template>
</el-table-column>
<el-table-column label="操作" width="180" fixed="right" align="center">
<template #default="{ row }">
<el-button size="small" type="primary" text @click="onOpenEdit(row)" class="mr5">
<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 flex justify-end"
/>
</el-card>
<EditLiveAccount ref="editLiveAccountRef" @refresh="getList" />
</div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search, Refresh, Plus, EditPen, Delete } from '@element-plus/icons-vue';
import { deleteLiveAccount, getLiveAccountList } from '/@/api/trade/operation/setting/live-account';
import EditLiveAccount from './component/editLiveAccount.vue';
interface LiveAccountItem {
id: string;
platform: string;
accountName: string;
accountId: string;
status: number;
statusName: string;
remark: string;
createdAt: number;
updatedAt: number;
}
const editLiveAccountRef = ref<InstanceType<typeof EditLiveAccount>>();
const searchForm = reactive({
platform: '',
accountName: '',
accountId: '',
status: undefined as number | undefined,
});
const tableData = reactive({
loading: false,
data: [] as LiveAccountItem[],
total: 0,
param: {
pageNum: 1,
pageSize: 10,
},
});
const getList = async () => {
try {
tableData.loading = true;
const res = await getLiveAccountList({
...tableData.param,
platform: searchForm.platform || undefined,
accountName: searchForm.accountName || undefined,
accountId: searchForm.accountId || undefined,
status: searchForm.status,
});
if (res && res.data) {
tableData.data = (res.data.list || []).map((item: any) => ({
...item,
id: String(item.id),
}));
tableData.total = res.data.total || 0;
}
} catch (error) {
ElMessage.error('获取直播账号列表失败');
} finally {
tableData.loading = false;
}
};
const handleSearch = () => {
tableData.param.pageNum = 1;
getList();
};
const handleReset = () => {
searchForm.platform = '';
searchForm.accountName = '';
searchForm.accountId = '';
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 onOpenAdd = () => {
editLiveAccountRef.value?.openDialog();
};
const onOpenEdit = (row: LiveAccountItem) => {
editLiveAccountRef.value?.openDialog(row);
};
const handleDelete = async (row: LiveAccountItem) => {
try {
await ElMessageBox.confirm(`确定要删除直播账号「${row.accountName}」吗？`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await deleteLiveAccount({ id: row.id });
ElMessage.success('删除成功');
getList();
} catch (error) {
if (error !== 'cancel') {
ElMessage.error('删除失败');
}
}
};
const formatTimestamp = (timestamp: number) => {
if (!timestamp) return '';
const date = new Date(timestamp * 1000);
return date.toLocaleString('zh-CN');
};
onMounted(() => {
getList();
});
</script>
<style scoped lang="scss">
.trade-operation-setting-live-account {
padding: 20px;
}
.mb20 {
margin-bottom: 20px;
}
.mt20 {
margin-top: 20px;
}
.mr10 {
margin-right: 10px;
}
.mr5 {
margin-right: 5px;
}
.flex {
display: flex;
}
.justify-end {
justify-content: flex-end;
}
.search-card {
padding: 20px;
}
</style>

225
src/views/trade/operation/setting/scheduling/component/editSchedule.vue Normal file
View File

@@ -0,0 +1,225 @@
<template>
<el-dialog v-model="dialogVisible" :title="isEdit ? '修改排班' : '新增排班'" width="680px">
<el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="主播" prop="anchorId">
<el-select v-model="formData.anchorId" placeholder="请选择主播" filterable style="width: 100%">
<el-option v-for="item in anchorOptions" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="直播账号" prop="accountId">
<el-select v-model="formData.accountId" placeholder="请选择直播账号" filterable style="width: 100%">
<el-option
v-for="item in liveAccountOptions"
:key="item.id"
:label="`${item.platform} / ${item.accountName}`"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="开始时间" prop="startTime">
<el-date-picker v-model="formData.startTime" type="datetime" placeholder="请选择开始时间" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="结束时间" prop="endTime">
<el-date-picker v-model="formData.endTime" type="datetime" placeholder="请选择结束时间" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="状态" prop="status">
<el-select v-model="formData.status" placeholder="请选择状态" style="width: 100%">
<el-option label="待直播" :value="0" />
<el-option label="直播中" :value="1" />
<el-option label="已结束" :value="2" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="商品ID" prop="productId">
<el-input-number v-model="formData.productId" :min="0" controls-position="right" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="订单ID" prop="orderId">
<el-input-number v-model="formData.orderId" :min="0" controls-position="right" style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入备注" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" :loading="loading" @click="handleSubmit">提交</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import { getAnchorList } from '/@/api/trade/operation/setting/anchor';
import { getLiveAccountList } from '/@/api/trade/operation/setting/live-account';
import { createSchedule, getScheduleDetail, updateSchedule, type ScheduleSaveParams } from '/@/api/trade/operation/setting/scheduling';
const emit = defineEmits<{
(e: 'refresh'): void;
}>();
interface AnchorOption {
id: string;
name: string;
}
interface LiveAccountOption {
id: string;
platform: string;
accountName: string;
}
const dialogVisible = ref(false);
const loading = ref(false);
const isEdit = ref(false);
const formRef = ref<FormInstance>();
const anchorOptions = ref<AnchorOption[]>([]);
const liveAccountOptions = ref<LiveAccountOption[]>([]);
const formData = reactive({
id: '',
anchorId: undefined as string | undefined,
accountId: undefined as string | undefined,
productId: 0,
orderId: 0,
startTime: undefined as Date | undefined,
endTime: undefined as Date | undefined,
status: 0,
remark: '',
});
const rules: FormRules = {
anchorId: [{ required: true, message: '请选择主播', trigger: 'change' }],
accountId: [{ required: true, message: '请选择直播账号', trigger: 'change' }],
startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
};
const resetForm = () => {
formData.id = '';
formData.anchorId = undefined;
formData.accountId = undefined;
formData.productId = 0;
formData.orderId = 0;
formData.startTime = undefined;
formData.endTime = undefined;
formData.status = 0;
formData.remark = '';
};
const loadOptions = async () => {
const [anchorRes, liveAccountRes] = await Promise.all([
getAnchorList({ pageNum: 1, pageSize: 9999 }),
getLiveAccountList({ pageNum: 1, pageSize: 9999 }),
]);
anchorOptions.value = (anchorRes?.data?.list || []).map((item: any) => ({
id: String(item.id),
name: item.name || `主播${item.id}`,
}));
liveAccountOptions.value = (liveAccountRes?.data?.list || []).map((item: any) => ({
id: String(item.id),
platform: item.platform || '',
accountName: item.accountName || `账号${item.id}`,
}));
};
const openDialog = async (row?: { id?: string }) => {
resetForm();
isEdit.value = !!row?.id;
try {
loading.value = true;
await loadOptions();
if (row?.id) {
const res = await getScheduleDetail({ id: String(row.id) });
const detail = res?.data;
if (detail) {
formData.id = String(detail.id);
formData.anchorId = detail.anchorId ? String(detail.anchorId) : undefined;
formData.accountId = detail.accountId ? String(detail.accountId) : undefined;
formData.productId = detail.productId || 0;
formData.orderId = detail.orderId || 0;
formData.startTime = detail.startTime ? new Date(detail.startTime) : undefined;
formData.endTime = detail.endTime ? new Date(detail.endTime) : undefined;
formData.status = detail.status ?? 0;
formData.remark = detail.remark || '';
}
}
dialogVisible.value = true;
} catch (error) {
ElMessage.error(isEdit.value ? '获取排班详情失败' : '加载排班基础数据失败');
} finally {
loading.value = false;
}
};
const handleSubmit = async () => {
if (!formRef.value) return;
try {
await formRef.value.validate();
loading.value = true;
const payload: ScheduleSaveParams = {
id: formData.id || undefined,
anchorId: formData.anchorId as string,
accountId: formData.accountId as string,
productId: formData.productId || 0,
orderId: formData.orderId || 0,
startTime: (formData.startTime as Date).toISOString(),
endTime: (formData.endTime as Date).toISOString(),
status: formData.status,
remark: formData.remark,
};
if (isEdit.value) {
await updateSchedule(payload);
ElMessage.success('修改排班成功');
} else {
await createSchedule(payload);
ElMessage.success('新增排班成功');
}
dialogVisible.value = false;
emit('refresh');
} catch (error) {
ElMessage.error(isEdit.value ? '修改排班失败' : '新增排班失败');
} finally {
loading.value = false;
}
};
defineExpose({
openDialog,
});
</script>
<style scoped>
.dialog-footer {
display: flex;
justify-content: flex-end;
}
</style>

237
src/views/trade/operation/setting/scheduling/index.vue Normal file
View File

@@ -0,0 +1,237 @@
<template>
<div class="trade-operation-setting-scheduling">
<el-card shadow="never" class="search-card">
<el-form :inline="true" :model="searchForm" class="mb20">
<el-form-item label="主播名">
<el-input v-model="searchForm.anchorName" placeholder="请输入主播名" clearable style="width: 160px" />
</el-form-item>
<el-form-item label="直播账号名">
<el-input v-model="searchForm.accountName" placeholder="请输入直播账号名" clearable style="width: 160px" />
</el-form-item>
<el-form-item label="状态">
<el-select v-model="searchForm.status" placeholder="请选择状态" clearable style="width: 140px">
<el-option label="待直播" :value="0" />
<el-option label="直播中" :value="1" />
<el-option label="已结束" :value="2" />
</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%" stripe border>
<el-table-column label="排序" width="80" align="center">
<template #default="scope">
{{ (tableData.param.pageNum - 1) * tableData.param.pageSize + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="anchorName" label="主播名" min-width="140" />
<el-table-column prop="accountName" label="直播账号名" min-width="160" />
<el-table-column prop="startTime" label="开始时间" width="180">
<template #default="{ row }">
{{ formatTimestamp(row.startTime) }}
</template>
</el-table-column>
<el-table-column prop="endTime" label="结束时间" width="180">
<template #default="{ row }">
{{ formatTimestamp(row.endTime) }}
</template>
</el-table-column>
<el-table-column prop="statusName" label="状态" width="100" align="center">
<template #default="{ row }">
<el-tag :type="getStatusTagType(row.status)">{{ row.statusName }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" min-width="180" show-overflow-tooltip />
<el-table-column prop="createdAt" label="创建时间" width="180">
<template #default="{ row }">
{{ formatTimestamp(row.createdAt) }}
</template>
</el-table-column>
<el-table-column label="操作" width="150">
<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>
<EditSchedule ref="editScheduleRef" @refresh="getList" />
</div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Search, Refresh, Plus, EditPen, Delete } from '@element-plus/icons-vue';
import { deleteSchedule, getScheduleList } from '/@/api/trade/operation/setting/scheduling';
import EditSchedule from './component/editSchedule.vue';
interface ScheduleItem {
id: string;
anchorId: string;
anchorName: string;
accountId: string;
accountName: string;
startTime: number;
endTime: number;
status: number;
statusName: string;
remark: string;
createdAt: number;
updatedAt: number;
}
const editScheduleRef = ref<InstanceType<typeof EditSchedule>>();
const searchForm = reactive({
anchorName: '',
accountName: '',
status: undefined as number | undefined,
});
const tableData = reactive({
loading: false,
data: [] as ScheduleItem[],
total: 0,
param: {
pageNum: 1,
pageSize: 10,
},
});
const formatTimestamp = (timestamp: number) => {
if (!timestamp) return '';
return new Date(timestamp * 1000).toLocaleString('zh-CN');
};
const getStatusTagType = (status: number): 'success' | 'info' | 'warning' => {
if (status === 1) return 'success';
if (status === 2) return 'info';
return 'warning';
};
const getList = async () => {
try {
tableData.loading = true;
const res = await getScheduleList({
...tableData.param,
anchorName: searchForm.anchorName || undefined,
accountName: searchForm.accountName || undefined,
status: searchForm.status,
} as any);
const scheduleData = res?.data;
if (scheduleData) {
tableData.data = (scheduleData.list || []).map((item: any) => ({
...item,
id: String(item.id),
anchorId: String(item.anchorId),
anchorName: item.anchorName || '',
accountId: String(item.accountId),
accountName: item.accountName || '',
}));
tableData.total = scheduleData.total || 0;
}
} catch (error) {
ElMessage.error('获取排班列表失败');
} finally {
tableData.loading = false;
}
};
const handleSearch = () => {
tableData.param.pageNum = 1;
getList();
};
const handleReset = () => {
searchForm.anchorName = '';
searchForm.accountName = '';
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 onOpenAdd = () => {
editScheduleRef.value?.openDialog();
};
const onOpenEdit = (row: ScheduleItem) => {
editScheduleRef.value?.openDialog(row);
};
const handleDelete = async (row: ScheduleItem) => {
try {
await ElMessageBox.confirm(`确定要删除排班「${row.id}」吗？`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
});
await deleteSchedule({ id: row.id });
ElMessage.success('删除成功');
getList();
} catch (error) {
if (error !== 'cancel') {
ElMessage.error('删除失败');
}
}
};
onMounted(() => {
getList();
});
</script>
<style scoped lang="scss">
.trade-operation-setting-scheduling {
padding: 20px;
}
.mb20 {
margin-bottom: 20px;
}
.mt20 {
margin-top: 20px;
}
</style>