<template>
<div class="auditMsg">
<div>
<div class="head_boxtwo" v-show="this.$route.query.isTitle != 0">
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/indexPage'}">首页</el-breadcrumb-item>
<el-breadcrumb-item>待办事件</el-breadcrumb-item>
</el-breadcrumb>
<div class="myBox">
<div class="headLeft"><h4>待办事件</h4></div>
<div class="headRight">
<el-row>
<el-button class="addButton" type="text" @click="rejectMsg" v-if="rejectShow">驳回</el-button>
<el-button class="addButton a" type="primary" @click="handleBtnChange($event)">{{appro}}</el-button>
</el-row>
</div>
</div>
<div class="myMsg">
<div class="msgLift">
<div class="msgliftl">
<div class="mymsgTOP"> <span class="myColor">创建人：</span><span>{{myName}}</span></div>
<div><span class="myColor">创建时间：</span><span>{{craetionTime | formatDate}}</span></div>
</div>
<div class="msgliftr">
<div class="mymsgTOP"> <span class="myColor">修改人：</span><span>{{hisName}}</span></div>
<div><span class="myColor">修改时间：</span><span>{{modifiTime | formatDate}}</span></div>
</div>
</div>
<div class="msgRight">
<div>状态</div>
<div class="msgRight_top">{{stateNow}}</div>
</div>
</div>
</div>
<div class="head_boxtwo" v-show="this.$route.query.isTitle == 0">
<el-breadcrumb separator="/">
<el-breadcrumb-item>内容管理</el-breadcrumb-item>
<el-breadcrumb-item :to="{ path: '/serviceGuidePage'}">业务服务指南</el-breadcrumb-item>
<el-breadcrumb-item>详情</el-breadcrumb-item>
</el-breadcrumb>
<div class="headLeft"><h4>详情</h4></div>
<div class="myMsg">
<div class="msgLift">
<div class="msgliftl">
<div class="mymsgTOP"> <span class="myColor">创建人：</span><span>{{myName}}</span></div>
<div><span class="myColor">创建时间：</span><span>{{craetionTime | formatDate}}</span></div>
</div>
<div class="msgliftr">
<div class="mymsgTOP"> <span class="myColor">修改人：</span><span>{{hisName}}</span></div>
<div><span class="myColor">修改时间：</span><span>{{modifiTime | formatDate}}</span></div>
</div>
</div>
</div>
</div>
<div class="content_boxtwo">
<div class="form_box">
<div class="myWord">信息</div>
<div class="myOnly">
<el-row style="width: 100%">
<el-col :span="8">
<div class="myonlyFirst">
<div><span class="myColor">业务名称：</span><span>{{activity}}</span></div>
<div class="myfirstOne">
<div class="myColor">业务icon：</div>
<img class="myImg" :src=icon alt="">
</div>
</div>
</el-col>
<el-col :span="8">
<div class="myonlySecond" style="padding-right: 75px;">
<div><span class="myColor">归属银行：</span><span>{{bankName}}</span></div>
<div class="myfirstOneoo" style="position: relative;left: -56px"><span class="myColor">是否支持在线填单：</span><span>{{howChoose}}</span></div>
<div v-if="!rejectShow" class="myfirstOneoo">
<span class="myColor">驳回原因：</span><span>{{rejectReason}}</span>
</div>
</div>
</el-col>
<el-col :span="8">
<div class="myonlyThird">
<div v-show="this.$route.query.isTitle != 0"><span class="myColor">类别：</span><span>{{category}}</span></div>
<div class="myonlyThirdone" v-if="howChoose == '是'" style="position: relative;left: -56px">
<span class="myColor">在线填单链接：</span><span class="myColoro">{{myLink}}</span>
</div>
</div>
</el-col>
</el-row>
</div>
<div class="line"></div>
<div class="myWord">内容详细</div>
<div class="myContent">
<div class="myCenter" v-html="process">
{{process}}
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
status: '',
appro: "",
myName: '',
hisName: '',
craetionTime: '',
modifiTime: '',
stateNow: '',
activity: '',
bankName: '',
myLink: '',
category: '',
howChoose: '',
icon: '',
process: '',
rejectReason: '',
rejectShow: true
}
},
filters: {
formatDate: function (value) {
let date = new Date(value);
let y = date.getFullYear();
let MM = date.getMonth() + 1;
MM = MM < 10 ? ('0' + MM) : MM;
let d = date.getDate();
d = d < 10 ? ('0' + d) : d;
let h = date.getHours();
h = h < 10 ? ('0' + h) : h;
let m = date.getMinutes();
m = m < 10 ? ('0' + m) : m;
let s = date.getSeconds();
s = s < 10 ? ('0' + s) : s;
return y + '-' + MM + '-' + d;
}
},
computed: {},
mounted() {
this.auditEdit();
},
components: {},
methods: {
rejectMsg() {
this.$prompt('', '驳回', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPlaceholder: '请输入驳回原因',
showInput: true
}).then(({value}) => {
let _this = this;
if (!value || value == " ") {
_this.$message({
type: 'error',
message: "驳回理由不能为空！"
});
} else {
if (value.length >= 100) {
_this.$message({
type: 'error',
message: "驳回理由不超过100个字符！"
});
} else {
let param = {
id: _this.$route.query.id,
rejectReason: value,
status: _this.status,
};
_this.$https({
method: 'put',
url: 'businessInfo/reject',
authType: this.backToken
}, _this.$qs.stringify(param)).then((res) => {
if (res.data.status == 201) {
_this.$message({
type: 'success',
message: res.data.message
});
_this.$router.push('/indexPage');
} else {
_this.$message({
type: 'error',
message: res.data.message
});
}
}, (error) => {
console.log(error)
}
)
}
}
}).catch(() => {
this.$message({
type: 'info',
message: '取消输入'
});
});
},
handleBtnChange(ev) {
let btnName = ev.currentTarget.innerText;
switch (btnName) {
case '通过(上线)':
this.passMsg();
break;
case '通过(下线)':
this.passMsg();
break;
case '重新编辑':
this.$router.push({
path: '/newServiceGuide',
query: {id: this.$route.query.id}
});
break;
case '再次申请下线':
this.handleLine();
break;
default:
break;
}
},
handleLine() {
let _this = this;
_this.$confirm('是否再次申请下线?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
_this.$https({
method: 'put',
url: 'businessInfo/disable?id=' + _this.$route.query.id,
authType: this.backToken
}).then((res) => {
_this.onSearch();
if (res.data.status == 201) {
this.$message({
type: 'success',
message: res.data.message
});
_this.$router.push('/indexPage');
}
}, (error) => {
this.$message({
type: 'fail',
message: "下线失败!" + error.response.data
});
}
)
})
},
passMsg() {
let _this = this;
let param = {
id: _this.$route.query.id,
status: _this.status,
};
_this.$https({
method: 'put',
url: 'businessInfo/approved',
authType: this.backToken
}, _this.$qs.stringify(param)).then((res) => {
if (res.data.status == 201) {
_this.$message({
type: 'success',
message: res.data.message
});
_this.$router.push('/indexPage');
} else {
_this.$message({
type: 'error',
message: res.data.message
});
}
}, (error) => {
console.log(error)
}
)
},
auditEdit() {
this.category = this.$route.query.typeName;
let _this = this;
let param = {id: _this.$route.query.id};
_this.$https({
method: 'get',
url: 'businessInfo/getById',
authType: this.backToken
}, param).then((res) => {
if (res.data.status == 2) {
_this.appro = "通过(上线)";
_this.stateNow = "审批上线";
} else if (res.data.status == 3) {
_this.appro = "通过(下线)";
_this.stateNow = "审批下线";
} else if (res.data.status == 1) {
_this.appro = "重新编辑";
_this.stateNow = "上线被驳回";
_this.rejectShow = false;
} else if (res.data.status == 6) {
_this.appro = "再次申请下线";
_this.stateNow = "下线被驳回";
_this.rejectShow = false;
}
_this.status = res.data.status;
_this.activity = res.data.name;
_this.bankName = res.data.bankName;
_this.craetionTime = res.data.createTime;
_this.modifiTime = res.data.updateTime;
_this.myName = res.data.createEmployee;
_this.hisName = res.data.modifyEmployee;
_this.myLink = res.data.skipLink;
_this.icon = res.data.icon;
_this.process = res.data.process;
_this.rejectReason = res.data.rejectReason;
if (res.data.isSkip == '1') {
_this.howChoose = '是';
} else {
_this.howChoose = '否';
}
}, (error) => {
console.log(error)
}
)
}
},
}
</script>
<style lang="less">
@import '../../style/common';
.auditMsg {
width: 100%;
height: calc(100% - 0px);
overflow-x: hidden;
overflow-y: scroll;
.head_boxtwo {
padding: 20px 30px 20px 20px !important;
h6 {
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.65);
padding: 5px 0px 13px;
}
h4 {
font-size: 20px;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
}
.myBox {
width: 100%;
display: flex;
justify-content: space-between;
.headLeft {
width: 10%;
}
.headRight {
.el-button--text {
color: rgba(0, 0, 0, 0.6);
border: 1px solid #dcdfe6;
}
.addButton {
width: 47px;
height: 26px;
padding: 0;
text-align: center;
line-height: 26px;
font-size: 23px;
}
.addButton.a {
width: 85px;
}
.el-button {
text-align: center;
font-size: 12px;
line-height: 20px;
}
.el-button span {
font-size: 12px;
}
}
}
.myMsg {
width: 100%;
margin-top: 18px;
display: flex;
justify-content: space-between;
.msgLift {
width: 30%;
display: flex;
justify-content: space-between;
.msgliftl {
margin-right: 10px;
}
.myColor {
display: inline-block;
color: black;
width: 70px;
text-align: right;
}
.mymsgTOP {
margin-bottom: 10px;
span.myColor {
width: 63px;
}
}
}
.msgRight {
text-align: right;
div {
font-size: 14px;
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
}
div.msgRight_top {
margin-top: 5px;
font-size: 16px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
}
}
}
}
.content_boxtwo {
width: 100%;
height: 100%;
background: #F0F2F5;
padding: 24px 24px 0;
border: 1px solid transparent;
.form_box {
padding: 32px 24px;
background: #fff;
.myWord {
font-weight: 600;
font-size: 18px;
}
.myOnly {
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 10px;
.myColor {
color: black;
}
.myonlyFirst {
word-break: break-all;
word-wrap: break-word;
.myfirstOne {
margin-top: 20px;
display: flex;
align-items: center;
.myImg {
width: 100px;
height: 100px;
}
}
}
.myonlySecond {
word-break: break-all;
word-wrap: break-word;
.myfirstOneoo {
margin-top: 15px;
word-break: break-all;
word-wrap: break-word;
}
}
.myonlyThird {
word-break: break-all;
word-wrap: break-word;
.myonlyThirdone {
word-break: break-all;
word-wrap: break-word;
margin-top: 20px;
.myColoro {
color: #0000cc;
}
}
}
}
.line {
width: 100%;
height: 1.5px;
background: #eeeeee;
margin-top: 10px;
margin-bottom: 20px;
}
.myContent {
padding-top: 5px;
.myCenter {
width: 600px;
min-height: 379px;
margin-left: 15%;
overflow-x: hidden;
overflow-y: auto;
img{
width: 100%;
}
}
.myCenter::-webkit-scrollbar {
display: none;
}
}
}
}
table {
border-left: #ddd solid 1px;
border-top:#ddd solid 1px;
border-collapse:collapse;
}
table td{
padding: 2px;
border-right: #ddd solid 1px;
border-bottom: #ddd solid 1px;
}
}
</style>