element-ui-for-gov/packages/query-box/src/queryBox.js

element-ui for gov

import Button from 'element-ui-for-gov/packages/button';
import ELForm from 'element-ui-for-gov/packages/form/src/form';
import ElFormItem from 'element-ui-for-gov/packages/form-item';
import ElInput from 'element-ui-for-gov/packages/input';
import ElInputNumber from 'element-ui-for-gov/packages/input-number';
import ElSelect from 'element-ui-for-gov/packages/select';
import Option from 'element-ui-for-gov/packages/option';
import TimeSelect from 'element-ui-for-gov/packages/time-select';
import TimePick from 'element-ui-for-gov/packages/time-picker';
import ElDatePicker from 'element-ui-for-gov/packages/date-picker';
import TreeSelect from 'element-ui-for-gov/packages/tree-select';

const BOX_HEIGHT = 42;
const QUERY_BOX_HEIGHT = BOX_HEIGHT + 'px';

/* istanbul ignore next */
export default {
  name: 'QueryBox',

  props: {
    searchItems: Array,
    labelWidth: {
      type: String
    },
    contentWidth: {
      type: String
    },
    showFuzzy: {
      type: Boolean,
      default: true
    },
    advFold: {
      type: Boolean,
      default: false
    },
    showAdvFoldBtn: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String,
      default: '请输入搜索内容'
    },
    fuzzyKey: {
      type: String,
      default: 'keyword'
    },
    renderButtons: Function,
    showMoreBtn: {
      type: Boolean,
      default: true
    }
  },

  components: {
    Button,
    ELForm,
    ElFormItem,
    ElInput,
    ElInputNumber,
    ElSelect,
    Option,
    ElDatePicker,
    TimeSelect,
    TimePick,
    TreeSelect
  },

  data() {
    return {
      show: this.advFold,
      form: {
        [this.fuzzyKey]: ''
      },
      inShowMoreBtn: ''
    };
  },

  mounted() {
    if (this.showFuzzy) return;
    if (this.show) {
      this.$refs.queryBoxBody.style.height = '';
    } else {
      this.$refs.queryBoxBody.style.height = QUERY_BOX_HEIGHT;
    }
  },

  computed: {
  },

  methods: {
    search() {
      this.$emit('search', this.form);
    },
    reset() {
      for (let key in this.form) {
        if (Array.isArray(this.form[key])) {
          this.form[key] = [];
        } else {
          this.form[key] = '';
        }
      }
      this.$emit('reset', this.form);
    },
    more() {
      if (this.show) {
        this.show = false;
        this.$refs.queryBoxBody.style.height = QUERY_BOX_HEIGHT;
      } else {
        this.show = true;
        this.$refs.queryBoxBody.style.height = '';
      }
    },
    onValueHandle(item, val) {
      // console.log(item.key, val);
      if (item.type === 'tree-select' && val) {
        this.form[item.key] = val;
      } else {
        this.form[item.key] = val;
      }
    },
    setKey(item) {
      if (this.form[item.key] === undefined) {
        this.$set(this.form, item.key, item.defaultValue || '');
      }
    },
    renderContent() {
      if (this.searchItems) {
        return this.searchItems.map(item => {
          const contentWidth = item.contentWidth || this.contentWidth;
          return <ElFormItem label={item.label} labelWidth={item.labelWidth}>
            <div style={{width: contentWidth}} class={contentWidth ? 'queryBox-item-content' : ''}>{this.renderItem(item)}</div>
          </ElFormItem>;
        });
      }
    },
    renderItem(item) {
      this.setKey(item);
      const placeholder = item.placeholder;
      if (item.type === 'text') {
        return <ElInput {...{ props: item.props }} value={this.form[item.key]} onInput={(v) => this.onValueHandle(item, v)} autocomplete="off" placeholder={placeholder}/>;
      }
      if (item.type === 'number') {
        return <ElInputNumber {...{ props: item.props }} value={this.form[item.key]} controls-position="right" onChange={(v) => this.onValueHandle(item, v)} autocomplete="off"/>;
      }
      if (item.type === 'select') {
        return <ElSelect {...{ props: item.props }} value={this.form[item.key]} placeholder={placeholder} onInput={(v) => this.onValueHandle(item, v)}>
          {
            item.options && item.options.map(optionItem => {
              return <Option
                key={optionItem.value}
                label={optionItem.label}
                value={optionItem.value}>
              </Option>;
            })
          }
        </ElSelect>;
      }
      if (item.type === 'time-picker') {
        return <TimePick
          value={this.form[item.key]}
          type={item.dateType}
          onInput={(v) => this.onValueHandle(item, v)}
          {...{ props: item.props }}>
        </TimePick>;
      }
      if (item.type === 'time-select') {
        return <TimeSelect
          value={this.form[item.key]}
          onInput={(v) => this.onValueHandle(item, v)}
          {...{props: item.props}}>
        </TimeSelect>;
      }
      if (item.type === 'date-picker') {
        return <ElDatePicker
          value={this.form[item.key]}
          type={item.dateType}
          onInput={(v) => this.onValueHandle(item, v)}
          {...{props: item.props}}>
        </ElDatePicker>;
      }
      if (item.type === 'tree-select') {
        return <TreeSelect
          value={this.form[item.key]}
          default-expand-all
          {...{props: item.props}}
          {...{ on: {
            'input': (v) => this.onValueHandle(item, v)
            // 'checked-change': (v) => this.onValueHandle(item, v)
          } }}
        />;
      }
      if (typeof item.type === 'function') {
        // 自定义组件
        return item.type(item.key, this.form, (val) => {
          this.form[item.key] = val;
        });
      }
    },
    needMore() {
      if (typeof this.inShowMoreBtn !== 'boolean') {
        console.log(this);
        this.$set(this.$data, 'inShowMoreBtn', true);
      }
      const formEl = this.$refs.ruleForm.$el;
      if (formEl) {
        console.log('formEl.offsetHeight', formEl.offsetHeight, BOX_HEIGHT * 2);
        if (formEl.offsetHeight < BOX_HEIGHT * 2) {
          this.inShowMoreBtn = false;
        } else {
          this.inShowMoreBtn = true;
        }
      }
    }
  },

  render(h) {
    const searchBtn = <Button type="primary" onClick={this.search}>搜索</Button>;
    const resetBtn = <Button onClick={this.reset}>重置</Button>;
    const _moreBtn = <Button type="text" onClick={this.more}>更多<i class={`${this.show ? 'el-icon-arrow-up' : 'el-icon-arrow-down'}`}></i></Button>;
    let moreBtn;
    if (typeof this.inShowMoreBtn === 'boolean') {
      if (this.inShowMoreBtn) moreBtn = _moreBtn;
    } else {
      if (this.showMoreBtn) moreBtn = _moreBtn;
    }

    return (
      <div class="el-query-box">
        {
          this.showFuzzy &&
          <div class="el-query-box--search-keyword">
            <ElInput
              placeholder={this.placeholder}
              prefix-icon="sg-icon sg-icon-fangdajing"
              value={this.form[this.fuzzyKey]}
              onChange={this.search}
              onInput={(val) => {
                this.form[this.fuzzyKey] = val;
              }}>
            </ElInput>
            <Button type="primary" onClick={this.search}>查询</Button>
            {
              this.showAdvFoldBtn &&
              <Button onClick={() => {
                this.show = !this.show;
              }}>
                高级搜索
                <i class={`el-icon--right ${this.show ? 'el-icon-arrow-up' : 'el-icon-arrow-down'}`}/>
              </Button>
            }
          </div>
        }
        <div style={{ display: this.show || !this.showFuzzy ? 'block' : 'none' }} class="el-query-box--body" ref="queryBoxBody">

          <ELForm show={this.show} model={this.ruleForm} inline status-icon ref="ruleForm" label-width={this.labelWidth}>
            {
              !this.showFuzzy && <div class="el-query-box--button-wrap-right ">
                {
                  this.renderButtons
                    ? [...this.renderButtons(this.reset, this.search), moreBtn]
                    : [
                      searchBtn,
                      resetBtn,
                      moreBtn
                    ]
                }
              </div>
            }
            {this.renderContent()}
            {
              this.showFuzzy && <div class="el-query-box--button-wrap">
                {
                  this.renderButtons ? this.renderButtons(this.reset, this.search)
                    : [
                      searchBtn,
                      resetBtn
                    ]
                }
              </div>
            }
          </ELForm>
        </div>
      </div>
    );
  }
};