Przeglądaj źródła

港大打卡改造-我的排班日历页面

zhonghuizhen 1 tydzień temu
rodzic
commit
0784f7dc0d
1 zmienionych plików z 113 dodań i 2 usunięć
  1. 113 2
      src/views/system/dashboard/components/util.js

+ 113 - 2
src/views/system/dashboard/components/util.js

@@ -767,6 +767,51 @@ export function buildComponent(name, column, preview, vm) {
               })
               })
           })
           })
         },
         },
+        getAttendanceDataNew() {
+          const { first, second } = this.$store.getters.level || {}
+          const today = this.$common.getDateNow()
+          return new Promise((resolve, reject) => {
+            this.$common
+              .request('query', {
+                key: 'getAttendanceDataByUidGD',
+                params: [today, this.userId]
+              })
+              .then((res) => {
+                const { data = [] } = res.variables || {}
+                const events = []
+                data.forEach((item) => {
+                  // 跳过“休息”班次,不显示在日历上
+                  if (item.ban_ci_ming_ === '休息') return
+                  
+                  // 构建全天事件,每个班次显示为一个方块
+                  const event = {
+                    id: item.id_,
+                    title: `${item.ban_ci_ming_}/${item.ban_ci_bie_ming_}`, // 班次名/别名
+                    start: item.ri_qi_, // 日期 YYYY-MM-DD
+                    allDay: true, // 全天事件,在月视图中占满格子
+                    extendedProps: {
+                      banCiMing: item.ban_ci_ming_,
+                      banCiBieMing: item.ban_ci_bie_ming_,
+                      daKaShiJian1: item.da_ka_shi_jian_1_ || '',
+                      daKaShiJian2: item.da_ka_shi_jian_2_ || '',
+                      zhuangTai1: item.zhuang_tai_1_ || '',
+                      zhuangTai2: item.zhuang_tai_2_ || '',
+                      kaoQinZhuangTa: item.kao_qin_zhuang_ta || '',
+                      riQi: item.ri_qi_,
+                      banCiKaiShi: item.ban_ci_kai_shi_,
+                      banCiJieShu: item.ban_ci_jie_shu_,
+                      shiFouKuaRi: item.shi_fou_kua_ri_
+                    }
+                  }
+                  events.push(event)
+                })
+                resolve(events)
+              })
+              .catch((error) => {
+                reject(error)
+              })
+          })
+        },
         getScheduleData() {
         getScheduleData() {
           const { first, second } = this.$store.getters.level || {}
           const { first, second } = this.$store.getters.level || {}
           // const sql = `select a.*, b.title_,b.type_, b.start_date_, b.end_date_, b.config_, b.overview_, b.id_ as pai_ban_id_ from t_schedule_detail a, t_schedule b where a.parent_id_ = b.id_ and b.di_dian_ = '${second || first}' and a.user_id_ = '${this.userId}' and b.status_ = '已发布'`
           // const sql = `select a.*, b.title_,b.type_, b.start_date_, b.end_date_, b.config_, b.overview_, b.id_ as pai_ban_id_ from t_schedule_detail a, t_schedule b where a.parent_id_ = b.id_ and b.di_dian_ = '${second || first}' and a.user_id_ = '${this.userId}' and b.status_ = '已发布'`
@@ -938,6 +983,7 @@ export function buildComponent(name, column, preview, vm) {
             this.$emit('action-event', 'daka', todaySchedule.map(item => item.label.split('/')[1]))
             this.$emit('action-event', 'daka', todaySchedule.map(item => item.label.split('/')[1]))
           }
           }
         },
         },
+        /*
         async showMySchedule() {
         async showMySchedule() {
           this.attendanceData = await this.getAttendanceData()
           this.attendanceData = await this.getAttendanceData()
           this.scheduleData = await this.getScheduleData()
           this.scheduleData = await this.getScheduleData()
@@ -968,7 +1014,7 @@ export function buildComponent(name, column, preview, vm) {
               // end: 'prev,next,today,month,agendaWeek,agendaDay,listWeek'
               // end: 'prev,next,today,month,agendaWeek,agendaDay,listWeek'
             },
             },
             customButtons: {
             customButtons: {
-              customButton: {
+            customButton: {
                 // 定义自定义按钮
                 // 定义自定义按钮
                 text: '补卡',
                 text: '补卡',
                 click: (param) => {
                 click: (param) => {
@@ -1036,7 +1082,72 @@ export function buildComponent(name, column, preview, vm) {
             }
             }
           }
           }
           this.$emit('action-event', 'mySchedule', scheduleConfig)
           this.$emit('action-event', 'mySchedule', scheduleConfig)
-        }
+        }*/
+
+          async showMySchedule() {
+            // 直接获取考勤事件数组,不再获取排班数据
+            const events = await this.getAttendanceDataNew()
+            
+            const scheduleConfig = {
+              height: '100%',
+              locale: 'zh-cn',
+              selectable: true,
+              buttonText: {
+                today: '今天',
+                dayGridMonth: '月',
+                listMonth: '',
+                month: '月',
+                week: '周视图',
+                day: '日视图',
+                list: '表'
+              },
+              headerToolbar: {
+                right: 'prev,next today',
+                left: '',
+                center: 'title'
+              },
+              events: events,
+              eventColor: '#ffffff',
+              // 自定义事件渲染
+              eventContent: (arg) => {
+                const event = arg.event
+                const ext = event.extendedProps
+                const titleStr = `${ext.banCiMing}`
+                
+                // 打卡时间只取时分秒
+                const startTime = ext.daKaShiJian1 ? ext.daKaShiJian1.substring(11, 19) : '未打卡'
+                const endTime = ext.daKaShiJian2 ? ext.daKaShiJian2.substring(11, 19) : '未打卡'
+                
+                // 判断上下班是否都有打卡记录
+                const hasBothClock = ext.daKaShiJian1 && ext.daKaShiJian2
+                // 小方块颜色:都有打卡为绿色,否则红色
+                const dotColor = hasBothClock ? '#67C23A' : '#F56C6C'
+                // 状态图标:都有打卡为绿色勾,否则红色警告
+                const statusIconHtml = hasBothClock
+                  ? '<i class="el-icon-check" style="color:#67C23A; font-size:14px;"></i>'
+                  : '<i class="el-icon-warning-outline" style="color:#F56C6C; font-size:14px;"></i>'
+          
+                const fragment = document.createDocumentFragment()
+                const content = document.createElement('div')
+                content.innerHTML = `
+                  <div class="event-header" style="display:flex; justify-content:space-between; align-items:center;">
+                    <div>
+                      <div style="background:${dotColor}; height:10px; width:10px; display:inline-block; border-radius:2px;"></div>
+                      <span style="margin-left:4px; color:#333; font-weight:500;">${titleStr}</span>
+                    </div>
+                    <div class="status-placeholder">${statusIconHtml}</div>
+                  </div>
+                  <div style="font-size:12px; color:#909399; margin-top:4px; line-height:1.4;">
+                    <div>上班打卡时间:${startTime}</div>
+                    <div>下班打卡时间:${endTime}</div>
+                  </div>
+                `
+                fragment.appendChild(content)
+                return { domNodes: [fragment] }
+              }
+            }
+            this.$emit('action-event', 'mySchedule', scheduleConfig)
+          }
       },
       },
       template:
       template:
         column.templateHtml !== '' ? `${column.templateHtml}` : `<div></div>`
         column.templateHtml !== '' ? `${column.templateHtml}` : `<div></div>`