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
| <template>
| <vol-box :lazy="true" v-model="model" title="货位状态变动记录" :width="1820" :padding="5">
| <div class="table-item">
| <div class="table-item-header">
| <div class="table-item-border"></div> <span class="table-item-text">货位状态变动记录</span>
| <div class="table-item-buttons">
| <div>
| <el-button type="primary" @click="reload" color="#95d475" plain>刷新</el-button>
| </div>
| </div>
| </div>
| <!-- <el-alert type="success" title="" style="line-height: 12px;">
| 功能：表尾合计、文件上传、编辑、api加载数据、自动分页、自定义按钮、行点击事件、加载loadBefore自定义等。。。
| </el-alert> -->
| <vol-table @loadBefore="loadBefore" @loadAfter="loadAfter" ref="table" :url="url" index
| :tableData="tableData" :columns="columns" :height="700" :pagination-hide="false" :load-key="true"
| :column-index="true"></vol-table>
| </div>
| <template #footer>
| <div>
| <el-button type="primary" size="small" @click="model = false">确认</el-button>
| <el-button type="default" size="small" @click="model = false">关闭</el-button>
| </div>
| </template>
| </vol-box>
| </template>
| <script lang="jsx">
| //如果是自定义vue页面使用的配置，在vue页面的script后一定要加上lang="jsx"
| import VolTable from "@/components/basic/VolTable.vue";
| import VolBox from "@/components/basic/VolBox.vue";
| export default {
| components: {
| 'vol-table': VolTable,
| 'vol-box': VolBox
| },
| data() {
| return {
| model: false,
| locationCode: '',
| //接口返回数据，可以框架生成的接口getPageData
| //如果是自定义的接口，需要返回的数据格式：{total:100,rows:[]}
| url: "api/LocationStatusChangeRecord/getPageData",
| columns: [{ field: 'Id', title: '主键', type: 'int', width: 110, hidden: true, readonly: true, require: true, align: 'left' },
| { field: 'locationId', title: '货位ID', type: 'int', width: 110, hidden: true, readonly: true, require: true, align: 'left' },
| { field: 'locationCode', title: '货位编号', type: 'string', width: 110, require: true, align: 'left' },
| { field: 'beforeStatus', title: '变动前货位状态', type: 'int', width: 120, align: 'left', bind: { key: "LocationState", data: [] } },
| { field: 'afterStatus', title: '变动后货位状态', type: 'int', width: 110, require: true, align: 'left', sort: true, bind: { key: "LocationState", data: [] } },
| { field: 'changeType', title: '变动类型（出库、入库、手动调整）', type: 'string', width: 70, align: 'left', bind: { key: "StatusChangeType", data: [] } },
| { field: 'orderId', title: '单据主键', type: 'string', width: 70, align: 'left', hidden: true },
| { field: 'orderNo', title: '单据编号', type: 'string', width: 110, align: 'left', hidden: true },
| { field: 'orderDetailId', title: '单据明细主键', type: 'string', width: 110, align: 'left', hidden: true },
| { field: 'taskNum', title: '任务号', type: 'string', width: 110, align: 'left' },
| { field: 'remark', title: '备注', type: 'int', width: 110, align: 'left', hidden: true },
| { field: 'creater', title: '创建人', type: 'string', sort: true, width: 110, align: 'left', hidden: true },
| { field: 'createDate', title: '创建时间', type: 'datetime', sort: true, width: 150, align: 'left', sort: true },
| { field: 'modifier', title: '修改人', type: 'string', sort: true, width: 100, align: 'left', hidden: true },
| { field: 'modifyDate', title: '修改时间', type: 'datetime', sort: true, width: 150, hidden: true, align: 'left', sort: true }
| ]
| }
| },
| methods: {
| //自定义按钮
| customOpen(row) {
| this.locationCode = row.locationCode;
| this.locationId = row.id;
| this.model = true;
| this.$nextTick(() => {
| this.$refs.table.load(null, true);
| })
| },
|
| loadBefore(params, callBack) {//调用后台接口前处理
| //设置查询条件参数
| params.wheres.push({
| name: "locationId",
| value: this.locationId,
| displayType: "text"//模糊查询
| },{
| name: "locationCode",
| value: this.locationCode,
| displayType: "text"//模糊查询
| })
|
| //也可以给value设置值，后台自己解析
| // params.value=this.OrderNo
|
| //查询前方法也可以动态设置url参数
| //params.url='api/xxx/xx?参数1='+this.xx参数
|
| callBack(true)//false不会调用后台接口
| },
| //查询后方法
| loadAfter(rows, callBack, result) {
| //如果有合计：后台返回合计格式
| // var data = new {
| // rows: [],//返回的行数据
| // total: 200,//返回的总行数
| // //合计
| // summary: { TotalPrice: 100, TotalQty: 200 }
| // }
| // callBack(true)
| },
| reload() {
| this.$refs.table.load(null, true);
| this.$message.success('查询成功')
| }
| }
| }
| </script>
| <style lang="less" scoped>
| .table-item-header {
| display: flex;
| align-items: center;
| padding: 6px;
|
| .table-item-border {
| height: 15px;
| background: rgb(33, 150, 243);
| width: 5px;
| border-radius: 10px;
| position: relative;
| margin-right: 5px;
| }
|
| .table-item-text {
| font-weight: bolder;
| }
|
| .table-item-buttons {
| flex: 1;
| text-align: right;
| }
|
| .small-text {
| font-size: 12px;
| color: #2196F3;
| margin-left: 10px;
| position: relative;
| top: 2px;
| }
| }
| </style>
|
|
