修改搜索样式

src/views/order/rentVehicleInfo/index.vue

@@ -54,27 +54,25 @@
 					</el-col>
 					<el-col :span="5">
 						<el-form-item label="状态">
-							<el-select  v-model="listQuery.orderStatus" placeholder="请选择状态">
-								<!--"0--删除"+"1--创建订单" +"2--取消" +"3--待付款" +"4--待出行" +"5--出行中（进行中）" +"6--已完成"-->
-								<el-option :key="null" label="全部订单" :value="null"></el-option>
-								<el-option :key="1" label="订单状态" :value="1"></el-option>
-								<el-option :key="2" label="押金状态" :value="2"></el-option>
+							<el-select
+								class="filter-item"
+								v-model="listQuery.orderStatus"
+								placeholder="请选择"
+								@change="getOrderStatus"
+							>
+								<el-option v-for="val in orderStatus" :key="val.id" :label="val.name" :value="val.id"></el-option>
 							</el-select>
 						</el-form-item>
 					
 					</el-col>
 					<el-col :span="5">
-							<el-form-item label="订单押金">
-							<el-select class="" v-model="listQuery.status" placeholder="请选择状态">
-								<el-option  :key="null" label="全部订单" :value="null"></el-option>
-								<el-option  v-if="listQuery.orderStatus ==1" :key="3" label="待付款" :value="3"></el-option>
-								<el-option  v-if="listQuery.orderStatus ==1" :key="4" label="待出行" :value="4"></el-option>
-								<el-option  v-if="listQuery.orderStatus ==1" :key="5" label="出行中" :value="5"></el-option>
-								<el-option  v-if="listQuery.orderStatus ==1" :key="6" label="已完成" :value="6"></el-option>
-								<el-option  v-if="listQuery.orderStatus ==1" :key="2" label="已取消" :value="2"></el-option>
-								<el-option  v-if="listQuery.orderStatus ==1" :key="-1" label="定损中" :value="-1"></el-option>
-								<el-option  v-if="listQuery.orderStatus ==2" :key="7" label="违章待退" :value="7"></el-option>
-								<el-option  v-if="listQuery.orderStatus ==2" :key="8" label="违章已退" :value="8"></el-option>
+							<el-form-item  class="orderstatus">
+							<el-select
+								class="filter-item"
+								v-model="listQuery.status"
+								placeholder="请选择"
+							>
+								<el-option v-for="val in childrenStatus" :key="val.id" :label="val.name" :value="val.id"></el-option>
 							</el-select>
 						</el-form-item>
 					</el-col>
@@ -623,7 +621,57 @@ export default {
 		rentOrderDetailModal
 	},
 	data() {
-		return {
+		return {   
+			orderStatus: [{
+				"id": 1,
+				"name": "订单状态",
+				"children": [
+					{
+						"id": null,
+						"name": "全部订单"
+					},
+					{
+						"id": 3,
+						"name": "待付款"
+					},
+					{
+						"id": 4,
+						"name": "待出行"
+					},
+					{
+						"id": 5,
+						"name": "出行中"
+					},
+					{
+						"id": 6,
+						"name": "已完成"
+					},
+					{
+						"id": 2,
+						"name": "已取消"
+					},
+					{
+						"id": -1,
+						"name": "定损中"
+					},
+				]
+			},
+			{
+				"id": 2,
+				"name": "押金状态",
+				"children": [
+					{
+						"id": 7,
+						"name": "违章待退"
+					},
+					{
+						"id": 8,
+						"name": "违章已退"
+					},
+					],
+				}	
+			],
+			childrenStatus: [],
 			breakRecordData:{},//违约金记录数据
 			breakRecordPop:false,//违约金记录弹窗
 			activeRecord:null,
@@ -734,7 +782,7 @@ export default {
 				no: null,
 				status: null,
 				keywords: null,
-				orderStatus: null,
+				orderStatus: 1,
 				refundStatus: null,
 				startTime: undefined,
 				endTime: undefined,
@@ -901,6 +949,7 @@ export default {
 	},
 	created() {
 		let t = this
+		t.childrenStatus = t.orderStatus[0].children
 		let query = localStorage.getItem('rentVehicleInfo')
 		this.listQuery.no = this.$route.query.id || null
 		if (query != 'null' && query) {
@@ -1152,6 +1201,16 @@ export default {
 				})
 			}
 		},
+		
+		getOrderStatus(e) {
+			if (e == 1) {//订单状态
+				this.listQuery.status = null
+			} else if (e == 2) {
+				this.listQuery.status = 7
+			}
+			this.childrenStatus = this.orderStatus[e-1].children
+		},
+		
 		handleConfirm() {
 			let params = {
 				cancelReason: '后台取消',
@@ -1523,7 +1582,7 @@ export default {
 				no: null,
 				status: null,
 				keywords: null,
-				orderStatus: null,
+				orderStatus: 1,
 				refundStatus: null,
 				startTime: undefined,
 				endTime: undefined,
@@ -1833,4 +1892,7 @@ export default {
 .el-form-item__content {
 	display: block !important;
 }
+.orderstatus .el-form-item__content {
+	margin-left: unset !important;
+}
 </style>