添加年假管理页面

src/api/nianjiaguanli/daka-config.js

+import request from '@/utils/request'
+
+// 查询预警结果列表
+export function queryList(query) {
+  return request({
+    url: '/dk/config/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询预警结果详细
+export function getOperationWarnresult(id) {
+  return request({
+    url: '/system/operationWarnresult/' + id,
+    method: 'get'
+  })
+}
+
+// 新增预警结果
+export function addConfig(data) {
+  return request({
+    url: '/dk/config/add',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改预警结果
+export function updateConfig(data) {
+  return request({
+    url: '/dk/config/updateConfig',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除
+export function deleteConfig(id) {
+  console.log(id)
+  return request({
+    url: '/dk/config/deleteConfig/' + id,
+    method: 'delete'
+  })
+}

src/api/nianjiaguanli/daka-record.js

+import request from '@/utils/request'
+import axios from 'axios';
+
+export const exportExcel = (params) => {
+  return request({
+    url: 'dk/record/exportNew',
+    method: 'get',
+    params: params,
+    timeout: 60000,
+    responseType: 'blob', // 重要：指定响应类型为二进制流
+  });
+};
+
+// 查询预警结果列表
+export function queryList(query) {
+  return request({
+    url: '/dk/record/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询预警结果详细
+export function getOperationWarnresult(id) {
+  return request({
+    url: '/system/operationWarnresult/' + id,
+    method: 'get'
+  })
+}
+
+// 新增预警结果
+export function addOperationWarnresult(data) {
+  return request({
+    url: '/system/operationWarnresult',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改预警结果
+export function updateOperationWarnresult(data) {
+  return request({
+    url: '/system/operationWarnresult',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除预警结果
+export function delOperationWarnresult(id) {
+  return request({
+    url: '/system/operationWarnresult/' + id,
+    method: 'delete'
+  })
+}
+
+// 查询考勤组新鲜
+export function queryAttendanceGroup() {
+  return request({
+    url: '/dk/attendanceGroup/queryAttendanceGroup/',
+    method: 'get'
+  })
+}

src/api/nianjiaguanli/guizepeizhi.js

+import request from '@/utils/request'
+
+// 查询考勤组列表
+export function queryList(query) {
+  return request({
+    url: '/nj/rule/config/queryRuleConfig',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询区域列表
+export function queryArea(query) {
+  return request({
+    url: '/dk/config/list',
+    method: 'get',
+    params: query
+  })
+}
+
+
+// 新增考勤组
+export function add(data) {
+  return request({
+    url: '/nj/rule/config/addRuleConfig',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改考勤组
+export function update(data) {
+  return request({
+    url: '/system/attendanceGroup/update',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除考勤组
+export function del(query) {
+  return request({
+    url: '/nj/rule/config/delRule',
+    method: 'get',
+    params: query
+  })
+}
+
+// 
+export function test(query) {
+  return request({
+    url: '/dk/app/getCurrentDayRecord',
+    method: 'get',
+    params: query
+  })
+}
+
+// 删除考勤组
+export function delUser(id) {
+  return request({
+    url: '/nj/rule/config/delUser/' + id,
+    method: 'delete'
+  })
+}

src/api/nianjiaguanli/yueguanli.js

+import request from '@/utils/request'
+
+// 查询考勤组列表
+export function queryList(query) {
+  return request({
+    url: '/nj/balance/manage/query',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询区域列表
+export function queryArea(query) {
+  return request({
+    url: '/dk/config/list',
+    method: 'get',
+    params: query
+  })
+}
+
+
+// 新增考勤组
+export function add(data) {
+  return request({
+    url: '/nj/rule/config/addRuleConfig',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改考勤组
+export function update(data) {
+  return request({
+    url: '/system/attendanceGroup/update',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除考勤组
+export function del(query) {
+  return request({
+    url: '/nj/rule/config/delRule',
+    method: 'get',
+    params: query
+  })
+}
+
+// 
+export function test(query) {
+  return request({
+    url: '/dk/app/getCurrentDayRecord',
+    method: 'get',
+    params: query
+  })
+}
+
+// 删除考勤组
+export function delUser(id) {
+  return request({
+    url: '/nj/rule/config/delUser/' + id,
+    method: 'delete'
+  })
+}

src/views/components/daka/index.vue

         <el-table
           v-loading="loading"
           :data="userList"
+          ref="tableRef"
           @selection-change="handleSelectionChange"
         >
           <el-table-column type="selection" width="50" align="center" />
     },
     message(newVal, oldVal) {
       // 当 prop 变化时执行此函数
-      // console.log('接收到新消息:', newVal, this.userList)
+      console.log('接收到新消息:', newVal, this.userList)
       oldVal = newVal
       // this.handleNewMessage(newVal)
+      this.$refs.tableRef.clearSelection()
+      console.log(newVal.applicableRange)
       this.getList()
     }
   },
       console.log(this.message)
       listUser(this.addDateRange(this.queryParams, this.dateRange)).then(
         (response) => {
-          const groupMemberIds = this.message.members.map(member => member.userId);
-          const availableUsers = response.rows.filter(user => 
-            !groupMemberIds.includes(user.userId)
-          )
-          this.userList = availableUsers
-          this.total = response.total
-          this.loading = false
+          if(this.message.members){
+            const groupMemberIds = this.message.members.map(member => member.userId);
+            const availableUsers = response.rows.filter(user => 
+              !groupMemberIds.includes(user.userId)
+            )
+            this.userList = availableUsers
+            this.total = response.total
+            this.loading = false
+          }else{
+            this.userList = response.rows
+            this.total = response.total
+            this.loading = false
+          }
+            
         }
       )
     },

src/views/daka/attendanceteam/index.vue

 
     // 创建新考勤组
     createNewGroup() {
+      console.log(this.attendanceGroup)
       this.$refs.groupForm.validate(valid => {
         if (valid) {
           // 实际项目中调用API创建

src/views/daka/config/index.vue

         !isNaN(parseFloat(this.formData.lng)) &&
         !isNaN(parseFloat(this.formData.lat)) &&
         this.formData.radius >= 10 &&
-        this.formData.radius <= 5000
+        this.formData.radius <= 500000
       );
     }
   },

src/views/nianjiaguanli/config/index copy.vue

+<template>
+  <div class="attendance-area-config">
+    <div class="page-header">
+      <h1>打卡区域配置</h1>
+      <p>配置打卡区域，包括地点名称、经纬度和打卡半径</p>
+    </div>
+    
+    <div class="content-wrapper">
+      <!-- 区域列表 -->
+      <div class="area-list">
+        <div class="list-header">
+          <h2>区域列表</h2>
+          <!-- <button @click="showAddModal = true" class="btn-add">
+            <i class="fa fa-plus"></i> 添加区域
+          </button> -->
+        </div>
+        
+        <div class="area-table">
+          <table>
+            <thead>
+              <tr>
+                <th>序号</th>
+                <th>地点名称</th>
+                <th>经纬度</th>
+                <th>打卡半径(米)</th>
+                <th>状态</th>
+                <th>操作</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(area, index) in areaList" :key="area.id">
+                <td>{{ index + 1 }}</td>
+                <td>{{ area.name }}</td>
+                <td>{{ area.lng }}, {{ area.lat }}</td>
+                <td>{{ area.radius }}</td>
+                <td>
+                  <span :class="area.enableStatus == '0' ? 'status-enabled' : 'status-disabled'">
+                    {{ area.enableStatus == '0' ? '已启用' : '启用' }}
+                  </span>
+                </td>
+                <td>
+                  <button @click="editArea(area)" class="btn-edit">
+                    <i class="fa fa-pencil"></i> 编辑
+                  </button>
+                  <button 
+                    @click="toggleAreaStatus(area)" 
+                    class="btn-status"
+                    :disabled="area.enableStatus =='0'"
+                  >
+                    <i class="fa fa-toggle-on"></i> {{ area.enableStatus == '0' ? '已启用' : '启用' }}
+                  </button>
+                  <button 
+                    @click="deleteArea(area)" 
+                    class="btn-delete"
+                    :disabled="area.enableStatus == '0'"
+                  >
+                    <i class="fa fa-trash"></i> 删除
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          
+          <div v-if="areaList.length === 0" class="empty-state">
+            <i class="fa fa-map-o"></i>
+            <p>暂无打卡区域，请点击上方"添加区域"按钮创建</p>
+          </div>
+        </div>
+      </div>
+      
+      <!-- 地图选点区域 -->
+      <div class="map-section">
+        <h2>地图选点</h2>
+        <div class="map-controls">
+          <div class="control-group">
+            <label>地点名称:</label>
+            <input v-model="formData.name" type="text" placeholder="请输入地点名称" />
+          </div>
+          <div class="control-group">
+            <label>经度:</label>
+            <input v-model="formData.lng" type="text" placeholder="请输入经度" />
+          </div>
+          <div class="control-group">
+            <label>纬度:</label>
+            <input v-model="formData.lat" type="text" placeholder="请输入纬度" />
+          </div>
+          <div class="control-group">
+            <label>打卡半径(米):</label>
+            <input v-model.number="formData.radius" type="number" min="10" max="5000" step="10" />
+          </div>
+          <div class="radius-slider">
+            <label>调整半径:</label>
+            <input 
+              type="range" 
+              min="10" 
+              max="5000" 
+              step="10" 
+              v-model.number="formData.radius"
+            />
+            <span>{{ formData.radius }}米</span>
+          </div>
+        </div>
+        
+        <!-- <div ref="mapContainer" class="map" :style="{ height: mapHeight }"></div> -->
+        
+        <div class="map-actions">
+          <button @click="clearMapSelection" class="btn-clear">
+            <i class="fa fa-eraser"></i> 清除选择
+          </button>
+          <button 
+            @click="saveArea" 
+            class="btn-save"
+            :disabled="!isFormValid"
+          >
+            <i class="fa fa-save"></i> 保存区域
+          </button>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 确认删除模态框 -->
+    <div v-if="showDeleteModal" class="modal-overlay">
+      <div class="modal-content">
+        <h3>确认删除</h3>
+        <p>确定要删除 "{{ currentDeletingArea.name }}" 区域吗？</p>
+        <div class="modal-actions">
+          <button @click="showDeleteModal = false" class="btn-cancel">取消</button>
+          <button @click="confirmDeleteArea" class="btn-confirm">确认删除</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  queryList,
+  addConfig,
+  deleteConfig,
+  updateConfig
+} from '@/api/daka/daka-config'
+
+export default {
+  name: 'AttendanceAreaConfig',
+  data() {
+    return {
+      // 地图相关
+      map: null,
+      marker: null,
+      circle: null,
+      mapHeight: '400px',
+      baiduMapKey: '你的百度地图API Key', // 替换为你的API Key
+      
+      // 表单数据
+      formData: {
+        id: null,
+        name: '',
+        lng: '116.404', // 默认经度（北京天安门）
+        lat: '39.915',  // 默认纬度（北京天安门）
+        radius: 500,    // 默认半径500米
+        enabled: false
+      },
+      
+      // 区域列表
+      areaList: [],
+      
+      // 模态框状态
+      showDeleteModal: false,
+      currentDeletingArea: null
+    };
+  },
+  computed: {
+    // 表单验证
+    isFormValid() {
+      return (
+        this.formData.name.trim() !== '' &&
+        !isNaN(parseFloat(this.formData.lng)) &&
+        !isNaN(parseFloat(this.formData.lat)) &&
+        this.formData.radius >= 10 &&
+        this.formData.radius <= 5000
+      );
+    }
+  },
+  mounted() {
+    // 加载模拟数据
+    this.loadMockData();
+    
+    // 加载地图
+    this.loadMapScript();
+  },
+  methods: {
+    // 加载模拟数据
+    loadMockData() {
+      // 这里应该从API获取数据，现在使用模拟数据
+      this.areaList = [
+        {
+          id: 1,
+          name: '总部办公楼',
+          lng: 116.404,
+          lat: 39.915,
+          radius: 300,
+          enabled: true
+        },
+        {
+          id: 2,
+          name: '研发中心',
+          lng: 116.414,
+          lat: 39.905,
+          radius: 200,
+          enabled: false
+        },
+        {
+          id: 3,
+          name: '南区仓库',
+          lng: 116.394,
+          lat: 39.925,
+          radius: 500,
+          enabled: false
+        }
+      ];
+      queryList().then((response) => {
+        console.log(response)
+        this.areaList = response
+      })
+
+    },
+    
+    // 加载百度地图脚本
+    loadMapScript() {
+      if (window.BMapGL) {
+        this.initMap();
+        return;
+      }
+      
+      const script = document.createElement('script');
+      script.src = `https://api.map.baidu.com/api?type=webgl&v=1.0&ak=${this.baiduMapKey}`;
+      script.onload = () => {
+        this.initMap();
+      };
+      document.body.appendChild(script);
+    },
+    
+    // 初始化地图
+    initMap() {
+      // 创建地图实例
+      this.map = new window.BMapGL.Map(this.$refs.mapContainer);
+      
+      // 设置中心点和缩放级别
+      const point = new window.BMapGL.Point(this.formData.lng, this.formData.lat);
+      this.map.centerAndZoom(point, 15);
+      
+      // 启用滚轮缩放
+      this.map.enableScrollWheelZoom(true);
+      
+      // 添加常用控件
+      this.map.addControl(new window.BMapGL.NavigationControl());
+      this.map.addControl(new window.BMapGL.ScaleControl());
+      
+      // 添加地图点击事件
+      this.map.addEventListener('click', (e) => {
+        this.formData.lng = e.latlng.lng;
+        this.formData.lat = e.latlng.lat;
+        this.updateMapOverlay();
+      });
+      
+      // 初始化地图覆盖物
+      this.updateMapOverlay();
+    },
+    
+    // 更新地图覆盖物（标记点和圆形区域）
+    updateMapOverlay() {
+      if (!this.map) return;
+      
+      // 清除旧的覆盖物
+      if (this.marker) {
+        this.map.removeOverlay(this.marker);
+      }
+      if (this.circle) {
+        this.map.removeOverlay(this.circle);
+      }
+      
+      // 创建新的标记点
+      const point = new window.BMapGL.Point(this.formData.lng, this.formData.lat);
+      this.marker = new window.BMapGL.Marker(point, {
+        icon: new window.BMapGL.Icon(
+          'https://api.map.baidu.com/library/MassMarkers/1.2/src/images/m0.png',
+          new window.BMapGL.Size(23, 25)
+        )
+      });
+      
+      // 创建圆形区域
+      this.circle = new window.BMapGL.Circle(point, this.formData.radius, {
+        strokeColor: '#409eff',
+        strokeWeight: 2,
+        strokeOpacity: 0.8,
+        fillColor: '#409eff',
+        fillOpacity: 0.2
+      });
+      
+      // 添加覆盖物到地图
+      this.map.addOverlay(this.marker);
+      this.map.addOverlay(this.circle);
+      
+      // 地图居中到标记位置
+      this.map.panTo(point);
+    },
+    
+    // 清除地图选择
+    clearMapSelection() {
+      this.formData = {
+        id: null,
+        name: '',
+        lng: '116.404',
+        lat: '39.915',
+        radius: 500,
+        enabled: false
+      };
+      
+      if (this.map) {
+        this.updateMapOverlay();
+      }
+    },
+    
+    // 保存区域
+    saveArea() {
+      if (!this.isFormValid) return;
+      
+      const newArea = {
+        id: this.formData.id || Date.now(), // 如果是新建，使用时间戳作为ID
+        name: this.formData.name.trim(),
+        lng: parseFloat(this.formData.lng),
+        lat: parseFloat(this.formData.lat),
+        radius: this.formData.radius,
+        enabled: this.formData.enabled
+      };
+      
+      if (this.formData.id) {
+        // 更新现有区域
+        const index = this.areaList.findIndex(area => area.id === this.formData.id);
+        if (index !== -1) {
+          this.areaList.splice(index, 1, newArea);
+        }
+      } else {
+        // 添加新区域
+        this.areaList.push(newArea);
+      }
+      addConfig(this.formData).then((res)=>{
+        console.log(this.formData)
+        console.log(res)
+      })
+      // 重置表单
+      this.clearMapSelection();
+      
+    },
+    
+    // 编辑区域
+    editArea(area) {
+      // 复制对象，避免直接修改原始数据
+      this.formData = { ...area };
+      
+      // 更新地图显示
+      if (this.map) {
+        this.updateMapOverlay();
+      }
+    },
+    
+    // 切换区域状态
+    toggleAreaStatus(area) {
+      if (area.enableStatus == '0') {
+        // 已启用的区域不允许禁用
+        alert('已启用的区域不允许禁用');
+        return;
+      }
+      
+      // 启用区域
+      const index = this.areaList.findIndex(a => a.id === area.id);
+      if (index !== -1) {
+        this.areaList[index].enableStatus = '0';
+      }
+
+      area.enableStatus = '0'
+      updateConfig(area).then((res) => {
+        console.log(res)
+      })
+    },
+    
+    // 删除区域
+    deleteArea(area) {
+      if (area.enabled == '0') {
+        // 已启用的区域不允许删除
+        alert('已启用的区域不允许删除');
+        return;
+      }
+      
+      
+      this.currentDeletingArea = area;
+      this.showDeleteModal = true;
+    },
+    
+    // 确认删除区域
+    confirmDeleteArea() {
+      if (!this.currentDeletingArea) return;
+      
+      this.areaList = this.areaList.filter(
+        area => area.id !== this.currentDeletingArea.id
+      );
+      
+      console.log(this.currentDeletingArea)
+      deleteConfig(this.currentDeletingArea.id).then((res)=> {
+        console.log(res)
+      })
+      
+      this.currentDeletingArea = null;
+      this.showDeleteModal = false;
+    }
+  },
+  beforeDestroy() {
+    // 销毁地图实例
+    if (this.map) {
+      this.map.clearOverlays();
+      this.map.removeEventListener('click');
+      this.map = null;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.attendance-area-config {
+  padding: 20px;
+  font-family: Arial, sans-serif;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.page-header {
+  text-align: center;
+  margin-bottom: 30px;
+}
+
+.page-header h1 {
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.page-header p {
+  color: #666;
+}
+
+.content-wrapper {
+  display: flex;
+  gap: 20px;
+}
+
+.area-list {
+  flex: 1;
+  min-width: 400px;
+}
+
+.list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.list-header h2 {
+  margin: 0;
+  color: #333;
+}
+
+.btn-add {
+  background-color: #409eff;
+  color: white;
+  border: none;
+  padding: 8px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.btn-add:hover {
+  background-color: #3a8ee6;
+}
+
+.area-table {
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.area-table table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.area-table th,
+.area-table td {
+  padding: 10px;
+  text-align: left;
+  border-bottom: 1px solid #eee;
+}
+
+.area-table th {
+  background-color: #f5f7fa;
+  color: #606266;
+  font-weight: bold;
+}
+
+.area-table tr:last-child td {
+  border-bottom: none;
+}
+
+.area-table tr:hover {
+  background-color: #fafafa;
+}
+
+.status-enabled {
+  display: inline-block;
+  padding: 2px 6px;
+  background-color: #e6f7ff;
+  color: #1890ff;
+  border-radius: 3px;
+  font-size: 12px;
+}
+
+.status-disabled {
+  display: inline-block;
+  padding: 2px 6px;
+  background-color: #f5f5f5;
+  color: #999;
+  border-radius: 3px;
+  font-size: 12px;
+}
+
+.btn-edit,
+.btn-status,
+.btn-delete {
+  padding: 5px 10px;
+  margin-right: 5px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  font-size: 12px;
+}
+
+.btn-edit {
+  background-color: #e6f7ff;
+  color: #1890ff;
+}
+
+.btn-edit:hover {
+  background-color: #d6efff;
+}
+
+.btn-status {
+  background-color: #f6ffed;
+  color: #52c41a;
+}
+
+.btn-status:hover {
+  background-color: #e8ffd9;
+}
+
+.btn-status:disabled {
+  background-color: #f5f5f5;
+  color: #999;
+  cursor: not-allowed;
+}
+
+.btn-delete {
+  background-color: #fff2f0;
+  color: #ff4d4f;
+}
+
+.btn-delete:hover {
+  background-color: #ffe5e3;
+}
+
+.btn-delete:disabled {
+  background-color: #f5f5f5;
+  color: #999;
+  cursor: not-allowed;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 50px 20px;
+  color: #999;
+}
+
+.empty-state i {
+  font-size: 40px;
+  margin-bottom: 10px;
+  display: block;
+}
+
+.map-section {
+  flex: 1;
+}
+
+.map-section h2 {
+  margin-top: 0;
+  color: #333;
+}
+
+.map-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  margin-bottom: 15px;
+}
+
+.control-group {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  min-width: 220px;
+}
+
+.control-group label {
+  font-weight: bold;
+  min-width: 80px;
+}
+
+.control-group input {
+  flex: 1;
+  padding: 6px 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.radius-slider {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.radius-slider input[type="range"] {
+  flex: 1;
+}
+
+.map {
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  margin-bottom: 15px;
+}
+
+.map-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.btn-clear,
+.btn-save {
+  padding: 8px 15px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.btn-clear {
+  background-color: #f5f5f5;
+  color: #666;
+}
+
+.btn-clear:hover {
+  background-color: #eee;
+}
+
+.btn-save {
+  background-color: #409eff;
+  color: white;
+}
+
+.btn-save:hover {
+  background-color: #3a8ee6;
+}
+
+.btn-save:disabled {
+  background-color: #e6e6e6;
+  color: #999;
+  cursor: not-allowed;
+}
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background-color: white;
+  border-radius: 4px;
+  padding: 20px;
+  width: 300px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.modal-content h3 {
+  margin-top: 0;
+  color: #333;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 20px;
+}
+
+.btn-cancel,
+.btn-confirm {
+  padding: 8px 15px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.btn-cancel {
+  background-color: #f5f5f5;
+  color: #666;
+}
+
+.btn-cancel:hover {
+  background-color: #eee;
+}
+
+.btn-confirm {
+  background-color: #409eff;
+  color: white;
+}
+
+.btn-confirm:hover {
+  background-color: #3a8ee6;
+}
+
+/* 响应式设计 */
+@media (max-width: 900px) {
+  .content-wrapper {
+    flex-direction: column;
+  }
+  
+  .area-list,
+  .map-section {
+    min-width: auto;
+  }
+}
+
+@media (max-width: 500px) {
+  .control-group {
+    min-width: 100%;
+  }
+  
+  .area-table th,
+  .area-table td {
+    padding: 8px 5px;
+    font-size: 14px;
+  }
+  
+  .btn-edit,
+  .btn-status,
+  .btn-delete {
+    padding: 4px 6px;
+    margin-right: 2px;
+  }
+}
+</style>

src/views/nianjiaguanli/record/index.vue

+<template>
+  <div class="app-container">
+    <el-form
+      v-show="showSearch"
+      ref="queryForm"
+      :model="queryParams"
+      size="small"
+      :inline="true"
+      class="app-container--search"
+    >
+    
+      <el-form-item label="员工姓名" prop="sysUserName">
+        <el-input
+          v-model="queryParams.sysUserName"
+          placeholder="请输入员工姓名"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      
+      <el-form-item label="打卡状态" prop="checkInStatus">
+        <el-select
+          v-model="queryParams.checkInStatus"
+          placeholder="请选择打卡状态"
+          clearable
+        >
+          <el-option
+            v-for="dict in daka_check_in_status"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+        >搜索</el-button>
+        <el-button
+          icon="el-icon-refresh"
+          size="mini"
+          @click="resetQuery"
+        >重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <!-- <el-col :span="1.5">
+        <el-button
+          v-hasPermi="['system:operationWarnresult:remove']"
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+        >删除</el-button>
+      </el-col> -->
+      <el-col :span="1.5">
+        <el-button
+          v-hasPermi="['system:operationWarnresult:export']"
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+        >导出</el-button>
+      </el-col>
+      <el-col :span="8.5">
+        <div class="block">
+          <span class="demonstration">按日</span>
+          <el-date-picker
+            type="date"
+            v-model="queryParams.strDay"
+            size="mini"
+            format="yyyy 年 MM 月 dd 日"
+            value-format="yyyy-MM-dd"
+            placeholder="选择日">
+          </el-date-picker>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          <span class="demonstration">按月</span>
+          <el-date-picker
+            v-model="queryParams.strMonth"
+            type="month"
+            size="mini"
+            format="yyyy 年 MM 月"
+            value-format="yyyy-MM"
+            placeholder="选择月">
+          </el-date-picker>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          <el-select
+            v-model="queryParams.modelType"
+            placeholder="请选择导出模版"
+            size="mini"
+            clearable
+          >
+            <el-option
+              v-for="dict in modelTypeDate"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          <el-select
+            v-model="queryParams.attendanceGroupIds"
+            placeholder="请选择考勤组"
+            size="mini"
+            clearable
+            multiple
+          >
+            <el-option
+              v-for="dict in attendanceGroups"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </div>
+      </el-col>
+      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="resultList"
+      @selection-change="handleSelectionChange"
+    >
+      <!-- <el-table-column type="selection" width="55" align="center" /> -->
+      <el-table-column v-if="false" label="主键ID" align="center" prop="id" />
+      <el-table-column label="员工id" align="center" prop="sysUserName" >
+      </el-table-column>
+      <el-table-column label="员工姓名" align="center" prop="nickName" ></el-table-column>
+      <!-- <el-table-column label="姓名昵称" align="center" prop="nickName" >
+      </el-table-column> -->
+      <el-table-column label="考勤组" align="center" prop="attendanceGroupName" >
+      </el-table-column>
+      <el-table-column   label="打卡时间" align="center" prop="checkInTime">
+      </el-table-column>
+      <el-table-column label="上班打卡状态" align="center" prop="clockInStatus" >
+        <template slot-scope="scope">
+          <span
+            v-if="scope.row.checkInStatus == '0'"
+            style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              text-align: center;
+            "
+          >
+            未打卡
+          </span>
+          <span
+            v-if="scope.row.clockInStatus == '1'"
+            style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              text-align: center;
+            "
+          >
+            上班已打卡
+          </span>
+          <span
+            v-if="scope.row.clockInStatus == '2'"
+            style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              text-align: center;
+            "
+          >
+            下班已打卡
+          </span>
+          <span
+            v-if="scope.row.clockInStatus == '3'"
+            style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              text-align: center;
+            "
+          >
+            迟到打卡
+          </span>
+          <span
+            v-if="scope.row.clockInStatus == '4'"
+            style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              text-align: center;
+            "
+          >
+            早退打卡
+          </span>
+          <span
+            v-if="scope.row.clockInStatus == '5'"
+            style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              text-align: center;
+            "
+          >
+            更新打卡
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="下班打卡状态" align="center" prop="clockOutStatus" >
+        <template slot-scope="scope">
+          <span
+            v-if="scope.row.checkInStatus == '0'"
+            style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              text-align: center;
+            "
+          >
+            未打卡
+          </span>
+          <span
+            v-if="scope.row.clockOutStatus == '1'"
+            style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              text-align: center;
+            "
+          >
+            上班已打卡
+          </span>
+          <span
+            v-if="scope.row.clockOutStatus == '2'"
+            style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              text-align: center;
+            "
+          >
+            下班已打卡
+          </span>
+          <span
+            v-if="scope.row.clockOutStatus == '3'"
+            style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              text-align: center;
+            "
+          >
+            迟到打卡
+          </span>
+          <span
+            v-if="scope.row.clockOutStatus == '4'"
+            style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              text-align: center;
+            "
+          >
+            早退打卡
+          </span>
+          <span
+            v-if="scope.row.clockOutStatus == '5'"
+            style="
+              display: inline-flex;
+              align-items: center;
+              justify-content: center;
+              text-align: center;
+            "
+          >
+            更新打卡
+          </span>
+        </template>
+      </el-table-column>
+      <!-- <el-table-column
+        label="操作"
+        align="center"
+        width="220"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            v-if="scope.row.status == 0"
+            v-hasPermi="['system:operationWarnresult:edit']"
+            size="mini"
+            type="text"
+            icon="el-icon-circle-check"
+            @click="handleDispose(scope.row)"
+          >处理</el-button>
+
+          <span
+            v-else
+            class="text-info"
+            style="margin-right: 10px"
+          >已处理</span>
+
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-camera"
+            @click="handleView(scope.row)"
+          >快照</el-button>
+
+          <el-button
+            v-hasPermi="['system:operationWarnresult:remove']"
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+          >删除</el-button>
+        </template>
+      </el-table-column> -->
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
+      <div class="warn-result" v-html="warnResult" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  queryList,
+  delOperationWarnresult,
+  addOperationWarnresult,
+  updateOperationWarnresult,
+  exportExcel,
+  queryAttendanceGroup
+} from '@/api/daka/daka-record'
+
+import map from '@/views/components/daka/map';
+
+export default {
+  name: 'dakarecord',
+  dicts: [
+    'zs_operation_warn_types',
+    'zs_operation_status',
+    'zs_operation_compare_status',
+    'zs_operation_platform',
+    'daka_check_in_status'
+  ],
+  data() {
+    return {
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 表格数据
+      resultList: [],
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      // 图片快照时间范围
+      daterangeWarnTime: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        sysUserName: undefined,
+        checkInStatus: undefined,
+        exportRange: undefined,
+        strDay: undefined,
+        strMonth: undefined,
+        modelType: undefined,
+        attendanceGroupIds: undefined
+      },
+      modelTypeDate: [{label: '国内', value: 'guonei'},{label: '日本', value: 'riben'}],
+      // 表单参数
+      form: {},
+      // 结果
+      warnResult: '',
+      // 表单校验
+      rules: {
+        snapshotUrl: [
+          { required: true, message: '图片快照不能为空', trigger: 'blur' }
+        ]
+      },
+      daka_check_in_status: [{label: '未打卡', value: '0'},{label: '上班已打卡', value: '1'},{label: '下班已打卡', value: '2'},
+      {label: '迟到打卡', value: '3'},{label: '早退打卡', value: '4'}, {label: '更新打卡', value: '5'}],
+      attendanceGroups: []
+    }
+  },
+  created() {
+    this.getList()
+    this.queryAttendanceGroup()
+  },
+  methods: {
+    queryAttendanceGroup(){
+      queryAttendanceGroup().then((response) => {
+        // console.log(response)
+        const data = response.data
+        const newData = data.map(d => {
+          return {label: d.name, value: d.id}
+        })
+        this.attendanceGroups = newData
+      })
+    },
+    /** 查询结果列表 */
+    getList() {
+      this.loading = true
+      // console.log(this.queryParams)
+      queryList(this.queryParams).then((response) => {
+        this.resultList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: undefined,
+        warnTime: undefined,
+        goodsSkuName: undefined,
+        goodsSkuSn: undefined,
+        initPrice: undefined,
+        curPrice: undefined,
+        priceChangeRatio: undefined,
+        warnTypes: undefined,
+        warnContent: undefined,
+        status: undefined,
+        snapshotUrl: undefined
+      }
+      this.resetForm('form')
+    },
+    /** 处理按钮操作 */
+    handleDispose(row) {
+      const _html = `
+        <p class="warn-result-text">预警商品：<a href="${row.goodsSkuUrl}" target="_blank">${row.goodsSkuName}</a></p>
+        <p class="warn-result-text">预警价格：${row.curPrice}</p>
+        <p class="warn-result-text">预警时间：${row.warnTime}</p>
+        <p class="warn-result-text">预警平台：${row.platform}</p>
+        <p class="warn-result-text">预警备注：${row.remark}</p>
+        <p class="warn-result-text">预警快照：<a href="${row.snapshotUrl}" target="_blank">点击查看</a></p>
+        <p class="warn-result-tips">注：如果点击“稍后处理”，则预警结果将不会被处理，预警状态将不会被修改。如果点击“立即处理”，则当前商品基准价格将会被修改为预警价格，价格监控按照新的基准价格进行监控。</p>
+      `
+      this.$confirm(_html, '提示', {
+        confirmButtonText: '立即处理',
+        cancelButtonText: '稍后处理',
+        dangerouslyUseHTMLString: true,
+        closeOnClickModal: false,
+        closeOnPressEscape: false,
+        showClose: false,
+        customClass: 'warn-result-message'
+      }).then(() => {
+        this.loading = true
+        row.status = 1
+        updateOperationWarnresult(row)
+          .then((response) => {
+            this.$modal.msgSuccess('处理成功')
+            this.open = false
+            this.getList()
+          })
+          .finally(() => {
+            this.loading = false
+          })
+      })
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.daterangeWarnTime = []
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.id)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    handleView(row) {
+      // 将状态设置为已处理
+      this.open = true
+      this.title = '预警结果'
+      this.warnResult = row.warnContent
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.buttonLoading = true
+          if (this.form.id != null) {
+            updateOperationWarnresult(this.form)
+              .then((response) => {
+                this.$modal.msgSuccess('修改成功')
+                this.open = false
+                this.getList()
+              })
+              .finally(() => {
+                this.buttonLoading = false
+              })
+          } else {
+            addOperationWarnresult(this.form)
+              .then((response) => {
+                this.$modal.msgSuccess('新增成功')
+                this.open = false
+                this.getList()
+              })
+              .finally(() => {
+                this.buttonLoading = false
+              })
+          }
+        }
+      })
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids
+      this.$modal
+        .confirm('是否确认删除预警结果编号为"' + ids + '"的数据项？')
+        .then(() => {
+          this.loading = true
+          return delOperationWarnresult(ids)
+        })
+        .then(() => {
+          this.loading = false
+          this.getList()
+          this.$modal.msgSuccess('删除成功')
+        })
+        .catch(() => {})
+        .finally(() => {
+          this.loading = false
+        })
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      console.log(this.queryParams)
+      if(this.queryParams.day && this.queryParams.month){
+        this.$modal.msgError('日，月只能选择一个')
+        return
+      }
+      if(!this.queryParams.strDay && !this.queryParams.strMonth){
+        this.$modal.msgError('日，月必须选择一个')
+        return
+      }
+      if(!this.queryParams.modelType){
+        this.$modal.msgError('必须选择模版!')
+        return
+      }
+      if(!this.queryParams.attendanceGroupIds || this.queryParams.attendanceGroupIds.length == 0){
+        this.$modal.msgError('必须选择所属考勤组!')
+        return
+      }
+      this.download(
+        'dk/record/exportNew',
+        {
+          ...this.queryParams
+        },
+        `kaoqin_${new Date().toLocaleString()}.xls`
+      )
+    }
+  }
+}
+</script>
+<style lang="scss">
+.warn-result table {
+  width: 100% !important;
+}
+.warn-result table td a {
+  display: none;
+}
+.warn-result table img {
+  width: 100% !important;
+}
+.warn-result-message {
+  .warn-result-text {
+    font-size: 14px;
+    color: #303133;
+    a {
+      color: #409eff;
+      text-decoration: underline;
+    }
+  }
+  .warn-result-tips {
+    font-size: 12px;
+    color: #999;
+    margin-top: 10px;
+  }
+}
+</style>
+<style lang="scss" scoped>
+.goods--info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: left;
+  .el-link {
+    font-size: 14px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  em {
+    font-size: 12px;
+    color: #999;
+    font-style: normal;
+  }
+}
+</style>