charge.vue
6.9 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
137
138
139
<template>
<el-container style="height: 550px;overflow:auto;">
<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 size="small" v-model="form.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="">
<el-button size="small" @click="">挑单</el-button>
<el-button size="small" @click="">批量挑单</el-button>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="6">
<el-form-item label="结算客户">
<el-input size="small" v-model="form.name"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="付款方式" :label-width="formLabelWidth">
<el-select size="small" 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="border-radius: 10px 10px 0px 0px;line-height: 25px"
:header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column
prop="date"
label="状态"
width="55">
</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="收/发货人"
fixed="right">
</el-table-column>
</el-table>
</el-row>
<div style="margin-top: 15px;margin-left: 20px">
<el-button size="small" @click="">清除</el-button>
<el-button size="small" @click="">核对并现结结算</el-button>
<el-button size="small" @click="">导出</el-button>
<el-button size="small" @click="">打印</el-button>
</div>
<div style="margin-left: 1190px">
</div>
</el-form>
</el-tab-pane>
<el-tab-pane label="已结算" name="second">已结算</el-tab-pane>
<div style="margin-left: 1190px">
</div>
</el-tabs>
</el-row>
</el-main>
</el-container>
</template>
<script>
export default {
data() {
return {
form: {
},
activeName: 'first',
tableData:[],
}
}
}
</script>
<style scoped>
</style>