12 changed files with 297 additions and 310 deletions
@ -1,160 +0,0 @@ |
|||
import React, { useState } from 'react'; |
|||
import { Button, Form, Input } from 'antd'; |
|||
import { |
|||
ModalForm, |
|||
ProFormText, |
|||
ProFormSelect, |
|||
ProFormTextArea |
|||
} from '@ant-design/pro-form'; |
|||
import Uploads from '$components/Uploads'; |
|||
import { EMERGENCY_DEGREE } from '../contants/risk-coordinate'; |
|||
import { useEffect } from 'react'; |
|||
import moment from 'moment'; |
|||
|
|||
const FormItem = Form.Item; |
|||
|
|||
export default (props) => { |
|||
const { title, triggerRender, editData, onFinish, isView } = props; |
|||
const [editUrlMap, setEditUrlMap] = useState({ type1: [], type2: [] }); |
|||
let formItemLayout = { labelCol: { span: 4 }, wrapperCol: { span: 14 } }; |
|||
const initialValues = editData ? { |
|||
...editData, |
|||
} : null |
|||
|
|||
useEffect(() => { |
|||
if (editData && editData.problemReportFiles) { |
|||
let fileList = (editData?.problemReportFiles || []).map(item => { |
|||
return { |
|||
storageUrl: item.filePath, |
|||
} |
|||
}); |
|||
setEditUrlMap({ type1: fileList, type2: [] }) |
|||
} |
|||
}, [editData]) |
|||
|
|||
// useEffect(() => {
|
|||
// if (key == 'view') {
|
|||
// formItemLayout.modalProps.footer = { null };
|
|||
// }
|
|||
// }, [key])
|
|||
|
|||
const vsjunct = (params, type) => { |
|||
let temp = editUrlMap |
|||
if (params.length) { |
|||
let appendix = [] |
|||
for (let p of params) { |
|||
appendix.push({ |
|||
fName: p.name, |
|||
size: p.size, |
|||
fileSize: p.size, |
|||
storageUrl: p.storageUrl,//必须有storageUrl
|
|||
}) |
|||
} |
|||
temp[type] = appendix |
|||
setEditUrlMap(temp) |
|||
} else { |
|||
temp[type] = [] |
|||
setEditUrlMap(temp) |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<ModalForm |
|||
title={title || ''} |
|||
initialValues={initialValues} |
|||
trigger={ |
|||
triggerRender ? triggerRender : <Button type="primary" > |
|||
{title || ''} |
|||
</Button> |
|||
} |
|||
layout="horizontal" |
|||
{...formItemLayout} |
|||
modalProps={{ |
|||
destroyOnClose: true, |
|||
onCancel: () => { }, |
|||
}} |
|||
|
|||
onFinish={async (values) => { |
|||
if (isView) { |
|||
return true; |
|||
} |
|||
onFinish && await onFinish(values, editData) |
|||
return true; |
|||
}} |
|||
> |
|||
<ProFormText |
|||
width="md" |
|||
name="title" |
|||
label="上报问题标题" |
|||
disabled={isView ? true : false} |
|||
rules={[{ |
|||
required: true, message: '上报问题标题不能为空', |
|||
}, { |
|||
max: 26, message: '标题长度不能大于26个字' |
|||
}, { |
|||
whitespace: true, message: '请勿输入空格' |
|||
}]} |
|||
placeholder="请输入上报问题标题，不超过26个字" |
|||
/> |
|||
|
|||
|
|||
<ProFormTextArea |
|||
width="md" |
|||
name="describe" |
|||
label="问题描述" |
|||
disabled={isView ? true : false} |
|||
placeholder="请输入问题描述，不超过200个字" |
|||
rules={[{ |
|||
required: true, message: '上报问题标题不能为空', |
|||
}, { |
|||
max: 200, message: '描述长度不能大于200个字' |
|||
}, { |
|||
whitespace: true, message: '请勿输入空格' |
|||
}]} |
|||
/> |
|||
|
|||
<ProFormSelect |
|||
width="md" |
|||
rules={[{ required: true, message: '请选择紧急程度!' }]} |
|||
options={EMERGENCY_DEGREE.map(s => s)} |
|||
name="urgencyDegree" |
|||
label="紧急程度" |
|||
disabled={isView ? true : false} |
|||
/> |
|||
|
|||
<FormItem name='accessory' label='问题附件'> |
|||
<Uploads |
|||
disabled={isView ? true : false} |
|||
className='upload' |
|||
listType='text' |
|||
uploadType='project' |
|||
maxFilesNum={10} |
|||
maxFileSize={20} |
|||
isQiniu={true} |
|||
onChange={(params) => vsjunct(params, 'type1')} |
|||
fileTypes={["jpeg", "png", "jpg", "pdf", "doc", "docx"]} |
|||
value={editUrlMap.type1} |
|||
defaultValue={editUrlMap.type1} |
|||
/> |
|||
|
|||
</FormItem> |
|||
|
|||
{ |
|||
isView ? <FormItem label='上报人员'> |
|||
<Input value={editData.user.userName} disabled={true} /> |
|||
</FormItem> : '' |
|||
} |
|||
|
|||
{ |
|||
isView ? <FormItem label='上报时间'> |
|||
<Input value={moment(editData.reportTime).format('YYYY-MM-DD HH:mm:ss')} disabled={true} /> |
|||
</FormItem> : '' |
|||
} |
|||
|
|||
{/* <FormItem > |
|||
<div style={{ color: '#999' }}>说明：附件格式为png、jpeg、jpg、docx、doc、pdf，大小不超过20MB</div> |
|||
</FormItem> */} |
|||
|
|||
</ModalForm> |
|||
); |
|||
}; |
|||
@ -1,7 +1,8 @@ |
|||
'use strict'; |
|||
|
|||
|
|||
import ProjectSituation from './projectSituation' |
|||
import QrCode from './qrCode' |
|||
import Information from './information' |
|||
|
|||
|
|||
export { ProjectSituation }; |
|||
export { QrCode, Information }; |
|||
|
|||
@ -0,0 +1,229 @@ |
|||
import React, { useEffect, useState } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Spin, Card, Form, Input, Select, Button, Table, Modal, Popconfirm, Tooltip } from 'antd'; |
|||
import moment from "moment"; |
|||
import '../style.less'; |
|||
import ProjectAddModel from '../components/projectAddModel' |
|||
import { Model } from 'echarts'; |
|||
|
|||
const Information = (props) => { |
|||
const { dispatch, actions, user, loading } = props |
|||
const { projectRegime } = actions |
|||
const [firmList, setFirmList] = useState([]) |
|||
const [tableList, settableList] = useState([]) |
|||
const [addModel, setAddModel] = useState(false) |
|||
const [modelData, setModelData] = useState({}) |
|||
const [query, setQuery] = useState({ limit: 10, page: 0 }) |
|||
const [limits, setLimits] = useState() |
|||
const [search, setSearch] = useState({}) |
|||
const [isPicture, setIsPicture] = useState(false) |
|||
const [pictureUrl, setPictureUrl] = useState() |
|||
const [companyID, setCompanyId] = useState('') |
|||
|
|||
|
|||
|
|||
useEffect(() => { |
|||
dispatch(projectRegime.getFirmList()).then(res => { |
|||
if (res.success) { |
|||
let data = res.payload.data?.map(r => ({ value: r.id, label: r.name })) |
|||
if (user?.role?.type == 1) { |
|||
setFirmList(data) |
|||
projectList(query) |
|||
} else if (user?.role?.type == 2) { |
|||
let dataId = user?.userDepartments[0]?.department?.company?.id |
|||
setFirmList(data?.filter(v => v.value == dataId)) |
|||
projectList({ ...query, companyId: dataId }) |
|||
setSearch({ companyId: dataId }) |
|||
setCompanyId(dataId) |
|||
} |
|||
} |
|||
}) |
|||
|
|||
}, []) |
|||
|
|||
const projectList = (obj) => { |
|||
const { limit, page, companyId, name, type } = obj |
|||
dispatch(projectRegime.getProjectList({ limit, page, companyId, name, type })).then(res => { |
|||
// console.log(res)
|
|||
if (res.success) { |
|||
settableList(res.payload.data?.rows?.map(v => ({ ...v, key: v.id }))) |
|||
setLimits(res.payload.data?.count) |
|||
} |
|||
}) |
|||
} |
|||
|
|||
const columns = [ |
|||
{ |
|||
title: '序号', |
|||
dataIndex: 'index', |
|||
key: 'index', |
|||
render: (text, record, index) => index + 1 |
|||
}, { |
|||
title: '结构物名称', |
|||
dataIndex: 'name', |
|||
key: 'name', |
|||
}, { |
|||
title: '所在地区', |
|||
dataIndex: 'type', |
|||
key: 'type', |
|||
}, { |
|||
title: '结构物类型', |
|||
dataIndex: 'scale', |
|||
key: 'scale', |
|||
render: (text, record, index) => record?.scale?.scale + record?.scale?.scaleSuffix |
|||
}, { |
|||
title: '描述', |
|||
dataIndex: 'amount', |
|||
key: 'amount', |
|||
render: (text, record, index) => record?.amount?.amount + record?.amount?.amountSuffix |
|||
}, { |
|||
title: '操作', |
|||
dataIndex: 'operation', |
|||
key: 'operation', |
|||
render: (text, record, index) => { |
|||
return ( |
|||
<div style={{ width: 180 }}> |
|||
{(user?.isSuper || user.id == record.userId) ? |
|||
<> |
|||
<Button type="link" onClick={() => { |
|||
setAddModel(true) |
|||
setModelData(record) |
|||
}} |
|||
|
|||
>编辑</Button> |
|||
<Popconfirm |
|||
title='确认删除工程信息？' |
|||
position='topLeft' |
|||
onConfirm={() => { |
|||
dispatch(projectRegime.delProject(record.id)).then(res => { |
|||
if (res.success) { |
|||
if ((limits > 11 && tableList.length > 1) || limits < 11) { |
|||
projectList({ ...query, ...search }) |
|||
} else { |
|||
projectList({ limit: query?.limit, page: query?.page - 1, ...search }) |
|||
setQuery({ limit: query?.limit, page: query?.page - 1 }); |
|||
} |
|||
|
|||
} |
|||
}) |
|||
}} |
|||
> |
|||
<Button type="link" danger >删除</Button> |
|||
</Popconfirm> |
|||
|
|||
</> |
|||
: <> |
|||
<Tooltip title='请联系工程创建者'> |
|||
<Button type="link" >编辑</Button> |
|||
</Tooltip> |
|||
<Tooltip title='请联系工程创建者'> |
|||
<Button type="link" danger >删除</Button> |
|||
</Tooltip> |
|||
</> |
|||
} |
|||
|
|||
</div> |
|||
) |
|||
} |
|||
} |
|||
] |
|||
|
|||
return ( |
|||
<> |
|||
<div style={{ display: 'flex', justifyContent: 'space-between', padding: '0 10px' }}> |
|||
<Form |
|||
style={{ display: 'flex', }} |
|||
onFinish={r => { |
|||
projectList({ limit: 10, page: 0, ...r, companyId: companyID || r?.companyId }) |
|||
setQuery({ limit: 10, page: 0 }); |
|||
setSearch(r) |
|||
}} |
|||
> |
|||
<Form.Item |
|||
label='项目名称' |
|||
name="name" |
|||
style={{ marginRight: 16, minWidth: 180 }} |
|||
> |
|||
<Input placeholder="请输入项目名称" allowClear /> |
|||
</Form.Item> |
|||
<Form.Item wrapperCol={{}}> |
|||
<Button type="primary" htmlType="submit"> |
|||
搜索 |
|||
</Button> |
|||
</Form.Item> |
|||
</Form> |
|||
<div style={{ display: 'flex' }}> |
|||
<Button type="primary" onClick={() => { |
|||
console.log(45513); |
|||
setAddModel(true) |
|||
}}>新建结构物</Button> |
|||
<Button type="primary" style={{ marginLeft: 20 }} onClick={() => { |
|||
console.log(45513); |
|||
setAddModel(true) |
|||
}}>一键生成二维码</Button> |
|||
</div> |
|||
|
|||
</div> |
|||
<Table |
|||
columns={columns} |
|||
dataSource={tableList} |
|||
pagination={{ |
|||
current: query.page + 1, |
|||
total: limits, |
|||
showSizeChanger: true, |
|||
showQuickJumper: true, |
|||
pageSizeOptions: [10, 20, 50], |
|||
showTotal: (total) => { |
|||
return <span style={{ fontSize: 15 }}>{`共${Math.ceil(total / query?.limit)}页，${total}项`}</span> |
|||
}, |
|||
onChange: (page, pageSize) => { |
|||
setQuery({ limit: pageSize, page: page - 1 }); |
|||
projectList({ limit: pageSize, page: page - 1, ...search, companyId: companyID || search?.companyId }) |
|||
} |
|||
}} |
|||
/> |
|||
{ |
|||
<Modal |
|||
// title={ }
|
|||
width={570} |
|||
open={isPicture} |
|||
onOk={() => { }} |
|||
footer={null} |
|||
onCancel={() => { |
|||
setIsPicture(false) |
|||
setPictureUrl('') |
|||
}} |
|||
> |
|||
{pictureUrl && pictureUrl[0] ? <img src={`/_file-server/${pictureUrl}`} width={500} /> : "暂无图片"} |
|||
</Modal> |
|||
} |
|||
{ |
|||
addModel ? |
|||
<ProjectAddModel |
|||
firmList={firmList} |
|||
modelData={modelData} |
|||
close={() => { |
|||
setAddModel(false) |
|||
setModelData({}) |
|||
}} |
|||
success={() => { |
|||
setAddModel(false) |
|||
setModelData({}) |
|||
setQuery({ limit: 10, page: 0 }); |
|||
projectList({ limit: 10, page: 0, ...search, companyId: companyID || search?.companyId }) |
|||
}} |
|||
/> : "" |
|||
} |
|||
</> |
|||
) |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth, global } = state; |
|||
return { |
|||
user: auth.user, |
|||
actions: global.actions, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Information); |
|||
@ -1,19 +1,24 @@ |
|||
'use strict'; |
|||
import { RiskReport, ProjectSituation, Coordinate, ProblemReport } from './containers'; |
|||
import { Information,QrCode } from './containers'; |
|||
|
|||
export default [{ |
|||
type: 'inner', |
|||
route: { |
|||
path: '/projectRegime', |
|||
key: 'projectRegime', |
|||
breadcrumb: '项目管理', |
|||
// 不设置 component 则面包屑禁止跳转
|
|||
childRoutes: [{ |
|||
path: '/projectSituation', |
|||
key: 'projectSituation', |
|||
component: ProjectSituation, |
|||
breadcrumb: '工程概况', |
|||
}, |
|||
] |
|||
} |
|||
type: 'inner', |
|||
route: { |
|||
path: '/projectRegime', |
|||
key: 'projectRegime', |
|||
breadcrumb: '结构物管理', |
|||
// 不设置 component 则面包屑禁止跳转
|
|||
childRoutes: [{ |
|||
path: '/information', |
|||
key: 'information', |
|||
component: Information, |
|||
breadcrumb: '结构物基础信息管理', |
|||
}, { |
|||
path: '/qrCode', |
|||
key: 'qrCode', |
|||
component: QrCode, |
|||
breadcrumb: '结构物二维码管理', |
|||
}, |
|||
] |
|||
} |
|||
}]; |
|||
Loading…
Reference in new issue