|
|
@@ -0,0 +1,569 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-form
|
|
|
+ :model="operationForm"
|
|
|
+ ref="OperationFormRef"
|
|
|
+ :rules="operationRules"
|
|
|
+ label-width="120"
|
|
|
+ >
|
|
|
+ <el-descriptions title="基本信息">
|
|
|
+ <el-descriptions-item>
|
|
|
+ <template #default>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="type" label="业务员类型">
|
|
|
+ <el-select v-model="operationForm" placeholder="请选择业务员类型">
|
|
|
+ <el-option key="1" value="类型1"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="team" label="所属团队">
|
|
|
+ <el-select v-model="operationForm" placeholder="请选择所属团队">
|
|
|
+ <el-option key="1" value="团队1"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="name" label="姓名">
|
|
|
+ <el-input v-model="operationForm" placeholder="请填写姓名"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="telephone" label="手机号">
|
|
|
+ <el-input v-model="operationForm" placeholder="请填写手机号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="organization" label="所属机构">
|
|
|
+ <el-select v-model="operationForm" placeholder="请选择所属机构">
|
|
|
+ <el-option key="1" value="机构1"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="number" label="证件号">
|
|
|
+ <el-input v-model="operationForm" placeholder="请填写证件号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="startTime" label="证件有效期始">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="operationForm"
|
|
|
+ type="date"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="endTime" label="证件有效期止">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="operationForm"
|
|
|
+ type="date"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ <el-descriptions title="其他信息">
|
|
|
+ <el-descriptions-item>
|
|
|
+ <template #default>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="name" label="管理人">
|
|
|
+ <el-input v-model="operationForm" placeholder="请填写管理人"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="telephone" label="管理人工号">
|
|
|
+ <el-input v-model="operationForm" placeholder="请填写管理人工号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="name" label="推荐人">
|
|
|
+ <el-input v-model="operationForm" placeholder="请填写推荐人"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="telephone" label="推荐人工号">
|
|
|
+ <el-input v-model="operationForm" placeholder="请填写推荐人工号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ <el-descriptions title="资料附件">
|
|
|
+ <el-descriptions-item>
|
|
|
+ <template #default>
|
|
|
+ <el-form-item prop="" label="身份证(人像面)" label-width="150">
|
|
|
+ <el-upload v-if="!IDCardFront" action="#" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 1)">
|
|
|
+ <el-button link type="primary">上传</el-button>
|
|
|
+ </el-upload>
|
|
|
+ <div class="fileInfo" v-else>
|
|
|
+ <div class="fileName">{{ IDCardFrontName }}</div>
|
|
|
+ <div class="fileBtn">
|
|
|
+ <el-upload action="#" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 1)" style="display: flex; align-items: center">
|
|
|
+ <el-icon class="btn-icon"><Upload /></el-icon>
|
|
|
+ </el-upload>
|
|
|
+ <el-icon class="btn-icon" @click="imageView(1)"><View /></el-icon>
|
|
|
+ <el-icon class="btn-icon"><Download /></el-icon>
|
|
|
+ <el-icon class="btn-icon"><Delete /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="" label="身份证(国徽面)" label-width="150">
|
|
|
+ <el-upload v-if="!IDCardBack" action="#" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 2)">
|
|
|
+ <el-button link type="primary">上传</el-button>
|
|
|
+ </el-upload>
|
|
|
+ <div class="fileInfo" v-else>
|
|
|
+ <div class="fileName">{{ IDCardBackName }}</div>
|
|
|
+ <div class="fileBtn">
|
|
|
+ <el-upload action="#" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 2)" style="display: flex; align-items: center">
|
|
|
+ <el-icon class="btn-icon"><Upload /></el-icon>
|
|
|
+ </el-upload>
|
|
|
+ <el-icon class="btn-icon" @click="imageView(2)"><View /></el-icon>
|
|
|
+ <el-icon class="btn-icon"><Download /></el-icon>
|
|
|
+ <el-icon class="btn-icon"><Delete /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="" label="展业资格证" label-width="150">
|
|
|
+ <el-upload v-if="!certification" action="#" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 3)">
|
|
|
+ <el-button link type="primary">上传</el-button>
|
|
|
+ </el-upload>
|
|
|
+ <div class="fileInfo" v-else>
|
|
|
+ <div class="fileName">{{ certificationName }}</div>
|
|
|
+ <div class="fileBtn">
|
|
|
+ <el-upload action="#" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 3)" style="display: flex; align-items: center">
|
|
|
+ <el-icon class="btn-icon"><Upload /></el-icon>
|
|
|
+ </el-upload>
|
|
|
+ <el-icon class="btn-icon" @click="imageView(3)"><View /></el-icon>
|
|
|
+ <el-icon class="btn-icon"><Download /></el-icon>
|
|
|
+ <el-icon class="btn-icon"><Delete /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ <el-divider />
|
|
|
+ <el-button v-if="!recordShow" link type="primary" icon="plus" @click="recordShow = !recordShow">填写人事档案(选填)</el-button>
|
|
|
+ <el-button v-else link type="primary" icon="ArrowUp" @click="recordShow = !recordShow">收起人事档案(选填)</el-button>
|
|
|
+ <br/><br/>
|
|
|
+ <el-descriptions title="个人信息" v-show="recordShow">
|
|
|
+ <el-descriptions-item>
|
|
|
+ <template #default>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="sex" label="性别">
|
|
|
+ <el-select v-model="operationForm" placeholder="请选择性别">
|
|
|
+ <el-option key="1" value="类型1"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="born" label="出生日期">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="operationForm"
|
|
|
+ type="date"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="type" label="民族">
|
|
|
+ <el-select v-model="operationForm" placeholder="请选择业务员类型">
|
|
|
+ <el-option key="1" value="类型1"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="team" label="户籍">
|
|
|
+ <el-input v-model="operationForm" placeholder="请填写户籍"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="type" label="婚姻状况">
|
|
|
+ <el-select v-model="operationForm" placeholder="请选择婚姻状况">
|
|
|
+ <el-option key="1" value="类型1"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="team" label="政治面貌">
|
|
|
+ <el-select v-model="operationForm" placeholder="请选择政治面貌">
|
|
|
+ <el-option key="1" value="团队1"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="type" label="健康状况">
|
|
|
+ <el-select v-model="operationForm" placeholder="请选择健康状况">
|
|
|
+ <el-option key="1" value="类型1"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="team" label="居住地区">
|
|
|
+ <el-select v-model="operationForm" placeholder="请选择居住地区">
|
|
|
+ <el-option key="1" value="团队1"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="team" label="详细地址">
|
|
|
+ <el-input v-model="operationForm" placeholder="请填写详细地址"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="team" label="邮政编码">
|
|
|
+ <el-input v-model="operationForm" placeholder="请填写邮政编码"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ <el-descriptions title="学历信息" v-show="recordShow">
|
|
|
+ <el-descriptions-item>
|
|
|
+ <template #default>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="sex" label="学历">
|
|
|
+ <el-select v-model="operationForm" placeholder="请选择学历">
|
|
|
+ <el-option key="1" value="类型1"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="born" label="毕业时间">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="operationForm"
|
|
|
+ type="date"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 100%"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="type" label="毕业院校">
|
|
|
+ <el-input v-model="operationForm" placeholder="请填写毕业院校"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="team" label="是否计算机专业">
|
|
|
+ <el-select v-model="operationForm" placeholder="请选择是否计算机专业">
|
|
|
+ <el-option key="1" value="类型1"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ <el-descriptions title="紧急联系人信息" v-show="recordShow">
|
|
|
+ <el-descriptions-item>
|
|
|
+ <template #default>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="team" label="姓名">
|
|
|
+ <el-input v-model="operationForm" placeholder="请填写姓名"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="team" label="手机号">
|
|
|
+ <el-input v-model="operationForm" placeholder="请填写手机号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ <el-descriptions title="工资信息" v-show="recordShow">
|
|
|
+ <el-descriptions-item>
|
|
|
+ <template #default>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="team" label="工资">
|
|
|
+ <el-input v-model="operationForm" placeholder="请填写工资"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="team" label="工资等级">
|
|
|
+ <el-input v-model="operationForm" placeholder="请填写工资等级"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="team" label="银行卡号">
|
|
|
+ <el-input v-model="operationForm" placeholder="请填写银行卡号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-form-item prop="team" label="开户行">
|
|
|
+ <el-input v-model="operationForm" placeholder="请填写开户行"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </template>
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ <el-divider v-show="recordShow" />
|
|
|
+ <el-descriptions v-show="recordShow" title="其它附件">
|
|
|
+ <el-descriptions-item>
|
|
|
+ <template #default>
|
|
|
+ <el-form-item prop="" label="劳动合同" label-width="150">
|
|
|
+ <el-upload v-if="!contract" action="#" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 4)">
|
|
|
+ <el-button link type="primary">上传</el-button>
|
|
|
+ </el-upload>
|
|
|
+ <div class="fileInfo" v-else>
|
|
|
+ <div class="fileName">{{ contractName }}</div>
|
|
|
+ <div class="fileBtn">
|
|
|
+ <el-upload action="#" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 4)" style="display: flex; align-items: center">
|
|
|
+ <el-icon class="btn-icon"><Upload /></el-icon>
|
|
|
+ </el-upload>
|
|
|
+ <el-icon class="btn-icon" @click="imageView(4)"><View /></el-icon>
|
|
|
+ <el-icon class="btn-icon"><Download /></el-icon>
|
|
|
+ <el-icon class="btn-icon"><Delete /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="" label="应聘表" label-width="150">
|
|
|
+ <el-upload v-if="!applicant" action="#" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 5)">
|
|
|
+ <el-button link type="primary">上传</el-button>
|
|
|
+ </el-upload>
|
|
|
+ <div class="fileInfo" v-else>
|
|
|
+ <div class="fileName">{{ applicantName }}</div>
|
|
|
+ <div class="fileBtn">
|
|
|
+ <el-upload action="#" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 5)" style="display: flex; align-items: center">
|
|
|
+ <el-icon class="btn-icon"><Upload /></el-icon>
|
|
|
+ </el-upload>
|
|
|
+ <el-icon class="btn-icon" @click="imageView(5)"><View /></el-icon>
|
|
|
+ <el-icon class="btn-icon"><Download /></el-icon>
|
|
|
+ <el-icon class="btn-icon"><Delete /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="" label="定薪表" label-width="150">
|
|
|
+ <el-upload v-if="!decidePay" action="#" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 6)">
|
|
|
+ <el-button link type="primary">上传</el-button>
|
|
|
+ </el-upload>
|
|
|
+ <div class="fileInfo" v-else>
|
|
|
+ <div class="fileName">{{ decidePayName }}</div>
|
|
|
+ <div class="fileBtn">
|
|
|
+ <el-upload action="#" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 6)" style="display: flex; align-items: center">
|
|
|
+ <el-icon class="btn-icon"><Upload /></el-icon>
|
|
|
+ </el-upload>
|
|
|
+ <el-icon class="btn-icon" @click="imageView(6)"><View /></el-icon>
|
|
|
+ <el-icon class="btn-icon"><Download /></el-icon>
|
|
|
+ <el-icon class="btn-icon"><Delete /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="" label="离职表" label-width="150">
|
|
|
+ <el-upload v-if="!dimission" action="#" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 7)">
|
|
|
+ <el-button link type="primary">上传</el-button>
|
|
|
+ </el-upload>
|
|
|
+ <div class="fileInfo" v-else>
|
|
|
+ <div class="fileName">{{ dimissionName }}</div>
|
|
|
+ <div class="fileBtn">
|
|
|
+ <el-upload action="#" :show-file-list="false" accept=".png, .jpg, .jpeg" @change="uploadImage($event, 7)" style="display: flex; align-items: center">
|
|
|
+ <el-icon class="btn-icon"><Upload /></el-icon>
|
|
|
+ </el-upload>
|
|
|
+ <el-icon class="btn-icon" @click="imageView(7)"><View /></el-icon>
|
|
|
+ <el-icon class="btn-icon"><Download /></el-icon>
|
|
|
+ <el-icon class="btn-icon"><Delete /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </el-descriptions-item>
|
|
|
+ </el-descriptions>
|
|
|
+ </el-form>
|
|
|
+ <div class="image-view" v-if="imageShow" @click="imageShow = false">
|
|
|
+ <img :src="imageUrl" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref } from 'vue'
|
|
|
+
|
|
|
+// 添加/编辑业务员表单
|
|
|
+let operationForm = ref({
|
|
|
+
|
|
|
+})
|
|
|
+// 添加/编辑业务员表单校验
|
|
|
+let operationRules = ref({
|
|
|
+
|
|
|
+})
|
|
|
+// 身份证人像面
|
|
|
+let IDCardFrontName = ref('')
|
|
|
+let IDCardFront = ref('')
|
|
|
+// 身份证国徽面
|
|
|
+let IDCardBackName = ref('')
|
|
|
+let IDCardBack = ref('')
|
|
|
+// 展业资格证
|
|
|
+let certificationName = ref('')
|
|
|
+let certification = ref('')
|
|
|
+// 劳务合同
|
|
|
+let contractName = ref('')
|
|
|
+let contract = ref('')
|
|
|
+// 应聘表
|
|
|
+let applicantName = ref('')
|
|
|
+let applicant = ref('')
|
|
|
+// 定薪表
|
|
|
+let decidePayName = ref('')
|
|
|
+let decidePay = ref('')
|
|
|
+// 离职表
|
|
|
+let dimissionName = ref('')
|
|
|
+let dimission = ref('')
|
|
|
+// 图片预览地址
|
|
|
+let imageShow = ref(false)
|
|
|
+let imageUrl = ref('')
|
|
|
+
|
|
|
+// 上传图片
|
|
|
+const uploadImage = (file, type) => {
|
|
|
+ let files = file.raw
|
|
|
+ let url = window.URL.createObjectURL(files); //转临时路径
|
|
|
+ console.log(123123123, file, type)
|
|
|
+ switch (type) {
|
|
|
+ case 1:
|
|
|
+ IDCardFrontName.value = files.name
|
|
|
+ IDCardFront.value = url
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ IDCardBackName.value = files.name
|
|
|
+ IDCardBack.value = url
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ certificationName.value = files.name
|
|
|
+ certification.value = url
|
|
|
+ break;
|
|
|
+ case 4:
|
|
|
+ contractName.value = files.name
|
|
|
+ contract.value = url
|
|
|
+ break;
|
|
|
+ case 5:
|
|
|
+ applicantName.value = files.name
|
|
|
+ applicant.value = url
|
|
|
+ break;
|
|
|
+ case 6:
|
|
|
+ decidePayName.value = files.name
|
|
|
+ decidePay.value = url
|
|
|
+ break;
|
|
|
+ case 7:
|
|
|
+ dimissionName.value = files.name
|
|
|
+ dimission.value = url
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ const params = new FormData(); // 声明formData数据类型
|
|
|
+ params.append("multipartFile", files);
|
|
|
+ params.append("type", "image");
|
|
|
+}
|
|
|
+
|
|
|
+// 人事档案
|
|
|
+let recordShow = ref(false)
|
|
|
+
|
|
|
+const imageView = (type) => {
|
|
|
+ imageShow.value = true
|
|
|
+ switch (type) {
|
|
|
+ case 1:
|
|
|
+ imageUrl.value = IDCardFront.value
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ imageUrl.value = IDCardBack.value
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ imageUrl.value = certification.value
|
|
|
+ break;
|
|
|
+ case 4:
|
|
|
+ imageUrl.value = contract.value
|
|
|
+ break;
|
|
|
+ case 5:
|
|
|
+ imageUrl.value = applicant.value
|
|
|
+ break;
|
|
|
+ case 6:
|
|
|
+ imageUrl.value = decidePay.value
|
|
|
+ break;
|
|
|
+ case 7:
|
|
|
+ imageUrl.value = dimission.value
|
|
|
+ break;
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.fileInfo{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding: 2px 20px;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin: 0 10px;
|
|
|
+ &:hover{
|
|
|
+ background: #ccc;
|
|
|
+ }
|
|
|
+ .fileName{
|
|
|
+ width: 200px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .fileBtn{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .btn-icon{
|
|
|
+ margin: 0 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover{
|
|
|
+ color: #00a0f4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.image-view{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(0,0,0,.6);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 9999;
|
|
|
+ img{
|
|
|
+ width: 800px;
|
|
|
+ height: 800px;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|