2021-06-10

src/views/modules/sys/user-left.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="pbbasic-left">
     <el-tree
+      highlight-current
       :data="data"
       :props="defaultProps"
+      ref="tree"
+      node-key="id"
       @node-click="handleNodeClick">
     </el-tree>
   </div>
@@ -15,15 +18,26 @@ export default {
       defaultProps: {
         children: "children",
         label: "label",
-      },
+      }
     };
   },
   mounted() {
     this.getDataList()
   },
   methods: {
+    // 清除el-tree的选中
+    // clearTree () {
+    //   console.log(this.$refs['tree'].getCurrentKey());
+    //   console.log('在清空了在清空了');
+    //   // this.$nextTick(function() {
+    //     this.$refs['tree'].setCurrentKey(null)
+    //   // })
+    //   console.log(this.$refs['tree'].getCurrentKey())
+    //   console.log(this.$refs['tree'].getCurrentNode())
+    // },
     handleNodeClick(data) {
-      console.log(data)
+      // this.$refs['tree'].setCurrentKey(data.id)
+      // this.$refs['tree'].setCurrentKey(null)
       this.$emit('getUsers', data)
     },
     // 获取初始数据
@@ -51,6 +65,7 @@ export default {
         // 组合牧场、猪舍、单元
         this.data = [
           {
+            id: 0,
             order: 0, 
             label: '青莲集团',
             children: []

src/views/modules/sys/user.vue

@@ -4,7 +4,7 @@
       <!-- 树状图 -->
       <el-aside>
         <div class="rect">
-          <user-left @getUsers="getUsers"></user-left>
+          <user-left ref="left" @getUsers="getUsers"></user-left>
         </div>
       </el-aside>
       <el-container>
@@ -15,7 +15,7 @@
               <el-form-item>
                 <el-input v-model="form.username" placeholder="姓名/手机号码" clearable></el-input>
               </el-form-item>
-              <el-form-item style="width: 100px">
+              <el-form-item style="width: 140px">
                 <el-select placeholder="部门" v-model="form.departmentCode">
                   <el-option
                     v-for="(item, index) in departments"
@@ -25,7 +25,7 @@
                   </el-option>
                 </el-select>
               </el-form-item>
-              <el-form-item style="width: 100px">
+              <el-form-item style="width: 140px">
                 <el-select placeholder="岗位" v-model="form.jobCode">
                   <el-option
                     v-for="(item, index) in jobs"
@@ -35,7 +35,7 @@
                   </el-option>
                 </el-select>
               </el-form-item>
-              <el-form-item style="width: 100px">
+              <el-form-item style="width: 140px">
                 <el-select placeholder="性别" v-model="form.gender">
                   <el-option
                     v-for="item in gender"
@@ -246,10 +246,12 @@
     methods: {
       // form表单清空
       clearAll () {
-        this.form.username = undefined,
-        this.form.departmentCode = undefined,
-        this.form.jobCode = undefined,
+        this.form.username = undefined
+        this.form.departmentCode = undefined
+        this.form.jobCode = undefined
         this.form.gender = undefined
+        // this.$refs['left'].clearTree()
+        // this.farmId = undefined
       },
       // 左侧树状图对users的限制
       getUsers (val) {
@@ -261,7 +263,6 @@
       },
       // 获取数据列表
       getDataList () {
-        console.log(typeof this.form.gender);
         this.dataListLoading = true
         this.$http({
           url: this.$http.adornUrl('/sys/user/list'),