Files
fe_service_ebtp_frontend/src/pages/BidEvaluation/components/simpleUpload.tsx

410 lines
13 KiB
TypeScript
Raw Normal View History

2022-03-10 14:24:13 +08:00
import { btnAuthority } from "@/utils/authority";
import ProTable, { ProColumns } from "@ant-design/pro-table";
import { Button, Card, Col, Input, message, Modal, Row, Spin, } from "antd";
import React, { useEffect, useRef, useState } from "react";
import '@/assets/xsy_style.less';
import { getSupplierList, getSupplierUser } from "@/utils/SupplierList/service";
import { getURLInformation } from "@/utils/CommonUtils";
import { addGys, addMan, deleteGys, getSimpleList } from "./simpleUploadServis";
import ExtendUpload from "@/utils/ExtendUpload";
import { SnowflakeID } from "@/services/untilService";
const SimpleUpload: React.FC<{}> = (props) => {
//=======================================================================state
const [spin, spinSet] = useState(false);
const [data, dataSet] = useState([]);
const roomId = getURLInformation('roomId');
const bsId = getURLInformation('bsId');
const tpId = getURLInformation('tpId');
const dis = getURLInformation('dis') == '3';
//添加供应商
const [addVis, addVisSet] = useState(false);
const [serchVal, serchValSet] = useState('');
const [gysData, gysDataSet] = useState([]);
const [spinGys, spinGysSet] = useState(false);
const serchGysRef = useRef<any>(null)
//选择联系人
const [manVis, manVisSet] = useState(false);
const [companyId, companyIdSet] = useState(false);
const [recordId, recordIdSet] = useState('');
const [spinMan, spinManSet] = useState(false);
//上传文件
const [fileVis, fileVisSet] = useState(false);
const [UploadID, setUploadID] = useState<any>(); //upload 业务id
const [spinUp, spinUpSet] = useState(false);
//查询分页数据
const [pageData, pageDataSet] = useState<any>({
total: 0,
pageNum: 1,
pageSize: 10
});
const columns: ProColumns<any>[] = [
{
title: '序号', valueType: 'index', width: 60
},
{
title: '机构编号', dataIndex: 'companyId',
},
{
title: '供应商', dataIndex: 'companyName',
},
{
title: '联系人', dataIndex: 'bidUserName',
},
{
title: '联系人账号', dataIndex: 'bidUserId',
},
{
title: '应答文件上传状态', dataIndex: 'decryptStatus',
render: (_, record,) => {
if (record.singleSourceAnswerFile != '' && record.singleSourceAnswerFile != null) {
return '已上传'
} else { return '未上传' }
}
},
{
title: '操作', dataIndex: 'option', valueType: 'option',
render: (_, record, index) => {
return (
<>
<Button type='text' hidden={btnAuthority(["ebtp-agency-project-manager", "ebtp-purchase"]) || dis} onClick={() => { manVisSet(true); companyIdSet(record.companyId); recordIdSet(record.id) }}>/</Button>
<Button type='text' hidden={btnAuthority(["ebtp-agency-project-manager", "ebtp-purchase"])} style={{ marginLeft: dis ? 0 : 10 }} onClick={async () => {
recordIdSet(record.id);
if (record.singleSourceAnswerFile) {
setUploadID(record.singleSourceAnswerFile);
} else {
await SnowflakeID().then(res => {
setUploadID(res.id);
});
}
fileVisSet(true);
}}>{dis ? '查看应答文件' : '上传应答文件'}</Button>
<Button type='text' hidden={btnAuthority(["ebtp-agency-project-manager", "ebtp-purchase"]) || dis} style={{ marginLeft: 10 }} onClick={async () => {
spinSet(true);
await deleteGys(record.id).then((res) => {
if (res.success) {
message.success('删除成功!');
}
})
serchList();
}}></Button>
</>
)
}
},
];
const columnsGys: ProColumns<{}>[] = [
{
title: '供应商名称',
dataIndex: 'partnerName',
key: 'partnerName',
align: 'left',
},
{
title: '供应商编号',
dataIndex: 'organizationCode',
key: 'organizationCode',
hideInSearch: true,//列表中显示,查询条件中不显示
align: 'left',
},
{
title: '操作',
dataIndex: 'status',
key: "",
hideInSearch: true,//列表中显示,查询条件中不显示
align: 'left',
render: (_: any, record: any) => (
<Button hidden={btnAuthority(["ebtp-agency-project-manager", "ebtp-purchase"])} onClick={() => chooseGys(record)} type="text"></Button>
)
},
];
const columnsMan: ProColumns<{}>[] = [
{
title: '联系人',
dataIndex: 'empName',
key: 'empName',
align: 'left',
},
{
title: '账号',
dataIndex: 'userAccount',
key: 'userAccount',
search: false,
align: 'left',
},
{
title: '电话',
dataIndex: 'mobile',
key: 'mobile',
search: false,
align: 'left',
},
{
title: '操作',
dataIndex: 'status',
align: 'left',
search: false,
render: (_: any, record: any) => (
<Button onClick={async () => {
spinManSet(true);
await chooseSupplierUser({
id: recordId,
bidUserId: record.userAccount,
bidUserName: record.empName,
});
spinManSet(false);
manVisSet(false);
serchList();
}} type="text"></Button>
)
},
];
//=======================================================================func
useEffect(() => {
serchList();
}, []);
useEffect(() => {
addVis && serchGys();
}, [pageData.pageNum]);
//查询列表
async function serchList() {
spinSet(true);
await getSimpleList(roomId).then((res) => {
if (res.success) {
dataSet(res.data)
}
})
spinSet(false);
}
//查询供应商
async function serchGys() {
spinGysSet(true);
await getSupplierList({ partnerName: serchVal, pageNum: pageData.pageNum }).then((res) => {
if (res.success) {
gysDataSet(res.data.records);
pageDataSet({ ...pageData, total: res.data.total });
if (res.data.records.length == 0) {
message.info('无符合条件的供应商,请确认输入的供应商名称是否正确。')
}
}
})
spinGysSet(false);
}
//选择供应商
async function chooseGys(record: any) {
spinGysSet(true);
const params = {
companyId: record.partnerMdmCode,
companyName: record.partnerName,
assessRoomId: roomId,
packageId: bsId,
projectId: tpId,
}
await addGys(params).then((res) => {
if (res.success) {
message.success('选择供应商成功,请选择邀请账号。');
addVisSet(false);
serchList();
}
});
addVisSet(false);
spinGysSet(false);
}
/*选择供应商联系人*/
const chooseSupplierUser = async (param: any) => {
await addMan(param).then(res => {
if (res.code == 200) {
message.success("保存成功");
}
})
}
//=======================================================================dom
function addModal() {
return (
<Modal
visible={addVis}
style={{ overflowX: 'hidden', position: 'relative', }}
bodyStyle={{ maxHeight: "700px", overflowY: 'auto', overflowX: 'hidden' }}
width={gysData.length != 0 ? 1000 : 500}
centered
destroyOnClose
maskClosable={false}
title="选择供应商"
footer={gysData.length != 0 ? renderFooter() : null}
onCancel={() => {
addVisSet(false);
pageDataSet({ total: 0, pageNum: 1, pageSize: 10 });
}}
>
<Spin spinning={spinGys}>
<Row justify={gysData.length != 0 ? 'end' : 'center'}>
<Col flex='350px'>
<Input ref={serchGysRef} value={serchVal} onChange={(e) => { serchValSet(e.target.value) }} onPressEnter={() => serchGys()} placeholder='请输入要查询的供应商名称' />
</Col>
<Col>
<Button type='primary' style={{ marginLeft: '5px' }} hidden={btnAuthority(["ebtp-agency-project-manager", "ebtp-purchase"])} onClick={() => serchGys()}>
</Button>
</Col>
</Row>
{
gysData.length != 0 &&
<ProTable
options={false}
search={false}
size="small"
style={{ marginTop: '16px' }}
columns={columnsGys}
dataSource={gysData}
pagination={{
defaultPageSize: 10,
total: pageData.total,
showSizeChanger: false,
onChange: (page, pageSize) => pageDataSet({ ...pageData, pageNum: page, pageSize: pageSize }),
onShowSizeChange: (current, size) => pageDataSet({ ...pageData, pageNum: current, pageSize: size }),
}}
/>
}
</Spin>
</Modal>
)
}
function renderFooter() {
return (
<>
<Button type='primary' onClick={() => {
addVisSet(false);
manVisSet(false);
fileVisSet(false);
pageDataSet({ total: 0, pageNum: 1, pageSize: 10 });
}}></Button>
</>
)
}
function renderFooterUp() {
return (
<>
<Button type='primary' loading={spinUp} onClick={async () => {
spinUpSet(true);
await chooseSupplierUser({ id: recordId, singleSourceAnswerFile: UploadID });
spinUpSet(false);
fileVisSet(false);
serchList();
}}></Button>
</>
)
}
//联系人modal
function chooseMan() {
return (
<Modal
visible={manVis}
style={{ overflowX: 'hidden', position: 'relative', }}
bodyStyle={{ maxHeight: "700px", overflowY: 'auto', overflowX: 'hidden' }}
width={1000}
centered
destroyOnClose
maskClosable={false}
title="选择联系人"
footer={renderFooter()}
onCancel={() => {
manVisSet(false);
pageDataSet({ total: 0, pageNum: 1, pageSize: 10 });
}}
>
<Spin spinning={spinMan}>
<ProTable
options={false}
size="small"
style={{ marginTop: '16px' }}
columns={columnsMan}
request={async (params) => {
const msg = await getSupplierUser({
...params, partnerMdmCode: companyId, pageNum: params.current, pageSize: params.pageSize,
});
return {
data: msg.data?.records, success: msg?.success, total: msg?.data.total,
}
}}
pagination={{
defaultPageSize: 10,
showSizeChanger: false,
}}
/>
</Spin>
</Modal>
)
}
//上传文件
function uploadFile() {
return (
<Modal
visible={fileVis}
style={{ overflowX: 'hidden', position: 'relative', }}
bodyStyle={{ maxHeight: "700px", overflowY: 'auto', overflowX: 'hidden' }}
width={500}
centered
destroyOnClose
maskClosable={false}
title="上传应答文件"
footer={dis ? renderFooter() : renderFooterUp()}
onCancel={() => fileVisSet(false)}
>
<Spin spinning={spinUp}>
<Row align="middle">
<Col span={4}>:</Col>
<Col span={14}>
<ExtendUpload
uploadProps={{ name: "file", disabled: dis }}
maxCount={1}
bid={UploadID}
/>
</Col>
</Row>
<Row align="bottom" style={{ marginTop: 10 }}>
<Col offset={4}> (30MB)</Col>
</Row>
</Spin>
</Modal>
)
}
return (
<Card>
<Spin spinning={spin}>
<div className='xsy-headerDiv'>
<h3 className="first-title floatLeft"></h3>
<div className='xsy-rightDiv'>
<Button
type='primary'
disabled={data.length != 0 || spin}
hidden={btnAuthority(["ebtp-agency-project-manager", "ebtp-purchase"])}
style={{ marginLeft: '10px' }}
onClick={() => {
addVisSet(true);
setTimeout(() => {
serchGysRef.current!.focus({ cursor: serchVal == '' ? 'start' : 'all' });
}, 100);
}}
></Button>
<Button style={{ marginLeft: '10px' }} onClick={() => { history.back() }}></Button>
</div>
</div>
<ProTable
options={false}
search={false}
size="small"
columns={columns}
dataSource={data}
pagination={false}
/>
</Spin>
{addModal()}
{chooseMan()}
{uploadFile()}
</Card>
)
}
export default SimpleUpload;