<!--
|
* @Date: 2024-05-04 16:37:48
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-05-05 21:02:54
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/base/Add.vue
|
-->
|
<template>
|
<el-container>
|
<el-main>
|
<el-row>
|
<el-form style="width: 100%;" :model="form" :rules="rules" ref="dialogForm" label-width="120px"
|
label-position="center">
|
<el-row>
|
<el-col :span="8">
|
<el-form-item label="生产日历编号" prop="code">
|
<el-input v-model="form.code" placeholder="请输入生产日历编号" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="生产日历名称" prop="name">
|
<el-input v-model="form.name" placeholder="请输入生产日历名称" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="应用年份" prop="year">
|
<el-select v-model="form.year" placeholder="" size="" @change="change">
|
<el-option v-for="item in options" :key="item.value" :label="item.label"
|
:value="item.value" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="应用日期" prop="date">
|
<el-date-picker v-model="form.date" type="daterange" value-format="YYYY-MM-DD"
|
start-placeholder="开始日期" end-placeholder="结束日期" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8" :offset="1">
|
<el-button-group>
|
<el-button :type="activeBtn == 0 ? 'primary' : ''"
|
@click="activeBtn = 0">按规律选中日期</el-button>
|
<el-button :type="activeBtn == 1 ? 'primary' : ''" @click="activeBtn = 1">
|
按间隔选中日期
|
</el-button>
|
</el-button-group>
|
</el-col>
|
<el-col :offset="1">
|
<el-radio-group v-model="holiday">
|
<el-radio :label="0">包含假期</el-radio>
|
<el-radio :label="1">不含假期</el-radio>
|
<el-radio :label="2">仅含假期</el-radio>
|
</el-radio-group>
|
</el-col>
|
<el-col :span="4" :offset="1">
|
<el-checkbox-group v-model="checkboxGroup" size="small" style="width: 200px"
|
@change="change">
|
<el-checkbox-button v-for="item in quicks" :key="item.value" :label="item.value">
|
{{ item.label }}
|
</el-checkbox-button>
|
</el-checkbox-group>
|
|
</el-col>
|
<el-col :span="8">
|
<el-checkbox-group v-model="checkboxGroup1" size="small" style="width: 400px">
|
<el-checkbox-button v-for="item in weeks" :key="item.value" :label="item.value">
|
{{ item.label }}
|
</el-checkbox-button>
|
</el-checkbox-group>
|
</el-col>
|
</el-row>
|
<el-row v-if="months.length > 0">
|
<el-col :span="6" v-for="(item, i) in months" :key="i" style="padding: 10px;">
|
<!-- <Calendar :min-date="item.start" :rows="1" :attributes="item.attributes"
|
@dayclick="dayclick($event, item)" /> -->
|
<Calendar :initial-page="{ month: item.month + 1, year: item.year }" :rows="1"
|
disable-page-swipe :nav-visibility="''" :attributes='item.attributes'
|
@dayclick="dayclick($event, item)" />
|
</el-col>
|
</el-row>
|
</el-form>
|
</el-row>
|
</el-main>
|
<el-footer>
|
<el-row style="align-items: center;">
|
<el-col :span="2">
|
班制方案
|
</el-col>
|
<el-col :span="4">
|
<el-select v-model="modelId" placeholder="" size="">
|
<el-option v-for="item in shiftList" :key="item.id" :label="item.name" :value="item.id">{{
|
item.name }}</el-option>
|
</el-select>
|
</el-col>
|
<el-col :span="2">
|
当前排班优先
|
</el-col>
|
<el-col :span="4">
|
<el-switch v-model="isHighPriority" active-text="优先" inactive-text="不优先" />
|
</el-col>
|
<el-col :span="2">
|
<el-button type="primary" @click="plan">排班</el-button>
|
</el-col>
|
<el-col :span="2">
|
<el-button type="" @click="planCancel">取消排班</el-button>
|
</el-col>
|
<el-col :span="2">
|
<el-button type="primary" @click="save">保存</el-button>
|
</el-col>
|
</el-row>
|
|
</el-footer>
|
|
</el-container>
|
</template>
|
|
<script>
|
import moment from 'moment'
|
import { Calendar, DatePicker } from 'v-calendar';
|
export default {
|
components: {
|
Calendar,
|
DatePicker
|
},
|
props: {
|
shiftList: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
}
|
},
|
data() {
|
return {
|
modelId: '',
|
isHighPriority: false,
|
dateDTOList: [],
|
selectAttribute: [{ dot: true }],
|
activeBtn: 0,
|
checkboxGroup: [],
|
checkboxGroup1: [],
|
holiday: 0,
|
months: [
|
],
|
quicks: [{
|
label: '工作日',
|
value: 0
|
}, {
|
label: '周末',
|
value: 1
|
}],
|
weeks: [
|
{
|
label: '一',
|
value: 1
|
},
|
{
|
label: '二',
|
value: 2
|
},
|
{
|
label: '三',
|
value: 3
|
},
|
{
|
label: '四',
|
value: 4
|
},
|
{
|
label: '五',
|
value: 5
|
},
|
{
|
label: '六',
|
value: 6
|
},
|
{
|
label: '日',
|
value: 0
|
},
|
],
|
options: [],
|
form: {
|
year: ''
|
},
|
rules: {
|
name: [
|
{ required: true, message: '' }
|
],
|
code: [
|
{ required: true, message: '' }
|
],
|
year: [
|
{ required: true, message: '' }
|
],
|
}
|
}
|
},
|
watch: {
|
holiday() {
|
this.setDay()
|
},
|
checkboxGroup1() {
|
this.setDay()
|
},
|
'form.year'(val) {
|
this.months = []
|
let currentYear = moment(val, 'YYYY').format('YYYY') - 0
|
|
// console.log(this.months)
|
this.$HTTP.post('/api/blade-cps/shift-off-day/list', {
|
year: currentYear,
|
startOffDay: `${currentYear}-01-01`,
|
endOffDay: `${currentYear}-12-31`
|
}).then(res => {
|
if (res.code === 200) {
|
this.offDays = res.data
|
}
|
let arr = []
|
this.offDays.forEach(v => {
|
arr.push(v.startOffDay)
|
let day = moment(v.startOffDay)
|
while (day.add(1, 'd').unix() <= moment(v.endOffDay).unix()) {
|
arr.push(day.format('YYYY-MM-DD'))
|
}
|
})
|
for (let i = 0; i < 12; i++) {
|
this.months.push({
|
year: currentYear,
|
month: i,
|
id: `${currentYear}${i}`,
|
min: new Date('2024-01-01'),
|
attributes: [
|
{
|
dot: 'yellow',
|
dates: arr.filter(item => {
|
// console.log(moment(item).month(), 'mmonth', item)
|
return moment(item).month() === i
|
})
|
},
|
{
|
highlight: true,
|
dates: [],
|
}
|
]
|
})
|
|
}
|
console.log(this.months, '?/')
|
})
|
},
|
shiftList() {
|
this.modelId = this.shiftList[0].id
|
}
|
},
|
created() {
|
|
this.init()
|
},
|
methods: {
|
init() {
|
let len = 15
|
let currentYear = moment().format('YYYY') - 0
|
this.form.year = currentYear
|
|
for (let i = 0; i < len; i++) {
|
this.options.push({
|
label: currentYear + i,
|
value: currentYear + i
|
})
|
}
|
this.form.date = [moment().format('YYYY-MM-DD'), moment(`${currentYear}-12-31`).format('YYYY-MM-DD')]
|
// console.log(this.form)
|
},
|
change(val) {
|
this.checkboxGroup1 = []
|
if (val?.some(v => v === 0)) {
|
this.checkboxGroup1.push(...[1, 2, 3, 4, 5])
|
}
|
if (val?.some(v => v === 1)) {
|
this.checkboxGroup1.push(...[0, 6])
|
}
|
},
|
setDay() {
|
let currentYear = moment(this.form.year, 'YYYY').format('YYYY') - 0
|
this.months.forEach((item, i) => {
|
let start = moment(`${currentYear}-${i + 1}-01`)
|
let end = moment(`${currentYear}-${i + 2}-01`)
|
let dates = []
|
console.log(start.format('YYYY-MM-DD'), start.unix() >= moment(this.form.date[0]).unix() && start.unix() <= moment(this.form.date[1]).unix())
|
while (start.unix() < end.unix()) {
|
if (this.checkboxGroup1.includes(start.day()) && this.holiday === 0) {
|
this.pushDate(start) && dates.push(start.format('YYYY-MM-DD'))
|
} else if (this.checkboxGroup1.includes(start.day()) && this.holiday === 1) {
|
if (!this.months[i].attributes[0].dates.includes(start.format('YYYY-MM-DD'))) {
|
this.pushDate(start) && dates.push(start.format('YYYY-MM-DD'))
|
}
|
} else if (this.checkboxGroup1.includes(start.day()) && this.holiday === 2) {
|
if (this.months[i].attributes[0].dates.includes(start.format('YYYY-MM-DD'))) {
|
this.pushDate(start) && dates.push(start.format('YYYY-MM-DD'))
|
}
|
}
|
start.add(1, 'd')
|
}
|
this.months[i].attributes[1].dates = dates
|
})
|
},
|
pushDate(start) {
|
if (start.unix() >= moment(this.form.date[0]).unix() && start.unix() <= moment(this.form.date[1]).unix()) {
|
return true
|
}
|
return false
|
},
|
dayclick(day, item) {
|
|
let index = item.attributes[1].dates.findIndex(v => v === day.id)
|
console.log(index)
|
if (index >= 0) {
|
item.attributes[1].dates.splice(index, 1)
|
} else {
|
item.attributes[1].dates.push(day.id)
|
}
|
console.log(index, item.attributes[1].dates)
|
},
|
plan() {
|
let dateDTOList = this.months.map(item => item.attributes[1].dates)
|
let list = dateDTOList.flat(2).map(v => {
|
return {
|
modelId: this.modelId,
|
isHighPriority: this.isHighPriority ? 1 : 0,
|
calendarDate: v,
|
...this.setOffDay(v)
|
}
|
})
|
console.log(list)
|
this.dateDTOList = list
|
},
|
setOffDay(time) {
|
let { id: offDayId } = this.offDays.find(v => moment(time).unix() >= moment(v.startOffDay).unix() && moment(time).unix() <= moment(v.endOffDay).unix()) || {}
|
let idOffDay = offDayId ? 1 : 0
|
return {
|
idOffDay,
|
offDayId
|
}
|
},
|
planCancel() {
|
|
},
|
save() {
|
this.$refs.dialogForm.validate(async (valid) => {
|
if (valid) {
|
if (this.dateDTOList.length == 0) {
|
return this.$message.warning('未排班');
|
}
|
let data = {
|
codeRuleId: '',
|
code: this.form.code,
|
name: this.form.name,
|
year: this.form.year,
|
status: 1,
|
dateDTOList: this.dateDTOList
|
}
|
this.$HTTP.post('/api/blade-cps/calendar', data).then(res => {
|
if (res.code === 200) {
|
this.$emit('success')
|
} else {
|
this.$message.warning(res.msg);
|
}
|
})
|
console.log(this.form, this.dateDTOList)
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped></style>
|
