<template> <div class="app-container"> <!-- 头部 --> <div class="seachData" ref="seachDatas"> <div class="seachData-left"> <i class="el-icon-arrow-left left-span" @click="blackTaskList"></i> <span>{{title ? title + '文档跟踪报告' : '文档跟踪报告'}}</span> </div> </div> <div class="content"> <div class="content-left scroll"> <div v-if="loading" class="content-right-content loading loading-left"> <div class="loading-div"> <i class="el-icon-loading loading-center"></i> <div>加载中...</div> </div> </div> <div class="content-left-center scroll"> <div v-if="deleteCenter.length && !loading"> <div class="delete-center" v-for="(item, index) in deleteCenter" :key="index"> <div class="title"> <span class="title-span">{{item.docTitle}}</span> <span>更新日期:</span> <span class="time">{{dateFilter(item.updateTime)}}</span> <span>共1处更新</span> </div> <div class="center"> <div class="center-delete"> <div class="center-delete-tab green">新版</div> <div class="center-delete-text" v-html="item.paragraphAfter"></div> </div> <div class="center-delete"> <div class="center-delete-tab gray">旧版</div> <div class="center-delete-text" v-html="item.paragraphBefore"></div> </div> </div> </div> </div> <div class="none" v-else-if="!deleteCenter.length && !loading"> 暂无数据 </div> </div> </div> </div> </div> </template> <script> // 接口调用方法 import { doctaskFinddifference } from "@/api/system/product"; export default { data() { return { title: '', // 跟踪文档标题抬头 deleteId: '', // 详情id tableHeights: 0, // table高度 loading: false, deleteCenter: [] } }, watch: { }, created() { this.init() this.$nextTick(() => { this.tableHeight(); }) }, computed: { // 计算过的height tableHeightCount() { return this.tableHeights } }, methods: { // 初始化 init() { let name = this.$route.query.name let id = this.$route.query.id let taskListIndexTitle = localStorage.getItem("taskListIndexTitle") let taskListIndexId = localStorage.getItem("taskListIndexId") if (name || id) { this.title = name this.deleteId = id localStorage.setItem("taskListIndexTitle", name) localStorage.setItem("taskListIndexId", id) } else if (taskListIndexTitle || taskListIndexId) { this.title = taskListIndexTitle this.deleteId = taskListIndexId } this.searchCustomer() }, // 返回跟踪文档 blackTaskList() { this.$router.push({ path: '/documentManagement/taskList' }) }, dateFilter(time) { if (!time) { // 当时间是null或者无效格式时我们返回空 return '-' } else { const date = new Date(time) // 时间戳为10位需*1000,时间戳为13位的话不需乘1000 const dateNumFun = (num) => num < 10 ? `0${num}` : num // 使用箭头函数和三目运算以及es6字符串的简单操作。因为只有一个操作不需要{} ,目的就是数字小于10,例如9那么就加上一个0,变成09,否则就返回本身。 // 这是es6的解构赋值。 const [Y, M, D, h, m, s] = [ date.getFullYear(), dateNumFun(date.getMonth() + 1), dateNumFun(date.getDate()), dateNumFun(date.getHours()), dateNumFun(date.getMinutes()), dateNumFun(date.getSeconds()) ] return `${Y}-${M}-${D} ${h}:${m}:${s}` // 一定要注意是反引号,否则无效。 } }, searchCustomer() { this.loading = true; doctaskFinddifference(this.deleteId) .then(response => { if (response.code === 200) { let content = response.content.value for (let a = 0; a < content.length; a++) { let difWordAfter = content[a].difWordAfter let url = content[a].docUrl if (content[a].paragraphAfter.indexOf(difWordAfter) >= 0) { let values = content[a].paragraphAfter.split(difWordAfter); content[a].paragraphAfter = values.join( `<a style="color: rgba(250, 0, 0, 1);" href="${url}" target="_blank">${difWordAfter}</a>` ) } } this.$set(this, 'deleteCenter', content) } this.loading = false this.$nextTick(() => { this.customerListHeights = this.$refs.customerListHeight.offsetHeight }) }) .catch(error => { this.loading = false; }); }, // 计算高度 tableHeight() { let height = document.documentElement.clientHeight - 128 this.tableHeights = height < 580 ? 580 : height } } } </script> <style scoped lang="scss"> @import '@/views/main.scss'; .app-container { .content { top: 64px; background: #fafafa; } } .seachData { .seachData-left { padding-left: 46px; } } .left-span { margin-right: 18px; color: #0052D9; font-size: 26px; text-align: center; width: 18px; cursor: pointer; } .delete-center { width: 100%; margin-bottom: 16px; padding: 32px 36px; background: #fff; &:first-child { margin-top: 16px; } .title { font-size: 18px; color: rgba(0, 0, 0, 0.9000); .time { margin-right: 24px; } .title-span { margin-right: 16px; } } .center { width: 100%; display: flex; .center-delete { width: 50%; margin-top: 24px; } .center-delete-tab { width: 44px; height: 24px; line-height: 24px; text-align: center; border-radius: 4px; &.green { background: #c8ffe8; color: #4ec192; } &.gray { background: rgba(0, 0, 0, 0.2000); color: #8a8888; } } .center-delete-text { margin-top: 24px; text-align: left; font-size: 14px; line-height: 20px; color: rgba(0, 0, 0, 0.6); word-break: break-all; } } } .content-left-center { .none { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #8a8888; font-size: 16px; } } </style>