liuchang/fe_service_ebtp_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

评标场所、区域、设备开发完成

Browse Source
This commit is contained in:
袁帅
2022-09-28 14:49:19 +08:00
parent 48e74053e3
commit 629f1bb304
7 changed files with 631 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/pages/ElecEvaluation/DeviceManage/DeviceForm.tsx
View File

@ -3,7 +3,7 @@ import { Button, Form, Input, message, Modal, Select, Spin, Row, Col } from "ant
import Password from "antd/lib/input/Password";
import { fromPairs, values } from "lodash";
import React, { useEffect, useRef, useState } from "react"
import SelectDeviceModal from "./SelectDeviceModal";
import SelectExternDeviceModal from "./SelectExternDeviceModal";
import { getDeviceById, saveDevice } from "./service";
@ -197,11 +197,14 @@ const DeviceForm: React.FC<DeviceFormProps> = (props) => {
// @ts-ignore
return (
<div>
<>
<Modal
mask={true}
destroyOnClose
title={titleName}
maskClosable={false}
title={<div>
<span>设备信息</span>
</div>}
visible={modalVisible}
onCancel={() => onCancel()}
onOk={() => form.submit()}
@ -247,7 +250,7 @@ const DeviceForm: React.FC<DeviceFormProps> = (props) => {
>
</Select>
</Form.Item>
<Form.Item label="设备名称">
<Form.Item label="设备名称" required>
<Form.Item name="deviceName" noStyle rules={[{ required: true, message:'请填写设备名称/选择设备' }]}>
<Input style={{ width: 'calc(85% - 8px)' }} placeholder="请填写设备名称/选择设备" maxLength={200} />
</Form.Item>
@ -311,8 +314,8 @@ const DeviceForm: React.FC<DeviceFormProps> = (props) => {
</Form>
</Spin>
</Modal>
<SelectDeviceModal modalVisible={selectDeviceStatus} onCancel={() => setSelectDeviceStatus(false)} onSubmit = {(value: any) => SelectDeviceData(value)} values ={deviceRelData?.current}> </SelectDeviceModal>
</div>
<SelectExternDeviceModal modalVisible={selectDeviceStatus} onCancel={() => setSelectDeviceStatus(false)} onSubmit = {(value: any) => SelectDeviceData(value)} values ={deviceRelData?.current}> </SelectExternDeviceModal>
</>
)
}
export default DeviceForm

0
src/pages/ElecEvaluation/DeviceManage/SelectDeviceModal.tsx → src/pages/ElecEvaluation/DeviceManage/SelectExternDeviceModal.tsx
View File

9
src/pages/ElecEvaluation/DeviceManage/index.tsx
View File

@ -261,12 +261,9 @@ const DeviceManage: React.FC<{}> = () => {
filterType: 'query',
optionRender: (searchConfig: any, { form }) => {
return [
<Button key="toCreate"
type="primary" onClick={() => toAdd()}>
新建
</Button>,
<Button
key="searchText"
type="primary"
onClick={() => {
form?.submit();
}}
@ -285,6 +282,10 @@ const DeviceManage: React.FC<{}> = () => {
>
{searchConfig?.resetText}
</Button>,
<Button key="toCreate"
type="primary" onClick={() => toAdd()}>
新建
</Button>,
];
},
}}

87
src/pages/ElecEvaluation/PlaceAreasManage/components/modal/AreasModal.tsx
View File

@ -1,7 +1,8 @@
import { ConsoleSqlOutlined } from '@ant-design/icons';
import { Spin, Modal, message, Button, Form, Input, Select, InputNumber } from 'antd';
import React, { useState, useEffect, useImperativeHandle, forwardRef } from 'react';
import React, { useState, useEffect, useImperativeHandle, forwardRef, useRef } from 'react';
import { saveAreasInfo, getPlaceListByPermission, getPlatAreaList } from '../../service';
import SelectExternAreaModal from './SelectExternAreaModal';
interface AreasModalProps {
areasInfo: AreasInfo;
@ -49,6 +50,8 @@ interface AreaOptions {
const [saveLoading, setSaveLoading] = useState<boolean>(false);
const [placeList, setPlaceList] = useState<any[]>([]);
const [areaList, setAreaList] = useState<any[]>([]);
const [selectAreaStatus, setSelectAreaStatus] = useState<any>();
const currentPlace = useRef<any>();
const [form] = Form.useForm();
const clearForm = () => {
form.resetFields();
@ -109,19 +112,20 @@ interface AreaOptions {
placeId: value['value'],
})
getPlatAreaList({placeId: value['key']}).then(res => {
if(res.code === 200){
setAreaList(EnvAreaOptions(res.data));
}
})
currentPlace.current = value['value'];
// getPlatAreaList({placeId: value['key']}).then(res => {
// if(res.code === 200){
// setAreaList(EnvAreaOptions(res.data));
// }
// })
}
const handleAreaRegionChange = (value:any) => {
form.setFieldsValue({
areaRegionCode: value['value'],
areaRegionName: value['label']
})
}
// const handleAreaRegionChange = (value:any) => {
// form.setFieldsValue({
// areaRegionCode: value['value'],
// areaRegionName: value['label']
// })
// }
// const renderFooter = () => {
// return (
@ -150,8 +154,25 @@ interface AreaOptions {
});
}
return (<Modal
const ShowExternAreaModal = () => {
if(form.getFieldValue(['placeId'])){
setSelectAreaStatus(true);
}else{
message.error('请先选择评标场所');
}
}
const selectExternAreaCallBack = (value: any) => {
form.setFieldsValue({
areaRegionName: value['name'],
areaName: value['name'],
areaRegionCode: value['indexCode']
})
}
return (<><Modal
destroyOnClose={true}
maskClosable={false}
visible={modalVisible}
cancelText="关闭"
okText="保存"
@ -181,6 +202,9 @@ interface AreaOptions {
<Form.Item hidden={true} name="status" initialValue={areasInfo?.status}>
<Input />
</Form.Item>
<Form.Item hidden={true} name="areaRegionName" initialValue={areasInfo?.areaRegionName}>
<Input />
</Form.Item>
<Form.Item
label="评标场所"
name="placeId"
@ -189,7 +213,13 @@ interface AreaOptions {
<Select labelInValue options={placeList} placeholder='请选择' onChange={handlePlaceChange}>
</Select>
</Form.Item>
<Form.Item
<Form.Item label="评标区域名称" required initialValue={areasInfo?.areaName}>
<Form.Item name="areaName" noStyle rules={[{ required: true, message: '请填写评标区域名称/选择评标区域' }]}>
<Input style={{ width: 'calc(85% - 8px)' }} placeholder="请填写评标区域名称/选择评标区域" maxLength={200} />
</Form.Item>
<Button style={{ width: 'calc(15%)', margin: '0 0 0 8px' }} type='primary' onClick={() => ShowExternAreaModal()}>选择</Button>
</Form.Item>
{/* <Form.Item
label="评标区域"
name="areaRegionName"
rules={[{ required: true, message: '请选择评标区域' }]}
@ -197,9 +227,9 @@ interface AreaOptions {
>
<Select labelInValue options={areaList} placeholder='请选择' onChange={handleAreaRegionChange}>
</Select>
</Form.Item>
<Form.Item label="评标区域编码" name="areaRegionCode" initialValue={areasInfo?.areaRegionCode}>
<Input disabled placeholder='选择评标区域自动回显'/>
</Form.Item> */}
<Form.Item label="评标区域编码" name="areaRegionCode" rules={[{ required: true, message: '请选择评标区域/填写评标区域编码' }]} initialValue={areasInfo?.areaRegionCode}>
<Input placeholder='请选择评标区域/填写评标区域编码' maxLength={100} />
</Form.Item>
<Form.Item
label="区域类型"
@ -219,14 +249,11 @@ interface AreaOptions {
{
required: true,
message: '请填写评标区域名称'
},
{
max: 50,
message: '最大不能超过50字'
}]}
}
]}
initialValue={areasInfo?.areaName}
>
<Input placeholder='请填写评标区域名称'/>
<Input placeholder='请填写评标区域名称' maxLength={50} />
</Form.Item>
<Form.Item
label="可容纳人数"
@ -235,8 +262,8 @@ interface AreaOptions {
{
required: true,
message: '请填写可容纳人数'
},]
}
},
]}
initialValue={areasInfo?.areaNumber}
>
<InputNumber min={1} max={999999} placeholder='请填写可容纳人数' style={{ width: '100%' }} />
@ -244,19 +271,13 @@ interface AreaOptions {
<Form.Item
label="详细地址"
name="areaAddress"
rules={[
{
max: 100,
message: '最大不能超过100字'
}]
}
initialValue={areasInfo?.areaAddress}
>
<Input placeholder='请填写详细地址'/>
<Input placeholder='请填写详细地址' maxLength={100} />
</Form.Item>
</Form>
</Spin>
</Modal>)
</Modal><SelectExternAreaModal modalVisible={selectAreaStatus} onCancel={() => setSelectAreaStatus(false)} onSubmit={(value: any) => selectExternAreaCallBack(value)} values={currentPlace?.current}> </SelectExternAreaModal></>)
})
export default AreasModal;

125
src/pages/ElecEvaluation/PlaceAreasManage/components/modal/PlaceModal.tsx
View File

@ -3,6 +3,7 @@ import { isEmpty } from 'lodash';
import React, { useState, useImperativeHandle, forwardRef, useEffect, useRef } from 'react';
import { savePlaceInfo, getServiceProvices, getPlatforms, getExternPlaces } from '../../service';
import { getProviceList, getCityList, getAreaList, getDictRegion } from '../PcaService'
import SelectExternPlaceModal from './SelectExternPlaceModal';
interface PcaKeyValues{
pid?:string,
@ -89,6 +90,9 @@ interface PlaceInfo {
const currentCity = useRef<any>();
//县默认值
const currentCounty = useRef<any>();
//当前平台
const currentPlatform = useRef<any>();
const [selectPlaceStatus,setSelectPlaceStatus] = useState<any>();
const [form] = Form.useForm();
const platformParams = useRef<PlatFormParams>();
const clearForm = () => {
@ -99,17 +103,18 @@ interface PlaceInfo {
currentCity.current = null;
setAreaList([]);
currentCounty.current = null;
currentPlatform.current = null;
}
useEffect(() => {
clearForm();
getPlatforms(platformParams).then(res =>{
if(res.code === 200){
setPlatforms(EnvPlatformOptions(res.data));
if(placeInfo?.platformList && placeInfo?.platformList[0]?.platformId){
getExternPlaces(placeInfo?.platformList[0]?.platformId).then(res => {
setExternPlaces(EnvExternPlacesOptions(res.data));
})
}
// if(placeInfo?.platformList && placeInfo?.platformList[0]?.platformId){
// getExternPlaces(placeInfo?.platformList[0]?.platformId).then(res => {
// setExternPlaces(EnvExternPlacesOptions(res.data));
// })
// }
}
})
getServiceProvices().then(res =>{
@ -143,26 +148,27 @@ interface PlaceInfo {
}
]
});
form.resetFields(["placeRegionCode"]);
let _plaform = form.getFieldValue('platformList');
if(_plaform && _plaform[0].platformId){
getExternPlaces({platformId: _plaform[0].platformId}).then(res => {
if(res.code === 200){
setExternPlaces(EnvExternPlacesOptions(res.data));
}
})
}
}
/**
* 平台场所回调
* @param value
*/
const handleExternPlaceChange = (value: any) =>{
form.setFieldsValue({
placeRegionName:value['label'],
placeRegionCode:value['value']
})
currentPlatform.current = form.getFieldValue(['platformList']);
// form.resetFields(["placeRegionCode"]);
// let _plaform = form.getFieldValue('platformList');
// if(_plaform && _plaform[0].platformId){
// getExternPlaces({platformId: _plaform[0].platformId}).then(res => {
// if(res.code === 200){
// setExternPlaces(EnvExternPlacesOptions(res.data));
// }
// })
// }
}
// /**
// * 平台场所回调
// * @param value
// */
// const handleExternPlaceChange = (value: any) =>{
// form.setFieldsValue({
// placeRegionName:value['label'],
// placeRegionCode:value['value']
// })
// }
/**
* 省回调
*/
@ -374,8 +380,25 @@ interface PlaceInfo {
setSaveLoading(false);
});
}
return (<Modal
const ShowExternPlaceModal = () => {
if(form.getFieldValue(['platformList'])){
setSelectPlaceStatus(true);
}else{
message.error('请先选择管理平台');
}
}
const selectPlaceCallBack = (value: any) => {
form.setFieldsValue({
placeRegionName: value['name'],
placeName: value['name'],
placeRegionCode: value['indexCode']
})
}
return (<><Modal
destroyOnClose={true}
maskClosable={false}
visible={modalVisible}
okText="保存"
cancelText="关闭"
@ -396,8 +419,6 @@ interface PlaceInfo {
initialValues={{ remember: true }}
form={form}
onFinish={onFinish}
// onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item hidden={true} name="id" initialValue={placeInfo?.id}>
<Input />
@ -417,6 +438,9 @@ interface PlaceInfo {
<Form.Item hidden={true} name="platformList" initialValue={placeInfo?.platformList}>
<Input />
</Form.Item>
<Form.Item hidden={true} name="placeRegionName" initialValue={placeInfo?.placeRegionName}>
<Input />
</Form.Item>
<Form.Item
label="管理平台"
name="platformId"
@ -426,7 +450,13 @@ interface PlaceInfo {
<Select labelInValue options={platforms} placeholder="请选择管理平台" onChange={handlePlatformChange}>
</Select>
</Form.Item>
<Form.Item
<Form.Item label="评标场所名称" required initialValue={placeInfo?.placeName}>
<Form.Item name="placeName" noStyle rules={[{ required: true, message: '请填写评标场所名称/选择评标场所' }]}>
<Input style={{ width: 'calc(85% - 8px)' }} placeholder="请填写评标场所名称/选择评标场所" maxLength={200} />
</Form.Item>
<Button style={{ width: 'calc(15%)', margin: '0 0 0 8px' }} type='primary' onClick={() => ShowExternPlaceModal()}>选择</Button>
</Form.Item>
{/* <Form.Item
label="评标场所"
name="placeRegionName"
rules={[{ required: true, message: '请选择评标场所' }]}
@ -434,28 +464,24 @@ interface PlaceInfo {
>
<Select labelInValue options={externPlaces} placeholder="请选择评标场所" onChange={handleExternPlaceChange}>
</Select>
</Form.Item>
</Form.Item> */}
<Form.Item label="评标场所编码" name="placeRegionCode" initialValue={placeInfo?.placeRegionCode}>
<Input disabled placeholder='选择评标场所自动回显'/>
<Form.Item label="评标场所编码" name="placeRegionCode" rules={[{ required: true, message: '请选择评标场所/填写评标场所编码' }]} initialValue={placeInfo?.placeRegionCode}>
<Input placeholder='请选择评标场所/填写评标场所编码' maxLength={64} />
</Form.Item>
<Form.Item
{/* <Form.Item
label="评标场所名称"
name="placeName"
rules={[
{
required: true,
message: '请填写评标场所名称',
},
{
max: 50,
message: '最大不能超过50字'
}
]}
initialValue={placeInfo?.placeName}
>
<Input placeholder="请填写评标场所名称"/>
</Form.Item>
<Input placeholder="请填写评标场所名称" maxLength={50} />
</Form.Item> */}
<Form.Item
label="服务省分"
name="provinceDictId"
@ -482,7 +508,6 @@ interface PlaceInfo {
labelCol={{ span: 12 }}
name="cityId"
initialValue={placeInfo?.cityName !== '全部' ? placeInfo?.cityName : null}
// rules={[{ required: true, message: '请选择所在市' }]}
>
<Select labelInValue options={cityList} placeholder={currentProvince?.current ? '全部' : '请选择'} onChange={handleCityChange}>
</Select>
@ -494,7 +519,6 @@ interface PlaceInfo {
labelCol={{ span: 12 }}
name="countyId"
initialValue={placeInfo?.countyName !== '全部' ? placeInfo?.countyName : null}
// rules={[{ required: true, message: '请选择所在县/区' }]}
>
<Select labelInValue options={areaList} placeholder={(currentProvince?.current !== null || currentCity?.current !== null) ? '全部' : '请选择'} onChange={handleCountyChange}>
</Select>
@ -508,15 +532,11 @@ interface PlaceInfo {
rules={[{
required: true,
message: '请填写详细地址',
},
{
max: 100,
message: '最大不能超过100字'
}
]}
initialValue={placeInfo?.placeAddress}
>
<Input placeholder="请填写详细地址"/>
<Input placeholder="请填写详细地址" maxLength={100} />
</Form.Item>
<Form.Item
label="联系人"
@ -524,15 +544,11 @@ interface PlaceInfo {
rules={[{
required: true,
message: '请填写联系人',
},
{
max: 20,
message: '最大不能超过20字'
}
]}
initialValue={placeInfo?.contactName}
>
<Input placeholder="请填写联系人"/>
<Input placeholder="请填写联系人" maxLength={20} />
</Form.Item>
<Form.Item
label="联系电话"
@ -544,19 +560,16 @@ interface PlaceInfo {
{
pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
message: '输入的联系电话不正确',
},
{
max: 20,
message: '最大不能超过20字'
}
]}
initialValue={placeInfo?.contactTel}
>
<Input placeholder="请填写联系电话"/>
<Input placeholder="请填写联系电话" maxLength={20} />
</Form.Item>
</Form>
</Spin>
</Modal>)
</Modal><SelectExternPlaceModal modalVisible={selectPlaceStatus} onCancel={() => setSelectPlaceStatus(false)} onSubmit={(value: any) => selectPlaceCallBack(value)} values={currentPlatform?.current}> </SelectExternPlaceModal></>
)
})
export default PlaceModal;

135
src/pages/ElecEvaluation/PlaceAreasManage/components/modal/SelectExternAreaModal.tsx Normal file
View File

@ -0,0 +1,135 @@
import React, { useEffect, useRef, useState } from 'react';
import { Button, message, Modal, Spin } from 'antd';
import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
import { getPlatAreaList } from '../../service';
interface SelectExternAreaProps {
modalVisible: boolean;
onCancel: () => void;
onSubmit: (value: any) => void;
values: any;
}
const SelectExternArea: React.FC<SelectExternAreaProps> = (props) => {
const { modalVisible, onCancel, onSubmit, values } = props;
const actionRef = useRef<ActionType>();
//当前选择行areaId
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
//当前选择行数据
const selectedRecord = useRef<any>();
//loading
const [loading, setLoading] = useState<boolean>(false);
const columns: ProColumns<any>[] = [
{
valueType: 'index',
width: 48,
},
{
title: '评标区域编码',
dataIndex: 'indexCode',
ellipsis: true,
hideInSearch: true,
},
{
title: '评标区域名称',
dataIndex: 'name',
ellipsis: true,
hideInSearch: true,
},
];
const onOk = () => {
if (selectedRowKeys.length == 0) {
message.info("请选择评标区域");
return;
}
onSubmit(selectedRecord?.current);
onCancel();
}
useEffect(() => {
setSelectedRowKeys([]);
selectedRecord.current = null;
}, [values])
const queryExternAreaList = async () => {
console.log(values);
setLoading(true);
return await getPlatAreaList({placeId: values}).then(res => {
if (res?.code == 200) {
return {
data: res?.data,
success: res?.success
}
} else {
return {
data: [],
success: false,
}
}
}).finally(()=>{
setLoading(false);
})
}
return (
<Modal
destroyOnClose
title={"选择评标区域"}
visible={modalVisible}
maskClosable={false}
onCancel={() => onCancel()}
onOk={() => onOk()}
okText={"确认"}
okButtonProps={{ loading: loading }}
width={"40%"}
bodyStyle={{ overflowY: 'auto', }}
className="confirm table-no-alert"
centered
footer = {[
<Button key="cancel" onClick={()=>{onCancel();}}>
关闭
</Button>,
<Button key="submit" type="primary" loading={loading} onClick={()=>{onOk();}}>
确定
</Button>,
<Button
key="query"
type="primary"
loading={loading}
onClick={()=>{actionRef?.current?.reload();}}
>
查询
</Button>,
]}
>
<Spin spinning={loading}>
<ProTable<any>
columns={columns}
actionRef={actionRef}
bordered={false}
request={async (params) => {
return queryExternAreaList();
}}
rowKey="indexCode"
search={false}
options={false}
pagination={false}
rowSelection={{
type: "radio",
selectedRowKeys,
onChange: (selectedRowKeys, selectedRows) => {
setSelectedRowKeys(selectedRowKeys);
selectedRecord.current = selectedRows[0];
},
}}
dateFormatter="string"
toolBarRender={false}
/>
</Spin>
</Modal>
);
};
export default SelectExternArea;

135
src/pages/ElecEvaluation/PlaceAreasManage/components/modal/SelectExternPlaceModal.tsx Normal file
View File

@ -0,0 +1,135 @@
import React, { useEffect, useRef, useState } from 'react';
import { Button, message, Modal, Spin } from 'antd';
import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
import { getExternPlaces } from '../../service';
interface SelectExternPlaceProps {
modalVisible: boolean;
onCancel: () => void;
onSubmit: (value: any) => void;
values: any;
}
const SelectExternPlace: React.FC<SelectExternPlaceProps> = (props) => {
const { modalVisible, onCancel, onSubmit, values } = props;
const actionRef = useRef<ActionType>();
//当前选择行areaId
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
//当前选择行数据
const selectedRecord = useRef<any>();
//loading
const [loading, setLoading] = useState<boolean>(false);
const columns: ProColumns<any>[] = [
{
valueType: 'index',
width: 48,
},
{
title: '评标场所编码',
dataIndex: 'indexCode',
ellipsis: true,
hideInSearch: true,
},
{
title: '评标场所名称',
dataIndex: 'name',
ellipsis: true,
hideInSearch: true,
},
];
const onOk = () => {
if (selectedRowKeys.length == 0) {
message.info("请选择评标场所");
return;
}
onSubmit(selectedRecord?.current);
onCancel();
}
useEffect(() => {
setSelectedRowKeys([]);
selectedRecord.current = null;
}, [values])
const queryExternPlaceList = async () => {
console.log(values[0]?.platformId);
setLoading(true);
return await getExternPlaces({platformId:values[0]?.platformId}).then(res => {
if (res?.code == 200) {
return {
data: res?.data,
success: res?.success
}
} else {
return {
data: [],
success: false,
}
}
}).finally(()=>{
setLoading(false);
})
}
return (
<Modal
destroyOnClose
title={"选择评标场所"}
visible={modalVisible}
maskClosable={false}
onCancel={() => onCancel()}
onOk={() => onOk()}
okText={"确认"}
okButtonProps={{ loading: loading }}
width={"40%"}
bodyStyle={{ overflowY: 'auto', }}
className="confirm table-no-alert"
centered
footer = {[
<Button key="cancel" onClick={()=>{onCancel();}}>
关闭
</Button>,
<Button key="submit" type="primary" loading={loading} onClick={()=>{onOk();}}>
确定
</Button>,
<Button
key="query"
type="primary"
loading={loading}
onClick={()=>{actionRef?.current?.reload();}}
>
查询
</Button>,
]}
>
<Spin spinning={loading}>
<ProTable<any>
columns={columns}
actionRef={actionRef}
bordered={false}
request={async (params) => {
return queryExternPlaceList();
}}
rowKey="indexCode"
search={false}
options={false}
pagination={false}
rowSelection={{
type: "radio",
selectedRowKeys,
onChange: (selectedRowKeys, selectedRows) => {
setSelectedRowKeys(selectedRowKeys);
selectedRecord.current = selectedRows[0];
},
}}
dateFormatter="string"
toolBarRender={false}
/>
</Spin>
</Modal>
);
};
export default SelectExternPlace;