Pre Merge pull request !362 from XuZhiqiang/feat-antdv-next

pull/362/MERGE
XuZhiqiang 2026-06-18 06:23:44 +00:00 committed by Gitee
commit c264735a4a
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
20 changed files with 323 additions and 62 deletions

View File

@ -0,0 +1,86 @@
import type { Component } from 'vue';
import type { Recordable } from '@vben/types';
import { defineAsyncComponent, defineComponent, h, ref } from 'vue';
const RawDatePicker = defineAsyncComponent(
() => import('antdv-next/dist/date-picker/index'),
);
const RawRangePicker = defineAsyncComponent(() =>
import('antdv-next/dist/date-picker/index').then(
(res) => res.DateRangePicker,
),
);
const TIMESTAMP_VALUE_FORMATS = new Set(['x', 'X']);
function isTimestampValueFormat(valueFormat: unknown) {
return (
typeof valueFormat === 'string' && TIMESTAMP_VALUE_FORMATS.has(valueFormat)
);
}
function normalizeTimestampPickerValue(value: any, valueFormat: unknown): any {
if (!isTimestampValueFormat(valueFormat)) {
return value;
}
if (Array.isArray(value)) {
return value.map((item) => normalizeTimestampPickerValue(item, valueFormat));
}
return typeof value === 'number' ? String(value) : value;
}
function withTimestampValueFormat(
component: Component,
name: 'DatePicker' | 'RangePicker',
) {
return defineComponent({
name,
inheritAttrs: false,
setup(_, { attrs, expose, slots }) {
const innerRef = ref();
expose(
new Proxy(
{},
{
get: (_target, key) => innerRef.value?.[key],
has: (_target, key) => key in (innerRef.value || {}),
},
),
);
return () => {
const pickerAttrs: Recordable<any> = { ...attrs };
if (
'value-format' in pickerAttrs &&
!Reflect.has(pickerAttrs, 'valueFormat')
) {
pickerAttrs.valueFormat = pickerAttrs['value-format'];
}
const valueFormat = pickerAttrs.valueFormat;
for (const key of [
'value',
'defaultValue',
'pickerValue',
'defaultPickerValue',
]) {
if (Reflect.has(pickerAttrs, key)) {
pickerAttrs[key] = normalizeTimestampPickerValue(
pickerAttrs[key],
valueFormat,
);
}
}
return h(component, { ...pickerAttrs, ref: innerRef }, slots);
};
},
});
}
const DatePicker = withTimestampValueFormat(RawDatePicker, 'DatePicker');
const RangePicker = withTimestampValueFormat(RawRangePicker, 'RangePicker');
export { DatePicker, RangePicker };

View File

@ -75,6 +75,9 @@ import { message, Modal, notification } from 'antdv-next';
import { uploadFile as uploadFileApi } from '#/api/infra/file';
import { Tinymce as RichTextarea } from '#/components/tinymce';
import { FileUpload, ImageUpload } from '#/components/upload';
import { DatePicker, RangePicker } from './date-picker';
type AdapterUploadProps = UploadProps & {
aspectRatio?: string;
crop?: boolean;
@ -97,9 +100,6 @@ const Checkbox = defineAsyncComponent(
const CheckboxGroup = defineAsyncComponent(() =>
import('antdv-next/dist/checkbox/index').then((res) => res.CheckboxGroup),
);
const DatePicker = defineAsyncComponent(
() => import('antdv-next/dist/date-picker/index'),
);
const Divider = defineAsyncComponent(
() => import('antdv-next/dist/divider/index'),
);
@ -117,11 +117,6 @@ const Radio = defineAsyncComponent(() => import('antdv-next/dist/radio/index'));
const RadioGroup = defineAsyncComponent(() =>
import('antdv-next/dist/radio/index').then((res) => res.RadioGroup),
);
const RangePicker = defineAsyncComponent(() =>
import('antdv-next/dist/date-picker/index').then(
(res) => res.DateRangePicker,
),
);
const Rate = defineAsyncComponent(() => import('antdv-next/dist/rate/index'));
const Select = defineAsyncComponent(
() => import('antdv-next/dist/select/index'),
@ -794,4 +789,4 @@ async function initComponentAdapter() {
});
}
export { initComponentAdapter };
export { DatePicker, initComponentAdapter, RangePicker };

View File

@ -83,6 +83,7 @@ export namespace BpmProcessInstanceApi {
reason: string;
signPicUrl: string;
status: number;
attachments?: string[];
}
/** 抄送流程实例 */

View File

@ -9,7 +9,7 @@ import { computed, defineComponent, ref, unref, useAttrs } from 'vue';
import { get, getNestedValue, isFunction } from '@vben/utils';
import { Card, Descriptions } from 'antdv-next';
import { Card, Descriptions, DescriptionsItem } from 'antdv-next';
const props = {
bordered: { default: true, type: Boolean },

View File

@ -91,7 +91,6 @@ onMounted(() => {
<DateRangePicker
v-model:value="times"
:format="rangePickerProps.format"
:value-format="rangePickerProps.valueFormat"
:placeholder="rangePickerProps.placeholder"
:presets="rangePickerProps.presets"
class="!w-full !max-w-96"

View File

@ -188,8 +188,8 @@ watch(
<Dropdown v-if="getDropdownList.length > 0" :trigger="['hover']">
<slot name="more">
<Button type="link">
{{ $t('page.action.more') }}
<template #icon>
{{ $t('page.action.more') }}
<IconifyIcon icon="lucide:ellipsis-vertical" />
</template>
</Button>

View File

@ -1,6 +1,5 @@
<script lang="ts" setup>
import type { UploadFile, UploadProps } from 'antdv-next';
import type { UploadRequestOption } from 'antdv-next/lib/vc-upload/interface';
import type { FileUploadProps } from './typing';
@ -17,6 +16,8 @@ import { Button, message, Upload } from 'antdv-next';
import { UploadResultStatus } from './typing';
import { useUpload, useUploadType } from './use-upload';
type UploadRequestOption = any;
defineOptions({ name: 'FileUpload', inheritAttrs: false });
const props = withDefaults(defineProps<FileUploadProps>(), {
@ -34,6 +35,7 @@ const props = withDefaults(defineProps<FileUploadProps>(), {
resultField: '',
returnText: false,
showDescription: false,
showDownloadIcon: true,
});
const emit = defineEmits([
'change',
@ -295,7 +297,7 @@ function getValue() {
:show-upload-list="{
showPreviewIcon: true,
showRemoveIcon: true,
showDownloadIcon: true,
showDownloadIcon,
}"
@remove="handleRemove"
@preview="handlePreview"

View File

@ -29,5 +29,6 @@ export interface FileUploadProps {
resultField?: string; // support xxx.xxx.xx
returnText?: boolean; // 是否返回文件文本内容
showDescription?: boolean; // 是否显示下面的描述
showDownloadIcon?: boolean; // 是否显示下载按钮
value?: string | string[];
}

View File

@ -1,7 +1,16 @@
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import { $t } from '#/locales';
type DateRangeTuple = [Dayjs, Dayjs];
type StringRangeTuple = [string, string];
function dateRange(start: Dayjs, end: Dayjs): DateRangeTuple {
return [start, end];
}
/** 时间段选择器拓展 */
export function getRangePickerDefaultProps() {
return {
@ -13,55 +22,55 @@ export function getRangePickerDefaultProps() {
placeholder: [
$t('utils.rangePicker.beginTime'),
$t('utils.rangePicker.endTime'),
],
] as StringRangeTuple,
// 快捷时间范围
presets: [
{
label: $t('utils.rangePicker.today'),
value: [dayjs().startOf('day'), dayjs().endOf('day')],
value: dateRange(dayjs().startOf('day'), dayjs().endOf('day')),
},
{
label: $t('utils.rangePicker.last7Days'),
value: [
value: dateRange(
dayjs().subtract(7, 'day').startOf('day'),
dayjs().endOf('day'),
],
),
},
{
label: $t('utils.rangePicker.last30Days'),
value: [
value: dateRange(
dayjs().subtract(30, 'day').startOf('day'),
dayjs().endOf('day'),
],
),
},
{
label: $t('utils.rangePicker.yesterday'),
value: [
value: dateRange(
dayjs().subtract(1, 'day').startOf('day'),
dayjs().subtract(1, 'day').endOf('day'),
],
),
},
{
label: $t('utils.rangePicker.thisWeek'),
value: [dayjs().startOf('week'), dayjs().endOf('day')],
value: dateRange(dayjs().startOf('week'), dayjs().endOf('day')),
},
{
label: $t('utils.rangePicker.thisMonth'),
value: [dayjs().startOf('month'), dayjs().endOf('day')],
value: dateRange(dayjs().startOf('month'), dayjs().endOf('day')),
},
{
label: $t('utils.rangePicker.lastWeek'),
value: [
value: dateRange(
dayjs().subtract(1, 'week').startOf('day'),
dayjs().endOf('day'),
],
),
},
],
showTime: {
defaultValue: [
defaultValue: dateRange(
dayjs('00:00:00', 'HH:mm:ss'),
dayjs('23:59:59', 'HH:mm:ss'),
],
),
format: 'HH:mm:ss',
},
};

View File

@ -55,6 +55,7 @@ import {
transferTask,
} from '#/api/bpm/task';
import { setConfAndFields2 } from '#/components/form-create';
import { FileUpload } from '#/components/upload';
import { $t } from '#/locales';
import Signature from './signature.vue';
@ -120,6 +121,7 @@ const approveReasonForm: any = reactive({
reason: '',
signPicUrl: '',
nextAssignees: {},
attachments: [],
});
const approveReasonRule: Record<string, any> = computed(() => {
return {
@ -140,7 +142,8 @@ const approveReasonRule: Record<string, any> = computed(() => {
});
const rejectFormRef = ref<FormInstance>();
const rejectReasonForm = reactive({
const rejectReasonForm = reactive<{ attachments: string[]; reason: string }>({
attachments: [],
reason: '',
}); //
const rejectReasonRule: any = computed(() => {
@ -290,6 +293,14 @@ function closePopover(type: string, formRef: any | FormInstance) {
if (formRef) {
formRef.resetFields();
}
if (type === 'approve') {
approveReasonForm.reason = '';
approveReasonForm.attachments = [];
approveReasonForm.signPicUrl = '';
} else if (type === 'reject') {
rejectReasonForm.reason = '';
rejectReasonForm.attachments = [];
}
if (popOverVisible.value[type]) popOverVisible.value[type] = false;
nextAssigneesActivityNode.value = [];
// Timeline
@ -401,6 +412,7 @@ async function handleAudit(pass: boolean, formRef: FormInstance | undefined) {
const data = {
id: runningTask.value.id,
reason: approveReasonForm.reason,
attachments: approveReasonForm.attachments,
variables, // ,
nextAssignees: approveReasonForm.nextAssignees, //
} as any;
@ -414,6 +426,9 @@ async function handleAudit(pass: boolean, formRef: FormInstance | undefined) {
await formCreateApi.validate();
}
await approveTask(data);
approveReasonForm.reason = '';
approveReasonForm.attachments = [];
approveReasonForm.signPicUrl = '';
popOverVisible.value.approve = false;
nextAssigneesActivityNode.value = [];
// Timeline
@ -425,9 +440,12 @@ async function handleAudit(pass: boolean, formRef: FormInstance | undefined) {
//
const data = {
id: runningTask.value.id,
attachments: rejectReasonForm.attachments,
reason: rejectReasonForm.reason,
};
await rejectTask(data);
rejectReasonForm.reason = '';
rejectReasonForm.attachments = [];
popOverVisible.value.reject = false;
message.success('审批不通过成功');
}
@ -748,6 +766,38 @@ function handleSignFinish(url: string) {
approveFormRef.value?.validateFields(['signPicUrl']);
}
/** 附件图片预览 */
const imagePreviewOpen = ref(false);
const imagePreviewUrl = ref('');
/** 判断文件是否为图片类型 */
function isImageUrl(url: string) {
return /\.(bmp|gif|jpe?g|png|svg|webp)$/i.test(url);
}
/** 处理文件预览 */
function handleFilePreview(file: any) {
if (!file?.url && !file?.response) {
message.warning('文件地址不存在,无法预览');
return;
}
const url = file.url || file?.response?.url || file?.response;
if (!url) {
message.warning('文件地址不存在,无法预览');
return;
}
if (isImageUrl(url)) {
imagePreviewUrl.value = url;
imagePreviewOpen.value = true;
} else {
window.open(url, '_blank');
}
}
function handleImagePreviewOpenChange(open: boolean) {
imagePreviewOpen.value = open;
}
/** 处理弹窗可见性 */
function handlePopoverVisible(visible: boolean) {
if (!visible) {
@ -843,6 +893,16 @@ defineExpose({ loadTodoTask });
:rows="4"
/>
</FormItem>
<FormItem label="上传附件/图片" name="attachments">
<FileUpload
v-model:value="approveReasonForm.attachments"
:max-number="10"
:multiple="true"
:show-download-icon="false"
help-text="支持多文件/图片上传"
@preview="handleFilePreview"
/>
</FormItem>
<FormItem>
<Space>
<Button
@ -900,6 +960,15 @@ defineExpose({ loadTodoTask });
:rows="4"
/>
</FormItem>
<FormItem label="上传附件/图片" name="attachments">
<FileUpload
v-model:value="rejectReasonForm.attachments"
:max-number="10"
:multiple="true"
help-text="支持多文件/图片上传"
@preview="handleFilePreview"
/>
</FormItem>
<FormItem>
<Button
:disabled="formLoading"
@ -1444,4 +1513,14 @@ defineExpose({ loadTodoTask });
<!-- 签名弹窗 -->
<SignatureModal @success="handleSignFinish" />
<!-- 图片预览隐藏的 Image 组件仅用于附件预览弹窗 -->
<Image
:preview="{
open: imagePreviewOpen,
onOpenChange: handleImagePreviewOpenChange,
}"
:src="imagePreviewUrl"
style="display: none"
/>
</template>

View File

@ -201,16 +201,25 @@ function shouldShowCustomUserSelect(
);
}
/** 判断是否需要显示审批意见 */
function shouldShowApprovalReason(task: any, nodeType: BpmNodeTypeEnum) {
/** 判断是否需要显示审批意见和附件 */
function shouldShowReasonAndAttachment(task: any, nodeType: BpmNodeTypeEnum) {
return (
task.reason &&
(task.reason || task.attachments?.length > 0) &&
[BpmNodeTypeEnum.START_USER_NODE, BpmNodeTypeEnum.USER_TASK_NODE].includes(
nodeType,
)
);
}
function getAttachmentName(url: string) {
return decodeURIComponent(url.slice(url.lastIndexOf('/') + 1));
}
function isImageAttachment(url: string) {
const ext = url.split('.').pop()?.toLowerCase();
return ['bmp', 'gif', 'jpeg', 'jpg', 'png', 'webp'].includes(ext || '');
}
/** 用户选择弹窗关闭 */
function handleUserSelectClosed() {
selectedUsers.value = [];
@ -413,13 +422,60 @@ defineExpose({ setCustomApproveUsers, batchSetCustomApproveUsers });
</div>
</div>
<!-- 审批意见和签名 -->
<!-- 审批意见附件和签名 -->
<teleport defer :to="`#activity-task-${activity.id}-${index}`">
<div
v-if="shouldShowApprovalReason(task, activity.nodeType)"
v-if="shouldShowReasonAndAttachment(task, activity.nodeType)"
class="mt-1 w-full rounded-md bg-gray-100 p-2 text-sm text-gray-500"
>
审批意见{{ task.reason }}
<div v-if="task.reason">{{ task.reason }}</div>
<div
v-if="(task.attachments?.length || 0) > 0"
:class="{
'mt-2 border-t border-dashed border-gray-300 pt-2':
task.reason,
}"
>
<div class="mb-1 text-xs font-semibold text-gray-400">
附件列表
</div>
<div class="flex flex-col gap-1.5">
<template
v-for="(
attachment, attachmentIndex
) in task.attachments"
:key="attachmentIndex"
>
<div class="flex items-center gap-2">
<IconifyIcon
:icon="
isImageAttachment(attachment)
? 'lucide:image'
: 'lucide:file-text'
"
class="text-gray-400"
/>
<Image
v-if="isImageAttachment(attachment)"
:width="32"
:height="32"
class="rounded border border-solid border-gray-200 object-cover"
:src="attachment"
:preview="{ src: attachment }"
/>
<a
v-else
:href="attachment"
target="_blank"
class="max-w-[240px] truncate text-blue-500 hover:text-blue-600 hover:underline"
:title="getAttachmentName(attachment)"
>
{{ getAttachmentName(attachment) }}
</a>
</div>
</template>
</div>
</div>
</div>
<div
v-if="

View File

@ -26,6 +26,7 @@ const loading = ref(false);
const fileTree = ref<FileNode[]>([]);
const previewFiles = ref<InfraCodegenApi.CodegenPreview[]>([]);
const activeKey = ref<string>('');
const selectedKeys = ref<string[]>([]);
/** 代码地图 */
const codeMap = ref<Map<string, string>>(new Map<string, string>());
@ -53,31 +54,35 @@ function removeCodeMapKey(targetKey: any) {
/** 复制代码 */
async function copyCode() {
const { copy } = useClipboard();
const file = previewFiles.value.find(
(item) => item.filePath === activeKey.value,
);
const file = findPreviewFile(activeKey.value);
if (file) {
await copy(file.code);
message.success('复制成功');
}
}
/** 文件节点点击事件 */
function handleNodeClick(_: any[], e: any) {
if (!e.node.isLeaf) {
return;
}
activeKey.value = e.node.key;
const file = previewFiles.value.find((item) => {
const list = activeKey.value.split('.');
function findPreviewFile(fileKey: string) {
return previewFiles.value.find((item) => {
const list = fileKey.split('.');
// -
if (list.length > 2) {
const lang = list.pop();
return item.filePath === `${list.join('/')}.${lang}`;
}
return item.filePath === activeKey.value;
return item.filePath === fileKey;
});
}
/** 文件节点点击事件 */
function handleNodeClick(_: any[], e: any) {
if (!e.node.isLeaf) {
selectedKeys.value = activeKey.value ? [activeKey.value] : [];
return;
}
activeKey.value = String(e.node.key);
selectedKeys.value = [activeKey.value];
const file = findPreviewFile(activeKey.value);
if (!file) {
return;
}
@ -179,6 +184,7 @@ const [Modal, modalApi] = useVbenModal({
if (!isOpen) {
//
codeMap.value.clear();
selectedKeys.value = [];
return;
}
@ -197,6 +203,7 @@ const [Modal, modalApi] = useVbenModal({
fileTree.value = handleFiles(data);
if (data.length > 0) {
activeKey.value = data[0]?.filePath || '';
selectedKeys.value = activeKey.value ? [activeKey.value] : [];
const code = data[0]?.code || '';
setCodeMap(activeKey.value, code);
}
@ -217,7 +224,7 @@ const [Modal, modalApi] = useVbenModal({
<DirectoryTree
v-if="fileTree.length > 0"
default-expand-all
v-model:active-key="activeKey"
v-model:selected-keys="selectedKeys"
@select="handleNodeClick"
:tree-data="fileTree"
/>
@ -240,7 +247,7 @@ const [Modal, modalApi] = useVbenModal({
>
<CodeEditor
class="max-h-200"
:value="codeMap.get(activeKey)"
:value="codeMap.get(key)"
mode="application/json"
:readonly="true"
:bordered="true"

View File

@ -8,7 +8,6 @@ import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import {
DatePicker,
Form,
Input,
message,
@ -16,6 +15,7 @@ import {
RadioGroup,
} from 'antdv-next';
import { DatePicker } from '#/adapter/component/date-picker';
import {
createDemo01Contact,
getDemo01Contact,

View File

@ -8,7 +8,6 @@ import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import {
DatePicker,
Form,
Input,
message,
@ -16,6 +15,7 @@ import {
RadioGroup,
} from 'antdv-next';
import { DatePicker } from '#/adapter/component/date-picker';
import {
createDemo03Student,
getDemo03Student,

View File

@ -8,7 +8,6 @@ import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import {
DatePicker,
Form,
Input,
message,
@ -17,6 +16,7 @@ import {
Tabs,
} from 'antdv-next';
import { DatePicker } from '#/adapter/component/date-picker';
import {
createDemo03Student,
getDemo03Student,

View File

@ -8,7 +8,6 @@ import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import {
DatePicker,
Form,
Input,
message,
@ -17,6 +16,7 @@ import {
Tabs,
} from 'antdv-next';
import { DatePicker } from '#/adapter/component/date-picker';
import {
createDemo03Student,
getDemo03Student,

View File

@ -54,8 +54,17 @@ function handleSearch(value: string) {
}
/** 处理节点点击:支持点击同一节点取消选中 */
function handleSelect(_selectedKeys: any[], info: any) {
const row = info.node.dataRef as MesMdItemTypeApi.ItemType;
function handleSelect(selectedNodeKeys: any[], info: any) {
const selectedKey = selectedNodeKeys[0] ?? info.node?.id ?? info.node?.key;
const row = itemTypeList.value.find(
(item) => String(item.id) === String(selectedKey),
);
if (!row) {
currentNodeId.value = undefined;
selectedKeys.value = [];
emit('nodeClick', undefined);
return;
}
if (currentNodeId.value === row.id) {
currentNodeId.value = undefined;
selectedKeys.value = [];

View File

@ -38,8 +38,12 @@ function handleSearch(e: any) {
}
/** 选中部门:点击已选中的节点时取消选中 */
function handleSelect(_selectedKeys: any[], info: any) {
emit('select', info.selected ? info.node.dataRef : undefined);
function handleSelect(selectedNodeKeys: any[], info: any) {
const selectedKey = selectedNodeKeys[0];
const dept = info.selected
? deptList.value.find((item) => String(item.id) === String(selectedKey))
: undefined;
emit('select', dept);
}
/** 重置选中状态(供外部重置按钮调用) */

View File

@ -32,8 +32,12 @@ function handleSearch(e: any) {
}
/** 选中部门 */
function handleSelect(_selectedKeys: any[], info: any) {
emit('select', info.node.dataRef);
function handleSelect(selectedNodeKeys: any[], info: any) {
const selectedKey = selectedNodeKeys[0] ?? info.node?.id ?? info.node?.key;
const dept = info.selected
? deptList.value.find((item) => String(item.id) === String(selectedKey))
: undefined;
emit('select', dept);
}
/** 初始化 */

View File

@ -55,8 +55,17 @@ function handleSearch(value: string) {
}
/** 处理节点点击:支持点击同一节点取消选中 */
function handleSelect(_selectedKeys: any[], info: any) {
const row = info.node.dataRef as WmsItemCategoryApi.ItemCategory;
function handleSelect(selectedNodeKeys: any[], info: any) {
const selectedKey = selectedNodeKeys[0] ?? info.node?.id ?? info.node?.key;
const row = categoryList.value.find(
(item) => String(item.id) === String(selectedKey),
);
if (!row) {
currentNodeId.value = undefined;
selectedKeys.value = [];
emit('nodeClick', undefined);
return;
}
if (currentNodeId.value === row.id) {
currentNodeId.value = undefined;
selectedKeys.value = [];