12-23-上传master
This commit is contained in:
xingsy
350
src/pages/Tender/ProjectsInvolved/index.tsx
Normal file
350
src/pages/Tender/ProjectsInvolved/index.tsx
Normal file
@ -0,0 +1,350 @@
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { Button, Tabs, Form, Input, Modal, Space, Checkbox, message, PageHeader } from 'antd';
|
||||
import ProTable, { ActionType } from '@ant-design/pro-table';
|
||||
import { queryingPagingData } from '@/utils/PageUtils';
|
||||
import { personListItem } from './data';
|
||||
import { getSection, exitProject, changePerson } from './service';
|
||||
import '@/assets/ld_style.less';
|
||||
import { Link } from 'umi';
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
const { Search } = Input;
|
||||
const { TextArea } = Input;
|
||||
const CheckboxGroup = Checkbox.Group;
|
||||
|
||||
const formItemLayout = {
|
||||
labelCol: { span: 6 },
|
||||
wrapperCol: { span: 14 },
|
||||
};
|
||||
|
||||
const personData: personListItem[] = [
|
||||
{
|
||||
name: '刘德华',
|
||||
loginNum: 'sfsddfd',
|
||||
phone: '13625141412',
|
||||
email: 'sdsf@123.com',
|
||||
}, {
|
||||
name: '刘德华',
|
||||
loginNum: 'sfsddfd',
|
||||
phone: '13625141412',
|
||||
email: 'sdsf@123.com',
|
||||
}, {
|
||||
name: '刘德华',
|
||||
loginNum: 'sfsddfd',
|
||||
phone: '13625141412',
|
||||
email: 'sdsf@123.com',
|
||||
}, {
|
||||
name: '刘德华',
|
||||
loginNum: 'sfsddfd',
|
||||
phone: '13625141412',
|
||||
email: 'sdsf@123.com',
|
||||
},
|
||||
]
|
||||
|
||||
const plainOptions: any[] = [];
|
||||
const defaultCheckedList: any[] = [];
|
||||
|
||||
const Index: React.FC<{}> = () => {
|
||||
const [personList] = useState(personData); // 负责人列表
|
||||
const [plainList, setPlainList] = useState(plainOptions); // 选择标段
|
||||
const [quitVisible, setQuitVisible] = useState<boolean>(false); // 退出项目弹窗按钮
|
||||
const [personVisible, setPersonVisible] = useState<boolean>(false); // 修改负责人弹窗按钮
|
||||
const [indeterminate, setIndeterminate] = useState<boolean>(false); // 复选框全选
|
||||
const [checkAll, setCheckAll] = useState<boolean>(false); // 复选框全选
|
||||
const [checkedList, setCheckedList] = useState(defaultCheckedList); // 全选选中数组
|
||||
const [sectionsVal, setSectionsVal] = useState<any>([]); // 选中数组id
|
||||
const [quitForm] = Form.useForm();
|
||||
|
||||
const actionRef = useRef<ActionType>();
|
||||
const personColumns: any[] = [ // 修改项目负责人
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '登录号',
|
||||
dataIndex: 'loginNum',
|
||||
key: 'loginNum',
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
dataIndex: 'phone',
|
||||
key: 'phone',
|
||||
},
|
||||
{
|
||||
title: '邮箱',
|
||||
dataIndex: 'email',
|
||||
key: 'email',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
key: 'action',
|
||||
align: 'center',
|
||||
render: (text: any, record: any) => (
|
||||
<Space size="middle">
|
||||
<Button type="link" size="middle">选择</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
const columns: any[] = [ // 我参与的项目
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'index',
|
||||
valueType: 'index',
|
||||
search: false
|
||||
},
|
||||
{
|
||||
title: '采购方式',
|
||||
dataIndex: 'bidMethodDict',
|
||||
search: false
|
||||
},
|
||||
{
|
||||
title: '项目名称',
|
||||
dataIndex: 'projectName',
|
||||
},
|
||||
{
|
||||
title: '项目编号',
|
||||
dataIndex: 'projectBizNum',
|
||||
search: false
|
||||
},
|
||||
{
|
||||
title: '采购人',
|
||||
dataIndex: 'ownerContactName',
|
||||
search: false
|
||||
},
|
||||
{
|
||||
title: '采购类型',
|
||||
dataIndex: 'procurementType',
|
||||
valueEnum: {
|
||||
1: { text: '货物', status: 1 },
|
||||
2: { text: '工程', status: 2 },
|
||||
3: { text: '服务', status: 3 },
|
||||
4: { text: '其他', status: 4 },
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '所属区域',
|
||||
dataIndex: 'regionDictName',
|
||||
search: false
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 100,
|
||||
render: (text: any, record: any) => (
|
||||
<Space>
|
||||
<Button type="link" danger><Link to={`/IParticipate?id=${record.id}`}>项目跟进</Link></Button>
|
||||
<Button type="link" danger onClick={() => setPersonVisible(true)} >修改负责人</Button>
|
||||
<Button type="link" danger onClick={() => quitProject(record.id)} >退出项目</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
const otherColumns: any[] = [ // 公司其他项目
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'index',
|
||||
valueType: 'index',
|
||||
search: false
|
||||
},
|
||||
{
|
||||
title: '项目名称',
|
||||
dataIndex: 'projectName',
|
||||
},
|
||||
{
|
||||
title: '采购类型',
|
||||
dataIndex: 'procurementTypeDict',
|
||||
search: false,
|
||||
render: (_: any, record: any) => {
|
||||
if (record.procurementTypeDict == 'procurement_type_1') {
|
||||
return (<>货物</>)
|
||||
} else if (record.procurementTypeDict == 'procurement_type_2') {
|
||||
return (<>工程</>)
|
||||
} else if (record.procurementTypeDict == 'procurement_type_3') {
|
||||
return (<>服务</>)
|
||||
} else {
|
||||
return (<>其他</>)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '采购方式',
|
||||
dataIndex: 'bidMethodDict',
|
||||
search: false
|
||||
},
|
||||
{
|
||||
title: '已报名标段名称',
|
||||
dataIndex: 'bidSectName',
|
||||
search: false
|
||||
},
|
||||
{
|
||||
title: '已报名标段编号',
|
||||
dataIndex: 'bidSectBizNum',
|
||||
search: false
|
||||
},
|
||||
{
|
||||
title: '项目负责人',
|
||||
dataIndex: 'projectBidUser',
|
||||
search: false
|
||||
},
|
||||
];
|
||||
|
||||
const onFinish = (val: any) => { // 校验成功确认提交
|
||||
let date = {
|
||||
packageIdList: val.checkbox,
|
||||
remark: val.reason
|
||||
}
|
||||
exitProject(date).then((res: any) => {
|
||||
if (res.code == 200) {
|
||||
setQuitVisible(false)
|
||||
message.success('退出成功')
|
||||
setCheckedList([])
|
||||
setIndeterminate(false)
|
||||
} else {
|
||||
setQuitVisible(false)
|
||||
message.warning(res.message)
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
const onCheckAllChange = (e: any) => { // 全选
|
||||
setCheckedList(e.target.checked ? sectionsVal : []);
|
||||
setIndeterminate(false)
|
||||
setCheckAll(e.target.checked)
|
||||
console.log(e.target.checked)
|
||||
};
|
||||
|
||||
const onChange = (checkedList: any) => { // 多选单点
|
||||
setCheckedList(checkedList)
|
||||
setIndeterminate(!!checkedList.length && checkedList.length < sectionsVal.length)
|
||||
setCheckAll(checkedList.length === sectionsVal.length)
|
||||
console.log(checkedList)
|
||||
};
|
||||
|
||||
const quitProject = (id: any) => { // 退出项目
|
||||
setQuitVisible(true)
|
||||
quitForm.resetFields()
|
||||
getSection({ projectId: id }).then((res: any) => {
|
||||
let secVals = [];
|
||||
if (res.success) {
|
||||
secVals = res.data.map((item: any) => { return item.id })
|
||||
}
|
||||
setPlainList(res.data)
|
||||
setSectionsVal(secVals)
|
||||
})
|
||||
}
|
||||
|
||||
const submitQuit = (val: any) => { // 确定并进行校验
|
||||
if (checkedList.length > 0) {
|
||||
quitForm.getFieldValue().checkbox = checkedList
|
||||
}
|
||||
quitForm.submit()
|
||||
}
|
||||
|
||||
const onSearch = () => { // 确认选择负责人
|
||||
// alert(0)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHeader
|
||||
title="我参与的项目"
|
||||
/>
|
||||
<div className="bidContent projectsInvolved">
|
||||
<Tabs defaultActiveKey="1">
|
||||
<TabPane tab="我参与的项目" key="1">
|
||||
<ProTable
|
||||
columns={columns}
|
||||
request={params => queryingPagingData('/api/biz-service-ebtp-tender/v1/supplier_register/get_register_project', 'post', params)}
|
||||
pagination={{ defaultPageSize: 10 }}//默认显示条数
|
||||
toolBarRender={false}
|
||||
bordered
|
||||
/>
|
||||
<Modal // 修改负责人
|
||||
title="选择负责人"
|
||||
width={800}
|
||||
visible={personVisible}
|
||||
onCancel={() => setPersonVisible(false)}
|
||||
footer={null}
|
||||
>
|
||||
<Search
|
||||
placeholder="请输入关键词"
|
||||
allowClear
|
||||
enterButton="查询"
|
||||
size="middle"
|
||||
onSearch={onSearch}
|
||||
className="mb10"
|
||||
/>
|
||||
<ProTable<any>
|
||||
actionRef={actionRef}//action触发后更新表格
|
||||
columns={personColumns}
|
||||
pagination={{ defaultPageSize: 10 }}//默认显示条数
|
||||
dataSource={personList}
|
||||
toolBarRender={false}
|
||||
search={false}
|
||||
bordered
|
||||
/>
|
||||
</Modal>
|
||||
<Modal // 退出项目
|
||||
title="退出项目"
|
||||
width={800}
|
||||
visible={quitVisible}
|
||||
onCancel={() => setQuitVisible(false)}
|
||||
onOk={submitQuit}
|
||||
>
|
||||
<Form
|
||||
{...formItemLayout}
|
||||
onFinish={onFinish}
|
||||
form={quitForm}
|
||||
>
|
||||
<Form.Item
|
||||
label="退出原因"
|
||||
name="reason"
|
||||
rules={[{ required: true, message: '请输入退出原因' }]}
|
||||
>
|
||||
<TextArea rows={4} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="checkbox"
|
||||
label="选择标段"
|
||||
rules={[{ required: true, message: '请选择标段', type: 'array' }]}
|
||||
>
|
||||
<Checkbox
|
||||
indeterminate={indeterminate}
|
||||
onChange={onCheckAllChange}
|
||||
checked={checkAll}
|
||||
>全选</Checkbox>
|
||||
<CheckboxGroup
|
||||
// options={plainList}
|
||||
value={checkedList}
|
||||
onChange={onChange}
|
||||
>
|
||||
{
|
||||
plainList.map((item: any, index: any) => {
|
||||
return (
|
||||
<Checkbox value={item.id} key={index}>{item.bidSectName}</Checkbox>
|
||||
)
|
||||
})
|
||||
}
|
||||
</CheckboxGroup>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
</TabPane>
|
||||
<TabPane tab="公司其他项目" key="2">
|
||||
<ProTable
|
||||
columns={otherColumns}
|
||||
request={params => queryingPagingData('/api/biz-service-ebtp-tender/v1/supplier_register/company_other_project', 'post', params)}
|
||||
pagination={{ defaultPageSize: 10 }}//默认显示条数
|
||||
toolBarRender={false}
|
||||
bordered
|
||||
/>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Index
|
||||
Reference in New Issue
Block a user