newICSS/src/components/PushContainer/index.jsx

import React, { Component } from 'react';
import style from './index.less';
import { Tab ,ConfirmModal,Notify } from '@commonComp';

import { tabChange,allChecked,changeVisible,keepPushData,allCheckedShow} from '@store/actions/tabTemplate';
import { initItemList,delItem,delBatchItem,changeTitleAsync,saveTemplateDetail } from '@store/async-actions/tabTemplate';
import { CHANGE_TYPE } from "@store/types/typeConfig";
import { connect } from "react-redux";
import store from '@store';

import TemplateContainer from '@components/TemplateContainer';
import TemplateItems from '@components/TemplateItems';
import {getWindowInnerHeight} from '@common/js/func';
import PushItemsContainer from '@containers/PushItemsContainer';
import { pushAllDataList } from '@utils/tools';
import CopyRightContainer from "@containers/CopyRightContainer";
class PushContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: null,
            tabs: [{
                title: '辅助信息',
                disabled: true
            }, {
                title: '模板',
            }],
            visible:false,
            message:'',                 //提示的内容
            type:'',                    //1:删除模板 2：批量删除   3.修改标题   4.引用  
            id:'',                      //单个删除
            obj:{},                     //修改模板标题      
            title:'',                   //修改后的标题
            okText:'确定',              //确认按钮
            okBorderColor:'red',
            oKBg:'',
            okColor:'red',
            num:0,          //计数
        }
        this.$cont = React.createRef();
        this.itemList = null;
        this.handleActiveClick = this.handleActiveClick.bind(this)
        this.handleContentClick = this.handleContentClick.bind(this)
        this.handleTemplateDel = this.handleTemplateDel.bind(this)
        this.handleTitleChange = this.handleTitleChange.bind(this)
        this.handleAllCheckbox=this.handleAllCheckbox.bind(this)
        this.handleMangerTemplate=this.handleMangerTemplate.bind(this)
        this.handleDelList=this.handleDelList.bind(this)
    }
    componentDidMount(){
        // const height = getWindowInnerHeight()-160;
        // this.$cont.current.style.height = height+"px";
    }
    /**
     * 
     * @param {tab组件切换id} id
     */
    handleActiveClick(id) {
        if(id == '1'){
            store.dispatch(initItemList());
        }
        store.dispatch(tabChange(id))
    }
    /**
     * 引用模板id
     * @param {模板id} id 
     */
    handleContentClick(id) {
        this.setState({
            message:this.content(),
            type:4,
            id:id,
            okText:'引用',
            okBorderColor:'#3B9ED0',
            okColor:'#fff',
            oKBg:'#3B9ED0'
        },()=>{
            store.dispatch(changeVisible(true))
        })
    }
    content(){
        return <p className={style['center']}>确认引用该模板？</p>
    }
    /**
     * 删除模板
     * @param {模板id} id 
     */
    handleTemplateDel(id) {
        this.setState({
            message:this.delDiv(),
            type:1,
            id:id,
            okText:'删除',
            okBorderColor:'red',
            okColor:'red',
            oKBg:'#fff'
        },()=>{
            store.dispatch(changeVisible(true))
        })
    }
    delDiv(){
        return <p className={style['center']}>确认删除模板？</p>
    }
    onchange(value){
        this.setState({
            title: value
        },()=>{
            this.setState({
                message:this.changeTitle(),
            })
        })
    }
    keypress(event){
        let e = event?event:window.event;
        if(e.keyCode == 13) {
            this.makeSure()
            // store.dispatch(changeVisible(false))
        }
    }
    handleInput(e){
      let val = e.target.value
      if(e.target.value.length > 30){
          e.target.value = val.substring(0,30)
          this.onchange(val.substring(0,30))
      }else{
          this.onchange(e.target.value)
      }
    }
    changeTitle(){
        return <div className={style['box']}>
            <input className={style['ipt']} 
                placeholder="请输入模板名称"    
                type="text" 
                value={this.state.title}
                maxLength='30'
                onInput={(e) => {
                  this.handleInput(e)
                }}
                onPropertyChange={(e) => {  // 兼容ie
                  this.handleInput(e)
                }}
                onKeyPress={e=>this.keypress(e)}
            />
            <div className={style['line']}></div>
        </div>
    }
    /**
     * 改变模板标题
     * @param {模板id和模板title} obj 
     */
    handleTitleChange(obj) {
        store.dispatch(changeVisible(true))
        this.setState({
            type:3,
            obj:obj,
            title:obj.text,
            okText:'保存',
            okBorderColor:'#3B9ED0',
            okColor:'#fff',
            oKBg:'#3B9ED0'
        },()=>{
            this.setState({
                message:this.changeTitle(),
            })
        })
    }
    
    handleAllCheckbox(){        //全.反选
        let tmpFlg = this.props.allChecked;
        if(this.props.checkItems.length < this.props.items.length && this.props.allChecked){
            tmpFlg = false;
        }else if(this.props.checkItems.length == this.props.items.length && !this.props.allChecked){
            tmpFlg = true;
        }  //两种特殊情况处理
        store.dispatch(allChecked(!tmpFlg))
    }
    
    handleMangerTemplate(){      //管理
        let tmpFlg = this.props.allCheckShow;
        store.dispatch(allChecked(false))
        store.dispatch(allCheckedShow(!tmpFlg))
    }
    handleDelList(){          //批量删除
        this.setState({
            type:2,
            message:this.delDiv(),
            okText:'删除',
            okBorderColor:'red',
            okColor:'red',
            oKBg:'#fff'
        })
        store.dispatch(changeVisible(true))
    }
    makeSure(){
        if(this.state.type == 1) {
            store.dispatch(delItem(this.state.id))
        }else if(this.state.type == 2){
            store.dispatch(delBatchItem(this.props.checkItems))
        }else if(this.state.type == 3){
            if(this.state.title == this.state.obj.text){
                store.dispatch(changeVisible(false))
                Notify.success('标题修改成功');
                return;
            }
            let tempObj = {
                id:this.state.obj.id,
                title:this.state.title
            }
            store.dispatch(changeTitleAsync(tempObj))
        }else if(this.state.type == 4){        //模板引入
            const {items} = this.props;
            items && items.map((part)=>{
                if(this.state.id == part.id){
                    let typeConfig = part.type;
                    store.dispatch(keepPushData(part,'part'))                 //引用数据的存储，用于保存模板是判断数据是否变化
                    pushAllDataList(typeConfig,'push',part,'template')       //引用
                }
            })
        }
        store.dispatch(changeVisible(false))
    }
    render() {
        const {activeId,checkItems,visible,showMsg,items,allCheckShow} = this.props;
        return <div className={style["container"]} ref={this.$cont} >
            <Tab tabs={this.state.tabs}
                activeId={activeId}
                handleActiveClick={this.handleActiveClick}
            >
                <TemplateContainer activeId={activeId}>
                  <PushItemsContainer></PushItemsContainer>
                    <TemplateItems
                        items={items}
                        checkItems={checkItems}
                        allCheckShow={allCheckShow}
                        handleContentClick={this.handleContentClick}
                        handleTemplateDel={this.handleTemplateDel}
                        handleTitleChange={this.handleTitleChange}
                        handleDelList={this.handleDelList}
                        handleMangerTemplate={this.handleMangerTemplate}
                        handleAllCheckbox={this.handleAllCheckbox}
                    ></TemplateItems>
                </TemplateContainer>
            </Tab>
            <ConfirmModal 
                visible={visible}
                confirm={()=>{this.makeSure()}}
                close={()=>{store.dispatch(changeVisible(false))}}
                cancel={()=>{store.dispatch(changeVisible(false))}}
                okText={this.state.okText}
                okBorderColor={this.state.okBorderColor}
                okColor={this.state.okColor}
                oKBg={this.state.oKBg}
            >
                {this.state.message}
            </ConfirmModal>
            <CopyRightContainer />
        </div>  
    }
}

const mapStateToProps = (state) => {
    return {
        items: state.tabTemplate.items,
        activeId:state.tabTemplate.activeId,
        checkItems:state.tabTemplate.checkItems,
        allChecked:state.tabTemplate.allChecked,
        visible:state.tabTemplate.visible,
        showMsg:state.tabTemplate.showMsg,
        allCheckShow:state.tabTemplate.allCheckShow,
    }
}

export default connect(mapStateToProps, null)(PushContainer);