smart-web.git - Gitblit

			@@ -1,62 +1,187 @@
			<!--
			* @Date: 2024-05-04 16:37:48
			* @LastEditors: Sneed
			* @LastEditTime: 2024-05-04 17:14:15
			* @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-form style="width: 100%;" :model="form" :rules="rules" ref="dialogForm" label-width="120px"
			label-position="center">
			<el-main>
			<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-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="8">
			<el-form-item label="生产日历名称" prop="name">
			<el-input v-model="form.name" placeholder="请输入生产日历名称" clearable></el-input>
			</el-form-item>
			<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="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 :span="2">
			当前排班优先
			</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 :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-form>
			<el-row>
			<el-col>
			<el-button-group>
			<el-button type="primary" :icon="ArrowLeft">Previous Page</el-button>
			<el-button type="primary">
			Next Page<el-icon class="el-icon--right">
			<ArrowRight />
			</el-icon>
			</el-button>
			</el-button-group>
			</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: {},
			form: {
			year: ''
			},
			rules: {
			name: [
			{ required: true, message: '' }
			@@ -70,7 +195,65 @@
			}
			}
			},
			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: {
			@@ -86,7 +269,106 @@
			})
			}
			this.form.date = [moment().format('YYYY-MM-DD'), moment(`${currentYear}-12-31`).format('YYYY-MM-DD')]
			console.log(this.form)
			// 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)
			}
			})
			}
			}
			}