| | |
|---|
| | | |
|---|
| | | import { computed, ref, toRefs, watch } from 'vue'; |
|---|
| | | |
|---|
| | | import { IconifyIcon } from '..\..\packages\icons\src'; |
|---|
| | | import { $t } from '..\..\packages\locales\src'; |
|---|
| | | import { IconifyIcon } from '@vben/icons'; |
|---|
| | | import { $t } from '@vben/locales'; |
|---|
| | | import { |
|---|
| | | defaultImageAccepts, |
|---|
| | | isFunction, |
|---|
| | | isImage, |
|---|
| | | isObject, |
|---|
| | | isString, |
|---|
| | | } from '..\..\packages\utils\src'; |
|---|
| | | } from '@vben/utils'; |
|---|
| | | |
|---|
| | | import { message, Modal, Upload } from 'ant-design-vue'; |
|---|
| | | |
|---|
| | |
|---|
| | | disabled: false, |
|---|
| | | listType: 'picture-card', |
|---|
| | | helpText: '', |
|---|
| | | maxSize: 2, |
|---|
| | | maxSize: 50, |
|---|
| | | maxNumber: 1, |
|---|
| | | accept: () => defaultImageAccepts, |
|---|
| | | multiple: false, |
|---|
| | |
|---|
| | | return null; |
|---|
| | | }) |
|---|
| | | .filter(Boolean) as UploadProps['fileList']; |
|---|
| | | } else { |
|---|
| | | // v 为空（null/undefined）时必须清空列表：否则切换记录时（例如编辑过带封面的活动 |
|---|
| | | // 再点新建、或详情旋转到另一条）会残留上一条的图片，看起来是「图还在但换不了」 |
|---|
| | | fileList.value = []; |
|---|
| | | } |
|---|
| | | if (!isFirstRender.value) { |
|---|
| | | emit('change', value); |
|---|
| | |
|---|
| | | * @returns 是否允许上传 |
|---|
| | | */ |
|---|
| | | async function beforeUpload(file: File) { |
|---|
| | | // 检查文件数量限制 |
|---|
| | | if (fileList.value!.length >= props.maxNumber) { |
|---|
| | | // 检查文件数量限制。 |
|---|
| | | // maxNumber=1 时这里必须放行，否则「编辑」类场景（进表单时已有 1 张回显图） |
|---|
| | | // 会永远换不了图：antd 的 onInternalChange 在 maxCount===1 下会 slice(-1) 只留最新一张， |
|---|
| | | // 新图天然覆盖旧图，不需要在 beforeUpload 里拦。 |
|---|
| | | if (fileList.value!.length >= props.maxNumber && props.maxNumber !== 1) { |
|---|
| | | message.error($t('ui.upload.maxNumber', [props.maxNumber])); |
|---|
| | | return Upload.LIST_IGNORE; |
|---|
| | | } |
|---|
| | |
|---|
| | | // 添加到临时上传列表 |
|---|
| | | const fileUrl = res?.url || res?.data || res; |
|---|
| | | uploadList.value.push({ |
|---|
| | | name: file.name, |
|---|
| | | name: res?.name || file.name, |
|---|
| | | url: fileUrl, |
|---|
| | | id: res?.id, |
|---|
| | | response: res, |
|---|
| | | status: UploadResultStatus.DONE, |
|---|
| | | uid: file.name + Date.now(), |
|---|
| | | }); |
|---|
| | |
|---|
| | | @preview="handlePreview" |
|---|
| | | @remove="handleRemove" |
|---|
| | | > |
|---|
| | | <!-- maxNumber=1 时即使已有一张也要保留上传入口（用于「换一张」）： |
|---|
| | | 插槽一旦为空，antd 会用 appendActionVisible=false 把整个上传按钮 v-show 掉， |
|---|
| | | 编辑场景下就彻底没有可点的上传入口了 --> |
|---|
| | | <div |
|---|
| | | v-if="fileList && fileList.length < maxNumber" |
|---|
| | | v-if="fileList && (fileList.length < maxNumber || maxNumber === 1)" |
|---|
| | | class="flex flex-col items-center justify-center" |
|---|
| | | > |
|---|
| | | <IconifyIcon icon="lucide:cloud-upload" /> |
|---|
