@ -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()" > < / e l - s e l e c t - v 2 >
< el -button type = "primary" @click ="search()" > 搜索 < / el -button >
< el -button type = "warning" @click ="reset()" > 重置 < / el -button >
< / e l - r o w >
< / 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 >
< / e l - r o w >
< 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()" > 导出拣选任务记录
< / e l - b u t t o n >
< / e l - r o w >
< / 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 >
< / e l - t a b l e - c o l u m n >
< 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 >
< / e l - t a b l e - c o l u m n >
< / e l - t a b l e >
< 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 / >
< / e l - f o r m - i t e m >
< / e l - c o l >
< el -col :span ="12" >
< el -form -item label = "工站" prop = "vehicleId" >
< el -input v -model = " pickTaskFormEntity.vehicleId " disabled / >
< / e l - f o r m - i t e m >
< / e l - c o l >
< / e l - r o w >
< el -row :gutter ="16" >
< el -col :span ="12" :offset ="0" >
< el -form -item label = "小盒子" prop = "standId" >
< el -input v -model = " pickTaskFormEntity.standId " disabled / >
< / e l - f o r m - i t e m >
< / e l - c o l >
< el -col :span ="12" >
< el -form -item label = "任务状态" prop = "pickStatus" >
< el -select -v2 v -model = " pickTaskFormEntity.pickStatus " placeholder = "请选择任务状态"
: options = "taskStatusOptions" > < / e l - s e l e c t - v 2 >
< / e l - f o r m - i t e m >
< / e l - c o l >
< / e l - r o w >
< / e l - f o r m >
< / 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 >
< / e l - t a b l e - c o l u m n >
< 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 >
< / e l - t a b l e - c o l u m n >
< / e l - t a b l e >
< 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 / >
< / e l - f o r m - i t e m >
< / e l - c o l >
< el -col :span ="12" >
< el -form -item label = "工站" prop = "vehicleId" >
< el -input v -model = " pickTaskFormEntity.vehicleId " disabled / >
< / e l - f o r m - i t e m >
< / e l - c o l >
< / e l - r o w >
< el -row :gutter ="16" >
< el -col :span ="12" :offset ="0" >
< el -form -item label = "小盒子" prop = "standId" >
< el -input v -model = " pickTaskFormEntity.standId " disabled / >
< / e l - f o r m - i t e m >
< / e l - c o l >
< el -col :span ="12" >
< el -form -item label = "任务状态" prop = "pickStatus" >
< el -select -v2 v -model = " pickTaskFormEntity.pickStatus " placeholder = "请选择任务状态"
: options = "taskStatusOptions" > < / e l - s e l e c t - v 2 >
< / e l - f o r m - i t e m >
< / e l - c o l >
< / e l - r o w >
< / e l - f o r m >
< / div >
< template # footer >
< span class = "dialog-footer" >
< el -button @ click = "dialogVisible = false" > 取消 < / e l - b u t t o n >
< el -button type = "primary" @click ="submitInfo(pickTaskFormEntity)" >
确定
< / e l - b u t t o n >
< / span >
< / template >
< / e l - d i a l o g >
< / e l - c o n f i g - p r o v i d e r >
< / div >
< / template >
< / e l - d i a l o g >
< / e l - c o n f i g - p r o v i d e r >
< / 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 {
/ / l e t b l o b = n e w B l o b ( [ r e s . d a t a ] , { t y p e : ' a p p l i c a t i o n / v n d . m s - e x c e l ' } ) ; / / 如 果 后 台 返 回 的 不 是 b l o b 对 象 类 型 ， 先 定 义 成 b l o b 对 象 格 式 ， 该 t y p e 导 出 为 x l s 格 式 ，
let blob = res . data / / 如 果 后 台 返 回 的 直 接 是 b l o b 对 象 类 型 ， 直 接 获 取 数 据
/ / l e t _ f i l e N a m e = r e s . h e a d e r s [ ' c o n t e n t - d i s p o s i t i o n ' ] . s p l i t ( ' ; ' ) [ 1 ] . s p l i t ( ' = ' ) [ 1 ] ; / / 拆 解 获 取 文 件 名 ， 如 果 后 端 有 给 返 回 文 件 名 的 话
let _fileName = "拣选任务记录" + dateFormatter ( this . dateQuery ) + ".xlsx"
link . style . display = 'none' / / 隐 藏
/ / 兼 容 不 同 浏 览 器 的 U R L 对 象
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 ) / / 移 除 u r l 对 象
} catch ( e ) {
console . log ( e )
errorBox ( '下载文件失败' )
}
} ) . catch ( err => {
console . log ( err )
errorBox ( '导出失败' )
} )
} ,
} ,
}
< / script >
< style scoped >
. el - pagination {
padding - left : 5 px ;
padding - left : 5 px ;
}
. el - row . el - button {
width : 72 px ;
margin - left : 0 px ;
margin - right : 5 px ;
width : 72 px ;
margin - left : 0 px ;
margin - right : 5 px ;
}
. 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 : 10 px ;
min - width : inherit ;
border : solid 1 px ;
border - radius : 10 px ;
box - shadow : 0 px 15 px 10 px - 15 px # 000 ;
overflow : auto ;
flex - direction : column ;
padding : 10 px ;
display : flex ;
/* min-height: 10%; */
max - height : max - content ;
margin - bottom : 10 px ;
min - width : inherit ;
border : solid 1 px ;
border - radius : 10 px ;
box - shadow : 0 px 15 px 10 px - 15 px # 000 ;
overflow : auto ;
flex - direction : column ;
padding : 10 px ;
}
< / style >
