From e2fdfe540eaf160dc7d063c60667041edcc64e86 Mon Sep 17 00:00:00 2001
From: gaoshp <291585735@qq.com>
Date: 星期二, 05 十一月 2024 22:55:14 +0800
Subject: [PATCH] 处理显示名称
---
src/views/console/base/CalenderTab.vue | 350 +++++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 332 insertions(+), 18 deletions(-)
diff --git a/src/views/console/base/CalenderTab.vue b/src/views/console/base/CalenderTab.vue
index 348ea29..b9dba3f 100644
--- a/src/views/console/base/CalenderTab.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.9.3