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
| <script setup>
|
| import {Folder, Search} from "@element-plus/icons-vue";
| import {reactive} from "vue";
|
|
|
| const gridOptions = reactive({
| border: "full",//表格加边框
| keepSource: true,//保持源数据
| align: 'center',//文字居中
| stripe:true,//斑马纹
| rowConfig: {isCurrent: true, isHover: true,height: 50},//鼠标移动或选择高亮
| id: 'OrderList',
| 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:'expand',slots: { content:'content' },width: 50,fixed:"left"},
| {type: 'seq', title: '自序', width: 80 ,fixed:"left"},
| {field: '0',width:120, title: '发货单号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: '1',width:120, title: '销售单号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: '2',width:120, title: '客户单号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: '3',width:120, title: '项目名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: '4',width:120, title: '客户名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: '5',width:120, title: '业务员',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: '6',width:120, title: '送货地址',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: '7',width:120, title: '发货员',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: '8',width:120, title: '楼号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: '9',width:120, title: '产品编号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: '10',width:120, title: '产品名称',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: '11',width:120, title: '发货数量',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: '12',width:120, title: '周长',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: '13',width:120, title: '实际面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: '14',width:120, title: '发货面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: '15',width:120, title: '单价',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: '16',width:120, title: '发货金额',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: '17',width:120, title: '宽',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: '18',width:120, title: '高',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: '19',width:120, title: '形状',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: '20',width:120, title: '磨边类型',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: '21',width:120, title: '备注',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: '22',width:120, title: '加工要求',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: '22',width:120, title: '建立时间',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true}
|
|
| ],//表头按钮
| toolbarConfig: {
| buttons: [
| ],
| 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 '合计:'
| }
| // if (props.tableProp.footList.includes(column.field)) {
| // return sumNum(data, column.field)
| // }
| return ''
| })
| ]
| }
|
| })
|
| </script>
|
| <template>
| <div class="main-div">
| <el-date-picker
| v-model="value1"
| type="daterange"
| start-placeholder="开始时间"
| end-placeholder="结束时间"
| />
| <el-button style="margin-top: -5px" id="searchButton" type="primary" :icon="Search">查询</el-button>
| <div class="order-detail">
| <vxe-grid
| max-height="97%"
| 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="type" v-model="option.data" @input="changeFilterEvent($event, option, $panel)"/>
| </div>
| </div>
| </template>
| <template #content="{ row}">
| <ul class="expand-wrapper">
| <li v-for="(item,key,index) in row">
| <span style="font-weight: bold">{{key+': '}}</span>
| <span>{{ item }}</span>
| </li>
| </ul>
| </template>
|
| </vxe-grid>
| </div>
| </div>
| </template>
|
| <style scoped>
| .main-div {
| width: 100%;
| height: 100%;
| }
| .el-col{
| border: #181818 1px solid;
| }
| .order-primary{
| width: 100%;
| }
| .order-detail{
| width: 100%;
| height: 80%;
| }
| </style>
|
|
