mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

排班

Browse Source
This commit is contained in:
朱菊兰
2023-09-18 08:41:14 +08:00
parent d1c93cbf46
commit 60dc449a27
11 changed files with 10135 additions and 8869 deletions
Download Patch File Download Diff File Expand all files Collapse all files

574
src/views/group/base/groupTeamScheduling/index.vue
View File

@@ -1,67 +1,583 @@
<template>
<div class="app-container">
<div>
<div class="groupTeamScheduling">
<div class="operationArea">
<el-form :inline="true" class="demo-form-inline">
<span class="blue-block"></span>
<el-form-item label="月份选择">
<el-date-picker
v-model="queryParams.startDay"
v-model="startDay"
type="month"
placeholder="选择月">
placeholder="选择月"
size="small"
:disabled="showSetting"
@change="selectMonth"
:clearable="false"
style="width: 120px">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary">自动排班</el-button>
<span class="separateStyle"></span>
</el-form-item>
<el-form-item>
<el-button type="primary">编辑</el-button>
<el-button type="primary" size="small" :disabled="showSetting || settingBtnDis" @click="settingMsg">设置</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" plain @click="toUpperLower">班组上下片查询</el-button>
<el-button type="primary" size="small" v-show="showSetting && autoScheduling" @click="schedulingBtn">自动排班</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" plain>班组能源查询</el-button>
<span class="separateStyle" v-show="showSetting"></span>
</el-form-item>
<el-form-item>
<el-button type="primary" plain>班组检测查询</el-button>
<el-button type="primary" size="small" v-show="showSetting" @click="confirmSetting">确认</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" plain v-show="showSetting" @click="cancelSetting">取消</el-button>
</el-form-item>
<el-form-item label="请先选择查询的班组" class="rightItem">
<el-button type="primary" size="small" :disabled="jumpDisabled" @click="toOtherPage('1')">班组上下片查询</el-button>
<el-button type="primary" size="small" :disabled="jumpDisabled" @click="toOtherPage('2')">班组能源查询</el-button>
<el-button type="primary" size="small" :disabled="jumpDisabled" @click="toOtherPage('3')">班组检测查询</el-button>
<el-button type="primary" size="small" @click="aaa">查询</el-button>
</el-form-item>
</el-form>
</div>
<!-- 班组上下片查询 -->
<group-upper-lower v-if="upperLowerVisible" ref="upperLowerParam"></group-upper-lower>
<!-- 日历区域 -->
<div class="calenderArea">
<div style="font-size: 24px;font-weight: 500">{{ this.month }} {{ this.year }}</div>
<el-calendar v-model="startDay">
<!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
<template
slot="dateCell"
slot-scope="{date, data}">
<div v-if="data.type === 'current-month'">
<!-- 日期 -->
<div class="dateStyle">
{{ Number(data.day.split('-')[2]) }}
{{ data.day }}
</div>
<!-- 班次班组 -->
<!-- class有两个样式，一个是类似class1，还有个是选中红框显示 -->
<el-row :gutter="2" :class="'class' + (index+1) + (chooseTip === (item.startDay+item.classesId) ? ' team-active' : '')" v-for="(item, index) in list[Number(data.day.split('-')[2])]" :key='index'>
<el-col :span="12">
<div class="selectDiv">
<!-- 选择班组图标 -->
<div class="toggle-icon" v-show="showSetting && (new Date(data.day).valueOf() < new Date().valueOf() ? false: true)">
<svg-icon icon-class="toggle"/>
</div>
<!-- 不能选择班组 -->
<div class="toggle-icon-hide" v-show="!(showSetting && (new Date(data.day).valueOf() < new Date().valueOf() ? false: true))"></div>
<el-select v-model="item.teamId" size='small' :disabled="!showSetting || (new Date(data.day).valueOf() > new Date().valueOf() ? false: true)" @change="a">
<el-option
v-for="i in teamList"
:key="i.id"
:label="i.name"
:value="i.id">
</el-option>
</el-select>
</div>
</el-col>
<el-col :span="12">
<el-button class="labelClass" @click="chooseTeam(item)">{{ item.classesName }}</el-button>
</el-col>
</el-row>
</div>
</template>
</el-calendar>
</div>
</div>
</template>
<script>
import { createGroupTeamScheduling } from "@/api/base/groupTeamScheduling";
import GroupUpperLower from "./components/groupUpperLower.vue"
import { getPreset, createOrUpdateList, autoSet } from "@/api/base/groupTeamScheduling";
import { listEnabled } from "@/api/base/groupTeam";
import moment from 'moment';
export default {
name: "GroupTeamScheduling",
components: { GroupUpperLower },
data() {
return {
monthList: [
{id: ''}
],
// 查询参数
queryParams: {
pageNo: 1,
pageSize: 10
},
upperLowerVisible: false
startDay: '',// 查询参数
year: '',// 2023
month: '',// 九月
monthList: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
// list: {
// 1:[
// {
// classesId: "1674293974662062081",
// endTime: 1690891200000,
// startDay:"2023-09-01",
// startTime: 1690848000000,
// teamId: "1685934333821423617",
// teamName: "S班"
// },
// {
// classesId: "1674293974662062081",
// endTime: 1690934400000,
// startDay:"2023-09-01",
// startTime: 1690894000000,
// teamId: "1685926036653445121",
// teamName: "test3"
// }
// ],
// 2:[
// {
// classesId: "1674293974662062081",
// endTime: 1690891200000,
// startDay:"2023-09-02",
// startTime: 1690848000000,
// teamId: "1685934333821423617",
// teamName: "S班"
// },
// {
// classesId: "1674293974662062081",
// endTime: 1690934400000,
// startDay:"2023-09-02",
// startTime: 1690894000000,
// teamId: "1685926036653445121",
// teamName: "test3"
// }
// ],
// 3:[
// {
// classesId: "1674293974662062081",
// endTime: 1690891200000,
// startDay:"2023-09-03",
// startTime: 1690848000000
// },
// {
// classesId: "1674293974662062081",
// endTime: 1690934400000,
// startDay:"2023-09-03",
// startTime: 1690894000000
// }
// ],
// 4:[
// {
// classesId: "1674293974662062081",
// endTime: 1690891200000,
// startDay:"2023-09-04",
// startTime: 1690848000000
// },
// {
// classesId: "1674293974662062081",
// endTime: 1690934400000,
// startDay:"2023-09-04",
// startTime: 1690894000000
// }
// ],
// 5:[
// {
// classesId: "1674293974662062081",
// endTime: 1690891200000,
// startDay:"2023-09-15",
// startTime: 1690848000000
// },
// {
// classesId: "1674293974662062081",
// endTime: 1690934400000,
// startDay:"2023-09-15",
// startTime: 1690894000000
// }
// ],
// 6:[
// {
// classesId: "1674293974662062081",
// endTime: 1690891200000,
// startDay:"2023-09-16",
// startTime: 1690848000000
// },
// {
// classesId: "1674293974662062081",
// endTime: 1690934400000,
// startDay:"2023-09-16",
// startTime: 1690894000000
// }
// ],
// 7:[
// {
// classesId: "1674293974662062081",
// endTime: 1690891200000,
// startDay:"2023-09-17",
// startTime: 1690848000000
// },
// {
// classesId: "1674293974662062081",
// endTime: 1690934400000,
// startDay:"2023-09-17",
// startTime: 1690894000000
// }
// ],
// 18:[
// {
// classesId: "1674293974662062081",
// endTime: 1690891200000,
// startDay:"2023-09-18",
// startTime: 1690848000000
// },
// {
// classesId: "1674293974662062081",
// endTime: 1690934400000,
// startDay:"2023-09-18",
// startTime: 1690894000000
// }
// ]
// },//日历数据
list: [],
teamList: [],// 班组下拉
showSetting: false,// 设置模式。自动排班，确认，取消按钮显示
settingBtnDis: false,
jumpDisabled: true,// 操作按钮控制
chooseObj: {}, //当前选中的数据，查询按钮用
chooseTip: '',// 当前选中数据的唯一值，显示红框
autoScheduling: false // 只有在当前日期后的月份才生效
};
},
created() {
this.startDay = new Date()
// 设置按钮是否置灰
this.settingBtn()
this.getTeamList()
this.toggleMonth()
this.getList()
},
methods: {
getList() {},
toUpperLower() {
this.upperLowerVisible = true
this.$nextTick(() => {
this.$refs.upperLowerParam.init()
// 切换月份
selectMonth() {
if (this.startDay) {
this.settingBtn() // 设置按钮状态,需在getlist前面
this.toggleMonth()
this.getList()
this.clearChoose()
if ( moment(this.startDay).valueOf() > moment().endOf('month').valueOf()) {
this.autoScheduling = true
} else {
this.autoScheduling = false
}
}
},
// 获取班组列表
getTeamList() {
listEnabled().then(res => {
this.teamList = res.data || []
})
},
// 获取日历数据
getList() {
let year = moment(this.startDay).format('YYYY')
let month = moment(this.startDay).format('M')
getPreset({
year: year,
month: month
}).then(res => {
this.list = res.data || []
}).catch(() => {
this.list = []
this.settingBtnDis = true // 禁用设置按钮
})
},
// 设置
settingMsg() {
this.showSetting = !this.showSetting
this.clearChoose()
},
// 取消
cancelSetting() {
this.showSetting = !this.showSetting
this.getList() // 数据还原
},
// 确认
confirmSetting() {
// 打平数据
let tempArr = Object.values(this.list)
let arr = []
for (let i = 0; i < tempArr.length; i++) {
for (let j = 0; j < tempArr[i].length; j++) {
arr.push(tempArr[i][j])
}
}
createOrUpdateList(arr).then(res => {
if (res.code === 0) {
this.showSetting = !this.showSetting
this.getList() // 数据更新
}
})
},
// 点击班次红框选中当前数据
chooseTeam(value) {
if (this.showSetting) {
this.$modal.msgWarning("当前处于设置模式")
return false
}
this.chooseObj = value
this.chooseTip = value.startDay + value.classesId // 匹配当前的样式
this.jumpDisabled = false //查询按钮不禁用
},
// 自动排班
schedulingBtn() {
// 次月1号有值前端排班
if (this.list[1][0].teamId) {
console.log('次月1号有值前端排班')
let tempArr = Object.values(this.list)
let arr = []
let n = 0
for (let i = 0; i < tempArr.length; i++) {
if (n > 0) {
break;
}
for (let j = 0; j < tempArr[i].length; j++) {
if (tempArr[i][j].teamId) {
arr.push(tempArr[i][j].teamId)
} else {
n++
}
}
}
console.log(arr)
for (let k = 0; k < tempArr.length; k++) {
for (let v = 0; v < tempArr[k].length; v++) {
let t = (k*(k+1)+v) % arr.length
// console.log(t)
if (arr.length === 1) {
this.list[k+1][v].teamId = arr[0]
} else {
if (k === 0 && v === 0) {
this.list[k+1][v].teamId = arr[0]
} else {
this.list[k+1][v].teamId = arr[t]
}
}
}
}
} else {
// 次月1号没有值,接口排班
console.log('次月1号没有值接口排班')
autoSet().then(res => {
this.list = res.data || []
})
}
},
// 设置按钮如果是上个月或者今天是本月最后一天，设置按钮置灰
settingBtn() {
let nowMonth = moment().startOf('month').valueOf()
let startMonth = moment(this.startDay).valueOf()
let nowDate = moment(new Date()).date()
let sumDate = moment().daysInMonth()
if (nowMonth > startMonth) { // 之前月
this.settingBtnDis = true
} else {
if (nowDate < sumDate) {
this.settingBtnDis = false
} else {
this.settingBtnDis = true
}
}
},
// 清除红框选中数据
clearChoose() {
this.chooseObj = {}
this.chooseTip = ""
this.jumpDisabled = true
},
// 切换月份显示
toggleMonth() {
this.year = moment(this.startDay).format("YYYY")
let month = Number(moment(this.startDay).format("MM"))
this.month = this.monthList[month - 1]
},
// 3个跳转按钮
toOtherPage(val) {
switch (val) {
case '1':
this.$router.push({
path: '/core/monitoring/production-line-data',
// name: 'reportDesign',
params: { startTime: '1111', endTime: '2222' }
})
break;
case '2':
this.$router.push({
// path: '/energy/monitoring/energy-report-search',
name: 'EnergyReportSearch',
params: { startTime: '1111', endTime: '2222' }
})
console.log('aaa')
break;
default:
this.$router.push({
path: '/quality/monitoring/quality-statistics',
// name: 'reportDesign',
params: { startTime: '1111', endTime: '2222' }
})
}
},
aaa() {
console.log(this.list)
},
a() {
console.log('11111')
this.$forceUpdate()
}
}
}
};
</script>
<style lang='scss'>
.groupTeamScheduling {
background-color: #F2F4F9;
.operationArea {
padding: 14px 10px 0 16px;
margin-bottom: 8px;
background-color: #fff;
border-radius: 8px;
.blue-block {
display: inline-block;
width: 4px;
height: 16px;
background-color: #0B58FF;
border-radius: 1px;
margin-right: 8px;
margin-top: 10px;
}
.separateStyle {
display: inline-block;
width: 1px;
height: 24px;
background: #E8E8E8;
vertical-align: middle;
}
.el-form-item {
margin-bottom: 10px;
}
.rightItem {
float: right;
}
}
// 日历
.calenderArea {
padding: 14px 10px 0 20px;
background-color: #fff;
border-radius: 8px;
.el-calendar__body {
padding: 10px 16px 16px 0;
}
.el-calendar__header {
display: none;
}
.el-calendar-table > thead {
height: 48px;
font-size: 20px;
font-weight: 500;
color: #000000;
background-color: rgba(242, 244, 249, 1);
}
.el-calendar-table__row {
height: 133px;
.prev, .next {
pointer-events: none;
}
.el-calendar-day {
padding: 0 10px;
height: 100%;
.dateStyle {
font-size: 20px;
font-weight: 500;
color: #000000;
text-align: right;
height: 32px;
line-height: 28px;
padding-right: 10px;
}
}
}
.team-active {// 选中班组
border:2px solid red
}
.class1, .class2, .class3 {
padding: 0;
font-weight: 600;
margin-bottom: 2px;
.selectDiv {
position: relative;
.toggle-icon {
position: absolute;
width: 26px;
height: 26px;
line-height: 26px;
font-size: 14px;
z-index: 1;
text-align: center;
}
.toggle-icon-hide {
position: absolute;
width: 2px;
height: 28px;
z-index: 1;
}
.el-input__suffix {
display: none;
}
.el-input--suffix .el-input__inner {
padding: 0 4px 0 28px;
}
.el-input--small .el-input__inner {
height: 28px;
border: none;
font-weight: 600;
}
}
.labelClass {
width: 100%;
height: 28px;
border: none;
padding: 0;
font-weight: 600;
text-align: center;
}
}
.class1 {
.selectDiv {
.toggle-icon, .toggle-icon-hide {
background-color: #FACE00;
}
.el-input--small .el-input__inner {
color: #E7A200;
background-color: #FFEFC0;
}
}
.labelClass {
color: #E7A200;
background-color: #FFEFC0;
}
}
.class2 {
.selectDiv {
.toggle-icon, .toggle-icon-hide {
background-color: #3984FF;
}
.el-input--small .el-input__inner {
color: #2D7BFF;
background-color: #BEEAFF;
}
}
.labelClass {
color: #2D7BFF;
background-color: #BEEAFF;
}
}
.class3 {
.selectDiv {
.toggle-icon, .toggle-icon-hide {
background-color: #37D97F;
}
.el-input--small .el-input__inner {
color: #129F51;
background-color: #E0FFEE;
}
}
.labelClass {
color: #129F51;
background-color: #E0FFEE;
}
}
}
}
</style>