Skip to content

S
sage-front-framework
提交 c1bf3cf2 作者: 郁骅焌
操作

菜单角色列表修改

上级 24bd6225
正在显示 包含 924 行增加 和 30 行删除
config/config.js
...@@ -75,6 +75,12 @@ export default defineConfig({ ...@@ -75,6 +75,12 @@ export default defineConfig({
icon: 'SolutionOutlined', icon: 'SolutionOutlined',
component: './role', component: './role',
}, },
{
path: '/system/menu',
name: 'menu',
icon: 'SolutionOutlined',
component: './menu',
},
], ],
}, },
{ {
......
config/proxy.js
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
export default { export default {
dev: { dev: {
'/ebd/': { '/ebd/': {
// target: 'http://47.103.50.109:9051', target: 'http://47.103.50.109:9051',
target: 'http://47.103.50.109:9050', // target: 'http://47.103.50.109:9050',
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
'^/ebd': '', '^/ebd': '',
......
src/components/Business/MenuTree/index.jsx
...@@ -5,10 +5,10 @@ import { getMenu } from '@/services/menu' ...@@ -5,10 +5,10 @@ import { getMenu } from '@/services/menu'
// 遍历所有子节点数组改变结构 // 遍历所有子节点数组改变结构
function loopTree(arr) { function loopTree(arr) {
arr.forEach(item => { arr.forEach(item => {
item.title = item.authName item.title = item.menuName
item.key = item.authCode item.key = item.id
if (item.hasSun) { if (item.hasSun) {
item.children = item.list.slice() item.children = item.children.slice()
loopTree(item.children) loopTree(item.children)
} }
}) })
...@@ -65,6 +65,7 @@ const MenuTree = (props, ref) => { ...@@ -65,6 +65,7 @@ const MenuTree = (props, ref) => {
return ( return (
<SageTree <SageTree
checkable checkable
checkStrictly
onExpand={onExpand} onExpand={onExpand}
expandedKeys={expandedKeys} expandedKeys={expandedKeys}
autoExpandParent={autoExpandParent} autoExpandParent={autoExpandParent}
......
src/components/Common/Form/index.jsx
...@@ -103,6 +103,10 @@ const SageForm = (props, ref) => { ...@@ -103,6 +103,10 @@ const SageForm = (props, ref) => {
let formNode = null let formNode = null
formNode = formFields.map((item, index) => { formNode = formFields.map((item, index) => {
const { isShow = true } = item
if (!isShow) return null
const FormComponent = FormComponentType[item.type] const FormComponent = FormComponentType[item.type]
if (item.type === 'custom') { if (item.type === 'custom') {
...@@ -128,6 +132,10 @@ const SageForm = (props, ref) => { ...@@ -128,6 +132,10 @@ const SageForm = (props, ref) => {
formItemProps.valuePropName = 'checked' formItemProps.valuePropName = 'checked'
} }
if (item.initialValue) {
formItemProps.initialValue = item.initialValue
}
switch (item.type) { switch (item.type) {
case 'select': case 'select':
formCompnentNode = ( formCompnentNode = (
...@@ -165,6 +173,29 @@ const SageForm = (props, ref) => { ...@@ -165,6 +173,29 @@ const SageForm = (props, ref) => {
formCompnentNode = <FormComponent {...item.props} /> formCompnentNode = <FormComponent {...item.props} />
} }
break; break;
case 'treeselect':
if (item.fieldNames) {
const treeData = item.props.treeData ? item.props.treeData.slice() : []
const loopCheckTreeData = list => {
list.forEach(treeItem => {
if (item.fieldNames.title && treeItem[item.fieldNames.title]) {
treeItem.title = treeItem[item.fieldNames.title]
}
if (item.fieldNames.value && treeItem[item.fieldNames.value]) {
treeItem.value = treeItem[item.fieldNames.value]
}
if (treeItem.children) {
loopCheckTreeData(treeItem.children)
}
})
}
loopCheckTreeData(treeData)
formCompnentNode = <FormComponent {...item.props} treeData={treeData} />
} else {
formCompnentNode = <FormComponent {...item.props} />
}
break;
case 'simplepictureupload': case 'simplepictureupload':
formCompnentNode = <FormComponent {...item} /> formCompnentNode = <FormComponent {...item} />
break; break;
......
src/components/Common/Table/index.jsx
...@@ -36,9 +36,13 @@ const SageTable = React.forwardRef((props, ref) => { ...@@ -36,9 +36,13 @@ const SageTable = React.forwardRef((props, ref) => {
const rootRef = useRef(null); const rootRef = useRef(null);
const tableSearchFormRef = useRef(); const tableSearchFormRef = useRef();
// 选中keys rows
const [selectedRowKeys, setSelectedRowKeys] = useState([]); const [selectedRowKeys, setSelectedRowKeys] = useState([]);
const [selectedRows, setSelectedRows] = useState([]); const [selectedRows, setSelectedRows] = useState([]);
// 展开keys
const [expandedRowKeys, setExpandedRowKeys] = useState([])
const { const {
request, request,
hasNumber = false, hasNumber = false,
...@@ -47,6 +51,7 @@ const SageTable = React.forwardRef((props, ref) => { ...@@ -47,6 +51,7 @@ const SageTable = React.forwardRef((props, ref) => {
size: tableSizeProps, size: tableSizeProps,
columns: columnsProps, columns: columnsProps,
dataSource: dataSourceProps, dataSource: dataSourceProps,
renderData = null,
pagination: paginationProps, pagination: paginationProps,
loading: loadingProps, loading: loadingProps,
rowSelection: rowSelectionProps, rowSelection: rowSelectionProps,
...@@ -55,6 +60,7 @@ const SageTable = React.forwardRef((props, ref) => { ...@@ -55,6 +60,7 @@ const SageTable = React.forwardRef((props, ref) => {
onMouseEnterRow: onMouseEnterRowProps, onMouseEnterRow: onMouseEnterRowProps,
onMouseLeaveRow: onMouseLeaveRowProps, onMouseLeaveRow: onMouseLeaveRowProps,
onContextMenuRow: onContextMenuRowProps, onContextMenuRow: onContextMenuRowProps,
expandable: expandableProps,
// 搜索相关 // 搜索相关
searchFields: searchFieldsProps, searchFields: searchFieldsProps,
onSearchTable: onSearchTableProps, onSearchTable: onSearchTableProps,
...@@ -131,10 +137,15 @@ const SageTable = React.forwardRef((props, ref) => { ...@@ -131,10 +137,15 @@ const SageTable = React.forwardRef((props, ref) => {
delete newSearchParams.pageSize; delete newSearchParams.pageSize;
} }
let lastDataSource = res.data ? res.data.slice() : []
if (renderData) {
lastDataSource = renderData(lastDataSource)
}
setTableState({ setTableState({
pageNum: current, pageNum: current,
pageSize, pageSize,
dataSource: res.data.slice(), dataSource: lastDataSource,
pagination: { pagination: {
...tableState.pagination, ...tableState.pagination,
current, current,
...@@ -251,6 +262,42 @@ const SageTable = React.forwardRef((props, ref) => { ...@@ -251,6 +262,42 @@ const SageTable = React.forwardRef((props, ref) => {
}; };
} }
if (expandableProps) {
lastTableState.expandable = {
expandedRowKeys,
onExpand: (expanded, record) => {
const lastExpandedRowKeys = expandedRowKeys.slice()
if (expanded) {
lastExpandedRowKeys.push(record[props.rowKey])
setExpandedRowKeys(lastExpandedRowKeys)
} else {
const deleteIndex = lastExpandedRowKeys.findIndex(item => item === record[props.rowKey])
lastExpandedRowKeys.splice(deleteIndex, 1)
}
setExpandedRowKeys(lastExpandedRowKeys)
}
}
}
const getExpandedRowKeys = () => {
return expandedRowKeys;
}
const getAllExpandedRowKeys = () => {
const allKeys = []
const allData = dataSourceState.slice()
const filterExpandRowKeys = (list) => {
list.forEach(item => {
if (item.children && item.children.length !== 0) {
allKeys.push(item[props.rowKey])
filterExpandRowKeys(item.children)
}
})
}
filterExpandRowKeys(allData)
return allKeys;
}
// 暴露给外部的方法 // 暴露给外部的方法
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
queryTable, queryTable,
...@@ -260,6 +307,9 @@ const SageTable = React.forwardRef((props, ref) => { ...@@ -260,6 +307,9 @@ const SageTable = React.forwardRef((props, ref) => {
getSelectedRows, getSelectedRows,
setSelectedRows, setSelectedRows,
getSearchFieldsValue: () => tableSearchFormRef.current.getFieldsValue(), getSearchFieldsValue: () => tableSearchFormRef.current.getFieldsValue(),
getAllExpandedRowKeys,
getExpandedRowKeys,
setExpandedRowKeys,
})); }));
return ( return (
......
src/locales/zh-CN/menu.js
...@@ -52,6 +52,7 @@ export default { ...@@ -52,6 +52,7 @@ export default {
// 新增 // 新增
'menu.system': '系统管理', 'menu.system': '系统管理',
'menu.system.role': '角色管理', 'menu.system.role': '角色管理',
'menu.system.menu': '菜单管理',
'menu.demo': '例子', 'menu.demo': '例子',
'menu.demo.crud': 'Crud' 'menu.demo.crud': 'Crud'
}; };
src/pages/menu/components/CreateForm.jsx 0 → 100644
import React, { useState, useRef, useEffect, useImperativeHandle } from 'react'
import { Form, Input, InputNumber, Select, AutoComplete } from 'antd'
import { SageForm } from '@/components/Common'
import { poInteger } from '@/utils/verify'
import { queryMenu } from '../service'
const { Option } = Select
const CreateForm = (props, ref) => {
const [menuType, setMenuType] = useState('0')
const [parentIdOptions, setParentIdOptions] = useState([])
const formRef = useRef()
// 初始化菜单下拉
const requestMenuList = async () => {
const res = await queryMenu()
if (res.isSuccess) {
const data = res.data.slice()
const initData = [
{
value: '0',
title: '主目录',
children: data
}
]
setParentIdOptions(initData)
}
}
useEffect(() => {
requestMenuList()
}, [])
// 上传成功
const uploadSuccess = (field, value) => {
formRef.current.setFieldsValue({ [field]: value })
}
const onFinish = (values) => {
if (props.onFinish) {
props.onFinish(values)
}
}
const onFinishFailed = ({ values }) => {
console.log(values)
}
const onValuesChange = (changedValues) => {
if (Object.keys(changedValues)[0] === 'menuType') {
setMenuType(changedValues.menuType)
}
}
// 表单字段设置
const formFields = [
{
name: 'parentId',
label: '上级菜单',
type: 'treeselect',
initialValue: '0',
fieldNames: {title: 'menuName', value: 'id'},
props: {
treeData: parentIdOptions
}
},
{
name: 'menuType',
label: '菜单类型',
type: 'radio',
initialValue: menuType,
options: [
{ value: '0', text: '目录' },
{ value: '1', text: '菜单' },
{ value: '2', text: '按钮' }
]
},
{
name: 'menuName',
label: '菜单名称',
type: 'input',
rules: [{ required: true }],
props: {
placeholder: '请输入'
}
},
{
name: 'url',
label: '请求地址',
type: 'input',
props: {
placeholder: '请输入'
},
isShow: menuType === '1'
},
{
name: 'target',
label: '打开方式',
type: 'radio',
initialValue: '1',
options: [
{ value: '1', text: '页签' },
{ value: '0', text: '新窗口' },
],
isShow: menuType === '1'
},
{
name: 'perms',
label: '权限标识',
type: 'input',
props: {
placeholder: '请输入'
},
isShow: menuType === '1' || menuType === '2'
},
{
name: 'orderNum',
label: '排序',
type: 'input',
rules: [
{ required: true },
{ pattern: poInteger, message: '请输入正整数' }
],
props: {
placeholder: '请输入'
}
},
{
name: 'icon',
label: '图标',
type: 'input',
rules: [
// { required: true },
],
props: {
placeholder: '请输入'
},
isShow: menuType === '0' || menuType === '1'
},
{
name: 'status',
label: '菜单可见',
type: 'radio',
initialValue: '1',
options: [
{ value: '1', text: '显示' },
{ value: '0', text: '隐藏' },
],
isShow: menuType === '0' || menuType === '1'
},
]
// 暴露外部方法
useImperativeHandle(ref, () => ({
submit: () => formRef.current.submit(),
validateFields: (nameList) => formRef.current.validateFields(nameList),
getFieldsValue: (nameList) => formRef.current.getFieldsValue(nameList),
setFieldsValue: (values) => formRef.current.setFieldsValue(values),
resetFields: (fields) => formRef.current.resetFields(fields)
}))
return (
<SageForm
ref={formRef}
formFields={formFields}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
onValuesChange={onValuesChange}
/>
)
}
export default React.forwardRef(CreateForm)
src/pages/menu/components/UpdateForm.jsx 0 → 100644
import React, { useState, useRef, useEffect, useImperativeHandle } from 'react'
import { Form, Input, InputNumber, Select, AutoComplete } from 'antd'
import { SageForm } from '@/components/Common'
import { poInteger } from '@/utils/verify'
import { queryMenu } from '../service'
const UpdateForm = (props, ref) => {
const [menuType, setMenuType] = useState('0')
const [parentIdOptions, setParentIdOptions] = useState([])
const { detail } = props
const formRef = useRef()
// 初始化菜单下拉
const requestMenuList = async () => {
const res = await queryMenu()
if (res.isSuccess) {
const data = res.data.slice()
const initData = [
{
value: 0,
title: '主目录',
children: data
}
]
setParentIdOptions(initData)
}
}
useEffect(() => {
requestMenuList()
}, [])
useEffect(() => {
setMenuType(detail.menuType)
}, [detail])
const onFinish = (values) => {
if (props.onFinish) {
props.onFinish(values)
}
}
// 表单字段设置
const formFields = [
{
name: 'parentId',
label: '上级菜单',
type: 'treeselect',
fieldNames: {title: 'menuName', value: 'id'},
props: {
treeData: parentIdOptions
}
},
{
name: 'menuType',
label: '菜单类型',
type: 'radio',
options: [
{ value: '0', text: '目录' },
{ value: '1', text: '菜单' },
{ value: '2', text: '按钮' }
]
},
{
name: 'menuName',
label: '菜单名称',
type: 'input',
rules: [{ required: true }],
props: {
placeholder: '请输入'
}
},
{
name: 'url',
label: '请求地址',
type: 'input',
props: {
placeholder: '请输入'
},
isShow: menuType === '1'
},
{
name: 'target',
label: '打开方式',
type: 'radio',
options: [
{ value: '1', text: '页签' },
{ value: '0', text: '新窗口' },
],
isShow: menuType === '1'
},
{
name: 'perms',
label: '权限标识',
type: 'input',
props: {
placeholder: '请输入'
},
isShow: menuType === '1' || menuType === '2'
},
{
name: 'orderNum',
label: '排序',
type: 'input',
rules: [
{ required: true },
{ pattern: poInteger, message: '请输入正整数' }
],
props: {
placeholder: '请输入'
}
},
{
name: 'icon',
label: '图标',
type: 'input',
rules: [
// { required: true },
],
props: {
placeholder: '请输入'
},
isShow: menuType === '0' || menuType === '1'
},
{
name: 'status',
label: '菜单可见',
type: 'radio',
options: [
{ value: '1', text: '显示' },
{ value: '0', text: '隐藏' },
],
isShow: menuType === '0' || menuType === '1'
},
]
// 暴露外部方法
useImperativeHandle(ref, () => ({
submit: () => formRef.current.submit(),
validateFields: (nameList) => formRef.current.validateFields(nameList),
getFieldsValue: (nameList) => formRef.current.getFieldsValue(nameList),
setFieldsValue: (values) => formRef.current.setFieldsValue(values),
resetFields: (fields) => formRef.current.resetFields(fields)
}))
return (
<SageForm
ref={formRef}
formFields={formFields}
// colNum={2}
// initialValues={detail}
onFinish={onFinish}
/>
)
}
export default React.forwardRef(UpdateForm)
src/pages/menu/index.jsx 0 → 100644
import React, { useState, useEffect, useRef } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { SageTable, SageModal, SageButton, sageMessage, ActionSet } from '@/components/Common'
import { PlusOutlined, EditOutlined, SwapOutlined, DeleteOutlined, VerticalAlignBottomOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
import moment from 'moment';
import { getEnumDropDownList } from '@/services/enum'
import { queryMenu, updateMenu, addMenu, removeMenu, getMenuDetail } from './service';
import CreateForm from './components/CreateForm'
import UpdateForm from './components/UpdateForm'
// 详情数据
const initDetail = {
id: null
}
const MenuList = () => {
// 状态数据
const [detail, setDetail] = useState(initDetail) // 详情
const [editable, setEditable] = useState(true) // 编辑按钮状态
const [removeable, setRemoveable] = useState(true) // 删除按钮状态
const [status, setStatus] = useState('') // 状态 1、add 2、update 3、detail
const [modalLoading, setModalLoading] = useState(false) // 窗口loading
// ref对象
const tableRef = useRef();
const modalRef = useRef();
const createFormRef = useRef();
const updateFormRef = useRef();
useEffect(() => {
}, [])
// 查询条件
const searchFields = [
{
name: 'menuName',
label: '菜单名称',
type: 'input',
props: {
placeholder: '请输入'
}
},
{
name: 'status',
label: '菜单状态',
type: 'select',
options: [
{text: '显示', value: '1'},
{text: '隐藏', value: '0'}
],
props: {
allowClear: true
}
},
]
// 查询
const onSearchTable = (params) => {
if (tableRef.current) {
const postParams = Object.assign({ pageNum: 1 }, params)
// 处理查询条件
tableRef.current.queryTable(postParams)
}
}
// 重置
const onResetTable = () => {
if (tableRef.current) {
tableRef.current.queryTable({ pageNum: 1 }, 'reset')
}
}
const tableSearchFormProps = {
searchFields,
onSearchTable,
onResetTable
}
// 编辑
const handleEdit = async (event, record) => {
event.stopPropagation()
setStatus('update')
const res = await getMenuDetail({ id: record.id })
const { data } = res
setDetail(data)
modalRef.current.setTitle('编辑')
modalRef.current.setVisible(true)
updateFormRef.current.setFieldsValue({
parentId: data.parentId,
menuType: data.menuType,
menuName: data.menuName,
url: data.url,
target: data.target,
perms: data.perms,
orderNum: data.orderNum,
icon: data.icon,
status: data.status
})
}
// 删除
const handleDelete = async (event, record) => {
event.stopPropagation()
const res = await removeMenu({ id: record.id })
if (res.isSuccess) {
sageMessage.success('删除成功')
tableRef.current.reloadTable()
}
}
// 表格
const columns = [
{
title: '菜单名称',
dataIndex: 'menuName',
key: 'menuName',
width: 200,
},
{
title: '排序',
dataIndex: 'orderNum',
key: 'orderNum',
width: 200,
},
{
title: '请求地址',
dataIndex: 'url',
key: 'url',
width: 200,
},
{
title: '菜单类型',
dataIndex: 'menuType',
key: 'menuType',
width: 200,
render: text => {
let renderText = ''
switch (text) {
case '0':
renderText = '目录'
break;
case '1':
renderText = '菜单'
break;
case '2':
renderText = '按钮'
break;
default:
break;
}
return renderText
}
},
{
title: '可见',
dataIndex: 'status',
key: 'status',
width: 200,
render: text => text === '1' ? '显示' : '隐藏'
},
{
title: '操作',
fixed: 'right',
dataIndex: 'button',
key: 'action',
align: 'center',
render: (button, record) => {
const actionList = [
{ title: '编辑', method: (e) => handleEdit(e, record) },
{ title: '删除', method: (e) => handleDelete(e, record), isConfirm: true, confirmInfo: '确认删除该菜单?' },
]
return <ActionSet actionList={actionList} record={record} />
},
width: 120
}
]
const renderMenuData = data => {
const tempData = data.slice()
const removeChildren = list => {
list.forEach(item => {
if (item.children && item.children.length === 0) {
delete item.children
}
if (item.children && item.children.length !== 0) {
removeChildren(item.children)
}
})
}
removeChildren(tempData)
return tempData
}
const tableProps = {
rowKey: 'id',
hasCheck: true,
columns,
// scroll: { x: '100vw' },
pagination: false,
expandable: true,
rowSelection: {
type: 'radio',
onChange: (selectedrowkeys, selectedrows) => {
tableRef.current.setSelectedRowKeys(selectedrowkeys)
tableRef.current.setSelectedRows(selectedrows)
setEditable(selectedrowkeys.length !== 1)
setRemoveable(selectedrowkeys.length === 0)
}
}
}
// 新建按钮
const onAdd = () => {
if (modalRef.current) {
setStatus('add')
modalRef.current.setTitle('新增')
modalRef.current.setVisible(true)
if (createFormRef.current) {
createFormRef.current.resetFields()
}
}
}
// 编辑按钮
const onEdit = (e) => {
const rowRecords = tableRef.current.getSelectedRows()
handleEdit(e, rowRecords[0])
}
// 删除按钮
const onDelete = async (e) => {
e.stopPropagation()
const rowRecords = tableRef.current.getSelectedRowKeys()
const res = await removeMenu({ idArr: rowRecords })
if (res.isSuccess) {
sageMessage.success('删除成功')
tableRef.current.reloadTable()
}
}
const onExpand = () => {
let expandRowKeys = tableRef.current.getExpandedRowKeys()
if (expandRowKeys.length === 0) {
expandRowKeys = tableRef.current.getAllExpandedRowKeys()
tableRef.current.setExpandedRowKeys(expandRowKeys)
} else {
tableRef.current.setExpandedRowKeys([])
}
}
// 表格按钮操作
const tableToolProps = {
toolBarRender: () => {
return (
<>
<SageButton type="primary" icon={<PlusOutlined />} onClick={onAdd}>新增</SageButton>
<SageButton type="success" icon={<EditOutlined />} onClick={(e) => onEdit(e)} disabled={editable} style={{marginLeft: '8px'}}>编辑</SageButton>
<SageButton type="waring" icon={<SwapOutlined />} onClick={(e) => onExpand(e)} style={{marginLeft: '8px'}}>全部展开/折叠</SageButton>
</>
)
},
toolOptionConfig: ['reload', 'hiddensearch', 'density', 'fullScreen']
}
// 窗口确认按钮
const onOk = async () => {
if (status === 'add' && createFormRef.current) {
createFormRef.current.submit();
}
if (status === 'update' && updateFormRef.current) {
updateFormRef.current.submit();
}
}
// 表单提交成功
const onFinish = async (values) => {
const formData = Object.assign({}, values)
// 处理赋值表单数据
// TODO
let res = null
setModalLoading(true)
switch (status) {
case 'add':
res = await addMenu(formData)
break;
case 'update':
formData.id = detail.id
res = await updateMenu(formData)
break
default:
break;
}
setModalLoading(false)
if (res.isSuccess) {
sageMessage.success('保存成功')
modalRef.current.setVisible(false)
tableRef.current.reloadTable()
}
}
return (
<PageHeaderWrapper>
<SageTable
ref={tableRef}
{...tableSearchFormProps}
{...tableToolProps}
{...tableProps}
request={(params) => queryMenu(params)}
renderData={data => renderMenuData(data)}
/>
<SageModal
ref={modalRef}
onOk={onOk}
width={600}
confirmLoading={modalLoading}
destroyOnClose
>
{
status === 'add' ?
<CreateForm
ref={createFormRef}
onFinish={onFinish}
/> : null
}
{
status === 'update' ?
<UpdateForm
ref={updateFormRef}
detail={detail}
onFinish={onFinish}
/> : null
}
</SageModal>
</PageHeaderWrapper>
)
}
export default MenuList
src/pages/menu/service.js 0 → 100644
import request from '@/utils/request';
import { requestPrefix } from '@/services/prefix'
export async function queryMenu(params) {
return request(`/${requestPrefix}/party/menu/menu`, {
method: 'POST',
data: { ...params },
});
}
export async function removeMenu(params) {
return request(`/${requestPrefix}/party/menu/delete`, {
method: 'POST',
data: { ...params },
});
}
export async function addMenu(params) {
return request(`/${requestPrefix}/party/menu/saveOrEdit`, {
method: 'POST',
data: { ...params },
});
}
export async function updateMenu(params) {
return request(`/${requestPrefix}/party/menu/saveOrEdit`, {
method: 'POST',
data: { ...params },
});
}
// 查询
export function getMenuDetail(params) {
return request(`/${requestPrefix}/party/menu/selectById`, {
method: 'POST',
data: { ...params },
})
}
src/pages/role/components/CreateForm.jsx
...@@ -25,9 +25,16 @@ const CreateForm = (props, ref) => { ...@@ -25,9 +25,16 @@ const CreateForm = (props, ref) => {
rules: [{ required: true }] rules: [{ required: true }]
}, },
{ {
name: 'remarks', name: 'orderNum',
label: '备注', label: '排序',
type: 'textarea' type: 'input',
rules: [{ required: true }]
},
{
name: 'status',
label: '状态',
type: 'switch',
initialValue: true,
} }
] ]
......
src/pages/role/components/UpdateForm.jsx
...@@ -25,9 +25,15 @@ const UpdateForm = (props, ref) => { ...@@ -25,9 +25,15 @@ const UpdateForm = (props, ref) => {
rules: [{ required: true }] rules: [{ required: true }]
}, },
{ {
name: 'remarks', name: 'orderNum',
label: '备注', label: '排序',
type: 'textarea' type: 'input',
rules: [{ required: true }]
},
{
name: 'status',
label: '状态',
type: 'switch'
} }
] ]
......
src/pages/role/index.jsx
...@@ -10,9 +10,7 @@ import UpdateForm from './components/UpdateForm' ...@@ -10,9 +10,7 @@ import UpdateForm from './components/UpdateForm'
const initDetail = { const initDetail = {
id: null, id: null
roleName: '',
remarks: ''
} }
const TableList = () => { const TableList = () => {
...@@ -69,14 +67,15 @@ const TableList = () => { ...@@ -69,14 +67,15 @@ const TableList = () => {
setStatus('update') setStatus('update')
const res = await getRuleDetail({ id: record.id }) const res = await getRuleDetail({ id: record.id })
const { data: { role: roleData } } = res const { data } = res
setDetail(roleData) setDetail(data)
modalRef.current.setTitle('编辑角色') modalRef.current.setTitle('编辑角色')
modalRef.current.setVisible(true) modalRef.current.setVisible(true)
updateFormRef.current.setFieldsValue({ updateFormRef.current.setFieldsValue({
roleName: roleData.roleName, roleName: data.roleName,
remarks: roleData.remarks orderNum: data.orderNum,
status: data.status === '1'
}) })
} }
...@@ -96,15 +95,15 @@ const TableList = () => { ...@@ -96,15 +95,15 @@ const TableList = () => {
event.stopPropagation() event.stopPropagation()
const res = await getRuleDetail({ id: record.id }) const res = await getRuleDetail({ id: record.id })
const { data: { role: roleObject, auth } } = res const { data: { id, authList } } = res
const checkedKeys = [] const checkedKeys = []
auth.forEach(item => { authList && authList.forEach(item => {
checkedKeys.push(item.authCode) checkedKeys.push(item)
}) })
menutreeRef.current.setCheckedKeys(checkedKeys) menutreeRef.current.setCheckedKeys(checkedKeys)
setRole(roleObject) setRole({id})
} }
// 表格 // 表格
...@@ -117,10 +116,15 @@ const TableList = () => { ...@@ -117,10 +116,15 @@ const TableList = () => {
ellipsis: true, ellipsis: true,
}, },
{ {
title: '备注', title: '排序',
dataIndex: 'remarks', dataIndex: 'orderNum',
key: 'remarks', key: 'orderNum',
ellipsis: true, },
{
title: '角色状态',
dataIndex: 'status',
key: 'status',
render: text => text === '1' ? '启用' : '禁用'
}, },
{ {
title: '操作', title: '操作',
...@@ -151,7 +155,6 @@ const TableList = () => { ...@@ -151,7 +155,6 @@ const TableList = () => {
const onAdd = () => { const onAdd = () => {
if (modalRef.current) { if (modalRef.current) {
setStatus('add') setStatus('add')
setDetail(initDetail)
modalRef.current.setTitle('新增角色') modalRef.current.setTitle('新增角色')
modalRef.current.setVisible(true) modalRef.current.setVisible(true)
if (createFormRef.current) { if (createFormRef.current) {
...@@ -185,6 +188,9 @@ const TableList = () => { ...@@ -185,6 +188,9 @@ const TableList = () => {
// 表单提交成功 // 表单提交成功
const onFinish = async (values) => { const onFinish = async (values) => {
const formData = Object.assign({}, values) const formData = Object.assign({}, values)
// 处理赋值表单数据
// TODO
formData.status = formData.status ? '1' : '0'
let res = null let res = null
setModalLoading(true) setModalLoading(true)
...@@ -214,7 +220,7 @@ const TableList = () => { ...@@ -214,7 +220,7 @@ const TableList = () => {
const pp = { const pp = {
...role, ...role,
authCodeArr: checkedKeys.join(',') authList: checkedKeys.checked
} }
const res = await updateRule(pp) const res = await updateRule(pp)
......
src/services/menu.js
...@@ -2,7 +2,7 @@ import request from '@/utils/request'; ...@@ -2,7 +2,7 @@ import request from '@/utils/request';
// 获取菜单 // 获取菜单
export function getMenu(params) { export function getMenu(params) {
return request('/ebd/party/role/menu', { return request('/ebd/party/menu/menu', {
method: 'POST', method: 'POST',
data: { ...params } data: { ...params }
}) })
......
src/utils/verify.js 0 → 100644
const companyCode = /^[0-9A-Z]{18}$/
/* 整数 */
const integer = /^-?[1-9]\d*$/
/* 正整数 */
const poInteger = /^[0-9]*[1-9][0-9]*$/
/* 负整数 */
const neInteger = /^-[0-9]*[1-9][0-9]*$/
/* 浮点数 */
const float = /^(-?\d+)(\.\d+)?$/
/* 正浮点数 */
const poFloat = /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/
/* 负浮点数 */
const neFloat = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/
/* email地址 */
const email = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/
/* QQ号码 */
const qq = /[1-9][0-9]{4,}/
/* 匹配中文字符 */
const zh = /[\u4e00-\u9fa5]/
/* 匹配帐号是否合法(字母开头，允许5-10字节，允许字母数字下划线) */
const account = /^[a-zA-Z][a-zA-Z0-9_]{4,9}$/
/* 匹配空白行 */
const blankLine = /\n\s*\r/
/* 中国邮政编码 */
const postal = /[1-9]\d{5}(?!\d)/
/* 匹配身份证 */
const idCode = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/
/* 匹配IP地址 */
const ip = /((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/
/* url地址 */
const url = /[a-zA-z]+:\/\/[^\s]*/
/* 匹配首尾空白字符 */
const blankChars = /^\s*|\s*$/
/* 中国大陆手机号 (移动/联通/电信) */
const mobile = /^1(3[0-9]|4[5-9]|5[0-35-9]|66|7[013-8]|8[0-9]|9[89])\d{8}$/
/* 固定电话 */
const tel = /^(0[0-9]{2,3}\-?)?([2-9][0-9]{6,7})(\-?[0-9]{1,4})?$/
const contact = /^(1(3[0-9]|4[5-9]|5[0-35-9]|66|7[013-8]|8[0-9]|9[89])\d{8})$|^((0[0-9]{2,3}\-?)?([2-9][0-9]{6,7})(\-?[0-9]{1,4})?)$/
export {
integer,
poInteger,
neInteger,
float,
poFloat,
neFloat,
email,
qq,
zh,
account,
blankLine,
postal,
idCode,
ip,
url,
blankChars,
mobile,
tel,
companyCode,
contact
}
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论