From 3e091224ab26252d8624b42b461ba773ee8bee0f Mon Sep 17 00:00:00 2001 From: gaoshp <291585735@qq.com> Date: 星期日, 03 十一月 2024 19:16:31 +0800 Subject: [PATCH] update --- src/views/console/base/CalenderTab.vue | 208 ++++++++++++++++++++++++++++++++++++++++++++++----- 1 files changed, 185 insertions(+), 23 deletions(-) diff --git a/src/views/console/base/CalenderTab.vue b/src/views/console/base/CalenderTab.vue index ddb9e40..b9dba3f 100644 --- a/src/views/console/base/CalenderTab.vue +++ b/src/views/console/base/CalenderTab.vue @@ -1,15 +1,16 @@ <!-- * @Date: 2024-04-04 22:45:43 - * @LastEditors: Sneed - * @LastEditTime: 2024-05-05 21:20:22 - * @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" v-for="item in caleList" :key="item.id" @click="select(item)"> + <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> @@ -19,8 +20,8 @@ <el-container> <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-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> @@ -28,18 +29,45 @@ </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' /> + 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-model="drawer" size="80%" title="鐢熶骇鏃ュ巻" :direction="direction" :before-close="handleClose"> - <Add :shiftList="shiftList" @success="success"></Add> + <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> @@ -49,6 +77,7 @@ import 'v-calendar/style.css'; import Add from './Add.vue' import moment from 'moment'; +import color from '@/utils/color' export default { components: { Calendar, @@ -58,6 +87,7 @@ data() { return { shiftList: [], + shiftListName: [], selectInfo: {}, drawer: false, months: [], @@ -68,7 +98,15 @@ total: 1, caleList: [], minDate: '', - maxDate: '' + maxDate: '', + raworkVisible: false, + defaultProps: { + label: 'title', + children: 'children', + }, + drawerInfo: {}, + color + } }, created() { @@ -76,30 +114,121 @@ 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) + // console.log(day) }, init() { - this.$HTTP.post('/api/blade-cps/shift/list', { statusList: [1] }).then(res => { + this.$HTTP.post('/api/smis/shift/list', { statusList: [1] }).then(res => { if (res.code === 200) { this.shiftList = res.data } }) }, select(row) { - this.selectInfo = { - ...row - } + this.months = [] - this.$HTTP.get(`/api/blade-cps/calendar/${row.id}`).then(res => { + this.$HTTP.get(`/api/smis/calendar/${row.id}`).then(res => { if (res.code === 200) { - console.log(res.data) + // 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/blade-cps/calendar/${this.selectInfo.id}`).then(res => { + this.$HTTP.delete(`/api/smis/calendar/${this.selectInfo.id}`).then(res => { if (res.code == 200) { this.$message.success("鎿嶄綔鎴愬姛"); this.load(true) @@ -108,6 +237,7 @@ }, add() { this.drawer = true + this.drawerInfo = {} }, load(flag) { if (flag) this.current = 0; @@ -136,7 +266,7 @@ }, setDay(data) { let year = data.year - this.$HTTP.post('/api/blade-cps/shift-off-day/list', { + this.$HTTP.post('/api/smis/shift-off-day/list', { year: year, startOffDay: `${year}-01-01`, endOffDay: `${year}-12-31` @@ -152,6 +282,29 @@ }) 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, @@ -163,16 +316,22 @@ return moment(item).month() === i }) }, + ...ext, + // 浼樺厛 { - highlight: true, dates: data.calendarDayVOList.filter(item => { - console.log(moment(item).month(), '>>>123') return moment(item.calendarDate).month() === i - }), + }).filter(item => item.isHighPriority).map(item => item.calendarDate), + bar: { + style: { + backgroundColor: 'red', + } + }, } ] }) } + } }) @@ -208,8 +367,11 @@ 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