<template>
|
<el-dialog width="70%"
|
ref="dialog"
|
id="notify"
|
title="短信通知"
|
@close="close"
|
:visible.sync="dialogVisible">
|
<div class="viewContent">
|
<div class="contentItem">
|
<div class="left">
|
<label for="">客户名称:</label>
|
<input type="text" disabled v-model="renderData.acctName" >
|
</div>
|
<div class="right">
|
<label for="">手机号:</label>
|
<input type="text" disabled v-model="renderData.phone">
|
</div>
|
</div>
|
<div class="contentItem">
|
<div class="left">
|
<label for="">银行名称:</label>
|
<input type="text" disabled v-model="renderData.bankName">
|
</div>
|
<div class="right">
|
<label for="">银行卡号:</label>
|
<input type="text" disabled v-model="renderData.acctNo">
|
</div>
|
</div>
|
<div class="contentItem">
|
<div class="left">
|
<label for="">短信模板:</label>
|
<el-select v-model="renderData.tempNo" placeholder="请选择" @change="changeSelect" style="width: 200px;" clearable>
|
<el-option
|
v-for="(item,index) in tempList"
|
:key=index
|
:label="item.key"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</div>
|
<div class="right">
|
<label for="">协议签约:</label>
|
<input type="text" disabled :value="enumerMap(renderData.treatyStatus,'treatyStatus')">
|
</div>
|
</div>
|
<div class="contentItem">
|
<div class="all">
|
<label for="">短信内容:</label>
|
<el-input type="textarea" :rows="2" style="width: 67%" disabled v-model="renderData.tempContent"> </el-input>
|
</div>
|
</div>
|
<div class="btn">
|
<div class="btnbox">
|
<el-button type="primary" :disabled="isTreaty" @click="notify()" >确定</el-button>
|
<el-button @click="close" >取消</el-button>
|
</div>
|
</div>
|
</div>
|
<div class="transBottom">
|
<h5>客户通知历史</h5>
|
<el-table :data="menuItems"
|
v-loading="loading"
|
class="table">
|
<el-table-column prop="acctName"
|
align="center"
|
min-width="80"
|
label="客户名称">
|
</el-table-column>
|
<el-table-column prop="phone"
|
align="center"
|
min-width="80"
|
label="手机号">
|
</el-table-column>
|
<el-table-column prop="bankName"
|
align="center"
|
min-width="100"
|
label="银行名称">
|
</el-table-column>
|
<el-table-column prop="acctNo"
|
align="center"
|
min-width="120"
|
label="银行卡号">
|
</el-table-column>
|
<el-table-column prop="idNos"
|
align="center"
|
min-width="120"
|
label="身份证">
|
</el-table-column>
|
<el-table-column prop="notifyTime"
|
align="center"
|
min-width="100"
|
label="短信提醒">
|
</el-table-column>
|
<el-table-column prop="notifyDays"
|
align="center"
|
min-width="50"
|
label="提醒天数">
|
</el-table-column>
|
</el-table>
|
<el-pagination
|
layout="total, prev, pager, next, jumper"
|
:total.sync="totalCount"
|
:current-page="queryData.page"
|
:page-size="queryData.pageSize"
|
background
|
ref="pagination"
|
style="margin-top: 10px;"
|
@current-change="handleCurrentChange"
|
></el-pagination>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
tempList: [
|
{ value: "PAYMENT_SIGN_NOTIFY", key: "协议签约通知" }
|
],
|
renderData: {
|
acctNo: "",
|
acctName: "",
|
phone: "",
|
bankName: "",
|
status: "",
|
tempNo: "",
|
tempContent: ""
|
},
|
queryData: {
|
page: 1,
|
pageSize: 5,
|
idNo: "",
|
acctName: ""
|
},
|
dialogVisible: this.value,
|
isTreaty: false,
|
menuItems: [],
|
loading: false,
|
totalCount: 0,
|
tempSetData: {
|
}
|
}
|
},
|
props: {
|
data: {
|
type: [Object,Array],
|
default() {
|
return {}
|
}
|
},
|
value: {
|
type: Boolean,
|
default: false
|
}
|
},
|
watch: {
|
value: function(n) {
|
this.dialogVisible = n
|
if(n) {
|
if(this.data.treatyStatus != 1) {
|
this.isTreaty = false
|
} else {
|
this.isTreaty = true
|
}
|
this.getParentData()
|
this.initNotifyHistory()
|
}
|
}
|
},
|
methods: {
|
// 获取客户历史通知记录
|
getNotifyHistory() {
|
const that = this;
|
this.loading = true;
|
this.$http.post("treaty/queryAcctNotify", this.queryData)
|
.then(response => {
|
if (response.data.retHeader.retCode === "0000") {
|
if (response.data.retBody.totalCount) {
|
that.totalCount = response.data.retBody.totalCount;
|
}
|
that.menuItems = response.data.retBody.list;
|
this.encrypt(that.menuItems)
|
} else {
|
that.totalCount = 0
|
that.menuItems = []
|
}
|
this.loading = false;
|
})
|
.catch(err => {
|
console.log(err);
|
});
|
},
|
initNotifyHistory() {
|
this.queryData.idNo = this.data.idNo;
|
this.queryData.acctName = this.data.acctName;
|
this.getNotifyHistory()
|
},
|
// 取消按钮
|
cancel() {
|
this.$emit('isShowMask')
|
},
|
// 短信通知客户
|
notify() {
|
this.$http.post("treaty/acctSmsSend",this.renderData).then(response => {
|
if (response.data.retHeader.retCode === "0000") {
|
this.$notify({
|
title: '成功',
|
message: response.data.retHeader.retMessage,
|
type: 'success',
|
duration: 2000
|
})
|
} else {
|
this.$notify({
|
title: '失败',
|
message: response.data.retHeader.retMessage,
|
type: 'fail',
|
duration: 2000
|
})
|
}
|
this.$emit('isShowMask')
|
}).catch(err => {
|
console.log(err)
|
})
|
},
|
// 获取父组件传递过来的值
|
getParentData() {
|
this.renderData.acctNo = this.data.acctNo;
|
this.renderData.acctName = this.data.acctName;
|
this.renderData.phone = this.data.phone;
|
this.renderData.status = this.data.status;
|
this.renderData.bankName = this.data.bankName;
|
this.renderData.idNo = this.data.idNo;
|
this.renderData.treatyStatus = this.data.treatyStatus;
|
this.renderData.tempNo = this.tempList[0].value;
|
this.renderData.tempContent = '';
|
|
this.queryTempContent()
|
},
|
close() {
|
this.$emit("input",false)
|
},
|
changeSelect() {
|
if(this.renderData.tempNo === '') {
|
this.renderData.tempContent = "";
|
return;
|
}
|
this.queryTempContent()
|
},
|
queryTempContent() {
|
this.tempSetData.tempNo = this.renderData.tempNo
|
this.tempSetData.phone = this.renderData.phone
|
this.tempSetData.acctName = this.renderData.acctName
|
this.$http.post("treaty/acctSmsPreview",this.tempSetData).then(response => {
|
if (response.data.retHeader.retCode === "0000") {
|
this.renderData.tempContent = response.data.retBody.tempContent
|
} else {
|
this.renderData.tempContent = ""
|
this.$message.error(response.data.retHeader.retMessage)
|
}
|
}).catch(err => {
|
console.log(err)
|
})
|
},
|
// 分页
|
handleCurrentChange(val) {
|
this.queryData.page = val;
|
this.getNotifyHistory();
|
},
|
// 身份证显示加密
|
encrypt(arr) {
|
arr.forEach(item => {
|
if (item.idNo) {
|
item.idNos = item.idNo.slice(0, 4) + "**********" + item.idNo.slice(12, 16);
|
}
|
});
|
}
|
}
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
.title {
|
background-color: #e4e4e4;
|
height: 56px;
|
line-height: 40px;
|
border-radius: 6px;
|
padding: 6px;
|
font-size: 16px;
|
}
|
.viewContent {
|
padding: 0px 50px;
|
padding-bottom: 20px;
|
.contentItem {
|
width: 100%;
|
height: 56px;
|
padding: 10px 0px;
|
label {
|
display: inline-block;
|
width: 30%;
|
text-align: right;
|
}
|
input {
|
width: 200px;
|
height: 36px;
|
outline: none;
|
border-radius: 4px;
|
border: 1px solid #DDD;
|
padding-left: 8px;
|
}
|
input:disabled {
|
background-color: #f5f7fa;
|
border-color: #e4e7ed;
|
color: #c0c4cc;
|
cursor: not-allowed;
|
}
|
.left {
|
width: 50%;
|
float: left;
|
}
|
.right {
|
width: 50%;
|
float: right;
|
}
|
.all {
|
width: 100%;
|
label {
|
display: inline-block;
|
width: 15%;
|
text-align: right;
|
}
|
}
|
}
|
.line {
|
width: 100%;
|
height: 1px;
|
background-color: #aaa;
|
margin: 16px 0px;
|
}
|
>h5 {
|
margin: 6px 0px;
|
font-size: 16px;
|
}
|
.btn {
|
width: 200px;
|
padding: 20px 0px;
|
margin-left: 50%;
|
transform: translateX(-50%);
|
}
|
}
|
.transBottom {
|
margin: 0px auto 0px;
|
border-top: 1px solid #ccc;
|
padding: 16px;
|
font-size: 14px;
|
> h5 {
|
font-size: 16px;
|
margin: 0px 0px 12px;
|
}
|
}
|
</style>
|
