<script setup>
|
import {onMounted, reactive, ref, watch} from "vue";
|
import {changeFilterEvent, filterChanged} from "@/hook"
|
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,
|
rowConfig: {isCurrent: true, isHover: true,height: 30},//鼠标移动或选择高亮
|
virtualScroll: true, // 开启虚拟滚动功能
|
id: 'OrderList',
|
printConfig: {},
|
importConfig: {},
|
exportConfig: {},
|
scrollY:{ enabled: true,gt:13 },//开启虚拟滚动
|
//scrollX:{ enabled: true,gt:15 },//开启虚拟滚动
|
|
columnConfig: {
|
resizable: true,
|
useKey: true
|
},
|
|
customConfig: {
|
storage: true
|
},
|
|
|
columns:[
|
|
],
|
mergeCells:[]
|
|
|
})
|
|
let props = defineProps({
|
orderId:null
|
})
|
const columns = [
|
{field: 'order_number',fixed:"left", width: 90,title: '订单序号',showOverflow:"ellipsis"},
|
// {type:'expand',fixed:"left",slots: { content:'content' },width: 50},
|
{field: 'product_name', width: 150, title: '产品名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod: filterChanged},
|
{field: 'glass_child',width: 130, title: '单片名称' ,filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod: filterChanged},
|
{field: 'order_type', width: 120,title: '订单类型',filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod: filterChanged},
|
{field: 'process_id',width: 110, title: '流程卡号',filters:[{ data: '' }],slots: { filter: 'num1_filter' },filterMethod: filterChanged},
|
|
{field: 'technology_number', width: 90,title: '小片顺序',showOverflow:"ellipsis"},
|
{field: 'quantity', width: 90,title: '数量'},
|
{field: 'shippedQuantity',width: 120, title: '发货数量'},
|
{field: 'inventory',width: 120, title: '入库数量'},
|
{field: 'inventoryArea',width: 120, title: '入库面积'},
|
{field: 'broken_num',width: 90, title: '次破数量'},
|
]
|
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((res) => {
|
if (res.code == 200) {
|
|
gridOptions.columns = JSON.parse(JSON.stringify(columns))
|
res.data.title.forEach(item =>{
|
let column = {slots: { default: 'quantitySum' }, width: 90,title: 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
|
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" @input="changeFilterEvent($event, option, $panel)"/>
|
</div>
|
</div>
|
</template>
|
|
<template #quantitySum="{ row,column }">
|
<span>{{ quantitySum(row,column) }} </span>
|
</template>
|
|
</vxe-grid>
|
</div>
|
</template>
|
|
<style scoped>
|
|
</style>
|
