修改文档对比的细节问题

This commit is contained in:
qq787203167
2022-08-01 11:27:14 +08:00
parent ad433b5e80
commit 61a980bdeb
4 changed files with 678 additions and 61 deletions
@@ -0,0 +1,393 @@
<template>
<div>
<a-drawer
:title="$t('comment')"
:maskClosable="false"
:width="482"
placement="right"
:closable="true"
@close="handleCancel"
:visible="visible">
<div class="button-box">
<a-input-search class="box-input box-input-search" allowClear
@search="allowClearChange"
:placeholder="$t('PleaseEnter')+$t('comment')"
v-model="commentContent"></a-input-search>
<a-button @click="submitQuery" style="margin-right: 8px;" type="primary">{{$t('query')}}</a-button>
<a-button @click="handleSubmit" class="button-text" :title="$t('publishComment')" type="primary">
{{$t('publishComment')}}
</a-button>
</div>
<div class="comment-box" v-if="dataList && dataList.length > 0">
<div class="comment-box-top-box" v-for="(item,index) in dataList" :key="index">
<!-- <div class="title-text">{{$t('record')+(index + 1)}}</div>-->
<div class="box-content">
<div class="img-box">
<img src="../../../../assets/daiban.png" class="img" alt="">
</div>
<div class="box-text">
<span class="box-text-name">{{item.name}}</span>
<span calss="box-text-time">{{item.createTime}}</span>
</div>
<div class="box-text-text">
{{item.content}}
</div>
<div class="box-icon" @click="messageClick(item)">
<a-icon type="message"/>
</div>
</div>
<div class="inside-box" v-if="item.projectCommentVOList && item.projectCommentVOList.length > 0">
<div class="box-content-inside" v-for="(val,indexOne) in item.projectCommentVOList" :key="indexOne">
<div class="img-box">
<img src="../../../../assets/daiban.png" class="img" alt="">
</div>
<div class="box-text">
<span class="box-text-name">{{val.name}}</span>
<span calss="box-text-time">{{val.createTime}}</span>
</div>
<div class="box-text-text">
{{val.content}}
</div>
<div class="box-icon" @click="messageClick(item)">
<a-icon type="message"/>
</div>
</div>
</div>
</div>
</div>
<div class="comment-box-text" v-else>{{$t('noComment')}}</div>
<JLoading :loading="loading">{{$t('dataLoading')}}</JLoading>
</a-drawer>
<a-modal
:title="title"
:width="500"
:visible="visibleComment"
:confirm-loading="confirmLoading"
:maskClosable="false"
@ok="handleOkComment"
@cancel="handleCancelComment"
>
<a-form-model :model="formInline" class="formAdd" :rules="rules" ref="ruleForm">
<a-row :gutter="24">
<a-col :span="24">
<div class="box-title-text">
<div class="title-text">
<span class="Required">*</span>
<span class="title-text-text" :title="title">{{title}}</span>
</div>
<a-form-model-item v-if="title == $t('replyToComments')" class="itemModel" :prop="'replyContent'">
<a-textarea
:placeholder="$t('PleaseEnter')+title"
:disabled="false"
v-model="formInline.replyContent" :rows="4"/>
</a-form-model-item>
<a-form-model-item v-else-if="title == $t('publishComment')" class="itemModel" :prop="'commentContent'">
<a-textarea
:placeholder="$t('PleaseEnter')+title"
:disabled="false"
v-model="formInline.commentContent" :rows="4"/>
</a-form-model-item>
</div>
</a-col>
</a-row>
</a-form-model>
</a-modal>
</div>
</template>
<script>
import { getAction, postAction } from '@/api/manage'
export default {
name: 'commentList',
data() {
return {
visible: false,
dataList: [],
formInline: {},
commentContent: '',
loading: false,
title: this.$t('comment'),
confirmLoading: false,
visibleComment: false,
url: {
list: '/project/projectCommentEO/list',
add: '/project/projectCommentEO/add',
edit: '/project/projectReplyEO/add'
},
rules: {
commentContent: [
{
required: true,
message: this.$t('publishComment') + this.$t('cannotEmpty'),
trigger: 'blur'
}
],
replyContent: [
{
required: true,
message: this.$t('replyToComments') + this.$t('cannotEmpty'),
trigger: 'blur'
}
]
}
}
},
mounted() {
},
methods: {
handleCancel() {
this.visible = false
},
getData() {
this.visible = true
this.getList()
},
handleSubmit() {
this.title = this.$t('publishComment')
this.formInline = {}
this.visibleComment = true
this.$nextTick(() => {
this.$refs.ruleForm.clearValidate()
})
},
allowClearChange() {
this.getList()
},
submitQuery() {
this.getList()
},
getList() {
this.loading = true
getAction(this.url.list, {
projectLibraryId: this.$route.query.id,
commentContent: this.commentContent
}).then((res) => {
if (res.success) {
this.loading = false
this.dataList = res.result || []
} else {
this.loading = false
this.dataList = []
}
})
},
handleOkComment() {
this.$refs.ruleForm.validate(valid => {
if (valid) {
let url = ''
let query = {}
if (this.title == this.$t('publishComment')) {
url = this.url.add
query = {
commentContent: this.formInline.commentContent,
projectLibraryId: this.$route.query.id
}
} else if (this.title == this.$t('replyToComments')) {
url = this.url.edit
query = {
replyContent: this.formInline.replyContent,
projectCommentId: this.formInline.projectCommentId
}
}
this.confirmLoading = true
postAction(url, query).then((res) => {
if (res.success) {
this.$message.success(this.$t('OperationSuccessful'))
this.visibleComment = false
this.confirmLoading = false
this.getList()
} else {
this.confirmLoading = false
this.$message.success(this.$t('operationFailed'))
}
})
}
})
},
handleCancelComment() {
this.visibleComment = false
},
messageClick(row) {
this.formInline = {}
this.formInline.projectCommentId = row.id
this.title = this.$t('replyToComments')
this.visibleComment = true
this.$nextTick(() => {
this.$refs.ruleForm.clearValidate()
})
}
}
}
</script>
<style scoped lang="less">
.comment-box {
position: absolute;
left: 0;
height: calc(100% - 140px);
width: 100%;
overflow: auto;
padding: 0 24px 24px 24px;
box-sizing: border-box;
}
.comment-box-top-box {
padding: 30px 24px 24px 24px;
box-sizing: border-box;
border: 1px solid #F1F2F4;
border-radius: 4px;
margin-bottom: 24px;
}
.img-box {
width: 32px;
height: 32px;
border-radius: 50%;
display: inline-block;
margin-right: 8px;
position: absolute;
.img {
width: 100%;
height: 100%;
}
}
.box-text {
display: inline-block;
position: absolute;
margin-left: 40px;
.box-text-name {
font-size: 14px;
font-weight: bold;
color: #040B29;
margin-right: 8px;
}
.box-text-time {
font-size: 14px;
font-weight: 400;
color: #6F7385;
}
}
.box-text-text {
font-size: 14px;
font-weight: 400;
color: #040B29;
display: inline-block;
margin-top: 22px;
margin-left: 40px;
}
.title-text {
font-size: 16px;
font-weight: 400;
color: #040B29;
margin-bottom: 18px;
}
.box-content {
position: relative;
}
.box-content-inside {
position: relative;
margin-bottom: 15px;
}
.box-icon {
position: absolute;
right: 0;
top: 0;
cursor: pointer;
}
.inside-box {
background: #F6F7FA;
border-radius: 4px;
margin-left: 40px;
width: calc(100% - 40px);
padding: 18px;
box-sizing: border-box;
margin-top: 15px;
}
.button-box {
text-align: right;
margin-bottom: 24px;
}
.drawer-bootom-button {
position: absolute;
bottom: 0;
width: 100%;
z-index: 100;
border-top: 1px solid #e8e8e8;
padding: 10px 16px;
text-align: right;
left: 0;
background: #fff;
border-radius: 0 0 2px 2px;
}
.box-title-text {
line-height: 1.4;
display: flex;
/*align-items: center;*/
}
.title-text {
width: 74px;
text-align: right;
display: inline-block;
font-weight: 500;
font-size: 14px;
margin-right: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 42px;
line-height: 48px;
}
.itemModel {
width: calc(100% - 64px);
display: inline-block;
margin-top: 2px;
}
.Required {
color: red;
margin-right: 4px;
}
.title-text-text {
margin-top: 9px;
}
.comment-box-text {
text-align: center;
margin-top: 40px;
}
.box-input {
width: calc(100% - 168px);
margin-right: 8px;
}
.button-text {
width: 73px;
overflow: hidden;
padding: 0 8px;
box-sizing: border-box;
}
</style>
<style>
.box-input-search .ant-input-suffix .ant-input-search-icon{
display: none;
}
</style>
@@ -11,7 +11,7 @@
<div class="doc-detail-right">
<div @click="exportComparisonReportClick" class="operator-text-text"
:title="$t('exportComparisonReport')">
<a-icon type="export" />
<a-icon type="export"/>
{{$t('exportComparisonReport')}}
</div>
<div @click="commentClick" class="operator-text-text"
@@ -24,7 +24,8 @@
<div style="padding-top: 68px;background: #fff">
<div class="detail-content">
<div class="detail-content-header" style="margin-bottom: 20px">
<a-checkbox @change="onChange" style="margin-left: 20px;float: left"></a-checkbox>
<a-checkbox @change="onChange" :indeterminate="indeterminate" :checked="checkAll"
style="margin-left: 20px;float: left"></a-checkbox>
<div class="detail-content-header-content">
<div class="detail-content-header-content-left">
所选标准:GB 23456-2020 机动车标准 FMVSS 114 中文.word
@@ -37,10 +38,53 @@
</div>
</div>
</div>
<a-checkbox-group @change="onChange" style="width: 100%;overflow: overlay;height: calc(100vh - 300px)">
<a-checkbox-group @change="checkboxChange" v-model="checkboxList"
style="width: 100%;overflow: overlay;height: calc(100vh - 300px)">
<div class="detail-content-content">
<a-checkbox value="A" class="detail-checkbox">
</a-checkbox>
<div class="detail-content-content-text">
<div class="detail-content-content-text-left">
<div class="detail-content-left">
<div class="detail-content-left-top">
<span>第10条</span>
<span style="margin-left: 10px">光反射器</span>
</div>
<div class="detail-content-left-button">
12. 附加光反射器,可以是贴纸,具有以下规格: a) 正面左右两侧呈白色或淡黄色; b) 背面左右两侧呈红色; c) 防护板
sdf kdsf kljsfkldsfdsfdsf
</div>
</div>
<div class="detail-content-right">
<div class="detail-content-left-top">
<span>第10条</span>
<span style="margin-left: 10px">光反射器</span>
</div>
<div class="detail-content-left-button">
12. 附加光反射器,可以是贴纸,具有以下规格: a) 正面左右两侧呈白色或淡黄色; b) 背面左右两侧呈红色; c) 防护板收到反是馈就但是罚款决定书发的科技示范
</div>
</div>
<div class="detail-content-bottom">
<div class="detail-content-bottom-left" :title="$t('comparisonDifferenceComment')">
<a-icon type="message"/>
{{$t('comparisonDifferenceComment')}}:
</div>
<div class="detail-content-bottom-right">
差异是各单位在结构上的差别程度成员在时间横轴上的位置的差别程经理与其他的差别程度 横轴上的位置的差别程经理与其他的差别程度差异
</div>
</div>
</div>
<div class="detail-content-content-text-right">
<span class="text-button-one">
<a class="text-button" @click="comparaEdit">{{$t('edit')}}</a>
<a class="text-button" @click="comparaDelete">{{$t('delete')}}</a>
</span>
</div>
</div>
</div>
<div class="detail-content-content">
<a-checkbox value="B" class="detail-checkbox">
</a-checkbox>
<div class="detail-content-content-text">
<div class="detail-content-content-text-left">
<div class="detail-content-left">
@@ -81,49 +125,7 @@
</div>
</div>
<div class="detail-content-content">
<a-checkbox value="A" class="detail-checkbox">
</a-checkbox>
<div class="detail-content-content-text">
<div class="detail-content-content-text-left">
<div class="detail-content-left">
<div class="detail-content-left-top">
<span>第10条</span>
<span style="margin-left: 10px">光反射器</span>
</div>
<div class="detail-content-left-button">
12. 附加光反射器,可以是贴纸,具有以下规格: a) 正面左右两侧呈白色或淡黄色; b) 背面左右两侧呈红色; c) 防护板
sdf kdsf kljsfkldsfdsfdsf
</div>
</div>
<div class="detail-content-right">
<div class="detail-content-left-top">
<span>第10条</span>
<span style="margin-left: 10px">光反射器</span>
</div>
<div class="detail-content-left-button">
12. 附加光反射器,可以是贴纸,具有以下规格: a) 正面左右两侧呈白色或淡黄色; b) 背面左右两侧呈红色; c) 防护板收到反是馈就但是罚款决定书发的科技示范
</div>
</div>
<div class="detail-content-bottom">
<div class="detail-content-bottom-left" :title="$t('comparisonDifferenceComment')">
<a-icon type="message"/>
{{$t('comparisonDifferenceComment')}}:
</div>
<div class="detail-content-bottom-right">
差异是各单位在结构上的差别程度成员在时间横轴上的位置的差别程经理与其他的差别程度 横轴上的位置的差别程经理与其他的差别程度差异
</div>
</div>
</div>
<div class="detail-content-content-text-right">
<span class="text-button-one">
<a class="text-button">{{$t('edit')}}</a>
<a class="text-button">{{$t('delete')}}</a>
</span>
</div>
</div>
</div>
<div class="detail-content-content">
<a-checkbox value="A" class="detail-checkbox">
<a-checkbox value="C" class="detail-checkbox">
</a-checkbox>
<div class="detail-content-content-text">
<div class="detail-content-content-text-left">
@@ -166,7 +168,7 @@
</div>
</a-checkbox-group>
<div class="detail-content-content">
<a-checkbox value="A" class="detail-checkbox">
<a-checkbox value="D" class="detail-checkbox">
</a-checkbox>
<div class="detail-content-content-text">
<div class="detail-content-content-text-left">
@@ -190,8 +192,8 @@
</div>
<div class="detail-content-content-text-right">
<span class="text-button-one">
<a class="text-button">{{$t('edit')}}</a>
<a class="text-button">{{$t('delete')}}</a>
<a class="text-button" @click="fullTextEdit">{{$t('edit')}}</a>
<!-- <a class="text-button">{{$t('delete')}}</a>-->
</span>
</div>
</div>
@@ -199,16 +201,70 @@
</div>
</div>
</div>
<a-modal
:title="title"
:width="600"
:visible="visible"
:confirm-loading="confirmLoading"
:maskClosable="false"
@cancel="visible = false"
>
<template slot="footer">
<a-button key="back" @click="visible = false">
{{$t('cancel')}}
</a-button>
<a-button type="primary" @click="fullTextCommentsSubmit">
{{$t('submit')}}
</a-button>
</template>
<a-form-model :model="formInlineText" class="formAdd" :rules="rulesText" ref="ruleFormText">
<div class="box-title-text-Remarks" v-if="title == $t('fullTextComments')">
<div class="title-text-Remarks" :title="$t('fullTextComments')">
<span>{{$t('fullTextComments')}}</span>
</div>
<a-form-model-item class="itemModel" style="width: calc(100% - 113px)" prop="dreUserIdName">
<a-textarea :placeholder="$t('pleaseEnter')+$t('fullTextComments')"
v-model="formInlineText.fullTextComments"
:rows="4"/>
</a-form-model-item>
</div>
<div class="box-title-text-Remarks" v-if="title == $t('comparativeComments')">
<div class="title-text-Remarks" :title="$t('comparativeComments')">
<span>{{$t('comparativeComments')}}</span>
</div>
<a-form-model-item class="itemModel" style="width: calc(100% - 113px)" prop="dreUserIdName">
<a-textarea :placeholder="$t('pleaseEnter')+$t('comparativeComments')"
v-model="formInlineText.comparativeComments"
:rows="4"/>
</a-form-model-item>
</div>
</a-form-model>
</a-modal>
<JLoading :loading="loading">{{$t('dataLoading')}}</JLoading>
<commentList ref="commentListRef"/>
</div>
</template>
<script>
import { getAction, postAction, downloadFile, deleteAction } from '@/api/manage'
import commentList from './commentList'
export default {
name: 'comparisonResults',
components: {
commentList
},
data() {
return {
loading: false
loading: false,
checkboxList: [],
confirmLoading: false,
visible: false,
formInlineText: {},
rulesText: {},
title: '',
indeterminate: false,
checkAll: false
}
},
methods: {
@@ -218,10 +274,65 @@
})
},
commentClick() {
this.$refs.commentListRef.getData()
},
exportComparisonReportClick() {
},
checkboxChange(checkedList) {
this.indeterminate = !!checkedList.length && checkedList.length < this.checkboxList.length
this.checkAll = checkedList.length === this.checkboxList.length
},
onChange(event) {
this.checkAll = event.target.checked
if (event.target.checked) {
this.checkboxList = ['A', 'B', 'C', 'D']
} else {
this.checkboxList = []
}
if (this.checkboxList.length == 0) {
this.checkAll = false
this.indeterminate = false
}
},
fullTextCommentsSubmit() {
this.$refs.ruleForm.validate(valid => {
if (valid) {
}
})
},
fullTextEdit() {
this.visible = true
this.title = this.$t('fullTextComments')
this.formInlineText = {}
this.$nextTick(() => {
this.$refs.ruleFormText.clearValidate()
})
},
comparaEdit() {
this.visible = true
this.title = this.$t('comparativeComments')
this.formInlineText = {}
this.$nextTick(() => {
this.$refs.ruleFormText.clearValidate()
})
},
comparaDelete(val) {
let _this = this
this.$confirm({
content: _this.$t('ConfirmDelete'),
onOk() {
deleteAction(_this.url.deleteOne, { id: val.id }).then((res) => {
if (res.success) {
_this.$message.success(_this.$t('OperationSuccessful'))
_this.getList()
} else {
_this.$message.warning(_this.$t('operationFailed'))
}
})
}
})
}
}
}
@@ -461,4 +572,25 @@
text-justify: inter-ideograph;
word-break: break-all
}
.box-title-text-Remarks {
line-height: 1.4;
display: flex;
/*align-items: center;*/
margin-bottom: 10px;
}
.title-text-Remarks {
width: 68px;
color: #000F16;
display: inline-block;
font-weight: 500;
font-size: 14px;
margin-right: 16px;
margin-top: 6px;
text-align: right;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
@@ -40,7 +40,8 @@
/>
</div>
<div class="detail-content-content-right">
<div class="detail-content-content-right-data">
<div class="detail-content-content-right-data" @click="detailLeft(0)"
:class="{'detail-content-content-right-data-blue':false}">
<div class="detail-content-content-right-data-text">
1、范围
</div>
@@ -49,7 +50,8 @@
本标准适用于M、N类汽车使用的LED前照灯、或主要由LED光源或LED模块形成远光或近光的LED前照灯。
</div>
</div>
<div class="detail-content-content-right-data">
<div class="detail-content-content-right-data" @click="detailLeft(1)"
:class="{'detail-content-content-right-data-blue':true}">
<div class="detail-content-content-right-data-text">
1、范围
</div>
@@ -77,7 +79,8 @@
/>
</div>
<div class="detail-content-content-right">
<div class="detail-content-content-right-data">
<div class="detail-content-content-right-data-right" @click="detailRight(0)"
:class="{'detail-content-content-right-data-blue-right':true}">
<div class="detail-content-content-right-data-text">
1、范围
</div>
@@ -86,7 +89,7 @@
本标准适用于M、N类汽车使用的LED前照灯、或主要由LED光源或LED模块形成远光或近光的LED前照灯。
</div>
</div>
<div class="detail-content-content-right-data">
<div class="detail-content-content-right-data-right" @click="detailRight(1)">
<div class="detail-content-content-right-data-text">
1、范围
</div>
@@ -95,7 +98,7 @@
本标准适用于M、N类汽车使用的LED前照灯、或主要由LED光源或LED模块形成远光或近光的LED前照灯。
</div>
</div>
<div class="detail-content-content-right-data">
<div class="detail-content-content-right-data-right" @click="detailRight(2)">
<div class="detail-content-content-right-data-text">
1、范围
</div>
@@ -104,7 +107,7 @@
本标准适用于M、N类汽车使用的LED前照灯、或主要由LED光源或LED模块形成远光或近光的LED前照灯。
</div>
</div>
<div class="detail-content-content-right-data">
<div class="detail-content-content-right-data-right" @click="detailRight(3)">
<div class="detail-content-content-right-data-text">
1、范围
</div>
@@ -136,6 +139,36 @@
</div>
</div>
</div>
<a-modal
:title="$t('fullTextComments')"
:width="600"
:visible="visible"
:confirm-loading="confirmLoading"
:maskClosable="false"
@cancel="visible = false"
>
<template slot="footer">
<a-button type="primary" @click="fullTextCommentsEdit">
{{$t('edit')}}
</a-button>
<a-button type="primary" @click="fullTextCommentsSubmit">
{{$t('submit')}}
</a-button>
</template>
<a-form-model :model="formInlineText" class="formAdd" :rules="rulesText" ref="ruleFormText">
<div class="box-title-text-Remarks">
<div class="title-text-Remarks" :title="$t('fullTextComments')">
<span>{{$t('fullTextComments')}}</span>
</div>
<a-form-model-item class="itemModel" style="width: calc(100% - 113px)" prop="dreUserIdName">
<a-textarea :placeholder="$t('pleaseEnter')+$t('fullTextComments')"
v-model="formInlineText.fullTextComments"
:disabled="fullTextDisabled"
:rows="4"/>
</a-form-model-item>
</div>
</a-form-model>
</a-modal>
<JLoading :loading="loading">{{$t('dataLoading')}}</JLoading>
</div>
</template>
@@ -146,8 +179,13 @@
data() {
return {
formInline: {},
formInlineText: {},
rules: {},
rulesText: {},
loading: false,
visible: false,
confirmLoading: false,
fullTextDisabled: false,
gData: [
{
title: '0-0sdf dsfdsfdsfdsfds',
@@ -182,10 +220,37 @@
window.open(newUrl.href, '_blank')
},
addFullTextCommentClick() {
this.visible = true
this.fullTextDisabled = true
},
turnOffAutomaticMatchingClick() {
},
fullTextCommentsEdit() {
this.fullTextDisabled = false
},
fullTextCommentsSubmit() {
},
detailLeft(num) {
let detailLeftColor = document.getElementsByClassName('detail-content-content-right-data-color')
if (detailLeftColor && detailLeftColor.length > 0) {
detailLeftColor[0].classList.remove('detail-content-content-right-data-color')
}
let detailLeft = document.getElementsByClassName('detail-content-content-right-data')
if (detailLeft && detailLeft.length > 0) {
detailLeft[num].classList.add('detail-content-content-right-data-color')
}
},
detailRight(num) {
let detailRightColor = document.getElementsByClassName('detail-content-content-right-data-color-right')
if (detailRightColor && detailRightColor.length > 0) {
detailRightColor[0].classList.remove('detail-content-content-right-data-color-right')
}
let detailRight = document.getElementsByClassName('detail-content-content-right-data-right')
if (detailRight && detailRight.length > 0) {
detailRight[num].classList.add('detail-content-content-right-data-color-right')
}
}
}
}
@@ -332,6 +397,16 @@
border: 1px solid #EFF1F3;
border-radius: 4px;
margin-bottom: 22px;
cursor: pointer;
}
.detail-content-content-right-data-right {
padding: 22px 24px;
box-sizing: border-box;
border: 1px solid #EFF1F3;
border-radius: 4px;
margin-bottom: 22px;
cursor: pointer;
}
.detail-content-content-right-data:last-child {
@@ -387,4 +462,21 @@
overflow: hidden;
text-align: right;
}
.detail-content-content-right-data-blue {
border: 1px #21c9cc solid;
}
.detail-content-content-right-data-blue-right {
border: 1px #21c9cc solid;
}
.detail-content-content-right-data-color {
border: 1px red solid;
}
.detail-content-content-right-data-color-right {
border: 1px red solid;
}
</style>
@@ -257,13 +257,13 @@
window.open(newUrl.href, '_blank')
},
subscribe() {
},
edit() {
let newUrl = this.$router.resolve({
path: '/documentDataComparison'
})
window.open(newUrl.href, '_blank')
},
edit() {
},
initiatingProcessClick() {
let newUrl = this.$router.resolve({