Merge branch 'dev' of https://gitee.com/yudaocode/yudao-ui-admin-vben into dev

apps/web-antd/src/router/routes/modules/crm.ts

@@ -73,7 +73,7 @@ const routes: RouteRecordRaw[] = [
           title: '联系人详情',
           activePath: '/crm/contact',
         },
-        component: () => import('#/views/crm/contact/modules/detail.vue'),
+        component: () => import('#/views/crm/contact/detail/index.vue'),
       },
       {
         path: 'product/detail/:id',

apps/web-antd/src/views/crm/clue/data.ts

@@ -26,6 +26,9 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '线索名称',
       component: 'Input',
       rules: 'required',
+      componentProps: {
+        placeholder: '请输入线索名称',
+      },
     },
     {
       fieldName: 'source',
@@ -33,6 +36,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_SOURCE, 'number'),
+        placeholder: '请选择客户来源',
       },
       rules: 'required',
     },
@@ -40,6 +44,9 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'mobile',
       label: '手机',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号',
+      },
     },
     {
       fieldName: 'ownerUserId',
@@ -50,6 +57,7 @@ export function useFormSchema(): VbenFormSchema[] {
         labelField: 'nickname',
         valueField: 'id',
         allowClear: true,
+        placeholder: '请选择负责人',
       },
       defaultValue: userStore.userInfo?.id,
       rules: 'required',
@@ -58,21 +66,33 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'telephone',
       label: '电话',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入电话',
+      },
     },
     {
       fieldName: 'email',
       label: '邮箱',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入邮箱',
+      },
     },
     {
       fieldName: 'wechat',
       label: '微信',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入微信',
+      },
     },
     {
       fieldName: 'qq',
       label: 'QQ',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入 QQ',
+      },
     },
     {
       fieldName: 'industryId',
@@ -80,6 +100,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_INDUSTRY, 'number'),
+        placeholder: '请选择客户行业',
       },
     },
     {
@@ -88,6 +109,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL, 'number'),
+        placeholder: '请选择客户级别',
       },
     },
     {
@@ -97,12 +119,16 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         api: () => getAreaTree(),
         fieldNames: { label: 'name', value: 'id', children: 'children' },
+        placeholder: '请选择地址',
       },
     },
     {
       fieldName: 'detailAddress',
       label: '详细地址',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入详细地址',
+      },
     },
     {
       fieldName: 'contactNextTime',
@@ -112,12 +138,16 @@ export function useFormSchema(): VbenFormSchema[] {
         showTime: true,
         format: 'YYYY-MM-DD HH:mm:ss',
         valueFormat: 'x',
+        placeholder: '请选择下次联系时间',
       },
     },
     {
       fieldName: 'remark',
       label: '备注',
       component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
     },
   ];
 }
@@ -129,6 +159,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '线索名称',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入线索名称',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'transformStatus',
@@ -139,6 +173,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
           { label: '未转化', value: false },
           { label: '已转化', value: true },
         ],
+        placeholder: '请选择转化状态',
+        allowClear: true,
       },
       defaultValue: false,
     },
@@ -146,11 +182,19 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'mobile',
       label: '手机号',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'telephone',
       label: '电话',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入电话',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'createTime',
@@ -159,6 +203,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         ...getRangePickerDefaultProps(),
         allowClear: true,
+        placeholder: ['开始日期', '结束日期'],
       },
     },
   ];

apps/web-antd/src/views/crm/contact/data.ts

@@ -27,17 +27,22 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '联系人姓名',
       component: 'Input',
       rules: 'required',
+      componentProps: {
+        placeholder: '请输入联系人姓名',
+      },
     },
     {
       fieldName: 'ownerUserId',
       label: '负责人',
       component: 'ApiSelect',
+      rules: 'required',
       componentProps: {
         api: () => getSimpleUserList(),
         fieldNames: {
           label: 'nickname',
           value: 'id',
         },
+        placeholder: '请选择负责人',
       },
       defaultValue: userStore.userInfo?.id,
     },
@@ -45,51 +50,75 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'customerId',
       label: '客户名称',
       component: 'ApiSelect',
+      rules: 'required',
       componentProps: {
         api: () => getCustomerSimpleList(),
         fieldNames: {
           label: 'name',
           value: 'id',
         },
+        placeholder: '请选择客户',
       },
     },
     {
       fieldName: 'mobile',
       label: '手机',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号',
+      },
     },
     {
       fieldName: 'telephone',
       label: '电话',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入电话',
+      },
     },
     {
       fieldName: 'email',
       label: '邮箱',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入邮箱',
+      },
     },
     {
       fieldName: 'wechat',
       label: '微信',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入微信',
+      },
     },
     {
       fieldName: 'qq',
       label: 'QQ',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入QQ',
+      },
     },
     {
       fieldName: 'post',
       label: '职位',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入职位',
+      },
     },
     {
       fieldName: 'master',
       label: '关键决策人',
-      component: 'Select',
+      component: 'RadioGroup',
       componentProps: {
         options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        placeholder: '请选择是否关键决策人',
+        buttonStyle: 'solid',
+        optionType: 'button',
       },
+      defaultValue: false,
     },
     {
       fieldName: 'sex',
@@ -97,6 +126,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        placeholder: '请选择性别',
       },
     },
     {
@@ -109,6 +139,7 @@ export function useFormSchema(): VbenFormSchema[] {
           label: 'name',
           value: 'id',
         },
+        placeholder: '请选择直属上级',
       },
     },
     {
@@ -118,12 +149,16 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         api: () => getAreaTree(),
         fieldNames: { label: 'name', value: 'id', children: 'children' },
+        placeholder: '请选择地址',
       },
     },
     {
       fieldName: 'detailAddress',
       label: '详细地址',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入详细地址',
+      },
     },
     {
       fieldName: 'contactNextTime',
@@ -133,12 +168,16 @@ export function useFormSchema(): VbenFormSchema[] {
         showTime: true,
         format: 'YYYY-MM-DD HH:mm:ss',
         valueFormat: 'x',
+        placeholder: '请选择下次联系时间',
       },
     },
     {
       fieldName: 'remark',
       label: '备注',
       component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+      },
     },
   ];
 }
@@ -147,7 +186,7 @@ export function useFormSchema(): VbenFormSchema[] {
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
-      fieldName: 'name',
+      fieldName: 'customerId',
       label: '客户',
       component: 'ApiSelect',
       componentProps: {
@@ -156,32 +195,54 @@ export function useGridFormSchema(): VbenFormSchema[] {
           label: 'name',
           value: 'id',
         },
+        placeholder: '请选择客户',
+        allowClear: true,
       },
     },
     {
       fieldName: 'name',
       label: '姓名',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人姓名',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'mobile',
       label: '手机号',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'telephone',
       label: '电话',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入电话',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'wechat',
       label: '微信',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入微信',
+        allowClear: true,
+      },
     },
     {
       fieldName: 'email',
       label: '电子邮箱',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入电子邮箱',
+        allowClear: true,
+      },
     },
   ];
 }
@@ -203,15 +264,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       minWidth: 240,
       slots: { default: 'customerName' },
     },
-    {
-      field: 'sex',
-      title: '性别',
-      minWidth: 120,
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.SYSTEM_USER_SEX },
-      },
-    },
     {
       field: 'mobile',
       title: '手机',
@@ -220,12 +272,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'telephone',
       title: '电话',
-      minWidth: 120,
+      minWidth: 130,
     },
     {
       field: 'email',
       title: '邮箱',
-      minWidth: 120,
+      minWidth: 180,
     },
     {
       field: 'post',
@@ -233,10 +285,15 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       minWidth: 120,
     },
     {
-      field: 'detailAddress',
+      field: 'areaName',
       title: '地址',
       minWidth: 120,
     },
+    {
+      field: 'detailAddress',
+      title: '详细地址',
+      minWidth: 180,
+    },
     {
       field: 'master',
       title: '关键决策人',
@@ -252,6 +309,32 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       minWidth: 120,
       slots: { default: 'parentId' },
     },
+    {
+      field: 'contactNextTime',
+      title: '下次联系时间',
+      formatter: 'formatDateTime',
+      minWidth: 180,
+    },
+    {
+      field: 'sex',
+      title: '性别',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.SYSTEM_USER_SEX },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 200,
+    },
+    {
+      field: 'contactLastTime',
+      title: '最后跟进时间',
+      formatter: 'formatDateTime',
+      minWidth: 180,
+    },
     {
       field: 'ownerUserName',
       title: '负责人',
@@ -263,16 +346,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       minWidth: 120,
     },
     {
-      field: 'contactNextTime',
+      field: 'updateTime',
-      title: '下次联系时间',
+      title: '更新时间',
       formatter: 'formatDateTime',
       minWidth: 180,
     },
-    {
-      field: 'remark',
-      title: '备注',
-      minWidth: 200,
-    },
     {
       field: 'createTime',
       title: '创建时间',
@@ -280,10 +358,9 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       minWidth: 180,
     },
     {
-      field: 'updateTime',
+      field: 'creatorName',
-      title: '更新时间',
+      title: '创建人',
-      formatter: 'formatDateTime',
+      minWidth: 120,
-      minWidth: 180,
     },
     {
       title: '操作',

apps/web-antd/src/views/crm/contact/detail/index.vue

@@ -20,7 +20,7 @@ import { ContactDetailsInfo, ContactForm } from '#/views/crm/contact';
 import { FollowUp } from '#/views/crm/followup';
 import { PermissionList, TransferForm } from '#/views/crm/permission';
 
-import { useDetailSchema } from './detail-data';
+import { useDetailSchema } from './data';
 
 const loading = ref(false);
 

apps/web-antd/src/views/crm/contact/detail/modules/detail-info.vue

@@ -6,7 +6,7 @@ import { Divider } from 'ant-design-vue';
 import { useDescription } from '#/components/description';
 import { useFollowUpDetailSchema } from '#/views/crm/followup/data';
 
-import { useDetailBaseSchema } from './detail-data';
+import { useDetailBaseSchema } from '../data';
 
 defineProps<{
   contact: CrmContactApi.Contact; // 联系人信息

apps/web-antd/src/views/crm/contact/detail/modules/detail-list.vue

@@ -19,9 +19,9 @@ import {
 import { BizTypeEnum } from '#/api/crm/permission';
 import { $t } from '#/locales';
 
-import { useDetailListColumns } from './detail-data';
+import ListModal from '../../modules/detail-list-modal.vue';
-import ListModal from './detail-list-modal.vue';
+import Form from '../../modules/form.vue';
-import Form from './form.vue';
+import { useDetailListColumns } from '../data';
 
 const props = defineProps<{
   bizId: number; // 业务编号

apps/web-antd/src/views/crm/contact/index.ts

@@ -1,17 +1,13 @@
 import { defineAsyncComponent } from 'vue';
 
 export const ContactDetailsInfo = defineAsyncComponent(
-  () => import('./modules/detail-info.vue'),
+  () => import('./detail/modules/detail-info.vue'),
 );
 
 export const ContactForm = defineAsyncComponent(
   () => import('./modules/form.vue'),
 );
 
-export const ContactDetails = defineAsyncComponent(
-  () => import('./modules/detail.vue'),
-);
-
 export const ContactDetailsList = defineAsyncComponent(
-  () => import('./modules/detail-list.vue'),
+  () => import('./detail/modules/detail-list.vue'),
 );

apps/web-antd/src/views/crm/contact/index.vue

@@ -30,13 +30,17 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
   gridApi.query();
 }
 
 /** 导出表格 */
 async function handleExport() {
-  const data = await exportContact(await gridApi.formApi.getValues());
+  const formValues = await gridApi.formApi.getValues();
+  const data = await exportContact({
+    sceneType: sceneType.value,
+    ...formValues,
+  });
   downloadFileFromBlobPart({ fileName: '联系人.xls', source: data });
 }
 
@@ -58,10 +62,8 @@ async function handleDelete(row: CrmContactApi.Contact) {
   });
   try {
     await deleteContact(row.id as number);
-    message.success({
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+    handleRefresh();
-    });
-    onRefresh();
   } finally {
     hideLoading();
   }
@@ -77,6 +79,12 @@ function handleCustomerDetail(row: CrmContactApi.Contact) {
   push({ name: 'CrmCustomerDetail', params: { id: row.customerId } });
 }
 
+/** 处理场景类型的切换 */
+function handleChangeSceneType(key: number | string) {
+  sceneType.value = key.toString();
+  gridApi.query();
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -99,6 +107,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -106,11 +115,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<CrmContactApi.Contact>,
 });
-
-function onChangeSceneType(key: number | string) {
-  sceneType.value = key.toString();
-  gridApi.query();
-}
 </script>
 
 <template>
@@ -126,10 +130,10 @@ function onChangeSceneType(key: number | string) {
       />
     </template>
 
-    <FormModal @success="onRefresh" />
+    <FormModal @success="handleRefresh" />
     <Grid>
       <template #top>
-        <Tabs class="border-none" @change="onChangeSceneType">
+        <Tabs class="-mt-11" @change="handleChangeSceneType">
           <Tabs.TabPane tab="我负责的" key="1" />
           <Tabs.TabPane tab="我参与的" key="2" />
           <Tabs.TabPane tab="下属负责的" key="3" />
@@ -167,7 +171,7 @@ function onChangeSceneType(key: number | string) {
       </template>
       <template #parentId="{ row }">
         <Button type="link" @click="handleDetail(row)">
-          {{ row.parentId }}
+          {{ row.parentName }}
         </Button>
       </template>
       <template #actions="{ row }">
@@ -180,12 +184,6 @@ function onChangeSceneType(key: number | string) {
               auth: ['crm:contact:update'],
               onClick: handleEdit.bind(null, row),
             },
-            {
-              label: $t('common.detail'),
-              type: 'link',
-              icon: ACTION_ICON.VIEW,
-              onClick: handleDetail.bind(null, row),
-            },
             {
               label: $t('common.delete'),
               type: 'link',
@@ -203,3 +201,8 @@ function onChangeSceneType(key: number | string) {
     </Grid>
   </Page>
 </template>
+<style scoped>
+:deep(.vxe-toolbar div) {
+  z-index: 1;
+}
+</style>

apps/web-antd/src/views/crm/contact/modules/detail-list-modal.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+// TODO @芋艿：放在 modules 里，还是放在哪里？
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { CrmContactApi } from '#/api/crm/contact';
 
@@ -13,7 +14,7 @@ import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getContactPageByCustomer } from '#/api/crm/contact';
 import { $t } from '#/locales';
 
-import { useDetailListColumns } from './detail-data';
+import { useDetailListColumns } from '../detail/data';
 import Form from './form.vue';
 
 const props = defineProps<{

apps/web-antd/src/views/crm/contact/modules/form.vue

@@ -59,8 +59,6 @@ const [Modal, modalApi] = useVbenModal({
     // 加载数据
     const data = modalApi.getData<CrmContactApi.Contact>();
     if (!data || !data.id) {
-      // 设置到 values
-      await formApi.setValues(data);
       return;
     }
     modalApi.lock();

apps/web-ele/src/components/cron-tab/index.ts

@@ -0,0 +1 @@
+export { default as CronTab } from './cron-tab.vue';

apps/web-ele/src/components/upload/file-upload.vue

@@ -1,261 +1,282 @@
 <script lang="ts" setup>
 import type {
   UploadFile,
-  UploadProgressEvent,
+  UploadInstance,
-  UploadRequestOptions,
+  UploadProps,
+  UploadRawFile,
   UploadUserFile,
 } from 'element-plus';
 
-import type { AxiosResponse } from '@vben/request';
+import { ref, watch } from 'vue';
 
-import type { AxiosProgressEvent } from '#/api/infra/file';
+import { IconifyIcon } from '@vben/icons';
+import { isString } from '@vben/utils';
 
-import { ref, toRefs, watch } from 'vue';
+import { ElButton, ElLink, ElMessage, ElUpload } from 'element-plus';
 
-import { CloudUpload } from '@vben/icons';
+import { useUpload } from './use-upload';
-import { $t } from '@vben/locales';
-import { isFunction, isObject, isString } from '@vben/utils';
-
-import { ElButton, ElMessage, ElUpload } from 'element-plus';
-
-import { checkFileType } from './helper';
-import { UploadResultStatus } from './typing';
-import { useUpload, useUploadType } from './use-upload';
 
 defineOptions({ name: 'FileUpload', inheritAttrs: false });
 
 const props = withDefaults(
   defineProps<{
-    // 根据后缀，或者其他
+    autoUpload?: boolean;
-    accept?: string[];
-    api?: (
-      file: File,
-      onUploadProgress?: AxiosProgressEvent,
-    ) => Promise<AxiosResponse<any>>;
-    // 上传的目录
     directory?: string;
     disabled?: boolean;
-    helpText?: string;
+    drag?: boolean;
-    // 最大数量的文件，Infinity不限制
+    fileSize?: number;
-    maxNumber?: number;
+    fileType?: string[];
-    // 文件最大多少MB
+    isShowTip?: boolean;
-    maxSize?: number;
+    limit?: number;
-    // 是否支持多选
+    modelValue: string | string[];
-    multiple?: boolean;
-    // support xxx.xxx.xx
-    resultField?: string;
-    // 是否显示下面的描述
-    showDescription?: boolean;
-    value?: string | string[];
   }>(),
   {
-    value: () => [],
+    fileType: () => ['doc', 'xls', 'ppt', 'txt', 'pdf'], // 文件类型, 例如['png', 'jpg', 'jpeg']
-    directory: undefined,
+    fileSize: 5, // 大小限制(MB)
-    disabled: false,
+    limit: 5, // 数量限制
-    helpText: '',
+    autoUpload: true, // 自动上传
-    maxSize: 2,
+    drag: false, // 拖拽上传
-    maxNumber: 1,
+    isShowTip: true, // 是否显示提示
-    accept: () => [],
+    disabled: false, // 是否禁用上传组件 ==> 非必传（默认为 false）
-    multiple: false,
+    directory: undefined, // 上传目录 ==> 非必传（默认为 undefined）
-    api: undefined,
-    resultField: '',
-    showDescription: false,
   },
 );
-const emit = defineEmits(['change', 'update:value', 'delete', 'returnText']);
-const { accept, helpText, maxNumber, maxSize } = toRefs(props);
-const isInnerOperate = ref<boolean>(false);
-const { getStringAccept } = useUploadType({
-  acceptRef: accept,
-  helpTextRef: helpText,
-  maxNumberRef: maxNumber,
-  maxSizeRef: maxSize,
-});
 
+const emit = defineEmits(['update:modelValue']);
+
+// ========== 上传相关 ==========
+const uploadRef = ref<UploadInstance>();
+const uploadList = ref<UploadUserFile[]>([]);
 const fileList = ref<UploadUserFile[]>([]);
-const isLtMsg = ref<boolean>(true); // 文件大小错误提示
+const uploadNumber = ref<number>(0);
-const isActMsg = ref<boolean>(true); // 文件类型错误提示
-const isFirstRender = ref<boolean>(true); // 是否第一次渲染
 
-watch(
+const { uploadUrl, httpRequest }: any = useUpload(props.directory);
-  () => props.value,
-  (v) => {
-    if (isInnerOperate.value) {
-      isInnerOperate.value = false;
-      return;
-    }
-    let value: string[] = [];
-    if (v) {
-      if (Array.isArray(v)) {
-        value = v;
-      } else {
-        value.push(v);
-      }
-      fileList.value = value
-        .map((item, i) => {
-          if (item && isString(item)) {
-            return {
-              uid: -i,
-              name: item.slice(Math.max(0, item.lastIndexOf('/') + 1)),
-              status: UploadResultStatus.DONE,
-              url: item,
-            } as UploadUserFile;
-          } else if (item && isObject(item)) {
-            const file = item as Record<string, any>;
-            return {
-              uid: file.uid || -i,
-              name: file.name || '',
-              status: UploadResultStatus.DONE,
-              url: file.url,
-              response: file.response,
-              percentage: file.percentage,
-              size: file.size,
-            } as UploadUserFile;
-          }
-          return null;
-        })
-        .filter(Boolean) as UploadUserFile[];
-    }
-    if (!isFirstRender.value) {
-      emit('change', value);
-      isFirstRender.value = false;
-    }
-  },
-  {
-    immediate: true,
-    deep: true,
-  },
-);
 
-const handleRemove = async (file: UploadFile) => {
+/** httpRequest 适配 ele */
-  if (fileList.value) {
+const httpRequest0 = (options: UploadRequestOptions) => {
-    const index = fileList.value.findIndex((item) => item.uid === file.uid);
+  return httpRequest(options.file);
-    index !== -1 && fileList.value.splice(index, 1);
-    const value = getValue();
-    isInnerOperate.value = true;
-    emit('update:value', value);
-    emit('change', value);
-    emit('delete', file);
-  }
 };
 
-const beforeUpload = async (file: File) => {
+// 文件上传之前判断
-  const fileContent = await file.text();
+const beforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile) => {
-  emit('returnText', fileContent);
+  if (fileList.value.length >= props.limit) {
-  const { maxSize, accept } = props;
+    ElMessage.error(`上传文件数量不能超过${props.limit}个!`);
-  const isAct = checkFileType(file, accept);
-  if (!isAct) {
-    ElMessage.error($t('ui.upload.acceptUpload', [accept]));
-    isActMsg.value = false;
-    // 防止弹出多个错误提示
-    setTimeout(() => (isActMsg.value = true), 1000);
     return false;
   }
-  const isLt = file.size / 1024 / 1024 > maxSize;
+  let fileExtension = '';
-  if (isLt) {
+  // eslint-disable-next-line unicorn/prefer-includes
-    ElMessage.error($t('ui.upload.maxSizeMultiple', [maxSize]));
+  if (file.name.lastIndexOf('.') > -1) {
-    isLtMsg.value = false;
+    fileExtension = file.name.slice(file.name.lastIndexOf('.') + 1);
-    // 防止弹出多个错误提示
+  }
-    setTimeout(() => (isLtMsg.value = true), 1000);
+  const isImg = props.fileType.some((type: string) => {
+    // eslint-disable-next-line unicorn/prefer-includes
+    if (file.type.indexOf(type) > -1) return true;
+    // eslint-disable-next-line unicorn/prefer-includes
+    return !!(fileExtension && fileExtension.indexOf(type) > -1);
+  });
+  const isLimit = file.size < props.fileSize * 1024 * 1024;
+  if (!isImg) {
+    ElMessage.error(`文件格式不正确, 请上传${props.fileType.join('/')}格式!`);
     return false;
   }
+  if (!isLimit) {
+    ElMessage.error(`上传文件大小不能超过${props.fileSize}MB!`);
+    return false;
+  }
+  ElMessage.success('正在上传文件，请稍候...');
+  // 只有在验证通过后才增加计数器
+  uploadNumber.value++;
   return true;
 };
 
-async function customRequest(options: UploadRequestOptions) {
+// 文件上传成功
-  let { api } = props;
+const handleFileSuccess: UploadProps['onSuccess'] = (url: any): void => {
-  if (!api || !isFunction(api)) {
+  ElMessage.success('上传成功');
-    api = useUpload(props.directory).httpRequest;
+  // 删除自身
+  const index = fileList.value.findIndex((item: any) => item.response === url);
+  fileList.value.splice(index, 1);
+  uploadList.value.push({ name: url, url });
+  if (uploadList.value.length === uploadNumber.value) {
+    fileList.value.push(...uploadList.value);
+    uploadList.value = [];
+    uploadNumber.value = 0;
+    emitUpdateModelValue();
   }
-  try {
+};
-    // 上传文件
+// 文件数超出提示
-    const progressEvent: AxiosProgressEvent = (e) => {
+const handleExceed: UploadProps['onExceed'] = (): void => {
-      const percent = Math.trunc((e.loaded / e.total!) * 100);
+  ElMessage.error(`上传文件数量不能超过${props.limit}个!`);
-      const progressEvent: UploadProgressEvent = {
+};
-        percent,
+// 上传错误提示
-        total: e.total || 0,
+const excelUploadError: UploadProps['onError'] = (): void => {
-        loaded: e.loaded || 0,
+  ElMessage.error('导入数据失败，请您重新上传！');
-        lengthComputable: true,
+  // 上传失败时减少计数器，避免后续上传被阻塞
-        target: e.event.target as EventTarget,
+  uploadNumber.value = Math.max(0, uploadNumber.value - 1);
-        bubbles: false,
+};
-        cancelBubble: false,
+// 删除上传文件
-        cancelable: false,
+const handleRemove = (file: UploadFile) => {
-        composed: false,
+  const index = fileList.value.map((f) => f.name).indexOf(file.name);
-        currentTarget: e.event.target as EventTarget,
+  if (index !== -1) {
-        defaultPrevented: false,
+    fileList.value.splice(index, 1);
-        eventPhase: 0,
+    emitUpdateModelValue();
-        isTrusted: true,
+  }
-        returnValue: true,
+};
-        srcElement: e.event.target as EventTarget,
+const handlePreview: UploadProps['onPreview'] = (_) => {
-        timeStamp: Date.now(),
+  // console.log(uploadFile);
-        type: 'progress',
+};
-        composedPath: () => [],
-        initEvent: () => {},
-        preventDefault: () => {},
-        stopImmediatePropagation: () => {},
-        stopPropagation: () => {},
-        NONE: 0,
-        CAPTURING_PHASE: 1,
-        AT_TARGET: 2,
-        BUBBLING_PHASE: 3,
-      };
-      options.onProgress!(progressEvent);
-    };
-    const res = await api?.(options.file, progressEvent);
-    options.onSuccess!(res);
-    ElMessage.success($t('ui.upload.uploadSuccess'));
 
-    // 更新文件
+// 监听模型绑定值变动
-    const value = getValue();
+watch(
-    isInnerOperate.value = true;
+  () => props.modelValue,
-    emit('update:value', value);
+  (val: string | string[]) => {
-    emit('change', value);
+    if (!val) {
-  } catch (error: any) {
+      fileList.value = []; // fix：处理掉缓存，表单重置后上传组件的内容并没有重置
-    console.error(error);
+      return;
-    options.onError!(error);
+    }
-  }
-}
 
-function getValue() {
+    fileList.value = []; // 保障数据为空
-  const list = (fileList.value || [])
+    // 情况1：字符串
-    .filter((item) => item?.status === UploadResultStatus.DONE)
+    if (isString(val)) {
-    .map((item: any) => {
+      fileList.value.push(
-      if (item?.response && props?.resultField) {
+        ...val.split(',').map((url) => ({
-        return item?.response;
+          // eslint-disable-next-line unicorn/prefer-string-slice
-      }
+          name: url.substring(url.lastIndexOf('/') + 1),
-      return item?.url || item?.response?.url || item?.response;
+          url,
-    });
+        })),
-  // add by 芋艿：【特殊】单个文件的情况，获取首个元素，保证返回的是 String 类型
+      );
-  if (props.maxNumber === 1) {
+      return;
-    return list.length > 0 ? list[0] : '';
+    }
+    // 情况2：数组
+    fileList.value.push(
+      ...(val as string[]).map((url) => ({
+        // eslint-disable-next-line unicorn/prefer-string-slice
+        name: url.substring(url.lastIndexOf('/') + 1),
+        url,
+      })),
+    );
+  },
+  { immediate: true, deep: true },
+);
+// 发送文件链接列表更新
+const emitUpdateModelValue = () => {
+  // 情况1：数组结果
+  let result: string | string[] = fileList.value.map((file) => file.url!);
+  // 情况2：逗号分隔的字符串
+  if (props.limit === 1 || isString(props.modelValue)) {
+    result = result.join(',');
   }
-  return list;
+  emit('update:modelValue', result);
-}
+};
 </script>
-
 <template>
-  <div>
+  <div v-if="!disabled" class="upload-file">
     <ElUpload
-      v-bind="$attrs"
+      ref="uploadRef"
       v-model:file-list="fileList"
-      :accept="getStringAccept"
+      :action="uploadUrl"
+      :auto-upload="autoUpload"
       :before-upload="beforeUpload"
-      :http-request="customRequest"
       :disabled="disabled"
-      :limit="maxNumber"
+      :drag="drag"
-      :multiple="multiple"
+      :http-request="httpRequest0"
-      list-type="text"
+      :limit="props.limit"
+      :multiple="props.limit > 1"
+      :on-error="excelUploadError"
+      :on-exceed="handleExceed"
+      :on-preview="handlePreview"
       :on-remove="handleRemove"
+      :on-success="handleFileSuccess"
+      :show-file-list="true"
+      class="upload-file-uploader"
+      name="file"
     >
-      <div v-if="fileList && fileList.length < maxNumber">
+      <ElButton type="primary">
-        <ElButton>
+        <IconifyIcon icon="ep:upload-filled" />
-          <CloudUpload />
+        选取文件
-          {{ $t('ui.upload.upload') }}
+      </ElButton>
-        </ElButton>
+      <template v-if="isShowTip" #tip>
-      </div>
+        <div style="font-size: 8px">
-      <div v-if="showDescription" class="mt-2 text-xs text-gray-500">
+          大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
-        {{ getStringAccept }}
+        </div>
-      </div>
+        <div style="font-size: 8px">
+          格式为 <b style="color: #f56c6c">{{ fileType.join('/') }}</b> 的文件
+        </div>
+      </template>
+      <template #file="row">
+        <div class="flex items-center">
+          <span>{{ row.file.name }}</span>
+          <div class="ml-10px">
+            <ElLink
+              :href="row.file.url"
+              :underline="false"
+              download
+              target="_blank"
+              type="primary"
+            >
+              下载
+            </ElLink>
+          </div>
+          <div class="ml-10px">
+            <ElButton link type="danger" @click="handleRemove(row.file)">
+              删除
+            </ElButton>
+          </div>
+        </div>
+      </template>
     </ElUpload>
   </div>
+
+  <!-- 上传操作禁用时 -->
+  <div v-if="disabled" class="upload-file">
+    <div
+      v-for="(file, index) in fileList"
+      :key="index"
+      class="file-list-item flex items-center"
+    >
+      <span>{{ file.name }}</span>
+      <div class="ml-10px">
+        <ElLink
+          :href="file.url"
+          :underline="false"
+          download
+          target="_blank"
+          type="primary"
+        >
+          下载
+        </ElLink>
+      </div>
+    </div>
+  </div>
 </template>
+<style lang="scss" scoped>
+.upload-file-uploader {
+  margin-bottom: 5px;
+}
+
+:deep(.upload-file-list .el-upload-list__item) {
+  position: relative;
+  margin-bottom: 10px;
+  line-height: 2;
+  border: 1px solid #e4e7ed;
+}
+
+:deep(.el-upload-list__item-file-name) {
+  max-width: 250px;
+}
+
+:deep(.upload-file-list .ele-upload-list__item-content) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: inherit;
+}
+
+:deep(.ele-upload-list__item-content-action .el-link) {
+  margin-right: 10px;
+}
+
+.file-list-item {
+  border: 1px dashed var(--el-border-color-darker);
+  border-radius: 8px;
+}
+</style>

apps/web-ele/src/components/upload/use-upload.ts

@@ -79,17 +79,17 @@ export function useUploadType({
 }
 
 // TODO @芋艿：目前保持和 admin-vue3 一致，后续可能重构
-export const useUpload = (directory?: string) => {
+export function useUpload(directory?: string) {
   // 后端上传地址
   const uploadUrl = getUploadUrl();
   // 是否使用前端直连上传
   const isClientUpload =
     UPLOAD_TYPE.CLIENT === import.meta.env.VITE_UPLOAD_TYPE;
   // 重写ElUpload上传方法
-  const httpRequest = async (
+  async function httpRequest(
     file: File,
     onUploadProgress?: AxiosProgressEvent,
-  ) => {
+  ) {
     // 模式一：前端上传
     if (isClientUpload) {
       // 1.1 生成文件名称
@@ -113,20 +113,20 @@ export const useUpload = (directory?: string) => {
       // 模式二：后端上传
       return uploadFile({ file, directory }, onUploadProgress);
     }
-  };
+  }
 
   return {
     uploadUrl,
     httpRequest,
   };
-};
+}
 
 /**
  * 获得上传 URL
  */
-export const getUploadUrl = (): string => {
+export function getUploadUrl(): string {
   return `${apiURL}/infra/file/upload`;
-};
+}
 
 /**
  * 创建文件信息
@@ -134,7 +134,10 @@ export const getUploadUrl = (): string => {
  * @param vo 文件预签名信息
  * @param file 文件
  */
-function createFile0(vo: InfraFileApi.FilePresignedUrlRespVO, file: File) {
+function createFile0(
+  vo: InfraFileApi.FilePresignedUrlRespVO,
+  file: File,
+): InfraFileApi.File {
   const fileVO = {
     configId: vo.configId,
     url: vo.url,
@@ -148,10 +151,18 @@ function createFile0(vo: InfraFileApi.FilePresignedUrlRespVO, file: File) {
 }
 
 /**
- * 生成文件名称
+ * 生成文件名称（使用算法SHA256）
  *
  * @param file 要上传的文件
  */
 async function generateFileName(file: File) {
+  // // 读取文件内容
+  // const data = await file.arrayBuffer();
+  // const wordArray = CryptoJS.lib.WordArray.create(data);
+  // // 计算SHA256
+  // const sha256 = CryptoJS.SHA256(wordArray).toString();
+  // // 拼接后缀
+  // const ext = file.name.slice(Math.max(0, file.name.lastIndexOf('.')));
+  // return `${sha256}${ext}`;
   return file.name;
 }

apps/web-ele/src/views/infra/codegen/modules/preview-code.vue

@@ -7,7 +7,7 @@ import type { InfraCodegenApi } from '#/api/infra/codegen';
 import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
-import { Copy } from '@vben/icons';
+import { IconifyIcon } from '@vben/icons';
 
 import { useClipboard } from '@vueuse/core';
 import { ElMessage, ElTabPane, ElTabs, ElTree } from 'element-plus';
@@ -291,8 +291,7 @@ const [Modal, modalApi] = useVbenModal({
             </div>
           </ElTabPane>
           <template #add-icon>
-            <!-- TODO @芋艿：这里会报错； -->
+            <IconifyIcon icon="ant-design:copy-twotone" />
-            <Copy />
           </template>
         </ElTabs>
       </div>

apps/web-ele/src/views/infra/file/data.ts

@@ -9,7 +9,7 @@ export function useFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'file',
       label: '文件上传',
-      component: 'Upload',
+      component: 'FileUpload',
       componentProps: {
         placeholder: '请选择要上传的文件',
       },

apps/web-ele/src/views/infra/file/modules/form.vue

@@ -1,19 +1,19 @@
 <script lang="ts" setup>
-import type { UploadRawFile } from 'element-plus';
-
 import { useVbenModal } from '@vben/common-ui';
-
+import { isEmpty } from '@vben/utils';
-import { ElMessage, ElUpload } from 'element-plus';
 
 import { useVbenForm } from '#/adapter/form';
-import { useUpload } from '#/components/upload/use-upload';
-import { $t } from '#/locales';
 
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 
-const [Form, formApi] = useVbenForm({
+const [Modal, modalApi] = useVbenModal({
+  showConfirmButton: false,
+  showCancelButton: false,
+});
+
+const [Form] = useVbenForm({
   commonConfig: {
     componentProps: {
       class: 'w-full',
@@ -25,64 +25,19 @@ const [Form, formApi] = useVbenForm({
   layout: 'horizontal',
   schema: useFormSchema().map((item) => ({ ...item, label: '' })), // 去除label
   showDefaultActions: false,
-});
+  handleValuesChange: (values) => {
-
+    if (isEmpty(values)) {
-const [Modal, modalApi] = useVbenModal({
-  async onConfirm() {
-    const { valid } = await formApi.validate();
-    if (!valid) {
       return;
     }
-    modalApi.lock();
+    // 上传成功关闭 modal
-    // 提交表单
+    modalApi.close();
-    const data = await formApi.getValues();
+    emit('success');
-    try {
-      await useUpload().httpRequest(data.file);
-      // 关闭并提示
-      await modalApi.close();
-      emit('success');
-      ElMessage.success($t('ui.actionMessage.operationSuccess'));
-    } finally {
-      modalApi.unlock();
-    }
   },
 });
-
-/** 上传前 */
-function beforeUpload(file: UploadRawFile) {
-  // TODO @puhui999：【bug】这个上传功能，有点问题。报文件不存在
-  formApi.setFieldValue('file', file);
-  return false;
-}
 </script>
 
 <template>
-  <Modal title="上传图片">
+  <Modal title="上传文件">
-    <Form class="mx-4">
+    <Form class="mx-4" />
-      <template #file>
-        <div class="w-full">
-          <!-- 上传区域 -->
-          <ElUpload
-            class="upload-demo"
-            drag
-            :auto-upload="false"
-            :limit="1"
-            accept=".jpg,.png,.gif,.webp"
-            :before-upload="beforeUpload"
-            list-type="picture-card"
-          >
-            <div class="el-upload__text">
-              <p>
-                <i class="el-icon-upload text-2xl"></i>
-              </p>
-              <p>点击或拖拽文件到此区域上传</p>
-              <p class="text-sm text-gray-500">
-                支持 .jpg、.png、.gif、.webp 格式图片文件
-              </p>
-            </div>
-          </ElUpload>
-        </div>
-      </template>
-    </Form>
   </Modal>
 </template>

apps/web-ele/src/views/infra/job/data.ts

@@ -3,7 +3,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { InfraJobApi } from '#/api/infra/job';
 import type { DescriptionItemSchema } from '#/components/description';
 
-import { h } from 'vue';
+import { h, markRaw } from 'vue';
 
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
@@ -11,6 +11,7 @@ import { formatDateTime } from '@vben/utils';
 
 import { ElTimeline, ElTimelineItem } from 'element-plus';
 
+import { CronTab } from '#/components/cron-tab';
 import { DictTag } from '#/components/dict-tag';
 
 /** 新增/修改的表单 */
@@ -57,12 +58,11 @@ export function useFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'cronExpression',
       label: 'CRON 表达式',
-      component: 'Input',
+      component: markRaw(CronTab),
       componentProps: {
         placeholder: '请输入 CRON 表达式',
       },
       rules: 'required',
-      // TODO @芋艿：未来支持动态的 CRON 表达式选择
     },
     {
       fieldName: 'retryCount',
@@ -71,6 +71,8 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入重试次数。设置为 0 时，不进行重试',
         min: 0,
+        controlsPosition: 'right',
+        class: '!w-full',
       },
       rules: 'required',
     },
@@ -81,6 +83,8 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入重试间隔，单位：毫秒。设置为 0 时，无需间隔',
         min: 0,
+        controlsPosition: 'right',
+        class: '!w-full',
       },
       rules: 'required',
     },
@@ -91,6 +95,8 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入监控超时时间，单位：毫秒',
         min: 0,
+        controlsPosition: 'right',
+        class: '!w-full',
       },
     },
   ];