2020-12-18

king

2020-12-18 106263ec10e60ce6c406e4fd5eb76d195772d0f0

 src/tabviews/zshare/topSearch/index.jsx

@@ -12,28 +12,35 @@
import enUS from '@/locales/en-US/main.js'
import './index.scss'

const {MonthPicker, WeekPicker, RangePicker} = DatePicker
const { MonthPicker, WeekPicker, RangePicker } = DatePicker

class MainSearch extends Component {
  static propTpyes = {
    BID: PropTypes.any,          // 父级Id，用于查询下拉选择项
    menuType: PropTypes.any,     // 菜单权限，是否为HS
    searchlist: PropTypes.array, // 搜索条件列表
    config: PropTypes.object,    // 组件配置信息(自定义页面)
    refreshdata: PropTypes.func  // 刷新数据
  }

  state = {
    dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
    match: null,            // 搜索条件匹配规则
    style: null,            // 搜索条件类型
    label: null,            // 提示文字
    required: null,         // 是否必填
    searchlist: null,       // 搜索项
    groups: null,           // 组合搜索项
    formId: Utils.getuuid() // 搜索表单Id
    formId: '',              // 搜索表单Id
    match: null,             // 搜索条件匹配规则
    style: null,             // 搜索条件类型
    label: null,             // 提示文字
    required: null,          // 是否必填
    searchlist: null,        // 搜索项
    groups: null,            // 组合搜索项
    float: '',               // 浮动
    showButton: true,        // 是否显示搜索按钮
    searchStyle: null        // 搜索条件样式
  }

  UNSAFE_componentWillMount () {
    let searchlist = fromJS(this.props.searchlist).toJS()
    const { config, menuType, searchlist } = this.props

    let _searchlist = []
    let match = {}
    let label = {}
    let style = {}
@@ -43,8 +50,27 @@
    let mainItems = []  // 云端或单点数据
    let localItems = [] // 本地数据
    let deForms = []    // 测试系统，单个请求
    let float = ''
    let showButton = true
    let searchStyle = null
    let formId = Utils.getuuid()

    searchlist.forEach(item => {
    if (searchlist) {
      _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.float === 'left' && config.wrap.show === 'true'
        searchStyle = config.style
      } else {
        formId = ''
        showButton = false
        float = 'right'
      }
    }

    _searchlist.forEach(item => {
      if (fieldMap.has(item.field)) {
        item.field = item.field + '@tail@'
      }
@@ -76,7 +102,7 @@
          }

          // 测试系统单个请求
          if (this.props.menuType !== 'HS' && options.sysType === 'local' && !window.GLOB.systemType) {
          if (menuType !== 'HS' && options.sysType === 'local' && !window.GLOB.systemType) {
            deForms.push({
              ...item,
              arr_field: _option.field,
@@ -124,14 +150,18 @@
    })

    this.setState({
      match: match,
      label: label,
      style: style,
      required: required,
      match,
      label,
      style,
      float,
      formId,
      required,
      showButton,
      searchStyle,
      searchlist: _list,
      groups: _groups
    }, () => {
      if (this.props.menuType !== 'HS' && options.sysType === 'local' && !window.GLOB.systemType) {
      if (menuType !== 'HS' && options.sysType === 'local' && !window.GLOB.systemType) {
        this.improveSimpleSearch(deForms)
      } else {
        this.improveSearch(mainItems, localItems)
@@ -431,7 +461,7 @@

  getFields() {
    const { getFieldDecorator } = this.props.form
    const { dict } = this.state
    const { dict, showButton, formId } = this.state
    const fields = []

    this.state.searchlist.forEach((item, index) => {
@@ -440,7 +470,7 @@
      if (item.type === 'text') { // 文本搜索
        fields.push(
          <Col span={item.ratio || 6} key={index}>
            <Form.Item label={item.label}>
            <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
              {getFieldDecorator(item.field, {
                initialValue: item.initval,
                rules: [
@@ -449,14 +479,14 @@
                    message: dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(<Input placeholder="" autoComplete="off" />)}
              })(<Input placeholder={item.labelShow === 'false' ? item.label : ''} autoComplete="off" onPressEnter={this.handleSearch} />)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'select') { // 下拉搜索
        fields.push(
          <Col span={item.ratio || 6} key={index}>
            <Form.Item label={item.label}>
            <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
              {getFieldDecorator(item.field, {
                initialValue: item.initval,
                rules: [
@@ -470,7 +500,7 @@
                  showSearch
                  onChange={(value) => {this.selectChange(item, value)}}
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  getPopupContainer={() => document.getElementById(this.state.formId)}
                  getPopupContainer={() => formId ? document.getElementById(formId) : document.body}
                >
                  {item.options.map((option, i) =>
                    <Select.Option id={`${i}`} title={option.Text} key={`${i}`} value={option.Value}>{option.Text}</Select.Option>
@@ -484,7 +514,7 @@
        let _initval = item.initval ? item.initval.split(',').filter(Boolean) : []
        fields.push(
          <Col span={item.ratio || 6} key={index}>
            <Form.Item label={item.label}>
            <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
              {getFieldDecorator(item.field, {
                initialValue: _initval,
                rules: [
@@ -499,7 +529,7 @@
                  mode="multiple"
                  onChange={this.searchChange}
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  getPopupContainer={() => document.getElementById(this.state.formId)}
                  getPopupContainer={() => formId ? document.getElementById(formId) : document.body}
                >
                  {item.options.map((option, i) =>
                    <Select.Option id={`${i}`} title={option.Text} key={`${i}`} value={option.Value}>{option.Text}</Select.Option>
@@ -512,7 +542,7 @@
      } else if (item.type === 'date') { // 时间搜索
        fields.push(
          <Col span={item.ratio || 6} key={index}>
            <Form.Item label={item.label}>
            <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
              {getFieldDecorator(item.field, {
                initialValue: item.initval ? moment().subtract(item.initval, 'days') : null,
                rules: [
@@ -522,7 +552,7 @@
                  }
                ]
              })(
                <DatePicker onChange={this.searchChange} getCalendarContainer={() => document.getElementById(this.state.formId)} />
                <DatePicker onChange={this.searchChange} getCalendarContainer={() => formId ? document.getElementById(formId) : document.body} />
              )}
            </Form.Item>
          </Col>
@@ -530,7 +560,7 @@
      } else if (item.type === 'datemonth') {
        fields.push(
          <Col span={item.ratio || 6} key={index}>
            <Form.Item label={item.label}>
            <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
              {getFieldDecorator(item.field, {
                initialValue: item.initval ? moment().subtract(item.initval, 'month') : null,
                rules: [
@@ -540,7 +570,7 @@
                  }
                ]
              })(
                <MonthPicker onChange={this.searchChange} getCalendarContainer={() => document.getElementById(this.state.formId)} />
                <MonthPicker onChange={this.searchChange} getCalendarContainer={() => formId ? document.getElementById(formId) : document.body} />
              )}
            </Form.Item>
          </Col>
@@ -548,7 +578,7 @@
      } else if (item.type === 'dateweek') {
        fields.push(
          <Col span={item.ratio || 6} key={index}>
            <Form.Item label={item.label}>
            <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
              {getFieldDecorator(item.field, {
                initialValue: item.initval ? moment().subtract(item.initval * 7, 'days') : null,
                rules: [
@@ -558,7 +588,7 @@
                  }
                ]
              })(
                <WeekPicker onChange={this.searchChange} getCalendarContainer={() => document.getElementById(this.state.formId)} />
                <WeekPicker onChange={this.searchChange} getCalendarContainer={() => formId ? document.getElementById(formId) : document.body} />
              )}
            </Form.Item>
          </Col>
@@ -577,7 +607,7 @@

        fields.push(
          <Col className="daterange" span={item.ratio || 6} key={index}>
            <Form.Item label={item.label}>
            <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
              {getFieldDecorator(item.field,
                {
                  initialValue: _defaultValue,
@@ -592,7 +622,7 @@
                  placeholder={['开始日期', '结束日期']}
                  renderExtraFooter={() => 'extra footer'}
                  onChange={this.searchChange}
                  getCalendarContainer={() => document.getElementById(this.state.formId)}
                  getCalendarContainer={() => formId ? document.getElementById(formId) : document.body}
                />
              )}
            </Form.Item>
@@ -601,7 +631,7 @@
      } else if (item.type === 'group') {
        fields.push(
          <Col span={item.ratio || 6} key={index}>
            <Form.Item label={item.label} className={item.required === 'true' ? 'group-required' : ''}>
            <Form.Item label={item.labelShow !== 'false' ? item.label : ''} className={item.required === 'true' ? 'group-required' : ''}>
              <DateGroup ref={item.uuid} position={index} card={item} onGroupChange={this.searchChange} />
            </Form.Item>
          </Col>
@@ -609,18 +639,20 @@
      }
    })

    fields.push(
      <Col span={6} style={{ whiteSpace: 'nowrap' }} key="actions">
        <Form.Item label={' '} colon={false} style={{ minHeight: '40px' }}>
          <Button type="primary" htmlType="submit">
            {dict['main.search']}
          </Button>
          <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
            {dict['main.reset']}
          </Button>
        </Form.Item>
      </Col>
    )
    if (showButton) {
      fields.push(
        <Col span={6} style={{ whiteSpace: 'nowrap' }} key="actions">
          <Form.Item label={' '} colon={false} style={{ minHeight: '40px' }}>
            <Button type="primary" onClick={this.handleSearch}>
              {dict['main.search']}
            </Button>
            <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
              {dict['main.reset']}
            </Button>
          </Form.Item>
        </Col>
      )
    }
    
    return fields
  }
@@ -768,6 +800,7 @@
  }

  render() {
    const { float, searchStyle } = this.state
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
@@ -780,7 +813,7 @@
    }

    return (
      <Form {...formItemLayout} className="top-search" id={this.state.formId} onSubmit={this.handleSearch}>
      <Form {...formItemLayout} className={`top-search ${float}`} style={searchStyle} id={this.state.formId}>
        <Row gutter={24}>{this.getFields()}</Row>
      </Form>
    )