diff --git a/src/api/area.js b/src/api/area.js
new file mode 100644
index 0000000..1207d91
--- /dev/null
+++ b/src/api/area.js
@@ -0,0 +1,54 @@
+/**
+ * 区域接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaList(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}

diff --git a/src/api/area.js b/src/api/area.js
new file mode 100644
index 0000000..1207d91
--- /dev/null
+++ b/src/api/area.js
@@ -0,0 +1,54 @@
+/**
+ * 区域接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaList(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
new file mode 100644
index 0000000..1c6facb
--- /dev/null
+++ b/src/views/system/area/areaSelectTree.vue
@@ -0,0 +1,79 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" custom-class="area-select-dialog" title="选择区域" append-to-body>
+    <el-scrollbar style="height: 400px">
+      <el-tree
+        v-loading="loading"
+        :expand-on-click-node="false"
+        ref="tree"
+        :props="defaultProps"
+        :load="loadNode"
+        node-key="id"
+        lazy
+      />
+    </el-scrollbar>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="confirmSelect">确定</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getAreaTree } from '@/api/area'
+export default {
+  name: 'AreaSelectTree',
+  data() {
+    return {
+      dialogFormVisible: true,
+      defaultProps: {
+        label: 'name',
+        children: 'children',
+        isLeaf: 'leaf'
+      },
+      listQuery: {
+        pid: ''
+      }
+    }
+  },
+  methods: {
+    // 获取数据
+    // fetchData() {
+    //   return new Promise(function(resolve, reject) {
+    //     getAreaTree(this.roleId)
+    //   })
+    // },
+    initDialog() {
+      this.dialogFormVisible = true
+    },
+    loadNode(node, resolve) {
+      if (node.data && node.data.id) {
+        this.listQuery.pid = node.data.id
+      }
+      getAreaTree(this.listQuery).then(response => {
+        const data = response.data
+        resolve(data)
+      })
+    },
+    // 选择后的操作
+    confirmSelect() {
+      const node = this.$refs.tree.getCurrentNode()
+      debugger
+      this.dialogFormVisible = false
+      this.$emit('selectDone', node)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
+
+<style rel="stylesheet/scss" lang="scss">
+  .area-select-dialog{
+    width: 400px;
+  .el-scrollbar__wrap{
+    overflow-x: hidden !important;
+  }
+  }
+</style>

diff --git a/src/api/area.js b/src/api/area.js
new file mode 100644
index 0000000..1207d91
--- /dev/null
+++ b/src/api/area.js
@@ -0,0 +1,54 @@
+/**
+ * 区域接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaList(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
new file mode 100644
index 0000000..1c6facb
--- /dev/null
+++ b/src/views/system/area/areaSelectTree.vue
@@ -0,0 +1,79 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" custom-class="area-select-dialog" title="选择区域" append-to-body>
+    <el-scrollbar style="height: 400px">
+      <el-tree
+        v-loading="loading"
+        :expand-on-click-node="false"
+        ref="tree"
+        :props="defaultProps"
+        :load="loadNode"
+        node-key="id"
+        lazy
+      />
+    </el-scrollbar>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="confirmSelect">确定</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getAreaTree } from '@/api/area'
+export default {
+  name: 'AreaSelectTree',
+  data() {
+    return {
+      dialogFormVisible: true,
+      defaultProps: {
+        label: 'name',
+        children: 'children',
+        isLeaf: 'leaf'
+      },
+      listQuery: {
+        pid: ''
+      }
+    }
+  },
+  methods: {
+    // 获取数据
+    // fetchData() {
+    //   return new Promise(function(resolve, reject) {
+    //     getAreaTree(this.roleId)
+    //   })
+    // },
+    initDialog() {
+      this.dialogFormVisible = true
+    },
+    loadNode(node, resolve) {
+      if (node.data && node.data.id) {
+        this.listQuery.pid = node.data.id
+      }
+      getAreaTree(this.listQuery).then(response => {
+        const data = response.data
+        resolve(data)
+      })
+    },
+    // 选择后的操作
+    confirmSelect() {
+      const node = this.$refs.tree.getCurrentNode()
+      debugger
+      this.dialogFormVisible = false
+      this.$emit('selectDone', node)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
+
+<style rel="stylesheet/scss" lang="scss">
+  .area-select-dialog{
+    width: 400px;
+  .el-scrollbar__wrap{
+    overflow-x: hidden !important;
+  }
+  }
+</style>
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
new file mode 100644
index 0000000..305abb1
--- /dev/null
+++ b/src/views/system/area/editArea.vue
@@ -0,0 +1,217 @@
+<template>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body>
+    <el-form ref="dataForm" :rules="rules" :model="areaForm" label-position="right" label-width="80px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="区域名称" prop="areaName">
+            <el-input v-model.trim="areaForm.areaName" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="区域简称" prop="simplename">
+            <el-input v-model.trim="areaForm.simplename" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="区域编码" prop="id">
+            <el-input v-model.trim="areaForm.id" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="上级区域" prop="pName">
+            <el-input :value="areaForm.pName" type="text" placeholder="必选" @focus="openAreaSelect"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="区域等级" prop="level">
+            <el-select v-model="areaForm.level" placeholder="请选择">
+              <el-option
+                v-for="item in areaLevelList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="排序" prop="num">
+            <el-input-number v-model.number="areaForm.num" style="width:100%" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+    <area-select-tree v-if="areaSelectShow" ref="areaSelect" @selectDone="changeParent"/>
+  </el-dialog>
+</template>
+
+<script>
+import { toTreeList } from '@/utils/structure'
+import { getAreaType, addArea, updateArea } from '@/api/area'
+import AreaSelectTree from './areaSelectTree'
+
+export default {
+  name: 'EditArea',
+  components: { AreaSelectTree },
+  data() {
+    return {
+      dialogFormVisible: false, // 对话框是否显示
+      dialogStatus: '', // 对话框类型：create,update
+      areaForm: {
+        id: '', // 编号
+        pid: '', // 父级编号
+        pName: '', // 父级名称
+        areaName: '', // 区域名
+        simplename: '', // 别名，
+        level: '',
+        num: 99 // 排序
+      }, // 表单
+      areaSelectShow: false,
+      areaLevelList: [], // 区域树列表数据
+      textMap: {
+        update: '编辑',
+        create: '新增'
+      }, // 表头显示标题
+      rules: {
+        id: [{ required: true, message: '区域编号不能为空', trigger: ['blur', 'change'] }],
+        areaName: [{ required: true, message: '区域名称不能为空', trigger: ['blur', 'change'] }],
+        simplename: [{ required: true, message: '区域简称不能为空', trigger: ['blur', 'change'] }],
+        pName: [{ required: true, message: '上级区域必选', trigger: ['blur', 'change'] }],
+        level: [{ required: true, message: '区域等级必选', trigger: ['blur', 'change'] }],
+        num: [{ required: true, message: '排序必填' }, { type: 'number', message: '必须为数字值' }]
+      } // 前端校验规则
+    }
+  },
+  computed: {
+    areaTree: function() {
+      const tree = toTreeList(this.areaTreeList)
+      console.log(tree)
+      return tree
+    }
+  },
+  created() {
+    this.fetchAreaType()
+  },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
+      this.dialogStatus = dialogStatus
+      this.dialogFormVisible = dialogFormVisible
+      if (dialogStatus === 'create') { // 如果是新增，清除验证
+        this.resetForm()
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
+      } else if (dialogStatus === 'update') { // 如果是修改，将row中数据填写到输入框中
+        this.areaForm = {
+          id: row.id, // 编号
+          pid: row.pid, // 父级编号
+          pName: row.pName, // 父级编号
+          areaName: row.name, // 区域名
+          simplename: row.simplename, // 别名，
+          level: '' + row.level,
+          num: row.num // 排序
+        }
+      }
+    },
+    // 获取区域类型
+    fetchAreaType() {
+      getAreaType().then(response => {
+        this.areaLevelList = response.data
+      })
+    },
+    // 打开区域选择弹窗
+    openAreaSelect() {
+      this.areaSelectShow = true
+      setTimeout(this.$refs.areaSelect.initDialog(), 200)
+    },
+    // 修改pid
+    changeParent(node) {
+      debugger
+      this.areaForm.pid = node.id
+      this.areaForm.pName = node.name
+    },
+    // 重置表单
+    resetForm() {
+      this.areaForm = {
+        id: '', // 编号
+        pid: '', // 父级编号
+        pName: '', // 父级名称
+        areaName: '', // 区域名
+        simplename: '', // 别名，
+        level: '',
+        num: 99 // 排序
+      }
+    },
+    // 保存数据
+    saveData: function() {
+      if (this.dialogStatus === 'update') {
+        this.updateData()
+      } else if (this.dialogStatus === 'create') {
+        this.createData()
+      }
+    },
+    // 新增数据
+    createData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.areaForm)
+        if (valid) {
+          addArea(this.areaForm).then(response => {
+            if (response.code === 200) {
+              this.$confirm('新增成功，是否继续新增?', '提示', {
+                confirmButtonText: '是',
+                cancelButtonText: '否',
+                type: 'info'
+              }).then(() => {
+                this.resetForm()
+                this.$nextTick(() => {
+                  this.$refs['dataForm'].clearValidate()
+                })
+              }).catch(() => {
+                this.$emit('watchChild')
+                this.dialogFormVisible = false
+              })
+            }
+          })
+        }
+      })
+    },
+    // 修改数据
+    updateData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          updateArea(this.areaForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$refs['dataForm'].clearValidate()
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+  .el-dialog{
+    width:700px
+  }
+  .el-select{
+    width: 100%;
+  }
+</style>

diff --git a/src/api/area.js b/src/api/area.js
new file mode 100644
index 0000000..1207d91
--- /dev/null
+++ b/src/api/area.js
@@ -0,0 +1,54 @@
+/**
+ * 区域接口
+ */
+import request from '@/utils/request'
+// 区域查询
+export function getAreaList(params) {
+  return request({
+    url: 'area/listPage',
+    method: 'get',
+    params
+  })
+}
+// 区域查询,非分页，加载树用
+export function getAreaTree(params) {
+  return request({
+    url: 'area/list',
+    method: 'get',
+    params
+  })
+}
+// 区域类型查询
+export function getAreaType() {
+  return request({
+    url: 'dict/code/levelType',
+    method: 'get'
+  })
+}
+
+// 添加区域
+export function addArea(params) {
+  return request({
+    url: 'area/add',
+    method: 'post',
+    params
+  })
+}
+// 修改区域机构
+export function updateArea(params) {
+  return request({
+    url: 'area/update',
+    method: 'post',
+    params
+  })
+}
+// 删除区域机构
+export function delArea(id) {
+  return request({
+    url: 'area/delete',
+    method: 'post',
+    params: {
+      id: id
+    }
+  })
+}
diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
new file mode 100644
index 0000000..1c6facb
--- /dev/null
+++ b/src/views/system/area/areaSelectTree.vue
@@ -0,0 +1,79 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" custom-class="area-select-dialog" title="选择区域" append-to-body>
+    <el-scrollbar style="height: 400px">
+      <el-tree
+        v-loading="loading"
+        :expand-on-click-node="false"
+        ref="tree"
+        :props="defaultProps"
+        :load="loadNode"
+        node-key="id"
+        lazy
+      />
+    </el-scrollbar>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="confirmSelect">确定</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getAreaTree } from '@/api/area'
+export default {
+  name: 'AreaSelectTree',
+  data() {
+    return {
+      dialogFormVisible: true,
+      defaultProps: {
+        label: 'name',
+        children: 'children',
+        isLeaf: 'leaf'
+      },
+      listQuery: {
+        pid: ''
+      }
+    }
+  },
+  methods: {
+    // 获取数据
+    // fetchData() {
+    //   return new Promise(function(resolve, reject) {
+    //     getAreaTree(this.roleId)
+    //   })
+    // },
+    initDialog() {
+      this.dialogFormVisible = true
+    },
+    loadNode(node, resolve) {
+      if (node.data && node.data.id) {
+        this.listQuery.pid = node.data.id
+      }
+      getAreaTree(this.listQuery).then(response => {
+        const data = response.data
+        resolve(data)
+      })
+    },
+    // 选择后的操作
+    confirmSelect() {
+      const node = this.$refs.tree.getCurrentNode()
+      debugger
+      this.dialogFormVisible = false
+      this.$emit('selectDone', node)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
+
+<style rel="stylesheet/scss" lang="scss">
+  .area-select-dialog{
+    width: 400px;
+  .el-scrollbar__wrap{
+    overflow-x: hidden !important;
+  }
+  }
+</style>
diff --git a/src/views/system/area/editArea.vue b/src/views/system/area/editArea.vue
new file mode 100644
index 0000000..305abb1
--- /dev/null
+++ b/src/views/system/area/editArea.vue
@@ -0,0 +1,217 @@
+<template>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body>
+    <el-form ref="dataForm" :rules="rules" :model="areaForm" label-position="right" label-width="80px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="区域名称" prop="areaName">
+            <el-input v-model.trim="areaForm.areaName" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="区域简称" prop="simplename">
+            <el-input v-model.trim="areaForm.simplename" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="区域编码" prop="id">
+            <el-input v-model.trim="areaForm.id" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="上级区域" prop="pName">
+            <el-input :value="areaForm.pName" type="text" placeholder="必选" @focus="openAreaSelect"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="区域等级" prop="level">
+            <el-select v-model="areaForm.level" placeholder="请选择">
+              <el-option
+                v-for="item in areaLevelList"
+                :key="item.value"
+                :label="item.name"
+                :value="item.value"/>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="排序" prop="num">
+            <el-input-number v-model.number="areaForm.num" style="width:100%" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" @click="saveData">保存</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+    <area-select-tree v-if="areaSelectShow" ref="areaSelect" @selectDone="changeParent"/>
+  </el-dialog>
+</template>
+
+<script>
+import { toTreeList } from '@/utils/structure'
+import { getAreaType, addArea, updateArea } from '@/api/area'
+import AreaSelectTree from './areaSelectTree'
+
+export default {
+  name: 'EditArea',
+  components: { AreaSelectTree },
+  data() {
+    return {
+      dialogFormVisible: false, // 对话框是否显示
+      dialogStatus: '', // 对话框类型：create,update
+      areaForm: {
+        id: '', // 编号
+        pid: '', // 父级编号
+        pName: '', // 父级名称
+        areaName: '', // 区域名
+        simplename: '', // 别名，
+        level: '',
+        num: 99 // 排序
+      }, // 表单
+      areaSelectShow: false,
+      areaLevelList: [], // 区域树列表数据
+      textMap: {
+        update: '编辑',
+        create: '新增'
+      }, // 表头显示标题
+      rules: {
+        id: [{ required: true, message: '区域编号不能为空', trigger: ['blur', 'change'] }],
+        areaName: [{ required: true, message: '区域名称不能为空', trigger: ['blur', 'change'] }],
+        simplename: [{ required: true, message: '区域简称不能为空', trigger: ['blur', 'change'] }],
+        pName: [{ required: true, message: '上级区域必选', trigger: ['blur', 'change'] }],
+        level: [{ required: true, message: '区域等级必选', trigger: ['blur', 'change'] }],
+        num: [{ required: true, message: '排序必填' }, { type: 'number', message: '必须为数字值' }]
+      } // 前端校验规则
+    }
+  },
+  computed: {
+    areaTree: function() {
+      const tree = toTreeList(this.areaTreeList)
+      console.log(tree)
+      return tree
+    }
+  },
+  created() {
+    this.fetchAreaType()
+  },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
+      this.dialogStatus = dialogStatus
+      this.dialogFormVisible = dialogFormVisible
+      if (dialogStatus === 'create') { // 如果是新增，清除验证
+        this.resetForm()
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
+      } else if (dialogStatus === 'update') { // 如果是修改，将row中数据填写到输入框中
+        this.areaForm = {
+          id: row.id, // 编号
+          pid: row.pid, // 父级编号
+          pName: row.pName, // 父级编号
+          areaName: row.name, // 区域名
+          simplename: row.simplename, // 别名，
+          level: '' + row.level,
+          num: row.num // 排序
+        }
+      }
+    },
+    // 获取区域类型
+    fetchAreaType() {
+      getAreaType().then(response => {
+        this.areaLevelList = response.data
+      })
+    },
+    // 打开区域选择弹窗
+    openAreaSelect() {
+      this.areaSelectShow = true
+      setTimeout(this.$refs.areaSelect.initDialog(), 200)
+    },
+    // 修改pid
+    changeParent(node) {
+      debugger
+      this.areaForm.pid = node.id
+      this.areaForm.pName = node.name
+    },
+    // 重置表单
+    resetForm() {
+      this.areaForm = {
+        id: '', // 编号
+        pid: '', // 父级编号
+        pName: '', // 父级名称
+        areaName: '', // 区域名
+        simplename: '', // 别名，
+        level: '',
+        num: 99 // 排序
+      }
+    },
+    // 保存数据
+    saveData: function() {
+      if (this.dialogStatus === 'update') {
+        this.updateData()
+      } else if (this.dialogStatus === 'create') {
+        this.createData()
+      }
+    },
+    // 新增数据
+    createData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.areaForm)
+        if (valid) {
+          addArea(this.areaForm).then(response => {
+            if (response.code === 200) {
+              this.$confirm('新增成功，是否继续新增?', '提示', {
+                confirmButtonText: '是',
+                cancelButtonText: '否',
+                type: 'info'
+              }).then(() => {
+                this.resetForm()
+                this.$nextTick(() => {
+                  this.$refs['dataForm'].clearValidate()
+                })
+              }).catch(() => {
+                this.$emit('watchChild')
+                this.dialogFormVisible = false
+              })
+            }
+          })
+        }
+      })
+    },
+    // 修改数据
+    updateData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          updateArea(this.areaForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$refs['dataForm'].clearValidate()
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+  .el-dialog{
+    width:700px
+  }
+  .el-select{
+    width: 100%;
+  }
+</style>
diff --git a/src/views/system/area/listArea.vue b/src/views/system/area/listArea.vue
new file mode 100644
index 0000000..1d73f81
--- /dev/null
+++ b/src/views/system/area/listArea.vue
@@ -0,0 +1,214 @@
+<template>
+  <div class="app-container">
+    <!--筛选条件-->
+    <div class="search-div">
+      <el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
+        <el-row>
+          <el-form-item class="selectForm-container-item" prop="keywords">
+            <el-input v-model.trim="listQuery.keywords" placeholder="区域名称/编号" clearable/>
+          </el-form-item>
+          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
+          <el-button v-if="hasPerm('/area/add')" class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="add">新增</el-button>
+        </el-row>
+      </el-form>
+    </div>
+    <!--查询结果Table显示-->
+    <div>
+      <el-table v-loading="listLoading" :data="list" class="table" border @selection-change="handleSelectionChange">
+        <el-table-column :index="indexMethod" align="center" type="index"/>
+        <el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span :class="column.class">{{ scope.row[column.value] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column v-if="showOperate" label="操作" align="center" width="160">
+          <template slot-scope="scope">
+            <el-button v-if="hasPerm('/area/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+            <el-button v-if="hasPerm('/area/delete')" type="danger" size="mini" @click="del(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!--分页-->
+    <div class="pagination-container">
+      <el-pagination
+        v-show="total>listQuery.limit"
+        :current-page="listQuery.offset"
+        :page-sizes="[20,30,50]"
+        :page-size="listQuery.limit"
+        :total="total"
+        align="center"
+        layout="total, sizes, prev, pager, next"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+
+    <edit-area v-show="dialogFormVisible" ref="editarea" @watchChild="fetchData"/>
+
+  </div>
+</template>
+
+<script>
+import { getAreaList, delArea } from '@/api/area'
+import EditArea from './editArea'
+
+export default {
+  name: 'ListArea',
+  components: { EditArea },
+  data() {
+    return {
+      listQuery: {
+        keywords: '',
+        offset: 1,
+        limit: 20,
+        sort: '',
+        order: ''
+      }, // 筛选条件
+      columns: [
+        {
+          text: '区域名称',
+          value: 'name',
+          align: 'center'
+        },
+        {
+          text: '区域编码',
+          value: 'id',
+          align: 'center'
+        },
+        {
+          text: '区域等级',
+          value: 'levelName',
+          align: 'center'
+        },
+        {
+          text: '所属区域',
+          value: 'pName',
+          align: 'center'
+        },
+        {
+          text: '区域排序',
+          value: 'num',
+          width: 80,
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      listLoading: true, // 加载动画
+      fullscreenLoading: false, // 全屏加载动画
+      dialogFormVisible: false // 是否显示编辑框
+    }
+  },
+  computed: {
+    'showOperate': function() { // 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
+      return this.hasPerm('/area/update') || this.hasPerm('/area/delete')
+    }
+  },
+  created() {
+    this.fetchData()// 获取数据
+  },
+  activated() {
+    console.log('activated')
+    this.fetchData()// 获取数据
+  },
+  methods: {
+    // 打开详情对话框
+    detail(row) {
+      this.$refs.detailwell.initDialog(true, row)
+    },
+
+    // 新增区域
+    add() {
+      this.dialogFormVisible = true
+      this.$refs.editarea.initDialog('create', this.dialogFormVisible)
+    },
+    // 编辑区域信息
+    edit(row) {
+      this.dialogFormVisible = true
+      this.editShow = true
+      this.$refs.editarea.initDialog('update', this.dialogFormVisible, row)
+    },
+    // 删除区域
+    del(row) {
+      this.$confirm(
+        '确定要删除区域吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        delArea(row.id).then(response => {
+          if (response.code === 200) {
+            this.$message.success('删除成功')
+            this.fetchData()
+          }
+        })
+      })
+    },
+    // 查询数据
+    search() {
+      this.fetchData(false)
+    },
+    // 获取区域数据
+    fetchData(isNowPage = true) {
+      this.listLoading = true
+      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
+        this.listQuery.offset = 1
+      }
+      getAreaList(this.listQuery).then(response => {
+        this.list = response.data.rows
+        this.total = parseInt(response.data.total)
+        this.listLoading = false
+      })
+    },
+    indexMethod(index) {
+      return this.listQuery.limit * (this.listQuery.offset - 1) + index + 1
+    },
+    // 改变页容量
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.fetchData()
+    },
+    // 改变当前页
+    handleCurrentChange(val) {
+      this.listQuery.offset = val
+      this.fetchData()
+    },
+    // 多选触发方法
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  $tableTitleHeight:46px;
+  .table{
+    margin-bottom: 20px;
+  }
+  .pagination-container{
+    margin-bottom: 50px;
+  }
+  .table-title{
+    background-color:rgba(243, 243, 243, 1);
+    height: $tableTitleHeight;
+    .title-header{
+      line-height:$tableTitleHeight;
+      color: #606266;
+      font-size: 15px;
+      i{
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .edit_btns{
+    .edit_btn{
+      float:right;
+      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
+    }
+  }
+</style>