a

src/views/recruit/recruitexampeople/index.vue

@@ -20,64 +20,75 @@
     title="招生审核人员管理"
     :close-on-click-modal="false"
     v-model="visible"
+    width="800"
+    :append-to-body="true"
+    destroy-on-close
   >
-    <div class="layout-padding">
-      <div class="layout-padding-auto layout-padding-view">
-        <div style="margin-top: 10px;">
-          <el-time-picker
-            is-range
-            style="width:90%"
-            v-model="form.time1"
-            type="daterange"
-            format="HH:mm:ss"
-            value-format="HH:mm:ss"
-            range-separator="至"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            placeholder="选择时间范围"
-          />
-        </div>
-
-        <!-- 搜索表单 -->
-        <el-form :model="queryForm" inline class="mb-4">
+    <div class="dialog-content">
+      <!-- 时间选择器和操作按钮 -->
+      <el-form :inline="true" :model="queryForm">
+          <el-form-item label="审核时间范围：" label-width="110px">
+            <el-time-picker
+              is-range
+              v-model="form.time1"
+              format="HH:mm:ss"
+              value-format="HH:mm:ss"
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              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-form-item>
-          <el-form-item v-if="permissions.recruit_recruitexampeople_add">
-            <el-button type="primary" icon="FolderAdd" class="ml10" @click="handleAdd">新增</el-button>
+            <el-button type="primary" plain icon="Refresh" @click="resetQuery">重置</el-button>
           </el-form-item>
         </el-form>
+        <div class="mb15" v-if="permissions.recruit_recruitexampeople_add">
+          <el-button 
+            type="primary" 
+            icon="FolderAdd" 
+            @click="handleAdd"
+          >
+            新 增
+          </el-button>
+        </div>
 
-        <!-- 表格 -->
+      <!-- 表格 -->
+      <div class="table-wrapper">
         <el-table
           ref="tableRef"
-          :data="state.dataList"
+          :data="state.dataList || []"
           v-loading="state.loading"
           border
           stripe
           :cell-style="tableStyle.cellStyle"
           :header-cell-style="tableStyle.headerCellStyle"
+          empty-text="暂无数据"      
         >
-          <el-table-column type="index" label="序号" width="60" align="center" />
-          <el-table-column prop="teacherNo" label="工号" align="center" show-overflow-tooltip />
-          <el-table-column prop="teacherName" 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_recruitexampeople_del"
-                type="danger"
-                link
-                icon="Delete"
-                @click="handleDel(scope.row)"
-              >
-                删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
+            <el-table-column type="index" label="序号" width="60" align="center" />
+            <el-table-column label="工号" align="center" prop="teacherNo" show-overflow-tooltip>
+            </el-table-column>
+            <el-table-column label="姓名" align="center" prop="teacherName" show-overflow-tooltip>
+            </el-table-column>
+            <el-table-column label="操作" width="120" align="center" fixed="right">
+              <template #default="scope">
+                <el-button
+                  v-if="permissions.recruit_recruitexampeople_del"
+                  type="primary"
+                  link
+                  icon="Delete"
+                  @click="handleDel(scope.row)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
 
-        <!-- 分页 -->
+      <!-- 分页 -->
+      <div class="pagination-wrapper">
         <pagination
           v-bind="state.pagination"
           @current-change="currentChangeHandle"
@@ -87,43 +98,23 @@
     </div>
 
     <!-- 保存审核人员弹窗 -->
-    <el-dialog v-model="setTeachNoFormVisible" title="保存审核人员" width="20%" append-to-body>
-      <div style="margin-top: 10px;">
-        <el-select
-          v-model="belongTeacherNos"
-          filterable
-          remote
-          style="width: 90%"
-          clearable
-          reserve-keyword
-          placeholder="请选择保管老师"
-          :remote-method="remoteTeacherByQuery"
-        >
-          <el-option
-            v-for="item in teacherList"
-            :key="item.teacherNo"
-            :label="item.realName"
-            :value="item.realName"
-          />
-        </el-select>
-      </div>
-
-      <div class="dialog-footer" style="margin-top: 10px">
-        <el-button type="primary" @click="updateTeachNo">保存</el-button>
-        <el-button @click="clouseWin">关闭</el-button>
-      </div>
-    </el-dialog>
+    <add-form 
+      v-model:visible="setTeachNoFormVisible" 
+      :time-range="form.time1"
+      @save="handleSave"
+    />
   </el-dialog>
 </template>
 
 <script setup lang="ts" name="recruitexampeople">
-import { ref, reactive, computed } from 'vue'
+import { ref, reactive, computed, nextTick, 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 { addObj, delObj, fetchList } from '/@/api/recruit/recruitexampeople'
-import { queryTeacherBaseByNoByAssets } from '/@/api/professional/teacherbase'
+
+const AddForm = defineAsyncComponent(() => import('./add-form.vue'))
 
 // 使用 Pinia store
 const userInfoStore = useUserInfo()
@@ -148,8 +139,6 @@ const tableRef = ref()
 // 弹窗状态
 const visible = ref(false)
 const setTeachNoFormVisible = ref(false)
-const belongTeacherNos = ref('')
-const teacherList = ref<any[]>([])
 
 // 表单数据
 const form = reactive({
@@ -157,7 +146,7 @@ const form = reactive({
 })
 
 // 查询表单
-const queryForm = reactive({})
+const queryForm = reactive<Record<string, any>>({})
 
 // 表格状态
 const state: BasicTableProps = reactive<BasicTableProps>({
@@ -166,74 +155,60 @@ const state: BasicTableProps = reactive<BasicTableProps>({
     const response = await fetchList(params)
     return {
       data: {
-        records: response.data.records,
-        total: response.data.total
+        records: response.data.records || [],
+        total: response.data.total || 0
       }
     }
   },
-  onLoaded: async (state) => {
+  createdIsNeed: false, // 弹窗组件，不在挂载时自动加载数据
+  dataList: [], // 确保 dataList 初始化为空数组
+  loading: false, // 确保 loading 初始化为 false
+  onLoaded: async (state: any) => {
     // 如果有数据，设置时间范围
-    if (state.dataList.length > 0) {
+    if (state.dataList && state.dataList.length > 0) {
       form.time1 = [state.dataList[0].startTime, state.dataList[0].endTime]
     }
   }
 })
 
 // 使用 table hook
+// 注意：useTable 会直接修改传入的 state 对象，所以不需要从返回值中获取 state
 const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state)
 
 // 初始化
 const init = () => {
-  form.time1 = []
-  belongTeacherNos.value = ''
-  getDataList()
   visible.value = true
+  form.time1 = []
+  // 等待弹窗显示后再加载数据
+  nextTick(() => {
+    getDataList()
+  })
 }
 
-// 检索教师
-const remoteTeacherByQuery = (query: string) => {
-  teacherList.value = []
-  if (query !== '') {
-    setTimeout(() => {
-      queryTeacherBaseByNoByAssets(query).then(response => {
-        teacherList.value = response.data
-      })
-    }, 200)
-  }
+// 新增
+const handleAdd = () => {
+  setTeachNoFormVisible.value = true
 }
 
-// 更新教师编号
-const updateTeachNo = async () => {
+// 保存审核人员
+const handleSave = async (data: { teacherNo: string; startTime: string; endTime: string }) => {
   if (form.time1.length === 0) {
     message.error('审核时间不能为空')
     return
   }
   try {
     await addObj({
-      teacherNo: belongTeacherNos.value,
-      startTime: form.time1[0],
-      endTime: form.time1[1]
+      teacherNo: data.teacherNo,
+      startTime: data.startTime,
+      endTime: data.endTime
     })
     message.success('添加成功')
-    setTeachNoFormVisible.value = false
     getDataList()
   } catch (error: any) {
     message.error(error.msg || '添加失败')
   }
 }
 
-// 关闭窗口
-const clouseWin = () => {
-  belongTeacherNos.value = ''
-  setTeachNoFormVisible.value = false
-}
-
-// 新增
-const handleAdd = () => {
-  belongTeacherNos.value = ''
-  setTeachNoFormVisible.value = true
-}
-
 // 删除
 const handleDel = async (row: any) => {
   try {