p-file-module

唐皓晨大约 8 分钟

p-file-module

破产案件一体化管理平台附件模块

特性

使用 v-model 绑定附件列表
支持使用卷宗上传功能
支持附件批量下载
支持附件预览功能
支持使用缩略图展示附件列表

安装和引入

组件为破产业务组件，组件置于 components/common 目录下，使用时直接引用

import PFileModule from "@/components/common/FileModule";

export default {
  components: { PFileModule },
};

使用

基础使用

<template>
  <div>
    <p-file-module v-model="fileList" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      fileList: [],
    };
  },
};
</script>

仅展示附件列表

设置 onlyShow 为 true 时，仅展示附件列表，不显示编辑相关按钮

<template>
  <div>
    <p-file-module v-model="fileList" onlyShow />
  </div>
</template>
<script>
export default {
  data() {
    return {
      fileList: [
        {
          fileName: "需求2022-17637.txt",
          fileFormat: "txt",
          filePath: "/zsfw/2023-04-26/b637b4ad9d154928b2c1c426cad72ca8.txt",
        },
      ],
    };
  },
};
</script>

仅显示上传按钮

设置 onlyUpload 为 true 时，仅显示上传附件按钮，不显示制作文书和选择已有文书

<template>
  <div>
    <p-file-module v-model="fileList" onlyUpload />
  </div>
</template>
<script>
export default {
  data() {
    return {
      fileList: [],
    };
  },
};
</script>

批量下载

设置 batchDownload 为 true 时，在附件展示时，显示批量下载按钮，点击后打包下载所有附件

<template>
  <div>
    <p-file-module v-model="fileList" onlyShow batchDownload />
  </div>
</template>
<script>
export default {
  data() {
    return {
      fileList: [
        {
          replyFileName: "债权人(个人)信息模板 (3).xls",
          fileFormat: "xls",
          filePath: "/zsfw/2022-08-17/161277f2662b4573ac5bac104f2ced91.xls",
        },
        {
          replyFileName: "资产导入(1).xlsx",
          fileFormat: "xlsx",
          filePath: "/zsfw/2022-08-17/723178fa9866488d82ffa80111d05c6f.xlsx",
        },
      ],
    };
  },
};
</script>

卷宗上传

设置 userDossierUpload 为 true 时，在点击上传附件时，打开卷宗上传页面，并可通过 yjml 配置卷宗上传默认目录

注意事项

使用卷宗上传时需要传入 ahdm

<template>
  <div>
    <p-file-module v-model="fileList" :ahdm="ahdm" userDossierUpload />
  </div>
</template>
<script>
export default {
  data() {
    return {
      ahdm: '123123';
      fileList: [],
    };
  },
};
</script>

附件预览

设置 viewFile 为 true 时，在查看附件时点击附件名称即可预览附件

<template>
  <div>
    <p-file-module v-model="fileList" onlyShow viewFile />
  </div>
</template>
<script>
export default {
  data() {
    return {
      fileList: [
        {
          fileName: "需求2022-17637.txt",
          fileFormat: "txt",
          filePath: "/zsfw/2023-04-26/b637b4ad9d154928b2c1c426cad72ca8.txt",
        },
      ],
    };
  },
};
</script>

图片预览

设置 preview 为 true 时，在上传附件为图片时，使用图片预览

<template>
  <div>
    <p-file-module v-model="fileList" preview />
  </div>
</template>
<script>
export default {
  data() {
    return {
      fileList: [
        {
          fileName: "需求2022-17637.txt",
          fileFormat: "txt",
          filePath: "/zsfw/2023-04-26/b637b4ad9d154928b2c1c426cad72ca8.txt",
        },
      ],
    };
  },
};
</script>

API

p-file-module 属性

参数	类型	默认值	说明
v-model	number/string	-	绑定值
ahdm	string	-	使用卷宗上传时需要
onlyShow	string	false	是否仅展示附件（不显示操作按钮）
onlyUpload	string	false	是否仅显示上传按钮
checkList	string	详见 config.json/uploadFileType	支持上传附件的类型
maxSize	string	详见 config.json/uploadFileSize	支持上传附件的大小（M）
isChoicePaper	string	true	是否显示选择已有文书按钮
isWriting	string	false	是否显示制作文书按钮
batchDownload	string	false	是否支持批量下载
userDossierUpload	string	false	是否调用卷宗上传页面（是否入卷）
yjml	string	'1'	卷宗上传默认目录
disabled	string	false	是否禁用操作按钮
typeName	string	-	制作文书相关参数
multiple	string	true	是否支持批量上传附件
viewFile	string	false	是否开启附件预览
preview	string	false	是否使用图片附件预览
abbreviation	string	false	查看附件列表是否使用缩略图

p-file-module 事件

事件名称	说明	回调参数
befor-upload	附件上传前置回调	-
upload-err	上传错误回调	-
delete-file	附件删除回调	deleteFile：删除的附件，fileList：删除前的附件列表
change	附件列表发生变更	files：变更后的附件列表