1

lzhe

2024-10-07 9516d95bdcc481b71d4b090bbdcfff39a84b26d6

 src/views/console/base/CalenderTab.vue

@@ -1,8 +1,8 @@
<!--
 * @Date: 2024-04-04 22:45:43
 * @LastEditors: gaosp
 * @LastEditTime: 2024-09-07 15:15:29
 * @FilePath: /mdc/Users/mache/Documents/demo/cps-web/src/views/console/base/CalenderTab.vue
 * @LastEditors: gaoshp
 * @LastEditTime: 2024-10-02 20:52:59
 * @FilePath: /cps-web/src/views/console/base/CalenderTab.vue
-->
<template>
    <el-container>
@@ -21,7 +21,7 @@
            <el-header>
                <span>日历【{{ selectInfo.code }}】{{ selectInfo.name }}</span>
                <el-button type="primary" style="margin-left: auto;" size="small" @click="relationWork">关联工位</el-button>
                <!-- <el-button type="primary" size="small">编辑日历</el-button> -->
                <el-button type="primary" size="small" @click="edit">编辑日历</el-button>
                <el-popconfirm title="确定删除吗？" @confirm="table_del">
                    <template #reference>
                        <el-button type="primary" size="small">删除</el-button>
@@ -29,18 +29,29 @@
                </el-popconfirm>
            </el-header>
            <el-main>
                <el-row :gutter="12" v-show="shiftListName.length > 0">
                    <el-button v-for="item in shiftListName">{{ item.code + '-' + item.name
                        }}</el-button>
                </el-row>
                <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' />
                            disable-page-swipe :nav-visibility="''" :attributes='item.attributes'>
                            <!-- <template #day-popover="row">
                                <div class="text-xs text-gray-700 dark:text-gray-300">
                                    123123{{ row }}
                                </div>
                            </template> -->
                        </Calendar>
                    </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 :shiftList="shiftList" @success="success"></Add>
        <el-drawer v-if="drawer" v-model="drawer" size="80%" title="生产日历" :direction="direction"
            :before-close="handleClose">
            <Add v-if="drawer" :shiftList="shiftList" :drawerInfo="drawerInfo" @success="success"></Add>
        </el-drawer>
        <el-drawer v-model="raworkVisible" size="80%" title="生产日历" :direction="direction" :before-close="handleClose">
            <el-container v-if="raworkVisible">
@@ -62,6 +73,7 @@
import 'v-calendar/style.css';
import Add from './Add.vue'
import moment from 'moment';
import color from '@/utils/color'
export default {
    components: {
        Calendar,
@@ -71,6 +83,7 @@
    data() {
        return {
            shiftList: [],
            shiftListName: [],
            selectInfo: {},
            drawer: false,
            months: [],
@@ -87,6 +100,9 @@
                label: 'title',
                children: 'children',
            },
            drawerInfo: {},
            color

        }
    },
    created() {
@@ -94,6 +110,10 @@
        this.init()
    },
    methods: {
        edit() {
            this.drawer = true
            this.drawerInfo = this.selectInfo
        },
        relationWork() {
            this.$HTTP.post('/api/blade-cps/group/groupWorkstation', { groupCategory: 1, groupType: 'group_workstation' }).then(res => {
                if (res.code === 200) {
@@ -183,14 +203,24 @@
            })
        },
        select(row) {
            this.selectInfo = {
                ...row
            }

            this.months = []
            this.$HTTP.get(`/api/blade-cps/calendar/${row.id}`).then(res => {
                if (res.code === 200) {
                    console.log(res.data)
                    this.setDay(res.data)
                    console.log('////', this.shiftList, res.data.calendarDayVOList[0].id)
                    let modelIds = [...new Set(res.data.calendarDayVOList.map(v => v.modelId))]
                    if (modelIds.length > 0) {
                        this.shiftListName = this.shiftList.filter(v => modelIds.includes(v.id))
                    } else {
                        this.shiftListName = []
                    }

                }
                this.selectInfo = {
                    ...row,
                    calendarDayVOList: res.data.calendarDayVOList
                }
            })
        },
@@ -204,6 +234,7 @@
        },
        add() {
            this.drawer = true
            this.drawerInfo = {}
        },
        load(flag) {
            if (flag) this.current = 0;
@@ -248,6 +279,20 @@
                    })

                    for (let i = 0; i < 12; i++) {
                        data.calendarDayVOList.map(v => v.modelId)
                        let modelIds = [...new Set(data.calendarDayVOList.map(v => v.modelId))]
                        let ext = modelIds.map(v => {
                            let ban = this.shiftListName.find(item => item.id === v)
                            return {
                                highlight: color.stringToColor(v),
                                dates: data.calendarDayVOList.filter(item => {
                                    return moment(item.calendarDate).month() === i && item.modelId === v
                                }).map(v => v.calendarDate),
                                popover: {
                                    label: `${ban?.code}-${ban?.name}`
                                },
                            }
                        })
                        this.months.push({
                            year: year,
                            month: i,
@@ -259,16 +304,11 @@
                                        return moment(item).month() === i
                                    })
                                },
                                {
                                    highlight: true,
                                    dates: data.calendarDayVOList.filter(item => {
                                        console.log(moment(item).month(), '>>>123')
                                        return moment(item.calendarDate).month() === i
                                    }).map(v => v.calendarDate),
                                }
                                ...ext
                            ]
                        })
                    }
                    console.log(this.months, '------------')
                }
            })