From 0d2250d41790884c3662e0feae2c720d9969f1d4 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Thu, 16 Mar 2023 16:16:54 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B4=A6=E5=8F=B7=E4=BF=A1=E6=81=AF=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E6=89=93=E5=8D=A1=E8=AE=B0=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/hrm/clock_record.vue             |  13 +-
 src/views/userCenter/index.vue             |   6 +
 src/views/userCenter/user/clock_record.vue | 455 +++++++++++++++++++++
 3 files changed, 465 insertions(+), 9 deletions(-)
 create mode 100644 src/views/userCenter/user/clock_record.vue

diff --git a/src/views/hrm/clock_record.vue b/src/views/hrm/clock_record.vue
index 0c4a4d25..daa7413b 100644
--- a/src/views/hrm/clock_record.vue
+++ b/src/views/hrm/clock_record.vue
@@ -69,13 +69,6 @@
                 <span v-if="scope.row.employee">{{scope.row.employee_.belong_dept_name}}</span>
             </template>
         </el-table-column>
-        <el-table-column label="打卡类型" prop="number">
-            <template #default="scope">
-              <span v-if="scope.row.type==10 || scope.row.type==20">
-              <el-tag :type="type_[scope.row.type].color">{{type_[scope.row.type].label}}</el-tag>
-              </span>
-            </template>
-        </el-table-column>
         <el-table-column label="触发形式" prop="type">
             <template #default="scope">
               {{trigger_[scope.row.trigger]}}--
@@ -92,6 +85,10 @@
         </el-table-column> -->
         <el-table-column label="考勤推测">
             <template #default="scope">
+              <span v-if="scope.row.type==10 || scope.row.type==20">
+              <el-tag :type="type_[scope.row.type].color">{{type_[scope.row.type].label}}</el-tag>
+              </span>
+              <span v-if="(scope.row.type==10 || scope.row.type==20)&&scope.row.exception_type!==null">-</span>
               <span v-if="scope.row.exception_type==10" class="nomalState type1">在岗时间短</span>
               <span v-if="scope.row.exception_type==20" class="nomalState type2">在岗时间长</span>
               <span v-if="scope.row.exception_type==30" class="nomalState type3">缺卡</span>
@@ -191,8 +188,6 @@
           that.cLoading = false;
           that.ElLoading.close();
           let urls = config.API_URL.slice(0,-4)+res.path;
-          console.log(urls)
-         
           window.open(urls, "_blank");
         }).catch(e=>{
           that.cLoading = false;
diff --git a/src/views/userCenter/index.vue b/src/views/userCenter/index.vue
index 6e5a132c..91b5b1d8 100644
--- a/src/views/userCenter/index.vue
+++ b/src/views/userCenter/index.vue
@@ -60,6 +60,7 @@ export default {
     account: defineAsyncComponent(() => import("./user/account")),
     seting: defineAsyncComponent(() => import("./user/seting")),
     pushSettings: defineAsyncComponent(() => import("./user/pushSettings")),
+    clockRecord: defineAsyncComponent(() => import("./user/clock_record")),
   },
   data() {
     return {
@@ -82,6 +83,11 @@ export default {
               title: "修改密码",
               component: "pushSettings",
             },
+            {
+              icon: "el-icon-platform",
+              title: "打卡记录",
+              component: "clockRecord",
+            },
           ],
         },
       ],
diff --git a/src/views/userCenter/user/clock_record.vue b/src/views/userCenter/user/clock_record.vue
new file mode 100644
index 00000000..ffba4c69
--- /dev/null
+++ b/src/views/userCenter/user/clock_record.vue
@@ -0,0 +1,455 @@
+<template>
+  <el-container>
+    <el-header>
+      <div class="left-panel">
+        <el-date-picker
+          v-model="monthV"
+          type="month"
+          style="margin-left:4px"
+          placeholder="选择月份"
+          @change="handleQuery"
+        />
+      </div>
+      <div class="right-panel">
+        <div class="right-panel-search">
+          <el-button
+            type="primary"
+            :loading = 'cLoading'
+            icon="el-icon-download"
+            @click="exportExcel"
+          >下载记录</el-button>
+          <el-button
+            type="primary"
+            :loading = 'dLoading'
+            icon="el-icon-download"
+            @click="exportList"
+          >下载统计</el-button>
+        </div>
+      </div>
+    </el-header>
+    <el-main class="nopadding">
+      <el-table
+        ref="table"
+        :data="tableDaata"
+        row-key="id"
+        stripe
+      >
+      <el-table-column label="人员类型" prop="employee">
+            <template #default="scope">
+                <span v-if="scope.row.employee">{{epOptions[scope.row.employee_.type]}}</span>
+            </template>
+        </el-table-column>
+        <el-table-column label="人员" prop="employee">
+            <template #default="scope">
+                <span v-if="scope.row.employee">{{scope.row.employee_.name}}</span>
+            </template>
+        </el-table-column>
+        <el-table-column label="所属部门" prop="employee">
+            <template #default="scope">
+                <span v-if="scope.row.employee">{{scope.row.employee_.belong_dept_name}}</span>
+            </template>
+        </el-table-column>
+        <el-table-column label="触发形式" prop="type">
+            <template #default="scope">
+              {{trigger_[scope.row.trigger]}}--
+              <span v-if="scope.row.detail">{{scope.row.detail.deviceName}}</span>
+            </template>
+        </el-table-column>
+        <el-table-column label="考勤推测">
+            <template #default="scope">
+              <span v-if="scope.row.type==10 || scope.row.type==20">
+              <el-tag :type="type_[scope.row.type].color">{{type_[scope.row.type].label}}</el-tag>
+              </span>
+              <span v-if="(scope.row.type==10 || scope.row.type==20)&&scope.row.exception_type!==null">-</span>
+              <span v-if="scope.row.exception_type==10" class="nomalState type1">在岗时间短</span>
+              <span v-if="scope.row.exception_type==20" class="nomalState type2">在岗时间长</span>
+              <span v-if="scope.row.exception_type==30" class="nomalState type3">缺卡</span>
+              <span v-if="scope.row.exception_type==40" class="nomalState type4">加班</span>
+            </template>
+        </el-table-column>
+        <el-table-column label="打卡时间" prop="create_time"></el-table-column>
+      </el-table>
+      <el-pagination 
+        background 
+        :small="true" 
+        :total="dataTotal"
+        layout="total, sizes, prev, pager, next, jumper"
+        :page-size="query.page_size" 
+        :page-sizes="[20, 50, 100, 200]" v-model:currentPage="query.page"
+        @current-change="getList" @update:page-size="getList"></el-pagination>
+    </el-main>
+  </el-container>
+</template>
+<script>
+  import config from "@/config"
+  import * as XLSX2 from "xlsx";
+  import * as XLSX from "xlsx-style";
+  export default {
+    name: "clock_record",
+    components: {},
+    data() {
+      return {
+        userForm:{},
+        tableData:[],
+        monthV: null,
+        query: {
+          page:1,
+          page_size:20,
+          year:'',
+          month:'',
+          employee:''
+        },
+        dataTotal:0,
+        selection: [],
+        type_:{
+          10: {"label": "上班打卡", "color": ""},
+          20: {"label": "下班打卡", "color": "success"},
+        },
+        epOptions:{
+          "employee": "正式员工",
+          "remployee": "相关方"
+        },
+        trigger_:{
+          "door": "门禁",
+          "location": "定位"
+        },
+        tableDaata:[],
+        excelName:'',
+        weekList : ['姓名','星期'],
+        daysList:['姓名','日期'],
+        dLoading: false,
+        cLoading:false,
+        ElLoading:null,
+        deptSearch:{},
+      };
+    },
+    mounted() {
+      this.getemployee();
+      this.ElLoading =null;
+    },
+    methods: {
+      handleQuery(){
+        if(this.monthV){
+          this.query.year = this.monthV.getFullYear();
+          this.query.month = this.monthV.getMonth() + 1;
+        }else{
+          this.query.year = null;
+          this.query.month = null;
+        }
+        this.getList();
+      },
+      getemployee() {
+        let that = this;
+        that.$API.hrm.employee.read.req().then((res) => {
+          that.userForm = res;
+          that.query.employee = res.id;
+          that.getList();
+        });
+      },
+      getList(){
+        let that = this;
+        that.$API.hrm.clock_record.list.req(that.query)
+        .then(res=>{
+            that.tableDaata = res.results;
+            that.dataTotal = res.count;
+        })
+      },
+      exportExcel(){
+        let that = this;
+        if(that.query.year!=undefined &&that.query.year!=null && that.query.month!=undefined&& that.query.month!=null){
+        }else{
+          that.$message.warning("请选择月份后导出")
+          that.cLoading = false;
+          return;
+        }
+        if(that.monthV){
+          that.query.year = that.monthV.getFullYear();
+          that.query.month = that.monthV.getMonth() + 1;
+        }else{
+          that.query.year = null;
+          that.query.month = null;
+        }
+        that.cLoading = true;
+        that.ElLoading = this.$loading({
+          lock: true,
+          text: '数据请求中，请稍后...',
+          background: 'rgba(0, 0, 0, 0)',
+        })
+        that.$API.hrm.clock_record.export_excel.req(that.query)
+        .then(res=>{
+          that.cLoading = false;
+          that.ElLoading.close();
+          let urls = config.API_URL.slice(0,-4)+res.path;
+          console.log(urls)
+         
+          window.open(urls, "_blank");
+        }).catch(e=>{
+          that.cLoading = false;
+          that.ElLoading.close();
+        })
+      },
+      //循环调用的接口
+      getOneData(id){
+        let that = this;
+        return new Promise((resolve,reject)=>{
+          that.$API.hrm.clock_record.list.req({page:1,page_size:499,type__in:'10,20',year:that.query.year,month:that.query.month,employee:id})
+              .then(res=>{
+                resolve(res.results)
+          })
+        })
+      },
+      exportList(){
+        let that = this;
+        that.dLoading = true;
+        if(that.query.year!=undefined &&that.query.year!=null && that.query.month!=undefined&& that.query.month!=null){
+        }else{
+          that.$message.warning("请选择月份后导出")
+          that.dLoading = false;
+          return;
+        }
+        let days = new Date(that.query.year, that.query.month , 0).getDate();
+        let weekList = ['姓名','星期'],daysList=['姓名','日期'],titleData = [];
+        for(var i = 1;i<= days;i++){
+          let weekNum = new Date(that.query.year+'-'+that.query.month+'-'+i).getDay();
+          let week=that.getDayWeek(weekNum)
+          daysList.push(i);
+          weekList.push(week);
+        }   
+        let chartName =  that.userForm.name+that.query.year+'年'+that.query.month+'月考勤统计表';
+        titleData.push(chartName)
+        let tableData = [];
+        tableData.push(titleData)
+        tableData.push(weekList)
+        tableData.push(daysList)
+        that.ElLoading = that.$loading({
+          lock: true,
+          text: '数据请求中，请稍后...',
+          background: 'rgba(0, 0, 0, 0)',
+        })
+        let rowData1 = [],rowData2=[];
+        rowData1 = [
+          that.userForm.name,
+          '上班打卡',
+        ]
+        rowData2 = [
+          that.userForm.name,
+          '下班打卡',
+        ]
+        let query = that.query;
+        query.page_size = 499;
+        query.type__in = '10,20';
+        that.$API.hrm.clock_record.list.req(query)
+        .then(res=>{
+          let recordList = res.results;
+          for(let i=0;i<recordList.length;i++){
+            let dateInd = new Date(recordList[i].create_time).getDate();
+              let dateIndex = parseInt(dateInd);
+              if(recordList[i].type==10){
+                rowData1[dateIndex+1] = recordList[i].create_time.substring(11,16)+'&'+recordList[i].exception_type;
+              }else{
+                rowData2[dateIndex+1] = recordList[i].create_time.substring(11,16)+'&'+recordList[i].exception_type;
+              }
+          }
+          tableData.push(rowData1);
+          tableData.push(rowData2);
+          let ws = XLSX2.utils.aoa_to_sheet(tableData);
+          let wb = XLSX2.utils.book_new();
+          ws['!freeze'] = {
+              xSplit: "1",  //冻结列
+              ySplit: "1",  //冻结行
+              topLeftCell: "B2",  //在未冻结区域的左上角显示的单元格，默认为第一个未冻结的单元格
+              state: "frozen"
+          }
+          for(let key in ws){
+            if(key.indexOf('!')!==0){
+              if(key==='A1'){
+                ws[key].s = { 
+                  font: { 
+                    sz: "12", 
+                    bold: true
+                  },
+                  alignment: { 
+                    horizontal: "center", vertical: "center" 
+                  },
+                    fill: {
+                      bgColor: { rgb: "FFFFAA00" }, 
+                      fgColor: { rgb: "FFFFAA00" } 
+                  } 
+                };
+              }else{
+                let cal = ws[key]['v']+'';
+                let type = null;
+                if(cal.indexOf('&')>-1){
+                  ws[key]['v'] = cal.split('&')[0]
+                  type = cal.split('&')[1];
+                }
+                if(type!==null&&type!=='null'){
+                  console.log('type:'+type)
+                  if(type==='10'){//在岗时间短-----黄色
+                  ws[key].s = {
+                    font: {sz: 10},
+                    alignment: { horizontal: 'center', vertical: 'center' },
+                    fill: {
+                      bgColor: { rgb: "F8DD4E" },
+                      fgColor: { rgb: "F8DD4E" },
+                    } 
+                  };
+                }else if(type==='20'){//在岗时间长----红色
+                  ws[key]['s'] = {
+                    font: {
+                        sz: 10,
+                    },
+                    alignment: { horizontal: 'center', vertical: 'center'},
+                    fill: {
+                      bgColor: { rgb: "FF0000" },
+                      fgColor: { rgb: "FF0000" }
+                    } 
+                  };
+                }else if(type==='30'){//缺卡-----橙色
+                  ws[key]['s'] = {
+                    font: {
+                        sz: 10,
+                    },
+                    alignment: { horizontal: 'center', vertical: 'center'},
+                    fill: {
+                      bgColor: { rgb: "FA8435" },
+                      fgColor: { rgb: "FA8435" }
+                    } 
+                  };
+                }else if(type==='40'){//加班---蓝色
+                  ws[key]['s'] = {
+                    font: {
+                        sz: 10,
+                    },
+                    alignment: { horizontal: 'center', vertical: 'center' },
+                    fill: {
+                      bgColor: { rgb: "44CEF6" },
+                      fgColor: { rgb: "44CEF6" }
+                    } 
+                  };
+                }
+                }else{//正常--无色
+                  ws[key]['s'] = {
+                    font: {
+                        sz: 10,
+                    },
+                    alignment: { horizontal: 'center', vertical: 'center'},
+                  };
+                }
+              }
+            }
+          }
+          console.log(ws)
+          // s 意为 start ，即开始的单元格//r 是 row ，表示行号，从 0 计起//c 是 col ，表示列号，从 0 计起
+          let cNumber = daysList.length-1;
+          let merge = [{ s: { r: 0, c: 0 }, e: { r: 0, c:cNumber } }];//{ s: { r: 0, c: 0 }, e: { r: 1, c: 0  } }, 
+          for(let i = 1;i<tableData.length;i++){
+            merge.push({ s: { r: i, c: 0 }, e: { r: i+1, c: 0  } })
+            i++
+          }
+          ws['!merges'] = merge;
+
+          let closList = new Array(31).fill({wch: 5});
+          closList.unshift({wch:8})
+          closList.unshift({wch:10})
+          ws['!cols'] = closList;
+          let rows = new Array(500).fill({hpx: 15});
+          rows.unshift({hpx:20})
+          ws['!rows'] = rows; // 添加到sheet中
+
+          XLSX2.utils.book_append_sheet(wb, ws, chartName); // 工作簿名称
+          // XLSX2.writeFile(wb, chartName+'.xlsx'); // 保存的文件名
+          var wopts = {
+              bookType: 'xlsx', // 要生成的文件类型
+              bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
+              type: 'binary'
+          };
+          var wbout = XLSX.write(wb, wopts);
+          var blob = new Blob([this.s2ab(wbout)], {
+              type: "application/octet-stream"
+          }); // 字符串转ArrayBuffer
+          // 导出excel文件 如导出后的文件不能打开，请将后缀替换为 .xls
+          this.openDownloadDialog(blob, chartName+`.xlsx`);
+          that.dLoading = false;
+          that.ElLoading.close();
+        }).catch(e=>{
+          that.dLoading = false;
+          that.ElLoading.close();
+        })	
+      },
+      s2ab(s) {
+          var buf = new ArrayBuffer(s.length);
+          var view = new Uint8Array(buf);
+          for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
+          return buf;
+      },
+      openDownloadDialog(url, saveName) {
+          if (typeof url == 'object' && url instanceof Blob) {
+              url = URL.createObjectURL(url); // 创建blob地址
+          }
+          var aLink = document.createElement('a');
+          aLink.href = url;
+          aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
+          var event;
+          if (window.MouseEvent) event = new MouseEvent('click');
+          else {
+              event = document.createEvent('MouseEvents');
+              event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+          }
+          aLink.dispatchEvent(event);
+      },
+      getDayWeek(day){
+        switch(day){
+        case 0:
+            return '日';
+        case 1:
+            return '一';
+        case 2:
+            return '二';
+        case 3:
+            return '三';
+        case 4:
+            return '四';
+        case 5:
+            return '五';
+        case 6:
+            return '六';
+      }
+      }
+     
+    },
+  };
+</script>
+<style scoped>
+.nomalState {
+    font-size: 12px;
+    padding: 0 9px;
+    
+    height: 24px;
+    line-height: 23px;
+    border-radius: 5px;
+    vertical-align: top;
+    display: inline-block;
+    
+}
+.nomalState.type1{
+  color: #F8DD4E;
+  background-color: #f9f7e6;
+  border: 1px solid #f3f0d5;
+}
+.nomalState.type2{
+  color: #FF0000;
+  background-color: #f7e7e7;
+  border: 1px solid #fbe0e0;
+}
+.nomalState.type3{
+  color: #FA8435;
+  background-color: #fef6ed;
+  border: 1px solid #fde9cc;
+}
+.nomalState.type4{
+  color: #44CEF6;
+  background-color: #f0f9fb;
+  border: 1px solid #d2f9ff;
+}
+</style>