410 lines
13 KiB
TypeScript
410 lines
13 KiB
TypeScript
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; |