| | |
| | | <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({ |
| | |
| | | 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 |
| | | }, |
| | | mouseConfig:{selected: true}, |
| | | columnConfig: { |
| | | resizable: true, |
| | | useKey: true |
| | |
| | | }, |
| | | |
| | | |
| | | columns:[ |
| | | |
| | | ], |
| | | mergeCells:[], |
| | | toolbarConfig: { |
| | | slots:{ |
| | | buttons: "title", |
| | | tools: 'type' |
| | | }, |
| | | zoom: true, |
| | | custom: true |
| | | }, |
| | | spanMethod ({ row, rowIndex,column, columnIndex}) { |
| | | const field = column.field |
| | | if (xGrid.value.isFilter() || orderType.value!==1) { |
| | | 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){ |
| | | 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 gridEvents = { |
| | | cellDblclick ({row,column}) { |
| | | if(orderType.value===1){ |
| | | copyTableCellValue(row,column) |
| | | }else{ |
| | | copyTableCellValueShow(row,column) |
| | | } |
| | | } |
| | | } |
| | | |
| | | 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"}, |
| | | {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"}, |
| | | {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: '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: '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: 'grossArea',slots: { default: 'show'}, width: 90,title: t('order.area')}, |
| | | // {field: 'shippedQuantity',slots: { default: 'show'},width: 120, title: t('delivery.deliveryQuantity'),visible:false}, |
| | | // {field: 'shippedArea',slots: { default: 'show'},width: 120, title: t('report.shippedArea'),visible:false}, |
| | | {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,6,7,8,10,11,12,13] |
| | | |
| | | let column = ['order_number','product_name','order_type','quantity','grossArea','Storage','StorageArea'] |
| | | 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.updateFooter() |
| | | break |
| | | } |
| | | case 2 :{ |
| | | xGrid.value.loadData(data.value) |
| | | xGrid.value.clearMergeFooterItems() |
| | | xGrid.value.updateFooter() |
| | | |
| | | break |
| | | } |
| | | case 3:{ |
| | | 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 |
| | | }) |
| | | 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) => { |
| | |
| | | gridOptions.columns.forEach(item =>{ |
| | | item.filterMethod = filterChanged |
| | | }) |
| | | list.value = ['quantity','inventory','inventoryArea','gross_area','shippedQuantity','glassQuantity'] |
| | | list.value = ['quantity','Storage','grossArea','shippedQuantity','shippedArea','glassQuantity','StorageArea','broken_num'] |
| | | title.value = res.data.title |
| | | |
| | | 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) |
| | | |
| | | }) |
| | | console.log(res.data.data) |
| | | 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) |
| | | }) |
| | | |
| | | 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 |
| | | |
| | | } else { |
| | |
| | | } |
| | | |
| | | const filterChange = () =>{ |
| | | if(xGrid.value.isFilter()){ |
| | | xGrid.value.clearMergeCells() |
| | | xGrid.value.clearMergeFooterItems() |
| | | }else{ |
| | | xGrid.value.setMergeCells(mergeCells.value) |
| | | xGrid.value.updateFooter() |
| | | if(orderType.value === 1) { |
| | | if (xGrid.value.isFilter()) { |
| | | //xGrid.value.clearMergeCells() |
| | | xGrid.value.clearMergeFooterItems() |
| | | } else { |
| | | 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() || 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 |
| | | if(xGrid.value.isFilter() || orderType.value!==1) { |
| | | 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 )=>{ |
| | | const reportWorkQuantityCount = row.reportWorkQuantityCount[column.title] || '' |
| | | const reportWorkQuantityShow = row.reportWorkQuantityShow[column.title] || '' |
| | | if(reportWorkQuantityShow===reportWorkQuantityCount){ |
| | | if(reportWorkQuantityShow === reportWorkQuantityCount ){ |
| | | return reportWorkQuantityShow |
| | | } |
| | | |
| | |
| | | +'(' |
| | | +reportWorkQuantityCount |
| | | +')' ) |
| | | //return |
| | | } |
| | | //切换模式单片显示 |
| | | const show = (row,column ) =>{ |
| | | return row[column.field+'Show'] |
| | | } |
| | | |
| | | let showTitle = ref(false) |
| | | const changeZoom = ()=> { |
| | | showTitle.value = !showTitle.value |
| | | } |
| | | |
| | | const rowStyle = ({ row,rowIndex }) => { |
| | | if(row.termination_status==1){ |
| | | return { |
| | | backgroundColor: 'rgb(186 188 192)' |
| | | } |
| | | } |
| | | |
| | | |
| | | } |
| | | </script> |
| | | |
| | |
| | | <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" |
| | | :row-style="rowStyle" |
| | | > |
| | | <template #num1_filter="{ column, $panel }"> |
| | | <div> |
| | |
| | | <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.customerName?'--':'' }} |
| | | {{ row.customerName}} |
| | | {{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> |
| | |
| | | ::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> |