单位管理中增加上级单位树状菜单查看。

src/components/SelectTree/index.vue

@@ -0,0 +1,159 @@
+<template>
+ <el-select size="mini" :value="valueTitle" :clearable="clearable" @clear="clearHandle">
+    <el-input
+      size="mini"
+      class="selectInput"
+      :placeholder="placeholder"
+      v-model="filterText">
+    </el-input>
+    <el-option :value="valueTitle" :label="valueTitle" class="options">
+      <el-tree  id="tree-option"
+        ref="selectTree"
+        :accordion="accordion"
+        :data="options"
+        :props="props"
+        :node-key="props.value"    
+        :default-expanded-keys="defaultExpandedKey"
+        :filter-node-method="filterNode"
+        @node-click="handleNodeClick">
+      </el-tree>
+    </el-option>
+  </el-select>
+</template>
+<script>
+export default {
+  name: "el-tree-select",
+  props:{
+    /* 配置项 */
+    props:{
+      type: Object,
+      default:()=>{
+        return {
+          value:'id',             // ID字段名
+          label: 'title',         // 显示名称
+          children: 'children'    // 子级字段名
+        }
+      }
+    },
+    /* 选项列表数据(树形结构的对象数组) */
+    options:{
+      type: Array,       
+      default: ()=>{ return [] }
+    },
+    /* 初始值 */
+    value:{
+      type: String,
+      default: ()=>{ return null }
+    },
+    /* 可清空选项 */
+    clearable:{
+      type:Boolean,
+      default:()=>{ return true }
+    },
+    /* 自动收起 */
+    accordion:{
+      type:Boolean,
+      default:()=>{ return true }
+    },
+    placeholder:{
+      type:String,
+      default:()=>{return "检索关键字"}
+    }
+  },
+  data() {
+    return {
+      filterText: '',
+      valueId:this.value,    // 初始值
+      valueTitle:'',
+      defaultExpandedKey:[]    
+    }
+  },
+  mounted(){
+    this.initHandle()
+  },
+  methods: {
+    // 初始化值
+    initHandle(){
+      if(this.valueId){
+        this.valueTitle = this.$refs.selectTree.getNode(this.valueId).data[this.props.label]     // 初始化显示
+        this.$refs.selectTree.setCurrentKey(this.valueId)       // 设置默认选中
+        this.defaultExpandedKey = [this.valueId]      // 设置默认展开
+      } 
+      this.initScroll()
+    },
+    // 初始化滚动条
+    initScroll(){
+      this.$nextTick(()=>{
+        let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]
+        let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')
+        scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'
+        scrollBar.forEach(ele => ele.style.width = 0)
+      })
+    },
+    // 切换选项
+    handleNodeClick(node){
+      this.valueTitle = node[this.props.label]
+      this.valueId = node[this.props.value]
+      this.$emit('getValue',this.valueId)
+      this.defaultExpandedKey = []
+    },
+    // 清除选中
+    clearHandle(){
+      this.valueTitle = ''
+      this.valueId = null
+      this.defaultExpandedKey = []
+      this.clearSelected()
+      this.$emit('getValue',null)
+    },
+    /* 清空选中样式 */
+    clearSelected(){
+      let allNode = document.querySelectorAll('#tree-option .el-tree-node')
+      allNode.forEach((element)=>element.classList.remove('is-current'))
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.name.indexOf(value) !== -1;
+    }
+  },
+  watch: {
+    value(){
+      this.valueId = this.value
+      this.initHandle()
+    },
+    filterText(val) {
+      this.$refs.selectTree.filter(val);
+    }
+  },
+};
+</script>
+<style>
+ .el-scrollbar .el-scrollbar__view .el-select-dropdown__item{
+    height: auto;
+    max-height: 274px;
+    padding: 0;
+    overflow: hidden;
+    overflow-y: auto;
+  }
+  .el-select-dropdown__item.selected{
+    font-weight: normal;
+  }
+  ul li >>>.el-tree .el-tree-node__content{
+    height:auto;
+    padding: 0 20px;
+  }
+  .el-tree-node__label{
+    font-weight: normal;
+  }
+  .el-tree >>>.is-current .el-tree-node__label{
+    color: #409EFF;
+    font-weight: 700;
+  }
+  .el-tree >>>.is-current .el-tree-node__children .el-tree-node__label{
+    color:#606266;
+    font-weight: normal;
+  }
+  .selectInput{
+    padding: 0 5px;
+    box-sizing: border-box;
+  }
+</style>

src/views/base/companyInfo-list.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="padding-left:5px;">
     <el-breadcrumb separator=">">
       <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
       <el-breadcrumb-item>
@@ -10,15 +10,12 @@
       </el-breadcrumb-item>
     </el-breadcrumb>
     <el-divider></el-divider>
-    <!--
-      要resetFields起作用，必须配置:model和prop
-    -->
     <el-form ref="queryForm" :model="queryModel" inline class="demo-form-inline">
       <el-form-item label="单位名称" prop="name">
         <el-input type="text" size="mini" v-model="queryModel.name"></el-input>
       </el-form-item>
       <el-form-item label="上级单位" prop="parentId">
-        <el-select
+        <!-- <el-select
           size="mini"
           v-model="queryModel.parentId"
           filterable
@@ -31,7 +28,16 @@
             :label="company.name"
             :value="company.id"
           ></el-option>
-        </el-select>&nbsp;
+        </el-select> -->
+        <el-select-tree
+          :props="props"
+          :options="optionData"
+          :value="queryModel.parentId"
+          @getValue="getSelectedValue($event)"
+          height="200"
+        >
+        </el-select-tree>
+        &nbsp;
         <el-checkbox v-model="queryModel.subordinate">是否包含下级单位</el-checkbox>
       </el-form-item>
       <el-form-item>
@@ -63,12 +69,6 @@
       >删除选中项</el-button>
     </el-row>
     <el-row style="padding-left:5px;">
-      <!--
-            lazy
-            :load="loadChildren"
-            row-key="id"
-            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-      -->
       <el-table
             :data="tableData"
             style="min-height:400px;"
@@ -79,28 +79,12 @@
             @selection-change="handleSelectionChange"
           >
             <el-table-column type="selection" width="55"></el-table-column>
-            <!-- <el-table-column prop="logo" label="单位logo" width="120">
-              <template slot-scope="{row}">
-                <a :href="row.logo" target="_blank">
-                  <el-avatar
-                    :size="48"
-                    :src="row.logo+'?x-oss-process=image/resize,m_lfit,h_100,w_100'"
-                    :key="row.id"
-                  ></el-avatar>
-                </a>
-              </template>
-            </el-table-column>-->
             <el-table-column prop="sortNo" label="序号" width="120"></el-table-column>
-            <el-table-column prop="parentName" label="上级单位" width="230"></el-table-column>
             <el-table-column prop="name" label="单位名称" width="230"></el-table-column>
+            <el-table-column prop="parentName" label="上级单位" width="230"></el-table-column>
             <el-table-column prop="typeN" label="性质" width="80"></el-table-column>
-            <!-- <el-table-column prop="position1Name" label="一级位置" width="180"></el-table-column>
-            <el-table-column prop="position2Name" label="二级位置" width="180"></el-table-column>
-            <el-table-column prop="position3Name" label="三级位置" width="180"></el-table-column>
-            <el-table-column prop="position4Name" label="四级位置" width="180"></el-table-column>
-            <el-table-column prop="position5Name" label="五级位置" width="180"></el-table-column>-->
             <el-table-column prop="remark" sort-by="remark_" width="350" label="备注"></el-table-column>
-            <el-table-column label="操作" width="350">
+            <el-table-column label="操作" width="350" fixed="right">
               <template slot-scope="{row}">
                 <el-row>
                   <el-col>
@@ -116,8 +100,9 @@
                     >
                       <div :id="row.id" ref="qrCodeDiv"></div>
                       <el-link type="primary" :underline="false" slot="reference">健康公示二维码</el-link>
-                    </el-popover>-
+                    </el-popover>
                     <span v-if="row.type != null && row.type != ''">
+                      -
                       <el-link type="primary" :underline="false" @click="openDP(row)">大屏网址</el-link>
                     </span>
                   </el-col>
@@ -152,7 +137,7 @@ import Constant from "@/constant";
 import companyInfoDetail from "./companyInfo-detail";
 import companyDeviceRelationList from "./companyDeviceRelation-list";
 import companyInfoApi from "@/api/base/companyInfo";
-
+import SelectTree from "@/components/SelectTree";
 import QRCode from "qrcodejs2";
 import NProgress from "nprogress"; // progress bar
 import "nprogress/nprogress.css"; // progress bar style
@@ -161,6 +146,7 @@ export default {
   data() {
     var self = this;
     return {
+      activeName: "list",
       queryModel: {
         name: "",
         parentId: "",
@@ -168,6 +154,7 @@ export default {
       },
       loading: false,
       tableData: [],
+      treeData: [],
       pageIndex: 1,
       pageSize: 10,
       totalPages: 0,
@@ -179,14 +166,35 @@ export default {
       showModal: false,
       modalTitle: "",
       businessKey: "",
-      tableHeight: "400",
+      tableHeight: 400,
       showDeviceModal: false,
       companyId: "",
       qrCode: "",
-      companyResult: []
+      companyResult: [],
+      props: {
+        // 配置项（必选）
+        value: "id",
+        label: "name",
+        children: "children"
+      }
+    }
+  },
+  computed: {
+    /* 转树形数据 */
+    optionData() {
+      let cloneData = JSON.parse(JSON.stringify(this.companyResult)); // 对源数据深度克隆
+      return cloneData.filter(father => {
+        // 循环所有项，并添加children属性
+        let branchArr = cloneData.filter(child => father.id == child.parentId); // 返回每一项的子级数组
+        branchArr.length > 0 ? (father.children = branchArr) : ""; //给父级添加一个children属性，并赋值
+        return father.parentId == null; //返回第一层
+      });
     }
   },
   created() {
+    this.tableHeight = window.innerHeight - 320;
+    this.treeHeight = window.innerHeight - 200;
+
     var self = this;
 
     companyInfoApi.list().then(function(response) {
@@ -195,8 +203,28 @@ export default {
         self.companyResult = jsonData.data;
       }
     });
+
+    this.changePage(1);
+    this.loadTree();
   },
   methods: {
+    getSelectedValue(value) {
+      this.queryModel.parentId = value;
+    },
+    loadTree() {
+      var formData = new FormData();
+
+      companyInfoApi.loadChildren(formData).then((resp)=>{
+        var jsonData = resp.data;
+
+        if(jsonData.result){
+          this.treeData = jsonData.data;
+        }
+        else{
+          this.$message.error(jsonData.message + "");
+        }
+      });
+    },
     loadChildren(tree, treeNode, resolve) {
       console.log(tree);
 
@@ -393,11 +421,12 @@ export default {
     }
   },
   mounted: function() {
-    this.changePage(1);
+
   },
   components: {
     "companyInfo-detail": companyInfoDetail,
-    "companyDeviceRelation-list": companyDeviceRelationList
+    "companyDeviceRelation-list": companyDeviceRelationList,
+    "el-select-tree": SelectTree
   }
 };
 </script>

src/views/base/personInfo-detail.vue

@@ -140,6 +140,16 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="是否允许查看本单位数据" prop="allowViewLocal">
+              <el-radio-group v-model="formModel.allowViewLocal">
+                <el-radio :label="true">是</el-radio>
+                <el-radio :label="false">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
         <el-row>
           <el-col :span="12">
             <el-form-item :label="companyPosition1" prop="position1">