From c7aece35a62b6e91fd98a625bf0e53f64bfbd18d Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 17 八月 2023 16:22:15 +0800
Subject: [PATCH] 2023-08-17

---
 src/components/mkIcon/index.jsx |  114 +++++++++++++++++++++++++++++++++++++++++++++++++--------
 1 files changed, 98 insertions(+), 16 deletions(-)

diff --git a/src/components/mkIcon/index.jsx b/src/components/mkIcon/index.jsx
index c1c7c13..529f3a4 100644
--- a/src/components/mkIcon/index.jsx
+++ b/src/components/mkIcon/index.jsx
@@ -1,12 +1,18 @@
 import React, {Component} from 'react'
 import PropTypes from 'prop-types'
 import { is, fromJS } from 'immutable'
-import { Modal, Icon, Row, Col, Button } from 'antd'
+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'
 
-class MkIcon extends Component {
+const { TabPane } = Tabs
+// ['direction', 'edit', 'normal', 'data', 'hint']
+
+class MkEditIcon extends Component {
   static propTpyes = {
     onChange: PropTypes.func
   }
@@ -14,17 +20,39 @@
   state = {
     selectIcon: '',
     allowClear: false,
-    icons: [...minkeIconSystem.direction, ...minkeIconSystem.edit, ...minkeIconSystem.normal, ...minkeIconSystem.trademark, ...minkeIconSystem.data, ...minkeIconSystem.hint],
+    icons: [],
+    cusicons: [],
     visible: false
   }
 
   UNSAFE_componentWillMount () {
+    const { options } = this.props
     let val = ''
     if (this.props['data-__meta']) {
       val = this.props['data-__meta'].initialValue || ''
     }
 
-    this.setState({selectIcon: val, allowClear: this.props.allowClear === true})
+    let icons = []
+
+    if (options) {
+      options.forEach(item => {
+        icons.push(...minkeIconSystem[item])
+      })
+    } else {
+      icons = [...minkeIconSystem.direction, ...minkeIconSystem.edit, ...minkeIconSystem.normal, ...minkeIconSystem.data, ...minkeIconSystem.hint]
+    }
+
+    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) {
@@ -36,17 +64,55 @@
     this.props.onChange(val)
   }
 
+  getIcons = () => {
+    Api.getCloudConfig({ 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})
+    })
+  }
+
+  trigger = () => {
+    const { selectIcon, cusicons } = this.state
+
+    this.setState({visible: true})
+
+    if (cusicons.length > 0 && selectIcon && /<svg/.test(selectIcon)) {
+      setTimeout(() => {
+        let node = document.getElementById('mk-custom-tab')
+        node && node.click()
+      }, 200)
+    }
+  }
+
   render() {
-    const { selectIcon, visible, icons, allowClear } = this.state
+    const { selectIcon, visible, icons, allowClear, cusicons } = this.state
 
     return (
       <div className="mk-icon-box">
-        {selectIcon ? <Icon type={selectIcon}/> : <Icon style={{opacity: 0}} type="plus"/>}
-        <Icon className="trigger" onClick={() => this.setState({visible: true})} type="swap"/>
-        {allowClear && selectIcon ? <Icon className="close" onClick={() => this.checkIcon('')} theme="filled" type="close-circle"/> : null}
+        {selectIcon ? <MkIcon type={selectIcon}/> : <span style={{color: '#bcbcbc'}}>璇烽�夋嫨</span>}
+        <MkIcon className="trigger" onClick={this.trigger} 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}
@@ -56,15 +122,31 @@
           ]}
           destroyOnClose
         >
-          <Row>
-            {icons.map(icon => <Col className={icon === selectIcon ? 'active' : ''} key={icon} span={4}>
-              <Icon 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" id="mk-custom-tab">
+                <RedoOutlined onClick={(e) => {this.getIcons()}}/>
+                鑷畾涔�
+              </span>
+            } key="scripts">
+              <Row>
+                {cusicons.map(icon => <Col className={icon.icon_svg === selectIcon ? 'active' : ''} key={icon.id} span={4} onClick={() => this.checkIcon(icon.icon_svg)}>
+                  <MkIcon type={icon.icon_svg} />
+                </Col>)}
+              </Row>
+            </TabPane>
+          </Tabs>
         </Modal>
       </div>
     )
   }
 }
 
-export default MkIcon
\ No newline at end of file
+export default MkEditIcon
\ No newline at end of file

--
Gitblit v1.8.0