From 0ba276caaffedaf757b932f26aac86f695008175 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期一, 28 十一月 2022 17:34:50 +0800
Subject: [PATCH] 2022-11-28
---
src/components/mkIcon/index.jsx | 74 ++++++++++++++++++++++++++++++++-----
1 files changed, 64 insertions(+), 10 deletions(-)
diff --git a/src/components/mkIcon/index.jsx b/src/components/mkIcon/index.jsx
index dcb0684..0447f06 100644
--- a/src/components/mkIcon/index.jsx
+++ b/src/components/mkIcon/index.jsx
@@ -1,13 +1,15 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
-import { Modal, Row, Col, Button } from 'antd'
-import { CloseCircleFilled } from '@ant-design/icons'
+import { Modal, Row, Col, Button, Tabs, notification } from 'antd'
+import { CloseCircleFilled, RedoOutlined } from '@ant-design/icons'
+import Api from '@/api'
import { minkeIconSystem } from '@/utils/option.js'
import MkIcon from '@/components/mk-icon'
import './index.scss'
+const { TabPane } = Tabs
// ['direction', 'edit', 'normal', 'data', 'hint']
class MkEditIcon extends Component {
@@ -19,6 +21,7 @@
selectIcon: '',
allowClear: false,
icons: [],
+ cusicons: [],
visible: false
}
@@ -42,6 +45,16 @@
this.setState({selectIcon: val, allowClear: this.props.allowClear === true, icons})
}
+ componentDidMount() {
+ if (!window.GLOB.designView) {
+ if (sessionStorage.getItem('systemIcons')) {
+ this.setState({cusicons: JSON.parse(sessionStorage.getItem('systemIcons'))})
+ } else {
+ this.getIcons()
+ }
+ }
+ }
+
shouldComponentUpdate (nextProps, nextState) {
return !is(fromJS(this.state), fromJS(nextState))
}
@@ -51,8 +64,33 @@
this.props.onChange(val)
}
+ getIcons = () => {
+ Api.getSystemConfig({ func: 's_get_icons' }).then(res => {
+ if (!res.status) {
+ notification.warning({
+ top: 92,
+ message: res.message,
+ duration: 5
+ })
+ sessionStorage.setItem('systemIcons', JSON.stringify([]))
+ return
+ } else if (!res.data) {
+ return
+ }
+
+ let icons = res.data.map(item => {
+ item.icon_svg = window.decodeURIComponent(window.atob(item.icon_svg))
+ return item
+ })
+
+ sessionStorage.setItem('systemIcons', JSON.stringify(icons))
+
+ this.setState({cusicons: icons})
+ })
+ }
+
render() {
- const { selectIcon, visible, icons, allowClear } = this.state
+ const { selectIcon, visible, icons, allowClear, cusicons } = this.state
return (
<div className="mk-icon-box">
@@ -60,8 +98,8 @@
<MkIcon className="trigger" onClick={() => this.setState({visible: true})} type="swap"/>
{allowClear && selectIcon ? <CloseCircleFilled className="close" onClick={() => this.checkIcon('')}/> : null}
<Modal
- wrapClassName="popview-modal mk-icon-wrap"
- title={'鍥炬爣閫夋嫨'}
+ wrapClassName="mk-pop-modal mk-icon-wrap"
+ // title={'鍥炬爣閫夋嫨'}
visible={visible}
width={800}
maskClosable={false}
@@ -71,11 +109,27 @@
]}
destroyOnClose
>
- <Row>
- {icons.map(icon => <Col className={icon === selectIcon ? 'active' : ''} key={icon} span={4}>
- <MkIcon onClick={() => this.checkIcon(icon)} type={icon} />
- </Col>)}
- </Row>
+ <Tabs className={cusicons.length > 0 ? 'dubble-tabs' : ''}>
+ <TabPane tab="绯荤粺" key="setting">
+ <Row>
+ {icons.map(icon => <Col className={icon === selectIcon ? 'active' : ''} key={icon} span={4}>
+ <MkIcon onClick={() => this.checkIcon(icon)} type={icon} />
+ </Col>)}
+ </Row>
+ </TabPane>
+ <TabPane tab={
+ <span className="tab-control">
+ <RedoOutlined onClick={(e) => {this.getIcons()}}/>
+ 鑷畾涔�
+ </span>
+ } key="scripts">
+ <Row>
+ {cusicons.map(icon => <Col key={icon.id} span={4} onClick={() => this.checkIcon(icon.icon_svg)}>
+ <MkIcon type={icon.icon_svg} />
+ </Col>)}
+ </Row>
+ </TabPane>
+ </Tabs>
</Modal>
</div>
)
--
Gitblit v1.8.0