diff --git a/client/package.json b/client/package.json
index c26bf00..f48ca35 100644
--- a/client/package.json
+++ b/client/package.json
@@ -15,6 +15,7 @@
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
   },
   "dependencies": {
+    "@riophae/vue-treeselect": "^0.4.0",
     "axios": "0.18.1",
     "element-ui": "2.13.0",
     "file-saver": "^2.0.2",
diff --git a/client/src/api/dict.js b/client/src/api/dict.js
index df66187..d46429f 100644
--- a/client/src/api/dict.js
+++ b/client/src/api/dict.js
@@ -4,7 +4,7 @@ export function getDictTypeList(query) {
   return request({
     url: '/system/dicttype/',
     method: 'get',
-    params:query
+    params: query
   })
 }
 export function createDictType(data) {
@@ -32,7 +32,7 @@ export function getDictList(query) {
   return request({
     url: '/system/dict/',
     method: 'get',
-    params:query
+    params: query
   })
 }
 export function createDict(data) {
@@ -54,4 +54,4 @@ export function deleteDict(id) {
     url: `/system/dict/${id}/`,
     method: 'delete'
   })
-}
\ No newline at end of file
+}
diff --git a/client/src/api/file.js b/client/src/api/file.js
index e380b10..dd9e644 100644
--- a/client/src/api/file.js
+++ b/client/src/api/file.js
@@ -1,3 +1,3 @@
-export function uploadUrl(){
-    return process.env.VUE_APP_BASE_API + '/upload/'
-}
\ No newline at end of file
+export function uploadUrl() {
+  return process.env.VUE_APP_BASE_API + '/upload/'
+}
diff --git a/client/src/api/org.js b/client/src/api/org.js
index a931a3f..2880ec4 100644
--- a/client/src/api/org.js
+++ b/client/src/api/org.js
@@ -10,7 +10,7 @@ export function getOrgList(query) {
   return request({
     url: '/system/organization/',
     method: 'get',
-    params:query
+    params: query
   })
 }
 export function createOrg(data) {
@@ -32,4 +32,4 @@ export function deleteOrg(id) {
     url: `/system/organization/${id}/`,
     method: 'delete'
   })
-}
\ No newline at end of file
+}
diff --git a/client/src/api/position.js b/client/src/api/position.js
index 92b5548..2ea116f 100644
--- a/client/src/api/position.js
+++ b/client/src/api/position.js
@@ -1,6 +1,5 @@
 import request from '@/utils/request'
 
-
 export function getPositionAll() {
   return request({
     url: '/system/position/',
diff --git a/client/src/api/user.js b/client/src/api/user.js
index 2352e0d..2712ba4 100644
--- a/client/src/api/user.js
+++ b/client/src/api/user.js
@@ -15,7 +15,6 @@ export function logout() {
   })
 }
 
-
 export function getInfo() {
   return request({
     url: '/system/user/info/',
@@ -23,8 +22,6 @@ export function getInfo() {
   })
 }
 
-
-
 export function getUserList(query) {
   return request({
     url: '/system/user/',
diff --git a/client/src/main.js b/client/src/main.js
index 1f6594b..c404257 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -14,7 +14,6 @@ import router from './router'
 
 import '@/icons' // icon
 import '@/permission' // permission control
-
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api
@@ -31,7 +30,7 @@ if (process.env.NODE_ENV === 'production') {
 // set ElementUI lang to EN
 // Vue.use(ElementUI, { locale })
 // 如果想要中文版 element-ui，按如下方式声明
-Vue.use(ElementUI, { size: 'medium' });
+Vue.use(ElementUI, { size: 'medium' })
 
 Vue.config.productionTip = false
 
diff --git a/client/src/store/modules/user.js b/client/src/store/modules/user.js
index 3dba2c2..d75d478 100644
--- a/client/src/store/modules/user.js
+++ b/client/src/store/modules/user.js
@@ -41,7 +41,6 @@ const actions = {
         commit('SET_TOKEN', data.access)
         setToken(data.access)
         resolve()
-    
       }).catch(error => {
         reject(error)
       })
@@ -64,7 +63,7 @@ const actions = {
         if (!perms || perms.length <= 0) {
           reject('没有任何权限!')
         }
-        
+
         commit('SET_PERMS', perms)
         commit('SET_NAME', name)
         commit('SET_AVATAR', avatar)
diff --git a/client/src/utils/auth.js b/client/src/utils/auth.js
index 4a1c963..392db62 100644
--- a/client/src/utils/auth.js
+++ b/client/src/utils/auth.js
@@ -22,4 +22,4 @@ export function removeToken() {
 //     method: 'post',
 //     data
 //   })
-// }
\ No newline at end of file
+// }
diff --git a/client/src/utils/index.js b/client/src/utils/index.js
index 5b55a3e..cfdf23c 100644
--- a/client/src/utils/index.js
+++ b/client/src/utils/index.js
@@ -244,7 +244,7 @@ export function getTime(type) {
 export function debounce(func, wait, immediate) {
   let timeout, args, context, timestamp, result
 
-  const later = function () {
+  const later = function() {
     // 据上一次触发时间间隔
     const last = +new Date() - timestamp
 
@@ -261,7 +261,7 @@ export function debounce(func, wait, immediate) {
     }
   }
 
-  return function (...args) {
+  return function(...args) {
     context = this
     timestamp = +new Date()
     const callNow = immediate && !timeout
@@ -346,37 +346,36 @@ export function removeClass(ele, cls) {
   }
 }
 
-
 export function genTree(data) {
-  let result = []
+  const result = []
   if (!Array.isArray(data)) {
     return result
   }
   data.forEach(item => {
-    delete item.children;
-  });
-  let map = {};
+    delete item.children
+  })
+  const map = {}
   data.forEach(item => {
     item.label = item.name
     item.value = item.id
-    map[item.id] = item;
-  });
+    map[item.id] = item
+  })
   data.forEach(item => {
-    let parent = map[item.pid];
+    const parent = map[item.pid]
     if (parent) {
-      (parent.children || (parent.children = [])).push(item);
+      (parent.children || (parent.children = [])).push(item)
     } else {
-      result.push(item);
+      result.push(item)
     }
-  });
-  return result;
+  })
+  return result
 }
 
 const arrChange = arr => arr.map(item => {
-  const res = {};
-  for (let key in item) {
-    let _key = key === 'name' ? 'label' : key;
-    res[_key] = Array.isArray(item[key]) ? arrChange(item[key]) : item[key];
+  const res = {}
+  for (const key in item) {
+    const _key = key === 'name' ? 'label' : key
+    res[_key] = Array.isArray(item[key]) ? arrChange(item[key]) : item[key]
   }
   return res
-});
\ No newline at end of file
+})
diff --git a/client/src/utils/permission.js b/client/src/utils/permission.js
index 20b6aea..217bdeb 100644
--- a/client/src/utils/permission.js
+++ b/client/src/utils/permission.js
@@ -9,7 +9,7 @@ export default function checkPermission(value) {
   if (value && value instanceof Array && value.length > 0) {
     const perms = store.getters && store.getters.perms
     const permissionperms = value
-    if(perms.includes('admin')){
+    if (perms.includes('admin')) {
       return true
     } // 如果是超管,都可以操作
     const hasPermission = perms.some(perm => {
diff --git a/client/src/views/login/index.vue b/client/src/views/login/index.vue
index 5be3575..2568652 100644
--- a/client/src/views/login/index.vue
+++ b/client/src/views/login/index.vue
@@ -78,8 +78,8 @@ export default {
         password: ''
       },
       loginRules: {
-        username: [{ required: true, trigger: 'blur', message: "请输入账户" }],
-        password: [{ required: true, trigger: 'blur', validator: validatePassword, message: "请输入密码" }]
+        username: [{ required: true, trigger: 'blur', message: '请输入账户' }],
+        password: [{ required: true, trigger: 'blur', validator: validatePassword, message: '请输入密码' }]
       },
       loading: false,
       passwordType: 'password',
diff --git a/client/src/views/system/dict.vue b/client/src/views/system/dict.vue
index 895934c..50d41e9 100644
--- a/client/src/views/system/dict.vue
+++ b/client/src/views/system/dict.vue
@@ -2,9 +2,12 @@
   <div class="app-container">
     <el-row :gutter="10">
       <el-col :md="6">
-        <div style="margin-top:10px">
-        <el-button type="primary" icon="el-icon-plus" @click="handleAddDictType">新增</el-button>
-        </div>
+        <el-card>
+          <div slot="header" class="clearfix">
+    <span>字典类型</span>
+    <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-plus" @click="handleAddDictType" >新增</el-button>
+  </div>
+        
         <el-tree
           ref="tree"
           v-loading="treeLoding"
@@ -16,13 +19,35 @@
           :filter-node-method="filterNode"
           style="margin-top:10px;"
           @node-click="handleDictTypeClick"
-        />
+        >
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+        <span>{{ node.label }}</span>
+        <span>
+          <el-button
+            type="text"
+            size="mini"
+            @click="handleEditDictType(data)">
+            编辑
+          </el-button>
+          <!-- <el-button
+            type="text"
+            size="mini"
+            @click="handleDeleteDictType">
+            删除
+          </el-button> -->
+        </span>
+      </span>
+        </el-tree>
+        </el-card>
       </el-col>
       <el-col :md="18">
-        <div style="margin-top:10px">
-          <el-button type="primary" icon="el-icon-plus" @click="handleAddDict">新增</el-button>
-        </div>
+        <el-card>
+          <div slot="header" class="clearfix">
+    <span>字典详情</span>
+  </div>
+        <el-button v-show="listQuery.type" type="primary" icon="el-icon-plus" @click="handleAddDict" >新增</el-button>
         <el-table
+          v-show="listQuery.type"
           v-loading="listLoading"
           :data="dictList.results"
           style="width: 100%;margin-top:10px;"
@@ -65,7 +90,7 @@
             </template>
           </el-table-column>
         </el-table>
-
+        <p v-show="!listQuery.type">点击左侧类型查看字典</p>
         <pagination
           v-show="dictList.count>0"
           :total="dictList.count"
@@ -73,6 +98,7 @@
           :limit.sync="listQuery.page_size"
           @pagination="getList"
         />
+        </el-card>
       </el-col>
     </el-row>
 
@@ -84,6 +110,9 @@
         <el-form-item label="代号" prop="code">
           <el-input v-model="dicttype.code" placeholder="代号" />
         </el-form-item>
+        <el-form-item label="父级" prop="pid">
+          <treeselect v-model="dicttype.pid" :multiple="false" :options="dictTypeData" placeholder="父级"/>
+        </el-form-item>
       </el-form>
       <div style="text-align:right;">
         <el-button type="danger" @click="dgV1=false">取消</el-button>
@@ -106,11 +135,23 @@
     </el-dialog>
   </div>
 </template>
+<style>
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
+</style>
 <script>
 import { getDictTypeList, getDictList, createDictType, createDict, updateDictType, updateDict, deleteDictType, deleteDict } from '@/api/dict'
 import { genTree } from '@/utils'
 import checkPermission from '@/utils/permission'
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 
 const defaultDictType = {
   id: '',
@@ -126,16 +167,16 @@ const defaultDict = {
   type: null
 }
 export default {
-  components: { Pagination },
+  components: { Pagination, Treeselect },
   data() {
     return {
       dicttype: defaultDictType,
       dict: defaultDict,
-      dictList: {count:0},
+      dictList: { count: 0 },
       listLoading: true,
       listQuery: {
         page: 1,
-        page_size: 20,
+        page_size: 20
       },
       dgV1: false,
       dgT1: 'new',
@@ -177,11 +218,11 @@ export default {
     getList() {
       this.listLoading = true
       getDictList(this.listQuery).then(response => {
-        if (response.code>=200){
-          if (response.data.results){
-              this.dictList = response.data
+        if (response.code >= 200) {
+          if (response.data.results) {
+            this.dictList = response.data
           }
-        this.listLoading = false
+          this.listLoading = false
         }
       })
     },
@@ -202,42 +243,54 @@ export default {
     },
     handleAddDict() {
       this.dict = Object.assign({}, defaultDict)
+      this.dict.type = this.listQuery.type
       this.dgT2 = 'new'
       this.dgV2 = true
       this.$nextTick(() => {
         this.$refs['Form2'].clearValidate()
       })
     },
-    // handleEdit(scope) {
-    //   this.user = Object.assign({}, scope.row) // copy obj
-    //   this.dialogType = 'edit'
-    //   this.dialogVisible = true
-    //   this.$nextTick(() => {
-    //     this.$refs['Form'].clearValidate()
-    //   })
-    // },
-    // handleDelete(scope) {
-    //   this.$confirm('确认删除?', '警告', {
-    //     confirmButtonText: '确认',
-    //     cancelButtonText: '取消',
-    //     type: 'error'
-    //   })
-    //     .then(async() => {
-    //       await deleteUser(scope.row.id)
-    //       this.dictList.splice(scope.row.index, 1)
-    //       this.$message({
-    //         type: 'success',
-    //         message: '成功删除!'
-    //       })
-    //     })
-    //     .catch(err => {
-    //       console.error(err)
-    //     })
-    // },
+    handleEdit(scope) {
+      this.dict = Object.assign({}, scope.row) // copy obj
+      this.dgT2 = 'edit'
+      this.dgV2 = true
+      this.$nextTick(() => {
+        this.$refs['Form2'].clearValidate()
+      })
+    },
+    handleEditDictType(val) {
+      this.dicttype = val // copy obj
+      this.dgT1 = 'edit'
+      this.dgV1 = true
+      this.$nextTick(() => {
+        this.$refs['Form1'].clearValidate()
+      })
+
+    },
+    handleDelete(scope) {
+      this.$confirm('确认删除?', '警告', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'error'
+      })
+        .then(async() => {
+          const { code } = await deleteDict(scope.row.id)
+          if (code>=200){
+          this.dictList.results.splice(scope.row.index, 1)
+          this.$message({
+            type: 'success',
+            message: '成功删除!'
+          })
+          }
+        })
+        .catch(err => {
+          console.error(err)
+        })
+    },
     async confirm1(form) {
       this.$refs[form].validate(valid => {
         if (valid) {
-          const isEdit = this.dialogType === 'edit'
+          const isEdit = this.dgT1 === 'edit'
           if (isEdit) {
             updateDictType(this.dicttype.id, this.dicttype).then(res => {
               if (res.code >= 200) {
@@ -269,6 +322,42 @@ export default {
           return false
         }
       })
+    },
+    async confirm2(form) {
+      this.$refs[form].validate(valid => {
+        if (valid) {
+          const isEdit = this.dgT2 === 'edit'
+          if (isEdit) {
+            updateDict(this.dict.id, this.dict).then(res => {
+              if (res.code >= 200) {
+                this.getList()
+                this.dgV2 = false
+                this.$notify({
+                  title: '成功',
+                  message: '编辑成功',
+                  type: 'success',
+                  duration: 2000
+                })
+              }
+            })
+          } else {
+            createDict(this.dict).then(res => {
+              if (res.code >= 200) {
+                this.getList()
+                this.dgV2 = false
+                this.$notify({
+                  title: '成功',
+                  message: '新增成功',
+                  type: 'success',
+                  duration: 2000
+                })
+              }
+            })
+          }
+        } else {
+          return false
+        }
+      })
     }
   }
 }
diff --git a/client/src/views/system/position.vue b/client/src/views/system/position.vue
index 1955166..4ffd926 100644
--- a/client/src/views/system/position.vue
+++ b/client/src/views/system/position.vue
@@ -8,20 +8,20 @@
         class="filter-item"
         @keyup.native="handleFilter"
       />
-      <el-button type="primary" @click="handleAdd" icon="el-icon-plus">新增</el-button>
+      <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
     </div>
     <el-table
+      v-loading="listLoading"
       :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
       style="width: 100%;margin-top:10px;"
       border
       fit
       stripe
-      v-loading="listLoading"
       highlight-current-row
       max-height="600"
       row-key="id"
     >
-      <el-table-column type="index" width="50"></el-table-column>
+      <el-table-column type="index" width="50" />
       <el-table-column label="岗位名称">
         <template slot-scope="scope">{{ scope.row.name }}</template>
       </el-table-column>
@@ -35,28 +35,28 @@
           <el-button
             type="primary"
             size="small"
-            @click="handleEdit(scope)"
             icon="el-icon-edit"
             :disabled="!checkPermission(['position_update'])"
-          ></el-button>
+            @click="handleEdit(scope)"
+          />
           <el-button
             type="danger"
             size="small"
-            @click="handleDelete(scope)"
             icon="el-icon-delete"
             :disabled="!checkPermission(['position_delete'])"
-          ></el-button>
+            @click="handleDelete(scope)"
+          />
         </template>
       </el-table-column>
     </el-table>
 
     <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑岗位':'新增岗位'">
       <el-form
+        ref="Form"
         :model="position"
         label-width="80px"
         label-position="right"
         :rules="rule1"
-        ref="Form"
       >
         <el-form-item label="名称" prop="name">
           <el-input v-model="position.name" placeholder="名称" />
@@ -76,125 +76,125 @@ import {
   createPosition,
   deletePosition,
   updatePosition
-} from "@/api/position";
-import { genTree, deepClone } from "@/utils";
-import checkPermission from "@/utils/permission";
+} from '@/api/position'
+import { genTree, deepClone } from '@/utils'
+import checkPermission from '@/utils/permission'
 
 const defaultM = {
-  id: "",
-  name: ""
-};
+  id: '',
+  name: ''
+}
 export default {
   data() {
     return {
       position: {
-        id: "",
-        name: ""
+        id: '',
+        name: ''
       },
-      search: "",
+      search: '',
       tableData: [],
       positionList: [],
       listLoading: true,
       dialogVisible: false,
-      dialogType: "new",
+      dialogType: 'new',
       rule1: {
-        name: [{ required: true, message: "请输入名称", trigger: "blur" }]
+        name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
       }
-    };
+    }
   },
   computed: {},
   created() {
-    this.getList();
+    this.getList()
   },
   methods: {
     checkPermission,
     getList() {
-      this.listLoading = true;
+      this.listLoading = true
       getPositionAll().then(response => {
-        this.positionList = response.data;
-        this.tableData = response.data;
-        this.listLoading = false;
-      });
+        this.positionList = response.data
+        this.tableData = response.data
+        this.listLoading = false
+      })
     },
     resetFilter() {
-      this.getList();
+      this.getList()
     },
     handleFilter() {
       const newData = this.positionList.filter(
         data =>
           !this.search ||
           data.name.toLowerCase().includes(this.search.toLowerCase())
-      );
-      this.tableData = genTree(newData);
+      )
+      this.tableData = genTree(newData)
     },
     handleAdd() {
-      this.position = Object.assign({}, defaultM);
-      this.dialogType = "new";
-      this.dialogVisible = true;
+      this.position = Object.assign({}, defaultM)
+      this.dialogType = 'new'
+      this.dialogVisible = true
       this.$nextTick(() => {
-        this.$refs["Form"].clearValidate();
-      });
+        this.$refs['Form'].clearValidate()
+      })
     },
     handleEdit(scope) {
-      this.position = Object.assign({}, scope.row); // copy obj
-      this.dialogType = "edit";
-      this.dialogVisible = true;
+      this.position = Object.assign({}, scope.row) // copy obj
+      this.dialogType = 'edit'
+      this.dialogVisible = true
       this.$nextTick(() => {
-        this.$refs["Form"].clearValidate();
-      });
+        this.$refs['Form'].clearValidate()
+      })
     },
     handleDelete(scope) {
-      this.$confirm("确认删除?", "警告", {
-        confirmButtonText: "确认",
-        cancelButtonText: "取消",
-        type: "error"
+      this.$confirm('确认删除?', '警告', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'error'
       })
-        .then(async () => {
-          await deletePosition(scope.row.id);
-          this.getList();
+        .then(async() => {
+          await deletePosition(scope.row.id)
+          this.getList()
           this.$message({
-            type: "success",
-            message: "成功删除!"
-          });
+            type: 'success',
+            message: '成功删除!'
+          })
         })
         .catch(err => {
-          console.error(err);
-        });
+          console.error(err)
+        })
     },
     async confirm(form) {
       this.$refs[form].validate(valid => {
         if (valid) {
-          const isEdit = this.dialogType === "edit";
+          const isEdit = this.dialogType === 'edit'
           if (isEdit) {
             updatePosition(this.position.id, this.position).then(() => {
-              this.getList();
-              this.dialogVisible = false;
+              this.getList()
+              this.dialogVisible = false
               this.$notify({
-                title: "成功",
-                message: "编辑成功",
-                type: "success",
+                title: '成功',
+                message: '编辑成功',
+                type: 'success',
                 duration: 2000
-              });
-            });
+              })
+            })
           } else {
             createPosition(this.position).then(res => {
               // this.position = res.data
               // this.tableData.unshift(this.position)
-              this.getList();
-              this.dialogVisible = false;
+              this.getList()
+              this.dialogVisible = false
               this.$notify({
-                title: "成功",
-                message: "新增成功",
-                type: "success",
+                title: '成功',
+                message: '新增成功',
+                type: 'success',
                 duration: 2000
-              });
-            });
+              })
+            })
           }
         } else {
-          return false;
+          return false
         }
-      });
+      })
     }
   }
-};
+}
 </script>
diff --git a/client/src/views/system/user.vue b/client/src/views/system/user.vue
index 79c483b..92b623f 100644
--- a/client/src/views/system/user.vue
+++ b/client/src/views/system/user.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <el-row :gutter="10">
-      
+
       <el-col :md="6">
         <el-input v-model="filterOrgText" placeholder="输入部门名进行过滤" />
 
diff --git a/server/apps/system/views.py b/server/apps/system/views.py
index e80399f..fdfbd1d 100644
--- a/server/apps/system/views.py
+++ b/server/apps/system/views.py
@@ -65,7 +65,6 @@ class DictViewSet(ModelViewSet):
                  ]
     queryset = Dict.objects.all()
     serializer_class = DictSerializer
-    pagination_class = None
     search_fields = ['^name']
     ordering_fields = ['id']
     ordering = 'id'