ncpub-multipage-demo-2005/src/ssctp/dooroad/docOpen/config/index.js

/*FDKFkr+TYgGKTTudQv9suM5TObrl0kaUnLjqLMCkTsQ=*/
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { createPage, promptBox, toast, } from "nc-lightapp-front";
import initTemplate from "./events/initTemplate.js";
import BillListStyle from 'ssccommon/components/bill-list';
import {
  asyncQry, asyncSave, asyncDel, asyncOtherSelect,
} from './events/async.js'
import BatchAddModal from './BatchAdd.js'

class DocOpen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      multiLang: {}, // 多语
      showBatchAddModal: false, // 批量添加
      pageStatus: 'browse', // 页面状态
    };

    initTemplate.call(this, props);
  }

  // 头部按钮组事件
  headerBtnEventDistribute = () => ({
    Add: () => this.addBtnClick(),
    Edit: () => this.editBtnClick(),
    Delete: () => this.deleteBtnClick(),
    Save: () => this.saveBtnClick(),
    Cancel: () => this.cancelBtnClick(),
    BatchAdd: () => this.setState({showBatchAddModal: true}),
  })

  // 改变页面状态 浏览/编辑
  changePageStatus = statu => {
    const {
      editTable: { setStatus, },
      button: { setButtonVisible, setMainButton, },
    } = this.props
    setStatus('ssctp_detailopen', statu)
    setButtonVisible({
      Add: true,
      BatchAdd: statu === 'browse',
      Edit: statu === 'browse',
      Delete: true,
      Save: statu === 'edit',
      Cancel: statu === 'edit',
    })
    this.setState({pageStatus: statu})
    setMainButton('Add', statu === 'browse')
  }

  componentDidMount() {
    // 浏览器原生提示
    window.onbeforeunload = () => {
      if (this.state.pageStatus === 'edit') return ''
    }
  }

  // 列表数据查询
  tableDataQry = async (isRefresh = false) => {
    const response = await asyncQry()
    const {success, data} = response
    if (!success) return
    this.props.editTable.setTableData('ssctp_detailopen', data ? data.ssctp_detailopen : {rows: []})
    if (isRefresh) {
      toast({title: this.state.multiLang['701010DOOROAD-022'], duration: 5})
    }
  }

  // 刷新
  refreshButtonEvent = () => {
    this.tableDataQry(true)
  }

  //增加
  addBtnClick = () => {
    const rows = this.props.editTable.getAllData('ssctp_detailopen').rows
    this.props.editTable.addRow('ssctp_detailopen', rows.length, true, {})
    this.changePageStatus('edit')
  }

  // 修改
  editBtnClick = () => {
    this.changePageStatus('edit')
  }

  // 删除提示
  deleteBtnClick = () => {
    if (this.state.pageStatus === 'browse') {
      const checkedRows = this.props.editTable.getCheckedRows('ssctp_detailopen')
      if (!checkedRows.length) return
      return promptBox({
        color: 'warning',
        title: this.state.multiLang['701010DOOROAD-003'],
        content: this.state.multiLang['701010DOOROAD-018'],
        noFooter: false,
        noCancelBtn: false,
        beSureBtnClick: this.sureDel,
        cancelBtnClick: () => {},
        closeByClickBackDrop: true,
      })
    } else {
      const checkedIndex = this.props.editTable.getCheckedRows('ssctp_detailopen').map(row => row.index)
      if (!checkedIndex.length) return
      this.props.editTable.deleteTableRowsByIndex('ssctp_detailopen', checkedIndex)
    }
  }

  //确认删除
  sureDel = async () => {
    const {
      deleteTableRowsByIndex, getCheckedRows, getAllData, setTableData,
    } = this.props.editTable

    const toDelIdxs = getCheckedRows('ssctp_detailopen').map(row => row.index)
    deleteTableRowsByIndex('ssctp_detailopen', toDelIdxs)

    const response = await asyncDel({ssctp_detailopen: getAllData('ssctp_detailopen')})
    const {success, data} = response
    if (!success || !data) return

    setTableData('ssctp_detailopen', data.ssctp_detailopen)
    toast({ title: this.state.multiLang['701010DOOROAD-017'], duration: 5})
  }

  // 保存
  saveBtnClick = async () => {
    const {
      editTable: { filterEmptyRows, checkRequired, getAllData, setTableData},
    } = this.props
    filterEmptyRows('ssctp_detailopen', [])
    const tableData = getAllData('ssctp_detailopen')
    if (!checkRequired('ssctp_detailopen', tableData.rows)) return
    const response = await asyncSave({ssctp_detailopen: tableData})
    if (!response) return
    const {success, data} = response
    if (!success) return
    setTableData('ssctp_detailopen', data ? data.ssctp_detailopen : {rows: []})
    this.changePageStatus('browse')
    toast({ title: this.state.multiLang['701010DOOROAD-016'], duration: 5})
  }

  // 取消
  cancelBtnClick = () => {
    this.changePageStatus('browse')
    this.tableDataQry()
  }

  // 列表编辑后事件
  onAfterEvent = async (props, areaId, key, currentValue, changedrows, index, row, ...others) => {
    if (key === 'pk_transtype') {
      const transtype_code = currentValue.refcode || ''
      props.editTable.setValByKeyAndIndex(areaId, index, 'transtype_code', {value: transtype_code, display: transtype_code})
    }
    
    // if (key !== 'pk_ots') {
    //   return true
    // }
    // const {
    //   editTable: { setValByKeyAndIndex, },
    // } = props
    // if (!currentValue.refpk) {
    //   setValByKeyAndIndex(areaId, index, 'url', {value: '', display: ''})
    //   return true
    // }
    // const response = await asyncOtherSelect({pk_ots: currentValue.refpk})
    // const {success, data} = response
    // if (!success || !data) return true
    // setValByKeyAndIndex(areaId, index, 'url', {value: `${data.ip}:${data.port}`, display: `${data.ip}:${data.port}`})
  }

  // 列表选中变更事件
  selectedChange = (props, areaId, newVal, oldVal) => {
    this.props.button.setButtonDisabled({Delete: !newVal})
  }

  render() {
    const {
      state: {
        multiLang,
        showBatchAddModal,
        pageStatus,
      },
      props: {
        getSearchParam,
        editTable: { createEditTable, },
      },
      headerBtnEventDistribute,
      onAfterEvent,
      selectedChange,
      changePageStatus,
      refreshButtonEvent,
      saveBtnClick,
    } = this

    return (
      <BillListStyle {...this.props}>

        <BillListStyle.HeadArea
          title={getSearchParam('n') || multiLang['701010DOOROAD-008']}
          refreshButtonEvent={refreshButtonEvent} 
          status={pageStatus}
        >
          {/* 头部按钮组 */}
          <BillListStyle.ButtonGroup
            area={'head_btnArea'}
            buttonEvent={headerBtnEventDistribute}
          />
        </BillListStyle.HeadArea>

        <BillListStyle.BodyArea>
          {/* 列表 */}
          {createEditTable(
            'ssctp_detailopen',
            {
              showIndex: true,
              showCheck: true,
              onAfterEvent,
              adaptionHeight: true,
              isAddRow: true,
              selectedChange,
            },
          )}
        </BillListStyle.BodyArea>

        <BatchAddModal
          showModal={showBatchAddModal}
          onHide={action => {
            this.setState({showBatchAddModal: false})
            if (action !== 'save') {
              this.changePageStatus('browse')
            } else {
              this.changePageStatus('edit')
            }
          }}
          setPageEdit={() => changePageStatus('edit')}
          saveBtnClick={saveBtnClick}
          {...this.state}
          {...this.props}
        />

      </BillListStyle>
    );
  }
}

DocOpen = createPage({ mutiLangCode: '7010' })(DocOpen);
ReactDOM.render(<DocOpen/>, document.querySelector("#app"));

/*FDKFkr+TYgGKTTudQv9suM5TObrl0kaUnLjqLMCkTsQ=*/