jsconfig.json

@@ -0,0 +1,13 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["src/*"]
+        },
+        "target": "ES6",
+        "module": "commonjs",
+        "allowSyntheticDefaultImports": true
+    },
+    "include": ["src/**/*"],
+    "exclude": ["node_modules"]
+}

src/api/hardware/area.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+// 大区列表
+export function list() {
+    return request({
+        url: '/system/area/list',
+        method: 'get',
+    })
+}
+

src/components/Region/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <section>
+    <el-tree :data="list" :props="defaultProps" :expand-on-click-node="false" ref="tree"
+      default-expand-all />
+  </section>
+</template>
+
+<script>
+// todo 大区组件
+import { list } from "@/api/hardware/area";
+export default {
+  name: 'Region',
+  data () {
+    return {
+      defaultProps: {
+        children: 'children',
+        label: 'areaName'
+      },
+      list: [
+        {
+          "id": 4, "areaName": "中原地区", "areaCode": "17", "ordinal": null, "provinceIds": null, children: [
+            { "id": 1, "areaName": "安徽省", "areaCode": "001", "ordinal": 1, "provinceIds": null },
+            { "id": 1, "areaName": "河南省", "areaCode": "001", "ordinal": 1, "provinceIds": null },
+          ]
+        },
+        { "id": 1, "areaName": "华北地区", "areaCode": "001", "ordinal": 1, "provinceIds": null },
+        {
+          "id": 2, "areaName": "华南地区", "areaCode": "002", "ordinal": 2, "provinceIds": null, children: [
+            { "id": 1, "areaName": "江苏省", "areaCode": "001", "ordinal": 1, "provinceIds": null },
+            { "id": 1, "areaName": "浙江省", "areaCode": "001", "ordinal": 1, "provinceIds": null },
+            { "id": 1, "areaName": "湖南省", "areaCode": "001", "ordinal": 1, "provinceIds": null },
+          ]
+        }
+      ]
+
+      //   list: [
+      //     {
+      //       label: '一级 1',
+      //       children: [{
+      //         label: '二级 1-1',
+      //         children: [{
+      //           label: '三级 1-1-1'
+      //         }]
+      //       }]
+      //     }
+      //   ]
+    }
+
+  },
+  created () {
+    list()
+  }
+}
+</script>
+
+<style>
+</style>

src/views/hardware/deviceList/index.vue

@@ -1,8 +1,10 @@
 <template>
   <section class="app-container">
     <el-row>
-      <el-col :span="2">todo 地区</el-col>
+      <el-col :span="4">
-      <el-col :span="22">
+        <region></region>
+      </el-col>
+      <el-col :span="20">
         <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
           <el-form-item label="名称" prop="jobName">
             <el-input v-model="queryParams.deviceName" placeholder="请输入名称" clearable size="small" style="width: 240px"
@@ -100,6 +102,7 @@
 </template>
 
 <script>
+import Region from "@/components/Region";
 import {
   list,
   get,
@@ -109,6 +112,9 @@ import {
 } from "@/api/hardware/device";
 export default {
   name: "DeviceList",
+  components: {
+    Region,
+  },
   data () {
     return {
       // 选中数组