|
|
|
@ -18,6 +18,7 @@ import type { |
|
|
|
MentionsProps, |
|
|
|
RadioGroupProps, |
|
|
|
RadioProps, |
|
|
|
RangePickerProps, |
|
|
|
RateProps, |
|
|
|
SelectProps, |
|
|
|
SpaceProps, |
|
|
|
@ -28,8 +29,7 @@ import type { |
|
|
|
UploadChangeParam, |
|
|
|
UploadFile, |
|
|
|
UploadProps, |
|
|
|
} from 'ant-design-vue'; |
|
|
|
import type { RangePickerProps } from 'ant-design-vue/es/date-picker'; |
|
|
|
} from 'antdv-next'; |
|
|
|
|
|
|
|
import type { Component, Ref } from 'vue'; |
|
|
|
|
|
|
|
@ -72,7 +72,7 @@ import { isEmpty } from '@vben/utils'; |
|
|
|
|
|
|
|
import { VbenCollapsibleParams } from '@vben-core/shadcn-ui'; |
|
|
|
|
|
|
|
import { message, Modal, notification } from 'ant-design-vue'; |
|
|
|
import { message, Modal, notification } from 'antdv-next'; |
|
|
|
|
|
|
|
import { upload_file } from '#/api/examples/upload'; |
|
|
|
type AdapterUploadProps = UploadProps & { |
|
|
|
@ -86,60 +86,72 @@ type AdapterUploadProps = UploadProps & { |
|
|
|
}; |
|
|
|
|
|
|
|
const AutoComplete = defineAsyncComponent( |
|
|
|
() => import('ant-design-vue/es/auto-complete'), |
|
|
|
() => import('antdv-next/dist/auto-complete/index'), |
|
|
|
); |
|
|
|
const Button = defineAsyncComponent( |
|
|
|
() => import('antdv-next/dist/button/index'), |
|
|
|
); |
|
|
|
const Button = defineAsyncComponent(() => import('ant-design-vue/es/button')); |
|
|
|
const Checkbox = defineAsyncComponent( |
|
|
|
() => import('ant-design-vue/es/checkbox'), |
|
|
|
() => import('antdv-next/dist/checkbox/index'), |
|
|
|
); |
|
|
|
const CheckboxGroup = defineAsyncComponent(() => |
|
|
|
import('ant-design-vue/es/checkbox').then((res) => res.CheckboxGroup), |
|
|
|
import('antdv-next/dist/checkbox/index').then((res) => res.CheckboxGroup), |
|
|
|
); |
|
|
|
const DatePicker = defineAsyncComponent( |
|
|
|
() => import('ant-design-vue/es/date-picker'), |
|
|
|
() => import('antdv-next/dist/date-picker/index'), |
|
|
|
); |
|
|
|
const Divider = defineAsyncComponent( |
|
|
|
() => import('antdv-next/dist/divider/index'), |
|
|
|
); |
|
|
|
const Divider = defineAsyncComponent(() => import('ant-design-vue/es/divider')); |
|
|
|
const Input = defineAsyncComponent(() => import('ant-design-vue/es/input')); |
|
|
|
const Input = defineAsyncComponent(() => import('antdv-next/dist/input/index')); |
|
|
|
const InputNumber = defineAsyncComponent( |
|
|
|
() => import('ant-design-vue/es/input-number'), |
|
|
|
() => import('antdv-next/dist/input-number/index'), |
|
|
|
); |
|
|
|
const InputPassword = defineAsyncComponent(() => |
|
|
|
import('ant-design-vue/es/input').then((res) => res.InputPassword), |
|
|
|
import('antdv-next/dist/input/index').then((res) => res.InputPassword), |
|
|
|
); |
|
|
|
const Mentions = defineAsyncComponent( |
|
|
|
() => import('ant-design-vue/es/mentions'), |
|
|
|
() => import('antdv-next/dist/mentions/index'), |
|
|
|
); |
|
|
|
const Radio = defineAsyncComponent(() => import('ant-design-vue/es/radio')); |
|
|
|
const Radio = defineAsyncComponent(() => import('antdv-next/dist/radio/index')); |
|
|
|
const RadioGroup = defineAsyncComponent(() => |
|
|
|
import('ant-design-vue/es/radio').then((res) => res.RadioGroup), |
|
|
|
import('antdv-next/dist/radio/index').then((res) => res.RadioGroup), |
|
|
|
); |
|
|
|
const RangePicker = defineAsyncComponent(() => |
|
|
|
import('ant-design-vue/es/date-picker').then((res) => res.RangePicker), |
|
|
|
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'), |
|
|
|
); |
|
|
|
const Rate = defineAsyncComponent(() => import('ant-design-vue/es/rate')); |
|
|
|
const Select = defineAsyncComponent(() => import('ant-design-vue/es/select')); |
|
|
|
const Space = defineAsyncComponent(() => import('ant-design-vue/es/space')); |
|
|
|
const Switch = defineAsyncComponent(() => import('ant-design-vue/es/switch')); |
|
|
|
const Textarea = defineAsyncComponent(() => |
|
|
|
import('ant-design-vue/es/input').then((res) => res.Textarea), |
|
|
|
const Space = defineAsyncComponent(() => import('antdv-next/dist/space/index')); |
|
|
|
const Switch = defineAsyncComponent( |
|
|
|
() => import('antdv-next/dist/switch/index'), |
|
|
|
); |
|
|
|
const Textarea = defineAsyncComponent( |
|
|
|
() => import('antdv-next/dist/input/TextArea'), |
|
|
|
); |
|
|
|
const TimePicker = defineAsyncComponent( |
|
|
|
() => import('ant-design-vue/es/time-picker'), |
|
|
|
() => import('antdv-next/dist/time-picker/index'), |
|
|
|
); |
|
|
|
const TreeSelect = defineAsyncComponent( |
|
|
|
() => import('ant-design-vue/es/tree-select'), |
|
|
|
() => import('antdv-next/dist/tree-select/index'), |
|
|
|
); |
|
|
|
const Cascader = defineAsyncComponent( |
|
|
|
() => import('ant-design-vue/es/cascader'), |
|
|
|
() => import('antdv-next/dist/cascader/index'), |
|
|
|
); |
|
|
|
const Upload = defineAsyncComponent( |
|
|
|
() => import('antdv-next/dist/upload/index'), |
|
|
|
); |
|
|
|
const Upload = defineAsyncComponent(() => import('ant-design-vue/es/upload')); |
|
|
|
const Image = defineAsyncComponent(() => import('ant-design-vue/es/image')); |
|
|
|
const Image = defineAsyncComponent(() => import('antdv-next/dist/image/index')); |
|
|
|
const PreviewGroup = defineAsyncComponent(() => |
|
|
|
import('ant-design-vue/es/image').then((res) => res.ImagePreviewGroup), |
|
|
|
import('antdv-next/dist/image/index').then((res) => res.ImagePreviewGroup), |
|
|
|
); |
|
|
|
|
|
|
|
const withDefaultPlaceholder = <T extends Component>( |
|
|
|
component: T, |
|
|
|
const withDefaultPlaceholder = ( |
|
|
|
component: Component, |
|
|
|
type: 'input' | 'select', |
|
|
|
componentProps: Recordable<any> = {}, |
|
|
|
) => { |
|
|
|
@ -242,7 +254,7 @@ function getBase64(file: File): Promise<string> { |
|
|
|
*/ |
|
|
|
async function previewImage( |
|
|
|
file: UploadFile, |
|
|
|
visible: Ref<boolean>, |
|
|
|
open: Ref<boolean>, |
|
|
|
fileList: Ref<UploadProps['fileList']>, |
|
|
|
) { |
|
|
|
// 非图片文件直接打开链接
|
|
|
|
@ -250,6 +262,8 @@ async function previewImage( |
|
|
|
const url = file.url || file.preview; |
|
|
|
if (url) { |
|
|
|
window.open(url, '_blank'); |
|
|
|
} else if (file.preview) { |
|
|
|
window.open(file.preview, '_blank'); |
|
|
|
} else { |
|
|
|
message.error($t('ui.formRules.previewWarning')); |
|
|
|
} |
|
|
|
@ -285,10 +299,10 @@ async function previewImage( |
|
|
|
{ |
|
|
|
class: 'hidden', |
|
|
|
preview: { |
|
|
|
visible: visible.value, |
|
|
|
open: open.value, |
|
|
|
current: currentIndex, |
|
|
|
onVisibleChange: (value: boolean) => { |
|
|
|
visible.value = value; |
|
|
|
onOpenChange: (value: boolean) => { |
|
|
|
open.value = value; |
|
|
|
if (!value) { |
|
|
|
setTimeout(() => { |
|
|
|
if (!isUnmounted && container) { |
|
|
|
@ -330,7 +344,7 @@ function cropImage(file: File, aspectRatio: string | undefined) { |
|
|
|
const open = ref<boolean>(true); |
|
|
|
const cropperRef = ref<InstanceType<typeof VCropper> | null>(null); |
|
|
|
|
|
|
|
const closeModal = () => { |
|
|
|
function closeModal() { |
|
|
|
open.value = false; |
|
|
|
setTimeout(() => { |
|
|
|
if (!isUnmounted && container) { |
|
|
|
@ -342,7 +356,7 @@ function cropImage(file: File, aspectRatio: string | undefined) { |
|
|
|
container.remove(); |
|
|
|
} |
|
|
|
}, 300); |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
const CropperWrapper = { |
|
|
|
setup() { |
|
|
|
@ -416,7 +430,7 @@ function cropImage(file: File, aspectRatio: string | undefined) { |
|
|
|
/** |
|
|
|
* 带预览功能的上传组件 |
|
|
|
*/ |
|
|
|
const withPreviewUpload = () => { |
|
|
|
function withPreviewUpload() { |
|
|
|
return defineComponent({ |
|
|
|
name: Upload.name, |
|
|
|
emits: ['update:modelValue'], |
|
|
|
@ -436,10 +450,10 @@ const withPreviewUpload = () => { |
|
|
|
() => attrs?.aspectRatio ?? attrs?.['aspect-ratio'], |
|
|
|
); |
|
|
|
|
|
|
|
const handleBeforeUpload = async ( |
|
|
|
async function handleBeforeUpload( |
|
|
|
file: UploadFile, |
|
|
|
originFileList: Array<File>, |
|
|
|
) => { |
|
|
|
) { |
|
|
|
// 文件大小限制
|
|
|
|
if (maxSize.value && (file.size || 0) / 1024 / 1024 > maxSize.value) { |
|
|
|
message.error($t('ui.formRules.sizeLimit', [maxSize.value])); |
|
|
|
@ -463,9 +477,9 @@ const withPreviewUpload = () => { |
|
|
|
} |
|
|
|
|
|
|
|
return attrs.beforeUpload?.(file) ?? true; |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
const handleChange = (event: UploadChangeParam) => { |
|
|
|
function handleChange(event: UploadChangeParam) { |
|
|
|
try { |
|
|
|
attrs.handleChange?.(event); |
|
|
|
attrs.onHandleChange?.(event); |
|
|
|
@ -479,19 +493,19 @@ const withPreviewUpload = () => { |
|
|
|
'update:modelValue', |
|
|
|
event.fileList?.length ? fileList.value : undefined, |
|
|
|
); |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
const handlePreview = async (file: UploadFile) => { |
|
|
|
function handlePreview(file: UploadFile) { |
|
|
|
previewVisible.value = true; |
|
|
|
await previewImage(file, previewVisible, fileList); |
|
|
|
}; |
|
|
|
return previewImage(file, previewVisible, fileList); |
|
|
|
} |
|
|
|
|
|
|
|
const renderUploadButton = () => { |
|
|
|
function renderUploadButton() { |
|
|
|
if (attrs.disabled) return null; |
|
|
|
return isEmpty(slots) |
|
|
|
? createDefaultUploadSlots(listType, placeholder) |
|
|
|
: slots; |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
// 拖拽排序
|
|
|
|
const draggable = computed( |
|
|
|
@ -600,7 +614,7 @@ const withPreviewUpload = () => { |
|
|
|
); |
|
|
|
}, |
|
|
|
}); |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
// 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
|
|
|
|
export type ComponentType = |
|
|
|
@ -681,13 +695,13 @@ async function initComponentAdapter() { |
|
|
|
fieldNames: { label: 'label', value: 'value', children: 'children' }, |
|
|
|
loadingSlot: 'suffixIcon', |
|
|
|
modelPropName: 'value', |
|
|
|
visibleEvent: 'onVisibleChange', |
|
|
|
visibleEvent: 'onOpenChange', |
|
|
|
}), |
|
|
|
ApiSelect: withDefaultPlaceholder(ApiComponent, 'select', { |
|
|
|
component: Select, |
|
|
|
loadingSlot: 'suffixIcon', |
|
|
|
modelPropName: 'value', |
|
|
|
visibleEvent: 'onVisibleChange', |
|
|
|
visibleEvent: 'onOpenChange', |
|
|
|
}), |
|
|
|
ApiTreeSelect: withDefaultPlaceholder(ApiComponent, 'select', { |
|
|
|
component: TreeSelect, |
|
|
|
@ -695,7 +709,7 @@ async function initComponentAdapter() { |
|
|
|
loadingSlot: 'suffixIcon', |
|
|
|
modelPropName: 'value', |
|
|
|
optionsPropName: 'treeData', |
|
|
|
visibleEvent: 'onVisibleChange', |
|
|
|
visibleEvent: 'onOpenChange', |
|
|
|
}), |
|
|
|
AutoComplete, |
|
|
|
Cascader, |
|
|
|
@ -764,7 +778,7 @@ async function initComponentAdapter() { |
|
|
|
copyPreferencesSuccess: (title, content) => { |
|
|
|
notification.success({ |
|
|
|
description: content, |
|
|
|
message: title, |
|
|
|
title, |
|
|
|
placement: 'bottomRight', |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
xingyu4j
4 months ago