feat: 更新培训计划管理模块，优化表单字段和查询逻辑，调整数据处理方式

src/api/production-education-training-plan-dept/index.ts

@@ -52,9 +52,9 @@ export interface FormSubmitDataType {
 
 export interface TableParamsType {
   petpiId: number | string;
-  courseName: string;
-  dateStart: string;
-  dateEnd: string;
+  courseName?: string | undefined;
+  dateStart?: string | undefined;
+  dateEnd?: string | undefined;
 }
 // -------------部门--------------
 /**

src/views/production-safety/safetyTrainingAndEducation/educationTrainingPlanManagement/configs/tables.ts

@@ -2,7 +2,7 @@
  * @Author: liuJie
  * @Date: 2026-02-03 17:55:50
  * @LastEditors: liuJie
- * @LastEditTime: 2026-02-12 17:42:02
+ * @LastEditTime: 2026-03-13 11:31:24
  * @Describe: file describe
  */
 import type { TableColumnProps } from '@/types/basic-table';
@@ -24,7 +24,7 @@ export interface DistributeParameters {
 
 // 状态选项
 export const STATUS_OPTIONS = [
-  { label: '全部', value: '' },
+  { label: '全部', value: undefined },
   { label: '未下发', value: 1 },
   { label: '进行中', value: 2 },
   { label: '已完成', value: 3 },

src/views/production-safety/safetyTrainingAndEducation/educationTrainingPlanManagement/educationTrainingPlanManagement.vue

@@ -6,9 +6,9 @@
     <main class="safety-platform-container__main">
       <div class="search-table-container">
         <header>
-          <div style="position: relative">
-            <el-button type="primary" class="search-table-container--button" @click="handleCreate"> 添加 </el-button>
-            <el-button plain class="search-table-container--button" @click="handleImport">
+          <div style="position: relative" class="search-table-container--button">
+            <el-button type="primary" :icon="Plus"  @click="handleCreate"> 添加 </el-button>
+            <el-button plain @click="handleImport">
                 导入
             </el-button>
           </div>
@@ -31,7 +31,7 @@
               <div class="select-box--item">
                 <span>分类名称：</span>
                 <el-select
-                  v-model="tableQuery.queryParam.categoryName"
+                  v-model="tableQuery.queryParam.ClassifyName"
                   placeholder="请选择分类名称"
                   filterable
                   clearable
@@ -60,7 +60,7 @@
             <section class="search-btn">
               <el-button type="primary" @click="handleSearch">查询</el-button>
               <el-button @click="handleReset">重置</el-button>
-              <el-button plain class="search-table-container--button" @click="handleDownload">
+              <el-button plain  @click="handleDownload">
                 导出
               </el-button>
             </section>
@@ -99,7 +99,7 @@
                     :popconfirm="{
                       title: '确定要作废?',
                     }"
-                    @confirm="handleCancel(scope.row.mid)"
+                    @confirm="handleCancel(scope.row)"
                   />
                 </template>
                 <!-- 3-已完成 -->
@@ -144,6 +144,7 @@
 <script setup lang="ts">
   import { onMounted, reactive, ref } from 'vue';
   import { ElMessage } from 'element-plus';
+  import { Plus } from '@element-plus/icons-vue';
   import BasicTable from '@/components/BasicTable.vue';
   import useTableConfig from '@/hooks/useTableConfigHook';
   import ActionButton from '@/components/ActionButton.vue';
@@ -187,7 +188,7 @@
     queryParam: {
       keyword: undefined,
       status: undefined,
-      categoryName: undefined,
+      classifyName: undefined,
       startDate: undefined,
       endDate: undefined,
     },
@@ -233,15 +234,16 @@
 
   const handleReset = () => {
     pagination.pageNumber = 1;
+    pagination.pageSize = 20;
     Object.assign(tableQuery, {
       pageNumber: 1,
       pageSize: pagination.pageSize,
       queryParam: {
-        keyword: '',
-        status: '',
-        categoryName: '',
-        startDate: '',
-        endDate: '',
+        keyword: undefined,
+        status: undefined,
+        classifyName: undefined,
+        startDate: undefined,
+        endDate: undefined,
       },
     });
     dateRange.value = null;
@@ -338,9 +340,12 @@
       ElMessage.error('删除失败，请重试');
     }
   };
-  const handleCancel = async (id: number) => {
+  const handleCancel = async (row) => {
     try {
-      await cancelEducationAndTrainingProgram({ id });
+      await cancelEducationAndTrainingProgram({ 
+        mid:row.mid,
+        detid:row.detid
+       });
       ElMessage.success('作废成功');
       getTableData();
     } catch (e) {

src/views/production-safety/safetyTrainingAndEducation/educationTrainingPlanManagementDept/components/educationTrainingPlanManagementDeptDetail.vue

@@ -60,36 +60,59 @@
         </template>
 
         <!-- 查询区 -->
-        <el-form :inline="true" class="mb-12">
-          <el-form-item>
-            <el-input v-model="tableQuery.queryParam.courseName" placeholder="搜索培训课程名称" clearable />
-          </el-form-item>
-
-          <el-form-item>
-            <el-date-picker
-              v-model="dateRange"
-              type="daterange"
-              range-separator="至"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间"
-            />
-          </el-form-item>
-
-          <el-form-item>
+        <div  style="margin-bottom: 20px">
+            <el-button type="primary" :icon="Plus" @click="handleAdd"> 新增课程 </el-button>
+        </div>
+        <el-form :inline="true" class="mb-12 flex align-middle act-search">
+            <section class="select-box">
+                <el-form-item>
+                    <el-input v-model="tableQuery.queryParam.courseName" placeholder="搜索培训课程名称" clearable />
+                </el-form-item>
+
+                <el-form-item>
+                    <el-date-picker
+                        v-model="dateRange"
+                        type="daterange"
+                        range-separator="至"
+                        start-placeholder="开始时间"
+                        end-placeholder="结束时间"
+                        value-format="YYYY-MM-DD"
+                        format="YYYY-MM-DD"
+                    />
+                </el-form-item>
+            </section>
+          <el-form-item class="search-btn">
             <el-button type="primary" @click="handleSearch"> 查询 </el-button>
-            <el-button type="primary" @click="handleAdd"> 新增课程 </el-button>
+            <el-button @click="handleReset"> 重置 </el-button>
             <el-button @click="handleExport"> 导出 </el-button>
           </el-form-item>
         </el-form>
 
         <!-- 表格 -->
-        <el-table :data="tableData" border stripe>
+         <div class="batch-table">
+          <BasicTable
+            ref="basicTableRef"
+            :tableData="tableData"
+            :tableConfig="tableConfig"
+            @update:pageSize="handleSizeChange"
+            @update:pageNumber="handleCurrentChange"
+          >
+            <template #action="scope">
+              <div class="action-container--div" style="justify-content: left">
+                <el-button link type="primary" @click="handleEdit(scope.row)"> 编辑 </el-button>
+                <el-button link type="primary" @click="handleDelete(scope.row)"> 删除 </el-button>
+                <el-button link type="primary" @click="handleView(scope.row)"> 查看 </el-button>
+              </div>
+            </template>
+          </BasicTable>
+        </div>
+        <!-- <el-table :data="tableData" border stripe>
           <el-table-column type="index" label="编号" width="80" fixed="left" />
           <el-table-column prop="courseName" label="培训课程名称" width="240" fixed="left" />
           <el-table-column prop="trainingDate" width="230" label="培训时间" />
           <el-table-column prop="courseTypeName" label="课程所属分类" width="180" />
           <el-table-column prop="trainingMethod" label="培训方式" width="120" />
-          <!-- <el-table-column prop="courseIntroduction" label="培训课程简述" /> -->
+          <el-table-column prop="courseIntroduction" label="培训课程简述" />
           <el-table-column prop="trainingTeacher" label="培训课程讲师" width="140" />
           <el-table-column prop="groupOfParticipantsDesc" label="计划参与人数所属分组" width="200" />
           <el-table-column prop="planNumOfParticipants" label="计划参与人数" width="140" />
@@ -98,8 +121,8 @@
           <el-table-column label="操作" width="280" fixed="right">
             <template #default="{ row }">
               <el-button link type="primary" @click="handleEdit(row)"> 编辑 </el-button>
-              <el-button link type="danger" @click="handleDelete(row)"> 删除 </el-button>
-              <el-button link @click="handleView(row)"> 查看 </el-button>
+              <el-button link type="primary" @click="handleDelete(row)"> 删除 </el-button>
+              <el-button link type="primary" @click="handleView(row)"> 查看 </el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -113,7 +136,7 @@
             @current-change="handlePageChange"
             @size-change="handleSizeChange"
           />
-        </div>
+        </div> -->
       </el-card>
     </div>
     <AddTrainingInformation :state="type" v-model:visible="showAddTrainingInfo" :currentId="currentTableId" @save-success="handleSearch" />
@@ -134,6 +157,11 @@
   import AddTrainingInformation from './addTrainingInformation.vue';
   import type { QueryPageRequest } from '@/types/basic-query';
   import { downloadByData } from '@/utils/file/download';
+  import { Plus } from '@element-plus/icons-vue';
+  import BasicTable from '@/components/BasicTable.vue';
+  import useTableConfig from '@/hooks/useTableConfigHook';
+  import { TABLE_OPTIONS, COURSE_TABLE_COLUMNS } from '../configs/tables';
+
   const router = useRouter();
   const route = useRoute();
 
@@ -141,10 +169,7 @@
   const currentId = computed(() => Number(route.query.id));
 
   const isViewMode = computed(() => operate.value === 'education-training-plan-management-dept-view');
-  const query = ref({
-    name: '',
-    time: [],
-  });
+  
   const details = reactive({
     trainingPlanName: '',
     categoryName: '',
@@ -161,11 +186,11 @@
     createdAt: '',
     deptName: '',
   });
-  const page = ref({
-    current: 1,
-    size: 10,
-    total: 0,
-  });
+
+  // 表格
+  const basicTableRef = ref<InstanceType<typeof BasicTable>>();
+
+  const { tableConfig, pagination } = useTableConfig(COURSE_TABLE_COLUMNS, TABLE_OPTIONS);
 
   const tableData = ref([]);
   const type = ref('add');
@@ -175,36 +200,51 @@
   const dateRange = ref([]);
 
   const tableQuery = reactive<QueryPageRequest<TableParamsType>>({
-    pageNumber: page.value.current,
-    pageSize: page.value.size,
+    pageNumber: pagination.pageNumber,
+    pageSize: pagination.pageSize,
     queryParam: {
       petpiId: currentId.value,
-      courseName: '',
-      dateStart: dateRange.value[0],
-      dateEnd: dateRange.value[1],
+      courseName: undefined,
+      dateStart: undefined, //dateRange.value[0],
+      dateEnd: undefined, //dateRange.value[1],
     },
   });
 
-  const handlePageChange = (current) => {
-    page.value.current = current;
+  const handleCurrentChange = (value: number) => {
+    pagination.pageNumber = value;
+    tableQuery.pageNumber = value;
     getTableList();
   };
 
-  const handleSizeChange = (size) => {
-    page.value.size = size;
-    page.value.current = 1;
+  const handleSizeChange = (value: number) => {
+    pagination.pageSize = value;
+    tableQuery.pageSize = value;
     getTableList();
   };
 
   const handleSearch = () => {
     showAddTrainingInfo.value = false
-    page.value.current = 1;
+    pagination.pageNumber = 1;
     tableQuery.pageNumber = 1;
     getTableList();
   };
-
+  const handleReset = ()=>{
+    pagination.pageNumber = 1;
+    pagination.pageSize = 20;
+    Object.assign(tableQuery, {
+      pageNumber: 1,
+      pageSize: pagination.pageSize,
+      queryParam: {
+        petpiId: currentId.value,
+        courseName: undefined,
+        dateStart: undefined,
+        dateEnd: undefined,
+      },
+    });
+    dateRange.value = [];
+    handleSearch();
+  }
   const handleExport = async () => {
-    
     try {
       const response = await exportEducationTrainingPlanCourseData(tableQuery.queryParam)
       if (response) {
@@ -245,15 +285,21 @@
     });
   };
   const getTableList = async () => {
+    tableConfig.loading = true;
     if (!currentId.value) return;
     try {
+      tableQuery.queryParam.dateStart = dateRange.value ? dateRange.value[0]: undefined
+      tableQuery.queryParam.dateEnd = dateRange.value ? dateRange.value[1]: undefined
       const res = await queryTrainingTableData(tableQuery);
       if (res) {
         tableData.value = res.records || [];
-        page.value.total = res.total || 0;
+        pagination.total = res.totalRow;
       }
     } catch (e) {
-      ElMessage.error('获取培训课程列表失败');
+      tableData.value = [];
+      pagination.total = 0;
+    } finally {
+      tableConfig.loading = false;
     }
   };
   const getDetail = async () => {
@@ -303,6 +349,9 @@
   .mb-12 {
     margin-bottom: 12px;
   }
+  .align-middle {
+    justify-content: space-between;
+  }
 
   .mb-16 {
     margin-bottom: 16px;

src/views/production-safety/safetyTrainingAndEducation/educationTrainingPlanManagementDept/configs/tables.ts

@@ -17,7 +17,7 @@ export const TABLE_OPTIONS = {
 
 // 状态选项
 export const STATUS_OPTIONS = [
-  { label: '全部', value: '' },
+  { label: '全部', value: undefined },
   { label: '未下发', value: 1 },
   { label: '进行中', value: 2 },
   { label: '已完成', value: 3 },
@@ -116,3 +116,73 @@ export const TABLE_COLUMNS: TableColumnProps[] = [
     align: 'left',
   },
 ];
+
+
+// 课程列表
+
+export const COURSE_TABLE_COLUMNS: TableColumnProps[] = [
+  {
+    label: '编号',
+    type: 'index',
+    align: 'center',
+    width: '80px',
+    fixed: 'left',
+  },
+  {
+    label: '培训课程名称',
+    prop: 'courseName',
+    align: 'left',
+    minWidth: '220px',
+    fixed: 'left',
+  },
+  {
+    label: '培训时间',
+    prop: 'trainingDate',
+    align: 'center',
+    minWidth: '230px',
+  },
+  {
+    label: '课程所属分类',
+    prop: 'courseTypeName',
+    align: 'center',
+    minWidth: '180px',
+  },
+  {
+    label: '培训方式',
+    prop: 'trainingMethod',
+    align: 'center',
+    minWidth: '140px',
+  },
+  {
+    label: '培训课程讲师',
+    prop: 'trainingTeacher',
+    align: 'center',
+    minWidth: '140px',
+  },
+  {
+    label: '计划参与人数所属分组',
+    prop: 'groupOfParticipantsDesc',
+    align: 'center',
+    minWidth: '200px',
+  },
+  {
+    label: '计划参与人数',
+    prop: 'planNumOfParticipants',
+    align: 'center',
+    minWidth: '150px',
+  },
+  {
+    label: '签到人数',
+    prop: 'signInNum',
+    align: 'center',
+    minWidth: '160px',
+  },
+  {
+    label: '操作',
+    prop: 'action',
+    slot: 'action',
+    fixed: 'right',
+    width: '300px',
+    align: 'left',
+  },
+];

src/views/production-safety/safetyTrainingAndEducation/educationTrainingPlanManagementDept/educationTrainingPlanManagementDept.vue

@@ -6,22 +6,14 @@
     <main class="safety-platform-container__main">
       <div class="search-table-container">
         <header>
-          <div style="position: relative">
-            <!-- <el-button type="primary" class="search-table-container--button" @click="handleCreate">
-                            添加
-                        </el-button> -->
-            <!-- <el-button plain class="search-table-container--button" @click="handleImport">
-                            导入
-                        </el-button>
-                        -->
-                        
+          <div style="position: relative">                        
           </div>
           <div class="act-search">
             <section class="select-box">
               <div class="select-box--item">
                 <span>培训内容/计划名称：</span>
                 <el-input
-                  v-model="tableQuery.queryParam.keyword"
+                  v-model="tableQuery.queryParam.contentName"
                   placeholder="搜索培训内容或计划名称"
                   class="act-search-input"
                 />
@@ -35,7 +27,7 @@
               <div class="select-box--item">
                 <span>分类名称：</span>
                 <el-select
-                  v-model="tableQuery.queryParam.classifyName"
+                  v-model="tableQuery.queryParam.categoryName"
                   placeholder="请选择分类名称"
                   filterable
                   clearable
@@ -64,7 +56,7 @@
             <section class="search-btn">
               <el-button type="primary" @click="handleSearch">查询</el-button>
               <el-button @click="handleReset">重置</el-button>
-              <el-button plain class="search-table-container--button" @click="handleDownload">
+              <el-button plain  @click="handleDownload">
                 导出   
               </el-button> 
             </section>
@@ -82,7 +74,7 @@
             <template #action="scope">
               <div class="action-container--div" style="justify-content: left">
                 <ActionButton text="查看" @click="handleView(scope.row.id)" />
-                <el-button link v-if="scope.row.status===2" @click="handleSummary(scope.row)"> 小结 </el-button>
+                <ActionButton text="小结" v-if="scope.row.status===2" @click="handleSummary(scope.row)" />
               </div>
             </template>
           </BasicTable>
@@ -187,11 +179,16 @@
     pageNumber: pagination.pageNumber,
     pageSize: pagination.pageSize,
     queryParam: {
-      keyword: '',
+      // 培训内容/计划名称
+      contentName: undefined,
+      // 状态
       status: undefined,
-      categoryName: '',
-      startDate: '',
-      endDate: '',
+      // 分类名称
+      categoryName: undefined,
+      // 开始时间
+      datePlanStart: undefined,
+      // 结束时间
+      datePlanEnd: undefined,
     },
   });
   const fileList = ref([])
@@ -314,8 +311,8 @@
   async function getTableData() {
     tableConfig.loading = true;
     try {
-      tableQuery.queryParam.startDate = dateRange.value ? dateRange.value[0] : '';
-      tableQuery.queryParam.endDate = dateRange.value ? dateRange.value[1] : '';
+      tableQuery.queryParam.datePlanStart = dateRange.value ? dateRange.value[0] : undefined;
+      tableQuery.queryParam.datePlanEnd = dateRange.value ? dateRange.value[1] : undefined;
       const res = await getEducationAndTrainingProgramList(tableQuery);
       if (res) {
         // 映射返回数据字段到表格字段
@@ -338,15 +335,21 @@
 
   const handleReset = () => {
     pagination.pageNumber = 1;
+    pagination.pageSize = 20;
     Object.assign(tableQuery, {
       pageNumber: 1,
       pageSize: pagination.pageSize,
       queryParam: {
-        keyword: '',
-        status: '',
-        categoryName: '',
-        startDate: '',
-        endDate: '',
+        // 培训内容/计划名称
+        contentName: undefined,
+        // 状态
+        status: undefined,
+        // 分类名称
+        categoryName: undefined,
+        // 开始时间
+        datePlanStart: undefined,
+        // 结束时间
+        datePlanEnd: undefined,
       },
     });
     dateRange.value = null;