Cold_erp_web/src/views/workAttendance/Leave.vue

<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 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>

<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>