share-fun-web/src/containers/ToolbarContainer.vue

<template>
  <el-form
    :class="fields.length > 0 ? 'm-10 p-20 br-10 bg-w' : ''"
    label-position="right"
    label-width="0"
    :model="form"
  >
    <div class="f-sb-fs">
      <el-row class="f-1" :gutter="20">
        <el-col
          v-for="field in fields"
          :key="field.name"
          :span="field.col || 8"
          class="h-50"
        >
          <el-form-item
            :label="field.label"
            :label-width="
              field.labelWidth ? field.labelWidth : field.label && '80px'
            "
          >
            <!-- 输入文本 -->
            <el-input
              v-if="field.type === 'text'"
              v-model="form[field.name]"
              :clearable="true"
              :placeholder="'请输入' + field.label"
            />

            <!-- 单选 -->
            <el-select
              v-if="field.type === 'select'"
              v-model="form[field.name]"
              :clearable="true"
              :placeholder="'请选择' + field.label"
            >
              <el-option
                v-for="item in field.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <!-- 多选 -->
            <el-select
              v-if="field.type === 'multipleSelect'"
              v-model="form[field.name]"
              multiple
              collapse-tags
              :clearable="true"
              :placeholder="'请选择' + field.label"
            >
              <el-option
                v-for="item in field.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <!-- 时间选择器 -->
            <el-date-picker
              v-if="field.type === 'dateArray'"
              v-model="form[field.name]"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>

            <!-- 追加 -->
            <IssueTypeSelect
              v-if="field.type === 'issueTypeSelect'"
              v-model="form[field.name]"
              :props="{ checkStrictly: true }"
            ></IssueTypeSelect>
            <SceneSelect
              v-if="field.type === 'SceneSelect'"
              v-model="form[field.name]"
            ></SceneSelect>
            <DataSelect
              v-if="field.type === 'DataSelect'"
              v-model="form[field.name]"
              :params="field.params"
              :props="field.props"
              :valueKay="field.valueKay"
              :clearable="true"
            ></DataSelect>
            <ActivitySelect
              v-if="field.type === 'ActivitySelect'"
              v-model="form[field.name]"
              :params="field.params"
              :clearable="true"
            ></ActivitySelect>
            <AddressSelect
              v-if="field.type === 'AddressSelect'"
              v-model="form[field.name]"
              :params="field.params"
              :clearable="true"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <div class="f-fe-c pl-40">
        <el-button v-if="showSearch" type="primary" @click="handleSubmit"
          >查询</el-button
        >
        <el-button v-if="showReset" @click="handleReset">重置</el-button>
      </div>
    </div>
  </el-form>
</template>

<script>
function isPromise(obj) {
  return (
    !!obj &&
    (typeof obj === 'object' || typeof obj === 'function') &&
    typeof obj.then === 'function'
  );
}
export default {
  name: 'Toolbar',

  props: {
    fields: {
      type: Array,
      default: () => []
    },
    showSearch: {
      type: Boolean,
      default: true
    },
    showReset: {
      type: Boolean,
      default: true
    },
    firstLoad: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      form: {}
    };
  },

  mounted() {
    if (this.firstLoad) {
      this.handleReset();
    } else {
      this.initForm();
    }
  },

  methods: {
    handleSubmit() {
      const filter = this.getFormData();
      this.$emit('on-filter', filter);
    },

    async handleReset() {
      await this.initForm();
      const filter = this.getFormData();
      this.$emit('on-reset', filter);
    },

    async initForm() {
      const form = this.fields.reduce(async (init, current) => {
        init = await init;
        init[current.name] =
          current.defaultValue !== undefined ? current.defaultValue : null;
        if (current.options && isPromise(current.options)) {
          current.options = await current.options;
        }

        return init;
      }, Promise.resolve({}));
      this.form = await form;
    },

    getFormData() {
      const filter =
        this.fields.length > 0
          ? this.fields.reduce((init, { name, apiName, type, format }) => {
              const values = this.form[name];
              const key = apiName || name;
              let temp = null;

              if (type === 'dateArray') {
                temp = [];
                apiName.forEach((x, i) => {
                  temp.push(values && values[i]);
                });
              } else {
                temp = values || values === 0 ? values : null;
              }
              const val = format ? format(values, temp) : temp;
              if (typeof key === 'string') {
                init[key] = val;
              } else {
                key.forEach((x, i) => {
                  init[x] = val[i];
                });
              }
              return init;
            }, {})
          : [];
      return filter;
    }
  }
};
</script>

<style scoped lang="scss">
.f-1 {
  flex: 1;
}
.h-50 {
  height: 50px;
}
.el-select {
  width: 100%;
}
.el-range-editor.el-input__inner {
  width: 100%;
}
</style>