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 { 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 {visible,onClose,recordRow,pepList,actions,dispatch}=props |
|||
const{service}=actions |
|||
const api = useRef(); |
|||
useEffect(()=>{ |
|||
},[]) |
|||
//编辑和新增的逻辑 |
|||
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() |
|||
const AddModal = (props) => { |
|||
const { visible, onClose, recordRow, pepList, actions, dispatch, respondRecordData } = props |
|||
const { service } = actions |
|||
const api = useRef(); |
|||
const [selectValue, setSelectValue] = useState([]) |
|||
|
|||
|
|||
}) |
|||
|
|||
}) |
|||
} |
|||
return (<div> |
|||
<Modal visible={visible} onCancel={()=>{onClose()}} title={recordRow?'周期性计划编辑':'周期性计划添加'} |
|||
onOk={okHandler} |
|||
|
|||
> |
|||
<Form |
|||
initValues={{'taskName':recordRow?.missionName, |
|||
'manger':recordRow?.maintenancePlanExecuteUsers.map((item)=>{return item.pepUserId}), |
|||
'reason':recordRow?.reason, |
|||
'status':recordRow?.state, |
|||
'notes':recordRow?.remark, |
|||
'planTime':recordRow?.planFinishTime, |
|||
'realityTime':recordRow?.actualFinishTime}} |
|||
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() |
|||
|
|||
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>) |
|||
}) |
|||
} |
|||
return (<div> |
|||
<Modal visible={visible} onCancel={() => { onClose() }} title={recordRow ? '周期性计划编辑' : '周期性计划添加'} |
|||
onOk={okHandler} |
|||
|
|||
> |
|||
<Form |
|||
initValues={{ |
|||
'taskName': recordRow?.missionName, |
|||
'manger': recordRow?.maintenancePlanExecuteUsers.map((item) => { return item.pepUserId }), |
|||
'reason': recordRow?.reason, |
|||
'status': recordRow?.state, |
|||
'notes': recordRow?.remark, |
|||
'planTime': recordRow?.planFinishTime, |
|||
'realityTime': recordRow?.actualFinishTime, |
|||
'recordId': recordRow?.recordId || [], |
|||
}} |
|||
|
|||
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.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) { |
|||
const { global } = state; |
|||
return { |
|||
actions: global.actions, |
|||
}; |
|||
} |
|||
const { global } = state; |
|||
return { |
|||
actions: global.actions, |
|||
}; |
|||
} |
|||
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'; |
|||
|
|||
import React, { useEffect,useState,useRef } from 'react'; |
|||
import { Modal,Form,DatePicker,useFormApi,actions,Button } from '@douyinfe/semi-ui'; |
|||
import React, { useEffect, useState, useRef } from 'react'; |
|||
import { Modal, Form, DatePicker, Upload, actions, Button } from '@douyinfe/semi-ui'; |
|||
import { connect } from 'react-redux'; |
|||
import moment from 'moment' |
|||
import { IconDeleteStroked, IconEditStroked, IconUpload, IconAlertCircle, IconSearch } from '@douyinfe/semi-icons'; |
|||
|
|||
const RecordModal =(props)=>{ |
|||
const{visible,onClose,dispatch,recordRow,pepList,actions}=props |
|||
const [startTime,setStartTime]=useState('') |
|||
const [endTime,setEndTime]=useState('') |
|||
const FormApi = useRef(); |
|||
const{service} =actions |
|||
// let t=0//天数 |
|||
// let h=0//小时数 |
|||
// let s=0//秒数 |
|||
const RecordModal = (props) => { |
|||
const { visible, onClose, dispatch, recordRow, pepList, actions, addRecord, qiniu, apiRoot } = props |
|||
const [startTime, setStartTime] = useState('') |
|||
const [endTime, setEndTime] = useState('') |
|||
const [uploadData, setUploadData] = useState({}) |
|||
const FormApi = useRef(); |
|||
const { service } = actions |
|||
// let t=0//天数 |
|||
// let h=0//小时数 |
|||
// let s=0//秒数 |
|||
// console.log('endTimex',endTime) |
|||
useEffect(()=>{ |
|||
setEndTime(recordRow?.solvingTime) |
|||
setStartTime(recordRow?.occurrenceTime) |
|||
console.log('recordRow',recordRow) |
|||
useEffect(() => { |
|||
setEndTime(recordRow?.solvingTime) |
|||
setStartTime(recordRow?.occurrenceTime) |
|||
console.log('recordRow', recordRow) |
|||
|
|||
},[recordRow]) |
|||
const cancelHandler=()=>{ |
|||
onClose() |
|||
setStartTime('') |
|||
setEndTime('') |
|||
}, [recordRow]) |
|||
const cancelHandler = () => { |
|||
onClose() |
|||
setStartTime('') |
|||
setEndTime('') |
|||
|
|||
} |
|||
const okHandler=()=>{ |
|||
FormApi.current.validate().then((res)=>{ |
|||
console.log('recordRow',res) |
|||
const editVal={ |
|||
id:recordRow?.id, |
|||
solvingTime:res.endTime, |
|||
occurrencTime:res.startTime, |
|||
sketch:res.name, |
|||
record:res.record, |
|||
settler:res.settler, |
|||
type:res.type, |
|||
msg:recordRow?'编辑服务记录':'添加服务记录' |
|||
} |
|||
dispatch(service.addRecord(editVal)).then(res => { |
|||
} |
|||
const okHandler = () => { |
|||
FormApi.current.validate().then((res) => { |
|||
console.log('recordRow', res) |
|||
const editVal = { |
|||
id: recordRow?.id, |
|||
solvingTime: res.endTime, |
|||
occurrencTime: res.startTime, |
|||
sketch: res.name, |
|||
record: res.record, |
|||
settler: res.settler, |
|||
type: res.type, |
|||
msg: recordRow ? '编辑响应记录' : '添加响应记录', |
|||
files: [{ ...uploadData }] |
|||
} |
|||
|
|||
dispatch(service.addRecord(editVal)).then(res => { |
|||
if (res.success) { |
|||
onClose() |
|||
FormApi.current.reset() |
|||
setStartTime('');setEndTime('') |
|||
onClose() |
|||
FormApi.current.reset() |
|||
setStartTime(''); setEndTime('') |
|||
} |
|||
}) |
|||
}) |
|||
} |
|||
return <Modal |
|||
title={recordRow?'编辑响应记录':'添加响应记录'} |
|||
visible={visible} |
|||
footer={ |
|||
//recordRow?<Button onClick={cancelHandler}>取消</Button>: |
|||
<div> |
|||
<Button onClick={cancelHandler}>取消</Button> |
|||
<Button theme='solid' type='primary' onClick={okHandler}>确定</Button> |
|||
</div>} |
|||
onCancel={cancelHandler} |
|||
onOk={okHandler} |
|||
> |
|||
<Form wrapperCol={{ span: 20 }} |
|||
initValues={{'name':recordRow?.sketch, |
|||
'startTime':recordRow?.occurrenceTime, |
|||
'endTime':recordRow?.solvingTime, |
|||
'settler':recordRow?.maintenanceRecordExecuteUsers.map((item)=>{return item.pepUserId}), |
|||
'type':recordRow?.type, |
|||
'record':recordRow?.record, |
|||
'breakTime':recordRow?parseInt(recordRow.interruptDuration/60/60/24)+'天'+ |
|||
parseInt(recordRow.interruptDuration/60/60%24)+'时'+ |
|||
parseInt(recordRow.interruptDuration/60%60)+'分':'0天0时0秒' |
|||
}) |
|||
}) |
|||
} |
|||
return <Modal |
|||
title={recordRow ? '编辑响应记录' : '添加响应记录'} |
|||
visible={visible} |
|||
footer={ |
|||
//recordRow?<Button onClick={cancelHandler}>取消</Button>: |
|||
<div> |
|||
<Button onClick={cancelHandler}>取消</Button> |
|||
<Button loading={addRecord} theme='solid' type='primary' onClick={okHandler}>确定</Button> |
|||
</div>} |
|||
onCancel={cancelHandler} |
|||
// onOk={okHandler} |
|||
> |
|||
<Form wrapperCol={{ span: 20 }} |
|||
initValues={{ |
|||
'name': recordRow?.sketch, |
|||
'startTime': recordRow?.occurrenceTime, |
|||
'endTime': recordRow?.solvingTime, |
|||
'settler': recordRow?.maintenanceRecordExecuteUsers.map((item) => { return item.pepUserId }), |
|||
'type': recordRow?.type, |
|||
'record': recordRow?.record, |
|||
'breakTime': recordRow ? parseInt(recordRow.interruptDuration / 60 / 60 / 24) + '天' + |
|||
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' |
|||
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}分`) |
|||
}} |
|||
/> |
|||
<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.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/> |
|||
{/* 中断时间:{endTime&&startTime? <span style={{marginLeft:30}}>{`${tdd}天${tdh}时${tds}分`}</span>:recordRow?.interruptDuration} */} |
|||
<Form.Select field='settler' label='解决者:' trigger='blur' style={{ width:'100%' }} |
|||
filter |
|||
rules={[{ required: true, message:'请输入解决者' }]} multiple> |
|||
{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.Input field='breakTime' label='中断时间:' disabled /> |
|||
{/* 中断时间:{endTime&&startTime? <span style={{marginLeft:30}}>{`${tdd}天${tdh}时${tds}分`}</span>:recordRow?.interruptDuration} */} |
|||
<Form.Select field='settler' label='解决者:' trigger='blur' style={{ width: '100%' }} |
|||
filter |
|||
rules={[{ required: true, message: '请输入解决者' }]} multiple> |
|||
{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 field="type" label={{ text: '故障类型'}} style={{ width: 200 }} rules={[{ required: true, message:'请输入故障类型' }]}> |
|||
<Form.Select.Option value="es异常">es异常</Form.Select.Option> |
|||
<Form.Select.Option value="数据库异常">数据库异常</Form.Select.Option> |
|||
<Form.Select.Option value="应用异常">应用异常</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> |
|||
|
|||
</Form> |
|||
})} |
|||
</Form.Select.OptGroup>) |
|||
})} |
|||
</Form.Select> |
|||
<Form.Select field="type" label={{ text: '故障类型' }} style={{ width: 200 }} rules={[{ required: true, message: '请输入故障类型' }]}> |
|||
<Form.Select.Option value="es异常">es异常</Form.Select.Option> |
|||
<Form.Select.Option value="数据库异常">数据库异常</Form.Select.Option> |
|||
<Form.Select.Option value="应用异常">应用异常</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 }}> |
|||
<div style={{ marginTop: 6 }}>文件：</div> |
|||
<Upload |
|||
style={{ display: 'inline-block' }} |
|||
action={`${apiRoot}/attachments/p`} |
|||
accept={'.txt, .doc, .docx, .xls, .xlsx, .pdf, .png, .jpg, .rar, .zip'} |
|||
limit={1} |
|||
maxSize={51200} |
|||
onRemove={() => { |
|||
setUploadData({}) |
|||
}} |
|||
onSuccess={(responseBody, file) => { |
|||
setUploadData({ |
|||
name: file.name, |
|||
size: file.size, |
|||
url: responseBody?.uploaded, |
|||
uploadTime: moment().format("YYYY-MM-DD HH:mm:ss") |
|||
}) |
|||
}} |
|||
> |
|||
<Button icon={<IconUpload />} theme="light"> |
|||
文件上传 |
|||
</Button> |
|||
</Upload> |
|||
</div> |
|||
|
|||
</Form> |
|||
|
|||
|
|||
</Modal> |
|||
|
|||
</Modal> |
|||
} |
|||
function mapStateToProps (state) { |
|||
const { auth, global, members, webSocket } = state; |
|||
return { |
|||
// loading: members.isRequesting, |
|||
// user: auth.user, |
|||
actions: global.actions, |
|||
// members: members.data, |
|||
// socket: webSocket.socket |
|||
}; |
|||
} |
|||
const { auth, global, members, webSocket, addRecord } = state; |
|||
console.log(addRecord); |
|||
return { |
|||
addRecord: addRecord.isRequesting, |
|||
// user: auth.user, |
|||
actions: global.actions, |
|||
qiniu: global.qiniu?.domain, |
|||
apiRoot: global.apiRoot |
|||
}; |
|||
} |
|||
|
|||
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 { Button,Table,Popconfirm,Pagination } from '@douyinfe/semi-ui'; |
|||
import { Button, Table, Popconfirm, Pagination } from '@douyinfe/semi-ui'; |
|||
import Addmodal from '../components/cycAddmodal' |
|||
import moment from 'moment' |
|||
|
|||
|
|||
const Server = (props) => { |
|||
const { dispatch, actions, user, loading, socket } = props |
|||
const{service,install}=actions |
|||
const [addVis,setAddVis]=useState(false) |
|||
const [cycPlan,setCysPlan]=useState([]) |
|||
const [recordRow,setRecordRow]=useState(null) |
|||
const { service, install } = actions |
|||
const [addVis, setAddVis] = useState(false) |
|||
const [cycPlan, setCysPlan] = useState([]) |
|||
const [recordRow, setRecordRow] = useState(null) |
|||
const [pepList, setPepList] = useState([])//角色分配 |
|||
const [pageSize,setPageSize]=useState(10) |
|||
const [pageIndex,setPageIndex]=useState(1) |
|||
const [total,setTotal]=useState() |
|||
const [pageSize, setPageSize] = useState(10) |
|||
const [pageIndex, setPageIndex] = useState(1) |
|||
const [total, setTotal] = useState() |
|||
const [respondRecordData, setRespondRecordData] = useState([]) |
|||
|
|||
const getCycPlan=(query={type:'period',msg:'获取周期性计划',pageIndex,pageSize})=>{ |
|||
dispatch(service.getMaintenancePlan(query)).then((res)=>{ |
|||
setCysPlan(res?.payload.data.responseRes) |
|||
setTotal(res?.payload.data.count) |
|||
}) |
|||
} |
|||
useEffect(()=>{ |
|||
getCycPlan() |
|||
dispatch(install.getOrganizationDeps()).then((res) => {//获取项企(PEP)全部部门及其下用户 |
|||
setPepList(res.payload.data) |
|||
}) |
|||
},[]) |
|||
const delHandler=(record)=>{ |
|||
const query={ |
|||
responseId:record.id, |
|||
msg:'删除周期性计划' |
|||
} |
|||
dispatch(service.delMaintenancePlan(query)).then((res)=>{ |
|||
if(res.success) getCycPlan({type:'period',msg:'获取周期性计划',pageIndex:1,pageSize});setPageIndex(1) |
|||
}) |
|||
} |
|||
//配置分页 |
|||
// const pagination={ |
|||
// total:total, |
|||
// defaultCurrent: 1, |
|||
// pageSize:pageSize, |
|||
// showSizeChanger: true, |
|||
// currentPage:pageIndex, |
|||
// showQuickJumper: true, |
|||
// pageSizeOpts: ["5", "10", "15"], |
|||
// showTotal: function () { |
|||
// return `共有${total}条` |
|||
// }, |
|||
// onChange:(pageIndex,pageSize)=>{ |
|||
// console.log('pageIndex1',pageIndex,pageSize) |
|||
// setPageIndex(pageIndex) |
|||
// setPageSize(pageSize) |
|||
// const query={ |
|||
// pageIndex,pageSize,type:'temp',msg:'获取周期性计划' |
|||
// } |
|||
// getCycPlan(query) |
|||
// } |
|||
// } |
|||
//console.log('cycPlan',cycPlan) |
|||
const getCycPlan = (query = { type: 'period', msg: '获取周期性计划', pageIndex, pageSize }) => { |
|||
dispatch(service.getMaintenancePlan(query)).then((res) => { |
|||
setCysPlan(res?.payload.data.responseRes) |
|||
setTotal(res?.payload.data.count) |
|||
}) |
|||
} |
|||
useEffect(() => { |
|||
getCycPlan() |
|||
dispatch(install.getOrganizationDeps()).then((res) => {//获取项企(PEP)全部部门及其下用户 |
|||
setPepList(res.payload.data) |
|||
}) |
|||
dispatch(service.respondRecord({})).then((res) => { |
|||
if (res.success) { |
|||
setRespondRecordData(res?.payload.data) |
|||
} |
|||
}); |
|||
}, []) |
|||
const delHandler = (record) => { |
|||
const query = { |
|||
responseId: record.id, |
|||
msg: '删除周期性计划' |
|||
} |
|||
dispatch(service.delMaintenancePlan(query)).then((res) => { |
|||
if (res.success) getCycPlan({ type: 'period', msg: '获取周期性计划', pageIndex: 1, pageSize }); setPageIndex(1) |
|||
}) |
|||
} |
|||
//配置分页 |
|||
// const pagination={ |
|||
// total:total, |
|||
// defaultCurrent: 1, |
|||
// pageSize:pageSize, |
|||
// showSizeChanger: true, |
|||
// currentPage:pageIndex, |
|||
// showQuickJumper: true, |
|||
// pageSizeOpts: ["5", "10", "15"], |
|||
// showTotal: function () { |
|||
// return `共有${total}条` |
|||
// }, |
|||
// onChange:(pageIndex,pageSize)=>{ |
|||
// console.log('pageIndex1',pageIndex,pageSize) |
|||
// setPageIndex(pageIndex) |
|||
// setPageSize(pageSize) |
|||
// const query={ |
|||
// pageIndex,pageSize,type:'temp',msg:'获取周期性计划' |
|||
// } |
|||
// getCycPlan(query) |
|||
// } |
|||
// } |
|||
//console.log('cycPlan',cycPlan) |
|||
const columns = [ |
|||
{ |
|||
title: '序号', |
|||
render:(t, r, i) => { |
|||
{ |
|||
title: '序号', |
|||
render: (t, r, i) => { |
|||
return i + 1 |
|||
} |
|||
}, |
|||
{ |
|||
title: '任务名称', |
|||
dataIndex: 'missionName', |
|||
}, |
|||
{ |
|||
title: '责任人', |
|||
render:(record)=>{ |
|||
return <span> |
|||
{record?.maintenancePlanExecuteUsers.map((item)=>{ |
|||
return item.name |
|||
}).toString() |
|||
} |
|||
</span> |
|||
} |
|||
}, |
|||
{ |
|||
title: '完成情况', |
|||
dataIndex: 'state', |
|||
}, |
|||
{ |
|||
title: '备注', |
|||
dataIndex: 'remark', |
|||
}, |
|||
{ |
|||
title: '计划完成时间', |
|||
render:(record)=>{ |
|||
} |
|||
}, |
|||
{ |
|||
title: '任务名称', |
|||
dataIndex: 'missionName', |
|||
}, |
|||
{ |
|||
title: '责任人', |
|||
render: (record) => { |
|||
return <span> |
|||
{record?.maintenancePlanExecuteUsers.map((item) => { |
|||
return item.name |
|||
}).toString() |
|||
} |
|||
</span> |
|||
} |
|||
}, |
|||
{ |
|||
title: '完成情况', |
|||
dataIndex: 'state', |
|||
}, |
|||
{ |
|||
title: '备注', |
|||
dataIndex: 'remark', |
|||
}, |
|||
{ |
|||
title: '计划完成时间', |
|||
render: (record) => { |
|||
return <span>{moment(record.planFinishTime).format('YYYY-MM-DD')}</span> |
|||
}, |
|||
}, |
|||
{ |
|||
title: '实际完成时间', |
|||
render:(record)=>{ |
|||
return record.actualFinishTime?<span>{moment(record.actualFinishTime).format('YYYY-MM-DD')}</span>:'' |
|||
}, |
|||
}, |
|||
{ |
|||
title: '操作', |
|||
render:(record)=>{ |
|||
return (<div> |
|||
<Button onClick={()=>{setAddVis(true);setRecordRow(record)}} style={{marginRight:10}}>编辑</Button> |
|||
<Popconfirm title="确定是否删除？" onConfirm={()=>{delHandler(record)}}><Button type='danger'> 删除</Button></Popconfirm> |
|||
</div>) |
|||
} |
|||
}, |
|||
}, |
|||
}, |
|||
{ |
|||
title: '实际完成时间', |
|||
render: (record) => { |
|||
return record.actualFinishTime ? <span>{moment(record.actualFinishTime).format('YYYY-MM-DD')}</span> : '' |
|||
}, |
|||
}, |
|||
{ |
|||
title: '操作', |
|||
render: (record) => { |
|||
return (<div> |
|||
<Button onClick={() => { setAddVis(true); setRecordRow(record) }} style={{ marginRight: 10 }}>编辑</Button> |
|||
<Popconfirm title="确定是否删除？" onConfirm={() => { delHandler(record) }}><Button type='danger'> 删除</Button></Popconfirm> |
|||
</div>) |
|||
} |
|||
}, |
|||
]; |
|||
return ( |
|||
<div style={{background: '#FFFFFF', margin: '8px 12px', padding: '20px 20px 0px 20px'}}> |
|||
<div style={{marginBottom:20}}> |
|||
<Button theme='solid' type='secondary' onClick={()=>{setAddVis(true)}}>新增</Button> |
|||
{/* <Button theme='solid' type='secondary' style={{marginLeft:50}}>导入</Button> */} |
|||
</div> |
|||
<div> |
|||
<Table columns={columns} dataSource={cycPlan} pagination={false}></Table> |
|||
</div> |
|||
<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)' }}> |
|||
共{total}条信息 |
|||
</span> |
|||
<Pagination total={total} |
|||
showSizeChanger |
|||
pageSize={pageSize} |
|||
currentPage={pageIndex} |
|||
pageSizeOpts={[10, 20, 30]} |
|||
onChange={(pageIndex,pageSize)=>{ |
|||
console.log('pageIndex1',pageIndex,pageSize) |
|||
setPageIndex(pageIndex) |
|||
setPageSize(pageSize) |
|||
const query={ |
|||
pageIndex,pageSize,type:'period',msg:'获取周期性计划' |
|||
} |
|||
getCycPlan(query) |
|||
}}></Pagination> |
|||
<div style={{ background: '#FFFFFF', margin: '8px 12px', padding: '20px 20px 0px 20px' }}> |
|||
<div style={{ marginBottom: 20 }}> |
|||
<Button theme='solid' type='secondary' onClick={() => { setAddVis(true) }}>新增</Button> |
|||
{/* <Button theme='solid' type='secondary' style={{marginLeft:50}}>导入</Button> */} |
|||
</div> |
|||
<div> |
|||
<Table columns={columns} dataSource={cycPlan} pagination={false}></Table> |
|||
</div> |
|||
<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)' }}> |
|||
共{total}条信息 |
|||
</span> |
|||
<Pagination total={total} |
|||
showSizeChanger |
|||
pageSize={pageSize} |
|||
currentPage={pageIndex} |
|||
pageSizeOpts={[10, 20, 30]} |
|||
onChange={(pageIndex, pageSize) => { |
|||
console.log('pageIndex1', pageIndex, pageSize) |
|||
setPageIndex(pageIndex) |
|||
setPageSize(pageSize) |
|||
const query = { |
|||
pageIndex, pageSize, type: 'period', msg: '获取周期性计划' |
|||
} |
|||
getCycPlan(query) |
|||
}}></Pagination> |
|||
</div> |
|||
<Addmodal visible={addVis} respondRecordData={respondRecordData} onClose={() => { setAddVis(false); setRecordRow(null); getCycPlan() }} recordRow={recordRow} pepList={pepList}></Addmodal> |
|||
</div> |
|||
<Addmodal visible={addVis} onClose={()=>{setAddVis(false);setRecordRow(null);getCycPlan()}} recordRow={recordRow} pepList={pepList}></Addmodal> |
|||
</div> |
|||
|
|||
) |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { global } = state; |
|||
return { |
|||
actions: global.actions, |
|||
}; |
|||
} |
|||
function mapStateToProps (state) { |
|||
const { global } = state; |
|||
return { |
|||
actions: global.actions, |
|||
}; |
|||
} |
|||
|
|||
export default connect(mapStateToProps)(Server); |
|||
|
|||
Loading…
Reference in new issue