增 改 查完毕 差删除

1

src/views/resetTeaming/components/archicesComponents/api.js

@@ -28,3 +28,22 @@ export const getMusicGroupTrainPlan = data => request2({
   requestType:'json'
 
 })
+
+// 新增乐团训练规划
+export const addMusicGroupTrainPlan = data => request2({
+  url: '/api-web/musicGroupTrainPlan/add',
+  data: data,
+  params: {},
+  method: 'post',
+  requestType:'json'
+
+})
+
+// 修改乐团训练规划
+export const resetMusicGroupTrainPlan = data =>request2({
+  url: '/api-web/musicGroupTrainPlan/update',
+  data: data,
+  params: {},
+  method: 'post',
+  requestType:'form'
+})

src/views/resetTeaming/components/archicesComponents/modals/addPlan.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-form  :inline="true" :model.sync="form">
+    <el-form :inline="true" :model.sync="form">
       <el-form-item prop="year" label="年份">
         <el-date-picker
           v-model="form.year"
@@ -9,7 +9,7 @@
           placeholder="选择年"
           :clearable="false"
           :disabled="true"
-           style="width: 180px!important"
+          style="width: 180px !important"
         >
         </el-date-picker>
       </el-form-item>
@@ -21,7 +21,6 @@
           style="width: 180px !important"
           v-model.trim="form.term"
           placeholder="请选择学期"
-
         >
           <el-option value="0" label="上学期"></el-option>
           <el-option value="1" label="下学期"></el-option>
@@ -33,7 +32,7 @@
           v-model.trim="form.classGroupId"
           filterable
           placeholder="请选择班级"
-           style="width: 180px!important"
+          style="width: 180px !important"
         >
           <el-option
             v-for="(item, index) in classList1"
@@ -45,18 +44,16 @@
       </el-form-item>
       <el-form-item
         label="课程类型"
-        prop="courseType"
+        prop="courseScheduleType"
         :rules="[
           { required: true, message: '请选择课程类型', trigger: 'blur' },
         ]"
       >
         <el-select
-          :disabled="
-           true
-          "
-           style="width: 180px!important"
+          :disabled="true"
+          style="width: 180px !important"
           class="multiple"
-          v-model.trim="form.courseType"
+          v-model.trim="form.courseScheduleType"
           filterable
           placeholder="课程类型"
         >
@@ -68,25 +65,140 @@
           ></el-option>
         </el-select>
       </el-form-item>
+      <!-- 判断一下 是否能添加   -->
+    </el-form>
+    <p class="subTitle" v-if="maxPlansNum > 0">
+      共{{ maxPlansNum }}次课程尚未进行训练规划
+    </p>
+    <el-form :model.sync="planform" :inline="true" ref="planform">
+      <el-form-item
+        v-for="(item, index) in planform.palnList"
+        :key="index"
+        :label="'第' + (index + currentIndex) + '次训练规划'"
+        :rules="{
+          required: true,
+          message: '训练规划不能为空',
+          trigger: 'blur',
+        }"
+        :prop="'palnList.' + index + '.value'"
+      >
+        <el-input
+          type="textarea"
+          style="width: 700px; resize: none"
+          :rows="3"
+          v-model="item.value"
+          maxlength="200"
+          show-word-limit
+        ></el-input>
+
+        <i
+          class="el-icon-remove-outline marginLeft10 iconStyle"
+          v-if="planform.palnList.length > 1 && !basdisabled"
+          @click="deletePlan(index)"
+          style="font-size: 20px; cursor: pointer"
+        ></i>
+        <i
+          class="el-icon-circle-plus-outline marginLeft10 iconStyle"
+          v-if="!basdisabled && index + 1 == planform.palnList.length"
+          @click="addPlan"
+          style="font-size: 20px; cursor: pointer"
+        ></i>
+      </el-form-item>
     </el-form>
   </div>
 </template>
 <script>
-
+import { addMusicGroupTrainPlan, resetMusicGroupTrainPlan } from "../api";
 export default {
-  props:['form','classList','courseTypeList'],
+  props: [
+    "form",
+    "classList",
+    "courseTypeList",
+    "planList",
+    "currentIndex",
+    "maxPlansNum",
+    "isAdd",
+    "activeItem",
+  ],
   data() {
-    return {};
+    return {
+      planform: {
+        palnList: [{ value: "" }],
+      },
+    };
   },
-  computed:{
-    classList1(){
-      return this.classList
-    },
-    courseTypeList1(){
-      return this.courseTypeList
+  mounted() {
+    if (!this.add && this.activeItem) {
+      this.planform.palnList[0].value = this.activeItem?.plan?.value;
     }
-  }
+  },
+  computed: {
+    classList1() {
+      return this.classList;
+    },
+    courseTypeList1() {
+      return this.courseTypeList;
+    },
+    basdisabled() {
+      return !this.isAdd;
+    },
+  },
+  methods: {
+    addPlan() {
+      if (this.planform.palnList.length < this.maxPlansNum) {
+        this.planform.palnList.push({ value: "" });
+      } else {
+        this.$message.error("已添加所有课时规划");
+      }
+    },
+    deletePlan(index) {
+      console.log(index);
+    },
+    submit() {
+      this.$refs.planform.validate(async (flag) => {
+        if (flag) {
+          if (this.isAdd) {
+            // 新增计划
+            let plans = this.planform.palnList.map((item) => {
+              return item.value;
+            });
+            try {
+              const res = await addMusicGroupTrainPlan({
+                ...this.form,
+                plans: plans,
+              });
+              this.$emit("close");
+            } catch (e) {
+              console.log(e);
+            }
+          } else {
+            // 修改
+            // activeItem
+            let plan = this.planform.palnList[0].value;
+            let planId = this.activeItem.plan.id;
+            try {
+              const res = await resetMusicGroupTrainPlan({ plan, planId });
+              this.$emit("close");
+            } catch (e) {
+              console.log(e);
+            }
+          }
+        }
+      });
+    },
+  },
 };
 </script>
 <style lang="scss" scoped="scoped">
+.subTitle {
+  margin-bottom: 30px;
+  color: red;
+}
+.iconStyle {
+  color: #999;
+  line-height: 75px;
+}
+.marginLeft10 {
+  margin-left: 10px;
+}
 </style>

src/views/resetTeaming/components/archicesComponents/trainPlan.vue

@@ -29,7 +29,7 @@
     >
       <el-form-item prop="year" label="年份">
         <el-date-picker
-           style="width: 180px!important"
+          style="width: 180px !important"
           v-model="searchForm.year"
           type="year"
           value-format="yyyy"
@@ -79,9 +79,9 @@
           :disabled="
             !searchForm.term || !searchForm.year || !searchForm.classGroupId
           "
-           style="width: 180px !important"
+          style="width: 180px !important"
           class="multiple"
-          v-model.trim="searchForm.courseType"
+          v-model.trim="searchForm.courseScheduleType"
           filterable
           placeholder="课程类型"
         >
@@ -93,41 +93,75 @@
           ></el-option>
         </el-select>
       </el-form-item>
-
     </save-form>
     <div class="timerWrap">
       <div class="timerList">
         <el-timeline>
           <!--   timestamp="2018/4/12"  :timestamp="item.timestamp" -->
           <!-- {timer:time,index:`第${index+1}次训练`,courseType:filterCourseType[val],timestamp:timestamp} -->
-          <el-timeline-item v-for="item in planList"
+          <el-timeline-item
+            v-for="item in planList"
             :key="item.timestamp"
             placement="top"
             :hide-timestamp="true"
           >
-            {{item.index}}
+            {{ item.index }}
             <div class="timeline">
-              <h4 class="time">{{item.timer}}</h4>
-              <p class="cuorseType">{{item.courseType}}</p>
-              <p class="concat">{{item.plan}}</p>
-              <el-button class="button" :disabled='!item.plan' type="text">修改</el-button>
+              <h4 class="time">{{ item.timer }}</h4>
+              <p class="cuorseType">{{ item.courseType }}</p>
+              <p class="concat"> <Tooltip :content="item.plan.value || '暂无规划'" /></p>
+              <el-button
+                class="button"
+                :disabled="!item.plan.value || !item.timer"
+                type="text"
+                @click="resetPlan(item)"
+                >修改</el-button
+              >
+              <el-button
+                class="button"
+                :disabled="Boolean(item.timer)"
+                type="text"
+                @click="detelePlan(item)"
+                >删除</el-button
+              >
             </div>
           </el-timeline-item>
         </el-timeline>
       </div>
     </div>
-          <el-dialog :title="planTitle" :visible.sync="planVisible" width="1100px" v-if="planVisible">
-            <addplan :form="{...searchForm}" :courseTypeList='courseTypeList' :classList="classList"/>
-        </el-dialog>
+    <el-dialog
+      :title="planTitle"
+      :visible.sync="planVisible"
+      width="1100px"
+      v-if="planVisible"
+    >
+      <addplan
+        ref="addPlan"
+        :form="searchForm"
+        :planList="planList"
+        :currentIndex="currentIndex"
+        :maxPlansNum="maxPlansNum"
+        :courseTypeList="courseTypeList"
+        :classList="classList"
+        :isAdd="isAdd"
+        :activeItem="activeItem"
+        @close="close"
+      />
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="planVisible = false">取 消</el-button>
+        <el-button type="primary" @click="submitPlan">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <script>
 import { getMusicGroupAllClass } from "@/api/buildTeam";
-import { getCourseType, getPlanCourseNum,getMusicGroupTrainPlan } from "./api";
+import { getCourseType, getPlanCourseNum, getMusicGroupTrainPlan } from "./api";
 import { filterCourseType } from "@/constant/index";
-import addplan from './modals/addPlan'
+import addplan from "./modals/addPlan";
+import Tooltip from '@/components/Tooltip/index'
 export default {
-  components:{addplan},
+  components: { addplan ,Tooltip},
   data() {
     return {
       searchForm: {
@@ -136,13 +170,18 @@ export default {
         term: "",
         courseScheduleType: "",
         musicGroupId: "",
-        courseType: "",
       },
       classList: [],
       courseTypeList: [],
-      planList:[],
-      planTitle:'',
-      planVisible:false
+      planList: [],
+      planTitle: "",
+      planVisible: false,
+      currentIndex: 0,
+      addIndex:0,
+      resetIndex:0,
+      maxPlansNum: 0,
+      isAdd: false,
+      activeItem:null
     };
   },
   created() {
@@ -177,7 +216,7 @@ export default {
     },
     async getCourseList(obj) {
       try {
-        this.searchForm.courseType = "";
+        this.searchForm.courseScheduleType = "";
         const res = await getCourseType(obj);
         if (!res.data || res.data.length <= 0) {
           this.$message.error("当前学期暂无课程类型");
@@ -191,7 +230,7 @@ export default {
               });
             }
           });
-          this.searchForm.courseType = this.courseTypeList[0].value;
+          this.searchForm.courseScheduleType = this.courseTypeList[0].value;
         }
       } catch (e) {
         console.log(e);
@@ -209,7 +248,7 @@ export default {
           this.getCourseList(obj);
         }
       } else {
-        this.searchForm.courseType = "";
+        this.searchForm.courseScheduleType = "";
       }
     },
     changeTerm(val) {
@@ -224,12 +263,124 @@ export default {
           this.getCourseList(obj);
         }
       } else {
-        this.searchForm.courseType = "";
+        this.searchForm.courseScheduleType = "";
+      }
+    },
+    addPlan() {
+      if (this.maxPlansNum > 0) {
+        this.planTitle = "新增训练规划";
+        this.isAdd = true;
+        this.activeItem = null;
+        this.planVisible = true;
+        this.currentIndex = this.addIndex;
+      } else {
+        this.$message.error("已添加所有课时规划");
+      }
+    },
+    submitPlan() {
+      this.$refs.addPlan.submit();
+    },
+    close() {
+      this.planVisible = false;
+      let obj = {
+        classGroupId: this.searchForm.classGroupId,
+        musicGroupId: this.teamid,
+        term: this.searchForm.term,
+        year: this.searchForm.year,
+        courseScheduleType: this.searchForm.courseScheduleType,
+      };
+      console.log(obj);
+      this.getList(obj);
+    },
+    async getList(obj) {
+      try {
+        const res2 = await getMusicGroupTrainPlan(obj);
+        let dayjs = this.$helpers.dayjs;
+        let timestamp;
+        // 判断 是规划多 还是课多
+        let classDates = res2.data.classDates;
+        let musicGroupTrainPlans = res2.data.musicGroupTrainPlans;
+        if (classDates.length < 1) {
+          this.$message.error("当前学期该班级暂无此类型课程");
+          return;
+        }
+        if (classDates.length >= musicGroupTrainPlans.length) {
+          this.planList = res2.data.classDates.map((time, index) => {
+            let dayStr = time.substring(0, 19);
+            timestamp = dayjs(dayStr).valueOf();
+
+            return {
+              num:index + 1,
+              timer: time,
+              index: `第${index + 1}次训练`,
+              courseType: filterCourseType[this.searchForm.courseScheduleType],
+              timestamp: timestamp,
+              plan: null,
+            };
+          });
+          this.addIndex = musicGroupTrainPlans.length + 1;
+          this.maxPlansNum = classDates.length - musicGroupTrainPlans.length;
+          this.planList.forEach((item, index) => {
+            item.plan = {
+              id: res2.data.musicGroupTrainPlans[index]?.id,
+              value: res2.data.musicGroupTrainPlans[index]?.plan,
+            };
+          });
+        } else {
+          // 规划多 课少
+          this.planList = res2.data.musicGroupTrainPlans.map((item, index) => {
+            return {
+              num:index + 1,
+              timer: null,
+              index: `第${index + 1}次训练`,
+              courseType: filterCourseType[this.searchForm.courseScheduleType],
+              timestamp: null,
+              plan: { id: item.id, value: item.plan },
+            };
+          });
+
+          this.planList.forEach((item, index) => {
+            let time = res2.data?.classDates[index];
+            let timestamp;
+            if (time) {
+              let dayStr = time.substring(0, 19);
+              timestamp = dayjs(dayStr).valueOf();
+            }
+
+            item.timer = res2.data?.classDates[index];
+            item.timestamp = timestamp;
+          });
+        }
+      } catch (e) {
+        console.log(e);
       }
     },
-    addPlan(){
-      this.planTitle = '新增训练规划'
-      this.planVisible = true
+    // 删除尚未接完
+    detelePlan(item) {
+      this.$confirm("确定删除该规划?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          orderDelete({ orderId: row.id }).then((res) => {
+            if (res.code === 200) {
+              this.$message.success("删除成功");
+              this.getList();
+              // this.routeOrderStatus = false;
+            }
+          });
+        })
+        .catch();
+    },
+    // 修改
+    resetPlan(item){
+        this.planTitle = "修改训练规划";
+        this.isAdd = false;
+        this.activeItem = item;
+        this.currentIndex = item.num;
+        this.planVisible = true;
+
     }
   },
   watch: {
@@ -245,10 +396,10 @@ export default {
           this.getCourseList(obj);
         }
       } else {
-        this.searchForm.courseType = "";
+        this.searchForm.courseScheduleType = "";
       }
     },
-    "searchForm.courseType": {
+    "searchForm.courseScheduleType": {
       immediate: true,
       async handler(val) {
         if (
@@ -259,33 +410,14 @@ export default {
           this.searchForm.classGroupId
         ) {
           // 请求列表接口
-
-          try {
-            // const res = await getPlanCourseNum({
-            //   classGroupId: this.searchForm.classGroupId,
-            //   musicGroupId: this.teamid,
-            //   term: this.searchForm.term,
-            //   year: this.searchForm.year,
-            //   courseScheduleType:val
-            // });
-            const res2 = await getMusicGroupTrainPlan({
-              classGroupId: this.searchForm.classGroupId,
-              musicGroupId: this.teamid,
-              term: this.searchForm.term,
-              year: this.searchForm.year,
-              courseScheduleType:val
-            })
-            let dayjs = this.$helpers.dayjs
-              let timestamp;
-            this.planList = res2.data.classDates.map((time,index)=>{
-                  let dayStr = time.substring(0, 19)
-                  timestamp = dayjs(dayStr).valueOf()
-              return {timer:time,index:`第${index+1}次训练`,courseType:filterCourseType[val],timestamp:timestamp}
-            });
-
-          } catch (e) {
-            console.log(e);
-          }
+          let obj = {
+            classGroupId: this.searchForm.classGroupId,
+            musicGroupId: this.teamid,
+            term: this.searchForm.term,
+            year: this.searchForm.year,
+            courseScheduleType: val,
+          };
+          this.getList(obj);
         }
       },
     },
@@ -340,7 +472,7 @@ export default {
         white-space: nowrap;
       }
       .button {
-        width: 100px;
+        width: 40px;
       }
     }
   }

vue.config.js

@@ -54,7 +54,7 @@ module.exports = {
     //   warnings: false,
     //   errors: true
     // },
-    https: true,
+    https: false,
     proxy: {
       // change xxx-api/login => mock/login
       // detail: https://cli.vuejs.org/config/#devserver-proxy