dict complete

2020-05-12 10:17:07 +08:00 · 2020-05-12 10:17:07 +08:00 · 627b718d51
parent e266347d47
commit 627b718d51
16 changed files with 234 additions and 152 deletions
--- 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",
--- 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/',
--- 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/',
--- 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

--- 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)
      })
--- a/client/src/utils/index.js
+++ b/client/src/utils/index.js
@ -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
-});
+})
--- 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',
--- 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>
+        <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>
+        <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,7 +167,7 @@ const defaultDict = {
  type: null
 }
 export default {
-  components: { Pagination },
+  components: { Pagination, Treeselect },
  data() {
    return {
      dicttype: defaultDictType,
@ -135,7 +176,7 @@ export default {
      listLoading: true,
      listQuery: {
        page: 1,
-        page_size: 20,
+        page_size: 20
      },
      dgV1: false,
      dgT1: 'new',
@ -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
+        }
+      })
    }
  }
 }
--- 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();
+          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>
--- 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'