513 lines
14 KiB
Java
513 lines
14 KiB
Java
<template>
|
|
<div class="doc-detail">
|
|
<div class="doc-detail-wrap">
|
|
<div class="doc-detail-header" style="position: fixed;top: 0">
|
|
<div class="doc-detail-title">
|
|
<span style="line-height: 66px;display: inline-block;float: left">
|
|
<a-icon type="arrow-left" style="margin-right: 6px;"/>
|
|
</span>
|
|
{{$t('applicableInstructionsMarketList')}}
|
|
</div>
|
|
<div class="doc-detail-right">
|
|
<div @click="forwardClick" class="operator-text-text" :title="$t('forward')">
|
|
<a-icon type="reload"/>
|
|
{{$t('forward')}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="padding-top: 68px;background: #fff">
|
|
<div class="detail-content" style="padding: 24px">
|
|
<div class="content-text-top">
|
|
<span style="margin-right: 10px">
|
|
{{$t('issuedBy')}}:{{this.queryForm.createBy}}
|
|
</span>
|
|
<span>
|
|
{{$t('releaseDate')}}:{{this.queryForm.createTime}}
|
|
</span>
|
|
</div>
|
|
<div class="content-text">
|
|
<div class="text-field" v-for="(item,index) in standardContentList" :key="index">
|
|
<span class="text-field-left" :title="item.title">{{item.title}}</span>
|
|
<span class="text-field-right text-field-right-url"
|
|
@click="clickButtonToUpload(queryForm[item.value])"
|
|
v-if="item.type == 2 && queryForm[item.value]"
|
|
>{{ $t('viewFile') }}</span>
|
|
|
|
<span class="text-field-right"
|
|
:title="queryForm[item.value]" v-else>
|
|
{{queryForm[item.value]}}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="content" v-html="queryForm.content"></div>
|
|
<div class="content-icon">
|
|
<span class="content-icon-text">
|
|
<a-icon class="icon" type="eye"/>
|
|
<span>{{this.queryForm.browsingHistoryCount}}</span>
|
|
</span>
|
|
<span class="content-icon-text" @click="likeClick()">
|
|
<a-icon class="icon" :class="{'icon-active':this.isPraise}" type="like"/>
|
|
<span>{{this.queryForm.praiseCount}}</span>
|
|
</span>
|
|
<span class="content-icon-text" @click="starClick()">
|
|
<a-icon class="icon" :class="{'icon-active':this.isCollect}" type="star"/>
|
|
<span>{{this.queryForm.collectCount}}</span>
|
|
</span>
|
|
</div>
|
|
<div class="box-text">
|
|
<div class="header-text">
|
|
{{$t('comment')}}
|
|
</div>
|
|
</div>
|
|
<a-form-model :model="formInline" class="formAdd" :rules="rules" ref="ruleForm">
|
|
<a-row :gutter="24">
|
|
<a-col :span="24">
|
|
<div class="box-title-text">
|
|
<a-form-model-item class="itemModel" prop="commentContent">
|
|
<a-textarea :placeholder="$t('pleaseEnter')+$t('comment')"
|
|
v-model.trim="formInline.commentContent"
|
|
:rows="4"/>
|
|
</a-form-model-item>
|
|
</div>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form-model>
|
|
<div class="content-button">
|
|
<a-button class="header-btn submit" :loading="loading" @click="release" type="primary">{{$t('release')}}
|
|
</a-button>
|
|
</div>
|
|
<div v-for="(item,index) in releaseList">
|
|
<div class="box-text">
|
|
<div class="header-text">
|
|
<span style="margin-right: 20px">{{item.createBy}}</span>
|
|
{{item.createTime}}
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
{{item.commentContent}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<viewFileModel ref="viewFileModelRef"/>
|
|
<SelectedBy ref="SelectedByRef" :title="$t('forward')" @SelectedByForm="SelectedByForm"></SelectedBy>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import viewFileModel from '@/components/viewFileModel/index'
|
|
import SelectedBy from '@/components/SelectedBy/index'
|
|
import { getAction, postAction, downloadFile, putAction } from '@/api/manage'
|
|
import { mapGetters } from 'vuex'
|
|
|
|
export default {
|
|
name: 'problemKnowledgeBaseView',
|
|
components: {
|
|
viewFileModel,
|
|
SelectedBy
|
|
},
|
|
data() {
|
|
return {
|
|
standardContentList: [
|
|
{
|
|
title: this.$t('problemClassification'),
|
|
value: 'problemTypeName'
|
|
},
|
|
{
|
|
title: this.$t('market'),
|
|
value: 'targetMarket_dicText'
|
|
},
|
|
{
|
|
title: this.$t('standardNo'),
|
|
value: 'standNumber'
|
|
},
|
|
{
|
|
title: this.$t('standardName'),
|
|
value: 'title'
|
|
},
|
|
{
|
|
title: this.$t('enclosure'),
|
|
type: 2,
|
|
value: 'accessoryFile'
|
|
}
|
|
],
|
|
queryForm: {},
|
|
formInline: {},
|
|
rules: {
|
|
commentContent: [
|
|
{
|
|
max: 300,
|
|
message: this.$t('comment') + this.$t('cannotExceed') + 300 + this.$t('Characters'),
|
|
trigger: 'blur'
|
|
}
|
|
]
|
|
},
|
|
isPraise: false,
|
|
isCollect: false,
|
|
loading: false,
|
|
releaseList: []
|
|
}
|
|
},
|
|
mounted() {
|
|
document.title = this.$t('applicableInstructionsMarketList')
|
|
this.viewAdd()
|
|
this.queryById()
|
|
this.releaseData()
|
|
},
|
|
methods: {
|
|
...mapGetters(['userInfo']),
|
|
SelectedByForm() {
|
|
|
|
},
|
|
queryById() {
|
|
let query = {
|
|
id: this.$route.query.id
|
|
}
|
|
getAction('/problemKnowledgeBase/problemKnowledgeBaseEO/queryById', query).then((res) => {
|
|
if (res.success) {
|
|
this.queryForm = res.result || {}
|
|
this.queryForm = { ...this.queryForm }
|
|
if (this.formInline.showPermissions == 'Privacy') {
|
|
this.isDisplay = true
|
|
} else {
|
|
this.isDisplay = false
|
|
}
|
|
if (this.queryForm.praiseEO && this.queryForm.praiseEO.praiseStatus == 'Praise') {
|
|
this.isPraise = true
|
|
} else {
|
|
this.isPraise = false
|
|
}
|
|
if (this.queryForm.collectEO && this.queryForm.collectEO.collectStatus == 'Collect') {
|
|
this.isCollect = true
|
|
} else {
|
|
this.isCollect = false
|
|
}
|
|
} else {
|
|
this.formInline = {}
|
|
}
|
|
})
|
|
},
|
|
viewAdd() {
|
|
let query = {
|
|
problemKnowledgeBaseId: this.$route.query.id,
|
|
browsingUserId: this.userInfo().id
|
|
}
|
|
postAction('/problemKnowledgeBase/problemKnowledgeBaseBrowsingHistoryEO/add', query).then((res) => {
|
|
})
|
|
},
|
|
likeClick() {
|
|
let praiseStatus = ''
|
|
this.isPraise = !this.isPraise
|
|
if (this.isPraise) {
|
|
praiseStatus = 'Praise'
|
|
this.queryForm.praiseCount = this.queryForm.praiseCount + 1
|
|
} else {
|
|
praiseStatus = 'Cancel praise'
|
|
this.queryForm.praiseCount = this.queryForm.praiseCount - 1
|
|
}
|
|
let query = {
|
|
problemKnowledgeBaseId: this.$route.query.id,
|
|
praiseUserId: this.userInfo().id,
|
|
praiseStatus: praiseStatus,
|
|
id: this.queryForm.praiseEO ? this.queryForm.praiseEO.id : undefined
|
|
}
|
|
putAction('/problemKnowledgeBase/problemKnowledgeBasePraiseEO/edit', query).then((res) => {
|
|
})
|
|
},
|
|
starClick() {
|
|
let collectStatus = ''
|
|
this.isCollect = !this.isCollect
|
|
if (this.isCollect) {
|
|
collectStatus = 'Collect'
|
|
this.queryForm.collectCount = this.queryForm.collectCount + 1
|
|
} else {
|
|
collectStatus = 'Cancel Collect'
|
|
this.queryForm.collectCount = this.queryForm.collectCount - 1
|
|
}
|
|
let query = {
|
|
problemKnowledgeBaseId: this.$route.query.id,
|
|
collectUserId: this.userInfo().id,
|
|
collectStatus: collectStatus,
|
|
id: this.queryForm.collectEO ? this.queryForm.collectEO.id : undefined
|
|
}
|
|
putAction('/problemKnowledgeBase/problemKnowledgeBaseCollectEO/edit', query).then((res) => {
|
|
})
|
|
},
|
|
clickButtonToUpload(item) {
|
|
this.$refs.viewFileModelRef.clickButtonToUpload(item)
|
|
},
|
|
releaseData() {
|
|
let query = {
|
|
problemKnowledgeBaseId: this.$route.query.id
|
|
}
|
|
getAction('/problemKnowledgeBase/problemKnowledgeBaseCommentEO/list', query).then((res) => {
|
|
if (res.success) {
|
|
this.releaseList = res.result || []
|
|
} else {
|
|
this.releaseList = []
|
|
}
|
|
})
|
|
},
|
|
release() {
|
|
if (!this.formInline.commentContent) {
|
|
this.$message.warning(this.$t('pleaseEnter'))
|
|
return
|
|
}
|
|
let query = {
|
|
problemKnowledgeBaseId: this.$route.query.id,
|
|
commentContent: this.formInline.commentContent,
|
|
commentUserId: this.userInfo().id
|
|
}
|
|
this.loading = true
|
|
postAction('/problemKnowledgeBase/problemKnowledgeBaseCommentEO/add', query).then((res) => {
|
|
if (res.success) {
|
|
this.$message.success(this.$t('OperationSuccessful'))
|
|
this.releaseData()
|
|
this.formInline = {}
|
|
this.loading = false
|
|
} else {
|
|
this.$message.warning(this.$t('operationFailed'))
|
|
this.loading = false
|
|
}
|
|
})
|
|
},
|
|
forwardClick() {
|
|
this.$refs.SelectedByRef.getPush()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@import '~@assets/less/common.less';
|
|
|
|
.doc-detail {
|
|
background: #fff;
|
|
height: 100%;
|
|
|
|
.doc-detail-wrap {
|
|
.doc-detail-header {
|
|
width: 100%;
|
|
height: 68px;
|
|
line-height: 68px;
|
|
padding: 0 0 0 32px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 2px #eff1f3 solid;
|
|
z-index: 1000;
|
|
background: #fff;
|
|
|
|
.doc-detail-title {
|
|
display: inline-block;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
color: #040B29;
|
|
line-height: 68px;
|
|
}
|
|
|
|
.doc-detail-right {
|
|
width: 800px;
|
|
line-height: 68px;
|
|
display: flex;
|
|
|
|
.doc-detail-btn {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-box {
|
|
padding: 0 32px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.header-text {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
height: 80px;
|
|
color: #000F16;
|
|
line-height: 80px;
|
|
}
|
|
|
|
.processBackground-text {
|
|
font-size: 16px;
|
|
color: #000F16;
|
|
}
|
|
}
|
|
}
|
|
|
|
.box-text {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 60px;
|
|
line-height: 40px;
|
|
|
|
.header-text {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #000F16;
|
|
}
|
|
}
|
|
|
|
.content-text {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.text-field {
|
|
width: 33%;
|
|
margin-bottom: 8px;
|
|
|
|
.text-field-left {
|
|
width: 124px;
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #6F7385;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
margin-right: 24px;
|
|
}
|
|
|
|
.text-field-right {
|
|
width: calc(100% - 200px);
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
color: #040B29;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.text-field-right-url {
|
|
color: #00B3BE !important;
|
|
cursor: pointer;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
font-size: 16px;
|
|
color: #040B29;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.content-icon {
|
|
height: 40px;
|
|
line-height: 40px;
|
|
font-size: 16px;
|
|
color: #040B29;
|
|
font-weight: 400;
|
|
text-align: right;
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: end;
|
|
}
|
|
|
|
.content-icon-text {
|
|
/*display: inline-block;*/
|
|
padding: 0 20px;
|
|
cursor: pointer;
|
|
line-height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.content-icon-text .icon {
|
|
font-size: 24px;
|
|
color: #3b4249 !important;
|
|
}
|
|
|
|
.content-icon-text .icon-active {
|
|
font-size: 24px;
|
|
color: #00B3BE !important;
|
|
}
|
|
|
|
.content-icon-text span {
|
|
display: inline-block;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.box-title-text {
|
|
line-height: 1.4;
|
|
display: flex;
|
|
/*align-items: center;*/
|
|
}
|
|
|
|
.title-text {
|
|
width: 88px;
|
|
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;
|
|
color: #000F16;
|
|
}
|
|
|
|
.box-input {
|
|
display: inline-block;
|
|
height: 38px;
|
|
width: 100%;
|
|
}
|
|
|
|
.itemModel {
|
|
width: 100%;
|
|
display: inline-block;
|
|
margin-top: 2px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.content-button {
|
|
text-align: right;
|
|
}
|
|
|
|
.header-btn {
|
|
height: 38px;
|
|
}
|
|
|
|
.doc-detail-right {
|
|
width: 800px;
|
|
line-height: 68px;
|
|
display: flex;
|
|
justify-content: end;
|
|
padding-right: 30px;
|
|
|
|
.doc-detail-btn {
|
|
margin-right: 20px;
|
|
}
|
|
}
|
|
|
|
.operator-text-text {
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #040B29;
|
|
display: inline-block;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-align: right;
|
|
}
|
|
|
|
.content-text-top {
|
|
width: 100%;
|
|
text-align: right;
|
|
color: #040B29;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
</style> |