Commit 06527d13 authored by 刘雅文's avatar 刘雅文

改需求

parent 41449a11
<template> <template>
<div class="page-com"> <div class="page-com">
<block-header :title="title"></block-header> <!-- <block-header :title="title"></block-header> -->
<table class="table"> <table class="table">
<tr> <tr>
<td>申请日期:</td> <td>申请日期:</td>
...@@ -51,7 +51,7 @@ export default { ...@@ -51,7 +51,7 @@ export default {
props: { props: {
title: { title: {
type: String, type: String,
required: true, required: false,
}, },
params: { params: {
type: Object, type: Object,
...@@ -76,8 +76,8 @@ export default { ...@@ -76,8 +76,8 @@ export default {
if(this.params){ if(this.params){
console.log(this.params,'哈哈'); console.log(this.params,'哈哈');
const {applyVo} = this.params; const {applyVo} = this.params;
this.loanModel = applyVo this.loanModel = applyVo;
this.productNameFormat(this.loanModel.productName) this.productNameFormat(this.loanModel.productName);
} }
}, },
......
<template> <template>
<div class="page-com"> <div class="page-com">
<block-header title="账单详情"/> <!-- <block-header title="账单详情"/> -->
<div class="block-box"> <div class="block-box">
<table class="table"> <table class="table">
<tr> <tr>
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
</div> </div>
<div class="tables"> <div class="tables">
<block-header :title="title"></block-header> <!-- <block-header :title="title"></block-header> -->
<el-table <el-table
@filter-change="handleFilterChange" @filter-change="handleFilterChange"
border border
...@@ -162,7 +162,7 @@ export default { ...@@ -162,7 +162,7 @@ export default {
props: { props: {
title: { title: {
type: String, type: String,
required: true, required: false,
}, },
params: { params: {
type: Object, type: Object,
......
<template> <template>
<div class="page-com"> <div class="page-com">
<block-header :title="title"></block-header> <!-- <block-header :title="title"></block-header> -->
<el-table <el-table
border border
size="mini" size="mini"
...@@ -25,7 +25,7 @@ export default { ...@@ -25,7 +25,7 @@ export default {
props: { props: {
title: { title: {
type: String, type: String,
required: true, required: false,
}, },
params: { params: {
type: Object, type: Object,
......
<template>
<el-drawer
:title="title"
size="70%"
:wrapperClosable="false"
:visible.sync="dialogVisible"
direction="rtl"
:before-close="handleClose"
>
<div class="page">
<div class="loan-detail">
<el-tabs
class="loan-tabs"
tab-position="left"
v-model="activeComponents"
@tab-click="handleTabClick"
>
<el-tab-pane name="ApplyInfo" label="申请信息"></el-tab-pane>
<el-tab-pane
v-if="$permissionUtils.rolePermission('customBoss')"
name="ContractList"
label="借款合同"
></el-tab-pane>
<el-tab-pane name="BillList" label="账单详情"></el-tab-pane>
<el-tab-pane name="RePayList" label="还款情况"></el-tab-pane>
<el-tab-pane name="ReliefList" label="减免记录"></el-tab-pane>
</el-tabs>
<div class="loan-detail-content">
<template v-if="visible">
<component
@handleClose="visible = false"
:is="activeComponents"
:params="items"
:title="dTitle"
/>
</template>
</div>
</div>
</div>
</el-drawer>
</template>
<script>
import BlockHeader from "@/components/byh/componments/blockHeader";
import ApplyInfo from "./ApplyInfo";
import ContractList from "./ContractList";
import RePayList from "./RePayList";
import BillList from "./BillList";
import ReliefList from "./ReliefList";
import * as moment from "moment";
export default {
name: "AddUserServiceDialog",
components: {
BlockHeader,
ApplyInfo,
ContractList,
RePayList,
BillList,
ReliefList,
},
props: {
dialogVisible: {
type: Boolean,
required: true,
},
title: {
type: String,
required: true,
},
params: {
type: Object,
required: true,
},
},
data() {
return {
visible: false,
activeComponents: "",
dTitle: "",
active: "",
items: {},
loan: {},
};
},
async created() {
if (this.params) {
const { loanNo } = this.params;
this.items = this.params;
await this.initLoanInfo(loanNo);
}
},
methods: {
headerStyle() {
return "tableHeaderStyle";
},
//根据借款信息查借款所有信息
async initLoanInfo(loanNo) {
const res = await this.$$get("/detail/customer/" + loanNo);
const { success, result } = res.data;
if (success && result != null) {
this.loan = result;
this.handleTabClick({
name: "ApplyInfo",
label: "申请信息",
});
}
},
/*日期*/
dateFormats: function (row, column) {
let date = row[column.property];
if (date === undefined) return "";
return moment(date).format("YYYY-MM-DD");
},
handleClose() {
this.$emit("handleClose");
},
// 切换选项卡
handleTabClick(tab) {
this.activeComponents = tab.name;
this.visible = true;
this.dTitle = tab.label;
this.items = {
...this.loan,
...this.params,
};
},
},
};
</script>
<style scoped lang="less">
.page,
.loan-detail {
height: 100%;
overflow: auto;
}
.page {
padding-right: 0;
}
.loan-detail {
display: flex;
position: relative;
.loan-tabs {
position: sticky;
top: 0;
right: 0;
width: 100px;
}
.loan-detail-content {
width: calc(100% - 100px);
box-sizing: border-box;
padding-left: 20px;
} .loan-detail-content {
width: calc(100% - 100px);
box-sizing: border-box;
padding-left: 20px;
}
}
</style>
<template> <template>
<!-- 修改内容 -->
<el-drawer <el-drawer
:title="title" :title="title"
size="70%" size="70%"
:wrapperClosable="false" :wrapperClosable="false"
:visible.sync="dialogVisible" :visible.sync="dialogVisible"
direction="rtl" direction="rtl"
:before-close="handleClose"> :before-close="handleClose"
<div class="page"> >
<div class="loan-detail"> <div class="page">
<el-tabs <div class="loan-detail">
class="loan-tabs" <el-collapse v-model="activeNames" @change="handleChange">
tab-position="left" <el-collapse-item title="申请信息" name="1">
v-model="activeComponents" <ApplyInfo :params="items"></ApplyInfo>
@tab-click="handleTabClick"> </el-collapse-item>
<el-tab-pane name="ApplyInfo" label="申请信息"></el-tab-pane> <el-collapse-item title="借款合同" name="2">
<el-tab-pane v-if="$permissionUtils.rolePermission('customBoss')" name="ContractList" <ContractList :params="items"
label="借款合同"></el-tab-pane> v-if="$permissionUtils.rolePermission('customBoss')"
<el-tab-pane name="BillList" label="账单详情"></el-tab-pane> ></ContractList>
<el-tab-pane name="RePayList" label="还款情况"></el-tab-pane> </el-collapse-item>
<el-tab-pane name="ReliefList" label="减免记录"></el-tab-pane> <el-collapse-item title="账单详情" name="3">
</el-tabs> <BillList :params="items"></BillList>
<div class="loan-detail-content"> </el-collapse-item>
<template v-if="visible"> <el-collapse-item title="还款情况" name="4">
<component <RePayList :params="items"></RePayList>
@handleClose="visible = false" </el-collapse-item>
:is="activeComponents" <el-collapse-item title="减免记录" name="5">
:params="items" <ReliefList :params="items"></ReliefList>
:title="dTitle"/> </el-collapse-item>
</template> </el-collapse>
</div>
</div>
</div> </div>
</div>
</el-drawer> </el-drawer>
</template> </template>
...@@ -44,46 +44,46 @@ import ReliefList from "./ReliefList"; ...@@ -44,46 +44,46 @@ import ReliefList from "./ReliefList";
import * as moment from "moment"; import * as moment from "moment";
export default { export default {
name: 'AddUserServiceDialog', name: "AddUserServiceDialog",
components: { components: {
BlockHeader, BlockHeader,
ApplyInfo, ApplyInfo,
ContractList, ContractList,
RePayList, RePayList,
BillList, BillList,
ReliefList ReliefList,
}, },
props: { props: {
dialogVisible: { dialogVisible: {
type: Boolean, type: Boolean,
required: true, required: true,
}, },
title: { title:{
type: String, type:String,
required: true, required:true,
}, },
params: { params: {
type: Object, type: Object,
required: true required: true,
}, },
}, },
data() { data() {
return { return {
visible: false, visible: false,
activeComponents: '',
dTitle: '',
active: "", active: "",
items: {}, items: {},
loan: {} loan: {},
} activeNames: ["1"],
};
}, },
async created() { async created() {
if (this.params) { if (this.params) {
const {loanNo} = this.params; const { loanNo } = this.params;
this.items = this.params; this.items = this.params;
await this.initLoanInfo(loanNo) console.log(this.items,'111');
await this.initLoanInfo(loanNo);
} }
}, },
methods: { methods: {
headerStyle() { headerStyle() {
...@@ -91,63 +91,56 @@ export default { ...@@ -91,63 +91,56 @@ export default {
}, },
//根据借款信息查借款所有信息 //根据借款信息查借款所有信息
async initLoanInfo(loanNo) { async initLoanInfo(loanNo) {
const res = await this.$$get('/detail/customer/' + loanNo); const res = await this.$$get("/detail/customer/" + loanNo);
const {success, result} = res.data; const { success, result } = res.data;
console.log(res.data,'222');
if (success && result != null) { if (success && result != null) {
this.loan = result; this.loan = result;
this.handleChange({
this.handleTabClick({
name: "ApplyInfo", name: "ApplyInfo",
label: "申请信息" label: "申请信息",
}); });
} }
}, },
/*日期*/ /*日期*/
dateFormats: function (row, column) { dateFormats: function (row, column) {
let date = row[column.property] let date = row[column.property];
if (date === undefined) return ''; if (date === undefined) return "";
return moment(date).format("YYYY-MM-DD") return moment(date).format("YYYY-MM-DD");
}, },
handleClose() { handleClose() {
this.$emit("handleClose"); this.$emit("handleClose");
}, },
// 切换选项卡 // 切换选项卡
handleTabClick(tab) { handleChange(val) {
this.activeComponents = tab.name; console.log(val,'333');
this.visible = true;
this.dTitle = tab.label;
this.items = { this.items = {
...this.loan, ...this.loan,
...this.params ...this.params,
}; };
} },
} },
} };
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.page, .loan-detail { .page,
.loan-detail {
height: 100%; height: 100%;
overflow: auto; overflow: auto;
} }
.page{ .page {
padding-right: 0; padding-right: 0;
} }
.el-collapse {
width: 100%;
}
.loan-detail { .loan-detail {
display: flex; display: flex;
position: relative; position: relative;
.loan-tabs { .el-collapse-item {
position: sticky; width:100%;
top: 0;
right: 0;
width: 100px;
}
.loan-detail-content {
width: calc(100% - 100px);
box-sizing: border-box; box-sizing: border-box;
padding-left: 20px; padding-left: 20px;
} }
......
<template> <template>
<div class="page-com"> <div class="page-com">
<div class="tables"> <div class="tables">
<block-header :title="title"></block-header> <!-- <block-header :title="title"></block-header> -->
<el-table <el-table
@filter-change="handleFilterChange" @filter-change="handleFilterChange"
border border
...@@ -58,7 +58,7 @@ export default { ...@@ -58,7 +58,7 @@ export default {
props: { props: {
title: { title: {
type: String, type: String,
required: true, required: false,
}, },
params: { params: {
type: Object, type: Object,
......
<template> <template>
<div class="page-com"> <div class="page-com">
<div class="tables"> <div class="tables">
<block-header :title="title"></block-header> <!-- <block-header :title="title"></block-header> -->
<el-table <el-table
@filter-change="handleFilterChange" @filter-change="handleFilterChange"
border border
...@@ -53,7 +53,7 @@ export default { ...@@ -53,7 +53,7 @@ export default {
props: { props: {
title: { title: {
type: String, type: String,
required: true, required: false,
}, },
params: { params: {
type: Object, type: Object,
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment