| New file |
| | |
| | | <script setup> |
| | | |
| | | import request from "@/utils/request" |
| | | import {ElDatePicker, ElMessage} from "element-plus" |
| | | import {nextTick, onMounted, onUnmounted, reactive, ref, watch} from "vue" |
| | | import {Search} from "@element-plus/icons-vue" |
| | | import {useRoute, useRouter} from 'vue-router' |
| | | import {changeFilterEvent, filterChanged} from "@/hook" |
| | | import {addListener} from "@/hook/mouseMove"; |
| | | import { useI18n } from 'vue-i18n' |
| | | import footSum from "@/hook/footSum"; |
| | | import {VxeUI} from "vxe-pc-ui"; |
| | | import useOrderInfoStore from "@/stores/sd/order/orderInfo" |
| | | import {Printer} from "@element-plus/icons-vue/global"; |
| | | import PrintProcess from "@/components/pp/PrintProcess.vue"; |
| | | import PrintCustomLabelXJ from "@/components/pp/PrintCustomLabelTwo.vue"; |
| | | import companyInfo from "@/stores/sd/companyInfo"; |
| | | //语言获取 |
| | | const { t } = useI18n() |
| | | let router=useRouter() |
| | | const route = useRoute() |
| | | const orderInfo = useOrderInfoStore() |
| | | const company = companyInfo() |
| | | |
| | | const dialogTableVisible = ref(false) |
| | | const dialogTableVisibleLabel = ref(false) |
| | | |
| | | let props = defineProps({ |
| | | orderId:null |
| | | }) |
| | | onMounted(()=>{ |
| | | getTags() |
| | | filterData.value = orderInfo.selectProcessCardFilter.data |
| | | orderInfo.selectProcessCardFilter.list.forEach(item =>{ |
| | | xGrid.value.getColumnByField(item.field).filters = item.column.filters |
| | | }) |
| | | //启用表格拖动选中 |
| | | addListener(xGrid.value, gridOptions) |
| | | if(props.orderId===null || props.orderId===undefined || props.orderId===''){ |
| | | |
| | | }else{ |
| | | form.orderId = props.orderId |
| | | getWorkOrder() |
| | | } |
| | | if(route.query.orderId===null || route.query.orderId===undefined || route.query.orderId===''){ |
| | | |
| | | }else { |
| | | form.orderId = route.query.orderId |
| | | getWorkOrder() |
| | | } |
| | | |
| | | }) |
| | | |
| | | //打印流程卡条件 |
| | | let printRow = ref({ |
| | | list: null,//选中的数据 |
| | | printMergeVal: null, |
| | | like: null, |
| | | merge: null, |
| | | printFc:null, |
| | | flashback:null, |
| | | landingSequence:null, |
| | | compound:null |
| | | }) |
| | | |
| | | //表尾求和 |
| | | const sumNum = (list, field) => { |
| | | let count = 0 |
| | | list.forEach(item => { |
| | | count += Number(item[field]) |
| | | }) |
| | | return count.toFixed(2) |
| | | } |
| | | |
| | | |
| | | //筛选条件,有外键需要先定义明细里面的数据 |
| | | let filterData = ref({ |
| | | order: { |
| | | project: '' |
| | | }, |
| | | orderDetail: { |
| | | productId: '', |
| | | productName: '', |
| | | computeGrossArea: '', |
| | | processingNote: '', |
| | | } |
| | | }) |
| | | |
| | | |
| | | //需要合并的列 |
| | | let column = [1,3,8] |
| | | //点击查询 |
| | | const getWorkOrder = () => { |
| | | gridOptions.loading = true |
| | | gridOptions.columns = gridOptions.columns.slice(0, 17); //清除动态生成的列重新查询 |
| | | request.post(`/processCard/PrintProgressProcessCard/${orderInfo.workOrderDate}`, column).then((res) => { |
| | | if (res.code == 200) { |
| | | if (res.data.data.length === 0) { |
| | | ElMessage.warning(t('report.noDataFoundForThisOrder')) |
| | | return |
| | | } |
| | | orderInfo.workOrderDate = res.data.selectDate |
| | | const processList = { |
| | | title:t('report.workingProcedure'), |
| | | field:'process', |
| | | children:[] |
| | | } |
| | | // 动态添加列 |
| | | res.data.title.forEach((item,index) =>{ |
| | | let column = { |
| | | slots: { default: 'quantitySum' }, |
| | | width: 100, |
| | | title: item.process, |
| | | field: `dynamicColumn${index}` // 为动态列添加唯一的 field |
| | | } |
| | | 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) |
| | | }) |
| | | gridOptions.loading = false |
| | | //mergeCells.value = res.data.mergeCell |
| | | xGrid.value.loadData(res.data.data) |
| | | } else { |
| | | gridOptions.loading = false |
| | | ElMessage.warning(res.msg) |
| | | } |
| | | }) |
| | | } |
| | | |
| | | const footSumDynamic = (data, columnTitle) => { |
| | | let sum = 0; |
| | | data.forEach(item => { |
| | | const value = Number(item.reportWorkQuantity[columnTitle]) || 0; // 从 reportWorkQuantity 中提取值并转换为数字 |
| | | sum += value; |
| | | }); |
| | | return sum.toFixed(2); |
| | | } |
| | | |
| | | 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 tags = ref([]) |
| | | |
| | | const tag = ref({ |
| | | id: null, |
| | | name: null, |
| | | type: 1, |
| | | tagWidth: null, |
| | | tagHeight: null, |
| | | value: null, |
| | | size: null |
| | | }) |
| | | const getTags = () => { |
| | | request.get('tagStyle/getTagList').then(res => { |
| | | res.data.forEach(item => { |
| | | item.value = JSON.parse(item.value) |
| | | }) |
| | | tags.value = res.data |
| | | }) |
| | | } |
| | | |
| | | /*后端返回结果多层嵌套展示*/ |
| | | const hasDecimal = (value) => { |
| | | const regex = /\./; // 定义正则表达式,查找小数点 |
| | | return regex.test(value); // 返回true/false |
| | | } |
| | | |
| | | const xGrid = ref() |
| | | const gridOptions = reactive({ |
| | | loading: false, |
| | | border: "full",//表格加边框 |
| | | keepSource: true,//保持源数据 |
| | | align: 'center',//文字居中 |
| | | stripe:true,//斑马纹 |
| | | rowConfig: {isCurrent: true, isHover: true,height: 30},//鼠标移动或选择高亮 |
| | | id: 'ProcessCardProgress', |
| | | showFooter: true,//显示脚 |
| | | printConfig: {}, |
| | | importConfig: {}, |
| | | exportConfig: {}, |
| | | scrollY:{ enabled: true },//开启虚拟滚动 |
| | | showOverflow:true, |
| | | columnConfig: { |
| | | resizable: true, |
| | | useKey: true |
| | | }, |
| | | filterConfig: { //筛选配置项 |
| | | // remote: true |
| | | }, |
| | | customConfig: { |
| | | storage: true |
| | | }, |
| | | editConfig: { |
| | | trigger: 'click', |
| | | mode: 'row', |
| | | showStatus: true |
| | | },//表头参数 |
| | | columns : [ |
| | | |
| | | {type: 'checkbox', fixed: "left", title: t('basicData.check'), width: 80}, |
| | | {type: 'seq', fixed: "left", title: t('basicData.Number'), width: 50}, |
| | | {field: 'order_id', width: 120, |
| | | title: t('order.orderId'), |
| | | filters: [{data: ''}], |
| | | slots: {filter: 'num1_filter'}, |
| | | filterMethod: filterChanged}, |
| | | {field: 'project', width: 150, |
| | | title: t('order.project'), |
| | | filters: [{data: ''}], |
| | | slots: {filter: 'num1_filter'}, |
| | | filterMethod: filterChanged}, |
| | | {field: 'customer_name', width: 150, |
| | | title: t('customer.customerName'), |
| | | filters: [{data: ''}], |
| | | slots: {filter: 'num1_filter'}, |
| | | filterMethod: filterChanged}, |
| | | {field: 'product_name', width: 150, |
| | | title: t('order.product'), |
| | | filters: [{data: ''}], |
| | | slots: {filter: 'num1_filter'}, |
| | | filterMethod: filterChanged}, |
| | | {field: 'glass_child',width: 130, title: t('reportingWorks.glassChild') ,filters: [{data: ''}], |
| | | slots: {filter: 'num1_filter'}, |
| | | filterMethod: filterChanged}, |
| | | {field: 'order_type', width: 120,title: t('order.orderType'),filters: [{data: ''}], |
| | | slots: {filter: 'num1_filter'}, |
| | | filterMethod: filterChanged}, |
| | | {field: 'process_id',width: 150, title: t('processCard.processId'),filters: [{data: ''}], |
| | | slots: {filter: 'num1_filter'}, |
| | | filterMethod: filterChanged}, |
| | | {field: 'print_status', width: 120,title: t('processCard.numberTimesProcessCardPrinted')}, |
| | | {field: 'print_number', width: 110,title: t('processCard.numberLabelPrintingOperations')}, |
| | | {field: 'order_number', width: 100,title: t('order.OrderNum'),showOverflow:"ellipsis",filters: [{data: ''}], |
| | | slots: {filter: 'num1_filter'}, |
| | | filterMethod: filterChanged}, |
| | | // {field: 'glassNumber', width: 110,title: t('reportingWorks.glassNumber'),showOverflow:"ellipsis",filters: [{data: ''}], |
| | | // slots: {filter: 'num1_filter'}, |
| | | // filterMethod: filterChanged}, |
| | | {field: 'technology_number', width: 110,title: t('processCard.technologyNumber'),showOverflow:"ellipsis",filters: [{data: ''}], |
| | | slots: {filter: 'num1_filter'}, |
| | | filterMethod: filterChanged}, |
| | | |
| | | {field: 'quantity', width: 90,title: t('order.quantity')}, |
| | | {field: 'grossArea', width: 90,title: t('order.area')}, |
| | | {field: 'broken_num',width: 90, title: t('reportingWorks.quantityBroken')}, |
| | | // {field: 'shippedQuantity',width: 120, title: t('report.shippedQuantity')}, |
| | | {field: 'Storage',width: 120, title: t('report.inventoryNum')}, |
| | | {field: 'StorageAreaShow',width: 120, title: t('report.inventoryArea')}, |
| | | ], |
| | | |
| | | toolbarConfig: { |
| | | buttons: [ |
| | | {code: 'print', name: t('processCard.print'), status: 'primary'}, |
| | | {code: 'printLabel', name: t('processCard.printLabel'), status: 'primary'}, |
| | | ], |
| | | // import: false, |
| | | // export: true, |
| | | // print: true, |
| | | zoom: true, |
| | | custom: true |
| | | }, |
| | | data: [ |
| | | ],//table body实际数据 |
| | | //脚部求和 |
| | | footerMethod ({ columns, data }) { |
| | | return [ |
| | | columns.map((column, columnIndex) => { |
| | | if (columnIndex === 0) { |
| | | return t('basicData.total') |
| | | } |
| | | const List = ["quantity", "broken_num", "inventory", "inventoryArea","gross_area"]; // 静态列的求和 |
| | | if (List.includes(column.field)) { |
| | | return footSum(data, column.field) |
| | | } |
| | | // 动态列的求和 |
| | | if (column.field && column.field.startsWith('dynamicColumn')) { |
| | | return footSumDynamic(data, column.title) |
| | | } |
| | | return '' |
| | | }) |
| | | ] |
| | | } |
| | | }) |
| | | |
| | | const gridEvents = { |
| | | async toolbarButtonClick({code}) { |
| | | const $grid = xGrid.value |
| | | selectRecords = $grid.getCheckboxRecords() |
| | | // selectRecords.forEach(obj => { |
| | | // delete obj.print_status; |
| | | // }); |
| | | let type = tag.value.name |
| | | let faceOrientation = stateValue.value |
| | | let lableTypes = lableType.value |
| | | let lableTitle = lableType.text |
| | | if ($grid) { |
| | | switch (code) { |
| | | //打印流程卡 |
| | | case 'print': { |
| | | if (selectRecords === null || selectRecords === '' || selectRecords.length === 0) { |
| | | ElMessage.warning(t('searchOrder.msgList.checkOrder')) |
| | | return |
| | | } |
| | | |
| | | let id = "" |
| | | for (let i = 0; i < selectRecords.length; i++) { |
| | | if (i + 1 === selectRecords.length) { |
| | | id += selectRecords[i].id |
| | | } else { |
| | | id += selectRecords[i].id + "|" |
| | | } |
| | | } |
| | | printRow.value.list = JSON.stringify(selectRecords) |
| | | printRow.value.printMergeVal = printMerge.value |
| | | printRow.value.like = null |
| | | printRow.value.merge = company.flowCardMerge |
| | | printRow.value.printFc= printFc |
| | | printRow.value.flashback = flashback.value |
| | | printRow.value.landingSequence=landingSequence.value |
| | | printRow.value.compound = compound.value |
| | | dialogTableVisible.value = true |
| | | |
| | | |
| | | break |
| | | } |
| | | case 'printLabel': { |
| | | if (selectRecords === null || selectRecords === '' || selectRecords.length === 0) { |
| | | ElMessage.warning(t('searchOrder.msgList.checkOrder')) |
| | | return |
| | | } |
| | | if (tag.value.name === null || tag.value.name === '' || tag.value.name === undefined) { |
| | | ElMessage.warning(t('processCard.pleaseSelectCustomPrintLabelStyle')) |
| | | return |
| | | } |
| | | |
| | | let id = "" |
| | | for (let i = 0; i < selectRecords.length; i++) { |
| | | if (i + 1 === selectRecords.length) { |
| | | id += selectRecords[i].id |
| | | } else { |
| | | id += selectRecords[i].id + "|" |
| | | } |
| | | } |
| | | |
| | | labelRow.value.list = JSON.stringify(selectRecords) |
| | | labelRow.value.faceOrientation = faceOrientation |
| | | labelRow.value.type = tag.value.name |
| | | labelRow.value.lableType = lableTypes |
| | | labelRow.value.dataType = 1 |
| | | dialogTableVisibleLabel.value = true |
| | | |
| | | |
| | | break |
| | | } |
| | | } |
| | | } |
| | | }, |
| | | } |
| | | |
| | | |
| | | const form = reactive({ |
| | | orderId: '', |
| | | |
| | | }) |
| | | |
| | | const mergeCells = ref([ |
| | | |
| | | ]) |
| | | |
| | | |
| | | const handleCellDblClick = ({ row, column, cell, $event }) => { |
| | | VxeUI.clipboard.copy(row[column.property]) |
| | | } |
| | | </script> |
| | | |
| | | <template> |
| | | <div style="width: 100%;height: 100%"> |
| | | <div class="head"> |
| | | <el-date-picker |
| | | v-model="orderInfo.workOrderDate" |
| | | :default-time="defaultTime" |
| | | :end-placeholder="$t('basicData.endDate')" |
| | | :start-placeholder="$t('basicData.startDate')" |
| | | format="YYYY/MM/DD" |
| | | type="daterange" |
| | | value-format="YYYY-MM-DD" |
| | | |
| | | /> |
| | | |
| | | <el-button |
| | | :disabled="props.orderId" |
| | | @click="getWorkOrder" |
| | | id="select" |
| | | type="primary" :icon="Search">{{$t('basicData.search')}} |
| | | |
| | | </el-button> |
| | | |
| | | <label>{{ $t('processCard.labelStyle') }}:</label> |
| | | <el-select v-model="tag" :placeholder="$t('processCard.pleaseSelect')" style="width: 140px" @change="changeTag"> |
| | | <el-option |
| | | v-for="(tag,index) in tags" |
| | | :key="index" |
| | | :label="tag.name" |
| | | :value="tag" |
| | | /> |
| | | </el-select> |
| | | |
| | | </div> |
| | | <div class="main-table"> |
| | | <vxe-grid |
| | | height="100%" |
| | | class="mytable-scrollbar" |
| | | ref="xGrid" |
| | | v-bind="gridOptions" |
| | | :merge-cells="mergeCells" |
| | | @cell-dblclick="handleCellDblClick" |
| | | |
| | | > |
| | | <!-- @toolbar-button-click="toolbarButtonClickEvent"--> |
| | | <!-- 下拉显示所有信息插槽--> |
| | | <template #content="{ row }"> |
| | | <ul class="expand-wrapper"> |
| | | <li v-for="(item,index) in gridOptions.columns" v-show="item.field!=undefined "> |
| | | <span style="font-weight: bold">{{item.title+': '}}</span> |
| | | <span>{{ row[item.field] }}</span> |
| | | </li> |
| | | </ul> |
| | | </template> |
| | | |
| | | |
| | | |
| | | <template #num1_filter="{ column, $panel }"> |
| | | <div> |
| | | <div v-for="(option, index) in column.filters" :key="index"> |
| | | <input v-model="option.data" |
| | | type="text" |
| | | @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> |
| | | <!-- 流程卡打印 --> |
| | | <el-dialog |
| | | id="sizePrintCalrd" |
| | | v-model="dialogTableVisible" |
| | | :title="$t('processCard.print')" |
| | | destroy-on-close |
| | | style="width: 75%;height:75% "> |
| | | <template #header="{ close, titleId, titleClass }"> |
| | | <el-button v-print="printContent" :icon="Printer" circle @click="printNumber"/> |
| | | </template> |
| | | <print-process |
| | | id="child" |
| | | :printLike="printRow.like" |
| | | :printList="printRow.list" |
| | | :printMerge="printRow.printMergeVal" |
| | | :printFc="printRow.printFc" |
| | | :merges="printRow.merge" |
| | | :flashback = "printRow.flashback" |
| | | :landingSequence = "printRow.landingSequence" |
| | | :compound = "printRow.compound" |
| | | style="width: 100%;height: 100%"/> |
| | | </el-dialog> |
| | | |
| | | <!-- 成品标签--> |
| | | <el-dialog |
| | | id="sizeCustom" |
| | | v-model="dialogTableVisibleLabel" |
| | | :title="$t('processCard.printLabel')" |
| | | destroy-on-close |
| | | style="width: 80%;height:75% "> |
| | | <template #header="{ close, titleId, titleClass }"> |
| | | <el-tooltip |
| | | class="box-item" |
| | | effect="dark" |
| | | :content="$t('processCard.yesTitle')" |
| | | placement="top" |
| | | > |
| | | <el-button :icon="Printer" circle @click="printOrder(1)"/> |
| | | </el-tooltip> |
| | | <el-tooltip |
| | | class="box-item" |
| | | effect="dark" |
| | | :content="$t('processCard.noTitle')" |
| | | placement="top" |
| | | > |
| | | <el-button @click="printOrder(3)"> |
| | | <i class="vxe-icon-print"></i> |
| | | </el-button> |
| | | </el-tooltip> |
| | | </template> |
| | | <print-custom-label-x-j id="childLabel" |
| | | :faceOrientation="labelRow.faceOrientation" |
| | | :lableType="labelRow.lableType" |
| | | :list="labelRow.list" |
| | | :lastList='lastList' |
| | | :type="labelRow.type" |
| | | style="width: 100%;height: 100%"/> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <style scoped> |
| | | .head{ |
| | | width: 100%; |
| | | height: 35px; |
| | | } |
| | | |
| | | .main-table{ |
| | | width: 100%; |
| | | height: calc(100% - 35px); |
| | | } |
| | | |
| | | .vxe-grid { |
| | | /* 禁用浏览器默认选中 */ |
| | | -webkit-user-select: none; |
| | | -moz-user-select: none; |
| | | -ms-user-select: none; |
| | | user-select: none; |
| | | } |
| | | </style> |