作业考勤页面

ebc-middle-platform/src/conf/services.js

@@ -169,6 +169,10 @@ export default {
  history: {
    GET_HISTORICAL_ALARM: '/history/queryHistoricalAlarm' // 查询历史报警信息
  },
  areaInOutRecord: {
    GET_ATTENDANCE: '/areaInOutRecord/queryPageAttendanceCount', // 分页查询考勤统计分析
    GET_ATTENDANCE_DETAILE: '/areaInOutRecord/queryPageAttendanceRecordDetaile' // 分页查询考勤统计分析
  },
  excel: {
    EXPROT_MAP_TAG: '/ExportToExcel/exportMapTagInfoToExcel' // 导出地图标记信息
  }

ebc-middle-platform/src/modules/attendance/attendance.vue

@@ -10,17 +10,20 @@
            <t-button v-for="(item,index) in queryCondition.type" :class="index==queryCondition.currentIndex?'active':''" :key="index" color="secondary" @click="changeType(index)">{{ item }}</t-button>
          </t-button-group>
        </div>
        <div>
          <t-date-picker v-model="queryCondition.singleDateVal" style="width:120px" placeholder="时间" @date-change="onChangeDate"
        <div v-if="queryCondition.dateType">
          <t-date-picker v-model="queryCondition.singleDateVal" type= "date" style="width:120px" placeholder="时间" @date-change="onChangeDate"
          ></t-date-picker>
        </div>
        <div v-if="!queryCondition.dateType">
          <div>
            <t-date-picker v-model="queryCondition.singleDateVal" type="month" style="width:120px" placeholder="时间" @date-change="onChangeDate"
            ></t-date-picker>
          </div>
        </div>
        <div>
          <div class="label">姓名:</div>
          <div class="input-rule">
            <t-select v-model="queryCondition.alarmPerson" width="200" placeholder="请输入...">
              <t-option>张三</t-option>
              <t-option>李四</t-option>
            </t-select>
            <t-input v-model="queryCondition.alarmPerson" placeholder="请输入..."></t-input>
          </div>
        </div>
        <div class="btns">
@@ -32,12 +35,12 @@
    </div>
    <div>
      <t-table :data="table.data">
        <t-table-column prop="name" label="姓名"></t-table-column>
        <t-table-column prop="job" label="职务"></t-table-column>
        <t-table-column v-if="queryCondition.currentIndex === 0" prop="time" label="打卡时间"></t-table-column>
        <t-table-column v-if="queryCondition.currentIndex !== 0" prop="attendance" label="出勤天数（天）"></t-table-column>
        <t-table-column prop="userName" label="姓名"></t-table-column>
        <t-table-column prop="duty" label="职务"></t-table-column>
        <t-table-column v-if="queryCondition.currentIndex === 0" prop="IN_DATE" label="打卡时间"></t-table-column>
        <t-table-column v-if="queryCondition.currentIndex !== 0" prop="gateDays" label="出勤天数（天）"></t-table-column>
        <t-table-column
          v-if="queryCondition.currentIndex !== 0"
          v-if="queryCondition.currentIndex === 1"
          fixed="right"
          label="操作"
          width="120"
@@ -46,6 +49,16 @@
            <a href="javascript:void(0)" size="sm" @click="detail(scope.row)">详情</a>
          </template>
        </t-table-column>
        <t-table-column
          v-if="queryCondition.currentIndex === 2"
          fixed="right"
          label="操作"
          width="120"
        >
          <template slot-scope="scope">
            <a href="javascript:void(0)" size="sm" @click="monthDetail(scope.row)">详情</a>
          </template>
        </t-table-column>
      </t-table>
      <t-pager :total="table.pager.total" :current.sync="table.pager.currentPage"
               :page-size.sync="table.pager.size"
@@ -58,46 +71,50 @@
    </div>
    <t-modal :visibled.sync="modal" :footer-visibled="false" class="modal" title="考勤详情" width="1200px">
      <div class="title">
        <div>姓名：张三</div>
        <div>职务：运维人员</div>
        <div>考勤时间：2020-08-01 ~ 2020-08-07</div>
        <div>出勤天数：7天</div>
        <div>姓名：{{ modalData.userName }}</div>
        <div>职务：{{ modalData.duty }}</div>
        <div>考勤时间：{{ modalData.date }}</div>
        <div>出勤天数：{{ modalData.days }}</div>
      </div>
      <div>
        <t-table :data="modalData.table">
          <t-table-column prop="date" label="日期"></t-table-column>
          <t-table-column prop="time" label="打卡时间" ></t-table-column>
          <t-table-column prop="printTime" label="打卡时间" ></t-table-column>
        </t-table>
      </div>
    </t-modal>
    <t-modal :visibled.sync="monthModal" :footer-visibled="false" class="modal" title="考勤详情" width="1200px">
      <div class="title">
        <div>姓名：{{ monthModalData.userName }}</div>
        <div>职务：{{ monthModalData.duty }}</div>
        <div>考勤时间：{{ monthModalData.date }}</div>
        <div>出勤天数：{{ monthModalData.days }}</div>
      </div>
      <div>
        <t-table :data="monthModalData.table.data">
          <t-table-column prop="date" label="日期"></t-table-column>
          <t-table-column prop="printTime" label="打卡时间" ></t-table-column>
        </t-table>
        <t-pager :total="monthModalData.table.pager.total" :current.sync="monthModalData.table.pager.currentPage"
                 :page-size.sync="monthModalData.table.pager.size"
                 :sizer-range="[10,20,50]"
                 class="px-24 pt-16 float-right"
                 show-elevator show-sizer
                 @on-size-change="onModalSizeChange"
                 @on-change="onModalPagerChange">
        </t-pager>
      </div>
    </t-modal>
  </div>
</template>
<script>
import './attendance.scss'
import services from "../../conf/services";
export default {
  data() {
    return {
      table: {
        data: [
          {
            name: '王小明',
            job: '运维人员',
            time: '08:18',
            attendance: '7'
          },
          {
            name: '王小明',
            job: '运维人员',
            time: '08:18',
            attendance: '7'
          },
          {
            name: '王小明',
            job: '运维人员',
            time: '08:18',
            attendance: '7'
          }
        ],
        data: [],
        pager: {
          currentPage: 1,
          size: 10,
@@ -105,8 +122,9 @@ export default {
        }
      },
      queryCondition: {
        dateType: true,
        type: [
          '日', '月', '年'
          '日', '周', '月'
        ],
        currentIndex: 0,
        singleDateVal: '',
@@ -114,71 +132,217 @@ export default {
      },
      modal: false,
      modalData: {
        table: [{
          date: '2020-08-01',
          time: '08:18'
        }, {
          date: '2020-08-02',
          time: '08:18'
        }, {
          date: '2020-08-03',
          time: '08:18'
        }, {
          date: '2020-08-04',
          time: '08:18'
        }, {
          date: '2020-08-05',
          time: '08:18'
        }, {
          date: '2020-08-06',
          time: '08:18'
        }, {
          date: '2020-08-07',
          time: '08:18'
        }]
        userName: '',
        duty: '',
        date: '',
        days: '',
        table: []
      },
      monthModal: false,
      monthModalData: {
        userName: '',
        EMPLOYEE_ID: '',
        duty: '',
        date: '',
        days: '',
        table: {
          data: [],
          pager: {
            currentPage: 1,
            size: 10,
            total: 0
          }
        }
      }
    }
  },
  mounted() {
    this.table.data = this.table.data.concat(this.table.data)
    this.table.pager.total = this.table.data.length
    this.getList()
  },
  methods: {
    changeType(index) {
      this.queryCondition.currentIndex = index
      this.queryCondition.singleDateVal = ''
      this.queryCondition.dateType = !(index === 2)
      this.getList()
    },
    onChangeDate(value) {
      console.log(value)
      this.singleDateVal = value
      this.onSearch()
    },
    onChange(value) {
      console.log('date change:' + value)
    },
    onReset() {
      this.queryCondition = {
        dateType: true,
        type: [
          '日', '月', '年'
          '日', '周', '月'
        ],
        currentIndex: 0,
        singleDateVal: '',
        alarmPerson: ''
      }
      this.table.pager.currentPage = 1
      this.table.pager.size = 10
      this.getList()
    },
    getList() {
      var mark
      if (this.queryCondition.currentIndex === 0) {
        mark = 'day'
      } else if (this.queryCondition.currentIndex === 1) {
        mark = 'week'
      } else {
        mark = 'month'
      }
      var params = new FormData()
      params.append(
        'data',
        JSON.stringify({
          currentDate: this.queryCondition.singleDateVal,
          mark: mark,
          userName: this.queryCondition.alarmPerson,
          pageNum: this.table.pager.currentPage,
          pageSize: this.table.pager.size
        })
      )
      this.$test
        .post(services.areaInOutRecord.GET_ATTENDANCE, params)
        .then((res) => {
          // 请求成功处理...
          this.table.data = res.data.list
          this.table.pager.total = res.data.total
        })
        .catch((res) => {
          // 请求失败处理...
        })
    },
    onSearch() {
      this.table.pager.currentPage = 1
      this.getList()
    },
    toExport() {
    },
    onPagerChange(page) {
      this.table.pager.currentPage = page
      this.getList()
    },
    onSizeChange(number) {
      this.table.pager.currentPage = 1
      this.table.pager.size = number
      this.getList()
    },
    onModalPagerChange(page) {
      this.monthModalData.table.pager.currentPage = page
      this.getMonthDetail()
    },
    onModalSizeChange(number) {
      this.monthModalData.table.pager.currentPage = 1
      this.monthModalData.table.pager.size = number
      this.getMonthDetail()
    },
    detail(row) {
      this.modal = true
      var data
      if (this.queryCondition.singleDateVal === '') {
        data = this.getTime(2)
      } else {
        data = this.queryCondition.singleDateVal
      }
      this.modalData.date = this.getBeforeDate(6, data) + ' ~ ' + data
      this.modalData.userName = row.userName
      this.modalData.duty = row.duty
      this.modalData.days = row.gateDays
      var params = new FormData()
      params.append(
        'data',
        JSON.stringify({
          EMPLOYEE_ID: row.EMPLOYEE_ID,
          mark: 'week',
          currentDate: this.queryCondition.singleDateVal
        })
      )
      this.$test
        .post(services.areaInOutRecord.GET_ATTENDANCE_DETAILE, params)
        .then((res) => {
          // 请求成功处理...
          this.modalData.table = res.data.list
        })
        .catch((res) => {
          // 请求失败处理...
        })
    },
    monthDetail(row) {
      this.monthModal = true
      if (this.queryCondition.singleDateVal === '') {
        this.monthModalData.date = this.getTime(1)
      } else {
        this.monthModalData.date = this.queryCondition.singleDateVal
      }
      this.monthModalData.userName = row.userName
      this.monthModalData.duty = row.duty
      this.monthModalData.days = row.gateDays
      this.monthModalData.EMPLOYEE_ID = row.EMPLOYEE_ID
      this.getMonthDetail()
    },
    getMonthDetail() {
      var params = new FormData()
      params.append(
        'data',
        JSON.stringify({
          EMPLOYEE_ID: this.monthModalData.EMPLOYEE_ID,
          mark: 'month',
          currentDate: this.queryCondition.singleDateVal,
          pageNum: this.monthModalData.table.pager.currentPage,
          pageSize: this.monthModalData.table.pager.size
        })
      )
      this.$test
        .post(services.areaInOutRecord.GET_ATTENDANCE_DETAILE, params)
        .then((res) => {
          debugger;
          // 请求成功处理...
          this.monthModalData.table.data = res.data.list
          this.monthModalData.table.pager.total = res.data.total
        })
        .catch((res) => {
          // 请求失败处理...
        })
    },
    getTime(type) {
      var date = new Date()
      var year = date.getFullYear()
      var mon = date.getMonth() + 1
      var da = date.getDate()
      mon = mon < 10 ? '0' + mon : mon
      da = da < 10 ? '0' + da : da
      if (type === 1) {
        return year + '-' + mon
      } else {
        return year + '-' + mon + '-' + da
      }
    },
    // 根据传入的整数和时间计算一周前的日期
    getBeforeDate(days, date) {
      var now
      if (date !== '') {
        var arr = date.split('-')
        now = new Date(arr[0], arr[1], arr[2]).getTime()
      } else {
        now = new Date().getTime()
      }
      var ago = now - 86400000 * days // 一天的毫秒数为86400000
      var agoData = new Date(ago)
      var year = agoData.getFullYear()
      var mon = agoData.getMonth() + 1
      var day = agoData.getDate()
      mon = mon < 10 ? '0' + mon : mon
      day = day < 10 ? '0' + day : day
      return year + '-' + mon + '-' + day
    }
  }
}
</script>