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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
| <script setup>
| import {onMounted, reactive, ref, watch} from "vue";
| import {changeFilterEvent, filterChanged} from "@/hook"
| import {useI18n} from "vue-i18n"
| import request from "@/utils/request"
| import footSum from "@/hook/footSum";
| import {addListener,destroyAreaBox} from "@/hook/mouseMove";
| const { t } = useI18n()
| const xGrid = ref()
| const gridOptions = reactive({
| loading:false,
| border: "full",//表格加边框
| keepSource: true,//保持源数据
| align: 'center',//文字居中
| stripe:true,//斑马纹
| showOverflow:true,
| showFooter: true,//显示脚
| rowConfig: {isCurrent: true, isHover: true,height: 30},//鼠标移动或选择高亮
| virtualScroll: true, // 开启虚拟滚动功能
| id: 'OrderDetail',
| scrollY:{ enabled: true,gt:13 },//开启虚拟滚动
| //scrollX:{ enabled: true,gt:15 },//开启虚拟滚动
|
| columnConfig: {
| resizable: true,
| useKey: true
| },
|
| customConfig: {
| storage: true
| },
| mouseConfig:{selected: true},//鼠标选中
| keyboardConfig:{
| isArrow: true
| },
|
| columns:[
| {field: 'orderNumber', title: t('basicData.Number'), width: 80 },
| {field: 'buildingNumber',width:120, title: t('order.buildingNumber'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter'}, sortable: true,filterMethod:filterChanged},
| {field: 'productId',width:140, title: t('order.productId'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
| {field: 'productName',width:300, title: t('order.product'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
| {field: 'otherColumns.S01',width:140, title: t('reportingWorks.glassNumber'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
| //{field: 'grossAmount',width:160, title: t('order.grossAmount'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
| {field: 'width',width:120, title: t('order.width') ,editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
| {field: 'height',width:140, title: t('order.height'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
| {field: 'quantity',width:140, title: t('order.quantity'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
| {field: 'processingNote',width:200, title: t('order.processingNote'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
| {field: 'price',width:140, title: t('order.price'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
| {field: 'area',width:150, title: t('order.trueArea'),filters:[{ data: '' }],slots: { filter: 'num1_filter'}, sortable: true,filterMethod:filterChanged},
| {field: 'grossArea',width:160, title: t('order.trueGrossArea'),filters:[{ data: '' }],slots: { filter: 'num1_filter'}, sortable: true,filterMethod:filterChanged},
| {field: 'computeArea',width:180, title: t('order.computeArea'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
| {field: 'computeGrossArea',width:200, title: t('order.computeGrossArea'),filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
| {field: 'perimeter',width:200, title: t('order.perimeter'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
| {field: 'remarks',width:140, title: t('basicData.remarks'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
| {field: 'shape',width:120,
| title: t('order.shape'),
| editRender: { name: 'input'},
| filters:[{ data: '' }],
| slots: { filter: 'num1_filter',default:'default_shape' }, sortable: true,filterMethod:filterChanged},
| {field: 'bendRadius',width:160, title: t('order.bendRadius'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
| {field: 'edgingType',width:160, title: t('order.edgingType'),editRender: { name: 'input'},filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true,filterMethod:filterChanged},
|
| ],
| toolbarConfig: {
| zoom: true,
| custom: true
| },
|
| footerMethod ({ columns, data }) {//页脚函数
| return[
| columns.map((column, columnIndex) => {
| if (columnIndex === 0) {
| return t('basicData.total')
| }
| const List = ["quantity",'grossArea','area','computeGrossArea','computeArea','perimeter']
| if (List.includes(column.field)) {
| return footSum(data, column.field)
| }
| return ''
| })
| ]
| }
| })
|
| let props = defineProps({
| orderId:null
| })
| onMounted(async ()=>{
| await getColumns()
| await getDetail()
| addListener(xGrid.value,gridOptions)
| })
| watch(()=>props.orderId,(newValue)=>{
| getDetail()
| })
|
| const getColumns = async () => {
| await request.post(`/basicOtherMoney/findAllByState`).then(res=>{
| res.data.forEach(item => {
| let column = {
| field: `otherColumns.${item.column}`,
| width:100,
| title: item.alias,
| editRender: {
| name: 'input',
| }
| }
| //columns.push(column)
| gridOptions.columns.push(column)
|
| })
| })
| }
|
| const getDetail = async ()=> {
| await request.post(`/order/getOrderDetailById/${props.orderId}`).then(res=>{
| res.data.forEach(item => {
| item.otherColumns = JSON.parse(item.otherColumns)
| })
| 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>
| .vxe-grid {
| /* 禁用浏览器默认选中 */
| -webkit-user-select: none;
| -moz-user-select: none;
| -ms-user-select: none;
| user-select: none;
| transform: translateZ(0);
| }
| </style>
|
|
