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) name = toCamelCase(name)
const codes = this.state.codes[name] const codes = this.state.codes[name]
if (codes) { if (codes) {
const c = codes.find(p => p.code === code) const c = codes.find(p => p.code == code)
if (c) { if (c) {
return c.value return c.value
} }

View File

@@ -1,6 +1,6 @@
@import (reference) '../extend.less'; @import (reference) '../extend.less';
.ant-modal-content { .ant-modal-content {
background-color: fade(@white, 90%); background-color: fade(@primary-color, 50%);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
} }
@@ -9,15 +9,29 @@
background-color: transparent; background-color: transparent;
} }
.ant-modal-title {
color: fade(@white, 85%);
}
.ant-modal-body { .ant-modal-body {
background-color: @white; background-color: @white;
} }
.ant-modal-footer { .ant-modal-footer {
background-color: @white; background-color: @white;
} }
.ant-modal-close-x { .ant-modal-close {
line-height: 46px; top: 10px;
right: 10px;
width: 46px; color: fade(@white, 75%);
height: 46px; 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 const permissions = info.permissions
if (!permissions) {
return false
}
let flag = false let flag = false
if (auth) { if (auth) {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -7,7 +7,7 @@ import { api } from 'common/api'
import { token } from 'common/token' import { token } from 'common/token'
import { AntIcon, Image } from 'components' import { AntIcon, Image } from 'components'
const { getState, subscribe } = store const { getState, dispatch, subscribe } = store
const storePath = 'user' const storePath = 'user'
@@ -15,10 +15,9 @@ let userOpenTimer, userCloseTimer
let initDropdownHeight let initDropdownHeight
class User extends Component { class User extends Component {
state = { state = {
dropdownHeight: 0, dropdownHeight: 0,
user: getState(storePath) user: getState(storePath),
} }
constructor(props) { constructor(props) {
@@ -26,7 +25,7 @@ class User extends Component {
this.unsubscribe = subscribe(storePath, () => { this.unsubscribe = subscribe(storePath, () => {
this.setState({ this.setState({
user: getState(storePath) user: getState(storePath),
}) })
}) })
} }
@@ -43,29 +42,29 @@ class User extends Component {
this.unsubscribe() this.unsubscribe()
} }
onOpen = (e) => { onOpen = e => {
clearTimeout(userCloseTimer) clearTimeout(userCloseTimer)
this.refs.container.classList.add('open') this.refs.container.classList.add('open')
userOpenTimer = setTimeout(() => { userOpenTimer = setTimeout(() => {
this.refs.container.classList.add('drop') this.refs.container.classList.add('drop')
this.setState({ this.setState({
dropdownHeight: initDropdownHeight dropdownHeight: initDropdownHeight,
}) })
}, 300) }, 300)
} }
onClose = (e) => { onClose = e => {
clearTimeout(userOpenTimer) clearTimeout(userOpenTimer)
this.refs.container.classList.remove('drop') this.refs.container.classList.remove('drop')
this.setState({ this.setState({
dropdownHeight: 0 dropdownHeight: 0,
}) })
userCloseTimer = setTimeout(() => { userCloseTimer = setTimeout(() => {
this.refs.container.classList.remove('open') this.refs.container.classList.remove('open')
}, 300) }, 300)
} }
onAccountSetting = () => { } onAccountSetting = () => {}
onLogout = () => { onLogout = () => {
Modal.confirm({ Modal.confirm({
@@ -75,11 +74,13 @@ class User extends Component {
const { success, message } = await api.logout() const { success, message } = await api.logout()
if (success) { if (success) {
token.value = '' token.value = ''
dispatch({ type: 'RESET_USER_ACCOUNT' })
dispatch({ type: 'RESET_NAV' })
this.props.history.replace('/login') this.props.history.replace('/login')
} else { } else {
Message.error(message) Message.error(message)
} }
} },
}) })
} }
@@ -87,16 +88,32 @@ class User extends Component {
return ( return (
<div <div
className="user-container" className="user-container"
onMouseEnter={(e) => { this.onOpen(e) }} onMouseEnter={e => {
onMouseLeave={(e) => { this.onClose(e) }} this.onOpen(e)
}}
onMouseLeave={e => {
this.onClose(e)
}}
ref="container" ref="container"
> >
<div className="user-container-inner"> <div className="user-container-inner">
<div className="user--base"> <div className="user--base">
<Image width="32" type="avatar" className="user--avatar" icon={<AntIcon type="user" />} id={this.state.user.avatar} /> <Image
<span className="user--name">{this.state.user.nickName || this.state.user.name}</span> 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>
<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"> <ul className="ant-dropdown-menu ant-dropdown-menu-vertical">
<li className="ant-dropdown-menu-item" onClick={this.onAccountSetting}> <li className="ant-dropdown-menu-item" onClick={this.onAccountSetting}>
<AntIcon type="user" /> <AntIcon type="user" />
@@ -110,10 +127,9 @@ class User extends Component {
</ul> </ul>
</div> </div>
</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 { dispatch } = store
const serializeMenu = (menus) => { const serializeMenu = menus => {
const menu = cloneDeep(menus) const menu = cloneDeep(menus)
const children = groupBy(menu, 'pid') const children = groupBy(menu, 'pid')
const serialize = (m) => { const serialize = m => {
m.forEach((p) => { m.forEach(p => {
if (children[p.id]) { if (children[p.id]) {
p.children = serialize(children[p.id]) p.children = serialize(children[p.id])
} }
@@ -28,9 +28,9 @@ const serializeMenu = (menus) => {
return children[EMPTY_ID] ? serialize(children[EMPTY_ID]) : [] return children[EMPTY_ID] ? serialize(children[EMPTY_ID]) : []
} }
const setNav = async (nav) => { const setNav = async nav => {
const getNav = [] const getNav = []
nav.apps.forEach((app) => { nav.apps.forEach(app => {
getNav.push({ getNav.push({
app, app,
}) })
@@ -48,16 +48,14 @@ const getNewID = () => {
} }
export default class index extends Component { export default class index extends Component {
state = { state = {
loading: true, loading: true,
panes: [], panes: [],
actived: '', actived: '',
test: 0 test: 0,
} }
componentDidMount() { componentDidMount() {
window.openContentWindow = this.onOpenContentWindow window.openContentWindow = this.onOpenContentWindow
window.closeContentWindow = this.onCloseContentWindow window.closeContentWindow = this.onCloseContentWindow
window.closeOtherContentWindow = this.onCloseOtherContentWindow window.closeOtherContentWindow = this.onCloseOtherContentWindow
@@ -68,12 +66,12 @@ export default class index extends Component {
dispatch({ dispatch({
type: 'SET_USER_ACCOUNT', type: 'SET_USER_ACCOUNT',
user: data user: data,
}) })
dispatch({ dispatch({
type: 'SET_ANV', type: 'SET_NAV',
nav nav,
}) })
this.setState({ loading: false }, () => { this.setState({ loading: false }, () => {
@@ -89,23 +87,23 @@ export default class index extends Component {
/** /**
* 打开窗口 * 打开窗口
* @param {*} settings * @param {*} settings
* @returns * @returns
*/ */
onOpenContentWindow = (settings) => { onOpenContentWindow = settings => {
if (settings.path) { 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) { if (pane) {
this.onChangeContentWindow(key); this.onChangeContentWindow(key)
return; 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, loaded: false,
} }
this.setState({ this.setState({
panes: [...this.state.panes, newPane] panes: [...this.state.panes, newPane],
}) })
this.onChangeContentWindow(key); this.onChangeContentWindow(key)
//this.$refs.content.onLoadContentWindow(key); //this.$refs.content.onLoadContentWindow(key);
} else { } else {
console.warn('wrong component path'); console.warn('wrong component path')
} }
} }
/** /**
* 关闭窗口 * 关闭窗口
* @param {*} key * @param {*} key
*/ */
onCloseContentWindow = (key) => { onCloseContentWindow = key => {
key = key || this.state.actived key = key || this.state.actived
const panes = this.state.panes 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) panes.splice(i, 1)
this.setState({ this.setState(
panes {
}, () => { panes,
if (panes.length) { },
if (key === this.state.actived) { () => {
const pane = panes[i] if (panes.length) {
if (pane) { if (key === this.state.actived) {
this.onChangeContentWindow(pane.key) const pane = panes[i]
} else { if (pane) {
this.onChangeContentWindow(panes[i - 1].key) this.onChangeContentWindow(pane.key)
} else {
this.onChangeContentWindow(panes[i - 1].key)
}
} }
} }
} }
}) )
} }
onCloseOtherContentWindow = (key) => { onCloseOtherContentWindow = key => {
if (!key) return if (!key) return
const panes = this.state.panes const panes = this.state.panes
@@ -168,23 +169,25 @@ export default class index extends Component {
const p = panes[i] const p = panes[i]
if (p.key !== key && p.closable) { if (p.key !== key && p.closable) {
if (p.key === this.state.actived) { if (p.key === this.state.actived) {
flag = true; flag = true
} }
panes.splice(i, 1); panes.splice(i, 1)
} }
} }
this.setState({ this.setState(
panes {
}, () => { panes,
if (flag) { },
this.onChangeContentWindow(last(panes).key); () => {
if (flag) {
this.onChangeContentWindow(last(panes).key)
}
} }
}) )
} }
onCloseRightContentWindow = (key) => { onCloseRightContentWindow = key => {
if (!key) return if (!key) return
const panes = this.state.panes const panes = this.state.panes
@@ -201,32 +204,34 @@ export default class index extends Component {
} }
} }
this.setState({ this.setState(
panes {
}, () => { panes,
if (flag) { },
this.onChangeContentWindow(last(panes).key); () => {
if (flag) {
this.onChangeContentWindow(last(panes).key)
}
} }
}) )
} }
onReloadContentWindow = (key) => { onReloadContentWindow = key => {
if (!key) key = this.state.actived if (!key) key = this.state.actived
//this.$refs.content.onLoadContentWindow(key); //this.$refs.content.onLoadContentWindow(key);
} }
/** /**
* 选中窗口 * 选中窗口
* @param {*} key * @param {*} key
*/ */
onChangeContentWindow = (key) => { onChangeContentWindow = key => {
this.setState({ this.setState({
actived: key actived: key,
}) })
} }
render() { render() {
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin /> const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />
return ( return (
@@ -237,7 +242,11 @@ export default class index extends Component {
<Header /> <Header />
<Layout className="yo-nav-theme--light"> <Layout className="yo-nav-theme--light">
<Sider /> <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> </Layout>
</Layout> </Layout>