|
|
@@ -0,0 +1,57 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="4" :xs="24">
|
|
|
+ <div class="head-container">
|
|
|
+ <el-input v-model="areaName" placeholder="请输入区块名称" clearable size="small" prefix-icon="el-icon-search"
|
|
|
+ style="margin-bottom: 20px" />
|
|
|
+ </div>
|
|
|
+ <div class="head-container">
|
|
|
+ <el-tree :data="areaOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree"
|
|
|
+ node-key="id" default-expand-all highlight-current @node-click="handleNodeClick" />
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-tabs v-model="activeTab" @tab-click="handleTabClick">
|
|
|
+ <el-tab-pane label="地理位置" name="area"></el-tab-pane>
|
|
|
+ <el-tab-pane label="组织机构" name="organ"></el-tab-pane>
|
|
|
+ <el-tab-pane label="设施设备" name="facs"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Treeselect from '@riophae/vue-treeselect'
|
|
|
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'Device',
|
|
|
+ components: { Treeselect },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeTab: 'area',
|
|
|
+ areaOptions: [],
|
|
|
+ organOptions: [],
|
|
|
+ facsOptions: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleTabClick() {
|
|
|
+
|
|
|
+ },
|
|
|
+ // 筛选节点
|
|
|
+ filterNode(value, data) {
|
|
|
+ if (!value) return true
|
|
|
+ return data.label.indexOf(value) !== -1
|
|
|
+ },
|
|
|
+ // 节点单击事件
|
|
|
+ handleNodeClick(data) {
|
|
|
+ this.queryParams.areaCode = data.id
|
|
|
+ console.log('this.queryParams.areaCode ', this.queryParams.areaCode)
|
|
|
+ this.handleQuery()
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
