gaoluyang
8 天以前 293a46e85cff3af59633cff50a2514cdbd7e8c0b
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<template>
  <div>
    <el-dialog
        v-model="dialogFormVisible"
        title="详情"
        width="70%"
        @close="closeDia"
    >
      <el-descriptions title="基本信息" :column="3" border style="margin-bottom: 16px;">
        <el-descriptions-item label="姓名">{{ currentRow.staffName }}</el-descriptions-item>
        <el-descriptions-item label="员工编号">{{ currentRow.staffNo }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ currentRow.sex }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{ currentRow.age }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ currentRow.phone }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ formatStaffState(currentRow.staffState) }}</el-descriptions-item>
        <el-descriptions-item label="户籍住址" :span="2">{{ currentRow.nativePlace }}</el-descriptions-item>
        <el-descriptions-item label="紧急联系人">{{ currentRow.emergencyContact }}</el-descriptions-item>
        <el-descriptions-item label="紧急联系人电话">{{ currentRow.emergencyContactPhone }}</el-descriptions-item>
        <el-descriptions-item label="合同结束日期">{{ currentRow.contractExpireTime }}</el-descriptions-item>
      </el-descriptions>
      <PIMTable
          rowKey="id"
          :column="tableColumn"
          :tableData="tableData"
          :tableLoading="tableLoading"
          height="360"
      ></PIMTable>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDia">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <Files ref="filesDia"></Files>
  </div>
</template>
 
<script setup>
import {ref} from "vue";
import {findStaffContractListPage} from "@/api/personnelManagement/staffContract.js";
const Files = defineAsyncComponent(() => import( "@/views/personnelManagement/contractManagement/filesDia.vue"));
const { proxy } = getCurrentInstance()
const emit = defineEmits(['close'])
const filesDia = ref()
const dialogFormVisible = ref(false);
const operationType = ref('')
const currentRow = ref({})
const tableColumn = ref([
  {
    label: "合同年限",
    prop: "contractTerm",
  },
  {
    label: "合同开始日期",
    prop: "contractStartTime",
  },
  {
    label: "合同结束日期",
    prop: "contractEndTime",
  },
  {
    dataType: "action",
    label: "操作",
    align: "center",
    fixed: 'right',
    width: 120,
    operation: [
      {
        name: "上传附件",
        type: "text",
        clickFun: (row) => {
          filesDia.value.openDialog( row,'合同')
        },
      }
    ],
  },
]);
const tableData = ref([]);
const tableLoading = ref(false);
 
// 状态格式化
const formatStaffState = (state) => {
  if (state == 0) return "离职";
  if (state == 1) return "在职";
  return "-";
};
 
// 打开弹框
const openDialog = (type, row) => {
  operationType.value = type;
  currentRow.value = row || {};
  dialogFormVisible.value = true;
  if (operationType.value === 'edit') {
    findStaffContractListPage({staffOnJobId: row.id}).then(res => {
      tableData.value = res.data.records.map(item => {
         if (item.contractStartTime && item.contractEndTime) {
           const startDate = new Date(item.contractStartTime);
           const endDate = new Date(item.contractEndTime);
           if (!isNaN(startDate.getTime()) && !isNaN(endDate.getTime())) {
             item.contractTerm = endDate.getFullYear() - startDate.getFullYear()+"年";
           }
         }
         return item;
       })
    })
  }
}
 
const openUploadFile = (row) => {
  filesDia.value.open = true
  filesDia.value.row = row
}
 
// 关闭弹框
const closeDia = () => {
  dialogFormVisible.value = false;
  emit('close')
};
defineExpose({
  openDialog,
});
</script>
 
<style scoped>
 
</style>