ZQ/laws-sinotruk-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[update] 修改自测bug，完善问答库页面

Browse Source
This commit is contained in:
lideqin
2023-09-25 15:51:34 +08:00
parent aa892bb50b
commit 0b193de9e0
16 changed files with 318 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/businessSupport/questionAnswerLibrary/QuestionAnswerList.vue
+31 -7
View File
@@ -37,7 +37,7 @@
<a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
</a>
<a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 8px" v-has="'businessSupport:questionAnswer:search'">{{ $t('query') }}</a-button>
<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('reset') }}</a-button>
<a-button type="primary" ghost @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('reset') }}</a-button>
</div>
</a-row>
@@ -155,7 +155,7 @@ export default {
title: this.$t('title'),
align: 'center',
width: 180,
dataIndex: 'title',
dataIndex: 'titleSlot',
scopedSlots: { customRender: 'text' }
},
{
@@ -195,9 +195,16 @@ export default {
}
],
url: {
list: ''
list: '',
delete: ''
},
userInfo: {}
userInfo: {},
dataSource: [
{
id: 1,
// createBy: 'e9ca23d68d884d4ebb19d07889727dae'
}
]
}
},
mounted () {
@@ -208,9 +215,6 @@ export default {
handleQuiz () {
this.$refs.quizModal.title = this.$t('businessSupport.questionAnswer.quiz')
this.$refs.quizModal.open()
// this.$router.push({
// path: '/businessSupport/questionDetail'
// })
},
// 点击相关材料
handleAttachClick (record) {
@@ -236,6 +240,26 @@ export default {
// 其余可预览文件仍使用KKFile进行预览
const url = `${window._CONFIG.onlinePreviewDomainURL}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
window.open(url)
},
// 查看
handleDetail (record) {
this.$router.push({
path: '/businessSupport/questionDetail',
query: {
id: record.id,
canAnswer: 0
}
})
},
// 回答
handleAnswer (record) {
this.$router.push({
path: '/businessSupport/questionDetail',
query: {
id: record.id,
canAnswer: 1
}
})
}
}
}
src/views/businessSupport/questionAnswerLibrary/modules/QuizModal.vue
+79 -53
View File
@@ -10,58 +10,76 @@
<a-spin :spinning="confirmLoading">
<a-form :form="form">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('businessSupport.questionAnswer.classify')">
<a-select :placeholder="$t('pleaseSelect') + $t('businessSupport.questionAnswer.classify')"
allowClear
v-decorator.trim="[ 'level', validatorRules.level]">
<a-select-option :value="null" :key="-1">请选择</a-select-option>
<a-select-option :value="1">国内标准</a-select-option>
<a-select-option :value="2">海外标准</a-select-option>
<a-select-option :value="3">企业标准</a-select-option>
<a-select-option :value="4">其他问题</a-select-option>
</a-select>
</a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('standardNumber')">
<standard-model-selection
v-decorator.trim="[ 'standardNumber', validatorRules.standardNumber]"
:placeholder="$t('pleaseEnterOrSelect') + $t('standardNumber')"
@nameChange="standardNameChange"
/>
</a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('standardName')">
<a-input disabled :placeholder="$t('pleaseEnter') + $t('standardName')"
v-decorator.trim="[ 'standardName', validatorRules.standardName]"/>
</a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('title')">
<a-input v-decorator.trim="[ 'title', validatorRules.title]"
:placeholder="$t('pleaseEnter') + $t('title')"/>
</a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('project')">
<a-select :placeholder="$t('pleaseSelect') + $t('project')"
allowClear
v-decorator.trim="[ 'project', validatorRules.project]">
<a-select-option :value="null" :key="-1">请选择</a-select-option>
<a-select-option v-for="item in projectList" :value="item.id" :key="item.id">{{ item.projectName }}</a-select-option>
</a-select>
</a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('businessSupport.questionAnswer.quizTime')">
<a-date-picker
v-decorator.trim="[ 'quizTime', validatorRules.quizTime]"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
showTime
></a-date-picker>
</a-form-item>
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('businessSupport.questionAnswer.questionDesc')">
<a-textarea
v-decorator.trim="[ 'questionDesc', validatorRules.questionDesc]"
:placeholder="$t('pleaseEnter')+$t('businessSupport.questionAnswer.questionDesc')"
:maxLength="500"
:rows="4" />
<j-upload v-decorator.trim="[ 'attach', validatorRules.attach]"
isDownload>
</j-upload>
</a-form-item>
<a-row :gutter="24">
<a-col :span="12">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('businessSupport.questionAnswer.classify')">
<a-select :placeholder="$t('pleaseSelect') + $t('businessSupport.questionAnswer.classify')"
allowClear
v-decorator.trim="[ 'level', validatorRules.level]">
<a-select-option :value="null" :key="-1">请选择</a-select-option>
<a-select-option value="1">国内标准</a-select-option>
<a-select-option value="2">海外标准</a-select-option>
<a-select-option value="3">企业标准</a-select-option>
<a-select-option value="4">其他问题</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12" v-if="['1', '2', '3'].includes(form.getFieldValue('level'))">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('standardNumber')">
<standard-model-selection
v-decorator.trim="[ 'standardNumber', validatorRules.standardNumber]"
:placeholder="$t('pleaseEnterOrSelect') + $t('standardNumber')"
:source="form.getFieldValue('level')"
:disabledSourceSearch="true"
@nameChange="standardNameChange"
/>
</a-form-item>
</a-col>
<a-col :span="12" v-if="['1', '2', '3'].includes(form.getFieldValue('level'))">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('standardName')">
<a-input disabled :placeholder="$t('pleaseEnter') + $t('standardName')"
v-decorator.trim="[ 'standardName', validatorRules.standardName]"/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('title')">
<a-input v-decorator.trim="[ 'title', validatorRules.title]"
:placeholder="$t('pleaseEnter') + $t('title')"/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('project')">
<a-select :placeholder="$t('pleaseSelect') + $t('project')"
allowClear
v-decorator.trim="[ 'project', validatorRules.project]">
<a-select-option :value="null" :key="-1">请选择</a-select-option>
<a-select-option v-for="item in projectList" :value="item.id" :key="item.id">{{ item.projectName }}</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('businessSupport.questionAnswer.quizTime')">
<a-date-picker
v-decorator.trim="[ 'quizTime', validatorRules.quizTime]"
format="YYYY-MM-DD HH:mm:ss"
value-format="YYYY-MM-DD HH:mm:ss"
showTime
></a-date-picker>
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('businessSupport.questionAnswer.questionDesc')">
<a-textarea
v-decorator.trim="[ 'questionDesc', validatorRules.questionDesc]"
:placeholder="$t('pleaseEnter')+$t('businessSupport.questionAnswer.questionDesc')"
:maxLength="500"
:rows="4" />
<j-upload v-decorator.trim="[ 'attach', validatorRules.attach]"
isDownload>
</j-upload>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-spin>
@@ -91,7 +109,15 @@ export default {
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 }
sm: { span: 18 }
},
longLabelCol: {
xs: { span: 24 },
sm: { span: 3 }
},
longWrapperCol: {
xs: { span: 24 },
sm: { span: 20 }
},
validatorRules: {
classify: {
src/views/businessSupport/questionAnswerLibrary/modules/AnswerPage.vue → src/views/businessSupport/questionAnswerLibrary/page/AnswerPage.vue
+114 -66
View File
@@ -1,62 +1,79 @@
<template>
<div class="answer-page">
<div class="answer-page-title">{{ model.title }}</div>
<div class="answer-page-second-title">
<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>
<a-divider dashed/>
<div class="base-info-wrapper">
<a-row :gutter="24">
<a-col :span="4" class="base-info-title">{{ $t('standardNumOrName') }}</a-col>
<a-col :span="20" class="base-info-value"><a>{{ model.standardNumber + ' ' + model.standardName }}</a></a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="4" class="base-info-title">{{ $t('project') }}</a-col>
<a-col :span="20" class="base-info-value">{{ model.project }}</a-col>
</a-row>
<a-row :gutter="24">
<a-col :span="4" class="base-info-title">{{ $t('businessSupport.questionAnswer.attach') }}</a-col>
<a-col :span="20" class="base-info-value"><a>{{ model.attach }}</a></a-col>
</a-row>
<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>
<a-divider dashed/>
<!-- 问题描述部分 -->
<div class="question-desc-wrapper">
<p>{{ model.questionDesc }}</p>
<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 }}个回复</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" :src="getAvatarView(item.avatar)" icon="user"/>
<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">【置顶】</p>
<!-- 是否是置顶 -->
<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>
<a class="right-bottom-p-a" v-if="item.isTop">取消置顶</a>
<a class="right-bottom-p-a" v-else>设置为置顶</a>
<a class="right-bottom-p-a">删除</a>
<!-- 置顶评论的操作按钮 -->
<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 v-for="(item, index) in answerArr" :key="index">
</div>
<!-- 回答区域 -->
<div class="answer-wrapper">
<div v-if="canAnswer === 1" class="answer-wrapper">
<div class="left-user-info">
<a-avatar shape="square" :src="getAvatarView(currentUser.avatar)" icon="user"/>
<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>回复问题</p>
<a-textarea v-model="answerDesc"></a-textarea>
<a-button class="submit-btn" type="primary">提交</a-button>
<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>
@@ -112,12 +129,14 @@ export default {
realname: '',
orgCodeTxt: ''
},
answerDesc: ''
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) {
@@ -128,47 +147,71 @@ export default {
</script>
<style scoped lang="less">
.answer-page {
padding: 24px;
}
.answer-page-title {
font-size: 20px;
font-family: PingFang SC-Medium, PingFang SC, sans-serif;
color: #1D2129;
font-weight: 600;
text-align: center;
margin-bottom: 24px;
}
.answer-page-second-title {
// 二级标题
.detail-page-second-title {
font-size: 16px;
text-align: center;
font-weight: 550;
margin-bottom: 20px;
}
.base-info-wrapper {
font-size: 16px;
font-family: PingFang SC-Medium, PingFang SC, sans-serif;
.base-info-title {
font-weight: 530;
.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;
}
.base-info-value {
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 {
position: relative;
padding-bottom: 40px;
border-radius: 8px;
border: 1px solid #E5E6EB;
margin-bottom: 20px;
padding: 20px;
.question-desc {
font-size: 16px;
}
}
// 历史回答数据
.answer-wrapper {
width: 100%;
//height: 100%;
border: 1px solid #1D2129;
border-radius: 8px;
border: 1px solid #E5E6EB;
margin-bottom: 20px;
display: flex;
//flex: 1;
.left-user-info {
width: 300px;
display: flex;
@@ -176,19 +219,26 @@ export default {
align-items: center;
justify-content: center;
background: rgb(247, 248, 250);
padding: 20px 0 5px 0;
}
.right-answer-wrapper {
position: relative;
padding: 20px 10px 40px 10px;
width: 100%;
padding: 20px 10px 20px 10px;
box-sizing: border-box;
}
.right-answer-form-wrapper {
padding: 20px;
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;
}
@@ -199,11 +249,9 @@ export default {
// 右下角的时间和按钮区域
.right-bottom-p {
height: 20px;
display: flex;
width: auto;
position: absolute;
right: 10px;
bottom: 0;
text-align: right;
padding-right: 8px;
margin-bottom: 0;
.time-span {
color: #86909C;
}