设备管理-检查项维护(搜索优化)

src/views/device/item/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="app-container">
 		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
-			<el-form-item label="检查项编码" prop="itemCode">
+			<el-form-item label-width="90px" label="检查项编码" prop="itemCode">
 				<el-input
 					v-model="queryParams.itemCode"
 					placeholder="请输入检查项编码"
@@ -9,7 +9,7 @@
 					@keyup.enter.native="handleQuery"
 				/>
 			</el-form-item>
-			<el-form-item label="检查项" prop="itemName">
+			<el-form-item label-width="60px" label="检查项" prop="itemName">
 				<el-input
 					v-model="queryParams.itemName"
 					placeholder="请输入检查项名称"
@@ -17,7 +17,7 @@
 					@keyup.enter.native="handleQuery"
 				/>
 			</el-form-item>
-			<el-form-item label="检查项方法/工具" prop="itemMethod">
+			<el-form-item label-width="120px" label="检查项方法/工具" prop="itemMethod">
 				<el-input
 					v-model="queryParams.itemMethod"
 					placeholder="请输入检查项方法/工具"
@@ -35,6 +35,7 @@
       </el-form-item>
 			<el-form-item v-if="false" label="维护类型名称" prop="itemTypeName">
 				<el-input
+          class="my-select-input"
 					v-model="queryParams.itemTypeName"
 					placeholder="请输入维护类型名称"
 					clearable
@@ -89,6 +90,15 @@
 					@keyup.enter.native="handleQuery"
 				/>
 			</el-form-item>
+      <el-form-item label="创建人" prop="createdBy">
+        <el-input
+          class="my-select-input"
+          v-model="queryParams.createdBy"
+          placeholder="请输入创建人"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
 			<el-form-item label="创建时间" prop="createdTime">
         <el-date-picker
           v-model="queryParams.createdTimeArray"
@@ -98,33 +108,32 @@
           range-separator="至"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
           :picker-options="pickerOptions">
         </el-date-picker>
 			</el-form-item>
-			<el-form-item label="创建人" prop="createdBy">
+      <el-form-item label="更新人" prop="updatedBy">
         <el-input
-					v-model="queryParams.createdBy"
+          class="my-select-input"
-					placeholder="请输入创建人"
+          v-model="queryParams.updatedBy"
+          placeholder="请输入更新人"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
 			<el-form-item label="更新时间" prop="updatedTime">
-				<el-date-picker clearable
+        <el-date-picker
-					v-model="queryParams.updatedTime"
+          v-model="queryParams.updateTimeArray"
-					type="date"
+          type="daterange"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
           value-format="yyyy-MM-dd"
-					placeholder="请选择更新时间">
+          :picker-options="pickerOptions">
         </el-date-picker>
 			</el-form-item>
-			<el-form-item label="更新人" prop="updatedBy">
-				<el-input
-					v-model="queryParams.updatedBy"
-					placeholder="请输入更新人"
-					clearable
-					@keyup.enter.native="handleQuery"
-				/>
-			</el-form-item>
 			<el-form-item>
 				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
 				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -187,7 +196,7 @@
 			<el-table-column label="维护类型编码" align="center" prop="itemType" />
 			<el-table-column label="维护类型名称" align="center" prop="itemTypeName" />
 			<el-table-column label="检查项备注" align="center" prop="itemRemark" />
-			<el-table-column label="工厂" align="center" prop="factory" />
+			<el-table-column v-if="false" label="工厂" align="center" prop="factory" />
 			<el-table-column v-if="false" label="备用字段1" align="center" prop="attr1" />
 			<el-table-column v-if="false" label="备用字段2" align="center" prop="attr2" />
 			<el-table-column v-if="false" label="备用字段3" align="center" prop="attr3" />
@@ -204,7 +213,7 @@
 				</template>
 			</el-table-column>
 			<el-table-column label="更新人" align="center" prop="updatedBy" />
-			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+			<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
 				<template slot-scope="scope">
 					<el-button
 						size="mini"
@@ -369,6 +378,7 @@ export default {
 				updatedTime: null,
 				updatedBy: null,
         createdTimeArray: [],
+        updateTimeArray: [],
 			},
 			// 表单参数
 			form: {},
@@ -446,7 +456,7 @@ export default {
 				createdTime: null,
 				createdBy: null,
 				updatedTime: null,
-				updatedBy: null
+				updatedBy: null,
 			};
 			this.resetForm("form");
 		},
@@ -458,6 +468,9 @@ export default {
 		/** 重置按钮操作 */
 		resetQuery() {
 			this.resetForm("queryForm");
+      // 重置日期范围
+      this.queryParams.createdTimeArray = [];
+      this.queryParams.updateTimeArray = [];
 			this.handleQuery();
 		},
 		// 多选框选中数据
@@ -521,3 +534,8 @@ export default {
 	}
 };
 </script>
+<style>
+.my-select-input{
+  width: 130px;
+}
+</style>