2023-10-27

king

2023-10-27 882d11341442d5128c9e314f76e48d4d829f31cc

2023-10-27

 src/menu/components/table/edit-table/columns/editColumn/formconfig.jsx

@@ -457,6 +457,35 @@
      required: true
    },
    {
      type: 'radio',
      key: 'laypage',
      label: '分页',
      initVal: card.laypage || 'true',
      required: false,
      options: [{
        value: 'true',
        text: '是'
      }, {
        value: 'false',
        text: '否'
      }]
    },
    {
      type: 'radio',
      key: 'onload',
      label: '初始化',
      initVal: card.onload || 'true',
      tooltip: '当没有设置搜索字段时，初始化加载数据。',
      required: false,
      options: [{
        value: 'true',
        text: '加载'
      }, {
        value: 'false',
        text: '不加载'
      }]
    },
    {
      type: 'text',
      key: 'valueField',
      label: '值·字段',

 src/menu/components/table/edit-table/columns/editColumn/index.jsx

@@ -76,7 +76,7 @@
        } else if (this.record.editType === 'date') {
          _options.push('required', 'precision', 'enter', 'declareType')
        } else if (this.record.editType === 'popSelect') {
          _options.push('required', 'enter', 'linkSubField', 'columns', 'dataSource', 'primaryKey', 'order', 'showField', 'controlField', 'searchKey', 'popWidth')
          _options.push('required', 'enter', 'linkSubField', 'columns', 'dataSource', 'primaryKey', 'order', 'showField', 'controlField', 'searchKey', 'popWidth', 'laypage', 'onload')
        } else if (this.record.editType === 'select') {
          _options.push('required', 'enter', 'resourceType', 'linkSubField', 'dropdown')


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

@@ -371,8 +371,23 @@
    }, 10)
  }

  onPopChange = () => {
  onPopChange = (values) => {
    const { col, record } = this.props

    this.setState({editing: false})

    setTimeout(() => {
      if (/\$next/.test(col.enter)) {
        MKEmitter.emit('nextLine', col, record.$$uuid)
      } else if (col.enter === '$sub') {
        MKEmitter.emit('subLine', col, record)
      } else if (col.enter !== '$noAct') {
        let node = document.getElementById(col.enter + record.$$uuid)
        node && node.click()
      }
    }, 50)

    MKEmitter.emit('changeRecord', col.tableId, {...record, ...values})
  }

  render() {
@@ -455,7 +470,7 @@
            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={() => {}}/>
              <MKPopSelect mask={true} defaultValue={_value} config={col} BID={record.$$BID} ID={record.$$uuid} onChange={this.onPopChange} blur={() => this.setState({editing: false})}/>
            </td>)
          } else {
            let _value = record[col.field] !== undefined ? record[col.field] : ''
@@ -844,8 +859,21 @@
    MKEmitter.emit('changeRecord', col.tableId, {...record, [col.field]: _val})
  }

  onPopChange = () => {
  onPopChange = (values) => {
    const { col, record } = this.props

    setTimeout(() => {
      if (/\$next/.test(col.enter)) {
        MKEmitter.emit('nextLine', col, record.$$uuid)
      } else if (col.enter === '$sub') {
        MKEmitter.emit('subLine', col, record)
      } else if (col.enter !== '$noAct') {
        let node = document.getElementById(col.enter + record.$$uuid)
        node && node.click()
      }
    }, 50)

    MKEmitter.emit('changeRecord', col.tableId, {...record, ...values})
  }

  render() {
@@ -880,7 +908,7 @@
          )
        } else if (col.editType === 'popSelect') {
          children = (
            <MKPopSelect config={col} defaultValue={record[col.field] || ''} BID={record.$$BID} ID={record.$$uuid} onChange={this.onPopChange} onSubmit={() => {}}/>
            <MKPopSelect config={col} defaultValue={record[col.field] || ''} BID={record.$$BID} ID={record.$$uuid} onChange={this.onPopChange}/>
          )
        } else {
          children = (<>
@@ -2049,11 +2077,7 @@
    })

    if (err) {
      notification.warning({
        top: 92,
        message: err,
        duration: 5
      })
      message.warning(err)

      return null
    }

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

@@ -1,13 +1,11 @@
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 { 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
@@ -17,7 +15,7 @@
    super(props)
    
    let config = fromJS(props.config).toJS()
    let value = props.defaultValue || config.initval
    let value = props.defaultValue

    let arrfield = config.columns.map(f => f.field)
  
@@ -94,10 +92,10 @@
  }

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

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

@@ -243,46 +241,26 @@

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

    if (config.subFields) {
      let option = record || null
    let values = {[config.field]: val}

      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)
    if (config.linkSubField) {
      config.linkSubField.forEach(m => {
        values[m] = record[m] === undefined ? '' : record[m]
      })
    }

    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()
        }
      }
    })
    this.props.onChange(values)
    this.setState({value: val})
  }

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

    this.setState({visible: true}, () => {
      if (config.editType === 'popSelect' && options.length === 0) {
      if (config.onload === 'true' && options.length === 0) {
        this.loadData()
      }
    })
@@ -294,6 +272,23 @@

    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: ''})
  }

  changeTable = (pagination, filters, sorter) => {
@@ -316,25 +311,27 @@
    })
  }

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

    this.setState({visible: false})

    if (mask) {
      this.props.blur()
    }
  }

  render() {
    const { mask } = this.props
    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>
      {mask ? <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}
        <TableOutlined onClick={this.trigger}/>
      </div>
      <Modal
        wrapClassName='mk-pop-select-modal'
        title={config.label}
@@ -344,7 +341,7 @@
        maskClosable={false}
        cancelText="关闭"
        width={config.popWidth < 100 ? config.popWidth + 'vw' : config.popWidth}
        onCancel={() => this.setState({visible: false})}
        onCancel={this.cancel}
        destroyOnClose
      >
        {config.searchKey ? <Search placeholder={placeholder} onSearch={this.searchOption} enterButton /> : null}

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

@@ -1,26 +1,76 @@
.mk-pop-select {
  .ant-select-selection__rendered {
    margin-right: 30px;
.mk-pop-select-wrap {
  position: relative;
  box-sizing: border-box;
  margin: 0;
  padding: 0 30px 0 11px;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: 'tnum';
  position: relative;
  display: inline-block;
  width: 100%;
  outline: 0;
  border: 1px solid #d9d9d9;
  border-top-width: 1.02px;
  background: #ffffff;
  user-select: none;
  height: 32px;
  cursor: pointer;
  transition: all 0.3s;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 30px;

  .anticon-table {
    padding: 7px;
    color: rgba(0, 0, 0, 0.25);
    transition: color 0.3s;
    font-size: 14px;
    position: absolute;
    right: 0px;
    top: 0px;
  }
  .ant-select-selection__clear {
    right: 35px;
  .anticon-close-circle {
    color: rgba(0, 0, 0, 0.25);
    transition: all 0.3s;
    padding: 7px;
    opacity: 0;
    position: absolute;
    right: 25px;
  }
  .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);
    }
  .anticon-close-circle:hover {
    color: rgba(0, 0, 0, 0.45);
  }
}
.mk-pop-select-wrap:hover, .mk-pop-select-mask:hover + .mk-pop-select-wrap {
  border-color: var(--mk-sys-color5);
  box-shadow: 0 0 0 2px var(--mk-sys-color2);

  .anticon-table {
    color: var(--mk-sys-color);
  }
  .anticon-close-circle {
    opacity: 1;
  }
}
.mk-pop-select-mask {
  position: absolute;
  background: #ffffff;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: auto;
  border: 1px solid #d9d9d9;
  cursor: pointer;
}
.mk-pop-select-mask + .mk-pop-select-wrap {
  border: none;
  box-shadow: none!important;
  padding-left: 0px;
}
.mk-pop-select-modal {
  .ant-modal-body {
@@ -33,6 +83,9 @@
      margin-bottom: 20px;
    }
    table {
      td {
        padding: 12px 16px;
      }
      tr:not(.ant-table-row-selected):hover > td {
        background-color: var(--mk-sys-color1);
      }

 src/tabviews/zshare/mutilform/mkPopSelect/index.scss

@@ -33,6 +33,9 @@
      margin-bottom: 20px;
    }
    table {
      td {
        padding: 12px 16px;
      }
      tr:not(.ant-table-row-selected):hover > td {
        background-color: var(--mk-sys-color1);
      }