weaver_trunk_cli/pc4mobx/prj/components/dialog/relateListDialog.js

import {Modal, Input, Button,Table } from 'antd';
import {WeaDialog, WeaSearchGroup, WeaInput,WeaAuth ,WeaTab,WeaTools,WeaNewScroll,WeaFormItem,WeaProgress,WeaLocaleProvider} from 'ecCom';
import {inject, observer} from "mobx-react";
import {toJS} from 'mobx';
import _mapValues from 'lodash/mapValues'
import {WeaTableNew,WeaSwitch} from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

@observer
class RelateListDialog extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            visible:false
        }
    }
    shouldComponentUpdate(nextProps,nextState){
        return true
    }
 
    render() {
        const {relateListStore} = this.props.contentStore;
        const {visible,title,handleRelateDialog,tableStore,doSearch,type,modalStyle,visibleDatas,compareVisible} = relateListStore; 
        const columns = [{
            title: getLabel(83890,"版本\比较对象"),
            dataIndex: 'col1',
            key: 'col1',
            width:"20%",
        }, {
            title: getLabel(22172,"计划工期"),
            dataIndex: 'col2',
            key: 'col2',
            width:"10%",
        }, {
            title: getLabel(22169,"计划开始时间"),
            dataIndex: 'col3',
            key: 'col3',
            width:"20%",
        }, {
            title: getLabel(22171,"计划结束时间"),
            dataIndex: 'col4',
            key: 'col4',
            width:"20%",
        }, {
            title: getLabel(847,"进度"),
            dataIndex: 'col5',
            key: 'col5',
            width:"30%",
            render:  (text,record,index) => {if(index < 3){return <div><WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@tow077`} percent={Number(text) || 0}  strokeColor={record.col5_color} /></div>}else{return <div></div>}},
        }];
        return (
            <div>
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@8hhu9i`}
                title={title || getLabel(1044,"相关流程")}
                visible={visible}
                buttons={this.getButtons()}
                icon="icon-coms-project"
                iconBgcolor="#217346"
                onCancel={()=>{handleRelateDialog(false)}}
                style={toJS(modalStyle)}
            >
                <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@xmb98s`} height={"100%"}>
                {
                    (type == "request" || type == "doc" || type == "cowork") &&
                    <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@ybnatw`}
                        searchType={['base']}
                        onSearch={v=>{doSearch({name:v})}}
                    />
                }
                {
                    type !== "notice" &&
                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@rdmj2g`} 
                        comsWeaTableStore={tableStore}
                        hasOrder={true}
                        needScroll={true}
                    />
                }
                {
                    type == "notice" &&
                    this.getNoticeForm()
                } 
                </WeaNewScroll>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@zzqekm`} 
                    title={visibleDatas.compareTitle || ""}
                    visible={compareVisible}
                    buttons={[<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@djurhd`}  type="primary" onClick={()=>relateListStore.compareVersion(false)}>{getLabel(309,"关闭")}</Button>]}
                    icon="icon-coms-project"
                    iconBgcolor="#217346"
                    onCancel={()=>{relateListStore.compareVersion(false)}}
                    style={{width:'900px', height:'300px'}}>
                        <div style={{padding:"0"}} className="wea-prj-table-customsize">
                            <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@oz6zgn`} 
                                rowKey="id" 
                                loading={visibleDatas.visibleLoading}
                                columns={columns}
                                dataSource={toJS(visibleDatas.visibleData)}
                                pagination={false} />
                        </div>
                </WeaDialog>
            </WeaDialog>
        </div>)
    }
    getButtons(){
        const {contentStore} = this.props;
        const {relateListStore} = contentStore;
        const {type,tableStore,noticeMember,compareVersion } = relateListStore;
        const {selectedRowKeys} = tableStore;
        let btnArr = []; 
        {
            type == "history" &&  //disabled={!(selectedRowKeys.length>0 && `${toJS(selectedRowKeys)}`)}
            btnArr.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@zi5pt9`} disabled={!(selectedRowKeys.length>0 && `${toJS(selectedRowKeys)}`)}  type="primary" onClick={()=>{
               if(selectedRowKeys.length == 2){
                    compareVersion(true,`${toJS(selectedRowKeys)}`)
                }else{
                    Modal.info({
                        title:getLabel(15172,"系统提示"),
                        content:getLabel(83932,"请选择2个历史版本进行对比!")
                    })
                }
            }}>{getLabel(18553,"版本对比")}</Button>)
        }  
        {
            type == "notice" &&
            btnArr.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ifoqam`}  type="primary" onClick={()=>{noticeMember()}}>{getLabel(615,"提交")}</Button>)
        }
        btnArr.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@9tvmip`}  type="primary" onClick={()=>relateListStore.handleRelateDialog(false)}>{getLabel(309,"关闭")}</Button>)  
        return btnArr;
    }
    getNoticeForm=()=>{
        const {relateListStore} = this.props.contentStore;
        const {noticeCondition,form} = relateListStore;
        const {isFormInit} = form;
        let group = [];
        isFormInit &&  toJS(noticeCondition).map((c,i) =>{
            let items = [];
            c.items.map((fields,index) => {
                items.push({
                com:(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@jl6u4k@${index}`}
                    label={`${fields.label}`}
                    labelCol={{span: `${fields.labelcol}`}}
                    error={form.getError(fields)}
                    tipPosition={"bottom"}
                    wrapperCol={{span: `${fields.fieldcol}`}}>
                        <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@gcb5w2@${index}`} fieldConfig={fields} form={form} />
                    </WeaFormItem>),
                colSpan:1,
                })
            });
            group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@753sk2@${i}`} needTigger={true} col={1} title={c.title} showGroup={c.defaultshow} items={items}/>)
        });
        return group;
    }
}

export default RelateListDialog;