<template>
|
<Row>
|
<h4 class="font-weight-bold py-3 mb-2">
|
<router-link to="/personnel">
|
<span class="text-muted font-weight-light">人员管理 /</span>
|
</router-link>
|
{{cardTitle}}
|
</h4>
|
<!-- <Col :span="18" :offset="3"> -->
|
<b-card
|
class="pt30 pl20 pr20 pb30"
|
>
|
<b-form
|
>
|
<div class="row">
|
<div class="col">
|
<b-form-group
|
label="人员类型："
|
horizontal
|
:label-cols="4"
|
label-class="text-sm-right"
|
>
|
<b-form-select
|
v-model="form.type"
|
:options="selectPersonType"
|
value-field="lable"
|
text-field="lable"
|
/>
|
</b-form-group>
|
<b-form-group
|
v-if="form.type === '校外'"
|
label="来访单位："
|
horizontal
|
:label-cols="4"
|
label-class="text-sm-right"
|
>
|
<b-form-input
|
autocomplete="off"
|
id="exampleInput2"
|
type="text"
|
v-model="form.unitName"
|
placeholder="请输入来访单位"
|
/>
|
</b-form-group>
|
<b-form-group
|
id="exampleInputGroup1"
|
horizontal
|
:label-cols="4"
|
label-class="text-sm-right"
|
label="姓名："
|
label-for="exampleInput1"
|
:invalid-feedback="invalidName"
|
>
|
<b-form-input
|
autocomplete="off"
|
id="exampleInput1"
|
type="text"
|
v-model="form.name"
|
:state="stateName"
|
required
|
placeholder="请输入姓名"
|
/>
|
</b-form-group>
|
<b-form-group
|
horizontal
|
:label-cols="4"
|
label-class="text-sm-right"
|
label="性别："
|
:invalid-feedback="invalidGender"
|
>
|
<b-form-select
|
v-model="form.gender"
|
:state="stateGender"
|
:options="selectSex"
|
/>
|
</b-form-group>
|
<b-form-group
|
horizontal
|
:label-cols="4"
|
label-class="text-sm-right"
|
id="exampleInputGroup2"
|
label="身份证号："
|
label-for="exampleInput2"
|
:invalid-feedback="invalidCardId"
|
>
|
<b-form-input
|
autocomplete="off"
|
id="exampleInput2"
|
type="text"
|
:state="stateCardId"
|
v-model="form.cardId"
|
required
|
placeholder="请输入身份证号"
|
/>
|
</b-form-group>
|
<b-form-group
|
label="电话："
|
horizontal
|
:label-cols="4"
|
label-class="text-sm-right"
|
:invalid-feedback="invalidPhone"
|
>
|
<b-form-input
|
autocomplete="off"
|
type="text"
|
:state="statePhone"
|
v-model="form.phone"
|
placeholder="请输入电话"
|
/>
|
</b-form-group>
|
</div>
|
<div class="col">
|
<b-form-group
|
horizontal
|
:label-cols="4"
|
label-class="text-sm-right"
|
label="上传头像："
|
>
|
<div v-if="!form.photos" class="file-update-content">
|
<b-form-file
|
v-model="file"
|
class="file-update"
|
@change="upLoad"
|
plain accept="image/png, image/jpeg, image/gif, image/jpg"
|
/>
|
<span class="file-update-icon ion ion-md-add"></span>
|
</div>
|
<div v-if="form.photos" class="img-content" @click="handleDelImg">
|
<span class="ion-md-close"></span>
|
<httpImg :src="form.photos" alt width="100%" />
|
</div>
|
</b-form-group>
|
<b-form-group
|
label="编制："
|
horizontal
|
:label-cols="4"
|
label-class="text-sm-right"
|
:invalid-feedback="invalidCompactType"
|
>
|
<b-form-select
|
v-model="form.compactType"
|
:options="selectTeacherType"
|
:state="stateCompactType"
|
/>
|
</b-form-group>
|
<b-form-group
|
label="工号/学号："
|
horizontal
|
:label-cols="4"
|
label-class="text-sm-right"
|
>
|
<b-form-input
|
autocomplete="off"
|
type="text"
|
v-model="form.no"
|
placeholder="工卡、学生校徽等卡片编号"
|
/>
|
</b-form-group>
|
<b-form-group
|
label="备注："
|
horizontal
|
:label-cols="4"
|
label-class="text-sm-right"
|
>
|
<b-form-textarea
|
v-model="form.remarks"
|
placeholder="请输入来访单位"
|
:rows="3"
|
:max-rows="6"
|
/>
|
</b-form-group>
|
</div>
|
</div>
|
</b-form>
|
</b-card>
|
<!-- header="关系(请先保存人员信息)" -->
|
<b-card
|
class="mt-4"
|
>
|
<b-card-header
|
v-if="!$route.query.employeeId"
|
class="pb-2 clearfix"
|
>
|
<span>关系</span>
|
<b-btn
|
@click="addRelation"
|
variant="warning"
|
class="fr"
|
>
|
添加关系
|
</b-btn>
|
</b-card-header>
|
<div class="row">
|
<div class="col">
|
<b-form-group
|
v-if="!$route.query.employeeId"
|
>
|
<!-- 关系 -->
|
<div class="mb20 pt-3" style="margin-left: 0; margin-right: 0">
|
<div
|
:key="item.id"
|
v-for="(item, index) in relationData"
|
class="col-md-6 col-xl-4"
|
>
|
<b-dropdown variant="link" right size="lg" no-caret>
|
<template slot="button-content">
|
<b-card
|
class="card-condenced"
|
body-class="media align-items-center"
|
style="width: 400px"
|
@click="handleChangeRelation(index)"
|
>
|
<httpImg :src="item.photos" style="width: 50px" />
|
<div class="media-body ml-3">
|
<a
|
href="javascript:void(0)"
|
class="text-dark font-weight-semibold mb-2"
|
>
|
{{item.name}}
|
</a>
|
</div>
|
<div>
|
<span>{{item.relation || '点击选择关系类型'}}</span>
|
</div>
|
<b-btn
|
variant="outline-danger btn-round md-btn-flat"
|
size="sm"
|
class="d-block mr10 ml10"
|
@click.prevent.stop="handleClickDel(index)"
|
>
|
删除
|
</b-btn>
|
</b-card>
|
</template>
|
<b-dd-item @click="handleClickSelect(index, '父亲')">父亲</b-dd-item>
|
<b-dd-item @click="handleClickSelect(index, '母亲')">母亲</b-dd-item>
|
<b-dd-item style="width: 400px" @click="handleClickSelect(index, '其他亲属')">其他亲属</b-dd-item>
|
<b-dd-item style="width: 400px" @click="handleClickSelect(index, '团队成员')">团队成员</b-dd-item>
|
</b-dropdown>
|
</div>
|
</div>
|
</b-form-group>
|
</div>
|
<div class="col"></div>
|
</div>
|
<div class="fr mr10">
|
<b-button
|
:disabled="submitDisabled"
|
variant="primary"
|
@click="onSubmit"
|
>
|
保 存
|
</b-button>
|
<b-button
|
v-if="!$route.query.employeeId"
|
:disabled="submitDisabled"
|
@click="onSubmit('goOn')"
|
variant="primary"
|
>
|
保存并继续添加
|
</b-button>
|
<b-button
|
variant="outline-primary"
|
@click="onReset"
|
>
|
取 消
|
</b-button>
|
</div>
|
</b-card>
|
<!-- </Col> -->
|
<PersonnelFromRelation
|
ref="fromRelation"
|
:orgId="currentOfficeId"
|
@relationData="getRelationData"
|
/>
|
</Row>
|
</template>
|
|
<style src="@/vendor/styles/pages/messages.scss" lang="scss"></style>
|
|
<script>
|
import axios from 'axios'
|
import { Row, Col } from 'element-ui'
|
import PersonnelFromRelation from './component/PersonnelFromRelation'
|
import PerfectScrollbar from '@/vendor/libs/perfect-scrollbar/PerfectScrollbar'
|
import {
|
userEdit,
|
getTearchPact,
|
getUserAdd,
|
getPeoType,
|
findUserById
|
} from '../../server/personnel.js'
|
|
export default {
|
data: () => ({
|
submitDisabled: false,
|
relationData: [],
|
file: null,
|
currentId: '',
|
currentOfficeId: '',
|
cardTitle: '',
|
selectSex: [
|
{ text: '请选择性别', value: '' },
|
{ text: '男', value: '男' },
|
{ text: '女', value: '女' }
|
],
|
selectPersonType: [],
|
modelList: [],
|
selectTeacherType: [],
|
ischeckUp: false,
|
form: {
|
name: '',
|
cardId: '',
|
gender: '',
|
phone: '',
|
type: '',
|
compactType: '',
|
remarks: '',
|
photos: '',
|
unitName: '',
|
no: '',
|
list: []
|
}
|
}),
|
mounted() {
|
this._getTeacherPact()
|
this._initPeoType()
|
this.currentOfficeId = this.$route.query.currentId
|
this.cardTitle = `人员添加 -- ${this.$route.query.currentName}`
|
if (this.$route.query.employeeId) {
|
this.cardTitle = `人员编辑 -- ${this.$route.query.currentName}`
|
this.fetchUserInfo()
|
}
|
},
|
computed: {
|
orgId() {
|
return this.$store.getters.basicUserInfo.orgId
|
},
|
stateName() {
|
return this.ischeckUp ? this.form.name.length > 0 : null
|
},
|
invalidName() {
|
if (!this.form.name.length) {
|
return this.ischeckUp ? '请输入姓名' : ''
|
}
|
},
|
stateGender() {
|
return this.ischeckUp ? this.form.gender.length > 0 : null
|
},
|
invalidGender() {
|
if (!this.form.gender.length) {
|
return this.ischeckUp ? '请选择性别' : ''
|
}
|
},
|
stateCardId() {
|
const reg = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/
|
return this.ischeckUp ? reg.test(this.form.cardId) : null
|
},
|
invalidCardId() {
|
const reg = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/
|
return this.ischeckUp ? reg.test(this.form.cardId) ? '' : '请正确填写身份证号' : ''
|
},
|
statePhone() {
|
const reg = /^1[3-9]\d{9}$/
|
return this.ischeckUp ? this.form.type !== '学生' ? reg.test(this.form.phone) : null : null
|
},
|
invalidPhone() {
|
const reg = /^1[3-9]\d{9}$/
|
return this.ischeckUp ? this.form.type !== '学生' ? reg.test(this.form.phone) ? '' : '请正确填写手机号' : '' : ''
|
},
|
stateCompactType() {
|
return this.ischeckUp ? this.form.type === '教师' ? this.form.compactType.length > 0 : null : null
|
},
|
invalidCompactType() {
|
// return this.ischeckUp ? this.form.type === '教师' ? !this.form.compactType.length ? '请选择编制' : '' : '' : ''
|
return this.ischeckUp ? '请选择编制' : ''
|
},
|
getImgUrl() {
|
if (this.file) {
|
return window.URL.createObjectURL(this.file)
|
} else {
|
return ''
|
}
|
}
|
},
|
methods: {
|
// * 获取人员详情信息
|
async fetchUserInfo() {
|
const res = await findUserById({
|
orgId: this.currentOfficeId,
|
employeeId: this.$route.query.employeeId
|
})
|
if (res) {
|
Object.keys(this.form).map(key => {
|
this.form[key] = res[key]
|
})
|
}
|
},
|
// * 初始化人员类型
|
async _initPeoType() {
|
let response = await getPeoType({
|
orgId: this.orgId,
|
type: 'PEO_TYPE'
|
})
|
if (response.code - 0 === 0 && response.data) {
|
this.selectPersonType = response.data
|
if (this.selectPersonType.length > 0) {
|
this.form.type = this.selectPersonType[0].lable
|
}
|
}
|
},
|
// * 保存
|
async onSubmit(type) {
|
this.submitDisabled = true
|
this.ischeckUp = true
|
if (!this.currentOfficeId) {
|
this.$toast({
|
type: 'warning',
|
message: '请先选择机构'
|
})
|
this.submitDisabled = false
|
return
|
}
|
const isValid = this.Valid()
|
if (!isValid) {
|
this.submitDisabled = false
|
return
|
}
|
this.handleSaveRelation()
|
if (this.$route.query.employeeId) {
|
const res = await userEdit({
|
...this.form,
|
orgId: this.currentOfficeId,
|
id: this.$route.query.employeeId
|
})
|
if (res && res.code - 0 === 0) {
|
this.currentId = res.id
|
this.$toast({
|
type: 'success',
|
message: '编辑成功!'
|
})
|
if (type === 'goOn') {
|
this.handleDelImg()
|
this.clearForm()
|
} else {
|
this.$router.push({
|
path: '/personnel',
|
query: {
|
currentId: this.$route.query.officeId
|
}
|
})
|
}
|
} else {
|
this.$toast({
|
type: 'error',
|
message: res.message
|
})
|
}
|
} else {
|
let res = await getUserAdd({
|
orgId: this.currentOfficeId,
|
officeId: this.$route.query.officeId,
|
...this.form
|
})
|
if (res && res.code - 0 === 0) {
|
this.currentId = res.id
|
this.$toast({
|
type: 'success',
|
message: '添加成功!'
|
})
|
if (type === 'goOn') {
|
this.handleDelImg()
|
this.clearForm()
|
this.ischeckUp = false
|
} else {
|
this.$router.push({
|
path: '/personnel',
|
query: {
|
currentId: this.$route.query.officeId
|
}
|
})
|
}
|
} else {
|
this.$toast({
|
type: 'error',
|
message: res.message
|
})
|
}
|
}
|
this.submitDisabled = false
|
},
|
// * 校验参数
|
Valid() {
|
const { type, name, phone, cardId, gender } = this.form
|
const phoneEx = /^1[3-9]\d{9}$/
|
const cardIdEx = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/
|
|
if (!name) return false
|
if (!cardIdEx.test(cardId)) return false
|
if (!gender) return false
|
if (type === '教师') {
|
if (!this.form.compactType) return false
|
}
|
if (type !== '学生') {
|
if (!phoneEx.test(phone)) return false
|
}
|
return true
|
},
|
clearForm() {
|
this.form = {
|
name: '',
|
cardId: '',
|
gender: '',
|
phone: '',
|
type: '',
|
compactType: '',
|
remarks: '',
|
photos: '',
|
unitName: '',
|
list: []
|
}
|
},
|
onReset() {
|
this.$router.push('/personnel')
|
},
|
async upLoad(e) {
|
const file = e.target.files[0]
|
const fd = new FormData()
|
const token = JSON.parse(sessionStorage.getItem('loginedInfo')).access_token.split(' ')[1]
|
fd.append('file', file)
|
fd.append('fileSource', '')
|
|
let ress = await axios({
|
method: 'post',
|
url: `data/api-f/files/upHeadImg?access_token=${token}`,
|
data: fd
|
})
|
if (ress && ress.data.code - 0 === 0) {
|
this.$toast({
|
type: 'success',
|
message: '上传成功'
|
})
|
this.form.photos = ress.data.photos
|
}
|
},
|
handleDelImg() {
|
this.form.photos = ''
|
this.file = null
|
},
|
async _getTeacherPact() {
|
let res = await getTearchPact({
|
orgId: this.orgId,
|
type: 'PACT_TYPE'
|
})
|
if (res) {
|
let arr = []
|
res.map(item => {
|
if (item.lable) {
|
arr.push({
|
text: item.lable,
|
value: item.value
|
})
|
} else {
|
arr.push({
|
text: '请选择教师类型',
|
value: ''
|
})
|
}
|
})
|
this.selectTeacherType = [...arr]
|
}
|
},
|
// * 天津关系弹窗
|
addRelation() {
|
this.$refs.fromRelation.showModal()
|
},
|
// * 选择关系人
|
getRelationData(relationData) {
|
let arr = [...relationData]
|
arr.forEach(item => {
|
item.relation = ''
|
})
|
this.relationData = arr
|
},
|
// * 选择关系类型
|
handleClickSelect(index, param) {
|
let json = this.relationData[index]
|
json.relation = param
|
this.relationData.splice(index, 1, json)
|
},
|
// * 关系删除
|
handleClickDel(index) {
|
this.relationData.splice(index, 1)
|
},
|
handleChangeRelation(index) {
|
this.relationData[index].isShowDropDown = true
|
},
|
// * 保存人员关系
|
handleSaveRelation() {
|
let arr = []
|
this.relationData.map(item => {
|
arr.push({
|
orgId: this.orgId,
|
// employeeId: this.currentId,
|
relationoId: item.id,
|
relation: item.relation,
|
phone: item.phone
|
})
|
})
|
this.form.list = arr
|
}
|
},
|
components: {
|
Row,
|
Col,
|
PersonnelFromRelation,
|
PerfectScrollbar
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.file-update-content {
|
position: relative;
|
box-sizing: border-box;
|
width: 100px;
|
height: 100px;
|
border: 1px dashed #ccc;
|
.file-update {
|
position: absolute;
|
width: 100px;
|
height: 100px;
|
opacity: 0;
|
}
|
.file-update-icon {
|
width: 100px;
|
text-align: center;
|
line-height: 100px;
|
font-size: 20px;
|
}
|
}
|
.img-content span {
|
display: none;
|
}
|
.img-content {
|
position: relative;
|
width: 100px;
|
height: 100px;
|
&:hover span {
|
display: block;
|
position: absolute;
|
width: 100px;
|
text-align: center;
|
line-height: 100px;
|
z-index: 1;
|
font-size: 30px;
|
color: red;
|
transition: all .5 ease-in-out
|
}
|
img {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
color: red;
|
}
|
}
|
</style>
|
