feat: 新增年假相关API接口，包括年假余额查询、规则设置查询、新增和删除规则、年假休假明细查询及申请功能。更新了相关组件以支持这些功能。

src/api/leave/annual.js

+/**
+ * 年假相关
+ */
+
+import request from '@/utils/request'
+
+/**
+ * 年假余额查询列表
+ * @param {*} query
+ * @returns
+ */
+export function balanceList(query) {
+  return request({
+    url: '/nj/balance/manage/query',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 年假规则设置查询列表
+ * @param {*} query
+ * @returns
+ */
+export function ruleList(query) {
+  return request({
+    url: '/nj/rule/config/queryRuleConfig',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 年假规则新增
+ * @param {*} data
+ * @returns
+ */
+export function addRule(data) {
+  return request({
+    url: '/nj/rule/config/addRuleConfig',
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 年假规则删除
+ * @param {*} query
+ * @returns
+ */
+export function delRule(query) {
+  return request({
+    url: '/nj/rule/config/delRule',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 年假休假明细
+ * @param {*} query
+ * @returns
+ */
+export function detailList(query) {
+  return request({
+    url: '/nj/balance/manage/detail/query',
+    method: 'get',
+    params: query
+  })
+}
+
+/**
+ * 年假新增明细
+ * @param {*} data
+ * @returns
+ */
+export function detailApply(data) {
+  return request({
+    url: '/balance/manage/detail/apply',
+    method: 'post',
+    data
+  })
+}

src/utils/filters.js

   return moment(value).format(format)
 })
 
+// 日期时间格式化过滤器
+Vue.filter('timeFormat', (value, format = 'HH:mm:ss') => {
+  if (!value) return ''
+  return moment(value).format(format)
+})
+
 // 金额格式化过滤器
 Vue.filter('currency', (value, currency = '¥') => {
   if (!value) return '0.00'
 export const formatDate = (value, format = 'YYYY-MM-DD') => {
   if (!value) return ''
   return moment(value).format(format)
+} 
+
+export const formatTime = (value, format = 'HH:mm:ss') => {
+  if (!value) return ''
+  return moment(value).format(format)
 } 

src/views/components/user/sys-dept-user.vue

     append-to-body
     :close-on-click-modal="false"
   >
-    <div class="app-container">
+    <div class="app-container" style="padding-top: 0; padding-bottom: 0;">
       <el-row :gutter="20">
         <!--部门数据-->
         <el-col :span="4" :xs="24">
                 v-model="queryParams.userName"
                 placeholder="请输入用户名称"
                 clearable
-                style="width: 240px"
+                style="width: 200px"
                 @keyup.enter.native="handleQuery"
               />
             </el-form-item>
                 v-model="queryParams.phonenumber"
                 placeholder="请输入手机号码"
                 clearable
-                style="width: 240px"
+                style="width: 200px"
                 @keyup.enter.native="handleQuery"
               />
             </el-form-item>
             </el-form-item>
           </el-form>
 
-          <el-row :gutter="10" class="mb8">
-            <right-toolbar
-              :show-search.sync="showSearch"
-              :columns="columns"
-              @queryTable="getList"
-            />
-          </el-row>
-
           <el-table
             ref="multipleTable"
             v-loading="loading"
             :data="userList"
             :row-key="getRowKey"
             @selection-change="handleSelectionChange"
+            height="400px"
           >
             <el-table-column
               type="selection"
               width="50"
               align="center"
             />
-            <el-table-column
+            <!-- <el-table-column
               v-if="columns[0].visible"
               key="userId"
               label="用户编号"
               align="center"
               prop="userId"
-            />
+            /> -->
             <el-table-column
               v-if="columns[1].visible"
               key="userName"
               prop="dept.deptName"
               :show-overflow-tooltip="true"
             />
-            <el-table-column
+            <!-- <el-table-column
               v-if="columns[4].visible"
               key="phonenumber"
               label="手机号码"
               align="center"
               prop="phonenumber"
               width="120"
-            />
-            <el-table-column
+            /> -->
+            <!-- <el-table-column
               v-if="columns[5].visible"
               label="创建时间"
               align="center"
               <template slot-scope="scope">
                 <span>{{ parseTime(scope.row.createTime) }}</span>
               </template>
-            </el-table-column>
+            </el-table-column> -->
           </el-table>
 
           <pagination
       <el-tag
         v-for="user in chooseUserList"
         :key="user.userId"
-        style="margin: 2px"
+        style="margin: 1px; min-width: 150px;"
         closable
         @close="handleCloseTag(user)"
-      >{{ user.userName }}
+      >{{ user.nickName }}({{ user.userName }})
       </el-tag>
     </div>
     <div slot="footer" class="dialog-footer">
         size="small"
         type="primary"
         @click="confirmUser"
-      >确认</el-button>
+      >确  认</el-button>
       <el-button size="small" @click="visible = false">取 消</el-button>
     </div>
   </el-dialog>

src/views/daka/record/index.vue

       :inline="true"
       class="app-container--search"
     >
-    
       <el-form-item label="员工姓名" prop="sysUserName">
         <el-input
           v-model="queryParams.sysUserName"
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      
+
       <el-form-item label="打卡状态" prop="checkInStatus">
         <el-select
           v-model="queryParams.checkInStatus"
           icon="el-icon-search"
           size="mini"
           @click="handleQuery"
-        >搜索</el-button>
-        <el-button
-          icon="el-icon-refresh"
-          size="mini"
-          @click="resetQuery"
-        >重置</el-button>
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
       </el-form-item>
     </el-form>
 
           icon="el-icon-download"
           size="mini"
           @click="handleExport"
-        >导出</el-button>
+          >导出</el-button
+        >
       </el-col>
       <el-col :span="8.5">
         <div class="block">
             size="mini"
             format="yyyy 年 MM 月 dd 日"
             value-format="yyyy-MM-dd"
-            placeholder="选择日">
+            placeholder="选择日"
+          >
           </el-date-picker>
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           <span class="demonstration">按月</span>
             size="mini"
             format="yyyy 年 MM 月"
             value-format="yyyy-MM"
-            placeholder="选择月">
+            placeholder="选择月"
+          >
           </el-date-picker>
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           <el-select
       :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 label="员工编号" 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
+        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 label="打卡时间" align="center" prop="checkInTime">
       </el-table-column>
-      <el-table-column label="上班打卡状态" align="center" prop="clockInStatus" >
+      <el-table-column label="上班打卡状态" align="center" prop="clockInStatus">
         <template slot-scope="scope">
           <span
             v-if="scope.row.checkInStatus == '0'"
           </span>
         </template>
       </el-table-column>
-      <el-table-column label="下班打卡状态" align="center" prop="clockOutStatus" >
+      <el-table-column
+        label="下班打卡状态"
+        align="center"
+        prop="clockOutStatus"
+      >
         <template slot-scope="scope">
           <span
             v-if="scope.row.checkInStatus == '0'"
           </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
   addOperationWarnresult,
   updateOperationWarnresult,
   exportExcel,
-  queryAttendanceGroup
-} from '@/api/daka/daka-record'
+  queryAttendanceGroup,
+} from "@/api/daka/daka-record";
 
-import map from '@/views/components/daka/map';
+import map from "@/views/components/daka/map";
 
 export default {
-  name: 'dakarecord',
+  name: "dakarecord",
   dicts: [
-    'zs_operation_warn_types',
-    'zs_operation_status',
-    'zs_operation_compare_status',
-    'zs_operation_platform',
-    'daka_check_in_status'
+    "zs_operation_warn_types",
+    "zs_operation_status",
+    "zs_operation_compare_status",
+    "zs_operation_platform",
+    "daka_check_in_status",
   ],
   data() {
     return {
       // 表格数据
       resultList: [],
       // 弹出层标题
-      title: '',
+      title: "",
       // 是否显示弹出层
       open: false,
       // 图片快照时间范围
         strDay: undefined,
         strMonth: undefined,
         modelType: undefined,
-        attendanceGroupIds: undefined
+        attendanceGroupIds: undefined,
       },
-      modelTypeDate: [{label: '国内', value: 'guonei'},{label: '日本', value: 'riben'}],
+      modelTypeDate: [
+        { label: "国内", value: "guonei" },
+        { label: "日本", value: "riben" },
+      ],
       // 表单参数
       form: {},
       // 结果
-      warnResult: '',
+      warnResult: "",
       // 表单校验
       rules: {
         snapshotUrl: [
-          { required: true, message: '图片快照不能为空', trigger: 'blur' }
-        ]
+          { 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: []
-    }
+      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()
+    this.getList();
+    this.queryAttendanceGroup();
   },
   methods: {
-    queryAttendanceGroup(){
+    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
-      })
+        const data = response.data;
+        const newData = data.map((d) => {
+          return { label: d.name, value: d.id };
+        });
+        this.attendanceGroups = newData;
+      });
     },
     /** 查询结果列表 */
     getList() {
-      this.loading = true
+      this.loading = true;
       // console.log(this.queryParams)
       queryList(this.queryParams).then((response) => {
-        this.resultList = response.rows
-        this.total = response.total
-        this.loading = false
-      })
+        this.resultList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
     },
     // 取消按钮
     cancel() {
-      this.open = false
-      this.reset()
+      this.open = false;
+      this.reset();
     },
     // 表单重置
     reset() {
         warnTypes: undefined,
         warnContent: undefined,
         status: undefined,
-        snapshotUrl: undefined
-      }
-      this.resetForm('form')
+        snapshotUrl: undefined,
+      };
+      this.resetForm("form");
     },
     /** 处理按钮操作 */
     handleDispose(row) {
         <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: '稍后处理',
+      `;
+      this.$confirm(_html, "提示", {
+        confirmButtonText: "立即处理",
+        cancelButtonText: "稍后处理",
         dangerouslyUseHTMLString: true,
         closeOnClickModal: false,
         closeOnPressEscape: false,
         showClose: false,
-        customClass: 'warn-result-message'
+        customClass: "warn-result-message",
       }).then(() => {
-        this.loading = true
-        row.status = 1
+        this.loading = true;
+        row.status = 1;
         updateOperationWarnresult(row)
           .then((response) => {
-            this.$modal.msgSuccess('处理成功')
-            this.open = false
-            this.getList()
+            this.$modal.msgSuccess("处理成功");
+            this.open = false;
+            this.getList();
           })
           .finally(() => {
-            this.loading = false
-          })
-      })
+            this.loading = false;
+          });
+      });
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1
-      this.getList()
+      this.queryParams.pageNum = 1;
+      this.getList();
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.daterangeWarnTime = []
-      this.resetForm('queryForm')
-      this.handleQuery()
+      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
+      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
+      this.open = true;
+      this.title = "预警结果";
+      this.warnResult = row.warnContent;
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs['form'].validate((valid) => {
+      this.$refs["form"].validate((valid) => {
         if (valid) {
-          this.buttonLoading = true
+          this.buttonLoading = true;
           if (this.form.id != null) {
             updateOperationWarnresult(this.form)
               .then((response) => {
-                this.$modal.msgSuccess('修改成功')
-                this.open = false
-                this.getList()
+                this.$modal.msgSuccess("修改成功");
+                this.open = false;
+                this.getList();
               })
               .finally(() => {
-                this.buttonLoading = false
-              })
+                this.buttonLoading = false;
+              });
           } else {
             addOperationWarnresult(this.form)
               .then((response) => {
-                this.$modal.msgSuccess('新增成功')
-                this.open = false
-                this.getList()
+                this.$modal.msgSuccess("新增成功");
+                this.open = false;
+                this.getList();
               })
               .finally(() => {
-                this.buttonLoading = false
-              })
+                this.buttonLoading = false;
+              });
           }
         }
-      })
+      });
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const ids = row.id || this.ids
+      const ids = row.id || this.ids;
       this.$modal
         .confirm('是否确认删除预警结果编号为"' + ids + '"的数据项？')
         .then(() => {
-          this.loading = true
-          return delOperationWarnresult(ids)
+          this.loading = true;
+          return delOperationWarnresult(ids);
         })
         .then(() => {
-          this.loading = false
-          this.getList()
-          this.$modal.msgSuccess('删除成功')
+          this.loading = false;
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
         })
         .catch(() => {})
         .finally(() => {
-          this.loading = false
-        })
+          this.loading = false;
+        });
     },
     /** 导出按钮操作 */
     handleExport() {
-      console.log(this.queryParams)
-      if(this.queryParams.day && this.queryParams.month){
-        this.$modal.msgError('日，月只能选择一个')
-        return
+      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.strDay && !this.queryParams.strMonth) {
+        this.$modal.msgError("日，月必须选择一个");
+        return;
       }
-      if(!this.queryParams.modelType){
-        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
+      if (
+        !this.queryParams.attendanceGroupIds ||
+        this.queryParams.attendanceGroupIds.length == 0
+      ) {
+        this.$modal.msgError("必须选择所属考勤组!");
+        return;
       }
       this.download(
-        'dk/record/exportNew',
+        "dk/record/exportNew",
         {
-          ...this.queryParams
+          ...this.queryParams,
         },
         `kaoqin_${new Date().toLocaleString()}.xls`
-      )
-    }
-  }
-}
+      );
+    },
+  },
+};
 </script>
 <style lang="scss">
 .warn-result table {

src/views/oa/attendance/history/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-form-item label="考勤日期" prop="strDay">
+        <el-date-picker
+          type="date"
+          v-model="queryParams.strDay"
+          format="yyyy 年 MM 月 dd 日"
+          value-format="yyyy-MM-dd"
+          placeholder="选择日期"
+        >
+        </el-date-picker>
+      </el-form-item>
+
+      <el-form-item label="员工编号" prop="sysUserName">
         <el-input
           v-model="queryParams.sysUserName"
-          placeholder="请输入员工姓名"
+          placeholder="请输入员工编号"
           clearable
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      
+
       <el-form-item label="打卡状态" prop="checkInStatus">
         <el-select
           v-model="queryParams.checkInStatus"
           icon="el-icon-search"
           size="mini"
           @click="handleQuery"
-        >搜索</el-button>
-        <el-button
-          icon="el-icon-refresh"
-          size="mini"
-          @click="resetQuery"
-        >重置</el-button>
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+      <el-form-item style="float: right">
+        <el-button type="warning" @click="handleExportSet"
+          >导出考勤数据</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 v-loading="loading" :data="resultList">
+      <el-table-column label="序号" type="index" width="100"> </el-table-column>
+      <el-table-column label="员工编号" width="120" prop="sysUserName">
       </el-table-column>
-      <el-table-column label="上班打卡状态" align="center" prop="clockInStatus" >
+      <el-table-column
+        label="员工姓名"
+        prop="nickName"
+        width="120"
+      ></el-table-column>
+      <el-table-column
+        label="考勤组"
+        width="200"
+        prop="attendanceGroupName"
+      ></el-table-column>
+      <el-table-column label="上班" width="200">
         <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 style="color: #909399" v-if="scope.row.checkInStatus == '0'">
+            <!-- 上班未打卡 -->
             未打卡
           </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;
-            "
+            style="color: #409eff"
+            v-else-if="scope.row.clockInStatus == '1'"
           >
-            下班已打卡
-          </span>
-          <span
-            v-if="scope.row.clockInStatus == '3'"
-            style="
-              display: inline-flex;
-              align-items: center;
-              justify-content: center;
-              text-align: center;
-            "
+            <!--上班已打卡-->
+            正常 {{ formatTime(scope.row.clockIn) }}</span
           >
-            迟到打卡
-          </span>
           <span
-            v-if="scope.row.clockInStatus == '4'"
-            style="
-              display: inline-flex;
-              align-items: center;
-              justify-content: center;
-              text-align: center;
-            "
+            style="color: #f56c6c"
+            v-else-if="scope.row.clockInStatus == '3'"
           >
-            早退打卡
+            迟到 {{ formatTime(scope.row.clockIn) }}
           </span>
-          <span
-            v-if="scope.row.clockInStatus == '5'"
-            style="
-              display: inline-flex;
-              align-items: center;
-              justify-content: center;
-              text-align: center;
-            "
-          >
-            更新打卡
+          <span v-else>
+            {{ scope.row.clockInStatus }}
           </span>
         </template>
       </el-table-column>
-      <el-table-column label="下班打卡状态" align="center" prop="clockOutStatus" >
+      <el-table-column label="下班" width="200">
         <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 style="color: #909399" v-if="scope.row.clockOutStatus == '0'">
+            <!-- 下班未打卡 -->
             未打卡
           </span>
           <span
-            v-if="scope.row.clockOutStatus == '1'"
-            style="
-              display: inline-flex;
-              align-items: center;
-              justify-content: center;
-              text-align: center;
-            "
+            style="color: #409eff"
+            v-else-if="scope.row.clockOutStatus == '2'"
           >
-            上班已打卡
-          </span>
-          <span
-            v-if="scope.row.clockOutStatus == '2'"
-            style="
-              display: inline-flex;
-              align-items: center;
-              justify-content: center;
-              text-align: center;
-            "
+            <!--下班已打卡-->
+            正常 {{ formatTime(scope.row.clockOut) }}</span
           >
-            下班已打卡
-          </span>
           <span
-            v-if="scope.row.clockOutStatus == '3'"
-            style="
-              display: inline-flex;
-              align-items: center;
-              justify-content: center;
-              text-align: center;
-            "
+            style="color: #f56c6c"
+            v-else-if="scope.row.clockOutStatus == '4'"
           >
-            迟到打卡
+            早退 {{ formatTime(scope.row.clockOut) }}
           </span>
           <span
-            v-if="scope.row.clockOutStatus == '4'"
-            style="
-              display: inline-flex;
-              align-items: center;
-              justify-content: center;
-              text-align: center;
-            "
+            style="color: #f56c6c"
+            v-else-if="scope.row.clockOutStatus == '5'"
           >
-            早退打卡
+            更新 {{ formatTime(scope.row.clockOut) }}
           </span>
-          <span
-            v-if="scope.row.clockOutStatus == '5'"
-            style="
-              display: inline-flex;
-              align-items: center;
-              justify-content: center;
-              text-align: center;
-            "
-          >
-            更新打卡
+          <span v-else>
+            {{ scope.row.clockOutStatus }}
           </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-column label="备注" prop="description"></el-table-column>
     </el-table>
 
     <pagination
       @pagination="getList"
     />
 
-    <!-- 添加或修改对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body>
-      <div class="warn-result" v-html="warnResult" />
+    <el-dialog
+      title="导出考勤数据"
+      :visible.sync="open"
+      width="460px"
+      append-to-body
+    >
+      <el-form :model="exportFormData" label-position="top">
+        <el-form-item label="选择区域">
+          <el-select
+            v-model="exportFormData.modelType"
+            clearable
+            style="width: 100%"
+          >
+            <el-option
+              v-for="dict in modelTypeDate"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="选择月份" prop="strMonth">
+          <el-date-picker
+            v-model="exportFormData.strMonth"
+            type="month"
+            format="yyyy 年 MM 月"
+            value-format="yyyy-MM"
+            placeholder="选择月"
+            style="width: 100%"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="选择考勤组(支持多选)">
+          <el-select
+            v-model="exportFormData.attendanceGroupIds"
+            placeholder="请选择考勤组"
+            clearable
+            multiple
+            style="width: 100%"
+          >
+            <el-option
+              v-for="dict in attendanceGroups"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="open = false">取 消</el-button>
+        <el-button
+          type="primary"
+          :disabled="exportDisabled"
+          @click="handleExport"
+          >确 定</el-button
+        >
+      </span>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import {
-  queryList,
-  delOperationWarnresult,
-  addOperationWarnresult,
-  updateOperationWarnresult,
-  exportExcel,
-  queryAttendanceGroup
-} from '@/api/daka/daka-record'
-
-import map from '@/views/components/daka/map';
+import { queryList, queryAttendanceGroup } from "@/api/daka/daka-record";
+import { formatTime } from "@/utils/filters";
 
 export default {
-  name: 'dakarecord',
-  dicts: [
-    'zs_operation_warn_types',
-    'zs_operation_status',
-    'zs_operation_compare_status',
-    'zs_operation_platform',
-    'daka_check_in_status'
-  ],
+  name: "AttendanceHistory",
   data() {
     return {
-      // 按钮loading
-      buttonLoading: false,
       // 遮罩层
       loading: true,
-      // 选中数组
-      ids: [],
-      // 非单个禁用
-      single: true,
       // 非多个禁用
       multiple: true,
       // 显示搜索条件
       total: 0,
       // 表格数据
       resultList: [],
-      // 弹出层标题
-      title: '',
       // 是否显示弹出层
       open: false,
-      // 图片快照时间范围
-      daterangeWarnTime: [],
       // 查询参数
       queryParams: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 50,
         sysUserName: undefined,
         checkInStatus: undefined,
         exportRange: undefined,
         strMonth: undefined,
         modelType: undefined,
         attendanceGroupIds: undefined,
-        flag: 'all'
+        flag: "all",
       },
-      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: []
-    }
+      exportFormData: {},
+      modelTypeDate: [
+        { label: "国内", value: "guonei" },
+        { label: "日本", value: "riben" },
+      ],
+      daka_check_in_status: [
+        { label: "未打卡", value: "0" },
+        { label: "上班已打卡", value: "1" },
+        { label: "下班已打卡", value: "2" },
+        { label: "迟到打卡", value: "3" },
+        { label: "早退打卡", value: "4" },
+        { label: "更新打卡", value: "5" },
+      ],
+      attendanceGroups: [],
+      exportDisabled: false,
+    };
   },
   created() {
-    this.getList()
-    this.queryAttendanceGroup()
+    this.getList();
   },
   methods: {
-    queryAttendanceGroup(){
+    formatTime,
+    handleExportSet() {
+      this.queryAttendanceGroup();
+      this.open = true;
+    },
+    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
-      })
+        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)
+      this.loading = true;
       queryList(this.queryParams).then((response) => {
-        this.resultList = response.rows
-        this.total = response.total
-        this.loading = false
-      })
+        this.resultList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
     },
     // 取消按钮
     cancel() {
-      this.open = false
-      this.reset()
+      this.open = false;
+      this.reset();
     },
     // 表单重置
     reset() {
         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
-          })
-      })
+        snapshotUrl: undefined,
+      };
+      this.resetForm("form");
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1
-      this.getList()
+      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
-        })
+      this.resetForm("queryForm");
+      this.handleQuery();
     },
+
     /** 导出按钮操作 */
     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',
+        "dk/record/exportNew",
         {
-          ...this.queryParams
+          ...this.exportFormData,
         },
-        `kaoqin_${new Date().toLocaleString()}.xls`
-      )
-    }
-  }
-}
+        `考勤_${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>