feat:【antd】【ai】music/manager 的代码优化

This commit is contained in:
YunaiV
2025-10-26 18:11:10 +08:00
parent 02b6ab1886
commit 3d4aeb77b5
2 changed files with 48 additions and 35 deletions

View File

@@ -8,12 +8,9 @@ import { getDictOptions } from '@vben/hooks';
import { getSimpleUserList } from '#/api/system/user'; import { getSimpleUserList } from '#/api/system/user';
import { getRangePickerDefaultProps } from '#/utils'; import { getRangePickerDefaultProps } from '#/utils';
/** 关联数据 */
let userList: SystemUserApi.User[] = []; let userList: SystemUserApi.User[] = [];
async function getUserData() { getSimpleUserList().then((data) => (userList = data));
userList = await getSimpleUserList();
}
getUserData();
/** 列表的搜索表单 */ /** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] { export function useGridFormSchema(): VbenFormSchema[] {
@@ -73,7 +70,12 @@ export function useGridFormSchema(): VbenFormSchema[] {
} }
/** 列表的字段 */ /** 列表的字段 */
export function useGridColumns(): VxeTableGridOptions['columns'] { export function useGridColumns(
onPublicStatusChange?: (
newStatus: boolean,
row: any,
) => PromiseLike<boolean | undefined>,
): VxeTableGridOptions['columns'] {
return [ return [
{ {
field: 'id', field: 'id',
@@ -154,7 +156,16 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{ {
minWidth: 100, minWidth: 100,
title: '是否发布', title: '是否发布',
slots: { default: 'publicStatus' }, field: 'publicStatus',
align: 'center',
cellRender: {
attrs: { beforeChange: onPublicStatusChange },
name: 'CellSwitch',
props: {
checkedValue: true,
unCheckedValue: false,
},
},
}, },
{ {
field: 'taskId', field: 'taskId',

View File

@@ -3,9 +3,8 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { AiMusicApi } from '#/api/ai/music'; import type { AiMusicApi } from '#/api/ai/music';
import { confirm, DocAlert, Page } from '@vben/common-ui'; import { confirm, DocAlert, Page } from '@vben/common-ui';
import { AiMusicStatusEnum } from '@vben/constants';
import { Button, message, Switch } from 'ant-design-vue'; import { Button, message } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table'; import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteMusic, getMusicPage, updateMusic } from '#/api/ai/music'; import { deleteMusic, getMusicPage, updateMusic } from '#/api/ai/music';
@@ -18,7 +17,7 @@ function handleRefresh() {
gridApi.query(); gridApi.query();
} }
/** 删除 */ /** 删除音乐记录 */
async function handleDelete(row: AiMusicApi.Music) { async function handleDelete(row: AiMusicApi.Music) {
const hideLoading = message.loading({ const hideLoading = message.loading({
content: $t('ui.actionMessage.deleting', [row.id]), content: $t('ui.actionMessage.deleting', [row.id]),
@@ -26,36 +25,45 @@ async function handleDelete(row: AiMusicApi.Music) {
}); });
try { try {
await deleteMusic(row.id as number); await deleteMusic(row.id as number);
message.success({ message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
content: $t('ui.actionMessage.deleteSuccess', [row.id]),
});
handleRefresh(); handleRefresh();
} finally { } finally {
hideLoading(); hideLoading();
} }
} }
/** 修改是否发布 */ /** 修改是否发布 */
const handleUpdatePublicStatusChange = async (row: AiMusicApi.Music) => { async function handleUpdatePublicStatusChange(
try { newStatus: boolean,
// 修改状态的二次确认 row: AiMusicApi.Music,
const text = row.publicStatus ? '公开' : '私有'; ): Promise<boolean | undefined> {
await confirm(`确认要"${text}"该图片吗?`).then(async () => { const text = newStatus ? '公开' : '私有';
await updateMusic({ return new Promise((resolve, reject) => {
id: row.id, confirm({
publicStatus: row.publicStatus, content: `确认要将该音乐切换为【${text}】吗?`,
})
.then(async () => {
// 更新音乐状态
await updateMusic({
id: row.id,
publicStatus: newStatus,
});
// 提示并返回成功
message.success($t('ui.actionMessage.operationSuccess'));
resolve(true);
})
.catch(() => {
reject(new Error('取消操作'));
}); });
handleRefresh(); });
}); }
} catch {
row.publicStatus = !row.publicStatus;
}
};
const [Grid, gridApi] = useVbenVxeGrid({ const [Grid, gridApi] = useVbenVxeGrid({
formOptions: { formOptions: {
schema: useGridFormSchema(), schema: useGridFormSchema(),
}, },
gridOptions: { gridOptions: {
columns: useGridColumns(), columns: useGridColumns(handleUpdatePublicStatusChange),
height: 'auto', height: 'auto',
keepSource: true, keepSource: true,
proxyConfig: { proxyConfig: {
@@ -71,6 +79,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
}, },
rowConfig: { rowConfig: {
keyField: 'id', keyField: 'id',
isHover: true,
}, },
toolbarConfig: { toolbarConfig: {
refresh: true, refresh: true,
@@ -119,13 +128,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
封面 封面
</Button> </Button>
</template> </template>
<template #publicStatus="{ row }">
<Switch
v-model:checked="row.publicStatus"
@change="handleUpdatePublicStatusChange(row)"
:disabled="row.status !== AiMusicStatusEnum.SUCCESS"
/>
</template>
<template #actions="{ row }"> <template #actions="{ row }">
<TableAction <TableAction
:actions="[ :actions="[