trunk/pc4mobx/organization/components/department/departmentExtend.js

/**
 * @Author: 程亮
 * @Date: 2022-06-02 09:20:03
 * @LastEditTime: 2022-12-15 19:28:54
 * @Description:
 * @FilePath: /trunk/src4js/pc4mobx/organization/components/department/departmentExtend.js
 */


import { Button, Modal, message, Row, Col, Spin } from 'antd';
import isEmpty from 'lodash/isEmpty'
import cloneDeep from 'lodash/cloneDeep'
import forEach from 'lodash/forEach'
import { WeaAlertPage, WeaTools, WeaTableEdit, WeaSearchGroup, WeaRightMenu, WeaFormItem, WeaTab, WeaTop,WeaSlideModal } from 'ecCom'
import { WeaSwitch } from 'comsMobx';
import { inject, observer } from 'mobx-react';
import * as mobx from 'mobx';
import { i18n } from '../../public/i18n';
import AttachToNumberField from "../NewNumberField";
import VersionsSlider from '../VersionsSlider';

const toJS = mobx.toJS;
import '../../style/common.less';


@inject('departmentExtend')
@inject('department')
@observer
export default class DepartmentExtendStore extends React.Component {

  componentDidMount() {
    this.init();
  }
  init = () => {
    const { departmentExtend, department } = this.props;
    let { hash } = window.location;
    hash = hash.split("?")[0];
    let id = hash.match("[^/]+(?=/$|$)")[0];
    departmentExtend.init();
    departmentExtend.setId(id);
    departmentExtend.getData();
  }

  view = () => {
    const { departmentExtend } = this.props;
    departmentExtend.selectVersions();
  }

  getTabChildren = () => {
    const { departmentExtend } = this.props;
    let { tableInfo, isEditor, tabkey, onRowSelect, selectedRowKeys, detailSelectedKey } = departmentExtend;
    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}`}
            ref={(ref) => departmentExtend.setPersonalEditTables(ref)}
            showTitle={isEditor}
            // title={'列表信息'}
            //addFirstRow={isEditor}
            columns={t.tabinfo.columns}
            datas={t.tabinfo.datas}
            onChange={this.tableEditChange}
            selectedRowKeys={toJS(selectedRowKeys)}
            onRowSelect={keys => onRowSelect(keys)}
            onBtnsSelect={key => this.onBtnsSelect(key, i)}
            viewAttr={isEditor ? 2 : 1}
            getRowSelection={isEditor ? (rowSelection) => {
              Object.assign(rowSelection, {
                getCheckboxProps: record => ({
                  disabled: record.viewAttr === 1,    // 配置无法勾选的列
                })
              })
              return rowSelection;
            } : () => null}
          />
        );
      }
    })
    return tabChildren;
  }

  onBtnsSelect = (key, index) => {
    const {
      departmentExtend
    } = this.props, {
      tableInfo,
      selectedRows,
      setSelectedRowKeys,
      selectedRowKeys
    } = departmentExtend;

    const datas = tableInfo[index].tabinfo.datas;
    if (key === 'copy') {
      tableInfo[index].tabinfo.datas = datas.map((data, i) => {
        if (!selectedRows[index].includes(i)) {
          data.viewAttr = 2;
        }
        return data
      })
    }
    if (key === 'delete') {
      tableInfo[index].tabinfo.datas = datas.map((data, i) => {
        if (selectedRows[index].includes(i)) {
          data.viewAttr = 1;
        }
        return data
      });
      setSelectedRowKeys(selectedRowKeys.filter(row => !selectedRows[index].includes(row)))
    }
  }

  getSearchs = () => {
    const { departmentExtend } = this.props;
    let { form, conditions, isEditor } = departmentExtend;
    const { isFormInit } = form;
    let group = [];
    let tipPosition = 'bottom';
    window.e9HideFormFieldKeys = [];
    isFormInit && conditions.forEach((c, i) => {
      let items = [];
      c.items.forEach((field, j) => {
        if (c.hide || (!isEmpty(field.otherParams) && field.otherParams.hide)) {
          window.e9HideFormFieldKeys.push(field.domkey[0]);
        } else {
          items.push({
            com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@vh6j67@${j}`}
              underline={!isEditor}
              label={`${field.label}`}
              error={form.getError(field)}
              tipPosition={tipPosition}
              className={j === 1 && "minH5"}
              labelCol={{ span: `${field.labelcol}` }}
              wrapperCol={{ span: `${field.fieldcol}` }}>
              <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@d4vaqk@${j}`} fieldConfig={field} form={form} />
              {field.domkey[0] == 'dept_no' && field.viewAttr != '1' && <AttachToNumberField field={field} form={form} isEdit={true}/>}
            </WeaFormItem>),
            colSpan: 1
          });
        }
      });
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@x9hby9@${i}`} className={`${isEditor ? 'hrm-center' : ''}`}
        needTigger={true} hide={c.hide} title={c.title} showGroup={c.defaultshow} items={items} col={2} />)
    });
    return group;
  }

  tableEditChange = (data) => {
    const { departmentExtend } = this.props;
    let { detailSelectedKey = '0', tableInfo } = departmentExtend;
    tableInfo = toJS(tableInfo);
    let d = cloneDeep(tableInfo);
    d[Number(detailSelectedKey)].tabinfo.datas = data;
    departmentExtend.updateTableInfo(d);
  }

  getRightMenu = () => {
    const { departmentExtend } = this.props;
    const { isEditor, buttons } = departmentExtend;
    let arr = [];
    try {
      if (buttons.hasEdit) {
        if (isEditor) {
          arr = [{
            icon: <i className='icon-coms-common' />,
            content: i18n.button.save(),
            key: 'save',
            onClick: key => {
              this.saveEditCard();
            }
          }, {
            icon: <i className='icon-coms-go-back' />,
            content: i18n.button.back(),
            key: 'back',
            onClick: key => {
              this.backCard();
            }
          }]
        } else {
          arr = [{
            icon: <i className='icon-coms-edit' />,
            content: i18n.button.modify(),
            key: 'editCard',
            onClick: key => {
              this.editCard();
            }
          }, {
            icon: <i className='icon-coms-common' />,
            content: i18n.button.version(),
            key: 'view',
            onClick: key => {
              this.view();
            }
          }
          ]
        }
      }
    } catch (e) { }
    return arr;
  }

  getTopButtons = () => {
    const { departmentExtend } = this.props;
    const { isEditor, buttons } = departmentExtend;
    const save = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@pkes6y`} type="primary" onClick={this.saveEditCard} >{i18n.button.save()}</Button>;
    const back = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@pl1fw8`} type="primary" onClick={this.backCard} >{i18n.button.back()}</Button>;
    const edit = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vkeda5`} type="primary" onClick={this.editCard} >{i18n.button.modify()}</Button>;
    const view = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vkeda5`} type="primary" onClick={this.view} >{i18n.button.version()}</Button>;

    const btns = [];
    try {
      if (isEditor) {
        if (buttons.hasSave) {
          btns.push(save);
          btns.push(back);
        }
      } else {
        if (buttons.hasEdit) {
          btns.push(edit);
          btns.push(view);
        }
      }
    } catch (e) { }
    return btns;
  }

  editCard = () => {
    const { departmentExtend } = this.props;
    departmentExtend.edit();
  }

  saveEditCard = () => {
    const { departmentExtend } = this.props;
    departmentExtend.save();
  }

  backCard = () => {
    this.init();
  }

  changeData(key) {
    const {
      departmentExtend
    } = this.props;
    departmentExtend.changeData(key);
  }

  render() {
    const { departmentExtend } = this.props;
    const { loading, tabkey, tabInfo, topTab, selectedKey, date, detailSelectedKey,isEditor,open, versionList } = departmentExtend;

    try {
      return (
        <div className='hrm-my-cardInfo' style={{ height: '100%', position: 'relative' }}>
          <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@k6oc4u`}
            datas={this.getRightMenu()}
          >
            <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@bj98s7`}
              loading={loading}
              title={isEditor ? i18n.label.editDept() : i18n.label.departmentInfo()}
              icon={<i className='icon-coms-hrm' />}
              iconBgcolor='#217346'
              buttons={this.getTopButtons()}
              showDropIcon={true}
              dropMenuDatas={this.getRightMenu()}
            >
              <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@9c3zts`}
                datas={topTab}
                keyParam="viewCondition" //主键
                selectedKey={selectedKey}
                onChange={this.changeData.bind(this)}
              />
              <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@4fj4z2`} spinning={loading}>
                {this.getSearchs()}
                {
                  !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 => {
                        departmentExtend.updateDetailSelectedKey(v);
                      }}
                    />
                    {this.getTabChildren()}
                  </div>
                }
              </Spin>
            </WeaTop>
          </WeaRightMenu>
          <WeaSlideModal visible={open}
            top={6}
            width={40}
            height={94}
            direction={'right'}
            measure={'%'}
            content={!isEmpty(versionList) ? <VersionsSlider versionList={versionList} handleChange={val => departmentExtend.changeVersion(val)}/> : <div style={{"textAlign":"center","color":"red","fontSize":"20px","marginTop": "50px"}}> 暂无历史版本 </div>} 
            onClose={this.onClose}
            onAnimationEnd={() => console.log('onAnimationEnd')} />

        </div>
      )
    } catch (e) {
      return <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@h1wgnu`}>
        <div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
      </WeaAlertPage>
    }
  }
}