2022-07-20

king

2022-07-20 ed7d889f7d9dfca77fd7f055ad8d6ec6ad85ae91

 src/tabviews/zshare/topSearch/index.jsx

@@ -1,8 +1,8 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Form, Row, Col, Button, notification, Modal } from 'antd'
import { CloseOutlined } from '@ant-design/icons'
import { fromJS } from 'immutable'
import { Form, Row, Col, Button, notification, Modal, Drawer } from 'antd'
import { CloseOutlined, DownOutlined } from '@ant-design/icons'
import moment from 'moment'

import Api from '@/api'
@@ -10,8 +10,6 @@
import asyncComponent from '@/utils/asyncComponent'
import asyncSpinComponent from '@/utils/asyncSpinComponent'
import Utils from '@/utils/utils.js'
import zhCN from '@/locales/zh-CN/main.js'
import enUS from '@/locales/en-US/main.js'
import MKInput from './mkInput'
import './index.scss'

@@ -32,16 +30,10 @@
  }

  state = {
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    searchlist: null,        // 搜索项
    reset: true,             // 控制组合搜索项重置
    float: '',               // 浮动
    showButton: true,        // 是否显示搜索按钮
    showAdvanced: false,     // 是否显示高级搜索
    searchStyle: null,       // 搜索条件样式
    setting: {},
    advanceValues: [],       // 高级搜索条件保存值
    visible: false,
    adModelWidth: '1000px',
    hasReqFields: false
  }

@@ -55,47 +47,67 @@
    let mainItems = []  // 云端或单点数据
    let localItems = [] // 本地数据
    let deForms = []    // 测试系统，单个请求
    let float = ''
    let showButton = true
    let searchStyle = null
    let advanceValues = []
    let showAdvanced = false
    let adModelWidth = 1000
    let linkFields = {}
    let record = {}
    let hasReqFields = false

    if (setting && setting.advanceWidth) {
      adModelWidth = setting.advanceWidth
    } else if (config && config.wrap && config.wrap.advanceWidth) {
      adModelWidth = config.wrap.advanceWidth
    let forbid = false // header中不设置高级搜索
    let _setting = {showAdv: false}
    
    if (setting) {
      _setting.show = setting.show !== 'false'
      _setting.float = setting.float || 'left'
      _setting.advanceType = setting.advanceType || 'modal'
      _setting.advWidth = setting.advanceWidth || 1000
      _setting.placement = setting.drawerPlacement || 'right'
      _setting.ratio = setting.searchRatio || 6
      _setting.labelwidth = setting.searchLwidth !== undefined ? setting.searchLwidth : 33.3
      _setting.style = null
    } else if (config && config.wrap) {
      _setting.show = config.wrap.show !== 'false'
      _setting.advanceType = config.wrap.advanceType || 'modal'
      _setting.advWidth = config.wrap.advanceWidth || 1000
      _setting.placement = config.wrap.drawerPlacement || 'right'
      _setting.ratio = config.wrap.searchRatio || 6
      _setting.labelwidth = config.wrap.searchLwidth !== undefined ? config.wrap.searchLwidth : 33.3
      _setting.style = null
      
      if (config.type === 'search') {
        _setting.float = config.wrap.float || 'left'
        _setting.style = config.style
      } else {
        _setting.float = 'right'
        _setting.show = false
        forbid = true
      }
    }

    if (adModelWidth < 100) {
      adModelWidth = adModelWidth + 'vw'
    } else {
      adModelWidth = adModelWidth + 'px'
    _setting.labelCol = {style: {width: _setting.labelwidth + '%'}}
    _setting.wrapperCol = {style: {width: (100 - _setting.labelwidth) + '%'}}

    if (_setting.advanceType === 'drawer') {
      if (_setting.placement === 'top' || _setting.placement === 'bottom') {
        _setting.advHeight = _setting.advWidth > 100 ? _setting.advWidth + 'px' : _setting.advWidth + 'vh'
        _setting.advWidth = '100vw'
      } else {
        _setting.advWidth = _setting.advWidth > 100 ? _setting.advWidth + 'px' : _setting.advWidth + 'vw'
      }
    } else if (_setting.advanceType === 'modal') {
      if (_setting.advWidth < 100) {
        _setting.advWidth = _setting.advWidth + 'vw'
      } else {
        _setting.advWidth = _setting.advWidth + 'px'
      }
    }

    if (searchlist) {
      if (setting && setting.show === 'false') {
        showButton = false
      }
      _searchlist = fromJS(searchlist).toJS()
    } else if (config) {
      _searchlist = fromJS(config.search).toJS()
      if (config.type === 'search' && config.subtype === 'mainsearch') {
        float = config.wrap.float
        showButton = config.wrap.show !== 'false'
        searchStyle = config.style
      } else {
        showButton = false
        float = 'right'
      }
    }

    _searchlist.forEach(item => {
      // if (item.type === 'link') {
      if (item.linkField) {
        linkFields[item.linkField] = linkFields[item.linkField] || []
        linkFields[item.linkField].push({field: item.field, uuid: item.uuid})
@@ -116,8 +128,8 @@
        hasReqFields = true
      }

      if (showButton && item.advanced) {
        showAdvanced = true
      if (item.advanced && !forbid) {
        _setting.showAdv = true
      } else {
        item.advanced = false
      }
@@ -207,12 +219,8 @@
    })

    this.setState({
      float,
      showButton,
      searchStyle,
      setting: _setting,
      hasReqFields,
      showAdvanced,
      adModelWidth,
      advanceValues,
      searchlist: _list
    }, () => {
@@ -222,10 +230,6 @@
        this.improveSearch(mainItems, localItems)
      }
    })
  }

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

  // 查询下拉菜单
@@ -469,12 +473,11 @@

  getFields() {
    const { getFieldDecorator } = this.props.form
    const { dict, showButton, showAdvanced, float, visible } = this.state
    const { visible, setting } = this.state
    const fields = []
    let lastRadio = 6

    this.state.searchlist.forEach((item, index) => {
      if (item.hidden || item.advanced) return
      if (item.hidden || (item.advanced && (setting.advanceType !== 'pulldown' || !visible))) return

      const _rules = [
        {
@@ -484,9 +487,7 @@
      ]

      let content = null
      let className = ''
      let field = item.field
      lastRadio = item.ratio || 6

      if (item.type === 'text') {
        content = (<MKInput config={item} onInputSubmit={this.handleSubmit} />)
@@ -498,15 +499,13 @@
        field = item.datefield
        content = <DateGroup position={index} config={item} onChange={(val, type) => this.dateGroupChange(val, type, item)} />
      } else if (item.type === 'checkcard') {
        className = 'checkcard'
        content = <MKCheckCard config={item} onChange={(val) => this.cardChange(val, item)} />
      }

      if (content) {
        fields.push(
          <Col span={item.ratio || 6} key={index}>
          <Col className="mk-search-col" span={item.ratio || 6} key={index}>
            <Form.Item
              className={className}
              label={item.labelShow !== 'false' ? item.label : ''}
              labelCol={item.labelCol}
              wrapperCol={item.wrapperCol}
@@ -521,34 +520,71 @@
      }
    })

    if (showButton) {
      let action = (
        <Col span={lastRadio < 6 ? 6 : lastRadio} style={{ whiteSpace: 'nowrap' }} className="search-button" key="actions">
          <Form.Item label={' '} colon={false} style={{ minHeight: '40px' }}>
            <Button type="primary" onClick={this.handleSubmit}>
              {dict['main.search']}
            </Button>
            <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
              {dict['main.reset']}
            </Button>
            {showAdvanced && !visible ? <Button type="link" onClick={this.handleAdvance}>
              高级
    if (setting.show || setting.showAdv) {
      fields.push(
        <Col span={setting.searchRatio} style={{ whiteSpace: 'nowrap' }} className="mk-search-col search-button" key="actions">
          <Form.Item
            label={' '}
            colon={false}
            labelCol={setting.labelCol}
            wrapperCol={setting.wrapperCol}
          >
            {setting.show ? <Button type="primary" onClick={this.handleSubmit}>
              搜索
            </Button> : null}
            {setting.show ? <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
              重置
            </Button> : null}
            {setting.showAdv ? <Button className={visible ? 'visible' : ''} type="link" onClick={this.handleAdvance}>
              高级{setting.advanceType === 'pulldown' ? <DownOutlined /> : null}
            </Button> : null}
          </Form.Item>
        </Col>
      )
      if (float === 'right') {
        fields.unshift(action)
      } else {
        fields.push(action)
      }
    }
    
    return fields
  }

  handleAdvance = () => {
    this.setState({visible: true})
    const { setting, visible } = this.state

    if (setting.advanceType !== 'pulldown' && visible) {
      return
    }

    this.setState({visible: !visible})

    if (setting.advanceType === 'pulldown') {
      if (visible) {
        let advanceValues = []
        this.state.searchlist.forEach(item => {
          if (!item.advanced) return
    
          let val = this.record[item.field]
          if (val || val === 0) {
            if (item.precision === 'hour') {
              if (/,/ig.test(val)) {
                val = val.split(',').map(m => m + ':00').join(',')
              } else {
                val = val + ':00'
              }
            }
            advanceValues.push({field: item.field, type: item.type, label: item.label, value: val})
          }
        })
        this.setState({advanceValues})
      } else {
        let list = this.state.searchlist.map(item => {
          if (!item.advanced) return item
    
          item.initval = this.record[item.field]
          
          return item
        })
        this.setState({searchlist: list})
      }
    }
  }

  handleSubmit = () => {
@@ -573,7 +609,7 @@
      
            notification.warning({
              top: 92,
              message: this.state.dict['form.required.input'] + labels.join('、') + ' !',
              message: '请输入' + labels.join('、') + ' !',
              duration: 3
            })
            return
@@ -740,7 +776,7 @@
  }

  render() {
    const { float, searchStyle, visible, searchlist, showAdvanced, advanceValues, adModelWidth } = this.state
    const { visible, searchlist, advanceValues, setting } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -754,10 +790,10 @@

    return (
      <>
        <Form {...formItemLayout} className={`top-search ${float}`} style={searchStyle}>
        <Form {...formItemLayout} className={`top-search mk-float-${setting.float}`} style={setting.style}>
          <Row gutter={24}>{this.getFields()}</Row>
          <Row gutter={24}>
            {showAdvanced ? <div className="advanced-list">
          {advanceValues.length && (setting.advanceType !== 'pulldown' || (setting.advanceType === 'pulldown' && !visible)) ? <Row gutter={24}>
            <div className="advanced-list">
              {advanceValues.map((item, index) => {
                return (
                  <div key={index}>
@@ -766,14 +802,14 @@
                    <CloseOutlined onClick={() => this.closeAdvanceForm(item)} />
                  </div>)
              })}
            </div> : null}
          </Row>
            </div>
          </Row> : null}
        </Form>
        <Modal
        {setting.advanceType === 'modal' ? <Modal
          title="高级搜索"
          maskClosable={false}
          visible={visible}
          width={adModelWidth}
          width={setting.advWidth}
          closable={false}
          footer={null}
          destroyOnClose
@@ -784,7 +820,24 @@
            advanceSubmit={this.handleOk}
            handleClose={() => this.setState({visible: false})}
          />
        </Modal>
        </Modal> : null}
        {setting.advanceType === 'drawer' ? <Drawer
          title="高级搜索"
          width={setting.advWidth}
          height={setting.advHeight}
          maskClosable={false}
          onClose={() => this.setState({visible: false})}
          visible={visible}
          placement={setting.placement}
          destroyOnClose
        >
          <MutilForm
            searchlist={searchlist}
            record={this.record}
            advanceSubmit={this.handleOk}
            handleClose={() => this.setState({visible: false})}
          />
        </Drawer> : null}
      </>
    )
  }