hac/src/views/people/archive/info.vue

<!--  -->
<template>
    <HcCard scrollbar title="员工档案信息编辑" actionUi="text-center">
        <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="姓名:">
                        <el-input v-model="formModel.name"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="年龄:">
                        <el-input v-model="formModel.userAge"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="手机号:">
                        <el-input v-model="formModel.phone"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="身份证姓名:">
                        <el-input v-model="formModel.carName"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="性别:">
                        <el-select v-model="formModel.sex" block placeholder="请选择">
                            <el-option label="男" value="1"/>
                            <el-option label="女" value="2"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="民族:">
                        <el-input v-model="formModel.nation"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="身份证号码:">
                        <el-input v-model="formModel.idNumber"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="出生日期:">
                        <el-date-picker class="block" v-model="formModel.birthday" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="试用期:">
                        <el-input v-model="formModel.periodMoth">
                            <template #append>月</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="身份证地址:">
                        <el-input v-model="formModel.carAddr"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="入职时间:">
                        <el-date-picker class="block" v-model="formModel.entryTime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同类型:">
                        <el-input v-model="formModel.conTypeName" disabled/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="司龄:">
                        <el-input v-model="formModel.cyear" disabled/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同开始日期:">
                        <el-date-picker class="block" v-model="formModel.conStartDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="职位:">
                        <el-input v-model="formModel.postName" disabled/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同结束日期:">
                        <el-date-picker class="block" v-model="formModel.conEndDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" disabled/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="婚姻状况:">
                        <el-select block v-model="formModel.marriageStatus" placeholder="请选择">
                            <el-option v-for="item in dictData.marriage_status" :label="item.dictName" :value="item.dictValue"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="邮箱:">
                        <el-input v-model="formModel.email"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="续签次数:">
                        <el-input v-model="formModel.renewalCount"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="户籍:">
                        <el-input v-model="formModel.domicileAddr"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="部门:">
                        <el-input v-model="formModel.deptName" disabled/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同附件:">
                        <el-link class="truncate" type="primary" target="_blank" :href="formModel.conFileUrl">
                            {{getFileName(formModel.conFileUrl)}}
                        </el-link>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="学历:">
                        <el-select block v-model="formModel.educationType">
                            <el-option v-for="item in dictData.education_type" :label="item.dictName" :value="item.dictValue"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="直属主管:">
                        <el-input v-model="formModel.leaderName" disabled/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="紧急联系人姓名:">
                        <el-input v-model="formModel.emergencyName"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="专业:">
                        <el-input v-model="formModel.speciality"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="政治面貌:">
                        <el-select block v-model="formModel.politicalType" placeholder="请选择">
                            <el-option v-for="item in dictData.political_type" :label="item.dictName" :value="item.dictValue"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系人电话:">
                        <el-input v-model="formModel.emergencyPhone"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="开户行:">
                        <el-input v-model="formModel.bankName"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="员工状态:">
                        <el-select block v-model="formModel.userStatus" placeholder="请选择">
                            <el-option v-for="item in dictData.user_status" :label="item.dictName" :value="item.dictValue"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系人关系:">
                        <el-input v-model="formModel.emergencyRelation"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="银行卡号:">
                        <el-input v-model="formModel.bankNum"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="员工类型:">
                        <el-select block v-model="formModel.userType" placeholder="请选择">
                            <el-option v-for="item in dictData.user_type" :label="item.dictName" :value="item.dictValue"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="员工身份证（人像）:">
                        <HcFormUpload type="preview" :num="1" :src="formModel.carAimgUrl" @upload="formItemUpload('carAimgUrl')" @change="formItemChange($event,'carAimgUrl')"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="员工身份证（国徽）:">
                        <HcFormUpload type="preview" :num="1" :src="formModel.carBimgUrl" @upload="formItemUpload('carBimgUrl')" @change="formItemChange($event,'carBimgUrl')"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="员工照片:">
                        <HcFormUpload type="preview" :num="1" :src="formModel.userImgUrl" @upload="formItemUpload('userImgUrl')" @change="formItemChange($event,'userImgUrl')"/>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #action>
            <el-button size="large" type="info" hc-btn @click="goBackClick">
                <HcIcon name="arrow-go-back"/>
                <span>取消并返回</span>
            </el-button>
            <el-button size="large" type="primary" hc-btn :loading="submitLoading" @click="formSaveClick">
                <HcIcon name="check-double"/>
                <span>提交保存</span>
            </el-button>
        </template>

        <!--上传组件-->
        <HcUploadFile ref="uploadFileRef" :options="uploadOptions" :echoParams="uploadParams" @success="uploadSuccess"/>
    </HcCard>
</template>

<script setup>
import {onActivated, ref} from 'vue'
import mainApi from "~api/people/archive";
import {getTokenHeader} from "~src/api/request/header";
import {getArrValue, getObjValue} from "js-fast-way"
import {useRouter, useRoute} from 'vue-router'
import {getDictInfo} from "~api/other";
import {getFileName} from "~uti/tools";

//初始路由数据
const router = useRouter(), useRoutes = useRoute()
const dataId = ref(useRoutes?.query?.id ?? '')

//页面被激活
onActivated(() => {
    dataId.value = useRoutes?.query?.id ?? ''
    getDictionaryData()
    getUserInfo()
})

//费用类型字典
const dictData = ref({})
const getDictionaryData = async () => {
    let newDict = {}
    //婚姻 ：marriage_status  学历 education_type  政治面貌 political_type  员工状态 user_status  员工类型 user_type
    const keys = ['marriage_status', 'education_type', 'political_type', 'user_status', 'user_type']
    for (let i = 0; i < keys.length; i++) {
        const {data} = await getDictInfo(keys[i])
        newDict[keys[i]] = getArrValue(data)
    }
    dictData.value = newDict
}

//获取用户信息
const getUserInfo = async () => {
    const {data} = await mainApi.detail({
        id: dataId.value
    })
    formModel.value = getObjValue(data)
}

//表单信息
const formRef = ref(null)
const formModel = ref({})
const formRules = {}

//上传配置
const uploadFileRef = ref(null)
const uploadParams = ref({})
const uploadOptions = {
    url: '/api/blade-resource/oss/endpoint/put-file',
    headers: getTokenHeader(),
    accept: 'image/png,image/jpg,image/jpeg',
    accept_tip: '只能上传图片(png、jpg、jpeg)',
    multiple: false,
    size: 50
}

//上传
const formItemUpload = (key) => {
    uploadParams.value = {key}
    uploadFileRef.value?.selectFile();
}

//文件变化
const formItemChange = (src, key) => {
    formModel.value[key] = src
}

//文件上传成功
const uploadSuccess = ({resData, echoParams}) => {
    const {key} = echoParams
    formModel.value[key] = resData.link
    uploadFileRef.value?.setModalShow(false);
}

//提交保存
const submitLoading = ref(false)
const formSaveClick = async () => {
    submitLoading.value = true
    //发起请求
    const {error, code, msg} = await mainApi.submit(formModel.value)
    //判断状态
    submitLoading.value = false
    if (!error && code === 200) {
        window.$message?.success('提交保存成功')
        router.back()
    } else {
        window.$message?.error(msg)
    }
}

//返回
const goBackClick = () => {
    router.back()
}
</script>