[FE]修改考勤页面布局

security-protection-platform/.gitignore

@@ -8,6 +8,8 @@ yarn.lock
npm-debug.log
.ipu/temp/
.aid/temp/
.aid/aid.js
src/conf/axios.config.js
selenium-debug.log
.idea/
build/

security-protection-platform/src/assets/styles/pages/_index.scss

@@ -2,23 +2,26 @@
 * 本文件是项目各页面样式入口文件
**/
.page-main{
    .dropdown div{
        width:200px;
    }
    .clearfix{
        display: flex;
    }
    .cascader{
        display: flex;
    }.cascader__wrap{
        display: flex;
    }.table th > .cell{
        font-size: 14px;
    }.table .cell{
        font-size: 14px;
    }
    .modal-body{
        padding: 24px !important;
    }
}
.page-main {
  .dropdown div {
    width: 200px;
  }
  .clearfix {
    display: flex;
  }
  .cascader {
    display: flex;
  }
  .cascader__wrap {
    display: flex;
  }
  .table th > .cell {
    font-size: 14px;
  }
  .table .cell {
    font-size: 14px;
  }
  .modal-body {
    padding: 24px !important;
  }
}

security-protection-platform/src/modules/attendance/abnormal/index.vue

@@ -1,66 +1,97 @@
<template>
  <div class="page-main">
  <div class="page-main1">
    <div class="page-content">
      <div class="row mt-32">
        <div class="keep-row">
          <span>月份：</span>
          <t-date-picker v-model="form.month" style="width:200px" type="month" placeholder="请选择月份" />
        </div>
        <div class="keep-row">
          <span>部门/员工：</span>
          <dept-staff-cascader v-model="form" @inited="handleInited" @getOrgId="getDailyOrgId" @getDepId="getDailyDepId" @getStaffId="getDailyStaffId" />
          <div class="search-btn">
            <t-button color="primary" @click="handSearchAttendance">查询</t-button>
      <div class="track-container">
        <div class="search-container">
          <div class="search-ctn">
            <div>
              <div style="display: flex;">
                <t-date-picker v-model="form.month" style="width:200px" type="month" placeholder="请选择月份" />
                <template>
                  <t-button style="margin-left:10px" color="primary" icon="search-outline" @click="handSearchAttendance">查询</t-button>
                </template>
                <t-button icon="filter-outline" style="margin: 0 10px;" @click="slideVisible = !slideVisible"></t-button>
              </div>
            </div>
            <div class="btns">
              <t-button color="primary">
                <t-icon size="14" icon="upload-outline"></t-icon> 导出至Excel
              </t-button>
              <t-dropdown :visibled="customVisibled" trigger-mode="custom">
                <t-button slot="trigger" color="secondary" icon="tile-four-outline" @click="onTriggerClick"></t-button>
                <div slot="popper">
                  <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
                    <t-checkbox-group v-model="social" vertical @change="checkAllGroupChange">
                      <t-checkbox v-for="(item) in columns" :key="item.label" :value="item.label" :label="item.label">
                        <span>{{ item.label }}</span>
                      </t-checkbox>
                    </t-checkbox-group>
                    <div style="padding-bottom: 10px">
                      <t-checkbox :indeterminate="indeterminate" :checked.sync="checkAll" @click.prevent.native="handleCheckAll">全选
                      </t-checkbox>
                    </div>
                    <t-button color="primary" size="sm" @click="onCloseClick">确认</t-button>
                  </div>
                </div>
              </t-dropdown>
              <t-button color="secondary" icon="loading" class="reset-btn" @click="resetData"></t-button>
            </div>
          </div>
          <div class="animate-demo-wrapper">
            <transition name="slide-up">
              <div v-show="slideVisible" class="transition-box allCondition">
                <div class="input-rule">
                  <span>部门/员工：</span>
                  <dept-staff-cascader v-model="form" @inited="handleInited" @getOrgId="getDailyOrgId" @getDepId="getDailyDepId" @getStaffId="getDailyStaffId" />
                </div>
              </div>
            </transition>
          </div>
        </div>
        <t-button class="export-excel" color="primary">
          <t-icon size="14" class="icon-txt" icon="upload-outline"></t-icon>导出至Excel
        </t-button>
      </div>
      <t-table :data="tableData" :loading="loadTable" size="sm" line class="table-detail">
        <t-table-column type="selection"></t-table-column>
        <t-table-column   prop="name" label="姓名"></t-table-column>
        <t-table-column   prop="userid" label="员工编号"></t-table-column>
        <t-table-column   prop="duty" label="职务"></t-table-column>
        <t-table-column   prop="daysAttendance" label="出勤天数(天)"></t-table-column>
        <t-table-column   prop="timesLate" label="迟到次数(次)">
        <t-table-column v-if="columns[0].show" prop="name" label="姓名"></t-table-column>
        <t-table-column v-if="columns[1].show" prop="userid" label="员工编号"></t-table-column>
        <t-table-column v-if="columns[2].show" prop="duty" label="职务"></t-table-column>
        <t-table-column v-if="columns[3].show" prop="daysAttendance" label="出勤天数(天)"></t-table-column>
        <t-table-column v-if="columns[4].show" prop="timesLate" label="迟到次数(次)">
          <template slot-scope="scope">
            <span v-if="scope.row.timesLate===0" size="sm">{{ scope.row.timesLate }}</span>
            <span v-else class="abnormalState">{{ scope.row.timesLate }}</span>
          </template>
        </t-table-column>
        <t-table-column   prop="hoursLate" label="迟到时长(h)">
        <t-table-column v-if="columns[5].show" prop="hoursLate" label="迟到时长(h)">
          <template slot-scope="scope">
            <span v-if="scope.row.hoursLate===0" size="sm">{{ scope.row.hoursLate }}</span>
            <span v-else class="abnormalState">{{ scope.row.hoursLate }}</span>
          </template>
        </t-table-column>
        <t-table-column   prop="timesLeftearly" label="早退次数(次)">
        <t-table-column v-if="columns[6].show" prop="timesLeftearly" label="早退次数(次)">
          <template slot-scope="scope">
            <span v-if="scope.row.timesLeftearly===0" size="sm">{{ scope.row.timesLeftearly }}</span>
            <span v-else class="abnormalState">{{ scope.row.timesLeftearly }}</span>
          </template>
        </t-table-column>
        <t-table-column  prop="hoursLeftearly" label="早退时长(h)">
        <t-table-column v-if="columns[7].show" prop="hoursLeftearly" label="早退时长(h)">
          <template slot-scope="scope">
            <span v-if="scope.row.hoursLeftearly===0" size="sm">{{ scope.row.hoursLeftearly }}</span>
            <span v-else class="abnormalState">{{ scope.row.hoursLeftearly }}</span>
          </template>
        </t-table-column>
        <t-table-column prop="timesAbsence" label="旷工次数(次)">
        <t-table-column v-if="columns[8].show" prop="timesAbsence" label="旷工次数(次)">
          <template slot-scope="scope">
            <span v-if="scope.row.timesAbsence===0" size="sm">{{ scope.row.timesAbsence }}</span>
            <span v-else class="abnormalState">{{ scope.row.timesAbsence }}</span>
          </template>
        </t-table-column>
        <t-table-column  prop="daysAbsence" label="旷工时长(天)">
        <t-table-column v-if="columns[9].show" prop="daysAbsence" label="旷工时长(天)">
          <template slot-scope="scope">
            <span v-if="scope.row.daysAbsence===0" size="sm">{{ scope.row.daysAbsence }}</span>
            <span v-else class="abnormalState">{{ scope.row.daysAbsence }}</span>
          </template>
        </t-table-column>
        <t-table-column prop="operation" label="操作" fixed="right">
        <t-table-column width="120" prop="operation" label="操作" fixed="right">
          <template slot-scope="scope">
            <a class="link" size="sm" @click="handleClick(scope.row)">详情</a>
          </template>
@@ -79,19 +110,58 @@ import AttendanceDialog from '../components/AttendanceDialog'
import formatDateTime from '@/utils/formatDateTime.js'
import DeptStaffCascader from '../components/DeptStaffCascader'
const defaultSearchData = {
  month: formatDateTime(new Date().setMonth(new Date().getMonth() - 1), 'yyyy-MM'),
  userid: null,
  depId: '',
  orgId: '',
  current: 1,
  pageSize: 10
}
export default {
  components: { AttendanceDialog, DeptStaffCascader },
  data () {
    const now = new Date()
    return {
      form: {
        month: formatDateTime(new Date().setMonth(now.getMonth() - 1), 'yyyy-MM'),
        userid: null,
        depId: '',
        orgId: '',
        current: 1,
        pageSize: 10
      },
      slideVisible: false,
      indeterminate: true,
      checkAll: true,
      social: ['姓名', '员工编号', '职务', '出勤天数(天)', '迟到次数(次)', '迟到时长(h)', '早退次数(次)', '早退时长(h)', '旷工次数(次)', '旷工时长(天)'],
      columns: [
        {
          label: '姓名',
          show: true
        }, {
          label: '员工编号',
          show: true
        }, {
          label: '职务',
          show: true
        }, {
          label: '出勤天数(天)',
          show: true
        }, {
          label: '迟到次数(次)',
          show: true
        }, {
          label: '迟到时长(h)',
          show: true
        }, {
          label: '早退次数(次)',
          show: true
        }, {
          label: '早退时长(h)',
          show: true
        }, {
          label: '旷工次数(次)',
          show: true
        }, {
          label: '旷工时长(天)',
          show: true
        }
      ],
      customVisibled: false,
      form: JSON.parse(JSON.stringify(defaultSearchData)),
      total: 0,
      attendanceModal: false,
      agreement: '',
@@ -103,6 +173,40 @@ export default {
    }
  },
  methods: {
    checkAllGroupChange () {
      if (this.social.length === 10) {
        this.indeterminate = false
        this.checkAll = true
      } else if (this.social.length > 0) {
        this.indeterminate = true
        this.checkAll = false
      } else {
        this.indeterminate = false
        this.checkAll = false
      }
    },
    handleCheckAll () {
      if (this.indeterminate) {
        this.checkAll = false
      } else {
        this.checkAll = !this.checkAll
      }
      this.indeterminate = false
      if (this.checkAll) {
        this.social = ['姓名', '员工编号', '职务', '出勤天数(天)', '迟到次数(次)', '迟到时长(h)', '早退次数(次)', '早退时长(h)', '旷工次数(次)', '旷工时长(天)']
      } else {
        this.social = []
      }
    },
    onTriggerClick () {
      this.customVisibled = true
    },
    onCloseClick () {
      this.columns.forEach(e => {
        e.show = this.social.indexOf(e.label) >= 0
      })
      this.customVisibled = false
    },
    getDailyOrgId (id) {
      this.form.orgId = id
    },
@@ -144,6 +248,9 @@ export default {
        this.loadTable = false
      })
    },
    resetData () {
      this.form = JSON.parse(JSON.stringify(defaultSearchData))
    },
    // 弹窗打开
    handleClick (data) {
      const { userid, beginDay, endDay } = data
@@ -169,28 +276,62 @@ export default {
}
</script>
<style lang="scss" scoped>
.page-main {
.page-main1 {
  margin: 20px 20px 16px 20px;
  .abnormalState {
    color: #eda30f;
    font-size: 14px;
  }
  .keep-row {
    margin-left: 24px;
    display: flex;
    align-items: center;
  }
  .search-btn {
    margin-left: auto;
    margin-right: 15px;
  }
  .icon-txt {
    margin-right: 8px;
  }
  .export-excel {
    margin-top: 24px;
    display: flex;
    align-items: center;
  .track-container {
    width: 100%;
    margin: 24px 0;
    // padding: 20px;
    box-sizing: border-box;
    .search-container {
      width: 100%;
      .search-ctn {
        width: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
        display: flex;
        position: relative;
        > div {
          // margin: 0 20px 16px 0;
          line-height: 2;
        }
        .btns {
          margin-left: auto;
          display: block;
          button {
            margin: 0 2px;
          }
        }
      }
    }
    .table-pager {
      margin: 20px auto;
    }
    .allCondition {
      display: flex;
      justify-content: space-between;
      border: 1px solid rgba(0, 0, 0, 0.09);
      background-color: #f8f9fa;
      flex-wrap: wrap;
      padding: 20px;
      margin: 5px auto;
      .input-rule {
        display: flex;
        flex: 1;
        width: 80%;
        min-width: 80%;
        max-width: 80%;
        padding: 10px 0 10px 20px;
        > span {
          line-height: 32px;
        }
      }
    }
  }
  .table-detail {
    margin-top: 20px;

security-protection-platform/src/modules/attendance/report/index.vue

@@ -1,30 +1,64 @@
<template>
  <div class="page-main">
  <div class="page-main1">
    <div class="page-content">
      <t-tabs :animated="false" @change="changeTabs">
      <t-tabs v-model="activePanel" :animated="false">
        <!-- 日报 -->
        <t-tab-panel label="日报" panel-id="tab-1">
          <div class="row mt-32">
            <div class="keep-row">
              <span>日期：</span>
              <t-date-picker v-model="dailyForm.workDay" style="width:200px" placeholder="请选择日期"></t-date-picker>
            </div>
            <div class="keep-row">
              <span>部门/员工：</span>
              <dept-staff-cascader v-model="dailyForm" @inited="handleDailyInited" @getOrgId="getDailyOrgId" @getDepId="getDailyDepId" @getStaffId="getDailyStaffId" />
              <div class="search-btn">
                <t-button color="primary" @click="handSearchDay">查询</t-button>
                <t-button @click="resetDailyData">重置</t-button>
          <div class="track-container">
            <div class="search-container">
              <div class="search-ctn">
                <div>
                  <div style="display: flex;">
                    <t-date-picker v-model="dailyForm.workDay" style="width:200px" placeholder="请选择日期"></t-date-picker>
                    <template>
                      <t-button style="margin-left:10px" color="primary" icon="search-outline" @click="handSearchDay">查询</t-button>
                    </template>
                    <t-button icon="filter-outline" style="margin: 0 10px;" @click="slideVisible0 = !slideVisible0"></t-button>
                  </div>
                </div>
                <div class="btns">
                  <t-button color="primary">
                    <t-icon size="14" icon="upload-outline"></t-icon> 导出至Excel
                  </t-button>
                  <t-dropdown :visibled="customVisibled0" trigger-mode="custom">
                    <t-button slot="trigger" color="secondary" icon="tile-four-outline" @click="onTriggerClick"></t-button>
                    <div slot="popper">
                      <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
                        <t-checkbox-group v-model="social0" vertical @change="checkAllGroupChange">
                          <t-checkbox v-for="(item) in columns0" :key="item.label" :value="item.label" :label="item.label">
                            <span>{{ item.label }}</span>
                          </t-checkbox>
                        </t-checkbox-group>
                        <div style="padding-bottom: 10px">
                          <t-checkbox :indeterminate0="indeterminate0" :checked.sync="checkAll0" @click.prevent.native="handleCheckAll">全选
                          </t-checkbox>
                        </div>
                        <t-button color="primary" size="sm" @click="onCloseClick">确认</t-button>
                      </div>
                    </div>
                  </t-dropdown>
                  <t-button color="secondary" icon="loading" class="reset-btn" @click="resetDailyData"></t-button>
                </div>
              </div>
            </div>
              <div class="animate-demo-wrapper">
                <transition name="slide-up">
                  <div v-show="slideVisible0" class="transition-box allCondition">
                    <div class="input-rule">
                      <span>部门/员工：</span>
                      <dept-staff-cascader v-model="dailyForm" @inited="handleDailyInited" @getOrgId="getDailyOrgId" @getDepId="getDailyDepId" @getStaffId="getDailyStaffId" />
                    </div>
                  </div>
                </transition>
              </div>
            </div>
          </div>
          <t-table :data="dailyTableData" :loading="loadDailyTable" size="sm" line class="table-detail">
            <t-table-column size="sm" type="selection"></t-table-column>
            <t-table-column size="sm" prop="name" label="姓名"></t-table-column>
            <t-table-column size="sm" prop="userid" label="员工编号"></t-table-column>
            <t-table-column size="sm" prop="duty" label="职务"></t-table-column>
            <t-table-column size="sm" prop="status" label="考勤状态">
            <t-table-column v-if="columns0[0].show" size="sm" prop="name" label="姓名"></t-table-column>
            <t-table-column v-if="columns0[1].show" size="sm" prop="userid" label="员工编号"></t-table-column>
            <t-table-column v-if="columns0[2].show" size="sm" prop="duty" label="职务"></t-table-column>
            <t-table-column v-if="columns0[3].show" size="sm" prop="status" label="考勤状态">
              <template slot-scope="scope">
                <span :class="getStatusClass(scope.row.goToWorkStatus)">{{ scope.row.goToWorkStatus }}</span>
                <span :class="getStatusClass(scope.row.goOffWorkStatus)">{{ scope.row.goOffWorkStatus }}</span>
@@ -35,68 +69,100 @@
        </t-tab-panel>
        <!-- 月报 -->
        <t-tab-panel label="月报" panel-id="tab-2">
          <div class="row mt-32">
            <div class="keep-row">
              <span>月份：</span>
              <t-date-picker v-model="monthlyForm.month" style="width:200px" type="month" placeholder="请选择月份"></t-date-picker>
            </div>
            <div class="keep-row">
              <span>部门/员工：</span>
              <dept-staff-cascader v-model="monthlyForm" @getOrgId="getMonthOrgId" @getDepId="getMonthDepId" @getStaffId="getMonthStaffId" />
              <div class="search-btn">
                <t-button color="primary" @click="handSearchMonth">查询</t-button>
                <t-button @click="resetMonthData">重置</t-button>
          <div class="track-container">
            <div class="search-container">
              <div class="search-ctn">
                <div>
                  <div style="display: flex;">
                    <t-date-picker v-model="monthlyForm.month" style="width:200px" type="month" placeholder="请选择月份"></t-date-picker>
                    <template>
                      <t-button style="margin-left:10px" color="primary" icon="search-outline" @click="handSearchMonth">查询</t-button>
                    </template>
                    <t-button icon="filter-outline" style="margin: 0 10px;" @click="slideVisible1 = !slideVisible1"></t-button>
                  </div>
                </div>
                <div class="btns">
                  <t-button color="primary">
                    <t-icon size="14" icon="upload-outline"></t-icon> 导出至Excel
                  </t-button>
                  <t-dropdown :visibled="customVisibled1" trigger-mode="custom">
                    <t-button slot="trigger" color="secondary" icon="tile-four-outline" @click="onTriggerClick"></t-button>
                    <div slot="popper">
                      <div style="border-radius: 5px;padding: 20px 20px 20px 20px;background-color: white;">
                        <t-checkbox-group v-model="social1" vertical @change="checkAllGroupChange">
                          <t-checkbox v-for="(item) in columns1" :key="item.label" :value="item.label" :label="item.label">
                            <span>{{ item.label }}</span>
                          </t-checkbox>
                        </t-checkbox-group>
                        <div style="padding-bottom: 10px">
                          <t-checkbox :indeterminate0="indeterminate1" :checked.sync="checkAll1" @click.prevent.native="handleCheckAll">全选
                          </t-checkbox>
                        </div>
                        <t-button color="primary" size="sm" @click="onCloseClick">确认</t-button>
                      </div>
                    </div>
                  </t-dropdown>
                  <t-button color="secondary" icon="loading" class="reset-btn" @click="resetMonthData"></t-button>
                </div>
              </div>
            </div>
              <div class="animate-demo-wrapper">
                <transition name="slide-up">
                  <div v-show="slideVisible1" class="transition-box allCondition">
                    <div class="input-rule">
                      <span>部门/员工：</span>
                      <dept-staff-cascader v-model="monthlyForm" @getOrgId="getMonthOrgId" @getDepId="getMonthDepId" @getStaffId="getMonthStaffId" />
                      <div class="search-btn">
                      </div>
                    </div>
                  </div>
                </transition>
              </div>
            </div>
          </div>
          <t-button class="export-excel" color="primary">
            <t-icon size="14" class="icon-txt" icon="upload-outline"></t-icon>导出至Excel
          </t-button>
          <t-table :data="monthTableData" :loading="loadMonthTable" size="sm" line class="table-detail">
            <t-table-column type="selection"></t-table-column>
            <t-table-column width="75" prop="name" label="姓名"></t-table-column>
            <t-table-column width="90" prop="userid" label="员工编号"></t-table-column>
            <t-table-column width="90" prop="duty" label="职务"></t-table-column>
            <t-table-column width="120" prop="daysAttendance" label="出勤天数(天)"></t-table-column>
            <t-table-column width="120" prop="timesLate" label="迟到次数(次)">
            <t-table-column v-if="columns1[0].show" width="75" prop="name" label="姓名"></t-table-column>
            <t-table-column v-if="columns1[1].show" width="90" prop="userid" label="员工编号"></t-table-column>
            <t-table-column v-if="columns1[2].show" width="90" prop="duty" label="职务"></t-table-column>
            <t-table-column v-if="columns1[3].show" width="120" prop="daysAttendance" label="出勤天数(天)"></t-table-column>
            <t-table-column v-if="columns1[4].show" width="120" prop="timesLate" label="迟到次数(次)">
              <template slot-scope="scope">
                <span v-if="scope.row.timesLate===0" size="sm">{{ scope.row.timesLate }}</span>
                <span v-else class="abnormalState">{{ scope.row.timesLate }}</span>
              </template>
            </t-table-column>
            <t-table-column width="110" prop="hoursLate" label="迟到时长(h)">
            <t-table-column v-if="columns1[5].show" width="110" prop="hoursLate" label="迟到时长(h)">
              <template slot-scope="scope">
                <span v-if="scope.row.hoursLate===0" size="sm">{{ scope.row.hoursLate }}</span>
                <span v-else class="abnormalState">{{ scope.row.hoursLate }}</span>
              </template>
            </t-table-column>
            <t-table-column width="120" prop="timesLeftearly" label="早退次数(次)">
            <t-table-column v-if="columns1[6].show" width="120" prop="timesLeftearly" label="早退次数(次)">
              <template slot-scope="scope">
                <span v-if="scope.row.timesLeftearly===0" size="sm">{{ scope.row.timesLeftearly }}</span>
                <span v-else class="abnormalState">{{ scope.row.timesLeftearly }}</span>
              </template>
            </t-table-column>
            <t-table-column width="120" prop="hoursLeftearly" label="早退时长(h)">
            <t-table-column v-if="columns1[7].show" width="120" prop="hoursLeftearly" label="早退时长(h)">
              <template slot-scope="scope">
                <span v-if="scope.row.hoursLeftearly===0" size="sm">{{ scope.row.hoursLeftearly }}</span>
                <span v-else class="abnormalState">{{ scope.row.hoursLeftearly }}</span>
              </template>
            </t-table-column>
            <t-table-column width="120" prop="timesAbsence" label="旷工次数(次)">
            <t-table-column v-if="columns1[8].show" width="120" prop="timesAbsence" label="旷工次数(次)">
              <template slot-scope="scope">
                <span v-if="scope.row.timesAbsence===0" size="sm">{{ scope.row.timesAbsence }}</span>
                <span v-else class="abnormalState">{{ scope.row.timesAbsence }}</span>
              </template>
            </t-table-column>
            <t-table-column width="120" prop="daysAbsence" label="旷工时长(天)">
            <t-table-column v-if="columns1[9].show" width="120" prop="daysAbsence" label="旷工时长(天)">
              <template slot-scope="scope">
                <span v-if="scope.row.daysAbsence===0" size="sm">{{ scope.row.daysAbsence }}</span>
                <span v-else class="abnormalState">{{ scope.row.daysAbsence }}</span>
              </template>
            </t-table-column>
            <t-table-column prop="operation" label="操作" fixed="right">
            <t-table-column width="120" prop="operation" label="操作" fixed="right">
              <template slot-scope="scope">
                <a class="link" size="sm" @click="handleClick(scope.row)">详情</a>
              </template>
@@ -120,6 +186,64 @@ export default {
  data () {
    const now = new Date()
    return {
      slideVisible0: false,
      slideVisible1: false,
      indeterminate0: true,
      indeterminate1: true,
      checkAll0: true,
      checkAll1: true,
      social0: ['姓名', '员工编号', '职务', '考勤状态'],
      social1: ['姓名', '员工编号', '职务', '出勤天数(天)', '迟到次数(次)', '迟到时长(h)', '早退次数(次)', '早退时长(h)', '旷工次数(次)', '旷工时长(天)'],
      columns0: [
        {
          label: '姓名',
          show: true
        }, {
          label: '员工编号',
          show: true
        }, {
          label: '职务',
          show: true
        }, {
          label: '考勤状态',
          show: true
        }
      ],
      columns1: [
        {
          label: '姓名',
          show: true
        }, {
          label: '员工编号',
          show: true
        }, {
          label: '职务',
          show: true
        }, {
          label: '出勤天数(天)',
          show: true
        }, {
          label: '迟到次数(次)',
          show: true
        }, {
          label: '迟到时长(h)',
          show: true
        }, {
          label: '早退次数(次)',
          show: true
        }, {
          label: '早退时长(h)',
          show: true
        }, {
          label: '旷工次数(次)',
          show: true
        }, {
          label: '旷工时长(天)',
          show: true
        }
      ],
      customVisibled0: false,
      customVisibled1: false,
      attendanceModal: false,
      modalData: {},
      tabName: 'tab-1',
@@ -152,10 +276,92 @@ export default {
        pageSize: 10
      },
      isFirstCreatedMonth: true,
      isFirstCreatedDaily: true
      isFirstCreatedDaily: true,
      // 当前tab
      activePanel: 'tab-1'
    }
  },
  watch: {
    activePanel () {
      this.customVisibled0 = false
      this.customVisibled1 = false
    }
  },
  methods: {
    checkAllGroupChange () {
      if (this.activePanel === 'tab-1') {
        if (this.social0.length === 4) {
          this.indeterminate0 = false
          this.checkAll0 = true
        } else if (this.social0.length > 0) {
          this.indeterminate0 = true
          this.checkAll0 = false
        } else {
          this.indeterminate0 = false
          this.checkAll0 = false
        }
      } else {
        if (this.social1.length === 10) {
          this.indeterminate1 = false
          this.checkAll1 = true
        } else if (this.social1.length > 0) {
          this.indeterminate1 = true
          this.checkAll1 = false
        } else {
          this.indeterminate1 = false
          this.checkAll1 = false
        }
      }
    },
    handleCheckAll () {
      if (this.activePanel === 'tab-1') {
        if (this.indeterminate0) {
          this.checkAll0 = false
        } else {
          this.checkAll0 = !this.checkAll0
        }
        this.indeterminate0 = false
        if (this.checkAll0) {
          this.social0 = ['姓名', '员工编号', '职务', '考勤状态']
        } else {
          this.social0 = []
        }
      } else {
        if (this.indeterminate1) {
          this.checkAll1 = false
        } else {
          this.checkAll1 = !this.checkAll1
        }
        this.indeterminate1 = false
        if (this.checkAll1) {
          this.social1 = ['姓名', '员工编号', '职务', '出勤天数(天)', '迟到次数(次)', '迟到时长(h)', '早退次数(次)', '早退时长(h)', '旷工次数(次)', '旷工时长(天)']
        } else {
          this.social1 = []
        }
      }
    },
    onTriggerClick () {
      if (this.activePanel === 'tab-1') {
        this.customVisibled0 = true
      } else {
        this.customVisibled1 = true
        // 我加了一个这个事件 避免点击事件时对话框不显示
        window.scrollTo(0, 1)
      }
    },
    onCloseClick () {
      if (this.activePanel === 'tab-1') {
        this.columns0.forEach(e => {
          e.show = this.social0.indexOf(e.label) >= 0
        })
        this.customVisibled0 = false
      } else {
        this.columns1.forEach(e => {
          e.show = this.social1.indexOf(e.label) >= 0
        })
        this.customVisibled1 = false
      }
    },
    getDailyOrgId (id) {
      this.dailyForm.orgId = id
    },
@@ -187,9 +393,6 @@ export default {
    handleDailyInited () {
      // this.getDailyTable()
    },
    changeTabs (tabName) {
      this.tabName = tabName
    },
    // 搜索
    handSearchDay () {
      if (this.dailyForm.workDay && this.dailyForm.orgId) {
@@ -356,28 +559,62 @@ export default {
}
</script>
<style lang="scss" scoped>
.page-main {
.page-main1 {
  margin: 20px 20px 16px 20px;
  .abnormalState {
    color: #eda30f;
    font-size: 14px;
  }
  .keep-row {
    display: flex;
    align-items: center;
    margin-left: 24px;
  }
  .search-btn {
    margin-left: auto;
    margin-right: 15px;
  }
  .icon-txt {
    margin-right: 8px;
  }
  .export-excel {
    margin-top: 24px;
    display: flex;
    align-items: center;
  .track-container {
    width: 100%;
    margin: 24px 0;
    // padding: 20px;
    box-sizing: border-box;
    .search-container {
      width: 100%;
      .search-ctn {
        width: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
        display: flex;
        position: relative;
        > div {
          // margin: 0 20px 16px 0;
          line-height: 2;
        }
        .btns {
          margin-left: auto;
          display: block;
          button {
            margin: 0 2px;
          }
        }
      }
    }
    .table-pager {
      margin: 20px auto;
    }
    .allCondition {
      display: flex;
      justify-content: space-between;
      border: 1px solid rgba(0, 0, 0, 0.09);
      background-color: #f8f9fa;
      flex-wrap: wrap;
      padding: 20px;
      margin: 5px auto;
      .input-rule {
        display: flex;
        flex: 1;
        width: 80%;
        min-width: 80%;
        max-width: 80%;
        padding: 10px 0 10px 20px;
        > span {
          line-height: 32px;
        }
      }
    }
  }
  .table-detail {
    margin-top: 20px;