Cold_erp_web/src/views/workAttendance/Overtime.vue

<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { GlobalStore } from '@/stores/index'
import { getFormatDuration } from '@/utils/common'
import { UserFilled } from '@element-plus/icons-vue'
import TableBase from '@/components/TableBase/index.vue'
import { ColumnProps } from '@/components/TableBase/interface/index'
import { Overtime_List, Overtime_Approval } from '@/api/workAttendance/index'
import { useTablePublic, OvertimeUserInfoIn } from '@/hooks/useTablePublic'

const TableRef = ref()
const globalStore = GlobalStore()
const initParam = { User_tokey: globalStore.GET_User_tokey }
const columns: ColumnProps[] = [{ prop: 'T_user_name', label: '姓名' }]
const { tableRowClassName } = useTablePublic()
const tableRowClassNameHandle = (data: any): any => tableRowClassName(data.row.Id, userInfo.value.Id)

const userInfo = ref<OvertimeUserInfoIn>({
  T_uid: '',
  T_user_name: '',
  T_dept: '',
  T_post: '',
  T_type_name: '',
  T_start_time: '',
  T_end_time: '',
  T_text: '',
  Id: '',
  T_prove_img: '',
  T_duration: ''
})

const getSalaryParams = (row: any) => {
  userInfo.value.Id = ''
  setTimeout(() => {
    userInfo.value = { ...row }
  }, 100)
}

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 Overtime_Approval(params)
  if (res.Code === 200) {
    if (T_State) {
      ElMessage.success('审核通过！')
    } else {
      ElMessage.warning('审核不通过！')
    }
    nextTick(() => {
      TableRef.value.getTableList()
      userInfo.value = {} as OvertimeUserInfoIn
    })
  }
}
</script>

<template>
  <div class="Overtime">
    <div style="width: 290px" class="Overtime-table">
      <TableBase
        ref="TableRef"
        :columns="columns"
        :requestApi="Overtime_List"
        :initParam="initParam"
        layout="prev, pager, next"
        :rowClick="getSalaryParams"
        :tableRowClassName="tableRowClassNameHandle"
      >
        <template #table-header>
          <h3 class="title">待处理</h3>
        </template>
      </TableBase>
    </div>
    <transition
      leave-active-class="animate__animated animate__fadeOutRight"
      enter-active-class="animate__animated animate__fadeInLeft"
    >
      <div class="Overtime-container" v-if="userInfo.Id">
        <el-card class="m-b-3 b-show-0">
          <h3 class="title-user 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>
          <div class="Overtime-content">
            <div>
              开始时间：<el-tag v-if="userInfo.T_start_time" type="success" effect="dark">
                {{ userInfo.T_start_time }}
              </el-tag>
            </div>
            <div>
              结束时间：<el-tag v-if="userInfo.T_end_time" type="success" effect="dark">
                {{ userInfo.T_end_time }}
              </el-tag>
            </div>
            <div>
              加班时长：<el-tag v-if="userInfo.T_duration" type="success" effect="dark">
                {{ getFormatDuration(userInfo.T_duration as any) }}
              </el-tag>
            </div>
            <div style="display: flex">
              <span>取证：</span>
              <el-image
                v-if="userInfo.T_prove_img"
                style="width: 200px"
                :preview-src-list="[userInfo.T_prove_img]"
                :preview-teleported="true"
                :src="userInfo.T_prove_img"
                fit="cover"
              />
              <span v-else>无</span>
            </div>
            <div>
              <span class="ml-3 w-35 text-gray-600 inline-flex items-center">内容：</span>
              {{ userInfo.T_text }}
            </div>
          </div>
          <div class="btn">
            <el-button type="primary" @click="LeaveUser(1)">通过</el-button>
            <el-button type="danger" @click="LeaveUser(0)">不通过</el-button>
          </div>
        </el-card>
      </div>
      <!-- <el-row class="h-100 f-1 margin-left-3" v-if="userInfo.Id">
        <el-col :span="24" class="h-100" style="overflow: hidden; display: flex; flex-direction: column">
          <el-card class="m-b-3 b-show-0">
            <h3 class="title-user 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="b-show-0 f-1">
            <el-row>
              <el-col :span="12"
                ><div>
                  开始时间：<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>
                  结束时间：<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>
                  加班时长：<el-tag v-if="userInfo.T_duration" type="success" effect="dark">
                    {{ getFormatDuration(userInfo.T_duration as any) }}
                  </el-tag>
                </div></el-col
              >
            </el-row>
            <el-row>
              <el-col style="display: flex">
                取证：
                <img v-if="userInfo.T_prove_img" :src="userInfo.T_prove_img" class="img" />
                <span v-else>无</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <span class="ml-3 w-35 text-gray-600 inline-flex items-center">内容：</span>
                {{ userInfo.T_text }}
              </el-col>
            </el-row>
            <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> -->
    </transition>
  </div>
</template>

<style scoped lang="scss">
@import '@/styles/var.scss';

.Overtime-container {
  z-index: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  .el-card {
    width: 50%;
    height: 60%;
    border-radius: 12px;
    h3 {
      font-size: 24px;
      text-align: center;
    }
    :deep(.el-card__body) {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
  }
  .Overtime-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    // justify-content: space-between;
    margin-top: 20px;
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 微软雅黑, Arial,
      sans-serif;
    font-size: 14px;
    div {
      margin-bottom: 10px;
    }
  }
}
.Overtime {
  display: flex;
  height: 100%;
  .Overtime-table {
    @include f-direction;
    z-index: 1;
    :deep(.table-header) {
      margin-bottom: 0;
    }
  }
  overflow: hidden;
  .img {
    width: 200px;
  }
  .b-show-0 {
    box-shadow: none;
    font-size: 16px;
    font-weight: 500;
    .el-row {
      margin-bottom: 10px;
      .el-col {
        padding: 15px;
      }
    }
  }
  :deep(.el-card .el-card__body) {
    font-weight: bold;
    // color: var(--el-text-color-secondary);
  }
  .f-1 {
    flex: 1;
  }
  .title {
    width: 100%;
    text-align: center;
  }
  .btn {
    margin-top: 1rem;
    display: flex;
    justify-content: end;
  }
  .info-content {
    display: flex;
    // color: #606266;
    .info-name {
      display: flex;
      // flex-direction: column;
      align-items: center;
      padding-left: 0.75rem;
      span:first-child {
        margin-right: 2rem;
      }
    }
  }
}
</style>