导出考勤,修改传参

.env.production

@@ -5,6 +5,6 @@ VUE_APP_BASE_URL=https://test.tall.wiki/checkwork/
 VUE_APP_API_URL=https://test.tall.wiki/checkwork/gateway
 VUE_APP_PROXY_URL=/gateway
 VUE_APP_PUBLIC_PATH=/checkwork
-VUE_APP_MSG_URL=wss://www.tall.wiki/websocket/message/v4.0/ws
+VUE_APP_MSG_URL=wss://test.tall.wiki/websocket/message/v4.0/ws
 VUE_APP_TITLE=考勤管理
 VUE_APP_DESCRIPTION=考勤管理

src/components/HeadNav/HeadNav.vue

@@ -2,21 +2,47 @@
   <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"> 导出 </a-button>
+    <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 {};
   },
 
-  created() {},
-
-  mounted() {},
+  computed: mapState('home', ['projectId', 'startTime', 'endTime', 'memberIdList']),
 
-  methods: {},
+  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>
 

src/components/List/List.vue

@@ -149,7 +149,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapMutations } from 'vuex';
 import { clockQuery, clockPunch, clockAudit } from '@/config/api';
 
 const columns = [
@@ -171,7 +171,6 @@ export default {
     return {
       columns,
       clockInfos: [],
-      memberIdList: [],
       options: null,
       checkerId: undefined,
       morningVisible: false,
@@ -184,12 +183,10 @@ export default {
       auditOptions: null,
       morningLoading: false,
       nightLoading: false,
-      startTime: '',
-      endTime: '',
     };
   },
 
-  computed: mapState('home', ['projectId', 'members']),
+  computed: mapState('home', ['projectId', 'members', 'startTime', 'endTime', 'memberIdList']),
 
   mounted() {
     this.timer = setInterval(async () => {
@@ -204,16 +201,24 @@ export default {
         });
       }
     }, 300);
+
+    const time = this.$moment(Date.now()).format('YYYY-MM-DD');
+    if (!this.startTime) {
+      this.setStartTime(this.$moment(`${time} 00:00`).format('x') - 0);
+    }
+    if (!this.endTime) {
+      this.setEndTime(this.$moment(`${time} 23:59`).format('x') - 0);
+    }
   },
 
   methods: {
-    async setParams(options) {
-      const { projectId } = this;
-      const time = this.$moment(Date.now()).format('YYYY-MM-DD');
-      this.startTime = (options && options.startTime) || this.$moment(`${time} 00:00`).format('x') - 0;
-      this.endTime = (options && options.endTime) || this.$moment(`${time} 23:59`).format('x') - 0;
-      this.memberIdList = (options && options.memberIdList) || [];
-      const params = { param: { projectId, memberIdList: this.memberIdList, startTime: this.startTime, endTime: this.endTime } };
+    ...mapMutations('home', ['setStartTime', 'setEndTime', 'setMemberIdList']),
+
+    async setParams() {
+      const { projectId, startTime, endTime, memberIdList } = this;
+      console.log('this.startTime: ', startTime, this.$moment(startTime - 0).format('YYYY-MM-DD HH:mm:ss'));
+      console.log('this.endTime: ', endTime, this.$moment(endTime - 0).format('YYYY-MM-DD HH:mm:ss'));
+      const params = { param: { projectId, memberIdList, startTime, endTime } };
       await this.getClockQuery(params);
     },
 

src/components/MemberPicker/MemberPicker.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapMutations } from 'vuex';
 
 export default {
   data() {
@@ -18,10 +18,12 @@ export default {
   computed: mapState('home', ['members']),
 
   methods: {
+    ...mapMutations('home', ['setMemberIdList']),
+
     handleChange(value) {
+      this.setMemberIdList(value);
       setTimeout(() => {
-        const options = { memberIdList: value };
-        this.$emit('changeTime', options);
+        this.$emit('changeTime');
       }, 1000);
     },
   },

src/components/TimePicker/TimePicker.vue

@@ -37,6 +37,8 @@
 </template>
 
 <script>
+import { mapMutations } from 'vuex';
+
 export default {
   data() {
     return {
@@ -48,20 +50,39 @@ export default {
     };
   },
   watch: {
-    endValue(val) {
-      if (!this.startValue) {
-        this.$message.error('请选择起始时间');
-        return;
+    startValue(val) {
+      if (val) {
+        const startTime = this.$moment(val).format('x');
+        this.setStartTime(startTime);
+      } else {
+        const time = this.$moment(Date.now()).format('YYYY-MM-DD');
+        this.setStartTime(this.$moment(`${time} 00:00`).format('x') - 0);
+        if (!this.endValue) {
+          this.$emit('changeTime');
+        }
       }
-      if (this.startValue && val) {
-        const startTime = this.$moment(this.startValue).format('x');
-        const endTime = this.$moment(this.endValue).format('x');
-        const options = { startTime, endTime };
-        this.$emit('changeTime', options);
+    },
+    endValue(val) {
+      if (val) {
+        const endTime = this.$moment(val).format('x');
+        this.setEndTime(endTime);
+
+        if (val && !this.startValue) {
+          this.$message.error('请选择起始时间');
+          return;
+        }
+      } else {
+        const time = this.$moment(Date.now()).format('YYYY-MM-DD');
+        this.setEndTime(this.$moment(`${time} 23:59`).format('x') - 0);
       }
+
+      this.$emit('changeTime');
     },
   },
+
   methods: {
+    ...mapMutations('home', ['setStartTime', 'setEndTime']),
+
     // 昨天
     setYesterday(value, open) {
       this[value] = this.$moment(new Date().getTime() - 24 * 60 * 60 * 1000).format('YYYY-MM-DD');
@@ -71,6 +92,7 @@ export default {
       }
     },
 
+    // 今天
     setToday(value, open) {
       this[value] = this.$moment(new Date()).format('YYYY-MM-DD');
       this[open] = false;

src/config/api.js

@@ -13,3 +13,6 @@ export const queryChecker = params => axios.post(`${defaultwbs}/deliver/queryChe
 
 // 查询所有成员
 export const clockAudit = params => axios.post(`${defaultwbs}/clock/audit`, params);
+
+// 导出考勤excel
+export const clockExport = params => axios.post(`${defaultwbs}/clock/export`, params);

src/store/modules/home/mutations.js

@@ -25,6 +25,33 @@ const mutations = {
   setMembers(state, data) {
     state.members = data;
   },
+
+  /**
+   * 设置开始时间
+   * @param {object} state
+   * @param {string} data
+   */
+  setStartTime(state, data) {
+    state.startTime = data;
+  },
+
+  /**
+   * 设置结束时间
+   * @param {object} state
+   * @param {string} data
+   */
+  setEndTime(state, data) {
+    state.endTime = data;
+  },
+
+  /**
+   * 设置所选成员信息
+   * @param {object} state
+   * @param {Array} data
+   */
+  setMemberIdList(state, data) {
+    state.memberIdList = data;
+  },
 };
 
 export default mutations;

src/store/modules/home/state.js

@@ -9,6 +9,9 @@ const state = {
   projectId: '',
   clockInfos: [], // 考勤信息
   members: [], // 所有成员
+  startTime: '',
+  endTime: '',
+  memberIdList: [],
 };
 
 export default state;

src/views/FirstPage/FirstPage.vue

@@ -25,8 +25,8 @@ export default {
       console.log(`selected ${value}`);
     },
 
-    changeTime(options) {
-      this.$refs.mychild.setParams(options);
+    changeTime() {
+      this.$refs.mychild.setParams();
     },
   },
 };