wms_client_kate_suzhou/src/layout/clcKanban.vue

578 lines
27 KiB
Vue
Raw Normal View History

<template>
<el-config-provider :locale="zhCn">
<el-container class="content">
<div class="work-area">
<fieldset class="title-area">
<legend>
工作台
</legend>
<div class="title-div">
<span class="title-text">需求看板-CLC</span>
</div>
<div class="station-div">
<span class="station-text">工作站</span>
</div>
<div class="station-no-div">
<span class="station-no-text">{{ standId }}</span>
</div>
</fieldset>
<fieldset class="main-area">
<legend>
CLC看板
</legend>
<el-form ref="workFormRef" :model="workFormEntity" :label-position="labelPosition"
label-width="150px" style="max-width: 100%;" :rules="rules" status-icon>
<div style="display: flex;">
<div style="display: block; margin: 5px;">
<div
style="display: inline-flex; justify-content: center; height: 60px; width: 910px; margin: 5px; padding: 5px; background-color: #00AAE8;">
<span style="align-self: center; font-weight: bold;font-size: 25px;">
按照计划和设置,CLC下次需要到货如下
</span>
</div>
<div style="display: flex; margin-top: 5px; margin-top: 15px">
<div
style="display: inline-flex; justify-content: center; width: 160px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span
style="align-self: center; font-weight: bold;font-size: 20px;">总需求</span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 130px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;">
{{ workFormEntity.TotalNumOfType }}
</span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 80px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;"></span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 130px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;">
{{ workFormEntity.TotalNumOfPc }}
</span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 80px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;">PC</span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 130px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;">
{{ workFormEntity.TotalNumOfBox }}
</span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 80px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;"></span>
</div>
</div>
<div style="display: flex; margin-top: 5px; margin-top: 15px">
<div
style="display: inline-flex; justify-content: center; width: 160px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span
style="align-self: center; font-weight: bold;font-size: 20px;">#810</span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 130px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;">
{{ workFormEntity.NumOfTypeOf810 }}
</span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 80px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;"></span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 130px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;">
{{ workFormEntity.NumOfPcOf810 }}
</span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 80px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;">PC</span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 130px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;">
{{ workFormEntity.NumOfBoxOf810 }}
</span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 80px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;"></span>
</div>
</div>
<div style="display: flex; margin-top: 5px; margin-top: 15px">
<div
style="display: inline-flex; justify-content: center; width: 160px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span
style="align-self: center; font-weight: bold;font-size: 20px;">#811</span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 130px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;">
{{ workFormEntity.NumOfTypeOf811 }}
</span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 80px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;"></span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 130px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;">
{{ workFormEntity.NumOfPcOf811 }}
</span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 80px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;">PC</span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 130px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;">
{{ workFormEntity.NumOfBoxOf811 }}
</span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 80px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;"></span>
</div>
</div>
<div style="display: flex; margin-top: 5px; margin-top: 15px">
<div
style="display: inline-flex; justify-content: center; width: 160px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span
style="align-self: center; font-weight: bold;font-size: 20px;">#911</span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 130px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;">
{{ workFormEntity.NumOfTypeOf911 }}
</span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 80px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;"></span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 130px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;">
{{ workFormEntity.NumOfPcOf911 }}
</span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 80px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;">PC</span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 130px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;">
{{ workFormEntity.NumOfBoxOf911 }}
</span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 80px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;"></span>
</div>
</div>
<div style="display: flex; margin-top: 5px; margin-top: 15px">
<div
style="display: inline-flex; justify-content: center; width: 160px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span
style="align-self: center; font-weight: bold;font-size: 20px;">#822</span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 130px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;">
{{ workFormEntity.NumOfTypeOf822 }}
</span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 80px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;"></span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 130px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;">
{{ workFormEntity.NumOfPcOf822 }}
</span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 80px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;">PC</span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 130px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;">
{{ workFormEntity.NumOfBoxOf822 }}
</span>
</div>
<div
style="display: inline-flex; justify-content: center; width: 80px; margin: 5px; padding: 5px; background-color: #CCCCCC;">
<span style="align-self: center; font-weight: bold;font-size: 20px;"></span>
</div>
</div>
</div>
<div style="margin: 10px;">
<div class="arrow" @click="exportExcel()">
<span
style="margin-left: 25px; align-self: center; font-weight: bold;font-size: 45px; writing-mode: vertical-lr;">确认导出</span>
</div>
</div>
</div>
</el-form>
</fieldset>
</div>
</el-container>
</el-config-provider>
</template>
<script setup>
import store from '@/store'
import { getClcKanbanRequirement } from '@/api/kateWork'
import { downloadClcKanbanRequirementExcel } from '@/api/excel'
import { dateFormatter } from '@/utils/formatter.js'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
</script>
<script>
export default {
name: 'clcKanban',
data() {
return {
standId: store.getters.getStandId,
// timer: '',
labelPosition: 'top',
workFormRef: ref(),
workFormEntity: reactive({
TotalNumOfType: 0,
TotalNumOfPc: 0,
TotalNumOfBox: 0,
NumOfTypeOf810: 0,
NumOfTypeOf811: 0,
NumOfTypeOf911: 0,
NumOfTypeOf822: 0,
NumOfPcOf810: 0,
NumOfPcOf811: 0,
NumOfPcOf911: 0,
NumOfPcOf822: 0,
NumOfBoxOf810: 0,
NumOfBoxOf811: 0,
NumOfBoxOf911: 0,
NumOfBoxOf822: 0,
}),
rules: reactive({
}),
}
},
mounted() {
this.getClcKanban()
},
beforeUnmount() {
// clearInterval(this.timer)
},
methods: {
getClcKanban() {
const request = {
standId: this.standId,
userName: store.getters.getUserName
}
getClcKanbanRequirement(request).then(res => {
const response = res.data
if (response.code == 0) {
this.workFormEntity.TotalNumOfType = response.returnData.TotalNumOfType
this.workFormEntity.TotalNumOfPc = response.returnData.TotalNumOfPc
this.workFormEntity.TotalNumOfBox = response.returnData.TotalNumOfBox
this.workFormEntity.NumOfTypeOf810 = response.returnData.NumOfTypeOf810
this.workFormEntity.NumOfTypeOf811 = response.returnData.NumOfTypeOf811
this.workFormEntity.NumOfTypeOf911 = response.returnData.NumOfTypeOf911
this.workFormEntity.NumOfTypeOf822 = response.returnData.NumOfTypeOf822
this.workFormEntity.NumOfPcOf810 = response.returnData.NumOfPcOf810
this.workFormEntity.NumOfPcOf811 = response.returnData.NumOfPcOf811
this.workFormEntity.NumOfPcOf911 = response.returnData.NumOfPcOf911
this.workFormEntity.NumOfPcOf822 = response.returnData.NumOfPcOf822
this.workFormEntity.NumOfBoxOf810 = response.returnData.NumOfBoxOf810
this.workFormEntity.NumOfBoxOf811 = response.returnData.NumOfBoxOf811
this.workFormEntity.NumOfBoxOf911 = response.returnData.NumOfBoxOf911
this.workFormEntity.NumOfBoxOf822 = response.returnData.NumOfBoxOf822
2024-08-29 19:15:55 +08:00
ElMessage.success("获取CLC看板需求成功。")
} else {
this.resetForms()
2024-08-29 19:15:55 +08:00
ElMessage.error(response.message)
}
}).catch(err => {
console.log(err)
this.resetForms()
ElMessage.error('获取CLC看板需求错误')
})
},
resetForms() {
this.workFormEntity = reactive({
TotalNumOfType: 0,
TotalNumOfPc: 0,
TotalNumOfBox: 0,
NumOfTypeOf810: 0,
NumOfTypeOf811: 0,
NumOfTypeOf911: 0,
NumOfTypeOf822: 0,
NumOfPcOf810: 0,
NumOfPcOf811: 0,
NumOfPcOf911: 0,
NumOfPcOf822: 0,
NumOfBoxOf810: 0,
NumOfBoxOf811: 0,
NumOfBoxOf911: 0,
NumOfBoxOf822: 0,
})
},
exportExcel() {
const request = {
standId: this.standId,
userName: store.getters.getUserName
}
downloadClcKanbanRequirementExcel(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 = "CLC看板需求" + 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) {
ElMessage({
message: '下载文件失败:: ' + e,
type: 'error',
showClose: true
})
}
}).catch(err => {
ElMessage({
message: '导出失败:: ' + err,
type: 'error',
showClose: true
})
})
},
}
}
</script>
<style scoped>
.content {
display: flex;
width: 100%;
}
.work-area {
width: 100%;
/* padding: 5px; */
}
.main-area {
margin: auto;
min-height: fit-content;
max-height: 90%;
margin-bottom: 10px;
min-width: inherit;
border: solid 1px;
border-radius: 10px;
box-shadow: 0px 15px 10px -15px #000;
overflow: 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;
}
.arrow {
background: linear-gradient(-105deg,
transparent 50%,
#309330 50%,
#309330 100%) top right,
linear-gradient(-75deg,
transparent 50%,
#309330 50%,
#309330 100%) bottom right;
background-size: 100% 50%;
height: 376px;
width: 250px;
background-repeat: no-repeat;
display: inline-flex;
cursor: pointer;
}
:deep(.el-input) {
height: 130px;
font-size: 25px;
}
:deep(.el-input-number) {
height: 130px;
font-size: 25px;
}
.title-div {
display: inline-flex;
width: -webkit-fill-available;
margin-right: 5px;
padding: 5px;
background-color: #CCCCCC;
}
.title-text {
align-self: center;
font-weight: bold;
font-size: 25px;
}
.station-div {
display: inline-flex;
justify-content: center;
width: 150px;
margin-left: 5px;
margin-right: 5px;
padding: 5px;
background-color: #FFFAAA;
}
.station-text {
align-self: center;
font-weight: bold;
font-size: 25px;
}
.station-no-div {
display: inline-flex;
justify-content: center;
width: 200px;
padding: 5px;
border: 5px double #000000;
}
.station-no-text {
align-self: center;
font-weight: bold;
font-size: 25px;
}
.display-title-div {
display: inline-flex;
justify-content: center;
width: 280px;
height: 80px;
margin: 5px;
padding: 5px;
background-color: #FFFAAA;
}
.display-title-text {
align-self: center;
font-weight: bold;
font-size: 25px;
}
.display-form-div {
display: inline-flex;
justify-content: center;
width: 270px;
margin: 5px;
padding: 5px;
border: 5px double #000000;
margin-top: 25px;
}
.display-form-div-left {
display: inline-flex;
justify-content: center;
width: 170px;
margin: 5px;
padding: 5px;
border: 5px double #000000;
}
.display-form-div-right {
display: inline-flex;
justify-content: center;
width: 80px;
margin: 5px;
padding: 5px;
background-color: #CCCCCC;
}
.display-form-text-right {
align-self: center;
font-weight: bold;
font-size: 25px;
}
/* @media print {
@page {
size: auto;
}
body,
html {
width: 90mm !important;
height: 25mm !important;
}
} */
.objectDialogFlowPrint {
width: 100% !important;
height: 100% !important;
}
.objectDialogFlowPrint .pageWarp {
/*这句话很重要,控制时候强制分页 https://www.w3school.com.cn/cssref/pr_page-break-after.asp*/
page-break-after: always;
width: 98%;
height: 98%;
/* margin: 5px; */
text-align: center;
padding: 0;
/* border: #000 solid 1px; */
display: flex;
print-color-adjust: exact;
}
.print-tab-left {
margin: 5px;
width: 50%;
border-right: #156082 dashed 1px;
}
.print-tab-right {
margin: 5px;
width: 50%;
}
.print-disp {
margin: 2px;
padding-left: 5px;
font-size: 12px;
font-weight: bold;
text-align: left;
}
</style>