dict complete

This commit is contained in:
caoqianming 2020-05-12 10:17:07 +08:00
parent e266347d47
commit 627b718d51
16 changed files with 234 additions and 152 deletions

View File

@ -15,6 +15,7 @@
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml" "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
}, },
"dependencies": { "dependencies": {
"@riophae/vue-treeselect": "^0.4.0",
"axios": "0.18.1", "axios": "0.18.1",
"element-ui": "2.13.0", "element-ui": "2.13.0",
"file-saver": "^2.0.2", "file-saver": "^2.0.2",

View File

@ -4,7 +4,7 @@ export function getDictTypeList(query) {
return request({ return request({
url: '/system/dicttype/', url: '/system/dicttype/',
method: 'get', method: 'get',
params:query params: query
}) })
} }
export function createDictType(data) { export function createDictType(data) {
@ -32,7 +32,7 @@ export function getDictList(query) {
return request({ return request({
url: '/system/dict/', url: '/system/dict/',
method: 'get', method: 'get',
params:query params: query
}) })
} }
export function createDict(data) { export function createDict(data) {
@ -54,4 +54,4 @@ export function deleteDict(id) {
url: `/system/dict/${id}/`, url: `/system/dict/${id}/`,
method: 'delete' method: 'delete'
}) })
} }

View File

@ -1,3 +1,3 @@
export function uploadUrl(){ export function uploadUrl() {
return process.env.VUE_APP_BASE_API + '/upload/' return process.env.VUE_APP_BASE_API + '/upload/'
} }

View File

@ -10,7 +10,7 @@ export function getOrgList(query) {
return request({ return request({
url: '/system/organization/', url: '/system/organization/',
method: 'get', method: 'get',
params:query params: query
}) })
} }
export function createOrg(data) { export function createOrg(data) {
@ -32,4 +32,4 @@ export function deleteOrg(id) {
url: `/system/organization/${id}/`, url: `/system/organization/${id}/`,
method: 'delete' method: 'delete'
}) })
} }

View File

@ -1,6 +1,5 @@
import request from '@/utils/request' import request from '@/utils/request'
export function getPositionAll() { export function getPositionAll() {
return request({ return request({
url: '/system/position/', url: '/system/position/',

View File

@ -15,7 +15,6 @@ export function logout() {
}) })
} }
export function getInfo() { export function getInfo() {
return request({ return request({
url: '/system/user/info/', url: '/system/user/info/',
@ -23,8 +22,6 @@ export function getInfo() {
}) })
} }
export function getUserList(query) { export function getUserList(query) {
return request({ return request({
url: '/system/user/', url: '/system/user/',

View File

@ -14,7 +14,6 @@ import router from './router'
import '@/icons' // icon import '@/icons' // icon
import '@/permission' // permission control import '@/permission' // permission control
/** /**
* If you don't want to use mock-server * If you don't want to use mock-server
* you want to use MockJs for mock api * you want to use MockJs for mock api
@ -31,7 +30,7 @@ if (process.env.NODE_ENV === 'production') {
// set ElementUI lang to EN // set ElementUI lang to EN
// Vue.use(ElementUI, { locale }) // Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui按如下方式声明 // 如果想要中文版 element-ui按如下方式声明
Vue.use(ElementUI, { size: 'medium' }); Vue.use(ElementUI, { size: 'medium' })
Vue.config.productionTip = false Vue.config.productionTip = false

View File

@ -41,7 +41,6 @@ const actions = {
commit('SET_TOKEN', data.access) commit('SET_TOKEN', data.access)
setToken(data.access) setToken(data.access)
resolve() resolve()
}).catch(error => { }).catch(error => {
reject(error) reject(error)
}) })
@ -64,7 +63,7 @@ const actions = {
if (!perms || perms.length <= 0) { if (!perms || perms.length <= 0) {
reject('没有任何权限!') reject('没有任何权限!')
} }
commit('SET_PERMS', perms) commit('SET_PERMS', perms)
commit('SET_NAME', name) commit('SET_NAME', name)
commit('SET_AVATAR', avatar) commit('SET_AVATAR', avatar)

View File

@ -22,4 +22,4 @@ export function removeToken() {
// method: 'post', // method: 'post',
// data // data
// }) // })
// } // }

View File

@ -244,7 +244,7 @@ export function getTime(type) {
export function debounce(func, wait, immediate) { export function debounce(func, wait, immediate) {
let timeout, args, context, timestamp, result let timeout, args, context, timestamp, result
const later = function () { const later = function() {
// 据上一次触发时间间隔 // 据上一次触发时间间隔
const last = +new Date() - timestamp const last = +new Date() - timestamp
@ -261,7 +261,7 @@ export function debounce(func, wait, immediate) {
} }
} }
return function (...args) { return function(...args) {
context = this context = this
timestamp = +new Date() timestamp = +new Date()
const callNow = immediate && !timeout const callNow = immediate && !timeout
@ -346,37 +346,36 @@ export function removeClass(ele, cls) {
} }
} }
export function genTree(data) { export function genTree(data) {
let result = [] const result = []
if (!Array.isArray(data)) { if (!Array.isArray(data)) {
return result return result
} }
data.forEach(item => { data.forEach(item => {
delete item.children; delete item.children
}); })
let map = {}; const map = {}
data.forEach(item => { data.forEach(item => {
item.label = item.name item.label = item.name
item.value = item.id item.value = item.id
map[item.id] = item; map[item.id] = item
}); })
data.forEach(item => { data.forEach(item => {
let parent = map[item.pid]; const parent = map[item.pid]
if (parent) { if (parent) {
(parent.children || (parent.children = [])).push(item); (parent.children || (parent.children = [])).push(item)
} else { } else {
result.push(item); result.push(item)
} }
}); })
return result; return result
} }
const arrChange = arr => arr.map(item => { const arrChange = arr => arr.map(item => {
const res = {}; const res = {}
for (let key in item) { for (const key in item) {
let _key = key === 'name' ? 'label' : key; const _key = key === 'name' ? 'label' : key
res[_key] = Array.isArray(item[key]) ? arrChange(item[key]) : item[key]; res[_key] = Array.isArray(item[key]) ? arrChange(item[key]) : item[key]
} }
return res return res
}); })

View File

@ -9,7 +9,7 @@ export default function checkPermission(value) {
if (value && value instanceof Array && value.length > 0) { if (value && value instanceof Array && value.length > 0) {
const perms = store.getters && store.getters.perms const perms = store.getters && store.getters.perms
const permissionperms = value const permissionperms = value
if(perms.includes('admin')){ if (perms.includes('admin')) {
return true return true
} // 如果是超管,都可以操作 } // 如果是超管,都可以操作
const hasPermission = perms.some(perm => { const hasPermission = perms.some(perm => {

View File

@ -78,8 +78,8 @@ export default {
password: '' password: ''
}, },
loginRules: { loginRules: {
username: [{ required: true, trigger: 'blur', message: "请输入账户" }], username: [{ required: true, trigger: 'blur', message: '请输入账户' }],
password: [{ required: true, trigger: 'blur', validator: validatePassword, message: "请输入密码" }] password: [{ required: true, trigger: 'blur', validator: validatePassword, message: '请输入密码' }]
}, },
loading: false, loading: false,
passwordType: 'password', passwordType: 'password',

View File

@ -2,9 +2,12 @@
<div class="app-container"> <div class="app-container">
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :md="6"> <el-col :md="6">
<div style="margin-top:10px"> <el-card>
<el-button type="primary" icon="el-icon-plus" @click="handleAddDictType">新增</el-button> <div slot="header" class="clearfix">
</div> <span>字典类型</span>
<el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-plus" @click="handleAddDictType" >新增</el-button>
</div>
<el-tree <el-tree
ref="tree" ref="tree"
v-loading="treeLoding" v-loading="treeLoding"
@ -16,13 +19,35 @@
:filter-node-method="filterNode" :filter-node-method="filterNode"
style="margin-top:10px;" style="margin-top:10px;"
@node-click="handleDictTypeClick" @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>
<el-col :md="18"> <el-col :md="18">
<div style="margin-top:10px"> <el-card>
<el-button type="primary" icon="el-icon-plus" @click="handleAddDict">新增</el-button> <div slot="header" class="clearfix">
</div> <span>字典详情</span>
</div>
<el-button v-show="listQuery.type" type="primary" icon="el-icon-plus" @click="handleAddDict" >新增</el-button>
<el-table <el-table
v-show="listQuery.type"
v-loading="listLoading" v-loading="listLoading"
:data="dictList.results" :data="dictList.results"
style="width: 100%;margin-top:10px;" style="width: 100%;margin-top:10px;"
@ -65,7 +90,7 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<p v-show="!listQuery.type">点击左侧类型查看字典</p>
<pagination <pagination
v-show="dictList.count>0" v-show="dictList.count>0"
:total="dictList.count" :total="dictList.count"
@ -73,6 +98,7 @@
:limit.sync="listQuery.page_size" :limit.sync="listQuery.page_size"
@pagination="getList" @pagination="getList"
/> />
</el-card>
</el-col> </el-col>
</el-row> </el-row>
@ -84,6 +110,9 @@
<el-form-item label="代号" prop="code"> <el-form-item label="代号" prop="code">
<el-input v-model="dicttype.code" placeholder="代号" /> <el-input v-model="dicttype.code" placeholder="代号" />
</el-form-item> </el-form-item>
<el-form-item label="父级" prop="pid">
<treeselect v-model="dicttype.pid" :multiple="false" :options="dictTypeData" placeholder="父级"/>
</el-form-item>
</el-form> </el-form>
<div style="text-align:right;"> <div style="text-align:right;">
<el-button type="danger" @click="dgV1=false">取消</el-button> <el-button type="danger" @click="dgV1=false">取消</el-button>
@ -106,11 +135,23 @@
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<style>
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
</style>
<script> <script>
import { getDictTypeList, getDictList, createDictType, createDict, updateDictType, updateDict, deleteDictType, deleteDict } from '@/api/dict' import { getDictTypeList, getDictList, createDictType, createDict, updateDictType, updateDict, deleteDictType, deleteDict } from '@/api/dict'
import { genTree } from '@/utils' import { genTree } from '@/utils'
import checkPermission from '@/utils/permission' import checkPermission from '@/utils/permission'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination 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 = { const defaultDictType = {
id: '', id: '',
@ -126,16 +167,16 @@ const defaultDict = {
type: null type: null
} }
export default { export default {
components: { Pagination }, components: { Pagination, Treeselect },
data() { data() {
return { return {
dicttype: defaultDictType, dicttype: defaultDictType,
dict: defaultDict, dict: defaultDict,
dictList: {count:0}, dictList: { count: 0 },
listLoading: true, listLoading: true,
listQuery: { listQuery: {
page: 1, page: 1,
page_size: 20, page_size: 20
}, },
dgV1: false, dgV1: false,
dgT1: 'new', dgT1: 'new',
@ -177,11 +218,11 @@ export default {
getList() { getList() {
this.listLoading = true this.listLoading = true
getDictList(this.listQuery).then(response => { getDictList(this.listQuery).then(response => {
if (response.code>=200){ if (response.code >= 200) {
if (response.data.results){ if (response.data.results) {
this.dictList = response.data this.dictList = response.data
} }
this.listLoading = false this.listLoading = false
} }
}) })
}, },
@ -202,42 +243,54 @@ export default {
}, },
handleAddDict() { handleAddDict() {
this.dict = Object.assign({}, defaultDict) this.dict = Object.assign({}, defaultDict)
this.dict.type = this.listQuery.type
this.dgT2 = 'new' this.dgT2 = 'new'
this.dgV2 = true this.dgV2 = true
this.$nextTick(() => { this.$nextTick(() => {
this.$refs['Form2'].clearValidate() this.$refs['Form2'].clearValidate()
}) })
}, },
// handleEdit(scope) { handleEdit(scope) {
// this.user = Object.assign({}, scope.row) // copy obj this.dict = Object.assign({}, scope.row) // copy obj
// this.dialogType = 'edit' this.dgT2 = 'edit'
// this.dialogVisible = true this.dgV2 = true
// this.$nextTick(() => { this.$nextTick(() => {
// this.$refs['Form'].clearValidate() this.$refs['Form2'].clearValidate()
// }) })
// }, },
// handleDelete(scope) { handleEditDictType(val) {
// this.$confirm('确认删除?', '警告', { this.dicttype = val // copy obj
// confirmButtonText: '确认', this.dgT1 = 'edit'
// cancelButtonText: '取消', this.dgV1 = true
// type: 'error' this.$nextTick(() => {
// }) this.$refs['Form1'].clearValidate()
// .then(async() => { })
// await deleteUser(scope.row.id)
// this.dictList.splice(scope.row.index, 1) },
// this.$message({ handleDelete(scope) {
// type: 'success', this.$confirm('确认删除?', '警告', {
// message: '成功删除!' confirmButtonText: '确认',
// }) cancelButtonText: '取消',
// }) type: 'error'
// .catch(err => { })
// console.error(err) .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) { async confirm1(form) {
this.$refs[form].validate(valid => { this.$refs[form].validate(valid => {
if (valid) { if (valid) {
const isEdit = this.dialogType === 'edit' const isEdit = this.dgT1 === 'edit'
if (isEdit) { if (isEdit) {
updateDictType(this.dicttype.id, this.dicttype).then(res => { updateDictType(this.dicttype.id, this.dicttype).then(res => {
if (res.code >= 200) { if (res.code >= 200) {
@ -269,6 +322,42 @@ export default {
return false 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
}
})
} }
} }
} }

View File

@ -8,20 +8,20 @@
class="filter-item" class="filter-item"
@keyup.native="handleFilter" @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> </div>
<el-table <el-table
v-loading="listLoading"
:data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
style="width: 100%;margin-top:10px;" style="width: 100%;margin-top:10px;"
border border
fit fit
stripe stripe
v-loading="listLoading"
highlight-current-row highlight-current-row
max-height="600" max-height="600"
row-key="id" row-key="id"
> >
<el-table-column type="index" width="50"></el-table-column> <el-table-column type="index" width="50" />
<el-table-column label="岗位名称"> <el-table-column label="岗位名称">
<template slot-scope="scope">{{ scope.row.name }}</template> <template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column> </el-table-column>
@ -35,28 +35,28 @@
<el-button <el-button
type="primary" type="primary"
size="small" size="small"
@click="handleEdit(scope)"
icon="el-icon-edit" icon="el-icon-edit"
:disabled="!checkPermission(['position_update'])" :disabled="!checkPermission(['position_update'])"
></el-button> @click="handleEdit(scope)"
/>
<el-button <el-button
type="danger" type="danger"
size="small" size="small"
@click="handleDelete(scope)"
icon="el-icon-delete" icon="el-icon-delete"
:disabled="!checkPermission(['position_delete'])" :disabled="!checkPermission(['position_delete'])"
></el-button> @click="handleDelete(scope)"
/>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑岗位':'新增岗位'"> <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑岗位':'新增岗位'">
<el-form <el-form
ref="Form"
:model="position" :model="position"
label-width="80px" label-width="80px"
label-position="right" label-position="right"
:rules="rule1" :rules="rule1"
ref="Form"
> >
<el-form-item label="名称" prop="name"> <el-form-item label="名称" prop="name">
<el-input v-model="position.name" placeholder="名称" /> <el-input v-model="position.name" placeholder="名称" />
@ -76,125 +76,125 @@ import {
createPosition, createPosition,
deletePosition, deletePosition,
updatePosition updatePosition
} from "@/api/position"; } from '@/api/position'
import { genTree, deepClone } from "@/utils"; import { genTree, deepClone } from '@/utils'
import checkPermission from "@/utils/permission"; import checkPermission from '@/utils/permission'
const defaultM = { const defaultM = {
id: "", id: '',
name: "" name: ''
}; }
export default { export default {
data() { data() {
return { return {
position: { position: {
id: "", id: '',
name: "" name: ''
}, },
search: "", search: '',
tableData: [], tableData: [],
positionList: [], positionList: [],
listLoading: true, listLoading: true,
dialogVisible: false, dialogVisible: false,
dialogType: "new", dialogType: 'new',
rule1: { rule1: {
name: [{ required: true, message: "请输入名称", trigger: "blur" }] name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
} }
}; }
}, },
computed: {}, computed: {},
created() { created() {
this.getList(); this.getList()
}, },
methods: { methods: {
checkPermission, checkPermission,
getList() { getList() {
this.listLoading = true; this.listLoading = true
getPositionAll().then(response => { getPositionAll().then(response => {
this.positionList = response.data; this.positionList = response.data
this.tableData = response.data; this.tableData = response.data
this.listLoading = false; this.listLoading = false
}); })
}, },
resetFilter() { resetFilter() {
this.getList(); this.getList()
}, },
handleFilter() { handleFilter() {
const newData = this.positionList.filter( const newData = this.positionList.filter(
data => data =>
!this.search || !this.search ||
data.name.toLowerCase().includes(this.search.toLowerCase()) data.name.toLowerCase().includes(this.search.toLowerCase())
); )
this.tableData = genTree(newData); this.tableData = genTree(newData)
}, },
handleAdd() { handleAdd() {
this.position = Object.assign({}, defaultM); this.position = Object.assign({}, defaultM)
this.dialogType = "new"; this.dialogType = 'new'
this.dialogVisible = true; this.dialogVisible = true
this.$nextTick(() => { this.$nextTick(() => {
this.$refs["Form"].clearValidate(); this.$refs['Form'].clearValidate()
}); })
}, },
handleEdit(scope) { handleEdit(scope) {
this.position = Object.assign({}, scope.row); // copy obj this.position = Object.assign({}, scope.row) // copy obj
this.dialogType = "edit"; this.dialogType = 'edit'
this.dialogVisible = true; this.dialogVisible = true
this.$nextTick(() => { this.$nextTick(() => {
this.$refs["Form"].clearValidate(); this.$refs['Form'].clearValidate()
}); })
}, },
handleDelete(scope) { handleDelete(scope) {
this.$confirm("确认删除?", "警告", { this.$confirm('确认删除?', '警告', {
confirmButtonText: "确认", confirmButtonText: '确认',
cancelButtonText: "取消", cancelButtonText: '取消',
type: "error" type: 'error'
}) })
.then(async () => { .then(async() => {
await deletePosition(scope.row.id); await deletePosition(scope.row.id)
this.getList(); this.getList()
this.$message({ this.$message({
type: "success", type: 'success',
message: "成功删除!" message: '成功删除!'
}); })
}) })
.catch(err => { .catch(err => {
console.error(err); console.error(err)
}); })
}, },
async confirm(form) { async confirm(form) {
this.$refs[form].validate(valid => { this.$refs[form].validate(valid => {
if (valid) { if (valid) {
const isEdit = this.dialogType === "edit"; const isEdit = this.dialogType === 'edit'
if (isEdit) { if (isEdit) {
updatePosition(this.position.id, this.position).then(() => { updatePosition(this.position.id, this.position).then(() => {
this.getList(); this.getList()
this.dialogVisible = false; this.dialogVisible = false
this.$notify({ this.$notify({
title: "成功", title: '成功',
message: "编辑成功", message: '编辑成功',
type: "success", type: 'success',
duration: 2000 duration: 2000
}); })
}); })
} else { } else {
createPosition(this.position).then(res => { createPosition(this.position).then(res => {
// this.position = res.data // this.position = res.data
// this.tableData.unshift(this.position) // this.tableData.unshift(this.position)
this.getList(); this.getList()
this.dialogVisible = false; this.dialogVisible = false
this.$notify({ this.$notify({
title: "成功", title: '成功',
message: "新增成功", message: '新增成功',
type: "success", type: 'success',
duration: 2000 duration: 2000
}); })
}); })
} }
} else { } else {
return false; return false
} }
}); })
} }
} }
}; }
</script> </script>

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :md="6"> <el-col :md="6">
<el-input v-model="filterOrgText" placeholder="输入部门名进行过滤" /> <el-input v-model="filterOrgText" placeholder="输入部门名进行过滤" />

View File

@ -65,7 +65,6 @@ class DictViewSet(ModelViewSet):
] ]
queryset = Dict.objects.all() queryset = Dict.objects.all()
serializer_class = DictSerializer serializer_class = DictSerializer
pagination_class = None
search_fields = ['^name'] search_fields = ['^name']
ordering_fields = ['id'] ordering_fields = ['id']
ordering = 'id' ordering = 'id'