2022-11-28

king

2022-11-28 0ba276caaffedaf757b932f26aac86f695008175

 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
        >
          <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>
    )