fix 一些问题

This commit is contained in:
2021-06-20 21:06:50 +08:00
parent c694078569
commit ada758e4db
10 changed files with 188 additions and 133 deletions

View File

@@ -134,7 +134,7 @@ export default class index extends Component {
name = toCamelCase(name)
const codes = this.state.codes[name]
if (codes) {
const c = codes.find(p => p.code === code)
const c = codes.find(p => p.code == code)
if (c) {
return c.value
}

View File

@@ -1,6 +1,6 @@
@import (reference) '../extend.less';
.ant-modal-content {
background-color: fade(@white, 90%);
background-color: fade(@primary-color, 50%);
backdrop-filter: blur(5px);
}
@@ -9,15 +9,29 @@
background-color: transparent;
}
.ant-modal-title {
color: fade(@white, 85%);
}
.ant-modal-body {
background-color: @white;
}
.ant-modal-footer {
background-color: @white;
}
.ant-modal-close-x {
line-height: 46px;
.ant-modal-close {
top: 10px;
right: 10px;
width: 46px;
height: 46px;
color: fade(@white, 75%);
background-color: @error-color;
&:hover,
&:focus {
color: @white;
}
}
.ant-modal-close-x {
line-height: 26px;
width: 26px;
height: 26px;
}

View File

@@ -113,6 +113,10 @@ const auth = (auth) => {
const permissions = info.permissions
if (!permissions) {
return false
}
let flag = false
if (auth) {

View File

@@ -185,10 +185,10 @@ export default class index extends Component {
<List.Item
key={record.id}
actions={[
<Auth auth="sysUser:edit">
<Auth auth="houseMember:edit">
<a onClick={() => this.onOpen(this.editForm, record)}>编辑</a>
</Auth>,
<Auth auth="sysOrg:delete">
<Auth auth="houseMember:delete">
<Popconfirm
placement="topRight"
title="是否确认删除"
@@ -197,7 +197,7 @@ export default class index extends Component {
<a>删除</a>
</Popconfirm>
</Auth>,
<Auth aut="sysUser:resetPwd">
<Auth aut="houseMember:resetPwd">
<a onClick={() => this.onResetPassword(record)}>重置密码</a>
</Auth>,
]}
@@ -247,7 +247,7 @@ export default class index extends Component {
<Descriptions.Item label="邮箱">{record.email || '未设置'}</Descriptions.Item>
</Descriptions>
<div className="yo-list-content--h">
<Auth auth="sysUser:changeStatus">
<Auth auth="houseMember:changeStatus">
<div className="yo-list-content--h--item text-center">
<Switch
checked={!record.status}
@@ -292,7 +292,7 @@ export default class index extends Component {
autoLoad={false}
loadData={this.loadData}
query={
<Auth auth="sysApp:page">
<Auth auth="houseMember:page">
<Form.Item label="关键词" name="searchValue">
<Input
autoComplete="off"

View File

@@ -1,9 +1,13 @@
const nav = (state = { nav: [] }, action) => {
const defaultState = { nav: [] }
const nav = (state = defaultState, action) => {
// 写入各种action对应的操作
switch (action.type) {
case 'SET_ANV':
case 'SET_NAV':
const _state = { ...state, nav: action.nav }
return _state
case 'RESET_NAV':
return defaultState
default:
return state
}

View File

@@ -1,9 +1,13 @@
const user = (state = {}, action) => {
const defaultState = {}
const user = (state = defaultState, action) => {
// 写入各种action对应的操作
switch (action.type) {
case 'SET_USER_ACCOUNT':
const _state = { ...state, ...action.user }
return _state
case 'RESET_USER_ACCOUNT':
return defaultState
default:
return state
}

View File

@@ -9,15 +9,14 @@ import store from 'store'
const { getState, subscribe, dispatch } = store
export default class index extends Component {
state = {
...getState('layout')
...getState('layout'),
}
constructor(props) {
super(props)
this.unsubscribe = subscribe('layout', (state) => {
this.unsubscribe = subscribe('layout', state => {
this.setState(state)
})
}
@@ -29,7 +28,7 @@ export default class index extends Component {
onCollapsed() {
dispatch({
type: 'TOGGLE_COLLAPSED',
siderCollapsed: !this.state.siderCollapsed
siderCollapsed: !this.state.siderCollapsed,
})
}
@@ -45,7 +44,10 @@ export default class index extends Component {
<Search />
</div>
<div className="header-actions">
<span className="header-action" onClick={() => window.realodContentWindow()}>
<span
className="header-action"
onClick={() => window.realodContentWindow()}
>
<AntIcon type="reload" />
</span>
<span className="header-action">

View File

@@ -6,30 +6,47 @@ import { concat } from 'lodash'
const { getState, subscribe } = store
const unZip = (menus) => {
function unZip(menus) {
const result = []
menus.forEach(item => {
if (item.children) {
result.push({
parent: item.meta.title,
children: item.children
children: item.children,
})
} else {
result.push({
parent: item.meta.title,
children: [item]
children: [item],
})
}
})
return result
}
export default class search extends Component {
function renderTitle(title) {
return <span>{title}</span>
}
function renderItem(title, menu) {
return {
value: title,
component: menu.component,
menu,
label: (
<>
{title}
<div className="text-normal">{menu.component}</div>
</>
),
}
}
export default class search extends Component {
state = {
options: [],
searchValue: ''
searchValue: '',
}
nav = getState('nav').nav
@@ -54,8 +71,10 @@ export default class search extends Component {
onSearch(searchValue, option) {
searchValue = searchValue.toLowerCase()
return (option.value && option.value.toLowerCase().indexOf(searchValue) > -1)
|| (option.component && option.component.toLowerCase().indexOf(searchValue) > -1)
return (
(option.value && option.value.toLowerCase().includes(searchValue)) ||
(option.component && option.component.toLowerCase().includes(searchValue))
)
}
onSelect(value, option) {
@@ -74,50 +93,33 @@ export default class search extends Component {
}
getOptions(nav) {
const menus = unZip(concat.apply(this, nav.map(p => p.menu)))
const menus = unZip(
concat.apply(
this,
nav.map(p => p.menu)
)
)
const options = menus.map(item => {
if (item.parent) {
return {
label: this.renderTitle(item.parent),
label: renderTitle(item.parent),
options: item.children.map(menu => {
return this.renderItem(menu.meta.title, menu)
})
return renderItem(menu.meta.title, menu)
}),
}
} else {
return {
options: item.children.map(menu => {
return this.renderItem(menu.meta.title, menu)
})
}),
}
}
})
this.setState({ options })
}
renderTitle(title) {
return <span>
{title}
</span>
}
renderItem(title, menu) {
return {
value: title,
component: menu.component,
menu,
label: (
<>
{title}
<div className="text-normal">{menu.component}</div>
</>
),
}
}
render() {
const { options, searchValue } = this.state
return (
@@ -128,10 +130,10 @@ export default class search extends Component {
dropdownMatchSelectWidth={false}
dropdownStyle={{ width: '300px' }}
dropdownClassName="certain-category-search-dropdown"
optionLabelProp="value"
optionFilterProp="value"
filterOption={(searchValue, option) => this.onSearch(searchValue, option)}
onSelect={(value, option) => this.onSelect(value, option)}
onChange={(value) => this.setState({ searchValue: value })}
onChange={value => this.setState({ searchValue: value })}
>
<Input
allowClear
@@ -141,4 +143,4 @@ export default class search extends Component {
</AutoComplete>
)
}
}
}

View File

@@ -7,7 +7,7 @@ import { api } from 'common/api'
import { token } from 'common/token'
import { AntIcon, Image } from 'components'
const { getState, subscribe } = store
const { getState, dispatch, subscribe } = store
const storePath = 'user'
@@ -15,10 +15,9 @@ let userOpenTimer, userCloseTimer
let initDropdownHeight
class User extends Component {
state = {
dropdownHeight: 0,
user: getState(storePath)
user: getState(storePath),
}
constructor(props) {
@@ -26,7 +25,7 @@ class User extends Component {
this.unsubscribe = subscribe(storePath, () => {
this.setState({
user: getState(storePath)
user: getState(storePath),
})
})
}
@@ -43,29 +42,29 @@ class User extends Component {
this.unsubscribe()
}
onOpen = (e) => {
onOpen = e => {
clearTimeout(userCloseTimer)
this.refs.container.classList.add('open')
userOpenTimer = setTimeout(() => {
this.refs.container.classList.add('drop')
this.setState({
dropdownHeight: initDropdownHeight
dropdownHeight: initDropdownHeight,
})
}, 300)
}
onClose = (e) => {
onClose = e => {
clearTimeout(userOpenTimer)
this.refs.container.classList.remove('drop')
this.setState({
dropdownHeight: 0
dropdownHeight: 0,
})
userCloseTimer = setTimeout(() => {
this.refs.container.classList.remove('open')
}, 300)
}
onAccountSetting = () => { }
onAccountSetting = () => {}
onLogout = () => {
Modal.confirm({
@@ -75,11 +74,13 @@ class User extends Component {
const { success, message } = await api.logout()
if (success) {
token.value = ''
dispatch({ type: 'RESET_USER_ACCOUNT' })
dispatch({ type: 'RESET_NAV' })
this.props.history.replace('/login')
} else {
Message.error(message)
}
}
},
})
}
@@ -87,16 +88,32 @@ class User extends Component {
return (
<div
className="user-container"
onMouseEnter={(e) => { this.onOpen(e) }}
onMouseLeave={(e) => { this.onClose(e) }}
onMouseEnter={e => {
this.onOpen(e)
}}
onMouseLeave={e => {
this.onClose(e)
}}
ref="container"
>
<div className="user-container-inner">
<div className="user--base">
<Image width="32" type="avatar" className="user--avatar" icon={<AntIcon type="user" />} id={this.state.user.avatar} />
<span className="user--name">{this.state.user.nickName || this.state.user.name}</span>
<Image
width="32"
type="avatar"
className="user--avatar"
icon={<AntIcon type="user" />}
id={this.state.user.avatar}
/>
<span className="user--name">
{this.state.user.nickName || this.state.user.name}
</span>
</div>
<div className="user--dropdown" ref="dropdown" style={{ height: `${this.state.dropdownHeight}px` }}>
<div
className="user--dropdown"
ref="dropdown"
style={{ height: `${this.state.dropdownHeight}px` }}
>
<ul className="ant-dropdown-menu ant-dropdown-menu-vertical">
<li className="ant-dropdown-menu-item" onClick={this.onAccountSetting}>
<AntIcon type="user" />
@@ -110,10 +127,9 @@ class User extends Component {
</ul>
</div>
</div>
</div >
</div>
)
}
}
export default withRouter(User)
export default withRouter(User)

View File

@@ -12,12 +12,12 @@ import Content from './_layout/content'
const { dispatch } = store
const serializeMenu = (menus) => {
const serializeMenu = menus => {
const menu = cloneDeep(menus)
const children = groupBy(menu, 'pid')
const serialize = (m) => {
m.forEach((p) => {
const serialize = m => {
m.forEach(p => {
if (children[p.id]) {
p.children = serialize(children[p.id])
}
@@ -28,9 +28,9 @@ const serializeMenu = (menus) => {
return children[EMPTY_ID] ? serialize(children[EMPTY_ID]) : []
}
const setNav = async (nav) => {
const setNav = async nav => {
const getNav = []
nav.apps.forEach((app) => {
nav.apps.forEach(app => {
getNav.push({
app,
})
@@ -48,16 +48,14 @@ const getNewID = () => {
}
export default class index extends Component {
state = {
loading: true,
panes: [],
actived: '',
test: 0
test: 0,
}
componentDidMount() {
window.openContentWindow = this.onOpenContentWindow
window.closeContentWindow = this.onCloseContentWindow
window.closeOtherContentWindow = this.onCloseOtherContentWindow
@@ -68,12 +66,12 @@ export default class index extends Component {
dispatch({
type: 'SET_USER_ACCOUNT',
user: data
user: data,
})
dispatch({
type: 'SET_ANV',
nav
type: 'SET_NAV',
nav,
})
this.setState({ loading: false }, () => {
@@ -89,23 +87,23 @@ export default class index extends Component {
/**
* 打开窗口
* @param {*} settings
* @returns
* @param {*} settings
* @returns
*/
onOpenContentWindow = (settings) => {
onOpenContentWindow = settings => {
if (settings.path) {
const key = settings.key || getNewID();
const key = settings.key || getNewID()
/**
* 如果当前标签页已打开,则只需要选中
*/
const pane = this.state.panes.find((p) => p.key === key);
const pane = this.state.panes.find(p => p.key === key)
if (pane) {
this.onChangeContentWindow(key);
return;
this.onChangeContentWindow(key)
return
}
const path = settings.path.startsWith('/') ? settings.path : `/${settings.path}`;
const path = settings.path.startsWith('/') ? settings.path : `/${settings.path}`
/**
* 向标签页队列中添加一个新的标签页
@@ -122,44 +120,47 @@ export default class index extends Component {
loaded: false,
}
this.setState({
panes: [...this.state.panes, newPane]
panes: [...this.state.panes, newPane],
})
this.onChangeContentWindow(key);
this.onChangeContentWindow(key)
//this.$refs.content.onLoadContentWindow(key);
} else {
console.warn('wrong component path');
console.warn('wrong component path')
}
}
/**
* 关闭窗口
* @param {*} key
* @param {*} key
*/
onCloseContentWindow = (key) => {
onCloseContentWindow = key => {
key = key || this.state.actived
const panes = this.state.panes
const i = findIndex(panes, (p) => p.key === key)
const i = findIndex(panes, p => p.key === key)
panes.splice(i, 1)
this.setState({
panes
}, () => {
if (panes.length) {
if (key === this.state.actived) {
const pane = panes[i]
if (pane) {
this.onChangeContentWindow(pane.key)
} else {
this.onChangeContentWindow(panes[i - 1].key)
this.setState(
{
panes,
},
() => {
if (panes.length) {
if (key === this.state.actived) {
const pane = panes[i]
if (pane) {
this.onChangeContentWindow(pane.key)
} else {
this.onChangeContentWindow(panes[i - 1].key)
}
}
}
}
})
)
}
onCloseOtherContentWindow = (key) => {
onCloseOtherContentWindow = key => {
if (!key) return
const panes = this.state.panes
@@ -168,23 +169,25 @@ export default class index extends Component {
const p = panes[i]
if (p.key !== key && p.closable) {
if (p.key === this.state.actived) {
flag = true;
flag = true
}
panes.splice(i, 1);
panes.splice(i, 1)
}
}
this.setState({
panes
}, () => {
if (flag) {
this.onChangeContentWindow(last(panes).key);
this.setState(
{
panes,
},
() => {
if (flag) {
this.onChangeContentWindow(last(panes).key)
}
}
})
)
}
onCloseRightContentWindow = (key) => {
onCloseRightContentWindow = key => {
if (!key) return
const panes = this.state.panes
@@ -201,32 +204,34 @@ export default class index extends Component {
}
}
this.setState({
panes
}, () => {
if (flag) {
this.onChangeContentWindow(last(panes).key);
this.setState(
{
panes,
},
() => {
if (flag) {
this.onChangeContentWindow(last(panes).key)
}
}
})
)
}
onReloadContentWindow = (key) => {
onReloadContentWindow = key => {
if (!key) key = this.state.actived
//this.$refs.content.onLoadContentWindow(key);
}
/**
* 选中窗口
* @param {*} key
* @param {*} key
*/
onChangeContentWindow = (key) => {
onChangeContentWindow = key => {
this.setState({
actived: key
actived: key,
})
}
render() {
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />
return (
@@ -237,7 +242,11 @@ export default class index extends Component {
<Header />
<Layout className="yo-nav-theme--light">
<Sider />
<Content parent={this} panes={this.state.panes} actived={this.state.actived} />
<Content
parent={this}
panes={this.state.panes}
actived={this.state.actived}
/>
</Layout>
</Layout>
</Layout>