10 changed files with 455 additions and 44 deletions
@ -0,0 +1,35 @@ |
|||
import { basicAction } from '@peace/utils' |
|||
import { ApiTable } from '$utils' |
|||
|
|||
export function getTask(query) { |
|||
return dispatch => basicAction({ |
|||
type: 'get', |
|||
dispatch: dispatch, |
|||
query: query, |
|||
actionType: 'GET_TASK', |
|||
url: ApiTable.getTask, |
|||
msg: { error: '获取任务信息' }, |
|||
reducer: { name: 'task' } |
|||
}); |
|||
} |
|||
|
|||
export function delTask(query) { |
|||
return dispatch => basicAction({ |
|||
type: 'del', |
|||
dispatch: dispatch, |
|||
actionType: 'DEL_TASK', |
|||
url: ApiTable.delTask.replace("{taskId}", query?.id), |
|||
msg: { option: '删除任务信息' }, |
|||
}); |
|||
} |
|||
|
|||
export function editTask(query) { |
|||
return dispatch => basicAction({ |
|||
type: 'put', |
|||
dispatch: dispatch, |
|||
data: query, |
|||
actionType: 'GET_TASK', |
|||
url: ApiTable.editTask, |
|||
msg: { error: '编辑或新增任务信息' }, |
|||
}); |
|||
} |
|||
@ -0,0 +1,152 @@ |
|||
import React, { useState, useEffect, useRef } from 'react'; |
|||
import { Modal, Form, Input, Select, Button } from 'antd'; |
|||
import { connect } from 'react-redux'; |
|||
import { getRoadway } from '../../actions/infor' |
|||
import { getUserList } from '../../actions/patrol'; |
|||
import { editTask } from '../../actions/task'; |
|||
|
|||
const AddModal = (props) => { |
|||
const { dispatch, recordRow, visible, onClose, user, lookVal } = props |
|||
const { TextArea } = Input |
|||
const [form] = Form.useForm() |
|||
const [inputVal, setIputVal] = useState(undefined) |
|||
const [selectVal, setSelectVal] = useState('') |
|||
const [roadRes, setRoadRes] = useState([])//路线列表
|
|||
const [userList, setUserList] = useState([])//用户列表
|
|||
useEffect(async () => { |
|||
const res = await dispatch(getUserList()) |
|||
setUserList(res?.payload.data) |
|||
}, [true]) |
|||
|
|||
const onChange = () => { |
|||
form.resetFields(['code'])//清空具体某个表单的值
|
|||
} |
|||
useEffect(() => { |
|||
form.setFieldsValue(recordRow ? { 'name': recordRow?.road.routeName, 'code': recordRow?.road.routeCode, 'danger': recordRow?.dangerDescription, 'user': recordRow?.user.name } : {}) |
|||
}, [recordRow]) |
|||
useEffect(async () => { |
|||
const res = await dispatch(getRoadway({})) |
|||
setRoadRes(res?.payload.data) |
|||
}, []) |
|||
//新增和修改
|
|||
const handleSaveUpdate = () => { |
|||
form.validateFields().then((values) => { |
|||
console.log('VALUES', values) |
|||
const val = { |
|||
routeCode: values.code, |
|||
dangerDescription: values.danger, |
|||
name: values.user, |
|||
id: recordRow?.id |
|||
} |
|||
dispatch(editTask(val)).then(res => { |
|||
if (res.success) { |
|||
onClose() |
|||
form.resetFields() |
|||
} |
|||
}) |
|||
}) |
|||
} |
|||
|
|||
return ( |
|||
<Modal visible={visible} |
|||
title={lookVal ? '查看' : recordRow ? '编辑任务' : '新增数据'} |
|||
onCancel={() => { |
|||
onClose() |
|||
form.resetFields()//清空所有个表单的值
|
|||
setSelectVal('')//置空路线代码的选择
|
|||
}} |
|||
onOk={ |
|||
handleSaveUpdate |
|||
} |
|||
okButtonProps={{ |
|||
disabled: lookVal ? true : false, |
|||
}} |
|||
cancelButtonProps={{ |
|||
disabled: lookVal ? true : false, |
|||
}} |
|||
> |
|||
<Form form={form}> |
|||
<Form.Item |
|||
label="路线名称" |
|||
name="name" |
|||
//initialValues={recordRow?.road.routeName}
|
|||
rules={[{ required: true, message: '路线名称' }]} > |
|||
<Select |
|||
disabled={lookVal ? true : false} |
|||
allowClear='true' |
|||
showSearch |
|||
placeholder="请输入关键词" |
|||
onChange={(value) => { |
|||
console.log('value', value) |
|||
onChange() |
|||
setSelectVal(value) |
|||
}} |
|||
filterOption={(input, option) => |
|||
(option?.label ?? '').toLowerCase().includes(input.toLowerCase()) |
|||
} |
|||
options={roadRes?.map((item) => ({ |
|||
label: item.routeName, |
|||
value: item.routeCode |
|||
}) |
|||
)} |
|||
/> |
|||
</Form.Item> |
|||
<Form.Item |
|||
label="路线代码" |
|||
name="code" |
|||
rules={[{ required: true, message: '路线代码' }]}> |
|||
<Select |
|||
disabled={lookVal ? true : false} |
|||
placeholder="请输入关键词" |
|||
value={selectVal} |
|||
> |
|||
<Select.Option key={selectVal}>{selectVal}</Select.Option> |
|||
</Select> |
|||
</Form.Item> |
|||
<Form.Item |
|||
label="隐患说明" |
|||
name="danger" |
|||
rules={[{ required: true, message: '隐患说明' }]}> |
|||
<TextArea disabled={lookVal ? true : false} /> |
|||
</Form.Item> |
|||
<Form.Item |
|||
label="责任人" |
|||
name="user" |
|||
rules={[{ required: true, message: '责任人' }]}> |
|||
<Select |
|||
disabled={lookVal ? true : false} |
|||
allowClear='true' |
|||
showSearch |
|||
placeholder="请输入负责人" |
|||
options={userList?.map((item) => ({ |
|||
label: item.name, |
|||
value: item.name |
|||
}) |
|||
)} |
|||
/> |
|||
</Form.Item> |
|||
{lookVal ? <Form.Item |
|||
label="下发时间" |
|||
name="issuanceTime" |
|||
> |
|||
<Input disabled={lookVal ? true : false} /> |
|||
</Form.Item> : ''} |
|||
{lookVal ? <Form.Item |
|||
label="图片说明" |
|||
name="picture" |
|||
> |
|||
<Input disabled={lookVal ? true : false} /> |
|||
</Form.Item> : ''} |
|||
</Form> |
|||
</Modal > |
|||
|
|||
) |
|||
} |
|||
function mapStateToProps(state) { |
|||
const { auth } = state |
|||
return { |
|||
user: auth.user, |
|||
} |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(AddModal) |
|||
@ -0,0 +1,186 @@ |
|||
'use strict'; |
|||
import React, { useState, useEffect } from 'react'; |
|||
import { connect } from 'react-redux'; |
|||
import { Button, Table, Spin, Select, Divider, Popconfirm } from 'antd'; |
|||
import moment from 'moment'; |
|||
import { debounce } from 'lodash' |
|||
import AddModal from '../components/task/addTaskModal'; |
|||
import { getRoadway } from '../actions/infor' |
|||
import { getTask } from '../actions/task' |
|||
import { delTask } from '../actions/task' |
|||
|
|||
const Task = (props) => { |
|||
const { dispatch, isRequesting } = props |
|||
const [addModalVis, setAddModalVis] = useState(false) |
|||
const [roadRes, setRoadRes] = useState([])//路线列表
|
|||
const [selectVal, setSelectVal] = useState('all')//选择框得值
|
|||
const [inputVal, setIputVal] = useState(undefined) |
|||
const [taskRes, setTaskRes] = useState([]) |
|||
const [recordRow, setRecordRow] = useState(null) |
|||
const [lookVal, setLookval] = useState('') |
|||
useEffect(async () => { |
|||
const res = await dispatch(getRoadway({})) |
|||
setRoadRes(res.payload.data) |
|||
}, []) |
|||
|
|||
const getData = async (querySelect = { id: inputVal, isdanger: selectVal === 'all' ? undefined : selectVal === 'y' ? true : false }) => { |
|||
console.log('getData', inputVal, selectVal) |
|||
const task = await dispatch(getTask(querySelect)) |
|||
setTaskRes(task.payload?.data) |
|||
} |
|||
useEffect(async () => { |
|||
getData() |
|||
}, []) |
|||
//搜索道路名称
|
|||
const searchRoadName = async (value) => { |
|||
const task = await dispatch(getTask({ id: value, isdanger: selectVal === 'all' ? undefined : selectVal === 'y' ? true : false })) |
|||
setTaskRes(task.payload?.data) |
|||
setIputVal(value) |
|||
} |
|||
//选择安全是否消除
|
|||
const changeSelect = async (value) => { |
|||
console.log('value', value) |
|||
const task1 = await dispatch(getTask({ id: inputVal, isdanger: value === 'all' ? undefined : value === 'y' ? true : false })) |
|||
setTaskRes(task1.payload?.data) |
|||
setSelectVal(value) |
|||
} |
|||
//刪除task
|
|||
const delTaskHandler = async (record) => { |
|||
const res = await dispatch(delTask({ id: record.id })) |
|||
if (res.success) { |
|||
const task = await getData() |
|||
setTaskRes(task.payload?.data) |
|||
} |
|||
} |
|||
//查看
|
|||
const look = (record) => { |
|||
setAddModalVis(true) |
|||
setLookval(record) |
|||
setRecordRow(record); |
|||
|
|||
} |
|||
//配置表格列
|
|||
const columns = [{ |
|||
title: '路线名称', |
|||
render: (_, record) => { |
|||
return <div>{record.road.routeName}</div> |
|||
} |
|||
}, |
|||
{ |
|||
title: '路线代码', |
|||
render: (_, record) => { |
|||
return <div>{record.road.routeCode}</div> |
|||
} |
|||
}, |
|||
{ |
|||
title: '隐患说明', |
|||
dataIndex: 'dangerDescription', |
|||
}, |
|||
{ |
|||
title: '下发时间', |
|||
render: (_, record) => { |
|||
return <div>{record.issuanceTime ? moment(record?.issuanceTime).format('YYYY-MM-DD HH:mm:ss') : ''}</div> |
|||
} |
|||
}, |
|||
{ |
|||
title: '责任人', |
|||
render: (_, record) => { |
|||
return <div>{record.user.name}</div> |
|||
} |
|||
}, |
|||
{ |
|||
title: '是否消除隐患', |
|||
render: (_, record) => { |
|||
return <div>{record.isdanger === null ? '' : record.isdanger === 'true' ? '是' : '否'}</div> |
|||
} |
|||
}, |
|||
{ |
|||
title: '上报时间', |
|||
render: (_, record) => { |
|||
return <div>{record.reportTime ? moment(record.reportTime).format('YYYY-MM-DD HH:mm:ss') : ''}</div> |
|||
} |
|||
}, |
|||
{ |
|||
title: '操作', |
|||
render: (dom, record) => { |
|||
return <div> |
|||
{record.reportTime ? <Button type='link' onClick={() => { |
|||
setRecordRow(record); |
|||
setAddModalVis(true) |
|||
}}>编辑</Button> : ''} |
|||
<Popconfirm title='确定要删除吗？' onConfirm={() => { delTaskHandler(record) }}><Button type='link'>刪除</Button></Popconfirm> |
|||
<Button type='link' onClick={() => { look(record) }}>查看</Button> |
|||
</div> |
|||
|
|||
} |
|||
}, |
|||
] |
|||
|
|||
//配置分页
|
|||
const paginationOpt = { |
|||
defaultCurrent: 1, |
|||
defaultPageSize: 5, |
|||
total: taskRes?.count, |
|||
showSizeChanger: true, |
|||
showQuickJumper: true, |
|||
pageSizeOptions: ["5", "10", "15"], |
|||
showTotal: function () { |
|||
return `共有${taskRes?.count}条` |
|||
} |
|||
} |
|||
|
|||
|
|||
return (<div className='taskMenu'> |
|||
<div style={{ display: 'flex', flexWrap: ' nowrap', justifyContent: 'space-between' }}> |
|||
<div style={{ marginLeft: 20 }}> |
|||
路线名称: <Select |
|||
allowClear='true' |
|||
loading={isRequesting} |
|||
showSearch |
|||
placeholder="请输入关键词" |
|||
//optionFilterProp="children"
|
|||
onChange={(value) => { searchRoadName(value) }} |
|||
//onSearch={(value) => { console.log('11111', value) }}
|
|||
filterOption={(input, option) => |
|||
(option?.label ?? '').toLowerCase().includes(input.toLowerCase()) |
|||
} |
|||
options={roadRes?.map((item) => ({ |
|||
label: item.routeName, |
|||
value: item.id |
|||
}) |
|||
)} |
|||
/> |
|||
</div> |
|||
<div> |
|||
是否存在安全隐患: <Select placeholder='请输入关键词' |
|||
options={[{ value: 'all', label: '全部' }, { value: 'y', label: '是' }, { value: 'n', label: '否' }]} |
|||
|
|||
onChange={(value) => { changeSelect(value) }}> |
|||
</Select> |
|||
</div> |
|||
<div > |
|||
<Button type='primary' onClick={() => { setRecordRow(null); setAddModalVis(true) }}>新增</Button> |
|||
</div> |
|||
</div> |
|||
<Divider style={{ marginTop: 10 }} /> |
|||
<Table columns={columns} dataSource={taskRes?.rows} size="small" pagination={paginationOpt}> |
|||
</Table> |
|||
<AddModal visible={addModalVis} onClose={() => { setAddModalVis(false); getData(); setRecordRow(null); setLookval(null) }} recordRow={recordRow} |
|||
lookVal={lookVal} |
|||
></AddModal> |
|||
|
|||
</div >) |
|||
|
|||
|
|||
} |
|||
|
|||
function mapStateToProps(state) { |
|||
const { auth } = state; |
|||
return { |
|||
user: auth.user, |
|||
error: auth.error, |
|||
isRequesting: auth.isRequesting, |
|||
} |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Task); |
|||
Loading…
Reference in new issue