<!--
|
* @Date: 2024-04-04 22:45:43
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-04-09 20:15:57
|
* @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">新建日历</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-container>
|
<el-header>
|
<el-button type="primary">关联工位</el-button>
|
<el-button type="primary">编辑日历</el-button>
|
<el-button type="primary">删除</el-button>
|
</el-header>
|
<el-main>
|
<Calendar :min-date="minDate" :rows="1" disable-page-swipe :nav-visibility="''" :attributes='attributes'/>
|
</el-main>
|
</el-container>
|
</el-container>
|
</template>
|
|
<script>
|
import { Calendar, DatePicker } from 'v-calendar';
|
import 'v-calendar/style.css';
|
|
export default {
|
components: {
|
Calendar,
|
DatePicker
|
},
|
data() {
|
return {
|
attributes: [
|
|
],
|
current: 0,
|
total: 1,
|
caleList: [],
|
minDate: '',
|
maxDate: ''
|
}
|
},
|
created() {
|
this.load()
|
this.init()
|
},
|
methods: {
|
init () {
|
this.minDate = new Date('2024-01-01')
|
this.maxDate = new Date('2024-01-31')
|
},
|
load() {
|
if (this.current * 15 >= this.total) {
|
return
|
}
|
this.current += 1
|
this.$API.calender.getList.post({ statusList: [1] }, { current: this.current, size: 15 }).then(res => {
|
this.total = res?.data?.total
|
if (res?.data?.records) {
|
if (this.current === 1) {
|
this.caleList = res?.data?.records || []
|
} else {
|
this.caleList.push(
|
...res?.data?.records || []
|
)
|
}
|
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.card {
|
cursor: pointer;
|
margin: 12px 12px 12px 0;
|
}
|
.vc-arrow {
|
display: none!important;;
|
}
|
</style>
|
