完成高频和低频出入境分析

src/api/biz/anal.js

@@ -9,6 +9,15 @@ export function listHighFrequencyInOut(params) {
   })
 }
 
+// 查询低频出入境列表
+export function listLowFrequencyInOut(params) {
+  return request({
+    url: '/biz/anal/low',
+    method: 'get',
+    params: params
+  })
+}
+
 // 查询高频出入境统计信息
 export function getInOutStats(params) {
   return request({
@@ -16,4 +25,13 @@ export function getInOutStats(params) {
     method: 'get',
     params: params
   })
+}
+
+// 根据证件号码查询出入境记录
+export function getRecords(params) {
+  return request({
+    url: '/biz/anal/records',
+    method: 'get',
+    params: params
+  })
 }

src/views/biz/anal/high.vue

@@ -92,13 +92,190 @@
       </div>
     </el-row>
 
-    <el-table v-loading="loading" :data="list" style="margin-top: 20px;">
+    <el-table v-loading="loading" :data="list" style="margin-top: 20px;" @row-click="handleRowClick">
       <el-table-column label="序号" type="index" width="50" align="center" />
       <el-table-column label="姓名" prop="fullName" align="center" />
       <el-table-column label="证件号码" prop="idNumber" align="center" />
       <el-table-column label="出入境次数" prop="count" align="center" />
     </el-table>
 
+    <!-- 出入境记录列表对话框 -->
+    <el-dialog :title="recordListTitle" v-model="recordListOpen" width="1200px" append-to-body>
+      <el-table :data="recordList" v-loading="recordListLoading" @row-click="handleRecordRowClick">
+        <el-table-column label="姓名" align="center" prop="fullName" width="300"/>
+        <el-table-column label="性别" align="center" prop="genderCn"/>
+        <el-table-column label="出生日期" align="center" prop="birthDate" width="100">
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.birthDate, '{y}-{m}-{d}') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="国家/地区" align="center" prop="countryName"/>
+        <el-table-column label="民族" align="center" prop="ethnicityName"/>
+        <el-table-column label="出入标识" align="center" prop="inOutFlag"/>
+        <el-table-column label="出入时间" align="center" prop="inOutTime" width="180">
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.inOutTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="出入口岸" align="center" prop="portCode">
+          <template #default="scope">
+            <span>{{ scope.row.portCode}}-{{scope.row.portName}}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="前往地/出发地" align="center" prop="destinationName"/>
+        <el-table-column label="导入时间" align="center" prop="createTime" width="150">
+          <template #default="scope">
+            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+
+    <!-- 出入境记录明细对话框 -->
+    <el-dialog :title="detailTitle" v-model="recordDetailOpen" width="900px" append-to-body>
+      <el-form :model="detailForm" label-width="120px" disabled>
+        <!-- 个人信息 -->
+        <div style="font-weight: bold; margin: 10px 0 15px 0; border-left: 4px solid #409eff; padding-left: 8px; color: #409eff;">个人信息</div>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="人员类别：">
+              <span>{{ detailForm.personnelCategoryName }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="姓名：">
+              <span>{{ detailForm.fullName }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="性别：">
+              <span>{{ detailForm.genderCn }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="出生日期：">
+              <span>{{ parseTime(detailForm.birthDate, '{y}-{m}-{d}') }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="国家/地区：">
+              <span>{{ detailForm.countryCode }}-{{ detailForm.countryName }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="民族：">
+              <span>{{ detailForm.ethnicityName }}</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- 证件信息 -->
+        <div style="font-weight: bold; margin: 10px 0 15px 0; border-left: 4px solid #409eff; padding-left: 8px; color: #409eff;">证件信息</div>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="证件类别：">
+              <span>{{ detailForm.idTypeName }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="证件号码：">
+              <span>{{ detailForm.idNumber }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="签证类型：">
+              <span>{{ detailForm.visaTypeName }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="签证号码：">
+              <span>{{ detailForm.visaNumber }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="停留期：">
+              <span>{{ detailForm.stayDuration }}</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- 出入境信息 -->
+        <div style="font-weight: bold; margin: 10px 0 15px 0; border-left: 4px solid #409eff; padding-left: 8px; color: #409eff;">出入境信息</div>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="出入标识：">
+              <span>{{ detailForm.inOutFlag }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="出入时间：">
+              <span>{{ parseTime(detailForm.inOutTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="出入口岸：">
+              <span>{{ detailForm.portCode }}-{{ detailForm.portName }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="交通方式：">
+              <span>{{ detailForm.transportMode }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="交通工具：">
+              <span>{{ detailForm.transportVehicle }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="前往地/出发地：">
+              <span>{{ detailForm.destinationCode }}-{{ detailForm.destinationName }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="出入境事由：">
+              <span>{{ detailForm.reasonName }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="发证机关：">
+              <span>{{ detailForm.issuingAuthorityCode }}-{{ detailForm.issuingAuthorityName }}</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- 其他信息 -->
+        <div style="font-weight: bold; margin: 10px 0 15px 0; border-left: 4px solid #409eff; padding-left: 8px; color: #409eff;">其他信息</div>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="自助通道标记：">
+              <span>{{ detailForm.selfServiceFlag }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="后台补录标记：">
+              <span>{{ detailForm.backfillFlag }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="创建时间：">
+              <span>{{ parseTime(detailForm.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="疑难字说明：">
+              <span>{{ detailForm.remark }}</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="recordDetailOpen = false">关 闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
     <pagination
       v-show="total>0"
       :total="total"
@@ -111,7 +288,7 @@
 
 <script setup name="High">
 import * as echarts from 'echarts'
-import { listHighFrequencyInOut, getInOutStats } from "@/api/biz/anal";
+import { listHighFrequencyInOut, getInOutStats, getRecords } from "@/api/biz/anal";
 
 const { proxy } = getCurrentInstance();
 
@@ -130,6 +307,19 @@ const statistics = ref({
   maxFrequency: 0
 });
 
+// 出入境记录明细相关
+const recordDetailOpen = ref(false);
+const recordDetailLoading = ref(false);
+const recordDetailList = ref([]);
+const detailTitle = ref("详细信息");
+const detailForm = ref({});
+
+// 出入境记录列表相关
+const recordListOpen = ref(false);
+const recordListLoading = ref(false);
+const recordListTitle = ref("出入境记录列表");
+const recordList = ref([]);
+
 const data = reactive({
   queryParams: {
     pageNum: 1,
@@ -802,6 +992,48 @@ function resetQuery() {
   handleQuery();
 }
 
+/** 处理表格行点击事件 */
+function handleRowClick(row) {
+  // 根据证件号码查询出入境记录列表
+  recordListLoading.value = true;
+  recordListOpen.value = true;
+  
+  // 准备查询参数，使用当前页面的日期范围参数
+  const params = {};
+  if (queryParams.value.queryType === 'year') {
+    params.year = queryParams.value.year;
+  } else if (queryParams.value.queryType === 'month') {
+    params.month = queryParams.value.month;
+  } else if (queryParams.value.queryType === 'range') {
+    if (queryParams.value.dateRange && queryParams.value.dateRange.length === 2) {
+      params.startDate = queryParams.value.dateRange[0];
+      params.endDate = queryParams.value.dateRange[1];
+    }
+  }
+  
+  // 添加证件号码参数
+  params.idNumber = row.idNumber;
+  
+  getRecords(params).then(response => {
+    const records = response.rows || response.data || [];
+    recordList.value = records;
+    recordListTitle.value = `${row.fullName}的出入境记录列表 (${records.length}条记录)`;
+  }).catch(error => {
+    console.error('获取出入境记录失败:', error);
+    recordList.value = [];
+    recordListTitle.value = `${row.fullName}的出入境记录列表 (0条记录)`;
+  }).finally(() => {
+    recordListLoading.value = false;
+  });
+}
+
+/** 处理记录列表行点击事件 */
+function handleRecordRowClick(recordRow) {
+  detailForm.value = { ...recordRow };
+  detailTitle.value = `详细信息 - ${recordRow.fullName}`;
+  recordDetailOpen.value = true;
+}
+
 // 页面加载时获取数据
 onMounted(() => {
   // 初始化时直接查询，使用reactive中设置的默认值

src/views/biz/anal/low.vue

@@ -0,0 +1,326 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
+      <el-form-item label="年份" prop="year">
+        <div style="display: flex; align-items: center;">
+          <el-button icon="ArrowLeft" @click="changeYear(-1)" style="margin-right: 10px;"></el-button>
+          <el-date-picker
+            v-model="queryParams.year"
+            type="year"
+            value-format="YYYY"
+            placeholder="请选择年份"
+            @change="handleQuery"
+            style="width: 130px">
+          </el-date-picker>
+          <el-button icon="ArrowRight" @click="changeYear(1)" style="margin-left: 10px;"></el-button>
+        </div>
+      </el-form-item>
+    </el-form>
+
+    <el-table v-loading="loading" :data="list" style="margin-top: 20px;" @row-click="handleRowClick">
+      <el-table-column label="姓名" align="center" prop="fullName" width="300"/>
+      <el-table-column label="性别" align="center" prop="genderCn"/>
+      <el-table-column label="出生日期" align="center" prop="birthDate" width="100">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.birthDate, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="国家/地区" align="center" prop="countryName"/>
+      <el-table-column label="民族" align="center" prop="ethnicityName"/>
+      <el-table-column label="出入标识" align="center" prop="inOutFlag"/>
+      <el-table-column label="出入时间" align="center" prop="inOutTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.inOutTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="出入口岸" align="center" prop="portCode">
+        <template #default="scope">
+          <span>{{ scope.row.portCode}}-{{scope.row.portName}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="前往地/出发地" align="center" prop="destinationName"/>
+      <el-table-column label="导入时间" align="center" prop="createTime" width="150">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 出入境记录明细对话框 -->
+    <el-dialog :title="detailTitle" v-model="recordDetailOpen" width="900px" append-to-body>
+      <el-form :model="detailForm" label-width="120px" disabled>
+        <!-- 个人信息 -->
+        <div style="font-weight: bold; margin: 10px 0 15px 0; border-left: 4px solid #409eff; padding-left: 8px; color: #409eff;">个人信息</div>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="人员类别：">
+              <span>{{ detailForm.personnelCategoryName }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="姓名：">
+              <span>{{ detailForm.fullName }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="性别：">
+              <span>{{ detailForm.genderCn }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="出生日期：">
+              <span>{{ parseTime(detailForm.birthDate, '{y}-{m}-{d}') }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="国家/地区：">
+              <span>{{ detailForm.countryCode }}-{{ detailForm.countryName }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="民族：">
+              <span>{{ detailForm.ethnicityName }}</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- 证件信息 -->
+        <div style="font-weight: bold; margin: 10px 0 15px 0; border-left: 4px solid #409eff; padding-left: 8px; color: #409eff;">证件信息</div>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="证件类别：">
+              <span>{{ detailForm.idTypeName }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="证件号码：">
+              <span>{{ detailForm.idNumber }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="签证类型：">
+              <span>{{ detailForm.visaTypeName }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="签证号码：">
+              <span>{{ detailForm.visaNumber }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="停留期：">
+              <span>{{ detailForm.stayDuration }}</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- 出入境信息 -->
+        <div style="font-weight: bold; margin: 10px 0 15px 0; border-left: 4px solid #409eff; padding-left: 8px; color: #409eff;">出入境信息</div>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="出入标识：">
+              <span>{{ detailForm.inOutFlag }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="出入时间：">
+              <span>{{ parseTime(detailForm.inOutTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="出入口岸：">
+              <span>{{ detailForm.portCode }}-{{ detailForm.portName }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="交通方式：">
+              <span>{{ detailForm.transportMode }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="交通工具：">
+              <span>{{ detailForm.transportVehicle }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="前往地/出发地：">
+              <span>{{ detailForm.destinationCode }}-{{ detailForm.destinationName }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="出入境事由：">
+              <span>{{ detailForm.reasonName }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="发证机关：">
+              <span>{{ detailForm.issuingAuthorityCode }}-{{ detailForm.issuingAuthorityName }}</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <!-- 其他信息 -->
+        <div style="font-weight: bold; margin: 10px 0 15px 0; border-left: 4px solid #409eff; padding-left: 8px; color: #409eff;">其他信息</div>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="自助通道标记：">
+              <span>{{ detailForm.selfServiceFlag }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="后台补录标记：">
+              <span>{{ detailForm.backfillFlag }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="创建时间：">
+              <span>{{ parseTime(detailForm.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="疑难字说明：">
+              <span>{{ detailForm.remark }}</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="recordDetailOpen = false">关 闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="handlePagination"
+    />
+  </div>
+</template>
+
+<script setup name="Low">
+import { listLowFrequencyInOut, getInOutStats, getRecords } from "@/api/biz/anal";
+
+const { proxy } = getCurrentInstance();
+
+const list = ref([]);
+const loading = ref(false);
+
+const total = ref(0);
+
+// 出入境记录明细相关
+const recordDetailOpen = ref(false);
+const detailTitle = ref("详细信息");
+const detailForm = ref({});
+
+const data = reactive({
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    year: new Date().getFullYear().toString()
+  }
+});
+
+const { queryParams } = toRefs(data);
+
+/** 查询低频出入境列表 */
+function getList() {
+  loading.value = true;
+
+  // 准备查询参数
+  const params = {
+    year: queryParams.value.year
+  };
+
+  // 添加分页参数
+  params.pageNum = queryParams.value.pageNum;
+  params.pageSize = queryParams.value.pageSize;
+
+  // 调用列表接口
+  listLowFrequencyInOut(params).then(response => {
+    // 处理列表数据
+    list.value = response.rows || [];
+    total.value = response.total || 0;
+
+    loading.value = false;
+  }).catch(() => {
+    loading.value = false;
+  });
+}
+
+/** 处理分页事件 */
+function handlePagination() {
+  // 分页只更新表格数据，不重新获取统计和图表数据
+  loading.value = true;
+
+  // 准备查询参数
+  const params = {
+    year: queryParams.value.year,
+    pageNum: queryParams.value.pageNum,
+    pageSize: queryParams.value.pageSize
+  };
+
+  listLowFrequencyInOut(params).then(response => {
+    list.value = response.rows || [];
+    total.value = response.total || 0;
+
+    loading.value = false;
+  }).catch(() => {
+    loading.value = false;
+  });
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef");
+  queryParams.value.year = new Date().getFullYear().toString();
+  handleQuery();
+}
+
+/** 处理表格行点击事件 */
+function handleRowClick(row) {
+  detailForm.value = { ...row };
+  detailTitle.value = `详细信息 - ${row.fullName}`;
+  recordDetailOpen.value = true;
+}
+
+/** 改变年份 */
+function changeYear(step) {
+  const currentYear = parseInt(queryParams.value.year);
+  queryParams.value.year = (currentYear + step).toString();
+  handleQuery();
+}
+
+// 初始化时直接查询，使用reactive中设置的默认值
+handleQuery();
+</script>
+
+<style scoped>
+.app-container {
+  padding: 15px;
+}
+
+.el-row {
+  margin-bottom: 15px;
+}
+
+.el-table {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.el-card {
+  border-radius: 8px;
+  border: none;
+}
+</style>

src/views/biz/config/index.vue

@@ -2,13 +2,18 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="年份" prop="holidayYear">
-        <el-date-picker clearable
-                        v-model="queryParams.holidayYear"
-                        type="year"
-                        value-format="YYYY"
-                        placeholder="请选择年份"
-                        @change="handleYearChange">
-        </el-date-picker>
+        <div style="display: flex; align-items: center;">
+          <el-button icon="ArrowLeft" @click="changeYear(-1)" style="margin-right: 10px;"></el-button>
+          <el-date-picker clearable
+                          v-model="queryParams.holidayYear"
+                          type="year"
+                          value-format="YYYY"
+                          placeholder="请选择年份"
+                          @change="handleYearChange"
+                          style="width: 130px">
+          </el-date-picker>
+          <el-button icon="ArrowRight" @click="changeYear(1)" style="margin-left: 10px;"></el-button>
+        </div>
       </el-form-item>
     </el-form>
 
@@ -107,20 +112,15 @@
         <el-form-item label="节假日名称" prop="holidayName">
           <el-input v-model="form.holidayName" placeholder="请输入节假日名称"/>
         </el-form-item>
-        <el-form-item label="开始日期" prop="startDate">
-          <el-date-picker clearable
-                          v-model="form.startDate"
-                          type="date"
-                          value-format="YYYY-MM-DD"
-                          placeholder="请选择开始日期">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="结束日期" prop="endDate">
+        <el-form-item label="日期范围" prop="dateRange">
           <el-date-picker clearable
-                          v-model="form.endDate"
-                          type="date"
+                          v-model="form.dateRange"
+                          type="daterange"
                           value-format="YYYY-MM-DD"
-                          placeholder="请选择结束日期">
+                          range-separator="至"
+                          start-placeholder="开始日期"
+                          end-placeholder="结束日期"
+                          @change="handleDateRangeChange">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
@@ -161,6 +161,7 @@ const data = reactive({
     holidayName: null,
     startDate: null,
     endDate: null,
+    dateRange: null,  // 添加日期范围字段
     createBy: null,
     createTime: null,
     updateBy: null,
@@ -196,6 +197,7 @@ function reset() {
     holidayName: null,
     startDate: null,
     endDate: null,
+    dateRange: null,  // 添加日期范围字段
     createBy: null,
     createTime: null,
     updateBy: null,
@@ -241,6 +243,10 @@ function handleUpdate(row) {
     if (response.data.holidayYear) {
       form.value.holidayYear = response.data.holidayYear.toString();
     }
+    // 设置日期范围
+    if (response.data.startDate && response.data.endDate) {
+      form.value.dateRange = [response.data.startDate, response.data.endDate];
+    }
     open.value = true;
     title.value = "修改节假日配置";
   });
@@ -293,5 +299,26 @@ function handleYearChange(value) {
   handleQuery();
 }
 
+// 改变年份
+function changeYear(offset) {
+  let currentYear = parseInt(queryParams.value.holidayYear) || new Date().getFullYear();
+  let newYear = currentYear + offset;
+  queryParams.value.holidayYear = newYear.toString();
+  handleYearChange(newYear.toString());
+}
+
+// 处理日期范围选择变化
+function handleDateRangeChange(dateRange) {
+  if (dateRange && dateRange.length === 2) {
+    // 将日期范围数组分解为开始日期和结束日期
+    form.value.startDate = dateRange[0];
+    form.value.endDate = dateRange[1];
+  } else {
+    // 清空日期范围时也清空开始和结束日期
+    form.value.startDate = null;
+    form.value.endDate = null;
+  }
+}
+
 getList();
 </script>