库存管理按操作时间查询

src/views/equipment/inventoryManagement/index.vue

 <template>
   <div class="app-container">
-    <el-form ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :inline="true">
+    <el-form ref="queryForm" class="queryForm" :model="queryParams" :inline="true">
       <el-form-item label="pn" prop="pn">
         <el-input
           v-model="queryParams.pn"
           placeholder="请输入pn"
           clearable
           :maxlength="30"
-          style="width: 150px"
         />
       </el-form-item>
       <el-form-item label="lot" prop="lot">
@@ -16,7 +15,6 @@
           placeholder="请输入lot"
           clearable
           :maxlength="30"
-          style="width: 150px"
         />
       </el-form-item>
       <el-form-item label="plocation" prop="plocation">
@@ -25,9 +23,21 @@
           placeholder="请输入plocation"
           clearable
           :maxlength="30"
-          style="width: 150px"
         />
       </el-form-item>
+      <el-form-item label="操作时间" prop="date">
+        <div class="block">
+          <el-date-picker
+            v-model="dateRange"
+            value-format="yyyy-MM-dd"
+            type="daterange"
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            @change="handleChange"
+          />
+        </div>
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
         <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
@@ -47,7 +57,7 @@
 
     </el-form>
     <div class="placeholder" />
-    <div style="padding:5px 10px">
+    <div class="equipmentList">
       <div class="mb12 font-small-bold">库存管理列表</div>
       <el-table v-loading="loading" border :data="equipmentList">
         <el-table-column type="index" label="序号" width="80" />
@@ -87,9 +97,9 @@
               详情
             </el-button>
             <el-button
+              class="edit-button"
               size="mini"
               type="text"
-              style="color: #49cec9"
               @click="handleUpdate(scope.row)"
             >修改</el-button>
           </template>
@@ -216,7 +226,7 @@
         </div>
         <div slot="tip" class="el-upload__tip">
           <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
-          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
+          <el-link type="info" class="download-template" @click="importTemplate">下载模板</el-link>
         </div>
         <div slot="tip" class="el-upload__tip" style="color:red">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
       </el-upload>
@@ -247,6 +257,10 @@ export default {
     return {
       // 查询参数
       queryParams: {
+        // 开始时间
+        beginTime: '',
+        // 结束时间
+        endTime: '',
         page: 1,
         rows: 10,
         pn: undefined,
@@ -256,6 +270,7 @@ export default {
         pstatus: 0,
         delFlag: 0
       },
+      dateRange: [],
       // 详情数据
       singleDetails: {
         pn: '',
@@ -331,10 +346,38 @@ export default {
   },
 
   created() {
+    if (this.$store.getters.searchParams[this.$route.path]) {
+      const { searchParams } = this.$store.getters
+      const { path } = this.$route
+      const param = JSON.parse(searchParams[path]) // 保留着的查询条件
+      this.queryParams = { ...param }
+      this.dateRange[0] = this.queryParams.beginTime
+      this.dateRange[1] = this.queryParams.endTime
+    }
     this.getList()
   },
+  // 路由跳转,是存储页面的值
+  beforeRouteLeave(to, from, next) {
+    this.$store.dispatch('searchSave/searchParamsSet', {
+      path: this.$route.path,
+      param: {
+        ...this.queryParams
+      }
+    })
+    next()
+  },
 
   methods: {
+    /* 处理日期选择*/
+    handleChange() {
+      if (this.dateRange !== null) {
+        this.queryParams.beginTime = this.dateRange[0] + ' 00:00:00'
+        this.queryParams.endTime = this.dateRange[1] + ' 23:59:00'
+      } else {
+        this.queryParams.beginTime = ''
+        this.queryParams.endTime = ''
+      }
+    },
     /** 查询库存列表 */
     getList() {
       this.loading = true
@@ -360,8 +403,11 @@ export default {
         plocation: undefined,
         pstatus: 0,
         ptype: 1,
-        delFlag: 0
+        delFlag: 0,
+        endTime: '',
+        beginTime: ''
       }
+      this.dateRange = []
       this.resetForm('queryForm')
       this.handleQuery()
     },
@@ -405,24 +451,32 @@ export default {
     submitForm: function() {
       this.$refs.form.validate((valid) => {
         if (valid) {
-          // 校验通过，提交表单或进行其他操作
-          updatadevice_t(this.form).then(res => {
-            console.log('res', res)
-            if (res.code === 200) {
-              this.open = false
-              this.$message.success('操作成功')
-              this.getList()
-              this.queryParams.page = 1
-              this.reset()
-            } else if (res.code === null) {
-              this.$message.error(res.message)
-            }
-          })
+          this.$confirm('是否确认导出所有库存信息?', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(res => {
+            // 校验通过，提交表单或进行其他操作
+            return updatadevice_t(this.form).then(res => {
+              console.log('res', res)
+              if (res.code === 200) {
+                this.open = false
+                this.$message.success('操作成功')
+                this.getList()
+                this.queryParams.page = 1
+                this.reset()
+              } else if (res.code === null) {
+                this.$message.error(res.message)
+              }
+            })
+          }
+          )
         } else {
           // 校验失败，显示错误信息或进行其他操作
         }
       })
     },
+    /* 弹窗*/
 
     /** 导出按钮操作 */
     handleExport() {
@@ -579,11 +633,28 @@ export default {
   .el-switch {
     margin-left: 15px;
   }
+
+  .queryForm{
+   padding: 0 0 0 10px;
+  }
+  .equipmentList{
+    padding: 5px 10px;
+  }
+  .edit-button{
+    color: #49cec9;
+  }
+}
+el-form.el-form-item.el-input{
+  width: 150px;
 }
 
 .el-divider--vertical {
   height: 12em;
   width: 4px;
 }
+.el-link--inner{
+  font-size: 12px;
+}
+
 </style>