feat:【antd】【ai】music/manager 的代码优化
This commit is contained in:
@@ -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',
|
||||||
|
|||||||
@@ -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="[
|
||||||
|
|||||||
Reference in New Issue
Block a user