|  |  |  | 
|---|
|  |  |  | <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/> | 
|---|
|  |  |  | <div style="color: #F56C6C;font-size: 12px">(注:员工手机号将作为平台登录账号,初始密码为系统默认密码配置项)</div> | 
|---|
|  |  |  | </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 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="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="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="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' | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | name: 'OperaCompanyWindow', | 
|---|
|  |  |  | extends: BaseOpera, | 
|---|
|  |  |  | components: { GlobalWindow, UploadAvatarImage }, | 
|---|
|  |  |  | data () { | 
|---|
|  |  |  | components: { GlobalWindow, UploadAvatarImage, UploadFaceImg }, | 
|---|
|  |  |  | data() { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | uploadData: { | 
|---|
|  |  |  | folder: 'member' | 
|---|
|  |  |  | 
|---|
|  |  |  | value: 'id', | 
|---|
|  |  |  | checkStrictly: true | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | companyType: 0, | 
|---|
|  |  |  | department: [], | 
|---|
|  |  |  | // 表单数据 | 
|---|
|  |  |  | form: { | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | created () { | 
|---|
|  |  |  | created() { | 
|---|
|  |  |  | this.config({ | 
|---|
|  |  |  | api: '/business/member.js', | 
|---|
|  |  |  | 'field.id': 'id' | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | handleChangeCompany (value) { | 
|---|
|  |  |  | handleChangeCompany(value) { | 
|---|
|  |  |  | if (this.form.company && this.form.company.length > 1) { | 
|---|
|  |  |  | this.form.companyId = this.form.company[this.form.company.length - 1] | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | * @title 窗口标题 | 
|---|
|  |  |  | * @target 编辑的对象 | 
|---|
|  |  |  | */ | 
|---|
|  |  |  | open (title, target, depart) { | 
|---|
|  |  |  | open(title, target, depart, companyType) { | 
|---|
|  |  |  | this.title = title | 
|---|
|  |  |  | this.department = depart | 
|---|
|  |  |  | this.visible = true | 
|---|
|  |  |  | this.companyType = companyType | 
|---|
|  |  |  | // 新建 | 
|---|
|  |  |  | 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) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 上传图片 | 
|---|
|  |  |  | uploadAvatarSuccess (file) { | 
|---|
|  |  |  | uploadAvatarSuccess(file) { | 
|---|
|  |  |  | this.form.faceImg = file.imgurl | 
|---|
|  |  |  | this.form.faceImgFull = file.imgurlfull | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </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> | 
|---|