245 lines
14 KiB
Vue
245 lines
14 KiB
Vue
<template>
|
|
<div>
|
|
<el-dialog :title="eventTraDialog.title" :visible="true" width="1300px" append-to-body :close-on-click-modal="false"
|
|
@close="handleClose">
|
|
<div class="dialog-content repayment-trace">
|
|
<div class="pt-8 border-b-solid-lighter-1">
|
|
<div class="height-30 flex-row align-items-center justify-content-between mb-8">
|
|
<div class="f18 color-text-primary">债务信息</div>
|
|
</div>
|
|
<el-collapse-transition>
|
|
<el-row :gutter="56">
|
|
<el-col :span="6">
|
|
<div class="flex-row-center align-items-center height-40 mb-8">
|
|
<span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">当前逾期金额</span>
|
|
<el-input v-model.trim="queryParam.pkgName" disabled>
|
|
</el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="flex-row-center align-items-center height-40 mb-8">
|
|
<span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">最低还款额</span>
|
|
<el-input v-model.trim="queryParam.pkgName" disabled>
|
|
</el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="flex-row-center align-items-center height-40 mb-8">
|
|
<span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">放款金额/本金</span>
|
|
<el-input v-model.trim="queryParam.pkgName" disabled>
|
|
</el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="flex-row-center align-items-center height-40 mb-8">
|
|
<span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">欠款本金</span>
|
|
<el-input v-model.trim="queryParam.pkgName" disabled>
|
|
</el-input>
|
|
</div>
|
|
</el-col>
|
|
|
|
|
|
|
|
</el-row>
|
|
</el-collapse-transition>
|
|
|
|
<div class="height-30 flex-row align-items-center justify-content-between mb-8">
|
|
<div class="f18 color-text-primary">还款方案</div>
|
|
</div>
|
|
<el-collapse-transition>
|
|
<el-row :gutter="56">
|
|
<el-col :span="6">
|
|
<div class="flex-row-center align-items-center height-40 mb-8">
|
|
<span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">还款方式</span>
|
|
<el-select v-model="queryParam.repaymethod"
|
|
clearable placeholder="请选择还款方式"
|
|
class="width100">
|
|
<el-option
|
|
v-for="item in repaymentTypeOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="flex-row-center align-items-center height-40 mb-8">
|
|
<span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">还款金额</span>
|
|
<el-input v-model.trim="queryParam.pkgName"></el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col v-if="queryParam.repaymethod == 2" :span="6">
|
|
<div class="flex-row-center align-items-center height-40 mb-8">
|
|
<span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">分期前偿还金额</span>
|
|
<el-input v-model.trim="queryParam.pkgName"></el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col v-if="queryParam.repaymethod == 2" :span="6">
|
|
<div class="flex-row-center align-items-center height-40 mb-8">
|
|
<span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">先还日期</span>
|
|
<el-input v-model.trim="queryParam.pkgName"></el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col v-if="queryParam.repaymethod == 2" :span="6">
|
|
<div class="flex-row-center align-items-center height-40 mb-8">
|
|
<span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">分期部分金额</span>
|
|
<el-input v-model.trim="queryParam.pkgName"></el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col v-if="queryParam.repaymethod == 0 || queryParam.repaymethod == 2" :span="6">
|
|
<div class="flex-row-center align-items-center height-40 mb-8">
|
|
<span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">还款日期</span>
|
|
<el-input v-model.trim="queryParam.pkgName"></el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col v-if="queryParam.repaymethod == 1 || queryParam.repaymethod == 2" :span="6">
|
|
<div class="flex-row-center align-items-center height-40 mb-8">
|
|
<span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">分期期数</span>
|
|
<el-input v-model.trim="queryParam.pkgName"></el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col v-if="queryParam.repaymethod == 1 || queryParam.repaymethod == 2" :span="6">
|
|
<div class="flex-row-center align-items-center height-40 mb-8">
|
|
<span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">每期还款金额</span>
|
|
<el-input v-model.trim="queryParam.pkgName"></el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col v-if="queryParam.repaymethod == 1 || queryParam.repaymethod == 2" :span="6">
|
|
<div class="flex-row-center align-items-center height-40 mb-8">
|
|
<span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">每期还款日期</span>
|
|
<el-input v-model.trim="queryParam.pkgName"></el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col v-if="queryParam.repaymethod == 1 || queryParam.repaymethod == 2" :span="6">
|
|
<div class="flex-row-center align-items-center height-40 mb-8">
|
|
<span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">第一期还款日期</span>
|
|
<el-input v-model.trim="queryParam.pkgName"></el-input>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-collapse-transition>
|
|
<el-collapse-transition>
|
|
<el-row :gutter="56">
|
|
<el-col :span="20">
|
|
<div class="flex-row-center align-items-center height-40 mb-8">
|
|
<span class="tabs__search-criteria-title flex-shrink-0 pr-16 repayment-width">备注说明</span>
|
|
<el-input v-model.trim="queryParam.pkgName">
|
|
</el-input>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<div class="flex-row align-items-center justify-content-end">
|
|
<el-button type="primary" @click="handleSearch">保存</el-button>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-collapse-transition>
|
|
|
|
</div>
|
|
<!-- table -->
|
|
<div class="pt-8">
|
|
<div class="height-56 flex-row align-items-center justify-content-between">
|
|
<div class="f22 color-text-primary">还款计划列表</div>
|
|
<div class="flex-row">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="case-table">
|
|
<el-table :data="tableData" :height="`${contentHeight}`" >
|
|
<el-table-column type="index" label="序号" width="55"></el-table-column>
|
|
<el-table-column prop="pkgName" label="回款类型" show-overflow-tooltip ></el-table-column>
|
|
<el-table-column prop="planStartTime" label="回款策略" show-overflow-tooltip >
|
|
<template slot-scope="scope">
|
|
<span >{{ scope.row.planStartTime }}
|
|
一次还清
|
|
全部分期：还款金额、分期期数、每期还款金额、每期还款日期、还款截止日期
|
|
部分先还加分期：还款金额、分期钱偿还金额、先还日期、分期部分金额、分期期数、每期还款金额、每期还款日期、还款截止日期
|
|
其他：还款金额
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="entrustingAgencyName" label="约定还款金额" show-overflow-tooltip ></el-table-column>
|
|
<el-table-column prop="channel" label="约定还款日期" show-overflow-tooltip ></el-table-column>
|
|
<el-table-column prop="channel" label="备注" show-overflow-tooltip ></el-table-column>
|
|
<el-table-column prop="channel" label="操作人" show-overflow-tooltip ></el-table-column>
|
|
<el-table-column prop="planStartTime" label="操作时间" show-overflow-tooltip >
|
|
<template slot-scope="scope">
|
|
<span >{{ scope.row.planStartTime | formaDate("yyyy-MM-dd hh:mm:ss") }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="120">
|
|
<template slot-scope="scope">
|
|
<div class="flex-row align-items-center">
|
|
<el-button size="mini" @click="handleDelete(scope)">编辑</el-button>
|
|
<el-button size="mini" @click="handleBackCase(scope)">删除</el-button>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
|
|
</el-table>
|
|
</div>
|
|
|
|
<div class="text-center pt-16">
|
|
<el-pagination
|
|
@size-change="getCaseInfoList"
|
|
@current-change="getCaseInfoList"
|
|
:current-page="queryParam.current"
|
|
:page-size="queryParam.size"
|
|
layout="total, prev, pager, next, jumper"
|
|
:total="total">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="handleClose()">关闭</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import api from "@/services/caseManagement";
|
|
export default {
|
|
components: {
|
|
},
|
|
props: {
|
|
eventTraDialog: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
queryParam:{},
|
|
tableData:[],
|
|
total:0,
|
|
repaymentTypeOptions:[{label:'一次还清',value:'0'},{label:'全部分期',value:'1'},{label:'部分先还加分期',value:'2'},{label:'其他',value:'3'}]
|
|
|
|
};
|
|
},
|
|
mounted () {
|
|
console.log(this.eventTraDialog,'eventTraDialog')
|
|
},
|
|
methods: {
|
|
|
|
handleClose() {
|
|
this.$emit('update:eventTraDialog', null)
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.repayment-trace{
|
|
padding: 0px 20px 16px 20px;
|
|
max-height:800px
|
|
}
|
|
.repayment-width{width: 120px;}
|
|
|
|
</style> |