2024-02-04

king

2024-02-04 0bbaa727cdfc65622e33e91c4bf694c83f184535

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

@@ -1,117 +1,41 @@
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'

import Api from '@/api'
import Utils from '@/utils/utils.js'
import MKEmitter from '@/utils/events.js'
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
@@ -120,8 +44,8 @@
    let param = {
      func: 'sPC_Get_TableData',
      obj_name: 'data',
      exec_type: 'y',
      arr_field: arr_field,
      exec_type: window.GLOB.execType || 'y',
      arr_field: config.arr_field,
      default_sql: 'true',
      custom_script: '',
      menuname: config.label
@@ -142,12 +66,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') || ''
@@ -164,8 +88,8 @@
      DateCount && console.info(`/*${config.label} 总数查询*/\n` + DateCount.replace(/\n\s{6}/ig, '\n'))
    }

    param.LText = Utils.formatOptions(sql)
    param.DateCount = Utils.formatOptions(DateCount)
    param.LText = Utils.formatOptions(sql, param.exec_type)
    param.DateCount = Utils.formatOptions(DateCount, param.exec_type)

    param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
    param.secretkey = Utils.encrypt('', param.timestamp)
@@ -173,12 +97,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,56 +162,10 @@
    }, 500)
  }

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

    let values = {[config.field]: val}

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

    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(record)
  }

  changeTable = (pagination, filters, sorter) => {
@@ -311,29 +188,179 @@
    })
  }

  cancel = () => {
    const { mask } = this.props
  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 = ''

    this.setState({visible: false})
          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}
      />
    </>
  }
}

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

  componentDidMount() {
    const { autoFocus, config } = this.props

    MKEmitter.addListener('setFocus' + config.tableId, this.setFocus)

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

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

  componentWillUnmount () {
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('setFocus' + this.props.config.tableId, this.setFocus)
  }

  setFocus = (lId, colId) => {
    const { config, lineId } = this.props

    if (lId !== lineId || config.uuid !== colId) return

    if (config.$ctrl) {
      MKEmitter.emit('colFocus' + config.tableId, lineId, config.uuid)
    }

    this.setState({visible: true})
  }

  selectChange = (record) => {
    const { config, lineId } = this.props

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

    if (config.linkSubField) {
      config.linkSubField.forEach((m, i) => {
        values[m] = record[m] !== undefined ? record[m] : ''
      })
    }

    this.props.onChange(values, record.$$uuid)

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

    if (config.$ctrl) {
      MKEmitter.emit('colBlur' + config.tableId, lineId, config.uuid)
    }

    this.props.onBlur && this.props.onBlur()

    if (/\$noAct/.test(config.enter)) return

    setTimeout(() => {
      if (/\$next/.test(config.enter)) {
        MKEmitter.emit('nextLine' + config.tableId, lineId, config.enter.replace('$next_', ''))
      } else {
        MKEmitter.emit('setFocus' + config.tableId, lineId, config.enter)
      }
    }, 10)
  }

  trigger = (e) => {
    const { config, lineId } = this.props

    e && e.stopPropagation()

    if (config.$ctrl) {
      MKEmitter.emit('colFocus' + config.tableId, lineId, config.uuid)
    }

    this.setState({visible: true})
  }

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

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

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

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

    if (config.$ctrl) {
      MKEmitter.emit('colBlur' + config.tableId, lineId, config.uuid)
    }
  }

  cancel = () => {
    const { config, lineId } = this.props

    this.setState({visible: false})

    if (config.$ctrl) {
      MKEmitter.emit('colBlur' + config.tableId, lineId, config.uuid)
    }

    this.props.onBlur && this.props.onBlur()
  }

  render() {
    const { mask } = this.props
    const { value, config, options, visible, loading, total, pageIndex, pageSize, columns, placeholder } = this.state
    const { autoFocus, BID, lineId, config } = this.props
    const { value, visible } = this.state
    
    return <>
      {mask ? <div className="mk-pop-select-mask" onClick={this.trigger}></div> : null}
      {autoFocus ? <div className="mk-pop-select-mask" onClick={this.trigger}></div> : null}
      <div className="mk-pop-select-wrap" onClick={this.trigger}>
        {value}
        {value && !mask ? <CloseCircleFilled onClick={this.clear} /> : null}
        {value && !autoFocus ? <CloseCircleFilled onClick={this.clear} /> : null}
        <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 +371,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={lineId} value={value} onChange={this.selectChange}/>
            </TabPane>
          ))}
        </Tabs> :
        <PopTable config={config} BID={BID} ID={lineId} value={value} onChange={this.selectChange}/>}
      </Modal>
    </>
  }