laws_weilai/jero-web/src/views/businessSupport/technologyAssessment/components/evaluationResultsWhole.vue

<template>
  <div class="doc-detail">
    <div class="doc-detail-wrap">
      <div class="doc-detail-header" style="position: fixed;top: 0">
        <div class="doc-detail-title">
          <!--          <span style="line-height: 66px;display: inline-block;float: left">-->
          <!--            <a-icon type="home" style="margin-right: 6px;"/>-->
          <!--          </span>-->
          {{$route.query.serialNumber +' '+$t('regulatoryTechnicalEvaluationResults')}}
        </div>
      </div>
      <div style="padding-top: 68px;background: #fff">
        <div class="detail-content">
          <div class="content-box">
            <div class="header-text">
              {{$t('processBackground')}}
              <a-button class="box-button-top" type="primary" @click="CurrentStandard">
                {{$t('initiateProcessForCurrentStandard')}}
              </a-button>
            </div>
            <div class="processBackground-text">
              {{$route.query.processBackground}}
            </div>
            <!--            <div class="header-text">-->
            <!--              {{$t('engineerFeedbackResults')}}-->
            <!--            </div>-->
            <a-card :bordered="false" class="box-clause" style="margin-top: 20px" v-for="(item,index) in dataSource">
              <div class="table-operator">
                <div class="operator-text" style="float: left;font-size: 16px">
                  {{$t('engineer')+item.createBy+$t('feedbackResults')}}
                </div>
                <div @click="fileExportClick" v-if="index == 0" class="operator-text">
                  <a-icon type="export" :rotate="-90"/>
                  {{$t('fileExport')}}
                </div>
              </div>
              <div>
                <a-table
                  ref="table"
                  size="middle"
                  :loading="loading"
                  :pagination="false"
                  :scroll="{x: '100%',y:350}"
                  :data-source="item.lawsTechnologyEvaluationResultEOList"
                  :columns="columns"
                >
                   <span slot="accessoryFile" slot-scope="text,result">
                      <a v-if="text" @click="accessoryFileClick(text)">
                          {{ $t('viewFile') }}
                       </a>
                    <span v-else>--</span>
                     </span>
                </a-table>
              </div>
              <div class="text-results">
                {{$t('complianceResults')}}：{{item.complianceResultName}}
              </div>
            </a-card>
          </div>
        </div>
      </div>
    </div>
    <viewFileModel ref="viewFileModelRef"/>
  </div>
</template>

<script>
  import PersonnelSelection from '@/components/PersonnelSelection/index'
  import { getAction, postAction, downloadFile } from '@/api/manage'
  import viewFileModel from '@/components/viewFileModel/index'

  export default {
    name: 'evaluationResultsWhole',
    components: {
      PersonnelSelection,
      viewFileModel
    },
    data() {
      return {
        queryParam: {},
        dataSource: [],
        url: {
          list: '/lawsTechnologyEvaluation/lawsTechnologyEvaluationComplianceResultEO/list',
          exportData: 'lawsTechnologyEvaluation/lawsTechnologyEvaluationComplianceResultEO/exportZip'
        },
        selectedRowKeys: [],
        loading: false,

        columns: [
          {
            title: this.$t('relevantSections'),
            dataIndex: 'relatedSection',
            align: 'center',
            ellipsis: true
          },
          {
            title: this.$t('problemDescription'),
            dataIndex: 'issueOrSuggest',
            align: 'center',
            ellipsis: true
          },
          {
            title: this.$t('enclosure'),
            dataIndex: 'accessoryFile',
            align: 'center',
            ellipsis: true,
            scopedSlots: { customRender: 'accessoryFile' }
          }
        ]
      }
    },
    mounted() {
      document.title = this.$route.query.serialNumber +' '+this.$t('regulatoryTechnicalEvaluationResults')
      this.getList()
    },
    methods: {
      CurrentStandard() {
        let query = {
          firstInitiation: '2',
          whetherTobring: '2',
          processBackground:this.$route.query.processBackground || '',
          remark:this.$route.query.remark || '',
          standId:this.$route.query.standId,
          lawsTechnologyEvaluationId:this.$route.query.lawsTechnologyEvaluationId
        }
        let newUrl = this.$router.resolve({
          path: '/evaluationInitiationProcess',
          query: query
        })
        window.open(newUrl.href, '_blank')
      },
      onSelectChange(value) {

      },
      fileExportClick() {
        let query = {
          lawsTechnologyEvaluationId: this.$route.query.id
        }
        downloadFile(this.url.exportData, this.$route.query.serialNumber + ' ' + this.$t('regulatoryTechnicalEvaluationResults') + '.zip', query)
      },
      getList() {
        let query = {
          lawsTechnologyEvaluationId: this.$route.query.id
        }
        this.loading = true
        getAction(this.url.list, query).then((res) => {
          if (res.success) {
            this.dataSource = res.result || []
            this.loading = false
          } else {
            this.dataSource = []
            this.loading = false
          }
        })
      },
      accessoryFileClick(item) {
        this.$refs.viewFileModelRef.clickButtonToUpload(item)
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '~@assets/less/common.less';

  .doc-detail {
    background: #fff;
    height: 100%;

    .doc-detail-wrap {
      .doc-detail-header {
        width: 100%;
        height: 68px;
        z-index: 1000;
        line-height: 68px;
        padding: 0 0 0 32px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        border-bottom: 2px #eff1f3 solid;
        background: #fff;

        .doc-detail-title {
          display: inline-block;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          font-size: 20px;
          font-weight: 400;
          color: #040B29;
          line-height: 68px;
        }

        .doc-detail-right {
          width: 800px;
          line-height: 68px;
          display: flex;

          .doc-detail-btn {
            margin-left: 10px;
          }
        }
      }

      .content-box {
        padding: 0 32px;
        box-sizing: border-box;
      }

      .header-text {
        font-size: 16px;
        font-weight: 400;
        height: 80px;
        color: #000F16;
        line-height: 80px;
      }

      .processBackground-text {
        font-size: 16px;
        color: #000F16;
      }
    }
  }

  .box-button-top {
    float: right;
    margin-top: 28px;
    height: 38px;
  }

  .page {
    text-align: right;
    margin-top: 20px;
  }

  .box-title-text {
    line-height: 1.4;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .title-text {
    width: 70px;
    color: #000F16;
    display: inline-block;
    font-weight: 500;
    font-size: 14px;
    margin-right: 16px;
    margin-top: 3px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .box-input {
    display: inline-block;
    width: 70%;
    height: 38px;
    margin-top: 2px;
  }

  .box-button {
    height: 38px;
    /*margin-top: 2px;*/
  }

  .text-operation {
    margin-right: 8px;
  }

  .itemModel {
    width: calc(100% - 130px);
    display: inline-block;
    margin-top: 2px;
  }

  .text-results {
    font-size: 14px;
    margin-top: 10px;
  }
</style>
<style>
  .box-clause .ant-card-body {
    padding: 0;
  }
</style>