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
| <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: 'OrderReport',
| 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',fixed:"left",slots: { content:'content' },width: 50},
| {type: 'seq',fixed:"left", title: '自序', width: 80 },
| {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: 'prodID',width:120, title: '楼号',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '宽',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '高',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '数量',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '半径',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '实际面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '结算总面积',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '形状',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '磨边类型',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '主加工要求',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '加工要求',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '备注',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '商标选项',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '包装方式',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '工艺流程',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '周长',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '单价',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '金额',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '铝条方式',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '订单类型',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '业务员',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '送货地址',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '制单员',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '建立时间',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '总厚度',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '产品大类',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',width:120, title: '产品小类',filters:[{ data: '' }],slots: { filter: 'num1_filter' }, sortable: true},
| {field: 'prodID',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"
| ></vxe-grid>
| <!-- <el-table
| :data="dataList"
| :header-cell-style="{ 'text-align': 'center' }"
| :cell-style="{ 'text-align': 'center' }"
| border
| >
|
| <el-table-column type="expand" fixed>
| <template #default="props" >
| <div m="4">
| <p m="t-0 b-2">: {{ props.row['2'] }}</p>
| </div>
| </template>
| </el-table-column>
|
|
| <el-table-column
| :prop="index.toString()"
| :show-overflow-tooltip='true'
| width="100" v-for="(item,index) in titleList"
| :label="item" />
| </el-table>-->
| </div>
| </div>
| </template>
|
| <style scoped>
| .main-div {
| width: 100%;
| height: 100%;
| }
| .el-col{
| border: #181818 1px solid;
| }
| :deep(.el-table .el-input__wrapper) {
| box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
| cursor: default;
| border: none !important;
| background-color: transparent;
| }
| .order-primary{
| width: 100%;
| }
| .order-detail{
| width: 100%;
| height: 90%;
|
| }
|
|
|
| </style>
|
|
