新增系统模块
This commit is contained in:
wuyanwen
parent
fcc2e04b85
commit
a634aa4f93
@ -0,0 +1,37 @@
|
||||
/**
|
||||
* 用户管理模块
|
||||
*
|
||||
*/
|
||||
|
||||
import { axios } from '@/utils/request'
|
||||
|
||||
export function getTables (parameter) {
|
||||
return axios({
|
||||
url: '/tables',
|
||||
method: 'get',
|
||||
params: parameter
|
||||
})
|
||||
}
|
||||
|
||||
export function optimize (parameter) {
|
||||
return axios({
|
||||
url: '/table/optimize',
|
||||
method: 'post',
|
||||
data: parameter
|
||||
})
|
||||
}
|
||||
|
||||
export function backup (parameter) {
|
||||
return axios({
|
||||
url: '/table/backup',
|
||||
method: 'post',
|
||||
data: parameter
|
||||
})
|
||||
}
|
||||
|
||||
export function read (table) {
|
||||
return axios({
|
||||
url: '/table/view/' + table,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
44
view/catch-admin/src/api/permission.js
Normal file
44
view/catch-admin/src/api/permission.js
Normal file
@ -0,0 +1,44 @@
|
||||
/**
|
||||
* 用户管理模块
|
||||
*
|
||||
*/
|
||||
|
||||
import { axios } from '@/utils/request'
|
||||
|
||||
export function getPermissionList (parameter) {
|
||||
return axios({
|
||||
url: '/permissions',
|
||||
method: 'get',
|
||||
params: parameter
|
||||
})
|
||||
}
|
||||
|
||||
export function store (parameter) {
|
||||
return axios({
|
||||
url: '/permissions',
|
||||
method: 'post',
|
||||
data: parameter
|
||||
})
|
||||
}
|
||||
|
||||
export function read (id) {
|
||||
return axios({
|
||||
url: '/permissions/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
export function update (id, parameter) {
|
||||
return axios({
|
||||
url: '/permissions/' + id,
|
||||
method: 'put',
|
||||
data: parameter
|
||||
})
|
||||
}
|
||||
|
||||
export function del (id) {
|
||||
return axios({
|
||||
url: '/permissions/' + id,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
@ -94,6 +94,50 @@ export const asyncRouterMap = [
|
||||
hideChildrenInMenu: true, // 强制显示 MenuItem 而不是 SubMenu
|
||||
component: () => import('@/views/permissions/roles/roles'),
|
||||
meta: { title: '角色管理', keepAlive: true, permission: [ 'permission' ] }
|
||||
},
|
||||
{
|
||||
path: '/permissions/rules',
|
||||
name: 'rules',
|
||||
hideChildrenInMenu: true, // 强制显示 MenuItem 而不是 SubMenu
|
||||
component: () => import('@/views/permissions/rules/rules'),
|
||||
meta: { title: '菜单管理', keepAlive: true, permission: [ 'permission' ] }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/system',
|
||||
name: 'system',
|
||||
component: PageView,
|
||||
redirect: '/system',
|
||||
meta: { title: '系统管理', icon: 'table', system: [ 'system' ] },
|
||||
children: [
|
||||
{
|
||||
path: '/system/database',
|
||||
name: 'database',
|
||||
hideChildrenInMenu: true, // 强制显示 MenuItem 而不是 SubMenu
|
||||
component: () => import('@/views/system/database/index'),
|
||||
meta: { title: '数据字典', keepAlive: true, system: [ 'system' ] }
|
||||
},
|
||||
{
|
||||
path: '/system/log',
|
||||
name: 'log',
|
||||
meta: { title: '日志管理', keepAlive: true, permission: [ 'permission' ] },
|
||||
children: [
|
||||
{
|
||||
path: '/system/log/login',
|
||||
name: 'loginLog',
|
||||
hideChildrenInMenu: true, // 强制显示 MenuItem 而不是 SubMenu
|
||||
component: () => import('@/views/system/log/login'),
|
||||
meta: { title: '登录日志', keepAlive: true, system: [ 'system' ] }
|
||||
},
|
||||
{
|
||||
path: '/system/log/operate',
|
||||
name: 'operateLog',
|
||||
hideChildrenInMenu: true, // 强制显示 MenuItem 而不是 SubMenu
|
||||
component: () => import('@/views/system/log/operate'),
|
||||
meta: { title: '操作日志', keepAlive: true, system: [ 'system' ] }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -46,7 +46,9 @@ import {
|
||||
Skeleton,
|
||||
Popconfirm,
|
||||
message,
|
||||
notification
|
||||
notification,
|
||||
TreeSelect,
|
||||
Tree
|
||||
} from 'ant-design-vue'
|
||||
// import VueCropper from 'vue-cropper'
|
||||
|
||||
@ -89,6 +91,8 @@ Vue.use(Skeleton)
|
||||
Vue.use(Popconfirm)
|
||||
// Vue.use(VueCropper)
|
||||
Vue.use(notification)
|
||||
Vue.use(TreeSelect)
|
||||
Vue.use(Tree)
|
||||
|
||||
Vue.prototype.$confirm = Modal.confirm
|
||||
Vue.prototype.$message = message
|
||||
|
||||
@ -25,14 +25,28 @@
|
||||
>
|
||||
<a-textarea v-decorator="['description']" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="权限"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol">
|
||||
<a-tree
|
||||
checkable
|
||||
checkStrictly
|
||||
:treeData="permissions"
|
||||
@check="this.onCheck"
|
||||
:checkedKeys="permissionids"
|
||||
>
|
||||
</a-tree>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { store, update } from '@/api/role'
|
||||
import { store, update, read } from '@/api/role'
|
||||
import pick from 'lodash.pick'
|
||||
import { getPermissionList } from '@/api/permission'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
@ -50,25 +64,45 @@ export default {
|
||||
confirmLoading: false,
|
||||
id: null,
|
||||
parent_id: 0,
|
||||
form: this.$form.createForm(this)
|
||||
form: this.$form.createForm(this),
|
||||
permissions: [],
|
||||
permissionids: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.visible = true
|
||||
this.title = '新增角色'
|
||||
this.getPermissions()
|
||||
},
|
||||
edit (record) {
|
||||
this.visible = true
|
||||
this.title = '编辑角色'
|
||||
const { form: { setFieldsValue } } = this
|
||||
this.id = record.id
|
||||
setFieldsValue(pick(record, ['role_name', 'description']))
|
||||
this.getRolePermissions(this.id)
|
||||
this.getPermissions(record.parent_id > 0 ? { role_id: record.parent_id } : {})
|
||||
setFieldsValue(pick(record, ['role_name', 'description', 'permissions']))
|
||||
},
|
||||
addSon (record) {
|
||||
this.visible = true
|
||||
this.title = '新增子角色 (' + record.role_name + ')'
|
||||
this.parent_id = record.id
|
||||
this.getPermissions({ role_id: this.parent_id })
|
||||
},
|
||||
// 获取角色权限
|
||||
getRolePermissions (id) {
|
||||
read(id).then((res) => {
|
||||
const permissions = res.data.permissions
|
||||
permissions.map(item => {
|
||||
this.permissionids.push(item.id)
|
||||
})
|
||||
})
|
||||
},
|
||||
getPermissions (params) {
|
||||
getPermissionList(params).then(res => {
|
||||
this.permissions = this.resetPermissions(res.data)
|
||||
})
|
||||
},
|
||||
handleSubmit () {
|
||||
const { form: { validateFields } } = this
|
||||
@ -76,6 +110,7 @@ export default {
|
||||
if (this.id) {
|
||||
validateFields((errors, values) => {
|
||||
if (!errors) {
|
||||
values['permissions'] = this.permissionids
|
||||
update(this.id, values).then((res) => {
|
||||
this.refresh(res.message)
|
||||
}).catch(err => this.failed(err))
|
||||
@ -84,6 +119,7 @@ export default {
|
||||
} else {
|
||||
validateFields((errors, values) => {
|
||||
if (!errors) {
|
||||
values['permissions'] = this.permissionids
|
||||
if (this.parent_id > 0) {
|
||||
values['parent_id'] = this.parent_id
|
||||
}
|
||||
@ -106,6 +142,7 @@ export default {
|
||||
this.id = null
|
||||
this.confirmLoading = false
|
||||
this.parent_id = 0
|
||||
this.permissionids = []
|
||||
this.form.resetFields()
|
||||
},
|
||||
refresh (message) {
|
||||
@ -115,6 +152,38 @@ export default {
|
||||
})
|
||||
this.handleCancel()
|
||||
this.$parent.$parent.handleOk()
|
||||
},
|
||||
// 重组树结构
|
||||
resetPermissions (permissions) {
|
||||
permissions.map(item => {
|
||||
item.title = item.permission_name
|
||||
item.key = item.id
|
||||
if (item.children) {
|
||||
this.resetPermissions(item.children)
|
||||
}
|
||||
})
|
||||
return permissions
|
||||
},
|
||||
onCheck (checkedKeys, info) {
|
||||
const data = info.node.dataRef
|
||||
const ids = []
|
||||
ids.push(data.id)
|
||||
if (data.hasOwnProperty('children')) {
|
||||
this.getAllLeaf(data.children, ids)
|
||||
}
|
||||
if (info.checked) {
|
||||
this.permissionids = this.permissionids.concat(ids)
|
||||
} else {
|
||||
this.permissionids = this.permissionids.filter(function (v) { return ids.indexOf(v) === -1 })
|
||||
}
|
||||
},
|
||||
getAllLeaf (data, ids = []) {
|
||||
data.forEach(item => {
|
||||
ids.push(item.id)
|
||||
if (item.hasOwnProperty('children')) {
|
||||
this.getAllLeaf(item.children, ids)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -50,7 +50,7 @@ import CreateRole from './form/create'
|
||||
import { getRoleList, del } from '@/api/role'
|
||||
|
||||
export default {
|
||||
name: 'Users',
|
||||
name: 'Roles',
|
||||
components: {
|
||||
STable,
|
||||
CreateRole
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<a-modal
|
||||
title="新建用户"
|
||||
:title="title"
|
||||
:width="640"
|
||||
:visible="visible"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ -10,33 +10,65 @@
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<a-form-item
|
||||
label="用户名"
|
||||
label="菜单名称"
|
||||
type="text"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
>
|
||||
<a-input v-decorator="['username', {rules: [{required: true, min: 3, message: '请输入至少3个字符！'}]}]" />
|
||||
<a-input v-decorator="['permission_name', {rules: [{required: true, min: 2, message: '请输入至少3个字符！'}]}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="邮箱"
|
||||
label="菜单路由"
|
||||
type="text"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
>
|
||||
<a-input v-decorator="['email', {rules: [{ validator: handleEmail }]}]" />
|
||||
<a-input v-decorator="['route', {rules: [{required: true, min: 2, message: '请输入至少3个字符！'}]}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="密码"
|
||||
label="菜单标识"
|
||||
type="text"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
>
|
||||
<a-input type="password" v-decorator="['password', {rules: [{required: true, min: 5, message: '请输入密码'}]}]" />
|
||||
<a-input v-decorator="['permission_mark',{rules: [{required: true, min: 2, message: '请输入至少3个字符！'}]}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="确认密码"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol"
|
||||
label="请求方法"
|
||||
>
|
||||
<a-input type="password" v-decorator="['passwordConfirm', {rules: [{required: true, min: 5, message: '请确认密码'}]}]" />
|
||||
<a-select v-decorator="['method',{initialValue:methodValue},{rules: [{required: true}]}]">
|
||||
<a-select-option value="GET">
|
||||
GET
|
||||
</a-select-option>
|
||||
<a-select-option value="POST">
|
||||
POST
|
||||
</a-select-option>
|
||||
<a-select-option value="PUT">
|
||||
PUT
|
||||
</a-select-option>
|
||||
<a-select-option value="DELETE">
|
||||
DELETE
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol"
|
||||
label="类型"
|
||||
>
|
||||
<a-radio-group buttonStyle="solid" v-decorator="['type',{initialValue: typeValue},{rules: [{required: true}]}]">
|
||||
<a-radio-button value="1">菜单</a-radio-button>
|
||||
<a-radio-button value="2">按钮</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol"
|
||||
label="排序"
|
||||
>
|
||||
<a-input-number :min="1" v-decorator="['sort', {initialValue: sort}]" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
@ -44,8 +76,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { validEmail } from '@/utils/validate'
|
||||
import { store, update } from '@/api/user'
|
||||
import { store, update } from '@/api/permission'
|
||||
import pick from 'lodash.pick'
|
||||
|
||||
export default {
|
||||
@ -60,32 +91,42 @@ export default {
|
||||
sm: { span: 13 }
|
||||
},
|
||||
visible: false,
|
||||
title: '新建菜单',
|
||||
confirmLoading: false,
|
||||
id: null,
|
||||
form: this.$form.createForm(this)
|
||||
parent_id: 0,
|
||||
methodValue: 'GET',
|
||||
typeValue: '2',
|
||||
form: this.$form.createForm(this),
|
||||
sort: 1
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.visible = true
|
||||
this.title = '新增菜单'
|
||||
},
|
||||
edit (record) {
|
||||
this.visible = true
|
||||
this.title = '编辑菜单'
|
||||
const { form: { setFieldsValue } } = this
|
||||
this.id = record.id
|
||||
setFieldsValue(pick(record, ['username', 'email']))
|
||||
setFieldsValue(pick(record, ['permission_name', 'route', 'permission_mark', 'method', 'type', 'sort']))
|
||||
this.methodValue = record.method
|
||||
this.typeValue = record.type
|
||||
this.sort = record.sort
|
||||
console.log(record.sort)
|
||||
},
|
||||
handleEmail (rule, value, callback) {
|
||||
if (!validEmail(value)) {
|
||||
callback(new Error('邮箱地址不正确'))
|
||||
}
|
||||
callback()
|
||||
addSon (record) {
|
||||
this.visible = true
|
||||
this.title = '新增子菜单 (' + record.permission_name + ')'
|
||||
this.parent_id = record.id
|
||||
},
|
||||
handleSubmit () {
|
||||
const { form: { validateFields } } = this
|
||||
this.confirmLoading = true
|
||||
if (this.id) {
|
||||
validateFields(['username', 'email'], (errors, values) => {
|
||||
validateFields((errors, values) => {
|
||||
if (!errors) {
|
||||
update(this.id, values).then((res) => {
|
||||
this.refresh(res.message)
|
||||
@ -95,6 +136,9 @@ export default {
|
||||
} else {
|
||||
validateFields((errors, values) => {
|
||||
if (!errors) {
|
||||
if (this.parent_id > 0) {
|
||||
values['parent_id'] = this.parent_id
|
||||
}
|
||||
store(values).then((res) => {
|
||||
this.refresh(res.message)
|
||||
}).catch(err => this.failed(err))
|
||||
@ -109,10 +153,14 @@ export default {
|
||||
})
|
||||
this.handleCancel()
|
||||
},
|
||||
handleCancel (message) {
|
||||
this.id = null
|
||||
handleCancel () {
|
||||
this.visible = false
|
||||
this.id = null
|
||||
this.confirmLoading = false
|
||||
this.parent_id = 0
|
||||
this.methodValue = 'GET'
|
||||
this.typeValue = '2'
|
||||
this.sort = 1
|
||||
this.form.resetFields()
|
||||
},
|
||||
refresh (message) {
|
||||
@ -120,9 +168,7 @@ export default {
|
||||
message: message,
|
||||
duration: 4
|
||||
})
|
||||
this.visible = false
|
||||
this.form.resetFields()
|
||||
this.id = null
|
||||
this.handleCancel()
|
||||
this.$parent.$parent.handleOk()
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<a-card :bordered="false">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="48">
|
||||
<a-col :md="4" :sm="24">
|
||||
<a-input v-model="queryParam.permission_name" placeholder="请输入菜单名名称"/>
|
||||
</a-col>
|
||||
<a-col :md="4" :sm="24">
|
||||
<span class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
|
||||
<a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<div class="table-operator">
|
||||
<a-button type="primary" icon="plus" @click="$refs.permissionModal.add()">新建</a-button>
|
||||
</div>
|
||||
|
||||
<s-table
|
||||
ref="table"
|
||||
size="default"
|
||||
rowKey="id"
|
||||
:bordered="true"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
:showPagination="false"
|
||||
>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<template>
|
||||
<a @click="handleEdit(record)">编辑</a>
|
||||
<a-divider type="vertical" />
|
||||
<a @click="handleAddSon(record)">新增子菜单</a>
|
||||
<a-divider type="vertical" />
|
||||
<a @click="handleDel(record)">删除</a>
|
||||
</template>
|
||||
</span>
|
||||
</s-table>
|
||||
<create-permission ref="permissionModal" @ok="handleOk" />
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { STable } from '@/components'
|
||||
import CreatePermission from './form/create'
|
||||
import { getPermissionList, del } from '@/api/permission'
|
||||
|
||||
export default {
|
||||
name: 'Permissions',
|
||||
components: {
|
||||
STable,
|
||||
CreatePermission
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '菜单名称',
|
||||
dataIndex: 'permission_name'
|
||||
},
|
||||
{
|
||||
title: '菜单路由',
|
||||
dataIndex: 'route'
|
||||
},
|
||||
{
|
||||
title: '菜单标识',
|
||||
dataIndex: 'permission_mark'
|
||||
},
|
||||
{
|
||||
title: '请求方法',
|
||||
dataIndex: 'method'
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
customRender: this.renderType
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'created_at',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '更新时间',
|
||||
dataIndex: 'updated_at',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
width: '150px',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: parameter => {
|
||||
return getPermissionList(Object.assign(parameter, this.queryParam))
|
||||
.then(res => {
|
||||
return res
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleEdit (record) {
|
||||
this.$refs.permissionModal.edit(record)
|
||||
},
|
||||
handleAddSon (record) {
|
||||
this.$refs.permissionModal.addSon(record)
|
||||
},
|
||||
handleDel (record) {
|
||||
this.$confirm({
|
||||
title: '确定删除' + record.username + '吗?',
|
||||
okText: '确定',
|
||||
okType: 'danger',
|
||||
cancelText: '取消',
|
||||
onOk: () => {
|
||||
del(record.id).then((res) => {
|
||||
this.$notification['success']({
|
||||
message: res.message,
|
||||
duration: 4
|
||||
})
|
||||
this.handleOk()
|
||||
}).catch(err => this.failed(err))
|
||||
},
|
||||
onCancel () {}
|
||||
})
|
||||
},
|
||||
handleOk () {
|
||||
this.$refs.table.refresh(true)
|
||||
},
|
||||
failed (errors) {
|
||||
this.$notification['error']({
|
||||
message: errors.message,
|
||||
duration: 4
|
||||
})
|
||||
this.handleCancel()
|
||||
},
|
||||
resetSearchForm () {
|
||||
this.queryParam = {
|
||||
date: moment(new Date())
|
||||
}
|
||||
},
|
||||
renderType (value, row, index) {
|
||||
return value === 1 ? <a-button type="normal" size="small">菜单</a-button> : <a-button type="danger" size="small">按钮</a-button>
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -15,28 +15,47 @@
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
>
|
||||
<a-input v-decorator="['username', {rules: [{required: true, min: 3, message: '请输入至少3个字符！'}]}]" />
|
||||
<a-input allowClear v-decorator="['username', {rules: [{required: true, min: 3, message: '请输入至少3个字符！'}]}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="邮箱"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
>
|
||||
<a-input v-decorator="['email', {rules: [{ validator: handleEmail }]}]" />
|
||||
<a-input allowClear v-decorator="['email', {rules: [{ required: true, validator: handleEmail }]}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="密码"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
>
|
||||
<a-input type="password" v-decorator="['password', {rules: [{required: true, min: 5, message: '请输入密码'}]}]" />
|
||||
<a-input allowClear allotype="password" v-decorator="['password', {rules: [{required: required, min: 5, message: '请输入密码'}]}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="确认密码"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
>
|
||||
<a-input type="password" v-decorator="['passwordConfirm', {rules: [{required: true, min: 5, message: '请确认密码'}]}]" />
|
||||
<a-input allowClear type="password" v-decorator="['passwordConfirm', {rules: [{required: required, min: 5, message: '请确认密码'}]}]" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="选择角色"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
>
|
||||
<a-tree-select
|
||||
style="width: 320px"
|
||||
:dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
|
||||
:treeData="roles"
|
||||
placeholder="请选择角色"
|
||||
allowClear
|
||||
treeCheckable
|
||||
treeDefaultExpandAll
|
||||
@change="onChange"
|
||||
:showCheckedStrategy="SHOW_PARENT"
|
||||
v-decorator="['roles', {initialValue: roleids},{rules: [{required: true, message: '请选择角色'}]}]"
|
||||
>
|
||||
</a-tree-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
@ -45,9 +64,11 @@
|
||||
|
||||
<script>
|
||||
import { validEmail } from '@/utils/validate'
|
||||
import { store, update } from '@/api/user'
|
||||
import { store, update, read } from '@/api/user'
|
||||
import { getRoleList } from '@/api/role'
|
||||
import pick from 'lodash.pick'
|
||||
|
||||
import { TreeSelect } from 'ant-design-vue'
|
||||
const SHOW_PARENT = TreeSelect.SHOW_PARENT
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
@ -62,17 +83,27 @@ export default {
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
id: null,
|
||||
form: this.$form.createForm(this)
|
||||
form: this.$form.createForm(this),
|
||||
roles: [],
|
||||
defaultRoles: [],
|
||||
roleids: [],
|
||||
SHOW_PARENT,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.visible = true
|
||||
this.getRoles()
|
||||
},
|
||||
edit (record) {
|
||||
this.visible = true
|
||||
const { form: { setFieldsValue } } = this
|
||||
this.required = false
|
||||
this.id = record.id
|
||||
this.getRoles()
|
||||
this.getUser(this.id)
|
||||
console.log(this.defaultRoles)
|
||||
const { form: { setFieldsValue } } = this
|
||||
setFieldsValue(pick(record, ['username', 'email']))
|
||||
},
|
||||
handleEmail (rule, value, callback) {
|
||||
@ -81,12 +112,40 @@ export default {
|
||||
}
|
||||
callback()
|
||||
},
|
||||
// 获取角色
|
||||
getRoles () {
|
||||
getRoleList().then(res => {
|
||||
this.roles = this.resetRoles(res.data)
|
||||
})
|
||||
},
|
||||
// 获取用户角色
|
||||
getUser (id) {
|
||||
read(id).then(res => {
|
||||
const roles = res.data.roles
|
||||
roles.map(item => {
|
||||
this.roleids.push(item.id)
|
||||
this.defaultRoles.push(item.role_name)
|
||||
})
|
||||
})
|
||||
},
|
||||
// 重组树结构
|
||||
resetRoles (roles) {
|
||||
roles.map(item => {
|
||||
item.title = item.role_name
|
||||
item.value = item.id
|
||||
if (item.children) {
|
||||
this.resetRoles(item.children)
|
||||
}
|
||||
})
|
||||
return roles
|
||||
},
|
||||
handleSubmit () {
|
||||
const { form: { validateFields } } = this
|
||||
this.confirmLoading = true
|
||||
if (this.id) {
|
||||
validateFields(['username', 'email'], (errors, values) => {
|
||||
validateFields(['username', 'email', 'roles'], (errors, values) => {
|
||||
if (!errors) {
|
||||
this.confirmLoading = true
|
||||
values['roles'] = this.roleids
|
||||
update(this.id, values).then((res) => {
|
||||
this.refresh(res.message)
|
||||
}).catch(err => this.failed(err))
|
||||
@ -95,6 +154,7 @@ export default {
|
||||
} else {
|
||||
validateFields((errors, values) => {
|
||||
if (!errors) {
|
||||
this.confirmLoading = true
|
||||
store(values).then((res) => {
|
||||
this.refresh(res.message)
|
||||
}).catch(err => this.failed(err))
|
||||
@ -109,21 +169,26 @@ export default {
|
||||
})
|
||||
this.handleCancel()
|
||||
},
|
||||
handleCancel (message) {
|
||||
handleCancel () {
|
||||
this.id = null
|
||||
this.visible = false
|
||||
this.required = true
|
||||
this.confirmLoading = false
|
||||
this.form.resetFields()
|
||||
this.roleids = []
|
||||
this.defaultRoles = []
|
||||
this.roles = []
|
||||
},
|
||||
refresh (message) {
|
||||
this.$notification['success']({
|
||||
message: message,
|
||||
duration: 4
|
||||
})
|
||||
this.visible = false
|
||||
this.form.resetFields()
|
||||
this.id = null
|
||||
this.handleCancel()
|
||||
this.$parent.$parent.handleOk()
|
||||
},
|
||||
onChange (value, node, extra) {
|
||||
this.roleids = value
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
<a-col :md="4" :sm="24">
|
||||
<span class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
|
||||
<a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
|
||||
<a-button style="margin-left: 8px" @click="resetSearchForm()">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
@ -63,7 +63,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import { STable } from '@/components'
|
||||
import CreateUser from './form/create'
|
||||
import { swtichStatus, del, getUserList } from '@/api/user'
|
||||
@ -80,10 +79,6 @@ export default {
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '用户ID',
|
||||
key: 'id'
|
||||
},
|
||||
{
|
||||
title: '用户名',
|
||||
dataIndex: 'username'
|
||||
@ -189,8 +184,6 @@ export default {
|
||||
message: res.message,
|
||||
duration: 4
|
||||
})
|
||||
console.log(this.selectedRowKeys)
|
||||
// this.options.rowSelection
|
||||
this.onSelectChange([], [])
|
||||
this.handleOk()
|
||||
})
|
||||
@ -200,9 +193,8 @@ export default {
|
||||
this.selectedRows = selectedRows
|
||||
},
|
||||
resetSearchForm () {
|
||||
this.queryParam = {
|
||||
date: moment(new Date())
|
||||
}
|
||||
this.queryParam = {}
|
||||
this.handleOk()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +1,161 @@
|
||||
<template>
|
||||
$END$
|
||||
<a-card :bordered="false">
|
||||
<div class="table-page-search-wrapper">
|
||||
<a-form layout="inline">
|
||||
<a-row :gutter="48">
|
||||
<a-col :md="4" :sm="24">
|
||||
<a-input allowClear v-model="queryParam.tablename" placeholder="请输入表名"/>
|
||||
</a-col>
|
||||
<a-col :md="4" :sm="24">
|
||||
<a-select allowClear v-model="queryParam.engine" placeholder="请选择引擎" default-value="0">
|
||||
<a-select-option value="MyISAM">MyISAM</a-select-option>
|
||||
<a-select-option value="InnoDB">InnoDB</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
<a-col :md="4" :sm="24">
|
||||
<span class="table-page-search-submitButtons">
|
||||
<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
|
||||
<a-button style="margin-left: 8px" @click="resetSearchForm()">重置</a-button>
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
</div>
|
||||
|
||||
<div class="table-operator" v-if="selectTables.length > 0">
|
||||
<a-button type="primary" icon="plus" @click="optimizeTables()">优化</a-button>
|
||||
<a-button type="primary" icon="plus" @click="backupTables">备份</a-button>
|
||||
</div>
|
||||
|
||||
<s-table
|
||||
ref="table"
|
||||
size="default"
|
||||
rowKey="name"
|
||||
:bordered="true"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
:alert="options.alert"
|
||||
:rowSelection="options.rowSelection"
|
||||
showPagination="auto"
|
||||
>
|
||||
<span slot="action" slot-scope="text, record">
|
||||
<template>
|
||||
<a @click="$refs.tableModal.add(record.name)">查看</a>
|
||||
</template>
|
||||
</span>
|
||||
</s-table>
|
||||
<table-view ref="tableModal" @ok="handleOk" />
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { STable } from '@/components'
|
||||
import { getTables, optimize, backup } from '@/api/database'
|
||||
import TableView from './table'
|
||||
|
||||
export default {
|
||||
name: 'index'
|
||||
name: 'Database',
|
||||
components: {
|
||||
STable,
|
||||
TableView
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
// 查询参数
|
||||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{
|
||||
title: '表名',
|
||||
dataIndex: 'name'
|
||||
},
|
||||
{
|
||||
title: '表引擎',
|
||||
dataIndex: 'engine'
|
||||
},
|
||||
{
|
||||
title: '字符集',
|
||||
dataIndex: 'collation'
|
||||
},
|
||||
{
|
||||
title: '数据行数',
|
||||
dataIndex: 'rows',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '索引大小',
|
||||
dataIndex: 'index_length',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '数据大小',
|
||||
dataIndex: 'data_length',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '表注释',
|
||||
dataIndex: 'comment',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'create_time',
|
||||
sorter: true
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
width: '70px',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
],
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: parameter => {
|
||||
return getTables(Object.assign(parameter, this.queryParam))
|
||||
.then(res => {
|
||||
return res
|
||||
})
|
||||
},
|
||||
selectTables: [],
|
||||
// custom table alert & rowSelection
|
||||
options: {
|
||||
alert: { show: false, clear: () => { this.selectedRowKeys = [] } },
|
||||
rowSelection: {
|
||||
selectedRowKeys: this.selectedRowKeys,
|
||||
onChange: this.onSelectChange
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
optimizeTables () {
|
||||
optimize({ data: this.selectTables }).then(res => {
|
||||
this.$notification['success']({
|
||||
message: res.message,
|
||||
duration: 4
|
||||
})
|
||||
this.selectTables = []
|
||||
})
|
||||
},
|
||||
backupTables () {
|
||||
backup({ data: this.selectTables }).then(res => {
|
||||
this.$notification['success']({
|
||||
message: res.message,
|
||||
duration: 4
|
||||
})
|
||||
this.selectTables = []
|
||||
})
|
||||
},
|
||||
handleOk () {
|
||||
this.$refs.table.refresh(true)
|
||||
},
|
||||
onSelectChange (selectedRowKeys, selectedRows) {
|
||||
this.selectTables = selectedRowKeys
|
||||
},
|
||||
resetSearchForm () {
|
||||
this.queryParam = {}
|
||||
this.handleOk()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,13 +1,83 @@
|
||||
<template>
|
||||
$END$
|
||||
<a-modal
|
||||
bordered
|
||||
title="表结构"
|
||||
:width="1200"
|
||||
rowKey="field"
|
||||
:visible="visible"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:dataSource="fields"
|
||||
:pagination="false"
|
||||
>
|
||||
</a-table>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { read } from '@/api/database'
|
||||
|
||||
export default {
|
||||
name: 'table'
|
||||
data () {
|
||||
return {
|
||||
columns: [
|
||||
{
|
||||
title: '字段名称',
|
||||
dataIndex: 'field'
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type'
|
||||
},
|
||||
{
|
||||
title: '字符集',
|
||||
dataIndex: 'collation'
|
||||
},
|
||||
{
|
||||
title: 'Null',
|
||||
dataIndex: 'null'
|
||||
},
|
||||
{
|
||||
title: '索引',
|
||||
dataIndex: 'key'
|
||||
},
|
||||
{
|
||||
title: '默认值',
|
||||
dataIndex: 'default'
|
||||
},
|
||||
{
|
||||
title: '权限',
|
||||
dataIndex: 'privileges'
|
||||
},
|
||||
{
|
||||
title: '注释',
|
||||
dataIndex: 'comment'
|
||||
}
|
||||
],
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 7 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 13 }
|
||||
},
|
||||
visible: false,
|
||||
fields: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add (name) {
|
||||
this.visible = true
|
||||
read(name).then(res => {
|
||||
this.fields = res.data
|
||||
console.log(this.fields)
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.visible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,13 +0,0 @@
|
||||
<template>
|
||||
$END$
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'login'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,13 +0,0 @@
|
||||
<template>
|
||||
$END$
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'operate'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user