Cold_erp_web/src/views/salary/Reimburse/Reimburse.vue

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import ReimburseFrom from './ReimburseFrom.vue'

import { GlobalStore } from '@/stores/index'
import { Reimburse_UserList } from '@/api/Reimburse/index'
import TableBase from '@/components/TableBase/index.vue'
import { ColumnProps } from '@/components/TableBase/interface/index'
import { useTablePublic } from '@/hooks/useTablePublic'

const data = reactive({
  fromDatas:{T_uuid:''}
})



let date = new Date()
const year = date.getFullYear()
const month = date.getMonth()
const salaryFromData = reactive({
  year: year + '',
  month: (month < 10 ? '0' : '') + month,
  T_uuid: ''
})
const globalStore = GlobalStore()
const TableRef = ref<InstanceType<typeof TableBase> | null>(null)
const ReimburseFromRef = ref<InstanceType<typeof ReimburseFrom> | null>(null)
const { tableRowClassName } = useTablePublic()
const tableRowClassNameHandle = (data: any): any => tableRowClassName(data.row.T_uuid, salaryFromData.T_uuid)

// 搜索以及参数
const columns: ColumnProps[] = [
  { prop: 'T_name', label: '姓名' },
  // { prop: 'T_post_name', label: '职位' },
  { prop: 'T_wait_audit', label: '状态' }

]

const searchs = reactive({
  T_name: '',
  T_dept: ''
})
const initParam = {
  User_tokey: globalStore.GET_User_tokey,
  T_name: '',
  T_dept: ''
}

const searchHandle = () => {
  initParam.T_name = searchs.T_name
  initParam.T_dept = searchs.T_dept
  TableRef.value?.searchTable()
}

const getSalaryParams = (row: any) => {
  console.log('点击222',row.T_uuid)
  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
  data.fromDatas.T_uuid = row.T_uuid //yj
  getSalary()
}

const getSalary = async () => {
  console.log('点击')
}
const userInfo = reactive({
  squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
  name: '',
  T_dept: '',
  T_post: ''
})
</script>

<template>
  <div class="salary">
    <div style="width: 290px" class="salary-table">
      <TableBase
        ref="TableRef"
        :columns="columns"
        :requestApi="Reimburse_UserList"
        :initParam="initParam"
        layout="prev, pager, next"
        :rowClick="getSalaryParams"
        :tableRowClassName="tableRowClassNameHandle">
        <template #table-header>
          <el-row :gutter="24" class="input-suffix margin-left-0 margin-right-0">
            <el-col :span="24" class="d-flex padding-right-0 padding-left-0">
              <span class="inline-flex">姓名：</span>
              <el-input v-model="searchs.T_name" type="text" />
              <el-button type="primary" @click="searchHandle" style="margin-left: 5px;">搜索</el-button>
            </el-col>
          </el-row>
        </template>
      </TableBase> 
    </div>
    <el-row class="h-100 f-1 margin-left-3">
      <el-col :span="24" class="h-100" style="overflow: hidden; display: flex; flex-direction: column">
        <el-card class="b-r m-b-3">
          <h3 class="title m-b-5">员工基本信息</h3>
          <div class="info-content">
            <el-avatar shape="square" size="large" :src="userInfo.squareUrl" />
            <div class="info-name">
              <h4>名字：{{ userInfo.name }}</h4>
              <h4>
                <span>部门：{{ userInfo.T_dept }}</span>
                <span>岗位：{{ userInfo.T_post }}</span>
              </h4>
            </div>
          </div>
        </el-card>
        
        <ReimburseFrom ref="ReimburseFromRef" :fromDatas="data.fromDatas"></ReimburseFrom>
      </el-col>
    </el-row>
  </div>
</template>

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