| New file |
| | |
| | | <script setup> |
| | | import {onMounted, reactive, ref, watch} from "vue"; |
| | | import {changeFilterEvent, filterChanged} from "@/hook" |
| | | import {useI18n} from "vue-i18n" |
| | | import request from "@/utils/request" |
| | | 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: 'OrderCraftDetail', |
| | | printConfig: {}, |
| | | importConfig: {}, |
| | | exportConfig: {}, |
| | | scrollY:{ enabled: true,gt:13 },//开启虚拟滚动 |
| | | //scrollX:{ enabled: true,gt:15 },//开启虚拟滚动 |
| | | mouseConfig:{selected: true},//鼠标选中 |
| | | keyboardConfig:{ |
| | | isArrow: true, |
| | | isDel: true, |
| | | isEnter: true, |
| | | isTab: true, |
| | | isEdit: true, |
| | | isChecked: true |
| | | }, |
| | | columnConfig: { |
| | | resizable: true, |
| | | useKey: true |
| | | }, |
| | | |
| | | customConfig: { |
| | | storage: true |
| | | }, |
| | | |
| | | |
| | | columns:[ |
| | | {field: 'orderNumber',width:120, title: t('order.OrderNum'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | //{field: 'orderDetail.buildingNumber',width:120, title: '楼号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}, |
| | | {field: 'orderDetail.productName',width:120, title: t('order.product'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'glassAddress',width:120, title: t('craft.glassAddress'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'glassChild',width:120, title: t('craft.glassChild'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'orderDetail.width',width:120, title: t('craft.width'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'orderDetail.height',width:120, title: t('craft.height'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'orderDetail.shape',width:120, title: t('order.shape'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'totalArea',width:120, title: t('craft.totalArea'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'childWidth',width:120, title: t('craft.childWidth'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'childHeight',width:120, title: t('craft.childHeight'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'area',width:120, title: t('craft.area'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'orderDetail.quantity',width:120, title: t('order.quantity'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'process',width:120, title: t('craft.process'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'icon',width:120, title: t('order.icon'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'orderDetail.processingNote',width:120, title: t('order.processingNote'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'orderDetail.remarks',width:120, title: t('basicData.remarks'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged}, |
| | | {field: 'orderDetail.edgingType',width:120, title: t('order.edgingType'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged} |
| | | ], |
| | | toolbarConfig: { |
| | | zoom: true, |
| | | custom: true |
| | | } |
| | | |
| | | |
| | | }) |
| | | |
| | | let props = defineProps({ |
| | | orderId:null |
| | | }) |
| | | onMounted(()=>{ |
| | | request.post(`/order/getOrderCraftDetailById/${props.orderId}`).then(res=>{ |
| | | xGrid.value.reloadData(res.data) |
| | | }) |
| | | }) |
| | | |
| | | watch(()=>props.orderId,(newValue)=>{ |
| | | request.post(`/order/getOrderCraftDetailById/${props.orderId}`).then(res=>{ |
| | | xGrid.value.reloadData(res.data) |
| | | }) |
| | | }) |
| | | |
| | | const handleKeyDown = (evnt) =>{ |
| | | |
| | | if(evnt.$event.keyCode === 38 ){ |
| | | let nextRowIndex = xGrid.value.getRowIndex(xGrid.value.getCurrentRecord()) - 1; |
| | | if (nextRowIndex < xGrid.value.getTableData().fullData.length && nextRowIndex>=0) { |
| | | xGrid.value.setCurrentRow(xGrid.value.getTableData().fullData[nextRowIndex]); |
| | | } |
| | | |
| | | } |
| | | if(evnt.$event.keyCode === 40 ){ |
| | | let nextRowIndex = xGrid.value.getRowIndex(xGrid.value.getCurrentRecord()) + 1; |
| | | if (nextRowIndex < xGrid.value.getTableData().fullData.length) { |
| | | xGrid.value.setCurrentRow(xGrid.value.getTableData().fullData[nextRowIndex]); |
| | | } |
| | | |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <template> |
| | | <div style="width: 100%;height: 100%"> |
| | | <vxe-grid |
| | | height="100%" |
| | | size="mini" |
| | | class="mytable-scrollbar" |
| | | ref="xGrid" |
| | | v-bind="gridOptions" |
| | | @keydown="handleKeyDown" |
| | | > |
| | | <template #num1_filter="{ column, $panel }"> |
| | | <div> |
| | | <div v-for="(option, index) in column.filters" :key="index"> |
| | | <input type="text" |
| | | v-model="option.data" |
| | | @input="changeFilterEvent($event, option, $panel)"/> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <template #default_shape="{ row }"> |
| | | <span>{{ row.shape==='1'?$t('order.universalShape'):row.shape==='2'?$t('order.alien'):null }}</span> |
| | | </template> |
| | | |
| | | </vxe-grid> |
| | | </div> |
| | | </template> |
| | | |
| | | <style scoped> |
| | | |
| | | </style> |