增加拣选任务记录报表

src/api/excel.js

@@ -208,6 +208,16 @@ const downloadKateOrdersExcel = (data) => {
     })
 }
 
+const downloadPickTaskRecordsExcel = (data) => {
+    return request({
+        url: '/excel/downloadPickTaskRecordsExcel',
+        method: 'post',
+        responseType: 'blob',
+        data: data,
+        timeout: 600000
+    })
+}
+
 export {
     uploadExcelStock,
     uploadExcelGoods,
@@ -230,5 +240,6 @@ export {
     uploadWorkFlow,
     uploadExcelWorkDate,
     downloadWorkFlowExcel,
-    downloadKateOrdersExcel
+    downloadKateOrdersExcel,
+    downloadPickTaskRecordsExcel
 }

src/layout/kateOrdersTable.vue

@@ -402,7 +402,7 @@ export default {
           // let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});    //如果后台返回的不是blob对象类型，先定义成blob对象格式，该type导出为xls格式，
           let blob = res.data    //如果后台返回的直接是blob对象类型，直接获取数据
           // let _fileName = res.headers['content-disposition'].split(';')[1].split('=')[1]; //拆解获取文件名，如果后端有给返回文件名的话
-          let _fileName = "工单报表" + dateFormatter(new Date) + ".xlsx"
+          let _fileName = "未做工单报表" + dateFormatter(this.planStartDateQuery) + ".xlsx"
           link.style.display = 'none'//隐藏
 
           // 兼容不同浏览器的URL对象

src/layout/pickTaskMonitor.vue

@@ -1,293 +1,356 @@
 <template>
-    <div style="margin-bottom: 10px; height: 100%; padding-left: 1%; padding-right: 1%;">
-        <el-config-provider :locale="zhCn">
-            <div style="display: flex;justify-content: space-between;">
-                <el-row>
-                    <el-input v-model="vehicleIdQuery" style="width: 158px; margin-right: 10px;" placeholder="箱号"
-                        :suffix-icon="Search" />
-                    <el-input v-model="standQuery" style="width: 158px; margin-right: 10px;" placeholder="工站"
-                        :suffix-icon="Search" />
-                        <el-select-v2 v-model="pickStatusQuery" style="width: 158px; margin-right: 10px;"
+  <div style="margin-bottom: 10px; height: 100%; padding-left: 1%; padding-right: 1%;">
+    <el-config-provider :locale="zhCn">
+      <div style="display: flex;justify-content: space-between;">
+        <el-row>
+          <el-input v-model="vehicleIdQuery" style="width: 158px; margin-right: 10px;" placeholder="箱号"
+                    :suffix-icon="Search"/>
+          <el-input v-model="standQuery" style="width: 158px; margin-right: 10px;" placeholder="工站"
+                    :suffix-icon="Search"/>
+          <el-select-v2 v-model="pickStatusQuery" style="width: 158px; margin-right: 10px;"
                         placeholder="请选择状态" :options="pickStatusOptions" @change="search()"></el-select-v2>
-                    <el-button type="primary" @click="search()">搜索</el-button>
-                    <el-button type="warning" @click="reset()">重置</el-button>
-                </el-row>
-            </div>
-            <br />
-            <el-table :data="pickTaskList" stripe border v-loading="loading" class="table-class" highlight-current-row
+          <el-button type="primary" @click="search()">搜索</el-button>
+          <el-button type="warning" @click="reset()">重置</el-button>
+        </el-row>
+        <el-row>
+          <el-date-picker v-model="dateQuery" type="date" placeholder="任务日期" :shortcuts="shortcuts"
+                          style="width: 158px; margin-right: 10px;" clearable/>
+          <el-button style="background-color: #00CED1; color: #000; width: 120px"
+                     @click="exportPickTaskRecords()">导出拣选任务记录
+          </el-button>
+        </el-row>
+
+      </div>
+      <br/>
+      <el-table :data="pickTaskList" stripe border v-loading="loading" class="table-class" highlight-current-row
                 max-height="650px" @row-click="getCurrentRow" :header-cell-style="{ 'text-align': 'center' }"
                 :cell-style="{ 'text-align': 'center' }">
-                <el-table-column width="65px" fixed="left">
-                    <template v-slot="scope">
-                        <el-radio :label="scope.row.pickTaskId" v-model="pickTaskId">&nbsp;</el-radio>
-                    </template>
-                </el-table-column>
-                <el-table-column prop="pickTaskId" label="id" fixed="left" min-width="120px" show-overflow-tooltip />
-                <el-table-column prop="vehicleId" label="箱号" fixed="left" min-width="120px" />
-                <el-table-column prop="standId" label="站台号" fixed="left" min-width="120px" />
-                <el-table-column prop="pickStatus" label="拣选状态" :formatter="pickStatusFormat" min-width="120px" />
-                <el-table-column prop="lastUpdateTime" label="最近更新时间" :formatter="timeFormat" show-overflow-tooltip
-                    min-width="120px" />
-                <el-table-column fixed="right" label="操作" width="120px">
-                    <template v-slot="scope">
-                        <el-button plain type="primary" @click="editCurrentRow(scope.row)">编辑</el-button>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <br />
-            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 25, 50]"
-                :small="false" :disabled="false" :background="false" :default-page-size="10"
-                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="search"
-                @current-change="search" />
-            <el-dialog v-model="dialogVisible" title="拣选任务详细信息" width="40%" draggable :show-close="false">
-                <div
-                    style="max-width: 100%; max-height: 500px; overflow: auto; display: flex; justify-content: center;">
-                    <el-form ref="pickTaskFormRef" :model="pickTaskFormEntity" :label-position="labelPosition"
-                        label-width="100px" style="width: 95%;" :rules="rules" status-icon>
-                        <el-row :gutter="16">
-                            <el-col :span="12" :offset="0">
-                                <el-form-item label="id" prop="pickTaskId">
-                                    <el-input v-model="pickTaskFormEntity.pickTaskId" disabled />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="工站" prop="vehicleId">
-                                    <el-input v-model="pickTaskFormEntity.vehicleId" disabled />
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                        <el-row :gutter="16">
-                            <el-col :span="12" :offset="0">
-                                <el-form-item label="小盒子" prop="standId">
-                                    <el-input v-model="pickTaskFormEntity.standId" disabled />
-                                </el-form-item>
-                            </el-col>
-                            <el-col :span="12">
-                                <el-form-item label="任务状态" prop="pickStatus">
-                                    <el-select-v2 v-model="pickTaskFormEntity.pickStatus" placeholder="请选择任务状态"
-                                        :options="taskStatusOptions"></el-select-v2>
-                                </el-form-item>
-                            </el-col>
-                        </el-row>
-                    </el-form>
-                </div>
-                <template #footer>
+        <el-table-column width="65px" fixed="left">
+          <template v-slot="scope">
+            <el-radio :label="scope.row.pickTaskId" v-model="pickTaskId">&nbsp;</el-radio>
+          </template>
+        </el-table-column>
+        <el-table-column prop="pickTaskId" label="id" fixed="left" min-width="120px" show-overflow-tooltip/>
+        <el-table-column prop="vehicleId" label="箱号" fixed="left" min-width="120px"/>
+        <el-table-column prop="standId" label="站台号" fixed="left" min-width="120px"/>
+        <el-table-column prop="pickStatus" label="拣选状态" :formatter="pickStatusFormat" min-width="120px"/>
+        <el-table-column prop="lastUpdateTime" label="最近更新时间" :formatter="timeFormat" show-overflow-tooltip
+                         min-width="120px"/>
+        <el-table-column fixed="right" label="操作" width="120px">
+          <template v-slot="scope">
+            <el-button plain type="primary" @click="editCurrentRow(scope.row)">编辑</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <br/>
+      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 25, 50]"
+                     :small="false" :disabled="false" :background="false" :default-page-size="10"
+                     layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="search"
+                     @current-change="search"/>
+      <el-dialog v-model="dialogVisible" title="拣选任务详细信息" width="40%" draggable :show-close="false">
+        <div
+            style="max-width: 100%; max-height: 500px; overflow: auto; display: flex; justify-content: center;">
+          <el-form ref="pickTaskFormRef" :model="pickTaskFormEntity" :label-position="labelPosition"
+                   label-width="100px" style="width: 95%;" :rules="rules" status-icon>
+            <el-row :gutter="16">
+              <el-col :span="12" :offset="0">
+                <el-form-item label="id" prop="pickTaskId">
+                  <el-input v-model="pickTaskFormEntity.pickTaskId" disabled/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="工站" prop="vehicleId">
+                  <el-input v-model="pickTaskFormEntity.vehicleId" disabled/>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row :gutter="16">
+              <el-col :span="12" :offset="0">
+                <el-form-item label="小盒子" prop="standId">
+                  <el-input v-model="pickTaskFormEntity.standId" disabled/>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="任务状态" prop="pickStatus">
+                  <el-select-v2 v-model="pickTaskFormEntity.pickStatus" placeholder="请选择任务状态"
+                                :options="taskStatusOptions"></el-select-v2>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+        <template #footer>
                     <span class="dialog-footer">
                         <el-button @click="dialogVisible = false">取消</el-button>
                         <el-button type="primary" @click="submitInfo(pickTaskFormEntity)">
                             确定
                         </el-button>
                     </span>
-                </template>
-            </el-dialog>
-        </el-config-provider>
-    </div>
+        </template>
+      </el-dialog>
+    </el-config-provider>
+  </div>
 </template>
 
 <script setup>
 import store from '@/store'
-import { getPickTasksByPage, updatePickTaskInfo } from '@/api/taskMonitor.js'
-import { errorBox } from '@/utils/myMessageBox.js'
-import { ElMessage } from 'element-plus'
-import { ref, reactive } from 'vue'
-import { dateFormatter, timeFormatter } from '@/utils/formatter.js'
-import { Search } from '@element-plus/icons-vue'
+import {getPickTasksByPage, updatePickTaskInfo} from '@/api/taskMonitor.js'
+import {errorBox} from '@/utils/myMessageBox.js'
+import {ElMessage} from 'element-plus'
+import {ref, reactive} from 'vue'
+import {dateFormatter, timeFormatter} from '@/utils/formatter.js'
+import {downloadPickTaskRecordsExcel} from "@/api/excel";
+import {Search} from '@element-plus/icons-vue'
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 </script>
 <script>
+
 export default {
-    name: 'pickTaskMonitor',
-    data() {
-        return {
-            pickTaskList: [],
-            currentPage: 1,
-            pageSize: 10,
-            total: 0,
-            vehicleIdQuery: '',
-            standQuery: '',
-            pickStatusQuery: -99,
-            loading: true,
-            dialogVisible: false,
-            pickTaskId: '',
-            pickTaskFormEntity: reactive({}),
-            pickTaskFormRef: ref(),
-            labelPosition: 'top',
-            rules: reactive({}),
-            taskStatusOptions: [
-                {
-                    value: -1,
-                    label: '暂存'
-                },
-                {
-                    value: 0,
-                    label: '待下发'
-                },
-                {
-                    value: 1,
-                    label: '已下发'
-                },
-                {
-                    value: 2,
-                    label: '已到达'
-                }
-            ],
-            pickStatusOptions: [
-                {
-                    value: -99,
-                    label: '全部'
-                },
-                {
-                    value: -1,
-                    label: '暂存'
-                },
-                {
-                    value: 0,
-                    label: '待下发'
-                },
-                {
-                    value: 1,
-                    label: '已下发'
-                },
-                {
-                    value: 2,
-                    label: '已到达'
-                }
-            ],
+  name: 'pickTaskMonitor',
+  data() {
+    return {
+      pickTaskList: [],
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      vehicleIdQuery: '',
+      standQuery: '',
+      pickStatusQuery: -99,
+      dateQuery: null,
+      loading: true,
+      dialogVisible: false,
+      pickTaskId: '',
+      pickTaskFormEntity: reactive({}),
+      pickTaskFormRef: ref(),
+      labelPosition: 'top',
+      rules: reactive({}),
+      taskStatusOptions: [
+        {
+          value: -1,
+          label: '暂存'
+        },
+        {
+          value: 0,
+          label: '待下发'
+        },
+        {
+          value: 1,
+          label: '已下发'
+        },
+        {
+          value: 2,
+          label: '已到达'
         }
+      ],
+      pickStatusOptions: [
+        {
+          value: -99,
+          label: '全部'
+        },
+        {
+          value: -1,
+          label: '暂存'
+        },
+        {
+          value: 0,
+          label: '待下发'
+        },
+        {
+          value: 1,
+          label: '已下发'
+        },
+        {
+          value: 2,
+          label: '已到达'
+        }
+      ],
+      shortcuts: [
+        {
+          text: '今天',
+          value: new Date(),
+        },
+        {
+          text: '昨天',
+          value: () => {
+            const date = new Date()
+            date.setTime(date.getTime() - 3600 * 1000 * 24)
+            return date
+          },
+        },
+      ],
+    }
+  },
+  mounted() {
+    this.search()
+  },
+  methods: {
+    search() {
+      this.loading = true
+      const request = {
+        pageNo: this.currentPage,
+        pageSize: this.pageSize,
+        vehicleId: this.vehicleIdQuery.trim(),
+        standId: this.standQuery.trim(),
+        pickStatus: this.pickStatusQuery == -99 ? null : this.pickStatusQuery,
+        userName: store.getters.getUserName
+      }
+      getPickTasksByPage(request).then(res => {
+        const tableResponse = res.data
+        if (tableResponse.code == 0) {
+          this.pickTaskList = tableResponse.returnData.lists
+          this.total = tableResponse.returnData.total
+        } else {
+          errorBox(tableResponse.message)
+        }
+      }).catch(err => {
+        console.log(err)
+        errorBox('查询拣选任务错误')
+      })
+      this.loading = false
     },
-    mounted() {
-        this.search()
+    dateFormat: (row, column, cellValue, index) => {
+      return dateFormatter(cellValue)
     },
-    methods: {
-        search() {
-            this.loading = true
-            const request = {
-                pageNo: this.currentPage,
-                pageSize: this.pageSize,
-                vehicleId: this.vehicleIdQuery.trim(),
-                standId: this.standQuery.trim(),
-                pickStatus: this.pickStatusQuery == -99 ? null : this.pickStatusQuery,
-                userName: store.getters.getUserName
-            }
-            getPickTasksByPage(request).then(res => {
-                const tableResponse = res.data
-                if (tableResponse.code == 0) {
-                    this.pickTaskList = tableResponse.returnData.lists
-                    this.total = tableResponse.returnData.total
-                } else {
-                    errorBox(tableResponse.message)
-                }
-            }).catch(err => {
-                console.log(err)
-                errorBox('查询拣选任务错误')
-            })
-            this.loading = false
-        },
-        dateFormat: (row, column, cellValue, index) => {
-            return dateFormatter(cellValue)
-        },
-        timeFormat: (row, column, cellValue, index) => {
-            return timeFormatter(cellValue)
-        },
-        pickStatusFormat: (row, column, cellValue, index) => {
-            switch (cellValue) {
-                case -1:
-                    return '暂存'
-                case 0:
-                    return '待下发'
-                case 1:
-                    return '已下发'
-                case 2:
-                    return '已到达'
-                default:
-                    return '未知'
-            }
-        },
-        reset() {
-            this.vehicleIdQuery = ''
-            this.standQuery = ''
-            this.search()
-        },
-        editCurrentRow(row) {
-            this.pickTaskId = row.pickTaskId
-            this.pickTaskFormEntity = {
-                pickTaskId: row.pickTaskId,
-                vehicleId: row.vehicleId,
-                standId: row.standId,
-                pickStatus: row.pickStatus,
-                lastUpdateTime: row.lastUpdateTime
-            }
-            this.dialogVisible = true
-        },
-        submitInfo(formData) {
-            const params = {
-                pickTaskId: formData.pickTaskId,
-                pickStatus: formData.pickStatus,
-                userName: store.getters.getUserName
-            }
-            updatePickTaskInfo(params).then(res => {
-                if (res.data.code == 0) {
-                    this.dialogVisible = false
-                    ElMessage.success('更新拣选任务成功。')
-                    this.search()
-                } else {
-                    errorBox(res.data.message)
-                }
-            }).catch(err => {
-                console.log(err)
-                errorBox('更新拣选任务失败。')
-            })
-        },
-        getCurrentRow(row) {
-            this.pickTaskId = row.pickTaskId
-        },
+    timeFormat: (row, column, cellValue, index) => {
+      return timeFormatter(cellValue)
     },
+    pickStatusFormat: (row, column, cellValue, index) => {
+      switch (cellValue) {
+        case -1:
+          return '暂存'
+        case 0:
+          return '待下发'
+        case 1:
+          return '已下发'
+        case 2:
+          return '已到达'
+        default:
+          return '未知'
+      }
+    },
+    reset() {
+      this.vehicleIdQuery = ''
+      this.standQuery = ''
+      this.search()
+    },
+    editCurrentRow(row) {
+      this.pickTaskId = row.pickTaskId
+      this.pickTaskFormEntity = {
+        pickTaskId: row.pickTaskId,
+        vehicleId: row.vehicleId,
+        standId: row.standId,
+        pickStatus: row.pickStatus,
+        lastUpdateTime: row.lastUpdateTime
+      }
+      this.dialogVisible = true
+    },
+    submitInfo(formData) {
+      const params = {
+        pickTaskId: formData.pickTaskId,
+        pickStatus: formData.pickStatus,
+        userName: store.getters.getUserName
+      }
+      updatePickTaskInfo(params).then(res => {
+        if (res.data.code == 0) {
+          this.dialogVisible = false
+          ElMessage.success('更新拣选任务成功。')
+          this.search()
+        } else {
+          errorBox(res.data.message)
+        }
+      }).catch(err => {
+        console.log(err)
+        errorBox('更新拣选任务失败。')
+      })
+    },
+    getCurrentRow(row) {
+      this.pickTaskId = row.pickTaskId
+    },
+    // 导出拣选任务记录
+    exportPickTaskRecords() {
+      if (this.dateQuery == null) {
+        errorBox('请选择日期')
+        return
+      }
+      const request = {
+        vehicleId: this.vehicleIdQuery,
+        standId: this.standQuery,
+        workDate: dateFormatter(this.dateQuery),
+        userName: store.getters.getUserName
+      }
+      downloadPickTaskRecordsExcel(request).then(res => {
+        const link = document.createElement('a');//创建a标签
+        try {
+          // let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});    //如果后台返回的不是blob对象类型，先定义成blob对象格式，该type导出为xls格式，
+          let blob = res.data    //如果后台返回的直接是blob对象类型，直接获取数据
+          // let _fileName = res.headers['content-disposition'].split(';')[1].split('=')[1]; //拆解获取文件名，如果后端有给返回文件名的话
+          let _fileName = "拣选任务记录" + dateFormatter(this.dateQuery) + ".xlsx"
+          link.style.display = 'none'//隐藏
+
+          // 兼容不同浏览器的URL对象
+          const url = window.URL || window.webkitURL || window.moxURL
+          link.href = url.createObjectURL(blob)
+          link.setAttribute('download', _fileName.substring(_fileName.lastIndexOf('_') + 1))
+          document.body.appendChild(link)
+          link.click()
+          document.body.removeChild(link)
+          url.revokeObjectURL(link.href)//移除url对象
+        } catch (e) {
+          console.log(e)
+          errorBox('下载文件失败')
+        }
+      }).catch(err => {
+        console.log(err)
+        errorBox('导出失败')
+      })
+    },
+  },
 }
 </script>
 
 <style scoped>
 .el-pagination {
-    padding-left: 5px;
+  padding-left: 5px;
 }
 
 .el-row .el-button {
-    width: 72px;
-    margin-left: 0px;
-    margin-right: 5px;
+  width: 72px;
+  margin-left: 0px;
+  margin-right: 5px;
 }
 
 .table-class {
-    width: 100%;
+  width: 100%;
 }
 
 .el-row .el-form-item {
-    width: 10% inherit;
-    justify-content: center;
+  width: 10% inherit;
+  justify-content: center;
 }
 
 .el-row .el-form-item .el-select-v2 {
-    width: 100% !important;
+  width: 100% !important;
 }
 
 .el-row .el-form-item .el-input-number {
-    width: 100% !important;
+  width: 100% !important;
 }
 
 .el-row .el-form-item .el-button {
-    margin: auto;
+  margin: auto;
 }
 
 .title-area {
-    display: flex;
-    /* min-height: 10%; */
-    max-height: max-content;
-    margin-bottom: 10px;
-    min-width: inherit;
-    border: solid 1px;
-    border-radius: 10px;
-    box-shadow: 0px 15px 10px -15px #000;
-    overflow: auto;
-    flex-direction: column;
-    padding: 10px;
+  display: flex;
+  /* min-height: 10%; */
+  max-height: max-content;
+  margin-bottom: 10px;
+  min-width: inherit;
+  border: solid 1px;
+  border-radius: 10px;
+  box-shadow: 0px 15px 10px -15px #000;
+  overflow: auto;
+  flex-direction: column;
+  padding: 10px;
 }
 </style>