招生

src/views/recruit/newstucheckin/index.vue

@@ -0,0 +1,269 @@
+<!--
+  -    Copyright (c) 2018-2025, cyweb All rights reserved.
+  -
+  - Redistribution and use in source and binary forms, with or without
+  - modification, are permitted provided that the following conditions are met:
+  -
+  - Redistributions of source code must retain the above copyright notice,
+  - this list of conditions and the following disclaimer.
+  - Redistributions in binary form must reproduce the above copyright
+  - notice, this list of conditions and the following disclaimer in the
+  - documentation and/or other materials provided with the distribution.
+  - Neither the name of the pig4cloud.com developer nor the names of its
+  - contributors may be used to endorse or promote products derived from
+  - this software without specific prior written permission.
+  -
+  -->
+
+<template>
+  <div class="layout-padding">
+    <div class="layout-padding-auto layout-padding-view">
+      <!-- 搜索表单 -->
+      <el-form :model="queryForm" inline class="mb-4">
+        <el-form-item label="">
+          <el-input 
+            v-model="queryForm.searchTotal" 
+            style="width: 300px" 
+            clearable 
+            placeholder="请输入姓名/身份证号/家庭联系人"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="Search" @click="getDataList">查询</el-button>
+          <el-button type="primary" plain icon="Refresh" class="ml10" @click="resetQuery">重置</el-button>
+          <el-button 
+            v-if="permissions.recruit_newstucheckin_output"
+            type="warning"
+            plain
+            icon="Download"
+            class="ml10"
+            @click="handleExportOut"
+            :loading="exportLoading"
+          >
+            导出
+          </el-button>
+        </el-form-item>
+      </el-form>
+
+      <!-- 表格 -->
+      <el-table
+        ref="tableRef"
+        :data="state.dataList"
+        v-loading="state.loading"
+        border
+        stripe
+        :cell-style="tableStyle.cellStyle"
+        :header-cell-style="tableStyle.headerCellStyle"
+      >
+        <el-table-column type="index" label="序号" width="60" align="center" />
+        <el-table-column prop="xy" label="学院" align="center" show-overflow-tooltip />
+        <el-table-column prop="classCode" label="班级" align="center" width="80" show-overflow-tooltip />
+        <el-table-column prop="stuNo" label="学号" align="center" show-overflow-tooltip />
+        <el-table-column prop="name" label="姓名" align="center" width="80" show-overflow-tooltip />
+        <el-table-column prop="gender" label="性别" align="center" width="60">
+          <template #default="scope">
+            <span>{{ scope.row.gender === '1' ? '男' : scope.row.gender === '2' ? '女' : '' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="idNumber" label="身份证号" align="center" show-overflow-tooltip />
+        <el-table-column prop="checkInStatus" label="报到状态" align="center" show-overflow-tooltip>
+          <template #default="scope">
+            <el-tag v-if="scope.row.checkInStatus">
+              {{ getCheckInStatusLabel(scope.row.checkInStatus) }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="isDormApply" label="住宿申请" align="center" width="100">
+          <template #default="scope">
+            <el-tag v-if="scope.row.isDormApply == '1'" type="success">通过</el-tag>
+            <el-tag v-else-if="scope.row.isDormApply == '0'" type="info">未通过</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="isRoom" label="是否住宿" align="center" width="100">
+          <template #default="scope">
+            <span>{{ scope.row.isRoom === '1' ? '是' : scope.row.isRoom === '0' ? '否' : '' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="roomNo" label="宿舍号" align="center" width="80" show-overflow-tooltip />
+        <el-table-column prop="bedNo" label="床位号" align="center" width="80" show-overflow-tooltip />
+        <el-table-column prop="degreeOfEducation" label="文化程度" align="center" show-overflow-tooltip />
+        <el-table-column prop="residenceDetail" label="居住地址" align="center" show-overflow-tooltip />
+        <el-table-column prop="parentName" label="家庭联系人" align="center" show-overflow-tooltip />
+        <el-table-column prop="parentTelOne" label="家长电话1" align="center" show-overflow-tooltip />
+        <el-table-column prop="parentTelTwo" label="家长电话2" align="center" show-overflow-tooltip />
+        <el-table-column prop="remarks" label="备注" align="center" show-overflow-tooltip />
+        <el-table-column label="操作" width="100" align="center" fixed="right">
+          <template #default="scope">
+            <el-button
+              v-if="permissions.recruit_newstucheckin_edit"
+              type="primary"
+              link
+              icon="CircleCheck"
+              @click="handleCheckIn(scope.row)"
+            >
+              报到
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 分页 -->
+      <pagination
+        v-bind="state.pagination"
+        @current-change="currentChangeHandle"
+        @size-change="sizeChangeHandle"
+      />
+
+      <!-- 报到弹窗组件 -->
+      <stu-check-in ref="stuCheckInRef" @reload="refreshChange"></stu-check-in>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="newstucheckin">
+import { ref, reactive, computed, onMounted, defineAsyncComponent } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useUserInfo } from '/@/stores/userInfo'
+import { BasicTableProps, useTable } from '/@/hooks/table'
+import { useMessage, useMessageBox } from '/@/hooks/message'
+import { fetchList } from '/@/api/recruit/newstucheckin'
+import { getTypeValue } from '/@/api/admin/dict'
+import request from '/@/utils/request'
+
+const StuCheckIn = defineAsyncComponent(() => import('./stu-check-in.vue'))
+
+// 使用 Pinia store
+const userInfoStore = useUserInfo()
+const { userInfos } = storeToRefs(userInfoStore)
+
+// 创建权限对象
+const permissions = computed(() => {
+  const perms: Record<string, boolean> = {}
+  userInfos.value.authBtnList.forEach((perm: string) => {
+    perms[perm] = true
+  })
+  return perms
+})
+
+// 消息提示 hooks
+const message = useMessage()
+const messageBox = useMessageBox()
+
+// 表格引用
+const tableRef = ref()
+const stuCheckInRef = ref()
+
+// 导出加载状态
+const exportLoading = ref(false)
+
+// 查询表单
+const queryForm = reactive({
+  searchTotal: ''
+})
+
+// 报到状态字典数据
+const checkInStatusData = ref<any[]>([])
+
+// 表格状态
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: queryForm,
+  pageList: async (params: any) => {
+    const response = await fetchList({
+      ...params,
+      searchTotal: queryForm.searchTotal
+    })
+    return {
+      data: {
+        records: response.data.data.records,
+        total: response.data.data.total
+      }
+    }
+  }
+})
+
+// 使用 table hook
+const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state)
+
+// 获取报到状态标签
+const getCheckInStatusLabel = (value: string) => {
+  const item = checkInStatusData.value.find(item => item.value === value)
+  return item ? item.label : value
+}
+
+// 重置查询
+const resetQuery = () => {
+  queryForm.searchTotal = ''
+  getDataList()
+}
+
+// 刷新回调
+const refreshChange = () => {
+  getDataList()
+}
+
+// 打开报到窗口
+const handleCheckIn = (row: any) => {
+  if (stuCheckInRef.value) {
+    stuCheckInRef.value.init(row, {
+      currentPage: state.pagination?.current || 1,
+      pageSize: state.pagination?.size || 10,
+      total: state.pagination?.total || 0
+    })
+  }
+}
+
+// 导出
+const handleExportOut = async () => {
+  exportLoading.value = true
+  try {
+    const res = await request({
+      method: 'post',
+      url: '/recruit/newstucheckin/exportData',
+      data: {
+        ...queryForm,
+        current: state.pagination?.current || 1,
+        size: state.pagination?.size || 10
+      },
+      responseType: 'blob',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+    
+    const blob = new Blob([res.data])
+    const fileName = '新生报到导出表.xls'
+    const elink = document.createElement('a')
+    elink.download = fileName
+    elink.style.display = 'none'
+    elink.href = URL.createObjectURL(blob)
+    document.body.appendChild(elink)
+    elink.click()
+    URL.revokeObjectURL(elink.href)
+    document.body.removeChild(elink)
+    
+    message.success('导出成功')
+  } catch (error: any) {
+    message.error(error.msg || '导出失败')
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+// 查询报到状态字典
+const getCheckInStatusData = async () => {
+  try {
+    const data = await getTypeValue('check_in_status')
+    checkInStatusData.value = data.data || []
+  } catch (error) {
+    console.error('获取报到状态字典失败', error)
+  }
+}
+
+onMounted(() => {
+  getCheckInStatusData()
+  getDataList()
+})
+</script>
+
+<style lang="scss" scoped>
+</style>