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-for="(list, listIndex) in lists" :key="listIndex">
      <div class="my-2 table-time px-2">{{ list.dateTime }}</div>
      <a-table :pagination="false" :showHeader="false" :columns="columns" :data-source="list.clockList">
        <template slot="actions" slot-scope="text, record, index">
          <img src="https://www.tall.wiki/staticrec/drag.svg" />
        </template>
        <template slot="morning" slot-scope="text, record, index">
          <div class="clock-in">
            <div v-if="record.morningStatus">
              {{ $moment(record.morning - 0).format('HH:mm') }}
            </div>
            <div v-else>
              <a-button type="primary" size="small" class="clock-btn"> 打卡 </a-button>
              <a-date-picker show-time @change="onChange($event, listIndex, index, 1)" class="clock-select" />
            </div>
          </div>
        </template>
        <template slot="night" slot-scope="text, record, index">
          <div class="clock-in">
            <div v-if="record.nightStatus">
              {{ $moment(record.night - 0).format('HH:mm') }}
            </div>
            <div v-else>
              <a-button type="primary" size="small" class="clock-btn"> 打卡 </a-button>
              <a-date-picker show-time @change="onChange($event, listIndex, index, 2)" class="clock-select" />
            </div>
          </div>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
const columns = [
  { title: ' ', dataIndex: 'actions', key: 'actions', scopedSlots: { customRender: 'actions' }, 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%',
  },
];

const lists = [
  {
    dateTime: '2021-08-27',
    clockList: [
      {
        id: 1,
        morning: '1630283371000',
        morningStatus: true,
        night: '1630319371000',
        nightStatus: true,
        memberName: '赵同学',
        checkerName: '周勇',
      },
      {
        key: 2,
        morning: '1630283371000',
        morningStatus: true,
        night: '1630319371000',
        nightStatus: false,
        memberName: '张野',
        checkerName: '武慧娟',
      },
      {
        key: 3,
        morning: '1630283371000',
        morningStatus: false,
        night: '1630319371000',
        nightStatus: true,
        memberName: '李亚男',
        checkerName: '姚工',
      },
    ],
  },
  {
    dateTime: '2021-08-27',
    clockList: [
      {
        id: 4,
        morning: '1630283371000',
        morningStatus: true,
        night: '1630319371000',
        nightStatus: true,
        memberName: '赵同学',
        checkerName: '周勇',
      },
      {
        key: 5,
        morning: '1630283371000',
        morningStatus: true,
        night: '1630319371000',
        nightStatus: false,
        memberName: '张野',
        checkerName: '武慧娟',
      },
      {
        key: 6,
        morning: '1630283371000',
        morningStatus: false,
        night: '1630319371000',
        nightStatus: true,
        memberName: '李亚男',
        checkerName: '姚工',
      },
    ],
  },
];

export default {
  data() {
    return {
      columns,
      lists,
    };
  },

  methods: {
    onChange(dateString, listIndex, index, type) {
      const selectTime = this.$moment(dateString).format('x');
      console.log('selectTime: ', selectTime);
      if (type === 1) {
        this.lists[listIndex].clockList[index].morning = selectTime;
      } else {
        this.lists[listIndex].clockList[index].night = selectTime;
      }
    },
  },
};
</script>

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

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

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

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

.clock-in {
  position: relative;
}

.clock-btn {
  position: absolute;
}

.clock-select {
  position: relative;
  min-width: auto !important;
  width: 47px;
  height: 20px;
  overflow: hidden;
  z-index: 9;
  opacity: 0;
}
</style>