完成请假审批，修改薪资管理的问题，增加动画效果

README.md

@@ -19,3 +19,9 @@
 ### 原型
 
 https://58ftdz.axshare.com
+
+https://6b87x3.axshare.com/#id=s9uw1m&p=%E6%88%91%E7%9A%84%E5%8A%A0%E7%8F%AD&g=1
+
+### 待优化部分
+
+请假选择完开始结束自动算出小时

components.d.ts

@@ -50,6 +50,7 @@ declare module '@vue/runtime-core' {
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
+    ElText: typeof import('element-plus/es')['ElText']
     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']

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@element-plus/icons-vue": "^2.1.0",
         "axios": "^1.3.4",
+        "dayjs": "^1.11.7",
         "element-plus": "^2.3.0",
         "js-md5": "^0.7.3",
         "nprogress": "^0.2.0",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.1.0",
     "axios": "^1.3.4",
+    "dayjs": "^1.11.7",
     "element-plus": "^2.3.0",
     "js-md5": "^0.7.3",
     "nprogress": "^0.2.0",

src/api/index.ts

@@ -3,8 +3,9 @@ import type { AxiosInstance, AxiosError, AxiosRequestConfig, InternalAxiosReques
 import { ElMessage, ElLoading, ElNotification } from 'element-plus'
 import { ResultEnum, ResultData, ContentType } from './interface/index'
 import { GlobalStore } from '@/stores/index'
-import { useRouter } from 'vue-router'
-const router = useRouter()
+// import { useRouter } from 'vue-router'
+// const router = useRouter()
+import router from '@/router/index'
 
 type LoadingType = {
   close?: () => void

src/api/workAttendance/index.ts

@@ -2,11 +2,11 @@ import $http from '../index'
 /**
  * 请假
  */
-// 员工请假列表
+// 我的请假列表
 export const Leave_User_list = (params: any) => $http.post('api/ams/Leave/User_list', params)
 // 请假类型
 export const LeaveType_List = (params: any) => $http.post('api/ams/LeaveType/List', params)
-// 请假列表
+// 请假审批
 export const Leave_List = (params: any) => $http.post('api/ams/Leave/List', params)
 // 请假申请
 export const Leave_Add = (params: any) => $http.post('api/ams/Leave/Add', params)
@@ -21,9 +21,9 @@ export const Leave_Del = (params: any) => $http.post('api/ams/Leave/Del', params
 /**
  * 加班
  */
-// 加班列表
+// 审批列表
 export const Overtime_List = (params: any) => $http.post('api/ams/Overtime/List', params)
-// 员工加班列表
+// 我的加班列表
 export const Overtime_User_list = (params: any) => $http.post('api/ams/Overtime/User_list', params)
 // 加班申请
 export const Overtime_Add = (params: any) => $http.post('api/ams/Overtime/Add', params)

src/assets/iconfont.css

@@ -1,49 +1,63 @@
 @font-face {
-  font-family: 'iconfont'; /* Project id 3967191 */
-  src: url('./iconfont.woff2?t=1679533850838') format('woff2'), url('./iconfont.woff?t=1679533850838') format('woff'),
-    url('./iconfont.ttf?t=1679533850838') format('truetype');
+  font-family: "iconfont"; /* Project id 3967191 */
+  src: url('iconfont.woff2?t=1680060858543') format('woff2'),
+       url('iconfont.woff?t=1680060858543') format('woff'),
+       url('iconfont.ttf?t=1680060858543') format('truetype');
 }
 
 .iconfont {
-  font-family: 'iconfont' !important;
+  font-family: "iconfont" !important;
   font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-jiaoseguanli:before {
+  content: "\e648";
+}
+
+.icon-zhanghu:before {
+  content: "\e6a1";
+}
+
+.icon-jiaoseguanli1:before {
+  content: "\e645";
+}
+
 .icon-kaoqin:before {
-  content: '\ue619';
+  content: "\e619";
 }
 
 .icon-qingjia:before {
-  content: '\ue627';
+  content: "\e627";
 }
 
 .icon-jiaban:before {
-  content: '\ue64c';
+  content: "\e64c";
 }
 
 .icon-qingjiashenqing:before {
-  content: '\ue6aa';
+  content: "\e6aa";
 }
 
 .icon-jiabanshenqing:before {
-  content: '\ue690';
+  content: "\e690";
 }
 
 .icon-money:before {
-  content: '\ue663';
+  content: "\e663";
 }
 
 .icon-moneybag:before {
-  content: '\ue7d1';
+  content: "\e7d1";
 }
 
 .icon-moneycollect:before {
-  content: '\ue7cd';
+  content: "\e7cd";
 }
 
 .icon-money-funds:before {
-  content: '\ue831';
+  content: "\e831";
 }
+

src/components/TableBase/index.scss

@@ -10,20 +10,21 @@
   align-items: center;
 }
 
-.table-header,
-.card {
-  box-shadow: var(--el-box-shadow-light);
-}
+// .table-header,
+// .card {
+//   box-shadow: var(--el-box-shadow-light);
+// }
 
 .card {
   // height: calc(100% - 5rem - 0.75rem);
+  transition: height 1.25s ease-in-out;
   box-sizing: border-box;
   padding: 20px;
   overflow-x: hidden;
   background-color: var(--el-fill-color-blank);
   border: 1px solid var(--el-border-color-light);
   border-radius: 4px;
-  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+  // box-shadow: 0 0 12px rgb(0 0 0 / 5%);
 
   display: flex;
   flex-direction: column;

src/components/TableBase/index.vue

@@ -18,6 +18,7 @@ interface ProTableProps extends Partial<Omit<TableProps<any>, 'data'>> {
   selectId?: string // 当表格数据多选时，所指定的 id ==> 非必传（默认为 id）
   displayHeader?: boolean
   onResize?: () => number
+  rowClick?: (row: any, column: any, event: any) => void
 }
 
 // 接受父组件参数，配置默认值
@@ -78,7 +79,7 @@ defineExpose({
   </div>
 
   <div class="card table" :style="{ height: cardHeight + 'px' }">
-    <el-table :data="tableData">
+    <el-table :data="tableData" @row-click="props.rowClick">
       <!-- 默认插槽 -->
       <slot></slot>
       <template v-for="item in tableColumns" :key="item">

src/layouts/Main/index.vue

@@ -1,22 +1,23 @@
 <script setup lang="ts">
-import { ref, provide } from 'vue'
-import { KeepAliveStore } from '@/stores/modules/keepAlive'
-const isRouterShow = ref(true)
-const refreshCurrentPage = (val: boolean) => {
-  // console.log(val)
-  isRouterShow.value = val
-}
-provide('refresh', refreshCurrentPage)
+// import { ref, provide } from 'vue'
+// import { KeepAliveStore } from '@/stores/modules/keepAlive'
+// const isRouterShow = ref(true)
+// const refreshCurrentPage = (val: boolean) => {
+//   isRouterShow.value = val
+// }
+// provide('refresh', refreshCurrentPage)
 
-const keepAliveStore = KeepAliveStore()
+// const keepAliveStore = KeepAliveStore()
 // console.log(keepAliveStore)
 </script>
 
 <template>
   <el-main>
-    <!-- <transition appear name="fade-transform" mode="out-in"></transition> -->
     <router-view v-slot="{ Component, route }">
-      <component :is="Component" :key="route.path" />
+      <transition appear name="fade-transform" mode="out-in">
+        <component :is="Component" :key="route.path" />
+      </transition>
+
       <!-- <keep-alive>
        
       </keep-alive> -->

src/router/modules/staticRouter.ts

@@ -87,7 +87,8 @@ export const staticRouter: RouteRecordRaw[] = [
       {
         path: '/leave',
         name: 'Leave',
-        component: () => import('@/views/workAttendance/Leave.vue'),
+        // component: () => import('@/views/workAttendance/Leave.vue'),
+        component: () => import('../../views/workAttendance/Leave.vue'),
         meta: {
           title: '请假审批'
         }
@@ -95,7 +96,8 @@ export const staticRouter: RouteRecordRaw[] = [
       {
         path: '/myOvertime',
         name: ' MyOvertime',
-        component: () => import('@/views/workAttendance/MyOvertime.vue'),
+        // component: () => import('@/views/workAttendance/MyOvertime.vue'),
+        component: () => import('../../views/workAttendance/MyOvertime.vue'),
         meta: {
           title: '我的加班'
         }

src/utils/common.ts

@@ -1,5 +1,5 @@
 import md5 from 'js-md5'
-
+import dayjs from 'dayjs'
 /**
  * md5 加密
  * @param val string
@@ -7,4 +7,11 @@ import md5 from 'js-md5'
  */
 export const fnMd5 = (val: string) => md5(val)
 
+/**
+ * 判断对象是否为空
+ * @param obj Object
+ * @returns boolean
+ */
 export const isEmptyObject = (obj: object) => Object.keys(obj).length > 0
+
+export const dayJs = (date: Date | string) => dayjs(date)

src/utils/loginBg.ts

@@ -0,0 +1,73 @@
+class StarrySky {
+  canvas: HTMLCanvasElement
+  ctx: CanvasRenderingContext2D
+  particles: Particle[]
+  count: number
+  actions: string[]
+  action: number
+  constructor() {
+    this.canvas = document.createElement('canvas') as HTMLCanvasElement
+    this.canvas.width = innerWidth
+    this.canvas.height = innerHeight
+    this.canvas.style.zIndex = '-1'
+    this.canvas.style.position = 'fixed'
+    this.canvas.style.top = '0'
+    this.canvas.style.left = '0'
+    this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D
+    document.body.appendChild(this.canvas)
+
+    this.particles = []
+    this.count = 1000
+
+    // this.animate()
+  }
+  draw() {
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+    if (this.particles.length < this.count) {
+      this.particles.push(new Particle(this.canvas.width, this.canvas.height, this.ctx))
+    }
+    for (let i in this.particles) {
+      const p = this.particles[i]
+      p.update()
+      p.draw()
+    }
+  }
+  // onresize(){
+
+  // }
+  // animate() {
+  //   requestAnimationFrame(() => this.animate())
+  //   this.draw()
+  // }
+}
+
+class Particle {
+  x: number
+  y: number
+  vx: number
+  w: number
+  h: number
+  ctx: CanvasRenderingContext2D
+  constructor(width: number, height: number, ctx: CanvasRenderingContext2D) {
+    this.w = width
+    this.h = height
+    this.ctx = ctx
+    this.x = Math.random() * width
+    this.y = Math.random() * height
+    this.vx = Math.random()
+  }
+  update() {
+    this.x += this.vx * 3
+    if (this.x > this.w) {
+      this.x = 0
+    }
+  }
+  draw() {
+    this.ctx.beginPath()
+    this.ctx.arc(this.x, this.y, 1 + this.vx, 0, Math.PI * 2)
+    this.ctx.fillStyle = `rgba(255, 255, 255, ${this.vx})`
+    this.ctx.fill()
+  }
+}
+
+export default StarrySky

src/views/Index.vue

@@ -45,7 +45,7 @@ const routerList = [
         path: '/users',
         name: 'Users',
         meta: {
-          icon: 'Memo',
+          icon: '\ue6a1',
           title: '账户管理',
           isKeepAlive: true
         }
@@ -54,7 +54,7 @@ const routerList = [
         path: '/roles',
         name: 'Roles',
         meta: {
-          icon: 'UserFilled',
+          icon: '\ue648',
           title: '角色管理',
           isKeepAlive: true
         }
@@ -257,7 +257,7 @@ const handleClose = (key: string, keyPath: string[]) => {
   .el-header {
     display: flex;
     align-items: center;
-    border-bottom: solid 1px var(--el-menu-border-color);
+    border-bottom: solid 2px var(--el-menu-border-color);
   }
 }
 </style>

src/views/Login.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { reactive, ref, onMounted } from 'vue'
 import { ElNotification } from 'element-plus'
 import type { FormInstance, FormRules } from 'element-plus'
 import type { InLogin } from '@/typings/config'
@@ -8,6 +8,7 @@ import { Login_verification } from '@/api/user/index'
 import { useRouter } from 'vue-router'
 import { GlobalStore } from '@/stores/index'
 import { fnMd5 } from '@/utils/common'
+import StarrySky from '@/utils/loginBg'
 const router = useRouter()
 const globalStore = GlobalStore()
 const ruleFormRef = ref<FormInstance>()
@@ -55,6 +56,10 @@ let passType = ref('password')
 const changeType = () => {
   passType.value = passType.value === 'password' ? 'text' : 'password'
 }
+
+onMounted(() => {
+  new StarrySky()
+})
 </script>
 
 <template>

src/views/account/roles/Roles.vue

@@ -49,6 +49,9 @@ let SysList = ref<InSys[]>([])
 const getSysList = async () => {
   const { Data } = await User_Sys_List({ User_tokey: globalStore.GET_User_tokey })
   SysList.value = Data as InSys[]
+  for await (let item of SysList.value) {
+    getMenuList(item.T_sys)
+  }
 }
 const getMenuList = async (code: string) => {
   // User_Power_Get
@@ -191,72 +194,91 @@ const searchHandle = () => {
 </script>
 
 <template>
-  <TableBase ref="TableRef" :columns="columns" :requestApi="User_Power_List" :initParam="initParam">
-    <template #table-header>
-      <div class="input-suffix">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <span class="inline-flex items-center">角色名：</span>
-            <el-input v-model="search" type="text" class="w-50 m-2" />
-            <el-button type="primary" @click="searchHandle">搜索</el-button>
-          </el-col>
-          <el-col :span="6" :offset="6"><el-button type="primary" @click="openDrawer('new')">添加</el-button></el-col>
-        </el-row>
-      </div>
-    </template>
-    <template #right="{ row }">
-      <el-button link type="primary" size="small" :icon="Edit" @click="openDrawer('edit', row)">编辑</el-button>
-      <el-button link type="success" size="small" :icon="Operation" @click="DialogOpen(row)">权限</el-button>
-      <el-button link type="danger" size="small" :icon="Delete" @click="UserDelete(row)">删除</el-button>
-    </template>
-  </TableBase>
-  <Dialog ref="dialog" width="80%">
-    <template #header>
-      <h3>编辑权限</h3>
-    </template>
-    <el-row :gutter="24">
-      <el-col :span="3"><div class="grid-content">功能模块</div></el-col>
-      <el-col :span="18"><div class="grid-content">权限</div></el-col>
-      <el-col :span="3"><div class="grid-content">操作</div></el-col>
-    </el-row>
-    <el-row :gutter="24" v-for="item in SysList" :key="item.T_sys">
-      <el-col :span="3"
-        ><div class="grid-content">
-          <el-button type="success" link @click="getMenuList(item.T_sys)">{{ item.T_name }}</el-button>
-        </div></el-col
-      >
-      <el-col :span="18"
-        ><div class="grid-content grid-active">
-          <el-checkbox-group v-model="item.checkList" v-if="item.children">
-            <el-checkbox :label="child.T_name" v-for="child in item.children" :key="'rr' + child.Id">{{
-              child.T_name
-            }}</el-checkbox>
-          </el-checkbox-group>
+  <div>
+    <TableBase ref="TableRef" :columns="columns" :requestApi="User_Power_List" :initParam="initParam">
+      <template #table-header>
+        <div class="input-suffix">
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <span class="inline-flex items-center">角色名：</span>
+              <el-input v-model="search" type="text" class="w-50 m-2" />
+              <el-button type="primary" @click="searchHandle">搜索</el-button>
+            </el-col>
+            <el-col :span="6" :offset="6"><el-button type="primary" @click="openDrawer('new')">添加</el-button></el-col>
+          </el-row>
         </div>
-      </el-col>
-      <el-col :span="3"
-        ><div class="grid-content">
-          <el-button type="primary" @click="submitUserRole(item)">提交</el-button>
-        </div></el-col
-      >
-    </el-row>
-  </Dialog>
-  <Drawer ref="drawerRef" :handleClose="callbackDrawer">
-    <template #header="{ params }">
-      <h4 :id="params.titleId" :class="params.titleClass">{{ isNew ? '添加' : '编辑' }} - 角色</h4>
-    </template>
-    <el-form ref="ruleFormRef" :model="form" :rules="rules">
-      <el-form-item label="角色名：" :label-width="formLabelWidth" prop="name">
-        <el-input v-model="form.name" type="text" autocomplete="off" placeholder="请输入角色名称" />
-      </el-form-item>
-      <el-form-item :label-width="formLabelWidth">
-        <el-button v-if="isNew" color="#626aef" @click="AddUserName(ruleFormRef)">添加</el-button>
-        <el-button v-else color="#626aef" @click="AddUserName(ruleFormRef)">修改</el-button>
-      </el-form-item>
-    </el-form>
-  </Drawer>
+      </template>
+      <template #right="{ row }">
+        <el-button link type="primary" size="small" :icon="Edit" @click="openDrawer('edit', row)">编辑</el-button>
+        <el-button link type="success" size="small" :icon="Operation" @click="DialogOpen(row)">权限</el-button>
+        <el-button link type="danger" size="small" :icon="Delete" @click="UserDelete(row)">删除</el-button>
+      </template>
+    </TableBase>
+    <Dialog ref="dialog" width="80%">
+      <template #header>
+        <h3>编辑权限</h3>
+      </template>
+      <el-row :gutter="24">
+        <el-col :span="3"><div class="grid-content b-radius-4">功能模块</div></el-col>
+        <el-col :span="18"><div class="grid-content b-radius-4">权限</div></el-col>
+        <el-col :span="3"><div class="grid-content b-radius-4">操作</div></el-col>
+      </el-row>
+      <el-row :gutter="24" v-for="item in SysList" :key="item.T_sys">
+        <el-col :span="3"
+          ><div class="grid-content b-radius-4">
+            <el-button type="success" link>{{ item.T_name }}</el-button>
+          </div></el-col
+        >
+        <el-col :span="18"
+          ><div class="grid-content grid-active b-radius-4">
+            <transition appear name="fade-transform" mode="out-in">
+              <el-checkbox-group v-model="item.checkList" v-if="item.children">
+                <el-checkbox :label="child.T_name" v-for="child in item.children" :key="'rr' + child.Id">{{
+                  child.T_name
+                }}</el-checkbox>
+              </el-checkbox-group>
+            </transition>
+          </div>
+        </el-col>
+        <el-col :span="3"
+          ><div class="grid-content b-radius-4">
+            <el-button type="primary" @click="submitUserRole(item)">提交</el-button>
+          </div></el-col
+        >
+      </el-row>
+    </Dialog>
+    <Drawer ref="drawerRef" :handleClose="callbackDrawer">
+      <template #header="{ params }">
+        <h4 :id="params.titleId" :class="params.titleClass">{{ isNew ? '添加' : '编辑' }} - 角色</h4>
+      </template>
+      <el-form ref="ruleFormRef" :model="form" :rules="rules">
+        <el-form-item label="角色名：" :label-width="formLabelWidth" prop="name">
+          <el-input v-model="form.name" type="text" autocomplete="off" placeholder="请输入角色名称" />
+        </el-form-item>
+        <el-form-item :label-width="formLabelWidth">
+          <el-button v-if="isNew" color="#626aef" @click="AddUserName(ruleFormRef)">添加</el-button>
+          <el-button v-else color="#626aef" @click="AddUserName(ruleFormRef)">修改</el-button>
+        </el-form-item>
+      </el-form>
+    </Drawer>
+  </div>
 </template>
 
 <style scoped lang="scss">
 @import './index.scss';
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all 0.2s;
+}
+.fade-transform-enter-from {
+  opacity: 0;
+  transition: all 0.2s;
+  transform: translateY(-30px);
+}
+.fade-transform-leave-to {
+  opacity: 0;
+  transition: all 0.2s;
+  transform: translateY(30px);
+}
 </style>

src/views/account/roles/index.scss

@@ -38,3 +38,7 @@ h3 span {
     width: 12.5rem;
   }
 }
+
+.b-radius-4 {
+  border-radius: 8px;
+}

src/views/account/users/Users.vue

@@ -88,45 +88,50 @@ const initParam = {
 </script>
 
 <template>
-  <TableBase ref="TableRef" :columns="columns" :requestApi="User_List" :initParam="initParam">
-    <template #table-header>
-      <div class="input-suffix">
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <span class="ml-3 w-35 text-gray-600 inline-flex items-center">账户查询：</span>
-            <el-input type="text" class="w-50 m-2" v-model="search" />
-            <el-button type="primary" @click="SearchInfo">搜索</el-button>
-          </el-col>
-          <el-col :span="6" :offset="6"><el-button type="primary" @click="openDrawerFrom">添加</el-button></el-col>
-        </el-row>
-      </div>
-    </template>
-    <template #T_sex="{ row }">
-      <el-tag class="ml-2" type="success" v-if="row.T_sex === 1">男</el-tag>
-      <el-tag class="ml-2" type="danger" v-else>女</el-tag>
-    </template>
-    <template #T_expire="{ row }">
-      <el-tag class="ml-2" type="success" v-if="row.T_expire === 0">否</el-tag>
-      <el-tag class="ml-2" type="danger" v-else>是</el-tag>
-    </template>
-    <template #T_marry="{ row }">
-      <el-tag class="ml-2" type="success" v-if="row.T_marry === 0">未婚</el-tag>
-      <el-tag class="ml-2" type="danger" v-else>已婚</el-tag>
-    </template>
-    <template #T_entry_type="{ row }">
-      <el-tag class="ml-2" type="success" v-if="+row.T_entry_type === 1">全职</el-tag>
-      <el-tag class="ml-2" type="warning" v-else-if="+row.T_entry_type === 2">兼职</el-tag>
-      <el-tag class="ml-2" type="danger" v-else>实习生</el-tag>
-    </template>
-    <template #right="{ row }">
-      <el-button link type="primary" size="small" :icon="Edit" @click="EditUserInfo(row)">编辑</el-button>
-      <el-button link type="danger" size="small" :icon="Delete" @click="DeleteUserInfo(row)">删除</el-button>
-    </template>
-  </TableBase>
-  <DrawerFrom ref="drawerFromRef" :action="action" @onTableList="UpdateTableList" @onaction="UpdateAction" />
+  <div class="users">
+    <TableBase ref="TableRef" :columns="columns" :requestApi="User_List" :initParam="initParam">
+      <template #table-header>
+        <div class="input-suffix">
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <span class="ml-3 w-35 text-gray-600 inline-flex items-center">账户查询：</span>
+              <el-input type="text" class="w-50 m-2" v-model="search" />
+              <el-button type="primary" @click="SearchInfo">搜索</el-button>
+            </el-col>
+            <el-col :span="6" :offset="6"><el-button type="primary" @click="openDrawerFrom">添加</el-button></el-col>
+          </el-row>
+        </div>
+      </template>
+      <template #T_sex="{ row }">
+        <el-tag class="ml-2" type="success" v-if="row.T_sex === 1">男</el-tag>
+        <el-tag class="ml-2" type="danger" v-else>女</el-tag>
+      </template>
+      <template #T_expire="{ row }">
+        <el-tag class="ml-2" type="success" v-if="row.T_expire === 0">否</el-tag>
+        <el-tag class="ml-2" type="danger" v-else>是</el-tag>
+      </template>
+      <template #T_marry="{ row }">
+        <el-tag class="ml-2" type="success" v-if="row.T_marry === 0">未婚</el-tag>
+        <el-tag class="ml-2" type="danger" v-else>已婚</el-tag>
+      </template>
+      <template #T_entry_type="{ row }">
+        <el-tag class="ml-2" type="success" v-if="+row.T_entry_type === 1">全职</el-tag>
+        <el-tag class="ml-2" type="warning" v-else-if="+row.T_entry_type === 2">兼职</el-tag>
+        <el-tag class="ml-2" type="danger" v-else>实习生</el-tag>
+      </template>
+      <template #right="{ row }">
+        <el-button link type="primary" size="small" :icon="Edit" @click="EditUserInfo(row)">编辑</el-button>
+        <el-button link type="danger" size="small" :icon="Delete" @click="DeleteUserInfo(row)">删除</el-button>
+      </template>
+    </TableBase>
+    <DrawerFrom ref="drawerFromRef" :action="action" @onTableList="UpdateTableList" @onaction="UpdateAction" />
+  </div>
 </template>
 
 <style scoped lang="scss">
+// .users {
+//   transition: height 1s ease;
+// }
 .input-suffix {
   width: 100%;
   .w-50 {

src/views/salary/SalaryCount.vue

@@ -11,11 +11,21 @@ const salaryFromData = reactive({
   month: (month < 10 ? '0' : '') + month,
   T_uuid: ''
 })
+const salarDateYearChange = (val: string) => {
+  if (!val) return
+  initParam.T_date = `${val}-${salaryFromData.month}`
+  getSalary_List()
+}
+const salarDateMonthChange = (val: string) => {
+  if (!val) return
+  initParam.T_date = `${salaryFromData.year}-${val}`
+  getSalary_List()
+}
 const tableTH = [
-  { type: 'index', label: '序号', width: '60px' },
-  { prop: 'T_user_name', label: '姓名' },
-  { prop: 'T_user_dept', label: '部门' },
-  { prop: 'T_user_post', label: '岗位' },
+  { type: 'index', label: '序号', width: '60px', fixed: 'left' },
+  { prop: 'T_user_name', label: '姓名', fixed: 'left', width: '80px' },
+  { prop: 'T_user_dept', label: '部门', fixed: 'left', width: '80px' },
+  { prop: 'T_user_post', label: '岗位', fixed: 'left', width: '100px' },
   { prop: 'T_base', label: '基本工资', sortable: true, width: '120px' },
   { prop: 'T_post', label: '岗位工资', sortable: true, width: '120px' },
   { prop: 'T_seniority', label: '工龄工资', sortable: true, width: '120px' },
@@ -68,16 +78,16 @@ const arraySpanMethod = ({ rowIndex, columnIndex }: SpanMethodProps) => {
     }
   }
 }
-const initParam = {
-  T_date: `${year}-${month < 10 ? '0' : ''}${month}`,
+const initParam = reactive({
+  T_date: `${salaryFromData.year}-${salaryFromData.month}`,
   page: 1,
-  page_z: 10
-}
-const total = ref(0)
+  page_z: 999
+})
+// const total = ref(0)
 const getSalary_List = async () => {
   const res: any = await Salary_List(initParam)
   tableData.value = res.Data.Data
-  total.value = res.Data.Num
+  // total.value = res.Data.Num
 }
 getSalary_List()
 
@@ -106,6 +116,13 @@ const handleSelectionChange = (val: User[]) => {
   multipleSelection.value = val
 }
 const tableData = ref<User[]>([])
+const tableRowClassName = ({ rowIndex }: { row: User; rowIndex: number }) => {
+  if (rowIndex % 2 === 0) {
+    return 'warning-row'
+  } else {
+    return 'success-row'
+  }
+}
 </script>
 
 <template>
@@ -120,6 +137,7 @@ const tableData = ref<User[]>([])
             value-format="YYYY"
             type="year"
             placeholder="请选择年"
+            @change="salarDateYearChange"
           />
           <span class="demonstration">月：</span>
           <el-date-picker
@@ -130,6 +148,7 @@ const tableData = ref<User[]>([])
             value-format="MM"
             type="month"
             placeholder="请选择月"
+            @change="salarDateMonthChange"
           />
         </el-col>
         <el-col :span="12" class="d-flex">
@@ -145,15 +164,15 @@ const tableData = ref<User[]>([])
         :span-method="arraySpanMethod"
         border
         style="width: 100%"
+        :row-class-name="tableRowClassName"
       >
         <el-table-column type="selection" width="55" />
         <template v-for="(item, index) in tableTH" :key="index">
           <el-table-column
-            v-if="item.type === 'index'"
+            v-if="item.type === 'index' || item.fixed === 'left'"
             :type="item.type"
-            :width="item.width"
             align="center"
-            :label="item.label"
+            v-bind="item"
           />
           <el-table-column
             v-else
@@ -166,9 +185,9 @@ const tableData = ref<User[]>([])
           />
         </template>
       </el-table>
-      <div class="pagination">
+      <!-- <div class="pagination">
         <el-pagination background layout="total,prev, pager, next" :total="total" />
-      </div>
+      </div> -->
     </el-card>
   </div>
 </template>
@@ -180,12 +199,15 @@ const tableData = ref<User[]>([])
     height: calc(100% - 72px - 12px);
     :deep(.el-card__body) {
       height: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
     }
   }
 }
+:deep(.el-table .warning-row) {
+  background-color: var(--el-color-warning-light-9);
+}
+:deep(.el-table .success-row) {
+  background-color: var(--el-color-success-light-9);
+}
 .label-table {
   white-space: nowrap;
 }

src/views/salary/SalaryMy.vue

@@ -36,13 +36,24 @@ const salaryData = reactive([
 const getMySalary = async () => {
   let T_date = salaryFromData.year + '-' + salaryFromData.month
   const res: any = await Salary_User_Get({ T_date })
-  if (res.Code) {
+  if (res.Code === 200) {
     for (let item of salaryData) {
       item.salary = res.Data[item.field]
     }
   }
 }
 
+const salarDateYearChange = (val: string) => {
+  if (!val) return
+  // initParam.T_date = `${val}-${salaryFromData.month}`
+  getMySalary()
+}
+const salarDateMonthChange = (val: string) => {
+  if (!val) return
+  // initParam.T_date = `${salaryFromData.year}-${val}`
+  getMySalary()
+}
+
 const searchSalary = () => {
   getMySalary()
 }
@@ -53,7 +64,7 @@ getMySalary()
   <div class="SalaryMy">
     <el-card class="m-b-3">
       <el-row :gutter="24">
-        <el-col :span="5">
+        <el-col :span="12" class="d-flex">
           <span class="demonstration">年：</span>
           <el-date-picker
             v-model="salaryFromData.year"
@@ -61,9 +72,8 @@ getMySalary()
             value-format="YYYY"
             type="year"
             placeholder="请选择年"
+            @change="salarDateYearChange"
           />
-        </el-col>
-        <el-col :span="5">
           <span class="demonstration">月：</span>
           <el-date-picker
             popper-class="picker-date"
@@ -73,9 +83,10 @@ getMySalary()
             value-format="MM"
             type="month"
             placeholder="请选择月"
+            @change="salarDateMonthChange"
           />
         </el-col>
-        <el-col :span="5">
+        <el-col :span="12">
           <el-button type="primary" @click="searchSalary">查询</el-button>
         </el-col>
       </el-row>
@@ -89,7 +100,10 @@ getMySalary()
               {{ item.name }}
             </div>
           </template>
-          <el-tag type="danger">{{ item.salary }}</el-tag>
+          <el-tag type="danger"
+            >{{ item.salary
+            }}{{ ['T_user_name', 'T_user_post', 'T_user_dept'].includes(item.field) ? '' : '￥' }}</el-tag
+          >
           <!-- <span style="color: #ffd04b">{{ item.salary }}</span> -->
         </el-descriptions-item>
       </el-descriptions>
@@ -97,4 +111,11 @@ getMySalary()
   </div>
 </template>
 
-<style lang="scss"></style>
+<style lang="scss" scoped>
+.d-flex {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+</style>

src/views/salary/salary/Salary.vue

@@ -2,19 +2,21 @@
 import { ref, reactive } from 'vue'
 import TableBase from '@/components/TableBase/index.vue'
 import { User_List } from '@/api/user/index'
+import { Salary_Get } from '@/api/salary/index'
 import { ColumnProps } from '@/components/TableBase/interface/index'
 import { GlobalStore } from '@/stores/index'
+import { ElMessage } from 'element-plus'
 import SalaryFrom from './SalaryFrom.vue'
 const globalStore = GlobalStore()
 
 const TableRef = ref()
+const salaryFromRef = ref()
 // 搜索以及参数
 const columns: ColumnProps[] = [
   { prop: 'T_name', label: '姓名', name: 'T_name' },
   { prop: 'T_post_name', label: '职位' }
 ]
 const searchHandle = () => {
-  console.log(searchs)
   initParam.T_name = searchs.T_name
   initParam.T_dept = searchs.T_dept
   TableRef.value.searchTable()
@@ -37,12 +39,38 @@ const initParam = {
   T_name: '',
   T_dept: ''
 }
-const getSalary = (row: any) => {
+const getSalaryParams = (row: any) => {
   userInfo.name = row.T_name
   userInfo.T_dept = row.T_dept_name
   userInfo.T_post = row.T_post_name
 
   salaryFromData.T_uuid = row.T_uuid
+  getSalary()
+}
+const getSalary = async () => {
+  let T_date = `${salaryFromData.year}-${salaryFromData.month}`
+  const res = await Salary_Get({ T_uuid: salaryFromData.T_uuid, T_date })
+  salaryFromRef.value.DataEcho(res.Data)
+}
+const salarDateMonthChange = (val: string) => {
+  if (!val) return
+  if (!salaryFromData.T_uuid) {
+    ElMessage({
+      message: '请选择员工!!!',
+      type: 'warning'
+    })
+  }
+  getSalary()
+}
+const salarDateYearChange = (val: string) => {
+  if (!val) return
+  if (!salaryFromData.T_uuid) {
+    ElMessage({
+      message: '请选择员工!!!',
+      type: 'warning'
+    })
+  }
+  getSalary()
 }
 const userInfo = reactive({
   squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
@@ -67,6 +95,7 @@ const onResize = () => {
         :initParam="initParam"
         layout="prev, pager, next"
         :onResize="onResize"
+        :rowClick="getSalaryParams"
       >
         <template #table-header>
           <el-row :gutter="24" class="input-suffix margin-left-0 margin-right-0">
@@ -89,7 +118,7 @@ const onResize = () => {
           </el-row>
         </template>
         <template #T_name="{ row }">
-          <el-button type="primary" text @click="getSalary(row)">{{ row.T_name }}</el-button>
+          <el-button type="primary" text @click="getSalaryParams(row)">{{ row.T_name }}</el-button>
         </template>
       </TableBase>
     </div>
@@ -112,7 +141,13 @@ const onResize = () => {
           <el-row :gutter="20">
             <el-col :span="10" class="d-flex justify-start">
               <span class="demonstration">年：</span>
-              <el-date-picker v-model="salaryFromData.year" value-format="YYYY" type="year" placeholder="请选择年" />
+              <el-date-picker
+                v-model="salaryFromData.year"
+                value-format="YYYY"
+                type="year"
+                placeholder="请选择年"
+                @change="salarDateYearChange"
+              />
               <span class="demonstration">月：</span>
               <el-date-picker
                 v-model="salaryFromData.month"
@@ -121,11 +156,12 @@ const onResize = () => {
                 format="MM"
                 type="month"
                 placeholder="请选择月"
+                @change="salarDateMonthChange"
               />
             </el-col>
           </el-row>
         </el-card>
-        <SalaryFrom v-bind="salaryFromData"></SalaryFrom>
+        <SalaryFrom ref="salaryFromRef" v-bind="salaryFromData"></SalaryFrom>
       </el-col>
     </el-row>
   </div>

src/views/salary/salary/SalaryFrom.vue

@@ -5,12 +5,12 @@ import { ElNotification } from 'element-plus'
 import { reuls_validator } from './relus'
 import { Salary_Post } from '@/api/salary/index'
 const formRef = ref<FormInstance>()
-const form = reactive({
+const form = ref({
   T_base: '',
   T_post: '',
   T_seniority: '',
-  T_Perf: '',
-  T_Perf_score: '',
+  T_perf: '',
+  T_perf_score: '',
   T_back_payment: '',
   T_tax: '',
   T_attendance: '',
@@ -18,8 +18,9 @@ const form = reactive({
   T_pension_insurance: '',
   T_unemployment_insurance: '',
   T_medical_insurance: '',
-  T_Large_medical_insurance: '',
-  T_housing_fund: ''
+  T_large_medical_insurance: '',
+  T_housing_fund: '',
+  T_State: 1
 })
 const rules = reactive<FormRules>(reuls_validator)
 const resetForm = (formEl: FormInstance | undefined) => {
@@ -32,7 +33,7 @@ const submitSalary = (formEl: FormInstance | undefined) => {
   formEl.validate(async valid => {
     if (valid) {
       const T_date = props.year + '-' + props.month
-      const res: any = await Salary_Post({ T_uuid: props.T_uuid, T_date, ...form })
+      const res: any = await Salary_Post({ T_uuid: props.T_uuid, T_date, ...form.value })
       if (res.Code === 200) {
         ElNotification({
           title: '提交成功',
@@ -47,6 +48,13 @@ const submitSalary = (formEl: FormInstance | undefined) => {
   })
 }
 
+const DataEcho = (data: any) => {
+  form.value = { ...data }
+}
+defineExpose({
+  DataEcho
+})
+
 let cardHeight = ref(0)
 const resize = () => {
   const height = document.documentElement.clientHeight
@@ -83,10 +91,10 @@ onUnmounted(() => {
             <el-input v-model="form.T_seniority" autocomplete="off" placeholder="￥" />
           </el-form-item>
           <el-form-item label="绩效金额：" :label-width="formLabelWidth" prop="T_Perf">
-            <el-input v-model="form.T_Perf" autocomplete="off" placeholder="￥" />
+            <el-input v-model="form.T_perf" autocomplete="off" placeholder="￥" />
           </el-form-item>
           <el-form-item label="绩效得分：" :label-width="formLabelWidth" prop="T_Perf_score">
-            <el-input v-model="form.T_Perf_score" autocomplete="off" placeholder="￥" />
+            <el-input v-model="form.T_perf_score" autocomplete="off" placeholder="￥" />
           </el-form-item>
           <el-form-item label="其他补款：" :label-width="formLabelWidth" prop="T_back_payment">
             <el-input v-model="form.T_back_payment" autocomplete="off" placeholder="￥" />
@@ -112,7 +120,7 @@ onUnmounted(() => {
             <el-input v-model="form.T_medical_insurance" autocomplete="off" placeholder="￥" />
           </el-form-item>
           <el-form-item label="需缴纳失业保险：" :label-width="formLabelWidth" prop="T_Large_medical_insurance">
-            <el-input v-model="form.T_Large_medical_insurance" autocomplete="off" placeholder="￥" />
+            <el-input v-model="form.T_large_medical_insurance" autocomplete="off" placeholder="￥" />
           </el-form-item>
           <el-form-item label="需缴大额医疗保险：" :label-width="formLabelWidth" prop="T_housing_fund">
             <el-input v-model="form.T_housing_fund" autocomplete="off" placeholder="￥" />
@@ -121,7 +129,7 @@ onUnmounted(() => {
       </el-row>
     </el-form>
     <div class="d-flex">
-      <el-button type="primary" class="submit" @click="submitSalary(formRef)">提交</el-button>
+      <el-button v-if="form.T_State !== 2" type="primary" class="submit" @click="submitSalary(formRef)">提交</el-button>
     </div>
   </el-card>
 </template>

src/views/workAttendance/Leave.vue

@@ -1,7 +1,177 @@
+<script setup lang="ts">
+import { ref, nextTick, onMounted, onUnmounted } from 'vue'
+import { UserFilled } from '@element-plus/icons-vue'
+import { ElMessage } from 'element-plus'
+import TableBase from '@/components/TableBase/index.vue'
+import { ColumnProps } from '@/components/TableBase/interface/index'
+import { Leave_List, Leave_Approval } from '@/api/workAttendance/index'
+import { GlobalStore } from '@/stores/index'
+
+const globalStore = GlobalStore()
+const TableRef = ref()
+const columns: ColumnProps[] = [{ prop: 'T_user_name', label: '姓名', name: 'T_user_name' }]
+interface UserInfoIn {
+  T_user_name: string
+  T_dept: string
+  T_post: string
+  T_type_name: string
+  T_start_time: string
+  T_end_time: string
+  T_text: string
+  Id: string
+  T_duration: string
+}
+const userInfo = ref<UserInfoIn>({
+  T_user_name: '',
+  T_dept: '',
+  T_post: '',
+  T_type_name: '',
+  T_start_time: '',
+  T_end_time: '',
+  T_text: '',
+  Id: '',
+  T_duration: ''
+})
+const initParam = {
+  User_tokey: globalStore.GET_User_tokey
+}
+const getSalaryParams = (row: any) => {
+  userInfo.value = { ...row }
+}
+
+const LeaveUser = async (T_State: number) => {
+  if (!userInfo.value.Id) return
+  const params = {
+    User_tokey: globalStore.GET_User_tokey,
+    T_id: userInfo.value.Id,
+    T_State
+  }
+  const res: any = await Leave_Approval(params)
+  if (res.Code === 200) {
+    if (T_State) {
+      ElMessage({
+        type: 'success',
+        message: '审核通过！'
+      })
+    } else {
+      ElMessage({
+        type: 'warning',
+        message: '审核不通过！'
+      })
+    }
+    nextTick(() => {
+      TableRef.value.getTableList()
+      userInfo.value = {} as UserInfoIn
+    })
+  }
+}
+
+let cardHeight = ref(0)
+const resize = () => {
+  const height = document.documentElement.clientHeight
+  cardHeight.value = height - 4 * 12 - 140 - 60
+}
+onMounted(() => {
+  resize()
+  window.onresize = resize
+})
+onUnmounted(() => {
+  window.onresize = null
+})
+</script>
+
 <template>
-  <div>请假审批</div>
+  <div class="Leave">
+    <div style="width: 290px">
+      <TableBase
+        ref="TableRef"
+        :columns="columns"
+        :requestApi="Leave_List"
+        :initParam="initParam"
+        layout="prev, pager, next"
+        :rowClick="getSalaryParams"
+      >
+        <template #table-header>
+          <h3 class="title">待处理</h3>
+        </template>
+        <template #T_user_name="{ row }">
+          <el-button type="primary" text @click="getSalaryParams(row)">{{ row.T_user_name }}</el-button>
+        </template>
+      </TableBase>
+    </div>
+    <el-row class="h-100 f-1 margin-left-3">
+      <el-col :span="24" class="h-100" style="overflow: hidden">
+        <el-card class="m-b-3 b-show-0">
+          <h3 class="title m-b-5">员工基本信息</h3>
+          <div class="info-content">
+            <el-avatar shape="square" size="large" :icon="UserFilled" />
+            <div class="info-name">
+              <h4 class="m-b-3">名字：{{ userInfo.T_user_name }}</h4>
+            </div>
+          </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>
+          <div class="btn">
+            <el-button type="primary" @click="LeaveUser(1)">通过</el-button>
+            <el-button type="danger" @click="LeaveUser(0)">不通过</el-button>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
-
-<style scoped></style>
+<style scoped lang="scss">
+.Leave {
+  display: flex;
+  overflow: hidden;
+  .b-show-0 {
+    box-shadow: none;
+  }
+  .title {
+    width: 100%;
+    text-align: center;
+  }
+  .btn {
+    margin-top: 2rem;
+    display: flex;
+    justify-content: space-around;
+  }
+  .info-content {
+    display: flex;
+    color: #303133;
+    .info-name {
+      display: flex;
+      // flex-direction: column;
+      align-items: center;
+      padding-left: 0.75rem;
+      span:first-child {
+        margin-right: 2rem;
+      }
+    }
+  }
+}
+</style>

src/views/workAttendance/MyLeave.vue

@@ -10,13 +10,14 @@ import { GlobalStore } from '@/stores/index'
 import { Edit, Delete } from '@element-plus/icons-vue'
 import type { FormInstance, FormRules } from 'element-plus'
 import { ElMessageBox, ElMessage } from 'element-plus'
+import { dayJs } from '@/utils/common'
 const globalStore = GlobalStore()
 const TableRef = ref()
 const columns: ColumnProps[] = [
   { prop: 'T_type_name', label: '请假类型' },
   { prop: 'T_start_time', label: '开始时间' },
   { prop: 'T_end_time', label: '结束时间' },
-  { prop: 'T_duration', label: '请假时长' },
+  { prop: 'T_duration', label: '请假时长', name: 'T_duration' },
   { prop: 'T_text', label: '理由' },
   { prop: 'T_State', label: '审核', name: 'T_State' },
   { prop: 'operation', label: '操作', width: 200, fixed: 'right' }
@@ -79,7 +80,7 @@ const AddLeave = (formEl: FormInstance | undefined) => {
   formEl.validate(async valid => {
     if (valid) {
       let res: any = {}
-      console.log(form.value, uuid)
+      form.value.T_duration = form.value.T_duration * 60
       if (isNew) {
         res = await Leave_Add({ ...form.value, T_approver: uuid })
       } else {
@@ -117,7 +118,7 @@ const form = ref({
   T_type: '',
   T_start_time: '',
   T_end_time: '',
-  T_duration: '',
+  T_duration: 0,
   T_text: '',
   T_approver: '',
   T_id: ''
@@ -154,108 +155,117 @@ const getApproverInfo = (row: any) => {
   form.value.T_approver = row.T_name
   dialog.value.DialogClose()
 }
+
+const onResize = () => {
+  const height = document.documentElement.clientHeight
+  return height / 2
+}
 onMounted(() => {
   getLeaveTypeList()
 })
 </script>
 
 <template>
-  <TableBase ref="TableRef" :columns="columns" :requestApi="Leave_User_list" :initParam="initParam">
-    <template #table-header>
-      <el-row :gutter="24" class="input-suffix">
-        <el-col :span="8" :offset="16" class="d-flex padding-right-0">
-          <el-button type="primary" @click="openDrawerLeave">请假申请</el-button>
-        </el-col>
-      </el-row>
-    </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 === 0" type="warning">未通过 4</el-tag>
-      <el-tag v-else type="danger">待审核</el-tag>
-    </template>
-    <template #right="{ row }">
-      <el-button link type="primary" size="small" :icon="Edit" @click="openDrawerLeave('edit', row)">编辑</el-button>
-      <el-button link type="danger" size="small" :icon="Delete" @click="LeaveDelete(row)">删除</el-button>
-    </template>
-  </TableBase>
-  <Drawer ref="drawerRef" :handleClose="callbackDrawer">
-    <template #header="{ params }">
-      <h4 :id="params.titleId" :class="params.titleClass">{{ isNew ? '添加' : '编辑' }} - 角色</h4>
-    </template>
-    <el-form ref="ruleFormRef" :model="form" :rules="rules">
-      <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" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="开始时间：" :label-width="formLabelWidth" prop="T_start_time">
-        <el-date-picker
-          style="width: 100%"
-          class="my-date-picker"
-          v-model="form.T_start_time"
-          type="datetime"
-          placeholder="选择开始时间"
-          format="YYYY-MM-DD hh:mm:ss"
-          value-format="YYYY-MM-DD hh:mm:ss"
-        />
-      </el-form-item>
-      <el-form-item label="结束时间：" :label-width="formLabelWidth" prop="T_end_time">
-        <el-date-picker
-          style="width: 100%"
-          class="my-date-picker"
-          v-model="form.T_end_time"
-          type="datetime"
-          placeholder="选择结束时间"
-          format="YYYY-MM-DD hh:mm:ss"
-          value-format="YYYY-MM-DD hh:mm:ss"
-        />
-      </el-form-item>
-      <el-form-item label="请假时长：" :label-width="formLabelWidth" prop="T_duration">
-        <el-input v-model.number="form.T_duration" autocomplete="off" placeholder="请假时长" />
-      </el-form-item>
-      <el-form-item label="内容：" :label-width="formLabelWidth">
-        <el-input
-          v-model="form.T_text"
-          autocomplete="off"
-          type="textarea"
-          :autosize="{ minRows: 4, maxRows: 6 }"
-          placeholder="请输入内容"
-        />
-      </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-form-item>
-      <el-form-item :label-width="formLabelWidth">
-        <el-button v-if="isNew" color="#626aef" @click="AddLeave(ruleFormRef)">添加</el-button>
-        <el-button v-else color="#626aef" @click="AddLeave(ruleFormRef)">修改</el-button>
-      </el-form-item>
-    </el-form>
-  </Drawer>
-  <Dialog ref="dialog" width="30%">
-    <template #header>
-      <h3>选择审批人</h3>
-    </template>
-    <TableBase
-      ref="tableApproverRef"
-      :columns="Dialogcolumns"
-      :initParam="approverInitParam"
-      :requestApi="User_List"
-      layout="total, prev, pager, next"
-    >
+  <div>
+    <TableBase ref="TableRef" :columns="columns" :requestApi="Leave_User_list" :initParam="initParam">
       <template #table-header>
-        <el-row :gutter="20">
-          <el-col :span="20" class="d-flex">
-            <span class="inline-flex">账户查询：</span>
-            <el-input v-model="search" type="text" class="w-50 m-2" />
-            <el-button type="primary" @click="searchHandle">搜索</el-button>
+        <el-row :gutter="24" class="input-suffix">
+          <el-col :span="8" :offset="16" class="d-flex padding-right-0">
+            <el-button type="primary" @click="openDrawerLeave">请假申请</el-button>
           </el-col>
         </el-row>
       </template>
-      <template #T_name="{ row }">
-        <el-button type="primary" link @click="getApproverInfo(row)">{{ row.T_name }}</el-button>
+      <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 #T_duration="{ row }"> {{ row.T_duration }}分钟 </template>
+      <template #right="{ row }">
+        <el-button link type="primary" size="small" :icon="Edit" @click="openDrawerLeave('edit', row)">编辑</el-button>
+        <el-button link type="danger" size="small" :icon="Delete" @click="LeaveDelete(row)">删除</el-button>
       </template>
     </TableBase>
-  </Dialog>
+    <Drawer ref="drawerRef" :handleClose="callbackDrawer">
+      <template #header="{ params }">
+        <h4 :id="params.titleId" :class="params.titleClass">{{ isNew ? '添加' : '编辑' }} - 角色</h4>
+      </template>
+      <el-form ref="ruleFormRef" :model="form" :rules="rules">
+        <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" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="开始时间：" :label-width="formLabelWidth" prop="T_start_time">
+          <el-date-picker
+            style="width: 100%"
+            class="my-date-picker"
+            v-model="form.T_start_time"
+            type="datetime"
+            placeholder="选择开始时间"
+            format="YYYY-MM-DD hh:mm:ss"
+            value-format="YYYY-MM-DD hh:mm:ss"
+          />
+        </el-form-item>
+        <el-form-item label="结束时间：" :label-width="formLabelWidth" prop="T_end_time">
+          <el-date-picker
+            style="width: 100%"
+            class="my-date-picker"
+            v-model="form.T_end_time"
+            type="datetime"
+            placeholder="选择结束时间"
+            format="YYYY-MM-DD hh:mm:ss"
+            value-format="YYYY-MM-DD hh:mm:ss"
+          />
+        </el-form-item>
+        <el-form-item label="请假时长：" :label-width="formLabelWidth" prop="T_duration">
+          <el-input v-model.number="form.T_duration" autocomplete="off" placeholder="请假时长" />
+        </el-form-item>
+        <el-form-item label="内容：" :label-width="formLabelWidth">
+          <el-input
+            v-model="form.T_text"
+            autocomplete="off"
+            type="textarea"
+            :autosize="{ minRows: 4, maxRows: 6 }"
+            placeholder="请输入内容"
+          />
+        </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-form-item>
+        <el-form-item :label-width="formLabelWidth">
+          <el-button v-if="isNew" color="#626aef" @click="AddLeave(ruleFormRef)">添加</el-button>
+          <el-button v-else color="#626aef" @click="AddLeave(ruleFormRef)">修改</el-button>
+        </el-form-item>
+      </el-form>
+    </Drawer>
+    <Dialog ref="dialog" width="30%">
+      <template #header>
+        <h3>选择审批人</h3>
+      </template>
+      <TableBase
+        ref="tableApproverRef"
+        :columns="Dialogcolumns"
+        :initParam="approverInitParam"
+        :requestApi="User_List"
+        layout="total, prev, pager, next"
+        :onResize="onResize"
+      >
+        <template #table-header>
+          <el-row :gutter="20">
+            <el-col :span="20" class="d-flex">
+              <span class="inline-flex">账户查询：</span>
+              <el-input v-model="search" type="text" class="w-50 m-2" />
+              <el-button type="primary" @click="searchHandle">搜索</el-button>
+            </el-col>
+          </el-row>
+        </template>
+        <template #T_name="{ row }">
+          <el-button type="primary" link @click="getApproverInfo(row)">{{ row.T_name }}</el-button>
+        </template>
+      </TableBase>
+    </Dialog>
+  </div>
 </template>
 <style scoped lang="scss">
 .input-suffix {