|
@@ -1,21 +1,24 @@
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
-import { useQuery } from '@tanstack/vue-query'
|
|
|
|
-import { getRecordsDetail } from '@/api/oa/staffRecords'
|
|
|
|
|
|
+import { useQuery, useMutation } from '@tanstack/vue-query'
|
|
|
|
+import { getRecordsDetail, editRecordsDetail } from '@/api/oa/staffRecords'
|
|
import { useUserStore } from '@/store/modules/user'
|
|
import { useUserStore } from '@/store/modules/user'
|
|
import { getConfigDict } from './index'
|
|
import { getConfigDict } from './index'
|
|
import TechCertificate from '../../personnelManagement/ygdaPage/TechCertificate.vue'
|
|
import TechCertificate from '../../personnelManagement/ygdaPage/TechCertificate.vue'
|
|
import WorkTable from '../../personnelManagement/ygdaPage/WorkTable.vue'
|
|
import WorkTable from '../../personnelManagement/ygdaPage/WorkTable.vue'
|
|
import FamilyTable from '../../personnelManagement/ygdaPage/familyTable.vue'
|
|
import FamilyTable from '../../personnelManagement/ygdaPage/familyTable.vue'
|
|
import SchoolTable from '../../personnelManagement/ygdaPage/SchoolTable.vue'
|
|
import SchoolTable from '../../personnelManagement/ygdaPage/SchoolTable.vue'
|
|
|
|
+import { cloneDeep } from 'lodash-es'
|
|
|
|
+import { FormInstance } from 'element-plus'
|
|
|
|
+import moment from 'moment'
|
|
|
|
|
|
/**
|
|
/**
|
|
* @description 我的档案
|
|
* @description 我的档案
|
|
*/
|
|
*/
|
|
const formConfigList = getConfigDict()
|
|
const formConfigList = getConfigDict()
|
|
-
|
|
|
|
const userId = useUserStore().getUser.id // 当前登录的编号
|
|
const userId = useUserStore().getUser.id // 当前登录的编号
|
|
-
|
|
|
|
|
|
+const isDisabled = ref(true)
|
|
const data = ref<any>({})
|
|
const data = ref<any>({})
|
|
|
|
+const formRef = ref<FormInstance>()
|
|
useQuery(
|
|
useQuery(
|
|
['fetch-staff-detail', userId],
|
|
['fetch-staff-detail', userId],
|
|
async () => {
|
|
async () => {
|
|
@@ -33,26 +36,79 @@ const handleTimeData = (dataSource) => {
|
|
const keyList = ['birthday', 'bysj', 'cjgzsj', 'yshtqssj', 'htdqs', 'htqdsj', 'rgssj', 'zzsj']
|
|
const keyList = ['birthday', 'bysj', 'cjgzsj', 'yshtqssj', 'htdqs', 'htqdsj', 'rgssj', 'zzsj']
|
|
Object.keys(dataSource).forEach((key) => {
|
|
Object.keys(dataSource).forEach((key) => {
|
|
if (keyList.includes(key) && Array.isArray(dataSource[key])) {
|
|
if (keyList.includes(key) && Array.isArray(dataSource[key])) {
|
|
- dataSource[key] = dataSource[key].join('-')
|
|
|
|
|
|
+ const dateString = dataSource[key].join('-')
|
|
|
|
+ const dateValue = moment(dateString).valueOf()
|
|
|
|
+ dataSource[key] = dateValue
|
|
}
|
|
}
|
|
})
|
|
})
|
|
- // console.log('dataSource', dataSource)
|
|
|
|
return dataSource
|
|
return dataSource
|
|
}
|
|
}
|
|
|
|
|
|
-const router = useRouter()
|
|
|
|
|
|
+// const router = useRouter()
|
|
|
|
+const tempData = ref({})
|
|
const editDetail = () => {
|
|
const editDetail = () => {
|
|
- router.push({
|
|
|
|
- path: '/staffDetail',
|
|
|
|
- query: { id: data.value.userId, type: 'edit' }
|
|
|
|
|
|
+ isDisabled.value = false
|
|
|
|
+ tempData.value = cloneDeep(data.value)
|
|
|
|
+ // router.push({
|
|
|
|
+ // path: '/staffDetail',
|
|
|
|
+ // query: { id: data.value.userId, type: 'edit' }
|
|
|
|
+ // })
|
|
|
|
+}
|
|
|
|
+const cancleEdit = () => {
|
|
|
|
+ isDisabled.value = true
|
|
|
|
+ data.value = cloneDeep(tempData.value)
|
|
|
|
+ tempData.value = {}
|
|
|
|
+}
|
|
|
|
+// const saveDetail = () => {
|
|
|
|
+// isDisabled.value = true
|
|
|
|
+// }
|
|
|
|
+
|
|
|
|
+/**编辑员工档案详情 */
|
|
|
|
+const { mutate: addUserMutate } = useMutation({
|
|
|
|
+ mutationFn: async (values: any) => {
|
|
|
|
+ return await editRecordsDetail(values)
|
|
|
|
+ },
|
|
|
|
+ onSuccess() {
|
|
|
|
+ isDisabled.value = true
|
|
|
|
+ ElMessage({
|
|
|
|
+ message: '档案修改成功!',
|
|
|
|
+ type: 'success'
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ onError() {
|
|
|
|
+ ElMessage({
|
|
|
|
+ message: '档案修改失败,请稍后再试!',
|
|
|
|
+ type: 'error'
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+/**表单保存 */
|
|
|
|
+const submitForm = (formEl: FormInstance | undefined) => {
|
|
|
|
+ // console.log('formData.value', formData.value)
|
|
|
|
+ // return
|
|
|
|
+ if (!formEl) return
|
|
|
|
+ formEl.validate((valid) => {
|
|
|
|
+ if (valid) {
|
|
|
|
+ addUserMutate(data.value)
|
|
|
|
+ } else {
|
|
|
|
+ return false
|
|
|
|
+ }
|
|
})
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
<template>
|
|
<template>
|
|
<div class="form-unable-edit my-portrait">
|
|
<div class="form-unable-edit my-portrait">
|
|
- <div class="edit-button"><el-button type="primary" @click="editDetail">编辑</el-button></div>
|
|
|
|
|
|
+ <div class="edit-button">
|
|
|
|
+ <el-button type="default" @click="editDetail" v-if="isDisabled" :disabled="!isDisabled"
|
|
|
|
+ >编辑</el-button
|
|
|
|
+ >
|
|
|
|
+ <el-button type="default" @click="cancleEdit" v-if="!isDisabled">取消编辑</el-button>
|
|
|
|
+ <el-button type="primary" @click="submitForm(formRef)" v-if="!isDisabled">保存</el-button>
|
|
|
|
+ <!-- <el-button type="primary" @click="saveDetail" v-if="!isDisabled">保存</el-button> -->
|
|
|
|
+ </div>
|
|
|
|
|
|
- <el-form ref="formRef" v-if="data" :model="data" label-width="150px" :disabled="true">
|
|
|
|
|
|
+ <el-form ref="formRef" v-if="data" :model="data" label-width="150px" :disabled="isDisabled">
|
|
<div class="my-portrait-item" v-for="(item, index) in formConfigList" :key="index">
|
|
<div class="my-portrait-item" v-for="(item, index) in formConfigList" :key="index">
|
|
<div class="title">
|
|
<div class="title">
|
|
<i></i>
|
|
<i></i>
|
|
@@ -69,6 +125,7 @@ const editDetail = () => {
|
|
style="width: 100%"
|
|
style="width: 100%"
|
|
placeholder=""
|
|
placeholder=""
|
|
type="date"
|
|
type="date"
|
|
|
|
+ value-format="x"
|
|
/>
|
|
/>
|
|
|
|
|
|
<el-select
|
|
<el-select
|
|
@@ -93,36 +150,25 @@ const editDetail = () => {
|
|
</div>
|
|
</div>
|
|
</el-form>
|
|
</el-form>
|
|
|
|
|
|
- <div class="my-portrait-item" style="height: 200px">
|
|
|
|
- <div class="title">
|
|
|
|
- <i></i>
|
|
|
|
- <span>技能证书</span>
|
|
|
|
- </div>
|
|
|
|
-
|
|
|
|
- <div>
|
|
|
|
- <TechCertificate />
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
<div class="my-portrait-item">
|
|
<div class="my-portrait-item">
|
|
- <div class="title">
|
|
|
|
- <i></i>
|
|
|
|
- <span>工作经历</span>
|
|
|
|
- </div>
|
|
|
|
<WorkTable :defaultData="data['workList'] ?? []" :onlyRead="true" />
|
|
<WorkTable :defaultData="data['workList'] ?? []" :onlyRead="true" />
|
|
</div>
|
|
</div>
|
|
<div class="my-portrait-item">
|
|
<div class="my-portrait-item">
|
|
- <div class="title">
|
|
|
|
- <i></i>
|
|
|
|
- <span>家庭成员</span>
|
|
|
|
- </div>
|
|
|
|
<FamilyTable :defaultData="data['familyList'] ?? []" :onlyRead="true" />
|
|
<FamilyTable :defaultData="data['familyList'] ?? []" :onlyRead="true" />
|
|
</div>
|
|
</div>
|
|
<div class="my-portrait-item">
|
|
<div class="my-portrait-item">
|
|
|
|
+ <SchoolTable :defaultData="data['schoolList'] ?? []" :onlyRead="true" />
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div class="my-portrait-item" style="height: 200px">
|
|
<div class="title">
|
|
<div class="title">
|
|
<i></i>
|
|
<i></i>
|
|
- <span>学习经历</span>
|
|
|
|
|
|
+ <span>技能证书</span>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div>
|
|
|
|
+ <TechCertificate />
|
|
</div>
|
|
</div>
|
|
- <SchoolTable :defaultData="data['schoolList'] ?? []" :onlyRead="true" />
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|