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
| <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: 'OrderList',
| printConfig: {},
| importConfig: {},
| exportConfig: {},
| scrollY:{ enabled: true,gt:13 },//开启虚拟滚动
| //scrollX:{ enabled: true,gt:15 },//开启虚拟滚动
|
| columnConfig: {
| resizable: true,
| useKey: true
| },
|
| customConfig: {
| storage: true
| },
|
|
| columns:[
| {type: 'seq', title: t('basicData.Number'), width: 80 },
| // {field: 'buildingNumber',width:120, title: '楼号',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: 'price',width:140, title: t('order.price'),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: '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: 'processingNote',width:200, title: t('order.processingNote'),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},
|
| ],
| })
|
| let props = defineProps({
| orderId:null
| })
| onMounted(()=>{
| request.post(`/order/getOrderDetailById/${props.orderId}`).then(res=>{
| xGrid.value.reloadData(res.data)
| })
| })
| watch(()=>props.orderId,(newValue)=>{
| request.post(`/order/getOrderDetailById/${props.orderId}`).then(res=>{
| xGrid.value.reloadData(res.data)
| })
| })
| </script>
|
| <template>
| <div style="width: 100%;height: 100%">
| <vxe-grid
| height="100%"
| size="mini"
| class="mytable-scrollbar"
| ref="xGrid"
| v-bind="gridOptions"
| >
| <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'?'普形':row.shape==='2'?'异形':null }}</span>
| </template>
|
| </vxe-grid>
| </div>
| </template>
|
| <style scoped>
|
| </style>
|
|
