feat:完善客户Drawer详情

Sanakey

6 天以前 cb165187ddcf5d9cfd8aad97a2868d0343b14bd9

 src/components/Upload/src/BasicUpload.vue

@@ -1,99 +1,170 @@
<template>
  <div>
    <a-button-group>
      <a-button type="primary" @click="openUploadModal" preIcon="ant-design:cloud-upload-outlined">
        上传
    <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">
        <template #title>
          已上传
          <template v-if="fileListRef.length">{{ fileListRef.length }}</template>
          {{ t('component.upload.uploaded') }}
          <template v-if="fileList.length">
            {{ fileList.length }}
          </template>
        </template>
        <a-button @click="openPreviewModal">
          <Icon icon="ant-design:eye-outlined" />
          <template v-if="fileListRef.length && showPreviewNumber">
            {{ fileListRef.length }}
          <Icon icon="bi:eye" />
          <template v-if="fileList.length && showPreviewNumber">
            {{ fileList.length }}
          </template>
        </a-button>
      </Tooltip>
    </a-button-group>

    <UploadModal v-bind="bindValue" @register="registerUploadModal" @change="handleChange" />
    </Space>
    <UploadModal
      v-bind="bindValue"
      :previewFileList="fileList"
      :fileListOpenDrag="fileListOpenDrag"
      :fileListDragOptions="fileListDragOptions"
      @register="registerUploadModal"
      @change="handleChange"
      @delete="handleDelete"
    />

    <UploadPreviewModal
      :value="fileListRef"
      :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 { 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({
    components: { UploadModal, UploadPreviewModal, Icon, Tooltip },
    props: uploadContainerProps,
    setup(props, { emit, attrs }) {
      // 上传modal
      const [registerUploadModal, { openModal: openUploadModal }] = useModal();
  defineOptions({ name: 'BasicUpload' });

      //   预览modal
      const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();
  const props = defineProps(uploadContainerProps);

      const fileListRef = ref<string[]>([]);
  const emit = defineEmits(['change', 'delete', 'preview-delete', 'update:value']);

      const showPreview = computed(() => {
        const { emptyHidePreview } = props;
        if (!emptyHidePreview) return true;
        return emptyHidePreview ? fileListRef.value.length > 0 : true;
      });
  const attrs = useAttrs();
  const { t } = useI18n();
  // 上传modal
  const [registerUploadModal, { openModal: openUploadModal }] = useModal();

      const bindValue = computed(() => {
        const value = { ...attrs, ...props };
        return omit(value, 'onChange');
      });
  //   预览modal
  const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();

      watch(
        () => props.value,
        (value = []) => {
          fileListRef.value = value;
        },
        { immediate: true }
      );
  const fileList = ref<BaseFileItem[] | any[]>([]);

      // 上传modal保存操作
      function handleChange(urls: string[]) {
        fileListRef.value = [...unref(fileListRef), ...(urls || [])];
        emit('change', fileListRef.value);
      }
  const showPreview = computed(() => {
    const { emptyHidePreview } = props;
    if (!emptyHidePreview) return true;
    return emptyHidePreview ? fileList.value.length > 0 : true;
  });

      // 预览modal保存操作
      function handlePreviewChange(urls: string[]) {
        fileListRef.value = [...(urls || [])];
        emit('change', fileListRef.value);
      }
  const bindValue = computed(() => {
    const value = { ...attrs, ...props };
    return omit(value, 'onChange');
  });

  const isFirstRender = ref<boolean>(true);

  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,
        fileListRef,
        showPreview,
        bindValue,
        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>