24 changed files with 1540 additions and 1017 deletions
@ -0,0 +1,14 @@ |
|||||
|
alter table maintenance_plan |
||||
|
add record_id integer[]; |
||||
|
|
||||
|
comment on column maintenance_plan.record_id is '响应记录id'; |
||||
|
|
||||
|
|
||||
|
|
||||
|
alter table maintenance_record |
||||
|
add files jsonb; |
||||
|
|
||||
|
comment on column maintenance_record.files is '文件'; |
||||
|
|
||||
|
|
||||
|
|
||||
@ -1,89 +1,107 @@ |
|||||
import React,{useState,useEffect,useRef} from 'react' |
import React, { useState, useEffect, useRef } from 'react' |
||||
import { connect } from 'react-redux'; |
import { connect } from 'react-redux'; |
||||
import { Button,Table,Modal,Form } from '@douyinfe/semi-ui'; |
import moment from 'moment' |
||||
|
import { Button, Table, Modal, Form } from '@douyinfe/semi-ui'; |
||||
|
|
||||
|
|
||||
const AddModal=(props)=>{ |
const AddModal = (props) => { |
||||
const {visible,onClose,recordRow,pepList,actions,dispatch}=props |
const { visible, onClose, recordRow, pepList, actions, dispatch, respondRecordData } = props |
||||
const{service}=actions |
const { service } = actions |
||||
const api = useRef(); |
const api = useRef(); |
||||
useEffect(()=>{ |
const [selectValue, setSelectValue] = useState([]) |
||||
},[]) |
|
||||
//编辑和新增的逻辑 |
|
||||
const okHandler=()=>{ |
|
||||
//api.current.setValues({'manger':recordRow?.maintenancePlanExecuteUsers.map((item)=>{return item.id})},) |
|
||||
api.current.validate().then((res)=>{ |
|
||||
res.manger |
|
||||
recordRow?.maintenancePlanExecuteUsers |
|
||||
const query={ |
|
||||
id:recordRow?.id, |
|
||||
actualFinishTime:res.realityTime, |
|
||||
planFinishTime:res.planTime, |
|
||||
remark:res.notes, |
|
||||
state:res.status, |
|
||||
type:'period', |
|
||||
missionName:res.taskName, |
|
||||
manger:res.manger, |
|
||||
msg:recordRow?'编辑周期性计划':'添加周期性计划' |
|
||||
} |
|
||||
dispatch(service.editMaintenancePlan(query)).then((res)=>{ |
|
||||
if(res.success) onClose() ; api.current.reset() |
|
||||
|
|
||||
|
useEffect(() => { |
||||
|
}, []) |
||||
|
//编辑和新增的逻辑 |
||||
|
const okHandler = () => { |
||||
|
api.current.validate().then((res) => { |
||||
|
console.log(111, res, respondRecordData?.map(v => ({ value: v.id, label: v.sketch }))); |
||||
|
const query = { |
||||
|
id: recordRow?.id, |
||||
|
actualFinishTime: res.realityTime, |
||||
|
planFinishTime: res.planTime, |
||||
|
remark: res.notes, |
||||
|
state: res.status, |
||||
|
type: 'period', |
||||
|
missionName: res.taskName, |
||||
|
manger: res.manger, |
||||
|
recordId: res.recordId, |
||||
|
msg: recordRow ? '编辑周期性计划' : '添加周期性计划' |
||||
|
} |
||||
|
dispatch(service.editMaintenancePlan(query)).then((res) => { |
||||
|
if (res.success) onClose(); api.current.reset() |
||||
|
|
||||
}) |
|
||||
|
|
||||
}) |
}) |
||||
} |
|
||||
return (<div> |
|
||||
<Modal visible={visible} onCancel={()=>{onClose()}} title={recordRow?'周期性计划编辑':'周期性计划添加'} |
|
||||
onOk={okHandler} |
|
||||
|
|
||||
> |
}) |
||||
<Form |
} |
||||
initValues={{'taskName':recordRow?.missionName, |
return (<div> |
||||
'manger':recordRow?.maintenancePlanExecuteUsers.map((item)=>{return item.pepUserId}), |
<Modal visible={visible} onCancel={() => { onClose() }} title={recordRow ? '周期性计划编辑' : '周期性计划添加'} |
||||
'reason':recordRow?.reason, |
onOk={okHandler} |
||||
'status':recordRow?.state, |
|
||||
'notes':recordRow?.remark, |
|
||||
'planTime':recordRow?.planFinishTime, |
|
||||
'realityTime':recordRow?.actualFinishTime}} |
|
||||
|
|
||||
getFormApi={formApi => api.current = formApi} |
> |
||||
labelCol={{ span: 6 }} |
<Form |
||||
labelPosition='left' |
initValues={{ |
||||
> |
'taskName': recordRow?.missionName, |
||||
<Form.Input field='taskName' label='任务名称:' maxLength={30} rules={[ |
'manger': recordRow?.maintenancePlanExecuteUsers.map((item) => { return item.pepUserId }), |
||||
{ required: true, message: '请输入任务名称' }, |
'reason': recordRow?.reason, |
||||
]} ></Form.Input> |
'status': recordRow?.state, |
||||
<Form.Select field='manger' label='责任人' rules={[{ required: true, message: '请输入责任人' }]} trigger='blur' style={{ width:'100%' }} |
'notes': recordRow?.remark, |
||||
multiple filter> |
'planTime': recordRow?.planFinishTime, |
||||
{pepList?.map((item)=>{return ( <Form.Select.OptGroup label={item.name}> |
'realityTime': recordRow?.actualFinishTime, |
||||
{item.users.map((item1)=>{ |
'recordId': recordRow?.recordId || [], |
||||
return <Form.Select.Option value={item1.id} label={item1.name}></Form.Select.Option> |
}} |
||||
})} |
|
||||
</Form.Select.OptGroup> )})} |
|
||||
</Form.Select> |
|
||||
<Form.Select label='完成情况'style={{ width: 200 }} field='status'> |
|
||||
<Form.Select.Option value='未完成'>未完成</Form.Select.Option> |
|
||||
<Form.Select.Option value='进行中'>进行中</Form.Select.Option> |
|
||||
<Form.Select.Option value='已完成'>已完成</Form.Select.Option> |
|
||||
<Form.Select.Option value='挂起'>挂起</Form.Select.Option> |
|
||||
</Form.Select> |
|
||||
<Form.TextArea label='备注' field='notes' placeholder='故障发生原因及解决方案'></Form.TextArea> |
|
||||
<Form.DatePicker label='计划完成时间:' field='planTime' rules={[{ required: true, message: '请选择计划完成时间' },]}></Form.DatePicker> |
|
||||
<Form.DatePicker label='实际完成时间:' field='realityTime'></Form.DatePicker> |
|
||||
|
|
||||
</Form> |
getFormApi={formApi => api.current = formApi} |
||||
</Modal> |
labelCol={{ span: 6 }} |
||||
|
labelPosition='left' |
||||
|
> |
||||
|
<Form.Input field='taskName' label='任务名称:' maxLength={30} rules={[ |
||||
|
{ required: true, message: '请输入任务名称' }, |
||||
|
]} ></Form.Input> |
||||
|
<Form.Select field='manger' label='责任人' rules={[{ required: true, message: '请输入责任人' }]} trigger='blur' style={{ width: '100%' }} |
||||
|
multiple filter> |
||||
|
{pepList?.map((item) => { |
||||
|
return (<Form.Select.OptGroup label={item.name}> |
||||
|
{item.users.map((item1) => { |
||||
|
return <Form.Select.Option value={item1.id} label={item1.name}></Form.Select.Option> |
||||
|
})} |
||||
|
</Form.Select.OptGroup>) |
||||
|
})} |
||||
|
</Form.Select> |
||||
|
<Form.Select label='完成情况' style={{ width: 200 }} field='status'> |
||||
|
<Form.Select.Option value='未完成'>未完成</Form.Select.Option> |
||||
|
<Form.Select.Option value='进行中'>进行中</Form.Select.Option> |
||||
|
<Form.Select.Option value='已完成'>已完成</Form.Select.Option> |
||||
|
<Form.Select.Option value='挂起'>挂起</Form.Select.Option> |
||||
|
</Form.Select> |
||||
|
<Form.TextArea label='备注' field='notes' placeholder='故障发生原因及解决方案'></Form.TextArea> |
||||
|
<Form.DatePicker label='计划完成时间:' field='planTime' rules={[{ required: true, message: '请选择计划完成时间' },]}></Form.DatePicker> |
||||
|
<Form.DatePicker label='实际完成时间:' field='realityTime'></Form.DatePicker> |
||||
|
|
||||
</div>) |
<Form.Select field='recordId' label='响应关联：' style={{ width: '100%' }} |
||||
|
dropdownStyle={{ width: 400 }} |
||||
|
// optionList={respondRecordData.map(v => ({ value: v.id, label: `${v.sketch} / ${moment(v.occurrenceTime).format('YYYY-MM-DD')}` }))} |
||||
|
multiple filter |
||||
|
> |
||||
|
{respondRecordData?.map((v) => { |
||||
|
return <Form.Select.Option value={v.id} label={`${v.sketch} / ${moment(v.occurrenceTime).format('YYYY-MM-DD')}`}> |
||||
|
|
||||
|
</Form.Select.Option> |
||||
|
})} |
||||
|
</Form.Select> |
||||
|
</Form> |
||||
|
</Modal> |
||||
|
|
||||
|
</div>) |
||||
} |
} |
||||
|
|
||||
|
|
||||
function mapStateToProps (state) { |
function mapStateToProps (state) { |
||||
const { global } = state; |
const { global } = state; |
||||
return { |
return { |
||||
actions: global.actions, |
actions: global.actions, |
||||
}; |
}; |
||||
} |
} |
||||
export default connect(mapStateToProps)(AddModal) |
export default connect(mapStateToProps)(AddModal) |
||||
@ -0,0 +1,87 @@ |
|||||
|
import React, { useState, useEffect, useRef } from 'react' |
||||
|
import { connect } from 'react-redux'; |
||||
|
import moment from 'moment' |
||||
|
import { Button, Table, Modal, Form } from '@douyinfe/semi-ui'; |
||||
|
|
||||
|
|
||||
|
const PlanAddmodal = (props) => { |
||||
|
const { visible, onClose, recordRow, actions, dispatch } = props |
||||
|
const { service, install } = actions |
||||
|
const [pepList, setPepList] = useState([])//角色分配 |
||||
|
|
||||
|
const api = useRef(); |
||||
|
const [selectValue, setSelectValue] = useState([]) |
||||
|
|
||||
|
useEffect(() => { |
||||
|
dispatch(install.getOrganizationDeps()).then((res) => {//获取项企(PEP)全部部门及其下用户 |
||||
|
setPepList(res.payload.data) |
||||
|
}) |
||||
|
}, []) |
||||
|
//编辑和新增的逻辑 |
||||
|
const okHandler = () => { |
||||
|
api.current.validate().then((res) => { |
||||
|
const query = { |
||||
|
actualFinishTime: res.realityTime, |
||||
|
planFinishTime: res.planTime, |
||||
|
remark: res.notes, |
||||
|
state: res.status, |
||||
|
type: 'period', |
||||
|
missionName: res.taskName, |
||||
|
manger: res.manger, |
||||
|
recordId: [recordRow.id], |
||||
|
msg: '添加周期性计划' |
||||
|
} |
||||
|
dispatch(service.editMaintenancePlan(query)).then((res) => { |
||||
|
if (res.success) onClose(); api.current.reset() |
||||
|
|
||||
|
|
||||
|
}) |
||||
|
|
||||
|
}) |
||||
|
} |
||||
|
return (<div> |
||||
|
<Modal visible={visible} onCancel={() => { onClose() }} title={'添加周期性计划'} |
||||
|
onOk={okHandler} |
||||
|
|
||||
|
> |
||||
|
<Form |
||||
|
getFormApi={formApi => api.current = formApi} |
||||
|
labelCol={{ span: 6 }} |
||||
|
labelPosition='left' |
||||
|
> |
||||
|
<Form.Input field='taskName' label='任务名称:' maxLength={30} rules={[ |
||||
|
{ required: true, message: '请输入任务名称' }, |
||||
|
]} ></Form.Input> |
||||
|
<Form.Select field='manger' label='责任人' rules={[{ required: true, message: '请输入责任人' }]} trigger='blur' style={{ width: '100%' }} |
||||
|
multiple filter> |
||||
|
{pepList?.map((item) => { |
||||
|
return (<Form.Select.OptGroup label={item.name}> |
||||
|
{item.users.map((item1) => { |
||||
|
return <Form.Select.Option value={item1.id} label={item1.name}></Form.Select.Option> |
||||
|
})} |
||||
|
</Form.Select.OptGroup>) |
||||
|
})} |
||||
|
</Form.Select> |
||||
|
<Form.Select label='完成情况' style={{ width: 200 }} field='status'> |
||||
|
<Form.Select.Option value='未完成'>未完成</Form.Select.Option> |
||||
|
<Form.Select.Option value='进行中'>进行中</Form.Select.Option> |
||||
|
<Form.Select.Option value='已完成'>已完成</Form.Select.Option> |
||||
|
<Form.Select.Option value='挂起'>挂起</Form.Select.Option> |
||||
|
</Form.Select> |
||||
|
<Form.TextArea label='备注' field='notes' placeholder='故障发生原因及解决方案'></Form.TextArea> |
||||
|
<Form.DatePicker label='计划完成时间:' field='planTime' rules={[{ required: true, message: '请选择计划完成时间' },]}></Form.DatePicker> |
||||
|
<Form.DatePicker label='实际完成时间:' field='realityTime'></Form.DatePicker> |
||||
|
</Form> |
||||
|
</Modal> |
||||
|
|
||||
|
</div>) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
function mapStateToProps (state) { |
||||
|
const { global } = state; |
||||
|
return { |
||||
|
actions: global.actions, |
||||
|
}; |
||||
|
} |
||||
|
export default connect(mapStateToProps)(PlanAddmodal) |
||||
@ -1,144 +1,178 @@ |
|||||
'use strict'; |
'use strict'; |
||||
|
|
||||
import React, { useEffect,useState,useRef } from 'react'; |
import React, { useEffect, useState, useRef } from 'react'; |
||||
import { Modal,Form,DatePicker,useFormApi,actions,Button } from '@douyinfe/semi-ui'; |
import { Modal, Form, DatePicker, Upload, actions, Button } from '@douyinfe/semi-ui'; |
||||
import { connect } from 'react-redux'; |
import { connect } from 'react-redux'; |
||||
import moment from 'moment' |
import moment from 'moment' |
||||
|
import { IconDeleteStroked, IconEditStroked, IconUpload, IconAlertCircle, IconSearch } from '@douyinfe/semi-icons'; |
||||
|
|
||||
const RecordModal =(props)=>{ |
const RecordModal = (props) => { |
||||
const{visible,onClose,dispatch,recordRow,pepList,actions}=props |
const { visible, onClose, dispatch, recordRow, pepList, actions, addRecord, qiniu, apiRoot } = props |
||||
const [startTime,setStartTime]=useState('') |
const [startTime, setStartTime] = useState('') |
||||
const [endTime,setEndTime]=useState('') |
const [endTime, setEndTime] = useState('') |
||||
const FormApi = useRef(); |
const [uploadData, setUploadData] = useState({}) |
||||
const{service} =actions |
const FormApi = useRef(); |
||||
// let t=0//天数 |
const { service } = actions |
||||
// let h=0//小时数 |
// let t=0//天数 |
||||
// let s=0//秒数 |
// let h=0//小时数 |
||||
|
// let s=0//秒数 |
||||
// console.log('endTimex',endTime) |
// console.log('endTimex',endTime) |
||||
useEffect(()=>{ |
useEffect(() => { |
||||
setEndTime(recordRow?.solvingTime) |
setEndTime(recordRow?.solvingTime) |
||||
setStartTime(recordRow?.occurrenceTime) |
setStartTime(recordRow?.occurrenceTime) |
||||
console.log('recordRow',recordRow) |
console.log('recordRow', recordRow) |
||||
|
|
||||
},[recordRow]) |
}, [recordRow]) |
||||
const cancelHandler=()=>{ |
const cancelHandler = () => { |
||||
onClose() |
onClose() |
||||
setStartTime('') |
setStartTime('') |
||||
setEndTime('') |
setEndTime('') |
||||
|
|
||||
} |
} |
||||
const okHandler=()=>{ |
const okHandler = () => { |
||||
FormApi.current.validate().then((res)=>{ |
FormApi.current.validate().then((res) => { |
||||
console.log('recordRow',res) |
console.log('recordRow', res) |
||||
const editVal={ |
const editVal = { |
||||
id:recordRow?.id, |
id: recordRow?.id, |
||||
solvingTime:res.endTime, |
solvingTime: res.endTime, |
||||
occurrencTime:res.startTime, |
occurrencTime: res.startTime, |
||||
sketch:res.name, |
sketch: res.name, |
||||
record:res.record, |
record: res.record, |
||||
settler:res.settler, |
settler: res.settler, |
||||
type:res.type, |
type: res.type, |
||||
msg:recordRow?'编辑服务记录':'添加服务记录' |
msg: recordRow ? '编辑响应记录' : '添加响应记录', |
||||
} |
files: [{ ...uploadData }] |
||||
dispatch(service.addRecord(editVal)).then(res => { |
} |
||||
|
|
||||
|
dispatch(service.addRecord(editVal)).then(res => { |
||||
if (res.success) { |
if (res.success) { |
||||
onClose() |
onClose() |
||||
FormApi.current.reset() |
FormApi.current.reset() |
||||
setStartTime('');setEndTime('') |
setStartTime(''); setEndTime('') |
||||
} |
} |
||||
}) |
}) |
||||
}) |
}) |
||||
} |
} |
||||
return <Modal |
return <Modal |
||||
title={recordRow?'编辑响应记录':'添加响应记录'} |
title={recordRow ? '编辑响应记录' : '添加响应记录'} |
||||
visible={visible} |
visible={visible} |
||||
footer={ |
footer={ |
||||
//recordRow?<Button onClick={cancelHandler}>取消</Button>: |
//recordRow?<Button onClick={cancelHandler}>取消</Button>: |
||||
<div> |
<div> |
||||
<Button onClick={cancelHandler}>取消</Button> |
<Button onClick={cancelHandler}>取消</Button> |
||||
<Button theme='solid' type='primary' onClick={okHandler}>确定</Button> |
<Button loading={addRecord} theme='solid' type='primary' onClick={okHandler}>确定</Button> |
||||
</div>} |
</div>} |
||||
onCancel={cancelHandler} |
onCancel={cancelHandler} |
||||
onOk={okHandler} |
// onOk={okHandler} |
||||
> |
> |
||||
<Form wrapperCol={{ span: 20 }} |
<Form wrapperCol={{ span: 20 }} |
||||
initValues={{'name':recordRow?.sketch, |
initValues={{ |
||||
'startTime':recordRow?.occurrenceTime, |
'name': recordRow?.sketch, |
||||
'endTime':recordRow?.solvingTime, |
'startTime': recordRow?.occurrenceTime, |
||||
'settler':recordRow?.maintenanceRecordExecuteUsers.map((item)=>{return item.pepUserId}), |
'endTime': recordRow?.solvingTime, |
||||
'type':recordRow?.type, |
'settler': recordRow?.maintenanceRecordExecuteUsers.map((item) => { return item.pepUserId }), |
||||
'record':recordRow?.record, |
'type': recordRow?.type, |
||||
'breakTime':recordRow?parseInt(recordRow.interruptDuration/60/60/24)+'天'+ |
'record': recordRow?.record, |
||||
parseInt(recordRow.interruptDuration/60/60%24)+'时'+ |
'breakTime': recordRow ? parseInt(recordRow.interruptDuration / 60 / 60 / 24) + '天' + |
||||
parseInt(recordRow.interruptDuration/60%60)+'分':'0天0时0秒' |
parseInt(recordRow.interruptDuration / 60 / 60 % 24) + '时' + |
||||
|
parseInt(recordRow.interruptDuration / 60 % 60) + '分' : '0天0时0秒' |
||||
|
}} |
||||
|
getFormApi={formApi => FormApi.current = formApi} |
||||
|
labelPosition='left' |
||||
|
labelAlign='right'> |
||||
|
<Form.Input field='name' label='故障简述:' trigger='blur' |
||||
|
|
||||
|
placeholder='请输入故障简述' rules={[{ required: true, message: '请输入故障简述' }]} maxLength={30} /> |
||||
|
<Form.DatePicker field='startTime' label='发生时间:' rules={[{ required: true, message: '请输入发生时间' }]} |
||||
|
type="dateTime" onChange={(e) => { |
||||
|
const seconds = (moment(endTime).format('x') - moment(e).format('x')) / 1000//两个时间的秒数 |
||||
|
const tdd = e && endTime ? parseInt(seconds / 60 / 60 / 24) : 0//取整天 |
||||
|
const tdh = e && endTime ? parseInt(seconds / 60 / 60 % 24) : 0//取整时 |
||||
|
const tds = e && endTime ? parseInt(seconds / 60 % 60) : 0//取整分 |
||||
|
setStartTime(e) |
||||
|
FormApi.current.setValue('breakTime', `${tdd}天${tdh}时${tds}分`) |
||||
}} |
}} |
||||
getFormApi={formApi => FormApi.current = formApi} |
/> |
||||
labelPosition='left' |
<Form.DatePicker field='endTime' label='解决时间:' initValue={endTime} rules={[{ required: true, message: '请输入解决时间' }]} |
||||
labelAlign='right'> |
type="dateTime" onChange={(e) => { |
||||
<Form.Input field='name' label='故障简述:' trigger='blur' |
const seconds = (moment(e).format('x') - moment(startTime).format('x')) / 1000//两个时间的秒数 |
||||
|
const tdd = e && startTime ? parseInt(seconds / 60 / 60 / 24) : 0//取整天 |
||||
|
const tdh = e && startTime ? parseInt(seconds / 60 / 60 % 24) : 0//取整时 |
||||
|
const tds = e && startTime ? parseInt(seconds / 60 % 60) : 0//取整分 |
||||
|
setEndTime(e);//console.log('sss',moment(endTime-startTime).format('DD天hh时mm分')) |
||||
|
FormApi.current.setValue('breakTime', `${tdd}天${tdh}时${tds}分`) |
||||
|
|
||||
placeholder='请输入故障简述' rules={[{ required: true, message:'请输入故障简述' }]} maxLength={30}/> |
}} /> |
||||
<Form.DatePicker field='startTime' label='发生时间:' rules={[{ required: true, message:'请输入发生时间' }]} |
<Form.Input field='breakTime' label='中断时间:' disabled /> |
||||
type="dateTime" onChange={(e)=>{ |
{/* 中断时间:{endTime&&startTime? <span style={{marginLeft:30}}>{`${tdd}天${tdh}时${tds}分`}</span>:recordRow?.interruptDuration} */} |
||||
const seconds=(moment(endTime).format('x')-moment(e).format('x'))/1000//两个时间的秒数 |
<Form.Select field='settler' label='解决者:' trigger='blur' style={{ width: '100%' }} |
||||
const tdd=e&&endTime?parseInt(seconds/60/60/24):0//取整天 |
filter |
||||
const tdh=e&&endTime?parseInt(seconds/60/60%24):0//取整时 |
rules={[{ required: true, message: '请输入解决者' }]} multiple> |
||||
const tds=e&&endTime?parseInt(seconds/60%60):0//取整分 |
{pepList?.map((item) => { |
||||
setStartTime(e) |
return (<Form.Select.OptGroup label={item.name}> |
||||
FormApi.current.setValue('breakTime',`${tdd}天${tdh}时${tds}分`) |
{item.users.map((item1) => { |
||||
}} |
return <Form.Select.Option value={item1.id} label={item1.name}></Form.Select.Option> |
||||
/> |
|
||||
<Form.DatePicker field='endTime' label='解决时间:' initValue={endTime} rules={[{ required: true, message:'请输入解决时间' }]} |
|
||||
type="dateTime" onChange={(e)=>{ |
|
||||
const seconds=(moment(e).format('x')-moment(startTime).format('x'))/1000//两个时间的秒数 |
|
||||
const tdd=e&&startTime?parseInt(seconds/60/60/24):0//取整天 |
|
||||
const tdh=e&&startTime?parseInt(seconds/60/60%24):0//取整时 |
|
||||
const tds=e&&startTime?parseInt(seconds/60%60):0//取整分 |
|
||||
setEndTime(e);//console.log('sss',moment(endTime-startTime).format('DD天hh时mm分')) |
|
||||
FormApi.current.setValue('breakTime',`${tdd}天${tdh}时${tds}分`) |
|
||||
|
|
||||
}} /> |
})} |
||||
<Form.Input field='breakTime' label='中断时间:' disabled/> |
</Form.Select.OptGroup>) |
||||
{/* 中断时间:{endTime&&startTime? <span style={{marginLeft:30}}>{`${tdd}天${tdh}时${tds}分`}</span>:recordRow?.interruptDuration} */} |
})} |
||||
<Form.Select field='settler' label='解决者:' trigger='blur' style={{ width:'100%' }} |
</Form.Select> |
||||
filter |
<Form.Select field="type" label={{ text: '故障类型' }} style={{ width: 200 }} rules={[{ required: true, message: '请输入故障类型' }]}> |
||||
rules={[{ required: true, message:'请输入解决者' }]} multiple> |
<Form.Select.Option value="es异常">es异常</Form.Select.Option> |
||||
{pepList?.map((item)=>{return ( <Form.Select.OptGroup label={item.name}> |
<Form.Select.Option value="数据库异常">数据库异常</Form.Select.Option> |
||||
{item.users.map((item1)=>{ |
<Form.Select.Option value="应用异常">应用异常</Form.Select.Option> |
||||
return <Form.Select.Option value={item1.id} label={item1.name}></Form.Select.Option> |
<Form.Select.Option value="kafka异常">kafka异常</Form.Select.Option> |
||||
|
<Form.Select.Option value="服务器异常">服务器异常</Form.Select.Option> |
||||
|
<Form.Select.Option value="DAC进程异常">DAC进程异常</Form.Select.Option> |
||||
|
<Form.Select.Option value="K8S集群异常">K8S集群异常</Form.Select.Option> |
||||
|
<Form.Select.Option value="redis服务异常">redis服务异常</Form.Select.Option> |
||||
|
<Form.Select.Option value="其他">其他</Form.Select.Option> |
||||
|
</Form.Select> |
||||
|
<Form.TextArea field="record" label={{ text: '故障记录' }} rules={[{ required: true, message: '请输入故障记录' }]}> |
||||
|
</Form.TextArea> |
||||
|
|
||||
})} |
<div style={{ display: 'flex', marginLeft: 30 }}> |
||||
</Form.Select.OptGroup> )})} |
<div style={{ marginTop: 6 }}>文件：</div> |
||||
</Form.Select> |
<Upload |
||||
<Form.Select field="type" label={{ text: '故障类型'}} style={{ width: 200 }} rules={[{ required: true, message:'请输入故障类型' }]}> |
style={{ display: 'inline-block' }} |
||||
<Form.Select.Option value="es异常">es异常</Form.Select.Option> |
action={`${apiRoot}/attachments/p`} |
||||
<Form.Select.Option value="数据库异常">数据库异常</Form.Select.Option> |
accept={'.txt, .doc, .docx, .xls, .xlsx, .pdf, .png, .jpg, .rar, .zip'} |
||||
<Form.Select.Option value="应用异常">应用异常</Form.Select.Option> |
limit={1} |
||||
<Form.Select.Option value="kafka异常">kafka异常</Form.Select.Option> |
maxSize={51200} |
||||
<Form.Select.Option value="服务器异常">服务器异常</Form.Select.Option> |
onRemove={() => { |
||||
<Form.Select.Option value="DAC进程异常">DAC进程异常</Form.Select.Option> |
setUploadData({}) |
||||
<Form.Select.Option value="K8S集群异常">K8S集群异常</Form.Select.Option> |
}} |
||||
<Form.Select.Option value="redis服务异常">redis服务异常</Form.Select.Option> |
onSuccess={(responseBody, file) => { |
||||
<Form.Select.Option value="其他">其他</Form.Select.Option> |
setUploadData({ |
||||
</Form.Select> |
name: file.name, |
||||
<Form.TextArea field="record" label={{text:'故障记录'}} rules={[{ required: true, message:'请输入故障记录' }]}> |
size: file.size, |
||||
</Form.TextArea> |
url: responseBody?.uploaded, |
||||
|
uploadTime: moment().format("YYYY-MM-DD HH:mm:ss") |
||||
|
}) |
||||
|
}} |
||||
|
> |
||||
|
<Button icon={<IconUpload />} theme="light"> |
||||
|
文件上传 |
||||
|
</Button> |
||||
|
</Upload> |
||||
|
</div> |
||||
|
|
||||
</Form> |
</Form> |
||||
|
|
||||
|
|
||||
|
|
||||
</Modal> |
</Modal> |
||||
} |
} |
||||
function mapStateToProps (state) { |
function mapStateToProps (state) { |
||||
const { auth, global, members, webSocket } = state; |
const { auth, global, members, webSocket, addRecord } = state; |
||||
return { |
console.log(addRecord); |
||||
// loading: members.isRequesting, |
return { |
||||
// user: auth.user, |
addRecord: addRecord.isRequesting, |
||||
actions: global.actions, |
// user: auth.user, |
||||
// members: members.data, |
actions: global.actions, |
||||
// socket: webSocket.socket |
qiniu: global.qiniu?.domain, |
||||
}; |
apiRoot: global.apiRoot |
||||
} |
}; |
||||
|
} |
||||
|
|
||||
export default connect(mapStateToProps)(RecordModal); |
export default connect(mapStateToProps)(RecordModal); |
||||
|
|||||
@ -1,156 +1,162 @@ |
|||||
import React, { useEffect,useState} from 'react'; |
import React, { useEffect, useState } from 'react'; |
||||
import { connect } from 'react-redux'; |
import { connect } from 'react-redux'; |
||||
import { Button,Table,Popconfirm,Pagination } from '@douyinfe/semi-ui'; |
import { Button, Table, Popconfirm, Pagination } from '@douyinfe/semi-ui'; |
||||
import Addmodal from '../components/cycAddmodal' |
import Addmodal from '../components/cycAddmodal' |
||||
import moment from 'moment' |
import moment from 'moment' |
||||
|
|
||||
|
|
||||
const Server = (props) => { |
const Server = (props) => { |
||||
const { dispatch, actions, user, loading, socket } = props |
const { dispatch, actions, user, loading, socket } = props |
||||
const{service,install}=actions |
const { service, install } = actions |
||||
const [addVis,setAddVis]=useState(false) |
const [addVis, setAddVis] = useState(false) |
||||
const [cycPlan,setCysPlan]=useState([]) |
const [cycPlan, setCysPlan] = useState([]) |
||||
const [recordRow,setRecordRow]=useState(null) |
const [recordRow, setRecordRow] = useState(null) |
||||
const [pepList, setPepList] = useState([])//角色分配 |
const [pepList, setPepList] = useState([])//角色分配 |
||||
const [pageSize,setPageSize]=useState(10) |
const [pageSize, setPageSize] = useState(10) |
||||
const [pageIndex,setPageIndex]=useState(1) |
const [pageIndex, setPageIndex] = useState(1) |
||||
const [total,setTotal]=useState() |
const [total, setTotal] = useState() |
||||
|
const [respondRecordData, setRespondRecordData] = useState([]) |
||||
|
|
||||
const getCycPlan=(query={type:'period',msg:'获取周期性计划',pageIndex,pageSize})=>{ |
const getCycPlan = (query = { type: 'period', msg: '获取周期性计划', pageIndex, pageSize }) => { |
||||
dispatch(service.getMaintenancePlan(query)).then((res)=>{ |
dispatch(service.getMaintenancePlan(query)).then((res) => { |
||||
setCysPlan(res?.payload.data.responseRes) |
setCysPlan(res?.payload.data.responseRes) |
||||
setTotal(res?.payload.data.count) |
setTotal(res?.payload.data.count) |
||||
}) |
}) |
||||
} |
} |
||||
useEffect(()=>{ |
useEffect(() => { |
||||
getCycPlan() |
getCycPlan() |
||||
dispatch(install.getOrganizationDeps()).then((res) => {//获取项企(PEP)全部部门及其下用户 |
dispatch(install.getOrganizationDeps()).then((res) => {//获取项企(PEP)全部部门及其下用户 |
||||
setPepList(res.payload.data) |
setPepList(res.payload.data) |
||||
}) |
}) |
||||
},[]) |
dispatch(service.respondRecord({})).then((res) => { |
||||
const delHandler=(record)=>{ |
if (res.success) { |
||||
const query={ |
setRespondRecordData(res?.payload.data) |
||||
responseId:record.id, |
} |
||||
msg:'删除周期性计划' |
}); |
||||
} |
}, []) |
||||
dispatch(service.delMaintenancePlan(query)).then((res)=>{ |
const delHandler = (record) => { |
||||
if(res.success) getCycPlan({type:'period',msg:'获取周期性计划',pageIndex:1,pageSize});setPageIndex(1) |
const query = { |
||||
}) |
responseId: record.id, |
||||
} |
msg: '删除周期性计划' |
||||
//配置分页 |
} |
||||
// const pagination={ |
dispatch(service.delMaintenancePlan(query)).then((res) => { |
||||
// total:total, |
if (res.success) getCycPlan({ type: 'period', msg: '获取周期性计划', pageIndex: 1, pageSize }); setPageIndex(1) |
||||
// defaultCurrent: 1, |
}) |
||||
// pageSize:pageSize, |
} |
||||
// showSizeChanger: true, |
//配置分页 |
||||
// currentPage:pageIndex, |
// const pagination={ |
||||
// showQuickJumper: true, |
// total:total, |
||||
// pageSizeOpts: ["5", "10", "15"], |
// defaultCurrent: 1, |
||||
// showTotal: function () { |
// pageSize:pageSize, |
||||
// return `共有${total}条` |
// showSizeChanger: true, |
||||
// }, |
// currentPage:pageIndex, |
||||
// onChange:(pageIndex,pageSize)=>{ |
// showQuickJumper: true, |
||||
// console.log('pageIndex1',pageIndex,pageSize) |
// pageSizeOpts: ["5", "10", "15"], |
||||
// setPageIndex(pageIndex) |
// showTotal: function () { |
||||
// setPageSize(pageSize) |
// return `共有${total}条` |
||||
// const query={ |
// }, |
||||
// pageIndex,pageSize,type:'temp',msg:'获取周期性计划' |
// onChange:(pageIndex,pageSize)=>{ |
||||
// } |
// console.log('pageIndex1',pageIndex,pageSize) |
||||
// getCycPlan(query) |
// setPageIndex(pageIndex) |
||||
// } |
// setPageSize(pageSize) |
||||
// } |
// const query={ |
||||
//console.log('cycPlan',cycPlan) |
// pageIndex,pageSize,type:'temp',msg:'获取周期性计划' |
||||
|
// } |
||||
|
// getCycPlan(query) |
||||
|
// } |
||||
|
// } |
||||
|
//console.log('cycPlan',cycPlan) |
||||
const columns = [ |
const columns = [ |
||||
{ |
{ |
||||
title: '序号', |
title: '序号', |
||||
render:(t, r, i) => { |
render: (t, r, i) => { |
||||
return i + 1 |
return i + 1 |
||||
} |
} |
||||
}, |
}, |
||||
{ |
{ |
||||
title: '任务名称', |
title: '任务名称', |
||||
dataIndex: 'missionName', |
dataIndex: 'missionName', |
||||
}, |
}, |
||||
{ |
{ |
||||
title: '责任人', |
title: '责任人', |
||||
render:(record)=>{ |
render: (record) => { |
||||
return <span> |
return <span> |
||||
{record?.maintenancePlanExecuteUsers.map((item)=>{ |
{record?.maintenancePlanExecuteUsers.map((item) => { |
||||
return item.name |
return item.name |
||||
}).toString() |
}).toString() |
||||
} |
} |
||||
</span> |
</span> |
||||
} |
} |
||||
}, |
}, |
||||
{ |
{ |
||||
title: '完成情况', |
title: '完成情况', |
||||
dataIndex: 'state', |
dataIndex: 'state', |
||||
}, |
}, |
||||
{ |
{ |
||||
title: '备注', |
title: '备注', |
||||
dataIndex: 'remark', |
dataIndex: 'remark', |
||||
}, |
}, |
||||
{ |
{ |
||||
title: '计划完成时间', |
title: '计划完成时间', |
||||
render:(record)=>{ |
render: (record) => { |
||||
return <span>{moment(record.planFinishTime).format('YYYY-MM-DD')}</span> |
return <span>{moment(record.planFinishTime).format('YYYY-MM-DD')}</span> |
||||
}, |
}, |
||||
}, |
}, |
||||
{ |
{ |
||||
title: '实际完成时间', |
title: '实际完成时间', |
||||
render:(record)=>{ |
render: (record) => { |
||||
return record.actualFinishTime?<span>{moment(record.actualFinishTime).format('YYYY-MM-DD')}</span>:'' |
return record.actualFinishTime ? <span>{moment(record.actualFinishTime).format('YYYY-MM-DD')}</span> : '' |
||||
}, |
}, |
||||
}, |
}, |
||||
{ |
{ |
||||
title: '操作', |
title: '操作', |
||||
render:(record)=>{ |
render: (record) => { |
||||
return (<div> |
return (<div> |
||||
<Button onClick={()=>{setAddVis(true);setRecordRow(record)}} style={{marginRight:10}}>编辑</Button> |
<Button onClick={() => { setAddVis(true); setRecordRow(record) }} style={{ marginRight: 10 }}>编辑</Button> |
||||
<Popconfirm title="确定是否删除？" onConfirm={()=>{delHandler(record)}}><Button type='danger'> 删除</Button></Popconfirm> |
<Popconfirm title="确定是否删除？" onConfirm={() => { delHandler(record) }}><Button type='danger'> 删除</Button></Popconfirm> |
||||
</div>) |
</div>) |
||||
} |
} |
||||
}, |
}, |
||||
]; |
]; |
||||
return ( |
return ( |
||||
<div style={{background: '#FFFFFF', margin: '8px 12px', padding: '20px 20px 0px 20px'}}> |
<div style={{ background: '#FFFFFF', margin: '8px 12px', padding: '20px 20px 0px 20px' }}> |
||||
<div style={{marginBottom:20}}> |
<div style={{ marginBottom: 20 }}> |
||||
<Button theme='solid' type='secondary' onClick={()=>{setAddVis(true)}}>新增</Button> |
<Button theme='solid' type='secondary' onClick={() => { setAddVis(true) }}>新增</Button> |
||||
{/* <Button theme='solid' type='secondary' style={{marginLeft:50}}>导入</Button> */} |
{/* <Button theme='solid' type='secondary' style={{marginLeft:50}}>导入</Button> */} |
||||
</div> |
</div> |
||||
<div> |
<div> |
||||
<Table columns={columns} dataSource={cycPlan} pagination={false}></Table> |
<Table columns={columns} dataSource={cycPlan} pagination={false}></Table> |
||||
</div> |
</div> |
||||
<div style={{ display: 'flex',justifyContent:'flex-end' ,margin:'10px 0 0 0'}}> |
<div style={{ display: 'flex', justifyContent: 'flex-end', margin: '10px 0 0 0' }}> |
||||
<span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}> |
<span style={{ lineHeight: "30px", fontSize: 13, color: 'rgba(0,90,189,0.8)' }}> |
||||
共{total}条信息 |
共{total}条信息 |
||||
</span> |
</span> |
||||
<Pagination total={total} |
<Pagination total={total} |
||||
showSizeChanger |
showSizeChanger |
||||
pageSize={pageSize} |
pageSize={pageSize} |
||||
currentPage={pageIndex} |
currentPage={pageIndex} |
||||
pageSizeOpts={[10, 20, 30]} |
pageSizeOpts={[10, 20, 30]} |
||||
onChange={(pageIndex,pageSize)=>{ |
onChange={(pageIndex, pageSize) => { |
||||
console.log('pageIndex1',pageIndex,pageSize) |
console.log('pageIndex1', pageIndex, pageSize) |
||||
setPageIndex(pageIndex) |
setPageIndex(pageIndex) |
||||
setPageSize(pageSize) |
setPageSize(pageSize) |
||||
const query={ |
const query = { |
||||
pageIndex,pageSize,type:'period',msg:'获取周期性计划' |
pageIndex, pageSize, type: 'period', msg: '获取周期性计划' |
||||
} |
} |
||||
getCycPlan(query) |
getCycPlan(query) |
||||
}}></Pagination> |
}}></Pagination> |
||||
|
</div> |
||||
|
<Addmodal visible={addVis} respondRecordData={respondRecordData} onClose={() => { setAddVis(false); setRecordRow(null); getCycPlan() }} recordRow={recordRow} pepList={pepList}></Addmodal> |
||||
</div> |
</div> |
||||
<Addmodal visible={addVis} onClose={()=>{setAddVis(false);setRecordRow(null);getCycPlan()}} recordRow={recordRow} pepList={pepList}></Addmodal> |
|
||||
</div> |
|
||||
|
|
||||
) |
) |
||||
} |
} |
||||
|
|
||||
function mapStateToProps (state) { |
function mapStateToProps (state) { |
||||
const { global } = state; |
const { global } = state; |
||||
return { |
return { |
||||
actions: global.actions, |
actions: global.actions, |
||||
}; |
}; |
||||
} |
} |
||||
|
|
||||
export default connect(mapStateToProps)(Server); |
export default connect(mapStateToProps)(Server); |
||||
|
|||||
Loading…
Reference in new issue