<!-- 催收函记录 -->
|
|
<template>
|
<div>
|
<div class="header-block">
|
<p class="section-title">催收函记录</p>
|
<div
|
v-if="canEdit"
|
style="display: flex; flex-direction: row; margin-bottom: 10px"
|
>
|
<el-button
|
type="primary"
|
size="mini"
|
@click="requestCreateCollectionLetter"
|
:loading="createCollectionLetterLoading"
|
>生成催收函</el-button
|
>
|
</div>
|
<div class="list-table">
|
<el-form ref="ruleForm" :model="ruleForm" :show-message="false">
|
<el-table :data="ruleForm.tableData" fit stripe size="small">
|
<el-table-column prop="inputDate" width="250px">
|
<template slot="header">
|
<span>
|
<span style="padding-left: 8px">催收函生成时间</span>
|
</span>
|
</template>
|
<template slot-scope="scope">
|
<div>{{ scope.row.inputDate }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="opsUser" width="140px">
|
<template slot="header">
|
<span>
|
<span style="padding-left: 8px">操作人</span>
|
</span>
|
</template>
|
<template slot-scope="scope">
|
<div>{{ scope.row.opsUser }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="sendStatusName" width="140px">
|
<template slot="header">
|
<span>
|
<span class="red-star"></span>
|
<span style="padding-left: 8px">催收函发送标识</span>
|
</span>
|
</template>
|
<template slot-scope="scope">
|
<div v-if="!action[scope.$index].edit">
|
{{ scope.row.sendStatusName }}
|
</div>
|
<el-form-item
|
:prop="'tableData.' + scope.$index + '.sendStatus'"
|
v-if="action[scope.$index].edit"
|
>
|
<el-select
|
v-model="scope.row.sendStatus"
|
size="mini"
|
placeholder="请选择"
|
filterable
|
clearable
|
v-if="action[scope.$index].edit"
|
>
|
<el-option
|
v-for="item in [
|
{ value: '0', valueDesc: '未发送' },
|
{ value: '1', valueDesc: '已发送' },
|
]"
|
:key="item.value"
|
:label="item.valueDesc"
|
:value="item.value"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</template>
|
</el-table-column>
|
<el-table-column prop="sendTime" width="250px">
|
<template slot="header">
|
<span>
|
<span class="red-star"></span>
|
<span style="padding-left: 8px">催收函发送时间</span>
|
</span>
|
</template>
|
<template slot-scope="scope">
|
<div>{{ scope.row.sendTime }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" prop="status" width="160px">
|
<template slot-scope="scope">
|
<el-button
|
v-if="action[scope.$index].status === 'edit'"
|
type="text"
|
size="mini"
|
@click="handleEdit(scope.row, scope.$index)"
|
:disabled="
|
canEdit == false ? true : scope.$index != 0 ? true : false
|
"
|
>
|
修改
|
</el-button>
|
<el-button
|
v-if="action[scope.$index].status === 'save'"
|
type="text"
|
size="mini"
|
@click="handleSave(scope.row, scope.$index)"
|
>
|
保存
|
</el-button>
|
<el-button
|
v-if="action[scope.$index].state === 'cancel'"
|
type="text"
|
size="mini"
|
@click="handleCancel(scope.row, scope.$index)"
|
>
|
取消
|
</el-button>
|
<el-button
|
v-if="action[scope.$index].state === 'del'"
|
type="text"
|
size="mini"
|
@click="checkImg(scope.row, scope.$index)"
|
>
|
查看影像资料
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import TableList from "../TableList";
|
import FormList from "../FormList";
|
import {
|
queryAcctLoan,
|
overdueImportCollectionExcel,
|
overdueQueryCollectionLetter,
|
createCollectionLetter,
|
editCollectionLetter,
|
} from "@comprehensive/serve/public";
|
|
export default {
|
props: {
|
// 申请编号
|
serialNo: {
|
type: String,
|
// required: true,
|
},
|
caseId: {
|
type: String,
|
},
|
promissNoteNo: {
|
type: String,
|
},
|
canEdit: {
|
type: Boolean,
|
},
|
objectType: {
|
type: String,
|
default: "",
|
},
|
customerID: {
|
type: String,
|
default: "",
|
},
|
},
|
components: {
|
TableList,
|
FormList,
|
},
|
data() {
|
return {
|
records: [],
|
valueInfo: {},
|
pageInfo: {
|
currentPage: 1,
|
pageSize: 10,
|
total: 0,
|
},
|
loading: false,
|
createCollectionLetterLoading: false,
|
ruleForm: {
|
tableData: [],
|
},
|
action: [],
|
modifyRow: "",
|
saveSuccess: true,
|
newWindow: null,
|
};
|
},
|
created() {
|
this.init();
|
},
|
methods: {
|
init() {
|
this.requestOverdueQueryCollectionLetter();
|
},
|
async requestOverdueQueryCollectionLetter() {
|
const { pageInfo, promissNoteNo } = this;
|
this.loading = true;
|
const resp = await overdueQueryCollectionLetter({
|
...pageInfo,
|
loanId: promissNoteNo ? promissNoteNo : "",
|
});
|
this.loading = false;
|
if (resp.code == "00") {
|
const { result } = resp;
|
this.ruleForm.tableData = result.records;
|
if (resp.result.records.length == 0) return;
|
let status = {
|
status: "edit",
|
edit: false,
|
state: "del",
|
del: false,
|
};
|
let tempAction = [];
|
for (let i = 0; i < this.ruleForm.tableData.length; i++) {
|
tempAction.push(status);
|
}
|
this.action = tempAction;
|
}
|
},
|
async requestCreateCollectionLetter() {
|
const { promissNoteNo } = this;
|
this.loading = true;
|
this.createCollectionLetterLoading = true;
|
try {
|
const resp = await createCollectionLetter({
|
caseId: this.caseId,
|
loanSerialNo: promissNoteNo ? promissNoteNo : "",
|
});
|
console.log("生成失败", resp);
|
this.loading = false;
|
this.createCollectionLetterLoading = false;
|
if (resp.code == "00") {
|
this.requestOverdueQueryCollectionLetter();
|
}
|
} catch (error) {
|
this.loading = false;
|
this.createCollectionLetterLoading = false;
|
}
|
},
|
//修改触发
|
handleEdit(row, index) {
|
this.modifyRow = Object.assign({}, row);
|
let findSave = { status: "save" };
|
if (this._.find(this.action, findSave)) {
|
this.$message.warning("保存当前数据!");
|
return false;
|
}
|
let params = {
|
status: "save",
|
edit: true,
|
state: "cancel",
|
del: true,
|
};
|
this.$set(this.action, index, params);
|
},
|
//保存触发
|
async handleSave(value, index) {
|
const resp = await editCollectionLetter({
|
serialNo: value.serialNo,
|
sendStatus: value.sendStatus,
|
});
|
if (resp.code == "00") {
|
this.requestOverdueQueryCollectionLetter();
|
}
|
},
|
//取消
|
handleCancel(row, index) {
|
this.isModify(index);
|
// for (let key in row) {
|
// if (row[key] !== this.modifyRow[key]) {
|
// this.saveSuccess = false // 用户修改了数据
|
// break
|
// }
|
// }
|
// if (!this.saveSuccess) {
|
|
// }else {
|
|
// }
|
},
|
//查看影像资料
|
checkImg(row, index) {
|
window.open(row.url, "_blank");
|
},
|
// 取消-> 保存/放弃修改
|
isModify(index) {
|
this.action[index].edit = false;
|
this.action[index].status = "edit";
|
this.action[index].state = "del";
|
},
|
},
|
watch: {
|
promissNoteNo: {
|
handler(newVal) {
|
this.requestOverdueQueryCollectionLetter();
|
}
|
}
|
},
|
};
|
</script>
|
|
<style lang="postcss" scoped>
|
.list-table {
|
.poptext {
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
& >>> .el-table th {
|
background: #f5f5f5;
|
color: #222222;
|
padding: 0;
|
border-color: #ebeef5;
|
}
|
& >>> .el-table tr {
|
height: 48px;
|
line-height: 48px;
|
}
|
& >>> .el-table tr th {
|
line-height: 44px;
|
}
|
& >>> .el-table .select-row td {
|
color: #222;
|
background-color: #e7f4fe;
|
}
|
& >>> .el-table td {
|
color: #666666;
|
border-color: #eee;
|
padding: 0;
|
height: 48px;
|
& .cell {
|
line-height: 18px;
|
}
|
}
|
& a {
|
color: #0081f0;
|
cursor: pointer;
|
}
|
& >>> .item-inner p {
|
padding: 0;
|
margin: 0;
|
&.showTooltip {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
}
|
& >>> .item-inner p .el-button + .el-button {
|
padding-left: 10px;
|
}
|
& >>> .el-table__body-wrapper {
|
&::-webkit-scrollbar {
|
height: 10px;
|
width: 10px;
|
}
|
&::-webkit-scrollbar-track-piece {
|
}
|
&::-webkit-scrollbar-track-piece {
|
}
|
&::-webkit-scrollbar-track {
|
border-radius: 1em;
|
/* background-color: rgba(50, 50, 50, 0.1); */
|
background-color: #ffffff;
|
}
|
&::-webkit-scrollbar-thumb {
|
border-radius: 1em;
|
/* background-color: rgba(50, 50, 50, 0.2); */
|
background-color: rgba(0, 0, 0, 0.5);
|
}
|
}
|
& .pagination {
|
padding: 20px 0;
|
color: #666666;
|
& >>> .el-pagination__total {
|
margin-left: 20px;
|
font-size: 14px;
|
color: #666666;
|
}
|
& >>> .el-pager li {
|
width: auto;
|
min-width: 32px;
|
height: 32px;
|
background: rgba(255, 255, 255, 1);
|
border-radius: 4px;
|
border: 1px solid rgba(238, 238, 238, 1);
|
font-size: 14px;
|
color: #666666;
|
font-weight: normal;
|
/* min-width: 34px; */
|
}
|
& >>> .el-pagination__jump {
|
font-size: 14px;
|
color: #666666;
|
}
|
& >>> .btn-next,
|
& >>> .btn-prev {
|
width: 32px;
|
height: 32px;
|
background: rgba(255, 255, 255, 1);
|
border-radius: 4px;
|
border: 1px solid rgba(238, 238, 238, 1);
|
font-size: 14px;
|
color: #666666;
|
}
|
& >>> .btn-next:disabled,
|
& >>> .btn-prev:disabled {
|
opacity: 0.6;
|
}
|
}
|
& .buttons-links >>> .el-link {
|
margin-right: 20px;
|
&:last-child {
|
margin: 0;
|
}
|
}
|
& .button-select {
|
cursor: pointer;
|
color: #0081f0;
|
padding-left: 20px;
|
& >>> .el-icon--right {
|
margin: 0;
|
}
|
}
|
& .button-select-disabled {
|
color: #c5c5c5;
|
padding-left: 20px;
|
/* padding-right: 2em; */
|
}
|
& p.buttons-wraper {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
padding-right: 10px;
|
}
|
}
|
.padding-right {
|
padding-right: 40px;
|
}
|
.listcontent {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
padding-left: 20px;
|
& >>> p {
|
width: 25%;
|
margin-bottom: 10px;
|
font-size: 13px;
|
}
|
}
|
</style>
|
<style lang="postcss" scoped>
|
.form-section {
|
display: flex;
|
align-items: baseline;
|
& .search {
|
margin: 10px 0 0 50px;
|
padding: 0;
|
}
|
}
|
.header-block {
|
margin-bottom: 25px;
|
& .section-title {
|
margin: 30px 0 20px 0;
|
padding: 0 0 0 10px;
|
border-left: solid 2px #0081f0;
|
line-height: 16px;
|
font-size: 14px;
|
color: #222222;
|
}
|
}
|
</style>
|
