Merge pull request '人员卡片' (#23) from feature/cl into dev

Reviewed-on: http://221.226.25.34:3000/liang.cheng/trunk/pulls/23

pc4mobx/organization/components/resource/FormItem.js

@@ -1,5 +1,7 @@
 import {
     WeaFormItem,
+    WeaTab,
+    WeaTableEdit
 } from 'ecCom'
 
 import {
@@ -13,21 +15,98 @@ import {
 } from '../../public/i18n';
 
 import '../../style/common.less';
-import { chunk } from 'lodash';
+import { chunk,isEmpty } from 'lodash';
+import { toJS } from "mobx";
+
 
 export default class FormItem extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
+            tableInfo:[],
+            tabInfo:[],
+            detailSelectedKey: '0'
         }
     }
 
+    componentDidMount() {
+        const {
+            groupInfo
+        } = this.props;
+        let tableInfo = this.handleTable(groupInfo.tables);
+        let tabInfo = this.getTabInfo(tableInfo);
+        let detailSelectedKey = '0';
+        if (!isEmpty(tabInfo)) detailSelectedKey = tabInfo[0].key;
+        this.setState({
+            tableInfo:tableInfo,
+            tabInfo:tabInfo,
+            detailSelectedKey:detailSelectedKey
+        })
+
+      }
+
+    handleTable = (datas) => {
+        return datas && datas.map(data => {
+          const { tabinfo: { columns } } = data;
+          const length = columns.length;
+          columns.map(c => {
+            c.width = `${95 / length}%`
+          })
+          return data
+        })
+      }
+
+    getTabInfo = (tableInfo) => {
+        let tabInfo = [];
+        tableInfo && tableInfo.forEach((c, idx) => {
+          if (!c.hide) {
+            tabInfo.push({
+              key: `${idx}`,
+              title: c.tabname,
+            })
+          }
+        })
+        return tabInfo;
+      }
+
+      getTabChildren = () => {
+        let { tableInfo, tabkey, detailSelectedKey } = this.state;
+        let tabChildren = [];
+        tableInfo = toJS(tableInfo);
+
+        tableInfo && tableInfo.map((t, i) => {
+          if (detailSelectedKey == i) {
+            tabChildren.push(
+              <WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@b813my@${i}`}
+                showTitle={true}
+                columns={toJS(t.tabinfo.columns)}
+                datas={toJS(t.tabinfo.datas)}
+                viewAttr={1}
+                getRowSelection={(rowSelection) => {
+                    Object.assign(rowSelection, {
+                      getCheckboxProps: record => ({
+                        disabled: record.viewAttr === 1,    // 配置无法勾选的列
+                      })
+                    })
+                    return rowSelection;
+                  }}
+              />
+            );
+          }
+        })
+        return tabChildren;
+      }
+
     render() {
         const {
             groupInfo
         } = this.props, {
+            tableInfo,
+            tabInfo,
+            detailSelectedKey
         } = this.state;
         const newData = chunk(groupInfo.items, 3);
+        
 
         return (
             <div className='form-item' id={groupInfo.id}>
@@ -55,6 +134,22 @@ export default class FormItem extends React.Component {
                         );
                     })}
                 </div>
+                {
+                    !isEmpty(tabInfo) && <div className='hrm-my-cardInfo_detial_tabs'>
+                        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@vjrq63`}
+                            type='card'
+                            keyParam='key'
+                            datas={toJS(tabInfo)}
+                            selectedKey={detailSelectedKey}
+                            onChange={v => {
+                                this.setState({
+                                    detailSelectedKey:v
+                                })
+                            }}
+                        />
+                        {this.getTabChildren()}
+                    </div>
+                }
 
             </div>
         )

pc4mobx/organization/stores/jobextend.js

@@ -11,7 +11,7 @@ import {
 
 export class JobExtendStore {
   @observable form = new WeaForm();
-  @observable tableInfo = []
+  @observable tableInfo = [];
   @observable condition = [];
   @observable isEditor = false;
   @observable isNew = true;

pc4mobx/organization/style/card.less

@@ -108,6 +108,7 @@
         margin-top: 20px;
         width: 100%;
         background-color: #ffffff;
+        padding-bottom: 40px;
         .title {
           width: 100%;
           height: 30px;