提交一下

1

src/utils/vueFilter.js

@@ -124,6 +124,14 @@ Vue.filter("dayjsFormat", (value, format = "YYYY-MM-DD") => {
     return value;
   }
 });
+Vue.filter("dayjsFormatForDate", (value, format = "MM-DD") => {
+  if (value) {
+    return dayjs(value).format(format);
+  } else {
+    return value;
+  }
+});
+
 Vue.filter("dayjsFormatWeek", value => {
   if (value) {
     return dayjs(value).format("YYYY-MM");

src/views/littleArtistCamp/aristCampDetail.vue

@@ -36,6 +36,9 @@
         <el-form-item>
           <el-button native-type="submit" type="danger">搜索</el-button>
           <el-button native-type="reset" type="primary">重置</el-button>
+          <auth auths="tempLittleArtistTrainingCamp/exportUserTrainingDetail" style="margin-left:10px;">
+            <el-button type="primary" @click="exportCampDetail">导出</el-button>
+          </auth>
         </el-form-item>
       </save-form>
       <div class="tableWrap">
@@ -103,6 +106,7 @@
 <script>
 import pagination from "@/components/Pagination/index";
 import artistClock from "./models/artistClock";
+import { Export } from "@/utils/downLoadFile";
 import { getUserTrainingDetail, getCampImGroup } from "./api";
 export default {
   components: { pagination, artistClock },
@@ -150,6 +154,7 @@ export default {
         ...this.searchForm,
         page: this.pageInfo.page,
         rows: this.pageInfo.limit,
+        campId:this.$route.query.id
       };
       try {
         const res = await getUserTrainingDetail({ ...params });
@@ -162,6 +167,25 @@ export default {
     lookstudentCamp(row) {
       this.$refs.artistClock.openDioag(row);
     },
+    exportCampDetail() {
+      // this.$confirm(`您确定导出"${title}"列表`, "提示", {
+      //   confirmButtonText: "确定",
+      //   cancelButtonText: "取消",
+      //   type: "warning",
+      // }).then(async () => {
+
+      // });
+      Export(
+        this,
+        {
+          url: "/api-web/tempLittleArtistTrainingCamp/exportUserTrainingDetail",
+          params: { ...this.searchForm,campId:this.$route.query.id },
+          fileName: `${this.title}.xls`,
+          method: "post",
+        },
+        `您确定导出"${this.title}"列表`
+      );
+    },
   },
 };
 </script>

src/views/littleArtistCamp/models/artistClock.vue

@@ -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;

src/views/littleArtistCamp/models/eidtCamp.vue

@@ -14,15 +14,21 @@
         >
           <el-input class="w100" v-model="formes.name"></el-input>
         </el-form-item>
-        <el-form-item prop="applyTime" label="报名时间"  :rules="[{ required: true, message: '请选择报名时间' }]">
+        <el-form-item
+          prop="applyTime"
+          label="报名时间"
+          :rules="[{ required: true, message: '请选择报名时间' }]"
+        >
           <el-date-picker
             v-model.trim="formes.applyTime"
             class="w100"
             type="daterange"
             value-format="yyyy-MM-dd"
-            @change="()=>{
-              formes.trainTime = []
-            }"
+            @change="
+              () => {
+                formes.trainTime = [];
+              }
+            "
             range-separator="至"
             start-placeholder="报名开始日期"
             end-placeholder="报名结束日期"
@@ -30,7 +36,11 @@
           >
           </el-date-picker>
         </el-form-item>
-        <el-form-item prop="trainTime" label="训练时间" :rules="[{ required: true, message: '请选择训练时间' }]">
+        <el-form-item
+          prop="trainTime"
+          label="训练时间"
+          :rules="[{ required: true, message: '请选择训练时间' }]"
+        >
           <el-date-picker
             v-model.trim="formes.trainTime"
             type="daterange"
@@ -43,6 +53,26 @@
           >
           </el-date-picker>
         </el-form-item>
+        <el-form-item
+          label="封面图"
+          prop="picUrl"
+          :rules="[
+            {
+              required: true,
+              message: '请上传训练营封面图',
+              trigger: 'blur',
+            },
+          ]"
+        >
+          <!--      v-show="!form.coverImg"  -->
+          <upload
+            class="uploadImg"
+            v-model="formes.picUrl"
+            ref="uploadImg"
+          ></upload>
+          <!-- <img v-show="form.coverImg" :src="form.coverImg" alt="" width="105px" height="134px" @click="uploadImg"/> -->
+          <p style="color: red">格式为jpg、png、gif图片</p>
+        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="onClose">取 消</el-button>
@@ -52,17 +82,22 @@
   </div>
 </template>
 <script>
+import Upload from "@/components/Upload/index";
 import { addTrainingCamp, resetTrainingCamp } from "../api";
 import { getTimes } from "@/utils";
 let that;
 export default {
   name: "eidtCamp",
+  components: {
+    Upload,
+  },
   data() {
     return {
       title: "",
       formes: {
         id: "",
         name: "",
+        picUrl: "",
         applyTime: [],
         trainTime: [],
       },
@@ -73,7 +108,7 @@ export default {
   },
 
   mounted() {
-    that = this
+    that = this;
     this.init();
   },
   methods: {
@@ -83,7 +118,11 @@ export default {
       if (row && row.id) {
         this.activeRow = row;
         this.title = "修改训练营";
-        this.formes = { ...row ,applyTime:[row.applyStartDate,row.applyEndDate],trainTime:[row.trainStartDate,row.trainEndDate]};
+        this.formes = {
+          ...row,
+          applyTime: [row.applyStartDate, row.applyEndDate],
+          trainTime: [row.trainStartDate, row.trainEndDate],
+        };
       } else {
         this.title = "新建训练营";
       }
@@ -145,7 +184,7 @@ export default {
       };
     },
   },
-    computed: {
+  computed: {
     payendTimer: () => {
       return {
         firstDayOfWeek: 1,