故障类型维护(优化查询)

src/views/device/faultType/index.vue

@@ -75,38 +75,50 @@
 					@keyup.enter.native="handleQuery"
 				/>
 			</el-form-item>
-			<el-form-item v-if="false" label="创建人" prop="createBy">
+      <el-form-item label="创建人" prop="createBy">
-				<el-input
+        <el-input
-					v-model="queryParams.createBy"
+          class="my-select-input"
-					placeholder="请输入创建人"
+          v-model="queryParams.createBy"
-					clearable
+          placeholder="请输入创建人"
-					@keyup.enter.native="handleQuery"
+          clearable
-				/>
+          @keyup.enter.native="handleQuery"
-			</el-form-item>
+        />
-			<el-form-item v-if="false" label="创建时间" prop="createTime">
+      </el-form-item>
-				<el-date-picker clearable
+      <el-form-item label="创建时间" prop="createTime">
-					v-model="queryParams.createTime"
+        <el-date-picker
-					type="date"
+          v-model="queryParams.createTimeArray"
-					value-format="yyyy-MM-dd"
+          type="daterange"
-					placeholder="请选择创建时间">
+          align="right"
-				</el-date-picker>
+          unlink-panels
-			</el-form-item>
+          range-separator="至"
-			<el-form-item v-if="false" label="更新人" prop="updateBy">
+          start-placeholder="开始日期"
-				<el-input
+          end-placeholder="结束日期"
-					v-model="queryParams.updateBy"
+          value-format="yyyy-MM-dd"
-					placeholder="请输入更新人"
+          :picker-options="pickerOptions">
-					clearable
+        </el-date-picker>
-					@keyup.enter.native="handleQuery"
+      </el-form-item>
-				/>
+      <el-form-item label="更新人" prop="updateBy">
-			</el-form-item>
+        <el-input
-			<el-form-item v-if="false" label="更新时间" prop="updateTime">
+          class="my-select-input"
-				<el-date-picker clearable
+          v-model="queryParams.updateBy"
-					v-model="queryParams.updateTime"
+          placeholder="请输入更新人"
-					type="date"
+          clearable
-					value-format="yyyy-MM-dd"
+          @keyup.enter.native="handleQuery"
-					placeholder="请选择更新时间">
+        />
-				</el-date-picker>
+      </el-form-item>
-			</el-form-item>
+      <el-form-item label="更新时间" prop="updateTime">
+        <el-date-picker
+          v-model="queryParams.updateTimeArray"
+          type="daterange"
+          align="right"
+          unlink-panels
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          :picker-options="pickerOptions">
+        </el-date-picker>
+      </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>
@@ -266,6 +278,34 @@ export default {
   dicts: ['device_fault_type'],
 	data() {
 		return {
+      // 日期范围选择快捷
+      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]);
+          }
+        }]
+      },
 			// 遮罩层
 			loading: true,
 			// 选中数组
@@ -300,7 +340,9 @@ export default {
 				createBy: null,
 				createTime: null,
 				updateBy: null,
-				updateTime: null
+				updateTime: null,
+        createTimeArray: [],
+        updateTimeArray: [],
 			},
 			// 表单参数
 			form: {},
@@ -355,6 +397,9 @@ export default {
 		/** 重置按钮操作 */
 		resetQuery() {
 			this.resetForm("queryForm");
+      // 重置日期范围
+      this.queryParams.createTimeArray = [];
+      this.queryParams.updateTimeArray = [];
 			this.handleQuery();
 		},
 		// 多选框选中数据