代码更新：

1. 增加一些界面的导出功能。
2024-10-05 16:42:35 +08:00 · 2024-10-05 16:42:35 +08:00 · 86c65e0b4a
commit 86c65e0b4a
parent affbe9bef5
6 changed files with 92 additions and 16 deletions
--- a/src/api/excel.js
+++ b/src/api/excel.js
@ -135,6 +135,15 @@ const downloadClcKanbanRequirementExcel = (data) => {
    })
 }

+const downloadWorkSummaryExcel = (data) => {
+    return request({
+        url: '/excel/downloadWorkSummaryExcel',
+        method: 'post',
+        responseType: 'blob',
+        data: data
+    })
+}
+
 export {
    uploadExcelStock,
    uploadExcelGoods,
@ -150,5 +159,6 @@ export {
    downloadLocationsExcel,
    uploadStationConfig,
    queryUploadRecord,
-    downloadClcKanbanRequirementExcel
+    downloadClcKanbanRequirementExcel,
+    downloadWorkSummaryExcel
 }
--- a/src/layout/goods.vue
+++ b/src/layout/goods.vue
@ -3,7 +3,7 @@
        <el-config-provider :locale="zhCn">
            <div style="display: flex;justify-content: space-between;">
                <el-row>
-                    <el-input v-model="goodsIdQuery" style="width: 256px; margin-right: 10px;" placeholder="料号"
+                    <el-input v-model="goodsIdQuery" style="width: 158px; margin-right: 10px;" placeholder="料号"
                        :suffix-icon="Search" />
                    <el-button type="primary" @click="search()">搜索</el-button>
                    <el-button type="warning" @click="reset()">重置</el-button>
--- a/src/layout/sortBoxs.vue
+++ b/src/layout/sortBoxs.vue
@ -31,7 +31,7 @@
                                            <span class="display-title-text">大盒子</span>
                                        </div>
                                        <div class="display-form-div">
-                                            <el-input v-model="workFormEntity.bigBoxNo" size="default" id="bigBoxNo" v-on:keyup.enter="getSumOfBox()" clearable></el-input>
+                                            <el-input v-model="workFormEntity.bigBoxNo" size="default" ref="bigBoxNo" v-on:keyup.enter="getSumOfBox()" clearable></el-input>
                                        </div>
                                    </div>
                                    <div style="display: flex; flex-direction: column;">
--- a/src/layout/stockUpdateRecord.vue
+++ b/src/layout/stockUpdateRecord.vue
@ -7,8 +7,6 @@
                        :suffix-icon="Search" />
                    <el-input v-model="goodsIdQuery" style="width: 158px; margin-right: 10px;" placeholder="料号"
                        :suffix-icon="Search" />
-                    <el-input v-model="reasonQuery" style="width: 158px; margin-right: 10px;" placeholder="更新原因"
-                        :suffix-icon="Search" />
                    <el-select-v2 v-model="reasonQuery" style="width: 158px; margin-right: 10px;"
                        placeholder="请选择更新原因" :options="reasonOptions" @change="search()"></el-select-v2>
                    <el-button type="primary" @click="search()">搜索</el-button>
--- a/src/layout/vehicle.vue
+++ b/src/layout/vehicle.vue
@ -3,8 +3,12 @@
        <el-config-provider :locale="zhCn">
            <div style="display: flex;justify-content: space-between;">
                <el-row>
-                    <el-input v-model="queryKey" style="width: 256px; margin-right: 10px;" placeholder="箱号"
+                    <el-input v-model="queryKey" style="width: 158px; margin-right: 10px;" placeholder="箱号"
                        :suffix-icon="Search" />
+                    <el-input v-model="locationQuery" style="width: 158px; margin-right: 10px;" placeholder="位置"
+                        :suffix-icon="Search" />
+                    <el-select-v2 v-model="isEmptyQuery" style="width: 158px; margin-right: 10px;" placeholder="是否空箱"
+                        :options="isEmptyOptions" @change="search()"></el-select-v2>
                    <el-button type="primary" @click="search()">搜索</el-button>
                    <el-button type="warning" @click="reset()">重置</el-button>
                </el-row>
@ -15,7 +19,7 @@
            <br />
            <el-table :data="vehicles" stripe border v-loading="loading" class="table-class" max-height="550px"
                highlight-current-row @row-click="getCurrentRow" :header-cell-style="{ 'text-align': 'center' }"
-                :cell-style="{ 'text-align': 'center' }">
+                :cell-style="{ 'text-align': 'center' }" @sort-change="handleSortChange">
                <el-table-column width="65px" fixed="left">
                    <template v-slot="scope">
                        <el-radio :label="scope.row.vehicleId" v-model="vehicleId">&nbsp;</el-radio>
@ -26,7 +30,7 @@
                    min-width="120px" show-overflow-tooltip />
                <el-table-column prop="vehicleStatus" label="状态" :formatter="vehicleStatusFormat" min-width="120px" />
                <el-table-column prop="isEmpty" label="空托" :formatter="isEmptyFormat" min-width="120px" />
-                <el-table-column prop="lastInTime" label="最近入库时间" :formatter="timeFormat" min-width="120px" />
+                <el-table-column prop="lastInTime" label="最近入库时间" sortable="custom" :formatter="timeFormat" min-width="120px" />
                <el-table-column fixed="right" label="操作" width="120px" v-if="selVehicle == null">
                    <template v-slot="scope">
                        <el-button plain type="primary" @click="editCurrentRowVehicle(scope.row)">编辑</el-button>
@ -89,6 +93,7 @@ import { ElMessage } from 'element-plus'
 import { Search } from '@element-plus/icons-vue'
 import { ref, reactive } from 'vue'
 import { vehicleStatusFormatter, locationFormatter, dateFormatter, timeFormatter } from '@/utils/formatter.js'
+import { toUnderScoreCase } from '@/utils/stringUtils.js'
 // import uploadVehicles from '@/excel/uploadVehicles.vue'
 import { downloadVehicleExcel } from '@/api/excel.js'
 import store from '@/store'
@ -104,7 +109,11 @@ export default {
            currentPage: 1,
            pageSize: 10,
            total: 0,
+            sortBy: '',
+            isAsc: true,
            queryKey: '',
+            locationQuery: '',
+            isEmptyQuery: -99,
            loading: true,
            dialogVisible: false,
            vehicleId: '',
@ -119,8 +128,12 @@ export default {
                    { required: true, message: '请输入库位' }
                ]
            }),
-            // 物料高度
+            // 是否空箱
            isEmptyOptions: [
+                {
+                    value: -99,
+                    label: '全部'
+                },
                {
                    value: 0,
                    label: '带料'
@ -130,7 +143,7 @@ export default {
                    label: '空箱'
                }
            ],
-            // 托盘状态
+            // 料箱状态
            vehicleStatusOptions: [
                {
                    value: 1,
@ -143,7 +156,11 @@ export default {
                {
                    value: 3,
                    label: '出库中'
-                }
+                },
+                {
+                    value: 99,
+                    label: '异常'
+                },
            ]
        }
    },
@ -156,7 +173,11 @@ export default {
            const tableRequest = {
                pageNo: this.currentPage,
                pageSize: this.pageSize,
+                sortBy: this.sortBy,
+                isAsc: this.isAsc,
                vehicleId: this.queryKey.trim(),
+                currentLocation: this.locationQuery.trim(),
+                isEmpty: this.isEmptyQuery == -99 ? null : this.isEmptyQuery,
                userName: store.getters.getUserName
            }
            getAllVehicles(tableRequest).then(res => {
@ -173,6 +194,11 @@ export default {
            })
            this.loading = false
        },
+        handleSortChange(data) {
+            this.sortBy = toUnderScoreCase(data.prop)
+            this.isAsc = data.order == 'ascending'
+            this.search()
+        },
        vehicleStatusFormat: (row, column, cellValue, index) => {
            return vehicleStatusFormatter(cellValue)
        },
@ -192,6 +218,7 @@ export default {
        },
        reset() {
            this.queryKey = ''
+            this.locationQuery = ''
            this.search()
        },
        editCurrentRowVehicle(row) {
@ -232,10 +259,11 @@ export default {
        },
        exportExcel() {
            const request = {
-                vehicleId: formData.vehicleId,
-                currentLocation: formData.currentLocation,
-                isEmpty: formData.isEmpty,
-                vehicleStatus: formData.vehicleStatus,
+                pageNo: this.currentPage,
+                pageSize: this.pageSize,
+                vehicleId: this.queryKey.trim(),
+                currentLocation: this.locationQuery.trim(),
+                isEmpty: this.isEmptyQuery == -99 ? null : this.isEmptyQuery,
                userName: store.getters.getUserName
            }
            downloadVehicleExcel(request).then(res => {
--- a/src/layout/workSummary.vue
+++ b/src/layout/workSummary.vue
@ -12,12 +12,15 @@
                    <el-input v-model="standIdQuery" style="width: 158px; margin-right: 10px;" placeholder="站台号"
                        :suffix-icon="Search" />
                    <el-date-picker v-model="workDateQuery" type="date" placeholder="选择工作日期" :shortcuts="shortcuts"
-                    style="width: 158px; margin-right: 10px;" />
+                    style="width: 158px; margin-right: 10px;" clearable />
                    <el-select-v2 v-model="lackStatusQuery" style="width: 158px; margin-right: 10px;"
                        placeholder="请选择缺料状态" :options="lackStatusOptions" @change="search()"></el-select-v2>
                    <el-button type="primary" @click="search()">搜索</el-button>
                    <el-button type="warning" @click="reset()">重置</el-button>
                </el-row>
+                <el-row>
+                    <el-button style="background-color: #32CD32; color: #000;" @click="exportExcel()">导出</el-button>
+                </el-row>
            </div>
            <br />
            <el-table :data="workSummaryList" stripe border v-loading="loading" class="table-class"
@ -58,6 +61,7 @@
 <script setup>
 import store from '@/store'
 import { getWorkSummary } from '@/api/kateWork.js'
+import { downloadWorkSummaryExcel } from '@/api/excel.js'
 import { errorBox } from '@/utils/myMessageBox.js'
 import { dateFormatter, timeFormatter } from '@/utils/formatter.js'
 import { Search } from '@element-plus/icons-vue'
@ -180,6 +184,42 @@ export default {
        getCurrentRow(row) {
            this.workFlowId = row.workFlowId
        },
+        exportExcel() {
+            const request = {
+                workStation: this.standIdQuery.trim(),
+                workOrder: this.workOrderQuery.trim(),
+                workCenter: this.workCenterQuery.trim(),
+                goodsId: this.goodsIdQuery.trim(),
+                lackStatus: this.lackStatusQuery == -99 ? null : this.lackStatusQuery,
+                workDate: timeFormatter(this.workDateQuery),
+                userName: store.getters.getUserName
+            }
+            downloadWorkSummaryExcel(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(new Date) + ".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>