查询和展示

> <template>
	<div class="showTable">
		<el-form ref="searchForm" :model="searchForm" label-width="80px">
			<el-form-item label="品牌" prop="brand">
				<el-radio-group v-model="searchForm.brand">
					<el-radio-button v-for="(brand,index) in brands" :key="index" :label="brand"></el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="车系" prop="carSerie">
				<el-radio-group v-model="searchForm.carSerie">
					<el-radio-button v-for="(carSerie,index) in carSeries" :key="index" :label="carSerie"></el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="价格" prop="price">
				<el-radio-group v-model="searchForm.price">
					<el-radio-button label="3万以下"></el-radio-button>
					<el-radio-button label="3~5万"></el-radio-button>
					<el-radio-button label="5~8万"></el-radio-button>
					<el-radio-button label="8~10万"></el-radio-button>
					<el-radio-button label="15~20万"></el-radio-button>
					<el-radio-button label="20~30万"></el-radio-button>
					<el-radio-button label="30~50万"></el-radio-button>
					<el-radio-button label="50万以上"></el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="车龄" prop="carAge">
				<el-radio-group v-model="searchForm.carAge">
					<el-radio-button label="1年内"></el-radio-button>
					<el-radio-button label="1~3年"></el-radio-button>
					<el-radio-button label="3~5年"></el-radio-button>
					<el-radio-button label="5~8年"></el-radio-button>
					<el-radio-button label="8~10年"></el-radio-button>
					<el-radio-button label="10年以上"></el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-row>
				<el-col :span="8">
					<el-form-item label="级别" prop="level">
						<el-select v-model="searchForm.level" placeholder="请选择">
							<el-option label="小型车" value="小型车"></el-option>
							<el-option label="中型车" value="中型车"></el-option>
							<el-option label="紧凑型" value="紧凑型"></el-option>
							<el-option label="中大型" value="中大型"></el-option>
							<el-option label="大型车" value="大型车"></el-option>
							<el-option label="mpv" value="mpv"></el-option>
							<el-option label="suv" value="suv"></el-option>
							<el-option label="跑车" value="跑车"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item>
						<el-form-item label="变速箱" prop="transmission">
							<el-select v-model="searchForm.transmission" placeholder="请选择">
								<el-option label="手动" value="手动"></el-option>
								<el-option label="自动" value="自动"></el-option>
							</el-select>
						</el-form-item>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="排量" prop="displacement">
						<el-select v-model="searchForm.displacement" placeholder="级别" style="width:40%">
							<el-option label="1.0L及以下" value="1.0L及以下"></el-option>
							<el-option label="1.1L~1.6L" value="1.1L~1.6L"></el-option>
							<el-option label="1.7L~2.0L" value="1.7L~2.0L"></el-option>
							<el-option label="2.1L~2.5L" value="2.1L~2.5L"></el-option>
							<el-option label="2.6L~3.0L" value="2.6L~3.0L"></el-option>
							<el-option label="3.0L以上" value="3.0L以上"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item>
						<el-form-item label="归属地" prop="location">
							<el-select v-model="searchForm.location" placeholder="请选择">
								<el-option
									v-for="location in locations"
									:key="location"
									:label="location"
									:value="location"
								></el-option>
							</el-select>
						</el-form-item>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item>
						<el-button @click="resetForm('searchForm')">重置</el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>

		<hr />

		<!-- 使用card的方式展示数据 -->
		<el-row :gutter="25" class="el-row">
			<el-col :span="5" v-for="(data,index) in dataList" :key="index" style="margin-bottom:20px">
				<el-card :body-style="bodyStyle" shadow="hover">
					<img :src="data.picSavepath" class="image" width="125px" />
					<div style="padding: 14px;">
						<pre>
{{data.generalization}}
{{data.mileage}}/{{data.registrationTime}}/{{data.location}}
{{data.price}}万元
						</pre>
					</div>
				</el-card>
			</el-col>
		</el-row>

		<!-- 数据分页 -->
		<div class="block">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[8, 16]"
				:page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			></el-pagination>
		</div>
	</div>
</template>

<script>
import dao from '@/api/dao'
export default {
	data() {
		return {
			/* 当前页、每页记录数和总记录数 */
			currentPage: 1,
			pageSize: 8,
			total: 0,
			/* 条件查询表单 */
			searchForm: {
				brand: '',
				carSerie: '',
				price: '',
				carAge: '',
				level: '',
				displacement: '',
				transmission: '',
				location: '',
			},
			brands: [],
			carSeries: [],
			locations: [],
			/* 展示数据使用的数组 */
			dataList: [],
			/* card组件的样式 */
			bodyStyle: {
				"padding": "0px",
				"width": "100%",
				"height": "230px",
			},
			data: '我是来捣乱的',
			key: '574a4059535c5b4b5453501c0d08000f190808',
		}
	},
	methods: {
		/* 当每页记录数发生改变时调用的方法 */
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.pageSize = val
			this.queryAllCar()
		},
		/* 当当前页发生改变时调用的函数 */
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.currentPage = val
			this.queryAllCar()
		},
		/* 重置查询表单 */
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		queryAllCar() {
			console.log()
			dao.queryCars(this.key, this.searchForm, this.currentPage, this.pageSize)
				.then(resp => {
					console.log(this.searchForm)
					const result = resp.data
					this.dataList = result.data
					this.total = result.total
				})
		},
		queryCarSeries() {
			dao.queryCarSeries(this.key, this.searchForm.brand)
				.then(resp => {
					const result = resp.data
					this.carSeries = result.data
				})
		}
	},
	watch: {
		/* 使用监听器监听条件查询表单的数据
		   当数组内容发生改变时立即进行异步查询 */
		searchForm: {
			deep: true,
			handler(newValue, oldValue) {
				this.queryAllCar()
			}
		},
		'searchForm.brand':{
			deep:true,
			handler(newValue,oldValue){
				this.queryCarSeries()
				this.queryAllCar()
			}
		}

	},
	created() {
		/* 发送异步请求，填充dataList */
		dao.queryBrands(this.key)
			.then(resp => {
				const result = resp.data
				this.brands = result.data
			})
		this.queryCarSeries(this.searchForm.carSerie)
		dao.queryLocations(this.key)
			.then(resp => {
				const result = resp.data
				this.locations = result.data
			})
		this.queryAllCar()
	}
}
</script>

<style scoped>
.bottom {
	margin-top: 13px;
	line-height: 12px;
}

.button {
	padding: 0;
	float: right;
}

.image {
	display: block;
	margin-left: 50%;
	transform: translateX(-50%);
	text-align: center;
}

.clearfix:before,
.clearfix:after {
	display: table;
	content: "";
}

.clearfix:after {
	clear: both;
}
</style>