123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317 |
- <!-- -->
- <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>
|