npm应用方式

1、安装

npm i @wti-frontend/classification-upload-file --save

2、引入

import ClassificationUploadFile from '@wti-frontend/classification-upload-file';

3、使用

// 需要将ClassificationUploadFile的注册，放到http的注册之后
// 因为npm包内部会对$ajax进行合并
Vue.use(ClassificationUploadFile, {
    tokenField: 'wti-manager-token',
    baseURL,
    fromCode: '100010'
});

4、修改源文件注意点：

/Users/liangchenyang/Documents/WtiWork/classification_upload_file/package/components/upload_brick/single_classification.vue 此文件中generateAxios需要修改为$generateAxios

this.$generateAxios({
    method: 'post',
    url: '/project-front-end/document/documentInfo/upload/file_new',
    data: formData,
    headers: {
        'Content-Type': 'application/form-data',
    },
    timeout: 600000,
    onUploadProgress (progress) {
        shamFile.progressLength = Math.round(progress.loaded / progress.total * 100);
    },
})

参数及效果图

一、组件大类(根据componentsType区分)

1、综合性组件（comprehensive, 根据isFinish区分是回显还是可操作）

综合性组件指的是包含：单选框、文本域、上传文件、回显文件

2、纯上传组件（pureUpload，并且isFinish为false）

仅针对添加分类后上传文件

3、纯回显组件（pureUpload，并且isFinish为true）

对应第二种纯上传组件的已完成状态

二、组件参数

1、componentsType

• type：string
• 非必填
• 默认值：pureExhibition
• 使用范围：通用
• 取值：

comprehensive：综合性组件

pureUpload：纯上传组件

2、isFinish

• type：Boolean
• 非必填
• 默认值：false
• 使用范围：通用
• 取值：

true：组件会展示为回显的样式

false：组件会展示为录入的样式

3、uploadFileFormat

• type: String

• 必填

• 默认值：{}

• 使用范围：通用

• 示例：

• {
      urlUserId: '17719514031',
      urlBizId: '2021-016-001',
      urlOriginKey: '1546654724466556928',
  };

4、wtiBlockName

• type: String
• 非必填
• 默认值：项目审查报告及批复
• 使用范围：仅支持综合性组件

5、labelWidth

• type: String
• 非必填
• 默认值：150px
• 使用范围：仅支持综合性组件

6、labelPosition

• type: String
• 非必填
• 默认值：right
• 使用范围：仅支持综合性组件

8、allowableFileType

• type: Array
• 非必填

默认值：[ 'png', 'jpg', 'jpeg', 'pdf', 'doc', 'docx', 'dotx', 'xls', 'xlsx', 'xltx', 'txt', 'mp3', 'wav', 'wma', 'mp4', 'md', 'csv', 'rar', 'zip', 'xlsm', 'json' ] ;

• 使用范围：上传组件

// 允许上传的文件类型
allowableFileType: {
    type: Array,
    default: () => {
        return [ 'png', 'jpg', 'jpeg', 'pdf', 'doc', 'docx', 'dotx', 'xls', 'xlsx', 'xltx', 'txt', 'mp3', 'wav', 'wma', 'mp4', 'md', 'csv', 'rar', 'zip', 'xlsm', 'json' ];
    },
},

10、mustUploadFileClassificationCode 必须上传的分类code

• type: Array
• 非必填
• 默认值：[]
• 适用范围：上传组件

// 必须上传的分类code
[ 'DOCA0101' ]

11、isNeedBlock 是否需要外包围

• type: Boolean
• 非必填
• 默认值：true
• 适用范围：纯上传对应的回显组件
• 当值为false时，无“必传附件”及“非必传附件”包围，并且批量下载在分类上
• 当值为true时，有“必传附件”及“非必传附件”包围，并且批量下载在“包围”上

12、showFoldBoxBtn 展开收起按钮展示

• type: Boolean
• 非必填
• 默认值：true
• 适用范围：isFinish为false时的综合性组件

13、businessStructureData 业务结构数据

• type: JSON String
• 非必填
• 默认值：''
• 使用范围：综合性组件

14、businessFileListFlag 是否从业务取文件

• type: Boolean
• 非必填
• 默认值：true
• 适用范围：纯上传类型

15、businessFileList 业务传进来的文件列表(一般是要素的附件回显)

• type: Array
• 非必填
• 默认值：[]
• 适用范围：纯上传类型

16、wholeRequiredFlag 控制整体的是否必填

• type: Boolean
• 非必填
• 默认值：true
• 适用范围：综合型的组件

17、needBusinessStash 是否需要业务暂存

• type: Boolean
• 非必填
• 默认值：false
• 适用范围：全部

18、differenceExt 当一个页面有多个上传组件时，通过differenceExt区分到底哪些附件是属于哪个组件的

• type: String
• 非必填
• 默认值：''
• 适用范围：纯上传组件

// 当一个页面有多个上传组件时，通过differenceExt区分到底哪些附件是属于哪个组件的
<classification-upload-file differenceExt="right" ref="fileHandle" />
// 此时组件会在上传文件时将“right”作为ext字段取值附着在文件信息中
// 当组件要回显时，会自动根据differenceExt的值去做过滤操作

19、allowableClassifyList 允许的分类集合（如果你只想在下拉选中选某一个，或某几个分类时）

• type: Array
• 非必填
• 默认值：[]
• 适用范围：纯上传组件

<classification-upload-file allowableClassifyList="['DOCM07', 'DOCP02']" ref="fileHandle" />
// 组件会根据allowableClassifyList的值渲染出过滤后的下拉列表
// TODO: 特别注意：allowableClassifyList 中的每一项都必须是叶子节点
// TODO: 特别注意：allowableClassifyList 和 filterOptionsCodeArr 为互斥关系

20、filterOptionsCodeArr 要过滤掉的分类选项

• type: Array
• 非必填
• 默认值：[]
• 适用范围：纯上传组件

<classification-upload-file filterOptionsCodeArr="['DOCM07', 'DOCP02']" ref="fileHandle" />
// 组件会根据filterOptionsCodeArr的值渲染出过滤后的下拉列表
// TODO: 特别注意：allowableClassifyList 和 filterOptionsCodeArr 为互斥关系

21、allowableClassificationAmount 允许选择的分类数量（仅针对非必传附件，不限制必传附件及必传和非必传之和）

• type: Number
• 非必填
• 默认值：-1（当值小于0时，不限制分类数量，否则按照用户传递的number值限制）
• 适用范围：纯上传组件

22、customizationClassificationFileType 允许定制化每种分类可上传的文件类型

• type: Object
• 非必填
• 默认值: {}
• 适用范围：全部

23、isNeedBlockLine 外包围的线条

• type: Boolean
• 非必填
• 默认值：true
• 适用范围：全部

// 示例
customizationClassificationFileType = {
    'DOCC02': [ 'pdf', 'doc', 'md' ],
    'DOCC01': [ 'pdf' ],
}

24、needRemoveCentreCode 有一些顶层的中心分类是不要的

// 需要移除的中心code
needRemoveCentreCode: {
    type: Array,
    default: () => {
        return [ '90000001', '90000002', '90000003', '90000004', '90000005' ]
    }
},

25、bParentId 树根节点code

bParentId: {
    type: String,
    default: '0'
},

26、echoDeleteFile 作为回显组件时文件是否可以被删除

echoDeleteFile: {
    type: Boolean,
    default: false
},

27、cannotBeDeletedFiles 作为上传组件时，不能被删除的文件的id列表

cannotBeDeletedFiles: {
    type: Array,
    default: () => [],
},

28、fromCode 全局安装配置——fromCode，表示文件所在的中心

Vue.use(ClassificationUploadFile, {
  tokenField: 'wti-manager-token',
  baseURL,
  fromCode: '10001100',
});
// fromCode：文件属于哪个中心
// 项目中心：10001100
// 交易中心：10001200
// 产品中心：10001300
// 清算中心：10001400
// 客户中心：10001500
// 代销中心：10001600
// 财富中心：10001700
// 内容中心：10001800
// 运营中心：10001900
// 投资中心：10002000
// 营销中心：10002100
// 合同中心：10002200
// devops：10002201
// 票据中心：10002300

29、customizationFromCode，组件参数：取值同全局配置的fromCode，优先级大于全局fromCode

30、acquiescentFileSiz，上传及下载所支持的文件大小，type：Number，默认值1000

acquiescentFileSiz: {
	type: Number,
    default: 1000
}

31、

• 新增：s3Config，type：object；现有属性：topDirectory: 'wti-document', owner: 'YTH', bucket: 'pub'

// 后端S3存储配置
// 业务层可进行选配，在组件内部调用时，如果某个键没有在业务层配置时定义，组件也会自动添加默认值！
s3Config: {
    type: Object,
    default: ()=>{
        return {
            topDirectory: 'wti-document',
            owner: 'YTH',
            bucket: 'pub'
        };
    }
},

• fix：组件内提示支持文件大小同步使用控制字段acquiescentFileSize

32、

• 统一分类定制化配置字段：fileClassificationCustomizationConfig
• 新增支持文件分类指定上传数量

const fileClassificationCustomizationConfig = {
    'DOCA0101': {
        limit: 2
    },
    'DOCA0102': {
        limit: 8
    }
}

33、

• 新增附件任意必填：anyIsRequired默认false（当为true时，不设置必传分类时也可进行文件必填校验，与必传分类互斥）
• @getEchoResidueFiles 支持上传（上传、删除、删除分类）监听文件更新，实时获取所有文件数据

34、

• 作为回显组件时，添加文件删除功能（echoDeleteFile: 默认false）
• 作为回显组件时，添加删除文件告知业务层剩余文件信息方法（绑定方法：getEchoResidueFiles）
• 作为上传组件时，添加不能被删除的文件的id列表——将隐藏删除按钮（字段名：cannotBeDeletedFiles，默认空数组）
• 修改ext匹配规则（完全匹配改为以指定字符串开始匹配）

<ClassificationUploadFile ref="fileHandle" components-type="pureUpload"
                          :echo-delete-file="true"
                          :cannot-be-deleted-files="[ '1666697709240954880' ]"
                          @getEchoResidueFiles="getEchoResidueFiles"
                          ......
                          />

35、

• 添加事件发送：fileComponentMounted，告知使用者文件组件已经被挂载完成（特殊情况使用，如：wti-form动态修改配置）
• 添加参数：
  • otherModuleName: 默认值空，在录入时非必传附件模块展示为"上传附件"，在详情时展示为"非必传附件"
  • beCheckedModuleName：默认值为"必传附件"

三、具体使用

1、父组件获取组件信息

import ClassificationUploadFile from 'xxxxx/classification_upload_file'

<classification-upload-file xxxx xxx ref="fileHandle" />

this.$refs.fileHandle.validateForm().then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})


纯上传组件不校验获取数据
const fileData = this.$refs.fileHandle.getPureUploadFileData()

2、没有originalKey等上传附件必须的信息时需要暂存获取

• 为组件绑定方法 temporaryStorageBusinessData 调用暂存方法
• 在绑定的暂存方法中接收一个回调函数 cab
• 当请求成功后：给组件传参赋值，并且调用 cab(true)
• 当请求失败时：cab(false)
• 示例：

<classification-upload-file ref="fileHandle" components-type="pureUpload" must-upload-file-classification-code="DOCA0101" :upload-file-format="sumLoading" @temporaryStorageBusinessData="temporaryStorageBusinessData"/>

// 文件上传组件内部调用业务的暂存
temporaryStorageBusinessData (cab) {
    // temporaryStorageBusinessDataFlag：保证调用暂存时，多个文件只会触发一次暂存
    if (!this.temporaryStorageBusinessDataFlag) {
        this.temporaryStorageBusinessDataFlag = true;
        this.stash(cab);
    } else {
        // 因为存在多选文件，要进行回调收集
        this.cabArr.push(cab);
    }
},

stash (cab){
    ...请求.then(res=>{
            if (res.code === 200) {
                this.sumLoading.urlOriginKey = res.data.originalKey
                this.sumLoading.urlBizId = res.data.businessId
                if (cab) {
                    this.cabArr.forEach(cabItem=>{
                        cabItem(true);
                    });
                    cab(true);
                    this.cabArr = [];
                }
            } else {
                if (cab) {
                    this.cabArr.forEach(cabItem=>{
                        cabItem(false);
                    });
                    cab(false);
                    this.cabArr = [];
                    this.temporaryStorageBusinessDataFlag = false;
                }
            }
        };
    }).catch(()=>{
        if (cab) {
            this.cabArr.forEach(cabItem=>{
                cabItem(false);
            });
            cab(false);
            this.cabArr = [];
            this.temporaryStorageBusinessDataFlag = false;
        }
    })
}

3、组件内获取到综合性组件的数据后回显页面

// 获取到结构数据后要手动调用处理方法去组织数据
this.$nextTick(() => {
    this.$refs.fileHandlePureUpload.handleDocStructureAndData();
});

4、纯上传/回显 时，从业务获取文件信息后的处理

// 在获取到业务数据中的fileList后
// 手动调用组件内部 componentGetFileData 方法组织数据
// 获取到文件后要手动调用处理方法
this.$nextTick(() => {
    this.$refs.fileHandlePureUpload.componentGetFileData();
});

5、综合性组件时，根据条件动态设置结构的某个属性值

// parentId（moduleId）, childId（cocumentId）, key（键）, value（值）

this.$refs.fileHandleBlock.setStructureConfig('QUICK-1', 'QUICK-1-1', 'isRequired', '0');


// 当修改的是某个附件区域的可编辑状态时，需要传递formKey, formNewVal, formOldVal
// formKey：字段key--指的是哪个key的值在控制动态设置结构
// formNewVal：对应的formKey的改变后的值
// formOldVal：对应的formKey的改变之前的值
// 并且需要给组件提供一个修改formKey的方法

<classification-upload-file ref="fileHandleBlock" @classificationSetRuleForm="setRuleForm" :doc-framework-data-params="docFrameworkDataParams" components-type="comprehensive" :function-code="functionCode" :upload-file-format="sumLoadingTop"/>

// 修改formKey的方法
setRuleForm (key, value) {
    console.log(key, value);
    this.$set(this.$refs.reviewForm.ruleForm, key, value);
}


// 根据值动态设置
valueChange (value, key, oldVal) {
    if (key === 'argument') {
        if (value === '0') {
            this.$refs.fileHandleBlock.setStructureConfig('QUICK-3', 'QUICK-3-1', 'isEditable', '1', key ,value, oldVal);
        } else {
            // 只有在改变可编辑的状态时，才需要传 value, oldVal
            this.$refs.fileHandleBlock.setStructureConfig('QUICK-3', 'QUICK-3-1', 'isEditable', '0', key ,value, oldVal);
        }
    } else if (key === 'inquiry' && this.functionCode==='200956') {
        if (value === '1') {
            this.$refs.fileHandleBlock.setStructureConfig('QUICK-1', 'QUICK-1-1', 'isRequired', '1');
        } else {
            this.$refs.fileHandleBlock.setStructureConfig('QUICK-1', 'QUICK-1-1', 'isRequired', '0');
        }
    }
}



// 在绑定formKey时，不能使用v-model进行绑定，否则会有一些bug出现
// 需要使用 :value 结合 @input 的方式

// 绑定值示例
<el-radio-group v-if="item.type === 'radio'"
                :value="ruleForm[item.key]"
                :disabled="item.disabled ? item.disabled : isDisabled"
                @input="(v)=>radioChange(item.key, v, ruleForm[item.key])">
    <el-radio v-for="(opt, i) in item.options"
              :label="opt.value" :key="i">
        {{ opt.label }}
        <el-tooltip placement="top">
            <div slot="content">如【是否指定驳回节点】选择【否】，提交后，流程会默认驳回至上一个节点</div>
            <img v-if="opt.label==='否' && item.label==='是否指定驳回节点'"
                 style="margin-left: .5rem; position: relative;
                 top: 3px;" src="./ask.png" alt="问号"/>
        </el-tooltip>
    </el-radio>
</el-radio-group>

// nextTickArr：控制附件是否可编辑的值对应的key数组
radioChange (key, newVal, oldVal) {
    if (!this.nextTickArr.includes(key)) {
        this.$set(this.ruleForm, key, newVal);
    }
    if(key==='conditions'){
        this.radioyChange(key,newVal);
    }
    this.valueChange(newVal, key, oldVal);
    this.clearData(key);
},


// 以上代码来自项目审查页面，可参考它

6、getEchoResidueFiles 获取回显组件当前剩余的文件

<ClassificationUploadFile ref="fileHandle" components-type="pureUpload"
                          :echo-delete-file="true"
                          :cannot-be-deleted-files="[ '1666697709240954880' ]"
                          @getEchoResidueFiles="getEchoResidueFiles"
                          ......
                          />