feat: ✨ 完成加班审批

components.d.ts

@@ -52,6 +52,7 @@ declare module '@vue/runtime-core' {
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
     ElUpload: typeof import('element-plus/es')['ElUpload']
+    Files: typeof import('./src/components/files.vue')['default']
     Loading: typeof import('./src/components/Loading/index.vue')['default']
     Pagination: typeof import('./src/components/TableBase/components/Pagination.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/api/workAttendance/index.ts

@@ -18,6 +18,8 @@ export const Leave_Edit = (params: any) => $http.post('api/ams/Leave/Edit', para
 export const Leave_Approval = (params: any) => $http.post('api/ams/Leave/Approval', params)
 // 删除
 export const Leave_Del = (params: any) => $http.post('api/ams/Leave/Del', params)
+// 请假剩余时长
+export const Leave_DaysOff = (params: any) => $http.post('/api/ams/Leave/DaysOff', params)
 /**
  * 加班
  */

src/layouts/Header/Breadcrumb.vue

@@ -1,30 +1,36 @@
-<!-- <script setup lang="ts">
+<script setup lang="ts">
+import { computed } from 'vue'
 import { ArrowRight } from '@element-plus/icons-vue'
-import { GlobalStore } from '@/stores/index'
-const globalStore = GlobalStore()
-</script>
+import { useRoute, useRouter } from 'vue-router'
 
-<template>
-  <div>
-    <el-breadcrumb :separator-icon="ArrowRight">
-      <el-breadcrumb-item v-for="(item, index) in globalStore.GET_Breadcrumb" :key="index">{{
-        item
-      }}</el-breadcrumb-item>
-    </el-breadcrumb>
-  </div>
-</template>
+const route = useRoute()
+const router = useRouter()
+
+const breadcrumbList = computed(() => {
+  return route.matched
+})
 
-<style scoped></style> -->
+const reg = /\w/g
+const isUnicode = (val: string | undefined) => {
+  if (!val) return false
+  return reg.test(val)
+}
+
+const onBreadcrumbClick = (item: any, index: number) => {
+  if (index !== breadcrumbList.value.length - 1) router.push(item.path)
+}
+</script>
 
 <template>
   <div class="breadcrumb-box">
     <el-breadcrumb :separator-icon="ArrowRight">
-      <transition-group name="breadcrumb" mode="out-in">
+      <transition-group appear name="breadcrumb">
         <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="item.path">
           <div class="el-breadcrumb__inner is-link" @click="onBreadcrumbClick(item, index)">
-            <el-icon class="breadcrumb-icon" v-show="item.meta.icon">
+            <el-icon class="breadcrumb-icon" v-if="isUnicode(item.meta.icon as string)">
               <component :is="item.meta.icon"></component>
             </el-icon>
+            <i v-else class="iconfont el-icon">{{ item.meta.icon }}</i>
             <span class="breadcrumb-title">{{ item.meta.title }}</span>
           </div>
         </el-breadcrumb-item>
@@ -33,42 +39,6 @@ const globalStore = GlobalStore()
   </div>
 </template>
 
-<script setup lang="ts">
-import { computed } from 'vue'
-import { GlobalStore } from '@/stores/index'
-// import { AuthStore } from '@/stores/modules/auth'
-import { ArrowRight } from '@element-plus/icons-vue'
-import { useRoute, useRouter } from 'vue-router'
-// import { HOME_URL } from '@/config/config'
-
-const route = useRoute()
-const router = useRouter()
-// const authStore = AuthStore()
-const globalStore = GlobalStore()
-// const themeConfig = computed(() => globalStore.themeConfig)
-console.log(route, route.matched.length - 1)
-
-const breadcrumbList = computed(() => {
-  // let breadcrumbData: any = []
-  console.log(route.matched[route.matched.length - 1].path)
-  if (!globalStore.allBreadcrumbList) return []
-
-  // let breadcrumbData: any = globalStore.GET_Menu_List[] ?? []
-  let breadcrumbData = globalStore.allBreadcrumbList[route.matched[route.matched.length - 1].path] ?? []
-  console.log(breadcrumbData)
-  console.log(globalStore.allBreadcrumbList[''])
-  // 🙅‍♀️不需要首页面包屑可删除以下判断
-  if (breadcrumbData.length > 0 && breadcrumbData[0].T_name !== route.meta.title) {
-    breadcrumbData = [{ path: globalStore.path, meta: { icon: 'HomeFilled', title: '首页' } }, ...breadcrumbData]
-  }
-  return []
-})
-
-const onBreadcrumbClick = (item: Menu.MenuOptions, index: number) => {
-  if (index !== breadcrumbList.value.length - 1) router.push(item.path)
-}
-</script>
-
 <style scoped lang="scss">
 .breadcrumb-box {
   display: flex;
@@ -85,17 +55,17 @@ const onBreadcrumbClick = (item: Menu.MenuOptions, index: number) => {
       .el-breadcrumb__inner {
         display: inline-flex;
         .breadcrumb-icon {
-          margin-top: 2px;
+          // margin-top: 2px;
           margin-right: 6px;
           font-size: 16px;
         }
         .breadcrumb-title {
-          margin-top: 3px;
+          // margin-top: 3px;
         }
       }
       :deep(.el-breadcrumb__separator) {
         position: relative;
-        top: -1px;
+        // top: -1px;
       }
     }
   }

src/layouts/Header/index.vue

@@ -24,7 +24,7 @@ const logOut = () => {
           link
           @click="globalStore.SET_isCollapse"
         ></el-button>
-        <!-- <Breadcrumb></Breadcrumb> -->
+        <Breadcrumb></Breadcrumb>
       </el-col>
       <el-col :span="2" class="notice">
         <el-dropdown>

src/layouts/Main/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, provide, beforeRouteUpdate } from 'vue'
+import { useRoute } from 'vue-router'
 // import { KeepAliveStore } from '@/stores/modules/keepAlive'
 // const isRouterShow = ref(true)
 // const refreshCurrentPage = (val: boolean) => {
@@ -22,10 +23,13 @@ import { ref, provide, beforeRouteUpdate } from 'vue'
 //   this.$router.isBack = false
 //   next()
 // }
+const route = useRoute()
+const defaultActive = ref<string>(route.path)
+console.log(route.path)
 </script>
 
 <template>
-  <el-main>
+  <el-main v-if="route.path !== '/index'">
     <router-view v-slot="{ Component, route }">
       <transition appear name="fade-transform" mode="out-in">
         <component :is="Component" :key="route.path" />
@@ -36,6 +40,7 @@ import { ref, provide, beforeRouteUpdate } from 'vue'
       </keep-alive> -->
     </router-view>
   </el-main>
+  <div v-else>123</div>
 </template>
 
 <style scoped lang="scss">

src/router/modules/staticRouter.ts

@@ -8,8 +8,9 @@ export const staticRouter: RouteRecordRaw[] = [
     path: '/index',
     name: 'Index',
     component: () => import('@/views/Index.vue'),
+    // redirect: '/home',
     meta: {
-      title: '首页'
+      title: '起始页'
     },
     children: [
       {
@@ -17,7 +18,8 @@ export const staticRouter: RouteRecordRaw[] = [
         name: 'Home',
         component: () => import('@/views/home/index.vue'),
         meta: {
-          title: '首页'
+          title: '首页',
+          icon: 'HomeFilled'
         }
       },
       {

src/stores/index.ts

@@ -60,7 +60,7 @@ export const GlobalStore = defineStore({
         this.MenuList = res.Data.Data
         hanlderMenuList(res.Data.Data)
         this.allBreadcrumbList = getAllBreadcrumbList(res.Data.Data)
-        console.log(this.allBreadcrumbList)
+        // console.log(this.allBreadcrumbList)
       }
     }
   }

src/utils/common.ts

@@ -1,5 +1,7 @@
 import md5 from 'js-md5'
 import dayjs from 'dayjs'
+import * as qiniu from 'qiniu-js'
+
 /**
  * md5 加密
  * @param val string
@@ -47,5 +49,109 @@ export const getAllBreadcrumbList = (menuList: any, result: { [key: string]: any
 //   },
 
 export const hanlderMenuList = (menuList: any) => {
-  console.log(menuList)
+  // console.log(menuList)
+}
+/**
+ * 分钟转小时
+ * @param time
+ */
+export const getFormatDuration = (time: number) => {
+  let hour = 0
+  let minute = 0
+  let result = ''
+  if (time >= 60) {
+    hour = time / 60
+    minute = time % 60
+  } else {
+    minute = time
+  }
+  if (minute > 0) {
+    result = '' + parseInt(minute + '') + '分' + result
+  }
+  if (hour > 0) {
+    result = '' + parseInt(hour + '') + '小时' + result
+  }
+  return result
 }
+
+/**
+ *
+ * @param {*} file 上传的文件
+ * @param {*} token 上传需要的token
+ */
+export const qiniuUpLoadFun = (file: any, token: any) => {
+  //七牛上传方法
+  return new Promise(function (resolve) {
+    let timestamp = new Date().valueOf()
+    let params = {
+      file: file, //要上传的文件
+      key: 'paper_file/' + timestamp + file.name, //自定义文件地址
+      token: token,
+      config: {
+        useCdnDomain: false,
+        // region: undefined,
+        region: qiniu.region.z2,
+        domin: 'https://qiniu.region.z2',
+        chunkSize: 1000
+      },
+      putExtra: {
+        fname: file.name,
+        params: {},
+        mimeType: [] || null
+      }
+    }
+    console.log('domin')
+    resolve(params)
+  })
+  // .then(function (params) {
+  //   return upLoadQiniu(params)
+  // })
+}
+export function upLoadQiniu(params: any) {
+  let observable = qiniu.upload(params.file, params.key, params.token, params.putExtra, params.config)
+  let observer = {
+    next(res: any) {
+      // console.log(res);
+      console.log('上传中', res)
+    },
+    error(err: any) {
+      console.log(err)
+    },
+    complete(res: any) {
+      // let url = 'http://xxxxxx.cn/' + res.key
+      // layer.close(loading) //关闭loading效果
+      console.log(res)
+      // resolve(url)
+    }
+  }
+  observable.subscribe(observer)
+}
+
+// export function upLoadQiniu(params: any) {
+//   //上传至七牛云
+//   return new Promise(function (resolve: any) {
+//     // let loading = layer.load(1, {
+//     //   //请求未成功时出现loading页 ,3代表一种效果
+//     //   shade: [0.1, '#fff'] //0.1透明度的白色背景
+//     // })
+//     // 上传回调
+//     function next(res: any) {
+//       // console.log(res);
+//       console.log('上传中')
+//     }
+//     function error(err: any) {
+//       console.log(err)
+//     }
+//     function complete(res: any) {
+//       // let url = 'http://xxxxxx.cn/' + res.key
+//       // layer.close(loading) //关闭loading效果
+//       console.log(res)
+//       // resolve(url)
+//     }
+//     console.log(qiniu.upload)
+//     let observable = qiniu.upload(params.file, params.key, params.token, params.putExtra, params.config)
+//     console.log(observable)
+//     // let subscription = observable.subscribe(next, error, complete) // 这样传参形式也可以
+//     // subscription.unsubscribe() // 上传取消
+//   })
+// }

src/views/workAttendance/MyLeave.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, nextTick } from 'vue'
-import { Leave_User_list, LeaveType_List, Leave_Add, Leave_Edit, Leave_Del } from '@/api/workAttendance/index'
+import {
+  Leave_User_list,
+  LeaveType_List,
+  Leave_Add,
+  Leave_Edit,
+  Leave_Del,
+  Leave_DaysOff
+} from '@/api/workAttendance/index'
 import { User_List } from '@/api/user/index'
 import TableBase from '@/components/TableBase/index.vue'
 import Drawer from '@/components/Drawer/index.vue'
@@ -155,12 +162,18 @@ const getApproverInfo = (row: any) => {
   dialog.value.DialogClose()
 }
 
+const getLeaveDaysOff = async () => {
+  const res = await Leave_DaysOff({ User_tokey: globalStore.GET_User_tokey })
+  console.log(res)
+}
+
 const onResize = () => {
   const height = document.documentElement.clientHeight
   return height / 2
 }
 onMounted(() => {
   getLeaveTypeList()
+  getLeaveDaysOff()
 })
 </script>
 
@@ -189,9 +202,10 @@ onMounted(() => {
     </TableBase>
     <Drawer ref="drawerRef" :handleClose="callbackDrawer">
       <template #header="{ params }">
-        <h4 :id="params.titleId" :class="params.titleClass">{{ isNew ? '添加' : '编辑' }} - 角色</h4>
+        <h4 :id="params.titleId" :class="params.titleClass">{{ isNew ? '请假' : '编辑' }} - 申请</h4>
       </template>
       <el-form ref="ruleFormRef" :model="form" :rules="rules">
+        <span class="daysOff">剩余可调休时长：<el-tag type="danger" effect="dark"> 1小时19分 </el-tag></span>
         <el-form-item label="请假类型：" :label-width="formLabelWidth" prop="T_type">
           <el-select v-model="form.T_type" placeholder="请选择类型">
             <el-option v-for="item in LeaveType" :key="item.Id" :label="item.T_name" :value="item.Id" />
@@ -279,4 +293,8 @@ onMounted(() => {
   display: flex;
   align-items: center;
 }
+.daysOff {
+  margin-bottom: 1rem;
+  display: inline-block;
+}
 </style>

src/views/workAttendance/MyOvertime.vue

@@ -12,7 +12,7 @@ import { User_List } from '@/api/user/index'
 import { UpFileToken } from '@/api/public/index'
 import Dialog from '@/components/dialog/Dialog.vue'
 import Drawer from '@/components/Drawer/index.vue'
-import { Edit, Delete, ZoomIn, Download, Plus } from '@element-plus/icons-vue'
+import { Edit, Delete, View, Plus } from '@element-plus/icons-vue'
 import type {
   FormInstance,
   FormRules,
@@ -25,10 +25,12 @@ import type {
 import { ElMessageBox, ElMessage, genFileId } from 'element-plus'
 import { floatReg } from '@/views/salary/salary/relus'
 import { GlobalStore } from '@/stores/index'
-import { dayJs } from '@/utils/common'
+import { dayJs, getFormatDuration, qiniuUpLoadFun, upLoadQiniu } from '@/utils/common'
+
 const globalStore = GlobalStore()
 
 const TableRef = ref()
+const TableStatRef = ref()
 const columns: ColumnProps[] = [
   { prop: 'T_start_time', label: '开始时间' },
   { prop: 'T_end_time', label: '结束时间' },
@@ -49,22 +51,61 @@ const initParam = {
 const openDrawerOvertime = (str: string, row: any) => {
   drawerRef.value.openDrawer()
   if (str === 'edit') {
-    // isNew = false
-    // nextTick(() => {
-    //   form.value = { ...row }
-    //   uuid = row.T_approver
-    //   form.value.T_approver = row.T_user_name
-    //   form.value.T_id = row.Id
-    // })
+    isNew = false
+    nextTick(() => {
+      form.value = { ...row }
+      uuid = row.T_approver
+      form.value.T_approver = row.T_user_name
+      form.value.T_id = row.Id
+    })
   }
 }
-const OvertimeDelete = (row: any) => {}
+const disabled = ref(false)
+const OvertimeView = (row: any) => {
+  disabled.value = true
+  drawerRef.value.openDrawer()
+  nextTick(() => {
+    form.value = { ...row }
+    form.value.T_approver = row.T_user_name
+  })
+}
+const OvertimeDelete = (row: any) => {
+  ElMessageBox.confirm('您确定要删除加班申请吗?', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(async () => {
+      const res: any = await Overtime_Del({ User_tokey: globalStore.GET_User_tokey, T_id: row.Id })
+      if (res.Code === 200) {
+        ElMessage({
+          type: 'success',
+          message: '删除成功！'
+        })
+        nextTick(() => {
+          TableRef.value.getTableList()
+        })
+      }
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'warning',
+        message: '取消成功！'
+      })
+    })
+}
 const AddOvertime = (formEl: FormInstance | undefined) => {
   if (!formEl) return
+  if (!prove_img) {
+    ElMessage({
+      type: 'warning',
+      message: `请等待图片上传完成`
+    })
+    return
+  }
   formEl.validate(async valid => {
     if (valid) {
       let res: any = {}
-      // form.value.T_duration = form.value.T_duration
       form.value.T_duration = duration.value * 60
       if (isNew) {
         res = await Overtime_Add({ ...form.value, T_approver: uuid })
@@ -93,8 +134,11 @@ const drawerRef = ref()
 const ruleFormRef = ref<FormInstance>()
 type Fn = () => void
 const callbackDrawer = (done: Fn) => {
-  resetForm(ruleFormRef.value)
-  done()
+  disabled.value = false
+  nextTick(() => {
+    resetForm(ruleFormRef.value)
+    done()
+  })
 }
 const resetForm = (formEl: FormInstance | undefined) => {
   if (!formEl) return
@@ -134,6 +178,7 @@ const form = ref({
   T_duration: 0,
   T_text: '',
   T_approver: '',
+  T_prove_img: '',
   T_id: ''
 })
 const formLabelWidth = ref('100px')
@@ -169,16 +214,19 @@ const onResize = () => {
 
 // upload file
 const upload = ref()
-let uploadData = { token: '' }
+let uploadData = { token: '', key: '' }
 const dialogImageUrl = ref('')
 const dialogVisible = ref(false)
 const fileList = ref([])
-const handlePictureCardPreview = (file: UploadFile) => {
+let prove_img = true
+const handlePictureCardPreview = async (file: any) => {
   console.log(file, fileList)
   dialogImageUrl.value = file.url as string
   dialogVisible.value = true
 }
 const beforeUpload = async (file: any) => {
+  console.log(file)
+
   let reg = /^image/g
   if (!reg.test(file.type)) {
     ElMessage({
@@ -187,8 +235,11 @@ const beforeUpload = async (file: any) => {
     })
     return
   }
-  const res: any = await UpFileToken({ User_tokey: globalStore.GET_User_tokey })
+  prove_img = false
+  let suffix = file.type.split('/')[1]
+  const res: any = await UpFileToken({ User_tokey: globalStore.GET_User_tokey, T_suffix: suffix })
   uploadData.token = res.Data
+  uploadData.key = file.name
 }
 const handleExceed: UploadProps['onExceed'] = (files: any) => {
   console.log(files)
@@ -207,16 +258,27 @@ const submitUpload = () => {
 
 const onSuccess = (response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
   console.log(response, uploadFile, uploadFiles)
+  form.value.T_prove_img = response.key
+  prove_img = true
+  ElMessage({
+    type: 'success',
+    message: '图片上传成功!!'
+  })
 }
-const onError = (error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
-  console.log(error, uploadFile, uploadFiles)
+const onError = () => {
+  // console.log(error, uploadFile, uploadFiles)
+  ElMessage({
+    type: 'error',
+    message: '图片上传失败!!'
+  })
 }
-// const handleRemove = (file: UploadFile) => {
-//   console.log(file)
-// }
 const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
   console.log(uploadFile, uploadFiles, fileList)
+  form.value.T_prove_img = ''
 }
+// const handleProgress = (evt: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadFiles) => {
+//   console.log(evt, uploadFile, uploadFiles)
+// }
 </script>
 
 <template>
@@ -235,23 +297,41 @@ const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
             <el-button type="primary" @click="openDrawerOvertime">申请加班</el-button>
           </div>
         </template>
-        <template #T_duration="{ row }"> {{ row.T_duration }}分钟 </template>
+        <template #T_duration="{ row }"> {{ getFormatDuration(row.T_duration) }} </template>
         <template #T_State="{ row }">
           <el-tag v-if="row.T_State === 1" type="success">通过</el-tag>
           <el-tag v-else-if="row.T_State === 2" type="warning">未通过</el-tag>
           <el-tag v-else type="danger">待审核</el-tag>
         </template>
         <template #right="{ row }">
-          <el-button link type="primary" size="small" :icon="Edit" @click="openDrawerOvertime('edit', row)"
+          <el-button
+            v-if="row.T_State !== 1"
+            link
+            type="primary"
+            size="small"
+            :icon="Edit"
+            @click="openDrawerOvertime('edit', row)"
             >编辑</el-button
           >
-          <el-button link type="danger" size="small" :icon="Delete" @click="OvertimeDelete(row)">删除</el-button>
+          <el-button
+            v-if="row.T_State !== 1"
+            link
+            type="danger"
+            size="small"
+            :icon="Delete"
+            @click="OvertimeDelete(row)"
+            >删除</el-button
+          >
+          <el-button v-if="row.T_State === 1" link type="success" size="small" :icon="View" @click="OvertimeView(row)"
+            >查看</el-button
+          >
+          <!-- <el-icon><View /></el-icon> -->
         </template>
       </TableBase></el-col
     >
     <el-col :span="12" class="h-100" style="overflow: hidden">
       <TableBase
-        ref="TableRef"
+        ref="TableStatRef"
         :columns="columns_Stat"
         :requestApi="Overtime_Stat"
         :initParam="initParam"
@@ -278,6 +358,7 @@ const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
             class="my-date-picker"
             v-model="form.T_start_time"
             type="datetime"
+            :disabled="disabled"
             placeholder="选择开始时间"
             format="YYYY-MM-DD HH:mm:ss"
             value-format="YYYY-MM-DD HH:mm:ss"
@@ -289,6 +370,7 @@ const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
             class="my-date-picker"
             v-model="form.T_end_time"
             type="datetime"
+            :disabled="disabled"
             placeholder="选择结束时间"
             format="YYYY-MM-DD HH:mm:ss"
             value-format="YYYY-MM-DD HH:mm:ss"
@@ -300,6 +382,7 @@ const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
         <el-form-item label="取证：" :label-width="formLabelWidth">
           <el-upload
             ref="upload"
+            :disabled="disabled"
             v-model:file-list="fileList"
             action="https://up-z2.qiniup.com"
             list-type="picture-card"
@@ -319,9 +402,10 @@ const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
             <img w-full :src="dialogImageUrl" class="full-img" alt="Preview Image" />
           </el-dialog>
         </el-form-item>
-        <el-form-item label="内容：" :label-width="formLabelWidth">
+        <el-form-item label="内容：" :label-width="formLabelWidth" prop="T_text">
           <el-input
             v-model="form.T_text"
+            :disabled="disabled"
             autocomplete="off"
             type="textarea"
             :autosize="{ minRows: 4, maxRows: 6 }"
@@ -329,10 +413,18 @@ const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
           />
         </el-form-item>
         <el-form-item label="审批：" :label-width="formLabelWidth" prop="T_approver">
-          <el-input v-model="form.T_approver" autocomplete="off" placeholder="审批人" @focus="selectApprover" />
+          <el-input
+            :disabled="disabled"
+            v-model="form.T_approver"
+            autocomplete="off"
+            placeholder="审批人"
+            @focus="selectApprover"
+          />
         </el-form-item>
         <el-form-item :label-width="formLabelWidth">
-          <el-button v-if="isNew" color="#626aef" @click="AddOvertime(ruleFormRef)">添加</el-button>
+          <el-button v-if="isNew" color="#626aef" @click="AddOvertime(ruleFormRef)" :disabled="disabled"
+            >添加</el-button
+          >
           <el-button v-else color="#626aef" @click="AddOvertime(ruleFormRef)">修改</el-button>
         </el-form-item>
       </el-form>

src/views/workAttendance/Overtime.vue

@@ -5,6 +5,7 @@ import { ElMessage } from 'element-plus'
 import TableBase from '@/components/TableBase/index.vue'
 import { ColumnProps } from '@/components/TableBase/interface/index'
 import { Overtime_List, Overtime_Approval } from '@/api/workAttendance/index'
+import { getFormatDuration } from '@/utils/common'
 import { GlobalStore } from '@/stores/index'
 
 const globalStore = GlobalStore()
@@ -32,11 +33,12 @@ const userInfo = ref<UserInfoIn>({
   Id: '',
   T_duration: ''
 })
+
 const initParam = {
   User_tokey: globalStore.GET_User_tokey
 }
 const getSalaryParams = (row: any) => {
-  userInfo.value = { ...row }
+  let duration = (userInfo.value = { ...row })
 }
 
 const LeaveUser = async (T_State: number) => {
@@ -111,45 +113,28 @@ onUnmounted(() => {
           </div>
         </el-card>
         <el-card class="m-b-3 b-show-0" :style="{ height: cardHeight + 'px' }">
-          <!-- <el-descriptions title="请假申请" :column="1" size="large" border>
-            <el-descriptions-item label="请假类型："
-              ><el-text class="mx-1" type="primary">{{
-                userInfo.T_type_name ? userInfo.T_type_name : '-'
-              }}</el-text></el-descriptions-item
-            >
-            <el-descriptions-item label="开始时间："
-              ><el-text class="mx-1" type="primary">{{
-                userInfo.T_start_time ? userInfo.T_type_name : '-'
-              }}</el-text></el-descriptions-item
-            >
-            <el-descriptions-item label="结束时间：" :span="2"
-              ><el-text class="mx-1" type="primary">{{
-                userInfo.T_end_time ? userInfo.T_end_time : '-'
-              }}</el-text></el-descriptions-item
-            >
-            <el-descriptions-item label="请假时长：">
-              <el-text class="mx-1" type="primary">{{ userInfo.T_duration ? userInfo.T_duration : '-' }}</el-text>
-            </el-descriptions-item>
-            <el-descriptions-item label="内容：">
-              <el-text class="mx-1" type="primary">{{ userInfo.T_text ? userInfo.T_text : '-' }}</el-text>
-            </el-descriptions-item>
-          </el-descriptions> -->
           <el-row>
             <el-col :span="12"
               ><div>
-                开始时间<span>{{ userInfo.T_start_time }}</span>
+                开始时间：<el-tag v-if="userInfo.T_start_time" type="success" effect="dark">
+                  {{ userInfo.T_start_time }}
+                </el-tag>
               </div></el-col
             >
             <el-col :span="12"
               ><div>
-                结束时间：<span>{{ userInfo.T_end_time }}</span>
+                结束时间：<el-tag v-if="userInfo.T_end_time" type="success" effect="dark">
+                  {{ userInfo.T_end_time }}
+                </el-tag>
               </div></el-col
             >
           </el-row>
           <el-row>
             <el-col :span="12"
               ><div>
-                加班时长：<span>{{ userInfo.T_duration }}小时</span>
+                加班时长：<el-tag v-if="userInfo.T_duration" type="success" effect="dark">
+                  {{ getFormatDuration(userInfo.T_duration as any) }}
+                </el-tag>
               </div></el-col
             >
           </el-row>
@@ -189,8 +174,8 @@ onUnmounted(() => {
   }
   .b-show-0 {
     box-shadow: none;
-    font-size: 18px;
-    font-weight: 600;
+    font-size: 16px;
+    font-weight: 500;
     .el-row {
       margin-bottom: 10px;
       .el-col {