<script setup>
|
import {computed, onMounted, reactive, ref, watch} from "vue";
|
import {addListener,destroyAreaBox} from "@/hook/mouseMoveHomePage";
|
import {changeFilterEvent, filterChanged} from "@/hook"
|
import {useI18n} from "vue-i18n"
|
import request from "@/utils/request"
|
import {ElMessage} from "element-plus"
|
import VxeUI from "vxe-pc-ui";
|
import {copyTableCellValue,copyTableCellValueShow} from "@/hook/copyTableCellValue";
|
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
|
},
|
mouseConfig:{selected: true},
|
columnConfig: {
|
resizable: true,
|
useKey: true
|
},
|
|
customConfig: {
|
storage: true
|
},
|
|
|
mergeCells:[],
|
toolbarConfig: {
|
slots:{
|
buttons: "title",
|
tools: 'type'
|
},
|
zoom: true,
|
// custom: true
|
},
|
cellClassName ({ row, column,columnIndex}) {
|
if (columnIndex>10 && row.thisQuantity*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 gridEvents = {
|
cellDblclick ({row,column}) {
|
if(orderType.value===1){
|
copyTableCellValue(row,column)
|
}else{
|
copyTableCellValueShow(row,column)
|
}
|
|
}
|
}
|
|
const list = ref([])
|
|
let props = defineProps({
|
orderId:null,
|
row: {}
|
})
|
const columns = [
|
{field: 'order_number',fixed:"left", width: 90,title: t('order.OrderNum'),showOverflow:"ellipsis",filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
|
// {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",filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
|
{field: 'child_width', width: 90,title: t('order.width'),showOverflow:"ellipsis",filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
|
{field: 'child_height', width: 90,title: t('order.height'),showOverflow:"ellipsis",filters:[{ data: '' }],slots: { filter: 'num1_filter' }},
|
{field: 'quantity',slots: { default: 'show'}, width: 90,title: t('order.quantity')},
|
{field: 'glassQuantity', width: 90,title: t('order.glassQuantity')},
|
{field: 'grossArea',slots: { default: 'show'}, width: 90,title: t('order.area')},
|
{field: 'shippedQuantity',slots: { default: 'show'},width: 120, title: t('delivery.deliveryQuantity')},
|
{field: 'shippedArea',slots: { default: 'show'},width: 120, title: t('report.shippedArea')},
|
{field: 'Storage',slots: { default: 'show'},width: 120, title: t('report.inventoryNum')},
|
// {field: 'inventoryArea',slots: { default: 'show'},width: 120, title: t('report.inventoryArea')},
|
{field: 'StorageArea',slots: { default: 'show'},width: 120, title: t('report.StorageArea')},
|
{field: 'broken_num',width: 90, title: t('reportingWorks.quantityBroken')},
|
]
|
let column = [0,1,3,8,10,11,12,13,14]
|
let orderType = ref(1)
|
|
onMounted(()=>{
|
getWorkOrder()
|
//addListener(xGrid.value,gridOptions)
|
})
|
|
watch(()=>props.orderId,(newValue)=>{
|
getWorkOrder()
|
})
|
|
let title = ref([])
|
const changeProcessType = (type) => {
|
switch (orderType.value) {
|
case 1 :{
|
xGrid.value.loadData(data.value)
|
xGrid.value.setMergeCells(mergeCells.value)
|
xGrid.value.updateFooter()
|
break
|
}
|
case 2 :{
|
xGrid.value.loadData(data.value)
|
xGrid.value.clearMergeCells()
|
xGrid.value.clearMergeFooterItems()
|
xGrid.value.updateFooter()
|
|
break
|
}
|
case 3:{
|
xGrid.value.clearMergeCells()
|
xGrid.value.clearMergeFooterItems()
|
xGrid.value.updateFooter()
|
const lastProcess = title.value[title.value.length-1].process
|
const filter = data.value.filter(item => {
|
const lastFinish = parseInt(item['reportWorkQuantityShow'][lastProcess])
|
const allFinish = item.glassQuantity*1
|
return allFinish>lastFinish
|
})
|
// console.log(filter)
|
xGrid.value.loadData(filter)
|
break
|
}
|
}
|
}
|
|
|
|
let mergeCells = ref()
|
const data = ref([])
|
const getWorkOrder = () => {
|
gridOptions.loading = true
|
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','Storage','gross_area','shippedQuantity','shippedArea','glassQuantity','StorageArea']
|
title.value = res.data.title
|
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)
|
item.reportWorkQuantityShow=JSON.parse(item.reportWorkQuantityShow)
|
})
|
orderType.value = 1
|
await xGrid.value.loadData(res.data.data)
|
await xGrid.value.setMergeCells(res.data.mergeCells)
|
mergeCells.value = res.data.mergeCells
|
data.value = res.data.data
|
gridOptions.loading = false
|
xGrid.value.commitProxy('reset_custom')
|
|
} else {
|
ElMessage.warning(res.msg)
|
}
|
})
|
}
|
|
const filterChange = () =>{
|
if(orderType.value === 1) {
|
if (xGrid.value.isFilter()) {
|
xGrid.value.clearMergeCells()
|
xGrid.value.clearMergeFooterItems()
|
} else {
|
xGrid.value.setMergeCells(mergeCells.value)
|
xGrid.value.updateFooter()
|
}
|
}
|
}
|
const footSum =(list, field) => {
|
|
let count = 0
|
list.forEach(item => {
|
if(field.indexOf('.')>-1){
|
let array = field.split('.')
|
//判断是否为筛选状态和非订单合并状态
|
if(xGrid.value.isFilter() || orderType.value!==1){
|
|
count += Number(item[array[0]+'Show'][array[1]]) || 0
|
}else{
|
count += Number(item[array[0]][array[1]]) || 0
|
}
|
|
}else {
|
count += Number(item[field]) || 0
|
}
|
})
|
return count.toFixed(2).replace(/\.?0+$/, '');
|
}
|
|
const quantitySum = ( row,column )=>{
|
const reportWorkQuantityCount = row.reportWorkQuantityCount[column.title] || ''
|
const reportWorkQuantityShow = row.reportWorkQuantityShow[column.title] || ''
|
if(reportWorkQuantityShow === reportWorkQuantityCount ){
|
return reportWorkQuantityShow
|
}
|
|
return (reportWorkQuantityShow
|
+'('
|
+reportWorkQuantityCount
|
+')' )
|
}
|
//切换模式单片显示
|
const show = (row,column ) =>{
|
return row[column.field+'Show']
|
}
|
|
let showTitle = ref(false)
|
const changeZoom = ()=> {
|
showTitle.value = !showTitle.value
|
}
|
</script>
|
|
<template>
|
<div style="width: 100%;height: 100%">
|
<vxe-grid
|
@filter-change ='filterChange'
|
@zoom="changeZoom"
|
height="100%"
|
size="mini"
|
class="mytable-scrollbar"
|
ref="xGrid"
|
v-bind="gridOptions"
|
v-on="gridEvents"
|
>
|
<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>
|
|
<template #show="{ row,column }">
|
<span>{{ show(row,column) }} </span>
|
</template>
|
|
<template #title>
|
<span style="font-weight: bold" v-show="showTitle">
|
{{ row.orderId }}
|
{{ row.project?'--':'' }}
|
{{row.project}}
|
{{ row.batch?'--':'' }}
|
{{row.batch}}
|
</span>
|
</template>
|
|
<template #type>
|
<vxe-select @change="changeProcessType" v-model="orderType" >
|
<vxe-option :value="1" :label="t('order.merge')"></vxe-option>
|
<vxe-option :value="2" :label="t('order.layer')"></vxe-option>
|
<vxe-option :value="3" :label="t('order.notFinish')"></vxe-option>
|
</vxe-select>
|
</template>
|
</vxe-grid>
|
</div>
|
</template>
|
|
<style scoped>
|
::v-deep(.vxe-grid .vxe-body--column.row-green) {
|
background-color: #D5EAFF;
|
}
|
.vxe-grid {
|
/* 禁用浏览器默认选中 */
|
-webkit-user-select: none;
|
-moz-user-select: none;
|
-ms-user-select: none;
|
user-select: none;
|
transform: translateZ(0);
|
}
|
|
</style>
|
