npm应用方式

1、安装

npm i classification-upload-file --save

2、引入

import ClassificationUploadFile from 'classification-upload-file';

3、使用

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

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: () => [],
},

三、具体使用

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"
                          ......
                          />

classification-upload-file

npm应用方式

1、安装

2、引入

3、使用

4、修改源文件注意点：

参数及效果图

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

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

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

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

二、组件参数

1、componentsType

2、isFinish

3、uploadFileFormat

4、wtiBlockName

5、labelWidth

6、labelPosition

8、allowableFileType

10、mustUploadFileClassificationCode 必须上传的分类code

11、isNeedBlock 是否需要外包围

12、showFoldBoxBtn 展开收起按钮展示

13、businessStructureData 业务结构数据

14、businessFileListFlag 是否从业务取文件

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

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

17、needBusinessStash 是否需要业务暂存

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

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

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

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

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

23、isNeedBlockLine 外包围的线条

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

25、bParentId 树根节点code

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

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

三、具体使用

1、父组件获取组件信息

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

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

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

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

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

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

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

Weekly Downloads