cxyy-admin/src/views/information/parts/match/preliminary/index.vue

<template>
  <div class="main" v-loading="loading">
    <el-col :span="24" class="one">
      <div class="one_left" @click="toExport">导出</div>
    </el-col>
    <el-col :span="24" class="two">
      <el-table :data="list" style="width: 100%" size="large" :header-cell-style="{ backgroundColor: '#edf3ff' }" @selection-change="handleSelectionChange">
        <template #empty>
          <el-empty description="暂无数据" />
        </template>
        <el-table-column type="selection" :selectable="handleRowSelectable" width="55"> </el-table-column>
        <el-table-column prop="no" align="center" label="编号" width="100"> </el-table-column>
        <el-table-column prop="user_name" align="center" label="用户"> </el-table-column>
        <el-table-column prop="time" align="center" label="报名时间" />
        <el-table-column prop="status" align="center" label="状态" width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.status == '0'" type="primary">待审核</el-tag>
            <el-tag v-else-if="scope.row.status == '1'" type="success">已通过</el-tag>
            <el-tag v-else type="info">已退回</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="180">
          <template #default="{ row }">
            <el-link :underline="false" type="primary" size="mini" @click="toView(row, true)" style="margin-right: 10px">查看</el-link>
            <el-link v-if="row.status == '0'" :underline="false" type="warning" size="mini" @click="toView(row, false)" style="margin-right: 10px">报名审核</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="24" class="thr">
      <el-pagination background layout="prev, pager, next" :total="total" :page-size="limit" v-model:current-page="currentPage" @current-change="changePage" @size-change="sizeChange" />
    </el-col>
    <el-dialog v-model="dialog.show" :title="dialog.title" :destroy-on-close="false" @close="toClose">
      <el-descriptions title="" :column="1" border>
        <template #extra v-if="!is_look">
          <el-button type="primary" @click="toExam('1')">通过申请</el-button>
          <el-button type="danger" @click="toExam('2')">退回申请</el-button>
        </template>
        <el-descriptions-item v-for="(item, index) in info" :key="index" :label="item.problem">
          <div class="type" v-if="item.type == '0' || item.type == '2' || item.type == '3' || item.type == '4' || item.type == '5'">{{ item.reply || '暂无内容' }}</div>
          <div class="type" v-if="item.type == '1' && item.reply">{{ item.reply.join(',') }}</div>
          <div class="type" v-if="item.type == '6'">
            <div v-for="(as, img) in item.reply" :key="img">
              <el-link :href="getUrl(as)" target="_blank">{{ as.name }}</el-link>
            </div>
          </div>
          <div class="type" v-if="item.type == '7'">
            <div class="list">
              <div v-for="(aa, ina) in item.answer" :key="ina" class="name">{{ aa.text }}</div>
            </div>
            <div class="list" v-for="(gg, inx) in item.reply" :key="inx">
              <div v-for="(aa, ina) in item.answer" :key="ina" class="input">
                {{ gg[aa.text] }}
              </div>
            </div>
          </div>
          <div class="type" v-if="item.type == '8'">
            <div v-for="(as, img) in item.answer" :key="img">
              <el-link :href="getUrl(as)" target="_blank">{{ as.name }}</el-link>
            </div>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup>
import { get } from 'lodash-es'
const $checkRes = inject('$checkRes')
// 加载中
const loading = ref(false)
const id = ref('')
const props = defineProps({
  matchInfo: { type: Object }
})
const match = computed({
  get() {
    return props.matchInfo
  }
})
// 接口
import { MatchRegStore } from '@/store/api/platform/matchReg'
const store = MatchRegStore()
// 列表
const list = ref([])
let skip = 0
let limit = inject('limit')
const total = ref(0)
const currentPage = ref(1)

const info = ref([])

const form = ref({})
const dialog = ref({ type: '1', show: false, title: '报名信息' })

// 批量导出
const selectionList = ref([])
const is_look = ref(false)
const search = async (query = { skip, limit }) => {
  skip = query.skip
  limit = query.limit
  const info = {
    skip: query.skip,
    limit: query.limit,
    match_id: id.value
  }
  const res = await store.query(info)
  if (res.errcode == '0') {
    list.value = res.data
    total.value = res.total
  }
}
const handleSelectionChange = (val) => {
  selectionList.value = val
}
// 审核
const toView = (data, is_no) => {
  is_look.value = is_no
  form.value = data
  info.value = data.info
  dialog.value = { type: '1', show: true, title: '报名信息' }
}
// 图片处理
const getUrl = (e) => {
  if (e) return `${import.meta.env.VITE_APP_HOST}${get(e, 'uri')}`
}
// 审核
const toExam = (status) => {
  let title
  if (status == '1') title = '确定将该通过该申请的报名信息?'
  else title = '确定将退回该申请的报名信息?'
  ElMessageBox.confirm(title, '审核信息', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const data = form.value
      const res = await store.update({ id: data.id, status })
      if ($checkRes(res, true)) {
        toClose()
      }
    })
    .catch(() => {})
}
// 分页
const changePage = (page = currentPage.value) => {
  search({ skip: (page - 1) * limit, limit: limit })
}
const sizeChange = (limits) => {
  limit = limits
  currentPage.value = 1
  search({ skip: 0, limit: limit })
}
// 根据数据项中的canSelect字段判断是否可选
const handleRowSelectable = (row) => {
  return row.status == '0'
}
// 导出
const toExport = () => {
  if (selectionList.value && selectionList.value.length > 0) {
    console.log('导出')
  } else {
    ElMessage({
      message: '请选择要导出的数据！',
      type: 'warning'
    })
  }
}
const toClose = async () => {
  is_look.value = false
  form.value = {}
  dialog.value = { show: false }
  await search({ skip, limit })
}
watch(
  match,
  async (item) => {
    id.value = item.id
    loading.value = true
    await search({ skip, limit })
    loading.value = false
  },
  {
    immediate: true //初始化立即执行
  }
)
</script>
<style scoped lang="scss">
.main {
  .one {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 10px 0;
    .one_left {
      background: #1875df;
      padding: 0 10px;
      height: 30px;
      color: #fff;
      line-height: 30px;
      text-align: center;
      font-size: 16px;
      cursor: default;
    }
  }
  .thr {
    display: flex;
    justify-content: center;
    margin: 20px 0 0 0;
  }
  .type {
    .image {
      width: 100%;
    }
  }

  .list {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;

    .name {
      width: 50%;
      text-align: center;
    }

    .input {
      width: 50%;
      margin: 0 5px 0 0;
      border: 1px solid #e5e5e5;
      border-radius: 5px;
      text-align: center;

      .name {
        width: 50%;
        text-align: center;
        margin: 0 0 10px 0;
      }
    }
  }
  :deep(.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell) {
    text-align: center;
    width: 10px !important; /* 设置你想要的宽度 */
  }
}
</style>