zhny_ui/ems-ui-cloud/src/views/task/index.vue

<template>
  <div class="task-container">
    <el-row :gutter="10">
      <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 ref="tree" :data="areaOptions" default-expand-all :expand-on-click-node="false" :filter-node-method="filterNode"
            node-key="id" highlight-current @node-click="handleNodeClick" />
        </div>
      </el-col>
      <el-col :span="20" :xs="24">
        <el-tabs v-model="activeName" >
          <el-tab-pane label="手动巡检" name="ManualInspection">
            <manual-inspection></manual-inspection>
          </el-tab-pane>
          <el-tab-pane label="自动巡检" name="second">
            <AutoInspection></AutoInspection>
          </el-tab-pane>
        </el-tabs>
      </el-col></el-row>

  </div>
</template>

<script>
import AutoInspection from '@/views/task/AutoInspection.vue';
import ManualInspection from '@/views/task/ManualInspection.vue';
import {areaTreeSelect} from '@/api/basecfg/area'
export default {
  components: {
    ManualInspection,
    AutoInspection,
  },
  name: 'task',
  data () {
    return {
      activeName: 'ManualInspection',
      areaName: undefined,
      areaOptions: [],
      areaCode:null
    };
  },
  watch: {
     // 根据名称筛选区域树
     areaName (val) {
      this.$refs.tree.filter(val)
    }
  },
  async created () {
    await this.getAreaTreeByTag('0', 1)
  },
  methods: {
    /** 查询区域树结构 */
    async getAreaTreeByTag(areaCode, layer) {
      await areaTreeSelect(areaCode, layer).then(response => {
        this.areaOptions = [{
          id: '-1',
          label: '全部',
          children: []
        }].concat(response.data)
        this.areaCode = '-1'
      })
    },
    // 筛选节点
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleNodeClick (data, node) {
      this.areaCode = data.id
      // this.getList()
    },
  },
};
</script>
<style src="./index.scss" lang="scss"></style>