案例添加课程分类

src/components/TypeNav.vue

@@ -1,145 +0,0 @@
-<template>
-  <div class="xcontent2-minor" style="margin-right:36px;">
-    <div class="course-title-style">
-      <div class="imgTilte">
-        <div>{{ title }}</div>
-        <div>COURSE</div>
-      </div>
-    </div>
-    <div class="course-list">
-      <div class="course-one" v-for="one in treeList" :key="one.id" @click.stop="handleOptionClick(one, 1, treeList)">
-        <div class="course-one-content">{{ one.name }}</div>
-        <div class="course-two" v-for="(twoList, twoIndex) in one.children" :key="twoList.id"
-          @click.stop="handleOptionClick(twoList, 2, one.children)"
-          :class="{ courseTwoActive: twoList.id == twoId || twoList.checked }" @mouseleave.stop="leaveIndex"
-          @mouseenter.stop="changeIndex(twoList.id)">
-          <!-- 三级分类 -->
-          <el-popover class="popover" popper-class='coursePopperClass' placement="right-start" width="536"
-            :disabled="!twoList.children.length" :open-delay="0" :close-delay="0" trigger="hover" :visible-arrow="false"
-            @hide="leaveIndex" @show="changeIndex(twoList.id)" transition="none">
-            <div class="course-two-content" slot="reference">{{ twoList.name }}</div>
-            <!-- 内容 -->
-            <div class="course-three-box">
-              <div class="course-three-box-title">
-                {{ twoList.name }}
-              </div>
-              <div style="padding: 0 40px;display: flex;flex-wrap: wrap;">
-                <div :class="threeList.checked ? 'threeActive' : ''" v-for="threeList in twoList.children"
-                  :key="threeList.id" @click.stop="handleOptionClick(threeList, 3, twoList.children)"
-                  class="course-three">
-                  <span>{{ threeList.name }}</span>
-                </div>
-              </div>
-            </div>
-          </el-popover>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'TypeNav',
-  props: {
-    title: {
-      type: String,
-      default: '课程分类'
-    },
-    treeList: {
-      type: Array,
-      default: () => []
-    },
-  },
-  data() {
-    return {
-      twoId: ''
-    }
-  },
-  methods: {
-    //三级分类
-    handleOptionClick(item, level, list) {
-      this.$emit('handleOptionClick', item)
-    },
-    // 移入
-    changeIndex(twoId) {
-      this.twoId = twoId
-    },
-    // 移除
-    leaveIndex() {
-      this.twoId = ''
-    }
-  }
-};
-</script>
-<style scoped lang="scss">
-.course-title-style {
-  position: relative;
-  height: 100px;
-  background-image: url('../../public/images/courseBg.png');
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  display: flex;
-  align-items: center;
-
-  .imgTilte {
-
-    & div:first-child {
-      padding-left: 40px;
-      font-size: 30px;
-      color: #FFFFFF;
-    }
-
-    & div:last-child {
-      padding-left: 40px;
-      font-size: 20px;
-      color: #FFFFFF;
-      opacity: .5;
-      font-family: ArialMT !important;
-    }
-
-  }
-}
-
-// 三级列表
-.course-list {
-  background-color: #fff;
-
-  .course-one {
-    position: relative;
-
-    .course-one-content {
-      cursor: pointer;
-      line-height: 38px;
-      height: 38px;
-      padding-left: 40px;
-      background: linear-gradient(270deg, #F0F7FF 0%, #DDEDFF 100%);
-    }
-
-    // 二级的高亮
-    .courseTwoActive {
-      color: #387DF7;
-      border-image: linear-gradient(90deg, rgba(47, 101, 236, 1), rgba(228, 236, 255, 1)) 1 1 !important;
-    }
-
-    .course-two {
-      position: relative;
-      border-bottom: 1px solid;
-      border-image: linear-gradient(333deg, rgba(243, 243, 243, 1), rgba(227, 227, 227, 1)) 1 1;
-
-      .course-two-content {
-        cursor: pointer;
-        height: 38px;
-        line-height: 38px;
-        font-size: 16px;
-        padding-left: 40px;
-      }
-    }
-
-    .popover {
-      background: linear-gradient(180deg, rgba(78, 166, 255, 0.2) 0%, rgba(78, 166, 255, 0) 100%);
-    }
-
-  }
-
-}
-</style>

src/views/portal/case/Index.vue

@@ -4,7 +4,44 @@
       <portal-header current="case" textColor="#fff" @emitInput="emitInput" @showClass="showClass"></portal-header>
     </div>
     <div class="xcontent2">
-      <TypeNav :treeList="treeList" @handleOptionClick="handleOptionClick"></TypeNav>
+      <div class="xcontent2-minor" style="margin-right:36px;">
+    <div class="course-title-style">
+      <div class="imgTilte">
+        <div>课程分类</div>
+        <div>COURSE</div>
+      </div>
+    </div>
+    <div class="course-list">
+      <div class="course-one" v-for="one in treeList" :key="one.id" @click.stop="handleOptionClick(one, 1, treeList)">
+        <div class="course-one-content">{{ one.name }}</div>
+        <div class="course-two" v-for="(twoList, twoIndex) in one.children" :key="twoList.id"
+          @click.stop="handleOptionClick(twoList, 2, one.children)"
+          :class="{ courseTwoActive: twoList.id == twoId || twoList.checked }" @mouseleave.stop="leaveIndex"
+          @mouseenter.stop="changeIndex(twoList.id)"
+          >
+          <!-- 三级分类 -->
+          <el-popover class="popover" popper-class='coursePopperClass' placement="right-start" width="536"
+            :disabled="!twoList.children.length" :open-delay="0" :close-delay="0" trigger="hover" :visible-arrow="false"
+            @hide="leaveIndex" @show="changeIndex(twoList.id)" transition="none">
+            <div class="course-two-content" slot="reference">{{ twoList.name }}</div>
+            <!-- 内容 -->
+            <div class="course-three-box">
+              <div class="course-three-box-title">
+                {{ twoList.name }}
+              </div>
+              <div style="padding: 0 40px;display: flex;flex-wrap: wrap;">
+                <div :class="threeList.checked ? 'threeActive' : ''" v-for="threeList in twoList.children"
+                  :key="threeList.id" @click.stop="handleOptionClick(threeList, 3, twoList.children)"
+                  class="course-three">
+                  <span>{{ threeList.name }}</span>
+                </div>
+              </div>
+            </div>
+          </el-popover>
+        </div>
+      </div>
+    </div>
+  </div>
       <div class="xcontent2-main" style="margin-right: 30px;">
         <div class="left-div">
           <div class="search-div">
@@ -346,7 +383,6 @@ import apiDict from "@/api/modules/dict.js";
 import apiType from "@/api/modules/type.js";
 import { cutFullName } from "@/utils/tools.js";
 import apiPlace from "@/api/phase2/place.js"
-import TypeNav from "../../../components/TypeNav.vue";
 export default {
   name: "index",
   components: {
@@ -355,11 +391,11 @@ export default {
     portalFloatTools,
     interactBar,
     timeShow,
-    author,
+    author
-    TypeNav
   },
   data() {
     return {
+      twoId:'',
       treeList:[],
       caseType:process.env.VUE_APP_CASE_TYPE,//类型
       caseYears:[],
@@ -413,6 +449,9 @@ export default {
         notInIds: [],//重复的id
         orderField: "id",
         orderAsc: false,//排序
+        sysType1:'',
+        sysType2:'',
+        sysType3:''
       },
       keyWord: "",
       anking: 2,
@@ -478,6 +517,29 @@ export default {
           list.push(item);
         }
       });
+      this.treeList.forEach(one => {
+        var twoChildChecked = false;//是否有下级
+        one.children && one.children.forEach(two => {
+          if (two.checked) {
+            twoChildChecked = true;
+          }
+          var threeChildChecked = false;
+          two.children  && two.children.forEach(three => {
+            if (three.checked) {
+              list.push(three);
+              threeChildChecked = true;
+            }
+          });
+          if (two.checked && !threeChildChecked) {
+            list.push(two);
+          }
+        });
+        if (one.checked && !twoChildChecked) {
+          list.push(one);
+        }
+      })
+      console.log(list,'计算属性');
+
       return list;
     },
     oneTagAll() {
@@ -644,32 +706,60 @@ export default {
   },
   methods: {
     handleOptionClick(treeItem){
-      console.log(treeItem);
       this.treeList.forEach(one => {
         one.checked = false;
         if (one.id == treeItem.id) {
           one.checked = true;
+          this.queryCondition.sysType2 = ''
+          this.queryCondition.sysType3 = ''
+          this.queryCondition.sysType1 = one.id
         }
-        one.children && one.children.forEach(two => {
+          one.children.forEach(two => {
           two.checked = false;
           if (two.id == treeItem.id) {
             two.checked = true
+            this.queryCondition.sysType1 = ''
+            this.queryCondition.sysType3 = ''
+            this.queryCondition.sysType2 = two.id
           }
-          two.children && two.children.forEach(three => {
+          two.children.forEach(three => {
             three.checked = false;
             if (three.id == treeItem.id) {
               three.checked = true
+              this.queryCondition.sysType1 = ''
+              this.queryCondition.sysType2 = ''
+              this.queryCondition.sysType3 = three.id
             }
           })
         })
       })
+      this.getCaseData()
+    },
+        // 移入
+    changeIndex(twoId) {
+      this.twoId = twoId
+    },
+    // 移除
+    leaveIndex() {
+      this.twoId = ''
     },
         // 加载分类
     async loadTypeData() {
       try {
         const { result, status } = await apiType.tree(1);
         if (status === 200) {
-          console.log(result,'三级');
+          result.forEach(one => {
+            one.checked = false;
+            if(!one.children) one.children = []
+            one.children && one.children.forEach(two => {
+              two.checked = false;
+              if(!two.children) two.children = []
+              two.children && two.children.forEach(three => {
+                three.checked = false;
+                if(!three.children) three.children = []
+              })
+            })
+          })
           this.treeList = result
         }
       } catch (error) {
@@ -1266,7 +1356,16 @@ export default {
     //   }
     // },
     tagsClose(tag, index) {
-      tag.fielclass = false;
+      // 课程分类
+      if(tag.hasOwnProperty('checked')){
+        tag.checked = false;
+        this.queryCondition.sysType1 =''
+        this.queryCondition.sysType2 =''
+        this.queryCondition.sysType3 =''
+      }else{
+        // 案例分类
+        tag.fielclass = false;
+      }
       if (tag.type == 0) {
         this.keyWord = '';
       }
@@ -1368,6 +1467,77 @@ export default {
 </script>
 
 <style scoped lang="scss">
+// 课程分类
+.course-title-style {
+  position: relative;
+  height: 100px;
+  background-image: url('../../../../public/images/courseBg.png');
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+
+  .imgTilte {
+
+    & div:first-child {
+      padding-left: 40px;
+      font-size: 30px;
+      color: #FFFFFF;
+    }
+
+    & div:last-child {
+      padding-left: 40px;
+      font-size: 20px;
+      color: #FFFFFF;
+      opacity: .5;
+      font-family: ArialMT !important;
+    }
+
+  }
+}
+
+// 三级列表
+.course-list {
+  background-color: #fff;
+
+  .course-one {
+    position: relative;
+
+    .course-one-content {
+      cursor: pointer;
+      line-height: 38px;
+      height: 38px;
+      padding-left: 40px;
+      background: linear-gradient(270deg, #F0F7FF 0%, #DDEDFF 100%);
+    }
+
+    // 二级的高亮
+    .courseTwoActive {
+      color: #387DF7;
+      border-image: linear-gradient(90deg, rgba(47, 101, 236, 1), rgba(228, 236, 255, 1)) 1 1 !important;
+    }
+
+    .course-two {
+      position: relative;
+      border-bottom: 1px solid;
+      border-image: linear-gradient(333deg, rgba(243, 243, 243, 1), rgba(227, 227, 227, 1)) 1 1;
+
+      .course-two-content {
+        cursor: pointer;
+        height: 38px;
+        line-height: 38px;
+        font-size: 16px;
+        padding-left: 40px;
+      }
+    }
+
+    .popover {
+      background: linear-gradient(180deg, rgba(78, 166, 255, 0.2) 0%, rgba(78, 166, 255, 0) 100%);
+    }
+
+  }
+
+}
 .u-class {
   ::v-deep .el-dialog {
     border-radius: 15px;