|
@@ -1,19 +1,42 @@
|
|
|
<template>
|
|
|
<el-dialog
|
|
|
width="400px"
|
|
|
- :title="activeRow.username|| ''"
|
|
|
+ :title="activeRow.username || ''"
|
|
|
:visible.sync="lookVisible"
|
|
|
:before-close="onClose"
|
|
|
>
|
|
|
<div class="days-list">
|
|
|
- <div class="days-block" v-for="i in 21" :key="i">
|
|
|
- <div class="days-item ">
|
|
|
+ <div
|
|
|
+ class="days-block"
|
|
|
+ v-for="(item, index) in trainingList"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="days-item"
|
|
|
+ :class="[
|
|
|
+ item.isFinish == 0 ? 'close' : '',
|
|
|
+ item.isFinish == 1 ? 'check' : '',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
<img
|
|
|
+ v-if="item.isFinish == 0"
|
|
|
+ class="clock-img"
|
|
|
+ src="../images/icon_close.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-if="item.isFinish == 1"
|
|
|
+ class="clock-img"
|
|
|
+ src="../images/icon_check.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-if="item.isFinish == 2"
|
|
|
class="clock-img"
|
|
|
src="../images/icon_check_disabled.png"
|
|
|
alt=""
|
|
|
/>
|
|
|
- <p>6月20日</p>
|
|
|
+ <p class="date">{{ item.trainingDate | dayjsFormatForDate }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -21,28 +44,35 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getUserTrainingTime } from '../api'
|
|
|
+import { getUserTrainingTime } from "../api";
|
|
|
+import dayjs from "dayjs";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
lookVisible: false,
|
|
|
- activeRow:{username:null},
|
|
|
- trainingList:[]
|
|
|
+ activeRow: { username: null },
|
|
|
+ trainingList: [],
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- async openDioag(row) {
|
|
|
+ async openDioag(row) {
|
|
|
this.activeRow = row;
|
|
|
try {
|
|
|
- const res = await getUserTrainingTime({userId:row.id})
|
|
|
- this.trainingList = res.data
|
|
|
- }catch(e){
|
|
|
- console.log(e)
|
|
|
+ const res = await getUserTrainingTime({ userId: row.id });
|
|
|
+ this.trainingList = res.data.forEach((item) => {
|
|
|
+ const tempDate = dayjs(item.trainingDate).format("YYYY-MM-DD");
|
|
|
+ const tempNow = dayjs(new Date()).format("YYYY-MM-DD");
|
|
|
+ item.isFinish = dayjs(tempDate).isBefore(tempNow) ? item.isFinish : 2;
|
|
|
+ item.trainingDate = dayjs(item.trainingDate).format("M月D日");
|
|
|
+ item.isFinish == 1;
|
|
|
+ });
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e);
|
|
|
}
|
|
|
this.lookVisible = true;
|
|
|
},
|
|
|
- onClose(){
|
|
|
- this.lookVisible = false;
|
|
|
+ onClose() {
|
|
|
+ this.lookVisible = false;
|
|
|
},
|
|
|
},
|
|
|
};
|
|
@@ -81,6 +111,7 @@ export default {
|
|
|
font-size: 13px;
|
|
|
font-weight: 500;
|
|
|
color: #ffffff;
|
|
|
+ margin-top: 5px;
|
|
|
}
|
|
|
.clock-img {
|
|
|
width: 29px;
|