laws-sinotruk-client/src/views/businessSupport/questionAnswerLibrary/QuestionAnswerList.vue

<template>
  <a-card :bordered="false">
    <!--  搜索区域  -->
    <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('pleaseSelect')+$t('businessSupport.questionAnswer.classify')"
                dict-code="problem_library_type"
                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">
              <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">
              <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">
                <j-input :placeholder="$t('pleaseEnter')+$t('title')" v-model="queryParam.title"></j-input>
              </a-form-item>
            </a-col>
          </template>

          <div style="float: right;overflow: hidden;" class="table-page-search-submitButtons">
            <a @click="handleToggleSearch">
              {{ toggleSearchStatus ? $t('putAway') : $t('open') }}
              <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" ghost @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('reset') }}</a-button>
          </div>

        </a-row>
      </a-form>
    </div>
    <!--  操作区域  -->
    <div class="table-operator">
      <!--  提问  -->
      <a-button icon="plus" type="primary" v-has="'businessSupport:questionAnswer:quiz'"
                @click="handleQuiz">
        {{ $t('businessSupport.questionAnswer.quiz') }}
      </a-button>
    </div>
    <div>
      <j-table
        :can-drag="true"
        :scroll="{x: '100%', y: yScrollHeight}"
        ref="table"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">

        <!--  解决columns中dataIndex是title的时候，控制台报错的问题  -->
        <template v-slot:titleSlot="{record}">
          <a-tooltip overlay-class-name="tooltip-style">
            <template slot="title">{{ record.title || record.title === 0 ? record.title : global.emptyLine }}</template>
            <div class="table-text">{{ record.title || record.title === 0 ? record.title : global.emptyLine }}</div>
          </a-tooltip>
        </template>

        <!--    附件   -->
        <template v-slot:attach="{text, record}">
          <a-tooltip overlay-class-name="tooltip-style">
            <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
            <a v-if="text" class="link-a" @click="handleAttachClick(record)">{{ text }}</a>
            <span v-else>{{ global.emptyLine }}</span>
          </a-tooltip>
        </template>

        <!--    操作栏   -->
        <div slot="action" slot-scope="{record}" class="action-span-cell">
          <!--  是自己的提问  -->
          <template v-if="record.userId === userInfo.id">
            <a @click="handleDetail(record)"
               class="table-ope-btn"
               v-has="'businessSupport:questionAnswer:detail'">
              {{ $t('view') }}
            </a>
            <a-divider type="vertical" />
            <a @click="handleDelete(record.id)"
               class="table-ope-btn"
               v-has="'businessSupport:questionAnswer:delete'">
              {{ $t('delete') }}
            </a>
          </template>
          <!--  是别人的提问  -->
          <template v-else>
            <a @click="handleAnswer(record)"
               class="table-ope-btn"
               v-has="'businessSupport:questionAnswer:answer'">
              {{ $t('businessSupport.questionAnswer.answer') }}
            </a>
          </template>
        </div>
      </j-table>
    </div>
    <quiz-modal ref="quizModal" @ok="modalFormOk"></quiz-modal>
  </a-card>
</template>

<script>
import { JeroListMixin } from '@/mixins/JeroListMixin'
import JTable from '@/components/jero/JTable'
import Vue from 'vue'
import { ACCESS_TOKEN, USER_INFO } from '@/store/mutation-types'
import { previewPdf } from '@/utils/previewPdf'
import { getFileAccessHttpUrl, downloadFile } from '@/api/manage'
import QuizModal from './modules/QuizModal'
import { kkFilePreview } from '@/utils/kkFilePreview'

const FILE_TYPE_IMGS = ['jpg', 'jpeg', 'png', 'raw']
const FILE_TYPE_PDF = 'pdf'

export default {
  name: 'QuestionAnswerList',
  mixins: [JeroListMixin],
  components: { QuizModal, JTable },
  data () {
    return {
      /* 排序参数 */
      isorter: {
        column: 'quizTime',
        order: 'desc'
      },
      labelCol: {
        span: 4
      },
      wrapperCol: {
        span: 14
      },
      columns: [
        { // 分类
          title: this.$t('businessSupport.questionAnswer.classify'),
          align: 'center',
          width: 180,
          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,
          scopedSlots: { customRender: 'titleSlot' }
        },
        { // 项目
          title: this.$t('project'),
          align: 'center',
          width: 180,
          dataIndex: 'project_dictText',
          scopedSlots: { customRender: 'text' }
        },
        { // 问题描述
          title: this.$t('businessSupport.questionAnswer.questionDesc'),
          align: 'center',
          width: 180,
          dataIndex: 'problemDescription',
          scopedSlots: { customRender: 'text' }
        },
        { // 提问时间
          title: this.$t('businessSupport.questionAnswer.quizTime'),
          align: 'center',
          width: 180,
          dataIndex: 'quizTime',
          scopedSlots: { customRender: 'text' }
        },
        {
          title: this.$t('operation'),
          scopedSlots: { customRender: 'action' },
          align: 'center',
          fixed: 'right',
          width: 200
        }
      ],
      url: {
        list: '/laws/library/lawsProblemLibrary/page',
        delete: '/laws/library/lawsProblemLibrary/deleteProblem'
      },
      userInfo: {}
    }
  },
  mounted () {
    this.userInfo = Vue.ls.get(USER_INFO)
  },
  methods: {
    // 提问
    handleQuiz () {
      this.$refs.quizModal.title = this.$t('businessSupport.questionAnswer.quiz')
      this.$refs.quizModal.open()
    },
    // 点击相关材料
    handleAttachClick (record) {
      // 截取文件后缀名
      const fileSuffix = record.declareFileName ? record.declareFileName.split('.')[record.declareFileName.split('.').length - 1] : ''
      const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/view/${record.declareFile}?token=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${record.declareFileName}`
      // 图片预览，使用自己添加的组件
      if (FILE_TYPE_IMGS.includes(fileSuffix)) {
        this.imageUrl = getFileAccessHttpUrl(record.declareFile)
        // 获取viewer实例
        const viewer = this.$el.querySelector('.image').$viewer
        // 调用show方法进行显示预览图
        viewer.show()
        // this.$refs.imagePreviewModal.open(file)
        return
      }
      // pdf预览
      if (FILE_TYPE_PDF.includes(fileSuffix)) {
        const url = previewPdf(record.declareFile)
        window.open(url)
        return
      }
      // word用KKfile预览
      if (fileSuffix === 'doc' || fileSuffix === 'docx') {
        kkFilePreview(fileFullUrl)
        return
      }
      // 如果都不能预览就下载
      downloadFile(`/sys/common/download/${record.declareFile}`, record.declareFileName)
    },
    // 查看
    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
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
@import '~@assets/less/common.less';
/deep/ .ant-form-item-label{
  min-width: 70px !important;
}
</style>