Skip to content

D
document-management
Commit 9f9d2dd3 by lxyang
Options

feat:添加判断

parent f1d5164d
Showing with 15 additions and 1213 deletions
src/views/dataList/product/index.vue deleted 100644 → 0
<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() {
console.log(this.$route.query, 'this.$route.query')
this.title = this.$route.query.name
this.deleteId = this.$route.query.id
this.searchCustomer()
},
// 返回跟踪文档
blackTaskList() {
this.$router.push({
path: '/documentManagement/tailAfter'
})
},
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>
\ No newline at end of file
src/views/documentManagement/taskList/index.vue
......@@ -509,6 +509,7 @@ export default {
if (form.id) {
this.submitLoading = true;
fromNew.id = form.id
if (fromNew.id) {
let doctaskUpserts = doctaskUpsert(fromNew)
Promise.all([doctaskUpserts]).then((result) => {
if (result[0].code === 200) {
......@@ -522,12 +523,17 @@ export default {
this.msgError(error);
this.submitLoading = false;
})
} else {
this.msgError("新建失败请选择正确的文档进行提交");
this.submitLoading = false;
}
}
// 否则新建
else {
this.submitLoading = true;
if (form.docDocumentId !== 10000) {
fromNew.docDocumentId = Number(form.docDocumentId)
if (fromNew.docDocumentId) {
let doctaskUpserts = doctaskUpsert(fromNew)
Promise.all([doctaskUpserts]).then((result) => {
if (result[0].code === 200) {
......@@ -542,6 +548,10 @@ export default {
this.submitLoading = false;
})
} else {
this.msgError("新建失败请选择正确的文档进行提交");
this.submitLoading = false;
}
} else {
let documentUpsertData = {
name: form.linkName,
docUrl: form.link
......@@ -550,6 +560,7 @@ export default {
Promise.all([documentUpserts]).then((result) => {
if (result[0].code === 200) {
fromNew.docDocumentId = result[0].content.id
if (fromNew.docDocumentId) {
doctaskUpsert(fromNew).then(response => {
if (response.code === 200) {
this.msgSuccess("新建成功");
......@@ -563,6 +574,10 @@ export default {
this.msgError(error);
this.submitLoading = false;
})
} else {
this.msgError("新建失败请重新提交");
this.submitLoading = false;
}
}
}).catch((error) => {
this.msgError(error);
......
src/views/system/customer/index.vue deleted 100644 → 0
<template>
<div class="app-container">
<!-- 功能项-->
<div class="seachData" ref="seachDatas">
<div class="seachData-left">
跟踪文档列表
</div>
<div class="seachData-right">
<el-input v-model="queryParams.name"
placeholder="请输入任务名称"
suffix-icon="el-icon-search"
clearable
size="small"
@keyup.enter.native="handleQuery" />
<div class="seachData-next-div left-div">
<el-button type="primary"
icon="el-icon-plus"
size="mini"
@click="handleAdd">创建任务
</el-button>
</div>
</div>
</div>
<div class="table-center">
<el-table class="seachTable" v-loading="loading"
:data="customerList"
:height="tableHeightCount"
ref="customerListHeight"
border>
<el-table-column label="订阅状态"
fixed="left"
width="90"
align="subscription">
<template slot-scope="scope">
<el-switch v-model="scope.row.subscription"
active-value="0"
inactive-value="1"
@change="handleStatusChange(scope.row)"></el-switch>
</template>
</el-table-column>
<el-table-column fixed="left"
min-width="240"
label="任务名称"
prop="name"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<div class="ellipsis-hidden"><span class="blue" @click="routerTaskListDetails(scope.row)">{{ isEmpty(scope.row, 'name') }}</span></div>
</template>
</el-table-column>
<el-table-column min-width="160"
fixed="left"
label="任务ID"
prop="id"
>
<template slot-scope="scope">
<span>{{ isEmpty(scope.row, 'id') }}</span>
</template>
</el-table-column>
<el-table-column label="任务说明"
min-width="280"
prop="docDesc"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<div class="ellipsis-hidden">{{ isEmpty(scope.row, 'docDesc') }}</div>
</template>
</el-table-column>
<el-table-column label="最后修改时间"
prop="createTime"
width="200">
<template slot-scope="scope">
<span>{{ dateFilter(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column label="状态"
prop="status"
width="120">
<template slot-scope="scope">
<span :class="statusTable(scope.row).class">{{ statusTable(scope.row).text }}</span>
</template>
</el-table-column>
<el-table-column fixed="right"
label="操作"
width="160">
<template slot-scope="scope">
<el-button @click="handleUpdate(scope.row)"
type="text"
size="small">修改订阅</el-button>
<el-button @click="handleDelete(scope.row)"
type="text"
size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-show="total>0"
:total="total"
:page.sync="queryParams.pageindex"
:limit.sync="queryParams.pagesize"
layout="total, prev, pager, next"
@pagination="searchCustomer" />
</div>
<el-drawer
class="from-pop-up"
:title="title"
:visible.sync="open"
:direction="'rtl'"
:wrapperClosable="false"
:before-close="cancel">
<el-form ref="form"
:model="form"
:rules="rules">
<el-form-item label="任务名称"
prop="name">
<el-input v-model.trim="form.name"
placeholder="请输入任务名称"
:disabled="editFlag" />
</el-form-item>
<el-form-item label="选择文档"
prop="docDocumentId">
<el-select v-model="form.docDocumentId"
clearable
placeholder="请选择文档">
<el-option v-for="item in documentOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item class="second-level" v-if="form.docDocumentId === 10000" label="文档链接名称"
prop="linkName">
<el-input v-model.trim="form.linkName"
placeholder="请输入文档名称" />
</el-form-item>
<el-form-item class="second-level" v-if="form.docDocumentId === 10000" label="文档链接"
prop="link">
<el-input v-model.trim="form.link"
placeholder="请输入文档链接" />
</el-form-item>
<el-form-item label="邮箱通知"
prop="emails">
<el-input v-model.trim="form.emails"
placeholder="请输入要订阅和通知的邮箱"
:disabled="editFlag" />
</el-form-item>
<el-form-item label="任务说明">
<el-input v-model.trim="form.docDesc"
type="textarea"
placeholder="请输入任务说明" />
</el-form-item>
</el-form>
<div class="dialog-footer">
<el-button type="primary"
@click="submitForm"
:loading="submitLoading">确 定</el-button>
<el-button class="cancel" @click="cancel">取 消</el-button>
</div>
</el-drawer>
<!-- 添加或修改角色配置对话框 -->
<!-- <el-dialog class="from-pop-up"
:title="title"
:visible.sync="open"
width="640px">
<div slot="footer"
class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary"
@click="submitForm"
:loading="submitLoading">确 定</el-button>
</div>
</el-dialog> -->
</div>
</template>
<script>
import {
doctaskList,
doctaskUpsert,
doctaskDocuments,
doctaskSubscription,
doctaskDelete,
documentUpsert
} from "@/api/system/customer";
import {
deepClone
} from "@/utils/index";
export default {
data() {
return {
// 遮罩层
loading: true,
submitLoading: false,
// 总条数
total: 0,
// 角色表格数据
customerList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 是否显示弹出层（数据权限）
openDataScope: false,
// 日期范围
searchDateRange: [],
customerStatusOptions: [
{
dictValue: "ENABLE",
dictLabel: "正常"
},
{
dictValue: "DISABLE",
dictLabel: "失效"
}
],
// 查询参数
queryParams: {
pageindex: 1,
pagesize: 10,
name: ""
},
queryParamsStatus: true,
// 表单参数
form: {
id: undefined,
name: "",
docDocumentId: "",
link: "",
emails: "",
docDesc: ""
},
// 选择文档
documentOptions: [],
editFlag: false,
defaultProps: {
children: "children",
label: "label"
},
// 表单校验
rules: {
name: [
{ required: true, message: "任务名称不能为空", trigger: "blur" }
],
emails: [
{ required: true, message: "邮箱不能为空", trigger: "blur" },
{
validator: function (rule, value, callback) {
let verificationLink = /^((([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6}\,))*(([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})))$/
if (verificationLink.test(value) === false) {
callback(new Error('请输入正确的邮箱地址'))
} else {
callback()
}
},
trigger: 'blur'
}
],
docDocumentId: [
{ required: true, message: "请选择文档", trigger: "blur" }
],
linkName: [
{ required: true, message: "文档链接名称不能为空", trigger: "blur" }
],
link: [
{ required: true, message: "文档链接不能为空", trigger: "blur" },
{
validator: function (rule, value, callback) {
let verificationLink = /(http|https):\/\/([\w.]+\/?)\S*/
if (verificationLink.test(value) === false) {
callback(new Error('请输入正确的url'))
} else {
callback()
}
},
trigger: 'blur'
}
]
},
tableHeights: 0, // table高度
customerListHeights: 0 // table真实高度
};
},
created() {
this.searchCustomer();
this.$nextTick(() => {
this.tableHeight();
})
},
computed: {
// 计算过的height
tableHeightCount() {
return this.tableHeights - 112
}
},
methods: {
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}` // 一定要注意是反引号，否则无效。
}
},
tableHeight() {
let height = document.documentElement.clientHeight - 128
this.tableHeights = height < 580 ? 580 : height
},
// 跳转跟踪文档详情界面
routerTaskListDetails(row) {
try {
this.$router.push({
path: '/documentManagement/taskListIndex',
query: {
id: row.docDocumentId,
name: row.name
}
})
} catch (err) {
console.log(err)
}
},
// table显示内容
isEmpty(row, name) {
return !row[name] ? '-' : row[name]
},
// table显示状态
statusTable(row) {
let status = {
'-1': {
text: "暂停中",
class: "span-table span-gray"
},
'0': {
text: "已失效",
class: "span-table span-red"
},
'1': {
text: "运行中",
class: "span-table span-blue"
},
'2': {
text: "已完成",
class: "span-table span-green"
}
}
return status[row.status.toString()] ? status[row.status.toString()] : {
text: "",
class: ""
}
},
handleStatusChange(row) {
let isTrue = row.subscription === '0' ? true : false
doctaskSubscription({id: row.id, sub: isTrue})
.then((response) => {
if (response.code === 200) {
this.searchCustomer();
this.msgSuccess("修改状态成功");
}
})
.catch(() => this.msgError("修改状态失败"));
},
searchCustomer() {
this.loading = true;
this.customerList = []
doctaskList(this.queryParams)
.then(response => {
if (response.code === 200) {
let content = response.content
if (this.total !== content.totalSize) {
this.total = content.totalSize
}
let values = content.value
values.forEach(item => {
if (item.subscription) {
item.subscription = '0'
} else {
item.subscription = '1'
}
});
this.$set(this, 'customerList', values)
} else {
this.customerList = []
}
this.loading = false;
this.$nextTick(() => {
this.customerListHeights = this.$refs.customerListHeight.offsetHeight
})
})
.catch(error => {
this.loading = false;
});
this.$nextTick(() => {
this.customerListHeights = this.$refs.customerListHeight.offsetHeight
})
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 取消按钮（数据权限）
cancelDataScope() {
this.openDataScope = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: undefined,
name: "",
docDocumentId: "",
link: "",
emails: "",
docDesc: ""
};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.current = 1;
this.searchCustomer();
},
/** 重置筛选 */
resetHandleQuery() {
this.queryParams = {
current: 1,
size: 10,
name: ""
};
this.searchCustomer();
},
addDoctaskDocuments(isChange) {
this.documentOptions = []
doctaskDocuments()
.then(response => {
if (response.code === 200) {
this.documentOptions = response.content.map(item => {
return {
'label': item.name,
'value': item.id
}
})
}
if (isChange === 0) {
this.documentOptions.push({
label: "其他",
value: 10000
})
}
})
.catch(() => {
if (isChange === 0) {
this.documentOptions.push({
label: "其他",
value: 10000
})
}
});
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.addDoctaskDocuments(0);
this.open = true;
// this.editFlag = false;
this.title = "创建跟踪任务";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
this.addDoctaskDocuments(1);
this.handleUpdateFrom(row)
this.open = true;
this.title = "修改跟踪任务";
},
// 修改from赋值
handleUpdateFrom(row) {
this.form.id = row.id ? row.id : undefined
this.form.name = row.name ? row.name : ""
this.form.docDocumentId = row.docDocumentId ? row.docDocumentId : ""
this.form.link = row.link ? row.link : ""
this.form.emails = row.emails ? row.emails : ""
this.form.docDesc = row.docDesc ? row.docDesc : ""
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
let form = deepClone(this.form)
let fromNew = {
name: form.name,
emails: form.emails,
docDesc: form.docDesc
}
if (form.id) {
this.submitLoading = true;
fromNew.id = form.id
let doctaskUpserts = doctaskUpsert(fromNew)
Promise.all([doctaskUpserts]).then((result) => {
if (result[0].code === 200) {
this.msgSuccess("修改成功");
this.open = false;
this.queryParams.pageindex = 1
this.searchCustomer();
}
this.submitLoading = false;
}).catch((error) => {
this.msgError(error);
this.submitLoading = false;
})
}
// 否则新建
else {
this.submitLoading = true;
if (form.docDocumentId !== 10000) {
fromNew.docDocumentId = Number(form.docDocumentId)
let doctaskUpserts = doctaskUpsert(fromNew)
Promise.all([doctaskUpserts]).then((result) => {
if (result[0].code === 200) {
this.msgSuccess("新建成功");
this.open = false;
this.queryParams.pageindex = 1
this.searchCustomer();
}
this.submitLoading = false;
}).catch((error) => {
this.msgError(error);
this.submitLoading = false;
})
} else {
let documentUpsertData = {
name: form.linkName,
docUrl: form.link
}
let documentUpserts = documentUpsert(documentUpsertData)
Promise.all([documentUpserts]).then((result) => {
if (result[0].code === 200) {
fromNew.docDocumentId = result[0].content.id
doctaskUpsert(fromNew).then(response => {
if (response.code === 200) {
this.msgSuccess("新建成功");
this.open = false;
this.queryParams.pageindex = 1
this.searchCustomer();
}
this.submitLoading = false;
})
.catch((error) => {
this.msgError(error);
this.submitLoading = false;
})
}
}).catch((error) => {
this.msgError(error);
this.submitLoading = false;
})
}
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
this.$confirm(
'是否确认删除名称为"' + row.name + '"的跟踪任务?',
"警告",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}
)
.then(() => {
doctaskDelete(row.id).then(response => {
if (response.code === 200) {
this.msgSuccess("删除成功");
this.queryParams.pageindex = 1
this.searchCustomer();
}
})
.catch((error) => this.msgError(error))
})
.catch((error) => this.msgError(error));
}
}
};
</script>
<style scoped lang="scss">
@import '@/views/main.scss';
.table-center {
width: calc(100% - 32px);
height: calc(100% - 96px);
display: inline-block;
margin: 16px;
background: #fff;
}
/deep/.seachTable {
margin: 16px;
width: calc(100% - 32px);
&.el-table {
th {
background: #fff;
color: #a8a8a8;
}
.el-table__header-wrapper th {
color: #a8a8a8;
}
.el-button--small {
font-size: 14px;
color: #0052d9;
}
.el-button + .el-button {
margin-left: 16px;
}
.span-table {
padding-left: 16px;
position: relative;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translate(0, -50%);
width: 8px;
height: 8px;
border-radius: 50%;
}
}
.span-red {
&::before {
background: rgba(227, 77, 89, 1);
}
}
.span-gray {
&::before {
background: rgb(139, 139, 139);
}
}
.span-blue {
&::before {
background: rgba(0, 82, 217, 1);
}
}
.span-green {
&::before {
background: rgba(5, 168, 112, 1);
}
}
}
}
/deep/.pagination-container {
height: 32px;
margin: 0 16px 16px 16px;
padding: 0 !important;
width: calc(100% - 32px);
}
/deep/.el-pagination.is-background {
.el-pager li {
background-color: #fff;
border-radius: 3px;
color: rgba(0, 0, 0, 0.6000);
border: 1px solid rgba(220, 220, 220, 1);
border-radius: 3px;
&:not(.disabled).active {
color: #fff;
background: rgba(0, 82, 217, 1);
}
}
.btn-prev, .btn-next {
border: 0;
background: #fff;
color: rgba(0, 0, 0, 0.6000);
}
}
/deep/.el-drawer__header {
height: 64px;
font-size: 16px;
padding: 0;
line-height: 64px;
color: rgba(0, 0, 0, 0.9000);
font-weight: 500;
margin-bottom: 26px;
padding: 0 24px;
box-shadow: inset 0px -1px 0px 0px #dcdcdc;
}
.el-form {
padding: 0 24px;
/deep/.el-form-item__label {
width: 100% !important;
text-align: left;
}
/deep/.el-form-item__content {
margin-left: 0 !important;
}
/deep/.el-select, /deep/.el-select > .el-input {
width: 100%;
}
}
.dialog-footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
line-height: 64px;
height: 64px;
padding: 0 24px;
border-top: 1px solid rgba(231, 231, 231, 1);
/deep/.el-button--medium {
width: 60px;
height: 32px;
border-radius: 3px;
padding: 0;
text-align: center;
line-height: 32px;
font-size: 14px;
}
/deep/.el-button--primary {
background: #0052D9;
border-color: #0052D9;
}
.el-button--medium {
&.cancel {
background: #E7E7E7;
border-color: #E7E7E7;
color: rgba(0, 0, 0, 0.9000);
}
}
.el-button + .el-button {
margin-left: 8px;
}
}
.second-level {
margin-left: 20px;
}
</style>
src/views/taskList/index.vue deleted 100644 → 0
<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>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment