update

gaoshp

2024-11-03 3931e2728f618d0090f129b2665bc1285c4440c3

 src/views/console/base/CalenderTab.vue

@@ -1,40 +1,247 @@
<!--
 * @Date: 2024-04-04 22:45:43
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-05 00:10:43
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/cps-web/src/views/console/base/CalenderTab.vue
 * @LastEditors: gaoshp
 * @LastEditTime: 2024-10-09 22:59:25
 * @FilePath: /cps-web/src/views/console/base/CalenderTab.vue
-->
<template>
    <el-container>
        <el-aside width="220px">
            <el-button type="primary" icon="el-icon-plus" @click="add">新建日历</el-button>
            <div v-infinite-scroll="load">
                <el-card shadow="never" class="card" :class="selectInfo.id === item.id ? 'active' : ''"
                    v-for="item in caleList" :key="item.id" @click="select(item)">
                    <h3>{{ item.code }}</h3>
                    <p>日历名称: {{ item.name }}</p>
                    <p>应用年份: {{ item.year }}</p>
                </el-card>
            </div>
        </el-aside>
        <el-container>
            <el-aside width="220px">
                <el-button type="primary" icon="el-icon-plus">新建日历</el-button>
                <div v-infinite-scroll="load">
                    <el-card shadow="never" class="card" v-for="item in caleList" :key="item.id">
                        <h3>{{item.code}}</h3>
                        <p>日历名称: {{item.name}}</p>
                        <p>应用年份: {{item.year}}</p>
                    </el-card>
                </div>
            <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" @click="edit">编辑日历</el-button>
                <el-popconfirm title="确定删除吗？" @confirm="table_del">
                    <template #reference>
                        <el-button type="primary" size="small">删除</el-button>
                    </template>
                </el-popconfirm>
            </el-header>
            <el-main>
                <el-row :gutter="12" v-show="shiftListName.length > 0">
                    <el-button v-for="item in shiftListName"
                        :style="{ backgroundColor: item.colour || '#2563eb', color: '#fff' }">{{
                            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'>
                            <!-- <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-aside>
            </el-main>
        </el-container>
        <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">
                <el-main>
                    <el-tree ref="workstations" default-expand-all :data="workStations" show-checkbox node-key="id"
                        :props="defaultProps" :render-content="renderContent" />
                </el-main>
                <el-footer style="text-align: right">
                    <el-button type="primary" @click="saveBefore">保存</el-button>
                </el-footer>
            </el-container>

        </el-drawer>
    </el-container>
</template>

<script>
import { Calendar, DatePicker } from 'v-calendar';
import 'v-calendar/style.css';
import Add from './Add.vue'
import moment from 'moment';
import color from '@/utils/color'
export default {
    components: {
        Calendar,
        DatePicker,
        Add
    },
    data() {
        return {
            shiftList: [],
            shiftListName: [],
            selectInfo: {},
            drawer: false,
            months: [],
            attributes: [

            ],
            current: 0,
            total: 1,
            caleList: []
            caleList: [],
            minDate: '',
            maxDate: '',
            raworkVisible: false,
            defaultProps: {
                label: 'title',
                children: 'children',
            },
            drawerInfo: {},
            color

        }
    },
    created() {
        this.load()
        this.init()
    },
    methods: {
        load() {
            if  (this.current * 15 >= this.total) {
        edit() {
            this.drawer = true
            this.drawerInfo = this.selectInfo
        },
        relationWork() {
            this.$HTTP.post('/api/smis/group/groupWorkstation', { groupCategory: 1, groupType: 'group_workstation' }).then(res => {
                if (res.code === 200) {
                    this.raworkVisible = true
                    this.workStations = this.formatData(res.data)
                }
            })

        },
        formatData(data, current) {
            let newData = []
            if (!current) {
                newData = data.filter(item => item.parentId == 0).map(v => {
                    v.children = this.formatData(data, v).sort((a, b) => {
                        return b.sort - a.sort
                    })
                    return v
                })
            } else {
                let res = data.filter(v => v.parentId == current.id)
                res = res.map(item => {
                    item.children = this.formatData(data, item).sort((a, b) => {
                        return b.sort - a.sort
                    })
                    return item
                })
                return res
            }
            return newData
        },
        renderContent(h, { data }) {
            if (data.isWorkstation) {
                return h('div', {}, [
                    h('span', {}, data.title),
                    data.calendarCode ? h('span', {
                        style: {
                            marginLeft: '10px',
                            color: 'var(--el-color-primary)'
                        }
                    }, `已关联(${data.calendarCode})`) : ''
                ])
            } else {
                return data.title
            }
        },
        saveBefore() {
            let workstation = this.$refs.workstations.getCheckedNodes().filter(v => v.isWorkstation) || []
            if (workstation.length == 0) {
                return this.$message.warning("请选择");
            }
            if (workstation.some(v => v.calendarCode).length > 0) {
                this.$confirm(`所选工位已有排班，确认要重新关联生产日历吗？`, '提示', {
                    type: 'warning',
                }).then(() => {
                    this.save(workstation.map(v => v.id))
                }).catch(() => {
                    return false
                })
            } else {
                this.save(workstation.map(v => v.id))
            }
            // console.log(this.$refs.workstations.getCheckedNodes().filter(v => v.isWorkstation))
        },
        save(workstationIdList) {
            console.log(workstationIdList, this.selectInfo)
            this.$HTTP.post('/api/smis/calendar/associate-workstation', {
                calendarCode: this.selectInfo.code,
                workstationIdList
            }).then(res => {
                if (res.code === 200) {
                    this.$message.success("操作成功");
                    this.raworkVisible = false
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
        dayclick(day) {
            // console.log(day)
        },
        init() {
            this.$HTTP.post('/api/smis/shift/list', { statusList: [1] }).then(res => {
                if (res.code === 200) {
                    this.shiftList = res.data
                }
            })
        },
        select(row) {

            this.months = []
            this.$HTTP.get(`/api/smis/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
                }
            })
        },
        table_del() {
            this.$HTTP.delete(`/api/smis/calendar/${this.selectInfo.id}`).then(res => {
                if (res.code == 200) {
                    this.$message.success("操作成功");
                    this.load(true)
                }
            })
        },
        add() {
            this.drawer = true
            this.drawerInfo = {}
        },
        load(flag) {
            if (flag) this.current = 0;
            if (this.current * 15 >= this.total) {
                return
            }
            this.current += 1
@@ -43,21 +250,128 @@
                if (res?.data?.records) {
                    if (this.current === 1) {
                        this.caleList = res?.data?.records || []
                        this.select(this.caleList[0])
                    } else {
                        this.caleList.push(
                            ...res?.data?.records || []
                        )
                    }
                    
                }

            })
        },
        success() {
            this.drawer = false
            this.load(true)
        },
        setDay(data) {
            let year = data.year
            this.$HTTP.post('/api/smis/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++) {

                        let modelIds = [...new Set(data.calendarDayVOList.map(v => v.modelId))]
                        let ext = modelIds.map(v => {
                            let ban = this.shiftListName.find(item => item.id === v)
                            console.log(ban.colour)
                            return {
                                highlight: {
                                    // color: ban.colour || color.stringToColor(v),
                                    // fillMode: 'light',
                                    style: {
                                        'background-color': ban.colour
                                    }
                                },
                                dates: data.calendarDayVOList.filter(item => {
                                    return moment(item.calendarDate).month() === i && item.modelId === v
                                }).map(v => v.calendarDate),
                                popover: {
                                    label: `${ban?.code}-${ban?.name}`
                                },
                            }
                        })
                        console.log('---------youxian')

                        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
                                    })
                                },
                                ...ext,
                                // 优先
                                {
                                    dates: data.calendarDayVOList.filter(item => {
                                        return moment(item.calendarDate).month() === i
                                    }).filter(item => item.isHighPriority).map(item => item.calendarDate),
                                    bar: {
                                        style: {
                                            backgroundColor: 'red',
                                        }
                                    },
                                }
                            ]
                        })
                    }

                }
            })


            // 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
            // })
        }
    }
}
</script>

<style lang="scss" scoped>
<style lang="scss">
.card {
    cursor: pointer;
    margin: 12px 12px 12px 0;
}

.card.active {
    border: 1px solid var(--el-color-primary);
}

.vc-arrow {
    display: none !important;
}
</style>