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

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

@@ -26,6 +26,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
         api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
+        placeholder: '请选择用户编号',
+        allowClear: true,
       },
     },
     {
@@ -33,6 +35,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '平台',
       component: 'Select',
       componentProps: {
+        placeholder: '请选择平台',
         allowClear: true,
         options: getDictOptions(DICT_TYPE.AI_PLATFORM, 'string'),
       },
@@ -42,6 +45,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '绘画状态',
       component: 'Select',
       componentProps: {
+        placeholder: '请选择绘画状态',
         allowClear: true,
         options: getDictOptions(DICT_TYPE.AI_IMAGE_STATUS, 'number'),
       },
@@ -51,8 +55,9 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '是否发布',
       component: 'Select',
       componentProps: {
-        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        placeholder: '请选择是否发布',
         allowClear: true,
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
       },
     },
     {
@@ -68,7 +73,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',
@@ -118,7 +128,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: 'prompt',

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

@@ -3,9 +3,8 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { AiImageApi } from '#/api/ai/image';
 
 import { confirm, DocAlert, Page } from '@vben/common-ui';
-import { AiImageStatusEnum } from '@vben/constants';
 
-import { message, Switch } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteImage, getImagePage, updateImage } from '#/api/ai/image';
@@ -26,36 +25,43 @@ async function handleDelete(row: AiImageApi.Image) {
   });
   try {
     await deleteImage(row.id as number);
-    message.success({
+    message.success($t('ui.actionMessage.deleteSuccess', [row.id]));
-      content: $t('ui.actionMessage.deleteSuccess', [row.id]),
-    });
     handleRefresh();
   } finally {
     hideLoading();
   }
 }
 /** 修改是否发布 */
-async function handleUpdatePublicStatusChange(row: AiImageApi.Image) {
+async function handleUpdatePublicStatusChange(
-  try {
+  newStatus: boolean,
-    // 修改状态的二次确认
+  row: AiImageApi.Image,
-    const text = row.publicStatus ? '公开' : '私有';
+): Promise<boolean | undefined> {
-    await confirm(`确认要"${text}"该图片吗?`).then(async () => {
+  const text = newStatus ? '公开' : '私有';
-      await updateImage({
+  return new Promise((resolve, reject) => {
-        id: row.id,
+    confirm({
-        publicStatus: row.publicStatus,
+      content: `确认要将该图片切换为【${text}】吗？`,
+    })
+      .then(async () => {
+        // 更新图片状态
+        await updateImage({
+          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 +77,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -86,13 +93,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
       <DocAlert title="AI 绘图创作" url="https://doc.iocoder.cn/ai/image/" />
     </template>
     <Grid table-title="绘画管理列表">
-      <template #publicStatus="{ row }">
-        <Switch
-          v-model:checked="row.publicStatus"
-          @change="handleUpdatePublicStatusChange(row)"
-          :disabled="row.status !== AiImageStatusEnum.SUCCESS"
-        />
-      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[

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

@@ -23,18 +23,25 @@ export function useGridFormSchema(): VbenFormSchema[] {
         api: getSimpleUserList,
         labelField: 'nickname',
         valueField: 'id',
+        placeholder: '请选择用户编号',
+        allowClear: true,
       },
     },
     {
       fieldName: 'title',
       label: '音乐名称',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入音乐名称',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'status',
       label: '绘画状态',
       component: 'Select',
       componentProps: {
+        placeholder: '请选择绘画状态',
         allowClear: true,
         options: getDictOptions(DICT_TYPE.AI_MUSIC_STATUS, 'number'),
       },
@@ -44,6 +51,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '生成模式',
       component: 'Select',
       componentProps: {
+        placeholder: '请选择生成模式',
         allowClear: true,
         options: getDictOptions(DICT_TYPE.AI_GENERATE_MODE, 'number'),
       },
@@ -62,8 +70,9 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '是否发布',
       component: 'Select',
       componentProps: {
-        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        placeholder: '请选择是否发布',
         allowClear: true,
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
       },
     },
   ];

apps/web-antd/src/views/system/user/index.vue

@@ -144,14 +144,10 @@ async function handleStatusChange(
     })
       .then(async () => {
         // 更新用户状态
-        const res = await updateUserStatus(row.id!, newStatus);
+        await updateUserStatus(row.id!, newStatus);
-        if (res) {
+        // 提示并返回成功
-          // 提示并返回成功
+        message.success($t('ui.actionMessage.operationSuccess'));
-          message.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
-          resolve(true);
-        } else {
-          reject(new Error('更新失败'));
-        }
       })
       .catch(() => {
         reject(new Error('取消操作'));