update

gaoshp

2024-05-05 c86da16be812ecdb7d9bde5960ad1d6ef61fb2de

update

 src/views/console/base/Add.vue

@@ -1,11 +1,12 @@
<!--
 * @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-main>
        <el-row>
            <el-form style="width: 100%;" :model="form" :rules="rules" ref="dialogForm" label-width="120px"
                label-position="center">
@@ -44,14 +45,15 @@
                        </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 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-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>
@@ -70,12 +72,43 @@
                    <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)" />
                            <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)
                }
            })
        }
    }
}

 src/views/console/base/CalenderTab.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-04-04 22:45:43
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-05 00:14:21
 * @LastEditTime: 2024-05-05 21:14:09
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/base/CalenderTab.vue
-->
<template>
@@ -20,7 +20,7 @@
            <el-header>
                <span>日历【{{ selectInfo.code }}】{{ selectInfo.name }}</span>
                <el-button type="primary" style="margin-left: auto;" size="small">关联工位</el-button>
                <el-button type="primary" size="small">编辑日历</el-button>
                <!-- <el-button type="primary" size="small">编辑日历</el-button> -->
                <el-popconfirm title="确定删除吗？" @confirm="table_del">
                    <template #reference>
                        <el-button type="primary" size="small">删除</el-button>
@@ -28,12 +28,18 @@
                </el-popconfirm>
            </el-header>
            <el-main>
                <Calendar :min-date="minDate" :rows="1" disable-page-swipe :nav-visibility="''" :attributes='attributes'
                    @dayclick="dayclick($event, item)" />
                <el-row>
                    <el-col :span="6" style="padding:  10px;" v-for="item in months" :key="item.month">
                        <Calendar :initial-page="{ month: item.month + 1, year: item.year }" :rows="1"
                            disable-page-swipe :nav-visibility="''" :attributes='item.attributes' />
                    </el-col>
                </el-row>
                <!-- :initial-page="{ month: item.month + 1, year: item.year }" -->

            </el-main>
        </el-container>
        <el-drawer v-model="drawer" size="80%" title="生产日历" :direction="direction" :before-close="handleClose">
            <Add></Add>
            <Add :shiftList="shiftList" @success="success"></Add>
        </el-drawer>
    </el-container>
</template>
@@ -42,6 +48,7 @@
import { Calendar, DatePicker } from 'v-calendar';
import 'v-calendar/style.css';
import Add from './Add.vue'
import moment from 'moment';
export default {
    components: {
        Calendar,
@@ -52,7 +59,8 @@
        return {
            shiftList: [],
            selectInfo: {},
            drawer: true,
            drawer: false,
            months: [],
            attributes: [

            ],
@@ -72,8 +80,6 @@
            console.log(day)
        },
        init() {
            this.minDate = new Date('2024-01-01')
            this.maxDate = new Date('2024-01-31')
            this.$HTTP.post('/api/blade-cps/shift/list', { statusList: [1] }).then(res => {
                if (res.code === 200) {
                    this.shiftList = res.data
@@ -84,6 +90,12 @@
            this.selectInfo = {
                ...row
            }
            this.$HTTP.get(`/api/blade-cps/calendar/${row.id}`).then(res => {
                if (res.code === 200) {
                    console.log(res.data)
                    this.setDay(res.data)
                }
            })
        },
        table_del() {
            this.$HTTP.delete(`/api/blade-cps/calendar/${this.selectInfo.id}`).then(res => {
@@ -116,6 +128,72 @@
                }

            })
        },
        success() {
            this.drawer = false
            this.load(true)
        },
        setDay(data) {
            let year = data.year
            this.$HTTP.post('/api/blade-cps/shift-off-day/list', {
                year: year,
                startOffDay: `${year}-01-01`,
                endOffDay: `${year}-12-31`
            }).then(res => {
                if (res.code === 200) {
                    let arr = []
                    res.data.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: year,
                            month: i,
                            attributes: [
                                {
                                    dot: 'yellow',
                                    dates: arr.filter(item => {
                                        // console.log(moment(item).month(), 'mmonth', item)
                                        return moment(item).month() === i
                                    })
                                },
                                {
                                    highlight: true,
                                    dates: data.calendarDayVOList.filter(item => {
                                        return moment(item).month() === i
                                    }),
                                }
                            ]
                        })
                    }
                }
            })


            // this.months.forEach((item, i) => {
            //     let start = moment(`${currentYear}-${i + 1}-01`)
            //     let end = moment(`${currentYear}-${i + 2}-01`)
            //     let dates = []
            //     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
            // })
        }
    }
}

 src/views/console/base/shift-calendar.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-04-04 21:51:24
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-04 15:40:16
 * @LastEditTime: 2024-05-05 20:56:40
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/base/shift-calendar.vue
-->
<template>
@@ -12,7 +12,7 @@
                    <CalenderTab></CalenderTab>
                </el-tab-pane>
                <el-tab-pane label="班制" name="2">
                    <ShiftsystemVue></ShiftsystemVue>
                    <ShiftsystemVue v-if="activeName == 2"></ShiftsystemVue>
                </el-tab-pane>
            </el-tabs>
        </el-card>