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

<!--
 * @Author       : yuanrunwei
 * @Date         : 2021-11-01 18:03:02
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-07 19:16:35
 * @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"
                            :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-form-item>
            </el-col>
            <el-col class="flex-justify-align-end" :span="24">
                <el-button
                    v-for="({ label, props }, index) in handle"
                    :key="index"
                    @click="handleSubmit(props)"
                >
                    <i class="el-icon-document-add font-weight-bold" />{{
                        label
                    }}
                </el-button>
            </el-col>
        </el-row>
    </el-form>
</template>
<script>
export default {
    props: {
        form: {
            type: Array,
            default: () => [],
        },
        handle: {
            type: Array,
            default: () => [],
        },
    },
    data: () => ({
        object: {},
    }),
    methods: {
        handleSearch() {
            this.$emit("search", this.object);
        },
        handleSubmit(params) {
            this.$emit(params, this.object);
        },
    },
};
</script>