wupengfei
2025-04-21 524b1febe13e9305e9a27c870e09819e0e363bbd
src/components/commonView/FourStreamsMaterialFileTable.vue
@@ -4,12 +4,12 @@
      :tableData="list"
      :columns="columns"
      :autoHeight="false"
      :operationBtns="operationBtns"
      :operationBtns="columnsProps.operationBtns"
      :operationColumnWidth="240"
      :showTableColumnSetting="false"
    >
      <template #fileBusinessType="{ row }">
        {{ AllEnterpriseMaterialFileBusinessTypeEnumText[row.fileBusinessType] }}
        {{ BusinessTypeEnumText[row.fileBusinessType] }}
      </template>
      <template #operationBtn-uploadBtn="{ data, row }">
        <BlFileUpload
@@ -25,21 +25,34 @@
        </BlFileUpload>
      </template>
    </ProTableV2>
    <FourStreamsBatchMaterialFileDialog
      v-bind="dialogProps"
      :name="''"
      :zipName="`${BusinessTypeEnumText[currentFourStreamsMaterialFileTableItem.fileBusinessType as any]}`"
      v-model:fileList="currentFourStreamsMaterialFileTableItem.fileList"
      :showDeleteBtn="showDeleteBtn"
    />
  </div>
</template>
<script setup lang="ts">
import { FourStreamsMaterialFileTableProps, FourStreamsMaterialFileTableItem } from './types';
<script setup lang="ts" generic="T">
import {
  FourStreamsMaterialFileTableProps,
  FourStreamsMaterialFileTableItem,
  FourStreamsMaterialFileBusinessTypeEnumText,
  BaseMaterialFileTableItem,
} from './types';
import {
  ProTableV2,
  defineColumns,
  defineOperationBtns,
  BlFileUpload,
  bolePreview,
  useDialog,
} from '@bole-core/components';
import { AllEnterpriseMaterialFileBusinessTypeEnumText } from '@/constants';
import FourStreamsBatchMaterialFileDialog from './FourStreamsBatchMaterialFileDialog.vue';
import { downloadFileByUrl } from '@/utils';
import { Message, isFileCanPreview } from '@bole-core/core';
import { useDefineColumns } from '@/hooks';
defineOptions({
  name: 'FourStreamsMaterialFileTable',
@@ -50,9 +63,11 @@
  showCheckBtn: true,
  showDownloadBtn: true,
  showDeleteBtn: true,
  downloadBtnText: '下载',
  BusinessTypeEnumText: () => FourStreamsMaterialFileBusinessTypeEnumText,
});
const list = defineModel<FourStreamsMaterialFileTableItem[]>('list');
const list = defineModel<BaseMaterialFileTableItem<T>[]>('list');
const columns = defineColumns([
  {
@@ -62,81 +77,83 @@
  },
]);
const operationBtns = defineOperationBtns([
  {
    data: {
      enCode: 'uploadBtn',
      name: '上传',
    },
    extraProps: {
      hide: (row: FourStreamsMaterialFileTableItem) => {
        if (!props.showUploadBtn) return true;
        let fileList = row?.fileList?.filter?.((item) => item.status === 'success');
        return fileList?.length > 0;
const columnsProps = useDefineColumns({
  operationBtns: [
    {
      data: {
        enCode: 'uploadBtn',
        name: '上传',
      },
      extraProps: {
        hide: (row: FourStreamsMaterialFileTableItem) => {
          if (!props.showUploadBtn) return true;
          let fileList = row?.fileList?.filter?.((item) => item.status === 'success');
          return fileList?.length > 0;
        },
      },
    },
  },
  {
    data: {
      enCode: 'detailBtn',
      name: '查看',
    },
    emits: {
      onClick: (row) => handlePreview(row),
    },
    extraProps: {
      hide: (row: FourStreamsMaterialFileTableItem) => {
        if (!props.showCheckBtn) return true;
        let fileList = row?.fileList?.filter?.((item) => item.status === 'success');
        if (!fileList?.length) {
          return true;
        } else {
          if (fileList.length > 1) {
            return false;
    {
      data: {
        enCode: 'detailBtn',
        name: '查看',
      },
      emits: {
        onClick: (row) => handlePreview(row),
      },
      extraProps: {
        hide: (row: FourStreamsMaterialFileTableItem) => {
          if (!props.showCheckBtn) return true;
          let fileList = row?.fileList?.filter?.((item) => item.status === 'success');
          if (!fileList?.length) {
            return true;
          } else {
            return !isFileCanPreview(fileList[0].path);
            if (fileList.length > 1) {
              return false;
            } else {
              return !isFileCanPreview(fileList[0].path);
            }
          }
        }
        },
      },
    },
  },
  {
    data: {
      enCode: 'downloadBtn',
      name: '下载',
    },
    emits: {
      onClick: (row) => handleBatchDownload(row),
    },
    extraProps: {
      hide: (row: FourStreamsMaterialFileTableItem) => {
        return (
          !props.showDownloadBtn ||
          !row?.fileList?.filter?.((item) => item.status === 'success')?.length
        );
    {
      data: {
        enCode: 'downloadBtn',
        name: props.downloadBtnText,
      },
      emits: {
        onClick: (row) => handleBatchDownload(row),
      },
      extraProps: {
        hide: (row: FourStreamsMaterialFileTableItem) => {
          return (
            !props.showDownloadBtn ||
            !row?.fileList?.filter?.((item) => item.status === 'success')?.length
          );
        },
      },
    },
  },
  {
    data: {
      enCode: 'delBtn',
      name: '删除',
    },
    props: {
      type: 'danger',
    },
    emits: {
      onClick: (row) => handleDelete(row),
    },
    extraProps: {
      hide: (row: FourStreamsMaterialFileTableItem) => {
        if (!props.showDeleteBtn) return true;
        let fileList = row?.fileList?.filter?.((item) => item.status === 'success');
        return !fileList?.length;
    {
      data: {
        enCode: 'delBtn',
        name: '删除',
      },
      props: {
        type: 'danger',
      },
      emits: {
        onClick: (row) => handleDelete(row),
      },
      extraProps: {
        hide: (row: FourStreamsMaterialFileTableItem) => {
          if (!props.showDeleteBtn) return true;
          let fileList = row?.fileList?.filter?.((item) => item.status === 'success');
          return !fileList?.length;
        },
      },
    },
  },
]);
  ],
});
async function handleDelete(row: FourStreamsMaterialFileTableItem) {
  try {
@@ -145,6 +162,12 @@
  } catch (error) {}
}
const currentFourStreamsMaterialFileTableItem = ref<BaseMaterialFileTableItem<T>>({
  fileBusinessType: 0 as any,
  fileList: [],
});
const { dialogProps, dialogState } = useDialog();
async function handlePreview(row: FourStreamsMaterialFileTableItem) {
  if (row.fileList.length > 1) {
    // currentEnterpriseMaterialFileTableItem.value = row;