| | |
| | | import {useI18n} from "vue-i18n" |
| | | import request from "@/utils/request" |
| | | import {ElMessage} from "element-plus" |
| | | import {copyTableCellValue} from "@/hook/copyTableCellValue"; |
| | | const { t } = useI18n() |
| | | const xGrid = ref() |
| | | const gridOptions = reactive({ |
| | |
| | | printConfig: {}, |
| | | importConfig: {}, |
| | | exportConfig: {}, |
| | | scrollY:{ enabled: true,gt:13 },//开启虚拟滚动 |
| | | scrollX:{ enabled: true,gt:15 },//开启虚拟滚动 |
| | | // scrollY:{ enabled: true,gt:13 },//开启虚拟滚动 |
| | | // scrollX:{ enabled: true,gt:15 },//开启虚拟滚动 |
| | | filterConfig: { //筛选配置项 |
| | | // remote: true |
| | | }, |
| | |
| | | columns:[ |
| | | |
| | | ], |
| | | mergeCells:[], |
| | | toolbarConfig: { |
| | | slots:{ |
| | | buttons: "title" |
| | | }, |
| | | zoom: true, |
| | | /*custom: true*/ |
| | | custom: true |
| | | }, |
| | | spanMethod ({ row, rowIndex,column, columnIndex}) { |
| | | const field = column.field |
| | | if (xGrid.value.isFilter() ) { |
| | | return { rowspan: 1, colspan: 1 } |
| | | } |
| | | if(mergeCells.value!==undefined){ |
| | | if(mergeCells.value[field] !== undefined && mergeCells.value[field][rowIndex+"_"+field] !== undefined){ |
| | | return mergeCells.value[field][rowIndex+"_"+field] |
| | | } |
| | | } |
| | | |
| | | return { rowspan: 1, colspan: 1 } |
| | | }, |
| | | cellClassName ({ row, column,columnIndex}) { |
| | | if (columnIndex>10 && row.thisQuantity*1 === row.reportWorkQuantity[column.title]*1){ |
| | | return 'row-green' |
| | | if(column.field === undefined){ |
| | | return null |
| | | } |
| | | if (column?.field.indexOf('reportWorkQuantity.')>-1 && row.thisQuantity*1 === row.reportWorkQuantity[column.title]*1){ |
| | | return 'row-green' |
| | | } |
| | | return null |
| | | }, |
| | |
| | | const list = ref([]) |
| | | |
| | | let props = defineProps({ |
| | | orderId:null |
| | | orderId:null, |
| | | row: {}, |
| | | processId: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: 'child_width', width: 90,title: t('order.width'),showOverflow:"ellipsis"}, |
| | | {field: 'child_height', width: 90,title: t('order.height'),showOverflow:"ellipsis"}, |
| | | {field: 'quantity', width: 90,title: t('order.quantity')}, |
| | | {field: 'glassQuantity', width: 90,title: t('order.glassQuantity')}, |
| | | {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: 'technology_number', width: 90,title: t('processCard.technologyNumber'),showOverflow:"ellipsis",filters:[{ data: '' }],slots: { filter: 'num1_filter' }}, |
| | | {field: 'quantity',slots: { default: 'show'}, width: 90,title: t('order.quantity')}, |
| | | {field: 'thisQuantity', width: 90,title: t('order.glassQuantity')}, |
| | | {field: 'gross_area',slots: { default: 'show'}, width: 90,title: t('order.area')}, |
| | | {field: 'inventory',slots: { default: 'show'},width: 120, title: t('report.inventoryNum')}, |
| | | {field: 'inventoryArea',slots: { default: 'show'},width: 120, title: t('report.StorageArea')}, |
| | | {field: 'broken_num',width: 90, title: t('reportingWorks.quantityBroken')}, |
| | | ] |
| | | let column = [0,1,3,6,7,8,10,11,12,13] |
| | | //let column = [0,2,3,5,7,8,9] |
| | | let column = ['product_name','order_type','process_id','quantity','gross_area','inventory','inventoryArea'] |
| | | |
| | | |
| | | onMounted(()=>{ |
| | |
| | | watch(()=>props.orderId,(newValue)=>{ |
| | | getWorkOrder() |
| | | }) |
| | | |
| | | const show = (row,column ) =>{ |
| | | return row[column.field+'Show'] |
| | | } |
| | | |
| | | let mergeCells = ref() |
| | | const getWorkOrder = () => { |
| | |
| | | gridOptions.columns.forEach(item =>{ |
| | | item.filterMethod = filterChanged |
| | | }) |
| | | list.value = ['quantity','inventory','inventoryArea','gross_area','shippedQuantity','glassQuantity'] |
| | | |
| | | list.value = ['quantity','thisQuantity','inventory','inventoryArea','gross_area','glassQuantity','broken_num'] |
| | | |
| | | const processList = { |
| | | title:t('report.workingProcedure'), |
| | | field:'process', |
| | | children:[] |
| | | } |
| | | 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) |
| | | processList.children.push(column) |
| | | |
| | | }) |
| | | gridOptions.columns.push(processList) |
| | | res.data.data.forEach(item => { |
| | | item.reportWorkQuantity=JSON.parse(item.reportWorkQuantity) |
| | | item.reportWorkQuantityCount=JSON.parse(item.reportWorkQuantityCount) |
| | | item.reportWorkQuantityShow=JSON.parse(item.reportWorkQuantityShow) |
| | | item.reportWorkQuantityShow=JSON.parse(item.reportWorkQuantityShow) |
| | | }) |
| | | |
| | | await xGrid.value.loadData(res.data.data) |
| | | await xGrid.value.setMergeCells(res.data.mergeCells) |
| | | console.log(res.data.data) |
| | | if (props.processId!=null && props.processId!=""){ |
| | | const processIdData = res.data.data.filter(item => item.process_id === props.processId) |
| | | await xGrid.value.loadData(processIdData) |
| | | }else { |
| | | await xGrid.value.loadData(res.data.data) |
| | | } |
| | | mergeCells.value = res.data.mergeCells |
| | | gridOptions.loading = false |
| | | |
| | |
| | | |
| | | const filterChange = () =>{ |
| | | if(xGrid.value.isFilter()){ |
| | | xGrid.value.clearMergeCells() |
| | | xGrid.value.clearMergeFooterItems() |
| | | }else{ |
| | | xGrid.value.setMergeCells(mergeCells.value) |
| | | xGrid.value.updateFooter() |
| | | } |
| | | |
| | | |
| | | } |
| | | const footSum =(list, field) => { |
| | | if(xGrid.value.isFilter()){ |
| | | return |
| | | } |
| | | let count = 0 |
| | | list.forEach(item => { |
| | | if(field.indexOf('.')>-1){ |
| | | let array = field.split('.') |
| | | count += Number(item[array[0]][array[1]]) || 0 |
| | | //判断是否为筛选状态和非订单合并状态 |
| | | if(xGrid.value.isFilter() ){ |
| | | count += Number(item[array[0]+'Show'][array[1]]) || 0 |
| | | }else{ |
| | | count += Number(item[array[0]][array[1]]) || 0 |
| | | } |
| | | |
| | | }else { |
| | | count += Number(item[field]) || 0 |
| | | if(xGrid.value.isFilter() ) { |
| | | count += Number(item[field+'Show']) || Number(item[field]) || 0 |
| | | } else { |
| | | count += Number(item[field]) || 0 |
| | | } |
| | | } |
| | | }) |
| | | return count.toFixed(2) |
| | | return count.toFixed(2).replace(/\.?0+$/, ''); |
| | | } |
| | | |
| | | const quantitySum = ( row,column )=>{ |
| | |
| | | +')' ) |
| | | //return |
| | | } |
| | | |
| | | const gridEvents = { |
| | | cellDblclick ({row,column}) { |
| | | copyTableCellValue(row,column) |
| | | } |
| | | } |
| | | |
| | | let showTitle = ref(false) |
| | | const changeZoom = ()=> { |
| | | showTitle.value = !showTitle.value |
| | | } |
| | | </script> |
| | | |
| | | <template> |
| | |
| | | size="mini" |
| | | class="mytable-scrollbar" |
| | | ref="xGrid" |
| | | @zoom="changeZoom" |
| | | v-bind="gridOptions" |
| | | v-on="gridEvents" |
| | | > |
| | | <template #num1_filter="{ column, $panel }"> |
| | | <div> |
| | |
| | | <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> |
| | | |
| | | |
| | | </vxe-grid> |
| | | </div> |
| | |
| | | ::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> |