clay commit : 层级结构完成

src/views/content/components/dire_data.vue

@@ -18,10 +18,8 @@
           {{ chile.name }}<span v-if="chile.children.length>1">({{chile.children.length}}人)</span>
         </el-col>
           <el-col class="text" :offset="1" :span="23">
-            <div v-for="(item,index) in chile.children" :key="index">
+            <div v-for="(item,index) in chile.children" :key="index" @click="linkClick(item)">
-              <a :href="item.link">
                 {{ item.name }}
-              </a>
             </div>
           </el-col>
       </el-row>
@@ -57,6 +55,13 @@ export default {
       }],
     },
   },
+  methods:{
+    linkClick(chile){
+      if (chile.link){
+        window.open(chile.link)
+      }
+    }
+  }
 }
 </script>
 
@@ -104,16 +109,13 @@ export default {
     div {
       float: left;
       margin-top: .4rem;
+      cursor: pointer;
       //width: 7.4%;
-      margin-left: 1rem;
+      margin-right: 1.5rem;
-      margin-right: 1rem;
+      color: #000000;
-      a{
+    }
-        color: #000000;
+    div:hover{
-        text-decoration: none
+      color: #1956BC;
-      }
-      a:hover{
-        color: #1956BC;
-      }
     }
   }
 }

src/views/content/components/dire_data_tow.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="dire_data"  style="background-color:#fff;  margin-top: 3rem;">
+    <el-row v-for="(dire,index) in value" :key="index">
+      <!--正文内容-->
+      <el-col class="context" :span="23">
+        <el-row class="context_el-row">
+          <el-col :span="1" :offset="1">
+            <img class="context_img" src="@/assets/teaching_staff/eji_icon_ys.png" alt="">
+          </el-col>
+          <el-col :span="4" class="context_name">{{ dire.name }}</el-col>
+          <el-col :span="16">
+            <hr class="context_hr">
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :offset="1" :span="22">
+            <div class="name" v-for="(chile,index) in dire.children" :key="index" @click="linkClick(chile)">
+              {{ chile.name }}
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "dire_data_tow",
+  data() {
+    return {
+      width: document.documentElement.clientWidth
+    }
+  },
+  props:{
+    value: {
+      type: Array,
+      default: [{
+        name: "学院",
+        children: [
+          {
+            name: "办公室",
+            children: [
+              {
+                children: [],
+                name: "人员1"
+              },
+            ],
+          }
+        ],
+      }],
+    },
+  },
+  methods:{
+    linkClick(chile){
+      if (chile.link){
+        window.open(chile.link)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+.context {
+  margin: 3rem 2rem;
+  padding-bottom: 3rem;
+  //width: 84.3rem;
+  //background: #FFFFFF;
+
+  .context_el-row {
+    margin-top: 2rem;
+
+    .context_img {
+      width: 2.2rem;
+    }
+
+    .context_name {
+      font-size: 1.8rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #1956BC;
+      line-height: 2.2rem;
+    }
+
+    .context_hr {
+      line-height: 2.2rem;
+      margin-top: 1.1rem;
+      border: #1956BC solid 0.1rem;
+      background-color: #1956BC;
+    }
+  }
+
+  .name {
+    margin-top: 2rem;
+    font-size: 1.6rem;
+    font-weight: 600;
+    display: inline-block;
+    margin-right: 1.5rem;
+    cursor: pointer;
+    color: #000000;
+  }
+  .name:hover {
+    color: #1956BC;
+  }
+}
+
+</style>

src/views/content/components/organization.vue

@@ -1,13 +0,0 @@
-<template>
-
-</template>
-
-<script>
-export default {
-  name: "organization"
-}
-</script>
-
-<style scoped>
-
-</style>

src/views/content/index.vue

@@ -102,8 +102,8 @@
               <Introduction :introduction="contextData" v-if="type === 1"/>
               <List :list="contextData" v-if="type === 2"/>
               <FileList :value="contextData" v-if="type === 4"/>
-              <DireData :value="contextData" v-if="type === 3 && organizationType == '1'"/>
+              <DireData :value="contextData" v-if="type === 3 && dreDataType == '1'"/>
-              <Organization :value="contextData" v-if="type === 3 && organizationType == '2'"/>
+              <DireDataTow :value="contextData" v-if="type === 3 && dreDataType == '2'"/>
               <Details :value="detailsData" v-if="type == null"/>
             </el-col>
           </el-row>
@@ -141,8 +141,8 @@
               <Introduction :introduction="contextData" v-if="type === 1"/>
               <List :list="contextData" v-if="type === 2"/>
               <FileList :value="contextData" v-if="type === 4"/>
-              <DireData :value="contextData" v-if="type === 3 && organizationType == '1'"/>
+              <DireData :value="contextData" v-if="type === 3 && dreDataType == '1'"/>
-              <Organization :value="contextData" v-if="type === 3 && organizationType == '2'"/>
+              <DireDataTow :value="contextData" v-if="type === 3 && dreDataType == '2'"/>
               <Details :value="detailsData" v-if="type == null"/>
             </el-col>
           </el-row>
@@ -161,7 +161,7 @@ import {getNode, crumbs, article} from "@/api";
 import Introduction from './components/Introduction.vue'
 import List from './components/list.vue'
 import DireData from './components/dire_data.vue'
-import Organization from './components/organization.vue'
+import DireDataTow from './components/dire_data_tow.vue'
 import Details from './components/details.vue'
 import FileList from './components/file_list.vue'
 import {handleTree} from "@/utils/ebts";
@@ -174,14 +174,15 @@ export default {
     List,
     DireData,
     Details,
-    FileList
+    FileList,
+    DireDataTow
   },
   data() {
     return {
       width: document.documentElement.clientWidth > 992,
       secondId: null,
       navId: null,
-      organizationType: "",
+      dreDataType: "",
       navList: [],
       showIndex: 0,
       showSecond: true,
@@ -416,10 +417,10 @@ export default {
           this.contextData = res.data
         } else if (this.type == 3) {
           if (res.additional == "") {
-            this.organizationType = "1"
+            this.dreDataType = "1"
           } else {
-            console.log(this.organizationType, "this.organizationType")
+            console.log(this.dreDataType, "this.organizationType")
-            this.organizationType = res.additional
+            this.dreDataType = res.additional
           }
           this.contextData = handleTree(res.data, "id", "pid", null, null)
           console.log(this.contextData, "this.contextData")