update

gaoshp

2024-05-04 a73fcd5dc034496ce9a38a9be166c6bb85819bc1

 src/views/console/base/CalenderTab.vue

@@ -1,40 +1,101 @@
<!--
 * @Date: 2024-04-04 22:45:43
 * @LastEditors: Sneed
 * @LastEditTime: 2024-04-05 00:10:43
 * @LastEditTime: 2024-05-04 16:44:58
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/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" 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-aside>
            <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-popconfirm title="确定删除吗？" @confirm="table_del">
                    <template #reference>
                        <el-button type="primary" size="small">删除</el-button>
                    </template>
                </el-popconfirm>
            </el-header>
            <el-main>
                <Calendar :min-date="minDate" :rows="1" disable-page-swipe :nav-visibility="''"
                    :attributes='attributes' />
            </el-main>
        </el-container>
        <el-drawer v-model="drawer" size="80%" title="生产日历" :direction="direction" :before-close="handleClose">
            <Add></Add>
        </el-drawer>
    </el-container>
</template>

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

            ],
            current: 0,
            total: 1,
            caleList: []
            caleList: [],
            minDate: '',
            maxDate: ''
        }
    },
    created() {
        this.load()
        this.init()
    },
    methods: {
        load() {
            if  (this.current * 15 >= this.total) {
        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
                }
            })
        },
        select(row) {
            this.selectInfo = {
                ...row
            }
        },
        table_del() {
            this.$HTTP.delete(`/api/blade-cps/calendar/${this.selectInfo.id}`).then(res => {
                if (res.code == 200) {
                    this.$message.success("操作成功");
                    this.load(true)
                }
            })
        },
        add() {
            this.drawer = true
        },
        load(flag) {
            if (flag) this.current = 0;
            if (this.current * 15 >= this.total) {
                return
            }
            this.current += 1
@@ -43,21 +104,28 @@
                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 || []
                        )
                    }
                    
                }

            })
        }
    }
}
</script>

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

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