<script setup>
|
import {computed, onMounted, reactive, ref, watch} from "vue";
|
import {changeFilterEvent, filterChanged} from "@/hook"
|
import footSum from "@/hook/footSum"
|
import {useI18n} from "vue-i18n"
|
import request from "@/utils/request"
|
import {ElMessage} from "element-plus"
|
const { t } = useI18n()
|
const xGrid = ref()
|
const gridOptions = reactive({
|
loading:false,
|
border: "full",//表格加边框
|
keepSource: true,//保持源数据
|
align: 'center',//文字居中
|
stripe:true,//斑马纹
|
showOverflow:true,
|
showFooter: true,//显示脚
|
rowConfig: {isCurrent: true, isHover: true,height: 30},//鼠标移动或选择高亮
|
virtualScroll: true, // 开启虚拟滚动功能
|
id: 'Order_Process',
|
printConfig: {},
|
importConfig: {},
|
exportConfig: {},
|
scrollY:{ enabled: true,gt:13 },//开启虚拟滚动
|
//scrollX:{ enabled: true,gt:15 },//开启虚拟滚动
|
filterConfig: { //筛选配置项
|
// remote: true
|
},
|
columnConfig: {
|
resizable: true,
|
useKey: true
|
},
|
|
customConfig: {
|
storage: true
|
},
|
|
|
columns:[
|
|
],
|
mergeCells:[],
|
toolbarConfig: {
|
zoom: true,
|
custom: true
|
},
|
cellClassName ({ row, column,columnIndex}) {
|
if (columnIndex>10 && row.quantity*1 === row.reportWorkQuantity[column.title]*1){
|
return 'row-green'
|
}
|
return null
|
},
|
footerMethod ({ columns, data }) {//页脚函数
|
return[
|
columns.map((column, columnIndex) => {
|
if (columnIndex === 0) {
|
return t('basicData.total')
|
}
|
if (list.value.includes(column.field)) {
|
return footSum(data, column.field)
|
}
|
return ''
|
})
|
]
|
}
|
})
|
const list = ref([])
|
|
let props = defineProps({
|
orderId:null
|
})
|
const columns = [
|
{field: 'order_number',fixed:"left", width: 90,title: t('order.OrderNum'),showOverflow:"ellipsis"},
|
// {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
|
{field: 'product_name', width: 150, title: t('order.product'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
|
{field: 'glass_child',width: 130, title: t('reportingWorks.glassChild') ,filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
|
{field: 'order_type', width: 120,title: t('order.orderType'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
|
{field: 'process_id',width: 110, title: t('processCard.processId'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
|
{field: 'technology_number', width: 90,title: t('processCard.technologyNumber'),showOverflow:"ellipsis"},
|
{field: 'quantity', width: 90,title: t('order.quantity')},
|
{field: 'gross_area', width: 90,title: t('order.area')},
|
{field: 'shippedQuantity',width: 120, title: t('delivery.deliveryQuantity')},
|
{field: 'inventory',width: 120, title: t('productStock.inventoryQuantity')},
|
{field: 'inventoryArea',width: 120, title: t('report.inventoryArea')},
|
{field: 'broken_num',width: 90, title: t('reportingWorks.quantityBroken')},
|
]
|
let column = [0,1,3,6,7,8,9]
|
|
|
onMounted(()=>{
|
getWorkOrder()
|
})
|
|
watch(()=>props.orderId,(newValue)=>{
|
getWorkOrder()
|
})
|
|
|
|
const getWorkOrder = () => {
|
request.post(`/report/processCardProgress/${props.orderId}`,column).then(async (res) => {
|
if (res.code == 200) {
|
|
gridOptions.columns = JSON.parse(JSON.stringify(columns))
|
gridOptions.columns.forEach(item =>{
|
item.filterMethod = filterChanged
|
})
|
list.value = ['quantity']
|
res.data.title.forEach((item,index) =>{
|
list.value.push('reportWorkQuantity.'+item.process)
|
let column = {slots: { default: 'quantitySum'},
|
width: 90,
|
title: item.process,
|
field:'reportWorkQuantity.'+item.process}
|
gridOptions.columns.push(column)
|
})
|
res.data.data.forEach(item => {
|
item.reportWorkQuantity=JSON.parse(item.reportWorkQuantity)
|
item.reportWorkQuantityCount=JSON.parse(item.reportWorkQuantityCount)
|
})
|
//gridOptions.mergeCells= res.data.mergeCells
|
await xGrid.value.loadData(res.data.data)
|
} else {
|
ElMessage.warning(res.msg)
|
}
|
})
|
}
|
|
const quantitySum = ( row,column )=>{
|
const reportWorkQuantity = row.reportWorkQuantity[column.title] || 0
|
const reportWorkQuantityCount = row.reportWorkQuantityCount[column.title] || 0
|
if(reportWorkQuantity===reportWorkQuantityCount){
|
return reportWorkQuantity
|
}
|
|
return (reportWorkQuantity
|
+'('
|
+reportWorkQuantityCount
|
+')' )
|
//return
|
}
|
</script>
|
|
<template>
|
<div style="width: 100%;height: 100%">
|
<vxe-grid
|
height="100%"
|
size="mini"
|
class="mytable-scrollbar"
|
ref="xGrid"
|
v-bind="gridOptions"
|
>
|
<template #num1_filter="{ column, $panel }">
|
<div>
|
<div v-for="(option, index) in column.filters" :key="index">
|
<input
|
type="type"
|
v-model="option.data"
|
@keyup.enter.native="$panel.confirmFilter()"
|
@input="changeFilterEvent($event, option, $panel)"/>
|
</div>
|
</div>
|
</template>
|
|
<template #quantitySum="{ row,column }">
|
<span>{{ quantitySum(row,column) }} </span>
|
</template>
|
|
</vxe-grid>
|
</div>
|
</template>
|
|
<style scoped>
|
::v-deep(.vxe-grid .vxe-body--column.row-green) {
|
background-color: #D5EAFF;
|
}
|
|
</style>
|
