update

gaoshp

2024-05-05 e5c52d589e83bd7f4d50e62bed2b05b27740282a

update

 src/views/console/base/Add.vue

@@ -1,62 +1,143 @@
<!--
 * @Date: 2024-05-04 16:37:48
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-04 17:14:15
 * @LastEditTime: 2024-05-05 00:16:31
 * @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-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-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-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-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>

    </el-container>
</template>

<script>
import moment from 'moment'
import { Calendar, DatePicker } from 'v-calendar';
export default {
    components: {
        Calendar,
        DatePicker
    },
    data() {
        return {
            selectAttribute: [{ dot: true }],
            activeBtn: 0,
            checkboxGroup: [],
            checkboxGroup1: [],
            months: [

            ],
            quicks: [{
                label: '工作日',
                value: 0
            }, {
                label: '周末',
                value: 1
            }],
            weeks: [
                {
                    label: '一',
                    value: 0
                },
                {
                    label: '二',
                    value: 1
                },
                {
                    label: '三',
                    value: 2
                },
                {
                    label: '四',
                    value: 3
                },
                {
                    label: '五',
                    value: 4
                },
                {
                    label: '六',
                    value: 5
                },
                {
                    label: '日',
                    value: 6
                },
            ],
            options: [],
            form: {},
            form: {
                year: ''
            },
            rules: {
                name: [
                    { required: true, message: '' }
@@ -68,6 +149,55 @@
                    { required: true, message: '' }
                ],
            }
        }
    },
    watch: {
        checkboxGroup1() {

        },
        '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 = []
                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 < 1; i++) {
                    console.log('>>>>', moment().year(currentYear).month(i).date(1).toDate())
                    this.months.push({
                        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, '?/')
            })
        }
    },
    created() {
@@ -86,7 +216,27 @@
                })
            }
            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(...[0, 1, 2, 3, 4])
            }
            if (val?.some(v => v === 1)) {
                this.checkboxGroup1.push(...[5, 6])
            }
        },
        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)
        }
    }
}

 src/views/console/base/CalenderTab.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-04-04 22:45:43
 * @LastEditors: Sneed
 * @LastEditTime: 2024-05-04 16:44:58
 * @LastEditTime: 2024-05-05 00:14:21
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/base/CalenderTab.vue
-->
<template>
@@ -28,8 +28,8 @@
                </el-popconfirm>
            </el-header>
            <el-main>
                <Calendar :min-date="minDate" :rows="1" disable-page-swipe :nav-visibility="''"
                    :attributes='attributes' />
                <Calendar :min-date="minDate" :rows="1" disable-page-swipe :nav-visibility="''" :attributes='attributes'
                    @dayclick="dayclick($event, item)" />
            </el-main>
        </el-container>
        <el-drawer v-model="drawer" size="80%" title="生产日历" :direction="direction" :before-close="handleClose">
@@ -68,6 +68,9 @@
        this.init()
    },
    methods: {
        dayclick(day) {
            console.log(day)
        },
        init() {
            this.minDate = new Date('2024-01-01')
            this.maxDate = new Date('2024-01-31')