547 lines
17 KiB
JavaScript
547 lines
17 KiB
JavaScript
import React from 'react'
|
|
import { connect } from 'dva'
|
|
import moment from 'moment'
|
|
import { Calendar, Badge, Select, Button, Modal, Table } from 'antd'
|
|
import styles from './NodeSchedulingPage.css'
|
|
import { guid, extendRule, initQueryFilter, extendInclude } from "../../../utils/common"
|
|
import { message } from "antd/lib/index"
|
|
import storage from "../../../utils/storage"
|
|
const Option = Select.Option
|
|
class CalendarPage extends React.Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
CurrentMonthFirstDay: moment(new Date()).startOf('month').format("YYYY-MM-DD"),
|
|
CurrentMonthLastDay: moment(new Date()).endOf('month').format("YYYY-MM-DD"),
|
|
CurrentMonthList: [],
|
|
currentData: '',
|
|
CalendarModelList: [],
|
|
CurrentCalendarId: null,
|
|
visible: false,
|
|
dataSource: [],
|
|
odlDayListData: [],
|
|
classList: [],
|
|
teamList: [],
|
|
}
|
|
};
|
|
|
|
getClassList = () => {
|
|
const orgId = storage('lacal').getItem('webOrgId').val
|
|
let json = initQueryFilter(orgId, 1, 100, "CREATE_TIME", 0)
|
|
extendRule(json, "ENABLE_STATUS", 1, 0)//过滤启用状态
|
|
|
|
this.props.dispatch({
|
|
type: 'app/getDataByPost',
|
|
url: 'FM/Class/OrderPaged',
|
|
payload: json,
|
|
onComplete: (ret) => {
|
|
this.setState({
|
|
classList: ret
|
|
})
|
|
}
|
|
})
|
|
};
|
|
|
|
getTeamList = () => {
|
|
const orgId = storage('lacal').getItem('webOrgId').val
|
|
let json = initQueryFilter(orgId, 1, 100, "CREATE_TIME", 0)
|
|
extendInclude(json,"Nav_Team")
|
|
extendRule(json, "Nav_DepartmentCalendarConfig.DEPARTMENT_ID", 1, this.props.data.id)
|
|
this.props.dispatch({
|
|
type: 'app/getDataByPost',
|
|
url: 'FM/DepartmentCalendarConfigTeam/OrderPaged',
|
|
payload: json,
|
|
onComplete: (ret) => {
|
|
this.setState({
|
|
teamList: ret
|
|
})
|
|
}
|
|
})
|
|
};
|
|
|
|
|
|
loadWorkStageData = () => {//部门
|
|
this.setState({
|
|
CurrentWorkStageId: this.props.data.id
|
|
},
|
|
() =>
|
|
this.LoadDailyData()
|
|
|
|
)
|
|
};
|
|
LoadDailyData = (callBack, changeStatus) => { //取每日工作时间数据
|
|
if (!this.state.CurrentWorkStageId) return
|
|
const orgId = storage('lacal').getItem('webOrgId').val
|
|
let json = initQueryFilter(orgId, 1, 100, "NUM", 0)
|
|
var currentData = this.state.currentData
|
|
extendRule(json, "DEPARTMENT_ID", 1, this.state.CurrentWorkStageId)
|
|
extendRule(json, "DATE_TIME", 6, this.state.CurrentMonthFirstDay + ' 00:00:00')
|
|
extendRule(json, "DATE_TIME", 4, this.state.CurrentMonthLastDay + ' 23:59:59')
|
|
extendInclude(json, "Nav_Class")
|
|
extendInclude(json, "Nav_Class.Nav_ClassDetail")
|
|
extendInclude(json, "Nav_Team")
|
|
extendInclude(json, "Nav_DepartmentSchedulingDetail")
|
|
this.props.dispatch({
|
|
type: 'app/getDataByPost',
|
|
url: 'FM/DepartmentScheduling/OrderEntities',
|
|
payload: json,
|
|
onComplete: (ret) => {
|
|
if (changeStatus) {
|
|
let listData = []
|
|
if (ret) {
|
|
ret.forEach(v => {
|
|
if (v.DATE_TIME.slice(0, 10) == currentData) {
|
|
listData.push({
|
|
...v,
|
|
key: v.ID,
|
|
CLASS_ID: v.CLASS_ID,
|
|
CLASS_NAME: v.Nav_Class.NAME,
|
|
CLASS_ID: v.TEAM_ID,
|
|
CLASS_NAME: v.Nav_Team.NAME,
|
|
DATE: v.DATE_TIME.toString().substring(0, 10),
|
|
ENABLE_STATUS: v.ENABLE_STATUS
|
|
})
|
|
}
|
|
})
|
|
}
|
|
if (listData)
|
|
this.setState({
|
|
dataSource: listData
|
|
})
|
|
|
|
message.success('执行成功')
|
|
}
|
|
this.setState({
|
|
CurrentMonthList: ret
|
|
}, () => {
|
|
if (callBack && typeof callBack == "function") {
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
LoadCalendarData = () => { //获取日历模板的数据
|
|
const orgId = storage('lacal').getItem('webOrgId').val
|
|
let json = initQueryFilter(orgId, 1, 100, "CREATE_TIME", 0)
|
|
extendRule(json, "ENABLE_STATUS", 1, 0)//过滤启用状态
|
|
extendInclude(json, "Nav_CalendarClass.Nav_Class.Nav_ClassDetail")
|
|
//extendInclude(json, "Nav_NodeCalendarConfigs")
|
|
this.props.dispatch({
|
|
type: 'app/getDataByPost',
|
|
url: 'FM/Calendar/OrderPaged',
|
|
payload: json,
|
|
onComplete: (ret) => {
|
|
if (ret) {
|
|
this.setState({
|
|
CalendarModelList: ret
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
componentDidMount () {
|
|
this.loadWorkStageData()
|
|
this.getClassList()
|
|
this.getTeamList()
|
|
}
|
|
|
|
getListData = (value) => {
|
|
let listData = []
|
|
if (this.state.CurrentMonthList) {
|
|
this.state.CurrentMonthList.forEach(v => {
|
|
if (v.DATE_TIME.slice(0, 10) == value.format("YYYY-MM-DD")) {
|
|
if (v.Nav_Class != null)
|
|
listData.push({
|
|
type: v.ENABLE_STATUS == 1 ? 'default' : 'success',
|
|
content: (v.Nav_Class ? v.Nav_Class.NAME : '') + ':' + (v.Nav_Team ? v.Nav_Team.NAME : '')
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
return listData || []
|
|
}
|
|
dateCellRender = (value) => {
|
|
const listData = this.getListData(value)
|
|
return (
|
|
<ul key={guid()} className={styles.events}>
|
|
{
|
|
listData.map(item => (
|
|
<li key={item.content} style={{ listStyle: 'none' }}>
|
|
<Badge status={item.type} text={item.content} />
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
)
|
|
}
|
|
|
|
getMonthData = ({ value }) => {
|
|
if (value.month() === 8) {
|
|
return 1394
|
|
}
|
|
}
|
|
|
|
monthCellRender = ({ value }) => {
|
|
const num = this.getMonthData(value)
|
|
return num ? (
|
|
<div className="notes-month">
|
|
<section>{num}</section>
|
|
<span>Backlog number</span>
|
|
</div>
|
|
) : null
|
|
};
|
|
onPanelChange = (date, mode) => {
|
|
this.setState({
|
|
CurrentMonthFirstDay: moment(date).startOf('month').format("YYYY-MM-DD"),
|
|
CurrentMonthLastDay: moment(date).endOf('month').format("YYYY-MM-DD"),
|
|
}, () => {
|
|
this.LoadDailyData()
|
|
})
|
|
};
|
|
|
|
handleCalendarChange = (value) => {
|
|
const aArr = []
|
|
//const obj =this.state.odlDayListData&&this.state.odlDayListData.length? JSON.parse(JSON.stringify(this.state.odlDayListData[0])):{};//复制一份班次对象
|
|
// console.log(`selected ${value}`); //选择的日历模板的数据填充到表格中
|
|
if (this.state.CalendarModelList) {
|
|
this.state.CalendarModelList.forEach(v => {
|
|
if (v.ID == value) {
|
|
v.Nav_CalendarClass.forEach(c => {
|
|
c.Nav_Class.Nav_ClassDetail.forEach(d => {
|
|
//根据选择的模板里面班次的个数 循环复制的班次对象 并修改里面每一份的CLASS_ID、ID
|
|
aArr.push({
|
|
CLASS_ID: c.CLASS_ID,
|
|
TEAM_ID: c.TEAM_ID,
|
|
ID: guid(),
|
|
METER_NODE_ID: this.state.CurrentWorkStageId,
|
|
ORG_ID: storage('lacal').getItem('webOrgId').val,
|
|
DATE_TIME: this.state.currentData,
|
|
START_TIME: d.STARTTIME.slice(11, 19),
|
|
END_TIME: d.ENDTIME.slice(11, 19),
|
|
CURR_TIME: d.STARTTIME.slice(11, 19),
|
|
ENABLE_STATUS: c.ENABLE_STATUS,
|
|
NODE_CALENDAR_CONFIG_ID: v.ID,
|
|
})
|
|
})
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
const odlDayListData = [...this.state.odlDayListData]
|
|
odlDayListData.forEach((n, i) => {
|
|
n.IS_DELETED = true
|
|
})
|
|
|
|
this.setState({
|
|
dataSource: aArr,
|
|
odlDayListData,
|
|
CurrentCalendarId: value,
|
|
})
|
|
};
|
|
handleModal = (e) => {
|
|
if (!this.state.CurrentWorkStageId) {
|
|
message.error('请设置排班单元')
|
|
return
|
|
}
|
|
|
|
if (!this.state.classList || !this.state.classList.length) {
|
|
message.error('请新增班次数据')
|
|
return
|
|
}
|
|
|
|
this.setState({
|
|
visible: true
|
|
}, () => {
|
|
let listData = []
|
|
let dayListData = []
|
|
let currentData = e.format("YYYY-MM-DD")
|
|
if (this.state.CurrentMonthList) {
|
|
this.state.CurrentMonthList.forEach(v => {
|
|
if (v.DATE_TIME.slice(0, 10) == e.format("YYYY-MM-DD")) {
|
|
dayListData.push(v)
|
|
listData.push({
|
|
...v,
|
|
key: v.ID,
|
|
CLASS_ID: v.CLASS_ID,
|
|
CLASS_NAME: v.Nav_Class.NAME,
|
|
DATE: v.DATE_TIME.toString().substring(0, 10),
|
|
ENABLE_STATUS: v.ENABLE_STATUS
|
|
})
|
|
}
|
|
})
|
|
}
|
|
|
|
this.setState({
|
|
dataSource: listData,
|
|
odlDayListData: dayListData,
|
|
currentData: currentData,
|
|
CurrentCalendarId: null
|
|
})
|
|
this.LoadCalendarData()
|
|
})
|
|
};
|
|
modalCancel = () => { //保存，退出，刷新
|
|
this.setState({
|
|
visible: false,
|
|
odlDayListData: []
|
|
})
|
|
|
|
};
|
|
|
|
//提交
|
|
modalOk = (e) => {
|
|
this.postData('FM/Department/CalendarUpdate')
|
|
};
|
|
|
|
postData = (url) => {
|
|
const orgId = storage('lacal').getItem('webOrgId').val
|
|
let data = []
|
|
const dataSource = [...this.state.dataSource]
|
|
const odlDayListData = [...this.state.odlDayListData]
|
|
let isError = false
|
|
if (dataSource && dataSource.length) {
|
|
dataSource.forEach((n, i) => {
|
|
let isSave = true
|
|
if (odlDayListData && odlDayListData.length) {
|
|
odlDayListData.forEach((n1, i1) => {
|
|
if (n1.ID == n.ID) {
|
|
if (n1.IS_DELETED) {
|
|
isSave = false
|
|
}
|
|
}
|
|
})
|
|
}
|
|
if (isSave) {
|
|
|
|
if (!n.CLASS_ID) {
|
|
message.error('请选择班次')
|
|
isError = true
|
|
}
|
|
n.Nav_Class = null
|
|
data.push(n)
|
|
}
|
|
})
|
|
}
|
|
if (odlDayListData && odlDayListData.length) {
|
|
odlDayListData.forEach((n1, i1) => {
|
|
if (n1.IS_DELETED) {
|
|
n1.Nav_Class = null
|
|
data.push(n1)
|
|
}
|
|
})
|
|
}
|
|
if (isError) return
|
|
|
|
const { dispatch } = this.props
|
|
dispatch({
|
|
type: 'app/getDataByPost',
|
|
url: url,
|
|
payload: { Nav_DepartmentScheduling: data, ORG_ID: orgId, ID: this.state.CurrentWorkStageId, DATE_TIME: this.state.currentData },
|
|
onComplete: (ret) => {
|
|
if (ret) {
|
|
message.success('执行成功')
|
|
this.setState({
|
|
visible: false,
|
|
}, () => {
|
|
this.LoadDailyData()
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
//应用
|
|
applyAll = () => {
|
|
this.postData('FM/Department/ApplyAll')
|
|
};
|
|
//新增
|
|
handleAdd = () => {
|
|
const { dataSource } = this.state
|
|
const newData = {
|
|
ID: guid(),
|
|
CLASS_ID: '',
|
|
TEAM_ID: '',
|
|
METER_NODE_ID: this.state.CurrentWorkStageId,
|
|
DATE: this.state.currentData,
|
|
ORG_ID: storage('lacal').getItem('webOrgId').val,
|
|
DATE_TIME: this.state.currentData,
|
|
ENABLE_STATUS: 0
|
|
}
|
|
this.setState({
|
|
dataSource: [...dataSource, newData],
|
|
})
|
|
}
|
|
//启用
|
|
handleEnable = () => {
|
|
this.changeStatus('FM/FMNodeScheduling/Enable')
|
|
}
|
|
//禁用
|
|
handleDisable = () => {
|
|
this.changeStatus('FM/FMNodeScheduling/Disable')
|
|
}
|
|
|
|
changeStatus = (url) => {
|
|
const orgId = storage('lacal').getItem('webOrgId').val
|
|
this.props.dispatch({
|
|
type: 'app/getDataByPost',
|
|
url: url,
|
|
payload: { METER_NODE_ID: this.state.CurrentWorkStageId, ORG_ID: orgId, DATE_TIME: this.state.currentData },
|
|
onComplete: (ret) => {
|
|
if (ret) {
|
|
this.LoadDailyData(null, true)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
handleCalenderDisabledDate = (currentDate) => {
|
|
if (!this.state.CurrentMonthFirstDay || !this.state.CurrentMonthLastDay) return false
|
|
if ((moment(this.state.CurrentMonthFirstDay).isBefore(currentDate, 'day') && currentDate.isBefore(moment(this.state.CurrentMonthLastDay), 'day')) ||
|
|
currentDate.isSame(moment(this.state.CurrentMonthFirstDay), 'day') || currentDate.isSame(moment(this.state.CurrentMonthLastDay), 'day')) {
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
|
|
|
|
render () {
|
|
const changeClass = (id, field, value) => {
|
|
if (this.state.dataSource && this.state.dataSource.length) {
|
|
const dataSource = [...this.state.dataSource]
|
|
dataSource.forEach((n, i) => {
|
|
if (n.ID == id) {
|
|
n[field] = value
|
|
}
|
|
})
|
|
this.setState({ dataSource })
|
|
}
|
|
}
|
|
|
|
const colClass = (text, record, index) => {
|
|
return <Select
|
|
style={{ width: 200 }}
|
|
placeholder='选择班次'
|
|
optionFilterProp="children"
|
|
value={record.CLASS_ID}
|
|
onChange={(e) => { changeClass(record.ID, 'CLASS_ID', e) }}
|
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
|
disabled
|
|
>
|
|
{//map 循环 填充下拉项目
|
|
this.state.classList.map(item => {
|
|
return <Option key={item.ID} value={item.ID}>{item.NAME}</Option>
|
|
})
|
|
}
|
|
</Select>
|
|
}
|
|
|
|
const colTeam = (text, record, index) => {
|
|
return <Select
|
|
style={{ width: 200 }}
|
|
placeholder='选择班组'
|
|
optionFilterProp="children"
|
|
value={record.TEAM_ID}
|
|
onChange={(e) => { changeClass(record.ID, 'TEAM_ID', e) }}
|
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
|
disabled
|
|
>
|
|
{//map 循环 填充下拉项目
|
|
this.state.teamList.map(item => {
|
|
return <Option key={item.Nav_Team.ID} value={item.Nav_Team.ID}>{item.Nav_Team.NAME}</Option>
|
|
})
|
|
}
|
|
</Select>
|
|
}
|
|
|
|
|
|
const classColumns = [
|
|
{ title: '当前日期', dataIndex: 'DATE_TIME', key: 'DATE_TIME', render: (text, record, index) => { if (text) return text.toString().substring(0, 10) } },
|
|
{ title: <div> <span style={{ color: 'red' }}>*</span>班次</div>, dataIndex: '', key: '', render: colClass },
|
|
{ title: <div> <span style={{ color: 'red' }}>*</span>班组</div>, dataIndex: '', key: '', render: colTeam },
|
|
{
|
|
title: '', dataIndex: '', key: '', render: (text, record, index) => {
|
|
const deleteRecord = () => {
|
|
const dataSource = []
|
|
var tempdate = [...this.state.odlDayListData]
|
|
if (this.state.dataSource) {
|
|
this.state.dataSource.forEach((n, i) => {
|
|
if (n.ID != record.ID) {
|
|
dataSource.push(n)
|
|
}
|
|
else {
|
|
let isGet = false
|
|
tempdate.forEach((n1, i1) => {
|
|
if (n1.ID == record.ID) {
|
|
isGet = true
|
|
n1.IS_DELETED = true
|
|
}
|
|
})
|
|
if (!isGet) {
|
|
n.IS_DELETED = true
|
|
tempdate.push(n)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
this.setState({ dataSource, odlDayListData: tempdate })
|
|
}
|
|
// return <Button type={'danger'} onClick={deleteRecord} icon={'delete'}></Button>
|
|
}
|
|
},
|
|
// {
|
|
// title: <div> <span style={{ color: 'red' }}>*</span>状态</div>, dataIndex: '', key: '', render: (text, record, index) => {
|
|
// return record.ENABLE_STATUS == 1 ? "未启用" : "已启用"
|
|
// }
|
|
// },
|
|
]
|
|
|
|
return (
|
|
<div style={{ backgroundColor: '#ffffff', padding: '0.16rem' }}>
|
|
<Modal visible={this.state.visible} maskClosable={false} width={"60%"} onCancel={this.modalCancel} onOk={this.modalOk}>
|
|
<div style={{ textAlign: "left" }}>
|
|
|
|
<Select
|
|
showSearch
|
|
style={{ width: 200 }}
|
|
placeholder='选择日历模板'
|
|
optionFilterProp="children"
|
|
value={this.state.CurrentCalendarId}
|
|
onChange={this.handleCalendarChange}
|
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
|
>
|
|
{//map 循环 填充下拉项目
|
|
this.state.CalendarModelList.map(item => {
|
|
return <Option key={item.ID} value={item.ID}>{item.NAME}</Option>
|
|
})
|
|
}
|
|
</Select>
|
|
</div>
|
|
<hr />
|
|
{/* <Button onClick={this.handleAdd} type="primary" icon="plus-circle-o">新增</Button> */}
|
|
{/* <Button onClick={this.handleEnable} type="default" icon="check-square">启用</Button>
|
|
<Button onClick={this.handleDisable} type="danger" icon="close-square-o">禁用</Button> */}
|
|
{/* <Button onClick={this.applyAll} type="danger" icon="close-square-o">应用所有排班单元</Button> */}
|
|
<Table
|
|
rowKey="ID"
|
|
pagination={false}
|
|
dataSource={this.state.dataSource}
|
|
columns={classColumns}
|
|
/>
|
|
|
|
</Modal>
|
|
<Calendar
|
|
dateCellRender={this.dateCellRender}
|
|
onSelect={this.handleModal}
|
|
onPanelChange={this.onPanelChange}
|
|
disabledDate={this.handleCalenderDisabledDate}
|
|
className={styles.calendarWrap}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default connect()(CalendarPage)
|