spfm-market-front/src/pages/main/collect/components/form.vue

<!--
 * @Author       : yuanrunwei
 * @Date         : 2021-11-01 18:03:02
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 19:27:43
 * @FilePath     : \spfm-market-front\src\pages\main\performance\components\form.vue
-->
<template>
  <el-form :inline="true" :model="object">
    <el-row :gutter="24">
      <el-col
        v-for="({ props, label, type, dictionary }, index) in form"
        :key="index"
        :span="6"
      >
        <el-form-item :label="label">
          <template v-if="type === 'select'">
            <el-select
              v-model="object[props]"
              :placeholder="label"
              filterable
              clearable
            >
              <el-option
                :label="label"
                :value="value"
                v-for="({ label, value }, index) in dictionary"
                :key="index"
              ></el-option>
            </el-select>
          </template>
          <template v-else-if="['datetime', 'date', 'month'].includes(type)">
            <el-date-picker
              v-model="object[props]"
              :type="type"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :placeholder="label"
            >
            </el-date-picker>
          </template>
          <template v-else>
            <el-input
              v-model="object[props]"
              :placeholder="label"
              clearable
            ></el-input>
          </template>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleSearch(2)" v-if="reset == true">重置</el-button>
        </el-form-item>
      </el-col>
      <el-col class="flex-justify-align-end" :span="24">
        <el-button
          v-for="({ label, props, unlogo }, index) in handle"
          :key="index"
          @click="handleSubmit(props)"
        >
          <i v-if="!unlogo" class="el-icon-document-add font-weight-bold" />{{
            label
          }}
        </el-button>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
export default {
  props: {
    reset:{
      type:Boolean,
      default: () => [],
    },
    form: {
      type: Array,
      default: () => [],
    },
    handle: {
      type: Array,
      default: () => [],
    },
  },
  data: () => ({
    object: {},
  }),
  methods: {
    handleSearch(e) {
      if (e === 2) {
        this.object = [];
      } else {
        this.$emit("search", this.object);
      }
    },
    handleSubmit(params) {
      this.$emit(params, this.object);
    },
  },
};
</script>