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 138 additions and 107 deletions
<!--
* @Description:
* @Autor: renchao
* @LastEditTime: 2023-12-29 16:35:50
* @LastEditTime: 2024-03-19 17:30:22
-->
<template>
<div class='sfxx'>
<div class="sfxx-left">
<div class="slxx_title title-block">
基本信息
<div class="triangle"></div>
</div>
<ul>
<li>
<p>业务号</p>
<p>{{detail.ywh}}</p>
</li>
<li>
<p>申请登记类型</p>
<p>{{detail.sqdjlx}}</p>
</li>
<li>
<p>联系人</p>
<p>{{detail.lxr}}</p>
</li>
<li>
<p>联系人电话</p>
<p>{{detail.lxdh}}</p>
</li>
<li>
<p>缴费人</p>
<p><el-input v-model="detail.jfr"></el-input></p>
</li>
<li>
<p>缴费单号</p>
<p><el-input v-model="detail.jfdh"></el-input></p>
</li>
<li>
<p>应收金额</p>
<p style="color:red">{{detail.ysje}}元</p>
</li>
<li>
<p>实收金额</p>
<p><el-input v-model="detail.ssje"></el-input></p>
</li>
<li>
<p>备注</p>
<p><el-input v-model="detail.bz"></el-input></p>
</li>
</ul>
</div>
<div class="sfxx-right">
<div class="slxx_title title-block">
收费明细
<!-- <div class="triangle"></div> -->
<el-button type="primary" @click="hanldeAdd" style="float:right;margin-top:-5px">增加</el-button>
</div>
<el-table :data="tableData.data" border :height="355">
<el-table-column v-for="item in tableData.columns" :key="item.index" :prop="item.prop" :label="item.label" align="center">
</el-table-column>
<el-table-column label="操作" width="50">
<template slot-scope="scope">
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="slxx_title title-block">
票据
<div class='sfxx slxx'>
<el-form
:model="ruleForm"
ref="ruleForm"
v-Loading="loading"
:label-position="flag ? 'top' : ''"
:inline="flag"
label-width="100px">
<div class="slxx_con" :class="flag ? 'formMarginBot0' : ''">
<div class="slxx_title title-block">
基本信息
<div class="triangle"></div>
</div>
<el-row :gutter="10">
<el-col :span="8">
<el-form-item label="业务号：">
<el-input v-model="ruleForm.ywh"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="申请登记类型：">
<el-input v-model="ruleForm.sqdjlx"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="联系人：">
<el-input v-model="ruleForm.lxr"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="8">
<el-form-item label="联系人电话：">
<el-input v-model="ruleForm.lxdh"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="缴费人：">
<el-input v-model="ruleForm.jfr"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="缴费单号：">
<el-input v-model="ruleForm.jfdh"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="8">
<el-form-item label="应收金额：">
<el-input v-model="ruleForm.ysje"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="实收金额：">
<el-input v-model="ruleForm.ssje"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="备注：">
<el-input v-model="ruleForm.bz"></el-input>
</el-form-item>
</el-col>
</el-row>
<div class="slxx_title title-block">
收费明细
<el-button type="primary" @click="hanldeAdd" style="float:right;margin-top:-5px">增加</el-button>
</div>
<el-table :data="tableDatasf.data" border :height="210">
<el-table-column v-for="item in tableDatasf.columns" :key="item.index" :prop="item.prop" :label="item.label" align="center">
</el-table-column>
<el-table-column label="操作" width="50">
<template slot-scope="scope">
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="slxx_title title-block">
计费明细
<div class="triangle"></div>
</div>
<el-table :data="tableDatajf.data" border :height="210">
<el-table-column v-for="item in tableDatajf.columns" :key="item.index" :prop="item.prop" :label="item.label" align="center">
</el-table-column>
</el-table>
<div class="slxx_title title-block">
票据
<div class="triangle"></div>
</div>
<div style="height:250px">
<img src="../../../../image/pj.jpg" alt="" style="height:100%">
</div>
</div>
</div>
</el-form>
</div>
</template>
<script>
......@@ -80,7 +110,7 @@
components: {},
data () {
return {
detail: {
ruleForm: {
ywh: '',
sqdjlx: '',
lxr: '',
......@@ -91,7 +121,7 @@
ssje: '',
bz: ''
},
tableData: {
tableDatasf: {
columns: [
{
prop: "sfdw",
......@@ -129,7 +159,47 @@
label: "应收金额",
}
],
data: []
data: [],
},
tableDatajf: {
columns: [
{
prop: "sfdw",
label: "计费单位",
},
{
label: '是否额外收费',
align: 'center',
render: (h, scope) => {
return (
<div>
{scope.row.sfewsf == '1' ? <span>是</span> : <span>否</span>}
</div>
)
}
},
{
prop: "sfry",
label: "收费人员",
},
{
prop: "sfkmmc",
label: "收费科目名称",
},
{
prop: "sjffr",
label: "实际付费人",
},
{
prop: "ssje",
label: "实收金额",
},
{
prop: "ysje",
label: "应收金额",
}
],
data: [],
}
}
},
......@@ -191,44 +261,5 @@
</script>
<style scoped lang='scss'>
@import "~@/styles/public.scss";
.sfxx {
display: flex;
padding: 10px;
height: 100%;
box-sizing: border-box;
&-left {
width: 50%;
margin-right: 10px;
ul {
border-radius: 3px;
}
li:last-child {
border-bottom: 1px solid #e8e5e5;
}
li {
display: flex;
border: 1px solid #e8e5e5;
border-bottom: none;
p:nth-child(1) {
width: 35%;
text-align: center;
background-color: #fafafa;
border-right: 1px solid #e8e5e5;
padding: 10px 0;
}
p:nth-child(2) {
width: 65%;
display: flex;
align-items: center;
box-sizing: border-box;
margin: 0 10px;
}
}
}
&-right {
width: 50%;
margin-left: 10px;
}
}
@import "~@/styles/slxx/slxx.scss";
</style>
......