2023-10-27

king

2023-10-27 6555f1f63a5389d49fbb98b5b2dca16a61239c64

2023-10-27

 src/tabviews/custom/components/table/base-table/index.scss

@@ -14,7 +14,7 @@
  }
  .main-table-box {
    position: relative;
    min-height: 150px;
    min-height: 40px;
    .main-pickup {
      position: absolute;
      right: 5px;

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

@@ -15,6 +15,7 @@

const { Paragraph } = Typography
const MkIcon = asyncComponent(() => import('@/components/mk-icon'))
const MKPopSelect = asyncComponent(() => import('./mkPopSelect'))
const CardCellComponent = asyncComponent(() => import('@/tabviews/custom/components/card/cardcellList'))

class CusSwitch extends Component {
@@ -370,6 +371,10 @@
    }, 10)
  }

  onPopChange = () => {

  }

  render() {
    let { col, config, record, style, className, ...resProps } = this.props
    const { editing, value, err } = this.state
@@ -445,6 +450,12 @@

            return (<td onClick={(e) => e.stopPropagation()} className="editing_table_cell">
              <CusSwitch config={col} defaultValue={_value} autoFocus={true} onChange={this.onSwitchChange} onBlur={this.switchBlur}/>
            </td>)
          } else if (col.editType === 'popSelect') {
            let _value = record[col.field] !== undefined ? record[col.field] : ''

            return (<td onClick={(e) => e.stopPropagation()} className="editing_table_cell">
              <MKPopSelect defaultValue={_value} config={col} BID={record.$$BID} ID={record.$$uuid} onChange={this.onPopChange} onSubmit={() => {}}/>
            </td>)
          } else {
            let _value = record[col.field] !== undefined ? record[col.field] : ''
@@ -833,6 +844,10 @@
    MKEmitter.emit('changeRecord', col.tableId, {...record, [col.field]: _val})
  }

  onPopChange = () => {

  }

  render() {
    let { col, config, record, style, className, ...resProps } = this.props
    const { err } = this.state
@@ -863,6 +878,10 @@
          children = (
            <CusDatePicker config={col} value={record[col.field] || null} onChange={this.onDateChange} blur={() => {}}/>
          )
        } else if (col.editType === 'popSelect') {
          children = (
            <MKPopSelect config={col} defaultValue={record[col.field] || ''} BID={record.$$BID} ID={record.$$uuid} onChange={this.onPopChange} onSubmit={() => {}}/>
          )
        } else {
          children = (<>
            <Select

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

New file
@@ -0,0 +1,386 @@
import React, {Component} from 'react'
import { is, fromJS } from 'immutable'
import { Select } from 'antd'
import { notification, Modal, Table, Input } from 'antd'
import moment from 'moment'
import { TableOutlined } 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

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

    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
  }

  componentDidMount () {
    const { config } = this.state

    if (config.onload === 'true' && config.editType !== 'popSelect') {
      this.loadData()
    }
  }

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

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

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

    this.setState({
      loading: true
    })

    let param = {
      func: 'sPC_Get_TableData',
      obj_name: 'data',
      exec_type: 'y',
      arr_field: arr_field,
      default_sql: 'true',
      custom_script: '',
      menuname: config.label
    }

    let sql = ''
    let DateCount = ''
    let _search = ''
    let _orderBy = orderBy || config.order || ''
    let _datasource = config.dataSource

    if (config.searchKey && searchKey) {
      let fields = config.searchKey.split(',').map(field => field + ` like '%${searchKey}%'`)
      _search = 'where ' + fields.join(' OR ')
    }

    _datasource = _datasource.replace(/@BID@/ig, `'${BID || ''}'`)
    _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 `
      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 `
    } else {
      sql = `/*system_query*/select ${arr_field} from ${_datasource} ${_search}  `
    }

    let departmentcode = sessionStorage.getItem('departmentcode') || ''
    let organization = sessionStorage.getItem('organization') || ''
    let mk_user_type = sessionStorage.getItem('mk_user_type') || ''
    
    sql = `declare @mk_departmentcode nvarchar(512),@mk_organization nvarchar(512),@mk_user_type nvarchar(20)
      Select @mk_departmentcode='${departmentcode}', @mk_organization='${organization}', @mk_user_type='${mk_user_type}'
      ${sql}`

    // 测试系统打印查询语句
    if (window.GLOB.debugger === true) {
      console.info(`/*${config.label} 数据源*/\n` + sql.replace(/\n\s{6}/ig, '\n'))
      DateCount && console.info(`/*${config.label} 总数查询*/\n` + DateCount.replace(/\n\s{6}/ig, '\n'))
    }

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

    param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
    param.secretkey = Utils.encrypt('', param.timestamp)

    param.username = sessionStorage.getItem('User_Name') || ''
    param.fullname = sessionStorage.getItem('Full_Name') || ''

    Api.genericInterface(param).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
          }

          return item
        })
  
        this.setState({
          options: options,
          total: result.total || 0,
          loading: false
        })
  
        if (result.message) {
          if (result.ErrCode === 'Y') {
            Modal.success({
              title: result.message
            })
          } else if (result.ErrCode === 'S') {
            notification.success({
              top: 92,
              message: result.message,
              duration: 2
            })
          }
        }
      } else {
        this.setState({
          loading: false
        })
  
        if (!result.message) return
        if (result.ErrCode === 'N') {
          Modal.error({
            title: result.message,
          })
        } else if (result.ErrCode !== '-2') {
          notification.error({
            top: 92,
            message: result.message,
            duration: 10
          })
        }
      }
    })
  }

  searchOption = (val) => {
    this.setState({searchKey: val})

    if (this.timer) {
      clearTimeout(this.timer)
    }

    this.timer = setTimeout(() => {
      this.loadData()
    }, 500)
  }

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

    if (config.subFields) {
      let option = record || null

      if (!option) {
        option = this.state.options.filter(m => m.$$uuid === val)[0]
      }

      option && config.subFields.forEach((n, i) => {
        other[n.field] = option[n.field]
        setTimeout(() => {
          MKEmitter.emit('mkFC', 'input', n.uuid, option[n.field])
        }, i * 5)
      })
    }

    this.props.onChange(val, other)
    this.setState({value: val}, () => {
      if (config.enter === 'tab') {
        MKEmitter.emit('mkFC', 'focus', config.tabUuid)
      } else if (config.enter === 'sub') {
        if (config.subFields) {
          setTimeout(() => {
            this.props.onSubmit()
          }, 1000)
        } else {
          this.props.onSubmit()
        }
      }
    })
  }

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

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

  changeRow = (record) => {

    if (record.$disabled) return

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

  changeTable = (pagination, filters, sorter) => {
    let orderBy = ''

    if (sorter.field && sorter.order) {
      if (sorter.order === 'ascend') {
        orderBy = `${sorter.field} asc`
      } else {
        orderBy = `${sorter.field} desc`
      }
    }

    this.setState({
      pageIndex: pagination.current,
      pageSize: pagination.pageSize,
      orderBy: orderBy,
    }, () => {
      this.loadData()
    })
  }

  render() {
    const { value, config, options, visible, loading, total, pageIndex, pageSize, columns, placeholder } = this.state
    
    return <>
      <Select
        className="mk-pop-select"
        showSearch={!!config.searchKey}
        allowClear
        value={value}
        onSearch={(val) => val && this.searchOption(val)}
        filterOption={false}
        onChange={(val) => this.selectChange(val === undefined ? '' : val)}
        disabled={config.readonly}
        suffixIcon={<TableOutlined onClick={this.trigger}/>}
      >
        {options.map(option =>
          <Select.Option disabled={option.$disabled} key={option.key} value={option.$$uuid}>{option.$label}</Select.Option>
        )}
      </Select>
      <Modal
        wrapClassName='mk-pop-select-modal'
        title={config.label}
        visible={visible}
        closable={true}
        centered={true}
        maskClosable={false}
        cancelText="关闭"
        width={config.popWidth < 100 ? config.popWidth + 'vw' : config.popWidth}
        onCancel={() => this.setState({visible: false})}
        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}
        />
      </Modal>
    </>
  }
}

export default MKPopSelect

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

New file
@@ -0,0 +1,70 @@
.mk-pop-select {
  .ant-select-selection__rendered {
    margin-right: 30px;
  }
  .ant-select-selection__clear {
    right: 35px;
  }
  .ant-select-arrow {
    transform: translate(8px, -9px);
    .ant-select-arrow-icon {
      padding: 7px;
      color: rgba(0, 0, 0, 0.25);
      transition: color 0.2s;
      font-size: 14px;
      svg {
        transition: none!important;
        transform: none!important;
      }
    }
    .ant-select-arrow-icon:hover {
      color: var(--mk-sys-color);
    }
  }
}
.mk-pop-select-modal {
  .ant-modal-body {
    min-height: 200px;
    max-height: calc(100vh - 210px);
    overflow-y: auto;

    .ant-input-search {
      max-width: 300px;
      margin-bottom: 20px;
    }
    table {
      tr:not(.ant-table-row-selected):hover > td {
        background-color: var(--mk-sys-color1);
      }
      tr.ant-table-row-selected td {
        background-color: var(--mk-sys-color3);
      }
      tr:not(.mk-disable-line) {
        cursor: pointer;
      }
      .mk-disable-line {
        color: rgba(0, 0, 0, 0.35);
      }
    }
  }
  .ant-modal-body::-webkit-scrollbar {
    width: 7px;
  }
  .ant-modal-body::-webkit-scrollbar-thumb {
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13);
    background: rgba(0, 0, 0, 0.13);
  }
  .ant-modal-body::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    background: rgba(0, 0, 0, 0);
  }

  .ant-modal-footer {
    .ant-btn-primary {
      display: none;
    }
  }
}

 src/tabviews/custom/components/table/normal-table/index.scss

@@ -14,7 +14,7 @@
  }
  .main-table-box {
    position: relative;
    min-height: 150px;
    min-height: 40px;
    .main-pickup {
      position: absolute;
      right: 5px;