<template>
    <div>
        <a href="https://element.eleme.cn/#/zh-CN/component/form" target="_blank">Element表单官网</a>
        <p>查询触发表单校验，触发按钮自身loading，触发表格loading</p>
        <p>重置按钮触发reset()，并清空表单校验</p>
        <p>校验时间起止先后</p>
        <el-form ref="formRef_1" :model="formParam" :rules="formRules" label-width="80px" :inline="true">
            <el-form-item label="日期(起)" prop="rqStart">
                <el-date-picker clearable v-model="formParam.rqStart" type="date" placeholder="请选择" value-format="yyyyMMdd">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="日期(止)" prop="rqEnd">
                <el-date-picker clearable v-model="formParam.rqEnd" type="date" placeholder="请选择" value-format="yyyyMMdd">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button @click="onSubmit()" icon="el-icon-search" type="primary" :loading="btnLoading">查询</el-button>
                <el-button @click="Reset()" icon="el-icon-refresh-right">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
// import xxxx from './xxxx/xxxx.vue'
export default {
    name: '',
    components: {
        // xxxx
    },
    props: {
        // params: Object
    },
    data() {
        var checkformTime = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('日期不能为空'));
            } else if (value) {
                if (
                    new Date(this.formParam.rqStart).getTime() >
                    new Date(this.formParam.rqEnd).getTime()
                ) {
                    callback(new Error('截止日期不能早于开始日期'));
                } else {
                    callback()
                }

            } else {
                callback();
            }
        };
        return {
            formRules: {
                rqStart: [{
                    required: true,
                    validator: checkformTime,
                    trigger: ['blur']
                }],
                rqEnd: [{
                    validator: checkformTime,
                    trigger: 'blur'
                }]
            },
            formParam: {
                rqStart: '',
                rqEnd: ''
            },
            btnLoading: false
        }
    },
    mounted() {

    },
    created() {

    },
    watch: {

    },
    methods: {
        onSubmit() {
            this.$refs["formRef_1"].validate((valid) => {
                if (valid) {
                    this.btnLoading = true
                    // this.getTableData() // 从后台获取数据
                    setTimeout(() => {
                        this.btnLoading = false
                    }, 1000);
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        Reset() {
            this.formParam = {
                rqStart: '',
                rqEnd: ''
            }
            this.$refs["formRef_1"].resetFields();
        }
    }
}
</script>

<style scoped>
/* @import '~@/styles/tabsStyle.scss'; */

/* ::v-deep .el-dialog__header {
    background-color: #fff !important;
} */
</style>

<template>
    <div>
        <a href="https://element.eleme.cn/#/zh-CN/component/form" target="_blank">Element表单官网</a>
        <p>查询触发表单校验，触发按钮自身loading，触发表格loading</p>
        <p>重置按钮触发reset()，并清空表单校验</p>
        <p>校验时间起止先后</p>
        <el-form ref="formRef_1" :model="formParam" :rules="formRules" label-width="80px" :inline="true">
            <el-form-item label="日期(起)" prop="rqStart">
                <el-date-picker clearable v-model="formParam.rqStart" type="date" placeholder="请选择" value-format="yyyyMMdd">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="日期(止)" prop="rqEnd">
                <el-date-picker clearable v-model="formParam.rqEnd" type="date" placeholder="请选择" value-format="yyyyMMdd">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button @click="onSubmit()" icon="el-icon-search" type="primary" :loading="btnLoading">查询</el-button>
                <el-button @click="Reset()" icon="el-icon-refresh-right">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
// import xxxx from './xxxx/xxxx.vue'
export default {
    name: '',
    components: {
        // xxxx
    },
    props: {
        // params: Object
    },
    data() {
        var checkformTime = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('日期不能为空'));
            } else if (value) {
                if (
                    new Date(this.formParam.rqStart).getTime() >
                    new Date(this.formParam.rqEnd).getTime()
                ) {
                    callback(new Error('截止日期不能早于开始日期'));
                } else {
                    callback()
                }

            } else {
                callback();
            }
        };
        return {
            formRules: {
                rqStart: [{
                    required: true,
                    validator: checkformTime,
                    trigger: ['blur']
                }],
                rqEnd: [{
                    validator: checkformTime,
                    trigger: 'blur'
                }]
            },
            formParam: {
                rqStart: '',
                rqEnd: ''
            },
            btnLoading: false
        }
    },
    mounted() {

    },
    created() {

    },
    watch: {

    },
    methods: {
        onSubmit() {
            this.$refs["formRef_1"].validate((valid) => {
                if (valid) {
                    this.btnLoading = true
                    // this.getTableData() // 从后台获取数据
                    setTimeout(() => {
                        this.btnLoading = false
                    }, 1000);
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        Reset() {
            this.formParam = {
                rqStart: '',
                rqEnd: ''
            }
            this.$refs["formRef_1"].resetFields();
        }
    }
}
</script>

<style scoped>
/* @import '~@/styles/tabsStyle.scss'; */

/* ::v-deep .el-dialog__header {
    background-color: #fff !important;
} */
</style>