[update] 修改自测bug，完善问答库页面
This commit is contained in:
lideqin
@@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<div class="detail-page">
|
||||
<div class="detail-page-title">{{ model.title }}</div>
|
||||
<div class="detail-page-second-title">
|
||||
{{ $t('businessSupport.questionAnswer.poster') + '：' + model.orgCodeTxt + ' ' + model.poster }}
|
||||
</div>
|
||||
<div class="detail-page-part">
|
||||
<div class="detail-page-part-form">
|
||||
<!-- 标准号/标准名称 -->
|
||||
<div class="detail-page-part-form-item-large">
|
||||
<label>{{ $t('standardNumOrName') }}</label>
|
||||
<span>{{ model.standardNumber && model.standardName ? model.standardNumber + ' ' + model.standardName : global.emptyLine }}</span>
|
||||
</div>
|
||||
<!-- 项目 -->
|
||||
<div class="detail-page-part-form-item-large">
|
||||
<label>{{ $t('project') }}</label>
|
||||
<span>{{ model.project || global.emptyLine }}</span>
|
||||
</div>
|
||||
<!-- 附件 -->
|
||||
<div class="detail-page-part-form-item-large-file">
|
||||
<label>{{ $t('businessSupport.questionAnswer.attach') }}</label>
|
||||
<span>{{ model.attach || global.emptyLine }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 问题描述部分 -->
|
||||
<div class="question-desc-wrapper">
|
||||
<p class="question-desc">{{ model.questionDesc }}</p>
|
||||
<p class="right-bottom-p">
|
||||
<span class="time-span">{{ model.quizTime }}</span>
|
||||
<span class="right-bottom-p-span">{{ answerArr.length + $t('businessSupport.questionAnswer.answerNum')}}</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- 历史回答数据 -->
|
||||
<div v-for="(item, index) in answerArr" :key="index" class="answer-wrapper">
|
||||
<div class="left-user-info">
|
||||
<a-avatar shape="square" :size="56" :src="getAvatarView(item.avatar)" icon="user"/>
|
||||
<p>{{ item.realname }}</p>
|
||||
<p>{{ item.orgCodeTxt }}</p>
|
||||
</div>
|
||||
<div class="right-answer-wrapper">
|
||||
<!-- 是否是置顶 -->
|
||||
<p v-if="item.isTop" class="top-p">{{ $t('businessSupport.questionAnswer.top') }}</p>
|
||||
<!-- 回答描述 -->
|
||||
<p :class="!item.isTop ? 'no-top-desc' : ''">{{ item.answerDesc }}</p>
|
||||
<p class="right-bottom-p">
|
||||
<span>{{ item.answerTime }}</span>
|
||||
<!-- 置顶评论的操作按钮 -->
|
||||
<template v-if="item.isTop">
|
||||
<!-- 取消置顶 -->
|
||||
<a class="right-bottom-p-a">{{ $t('businessSupport.questionAnswer.cancelTop') }}</a>
|
||||
<!-- 删除 : 发帖人、评论人、有置顶权限的用户可以删除 ?? -->
|
||||
<a class="right-bottom-p-a">{{ $t('delete') }}</a>
|
||||
</template>
|
||||
<!-- 非置顶评论 -->
|
||||
<template v-else>
|
||||
<!-- 设置为置顶 -->
|
||||
<a class="right-bottom-p-a">{{ $t('businessSupport.questionAnswer.setTop') }}</a>
|
||||
<!-- 删除 : 发帖人、评论人、有置顶权限的用户可以删除,置顶的评论不允许删除，取消置顶后允许删除 ?? -->
|
||||
<a class="right-bottom-p-a">{{ $t('delete') }}</a>
|
||||
</template>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 回答区域 -->
|
||||
<div v-if="canAnswer === 1" class="answer-wrapper">
|
||||
<div class="left-user-info">
|
||||
<a-avatar shape="square" :size="56" :src="getAvatarView(currentUser.avatar)" icon="user"/>
|
||||
<p>{{ currentUser.realname }}</p>
|
||||
<p>{{ currentUser.orgCodeTxt }}</p>
|
||||
</div>
|
||||
<div class="right-answer-form-wrapper">
|
||||
<p>{{ $t('businessSupport.questionAnswer.answerQuestion') }}</p>
|
||||
<a-textarea v-model="answerDesc" :autoSize="{minRows: 4}" :maxLength="2000"></a-textarea>
|
||||
<p class="answer-desc-num">{{ answerDesc.length }}/2000{{ $t('businessSupport.questionAnswer.word') }}</p>
|
||||
<a-button class="submit-btn" type="primary" @click="submit">{{ $t('submit') }}</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { USER_INFO } from '@/store/mutation-types'
|
||||
import Vue from 'vue'
|
||||
import { getFileAccessHttpUrl } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: 'AnswerPage',
|
||||
data () {
|
||||
return {
|
||||
model: {
|
||||
title: '问题问题',
|
||||
orgCodeTxt: '车型技术部',
|
||||
poster: '超级管理员',
|
||||
standardNumber: 'GB 7528-2020',
|
||||
standardName: '机动车运行安全',
|
||||
project: '机动车运行安全',
|
||||
attach: '机动车运行安全.jpg',
|
||||
questionDesc: '问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述' +
|
||||
'问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述' +
|
||||
'问题描述问题描述问题描述问题描述',
|
||||
quizTime: '2023-07-04 14:39',
|
||||
answerNum: 2
|
||||
},
|
||||
answerArr: [
|
||||
{
|
||||
avatar: '',
|
||||
realname: '李某某',
|
||||
orgCodeTxt: '标准法规部',
|
||||
isTop: true,
|
||||
answerDesc: '回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述' +
|
||||
'回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述' +
|
||||
'回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述',
|
||||
answerTime: '2023-07-04 16:38'
|
||||
},
|
||||
{
|
||||
avatar: '',
|
||||
realname: '李某某',
|
||||
orgCodeTxt: '标准法规部',
|
||||
isTop: false,
|
||||
answerDesc: '回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述' +
|
||||
'回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述' +
|
||||
'回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述回答描述',
|
||||
answerTime: '2023-07-04 16:38'
|
||||
}
|
||||
],
|
||||
currentUser: {
|
||||
avatar: '',
|
||||
realname: '',
|
||||
orgCodeTxt: ''
|
||||
},
|
||||
answerDesc: '',
|
||||
canAnswer: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const userInfo = Vue.ls.get(USER_INFO)
|
||||
this.currentUser = Object.assign({}, userInfo)
|
||||
this.canAnswer = Number(this.$route.query.canAnswer)
|
||||
},
|
||||
methods: {
|
||||
getAvatarView (avatar) {
|
||||
return getFileAccessHttpUrl(avatar)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
// 二级标题
|
||||
.detail-page-second-title {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
font-weight: 550;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.detail-page-part-form-item-large {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin: 0 16px 16px 0;
|
||||
|
||||
label {
|
||||
width: 20%;
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC-Regular, PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
color: #86909C;
|
||||
}
|
||||
|
||||
span {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC-Regular, PingFang SC, sans-serif;
|
||||
color: #1D2129;
|
||||
}
|
||||
}
|
||||
.detail-page-part-form-item-large-file {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin: 0 16px 16px 0;
|
||||
|
||||
label {
|
||||
width: 20%;
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC-Regular, PingFang SC, sans-serif;
|
||||
font-weight: 400;
|
||||
color: #86909C;
|
||||
}
|
||||
|
||||
a {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
font-size: 16px;
|
||||
font-family: PingFang SC-Regular, PingFang SC, sans-serif;
|
||||
}
|
||||
}
|
||||
// 问题描述部分
|
||||
.question-desc-wrapper {
|
||||
border-radius: 8px;
|
||||
border: 1px solid #E5E6EB;
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
.question-desc {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
// 历史回答数据
|
||||
.answer-wrapper {
|
||||
border-radius: 8px;
|
||||
border: 1px solid #E5E6EB;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
.left-user-info {
|
||||
width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgb(247, 248, 250);
|
||||
padding: 20px 0 5px 0;
|
||||
}
|
||||
.right-answer-wrapper {
|
||||
width: 100%;
|
||||
padding: 20px 10px 20px 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.right-answer-form-wrapper {
|
||||
padding: 20px 10px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
.submit-btn {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
.answer-desc-num {
|
||||
text-align: right;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.top-p {
|
||||
color: #D52C26;
|
||||
}
|
||||
.no-top-desc {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
// 右下角的时间和按钮区域
|
||||
.right-bottom-p {
|
||||
height: 20px;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
margin-bottom: 0;
|
||||
.time-span {
|
||||
color: #86909C;
|
||||
}
|
||||
.right-bottom-p-span {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.right-bottom-p-a {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user