From 6f1ac1da6b6cba5c74f2fb6be82f7e472c4116ee Mon Sep 17 00:00:00 2001
From: gaoshp <291585735@qq.com>
Date: 星期一, 03 六月 2024 22:46:19 +0800
Subject: [PATCH] 班制日历
---
src/views/console/base/Add.vue | 302 ++++++++++++++++++++++++++++++++++++--------------
1 files changed, 217 insertions(+), 85 deletions(-)
diff --git a/src/views/console/base/Add.vue b/src/views/console/base/Add.vue
index a0c6a31..6c89b54 100644
--- a/src/views/console/base/Add.vue
+++ b/src/views/console/base/Add.vue
@@ -1,81 +1,114 @@
<!--
* @Date: 2024-05-04 16:37:48
* @LastEditors: Sneed
- * @LastEditTime: 2024-05-05 00:16:31
+ * @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-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="radio">
- <el-radio :value="0">鍖呭惈鍋囨湡</el-radio>
- <el-radio :value="1">涓嶅惈鍋囨湡</el-radio>
- <el-radio :value="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-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"
+ </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 :min-date="item.min" :rows="1" disable-page-swipe :nav-visibility="''"
- :attributes='item.attributes' @dayclick="dayclick($event, item)" />
- </el-col>
- </el-row>
- </el-form>
- </el-row>
+ <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>
@@ -88,14 +121,25 @@
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: '宸ヤ綔鏃�',
@@ -107,31 +151,31 @@
weeks: [
{
label: '涓�',
- value: 0
- },
- {
- label: '浜�',
value: 1
},
{
- label: '涓�',
+ label: '浜�',
value: 2
},
{
- label: '鍥�',
+ label: '涓�',
value: 3
},
{
- label: '浜�',
+ label: '鍥�',
value: 4
},
{
- label: '鍏�',
+ label: '浜�',
value: 5
},
{
- label: '鏃�',
+ label: '鍏�',
value: 6
+ },
+ {
+ label: '鏃�',
+ value: 0
},
],
options: [],
@@ -152,8 +196,11 @@
}
},
watch: {
+ holiday() {
+ this.setDay()
+ },
checkboxGroup1() {
-
+ this.setDay()
},
'form.year'(val) {
this.months = []
@@ -169,16 +216,18 @@
this.offDays = res.data
}
let arr = []
- res.data.forEach(v => {
+ 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 < 1; i++) {
- console.log('>>>>', moment().year(currentYear).month(i).date(1).toDate())
+ for (let i = 0; i < 12; i++) {
this.months.push({
+ year: currentYear,
+ month: i,
+ id: `${currentYear}${i}`,
min: new Date('2024-01-01'),
attributes: [
{
@@ -198,9 +247,13 @@
}
console.log(this.months, '?/')
})
+ },
+ shiftList() {
+ this.modelId = this.shiftList[0].id
}
},
created() {
+
this.init()
},
methods: {
@@ -221,11 +274,41 @@
change(val) {
this.checkboxGroup1 = []
if (val?.some(v => v === 0)) {
- this.checkboxGroup1.push(...[0, 1, 2, 3, 4])
+ this.checkboxGroup1.push(...[1, 2, 3, 4, 5])
}
if (val?.some(v => v === 1)) {
- this.checkboxGroup1.push(...[5, 6])
+ 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) {
@@ -237,6 +320,55 @@
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)
+ }
+ })
}
}
}
--
Gitblit v1.9.3