/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-08 11:05:09
|
* @LastEditTime: 2022-11-23 18:03:31
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 案件材料上传
|
*/
|
import React from 'react';
|
import PropTypes from 'prop-types';
|
import { Col, Row } from 'antd';
|
import { CheckOutlined } from '@ant-design/icons';
|
import MyUpload from '../../MyUpload';
|
import FilesTable from '../../FilesTable';
|
|
/**
|
* materialTabs, // 材料arr
|
* materialActive, // 选中材料
|
* caseId, // 案件编号
|
* fileInfoList, // 案件附件
|
* setFormDataFiles, // 设置案件完善的附件table 数据
|
* handleChangeTab, // 切换材料
|
*/
|
const MaterialEdit = ({ materialTabs, materialActive, caseId, fileInfoList, setFormDataFiles, handleChangeTab }) => {
|
let files = fileInfoList?.filter((item) => item.ownerType === materialTabs[materialActive].value)[0]?.fileList || [];
|
|
return (
|
<Row gutter={[16, 16]}>
|
{[...materialTabs].splice(1).map((x, t) => {
|
return (
|
<Col span={8} key={t}>
|
<div
|
onClick={() => handleChangeTab(x, t + 1)}
|
className={`casePerfection-cardTab-tab ${t === materialActive - 1 && 'casePerfection-cardTab-tabActive'}`}
|
>
|
<img src={t === materialActive - 1 ? x.iconActive : x.icon} alt="" />
|
<div className="casePerfection-cardTab-tab-name">{x.label}</div>
|
{t === materialActive - 1 && (
|
<>
|
<div className="casePerfection-cardTab-tab-triangle" />
|
<CheckOutlined className="casePerfection-cardTab-tab-check" />
|
</>
|
)}
|
</div>
|
</Col>
|
);
|
})}
|
<Col span={24}>
|
<h5>已上传材料</h5>
|
<FilesTable
|
isList={true}
|
data={files}
|
description={'尚未上传' + materialTabs[materialActive].label}
|
handleSuccessDelFile={(value) => setFormDataFiles('delete', materialTabs[materialActive].value, materialTabs[materialActive].label, value)}
|
/>
|
</Col>
|
<Col span={24}>
|
<h5>材料上传</h5>
|
<MyUpload
|
fileId={caseId}
|
fileType={materialTabs[materialActive].value}
|
showFileList={false}
|
fileList={files}
|
handleChangeFile={(type, info, apiResult) => {
|
if (type === 'success') {
|
setFormDataFiles('success', materialTabs[materialActive].value, materialTabs[materialActive].label, info.fileList);
|
}
|
}}
|
/>
|
</Col>
|
{/* TODO:材料自动合并功能暂无<Col span={24}>
|
<h5>
|
材料自动合并
|
<Switch size="small" style={{ marginLeft: '8px' }} checked={mergeVisible} onClick={(checked) => setMergeVisible(checked)} />
|
</h5>
|
<div className="casePerfection-material-text">
|
{mergeVisible ? (
|
<span>
|
已帮您开启上传材料自动合并功能。您可上传前缀名称相同的材料图片，如：送达地址确认书-1.png，送达地址确认书-2.png，系统将自动为您合并为：送达地址确认书。
|
</span>
|
) : (
|
<span>您已关闭材料自动合并功能，系统将不会对您上传同类材料自动整理与合并，仅显示材料上传的初始状态。</span>
|
)}
|
</div>
|
</Col> */}
|
</Row>
|
);
|
};
|
|
MaterialEdit.propTypes = {
|
materialTabs: PropTypes.array,
|
materialActive: PropTypes.number,
|
caseId: PropTypes.string,
|
fileInfoList: PropTypes.any,
|
setFormDataFiles: PropTypes.func,
|
handleChangeTab: PropTypes.func,
|
};
|
|
export default MaterialEdit;
|
