162 lines
4.2 KiB
Vue
162 lines
4.2 KiB
Vue
<template>
|
||
<div>
|
||
<div class="dialog-wrapper">
|
||
<div class="title">
|
||
{{ '告知函('+(currentIndex + 1)+'/'+ list.length+')' }}
|
||
</div>
|
||
<h3 class="top">{{currentItem?.title?currentItem?.title:(currentItem?.type==1 ? '质量不合格整改' : '质量不合格调整告知')}}</h3>
|
||
<div class="center">
|
||
<div v-html="formattedContent(currentItem)"></div>
|
||
</div>
|
||
<div class="end">
|
||
<div>中道汽车救援股份有限公司</div>
|
||
<div>区域管理部</div>
|
||
<div>{{formatDate(currentItem)}}</div>
|
||
</div>
|
||
<div class="iptWrap">
|
||
<div class="tip">请仔细阅读告知函内容，并在下方输入"我已阅读”以表明您已充分理解函件中的各项信息。</div>
|
||
<el-input style="width: 50%" v-model.trim="content" placeholder="请输入我已阅读"></el-input>
|
||
</div>
|
||
<div class="dialog-footer">
|
||
<el-button type="info" size="small" v-if="num > 0">还需阅读{{num}}秒</el-button>
|
||
<el-button type="primary" size="small" v-if="num==0" @click="confirmHandle(currentItem)">确认</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {myMixins} from "@/utils/myMixins"
|
||
import {selectUnReadNotifyBySupplier, correctionHandle} from "@/api/order"
|
||
export default {
|
||
name: "notificationList",
|
||
mixins: [myMixins],
|
||
data() {
|
||
return {
|
||
list: [],
|
||
currentIndex: 0,
|
||
num:10,
|
||
timer: null,
|
||
content: '',
|
||
}
|
||
},
|
||
computed: {
|
||
currentItem() {
|
||
return this.list[this.currentIndex];
|
||
}
|
||
},
|
||
watch: {
|
||
currentIndex() {
|
||
this.content = '';
|
||
this.num = 10;
|
||
this.startCountdown();
|
||
},
|
||
},
|
||
async mounted() {
|
||
await this.getLetterList();
|
||
this.timer && clearInterval(this.timer)
|
||
this.startCountdown();
|
||
},
|
||
methods: {
|
||
async confirmHandle(item){
|
||
if (this.content === '我已阅读') {
|
||
console.log('item', item)
|
||
let res = await correctionHandle({
|
||
handleType:4,
|
||
operationType:'modify',
|
||
recordId:item.recordId,
|
||
planId:item.planId,
|
||
notifyId:item.id,
|
||
});
|
||
console.log('阅读res', res)
|
||
// 确认成功后处理下一个告知函
|
||
this.currentIndex++;
|
||
if (this.currentIndex < this.list.length) {
|
||
this.content = '';
|
||
this.num = 10;
|
||
this.startCountdown();
|
||
} else {
|
||
this.closeHandle();
|
||
}
|
||
} else {
|
||
this.$message.error('请输入"我已阅读"以确认');
|
||
}
|
||
},
|
||
async getLetterList(){
|
||
let res = await selectUnReadNotifyBySupplier();
|
||
let result = res?.data || []
|
||
if(result && result.length>0){
|
||
this.list = result
|
||
}
|
||
},
|
||
formatDate(val){
|
||
/** 日期格式化
|
||
* */
|
||
if(!val?.updateTime){
|
||
return
|
||
}
|
||
const date = new Date(val.updateTime);
|
||
const year = date.getFullYear();
|
||
const month = date.getMonth() + 1; // 月份从 0 开始，需要加 1
|
||
const day = date.getDate();
|
||
const formattedDate = `${year}年${month}月${day}日`;
|
||
return formattedDate
|
||
},
|
||
formattedContent(val) {
|
||
/** 转换文本，能被 v-html 识别
|
||
* */
|
||
return val?.content?.replace(/\r\n/g, '<br>').replace(/\n/g, '<br>');
|
||
},
|
||
startCountdown() {
|
||
this.stopCountdown()
|
||
this.timer = setInterval(() => {
|
||
if (this.num > 0) {
|
||
this.num--;
|
||
}
|
||
}, 1000);
|
||
},
|
||
closeHandle() {
|
||
this.stopCountdown();
|
||
// 调用 app 的方法
|
||
this.goBack();
|
||
},
|
||
stopCountdown() {
|
||
if (this.timer) {
|
||
clearInterval(this.timer);
|
||
this.timer = null;
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.dialog-wrapper {
|
||
padding: 10px 20px;
|
||
}
|
||
.title {
|
||
|
||
}
|
||
.top {
|
||
text-align: center;
|
||
}
|
||
.center {
|
||
margin: 20px 0;
|
||
line-height: 24px;
|
||
.hight{
|
||
color: #0B99E4;
|
||
}
|
||
}
|
||
.end{
|
||
text-align: right;
|
||
line-height: 24px;
|
||
}
|
||
.tip{
|
||
margin-top: 40px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.dialog-footer {
|
||
text-align: right;
|
||
}
|
||
</style>
|