红包记录增加营期条件以及表格展示数据

src/views/course/courseRedPacketLog/index.vue

@@ -73,6 +73,28 @@
 	      @keyup.enter.native="handleQuery"
 	    />
 	  </el-form-item>
+
+      <el-form-item label="营期" prop="courseId">
+        <el-select
+          v-model="queryParams.periodId"
+          placeholder="请选择课程"
+          filterable
+          clearable
+          size="small"
+          remote
+          :remote-method="remoteMethod"
+          :loading="loadingPeriod"
+          @focus="handleFocus"
+        >
+          <el-option
+            v-for="dict in periodLists"
+            :key="dict.periodId"
+            :label="dict.periodName"
+            :value="parseInt(dict.periodId)"
+          />
+        </el-select>
+      </el-form-item>
+
 		<el-form-item label="课程" prop="courseId">
 		     <el-select filterable  v-model="queryParams.courseId" placeholder="请选择课程"  clearable size="small" @change="courseChange(queryParams.courseId)">
 		         <el-option
@@ -127,6 +149,7 @@
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="记录编号" align="center" prop="logId" />
       <el-table-column label="批次单号" align="center" prop="outBatchNo" />
+      <el-table-column label="营期名称" align="center" prop="periodName" />
       <el-table-column label="课程名称" align="center" prop="courseId" >
         <template slot-scope="scope">
           <span prop="status" v-for="(item, index) in courseLists"    v-if="scope.row.courseId==item.dictValue">{{item.dictLabel}}</span>
@@ -192,6 +215,7 @@
 <script>
 import { courseList,videoList,listCourseRedPacketLog, getCourseRedPacketLog, delCourseRedPacketLog, addCourseRedPacketLog, updateCourseRedPacketLog, exportCourseRedPacketLog } from "@/api/course/courseRedPacketLog";
 import { getCompanyList } from "@/api/company/company";
+import { periodList } from "@/api/course/userCoursePeriod";
 import {treeselect} from "../../../api/company/companyDept";
 import SelectTree from '@/components/TreeSelect/index.vue'
 import { getDeptData } from '@/api/system/employeeStats'
@@ -206,6 +230,7 @@ export default {
     deptList: [],
       // 遮罩层
       loading: false,
+      loadingPeriod: false,
       // 导出遮罩层
       exportLoading: false,
       // 选中数组
@@ -218,6 +243,7 @@ export default {
       showSearch: true,
       activeName:"00",
       courseLists:[],
+      periodLists:[],
       videoList:[],
       // 总条数
       total: 0,
@@ -227,6 +253,10 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      queryPeriod: {
+        pageNum: 1,
+        pageSize: 20
+      },
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -264,11 +294,51 @@ export default {
 	  courseList().then(response => {
 	    this.courseLists = response.list;
 	  });
+    periodList(this.queryPeriod).then(response => {
+	    this.periodLists = response.data;
+	  });
 
     // this.getList();
   },
   methods: {
-	  handleClick(tab, event) {
+    // 远程搜索方法
+    async remoteMethod(query) {
+      this.searchKeyword = query
+      if (query !== '') {
+        this.loadingPeriod = true
+        await this.getPeriodList(query)
+        this.loadingPeriod = false
+      } else {
+        // 如果输入为空，可以清空列表或加载默认数据
+        this.periodLists = []
+      }
+    },
+
+    // 获取营期列表
+    async getPeriodList(keyword = '') {
+      try {
+        const params = {
+          periodName: keyword, // 搜索关键词
+          pageNum: 1,
+          pageSize: 50 // 根据需求调整
+        }
+
+        const response = await periodList(params)
+        this.periodLists = response.data.list || response.data || []
+      } catch (error) {
+        console.error('获取营期列表失败:', error)
+        this.periodLists = []
+      }
+    },
+    // 下拉框获取焦点时加载数据
+    async handleFocus() {
+      if (this.periodLists.length === 0) {
+        this.getPeriodList();
+      }
+    },
+
+
+    handleClick(tab, event) {
 	    this.activeName=tab.name;
 	    this.queryParams.status=tab.name
 	    this.getList();