refactor: 站内信代码优化

apps/web-antd/src/views/system/notify/my/index.vue

@@ -1,14 +1,11 @@
 <script lang="ts" setup>
-// TODO @puhui999：需要看看，vben 哪里改下哈。一个是 vben 右上角的站内信、一个是点击查看所有消息，应该跳转到这里。
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
 import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
 
+import { DocAlert } from '#/components/doc-alert';
+import Detail from './modules/detail.vue';
 import { Page, useVbenModal } from '@vben/common-ui';
 import { MdiCheckboxMarkedCircleOutline } from '@vben/icons';
-
 import { Button, message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
@@ -17,10 +14,8 @@ import {
   updateAllNotifyMessageRead,
   updateNotifyMessageRead,
 } from '#/api/system/notify/message';
-import { DocAlert } from '#/components/doc-alert';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import Detail from './modules/detail.vue';
 
 const [DetailModal, detailModalApi] = useVbenModal({
   connectedComponent: Detail,
@@ -68,9 +63,7 @@ async function onMarkRead() {
     return;
   }
 
-  const ids = rows.map(
+  const ids = rows.map((row: SystemNotifyMessageApi.SystemNotifyMessage) => row.id);
-    (row: SystemNotifyMessageApi.SystemNotifyMessage) => row.id,
-  );
   message.loading({
     content: '正在标记已读...',
     duration: 0,
@@ -106,10 +99,7 @@ async function onMarkAllRead() {
 }
 
 /** 表格操作按钮的回调函数 */
-function onActionClick({
+function onActionClick({ code, row }: OnActionClickParams<SystemNotifyMessageApi.SystemNotifyMessage>) {
-  code,
-  row,
-}: OnActionClickParams<SystemNotifyMessageApi.SystemNotifyMessage>) {
   switch (code) {
     case 'detail': {
       onDetail(row);
@@ -149,9 +139,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       search: true,
     },
     checkboxConfig: {
-      checkMethod: (params: {
+      checkMethod: (params: { row: SystemNotifyMessageApi.SystemNotifyMessage }) => !params.row.readStatus,
-        row: SystemNotifyMessageApi.SystemNotifyMessage;
-      }) => !params.row.readStatus,
       highlight: true,
     },
   } as VxeTableGridOptions<SystemNotifyMessageApi.SystemNotifyMessage>,

apps/web-antd/src/views/system/notify/template/data.ts

@@ -2,13 +2,14 @@ import type { VbenFormSchema } from '#/adapter/form';
 import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemNotifyTemplateApi } from '#/api/system/notify/template';
 
-import { useAccess } from '@vben/access';
-
 import { z } from '#/adapter/form';
-import { CommonStatusEnum } from '#/utils/constants';
+import { getSimpleUserList } from '#/api/system/user';
+import { CommonStatusEnum, UserTypeEnum } from '#/utils/constants';
 import { getRangePickerDefaultProps } from '#/utils/date';
 import { DICT_TYPE, getDictOptions } from '#/utils/dict';
 
+import { useAccess } from '@vben/access';
+
 const { hasAccessByCodes } = useAccess();
 
 /** 新增/修改的表单 */
@@ -63,10 +64,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '模板类型',
       component: 'Select',
       componentProps: {
-        options: getDictOptions(
+        options: getDictOptions(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE, 'number'),
-          DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
-          'number',
-        ),
         class: 'w-full',
         placeholder: '请选择模板类型',
       },
@@ -130,10 +128,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '模板类型',
       component: 'Select',
       componentProps: {
-        options: getDictOptions(
+        options: getDictOptions(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE, 'number'),
-          DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
-          'number',
-        ),
         allowClear: true,
         placeholder: '请选择模板类型',
       },
@@ -170,13 +165,47 @@ export function useSendNotifyFormSchema(): VbenFormSchema[] {
         show: () => false,
       },
     },
+    {
+      fieldName: 'userType',
+      label: '用户类型',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.USER_TYPE, 'number'),
+      },
+      rules: z.number().default(UserTypeEnum.MEMBER),
+    },
     {
       fieldName: 'userId',
-      label: '用户编号',
+      label: '接收人ID',
       component: 'Input',
       componentProps: {
         placeholder: '请输入用户编号',
       },
+      dependencies: {
+        show(values) {
+          return values.userType === UserTypeEnum.MEMBER;
+        },
+        triggerFields: ['userType'],
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'userId',
+      label: '接收人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        class: 'w-full',
+        labelField: 'nickname',
+        valueField: 'id',
+        placeholder: '请选择接收人',
+      },
+      dependencies: {
+        show(values) {
+          return values.userType === UserTypeEnum.ADMIN;
+        },
+        triggerFields: ['userType'],
+      },
       rules: 'required',
     },
     {
@@ -192,9 +221,9 @@ export function useSendNotifyFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<
+export function useGridColumns<T = SystemNotifyTemplateApi.SystemNotifyTemplate>(
-  T = SystemNotifyTemplateApi.SystemNotifyTemplate,
+  onActionClick: OnActionClickFn<T>,
->(onActionClick: OnActionClickFn<T>): VxeTableGridOptions['columns'] {
+): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',

apps/web-antd/src/views/system/notify/template/index.vue

@@ -1,28 +1,20 @@
 <script lang="ts" setup>
-import type {
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
 import type { SystemNotifyTemplateApi } from '#/api/system/notify/template';
 
+import { DocAlert } from '#/components/doc-alert';
+import Form from './modules/form.vue';
+import SendForm from './modules/send-form.vue';
 import { Page, useVbenModal } from '@vben/common-ui';
 import { Download, Plus } from '@vben/icons';
-
 import { Button, message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import {
+import { deleteNotifyTemplate, exportNotifyTemplate, getNotifyTemplatePage } from '#/api/system/notify/template';
-  deleteNotifyTemplate,
-  exportNotifyTemplate,
-  getNotifyTemplatePage,
-} from '#/api/system/notify/template';
-import { DocAlert } from '#/components/doc-alert';
 import { $t } from '#/locales';
 import { downloadByData } from '#/utils/download';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import Form from './modules/form.vue';
-import SendForm from './modules/send-form.vue';
 
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
@@ -80,10 +72,7 @@ async function onDelete(row: SystemNotifyTemplateApi.SystemNotifyTemplate) {
 }
 
 /** 表格操作按钮的回调函数 */
-function onActionClick({
+function onActionClick({ code, row }: OnActionClickParams<SystemNotifyTemplateApi.SystemNotifyTemplate>) {
-  code,
-  row,
-}: OnActionClickParams<SystemNotifyTemplateApi.SystemNotifyTemplate>) {
   switch (code) {
     case 'delete': {
       onDelete(row);
@@ -138,20 +127,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <SendModal />
     <Grid table-title="站内信模板列表">
       <template #toolbar-tools>
-        <Button
+        <Button type="primary" @click="onCreate" v-access:code="['system:notify-template:create']">
-          type="primary"
-          @click="onCreate"
-          v-access:code="['system:notify-template:create']"
-        >
           <Plus class="size-5" />
           {{ $t('ui.actionTitle.create', ['站内信模板']) }}
         </Button>
-        <Button
+        <Button type="primary" class="ml-2" @click="onExport" v-access:code="['system:notify-template:export']">
-          type="primary"
-          class="ml-2"
-          @click="onExport"
-          v-access:code="['system:notify-template:export']"
-        >
           <Download class="size-5" />
           {{ $t('ui.actionTitle.export') }}
         </Button>

apps/web-antd/src/views/system/notify/template/modules/form.vue

@@ -1,28 +1,20 @@
 <script lang="ts" setup>
 import type { SystemNotifyTemplateApi } from '#/api/system/notify/template';
 
-import { computed, ref } from 'vue';
-
 import { useVbenModal } from '@vben/common-ui';
-
 import { message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
-import {
+import { createNotifyTemplate, getNotifyTemplate, updateNotifyTemplate } from '#/api/system/notify/template';
-  createNotifyTemplate,
-  getNotifyTemplate,
-  updateNotifyTemplate,
-} from '#/api/system/notify/template';
 import { $t } from '#/locales';
+import { computed, ref } from 'vue';
 
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 const formData = ref<SystemNotifyTemplateApi.SystemNotifyTemplate>();
 const getTitle = computed(() => {
-  return formData.value?.id
+  return formData.value?.id ? $t('ui.actionTitle.edit', ['站内信模板']) : $t('ui.actionTitle.create', ['站内信模板']);
-    ? $t('ui.actionTitle.edit', ['站内信模板'])
-    : $t('ui.actionTitle.create', ['站内信模板']);
 });
 
 const [Form, formApi] = useVbenForm({
@@ -39,12 +31,9 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data =
+    const data = (await formApi.getValues()) as SystemNotifyTemplateApi.SystemNotifyTemplate;
-      (await formApi.getValues()) as SystemNotifyTemplateApi.SystemNotifyTemplate;
     try {
-      await (formData.value?.id
+      await (formData.value?.id ? updateNotifyTemplate(data) : createNotifyTemplate(data));
-        ? updateNotifyTemplate(data)
-        : createNotifyTemplate(data));
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -60,9 +49,9 @@ const [Modal, modalApi] = useVbenModal({
     if (!isOpen) {
       return;
     }
+
     // 加载数据
-    const data =
+    const data = modalApi.getData<SystemNotifyTemplateApi.SystemNotifyTemplate>();
-      modalApi.getData<SystemNotifyTemplateApi.SystemNotifyTemplate>();
     if (!data || !data.id) {
       return;
     }

apps/web-antd/src/views/system/notify/template/modules/send-form.vue

@@ -1,15 +1,13 @@
 <script lang="ts" setup>
 import type { SystemNotifyTemplateApi } from '#/api/system/notify/template';
 
-import { ref } from 'vue';
-
 import { useVbenModal } from '@vben/common-ui';
-
 import { message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
 import { sendNotify } from '#/api/system/notify/template';
 import { $t } from '#/locales';
+import { ref } from 'vue';
 
 import { useSendNotifyFormSchema } from '../data';
 
@@ -24,7 +22,6 @@ const [Form, formApi] = useVbenForm({
   },
 });
 
-// TODO @puhui999：有个用户类型的选项。不同的用户类型，对应的接收人处理不同。
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -42,6 +39,7 @@ const [Modal, modalApi] = useVbenModal({
     }
     const data: SystemNotifyTemplateApi.SystemNotifySendReqVO = {
       userId: values.userId,
+      userType: values.userType,
       templateCode: formData.value?.code || '',
       templateParams: paramsObj,
     };
@@ -67,8 +65,7 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 获取数据
-    const data =
+    const data = modalApi.getData<SystemNotifyTemplateApi.SystemNotifyTemplate>();
-      modalApi.getData<SystemNotifyTemplateApi.SystemNotifyTemplate>();
     if (!data || !data.id) {
       return;
     }