From 89949fc82a0194f985cb542abb7118724804bd5b Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 19 五月 2020 11:41:06 +0800
Subject: [PATCH] 2020-05-19

---
 src/templates/sharecomponent/cardcomponent/index.jsx |  104 +++++++++++++++++++++++++++++++++++++++-------------
 1 files changed, 78 insertions(+), 26 deletions(-)

diff --git a/src/templates/sharecomponent/cardcomponent/index.jsx b/src/templates/sharecomponent/cardcomponent/index.jsx
index 69c5ddb..baed22f 100644
--- a/src/templates/sharecomponent/cardcomponent/index.jsx
+++ b/src/templates/sharecomponent/cardcomponent/index.jsx
@@ -23,7 +23,7 @@
 
   state = {
     dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
-    visible: false,
+    modaltype: '',
     formlist: null,
     cardcell: null   // 鍗＄墖鍏冪礌
   }
@@ -81,39 +81,91 @@
 
     this.setState({
       cardcell: _cell,
-      visible: true,
-      formlist: getCardDetailForm(_cell, _columns)
+      modaltype: 'detail',
+      formlist: getCardDetailForm(_cell, _columns, 'detail')
+    })
+  }
+
+  editHeader = () => {
+    const { config, card } = this.props
+
+    let _columns = config.columns.filter(col => ['text', 'number'].includes(col.type))
+    _columns = _columns.map(col => {
+      return {
+        uuid: col.uuid,
+        value: col.field,
+        text: col.label
+      }
+    })
+    let _actions = config.action.filter(item => item.position === 'grid')
+
+    _actions = _actions.map(item => {
+      return {
+        value: item.uuid,
+        icon: item.icon,
+        text: item.label
+      }
+    })
+
+    let _cell = fromJS(card.header).toJS()
+    if (_columns.filter(col => col.value === _cell.field).length === 0) {
+      _cell.field = ''
+    }
+    if (_cell.actions.length > 0) {
+      let actionIds = _actions.map(item => item.value)
+      _cell.actions = _cell.actions.filter(item => actionIds.includes(item.value))
+    }
+
+    this.setState({
+      cardcell: _cell,
+      modaltype: 'header',
+      formlist: getCardDetailForm(_cell, _columns, 'header', _actions)
     })
   }
 
   handleSubmit = () => {
-    const { card } = this.props
-    let _details = fromJS(card.details).toJS()
+    const { modaltype } = this.state
 
-    this.detailFormRef.handleConfirm().then(res => {
-      if (!res.uuid) {
-        res.uuid = Utils.getuuid()
-        _details.push(res)
-      } else {
-        _details = _details.map(item => {
-          if (item.uuid === res.uuid) return res
-          return item
+    this.cardFormRef.handleConfirm().then(res => {
+      if (modaltype === 'detail') {
+        let _details = fromJS(this.props.card.details).toJS()
+        if (!res.uuid) {
+          res.uuid = Utils.getuuid()
+          _details.push(res)
+        } else {
+          _details = _details.map(item => {
+            if (item.uuid === res.uuid) return res
+            return item
+          })
+        }
+  
+        this.setState({
+          cardcell: null,
+          modaltype: '',
+          formlist: null
         })
+        this.plotChange({details: _details})
+      } else if (modaltype === 'header') {
+        let _header = fromJS(this.props.card.header).toJS()
+        _header.content = res.content
+        _header.datatype = res.datatype
+        _header.field = res.field
+        _header.actions = res.actions
+  
+        this.setState({
+          cardcell: null,
+          modaltype: '',
+          formlist: null
+        })
+        this.plotChange({header: _header})
       }
-
-      this.setState({
-        cardcell: null,
-        visible: false,
-        formlist: null
-      })
-      this.plotChange({details: _details})
     })
   }
 
   editModalCancel = () => {
     this.setState({
       cardcell: null,
-      visible: false,
+      modaltype: '',
       formlist: null
     })
   }
@@ -141,7 +193,7 @@
 
   render() {
     const { card } = this.props
-    const { dict, visible, cardcell } = this.state
+    const { dict, modaltype, cardcell } = this.state
     let _width = '100%'
     if (card.actions.length > 0) {
       _width = Math.floor((100 / card.actions.length) * 10000) / 10000 + '%'
@@ -158,7 +210,7 @@
             <div className="ant-card-head">
               <Icon className="edit" title="Edit" type="edit" onClick={this.editHeader} />
               <div className="ant-card-head-wrapper">
-                <div className="ant-card-head-title">{card.header.title.content}</div>
+                <div className="ant-card-head-title">{card.header.content}</div>
                 <div className="ant-card-extra">
                   <span>Action</span>
                 </div>
@@ -187,7 +239,7 @@
           {card.subelement.includes('actions') ?
             <ul className="ant-card-actions">
               <Icon className="edit" title="Edit" type="edit" onClick={this.editAction} />
-              {card.actions.map(item => (<li style={{width: _width}}>
+              {card.actions.map((item, i) => (<li key={i} style={{width: _width}}>
                 <span>
                   <Icon type={item.icon || 'dash'}/>
                 </span>
@@ -198,7 +250,7 @@
         {/* 鏄剧ず鍒楃紪杈� */}
         <Modal
           title="缂栬緫"
-          visible={visible}
+          visible={!!modaltype}
           width={650}
           maskClosable={false}
           onOk={this.handleSubmit}
@@ -210,7 +262,7 @@
             card={cardcell}
             inputSubmit={this.handleSubmit}
             formlist={this.state.formlist}
-            wrappedComponentRef={(inst) => this.detailFormRef = inst}
+            wrappedComponentRef={(inst) => this.cardFormRef = inst}
           />
         </Modal>
       </div>

--
Gitblit v1.8.0