charge.vue
6.5 KB
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
<template>
<el-container>
<el-main>
<el-row>
<el-col :span="24">
<div class="grid-content content">收费处理</div>
</el-col>
</el-row>
<!-- 两个表单区域-->
<el-row>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="计费" name="first">
<el-form ref="form" :model="form" label-width="80px">
<el-row>
<el-col :span="6">
<el-form-item label="运单号">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="">
<el-button @click="">挑单</el-button>
<el-button @click="">批量挑单</el-button>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="结算客户">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="付款方式" :label-width="formLabelWidth">
<el-select v-model="form.waybillNo" placeholder="请选择">
<el-option label="方式一" value="yi"></el-option>
<el-option label="方式二" value="er"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-table
:data="tableData"
style="width: 100%"
row-key="id"
border
lazy
:load="load"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column
prop="date"
label="状态">
</el-table-column>
<el-table-column
prop="name"
label="运单号">
</el-table-column>
<el-table-column
prop="address"
label="计费重量">
</el-table-column>
<el-table-column
prop="date"
label="处置费">
</el-table-column>
<el-table-column
prop="name"
label="超重费">
</el-table-column>
<el-table-column
prop="address"
label="仓储费">
</el-table-column>
<el-table-column
prop="date"
label="总费用">
</el-table-column>
<el-table-column
prop="name"
label="航班">
</el-table-column>
<el-table-column
prop="address"
label="特货代码">
</el-table-column>
<el-table-column
prop="date"
label="品名">
</el-table-column>
<el-table-column
prop="name"
label="方式">
</el-table-column>
<el-table-column
prop="address"
label="客户">
</el-table-column>
<el-table-column
prop="address"
label="收/发货人">
</el-table-column>
</el-table>
</el-row>
<div>
<el-button @click="">清除</el-button>
<el-button @click="">核对并现结结算</el-button>
<el-button @click="">导出</el-button>
<el-button @click="">打印</el-button>
</div>
</el-form>
</el-tab-pane>
<el-tab-pane label="已结算" name="second">已结算</el-tab-pane>
</el-tabs>
</el-row>
</el-main>
</el-container>
</template>
<script>
export default {
data() {
return {
form: {
},
activeName: 'first',
tableData:[],
}
}
}
</script>
<style scoped>
</style>