2023-10-30

king

2023-10-30 bca9d545b6b10e1d0120b8edaece22f9acbe12f3

 src/tabviews/custom/components/table/edit-table/normalTable/mkPopSelect/index.jsx

@@ -1,6 +1,6 @@
import React, {Component} from 'react'
import { is, fromJS } from 'immutable'
import { notification, Modal, Table, Input } from 'antd'
import { notification, Modal, Table, Input, Tabs } from 'antd'
import moment from 'moment'
import { TableOutlined, CloseCircleFilled } from '@ant-design/icons'

@@ -9,109 +9,32 @@
import './index.scss'

const { Search } = Input
const { TabPane } = Tabs

class MKPopSelect extends Component {
  constructor(props) {
    super(props)
    
    let config = fromJS(props.config).toJS()
    let value = props.defaultValue

    let arrfield = config.columns.map(f => f.field)
  
    if (config.subFields && config.subFields.length > 0) {
      config.subFields.forEach(n => {
        if (!arrfield.includes(n.field)) {
          arrfield.push(n.field)
        }
      })
    }

    if (sessionStorage.getItem('dataM') === 'true') { // 数据权限
      config.dataSource = config.dataSource.replace(/\$@/ig, '/*').replace(/@\$/ig, '*/').replace(/@datam@/ig, '\'Y\'')
    } else {
      config.dataSource = config.dataSource.replace(/@\$|\$@/ig, '').replace(/@datam@/ig, '\'\'')
    }

    config.dataSource = config.dataSource.replace(/@LoginUID@/ig, `'${sessionStorage.getItem('LoginUID') || ''}'`)
    config.dataSource = config.dataSource.replace(/@SessionUid@/ig, `'${localStorage.getItem('SessionUid') || ''}'`)
    config.dataSource = config.dataSource.replace(/@UserID@/ig, `'${sessionStorage.getItem('UserID') || ''}'`)
    config.dataSource = config.dataSource.replace(/@Appkey@/ig, `'${window.GLOB.appkey || ''}'`)

    if (/\s/.test(config.dataSource)) { // 拼接别名
      config.dataSource = '(' + config.dataSource + ') tb'
    }

    let columns = []
    let labels = {}
    config.columns.forEach(col => {
      labels[col.field] = col.label

      if (col.Hide === 'true') return

      columns.push({
        dataIndex: col.field,
        title: col.label,
        sorter: col.IsSort === 'true',
        width: col.Width || 120
      })
    })

    let placeholder = ''
    if (!config.searchKey) {
      config.onload = 'true'
    } else {
      placeholder = []
      config.searchKey.split(',').forEach(key => {
        if (!labels[key]) {
          placeholder = ''
        } else if (placeholder) {
          placeholder.push(labels[key])
        }
      })

      placeholder = placeholder ? placeholder.join('、') : ''
    }

    this.state = {
      config: config,
      options: [],
      columns,
      value,
      placeholder,
      arr_field: arrfield.join(','),
      searchKey: '',
      pageIndex: 1,
      pageSize: 10,
      orderBy: '',
      visible: false,
      loading: false
    }

    this.timer = null
class PopTable extends Component {
  state = {
    options: [],
    searchKey: '',
    pageIndex: 1,
    pageSize: 10,
    orderBy: '',
    loading: false
  }

  timer = null

  componentDidMount () {
    const { mask } = this.props
    const { config } = this.props
    const { options } = this.state

    if (mask) {
      this.trigger()
    }
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }

  componentWillUnmount () {
    this.setState = () => {
      return
    if (config.onload === 'true' && options.length === 0) {
      this.loadData()
    }
  }

  loadData () {
    const { BID, ID } = this.props
    const { config, pageIndex, pageSize, arr_field, searchKey, orderBy } = this.state
    const { BID, ID, config } = this.props
    const { pageIndex, pageSize, searchKey, orderBy } = this.state

    this.setState({
      loading: true
@@ -121,7 +44,7 @@
      func: 'sPC_Get_TableData',
      obj_name: 'data',
      exec_type: 'y',
      arr_field: arr_field,
      arr_field: config.arr_field,
      default_sql: 'true',
      custom_script: '',
      menuname: config.label
@@ -142,12 +65,12 @@
    _datasource = _datasource.replace(/@ID@/ig, `'${ID || ''}'`)

    if (config.laypage === 'true') {
      sql = `/*system_query*/select top ${pageSize} ${arr_field} from (select ${arr_field} ,ROW_NUMBER() over(order by ${_orderBy}) as rows from ${_datasource} ${_search}) tmptable where rows > ${pageSize * (pageIndex - 1)} order by tmptable.rows `
      sql = `/*system_query*/select top ${pageSize} ${config.arr_field} from (select ${config.arr_field} ,ROW_NUMBER() over(order by ${_orderBy}) as rows from ${_datasource} ${_search}) tmptable where rows > ${pageSize * (pageIndex - 1)} order by tmptable.rows `
      DateCount = `/*system_query*/select count(1) as total from ${_datasource} ${_search}`
    } else if (_orderBy) {
      sql = `/*system_query*/select ${arr_field} from (select ${arr_field} ,ROW_NUMBER() over(order by ${_orderBy}) as rows from ${_datasource} ${_search}) tmptable order by tmptable.rows `
      sql = `/*system_query*/select ${config.arr_field} from (select ${config.arr_field} ,ROW_NUMBER() over(order by ${_orderBy}) as rows from ${_datasource} ${_search}) tmptable order by tmptable.rows `
    } else {
      sql = `/*system_query*/select ${arr_field} from ${_datasource} ${_search}  `
      sql = `/*system_query*/select ${config.arr_field} from ${_datasource} ${_search}  `
    }

    let departmentcode = sessionStorage.getItem('departmentcode') || ''
@@ -173,12 +96,11 @@
    param.username = sessionStorage.getItem('User_Name') || ''
    param.fullname = sessionStorage.getItem('Full_Name') || ''

    Api.genericInterface(param).then(result => {
    Api.getSystemCacheConfig(param, config.cache === 'true').then(result => {
      if (result.status) {
        let options = result.data.map((item, index) => {
          item.key = index
          item.$$uuid = item[config.primaryKey] || ''
          item.$label = item[config.showField]

          if (config.controlField && item[config.controlField] === 'true') {
            item.$disabled = true
@@ -239,10 +161,12 @@
    }, 500)
  }

  selectChange = (val, record) => {
    const { config } = this.state
  changeRow = (record) => {
    const { config } = this.props

    let values = {[config.field]: val}
    if (record.$disabled) return

    let values = {[config.field]: record.$$uuid}

    if (config.linkSubField) {
      config.linkSubField.forEach(m => {
@@ -250,45 +174,7 @@
      })
    }

    this.props.onChange(values)
    this.setState({value: val})
  }

  trigger = (e) => {
    const { config, options } = this.state
    
    e && e.stopPropagation()

    this.setState({visible: true}, () => {
      if (config.onload === 'true' && options.length === 0) {
        this.loadData()
      }
    })
  }

  changeRow = (record) => {

    if (record.$disabled) return

    this.selectChange(record.$$uuid, record)
    this.setState({visible: false})
  }

  clear = (e) => {
    const { config } = this.state

    e.stopPropagation()
    
    let values = {[config.field]: ''}

    if (config.linkSubField) {
      config.linkSubField.forEach(m => {
        values[m] = ''
      })
    }

    this.props.onChange(values)
    this.setState({value: ''})
    this.props.onChange(values, record.$$uuid)
  }

  changeTable = (pagination, filters, sorter) => {
@@ -311,6 +197,94 @@
    })
  }

  render() {
    const { config, value } = this.props
    const { options, loading, total, pageIndex, pageSize } = this.state
    
    return <>
      {config.searchKey ? <Search placeholder={config.placeholder} onSearch={this.searchOption} enterButton /> : null}
      <Table
        rowKey="$$uuid"
        bordered={true}
        rowSelection={null}
        columns={config.cols}
        dataSource={options}
        loading={loading}
        onRow={(record) => {
          let className = ''

          if (record.$disabled) {
            className = ' mk-disable-line '
          } else if (value === record.$$uuid) {
            className = ' ant-table-row-selected '
          }
          
          return {
            className: className,
            onClick: () => {this.changeRow(record)},
          }
        }}
        onChange={this.changeTable}
        pagination={config.laypage === 'true' ? {
          current: pageIndex,
          pageSize: pageSize,
          showSizeChanger: true,
          total: total || 0,
          showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条`
        } : false}
      />
    </>
  }
}

class MKPopSelect extends Component {
  constructor(props) {
    super(props)
    
    this.state = {
      value: props.defaultValue,
      visible: false
    }
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }

  componentWillUnmount () {
    this.setState = () => {
      return
    }
  }

  selectChange = (values, val) => {
    this.props.onChange(values)
    this.setState({value: val, visible: false})
  }

  trigger = (e) => {
    e && e.stopPropagation()

    this.setState({visible: true})
  }

  clear = (e) => {
    const { config } = this.props

    e.stopPropagation()
    
    let values = {[config.field]: ''}

    if (config.linkSubField) {
      config.linkSubField.forEach(m => {
        values[m] = ''
      })
    }

    this.props.onChange(values)
    this.setState({value: ''})
  }

  cancel = () => {
    const { mask } = this.props

@@ -322,8 +296,8 @@
  }

  render() {
    const { mask } = this.props
    const { value, config, options, visible, loading, total, pageIndex, pageSize, columns, placeholder } = this.state
    const { mask, BID, ID, config } = this.props
    const { value, visible } = this.state
    
    return <>
      {mask ? <div className="mk-pop-select-mask" onClick={this.trigger}></div> : null}
@@ -333,7 +307,7 @@
        <TableOutlined onClick={this.trigger}/>
      </div>
      <Modal
        wrapClassName='mk-pop-select-modal'
        wrapClassName='mk-table-pop-select-modal'
        title={config.label}
        visible={visible}
        closable={true}
@@ -344,37 +318,14 @@
        onCancel={this.cancel}
        destroyOnClose
      >
        {config.searchKey ? <Search placeholder={placeholder} onSearch={this.searchOption} enterButton /> : null}
        <Table
          rowKey="$$uuid"
          bordered={true}
          rowSelection={null}
          columns={columns}
          dataSource={options}
          loading={loading}
          onRow={(record) => {
            let className = ''

            if (record.$disabled) {
              className = ' mk-disable-line '
            } else if (value === record.$$uuid) {
              className = ' ant-table-row-selected '
            }
            
            return {
              className: className,
              onClick: () => {this.changeRow(record)},
            }
          }}
          onChange={this.changeTable}
          pagination={config.laypage === 'true' ? {
            current: pageIndex,
            pageSize: pageSize,
            showSizeChanger: true,
            total: total || 0,
            showTotal: (total, range) => `${range[0]}-${range[1]} 共 ${total} 条`
          } : false}
        />
        {config.pops ? <Tabs>
          {config.pops.map(tab => (
            <TabPane tab={tab.tabName} key={tab.uuid}>
              <PopTable config={tab} BID={BID} ID={ID} value={value} onChange={this.selectChange}/>
            </TabPane>
          ))}
        </Tabs> :
        <PopTable config={config} BID={BID} ID={ID} value={value} onChange={this.selectChange}/>}
      </Modal>
    </>
  }