jingNing_H5_Mobile/src/pages/techerFlowManager/teacherPerformanceAssessment/detailMyApplyFor/index.vue

<script setup>
import { closeToast, showLoadingToast } from 'vant'
import { download2 } from '~/request/request'

const { currentRoute } = useRouter()
const route = currentRoute.value
const jjmk_id = route.query.jjmk_id
const detailData = ref({})

const jjtj = ref({})
const zbtj = ref({})
showLoadingToast({
  message: '加载中...',
  forbidClick: true,
})
request({
  url: '/jdbg/jsldgl_myjsjxkh_khhz/detail',
  data: {
    jjmk_id,
  },
}).then((res) => {
  closeToast()
  detailData.value = res.data.one_info

  if (detailData.value.jjmkl_jjmkl_id_1 == 1)
    jjtj.value = JSON.parse(res.data.one_info.jjmkl_jjtj_json)

  else if (detailData.value.jjmkl_jjmkl_id_1 == 10)

    zbtj.value = JSON.parse(res.data.one_info.jjmkl_zbdffj_json)
})
function getFile(url, fileName) {
  download2(url, null, fileName.split('.')[0])
}
</script>

<template>
  <div>
    <div class="tableContainer">
      <div class="topPart">
        <table class="Tb" width="100%" cellspacing="0" cellpadding="0">
          <tr>
            <td class="titleOpt">
              学校名称
            </td>
            <td>{{ detailData.jjmk_uo_name }}</td>
          </tr>
          <tr>
            <td class="titleOpt">
              姓名
            </td>
            <td>
              {{ detailData.jjmk_xm }}
            </td>
          </tr>
          <tr>
            <td class="titleOpt">
              考核类别
            </td>
            <td>{{ detailData.jjmkl_jjmkl_name_1 }}</td>
          </tr>
          <tr>
            <td class="titleOpt">
              名师类别
            </td>
            <td>{{ detailData.jjmkl_jjmkl_name_2 }}</td>
          </tr>
          <template v-if="detailData.jjmkl_jjmkl_id_1 == 1">
            <tr>
              <td class="titleOpt">
                教学类别
              </td>
              <td>
                <div class="specialTd">
                  {{ detailData.jjmkl_jjmkl_name_3 }}
                </div>
              </td>
            </tr>
            <tbody v-for="(item, index) in jjtj" :key="index" class="bg-hex-fffff9 border_bottom">
              <tr>
                <td class="titleOpt">
                  进阶条件
                </td>
                <td>
                  <div class="specialTd">
                    {{ item.cate1 }}
                  </div>
                </td>
              </tr>
              <tr>
                <td class="titleOpt">
                  内容
                </td>
                <td>
                  <div class="specialTd">
                    {{ item.desc }}
                  </div>
                </td>
              </tr>
              <tr>
                <td class="titleOpt">
                  附件
                </td>
                <td>
                  <span style="color: #1A7AFD;" @click="getFile(item.file.url, item.file.name)">{{ item.file.name
                  }}</span>
                </td>
              </tr>
            </tbody>
            <tr>
              <td class="titleOpt">
                申报表
              </td>
              <td>
                <div v-for="f in detailData.jjmkl_sqb_file.split(';')" :key="f">
                  <span style="color: #1A7AFD;" @click="getFile(f.split('|')[0], f.split('|')[1])">
                    {{ f.split('|')[1]
                    }}
                  </span>
                </div>
              </td>
            </tr>
            <tr>
              <td class="titleOpt">
                量化表
              </td>
              <td>
                <div v-for="f in detailData.jjmkl_lhb_file.split(';')" :key="f">
                  <span style="color: #1A7AFD;" @click="getFile(f.split('|')[0], f.split('|')[1])">
                    {{ f.split('|')[1]
                    }}
                  </span>
                </div>
              </td>
            </tr>
          </template>

          <template v-else-if="detailData.jjmkl_jjmkl_id_1 == 10">
            <tbody v-for="(item, index) in zbtj" :key="index" class="bg-hex-fffff9 border_bottom">
              <tr>
                <td class="titleOpt">
                  一级指标
                </td>
                <td>
                  <div class="specialTd">
                    {{ item.cate1 }}
                  </div>
                </td>
              </tr>
              <tr>
                <td class="titleOpt">
                  二级指标
                </td>
                <td>
                  <div class="specialTd">
                    {{ item.cate2 }}
                  </div>
                </td>
              </tr>
              <tr>
                <td class="titleOpt">
                  内容
                </td>
                <td>
                  <div class="specialTd">
                    {{ item.desc }}
                  </div>
                </td>
              </tr>
              <tr>
                <td class="titleOpt">
                  得分
                </td>
                <td>
                  <div class="specialTd">
                    {{ item.score }}
                  </div>
                </td>
              </tr>
              <tr>
                <td class="titleOpt">
                  附件
                </td>
                <td>
                  <span style="color: #1A7AFD;" @click="getFile(item.file.url, item.file.name)">
                    {{ item.file.name
                    }}
                  </span>
                </td>
              </tr>
            </tbody>
            <tr>
              <td class="titleOpt">
                总分
              </td>
              <td>
                <div class="specialTd">
                  {{ detailData.jjmkl_zbzf }}
                </div>
              </td>
            </tr>
          </template>
          <tr>
            <td class="titleOpt">
              校端审核情况
            </td>
            <td>
              <div>
                <span
                  :class="{ 'text-red': detailData.jjmkl_xdshqk_option_n === '不合格' || detailData.jjmkl_xdshqk_option_n === '不符合' }"
                >{{
                  detailData.jjmkl_xdshqk_option_n
                }}</span>
                <p v-if="detailData.jjmkl_xdshqk_option_n === '不合格' || detailData.jjmkl_xdshqk_option_n === '不符合'">
                  {{ detailData.jjmkl_xdshqk_clyj }}
                </p>
              </div>
            </td>
          </tr>
          <tr>
            <td class="titleOpt">
              局端审核情况
            </td>
            <td>
              <div>
                <span
                  :class="{ 'text-red': detailData.jjmkl_jdshqk_option_n === '不合格' || detailData.jjmkl_jdshqk_option_n === '不符合' }"
                >{{
                  detailData.jjmkl_jdshqk_option_n
                }}</span>
                <p v-if="detailData.jjmkl_jdshqk_option_n === '不合格' || detailData.jjmkl_jdshqk_option_n === '不符合'">
                  {{ detailData.jjmkl_jdshqk_clyj }}
                </p>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.border_bottom {
  border-bottom: 2px solid #666;
  border-top: 2px solid #666;
}

.text-red {
  color: red;
}

:deep(.specialTd table tbody tr td) {
  border: 1px #CCCCCC solid !important;
}
</style>