备品备件领用

src/views/device/sparePartsApplicationRecord/index.vue

@@ -57,14 +57,6 @@
 					@keyup.enter.native="handleQuery"
 				/>
 			</el-form-item>
-			<el-form-item label="领用时间" prop="applyTime">
-				<el-date-picker clearable
-					v-model="queryParams.applyTime"
-					type="date"
-					value-format="yyyy-MM-dd"
-					placeholder="请选择领用时间">
-				</el-date-picker>
-			</el-form-item>
 			<el-form-item label="申领人" prop="applyPeople">
 				<el-input
 					v-model="queryParams.applyPeople"
@@ -81,6 +73,19 @@
 					@keyup.enter.native="handleQuery"
 				/>
 			</el-form-item>
+      <el-form-item label="领用时间" prop="applyTime">
+        <el-date-picker
+          v-model="queryParams.applyTimeArray"
+          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>
@@ -140,17 +145,17 @@
 			<el-table-column label="出库单号" align="center" prop="applyCode" />
 			<el-table-column label="备品备件编码" align="center" prop="spareCode" width="120"/>
 			<el-table-column label="备品备件名称" align="center" prop="spareName" width="120"/>
-			<el-table-column label="规格型号" align="center" prop="spareModel" />
+			<el-table-column label="规格型号" align="center" prop="spareModel" width="150"/>
 			<el-table-column label="数量" align="center" prop="spareQuantity" />
 			<el-table-column label="使用组线" align="center" prop="spareGroupLine" />
 			<el-table-column label="使用设备" align="center" prop="spareUseEquipment" />
 			<el-table-column label="领用时间" align="center" prop="applyTime" width="180">
 				<template slot-scope="scope">
-					<span>{{ parseTime(scope.row.applyTime, '{y}-{m}-{d}') }}</span>
+					<span>{{ parseTime(scope.row.applyTime) }}</span>
 				</template>
 			</el-table-column>
-			<el-table-column label="申领人" align="center" prop="applyPeople" />
-			<el-table-column label="批准人" align="center" prop="applyApprovePeople" />
+			<el-table-column label="申领人" align="center" prop="applyPeople" width="80"/>
+			<el-table-column label="批准人" align="center" prop="applyApprovePeople" width="80"/>
 			<el-table-column label="工厂号" align="center" prop="factoryCode" />
 			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
 				<template slot-scope="scope">
@@ -272,7 +277,36 @@ export default {
 				attr1: null,
 				attr2: null,
 				attr3: null,
-				factoryCode: null
+				factoryCode: null,
+				applyTimeArray: []
+			},
+      // 日期范围选择快捷
+      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]);
+          }
+        }]
       },
 			// 表单参数
 			form: {},
@@ -337,6 +371,7 @@ export default {
 		/** 重置按钮操作 */
 		resetQuery() {
 			this.resetForm("queryForm");
+			this.queryParams.applyTimeArray = [];
 			this.handleQuery();
 		},
 		// 多选框选中数据