Skip to content
On this page

附件文件类型字段

字段类型 file

vue
<script setup lang="ts">
// 配置
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  formFields: [
    {
      groupCode: "baseForm",
      fieldLabel: "附件文件",
      fieldLabelI18nKey: "i18n_field_Attachment",
      fieldType: "file",
      // 删除后回调事件
      deleteCallBack: ({ payload }) => {
        // payload.value.row.value.fileName = "";
        // payload.value.row.value.filePath = "";
        // payload.value.row.value.fileId = "";
      },
      // 默认值可以不配置
      extend: {
        handleBefore: ({
          pageData,
          row,
          rowIndex,
        }: {
          pageData: RecordString;
          row: RecordString;
          rowIndex: number;
        }) => {
          return new Promise((reactive, reject) => {
            console.log(pageData, row, rowIndex);
            if (pageData.id) {
              reactive(true);
            } else {
              reject("请先保存!");
            }
          });
        },
        // 需要上传的附件数量,默认为 1
        maxNumber: 1,
        // 控制附件的下载、预览、删除按钮显示,默认显示全部
        operationBtn: ["download", "preview", "delete"],
        // 上传附件时添加默认参数
        params: {},
      },
    },
  ],
});
</script>
vue
<script setup lang="ts">
// 配置
const options = reactive<Partial<GlobalPageLayoutTypes.EditPageLayoutProps>>({
  itemColumns: [
    {
      groupCode: "",
      title: "附件文件",
      fieldLabelI18nKey: "i18n_field_Attachment",
      fieldType: "file",
      // 删除后回调事件
      deleteCallBack: ({ payload }) => {
        // payload.value.row.fileName = "";
        // payload.value.row.filePath = "";
        // payload.value.row.fileId = "";
      },
      callback: function (Vxe, args) {
        // 行附件上传成功回调函数
        const { fileData, row } = args;
        if (!fileData) return;
        row["storageLocationNumber"] = fileData[0]["fileName"];
      },
      // 默认值可以不配置
      extend: {
        url: "", // 默认可不填
        handleBefore: ({
          pageData,
          row,
          rowIndex,
        }: {
          pageData: RecordString;
          row: RecordString;
          rowIndex: number;
        }) => {
          return new Promise((reactive, reject) => {
            console.log(pageData, row, rowIndex);
            if (pageData.id) {
              reactive(true);
            } else {
              reject("请先保存!");
            }
          });
        },
        // 需要上传的附件数量,默认为 1
        maxNumber: 1,
        // 控制附件的下载、预览、删除按钮显示,默认显示全部
        operationBtn: ["download", "preview", "delete"],
        // 上传附件时添加默认参数
        params: {},
      },
    },
  ],
});
</script>

业务模板配置行内附件上传

vue
<script setup lang="ts">
// 1、字段类型选择——行附件上传;
// PC 绑定函数
function (Vxe, args) {
  console.log(args)
  const {fileData, row} = args
  if (!fileData) return
  row['storageLocationNumber'] = fileData[0]['fileName']
}

// 扩展
{
  url: '', // 默认可不填
  handleBefore: ({
    pageData,
    row,
    rowIndex,
  }: {
    pageData: RecordString;
    row: RecordString;
    rowIndex: number;
  }) => {
    return new Promise((reactive, reject) => {
      console.log(pageData, row, rowIndex);
      if (pageData.id) {
        reactive(true);
      } else {
        reject("请先保存!");
      }
    });
  },
  deleteCallBack: (args) => { // 附件删除成功回调函数
    const { payload } = args
    payload.value.row['storageLocationNumber'] = ''
  },
  maxNumber: 1, // 默认行内可以上传一张附件
  operationBtn: ['download', 'preview', 'delete'], // 下载 、 预览、删除  按钮配置
  // 上传附件时添加默认参数
  params: {},
}
</script>