B端大仓文档

Appearance

ExtraFiles ​

适用于s3文件展示场景，同样也适用于自定义的文件列表处理。

针对s3内部已处理相关逻辑，针对非s3业务方自行处理。

如何使用 ​

vue
<ExtraFiles :column="3" :keys="['508048ebede84b318dfa78cdb727b5c8''824203148fcd49c19c01a0073859d5c9']" />

代码演示 ​

纯UI组件

与s3无关，可自定义files<IExtraFile>，支持suffix和append两个slot。

<script setup lang="ts">
import { ExtraFilePanel, IExtraFile } from '@fs/lib'

const fiels: IExtraFile[] = [
  {
    fileKey: '4d7a39d6bcc149b8b7371101c5b50cc3',
    fileName: 'WMS库存导入模版.xlsx',
    filePath: null,
    fileSize: 1024,
    date: '2024-10-10 10:10:10',
    fileUrl: 'https://fs-wh-test.s3.us-west-2.amazonaws.com/webStatic/4d7a39d6bcc149b8b7371101c5b50cc3',
  },
  {
    fileKey: '508048ebede84b318dfa78cdb727b5c8',
    fileName: '采购订单.docx',
    filePath: null,
    fileSize: 1024,
    date: '2024-10-10 10:10:10',
    fileUrl: 'https://fs-wh-test.s3.us-west-2.amazonaws.com/webStatic/508048ebede84b318dfa78cdb727b5c8',
  },
  {
    fileKey: '824203148fcd49c19c01a0073859d5c9',
    fileName: 'WMS批次锁定导入模版.xlsx',
    filePath: null,
    fileSize: 1024,
    date: '2024-10-10 10:10:10',
    fileUrl: 'https://fs-wh-test.s3.us-west-2.amazonaws.com/webStatic/824203148fcd49c19c01a0073859d5c9',
  },
  {
    fileKey: 'd402750bd0f4483991131fddb36cd419',
    fileName: '2.png',
    filePath: null,
    fileSize: 1024,
    date: '2024-10-10 10:10:10',
    fileUrl: 'https://fs-wh-test.s3.us-west-2.amazonaws.com/webStatic/d402750bd0f4483991131fddb36cd419',
  },
]

function handleChange(v: string[]) {
  console.log('handleChange=>', v)
}
</script>

<template>
  <ExtraFilePanel :column="3" :files="fiels" @change="handleChange" />
</template>

通用s3场景

直接传入key即可，内部处理s3相关业务

附件
自定义
动态获取 
<script setup lang="ts">
import { reactive } from 'vue'
import { ExtraFiles } from '@fs/lib'

const extraInfo = reactive<{ loading: boolean; keys: string[] }>({
  loading: false,
  keys: [],
})
function onVisibleChange(v: boolean) {
  console.log('onVisibleChange=>', v)
  if (extraInfo.loading || extraInfo.keys.length) return
  if (v) {
    extraInfo.loading = true
    // mock fetch
    setTimeout(() => {
      const keys = ['7796585090fe467788c0f6597411f267', 'f16708657df74cf883fe91c7a83ae1f7']
      extraInfo.keys = keys
      extraInfo.loading = false
    }, 1000)
  }
}
</script>

<template>
  <f-space direction="vertical">
    <ExtraFiles
      :column="1"
      :keys="[
        '7796585090fe467788c0f6597411f267',
        'f16708657df74cf883fe91c7a83ae1f7',
        '8951b9e194b94cadb3401eb4f11616f9',
      ]"
      :overlayStyle="{ width: '220px' }"
    />

    <ExtraFiles :column="1" :keys="['7796585090fe467788c0f6597411f267', 'f16708657df74cf883fe91c7a83ae1f7']">
      自定义
    </ExtraFiles>

    <ExtraFiles :column="1" :loading="extraInfo.loading" :keys="extraInfo.keys" @visibleChange="onVisibleChange">
      动态获取
    </ExtraFiles>
  </f-space>
</template>

结合表格场景

<script setup lang="ts">
import { onMounted } from 'vue'
import { message } from '@fs/smart-design'
import { useCommonPage, mockApi } from '@fs/lib'

const { loading, advTable, tableModel } = useCommonPage()

// 表格配置
const tabConfig = {
  title: '仓库管理列表',
  actions: [
    {
      label: '新增',
      type: 'primary',
      icon: 'icon-tianjia2',
      // permission: 'WMS.Function.WarehouseManagementNew',
    },
  ],
  columns: [
    {
      title: '编码',
      dataIndex: 'code',
    },
    {
      title: '名称',
      dataIndex: 'localName',
      customRender: ({ text }: any) => {
        return text?.[`zh_CN`]
      },
    },
    {
      title: '附件',
      key: 'files',
      dataIndex: 'files',
    },
    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      // permission: ['WMS.Function.Edit', 'WMS.Function.Delete'],
    },
  ],
}

const query = () => {
  loading.value = true
  mockApi
    .fetchTableList({
      currPage: tableModel.value.pagination.current,
      pageSize: tableModel.value.pagination.pageSize,
    })
    .then((res: any) => {
      advTable.value?.setDataSource(res?.list ?? [], res?.totalCount ?? 0)
    })
    .finally(() => {
      loading.value = false
    })
}

const handleAction = (action: any) => {
  console.log(action)
  message.info(action.label)
}

const handleRowAction = (id: string) => {
  console.log(id)
  message.info(id)
}

onMounted(() => {
  query()
})
</script>

<template>
  <AdvancedTable
    ref="advTable"
    v-model="tableModel"
    :config="tabConfig"
    :loading="loading"
    :scroll="null"
    @query="query"
    @action="handleAction"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'files'">
        <ExtraFiles
          :column="1"
          :keys="
            Math.random() > 0.3
              ? [
                  '7796585090fe467788c0f6597411f267',
                  'f16708657df74cf883fe91c7a83ae1f7',
                  '8951b9e194b94cadb3401eb4f11616f9',
                ]
              : []
          "
          :overlayStyle="{ width: '220px' }"
        />
      </template>
      <template v-if="column.key === 'operation'">
        <f-space :size="12">
          <!-- v-permission="'WMS.Function.Delete'" -->
          <f-button type="link" @click="handleRowAction(record.id)"> 删除 </f-button>
        </f-space>
      </template>
    </template>
  </AdvancedTable>
</template>

API ​

  • ExtraFilePanel
ts
export interface IExtraFilePanelProps {
  column?: number // 列占位数，默认3
  files?: IExtraFile[] // s3 key 自动逻辑处理 & 普通文件自行处理
}
参数说明类型默认值版本
column列占位数number3-
files文件列表IExtraFile[]--

slot:suffix可用于处理单个文件，或slot:append批处理。

ts
/**
 * 附件文件信息
 */
export interface IExtraFile {
  fileName: string
  fileKey?: string // s3 key
  filePath?: string | null
  fileUrl?: string
  fileSize?: number // bytes
  fileType?: string // Excel | xls | .xls
  date?: string // 时间
}
  • ExtraFiles
ts
export interface IExtraFilesProps {
  loading?: boolean
  column?: number // 列占位数
  keys?: string[] // s3 keys
  popoverProps?: Record<string, any>
}
参数说明类型默认值版本
column列占位数number3-
keyss3 keys 列表string[]--
loading加载状态booleanfalse-
popoverPropspopover属性，见官方文档object--