第十八课 编写列表中的头部表单查询

一、编写头部表单布局

<el-form :inline="true" :model="searchWhewe" class="demo-form-inline" style="margin-top:20px">
            <el-form-item label="书名" size="mini">
                <el-input v-model="searchWhewe.bookName" placeholder="请输入书名"></el-input>
            </el-form-item>
            <el-form-item label="出版社" size="mini">
                <el-input v-model="searchWhewe.press" placeholder="请输入出版社"></el-input>
            </el-form-item>
            <el-form-item label="图书类型" size="mini">
                <el-select v-model="searchWhewe.bookType">
                    <el-option v-for="option in bookTypeOptions" :key="option.type" :label="option.name" :value="option.type"></el-option>
                </el-select>
            </el-form-item>
             <el-form-item label="出版日期" size="mini">
                <el-date-picker 
                v-model="searchWhewe.publicationdate" 
                type="daterange" 
                range-separator="至" 
                align="right" 
                unlink-panels
                :picker-options="pickerOptions"
                start-placeholder="开始日期" 
                end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
             <el-form-item size="mini">
               <el-button type="primary" @click="fetchData">查询</el-button>
            </el-form-item>
        </el-form>

二、编写data部分

 data(){
        return{
            searchWhewe:{
                bookName:"",
                press:"",
                bookType:"",
                publicationdate:'',
            },
            bookTypeOptions,
            pickerOptions:{
               shortcuts:[{
                   text:'最近一周',
                   onClick(picker){
                       const end = new Date();
                       const start = new Date();
                       start.setTime(start.getTime()-3600*1000*24*7);
                       picker.$emit('pick',[start,end])
                   }
               },{
                   text:'最近一个月',
                   onClick(picker){
                       const end = new Date();
                       const start = new Date();
                       start.setTime(start.getTime()-3600*1000*24*30);
                       picker.$emit('pick',[start,end])
                   }
               },{
                   text:'最近三个月',
                   onClick(picker){
                       const end = new Date();
                       const start = new Date();
                       start.setTime(start.getTime()-3600*1000*24*90);
                       picker.$emit('pick',[start,end])
                   }
               }]
            }
        }
    }

三、把查询条件传入接口中

 fetchData(){
    let data = {
        pageSize:this.pageSize,
        currentPage:this.currentPage,
        searchWhewe:this.searchWhewe
    }
    bookinfoApi.getBookInfoList(data).then(response=>{
        const resp = response.data.data;
        this.bookinfolist = resp;
    })
}

四、修改日期传参的乱码问题

value-format="yyyy-MM-dd HH:mm:ss"

 <el-form-item label="出版日期" size="mini">
                <el-date-picker 
                value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
            </el-form-item>

五、加入重置按钮

1. 加入重置按钮 2）在el-form-item添加prop，要不重置按钮会失效 3）添加重置函数reserForm

 <el-form :inline="true" :model="searchWhewe" class="demo-form-inline" style="margin-top:20px" ref="ruleForm">
            <el-form-item label="书名" size="mini" prop="bookName">
                <el-input v-model="searchWhewe.bookName" placeholder="请输入书名"></el-input>
            </el-form-item>
            <el-form-item label="出版社" size="mini" prop="press">
                <el-input v-model="searchWhewe.press" placeholder="请输入出版社"></el-input>
            </el-form-item>
            <el-form-item label="图书类型" size="mini" prop="bookType">
                <el-select v-model="searchWhewe.bookType">
                    <el-option v-for="option in bookTypeOptions" :key="option.type" :label="option.name" :value="option.type"></el-option>
                </el-select>
            </el-form-item>
             <el-form-item label="出版日期" size="mini" prop="publicationdate">
                <el-date-picker 
                v-model="searchWhewe.publicationdate" 
                type="daterange" 
                range-separator="至" 
                align="right" 
                unlink-panels
                :picker-options="pickerOptions"
                start-placeholder="开始日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
             <el-form-item size="mini">
               <el-button type="primary" @click="fetchData">查询</el-button>
                <el-button @click="reserForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
        
 reserForm(formName){
            this.$refs[formName].resetFields();
},