diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
new file mode 100644
index 0000000..dadb634
--- /dev/null
+++ b/src/views/system/area/areaSelectTree.vue
@@ -0,0 +1,83 @@
+<!--区域单选列表，懒加载-->
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" custom-class="area-select-dialog" title="选择区域" append-to-body>
+    <el-scrollbar style="height: 400px">
+      <el-tree
+        ref="tree"
+        :expand-on-click-node="false"
+        :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()
+      this.dialogFormVisible = false
+      this.$emit('selectDone', node)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+    }
+  }
+}
+</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/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
new file mode 100644
index 0000000..dadb634
--- /dev/null
+++ b/src/views/system/area/areaSelectTree.vue
@@ -0,0 +1,83 @@
+<!--区域单选列表，懒加载-->
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" custom-class="area-select-dialog" title="选择区域" append-to-body>
+    <el-scrollbar style="height: 400px">
+      <el-tree
+        ref="tree"
+        :expand-on-click-node="false"
+        :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()
+      this.dialogFormVisible = false
+      this.$emit('selectDone', node)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+    }
+  }
+}
+</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..2715711
--- /dev/null
+++ b/src/views/system/area/editArea.vue
@@ -0,0 +1,218 @@
+<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>
+    <!--<el-dialog :visible="areaSelectShow" custom-class="area-select-dialog" title="选择区域" append-to-body>-->
+    <area-select-tree ref="areaSelect" @selectDone="changeParent"/>
+    <!--</el-dialog>-->
+  </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) {
+      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/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
new file mode 100644
index 0000000..dadb634
--- /dev/null
+++ b/src/views/system/area/areaSelectTree.vue
@@ -0,0 +1,83 @@
+<!--区域单选列表，懒加载-->
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" custom-class="area-select-dialog" title="选择区域" append-to-body>
+    <el-scrollbar style="height: 400px">
+      <el-tree
+        ref="tree"
+        :expand-on-click-node="false"
+        :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()
+      this.dialogFormVisible = false
+      this.$emit('selectDone', node)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+    }
+  }
+}
+</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..2715711
--- /dev/null
+++ b/src/views/system/area/editArea.vue
@@ -0,0 +1,218 @@
+<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>
+    <!--<el-dialog :visible="areaSelectShow" custom-class="area-select-dialog" title="选择区域" append-to-body>-->
+    <area-select-tree ref="areaSelect" @selectDone="changeParent"/>
+    <!--</el-dialog>-->
+  </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) {
+      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>

diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
new file mode 100644
index 0000000..dadb634
--- /dev/null
+++ b/src/views/system/area/areaSelectTree.vue
@@ -0,0 +1,83 @@
+<!--区域单选列表，懒加载-->
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" custom-class="area-select-dialog" title="选择区域" append-to-body>
+    <el-scrollbar style="height: 400px">
+      <el-tree
+        ref="tree"
+        :expand-on-click-node="false"
+        :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()
+      this.dialogFormVisible = false
+      this.$emit('selectDone', node)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+    }
+  }
+}
+</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..2715711
--- /dev/null
+++ b/src/views/system/area/editArea.vue
@@ -0,0 +1,218 @@
+<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>
+    <!--<el-dialog :visible="areaSelectShow" custom-class="area-select-dialog" title="选择区域" append-to-body>-->
+    <area-select-tree ref="areaSelect" @selectDone="changeParent"/>
+    <!--</el-dialog>-->
+  </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) {
+      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>
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
new file mode 100644
index 0000000..ccc329d
--- /dev/null
+++ b/src/views/system/dict/editDict.vue
@@ -0,0 +1,230 @@
+<template>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" custom-class="dict-dialog" append-to-body>
+    <el-form ref="dataForm" :rules="rules" :model="dictForm" label-position="right" label-width="80px">
+      <el-row :gutter="20">
+        <el-col :span="9">
+          <el-form-item label="字典编码" prop="dictCode">
+            <el-input v-model.trim="dictForm.dictCode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="9">
+          <el-form-item label="字典名称" prop="dictName">
+            <el-input v-model.trim="dictForm.dictName" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="5" :offset="1">
+          <el-button type="primary" @click="addDetail">添加</el-button>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="18">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="dictForm.dictTips" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <div class="divider"/>
+      <el-row v-for="(detail,index) in details" :key="index" :gutter="10">
+        <el-col :span="6">
+          <el-form-item :required="true" label="值">
+            <el-input v-model="detail.value" style="width:100%" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item :required="true" label="名称">
+            <el-input v-model="detail.name" style="width:100%" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item :required="true" label="序号">
+            <el-input-number v-model.number="detail.num" style="width:100%" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="2" :offset="1">
+          <el-button type="primary" @click="deleteDetail(index)">删除</el-button>
+        </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>
+  </el-dialog>
+</template>
+
+<script>
+import { addDict, updateDict } from '@/api/dict'
+
+export default {
+  name: 'EditDict',
+  data() {
+    return {
+      dialogFormVisible: false, // 对话框是否显示
+      dialogStatus: '', // 对话框类型：create,update
+      dictForm: {
+        dictId: '',
+        dictCode: '',
+        dictName: '',
+        dictTips: '',
+        dictValues: ''
+      }, // 表单
+      details: [], // 字典详情解构
+      textMap: {
+        update: '编辑',
+        create: '新增'
+      }, // 表头显示标题
+      rules: {
+        dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
+        dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
+        value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
+        name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
+        num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }]
+      } // 前端校验规则
+    }
+  },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
+      this.dialogStatus = dialogStatus
+      this.dialogFormVisible = dialogFormVisible
+      // this.fetchPcode()
+      if (dialogStatus === 'create') { // 如果是新增，清除验证
+        this.resetForm()
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
+      } else if (dialogStatus === 'update') { // 如果是修改，将row中数据填写到输入框中
+        this.dictForm = {
+          dictId: row.id,
+          dictCode: row.code,
+          dictName: row.name,
+          dictTips: row.tips,
+          dictValues: row.detail
+        }
+        this.stringToArray()
+      }
+    },
+    // 字典详情字符串转数组
+    stringToArray() {
+      const detailArr = this.dictForm.dictValues.split(';')
+      this.details = []
+      for (const detail of detailArr) {
+        const detailItem = detail.split(':')
+        const item = {
+          value: detailItem[0],
+          name: detailItem[1],
+          num: detailItem[2]
+        }
+        this.details.push(item)
+      }
+    },
+    // 字典详情数组转字符串
+    arrayToString() {
+      let detailArray = ''
+      const details = this.details
+      let passFlag = true
+      details.forEach((detail, index) => {
+        if (detail.value === '' || detail.name === '') {
+          passFlag = false
+        }
+        detailArray += detail.value + ':' + detail.name + ':' + detail.num
+        if (index !== (details.length - 1)) {
+          detailArray += ';'
+        }
+      })
+      this.dictForm.dictValues = detailArray
+      return passFlag
+    },
+    // 重置表单
+    resetForm() {
+      this.dictForm = {
+        dictId: '',
+        dictCode: '',
+        dictName: '',
+        dictTips: '',
+        dictValues: ''
+      }
+      this.details = []
+    },
+    // 保存数据
+    saveData: function() {
+      const flag = this.arrayToString()
+      debugger
+      if (!flag) {
+        this.$message.warning('请将字典值和名称都填全后再进行保存')
+
+      } else {
+        if (this.dialogStatus === 'update') {
+          this.updateData()
+        } else if (this.dialogStatus === 'create') {
+          this.createData()
+        }
+      }
+    },
+    addDetail() {
+      this.details.push({
+        value: '',
+        name: '',
+        num: ''
+      })
+    },
+    deleteDetail(index) {
+      this.details.splice(index, 1)
+    },
+    // 新增数据
+    createData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.dictForm)
+        if (valid) {
+          addDict(this.dictForm).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) {
+          updateDict(this.dictForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" >
+  .dict-dialog{
+    width:900px;
+    .divider{
+      height: 5px;
+      border-bottom: 1px dashed #e7eaec;
+      margin-bottom: 15px;
+    }
+  }
+</style>

diff --git a/src/views/system/area/areaSelectTree.vue b/src/views/system/area/areaSelectTree.vue
new file mode 100644
index 0000000..dadb634
--- /dev/null
+++ b/src/views/system/area/areaSelectTree.vue
@@ -0,0 +1,83 @@
+<!--区域单选列表，懒加载-->
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" custom-class="area-select-dialog" title="选择区域" append-to-body>
+    <el-scrollbar style="height: 400px">
+      <el-tree
+        ref="tree"
+        :expand-on-click-node="false"
+        :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()
+      this.dialogFormVisible = false
+      this.$emit('selectDone', node)
+    },
+    cancel() {
+      this.dialogFormVisible = false
+    }
+  }
+}
+</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..2715711
--- /dev/null
+++ b/src/views/system/area/editArea.vue
@@ -0,0 +1,218 @@
+<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>
+    <!--<el-dialog :visible="areaSelectShow" custom-class="area-select-dialog" title="选择区域" append-to-body>-->
+    <area-select-tree ref="areaSelect" @selectDone="changeParent"/>
+    <!--</el-dialog>-->
+  </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) {
+      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>
diff --git a/src/views/system/dict/editDict.vue b/src/views/system/dict/editDict.vue
new file mode 100644
index 0000000..ccc329d
--- /dev/null
+++ b/src/views/system/dict/editDict.vue
@@ -0,0 +1,230 @@
+<template>
+  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" custom-class="dict-dialog" append-to-body>
+    <el-form ref="dataForm" :rules="rules" :model="dictForm" label-position="right" label-width="80px">
+      <el-row :gutter="20">
+        <el-col :span="9">
+          <el-form-item label="字典编码" prop="dictCode">
+            <el-input v-model.trim="dictForm.dictCode" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="9">
+          <el-form-item label="字典名称" prop="dictName">
+            <el-input v-model.trim="dictForm.dictName" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="5" :offset="1">
+          <el-button type="primary" @click="addDetail">添加</el-button>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="18">
+          <el-form-item label="备注" prop="tips">
+            <el-input v-model.trim="dictForm.dictTips" type="text" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <div class="divider"/>
+      <el-row v-for="(detail,index) in details" :key="index" :gutter="10">
+        <el-col :span="6">
+          <el-form-item :required="true" label="值">
+            <el-input v-model="detail.value" style="width:100%" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item :required="true" label="名称">
+            <el-input v-model="detail.name" style="width:100%" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="6">
+          <el-form-item :required="true" label="序号">
+            <el-input-number v-model.number="detail.num" style="width:100%" placeholder="必填"/>
+          </el-form-item>
+        </el-col>
+        <el-col :span="2" :offset="1">
+          <el-button type="primary" @click="deleteDetail(index)">删除</el-button>
+        </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>
+  </el-dialog>
+</template>
+
+<script>
+import { addDict, updateDict } from '@/api/dict'
+
+export default {
+  name: 'EditDict',
+  data() {
+    return {
+      dialogFormVisible: false, // 对话框是否显示
+      dialogStatus: '', // 对话框类型：create,update
+      dictForm: {
+        dictId: '',
+        dictCode: '',
+        dictName: '',
+        dictTips: '',
+        dictValues: ''
+      }, // 表单
+      details: [], // 字典详情解构
+      textMap: {
+        update: '编辑',
+        create: '新增'
+      }, // 表头显示标题
+      rules: {
+        dictCode: [{ required: true, message: '字典编码不能为空', trigger: ['blur'] }],
+        dictName: [{ required: true, message: '字典名称不能为空', trigger: ['blur'] }],
+        value: [{ required: true, message: '值不能为空', trigger: ['blur'] }],
+        name: [{ required: true, message: '名称不能为空', trigger: ['blur'] }],
+        num: [{ required: true, message: '排序不能为空' }, { type: 'number', message: '必须为数字值' }]
+      } // 前端校验规则
+    }
+  },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogStatus, dialogFormVisible, row = null) {
+      this.dialogStatus = dialogStatus
+      this.dialogFormVisible = dialogFormVisible
+      // this.fetchPcode()
+      if (dialogStatus === 'create') { // 如果是新增，清除验证
+        this.resetForm()
+        this.$nextTick(() => {
+          this.$refs['dataForm'].clearValidate()
+        })
+      } else if (dialogStatus === 'update') { // 如果是修改，将row中数据填写到输入框中
+        this.dictForm = {
+          dictId: row.id,
+          dictCode: row.code,
+          dictName: row.name,
+          dictTips: row.tips,
+          dictValues: row.detail
+        }
+        this.stringToArray()
+      }
+    },
+    // 字典详情字符串转数组
+    stringToArray() {
+      const detailArr = this.dictForm.dictValues.split(';')
+      this.details = []
+      for (const detail of detailArr) {
+        const detailItem = detail.split(':')
+        const item = {
+          value: detailItem[0],
+          name: detailItem[1],
+          num: detailItem[2]
+        }
+        this.details.push(item)
+      }
+    },
+    // 字典详情数组转字符串
+    arrayToString() {
+      let detailArray = ''
+      const details = this.details
+      let passFlag = true
+      details.forEach((detail, index) => {
+        if (detail.value === '' || detail.name === '') {
+          passFlag = false
+        }
+        detailArray += detail.value + ':' + detail.name + ':' + detail.num
+        if (index !== (details.length - 1)) {
+          detailArray += ';'
+        }
+      })
+      this.dictForm.dictValues = detailArray
+      return passFlag
+    },
+    // 重置表单
+    resetForm() {
+      this.dictForm = {
+        dictId: '',
+        dictCode: '',
+        dictName: '',
+        dictTips: '',
+        dictValues: ''
+      }
+      this.details = []
+    },
+    // 保存数据
+    saveData: function() {
+      const flag = this.arrayToString()
+      debugger
+      if (!flag) {
+        this.$message.warning('请将字典值和名称都填全后再进行保存')
+
+      } else {
+        if (this.dialogStatus === 'update') {
+          this.updateData()
+        } else if (this.dialogStatus === 'create') {
+          this.createData()
+        }
+      }
+    },
+    addDetail() {
+      this.details.push({
+        value: '',
+        name: '',
+        num: ''
+      })
+    },
+    deleteDetail(index) {
+      this.details.splice(index, 1)
+    },
+    // 新增数据
+    createData: function() {
+      this.$refs['dataForm'].validate((valid) => {
+        console.log(this.dictForm)
+        if (valid) {
+          addDict(this.dictForm).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) {
+          updateDict(this.dictForm).then(response => {
+            if (response.code === 200) {
+              this.$message.success('修改成功')
+              this.$emit('watchChild')
+              this.dialogFormVisible = false
+            }
+          })
+        }
+      })
+    },
+    cancel: function() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" >
+  .dict-dialog{
+    width:900px;
+    .divider{
+      height: 5px;
+      border-bottom: 1px dashed #e7eaec;
+      margin-bottom: 15px;
+    }
+  }
+</style>
diff --git a/src/views/system/dict/listDict.vue b/src/views/system/dict/listDict.vue
new file mode 100644
index 0000000..bcca9d1
--- /dev/null
+++ b/src/views/system/dict/listDict.vue
@@ -0,0 +1,217 @@
+<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.condition" 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('/dict/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('/dict/update')" type="warning" size="mini" @click="edit(scope.row)">修改</el-button>
+            <el-button v-if="hasPerm('/dict/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-dict v-show="dialogFormVisible" ref="editdict" @watchChild="fetchData"/>
+
+  </div>
+</template>
+
+<script>
+import { getDictList, delDict } from '@/api/dict'
+import EditDict from './editDict'
+
+export default {
+  name: 'ListDict',
+  components: { EditDict },
+  data() {
+    return {
+      listQuery: {
+        condition: '',
+        offset: 1,
+        limit: 20,
+        sort: '',
+        order: ''
+      }, // 筛选条件
+      columns: [
+        {
+          text: '字典名称',
+          value: 'name',
+          width: 180,
+          align: 'center'
+        },
+        {
+          text: '字典编号',
+          value: 'code',
+          width: 130,
+          align: 'center'
+        },
+        {
+          text: '字典描述',
+          value: 'tips',
+          width: 180,
+          align: 'center'
+        },
+        {
+          text: '字典详情',
+          value: 'detail',
+          align: 'center'
+        },
+        {
+          text: '字典排序',
+          value: 'num',
+          width: 80,
+          align: 'center'
+        }
+      ], // 显示列
+      list: [], // 列表数据
+      total: 0, // 数据总数
+      listLoading: true, // 加载动画
+      fullscreenLoading: false, // 全屏加载动画
+      dialogFormVisible: false // 是否显示编辑框
+    }
+  },
+  computed: {
+    'showOperate': function() { // 判断是否显示操作列，如果编辑和删除的权限都没有则不显示操作列
+      return this.hasPerm('/dict/update') || this.hasPerm('/dict/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.editdict.initDialog('create', this.dialogFormVisible)
+    },
+    // 编辑字典信息
+    edit(row) {
+      this.dialogFormVisible = true
+      this.editShow = true
+      this.$refs.editdict.initDialog('update', this.dialogFormVisible, row)
+    },
+    // 删除字典
+    del(row) {
+      this.$confirm(
+        '确定要删除字典吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        delDict(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
+      }
+      getDictList(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>