ChuangHeng/src/components/reportList/index.vue

<template>
  <div class="rl_pre">
    <div class="rp_top adfacjb">
      <div class="rlp_l adfac">
        <div class="rlpl_l">
          <img src="@/assets/images/agent/report.png">
        </div>
        <div class="rlpl_r adfac">
          <div class="rr_pre rp1">
            <p class="text">{{ item.enterpriseName||'' }}</p>
            <p class="tip">{{ item.title||'' }}</p>
          </div>
          <div class="rr_pre rp2" v-if="!isTeam">
            <p class="text">{{ item.realName||'' }}</p>
            <p class="tip">姓名</p>
          </div>
          <div class="rr_pre rp2">
            <p class="text">{{ item.teamName||'' }}</p>
            <p class="tip">团队类型</p>
          </div>
          <div class="rr_pre rp3" v-if="isTeam">
            <p class="text">{{ item.endTime||'' }}</p>
            <p class="tip">截止日期</p>
          </div>
          <div class="rr_pre rp6" v-if="!isTeam">
            <p class="text">{{ item.endTime||'' }}</p>
            <p class="tip">截止日期</p>
          </div>
          <div class="rr_pre rp4" v-if="isTeam">
            <p class="text">{{ item.finishNum||0 }}</p>
            <p class="tip">作答人数</p>
          </div>
          <div class="rr_pre rp5" v-if="isTeam">
            <p class="text">{{ item.userNum||0 }}</p>
            <p class="tip">团队人数</p>
          </div>
        </div>
      </div>
      <div class="rlp_r">
        <el-button type="primary" @click.stop="toggleReport(item)">查看报告</el-button>
      </div>
    </div>
    <div class="rp_bottom" v-if="showMore">
      <el-table :data="reportList" border cell-class-name="vertical-top-cell" empty-text="暂无报告" max-height="578px">
        <el-table-column label="报告名称" prop="reportName" min-width="200"></el-table-column>
        <el-table-column label="创建时间" prop="createDate"></el-table-column>
        <el-table-column label="生成时间" prop="updateDate"></el-table-column>
        <el-table-column label="状态" prop="state" width="150">
          <template #default="{ row }">
            <div class="rp_status adfac">
              <div class="rps_l" :style="{'background':sColorCfg[row.state]||'#1D2129'}"></div>
              <div class="rps_r" :style="{'color':sColorCfg[row.state]||'#1D2129'}">{{ sTextCfg[row.state]||'未知' }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
            <template #default="scope">
                <el-button link type="text" size="mini" @click="handleReive(scope.row)" v-if="[1,2].includes(scope.row.state)">查看</el-button>
                <el-button link type="text" size="mini" @click="handledDelete(scope.row)" v-hasPermi="['core:report:delete']">删除</el-button>
                <el-button link type="text" size="mini" @click="handleSend(scope.row)" v-if="scope.row.state>0&&scope.row.fileUrl">发送报告</el-button>
                <el-button link type="text" size="mini" @click="handleCreate(scope.row)" v-if="scope.row.state=='-1'">重新生成</el-button>
                <el-button link type="text" size="mini" @click="handleExport(scope.row)" v-if="scope.row.state>0&&scope.row.fileUrl">导出报告</el-button>
            </template>
        </el-table-column>
    </el-table>
    </div>
    <template v-if="pdfShow">
      <report-pdf :reportId="reportId" :reportName="reportName" :reportData="reportData" :isTeam="isTeam" @cancel="pdfCancel" @refreshReportList="refreshReportList"></report-pdf>
    </template>
  </div>
</template>

<script setup name="ReportList">
  import reportPdf from '@/components/reportPdf/index.vue'
  const props = defineProps({
    item: {
      type: Object,
      default: () => {}
    },
    reportList: {
      type: Array,
      default: () => []
    },
    isTeam: {
      type: Boolean,
      default: true
    },
    showMore: {
      type: Boolean,
      default: false
    }
  })
  
  import { ref, getCurrentInstance, nextTick } from 'vue'
  const { proxy } = getCurrentInstance();
  import useCommonStore from "@/store_v3/modules/common";
  import { 
    getReportPdfData
  } from '@/api/agent/index.js'

  const sTextCfg = {
    1: '未发送',
    0: '生成中',
    2: '已发送',
    '-1': '生成失败'
  }
  const sColorCfg = {
    1: '#22C55D',
    0: '#FEA400',
    2: '#2E69EB',
    '-1': '#F31616'
  }
  const pdfShow = ref(false)
  const reportData = ref({})
  const reportParentId = ref('')
  const reportId = ref('')
  const item = ref(props.item)
  const isTeam = ref(props.isTeam)
  const reportName = ref('')

  const emit = defineEmits(['toggleReport','deleteReport','sendReport','reCreateReport','refreshReportList'])
  const toggleReport = (item) => {
    if(isTeam.value){
      useCommonStore().$state.relationId = item?.id;
    }else{
      useCommonStore().$state.userRealName = item?.realName;
      useCommonStore().$state.teamQuestionnaireId = item?.teamQuestionnaireId;
    }
    reportParentId.value = item?.id;
    emit('toggleReport', item)
  }

  const pdfCancel = () => {
    pdfShow.value = false;
    reportData.value = {};
    reportParentId.value = '';
    reportId.value = '';
    reportName.value = '';
  }
  const refreshReportList = (relationId) => {
    emit('refreshReportList', relationId)
  }

  const handleReive = (row) => {
    reportId.value = row.id;
    reportName.value = row.reportName;
    getReportPdfData(row.id).then(res => {
      if(res.code!==0) proxy.$message.error(res.msg);
      reportData.value = {...res.data,id:row.id,relationId:row.relationId};
      nextTick(() => {
        pdfShow.value = true;
      })
    })
  }
  const handledDelete = (row) => {
    emit('deleteReport', row.id)
  }

  const handleSend = (row) => {
    if(row.state==2){
      proxy.$modal.confirm('当前报告已发送，若继续发送会覆盖当前报告，是否继续发送？').then((res) => {
        if(res == 'confirm'){
          emit('sendReport', row.id)
        }
      })
    }else emit('sendReport', row.id)
  }
  const handleCreate = (row) => {
    emit('reCreateReport', row?.id)
  }
  const handleExport = (row) => {
    if(!row.fileUrl) return proxy.$message.error('PDF报告未生成，无法导出！');
    window.open(row.fileUrl)
  }
</script>

<style scoped lang="scss">
  .rl_pre{
    padding: 24px;
    background: #FFFFFF;
    border-radius: 6px;
    margin-top: 12px;
    cursor: pointer;

    .rp_top{
      .rlp_l{
        width: calc(100% - 112px);
        .rlpl_l{
          img{
            width: 23px;
            height: 22px;
          }
        }
        .rlpl_r{
          width: calc(100% - 23px);
          padding-left: 24px;
          box-sizing: border-box;
          .rr_pre{
            padding-right: 20px;
            box-sizing: border-box;
            .text{
              font-family: PingFang-SC, PingFang-SC;
              font-weight: bold;
              font-size: 14px;
              color: #252525;
              line-height: 16px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .tip{
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 14px;
              color: #86909C;
              line-height: 16px;
              margin-top: 10px;
            }
            &.rp1{
              flex: 1;
            }
            &.rp2{
              width: 140px;
            }
            &.rp3,&.rp4, &.rp5{
              width: 260px;
            }
            &.rp6{
              width: 540px;
            }
          }
        }
      }
    }

    .rp_bottom{
      border-top: 1px solid #E5E7EB;
      margin-top: 24px;
      padding-top: 19px;
    }

    .rp_status{
      .rps_l{
        width: 10px;
        height: 10px;
        border-radius: 50%;
      }
      .rps_r{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        margin-left: 10px;
      }
    }
  }
</style>