完整添加项目

src/components/education/custom/course-list.vue

@@ -134,6 +134,8 @@ export default {
         })
         this.cartList.splice(delItemIndex, 1);
       }
+      this.setCartList(this.cartList);
+      this.$forceUpdate();
     },
 
   }

src/components/education/custom/sorted-cart.vue

+<template>
+  <div class="sorted-cart-wrapper">
+    <div class="cart-header">
+      <span class="title">已选项目课程（共{{this.cartList.length}}节）</span>
+      <span class="sub">可上下拖拽课程行，调整课程在列表页的展示顺序</span>
+    </div>
+
+    <!-- <draggable v-model="myArray" class="cart-list"> -->
+    <draggable class="cart-list" v-model="cartList">
+      <div class="cart-course" v-for="item in cartList" :key="item.courseId">
+        <div class="img">
+          <img src="../../../assets/custom/test.png" alt />
+          <span class="level">{{item.typeStr}}</span>
+        </div>
+        <div class="detail">
+          <span class="title">{{item.courseName | shortName}}</span>
+          <div class="chapter">
+            <span>{{item.docName}}</span>
+            <span class="section-num">{{item.chapterSum}}章{{item.lectureNum}}节 {{item.totalTime}}分</span>
+          </div>
+        </div>
+        <div class="handler">
+          <img src="../../../assets/custom/icon/icon-handle.png" alt />
+        </div>
+      </div>
+    </draggable>
+  </div>
+</template>
+<script>
+import { mapGetters } from "vuex";
+import draggable from "vuedraggable";
+export default {
+  data() {
+    return {};
+  },
+  computed: {
+    // ...mapGetters(["cartList"]),
+    cartList: {
+      get() {
+        console.log('get()');
+        return this.$store.state.customStore.cartList;
+      },
+      set(value) {
+        console.log('set(value)', value);
+        this.$store.dispatch("setCartList", value);
+      }
+    }
+  },
+
+  components: {
+    draggable
+  },
+  methods: {}
+};
+</script>
+<style lang="less" scoped>
+.sorted-cart-wrapper {
+  font-family: PingFang SC !important;
+  width: 440px;
+  height: 790px;
+  background: #fff;
+  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  .cart-header {
+    display: flex;
+    flex-direction: column;
+    height: 70px;
+    padding: 0 15px;
+    background: #f9f9f9;
+    .title {
+      padding: 15px 0 28px 0;
+      height: 18px;
+      line-height: 18px;
+      font-size: 18px;
+      font-weight: 700;
+      color: #000000;
+    }
+    .sub {
+      height: 14px;
+      line-height: 14px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #999999;
+    }
+  }
+  .cart-list {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    height: 710px;
+    overflow: auto;
+    .cart-course {
+      cursor: pointer;
+      user-select: none;
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      width: 410px;
+      margin: 15px;
+      align-items: center;
+      border-radius: 4px;
+      &::after {
+        position: absolute;
+        left: 0;
+        bottom: -15px;
+        z-index: 1;
+        content: "";
+        width: 410px;
+        height: 1px;
+        background: #e4e7ed;
+      }
+      .img {
+        position: relative;
+        top: 0;
+        left: 0;
+        width: 120;
+        height: 68px;
+        margin-right: 15px;
+        img {
+          width: 120;
+          height: 68px;
+          border-radius: 4px;
+        }
+        .level {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 44px;
+          height: 22px;
+          line-height: 22px;
+          text-align: center;
+          font-size: 14px;
+          font-weight: 500;
+          color: #fff;
+          background: rgba(0, 0, 0, 0.5);
+          border-radius: 4px 0px 4px 0px;
+        }
+      }
+      .detail {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        height: 60px;
+        .title {
+          position: relative;
+          top: -5px;
+          left: 0;
+          font-size: 16px;
+          line-height: 20px;
+          font-weight: 600;
+          color: #373839;
+        }
+        .chapter {
+          position: absolute;
+          bottom: -16px;
+          left: 0;
+          font-size: 14px;
+          font-weight: 400;
+          color: #999999;
+          .section-num::before,
+          .exam-num::before {
+            content: "";
+            position: relative;
+            top: 2.5px;
+            left: 0;
+            display: inline-block;
+            height: 14px;
+            line-height: 14px;
+            margin: 0 10px;
+            width: 1px;
+            background: #999999;
+          }
+        }
+      }
+      .handler {
+        width: 35px;
+        img {
+          cursor: pointer;
+          width: 20px;
+          height: 20px;
+          float: right;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

src/utils/fetch.js

@@ -54,7 +54,7 @@ service.interceptors.request.use(config => {
     }
     if( process.env.BUILD_ENV == "development" ){  // 本地开发环境
       // console.log('环境变量>>>> ', process.env.BUILD_ENV);
-      config.headers['token'] = '073861ABE10245C78D705B90A76939DC';
+      config.headers['token'] = '19CD6690D41D44148F53BECB7CA86B6F';
       // config.headers['token'] = localStorage.getItem('storageToken')
     }else{
       config.headers['token'] = localStorage.getItem('storageToken')

src/views/education/edit-custom.vue

@@ -61,15 +61,6 @@
 
       <dialog-componet :dialogObj="dialogObj" @hide="hide"></dialog-componet>
       <dialog-componet :dialogObj="sendObj" @hide="hidefn"  @confirm="confirmFn"></dialog-componet>
-      
-      <!-- <draggable v-model="myArray">
-          <transition-group>
-              <div v-for="element in myArray" :key="element.id">
-                  {{element.name}}
-              </div>
-          </transition-group>
-      </draggable>   -->
-  
   </div>
 </template>
 
@@ -83,7 +74,6 @@ import setOrganization from "@/components/education/template/setOrganization";
 import SelectCourseComp from "@/components/education/custom/select-course-comp";
 import dialog from "@/components/education/template/dialog";
 import { openLoading, closeLoading, resizeHeight } from "@/utils/utils";
-import draggable from 'vuedraggable'
 import { mapGetters, mapActions } from 'vuex'
 
 let vm = null;
@@ -148,7 +138,7 @@ export default {
         },
         status_21: {
           title: '该项目创建数量已上限',
-          message: '本年度免费创建数已达4次,不能继续创建该项目',
+          message: '本年度免费创建数已达20次,不能继续创建该项目',
           hideMsg: '确定'
         }
       },
@@ -163,10 +153,11 @@ export default {
       projectStatus: 1,   //1.草稿 2.未上架 3.审核中/待审核 4.已上架 5.已下架 6.已拒绝/未上架
       status4Flag: 0,     //0表示没有上过架，1表示上过架
       isPreview: 0,       // 1表示是查看信息
+      maxLimitCreatedCustomProjectCountInYearz: 20, // 同一个用户每年能够创建的项目数
     }
   },
   computed: {
-    ...mapGetters(['searchParam'])
+    ...mapGetters(['searchParam', 'cartList'])
   },
   watch: {
     searchParam: {
@@ -174,6 +165,9 @@ export default {
         this.getCourseList(val);
       },
       deep: true
+    },
+    cartList(val) {
+      this.canNext = val.length > 0;
     }
   },
   components: {
@@ -184,7 +178,6 @@ export default {
     setOrganization,
     dialogComponet:dialog,
     SelectCourseComp,
-    draggable
   },
   created() {
     vm = this;
@@ -199,7 +192,7 @@ export default {
   methods: {
     ...mapActions(['setCourseList', 'setAllLabelList', 'setSubLabelList']),
     getLabelList() {
-      vm.GET("/contents/diseases/labelList", {}).then(res => {
+      vm.GET("contents/diseases/labelList", {}).then(res => {
         if (res.code == "000000") {
           // 先将所有的标签添加checked字段
           let labelList = res.data;
@@ -235,15 +228,7 @@ export default {
 
     // （根据条件）查询课程
     getCourseList(searchParam) {
-      // let param = {
-      //   orderBy: 2,
-      //   grade: 0,
-      //   pageNo: 1,
-      //   pageSize: 10,
-      //   orderBy: 2,
-      //   labelIdList: [441, 442]
-      // }
-      vm.GET("/contents/diseases/courseListForPortal", searchParam).then(res => {
+      vm.GET("contents/diseases/courseListForPortal", searchParam).then(res => {
         if (res.code == "000000") {
           let courseList = res.data;
           courseList.list.forEach( (item) => {
@@ -274,7 +259,8 @@ export default {
     // 按钮点击下一步
     nextStep() {
       if (vm.active == 0) {
-        vm.checkSelectTemplate()
+        vm.checkSelectCustomCourse()
+        // vm.checkSelectTemplate()
         return;
       }
       if (vm.active == 1) {
@@ -369,6 +355,7 @@ export default {
             if (vm.$route.query.pageNum) {
               query = { pageNum: vm.$route.query.pageNum };
             }
+            console.log('vm.$router.push')
             vm.$router.push({ path: "edit-custom", query: query });
           } else {
             vm.$message({
@@ -396,6 +383,32 @@ export default {
       vm.openTemplateId = id;
     },
     
+    //选中自定义课程后点击下一步时检测(机构和进行中的项目)
+    checkSelectCustomCourse() {
+      openLoading(vm);
+      vm.GET(`portal/portalCustom/checkBeforeCreateCustomProject`)
+        .then(res => {
+          closeLoading(vm);
+          if (res.code == "000000") {
+              if (res.data.status == 0) {
+                vm.maxLimitCreatedCustomProjectCountInYear = res.data.maxLimitCreatedCustomProjectCountInYear;
+                vm.active = 1;
+                return;
+              } else {
+                vm.dialogObj = Object.assign(vm.dialogObj, vm.statusObj[`status_${res.data.status}`]);
+                vm.dialogObj.visible = true;
+                return;
+              }
+          } else {
+            vm.$message.info(res.message);
+          }
+        })
+        .catch((err) => {
+          closeLoading(vm);
+          vm.$message.warning('请稍后重试');
+        });
+    },
+
     //选中模板后点击下一步时检测(机构和进行中的项目)
     checkSelectTemplate() {
       openLoading(vm);