laws-sinotruk-client/src/views/enterpriseStandardLibrary/standard/detail/EnterpriseStandardDetail.vue

<template>
  <div class="detail-page">
    <div class="detail-page-title">{{ $t('enterpriseStandardLibrary.standard.detailTitle') }}</div>
    <div class="detail-page-part" v-for="(part, index) in partList" :key="part + index">
      <div class="detail-page-part-title">
        <span>{{ part }}</span>
        <div class="detail-page-part-title-operate-box" v-if="index === 0">
          <!--          企标评价-->
          <a-button type="link" @click="handleEvaluate">
            <i class="iconfont icon-edit-1" />
            {{ $t('enterpriseStandardLibrary.standard.evaluate') }}
          </a-button>
          <!--          更新记录-->
          <a-button type="link" @click="handleOpenUpdateRecord">
            <i class="iconfont icon-root-list" />
            {{ $t('enterpriseStandardLibrary.standard.updateRecord') }}
          </a-button>
          <!--          提交问题-->
          <a-button type="link" @click="submitQuestion">
            <i class="iconfont icon-chat" />
            {{ $t('enterpriseStandardLibrary.standard.submitQuestion') }}
          </a-button>
        </div>
      </div>
      <div class="detail-page-part-form" v-if="index !== 3">
        <div class="detail-page-part-form-item" v-for="formItem in form[part]" :key="formItem.id">
          <label>{{ formItem.dbFieldTxt }}</label>
          <span v-if="detailData[formItem.dbFieldName + '_dictText']">{{ detailData[formItem.dbFieldName + '_dictText'] }}</span>
          <span v-else-if="detailData[formItem.dbFieldName]">{{ detailData[formItem.dbFieldName] }}</span>
          <span v-else>—</span>
        </div>
      </div>
      <!--      过程稿件特殊处理-->
      <div class="detail-page-process-manuscript" v-if="index === 3">
        <div class="detail-page-process-manuscript-item" v-for="(formItem, formIndex) in form[part]" :key="formItem.id">
          <div class="detail-page-process-manuscript-title">
            <span>{{ formItem.dbFieldTxt }}</span>
            <a-button v-if="formIndex === 0" type="primary" ghost icon="file-text">{{ $t('enterpriseStandardLibrary.standard.standardResolutionSheet') }}</a-button>
          </div>
          <div class="detail-page-process-manuscript-file" v-for="file in detailData[formItem.dbFieldName]" :key="file.id">
            <div class="detail-page-process-manuscript-file-info">
              <a-icon type="link" />
              <div class="detail-page-process-manuscript-file-name">{{ file.fileName }}</div>
            </div>
            <div class="detail-page-process-manuscript-file-operate">
              <a-button type="link" icon="download">{{ $t('download') }}</a-button>
              <a-button type="link">
                <i class="iconfont icon-water-drop-slash"></i>
                {{ $t('unwatermarkedDownload') }}
              </a-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  稽查内容  -->
    <div class="detail-page-part">
      <div class="detail-page-part-title">
        <span>稽查内容</span>
      </div>
      <div class=“detail-page-part-table>
        <a-table
          :scroll="{x: 500}"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="false"
          bordered
          rowKey="id">

          <template slot="text" slot-scope="text">
            <a-tooltip overlay-class-name="tooltip-style">
              <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
              <div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
            </a-tooltip>
          </template>
        </a-table>
      </div>
    </div>
    <!--  企标评价  -->
    <enterprise-standard-evaluate-modal ref="enterpriseStandardEvaluateModal"></enterprise-standard-evaluate-modal>
    <!--  更新记录弹框  -->
    <update-record-modal ref="updateRecordModal"></update-record-modal>
    <!--  提交问题弹框  -->
    <submit-question-modal ref="submitQuestionModal"></submit-question-modal>
  </div>
</template>

<script>
import '@assets/less/common.less'
import { getEnterpriseStandardInfoById, getEnterpriseStandardAddForm } from '@/api/enterpriseStandardLibraryApi'
import UpdateRecordModal from '../../../standardRegulationLibrary/commonPage/modules/UpdateRecordModal'
import SubmitQuestionModal from '../../../standardRegulationLibrary/commonPage/modules/SubmitQuestionModal'
import EnterpriseStandardEvaluateModal from './module/EnterpriseStandardEvaluateModal'

export default {
  name: 'EnterpriseStandardDetail',
  components: { EnterpriseStandardEvaluateModal, SubmitQuestionModal, UpdateRecordModal },
  data () {
    return {
      partList: [], // 页面模块列表
      form: {}, // 页面字段
      detailData: {}, // 页面数据
      columns: [
        {
          title: this.$t('serialNumber'),
          dataIndex: '',
          key: 'rowIndex',
          width: 100,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: this.$t('enterpriseStandardLibrary.standard.subjectToClause'),
          align: 'center',
          width: 200,
          dataIndex: 'subjectToClause',
          scopedSlots: { customRender: 'text' }
        },
        {
          title: this.$t('enterpriseStandardLibrary.standard.standardContentOrRequirements'),
          align: 'center',
          dataIndex: 'standardContentOrRequirements',
          scopedSlots: { customRender: 'text' }
        }
      ], // 稽查内容表格列参数
      dataSource: [] // 稽查内容数据
    }
  },
  created () {
    this.initForm()
    this.initData()
  },
  methods: {
    initForm () {
      const params = {}
      params.type = 1
      getEnterpriseStandardAddForm(params).then(res => {
        if (res.success) {
          const data = res.result || {}
          this.partList = Object.keys(data)
          this.form = data
        } else {
          this.$message.warn(res.message)
        }
      })
    },
    initData () {
      const params = {}
      params.id = this.$route.query.id
      params.type = 1
      getEnterpriseStandardInfoById(params).then(res => {
        if (res.success) {
          this.detailData = res.result
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    // 企标评价
    handleEvaluate () {
      this.$refs.enterpriseStandardEvaluateModal.open(this.detailData.id)
    },
    // 更新记录
    handleOpenUpdateRecord () {
      this.$refs.updateRecordModal.open(this.detailData.standardNumber)
    },
    // 提交问题
    submitQuestion () {
      this.$refs.submitQuestionModal.open()
    }
  }
}
</script>

<style scoped lang="less">
.detail-page-part-table {
  margin: 20px;
}
</style>