foton-laws-system-front/src/pages/details/complianceDetails/index.vue

<!--符合性详情-->
<template>
  <div id="complianceDetails">
    <el-divider content-position="left" v-if="unfit.length < 1 && fit.length < 1"  >暂无评估结果</el-divider>
    <!-- 不满足-->
    <el-divider content-position="left" v-if="unfit.length"  >不满足</el-divider>
    <div class="content">
      <el-table
        height="100%"
        ref="selection"
        v-if="unfit.length"
        :data="unfit"
        tooltip-effect="dark"
        border
        style="width: 100%; min-height: 300px; margin-bottom: 30px;"
        :header-cell-style="{background: '#e8e8e8', color: '#333333', fontSize: '16px',
        fontWeight: 'bold', height: '48px'}">
        <el-table-column
          prop="standNumber"
          label="标准号/条款号"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="researchNonCompliance"
          label="不合规项目"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="researchCountermeasures"
          label="应对措施"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="researchImplementationTime"
          label="完成时间"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.researchImplementationTime ? $moment(scope.row.researchImplementationTime).format('YYYY-MM-DD') : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="evaluationPeople"
          label="评估人"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="evaluationTime"
          label="评估时间"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.evaluationTime ? $moment(scope.row.evaluationTime).format('YYYY-MM-DD') : '' }}</span>
          </template>
        </el-table-column>
      </el-table>
<!--      <pagination :page="page" :total="total" @pageChange="pageChange"-->
<!--                  @pageSizeChange="pageSizeChange"></pagination>-->
    </div>

    <!--满足-->
    <el-divider content-position="left" v-if="fit.length">满足</el-divider>
     <div class="content">
       <el-table
         height="100%"
         ref="selection"
         v-if="fit.length"
         :data="fit"
         tooltip-effect="dark"
         border
         style="width: 100%; min-height: 300px; margin-bottom: 30px;"
         :header-cell-style="{background: '#e8e8e8', color: '#333333', fontSize: '16px',
        fontWeight: 'bold', height: '48px'}">
         <el-table-column
           prop="standNumber"
           label="标准号/条款号"
           align="center"
         >
         </el-table-column>
         <el-table-column
           prop="researchCompliance"
           label="合规"
           align="center"
         >
         </el-table-column>
         <el-table-column
           prop="evaluationPeople"
           label="评估人"
           align="center"
         >
         </el-table-column>
         <el-table-column
           prop="evaluationTime"
           label="评估时间"
           align="center"
         >
           <template slot-scope="scope">
             <span>{{ scope.row.evaluationTime ? $moment(scope.row.evaluationTime).format('YYYY-MM-DD') : '' }}</span>
           </template>
         </el-table-column>
       </el-table>
     </div>
<!--    <pagination :page="page" :total="total" @pageChange="pageChange"-->
<!--                @pageSizeChange="pageSizeChange"></pagination>-->
    <loading :loading="loading">加载中...</loading>
  </div>
</template>
<script>
export default {
  name: 'ComplianceDetails',
  data () {
    return {
      loading: false,
      fit: [], // 满足
      unfit: [], // 不满足
      page: 1,
      pageSize: this.$store.getters.userInfo.configContent,
      total: 0,
    }
  },
  methods: {
    pageSizeChange(pageSize){
      this.pageSize = pageSize
    },
    pageChange(page){
      this.page = page
    },
    // 查询数据
    getAllList () {
        this.$http.get('sarStandardComplianceAssessResult/productNewDetail', {
          productId: this.$route.query.productId,
          standId: this.$route.query.standId,
        }, {
          _this: this,
          loading: 'loading'
        }, res => {
          if (res.ok) {
            this.fit = res.data.fit.records
            this.unfit = res.data.unfit.records
          } else {
            this.$message.warning(res.message)
          }
        })
    },
    /**
     * @Description: 跳转流程
     */
    processCenterClick (item) {
      let routeUrl = this.$router.resolve({
        name: 'ProcessDetail',
        query: {
          prcNum: item.prcNum
        }
      })
      window.open(routeUrl.href, '_blank')
    }
  },
  mounted () {
    this.getAllList()
  }
}
</script>
<style lang="less" scoped>
#complianceDetails{
  padding: 15px 30px 0;
  //width: 1200px;
  //margin: 0 auto;
  height: 100%;
  .content{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(~'50% - 30px');
    overflow: auto;
  }
}
</style>