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,allCheckedAdmin,allCheckedShowAdmin } from '@store/actions/tabTemplate';
import { initItemList, delItem,delItemAdmin, delBatchItem, delBatchItemAdmin,changeTitleAsync, setPageView,changeTitleAsyncAdmin,setPageViewAdmin } from '@store/async-actions/tabTemplate';
import { connect } from "react-redux";
import store from '@store';
import { billing } from '@store/async-actions/pushMessage';
import TemplateContainer from '@components/TemplateContainer';
import TemplateItems from '@components/TemplateItems';
import PushItemsContainer from '@containers/PushItemsContainer';
import { pushAllDataList, getWindowInnerHeight, didPushParamChange } from '@utils/tools';
import CopyRightContainer from "@containers/CopyRightContainer";
import MedicalInfoContainer from '@containers/MedicalInfoContainer';
import CaseQuailty from "../CaseQuailty";

class PushContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
      tabs: [{
        title: '辅助信息',
        disabled: true
      },
        {
          title: '病历质控',
        }, {
        title: '模板',
      },
      {
        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.handleAllCheckboxAdmin = this.handleAllCheckboxAdmin.bind(this)
    this.handleMangerTemplate = this.handleMangerTemplate.bind(this)
    this.handleMangerTemplateAdmin = this.handleMangerTemplateAdmin.bind(this)
    this.handleDelList = this.handleDelList.bind(this)
    this.makeSure = this.makeSure.bind(this)
    this.handleClose = this.handleClose.bind(this);
    this.templateSearch = this.templateSearch.bind(this);
  }
  componentDidMount() {
    // const height = getWindowInnerHeight()-160;
    // this.$cont.current.style.height = height+"px";
  }
  templateSearch(name){
    store.dispatch(initItemList(1,name));
  }
  /**
   * 
   * @param {tab组件切换id} id
   */
  handleActiveClick(id) {
    if (id == '2') {
      store.dispatch(initItemList(1,0));
    }
    store.dispatch(tabChange(id))
  }
  /**
   * 引用模板id
   * @param {模板id} id 
   */
  handleContentClick(id, sex) {
    let baseSex = store.getState().patInfo.message.sex
    this.setState({
      message: this.content(sex, baseSex),
      type: 4,
      id: id,
      okText: '引用',
      okBorderColor: '#3B9ED0',
      okColor: '#fff',
      oKBg: '#3B9ED0'
    }, () => {
      store.dispatch(changeVisible(true))
    })
  }
  content(sex, baseSex) {
    if (sex != 3 && sex != baseSex) {
      return <p className={style['center']}>确认引用该模板？<p style={{ fontSize: '12px', color: '#6b6969', marginTop: '10px' }}>引用该模版可能显示有误</p></p>
    } else {
      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()
    }
  }
  handleInput(e) {
    let val = (e.target.value).substring(0, 30)
    this.onchange(val)
  }
  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(id, text) {
    store.dispatch(changeVisible(true))
    this.setState({
      type: 3,
      currId: id,
      title: text,
      text: text,
      okText: '保存',
      okBorderColor: '#3B9ED0',
      okColor: '#fff',
      oKBg: '#3B9ED0'
    }, () => {
      this.setState({
        message: this.changeTitle(),
      })
    })
  }

  handleAllCheckboxAdmin() {        //全.反选
    let tmpFlg = this.props.allCheckedAdmin;
    if (this.props.checkItemsAdmin.length < this.props.adminItems.length && this.props.allCheckedAdmin) {
      tmpFlg = false;
    } else if (this.props.checkItemsAdmin.length == this.props.adminItems.length && !this.props.allCheckedAdmin) {
      tmpFlg = true;
    }  //两种特殊情况处理
    store.dispatch(allCheckedAdmin(!tmpFlg))
  }

  handleMangerTemplateAdmin() {      //管理
    let tmpFlg = this.props.allCheckShowAdmin;
    store.dispatch(allCheckedAdmin(false))
    store.dispatch(allCheckedShowAdmin(!tmpFlg))
  }

  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))
  }
  handleClickGetMore(page){
    let tmpPage = ++page
    store.dispatch(initItemList(tmpPage,true))
  }
  
  makeSure() {
    if (this.state.type == 1) {
      if(this.props.admin){
        store.dispatch(delItemAdmin(this.state.id))
      }else{
        store.dispatch(delItem(this.state.id))
      }
      store.dispatch(changeVisible(false))
    } else if (this.state.type == 2) {
      if(this.props.admin){
        store.dispatch(delBatchItemAdmin(this.props.checkItemsAdmin))
      }else{
        store.dispatch(delBatchItem(this.props.checkItems))
      }
      store.dispatch(changeVisible(false))
    } else if (this.state.type == 3) {
      if (this.state.title == this.state.text) {
        store.dispatch(changeVisible(false))
        Notify.success('标题修改成功');
        return;
      }
      if ((this.state.title).trim() == '') {
        Notify.info('请输入模板名称');
        return;
      }
      let tempObj = {
        id: this.state.currId,
        title: this.state.title
      }
      if(this.props.admin){
        store.dispatch(changeTitleAsyncAdmin(tempObj))
      }else{
        store.dispatch(changeTitleAsync(tempObj))
      }
    } else if (this.state.type == 4) {        //模板引入
      if(this.props.admin){
        store.dispatch(setPageViewAdmin(this.state.id))
      }else{
        store.dispatch(setPageView(this.state.id))
      }
      store.dispatch(changeVisible(false))
    }
  }
  handleClose() {
    store.dispatch(changeVisible(false));
  }
  render() {
    const { activeId, checkItems, visible, showMsg,hasMore,current, items, allCheckShow,allCheckShowAdmin,adminItems,admin,checkItemsAdmin,clearSearch } = 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>
          <CaseQuailty></CaseQuailty>
          <TemplateItems
            items={items}
            clearSearch={clearSearch}
            adminItems={adminItems}
            admin={admin}
            handleAllCheckboxAdmin={this.handleAllCheckboxAdmin}
            handleMangerTemplateAdmin={this.handleMangerTemplateAdmin}
            current={current}
            hasMore={hasMore}
            checkItems={checkItems}
            checkItemsAdmin={checkItemsAdmin}
            allCheckShow={allCheckShow}
            allCheckShowAdmin={allCheckShowAdmin}
            handleContentClick={this.handleContentClick}
            handleTemplateDel={this.handleTemplateDel}
            handleTitleChange={this.handleTitleChange}
            handleDelList={this.handleDelList}
            handleMangerTemplate={this.handleMangerTemplate}
            handleAllCheckbox={this.handleAllCheckbox}
            handleClickGetMore={this.handleClickGetMore}
            templateSearch={this.templateSearch}
          ></TemplateItems>
          <MedicalInfoContainer></MedicalInfoContainer>
        </TemplateContainer>
      </Tab>
      <ConfirmModal
        visible={visible}
        confirm={this.makeSure}
        close={this.handleClose}
        cancel={this.handleClose}
        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) => {//console.log(state)
  return {
    items: state.tabTemplate.items,
    adminItems: state.tabTemplate.adminItems,
    admin: state.homePage.admin,
    current: state.tabTemplate.current,
    hasMore: state.tabTemplate.hasMore,
    activeId: state.tabTemplate.activeId,
    checkItems: state.tabTemplate.checkItems,
    allChecked: state.tabTemplate.allChecked,
    visible: state.tabTemplate.visible,
    showMsg: state.tabTemplate.showMsg,
    allCheckShow: state.tabTemplate.allCheckShow,

    allCheckedAdmin: state.tabTemplate.allCheckedAdmin,
    allCheckShowAdmin: state.tabTemplate.allCheckShowAdmin,
    checkItemsAdmin: state.tabTemplate.checkItemsAdmin,
    clearSearch:state.print.clearSearch,
  }
}

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