check-work/src/components/List/List.vue

<template>
  <div class="mt-5">
    <div class="d-flex flex-nowrap table-head">
      <div style="width: 10%"></div>
      <div class="table-head-item">姓名</div>
      <div class="table-head-item">早</div>
      <div class="table-head-item">晚</div>
      <div class="table-head-item">审核人</div>
    </div>
    <div v-if="clockInfos && clockInfos.length">
      <div v-for="(list, listIndex) in clockInfos" :key="listIndex" class="teble-box">
        <div class="table-time px-2">{{ list.dateTime }}</div>
        <a-table :pagination="false" :show-header="false" :columns="columns" :data-source="list.recordList">
          <template slot="actions" slot-scope="text, record, index">
            <img @click="showMenu(index)" src="https://www.tall.wiki/staticrec/drag.svg" />
          </template>
          <template slot="morning" slot-scope="text, record, index">
            <div v-if="record.morningStatus">
              {{ $moment(record.morning - 0).format('HH:mm') }}
            </div>
            <a-button
              v-else
              type="primary"
              size="small"
              @click="checkTime(listIndex, index, 0, record.id, record.memberId, record.checkerId)"
            >
              打卡
            </a-button>
          </template>
          <template slot="night" slot-scope="text, record, index">
            <div v-if="record.nightStatus">
              {{ $moment(record.night - 0).format('HH:mm') }}
            </div>
            <a-button
              v-else
              type="primary"
              size="small"
              @click="checkTime(listIndex, index, 1, record.id, record.memberId, record.checkerId)"
            >
              打卡
            </a-button>
          </template>
          <template slot="checkerName" slot-scope="text, record">
            <a-select :default-value="record.checkerId || checkerId" style="width: 80px" placeholder="选择" @change="chooseChecker">
              <a-select-option :value="member.memberId" v-for="member in members" :key="member.memberId">
                {{ member.name }}
              </a-select-option>
            </a-select>
          </template>
        </a-table>
      </div>
    </div>
    <a-empty class="mt-8 mb-8" description="暂无打卡信息" v-else />
    <a-drawer
      placement="bottom"
      :closable="false"
      :mask-closable="false"
      :visible="visible"
      :after-visible-change="afterVisibleChange"
      class="actions-box"
    >
      <p class="mb-1">修改</p>
      <p class="mb-4">驳回</p>
      <p class="mb-0" @click="onClose">取消</p>
    </a-drawer>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { clockQuery, clockPunch } from '@/config/api';

const columns = [
  { title: ' ', dataIndex: 'actions', key: 'actions', scopedSlots: { customRender: 'actions' }, align: 'center', width: '10%' },
  { title: '姓名', dataIndex: 'memberName', key: 'memberName', align: 'center', width: '22.5%' },
  { title: '早', dataIndex: 'morning', key: 'morning', scopedSlots: { customRender: 'morning' }, align: 'center', width: '22.5%' },
  { title: '晚', dataIndex: 'night', key: 'night', scopedSlots: { customRender: 'night' }, align: 'center', width: '22.5%' },
  {
    title: '审核人',
    dataIndex: 'checkerName',
    key: 'checkerName',
    scopedSlots: { customRender: 'checkerName' },
    align: 'center',
    width: '22.5%',
  },
];

export default {
  data() {
    return {
      columns,
      clockInfos: [],
      memberIdList: [],
      options: null,
      checkerId: undefined,
      visible: false,
      placement: 'left',
    };
  },

  computed: mapState('home', ['projectId', 'members']),

  mounted() {
    this.setParams();
  },

  methods: {
    async setParams(options) {
      const { projectId } = this;
      const time = this.$moment(Date.now()).format('YYYY-MM-DD');
      const startTime = (options && options.startTime) || this.$moment(`${time} 00:00`).format('x') - 0;
      const endTime = (options && options.endTime) || this.$moment(`${time} 23:59`).format('x') - 0;
      const memberIdList = (options && options.memberIdList) || this.memberIdList;
      const params = { param: { projectId, memberIdList, startTime, endTime } };
      await this.getClockQuery(params);
    },

    /**
     * 查询考勤信息
     * @param {string} projectId
     * @param {array} memberIdList
     * @param {string} startTime
     * @param {string} endTime
     */
    async getClockQuery(params) {
      try {
        const res = await clockQuery(params);
        const { code, msg, data } = res.data;
        if (code === 200) {
          this.clockInfos = data;
        } else {
          this.$message.error(msg || '获取失败');
          throw msg;
        }
      } catch (error) {
        throw error || '获取失败';
      }
    },

    // 选择审核人
    chooseChecker(value) {
      this.checkerId = value;
    },

    // 打卡
    checkTime(listIndex, index, clockType, id, memberId, checkerId) {
      const time = Date.now();
      const selectTime = this.$moment(time).format('HH:mm');
      if (clockType === 0) {
        this.clockInfos[listIndex].recordList[index].morning = selectTime;
      } else {
        this.clockInfos[listIndex].recordList[index].night = selectTime;
      }
      const dateTime = this.$moment(time).format('x') - 0;
      const params = { param: { checkerId: this.checkerId || checkerId, clockType, dateTime, id, memberId } };
      this.handleClockPunch(params);
    },

    /**
     * 打卡
     * @param {string} checkerId 审核员id
     * @param {array} clockType 打卡类型(0-早,1-晚)
     * @param {string} dateTime 打卡时间
     * @param {string} id 记录id(没有则不传)
     * @param {string} memberId 考勤信息中的成员id
     */
    async handleClockPunch(params) {
      try {
        const res = await clockPunch(params);
        const { code, msg } = res.data;
        if (code === 200) {
          this.$message.success('打卡成功');
          this.setParams();
        } else {
          this.$message.error(msg || '获取失败');
          throw msg;
        }
      } catch (error) {
        throw error || '获取失败';
      }
    },

    showMenu(index) {
      console.log('展开菜单', index);
      this.visible = true;
    },

    afterVisibleChange(val) {
      console.log('visible', val);
    },

    onClose() {
      this.visible = false;
    },
  },
};
</script>

<style scoped>
.table-head {
  border-bottom: 1px solid #e8e8e8;
  background: #fafafa;
  height: 40px;
  line-height: 40px;
  font-weight: bold;
}

.table-time {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #e8e8e8;
}

.table-head-item {
  width: 22.5%;
  text-align: center;
}

img {
  width: 22px;
  max-width: auto !important;
}

.teble-box >>> .ant-table-row-cell-break-word {
  padding: 8px 0 !important;
}

.actions-box >>> .ant-drawer-content-wrapper {
  height: auto !important;
}

.actions-box >>> .ant-drawer-wrapper-body {
  background: #f5f5f5;
}

.actions-box >>> .ant-drawer-body {
  padding: 0 !important;
}

.actions-box >>> .ant-drawer-body p {
  height: 40px;
  line-height: 40px;
  background: #fcfcfc;
  text-align: center;
}
</style>