[update] 问答库联调

src/api/api.js

@@ -130,7 +130,7 @@ const getWorkGroupTreeList = (params) => getAction('/sys/lawsWorkingGroup/list',
 const getEnterpriseLevelMapList = (params) => getAction('/sys/lawsGrade/list', params)
 
 // 车型项目下拉数据
-const getCarTypeProjectList = (params) => getAction('/projectLibrary/lawsProjectLibrary/list', params)
+const getCarTypeProjectList = (params) => getAction('/projectLibrary/lawsProjectLibrary/queryList', params)
 
 export {
   addRole,

src/api/businessSupport.js

@@ -0,0 +1,17 @@
+import { getAction, postAction } from './manage'
+
+// 问答库详情-根据id获取问题信息
+const getQuizById = (params) => getAction('/laws/library/lawsProblemLibrary/queryById', params)
+// 问答库回答-回答
+const answerQuiz = (params) => postAction('/laws/library/lawsProblemLibrary/addAnswer', params)
+// 问答库回答-设置置顶
+const setOrCancelTop = (params) => getAction('/laws/library/lawsProblemLibrary/isTop', params)
+// 回答库详情-删除回答
+const deleteAnswer = (params) => postAction('/laws/library/lawsProblemLibrary/deleteAnswer', params)
+
+export {
+  getQuizById,
+  answerQuiz,
+  setOrCancelTop,
+  deleteAnswer
+}

src/common/lang/businessSupport/en.js

@@ -18,6 +18,7 @@ module.exports = {
     cancelTop: 'untop',
     setTop: 'Set To Top',
     answerQuestion: 'reply to a question',
-    word: 'word'
+    word: 'word',
+    pleaseEnterAnswerDesc: '请输入回答描述'
   }
 }

src/common/lang/businessSupport/zh.js

@@ -18,6 +18,7 @@ module.exports = {
     cancelTop: '取消置顶',
     setTop: '设置为置顶',
     answerQuestion: '回复问题',
-    word: '字'
+    word: '字',
+    pleaseEnterAnswerDesc: '请输入回答描述'
   }
 }

src/views/businessSupport/questionAnswerLibrary/QuestionAnswerList.vue

@@ -4,29 +4,33 @@
     <div class="table-page-search-wrapper">
       <a-form layout="inline" @keyup.enter.native="searchQuery">
         <a-row :gutter="24">
+          <!--  分类  -->
           <a-col :span="6">
             <a-form-item :label="$t('businessSupport.questionAnswer.classify')" :labelCol="labelCol" :wrapperCol="wrapperCol">
               <j-dict-select-tag
                 :placeholder="$t('pleaseEnter')+$t('businessSupport.questionAnswer.classify')"
-                dict-code="esp_project_status"
+                dict-code="problem_library_type"
-                v-model="queryParam.classify">
+                v-model="queryParam.type">
               </j-dict-select-tag>
             </a-form-item>
           </a-col>
+          <!--  标准号  -->
           <a-col :span="6">
             <a-form-item :label="$t('standardNumber')" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <a-input :placeholder="$t('pleaseEnter')+$t('standardNumber')" v-model="queryParam.standardNo"></a-input>
+              <j-input :placeholder="$t('pleaseEnter')+$t('standardNumber')" v-model="queryParam.standardNumber"></j-input>
             </a-form-item>
           </a-col>
+          <!--  标准名称  -->
           <a-col :span="6">
             <a-form-item :label="$t('standardName')" :labelCol="labelCol" :wrapperCol="wrapperCol">
-              <a-input :placeholder="$t('pleaseEnter')+$t('standardName')" v-model="queryParam.standardName"></a-input>
+              <j-input :placeholder="$t('pleaseEnter')+$t('standardName')" v-model="queryParam.standardName"></j-input>
             </a-form-item>
           </a-col>
           <template v-if="toggleSearchStatus">
+            <!--  标题  -->
             <a-col :span="6">
               <a-form-item :label="$t('title')" :labelCol="labelCol" :wrapperCol="wrapperCol">
-                <a-input :placeholder="$t('pleaseEnter')+$t('title')" v-model="queryParam.title"></a-input>
+                <j-input :placeholder="$t('pleaseEnter')+$t('title')" v-model="queryParam.title"></j-input>
               </a-form-item>
             </a-col>
           </template>
@@ -76,7 +80,7 @@
         <!--    操作栏   -->
         <div slot="action" slot-scope="{record}" class="action-span-cell">
           <!--  是自己的提问  -->
-          <template v-if="record.createBy === userInfo.id">
+          <template v-if="record.userId === userInfo.id">
             <a @click="handleDetail(record)"
                class="table-ope-btn"
                v-has="'businessSupport:questionAnswer:detail'">
@@ -100,7 +104,7 @@
         </div>
       </j-table>
     </div>
-    <quiz-modal ref="quizModal"></quiz-modal>
+    <quiz-modal ref="quizModal" @ok="modalFormOk"></quiz-modal>
   </a-card>
 </template>
 
@@ -123,6 +127,11 @@ export default {
   components: { QuizModal, JTable },
   data () {
     return {
+      /* 排序参数 */
+      isorter: {
+        column: 'quizTime',
+        order: 'desc'
+      },
       labelCol: {
         span: 4
       },
@@ -130,56 +139,49 @@ export default {
         span: 14
       },
       columns: [
-        {
+        { // 分类
           title: this.$t('businessSupport.questionAnswer.classify'),
           align: 'center',
           width: 180,
-          dataIndex: 'classify_dictText',
+          dataIndex: 'type_dictText',
           scopedSlots: { customRender: 'text' }
         },
-        {
+        { // 标准编号
           title: this.$t('standardNumber'),
           align: 'center',
           width: 180,
           dataIndex: 'standardNumber',
           scopedSlots: { customRender: 'text' }
         },
-        {
+        { // 标准名称
           title: this.$t('standardName'),
           align: 'center',
           width: 180,
           dataIndex: 'standardName',
           scopedSlots: { customRender: 'text' }
         },
-        {
+        { // 标题
           title: this.$t('title'),
           align: 'center',
           width: 180,
-          dataIndex: 'titleSlot',
+          dataIndex: 'title',
           scopedSlots: { customRender: 'text' }
         },
-        {
+        { // 项目
           title: this.$t('project'),
           align: 'center',
           width: 180,
-          dataIndex: 'project',
+          dataIndex: 'project_dictText',
           scopedSlots: { customRender: 'text' }
         },
-        {
+        { // 问题描述
           title: this.$t('businessSupport.questionAnswer.questionDesc'),
           align: 'center',
           width: 180,
-          dataIndex: 'questionDesc',
+          dataIndex: 'problemDescription',
           scopedSlots: { customRender: 'text' }
         },
-        {
+        { // 提问时间
-          title: this.$t('businessSupport.questionAnswer.attach'),
-          align: 'center',
-          width: 180,
-          dataIndex: 'attach',
-          scopedSlots: { customRender: 'attach' }
-        },
-        {
           title: this.$t('businessSupport.questionAnswer.quizTime'),
           align: 'center',
           width: 180,
@@ -195,16 +197,10 @@ export default {
         }
       ],
       url: {
-        list: '',
+        list: '/laws/library/lawsProblemLibrary/page',
-        delete: ''
+        delete: '/laws/library/lawsProblemLibrary/deleteProblem'
       },
-      userInfo: {},
+      userInfo: {}
-      dataSource: [
-        {
-          id: 1,
-          // createBy: 'e9ca23d68d884d4ebb19d07889727dae'
-        }
-      ]
     }
   },
   mounted () {

src/views/businessSupport/questionAnswerLibrary/modules/QuizModal.vue

@@ -11,11 +11,12 @@
     <a-spin :spinning="confirmLoading">
       <a-form :form="form">
         <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]">
+                        v-decorator.trim="[ 'type', validatorRules.type]">
                 <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>
@@ -24,29 +25,33 @@
               </a-select>
             </a-form-item>
           </a-col>
-          <a-col :span="12" v-if="['1', '2', '3'].includes(form.getFieldValue('level'))">
+          <!--  标准编号  -->
+          <a-col :span="12" v-if="['1', '2', '3'].includes(form.getFieldValue('type'))">
             <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('standardNumber')">
               <standard-selection
                 v-decorator.trim="[ 'standardNumber', validatorRules.standardNumber]"
                 :placeholder="$t('pleaseEnterOrSelect') + $t('standardNumber')"
-                :source="form.getFieldValue('level')"
+                :source="form.getFieldValue('type')"
                 :disabledSourceSearch="true"
                 @nameChange="standardNameChange"
               />
             </a-form-item>
           </a-col>
-          <a-col :span="12" v-if="['1', '2', '3'].includes(form.getFieldValue('level'))">
+          <!--  标准名称  -->
+          <a-col :span="12" v-if="['1', '2', '3'].includes(form.getFieldValue('type'))">
             <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')"
@@ -57,6 +62,7 @@
               </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
@@ -67,14 +73,16 @@
               ></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]"
+                v-decorator.trim="[ 'problemDescription', validatorRules.problemDescription]"
                 :placeholder="$t('pleaseEnter')+$t('businessSupport.questionAnswer.questionDesc')"
                 :maxLength="500"
                 :rows="4" />
-              <j-upload v-decorator.trim="[ 'attach', validatorRules.attach]"
+              <j-upload v-decorator.trim="[ 'file', validatorRules.file]"
+                        returnId
                         isDownload>
               </j-upload>
             </a-form-item>
@@ -156,13 +164,13 @@ export default {
           ],
           validateTrigger: 'change'
         },
-        questionDesc: {
+        problemDescription: {
           rules: [
             { required: true, message: this.$t('pleaseEnter') + this.$t('businessSupport.questionAnswer.questionDesc') }
           ],
           validateTrigger: 'blur'
         },
-        attach: {
+        file: {
           rules: [
             { required: false, message: this.$t('pleaseSelect') + this.$t('businessSupport.questionAnswer.attach') }
           ],
@@ -170,7 +178,7 @@ export default {
         }
       },
       url: {
-        quiz: ''
+        quiz: '/laws/library/lawsProblemLibrary/addProblem'
       },
       projectList: [] // 项目下拉框数据
     }

src/views/businessSupport/questionAnswerLibrary/page/AnswerPage.vue

@@ -2,7 +2,8 @@
   <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 }}
+      <!--  todo: 发帖人部门没有返回  -->
+      {{ $t('businessSupport.questionAnswer.poster') + '：' + model.orgCode_dictText + ' ' + model.userId_dictText }}
     </div>
     <div class="detail-page-part">
       <div class="detail-page-part-form">
@@ -14,59 +15,81 @@
         <!--  项目  -->
         <div class="detail-page-part-form-item-large">
           <label>{{ $t('project') }}</label>
-          <span>{{  model.project  || global.emptyLine }}</span>
+          <span>{{  model.project_dictText  || 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>
+          <template v-if="fileList && fileList.length > 0">
+            <div class="file-box">
+              <div class="file-list-file" v-for="file in fileList" :key="file.id">
+                <div class="file-list-file-info">
+                  <a-icon type="link" />
+                  <div class="file-list-file-name" @click="handlePreview(file)">{{ file.fileName }}</div>
+                </div>
+                <!--                下载-->
+                <a-button type="link" icon="download" class="file-btn" @click="handleDownload(file)">
+                  {{ $t('download') }}
+                </a-button>
+                <!--                无水印下载-->
+                <!--<a-button type="link" v-has="btnPermission.unwatermarkedDownload" class="file-btn">-->
+                <!--  <i class="iconfont icon-water-drop-slash"></i>-->
+                <!--  {{ $t('unwatermarkedDownload') }}-->
+                <!--</a-button>-->
+              </div>
+            </div>
+          </template>
+          <span v-else>{{ global.emptyLine }}</span>
         </div>
       </div>
     </div>
     <!--  问题描述部分  -->
     <div class="question-desc-wrapper">
-      <p class="question-desc">{{ model.questionDesc }}</p>
+      <p class="question-desc">{{ model.problemDescription }}</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">
+    <template v-if="answerArr && answerArr.length > 0">
-      <div class="left-user-info">
+      <div v-for="(item, index) in answerArr" :key="index" class="answer-wrapper">
-        <a-avatar shape="square" :size="56" :src="getAvatarView(item.avatar)" icon="user"/>
+        <div class="left-user-info">
-        <p>{{ item.realname }}</p>
+          <a-avatar shape="square" :size="56" :src="getAvatarView(item.avatar)" icon="user"/>
-        <p>{{ item.orgCodeTxt }}</p>
+          <p class="left-user-name">{{ item.name }}</p>
+          <p>{{ item.departName }}</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.answerDescription }}</p>
+          <p class="right-bottom-p">
+            <span>{{ item.createTime }}</span>
+            <!--  置顶评论的操作按钮  -->
+            <template v-if="item.isTop">
+              <!--  取消置顶  -->
+              <a class="right-bottom-p-a" @click="setOrCancelTop(item.id)">{{ $t('businessSupport.questionAnswer.cancelTop') }}</a>
+              <!--  删除 : 发帖人、评论人、有置顶权限的用户可以删除 ?? -->
+              <a v-if="userInfo.id === model.userId || userInfo.id === item.userId" class="right-bottom-p-a" @click="deleteAnswer(item.id)">{{ $t('delete') }}</a>
+            </template>
+            <!--  非置顶评论  -->
+            <template v-else>
+              <!--  设置为置顶  -->
+              <a class="right-bottom-p-a" @click="setOrCancelTop(item.id)">{{ $t('businessSupport.questionAnswer.setTop') }}</a>
+              <!--  删除 : 发帖人、评论人、有置顶权限的用户可以删除,置顶的评论不允许删除，取消置顶后允许删除 ?? -->
+              <a v-if="userInfo.id === model.userId || userInfo.id === item.userId" class="right-bottom-p-a" @click="deleteAnswer(item.id)">{{ $t('delete') }}</a>
+            </template>
+          </p>
+        </div>
       </div>
-      <div class="right-answer-wrapper">
+    </template>
-        <!--  是否是置顶  -->
+
-        <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 class="left-user-name">{{ currentUser.realname }}</p>
         <p>{{ currentUser.orgCodeTxt }}</p>
       </div>
       <div class="right-answer-form-wrapper">
@@ -76,71 +99,169 @@
         <a-button class="submit-btn" type="primary" @click="submit">{{ $t('submit') }}</a-button>
       </div>
     </div>
+    <!--  图片预览容器 -->
+    <div id="images">
+      <div class="image" v-viewer="{movable: false}">
+        <img v-show="image" :src="imageUrl">
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import { USER_INFO } from '@/store/mutation-types'
+import { USER_INFO, ACCESS_TOKEN } from '@/store/mutation-types'
 import Vue from 'vue'
 import { getFileAccessHttpUrl } from '@/api/manage'
+import { getQuizById, answerQuiz, setOrCancelTop, deleteAnswer } from '@/api/businessSupport'
+import { getFileInfo } from '@/api/api'
+import { previewPdf } from '@/utils/previewPdf'
+
+const FILE_TYPE_IMGS = ['jpg', 'jpeg', 'png', 'raw']
+const FILE_TYPE_PDF = 'pdf'
+const Base64 = require('js-base64').Base64
 
 export default {
   name: 'AnswerPage',
   data () {
     return {
-      model: {
+      model: {},
-        title: '问题问题',
+      answerArr: [],
-        orgCodeTxt: '车型技术部',
+      fileList: [],
-        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
+      canAnswer: false,
+      userInfo: {},
+      image: false,
+      imageUrl: ''
     }
   },
   mounted () {
+    this.initData(this.$route.query.id)
     const userInfo = Vue.ls.get(USER_INFO)
+    this.userInfo = userInfo
     this.currentUser = Object.assign({}, userInfo)
     this.canAnswer = Number(this.$route.query.canAnswer)
   },
   methods: {
+    // 初始化获取数据信息
+    initData (id) {
+      getQuizById({ id: id }).then(res => {
+        if (res.success) {
+          this.model = Object.assign({}, res.result)
+          if (this.model.file) {
+            const fileList = this.model.file.split(',')
+            const fileInfoList = []
+            fileList.forEach(async id => {
+              const fileInfo = await this.getFileInfo(id)
+              if (fileInfo) {
+                fileInfoList.push(fileInfo)
+              }
+            })
+            this.fileList = fileInfoList
+          }
+          this.answerArr = this.model.answerList
+        }
+      })
+    },
+    // 获取头像
     getAvatarView (avatar) {
       return getFileAccessHttpUrl(avatar)
+    },
+    getFileInfo (fileId) {
+      return new Promise(resolve => {
+        let fileInfo
+        getFileInfo({ id: fileId }).then(res => {
+          if (res.success) {
+            fileInfo = res.result
+          }
+        }).finally(() => {
+          resolve(fileInfo)
+        })
+      })
+    },
+    handlePreview (file) {
+      if (!file || !file.url) {
+        return
+      }
+      // 截取文件后缀名
+      const fileSuffix = file.fileName ? file.fileName.split('.')[file.fileName.split('.').length - 1] : ''
+      const canPreview = FILE_TYPE_IMGS.some(tt => fileSuffix.toLowerCase() === tt) || fileSuffix.toLowerCase() === FILE_TYPE_PDF
+      // 判断是否为可预览格式的文件
+      if (!canPreview) {
+        this.$message.loading('该文件类型不支持预览，正在为您准备下载...').then(() => {
+          this.handleDownload(file)
+        })
+        return
+      }
+      const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/download/${file.id}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.fileName}`
+      // 图片预览，使用自己添加的组件
+      if (canPreview && FILE_TYPE_IMGS.includes(fileSuffix.toLowerCase())) {
+        this.imageUrl = getFileAccessHttpUrl(file.id)
+        // 获取viewer实例
+        const viewer = this.$el.querySelector('.image').$viewer
+        // 调用show方法进行显示预览图
+        viewer.show()
+        // this.$refs.imagePreviewModal.open(file)
+        return
+      }
+      // pdf预览
+      if (canPreview && FILE_TYPE_PDF.includes(fileSuffix)) {
+        const url = previewPdf(file.id)
+        console.log(url)
+        window.open(url)
+        return
+      }
+      // 其余可预览文件仍使用KKFile进行预览
+      const url = `${window._CONFIG.onlinePreviewDomainURL}?url=${encodeURIComponent(Base64.encode(fileFullUrl))}`
+      window.open(url)
+    },
+    handleDownload (file) {
+      // 下载文件
+      downloadFile(`/laws/standard/common/downloadWithWaterMark/${file.id}`, file.fileName)
+    },
+    submit () {
+      if (!this.answerDesc) {
+        this.$message.warning(this.$t('businessSupport.questionAnswer.pleaseEnterAnswerDesc'))
+        return
+      }
+      const param = {}
+      param.problemId = this.model.id
+      param.answerDescription = this.answerDesc
+      answerQuiz(param).then(res => {
+        if (res.success) {
+          this.$message.success(res.message)
+          this.initData(this.model.id)
+          this.answerDesc = ''
+        } else {
+          this.$message.warning(res.message)
+        }
+      })
+    },
+    // 设置或取消置顶
+    setOrCancelTop (answerId) {
+      setOrCancelTop({ id: answerId }).then(res => {
+        if (res.success) {
+          this.$message.success(res.message)
+          this.initData(this.model.id)
+        } else {
+          this.$message.warning(res.message)
+        }
+      })
+    },
+    // 删除回答
+    deleteAnswer (answerId) {
+      deleteAnswer({ id: answerId }).then(res => {
+        if (res.success) {
+          this.$message.success(res.message)
+          this.initData(this.model.id)
+        } else {
+          this.$message.warning(res.message)
+        }
+      })
     }
   }
 }
@@ -221,6 +342,10 @@ export default {
     background: rgb(247, 248, 250);
     padding: 20px 0 5px 0;
   }
+  .left-user-name {
+    margin-top: 18px;
+    margin-bottom: 8px;
+  }
   .right-answer-wrapper {
     width: 100%;
     padding: 20px 10px 20px 10px;
@@ -262,4 +387,52 @@ export default {
     margin-left: 8px;
   }
 }
+
+.file-box {
+  flex: 1;
+  width: 0;
+}
+.file-list {
+  &-file {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+  }
+
+  &-file:last-child {
+    margin-bottom: 0;
+  }
+
+  &-file-info {
+    display: flex;
+    align-items: center;
+    color: @primary-color;
+    cursor: pointer;
+    flex: 1;
+    width: 0;
+  }
+
+  &-file-info > .anticon {
+    margin-right: 8px;
+  }
+
+  &-file-name {
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1;
+    width: 0;
+    text-overflow: ellipsis;
+  }
+
+  &-file-operate {
+    .ant-btn > .anticon + span, .ant-btn > .iconfont + span {
+      margin-left: 10px;
+    }
+
+    .ant-btn:first-child {
+      margin-left: 15px;
+    }
+  }
+}
 </style>