修改与查看

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

@@ -21,33 +21,39 @@
           </div>
           <div v-show="isShowCart" class="curt-position">
             <ShoppingCart @close="toggleCart"></ShoppingCart>
-          </div> 
+          </div>
         </div>
       </li>
     </ul>
     <div class="list-wrapper">
       <ul class="list">
-        <li 
-          class="course" 
-          v-for="(item, index) in courseList.list" 
+        <li
+          class="course"
+          v-for="(item, index) in courseList.list"
           :key="index"
           @click="toggleChecked(item)"
         >
           <div class="img">
-            <img src="../../../assets/custom/test.png" alt />
+            <img :src="item.courseImageUrl" 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><span v-if="true" class="exam-num">5场考试</span>
+              <span>{{item.docName | shortName(5)}}</span>
+              <span class="section-num">{{item.chapterSum}}章{{item.lectureNum}}节 {{item.totalTime}}分</span>
+              <span v-if="item.testCount" class="exam-num">{{item.testCount}}场考试</span>
             </div>
             <div class="cost">
               <span class="no">免费</span>
               <span class="num">{{item.joinNum}}人已学</span>
             </div>
           </div>
-          <img v-show="item.checked" class="course-selected" src="../../../assets/custom/icon/icon-selected.png" alt />
+          <img
+            v-show="item.checked"
+            class="course-selected"
+            src="../../../assets/custom/icon/icon-selected.png"
+          />
         </li>
       </ul>
     </div>
@@ -62,82 +68,80 @@
         :total="courseList.totalRows"
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
-      ></el-pagination>      
+      ></el-pagination>
     </div>
     <!-- 弹框提示 -->
     <dialog-componet :dialogObj="dialogObj"></dialog-componet>
   </div>
 </template>
 <script>
-import ShoppingCart from '@/components/education/custom/shopping-cart'
+import ShoppingCart from "@/components/education/custom/shopping-cart";
 import dialog from "@/components/education/custom/dialog";
-import { mapGetters, mapActions } from 'vuex'
+import { mapGetters, mapActions } from "vuex";
 export default {
   data() {
     return {
       isRise: true,
       isShowCart: false,
       dialogObj: {
-        title: '课程数量已达上限',
+        title: "课程数量已达上限",
         visible: false,
-        message: '单个项目最多只能选择30个课程',
-        // tip: '单个项目最多只能选择30个课程',
-        hideMsg: '我知道了'
+        message: "单个项目最多只能选择30个课程",
+        tip: "",
+        hideMsg: "我知道了"
       }
     };
   },
   computed: {
-    ...mapGetters(['cartList', 'courseList', 'searchParam'])
+    ...mapGetters(["cartList", "courseList", "searchParam"])
   },
   components: {
     ShoppingCart,
-    dialogComponet: dialog,
+    dialogComponet: dialog
   },
   methods: {
-    ...mapActions(['setCartList', 'setSeachParam']),
+    ...mapActions(["setCartList", "setSearchParam"]),
     toggleOrder() {
       this.isRise = !this.isRise;
       let dir = this.isRise ? 1 : 2;
       this.searchParam.dir = dir;
-      this.setSeachParam(this.searchParam);
+      this.setSearchParam(this.searchParam);
     },
     toggleCart() {
       this.isShowCart = !this.isShowCart;
     },
 
-
     // 选择当前分页个数
     handleSizeChange(val) {
       this.searchParam.pageSize = val;
-      this.setSeachParam(this.searchParam);
+      this.setSearchParam(this.searchParam);
     },
 
     // 选择当前分页
     handleCurrentChange(val) {
       this.searchParam.pageNo = val;
-      this.setSeachParam(this.searchParam);
+      this.setSearchParam(this.searchParam);
     },
 
     // 选择课程（并要处理过滤，删除等）
     toggleChecked(item) {
       item.checked = !item.checked;
-      if(item.checked) {
-        if(this.cartList.length >= 30) {
+      if (item.checked) {
+        if (this.cartList.length >= 30) {
           item.checked = !item.checked;
           this.dialogObj.visible = true;
           return;
         }
         this.cartList.push(item);
       } else {
-        let delItemIndex = this.cartList.findIndex( course => {
+        let delItemIndex = this.cartList.findIndex(course => {
           return course.courseId == item.courseId;
-        })
+        });
         this.cartList.splice(delItemIndex, 1);
       }
       this.setCartList(this.cartList);
       this.$forceUpdate();
-    },
-
+    }
   }
 };
 </script>
@@ -193,6 +197,9 @@ export default {
             right: -12px;
             display: inline-block;
             span {
+              display: inline-block;
+              min-width: 18px;
+              text-align: center;
               font-size: 12px;
               padding: 2px;
               background: red;
@@ -209,7 +216,6 @@ export default {
           z-index: 100;
         }
       }
-
     }
   }
   .list-wrapper {
@@ -218,14 +224,12 @@ export default {
     .list {
       display: flex;
       flex-direction: row;
-      // justify-content: space-between;
       justify-content: flex-start;
       flex-wrap: wrap;
       padding-bottom: 30px;
-      // min-height: 1200px;
-      // max-height: 1200px;
       overflow-y: auto;
       .course {
+        user-select: none;
         cursor: pointer;
         position: relative;
         top: 0;
@@ -284,8 +288,9 @@ export default {
             font-size: 14px;
             font-weight: 400;
             color: #999999;
-            .section-num::before, .exam-num::before {
-              content: '';
+            .section-num::before,
+            .exam-num::before {
+              content: "";
               position: relative;
               top: 2.5px;
               left: 0;
@@ -329,6 +334,5 @@ export default {
     margin: 10px 0;
     margin-right: 230px;
   }
-
 }
 </style>
\ No newline at end of file

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

@@ -5,13 +5,9 @@
       <img @click="close" src="../../../assets/custom/icon/close.png" alt />
     </div>
     <ul class="cart-list">
-      <li 
-        class="cart-course" 
-        v-for="item in cartList" 
-        :key="item.courseId"
-      >
+      <li class="cart-course" v-for="item in cartList" :key="item.courseId">
         <div class="img">
-          <img src="../../../assets/custom/test.png" alt />
+          <img :src="item.courseImageUrl" alt />
           <span class="level">{{item.typeStr}}</span>
         </div>
         <div class="detail">
@@ -32,7 +28,7 @@ export default {
     return {};
   },
   computed: {
-    ...mapGetters(["cartList", 'courseList'])
+    ...mapGetters(["cartList", "courseList"])
   },
   methods: {
     close() {
@@ -40,15 +36,15 @@ export default {
     },
     deleteCart(item) {
       // 先删除够物车中的课程
-      let delItemIndex = this.cartList.findIndex( course => {
+      let delItemIndex = this.cartList.findIndex(course => {
         return course.courseId == item.courseId;
-      })      
+      });
       this.cartList.splice(delItemIndex, 1);
       // 再查找当前课程列表中是否有，如果有，则将其置为不选中状态
-      let courseIndex = this.courseList.list.findIndex( course => {
+      let courseIndex = this.courseList.list.findIndex(course => {
         return course.courseId == item.courseId;
-      })
-      if(courseIndex >= 0) {
+      });
+      if (courseIndex >= 0) {
         this.courseList.list[courseIndex].checked = false;
       }
     }
@@ -80,23 +76,17 @@ export default {
       height: 15px;
     }
   }
-  // .list {
-  //   padding: 15px;
-  //   height: 480px;
-  //   overflow: auto;
-  // }
   .cart-list {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    // flex-wrap: wrap;
     height: 490px;
     overflow: auto;
     .cart-course {
+      user-select: none;
       position: relative;
       display: flex;
       flex-direction: row;
-      // height: 83px;
       width: 410px;
       margin: 15px;
       align-items: center;
@@ -115,11 +105,11 @@ export default {
         position: relative;
         top: 0;
         left: 0;
-        width: 120;
+        width: 120px;
         height: 68px;
         margin-right: 15px;
         img {
-          width: 120;
+          width: 120px;
           height: 68px;
           border-radius: 4px;
         }

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

@@ -5,18 +5,36 @@
       <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 v-if="isPreview == 1" class="cart-list">
+      <div class="cart-course is-preview"  v-for="(item, index) in cartList" :key="index">
         <div class="img">
-          <img src="../../../assets/custom/test.png" alt />
+          <img :src="item.courseImageUrl" alt />
+          <span class="level">{{item.typeStr}}</span>
+        </div>
+        <div class="detail">
+          <span class="title">{{item.courseName | shortName}}</span>
+          <div class="chapter">
+            <span>{{item.docName | shortName(5)}}</span>
+            <span class="section-num">{{item.chapterSum}}章{{item.lectureNum}}节 {{item.totalTime}}分</span><span v-if="true" class="exam-num">{{item.testCount}}场考试</span>
+          </div>
+        </div>
+        <div class="handler">
+          <img src="../../../assets/custom/icon/icon-handle.png" alt />
+        </div>
+      </div>
+    </div>
+
+    <draggable v-if="isPreview != 1" class="cart-list" v-model="cartList">
+      <div class="cart-course" v-for="(item, index) in cartList" :key="index">
+        <div class="img">
+          <img :src="item.courseImageUrl" 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>
+            <span class="section-num">{{item.chapterSum}}章{{item.lectureNum}}节 {{item.totalTime}}分</span><span v-if="item.testCount" class="exam-num">{{item.testCount}}场考试</span>
           </div>
         </div>
         <div class="handler">
@@ -27,21 +45,20 @@
   </div>
 </template>
 <script>
-import { mapGetters } from "vuex";
 import draggable from "vuedraggable";
 export default {
   data() {
     return {};
   },
+  props: {
+    isPreview: String
+  },
   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);
       }
     }
@@ -55,12 +72,25 @@ export default {
 </script>
 <style lang="less" scoped>
 .sorted-cart-wrapper {
+  position: relative;
+  top: 0;
+  left: 0;
+  z-index: 1;
   font-family: PingFang SC !important;
-  width: 440px;
+  width: 480px;
   height: 790px;
   background: #fff;
   box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
   border-radius: 4px;
+  .mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 440px;
+    height: 790px;
+    // background: ;
+  }
   .cart-header {
     display: flex;
     flex-direction: column;
@@ -95,17 +125,20 @@ export default {
       position: relative;
       display: flex;
       flex-direction: row;
-      width: 410px;
+      // width: 410px;
       margin: 15px;
       align-items: center;
       border-radius: 4px;
+      &.is-preview {
+        cursor: default;
+      }
       &::after {
         position: absolute;
         left: 0;
         bottom: -15px;
         z-index: 1;
         content: "";
-        width: 410px;
+        width: 100%;
         height: 1px;
         background: #e4e7ed;
       }
@@ -113,11 +146,11 @@ export default {
         position: relative;
         top: 0;
         left: 0;
-        width: 120;
+        width: 120px;
         height: 68px;
         margin-right: 15px;
         img {
-          width: 120;
+          width: 120px;
           height: 68px;
           border-radius: 4px;
         }
@@ -153,7 +186,7 @@ export default {
         }
         .chapter {
           position: absolute;
-          bottom: -16px;
+          bottom: -15px;
           left: 0;
           font-size: 14px;
           font-weight: 400;

src/store/custom/customStore.js

@@ -32,7 +32,7 @@ const customStore = {
     },
   },
   actions: {
-    setSeachParam({ commit }, searchParam) {
+    setSearchParam({ commit }, searchParam) {
       commit('SET_SEARCH_PARAM', searchParam);
     },
     setCartList({ commit }, cartList) {

src/views/education/item-manager.vue

@@ -10,18 +10,6 @@
               <el-input v-model="formInline.projectName" size="small" placeholder="请输入项目名称"></el-input>
             </el-form-item>
           </el-col>
-          <!-- <el-col :span="8">
-            <el-form-item label="项目时间：">
-              <el-date-picker
-                v-model="formInline.duringTime"
-                size="small"
-                type="daterange"
-                start-placeholder="请选择开始时间"
-                end-placeholder="请选择结束时间"
-                value-format="yyyy-MM-dd HH:mm:ss"
-              ></el-date-picker>
-            </el-form-item>
-          </el-col>-->
           <el-col :span="12">
             <el-form-item label="项目时间：">
               <el-date-picker
@@ -43,19 +31,6 @@
               ></el-date-picker>
             </el-form-item>
           </el-col>
-          <!-- <el-col :span="4">
-            <el-form-item label="~">
-              <el-date-picker
-                v-model="formInline.projectEndtime"
-                size="small"
-                type="datetime"
-                placeholder="请选择结束时间"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                :picker-options="pickerOptions1"
-                default-time="23:59:59"
-              ></el-date-picker>
-            </el-form-item>
-          </el-col>-->
           <el-col :span="4" style="padding:0;text-align:right;padding-right:15px;">
             <el-button type="primary" size="small" @click="searchList">查询</el-button>
             <el-button type="default" size="small" @click="resetForm" style="margin-left:0;">重置</el-button>
@@ -96,7 +71,7 @@
             <span
               @click="previewTemplate(scope.row, 1)"
               style="color:rgb(2, 130, 132);cursor:pointer;"
-              v-if="scope.row.projectType == 3
+              v-if="(scope.row.projectType == 3 || scope.row.projectType == 4)
               && (scope.row.level == 'L1' || scope.row.level == 'L2') "
             >{{scope.row.projectName}}</span>
             <span v-else>{{scope.row.projectName}}</span>
@@ -106,13 +81,6 @@
         <el-table-column prop="projectLeader" label="项目负责人" align="center"></el-table-column>
         <el-table-column prop="projectTypeValue" label="项目类型" align="center"></el-table-column>
         <el-table-column prop="createdTime" label="创建时间" width="100" align="center"></el-table-column>
-        <!-- <el-table-column
-          prop="projectIntro"
-          label="项目简介"
-          align="center"
-          min-width="100"
-          show-overflow-tooltip
-        ></el-table-column>-->
         <el-table-column prop="projectBegintime" label="项目开始时间" min-width="90" align="center"></el-table-column>
         <el-table-column prop="projectEndtime" label="项目结束时间" min-width="90" align="center"></el-table-column>
         <el-table-column prop="projectStatus" label="状态" align="center">
@@ -518,9 +486,15 @@ export default {
     },
 
     previewTemplate(row, isPreview) {
-      this.$router.push(
-        `template-open?projectId=${row.id}&projectType=3&isPreview=${isPreview}`
-      );
+      if (row.projectType == 3) {
+        this.$router.push(
+          `template-open?projectId=${row.id}&projectType=3&isPreview=${isPreview}`
+        );
+      } else if (row.projectType == 4) {
+        this.$router.push(
+          `edit-custom?projectId=${row.id}&projectType=3&isPreview=${isPreview}`
+        );
+      }
     },
 
     // handleCreateProject(isPreview) {
@@ -735,7 +709,6 @@ export default {
               this.formInline.pageNo
           );
         } else if (row.projectType === 4) {
-          debugger
           this.$router.push(
             "edit-custom?projectType=4&projectId=" +
               projectId +