<!--
|
* @Date: 2024-04-04 22:45:43
|
* @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-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-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: [],
|
minDate: '',
|
maxDate: '',
|
raworkVisible: false,
|
defaultProps: {
|
label: 'title',
|
children: 'children',
|
},
|
drawerInfo: {},
|
color
|
|
}
|
},
|
created() {
|
this.load()
|
this.init()
|
},
|
methods: {
|
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
|
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 || []
|
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">
|
.card {
|
cursor: pointer;
|
margin: 12px 12px 12px 0;
|
}
|
|
.card.active {
|
border: 1px solid var(--el-color-primary);
|
}
|
|
.vc-arrow {
|
display: none !important;
|
}
|
</style>
|
