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>
    <a-button type="primary" size="small" class="export" @click="clockExport"> 导出 </a-button>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { clockExport } from '@/config/api';

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

  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 || '导出失败';
      }
    },
  },
};
</script>

<style lang="less" scoped>
.nav {
  position: relative;
}
.back {
  position: absolute;
  left: 0;
}
.export {
  position: absolute;
  right: 0;
}
</style>