351 lines
10 KiB
TypeScript
351 lines
10 KiB
TypeScript
|
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
|