普通招生

src/views/recruit/recruitstudentsignup/indexClass.vue

@@ -1,9 +1,17 @@
 <template>
-  <div class="mod-config">
-    <basic-container>
-      <el-form :inline="true" :model="dataForm" @keyup.enter="getDataList()"  ref="searchFormRef">
+  <div class="layout-padding">
+    <div class="layout-padding-auto layout-padding-view">
+      <!-- 搜索表单 -->
+      <search-form 
+        v-show="showSearch" 
+        :model="dataForm" 
+        ref="searchFormRef"
+        @keyup-enter="handleFilter"
+      >
+        <template #default="{ visible }">
+          <template v-if="visible">
         <el-form-item label="招生计划" prop="groupId">
-          <el-select v-model="dataForm.groupId" filterable clearable placeholder="请选择招生计划" size="small" @change="chanMajor" style="width: 150px;">
+          <el-select v-model="dataForm.groupId" filterable clearable placeholder="请选择招生计划" @change="chanMajor">
             <el-option
               v-for="item in planList"
               :key="item.id"
@@ -13,7 +21,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="学院" prop="xy">
-          <el-select v-model="dataForm.xy" filterable clearable placeholder="请选择学院"  size="small" style="width: 130px;">
+          <el-select v-model="dataForm.xy" filterable clearable placeholder="请选择学院">
             <el-option
               v-for="item in deptList"
               :key="item.deptCode"
@@ -22,16 +30,40 @@
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="报名时段" prop="startDate" >
-          <el-date-picker v-model="dataForm.startDate"  format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable size="small"
-                          :disabled-date="startDateDisabled"  type="date" style="width: 200px;" ></el-date-picker>
-          -
-          <el-date-picker v-model="dataForm.endDate"  format="YYYY-MM-DD" value-format="YYYY-MM-DD" clearable size="small"
-                          :disabled-date="endDateDisabled"   type="date" style="width: 200px;" ></el-date-picker>
+        <el-form-item label="报名时段" prop="startDate">
+          <el-date-picker 
+            v-model="dataForm.startDate" 
+            format="YYYY-MM-DD" 
+            value-format="YYYY-MM-DD" 
+            clearable
+            :disabled-date="startDateDisabled" 
+            type="date"
+          />
+          <span style="margin: 0 8px;">-</span>
+          <el-date-picker 
+            v-model="dataForm.endDate" 
+            format="YYYY-MM-DD" 
+            value-format="YYYY-MM-DD" 
+            clearable
+            :disabled-date="endDateDisabled" 
+            type="date"
+          />
         </el-form-item>
-
+        <el-form-item label="班级" prop="classNo">
+          <el-select filterable clearable v-model="dataForm.classCode" placeholder="请选择班级">
+            <el-option
+              v-for="item in classList"
+              :key="item.classCode"
+              :label="item.classNo"
+              :value="item.classCode">
+            </el-option>
+          </el-select>
+        </el-form-item>
+          </template>
+          <!-- 可折叠的高级筛选条件 -->
+          <template v-if="!visible">
         <el-form-item label="录取专业" prop="confirmedMajor">
-          <el-select v-model="dataForm.confirmedMajor" filterable clearable placeholder="请选择录取专业"  size="small" >
+          <el-select v-model="dataForm.confirmedMajor" filterable clearable placeholder="请选择录取专业">
             <el-option
               v-for="item in planMajorList"
               :key="item.majorCode"
@@ -42,7 +74,7 @@
         </el-form-item>
 
         <el-form-item label="拟报专业" prop="wishMajorOne">
-          <el-select v-model="dataForm.wishMajorOne" filterable clearable placeholder="请选择录取专业"  size="small" >
+          <el-select v-model="dataForm.wishMajorOne" filterable clearable placeholder="请选择录取专业">
             <el-option
               v-for="item in planMajorList"
               :key="item.majorCode"
@@ -52,10 +84,10 @@
           </el-select>
         </el-form-item>
         <el-form-item label="唯一号/姓名/身份证号/学校名称" prop="search">
-          <el-input v-model="dataForm.search" clearable placeholder="唯一号/姓名/身份证号/学校名称" size="small"></el-input>
+          <el-input v-model="dataForm.search" clearable placeholder="唯一号/姓名/身份证号/学校名称"></el-input>
         </el-form-item>
         <el-form-item label="文化程度" prop="degreeOfEducation">
-          <el-select v-model="dataForm.degreeOfEducation" filterable clearable placeholder="请选择文化程度"  size="small" style="width: 120px;">
+          <el-select v-model="dataForm.degreeOfEducation" filterable clearable placeholder="请选择文化程度">
             <el-option
               v-for="item in eduList"
               :key="item.value"
@@ -65,9 +97,9 @@
           </el-select>
         </el-form-item>
         <el-form-item label="是否住宿" prop="isAccommodation">
-          <el-select v-model="dataForm.isAccommodation" filterable clearable placeholder="请选择是否住宿"  size="small" style="width: 120px;" >
+          <el-select v-model="dataForm.isAccommodation" filterable clearable placeholder="请选择是否住宿">
             <el-option
-              v-for="item in yesNoList"
+              v-for="item in yes_no_type"
               :key="item.value"
               :label="item.label"
               :value="item.value">
@@ -75,9 +107,9 @@
           </el-select>
         </el-form-item>
         <el-form-item label="是否低保" prop="isMinimumLivingSecurity">
-          <el-select v-model="dataForm.isMinimumLivingSecurity" filterable clearable placeholder="请选择是否低保"  size="small" style="width: 120px;" >
+          <el-select v-model="dataForm.isMinimumLivingSecurity" filterable clearable placeholder="请选择是否低保">
             <el-option
-              v-for="item in yesNoList"
+              v-for="item in yes_no_type"
               :key="item.value"
               :label="item.label"
               :value="item.value">
@@ -85,7 +117,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="经办人" prop="auditor">
-          <el-select v-model="dataForm.auditor" filterable clearable placeholder="请选择经办人"  size="small" style="width: 120px;">
+          <el-select v-model="dataForm.auditor" filterable clearable placeholder="请选择经办人">
             <el-option
               v-for="item in auditorList"
               :key="item.username"
@@ -95,7 +127,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="缴费状态" prop="paystatus">
-          <el-select v-model="dataForm.paystatus" filterable clearable placeholder="请选择缴费状态"  size="small" style="width: 120px;" >
+          <el-select v-model="dataForm.paystatus" filterable clearable placeholder="请选择缴费状态">
             <el-option
               v-for="item in paystatusList"
               :key="item.value"
@@ -105,9 +137,9 @@
           </el-select>
         </el-form-item>
         <el-form-item label="新市民材料已上传" prop="isNewCity">
-          <el-select v-model="dataForm.isNewCity" filterable clearable placeholder="请选择新市民材料已上传"  size="small" style="width: 120px;" >
+          <el-select v-model="dataForm.isNewCity" filterable clearable placeholder="请选择新市民材料已上传">
             <el-option
-              v-for="item in yesNoList"
+              v-for="item in yes_no_type"
               :key="item.value"
               :label="item.label"
               :value="item.value">
@@ -115,9 +147,9 @@
           </el-select>
         </el-form-item>
         <el-form-item label="毕业证已上传" prop="graPic">
-          <el-select v-model="dataForm.graPic" filterable clearable placeholder="请选择毕业证已上传"  size="small" style="width: 120px;">
+          <el-select v-model="dataForm.graPic" filterable clearable placeholder="请选择毕业证已上传">
             <el-option
-              v-for="item in yesNoList"
+              v-for="item in yes_no_type"
               :key="item.value"
               :label="item.label"
               :value="item.value">
@@ -125,7 +157,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="推送状态" prop="pushed">
-          <el-select v-model="dataForm.pushed" filterable clearable placeholder="请选择推送状态"  size="small" style="width: 120px;" >
+          <el-select v-model="dataForm.pushed" filterable clearable placeholder="请选择推送状态">
             <el-option
               v-for="item in pushedList"
               :key="item.value"
@@ -136,7 +168,7 @@
         </el-form-item>
 
         <el-form-item label="来源" prop="isOut">
-          <el-select v-model="dataForm.isOut" filterable clearable placeholder="请选择来源"  size="small" style="width: 120px;" >
+          <el-select v-model="dataForm.isOut" filterable clearable placeholder="请选择来源">
             <el-option
               v-for="item in isOutList"
               :key="item.value"
@@ -146,7 +178,7 @@
           </el-select>
         </el-form-item>
         <el-form-item label="是否打印" prop="isBackTz">
-          <el-select v-model="dataForm.isBackTz" filterable clearable placeholder="请选择是否打印"  size="small" style="width: 120px;" >
+          <el-select v-model="dataForm.isBackTz" filterable clearable placeholder="请选择是否打印">
             <el-option
               v-for="item in isBackTzList"
               :key="item.value"
@@ -157,60 +189,72 @@
         </el-form-item>
 
         <el-form-item label="是否同步学工" prop="isTb">
-          <el-select v-model="dataForm.isTb" filterable clearable placeholder="请选择是否同步学工"  size="small" style="width: 120px;" >
+          <el-select v-model="dataForm.isTb" filterable clearable placeholder="请选择是否同步学工">
             <el-option
-              v-for="item in yesNoList"
+              v-for="item in yes_no_type"
               :key="item.value"
               :label="item.label"
               :value="item.value">
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="班级" prop="classNo">
-          <el-select filterable clearable v-model="dataForm.classCode" size="small" placeholder="请选择班级" >
-            <el-option
-              v-for="item in classList"
-              :key="item.classCode"
-              :label="item.classNo"
-              :value="item.classCode">
-            </el-option>
-          </el-select>
-        </el-form-item>
+          </template>
+        </template>
+
+        <!-- 操作按钮 -->
+        <template #actions>
         <el-form-item>
-          <el-button  :icon="Search" type="primary" size="small"
-                      @click="handleFilter()">查询
+            <el-button type="primary" @click="handleFilter" icon="Search">查询</el-button>
+            <el-button @click="resetForm('searchForm')" icon="Refresh" class="ml10">重置</el-button>
+          </el-form-item>
+        </template>
+      </search-form>
+
+      <!-- 操作按钮 -->
+      <el-row>
+        <div class="mb15" style="width: 100%;">
+          <el-button 
+            type="warning"
+            plain
+            icon="Download"
+            @click="handleExport()">分班导出
           </el-button>
-          <el-button :icon="Delete" type="default" plain size="small"
-                     @click="resetForm('searchFormRef')">清空
+          <el-button 
+            v-if="permissions.recruit_banding"
+            class="ml10"
+            type="danger"
+            plain
+            icon="Promotion"
+            @click="oneClassHandle()">一键分班
           </el-button>
+          <el-button 
+            v-if="permissions.recruit_banding"
+            class="ml10"
+            type="danger"
+            plain
+            icon="Promotion"
+            @click="oneStuNoHandle()">一键分学号
+          </el-button>
+          <el-button 
+            v-if="permissions.recruit_synchronous_stuwork"
+            class="ml10"
+            type="primary"
+            plain
+            icon="Connection"
+            @click="tbStuWorkHandle()">同步学工
+          </el-button>
+        </div>
+      </el-row>
 
-          <el-button type="warning"
-                     :icon="Download"
-                     size="small"
-                     @click="handleExport()">分班导出</el-button>
-        <el-button type="danger"
-                   v-if="permissions.recruit_banding"
-                   size="small"
-                   @click="oneClassHandle()">一键分班</el-button>
-          <el-button type="danger"
-                     v-if="permissions.recruit_banding"
-                     size="small"
-                     @click="oneStuNoHandle()">一键分学号</el-button>
-        <el-button type="success"
-                   v-if="permissions.recruit_synchronous_stuwork"
-                   size="small"
-                   @click="tbStuWorkHandle()">同步学工</el-button>
-        </el-form-item>
-
-      </el-form>
-
-
-      <div class="avue-crud">
-        <el-table
-          :data="dataList"
-          border
-          stripe
-          v-loading="dataListLoading">
+      <!-- 表格 -->
+      <el-table
+        ref="tableRef"
+        :data="state.dataList"
+        border
+        stripe
+        v-loading="state.loading"
+        :cell-style="tableStyle.cellStyle"
+        :header-cell-style="tableStyle.headerCellStyle">
 
           <el-table-column
             prop="serialNumber"
@@ -228,15 +272,17 @@
             prop="gender"
             header-align="center"
             align="center"
+            width="90"
             label="性别">
             <template #default="scope">
-              {{getGender(scope.row.gender)}}
+              <GenderTag :sex="scope.row.gender" />
             </template>
           </el-table-column>
           <el-table-column
             prop="idNumber"
             header-align="center"
             align="center"
+            min-width="180"
             label="身份证号">
           </el-table-column>
           <el-table-column
@@ -275,10 +321,11 @@
             prop="isTb"
             header-align="center"
             align="center"
+            width="100"
             label="是否同步">
             <template #default="scope">
-              <span v-if="scope.row.isTb=='0'" style="color: red">否</span>
-              <span v-if="scope.row.isTb=='1'" style="color: green">是</span>
+              <el-tag v-if="scope.row.isTb=='1'" type="success">是</el-tag>
+              <el-tag v-else-if="scope.row.isTb=='0'" type="danger">否</el-tag>
             </template>
           </el-table-column>
 
@@ -287,25 +334,28 @@
             align="center"
             label="操作">
             <template #default="scope">
-              <el-button type="primary" link size="small"  @click="addOrUpdateHandle(scope.row.id,0)"  :icon="ZoomIn" plain>查看</el-button>
-              <el-button type="primary" link size="small"  @click="changeclass(scope.row)"  v-if="permissions.recruit_banding && scope.row.isTb=='0' && scope.row.classNo !=null" :icon="Edit" plain>调整班级</el-button>
+              <el-button type="primary" link icon="Document" size="small" @click="addOrUpdateHandle(scope.row.id,0)">
+                查看
+              </el-button>
+              <el-button 
+                v-if="permissions.recruit_banding && scope.row.isTb=='0' && scope.row.classNo !=null"
+                type="primary" 
+                link 
+                size="small" 
+                @click="changeclass(scope.row)">
+                <el-icon><Edit /></el-icon>
+                调整班级
+              </el-button>
             </template>
           </el-table-column>
-        </el-table>
-      </div>
+      </el-table>
 
-      <div class="avue-crud__pagination">
-        <el-pagination
-          @size-change="sizeChangeHandle"
-          @current-change="currentChangeHandle"
-          :current-page="pageIndex"
-          :page-sizes="[10, 20, 50, 100]"
-          :page-size="pageSize"
-          :total="totalPage"
-          background
-          layout="total, sizes, prev, pager, next, jumper">
-        </el-pagination>
-      </div>
+      <!-- 分页 -->
+      <pagination
+        v-bind="state.pagination"
+        @current-change="currentChangeHandle"
+        @size-change="sizeChangeHandle"
+      />
       <!-- 弹窗, 新增 / 修改 -->
       <TableForm v-if="addOrUpdateVisible" ref="addOrUpdateRef" @refreshDataList="getDataList" ></TableForm>
 
@@ -321,7 +371,10 @@
             <el-table-column label="家长手机号" prop="parentTelOne" align="center"></el-table-column>
             <el-table-column label="操作" prop="" align="center">
               <template #default>
-                <el-button @click="updateFS()" :icon="Search" type="danger" size="small">立即查询</el-button>
+                <el-button @click="updateFS()" type="danger" size="small">
+                  <el-icon><Search /></el-icon>
+                  立即查询
+                </el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -414,21 +467,21 @@
       </el-dialog>
       <DormFW v-if="dormFWRefVisible" ref="dormFWRef"></DormFW>
       <ShowMap v-if="baiduMapVisible" ref="baiduMapRef"></ShowMap>
-    </basic-container>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, nextTick, onMounted } from 'vue'
-import { defineAsyncComponent } from 'vue'
-import { Search, Delete, Download, ZoomIn, Edit } from '@element-plus/icons-vue'
+import { ref, reactive, computed, nextTick, onMounted, defineAsyncComponent } from 'vue'
+import { Search, ZoomIn, Edit } from '@element-plus/icons-vue'
 import { ElNotification } from 'element-plus'
 import { storeToRefs } from 'pinia'
 import { useUserInfo } from '/@/stores/userInfo'
 import { useMessage } from '/@/hooks/message'
 import { useMessageBox } from '/@/hooks/message'
+import { BasicTableProps, useTable } from '/@/hooks/table'
 import axios from 'axios'
-import { list } from '@/api/recruit/recruitstudentplangroup'
+import { getList } from '/@/api/recruit/recruitstudentplangroup'
 import {
   delObj,
   exportZip,
@@ -444,21 +497,23 @@ import {
   oneClass,
   oneStuNo,
   changeClassInfo, getMajorClass
-} from '@/api/recruit/recruitstudentsignup'
-import global from '@/components/tools/commondict'
-import { getClassListByRole, getDeptList, queryAllClassByInfo } from "@/api/basic/basicclass"
-import {listPlanByCondition as planMajor} from "@/api/recruit/recruitstudentplan"
-import { getTypeValue } from "@/api/admin/dict"
-import { getUserListByRole } from "@/api/admin/user"
-import { ROLE_CODE } from "@/config/global"
-import { updateFs } from "@/api/finance/financenormalstu"
-import { showLoading, hideLoading } from '@/api/asset/loading'
+} from '/@/api/recruit/recruitstudentsignup'
+import { getLabelValueByProps } from '/@/utils/dictLabel'
+import { getClassListByRole, getDeptList } from "/@/api/basic/basicclass"
+import {listPlanByCondition as planMajor} from "/@/api/recruit/recruitstudentplan"
+import { getTypeValue } from "/@/api/admin/dict"
+import { getUserListByRole } from "/@/api/admin/user"
+import { ROLE_CODE } from "/@/config/global"
+import { updateFs } from "/@/api/finance/financenormalstu"
+import { showLoading, hideLoading } from '/@/api/asset/loading'
+import { useDict } from '/@/hooks/dict'
 
 const TableForm = defineAsyncComponent(() => import('./detaiform.vue'))
 const MajorChange = defineAsyncComponent(() => import('./majorChange.vue'))
 const Update = defineAsyncComponent(() => import('./update.vue'))
 const DormFW = defineAsyncComponent(() => import('./dormFW.vue'))
 const ShowMap = defineAsyncComponent(() => import('./showMap.vue'))
+const GenderTag = defineAsyncComponent(() => import('/@/components/GenderTag/index.vue'))
 
 // 使用 Pinia store
 const userInfoStore = useUserInfo()
@@ -475,20 +530,25 @@ const permissions = computed(() => {
 
 // 使用 hooks
 const message = useMessage()
-const messageBox = useMessageBox()
 
 // 辅助函数
 const getLabelValueByPropes = (list: any[], key: string, props: { key: string, value: string }) => {
-  return global.getLabelValueByPropes(list, key, props)
+  return getLabelValueByProps(list, key, props)
 }
 
 const getLabelValueByPropes2 = (list: any[], key: string, props: { key: string, value: string }) => {
-  return global.getLabelValueByPropes2(list, key, props)
+  if (!list || !Array.isArray(list)) return ''
+  const item = list.find((it: any) => String(it[props.key]) === String(key))
+  if (!item) return ''
+  const majorName = item[props.value] ?? ''
+  const years = item.learnYear != null ? `${item.learnYear}年制` : ''
+  return years ? `${majorName}(${years})` : majorName
 }
 
 // 表单引用
 const searchFormRef = ref()
 const formRef = ref()
+const tableRef = ref()
 const addOrUpdateRef = ref()
 const majorChangeRef = ref()
 const updateRef = ref()
@@ -534,21 +594,39 @@ const delayPayTime = ref("")
 const auditorList = ref<any[]>([])
 const isBackTzList = [{ label: "未打印", value: "0" }, { label: "已打印", value: "1" }]
 const paystatusList = [{ label: "已缴费", value: "10" }, { label: "未缴费", value: "0" }, { label: "部分缴费", value: "5" }]
+// 搜索表单显示状态
+const showSearch = ref(true)
+
+// 列表数据
 const planList = ref<any[]>([])
 const eduList = ref<any[]>([])
 const planMajorList = ref<any[]>([])
-const auditStatusList = [{ label: "未录取", value: "-20" }, { label: "待审核", value: "0" }, { label: "已录取", value: "20" }]
-const yesNoList = [{ label: "否", value: "0" }, { label: "是", value: "1" }]
 const pushedList = [{ label: "未推送", value: "0" }, { label: "已推送", value: "1" }]
-const isOutFwList = [{ label: "待确认", value: "0" }, { label: "范围内", value: "1" }, { label: "范围外", value: "2" }]
 const isOutList = [{ label: "学校", value: "0" }, { label: "市平台", value: "1" }]
 const deptList = ref<any[]>([])
-const dataList = ref<any[]>([])
-const pageIndex = ref(1)
-const pageSize = ref(10)
-const totalPage = ref(0)
 const lqtzsShow = ref(false)
-const dataListLoading = ref(false)
+
+// 字典数据
+const { yes_no_type } = useDict('yes_no_type')
+
+// 表格状态
+const state: BasicTableProps = reactive<BasicTableProps>({
+  queryForm: dataForm,
+  pageList: async (params: any) => {
+    params.auditStatus = '20'
+    const response = await classPage(params)
+    return {
+      data: {
+        records: response.data.records || [],
+        total: response.data.total || 0
+      }
+    }
+  },
+  createdIsNeed: false
+})
+
+// 使用 table hook
+const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state)
 const addOrUpdateVisible = ref(false)
 const changeClassVisible = ref(false)
 const majorChangeVisible = ref(false)
@@ -765,7 +843,7 @@ const init = () => {
     deptList.value = data.data
   })
   getClassData()
-  list().then((data: any) => {
+  getList().then((data: any) => {
     planList.value = data.data
     if (planList.value.length > 0) {
       dataForm.groupId = planList.value[0].id
@@ -812,35 +890,6 @@ const chanMajor = () => {
 }
 
 const handleFilter = () => {
-  pageIndex.value = 1
-  getDataList()
-}
-
-// 获取数据列表
-const getDataList = () => {
-  dataList.value = []
-  dataListLoading.value = true
-  dataForm.auditStatus = '20'
-  classPage(Object.assign({
-    current: pageIndex.value,
-    size: pageSize.value
-  }, dataForm)).then((response: any) => {
-    dataList.value = response.data.records
-    totalPage.value = response.data.total
-  })
-  dataListLoading.value = false
-}
-
-// 每页数
-const sizeChangeHandle = (val: number) => {
-  pageSize.value = val
-  pageIndex.value = 1
-  getDataList()
-}
-
-// 当前页
-const currentChangeHandle = (val: number) => {
-  pageIndex.value = val
   getDataList()
 }
 const changeclass = (row: any) => {
@@ -922,8 +971,8 @@ const deleteHandle = (id: string) => {
 }
 
 const resetForm = (formName: string) => {
-  if (formName === 'searchFormRef') {
-    searchFormRef.value?.resetFields()
+  if (formName === 'searchForm') {
+    searchFormRef.value?.formRef?.resetFields()
   } else if (formName === 'formRef') {
     formRef.value?.resetFields()
   }