我的排班点击查看班次详情

src/views/system/dashboard/components/util.js

@@ -149,6 +149,7 @@ export function buildComponent (name, column, preview, vm) {
                     calendarToolbar: this.fullScreen ? [{ key: 'refresh' }] : [{ key: 'refresh' }, { key: 'fullscreen' }, { key: 'collapse' }],
                     isFirstAlert: true, // 是否首次日程提醒
                     scheduleData: [],
+                    scheduleShift: [],
                     todaySchedule: []
                 }
             },
@@ -594,6 +595,7 @@ export function buildComponent (name, column, preview, vm) {
                                 const days = this.getDays(item.start_date_, item.end_date_)
                                 const config = item.config_ ? JSON.parse(item.config_) : {}
                                 const { scheduleShift } = config
+                                this.scheduleShift = scheduleShift
                                 for (let i = 1; i <= days; i++) {
                                     const shift = item[`d${i}_`]
                                     if (shift) {
@@ -626,12 +628,21 @@ export function buildComponent (name, column, preview, vm) {
                         })
                     })
                 },
+                handleScheduleEventClick (param) {
+                    this.$emit(
+                        'open',
+                        'banci',
+                        [param.event.startStr, param.event._def.extendedProps.jieShuShiJian],
+                        this.scheduleShift,
+                        param.event._def.title
+                    )
+                },
                 showMySchedule () {
                     const scheduleConfig = {
                         height: '100%',
-                        locale: 'zh-cn',
-                        selectable: true,
-                        buttonText: {
+                        locale: 'zh-cn', // 语言
+                        selectable: true, // 是否可以选中日历格
+                        buttonText: { // 日历头部按钮中文转换
                             today: '今天',
                             dayGridMonth: '月',
                             listMonth: '',
@@ -642,17 +653,20 @@ export function buildComponent (name, column, preview, vm) {
                             // prev: '<i class="icon-chevron-left">后退</i>',
                             // next: '<i class="icon-chevron-right">前进</i>'
                         },
-                        headerToolbar: {
+                        headerToolbar: { // 日历头部按钮位置
                             left: 'prev,next today',
                             // start: '',
                             center: 'title',
                             right: 'dayGridMonth,timeGridWeek,timeGridDay'
                             // end: 'prev,next,today,month,agendaWeek,agendaDay,listWeek'
                         },
-                        events: this.scheduleData
+                        events: this.scheduleData, // 日程数组
+                        eventClick: this.handleScheduleEventClick, // 日程点击信息展示
+                        scheduleShift: this.scheduleShift
                     }
                     this.$emit('action-event', 'mySchedule', scheduleConfig)
                 }
+
             },
             template: column.templateHtml !== '' ? `${column.templateHtml}` : `<div></div>`
         }

src/views/system/homepage/components/banciDialog.vue

@@ -0,0 +1,115 @@
+<template>
+    <div>
+        <el-button type="primary" @click="openDialog">查看班次详情</el-button>
+        <el-dialog
+            title="班次详情"
+            :visible.sync="dialogVisible"
+            width="30%"
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+        >
+            <div class="containerDiv">
+                <div>
+                    <strong class="label">班次名称：</strong>{{ banci.name }}
+                </div>
+                <div>
+                    <strong class="label">班次别名：</strong>{{ banci.alias }}
+                </div>
+                <div>
+                    <strong class="label">是否可用：</strong>{{ banci.isEnabled === 'Y'? '是' : '否' }}
+                </div>
+                <div>
+                    <strong class="label">对应颜色：</strong>
+                    <div :style="{ background: banci.color, height: '20px', width: '50px', display: 'inline-block' }"></div>
+                </div>
+                <div>
+                    <strong class="label">时间段：</strong>
+                    {{ (banci.dateRange && banci.dateRange.length > 0)?
+                        ('当天'+ banci.dateRange[0].startTime+ '至' + (banci.dateRange[0].isSecondDay === 'Y'? '第二天' : '当天') + banci.dateRange[0].endTime )
+                        : ''
+                    }}
+                </div>
+                <div class="position-row">
+                    <strong class="label">岗位：</strong>
+                    <ul class="position-list">
+                        <li class="el-tag el-tag--primary el-tag--small el-tag--light positionItem" v-for="(position, index) in banci.positions" :key="index">{{ position }}</li>
+                    </ul>
+                </div>
+                <div>
+                    <strong class="label">说明：</strong>{{ banci.desc }}
+                </div>
+            </div>
+            <div slot="footer">
+                <el-button @click="closeDialog">关闭</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+<script>
+export default {
+    data () {
+        return {
+            dialogVisible: this.visible,
+            banci: this.banciInfo
+        }
+    },
+    props: {
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        // 接收外部传入的班次对象，方便复用组件展示不同班次对象
+        banciInfo: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+    watch: {
+        banciInfo (newVal) {
+            // 当外部传入的班次对象变化时，更新内部展示的数据
+            this.banci = newVal
+        },
+        visible: {
+            handler: function (val, oldVal) {
+                this.dialogVisible = val
+            },
+            immediate: true
+        }
+    },
+    methods: {
+        openDialog () {
+            this.dialogVisible = true
+        },
+        closeDialog () {
+            this.$emit('closeBanciDialog', 'banci')
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+ .containerDiv {
+      padding: 20px;
+      div {
+          margin-bottom: 10px;
+          display: flex;
+          align-items: center;
+          min-height: 30px;
+      }
+     .label {
+          min-width: 80px;
+          margin-right: 10px;
+      }
+     .position-row {
+          display: flex;
+          align-items: center;
+         .position-list {
+              display: flex;
+              list-style: none;
+              padding-left: 0;
+              li {
+                  margin-right: 10px;
+              }
+          }
+      }
+  }
+</style>

src/views/system/homepage/index.vue

@@ -131,6 +131,12 @@
             :schedule-config="scheduleConfig"
             @close="handleClose"
         />
+        <banciDialog
+            :banciInfo="banciInfo"
+            :visible="banciDialogVisible"
+            @closeBanciDialog="handleClose"
+            @open="handleOpen"
+        />
     </ibps-container>
 </template>
 
@@ -146,7 +152,10 @@ import Preview from '@/views/platform/desktop/column/preview'
 import BpmnFormrender from '@/business/platform/bpmn/form/dialog'
 
 import IbpsNewsDialog from '@/views/platform/system/news/detail'
+import banciDialog from '@/views/system/homepage/components/banciDialog.vue'
+
 import IbpsMessageDialog from '@/views/platform/message/inner/detail/dialog'
+
 import { getToken } from '@/utils/auth'
 import ScheduleAdd from '@/views/system/dashboard/templates/scheduleAdd'
 
@@ -168,7 +177,8 @@ export default {
         'ibps-grid-item': GridItem,
         ScheduleAdd,
         CalendarAlert,
-        mySchedule
+        mySchedule,
+        banciDialog
     },
     data () {
         return {
@@ -223,7 +233,9 @@ export default {
             addComponentDatas: {},
             calendarAlertData: {}, // 日程
             calendarIds: [], // 日程 id 数组
-            scheduleConfig: {}
+            scheduleConfig: {},
+            banciInfo: {},
+            banciDialogVisible: false
         }
     },
     computed: {
@@ -627,6 +639,9 @@ export default {
                 case 'calendar':
                     this.calendarDialogVisible = false
                     break
+                case 'banci':
+                    this.banciDialogVisible = false
+                    break
                 default:
                     break
             }
@@ -651,6 +666,13 @@ export default {
                     this.calendarDialogForm.clickedDate = dateArr[0]
                     this.calendarDialogForm.clickId = clickId
                     break
+                case 'banci':
+                {
+                    const filterObj = events.filter(item => item.alias === clickId)
+                    this.banciInfo = filterObj[0]
+                    this.banciDialogVisible = true
+                    break
+                }
                 default:
                     break
             }