@ -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/checkbo x' ) ,
( ) = > import ( 'antdv-next/dist/checkbox/inde x' ) ,
) ;
const CheckboxGroup = defineAsyncComponent ( ( ) = >
import ( 'ant-design-vue/es/checkbo x' ) . then ( ( res ) = > res . CheckboxGroup ) ,
import ( 'antdv-next/dist/checkbox/inde x' ) . 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 Spac e= 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 ,
onVisible Change : ( value : boolean ) = > {
visible . value = value ;
onOpen Change : ( 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() {
@ -372,7 +386,7 @@ function cropImage(file: File, aspectRatio: string | undefined) {
closable : false ,
cancelText : $t ( 'common.cancel' ) ,
okText : $t ( 'ui.crop.confirm' ) ,
destroyOnClose : true ,
destroyOnHidden : true ,
onOk : async ( ) = > {
const cropper = cropperRef . value ;
if ( ! cropper ) {
@ -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 : 'onVisible Change' ,
visibleEvent : 'onOpen Change' ,
} ) ,
ApiSelect : withDefaultPlaceholder ( ApiComponent , 'select' , {
component : Select ,
loadingSlot : 'suffixIcon' ,
modelPropName : 'value' ,
visibleEvent : 'onVisible Change' ,
visibleEvent : 'onOpen Change' ,
} ) ,
ApiTreeSelect : withDefaultPlaceholder ( ApiComponent , 'select' , {
component : TreeSelect ,
@ -695,7 +709,7 @@ async function initComponentAdapter() {
loadingSlot : 'suffixIcon' ,
modelPropName : 'value' ,
optionsPropName : 'treeData' ,
visibleEvent : 'onVisible Change' ,
visibleEvent : 'onOpen Change' ,
} ) ,
AutoComplete ,
Cascader ,
@ -713,7 +727,9 @@ async function initComponentAdapter() {
modelValueProp : 'value' ,
} ) ,
Input : withDefaultPlaceholder ( Input , 'input' ) ,
InputNumber : withDefaultPlaceholder ( InputNumber , 'input' ) ,
InputNumber : withDefaultPlaceholder ( InputNumber , 'input' , {
style : { width : '100%' } ,
} ) ,
InputPassword : withDefaultPlaceholder ( InputPassword , 'input' ) ,
Mentions : withDefaultPlaceholder ( Mentions , 'input' ) ,
// 自定义主要按钮
@ -764,7 +780,7 @@ async function initComponentAdapter() {
copyPreferencesSuccess : ( title , content ) = > {
notification . success ( {
description : content ,
message : title ,
title ,
placement : 'bottomRight' ,
} ) ;
} ,
Jin Mao
3 months ago