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

apps/web-antd/src/views/ai/music/manager/data.ts

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

apps/web-antd/src/views/ai/music/manager/index.vue

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