1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
| <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
| },
| 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"
| @keyup.enter.native="$panel.confirmFilter()"
| @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>
|
|
