⑤ 查询条件动态生成

1 实现效果

2 单个查询框组件

根据接口返回的 conditions_configs 字段动态生成查询框
ConditionOne

2.1 模板

<template>
  <!-- 日期 -->
  <DatePicker2
    v-if="data.type.includes('date')"
    v-model="data.value"
    class="w-100"
    :style="data.style"
    :placeholder="data.placeholder"
    :type="data.type"
    :options="data.type.includes('range') ? optionsForRange : optionsForSingle"
    split-panels
    confirm
  >
  </DatePicker2>

  <!-- 单选 多选 -->
  <Select
    v-else-if="data.type.includes('select')"
    v-model="data.value"
    filterable
    clearable
    transfer
    :multiple="data.type === 'selects'"
    :placeholder="data.placeholder"
    :disabled="data.show === 2"
    :loading="data.loading"
    :remote="Boolean(data.remoteSearch)"
    :remote-method="data.remoteSearch"
    v-bind="innerCompoProps"
  >
    <template v-if="Array.isArray(data.options)">
      <Option v-for="(opt, inx) in data.options" :value="opt.value" :key="inx">{{ opt.label }}</Option>
    </template>
    <template v-else>
      <Option v-for="(value, key) in data.options" :value="key" :key="key">{{ value }}</Option>
    </template>
  </Select>

  <!-- 范围文本 -->
  <div v-else-if="data.type === 'texts'" class="row-y-center">
    <Input
      class="col w-150px"
      type="text"
      clearable
      :placeholder="data.placeholder[0]"
      :disabled="data.show === 2"
      v-model="data.value[0]"
    />
    <span class="col-auto t-center px-10">~</span>
    <Input
      class="col w-150px"
      type="text"
      clearable
      :placeholder="data.placeholder[1]"
      :disabled="data.show === 2"
      v-model="data.value[1]"
    />
  </div>

  <Cascader
    v-else-if="data.type === 'cascader'"
    v-model="data.value"
    class="w-100"
    :style="data.style"
    filterable
    clearable
    :placeholder="data.placeholder"
    :data="data.options"
  ></Cascader>

  <!-- 文本 -->
  <Input
    v-else
    type="text"
    clearable
    :placeholder="data.placeholder"
    :disabled="data.show === 2"
    v-model="data.value"
  />
</template>

2.2 数据

props: {
  data: Object,
  compoProps: Object
},
computed: {
  innerCompoProps() {
    return {
      ...this.data.props,
      ...this.compoProps
    };
  }
}

3 筛选条件

3.1 模板

<template>
  <div>
    <div v-for="(item, index) in data.list" :key="item.autoId">
      <Select @on-change="typeChange($event, index)">
        <Option
          v-for="(condConfig, condName) in data.typeOptions"
          :key="condName"
          :value="condName"
        >{{ condConfig.label }}</Option>
      </Select>
      <div>
        <ConditionOne v-if="item.name" :data="item" />
      </div>
      <span @click="conditionDelete(index)">
        <Icon type="md-close"></Icon>
      </span>
    </div>
    <div v-if="hasAddBtn">
      <Icon type="md-add"></Icon><span @click="conditionAdd">筛选条件</span>
    </div>
  </div>
</template>

3.2 数据

export default {
  props: {
    data: {
      type: Object,
      required: true,
      default() {
        return {
          typeOptions: {}, // 可选条件
          list: [] // 已添加条件，填充 typeOptions 里的一项子元素副本
        }
      }
    },
    typeChange: {
      type: Function,
      default(name, index) {
          const condConfig = this.data.typeOptions[name];
          const oldItem = this.data.list[index];
          // 相同的只能一个
          if (
              condConfig.unique &&
              this.data.list.some(
                (item, itemIndex) => itemIndex !== index && item.name === condConfig.name
              )
          ) {
              this.$set(this.data.list, index, this.createUnit());
              this.$Message.warning('已存在相同的查询条件！');
              return;
          }

          const newItem = JSON.parse(JSON.stringify(condConfig));
          newItem.autoId = oldItem.autoId;

          this.$set(this.data.list, index, newItem);
      }
    },
    // 删除条件
    conditionDelete: {
      type: Function,
      default(index) {
        this.data.list.splice(index, 1);
      }
    },
    // 是否有增加条件按钮
    hasAddBtn: {
      type: Boolean,
      default: true
    }
  }
}

3.3 事件处理程序

• 创建空的查询条件

createUnit() {
  return { autoId: autoId++, name: '', value: '' };
},

• 增加条件

conditionAdd() {
  this.data.list.push(this.createUnit());
}