| | |
| | | <template> |
| | | <GlobalWindow |
| | | :title="title" |
| | | width="60%" |
| | | :visible.sync="visible" |
| | | :confirm-working="isWorking" |
| | | @confirm="confirm" |
| | | > |
| | | <el-form :model="form" ref="form" :rules="rules"> |
| | | <el-form-item label="姓名" prop="name"> |
| | | <el-input v-model="form.name" placeholder="请输入姓名" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="所属组织" prop="companyId"> |
| | | <el-cascader |
| | | v-model="form.company" |
| | | :options="department" |
| | | @change="handleChangeCompany" |
| | | :show-all-levels="false" |
| | | clearable |
| | | :props="departprops" |
| | | ></el-cascader> |
| | | </el-form-item> |
| | | <el-form-item label="手机号" prop="phone"> |
| | | <el-input v-model="form.phone" placeholder="请输入手机号" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="身份证号" prop="idcardNo" v-if="form.id ==null"> |
| | | <el-input v-model="form.idcardNo" placeholder="请输入身份证号" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="修改身份证号" prop="idcardNoNew" v-if="form.id !=null"> |
| | | <el-input v-model="form.idcardNoNew" placeholder="可修改身份证号" v-trim/> |
| | | <div v-if="form.id !=null"> |
| | | (注:当前身份证号为<span style="color: red">【{{form.idcardDecode}}】</span>,如需修改,请在输入栏填写新的身份证号!) |
| | | </div> |
| | | </el-form-item> |
| | | <el-form-item label="工号" prop="code"> |
| | | <el-input v-model="form.code" placeholder="请输入员工工号" v-trim/> |
| | | </el-form-item> |
| | | <el-form-item label="人脸照片" prop="faceImgFull"> |
| | | <UploadAvatarImage |
| | | :file="{ 'imgurlfull': form.faceImgFull, 'imgurl': form.faceImg }" |
| | | :uploadData="uploadData" |
| | | @uploadSuccess="uploadAvatarSuccess" |
| | | @uploadEnd="isUploading = false" |
| | | @uploadBegin="isUploading = true" |
| | | /> |
| | | </el-form-item> |
| | | </el-form> |
| | | </GlobalWindow> |
| | | <GlobalWindow :title="title" width="60%" :visible.sync="visible" :confirm-working="isWorking" @confirm="confirm"> |
| | | <el-form :model="form" ref="form" :rules="rules"> |
| | | <el-form-item label="姓名" prop="name"> |
| | | <el-input v-model="form.name" placeholder="请输入姓名" v-trim /> |
| | | </el-form-item> |
| | | <el-form-item label="所属组织" prop="companyId"> |
| | | <el-cascader v-model="form.company" :options="department" @change="handleChangeCompany" :show-all-levels="false" |
| | | clearable filterable :props="departprops"></el-cascader> |
| | | <div style="font-size: 12px;color: #F56C6C"> |
| | | 注:仅支持选择 【{{ companyType === 0 ? '相关方组织' : '内部组织' }}】 |
| | | </div> |
| | | </el-form-item> |
| | | <el-form-item label="选择岗位:" prop="positionId" > |
| | | <el-select v-model="form.positionId" clearable filterable placeholder="请选择"> |
| | | <el-option v-for="item in positionList" :key="item.id" :label="item.name" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="手机号" prop="phone"> |
| | | <el-input v-model="form.phone" placeholder="请输入手机号" v-trim /> |
| | | <div style="color: #F56C6C;font-size: 12px">注:员工手机号将作为平台登录账号,初始密码为系统默认密码配置项</div> |
| | | </el-form-item> |
| | | <el-form-item label="身份证号" v-if="form.id == null"> |
| | | <el-input v-model="form.idcardNo" placeholder="请输入身份证号" v-trim /> |
| | | </el-form-item> |
| | | <el-form-item label="修改身份证号" v-if="form.id != null"> |
| | | <el-input v-model="form.idcardNoNew" placeholder="可修改身份证号" v-trim /> |
| | | <div style="font-size: 12px" v-if="form.id != null"> |
| | | 注:当前身份证号为<span style="color: #F56C6C">【{{ form.idcardDecode }}】</span>,如需修改,请在输入栏填写新的身份证号! |
| | | </div> |
| | | </el-form-item> |
| | | <el-form-item label="工号" prop="code"> |
| | | <el-input v-model="form.code" placeholder="请输入员工工号" v-trim /> |
| | | </el-form-item> |
| | | <el-form-item label="入职日期" prop="jobDate"> |
| | | <el-date-picker |
| | | v-model="form.jobDate" |
| | | value-format="yyyy-MM-dd" |
| | | type="date"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item label="是否党员" prop="isDangyuan"> |
| | | <el-radio-group v-model="form.isDangyuan" > |
| | | <el-radio :label="0">非党员</el-radio> |
| | | <el-radio :label="1">党员</el-radio> |
| | | </el-radio-group> |
| | | </el-form-item> |
| | | <el-form-item label="人脸照片" prop="faceImgFull"> |
| | | <div class="upload_wrap"> |
| | | <UploadFaceImg :file="{ 'imgurlfull': form.faceImgFull, 'imgurl': form.faceImg }" :uploadData="uploadData" |
| | | @uploadSuccess="uploadAvatarSuccess" @uploadEnd="isUploading = false" @uploadBegin="isUploading = true" /> |
| | | <div class="content"> |
| | | <div>1、请选择浅色或中性背景,使用均匀光线拍照。</div> |
| | | <div>2、请保持面部正对镜头,勿遮挡面部,保持中立表情。</div> |
| | | <div>3、请避免后期修图,确保人脸轮廓清晰、完整,尽可能减少非脸部内容占比。</div> |
| | | </div> |
| | | </div> |
| | | </el-form-item> |
| | | </el-form> |
| | | </GlobalWindow> |
| | | </template> |
| | | |
| | | <script> |
| | | import BaseOpera from '@/components/base/BaseOpera' |
| | | import GlobalWindow from '@/components/common/GlobalWindow' |
| | | import UploadAvatarImage from '@/components/common/UploadAvatarImage' |
| | | import {checkMobile, validIdCardNo, validIdCardNoNew} from '@/utils/form' |
| | | import UploadFaceImg from '@/components/common/UploadFaceImg' |
| | | import { checkMobile, validIdCardNo, validIdCardNoNew } from '@/utils/form' |
| | | import { allList } from '@/api/business/position' |
| | | export default { |
| | | name: 'OperaCompanyWindow', |
| | | extends: BaseOpera, |
| | | components: { GlobalWindow, UploadAvatarImage }, |
| | | components: { GlobalWindow, UploadAvatarImage, UploadFaceImg }, |
| | | data () { |
| | | return { |
| | | uploadData: { |
| | |
| | | value: 'id', |
| | | checkStrictly: true |
| | | }, |
| | | companyType: 0, |
| | | department: [], |
| | | positionList: [], |
| | | // 表单数据 |
| | | form: { |
| | | id: null, |
| | |
| | | idcardType: 0, |
| | | phone: '', |
| | | faceImg: '', |
| | | jobDate: null, |
| | | isDangyuan: 0, |
| | | positionId: null, |
| | | faceImgFull: '' |
| | | }, |
| | | // 验证规则 |
| | |
| | | * @title 窗口标题 |
| | | * @target 编辑的对象 |
| | | */ |
| | | open (title, target, depart) { |
| | | open (title, target, depart, companyType) { |
| | | this.title = title |
| | | this.department = depart |
| | | this.visible = true |
| | | this.companyType = companyType |
| | | this.getPositionList() |
| | | // 新建 |
| | | if (target == null) { |
| | | this.$nextTick(() => { |
| | |
| | | this.form[key] = target[key] |
| | | this.form.idcardNo = '' |
| | | } |
| | | this.form.company =[] |
| | | this.form.company = [] |
| | | if (target.companyId && target.companyPath) { |
| | | var array = target.companyPath.split('/') |
| | | array.forEach(item => { |
| | |
| | | } |
| | | }) |
| | | } |
| | | console.log(that.form.company) |
| | | }) |
| | | }, |
| | | getPositionList () { |
| | | allList({}) |
| | | .then(res => { |
| | | this.positionList = res |
| | | }) |
| | | }, |
| | | // 上传图片 |
| | | uploadAvatarSuccess (file) { |
| | |
| | | } |
| | | } |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | .upload_wrap{ |
| | | display: flex; |
| | | align-items: center; |
| | | .avatar-uploader{ |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | ::v-deep .avatar{ |
| | | max-width: 90px; |
| | | max-height: 90px; |
| | | } |
| | | .content{ |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: center; |
| | | font-size: 12px; |
| | | color: #999999; |
| | | margin-left: 12px; |
| | | line-height: 24px; |
| | | } |
| | | } |
| | | </style> |