ZRNCC2005WYDJD/zj_web/zjcmp_cd/cd/96h10119/card/index.js

import React, { Component } from 'react';
import { ajax,createPage, base, high , toast, cardCache} from 'nc-lightapp-front';
import { initTemplate} from './events/initTemplate';
import { buttonClick } from './events/buttonClick';
import { beforeHeadEvent } from './events/beforeHeadEvent';
import { beforeTableEvent } from './events/beforeTableEvent';
import { afterHeadEvent } from './events/afterHeadEvent';
import { afterTableEvent } from './events/afterTableEvent';
import { bodySelectedEvent, bodySelectedAllEvent } from './events/bodySelectedEvent';
import { REQUEST_URL,MULTILANG, CARD, PRIMARY_KEY, CARD_BUTTON, DATASOURCE, STATUS, BILL_TYPE_CODE } from '../constant';
import { pageClick, cardCommit} from './events/cardOperator';
import { bodyButtonClick } from './events/bodyButtonClick';
let { updateCache } = cardCache;
/**
* @description: 卡片
*/
const { NCAffix } = base;

class Card extends Component {
        constructor(props) {
                super(props);
                this.state = {
                        json: {},
                        showUploader: false,
                        billInfo: {},
                        compositeData: null, //指派信息
                        compositeDisplay: false, //是否显示指派
                        curPk: null, //当前选中数据的pk
                        showApproveDetail: false, //是否显示审批详情
                        billId: null
                };


                this.pageId =
                        this.props.getUrlParam("scene") == "linksce"
                            ? "96H10119_CARD"
                             : this.props.getUrlParam("scene") == "approvesce"
                               ? "96H10119A_CARD"
                            : CARD.page_code; //card页面code

                this.versionList = []; //保存历史版本号，供查看历史版本使用
        }

        componentWillMount() {
                // json： 多语json格式参数； 
                // status： 是否请求到json多语，可用来判断多语资源是否请求到并进行一些别的操作； 
                // inlt： 可用来进行占位符的一些操作
                let callback = (json, status, inlt) => {
                        if (status) {
                                initTemplate.call(this, this.props); // 如模板内也有多语处理，平台推荐模板加载操作放于此处， 在取到json多语资源后用传参的方式传入intemplate模板函数中

                                // 保存json和inlt到页面state中并刷新页面
                                this.setState({ json, inlt })
                        }
                }
                this.props.MultiInit.getMultiLang({ moduleId: MULTILANG.moduleId, domainName: MULTILANG.domainName, callback });

                // 关闭浏览器
                window.onbeforeunload = () => {
                        let status = this.props.cardTable.getStatus(CARD.table_code);
                        if (status == STATUS.edit) {
                                return this.state.json['96H10119-000007'];/* 国际化处理： 当前单据未保存，您确认离开此页面？*/
                        }
                };
        }

 

        handlePageInfoChange = (props, id) => {
                debugger;
                pageClick({ ...props, json: this.state.json }, id);
        }

     

        //指派提交
        getAssignUser = (value) => {
                cardCommit({ ...this.props, json: this.state.json }, {
                        pks: this.state.curPk,
                        userObj: value
                });
                this.compositeTurnOff();
        };

        //关闭指派
        compositeTurnOff = () => {
                this.setState({
                        compositeData: null,
                        compositeDisplay: false
                });
        };





      componentDidMount(){

        let id = this.props.getUrlParam("id");
        let status = this.props.getUrlParam("status");
        this.props.button.setButtonDisabled(["deleteRow", "copyRow"], true);
        if (id) {
          if (status === "version") {
            //查看版本
            this.initVersionTree();
          }
        }

    }


  //同步树节点点击事件
  onTreeSelect = pk => {
          debugger;
        if (pk === "-1") {
          return;
        }
        ajax({
                url:'/nccloud/zjcmp_cd/cd/guatamxqueryversioncardaction.do',
                data: {
                    pk: pk,
                    pagecode: CARD.page_code
                },
                success: (res) => {
                    debugger;    
                    let { success, data } = res;
                    if (success) {

                        if (data && data.body) {                        
                                this.props.cardTable.setTableData(CARD.table_code, data.body[CARD.table_code]);
                            }

                        if (data && data.head) {
                            this.props.form.setAllFormValue({ [CARD.form_id]: data.head[CARD.form_id] });
                           // this.props.form.setFormItemsDisabled(CARD.form_id, { 'pk_org': true}); 
                               
                        }
                   

                    }
                },
                 error: (res) => {
                    toast({ color: STATUS.danger, content: res.message });
                }
            });
      };


     //获取列表肩部信息
     getTableHead = () => (
        <div className="shoulder-definition-area">
                <div className="definition-icons">
                        {this.props.button.createButtonApp({
                                area: CARD.shoulder_btn_code,
                                onButtonClick: bodyButtonClick.bind(this),
                                popContainer: document.querySelector('.header-button-area')
                        })}
                </div>
        </div>
);


  //同步树鼠标滑过事件
  onTreeMouseEnter = key => {
        this.props.syncTree.hideIcon(this.treeId, key, {
          delIcon: false,
          editIcon: false,
          addIcon: false
        });
      };
    



    /**
   * 加载查看版本页面
   * @param {*} callback - 回调函数
   */
  initVersionTree = callback => {
        debugger;
        const treeRoot = {
          isleaf: false,
          pid: "__root__",
          refname: this.state.json["36620GC-000001"] /* 国际化处理： 版本号*/,
          refpk: "-1"
        };
        ajax({
          url:'/nccloud/zjcmp_cd/cd/guatamxqueryversionlistaction.do',
          data: {
            queryAreaCode: "search",
            querytype: "tree",
            querycondition: {},
            pageCode: this.pageId,
            pageInfo: { pageIndex: 0, pageSize: 100 },
            def1: this.props.getUrlParam("id") //主键
            
          },
          success: res => {
                debugger;
            let { success, data } = res;
            let versionList = data && data.data && data.data.rows;
            this.versionList = versionList.map(item => item.refpk);
            if (success) {
              let treeData = this.props.syncTree.createTreeData(versionList);
              if (versionList.length) {
                this.onTreeSelect(versionList[0].refpk);
              }
              this.props.syncTree.setSyncTreeData(this.treeId, [
                Object.assign(treeRoot, { children: treeData })
              ]);
            }
          }
        });
      };
  


        render() {
                let { form, cardPagination, BillHeadInfo, cardTable,syncTree,DragWidthCom } = this.props;
                let { createCardPagination } = cardPagination;
                let { createForm } = form;
                let { createCardTable } = cardTable;
                let { createBillHeadInfo } = BillHeadInfo;
                let { NCUploader, BillTrack, ApprovalTrans, ApproveDetail } = high;
                let status = this.props.getUrlParam(STATUS.status);
                let id = this.props.getUrlParam(PRIMARY_KEY.id);
                let billNo = this.props.form.getFormItemsValue(CARD.page_code, PRIMARY_KEY.bill_no);
                let { createSyncTree } = syncTree;
            

    // 卡片 主表dom
    let cardFormDom = (
        <div className="nc-bill-top-area">
          <div className="nc-bill-form-area">
            {createForm(CARD.headcode, {
              onAfterEvent: afterHeadEvent.bind(this),
              onBeforeEvent: beforeHeadEvent.bind(this)
            })}
          </div>
        </div>
      );

      // 卡片子表dom
      let cardFormTableDom = (
                <div className="nc-bill-bottom-area">
                <div className="nc-bill-table-area">
                {createCardTable(CARD.table_code, {
                cancelCustomRightMenu: true,
                tableHead: this.getTableHead.bind(this),
                onTabChange: key => {
                console.log(key);
                },
                adaptionHeight: true,
                modelSave: buttonClick.bind(this, this.props, "Save"),
      
                }
                 
                )}


                
                </div>
                </div>
          );


    // 左树 dom
    let treeDom = (
        <div className="left-area" style={{ marginLeft: "20px" }}>
          {createSyncTree({
            treeId: this.treeId, // 组件id
            needSearch: false, //是否需要查询框，默认为true,显示。false: 不显示
            onSelectEve: this.onTreeSelect.bind(this), //选择节点回调方法
            onMouseEnterEve: this.onTreeMouseEnter.bind(this), //鼠标滑过节点事件
            defaultExpandAll: true, //默认展开所有节点
            disabledSearch: true //是否显示搜索框
          })}
        </div>
      );

    // 右卡 dom
    let rightDom = (
        <div className="nc-bill-card">
          {cardFormDom}
          {cardFormTableDom} 
        </div>
      );

                return (
                        <div className="nc-bill-card">

                                <div className="nc-bill-top-area">
                                        <NCAffix>
                                                <div className="nc-bill-header-area">
                                                        <div>
                                                                {createBillHeadInfo({
                                                                        title: this.state.json[CARD.page_title],//标题
                                                                        billCode: billNo && billNo.value,//单据号
                                                                        backBtnClick: buttonClick.bind(this, this.props, CARD_BUTTON.back)
                                                                })}
                                                        </div>

                                                     {status !== "version" && (   
                                                        <div className="header-button-area">
                                                                {this.props.button.createButtonApp({
                                                                        area: CARD.head_btn_code,
                                                                        onButtonClick: buttonClick.bind(this)
                                                                })}
                                                        </div>
                                                       )} 


                                                        {status == STATUS.browse && id &&
                                                                <div className="header-cardPagination-area" style={{ float: 'right' }}>
                                                                        {createCardPagination({
                                                                                dataSource: DATASOURCE,
                                                                                pkname: PRIMARY_KEY.head_id,
                                                                                handlePageInfoChange: this.handlePageInfoChange
                                                                        })}
                                                                </div>
                                                        }
                                                </div>

                                                     {/* 为多版本联查时加载 树卡区域 */}
                                                     {status === "version" && (
                                                        <div className="tree-card">
                                                        <DragWidthCom
                                                        leftDom={treeDom} //左侧区域dom
                                                        rightDom={rightDom} //右侧区域dom
                                                        defLeftWid="20%" // 默认左侧区域宽度，px/百分百
                                                        />
                                                        </div>
                                                        )} 
                              
                                        </NCAffix>


                                        {status !== "version"  && (

                                                <div className="nc-bill-form-area">
                                                {createForm(CARD.form_id, {
                                                        onAfterEvent: afterHeadEvent,
                                                        onBeforeEvent: beforeHeadEvent
                                                })}
                                                </div>  

                                         ) }
 
                                       
                                </div>


                                        {/* 为正常状态时 加载主子表 */}
                                        {status !== "version"  && (
                                             <div className="nc-bill-bottom-area">
                                             <div className="nc-bill-table-area">
                                                     {createCardTable(CARD.table_code, {
                                                             tableHead: this.getTableHead.bind(this),
                                                             showCheck: true,
                                                             showIndex: true,
                                                             onSelected: bodySelectedEvent,
                                                             onSelectedAll: bodySelectedAllEvent,
                                                             onBeforeEvent: beforeTableEvent,
                                                             onAfterEvent: afterTableEvent,
                                                             modelSave: buttonClick.bind(this, { ...this.props, json: this.state.json }, CARD_BUTTON.save, undefined, true),
                                                     })}
                                                </div>
                                        </div> 
                                        ) }
 

                         

                                {/* 附件 */}
                                {this.state.showUploader && (
                                        <NCUploader
                                                placement={'bottom'}
                                                {...this.state.billInfo}
                                                onHide={() => {
                                                        this.setState({
                                                                showUploader: false
                                                        });
                                                }}
                                        />
                                )}

                                {/*联查单据追溯*/}
                                {
                                        <BillTrack
                                                show={this.state.showBillTrack}
                                                close={() => {
                                                        this.setState({ showBillTrack: false });
                                                }}
                                                pk={this.state.billTrackBillId}
                                                type={this.state.billTrackBillType}
                                        />
                                }

                                {/* 指派 */}
                                {this.state.compositeDisplay && (
                                        <ApprovalTrans
                                                title={this.state.json['96H10119-000018']} /* 国际化处理： 指派*/
                                                data={this.state.compositeData}
                                                display={this.state.compositeDisplay}
                                                getResult={this.getAssignUser}
                                                cancel={this.compositeTurnOff}
                                        />
                                )}

                                {/* 联查审批详情 */}
                                {
                                        <ApproveDetail
                                                show={this.state.showApproveDetail}
                                                billtype={BILL_TYPE_CODE}
                                                billid={this.state.billId}
                                                close={() => {
                                                        this.setState({
                                                                showApproveDetail: false
                                                        });
                                                }}
                                        />
                                }

                                

                        </div>

                );
        }
}

Card = createPage({
        billinfo: {
                billtype: 'card',
                pagecode: CARD.page_code,
                headcode: CARD.form_id,
                bodycode: CARD.table_code
        }
})(Card);
export default Card;