人员管理-单位管理功能开发
This commit is contained in:
aoli.qu
parent
d9b743f4df
commit
2d96581ee0
|
|
@ -0,0 +1,45 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
const orgApi = {
|
||||
add: 'sys/org/add',
|
||||
edit: 'sys/org/edit',
|
||||
del: 'sys/org/del',
|
||||
list: 'sys/org/list',
|
||||
page: 'sys/org/pageList',
|
||||
}
|
||||
|
||||
export function orgAdd (params) {
|
||||
return request({
|
||||
url: orgApi.add,
|
||||
method: 'post',
|
||||
data: params
|
||||
})
|
||||
}
|
||||
export function orgEdit (params) {
|
||||
return request({
|
||||
url: orgApi.edit,
|
||||
method: 'post',
|
||||
data: params
|
||||
})
|
||||
}
|
||||
export function orgDel (params) {
|
||||
return request({
|
||||
url: orgApi.del,
|
||||
method: 'post',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
export function orgList (params) {
|
||||
return request({
|
||||
url: orgApi.list,
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
export function orgPage (params) {
|
||||
return request({
|
||||
url: orgApi.page,
|
||||
method: 'get',
|
||||
params: params
|
||||
})
|
||||
}
|
||||
|
|
@ -34,3 +34,9 @@
|
|||
}
|
||||
}
|
||||
|
||||
.ant-layout-sider {
|
||||
flex: 0 0 230px !important;
|
||||
max-width: 230px !important;
|
||||
min-width: 230px !important;
|
||||
width: 230px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,205 @@
|
|||
<template>
|
||||
<a-modal
|
||||
:title="modalTitle"
|
||||
:width="900"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleSubmit"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-spin :spinning="formLoading">
|
||||
<a-form :form="form">
|
||||
|
||||
<a-form-item
|
||||
style="display: none;"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
has-feedback
|
||||
>
|
||||
<a-input v-decorator="['id']" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
label="机构名称"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
has-feedback
|
||||
>
|
||||
<a-input placeholder="请输入机构名称" v-decorator="['name', {rules: [{required: true, message: '请输入机构名称！'}]}]" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
label="唯一编码"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
has-feedback
|
||||
>
|
||||
<a-input placeholder="请输入唯一编码" v-decorator="['code', {rules: [{required: true, message: '请输入唯一编码！'}]}]" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
label="上级机构"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
has-feedback
|
||||
>
|
||||
<a-tree-select
|
||||
v-decorator="['pid', {rules: [{ required: true, message: '请选择上级机构！' }]}]"
|
||||
style="width: 100%"
|
||||
:dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
|
||||
:treeData="orgTree"
|
||||
placeholder="请选择上级机构"
|
||||
:replaceFields="replaceFields"
|
||||
>
|
||||
<span slot="title" slot-scope="{ id }">{{ id }}
|
||||
</span>
|
||||
</a-tree-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
label="排序"
|
||||
>
|
||||
<a-input-number placeholder="请输入排序" style="width: 100%" v-decorator="['sort', { initialValue: 100 }]" :min="1" :max="1000" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
label="备注"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
has-feedback
|
||||
>
|
||||
<a-textarea :rows="4" placeholder="请输入备注" v-decorator="['remark']"></a-textarea>
|
||||
</a-form-item>
|
||||
|
||||
</a-form>
|
||||
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { orgAdd, orgEdit, orgList } from '@/api/org/org'
|
||||
import { listToTree } from '@/utils/util'
|
||||
const rootParentId = 0
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 5 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 15 }
|
||||
},
|
||||
orgTree: [],
|
||||
modalTitle: "新增机构",
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
formLoading: true,
|
||||
replaceFields: {
|
||||
children:'children',
|
||||
title:'name',
|
||||
key:'id',
|
||||
value:'id'
|
||||
},
|
||||
form: this.$form.createForm(this)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 新增初始化方法
|
||||
add () {
|
||||
this.visible = true
|
||||
this.modalTitle = '新增机构'
|
||||
this.getOrgTree()
|
||||
},
|
||||
// 编辑初始化方法
|
||||
edit (record) {
|
||||
this.visible = true
|
||||
this.modalTitle = '编辑机构'
|
||||
this.getOrgTree()
|
||||
setTimeout(() => {
|
||||
this.form.setFieldsValue(
|
||||
{
|
||||
id: record.id,
|
||||
name: record.name,
|
||||
code: record.code,
|
||||
sort: record.sort,
|
||||
pid: record.pid,
|
||||
remark: record.remark
|
||||
}
|
||||
)
|
||||
}, 100)
|
||||
},
|
||||
/**
|
||||
* 获取机构树，并加载于表单中
|
||||
*/
|
||||
getOrgTree () {
|
||||
orgList().then((res) => {
|
||||
this.formLoading = false
|
||||
if (!res.code === 200) {
|
||||
this.orgTree = []
|
||||
return
|
||||
}
|
||||
const orgList = listToTree(res.data, [], rootParentId)
|
||||
this.orgTree = [{
|
||||
'id': '-1',
|
||||
'parentId': '0',
|
||||
'name': '顶级',
|
||||
'value': '0',
|
||||
'pid': '0',
|
||||
'children': orgList
|
||||
}]
|
||||
})
|
||||
},
|
||||
|
||||
handleSubmit () {
|
||||
const { form: { validateFields } } = this
|
||||
this.confirmLoading = true
|
||||
validateFields((errors, values) => {
|
||||
if (!errors) {
|
||||
if (values.id) {
|
||||
orgEdit(values).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('编辑成功')
|
||||
this.visible = false
|
||||
this.confirmLoading = false
|
||||
this.$emit('ok', values)
|
||||
this.form.resetFields()
|
||||
} else {
|
||||
this.$message.error('编辑失败：' + res.message)
|
||||
}
|
||||
}).finally((res) => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
} else {
|
||||
orgAdd(values).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('新增成功')
|
||||
this.visible = false
|
||||
this.confirmLoading = false
|
||||
this.$emit('ok', values)
|
||||
this.form.resetFields()
|
||||
} else {
|
||||
this.$message.error('新增失败：' + res.message)
|
||||
}
|
||||
}).finally((res) => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
}
|
||||
|
||||
} else {
|
||||
this.confirmLoading = false
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.form.resetFields()
|
||||
this.visible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
<template>
|
||||
<a-row :gutter="24" >
|
||||
<a-col :md="5" :sm="24" >
|
||||
<a-card :bordered="false" :loading="treeLoading">
|
||||
<div v-if="this.orgTree!='' ">
|
||||
<a-tree
|
||||
style="scroll:true"
|
||||
:treeData="orgTree"
|
||||
v-if="orgTree.length"
|
||||
@select="handleClick"
|
||||
:defaultExpandAll="true"
|
||||
:defaultExpandedKeys="defaultExpandedKeys"
|
||||
:replaceFields="replaceFields" />
|
||||
</div>
|
||||
<div v-else>
|
||||
<a-empty :image="simpleImage" />
|
||||
</div>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :md="19" :sm="24">
|
||||
<a-card :bordered="false">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="48">
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-form-item label="机构名称" >
|
||||
<a-input v-model="queryParam.name" allow-clear placeholder="请输入机构名称"/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="8" :sm="24">
|
||||
<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
|
||||
<a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
</a-card>
|
||||
<a-card :bordered="false">
|
||||
|
||||
<div class="table-operator">
|
||||
<a-button @click="$refs.orgForm.add()" icon="plus" type="primary" v-if="hasPerm('sys:org:add')">新增机构</a-button>
|
||||
</div>
|
||||
|
||||
<s-table
|
||||
ref="table"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
:rowKey="(record) => record.id"
|
||||
>
|
||||
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<a v-if="hasPerm('sys:org:edit')" @click="$refs.orgForm.edit(record)">编辑</a>
|
||||
<a-divider type="vertical" v-if="hasPerm('sys:org:edit') & hasPerm('sys:org:delete')"/>
|
||||
<a-popconfirm v-if="hasPerm('sys:org:delete')" placement="topRight" title="确认删除？" @confirm="() => singleDelete(record)">
|
||||
<a>删除</a>
|
||||
</a-popconfirm>
|
||||
</span>
|
||||
</s-table>
|
||||
<org-form ref="orgForm" @ok="handleOk" />
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<script>
|
||||
import { STable } from '@/components'
|
||||
import { Empty } from 'ant-design-vue'
|
||||
import { orgList, orgDel, orgPage } from '@/api/org/org'
|
||||
import OrgForm from './OrgForm'
|
||||
import { listToTree } from '@/utils/util'
|
||||
const rootParentId = 0
|
||||
|
||||
export default {
|
||||
components: {
|
||||
STable,
|
||||
OrgForm
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '机构名称',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '唯一编码',
|
||||
dataIndex: 'code'
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort'
|
||||
},
|
||||
{
|
||||
title: '备注',
|
||||
dataIndex: 'remark'
|
||||
}
|
||||
],
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: parameter => {
|
||||
return orgPage(Object.assign(parameter, this.queryParam)).then((res) => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
orgTree: [],
|
||||
selectedRowKeys: [],
|
||||
selectedRows: [],
|
||||
defaultExpandedKeys: [],
|
||||
// 搜索的三个参数
|
||||
expandedKeys: [],
|
||||
searchValue: '',
|
||||
autoExpandParent: true,
|
||||
treeLoading: true,
|
||||
simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
|
||||
replaceFields: {
|
||||
children: 'children',
|
||||
title: 'name',
|
||||
key: 'id',
|
||||
value: 'id'
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getOrgTree()
|
||||
if (this.hasPerm('sys:org:edit') || this.hasPerm('sys:org:del')) {
|
||||
this.columns.push({
|
||||
title: '操作',
|
||||
width: '150px',
|
||||
dataIndex: 'action',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 获取到机构树，展开顶级下树节点，考虑到后期数据量变大，不建议全部展开
|
||||
*/
|
||||
getOrgTree () {
|
||||
orgList(Object.assign(this.queryParam)).then(res => {
|
||||
this.treeLoading = false
|
||||
if (!res.code === 200 || !res.data.length) {
|
||||
return
|
||||
}
|
||||
console.log(res.data)
|
||||
this.orgTree = listToTree(res.data, [], rootParentId)
|
||||
console.log(this.orgTree)
|
||||
this.queryParam.parentId = this.orgTree[0].id
|
||||
// 全部展开，上面api方法提供的不生效，先用此方法
|
||||
for (var item of res.data) {
|
||||
if (item.parentId === 0) {
|
||||
this.defaultExpandedKeys.push(item.id)
|
||||
}
|
||||
}
|
||||
this.$refs.table.refresh()
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 删除
|
||||
*/
|
||||
sysOrgDelete (record) {
|
||||
orgDel({ id: record.id, deleteReason: '' }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('删除成功')
|
||||
this.getOrgTree()
|
||||
this.$refs.table.clearRefreshSelected()
|
||||
} else {
|
||||
this.$message.error('删除失败：' + res.message)
|
||||
}
|
||||
}).catch((err) => {
|
||||
this.$message.error('删除错误：' + err.message)
|
||||
})
|
||||
},
|
||||
handleClick (e) {
|
||||
this.queryParam = {
|
||||
pid: e.toString()
|
||||
}
|
||||
this.$refs.table.refresh(true)
|
||||
},
|
||||
handleOk () {
|
||||
this.getOrgTree()
|
||||
this.$refs.table.refresh()
|
||||
},
|
||||
onSelectChange (selectedRowKeys, selectedRows) {
|
||||
this.selectedRowKeys = selectedRowKeys
|
||||
this.selectedRows = selectedRows
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less">
|
||||
.table-operator {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
button {
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,168 +0,0 @@
|
|||
<template>
|
||||
<a-card :bordered="false" :style="{ height: '100%' }">
|
||||
<a-row :gutter="24">
|
||||
<a-col :md="4">
|
||||
<a-list itemLayout="vertical" :dataSource="roles">
|
||||
<a-list-item slot="renderItem" slot-scope="item, index" :key="index">
|
||||
<a-list-item-meta :style="{ marginBottom: '0' }">
|
||||
<span slot="description" style="text-align: center; display: block">{{ item.describe }}</span>
|
||||
<a slot="title" style="text-align: center; display: block" @click="edit(item)">{{ item.name }}</a>
|
||||
</a-list-item-meta>
|
||||
</a-list-item>
|
||||
</a-list>
|
||||
</a-col>
|
||||
<a-col :md="20">
|
||||
<div style="max-width: 800px">
|
||||
<a-divider v-if="isMobile()" />
|
||||
<div v-if="mdl.id">
|
||||
<h3>角色：{{ mdl.name }}</h3>
|
||||
</div>
|
||||
<a-form :form="form" :layout="isMobile() ? 'vertical' : 'horizontal'">
|
||||
<a-form-item label="唯一键">
|
||||
<a-input v-decorator="[ 'id', {rules: [{ required: true, message: 'Please input unique key!' }]} ]" placeholder="请填写唯一键" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="角色名称">
|
||||
<a-input v-decorator="[ 'name', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="状态">
|
||||
<a-select v-decorator="[ 'status', {rules: []} ]">
|
||||
<a-select-option :value="1">正常</a-select-option>
|
||||
<a-select-option :value="2">禁用</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="备注说明">
|
||||
<a-textarea :row="3" v-decorator="[ 'describe', {rules: [{ required: true, message: 'Please input role name!' }]} ]" placeholder="请填写角色名称" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="拥有权限">
|
||||
<a-row :gutter="16" v-for="(permission, index) in permissions" :key="index">
|
||||
<a-col :xl="4" :lg="24">
|
||||
{{ permission.name }}：
|
||||
</a-col>
|
||||
<a-col :xl="20" :lg="24">
|
||||
<a-checkbox
|
||||
v-if="permission.actionsOptions.length > 0"
|
||||
:indeterminate="permission.indeterminate"
|
||||
:checked="permission.checkedAll"
|
||||
@change="onChangeCheckAll($event, permission)">
|
||||
全选
|
||||
</a-checkbox>
|
||||
<a-checkbox-group :options="permission.actionsOptions" v-model="permission.selected" @change="onChangeCheck(permission)" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import pick from 'lodash.pick'
|
||||
import { getRoleList, getPermissions } from '@/api/manage'
|
||||
import { actionToObject } from '@/utils/permissions'
|
||||
import { baseMixin } from '@/store/app-mixin'
|
||||
|
||||
export default {
|
||||
name: 'RoleList',
|
||||
mixins: [baseMixin],
|
||||
components: {},
|
||||
data () {
|
||||
return {
|
||||
form: this.$form.createForm(this),
|
||||
mdl: {},
|
||||
|
||||
roles: [],
|
||||
permissions: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
getRoleList().then((res) => {
|
||||
this.roles = res.result.data
|
||||
this.roles.push({
|
||||
id: '-1',
|
||||
name: '新增角色',
|
||||
describe: '新增一个角色'
|
||||
})
|
||||
console.log('this.roles', this.roles)
|
||||
})
|
||||
this.loadPermissions()
|
||||
},
|
||||
methods: {
|
||||
callback (val) {
|
||||
console.log(val)
|
||||
},
|
||||
|
||||
add () {
|
||||
this.edit({ id: 0 })
|
||||
},
|
||||
|
||||
edit (record) {
|
||||
this.mdl = Object.assign({}, record)
|
||||
// 有权限表，处理勾选
|
||||
if (this.mdl.permissions && this.permissions) {
|
||||
// 先处理要勾选的权限结构
|
||||
const permissionsAction = {}
|
||||
this.mdl.permissions.forEach(permission => {
|
||||
permissionsAction[permission.permissionId] = permission.actionEntitySet.map(entity => entity.action)
|
||||
})
|
||||
|
||||
console.log('permissionsAction', permissionsAction)
|
||||
// 把权限表遍历一遍，设定要勾选的权限 action
|
||||
this.permissions.forEach(permission => {
|
||||
const selected = permissionsAction[permission.id]
|
||||
permission.selected = selected || []
|
||||
this.onChangeCheck(permission)
|
||||
})
|
||||
|
||||
console.log('this.permissions', this.permissions)
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.form.setFieldsValue(pick(this.mdl, 'id', 'name', 'status', 'describe'))
|
||||
})
|
||||
console.log('this.mdl', this.mdl)
|
||||
},
|
||||
|
||||
onChangeCheck (permission) {
|
||||
permission.indeterminate = !!permission.selected.length && (permission.selected.length < permission.actionsOptions.length)
|
||||
permission.checkedAll = permission.selected.length === permission.actionsOptions.length
|
||||
},
|
||||
onChangeCheckAll (e, permission) {
|
||||
console.log('permission:', permission)
|
||||
|
||||
Object.assign(permission, {
|
||||
selected: e.target.checked ? permission.actionsOptions.map(obj => obj.value) : [],
|
||||
indeterminate: false,
|
||||
checkedAll: e.target.checked
|
||||
})
|
||||
},
|
||||
loadPermissions () {
|
||||
getPermissions().then(res => {
|
||||
const result = res.result
|
||||
this.permissions = result.map(permission => {
|
||||
const options = actionToObject(permission.actionData)
|
||||
permission.checkedAll = false
|
||||
permission.selected = []
|
||||
permission.indeterminate = false
|
||||
permission.actionsOptions = options.map(option => {
|
||||
return {
|
||||
label: option.describe,
|
||||
value: option.action
|
||||
}
|
||||
})
|
||||
return permission
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -67,7 +67,6 @@
|
|||
:dropdownStyle="{ maxHeight: '300px', overflow: 'auto' }"
|
||||
:treeData="menuTreeData"
|
||||
placeholder="请选择父级菜单"
|
||||
treeDefaultExpandAll
|
||||
:replaceFields="{
|
||||
children:'children',
|
||||
title:'name',
|
||||
|
|
|
|||
Loading…
Reference in New Issue