<script setup>
|
import {reactive, ref} from "vue";
|
import {useRouter} from 'vue-router'
|
import request from "@/utils/request";
|
import {ElMessage} from "element-plus";
|
import {changeFilterEvent, filterChanged} from "@/hook"
|
import {indexOf} from "xe-utils";
|
|
const xGrid = ref()
|
let router = useRouter()
|
const getTableRow = (row, type) => {
|
switch (type) {
|
case 'edit' : {
|
//alert('我接收到子组件传送的编辑信息')
|
router.push({path: '/main/processCard/PrintFlowCard', query: {id: row.id}})
|
break
|
}
|
case 'delete': {
|
alert('我接收到子组件传送的删除信息')
|
break
|
}
|
case 'setType': {
|
alert('我接收到子组件传送的排版状态')
|
break
|
}
|
}
|
}
|
|
//定义表头数据
|
const titleUploadData = ref({
|
//销售单号
|
orderId: '',
|
//生产单号
|
productionId: '',
|
//设备类型
|
deviceType: '',
|
//班组类型
|
teamsType: '',
|
//生产日期
|
reportingWorkDate: '',
|
//报工工序
|
thisProcess: '',
|
//上工序
|
previousProcess: '',
|
//下工序
|
nextProcess: '',
|
//备注
|
notes: '',
|
//本工序完工数
|
thisCompletedQuantity: '',
|
//本工序报废数
|
thisWornQuantity: '',
|
//班次
|
classes: '',
|
//责任工序
|
responsibleProcess: '',
|
order: {
|
//客户编号
|
customerId: '',
|
//客户名称
|
customerName: '',
|
//项目名称
|
project: '',
|
},
|
flowCard: {
|
//可报工数量
|
quantity: ''
|
},
|
|
|
})
|
|
//定义接收加载表头下拉数据
|
const titleSelectJson = ref({
|
deviceType: [],
|
teamsType: [],
|
processType: [],
|
thisProcessType: [],
|
mateProcessType: [],
|
})
|
|
//表尾求和
|
const sumNum = (list, field) => {
|
let count = 0
|
list.forEach(item => {
|
count += Number(item[field])
|
})
|
return count.toFixed(2)
|
}
|
|
const form = reactive({
|
processId: 'NG24022302A01/1'
|
})
|
|
const optionVal = ref('')
|
const options = [
|
{
|
value: '切割',
|
label: '切割',
|
},
|
{
|
value: '磨边',
|
label: '磨边',
|
},
|
{
|
value: '钢化',
|
label: '钢化',
|
},
|
]
|
|
//班次
|
const classesVal = ref('早班')
|
const classesOption = [
|
{
|
value: '早班',
|
label: '早班',
|
},
|
{
|
value: '晚班',
|
label: '晚班',
|
},
|
]
|
|
|
//子组件接收参数
|
const gridOptions = reactive({
|
border: "full",//表格加边框
|
keepSource: true,//保持源数据
|
align: 'center',//文字居中
|
stripe: true,//斑马纹
|
rowConfig: {isCurrent: true, isHover: true, height: 30},//鼠标移动或选择高亮
|
id: 'CustomerList',
|
showFooter: true,//显示脚
|
printConfig: {},
|
importConfig: {},
|
exportConfig: {},
|
scrollY: {enabled: true},//开启虚拟滚动
|
showOverflow: true,
|
columnConfig: {
|
resizable: true,
|
useKey: true
|
},
|
filterConfig: { //筛选配置项
|
// remote: true
|
},
|
customConfig: {
|
storage: true
|
},
|
editConfig: {
|
trigger: 'click',
|
mode: 'row',
|
showStatus: true
|
},//表头参数
|
columns: [
|
// {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
|
{
|
field: 'order_number',
|
width: 90,
|
title: '序号',
|
filters: [{data: ''}],
|
slots: {filter: 'num1_filter'},
|
filterMethod: filterChanged
|
},
|
{
|
field: 'glass_child',
|
width: 120,
|
title: '单片名称',
|
showOverflow: "ellipsis",
|
filters: [{data: ''}],
|
slots: {filter: 'num1_filter'},
|
filterMethod: filterChanged
|
},
|
{
|
field: 'technology_number',
|
width: 90,
|
title: '标记',
|
filters: [{data: ''}],
|
slots: {filter: 'num1_filter'},
|
filterMethod: filterChanged
|
},
|
{
|
field: 'glass_address',
|
width: 100,
|
title: '片标记',
|
filters: [{data: ''}],
|
slots: {filter: 'num1_filter'},
|
filterMethod: filterChanged
|
},
|
{
|
field: 'quantity_card',
|
width: 110,
|
title: '流程卡数量',
|
filters: [{data: ''}],
|
slots: {filter: 'num1_filter'},
|
showOverflow: "ellipsis",
|
filterMethod: filterChanged
|
},
|
{
|
field: 'child_width',
|
width: 70,
|
title: '宽',
|
filters: [{data: ''}],
|
slots: {filter: 'num1_filter'},
|
filterMethod: filterChanged
|
},
|
{
|
field: 'child_height',
|
width: 70,
|
title: '高',
|
filters: [{data: ''}],
|
slots: {filter: 'num1_filter'},
|
filterMethod: filterChanged
|
},
|
{
|
field: 'shape',
|
width: 70,
|
title: '形状',
|
filters: [{data: ''}],
|
slots: {filter: 'num1_filter'},
|
showOverflow: "ellipsis",
|
filterMethod: filterChanged
|
},
|
{field: 'quantity', width: 120, title: '上工完工数量',},
|
{
|
field: 'completedQuantity', width: 100, title: '完工数量',
|
editRender: {
|
name: 'input',
|
attrs: {placeholder: ''},
|
},
|
|
},
|
{
|
field: 'breakageNumber', width: 100, title: '次破数量',
|
editRender: {
|
name: 'input',
|
attrs: {placeholder: ''}
|
}
|
},
|
{field: 'available', width: 80, title: '可利用', editRender: {name: 'input', attrs: {placeholder: ''}}},
|
{field: 'returnProcess', width: 100, title: '退回工序', editRender: {name: 'input', attrs: {placeholder: ''}}},
|
{
|
field: 'reasonType', width: 100, title: '次破类型',
|
editRender: {name: 'input', attrs: {placeholder: '', type: 'selected'}}
|
},
|
{
|
field: 'reasonDamage', width: 100, title: '次破原因',
|
editRender: {name: 'input', attrs: {placeholder: ''}}
|
},
|
{
|
field: 'responsibleProcess', width: 100, title: '责任工序',
|
editRender: {},
|
slots: {default: 'reportingWordSort_default', edit: 'reportingWordSort'}
|
//editRender: {name: 'input', attrs: {placeholder: '',type: 'selected'}},
|
|
},
|
{
|
field: 'responsibleEquipment',
|
width: 100,
|
title: '责任设备',
|
editRender: {},
|
slots: {default: 'reportingDeviceSort_default', edit: 'reportingDeviceSort'}
|
// editRender: {name: 'input', attrs: {placeholder: ''}}
|
},
|
|
{
|
field: 'responsibleTeam', width: 100, title: '责任班组',
|
editRender: {name: 'input', attrs: {placeholder: ''}}
|
},
|
{
|
field: 'responsibilityPersonnel',
|
width: 100,
|
title: '责任人员',
|
editRender: {name: 'input', attrs: {placeholder: ''}}
|
|
},
|
{field: 'completed', width: 90, title: '已完工',},
|
{field: 'onceBroken', width: 90, title: '已次破',},
|
|
],
|
//表单验证
|
editRules: {},
|
toolbarConfig: {//表头按钮
|
buttons: [
|
// {code: 'empty', name: '清空报工数量'},
|
// {code: 'sameCompletion', name: '完工相同'},
|
// {code: 'sameDamage', name: '次破相同'},
|
// {code: 'sameOneCompletion', name: '完工一列相同'},
|
// {code: 'sameOneDamage', name: '次破一列相同'},
|
{code: 'print_lck', name: '保存', status: 'primary', icon: 'vxe-icon-save'},
|
{code: 'print_lck', name: '保存并审核', status: 'primary', icon: 'vxe-icon-save'},
|
],
|
// import: false,
|
// export: true,
|
// print: true,
|
zoom: true,
|
custom: true
|
},
|
data: [],//table body实际数据
|
//脚部求和
|
footerMethod({columns, data}) {//页脚函数
|
let footList = ['', '', '', '', '']
|
return [
|
columns.map((column, columnIndex) => {
|
if (columnIndex === 0) {
|
return '合计:'
|
}
|
if (footList.includes(column.field)) {
|
return sumNum(data, column.field)
|
}
|
return ''
|
})
|
]
|
}
|
|
})
|
|
//第一次加载数据
|
|
request.post(`/reportingWork/selectProcess`).then((res) => {
|
|
if (res.code == 200) {
|
titleSelectJson.value.processType = res.data.process;
|
//console.log(titleSelectJson.value.processType)
|
} else {
|
ElMessage.warning(res.msg)
|
}
|
})
|
|
//下拉款选择工序时查询
|
const getWork = () => {
|
|
let processId = form.processId
|
if (processId.indexOf("/") < 0) {
|
|
ElMessage.success("请输入正确格式流程卡")
|
return
|
}
|
let indexOfChar = processId.indexOf("/")
|
let leftString = processId.slice(0, indexOfChar)
|
if (leftString.length != 13) {
|
ElMessage.success("请输入正确位数的流程卡")
|
return
|
}
|
//工序
|
let process = titleUploadData.value.thisProcess
|
if (process == "" || process == null) {
|
|
ElMessage.success("请选择工序")
|
return
|
}
|
|
if (titleSelectJson.value.thisProcessType.indexOf(process) == -1 && process != "切割" && titleSelectJson.value.thisProcessType != "") {
|
ElMessage.success("此工序不属于该流程卡")
|
return
|
}
|
//流程卡号
|
let processIdStr = processId.substring(0, 13);
|
//层号
|
let technologyStr = processId.substring(14);
|
|
request.post(`/reportingWork/addSelectLastWork/${processIdStr}/${technologyStr}/${process}`).then((res) => {
|
if (res.code == 200) {
|
//表头赋值
|
titleUploadData.value = res.data.data
|
//设备下拉框
|
titleSelectJson.value.deviceType = res.data.device
|
//班组下拉框
|
titleSelectJson.value.teamsType = res.data.teams
|
//当前流程卡工序
|
titleSelectJson.value.thisProcessType = res.data.thisProcess
|
//报工时间默认当天
|
const today = new Date
|
today.setTime(today.getTime())
|
titleUploadData.value.reportingWorkDate = today.getFullYear() +
|
'-' + ("0" + (today.getMonth() + 1)).slice(-2)
|
+ '-' + ("0" + today.getDate()).slice(-2)
|
//绑定下方表格
|
xGrid.value.reloadData(res.data.Detail)
|
} else {
|
ElMessage.warning(res.msg)
|
}
|
})
|
}
|
|
//判断完工次破数量是否满足条件
|
const verifyNum = () => {
|
const $grid = xGrid.value
|
const table = $grid.getTableData().fullData
|
//console.log(table)
|
let sum = 0;
|
let sumBreak = 0;
|
table.forEach((item) => {
|
if (item.completedQuantity == null || item.completedQuantity == "") {
|
item.completedQuantity = 0;
|
}
|
if (item.breakageNumber == null || item.breakageNumber == "") {
|
item.breakageNumber = 0;
|
}
|
|
if (item.quantity < item.completedQuantity) {
|
ElMessage.success("序号" + item.order_number + "的数量不能大于上工序数量")
|
|
|
} else if (item.breakageNumber * 1 + item.completedQuantity * 1 > item.quantity * 1) {
|
ElMessage.success("请输入序号" + item.order_number + "正确的完工或次破数量")
|
}
|
|
sum = item.completedQuantity * 1 + sum * 1
|
|
sumBreak = item.breakageNumber * 1 + sumBreak * 1
|
|
})
|
titleUploadData.value.thisCompletedQuantity = sum
|
titleUploadData.value.thisWornQuantity = sumBreak
|
}
|
|
|
const ptypeChangeEvent = (row) => {
|
// for (let i = 0; i < row.length; i++){
|
//
|
// let process=row[i].responsibleProcess
|
// }
|
}
|
</script>
|
|
<template>
|
<div style="height: 100%;width: 100%">
|
<div id="head" style="height: 5%;width: 100%;margin-bottom: 5px">
|
<el-input v-model="form.processId" placeholder="流程卡号" style="width: 200px" @keyup.enter.native="getWork"/>
|
|
<el-select v-model="titleUploadData.thisProcess" clearable placeholder="请选择工序" style="width: 120px"
|
@change="getWork">
|
<el-option
|
v-for="item in titleSelectJson['processType']"
|
:key="item.id"
|
:label="item.basic_name"
|
:value="item.basic_name"
|
/>
|
</el-select>
|
|
<el-button type="primary">审核通过</el-button>
|
<el-button type="primary">审核不通过</el-button>
|
|
<label>流程卡面积：xxx平方米</label>
|
</div>
|
<div style="background-color: white;margin-bottom: 5px;height: 17%;width: 100%">
|
<el-row>
|
<el-col :span="2">
|
<el-text>销售单号：</el-text>
|
</el-col>
|
<el-col :span="3">
|
<el-text>{{ titleUploadData.orderId }}</el-text>
|
</el-col>
|
<el-col :span="2">
|
<el-text>生产订单号：</el-text>
|
</el-col>
|
<el-col :span="3">
|
<el-text>{{ titleUploadData.productionId }}</el-text>
|
</el-col>
|
<el-col :span="2">
|
<el-text>客户编码：</el-text>
|
</el-col>
|
<el-col :span="2">
|
<el-text>{{ titleUploadData.order.customerId }}</el-text>
|
</el-col>
|
<el-col :span="2">
|
<el-text>客户名称：</el-text>
|
</el-col>
|
<el-col :span="3">
|
<el-text class="customClass">{{ titleUploadData.order.customerName }}</el-text>
|
|
</el-col>
|
<el-col :span="2">
|
<el-text>项目名称：</el-text>
|
</el-col>
|
<el-col :span="3">
|
<el-text wrap-text="false">{{ titleUploadData.order.project }}</el-text>
|
</el-col>
|
|
</el-row>
|
<el-row>
|
<el-col :span="2">
|
<el-text>报工设备：</el-text>
|
</el-col>
|
<el-col :span="3">
|
<el-select v-model="titleUploadData.deviceType" clearable placeholder="请选择设备">
|
<el-option
|
v-for="item in titleSelectJson['deviceType']"
|
:key="item.id"
|
:label="item.basicName"
|
:value="item.basicName"
|
/>
|
</el-select>
|
</el-col>
|
<el-col :span="2">
|
<el-text>上工序：</el-text>
|
</el-col>
|
<el-col :span="3">
|
|
<el-text>{{ titleUploadData.previousProcess }}</el-text>
|
</el-col>
|
<el-col :span="2">
|
<el-text>可报工数量：</el-text>
|
</el-col>
|
<el-col :span="2">
|
<el-text>{{ titleUploadData.flowCard.quantity }}</el-text>
|
|
</el-col>
|
<el-col :span="2">
|
<el-text>本工序完工：</el-text>
|
</el-col>
|
<el-col :span="3">
|
<el-text>{{ titleUploadData.thisCompletedQuantity }}</el-text>
|
</el-col>
|
<el-col :span="2">
|
<el-text>本工序次破：</el-text>
|
</el-col>
|
<el-col :span="3">
|
<el-text>{{ titleUploadData.thisWornQuantity }}</el-text>
|
</el-col>
|
|
</el-row>
|
<el-row>
|
<el-col :span="2">
|
<el-text>报工班组：</el-text>
|
</el-col>
|
<el-col :span="3">
|
<el-select v-model="titleUploadData.teamsType" clearable placeholder="请选择班组">
|
<el-option
|
v-for="item in titleSelectJson['teamsType']"
|
:key="item.id"
|
:label="item.basicName"
|
:value="item.basicName"
|
/>
|
</el-select>
|
</el-col>
|
<el-col :span="2">
|
<el-text>班次：</el-text>
|
</el-col>
|
<el-col :span="3">
|
<el-select v-model="classesVal" class="processesSt" placeholder="">
|
<el-option
|
v-for="item in classesOption"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-col>
|
<el-col :span="2">
|
<el-text>下工序：</el-text>
|
</el-col>
|
<el-col :span="2">
|
<el-text>{{ titleUploadData.nextProcess }}</el-text>
|
|
</el-col>
|
<el-col :span="2">
|
<el-text>报工日期：</el-text>
|
</el-col>
|
<el-col :span="3">
|
<el-date-picker
|
v-model="titleUploadData.reportingWorkDate"
|
placeholder=""
|
style="width: 100%"
|
type="date"
|
/>
|
</el-col>
|
<el-col :span="2">
|
<el-text>备注：</el-text>
|
</el-col>
|
<el-col :span="3">
|
|
</el-col>
|
|
</el-row>
|
</div>
|
<div class="main-div-customer" style="width: 100%;height: 70%">
|
<vxe-grid
|
ref="xGrid"
|
class="mytable-scrollbar"
|
max-height="100%"
|
size="small"
|
v-bind="gridOptions"
|
@filter-change="filterChanged"
|
@edit-closed="verifyNum"
|
|
>
|
<!-- 责任工序-->
|
<template #reportingWordSort="{ row }">
|
<vxe-select v-model="row.responsibleProcess" transfer @change="ptypeChangeEvent(row)">
|
<vxe-option v-for="item in titleSelectJson.thisProcessType" :key="item" :label="item" :value="item"/>
|
</vxe-select>
|
</template>
|
<template #reportingWordSort_default="{ row }">
|
<span>{{ row.responsibleProcess }}</span>
|
</template>
|
<!-- 责任设备 -->
|
<template #reportingDeviceSort="{ row }">
|
<vxe-select v-model="row.responsibleEquipment" transfer>
|
<vxe-option v-for="item in titleSelectJson.mateProcessType" :key="item" :label="item" :value="item"/>
|
</vxe-select>
|
</template>
|
<template #reportingDeviceSort_default="{ row }">
|
<span>{{ row.responsibleEquipment }}</span>
|
</template>
|
|
<template #num1_filter="{ column, $panel }">
|
<div>
|
<div v-for="(option, index) in column.filters" :key="index">
|
<input v-model="option.data" type="type" @input="changeFilterEvent($event, option, $panel)"/>
|
</div>
|
</div>
|
</template>
|
|
|
</vxe-grid>
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
|
|
.processCard {
|
width: 140px;
|
}
|
|
.processesSt {
|
height: 33px;
|
width: 120px;
|
background-color: #409eff;
|
color: white;
|
border: none;
|
border-radius: 5px;
|
}
|
|
#titleTable tr, #titleTable td {
|
border: 1px solid #000;
|
}
|
|
#titleTable {
|
border-collapse: collapse;
|
text-align: center;
|
width: 100%;
|
height: 100%;
|
}
|
|
#titleTable td {
|
width: 100px;
|
height: 30px;
|
}
|
|
#titleTable td:nth-child(1) {
|
width: 100px;
|
height: 30px;
|
}
|
|
#titleTable td:nth-child(2) {
|
width: 100px;
|
}
|
|
.chaxun {
|
background-color: #D5EAFF;
|
border: none;
|
}
|
|
.customClass {
|
white-space: nowrap; /* 不换行 */
|
}
|
|
.el-text {
|
|
}
|
|
.el-col .el-select {
|
width: 100%;
|
height: 100%;
|
}
|
|
.el-col {
|
text-align: center;
|
border: #181818 1px solid;
|
}
|
|
</style>
|
