修改检索

src/api/model/orders.js

@@ -96,6 +96,13 @@ export default {
 				post: async function (params) {
 					return await http.post(this.url,params);
 				}
+			},
+			search:{
+				url: `${config.API_URL}/repair.order.search.list`,
+				name: "维修工单搜索",
+				post: async function (params) {
+					return await http.post(this.url,params);
+				}
 			}
 		},
 		maintenance:{
@@ -197,6 +204,13 @@ export default {
 					return await http.post(this.url,params);
 				}
 			},
+			search:{
+				url: `${config.API_URL}/maintenance.order.search.list`,
+				name: "维保工单搜索",
+				post: async function (params) {
+					return await http.post(this.url,params);
+				}
+			}
 		},
 		plan:{
 			list:{

src/assets/icons/index.js

@@ -44,6 +44,7 @@ export { default as ClearCache } from './ClearCache.vue'
 export { default as MsgSetup } from './MsgSetup.vue'
 export { default as MsgReview } from './MsgReview.vue'
 export { default as SmallBell } from './SmallBell.vue'
+export { default as Right } from './Right.vue'
 
 export { default as File7z } from './file/7z.vue'
 export { default as FileBmp } from './file/Bmp.vue'

src/directives/focus.js

@@ -0,0 +1,11 @@
+export default {
+	mounted(el) {
+		const inputElement = el.querySelector('.el-input__inner');
+		inputElement.addEventListener('focus', () => {
+			el.classList.add('focused');
+		});
+		inputElement.addEventListener('blur', () => {
+			el.classList.remove('focused');
+		});
+	},
+}

src/scui.js

@@ -41,6 +41,7 @@ import role from './directives/role'
 import time from './directives/time'
 import copy from './directives/copy'
 import number from './directives/number'
+import focus from './directives/focus'
 import errorHandler from './utils/errorHandler'
 
 import * as elIcons from '@element-plus/icons-vue'
@@ -96,6 +97,7 @@ export default {
 		app.directive('time', time)
 		app.directive('copy', copy)
 		app.directive('number', number)
+		app.directive('focus', focus)
 
 		//统一注册el-icon图标
 		for(let icon in elIcons){

src/style/search.scss

@@ -1,25 +1,63 @@
 .searchInput{
 	border-radius: 8px;
-	.el-input-group__append, .el-input-group__prepend{
+	width: 560px;
+	.el-input-group__append{
+		background: var(--el-color-primary);
+		padding: 0;
+		box-shadow: none;
+		border-radius: 0 7px 7px 0;
+		border-top: 2px solid var(--el-color-primary);
+		border-bottom: 2px solid var(--el-color-primary);
+		border-right: 2px solid var(--el-color-primary);
+	}
+	.el-input-group__prepend{
 		background: var(--el-color-white);
 		padding: 0;
-		border: none;
 		box-shadow: none;
-		border-top-right-radius: 8px;
+		border-radius: 8px 0 0 8px;
-		border-top-right-radius: 8px;
+		border: 0;
+		border-top: 2px solid #c4c7ce;
+		border-bottom: 2px solid #c4c7ce;
+		border-left: 2px solid #c4c7ce;
 	}
+
 	.el-input__wrapper{
-		border: none;
 		box-shadow: none;
+		border-top: 2px solid #c4c7ce;
+		border-bottom: 2px solid #c4c7ce;
 	}
-	.searchBtn{
+	.searchDrop{
-		background: var(--el-color-primary);
+		height: 100%;
-		color: var(--el-color-white);
+		padding: 0 0 0 10px;
-		width: 110px;
+		display: flex;
+		align-items: center;
+		.dropTitle{
+			height: 80%;
 			display: flex;
 			align-items: center;
 			justify-content: center;
-		border-radius: 8px;
+			border-right: 1px solid #E9E9E9;
-		border: 0;
+			padding-right: 15px;
+			cursor: pointer;
 		}
 	}
+	.searchBtn{
+		color: var(--el-color-white);
+		width: 86px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 0 7px 7px 0;
+		cursor: pointer;
+		.name{
+			margin-right: 5px;
+			font-size: 13px;
+		}
+	}
+}
+.searchInput .is-focus{
+	border-color: var(--el-color-primary);
+}
+.searchInput.focused .el-input-group__prepend{
+	border-color: var(--el-color-primary);
+}

src/views/home/search/index.vue

@@ -2,12 +2,10 @@
 	<el-container class="searchBox">
 		<el-header class="searchHeader">
 			<div class="searchHeaderBack">
-				<el-row style="width: 100%" :gutter="24" justify="center">
+				<el-input class="searchInput" v-focus type="text" size="large" v-model="keyword">
-					<el-col :span="10" :lg="8" :sm="10">
-						<el-input class="searchInput" type="text" size="large">
 					<template #prepend>
-								<el-dropdown>
+						<el-dropdown class="searchDrop" trigger="click">
-									<span class="el-dropdown-link">
+							<span class="dropTitle el-dropdown-link">
 							  维保工单 <el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon>
 							</span>
 							<template #dropdown>
@@ -19,18 +17,19 @@
 						</el-dropdown>
 					</template>
 					<template #append>
-								<div class="searchBtn">
+						<div class="searchBtn" @click="searchClick">
 							<span class="name">搜索</span>
 							<el-icon class="icon"><el-icon-Search/></el-icon>
 						</div>
 					</template>
 				</el-input>
-					</el-col>
-				</el-row>
 			</div>
 		</el-header>
 		<el-main>
-			7889
+			<sc-table :data="rows" :size="size">
+				<el-table-column type="index" label="序号"></el-table-column>
+				<el-table-column prop="repair_order_no" label="单号"></el-table-column>
+			</sc-table>
 		</el-main>
 	</el-container>
 </template>
@@ -40,14 +39,41 @@ export default {
 	name: "",
 	data(){
 		return{
-
+			size:'small',
+			keyword:"",
+			params:{
+				repair_order_no:{
+					operator:"like",
+					value:""
+				},
+				component_serial_no:{
+					operator:"like",
+					value:""
+				},
+			},
+			column:[
+				{width:"",prop:"",label:""}
+			],
+			rows:[]
 		}
 	},
 	mounted() {
 
 	},
 	methods:{
-
+		async searchClick() {
+			let params = this.setObj();
+			const res = await this.$API.orders.order.maintenance.search.post(params);
+			if(res.code == 200){
+				this.rows = res.data;
+			}
+		},
+		setObj(){
+			for(let i in this.params){
+				this.params[i].value = this.keyword==""?"":'%'+this.keyword+'%'
+			}
+			return this.params
+		},
 	}
 }
 </script>
@@ -56,7 +82,7 @@ export default {
 	.searchHeader{
 		padding: 0;
 		margin: 0;
-		height: 68px;
+		height: 70px;
 		background: url(https://dm-auto.oss-cn-shanghai.aliyuncs.com/xw_cloud/image/search_back.png) no-repeat;
 		background-size: cover;
 		position: relative;
@@ -67,7 +93,5 @@ export default {
 		background: rgba(231,243,255,0.4);
 		position: absolute;left: 0;top: 0;z-index: 10;
 		display: flex;align-items: center;justify-content: center;
-
-
 	}
 </style>