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

<template>
  <div class="d-flex justify-space-between align-center justify-center nav mb-4">
    <!-- <a-icon type="left" class="back" /> -->
    <div>考勤管理</div>
    <div>
      <a-button type="primary" icon="search" size="small" class="mr-3" @click="openSearch"> 搜索 </a-button>
      <a-button type="primary" size="small" icon="export" @click="clockExport"> 导出 </a-button>
    </div>
    <div class="timer" v-if="show">
      <!-- 时间选择 -->
      <TimePicker @changeTime="changeTime" />
      <!-- 成员选择 -->
      <MemberPicker @changeTime="changeTime" />
      <div class="btns mt-3">
        <a-button class="btn" size="small"> 取消 </a-button>
        <a-button class="btn" type="primary" size="small"> 确认 </a-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { clockExport } from '@/config/api';
import TimePicker from '@/components/TimePicker/TimePicker.vue';
import MemberPicker from '@/components/MemberPicker/MemberPicker.vue';

export default {
  components: { TimePicker, MemberPicker },
  data() {
    return { show: false };
  },
  computed: mapState('home', ['projectId', 'startTime', 'endTime', 'memberIdList']),
  methods: {
    /**
     * 导出考勤excel
     * @param {string} projectId
     * @param {array} memberIdList
     * @param {string} startTime
     * @param {string} endTime
     */
    async clockExport() {
      try {
        const { projectId, memberIdList, startTime, endTime } = this;
        const params = { param: { projectId, memberIdList, startTime, endTime } };
        const res = await clockExport(params);
        const { code, msg, data } = res.data;
        if (code === 200) {
          this.$message.success('导出成功');
          window.location.href = data.url;
        } else {
          this.$message.error(msg || '导出失败');
          throw msg;
        }
      } catch (error) {
        throw error || '导出失败';
      }
    },
    changeTime() {
      this.$refs.mychild.setParams();
    },
    openSearch() {
      this.show = !this.show;
    },
  },
};
</script>

<style lang="less" scoped>
.nav {
  position: relative;
  // border-bottom: 1px solid #ccc;
}
.back {
  position: absolute;
  left: 0;
}
.search {
  border: none;
}
.timer {
  position: absolute;
  width: 380px;
  height: 150px;
  // border: 1px solid black;
  top: 50px;
  margin-left: 50%;
  transform: translate(-50%);
  background-color: #fff;
  color: black;
  box-shadow: 0px 0px 5px #ccc;
  z-index: 1;
  padding: 26px 24px 24px 24px;
}
.btn {
  margin-left: 80px;
}
.export {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
</style>