Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
1a077add by renchao@pashanhoo.com
Options

收费信息

1 parent 85bd08d4
Inline Side-by-side
Showing 1 changed file with 121 additions and 90 deletions
1 <!-- 1 <!--
2 * @Description: 2 * @Description:
3 * @Autor: renchao 3 * @Autor: renchao
4 * @LastEditTime: 2023-12-29 16:35:50 4 * @LastEditTime: 2024-03-19 17:30:22
5 --> 5 -->
6 <template> 6 <template>
7 <div class='sfxx'> 7 <div class='sfxx slxx'>
8 <div class="sfxx-left"> 8 <el-form
9 :model="ruleForm"
10 ref="ruleForm"
11 v-Loading="loading"
12 :label-position="flag ? 'top' : ''"
13 :inline="flag"
14 label-width="100px">
15 <div class="slxx_con" :class="flag ? 'formMarginBot0' : ''">
9 <div class="slxx_title title-block"> 16 <div class="slxx_title title-block">
10 基本信息 17 基本信息
11 <div class="triangle"></div> 18 <div class="triangle"></div>
12 </div> 19 </div>
13 <ul> 20 <el-row :gutter="10">
14 <li> 21 <el-col :span="8">
15 <p>业务号</p> 22 <el-form-item label="业务号：">
16 <p>{{detail.ywh}}</p> 23 <el-input v-model="ruleForm.ywh"></el-input>
17 </li> 24 </el-form-item>
18 <li> 25 </el-col>
19 <p>申请登记类型</p> 26 <el-col :span="8">
20 <p>{{detail.sqdjlx}}</p> 27 <el-form-item label="申请登记类型：">
21 </li> 28 <el-input v-model="ruleForm.sqdjlx"></el-input>
22 <li> 29 </el-form-item>
23 <p>联系人</p> 30 </el-col>
24 <p>{{detail.lxr}}</p> 31 <el-col :span="8">
25 </li> 32 <el-form-item label="联系人：">
26 <li> 33 <el-input v-model="ruleForm.lxr"></el-input>
27 <p>联系人电话</p> 34 </el-form-item>
28 <p>{{detail.lxdh}}</p> 35 </el-col>
29 </li> 36 </el-row>
30 <li> 37
31 <p>缴费人</p> 38 <el-row :gutter="10">
32 <p><el-input v-model="detail.jfr"></el-input></p> 39 <el-col :span="8">
33 </li> 40 <el-form-item label="联系人电话：">
34 <li> 41 <el-input v-model="ruleForm.lxdh"></el-input>
35 <p>缴费单号</p> 42 </el-form-item>
36 <p><el-input v-model="detail.jfdh"></el-input></p> 43 </el-col>
37 </li> 44 <el-col :span="8">
38 <li> 45 <el-form-item label="缴费人：">
39 <p>应收金额</p> 46 <el-input v-model="ruleForm.jfr"></el-input>
40 <p style="color:red">{{detail.ysje}}元</p> 47 </el-form-item>
41 </li> 48 </el-col>
42 <li> 49 <el-col :span="8">
43 <p>实收金额</p> 50 <el-form-item label="缴费单号：">
44 <p><el-input v-model="detail.ssje"></el-input></p> 51 <el-input v-model="ruleForm.jfdh"></el-input>
45 </li> 52 </el-form-item>
46 <li> 53 </el-col>
47 <p>备注</p> 54 </el-row>
48 <p><el-input v-model="detail.bz"></el-input></p> 55
49 </li> 56 <el-row :gutter="10">
50 </ul> 57 <el-col :span="8">
51 </div> 58 <el-form-item label="应收金额：">
52 <div class="sfxx-right"> 59 <el-input v-model="ruleForm.ysje"></el-input>
60 </el-form-item>
61 </el-col>
62 <el-col :span="8">
63 <el-form-item label="实收金额：">
64 <el-input v-model="ruleForm.ssje"></el-input>
65 </el-form-item>
66 </el-col>
67 <el-col :span="8">
68 <el-form-item label="备注：">
69 <el-input v-model="ruleForm.bz"></el-input>
70 </el-form-item>
71 </el-col>
72 </el-row>
73
53 <div class="slxx_title title-block"> 74 <div class="slxx_title title-block">
54 收费明细 75 收费明细
55 <!-- <div class="triangle"></div> -->
56 <el-button type="primary" @click="hanldeAdd" style="float:right;margin-top:-5px">增加</el-button> 76 <el-button type="primary" @click="hanldeAdd" style="float:right;margin-top:-5px">增加</el-button>
57 </div> 77 </div>
58 <el-table :data="tableData.data" border :height="355"> 78 <el-table :data="tableDatasf.data" border :height="210">
59 <el-table-column v-for="item in tableData.columns" :key="item.index" :prop="item.prop" :label="item.label" align="center"> 79 <el-table-column v-for="item in tableDatasf.columns" :key="item.index" :prop="item.prop" :label="item.label" align="center">
60 </el-table-column> 80 </el-table-column>
61 <el-table-column label="操作" width="50"> 81 <el-table-column label="操作" width="50">
62 <template slot-scope="scope"> 82 <template slot-scope="scope">
...@@ -65,12 +85,22 @@ ...@@ -65,12 +85,22 @@
65 </el-table-column> 85 </el-table-column>
66 </el-table> 86 </el-table>
67 <div class="slxx_title title-block"> 87 <div class="slxx_title title-block">
88 计费明细
89 <div class="triangle"></div>
90 </div>
91 <el-table :data="tableDatajf.data" border :height="210">
92 <el-table-column v-for="item in tableDatajf.columns" :key="item.index" :prop="item.prop" :label="item.label" align="center">
93 </el-table-column>
94 </el-table>
95 <div class="slxx_title title-block">
68 票据 96 票据
97 <div class="triangle"></div>
98 </div>
69 <div style="height:250px"> 99 <div style="height:250px">
70 <img src="../../../../image/pj.jpg" alt="" style="height:100%"> 100 <img src="../../../../image/pj.jpg" alt="" style="height:100%">
71 </div> 101 </div>
72 </div> 102 </div>
73 </div> 103 </el-form>
74 </div> 104 </div>
75 </template> 105 </template>
76 <script> 106 <script>
...@@ -80,7 +110,7 @@ ...@@ -80,7 +110,7 @@
80 components: {}, 110 components: {},
81 data () { 111 data () {
82 return { 112 return {
83 detail: { 113 ruleForm: {
84 ywh: '', 114 ywh: '',
85 sqdjlx: '', 115 sqdjlx: '',
86 lxr: '', 116 lxr: '',
...@@ -91,7 +121,7 @@ ...@@ -91,7 +121,7 @@
91 ssje: '', 121 ssje: '',
92 bz: '' 122 bz: ''
93 }, 123 },
94 tableData: { 124 tableDatasf: {
95 columns: [ 125 columns: [
96 { 126 {
97 prop: "sfdw", 127 prop: "sfdw",
...@@ -129,7 +159,47 @@ ...@@ -129,7 +159,47 @@
129 label: "应收金额", 159 label: "应收金额",
130 } 160 }
131 ], 161 ],
132 data: [] 162 data: [],
163 },
164 tableDatajf: {
165 columns: [
166 {
167 prop: "sfdw",
168 label: "计费单位",
169 },
170 {
171 label: '是否额外收费',
172 align: 'center',
173 render: (h, scope) => {
174 return (
175 <div>
176 {scope.row.sfewsf == '1' ? <span>是</span> : <span>否</span>}
177 </div>
178 )
179 }
180 },
181 {
182 prop: "sfry",
183 label: "收费人员",
184 },
185 {
186 prop: "sfkmmc",
187 label: "收费科目名称",
188 },
189 {
190 prop: "sjffr",
191 label: "实际付费人",
192 },
193 {
194 prop: "ssje",
195 label: "实收金额",
196 },
197 {
198 prop: "ysje",
199 label: "应收金额",
200 }
201 ],
202 data: [],
133 } 203 }
134 } 204 }
135 }, 205 },
...@@ -191,44 +261,5 @@ ...@@ -191,44 +261,5 @@
191 </script> 261 </script>
192 <style scoped lang='scss'> 262 <style scoped lang='scss'>
193 @import "~@/styles/public.scss"; 263 @import "~@/styles/public.scss";
194 .sfxx { 264 @import "~@/styles/slxx/slxx.scss";
195 display: flex;
196 padding: 10px;
197 height: 100%;
198 box-sizing: border-box;
199 &-left {
200 width: 50%;
201 margin-right: 10px;
202 ul {
203 border-radius: 3px;
204 }
205 li:last-child {
206 border-bottom: 1px solid #e8e5e5;
207 }
208 li {
209 display: flex;
210 border: 1px solid #e8e5e5;
211 border-bottom: none;
212
213 p:nth-child(1) {
214 width: 35%;
215 text-align: center;
216 background-color: #fafafa;
217 border-right: 1px solid #e8e5e5;
218 padding: 10px 0;
219 }
220 p:nth-child(2) {
221 width: 65%;
222 display: flex;
223 align-items: center;
224 box-sizing: border-box;
225 margin: 0 10px;
226 }
227 }
228 }
229 &-right {
230 width: 50%;
231 margin-left: 10px;
232 }
233 }
234 </style> 265 </style>
......