hz_crm_web/src/views/custom_manage/etaTrialList/textQuestionDetail.vue

<template>
  <div class="text-quesiton-container" id="text-quesiton-container">
    <div class="text-quesiton-header">
      <div class="text-header-left">
        {{this.quesitonTitle}}<span style="white-space: nowrap;" >【填空题】</span>
      </div>
      <el-button type="primary" @click="toQuestionnaireSurvey" style="margin-left: 30px;">返回统计</el-button>
    </div>
    <div class="survey-detail-zone">
      <el-table :data="detailData" border>
        <el-table-column label="序号" prop="index" width="60">
          <template slot-scope="{$index}">
            {{ (detailDataSearchP.CurrentIndex-1)*detailDataSearchP.PageSize+1+$index }}
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="UserName" width="85">
          <template slot-scope="{row}">
            {{ row.UserName }}
          </template>
        </el-table-column>        
        <el-table-column label="文本内容" prop="Options">
          <template slot-scope="{row}">
            {{ row.Options }}
          </template>
        </el-table-column>
        <div slot="empty" class="table-noData">
          <img src="~@/assets/img/cus_m/nodata.png">
          <span>暂无数据</span>
        </div>
      </el-table>
      <!-- 页数选择器 -->
      <m-page
        :page_no="detailDataSearchP.CurrentIndex"
        :pageSize="detailDataSearchP.PageSize"
        :total="total"
        style="position: absolute;right: 60px;bottom: 50px;"
        @handleCurrentChange="pageChange"
      />
    </div> 
  </div>
</template>

<script>
import mPage from '@/components/mPage.vue';
import{etaTrialInterence}from '@/api/modules/crmApi.js';

  export default {
    name:'textQuestionDetail',
    components:{
      mPage
    },
    data() {
      return {
        detailData:[],
        quesitonTitle:'加载中······',
        detailDataSearchP:{
          CurrentIndex:1,
          PageSize:10,
          QuestionnaireId:0,
        },
        total:0,
      }
    },
    methods:{
      getDetailList(){
        etaTrialInterence.getTextDetailList(this.detailDataSearchP).then(res=>{
          if(res.Ret == 200){
            this.detailData = res.Data.List || []
            this.total = res.Data.Paging.Totals || 0
          }
        })
      },
      toQuestionnaireSurvey(){
        // this.$router.push('/questionnaireSurvey')
        this.$router.back()
      },
      pageChange(page_no){
        this.detailDataSearchP.CurrentIndex = page_no
        this.getDetailList()
      }
    },
    created(){
      this.quesitonTitle = this.$route.query.question
      this.detailDataSearchP.QuestionnaireId = +this.$route.query.quesionId || 0
      this.getDetailList()
    }
  }
</script>

<style lang="scss" scoped>
  .text-quesiton-container{
    // height: auto;
    // min-height: 100%;
    .text-quesiton-header{
      background-color: white;
      padding: 20px 30px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      // flex-wrap: wrap;
      border: 1px solid #DCDFE6;
      border-radius: 4px;
      margin-bottom: 20px;
      .text-header-left{
        display: flex;
        align-items: center;
        color: #333333;
        font-size: 14px;
        span{
          color: #999999;
        }
      }
    }
    // 详细数据
    .survey-detail-zone{
      background-color: white;
      min-height: calc(100vh - 212px);
      box-sizing: border-box;
      padding: 30px 30px 80px;
      .table-noData{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 18vh 0;
        img{
          height: 110px;
          width: 136px;
        }
        span{
          font-weight: 400;
          font-size: 16px;
          color: #999999;
        }
      }
    }
  }
</style>