From cb165187ddcf5d9cfd8aad97a2868d0343b14bd9 Mon Sep 17 00:00:00 2001
From: Sanakey <714737083@qq.com>
Date: 星期五, 27 九月 2024 18:14:48 +0800
Subject: [PATCH] feat:完善客户Drawer详情
---
src/components/Upload/src/BasicUpload.vue | 191 +++++++++++++++++++++++++++++------------------
1 files changed, 119 insertions(+), 72 deletions(-)
diff --git a/src/components/Upload/src/BasicUpload.vue b/src/components/Upload/src/BasicUpload.vue
index a8d9e12..122830b 100644
--- a/src/components/Upload/src/BasicUpload.vue
+++ b/src/components/Upload/src/BasicUpload.vue
@@ -1,7 +1,12 @@
<template>
<div>
- <a-button-group>
- <a-button type="primary" @click="openUploadModal" preIcon="carbon:cloud-upload">
+ <Space>
+ <a-button
+ type="primary"
+ @click="openUploadModal"
+ preIcon="carbon:cloud-upload"
+ :disabled="disabled"
+ >
{{ t('component.upload.upload') }}
</a-button>
<Tooltip placement="bottom" v-if="showPreview">
@@ -18,11 +23,12 @@
</template>
</a-button>
</Tooltip>
- </a-button-group>
-
+ </Space>
<UploadModal
v-bind="bindValue"
:previewFileList="fileList"
+ :fileListOpenDrag="fileListOpenDrag"
+ :fileListDragOptions="fileListDragOptions"
@register="registerUploadModal"
@change="handleChange"
@delete="handleDelete"
@@ -30,94 +36,135 @@
<UploadPreviewModal
:value="fileList"
+ :max-number="bindValue.maxNumber"
@register="registerPreviewModal"
@list-change="handlePreviewChange"
@delete="handlePreviewDelete"
+ :preview-columns="props.previewColumns"
+ :before-preview-data="props.beforePreviewData"
/>
</div>
</template>
-<script lang="ts">
- import { defineComponent, ref, watch, unref, computed } from 'vue';
- import UploadModal from './UploadModal.vue';
- import UploadPreviewModal from './UploadPreviewModal.vue';
- import { Icon } from '/@/components/Icon';
- import { Tooltip } from 'ant-design-vue';
- import { useModal } from '/@/components/Modal';
+<script lang="ts" setup>
+ import { ref, watch, unref, computed, useAttrs } from 'vue';
+ import { Recordable } from '@vben/types';
+ import Icon from '@/components/Icon/Icon.vue';
+ import { Tooltip, Space } from 'ant-design-vue';
+ import { useModal } from '@/components/Modal';
import { uploadContainerProps } from './props';
import { omit } from 'lodash-es';
- import { useI18n } from '/@/hooks/web/useI18n';
+ import { useI18n } from '@/hooks/web/useI18n';
+ import { isArray, isObject, isString } from '@/utils/is';
+ import UploadModal from './components/UploadModal.vue';
+ import UploadPreviewModal from './components/UploadPreviewModal.vue';
+ import { BaseFileItem } from './types/typing';
+ import { buildUUID } from '@/utils/uuid';
- export default defineComponent({
- name: 'BasicUpload',
- components: { UploadModal, UploadPreviewModal, Icon, Tooltip },
- props: uploadContainerProps,
- emits: ['change', 'delete', 'preview-delete', 'update:value'],
+ defineOptions({ name: 'BasicUpload' });
- setup(props, { emit, attrs }) {
- const { t } = useI18n();
- // 涓婁紶modal
- const [registerUploadModal, { openModal: openUploadModal }] = useModal();
+ const props = defineProps(uploadContainerProps);
- // 棰勮modal
- const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();
+ const emit = defineEmits(['change', 'delete', 'preview-delete', 'update:value']);
- const fileList = ref<string[]>([]);
+ const attrs = useAttrs();
+ const { t } = useI18n();
+ // 涓婁紶modal
+ const [registerUploadModal, { openModal: openUploadModal }] = useModal();
- const showPreview = computed(() => {
- const { emptyHidePreview } = props;
- if (!emptyHidePreview) return true;
- return emptyHidePreview ? fileList.value.length > 0 : true;
- });
+ // 棰勮modal
+ const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();
- const bindValue = computed(() => {
- const value = { ...attrs, ...props };
- return omit(value, 'onChange');
- });
+ const fileList = ref<BaseFileItem[] | any[]>([]);
- watch(
- () => props.value,
- (value = []) => {
- fileList.value = value;
- },
- { immediate: true }
- );
+ const showPreview = computed(() => {
+ const { emptyHidePreview } = props;
+ if (!emptyHidePreview) return true;
+ return emptyHidePreview ? fileList.value.length > 0 : true;
+ });
- // 涓婁紶modal淇濆瓨鎿嶄綔
- function handleChange(urls: string[]) {
- fileList.value = [...unref(fileList), ...(urls || [])];
- emit('update:value', fileList.value);
- emit('change', fileList.value);
- }
+ const bindValue = computed(() => {
+ const value = { ...attrs, ...props };
+ return omit(value, 'onChange');
+ });
- // 棰勮modal淇濆瓨鎿嶄綔
- function handlePreviewChange(urls: string[]) {
- fileList.value = [...(urls || [])];
- emit('update:value', fileList.value);
- emit('change', fileList.value);
- }
+ const isFirstRender = ref<boolean>(true);
- function handleDelete(record: Recordable) {
- emit('delete', record);
- }
-
- function handlePreviewDelete(url: string) {
- emit('preview-delete', url);
- }
-
+ function getValue(valueKey = 'url') {
+ const list = (fileList.value || []).map((item: any) => {
+ return item[valueKey];
+ });
+ return list;
+ }
+ function genFileListByUrls(urls: string[]) {
+ const list = urls.map((e) => {
return {
- registerUploadModal,
- openUploadModal,
- handleChange,
- handlePreviewChange,
- registerPreviewModal,
- openPreviewModal,
- fileList,
- showPreview,
- bindValue,
- handleDelete,
- handlePreviewDelete,
- t,
+ uid: buildUUID(),
+ url: e,
};
+ });
+ return list;
+ }
+ watch(
+ () => props.value,
+ (v = []) => {
+ let values: string[] = [];
+ if (v) {
+ if (isArray(v)) {
+ values = v;
+ } else if (typeof v == 'string') {
+ values.push(v);
+ }
+ fileList.value = values.map((item) => {
+ if (item && isString(item)) {
+ return {
+ uid: buildUUID(),
+ url: item,
+ };
+ } else if (item && isObject(item)) {
+ return item;
+ } else {
+ return;
+ }
+ }) as any;
+ }
+ emit('update:value', values);
+ if (!isFirstRender.value) {
+ emit('change', values);
+ isFirstRender.value = false;
+ }
},
+ {
+ immediate: true,
+ deep: true,
+ },
+ );
+
+ // 涓婁紶modal淇濆瓨鎿嶄綔
+ function handleChange(urls: string[], valueKey: string) {
+ fileList.value = [...unref(fileList), ...(genFileListByUrls(urls) || [])];
+ const values = getValue(valueKey);
+ emit('update:value', values);
+ emit('change', values);
+ }
+
+ // 棰勮modal淇濆瓨鎿嶄綔
+ function handlePreviewChange(fileItems: string[], valueKey: string) {
+ fileList.value = [...(fileItems || [])];
+ const values = getValue(valueKey);
+ emit('update:value', values);
+ emit('change', values);
+ }
+
+ function handleDelete(record: Recordable<any>) {
+ emit('delete', record);
+ }
+
+ function handlePreviewDelete(url: string) {
+ emit('preview-delete', url);
+ }
+
+ // 鏆撮湶openUploadModal 渚涚埗缁勪欢浣跨敤
+ defineExpose({
+ openUploadModal,
});
</script>
--
Gitblit v1.8.0