<template>
|
<div>
|
<h4 class="font-weight-bold py-3 mb-2">
|
<router-link to="/user">
|
<span class="text-muted font-weight-light">用户管理 /</span>
|
</router-link>
|
{{headerTitle}}
|
</h4>
|
<b-card
|
no-body=""
|
class="pt30 pl20 pr20 pb30"
|
>
|
<div class="btn-content mb10">
|
<b-btn
|
v-if="!$route.query.userId"
|
variant="primary"
|
@click="handleConnectUser"
|
>
|
关联人员信息
|
</b-btn>
|
</div>
|
<b-form
|
@submit="saveUser"
|
>
|
<div class="row">
|
<div class="col">
|
<b-form-group
|
horizontal
|
label="用户名："
|
:label-cols="4"
|
label-class="text-sm-right"
|
label-for="input_username"
|
:invalid-feedback="invalidUserName"
|
>
|
<b-form-input
|
autocomplete="off"
|
required
|
id="input_username"
|
:state="stateUserName"
|
v-model="form.username"
|
placeholder="请输入用户名"
|
/>
|
</b-form-group>
|
<b-form-group
|
horizontal
|
label="密码："
|
:label-cols="4"
|
label-for="input_password"
|
label-class="text-sm-right"
|
:invalid-feedback="invalidPassword"
|
>
|
<b-form-input
|
:disabled="!!$route.query.userId"
|
autocomplete="off"
|
required
|
id="input_password"
|
v-model="form.password"
|
type="password"
|
:state="statePassword"
|
placeholder="请输入密码"
|
/>
|
</b-form-group>
|
<b-form-group
|
horizontal
|
label="确认密码："
|
:label-cols="4"
|
label-for="input_confirmPassword"
|
label-class="text-sm-right"
|
:invalid-feedback="invalidConfirmPassword"
|
>
|
<b-form-input
|
:disabled="!!$route.query.userId"
|
autocomplete="off"
|
required
|
id="input_confirmPassword"
|
type="password"
|
v-model="form.confirmPassword"
|
:state="stateConfirmPassword"
|
placeholder="请输入确认密码"
|
/>
|
</b-form-group>
|
<b-form-group
|
horizontal
|
:label-cols="4"
|
label-class="text-sm-right"
|
label="姓名："
|
label-for="input_nickname"
|
:invalid-feedback="invalidNickname"
|
>
|
<b-form-input
|
autocomplete="off"
|
id="input_nickname"
|
:state="stateNickname"
|
v-model="form.nickname"
|
placeholder="请输入姓名"
|
/>
|
</b-form-group>
|
<b-form-group
|
horizontal
|
:label-cols="4"
|
label-class="text-sm-right"
|
label="头像："
|
>
|
<UpLoad
|
v-if="!form.headImgUrl"
|
:isShowHr="false"
|
:layout="1"
|
title=""
|
:isList="false"
|
:initFileIds="initFileIds"
|
@addFilesBaBackFN="addFiles"
|
/>
|
<div
|
v-if="form.headImgUrl"
|
class="img-content"
|
@click="handleDelImg"
|
>
|
<span class="ion-md-close"></span>
|
<httpImg
|
:src="form.headImgUrl"
|
alt
|
width="100%"
|
/>
|
</div>
|
</b-form-group>
|
</div>
|
<div class="col">
|
<b-form-group
|
horizontal
|
:label-cols="4"
|
label-class="text-sm-right"
|
label="性别："
|
label-for="radios1"
|
>
|
<b-form-radio-group
|
id="radios1"
|
v-model="form.sex"
|
:options="optionsSex"
|
name="radioOpenions"
|
/>
|
</b-form-group>
|
<b-form-group
|
horizontal
|
:label-cols="4"
|
label="电话："
|
label-class="text-sm-right"
|
label-for="input_phone"
|
:invalid-feedback="invalidPhone"
|
>
|
<b-form-input
|
autocomplete="off"
|
id="input_phone"
|
v-model="form.phone"
|
:state="statePhone"
|
placeholder="请输入电话"
|
/>
|
</b-form-group>
|
<b-form-group
|
horizontal
|
:label-cols="4"
|
label="电子邮件："
|
label-class="text-sm-right"
|
label-for="input_email"
|
>
|
<b-form-input
|
autocomplete="off"
|
id="input_email"
|
v-model="form.email"
|
placeholder="请输入电子邮件"
|
/>
|
</b-form-group>
|
<b-form-group
|
horizontal
|
:label-cols="4"
|
label-class="text-sm-right"
|
label="身份证："
|
label-for="input_idCard"
|
:invalid-feedback="invalidIdCard"
|
>
|
<b-form-input
|
autocomplete="off"
|
id="input_idCard"
|
:state="stateIdCard"
|
v-model="form.idCard"
|
placeholder="请输入身份证"
|
/>
|
</b-form-group>
|
</div>
|
</div>
|
<div class="text-right mt-3">
|
<LaddaBtn
|
:loading="saveLoading"
|
@click.native="saveUser"
|
data-style="slide-down"
|
class="btn btn-primary"
|
>
|
保存
|
</LaddaBtn>
|
|
<b-btn variant="default" @click="$router.push({path:'/user'})">返回</b-btn>
|
</div>
|
</b-form>
|
</b-card>
|
<PersonnelFormRelation
|
ref="personnelFormRelation"
|
title="选择人员"
|
@relationData="relationData"
|
/>
|
</div>
|
</template>
|
|
<script>
|
import UpLoad from '../../../components/upload/uploadCommon'
|
import { getRolesList } from '../../../server/role.js'
|
import LaddaBtn from '@/vendor/libs/ladda/Ladda'
|
import { userAdd, findUserById, userEdit } from '../../../server/user.js'
|
import PersonnelFormRelation from '../../../components/PersonnelFromRelation/PersonnelFromRelation'
|
|
export default {
|
props: {
|
title: String,
|
orgId: [String, Number]
|
},
|
data: () => ({
|
roleList: [],
|
initFileIds: '',
|
fileIds: [],
|
form: {
|
nickname: '',
|
idCard: '',
|
username: '',
|
password: '',
|
phone: '',
|
sex: '1',
|
email: '',
|
headImgUrl: '',
|
confirmPassword: ''
|
},
|
optionsSex: [{
|
text: '男',
|
value: '1'
|
}, {
|
text: '女',
|
value: '0'
|
}],
|
ischeckUp: false,
|
saveLoading: false,
|
fileList: []
|
}),
|
computed: {
|
headerTitle() {
|
return this.$route.query.userId
|
? '编辑人员 -- ' + this.$route.query.currentName
|
: '添加人员 -- ' + this.$route.query.currentName
|
},
|
userInfo() {
|
return this.$store.getters.basicUserInfo
|
},
|
stateUserName() {
|
return this.ischeckUp ? this.form.username.length > 0 : null
|
},
|
invalidUserName() {
|
return this.ischeckUp ? '请输入用户名' : ''
|
},
|
statePassword() {
|
return this.ischeckUp ? this.form.password.length > 0 : null
|
},
|
invalidPassword() {
|
return this.ischeckUp ? '请输入密码' : ''
|
},
|
stateConfirmPassword() {
|
return this.ischeckUp ? this.form.confirmPassword.length > 0 : null
|
},
|
invalidConfirmPassword() {
|
return this.ischeckUp ? '请输入确认密码' : ''
|
},
|
stateNickname() {
|
return this.ischeckUp ? this.form.nickname.length > 0 : null
|
},
|
invalidNickname() {
|
return this.ischeckUp ? '请输入姓名' : ''
|
},
|
statePhone() {
|
const exPhone = /^1[3-9]\d{9}$/
|
return this.ischeckUp ? exPhone.test(this.form.phone) : null
|
},
|
invalidPhone() {
|
return this.ischeckUp ? '请正确输入手机号' : ''
|
},
|
stateIdCard() {
|
const exidCard = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/
|
return this.ischeckUp ? exidCard.test(this.form.idCard) : null
|
},
|
invalidIdCard() {
|
return this.ischeckUp ? '请正确输入身份证' : ''
|
}
|
},
|
mounted() {
|
this.fetchUserInfo()
|
},
|
methods: {
|
// * 获取用户信息
|
async fetchUserInfo() {
|
if (!this.$route.query.userId) return
|
const res = await findUserById({
|
orgId: this.$route.query.currentId,
|
id: this.$route.query.userId
|
})
|
if (res) {
|
Object.keys(this.form).map(key => {
|
this.form[key] = res[key]
|
})
|
this.form.password = '123456'
|
this.form.confirmPassword = '123456'
|
}
|
},
|
// * 打开modal
|
showModel() {
|
this.$refs.myModalRef.show()
|
this.fetchRoleList()
|
},
|
// * 获取角色数据
|
async fetchRoleList() {
|
let res = await getRolesList({ orgId: this.userInfo.orgId })
|
if (res && res.data) {
|
this.roleList = res.data
|
}
|
},
|
// * 打开关联人员弹窗
|
handleConnectUser() {
|
this.$refs.personnelFormRelation.showModal()
|
},
|
// * 选择用户回调接口
|
relationData(param) {
|
const item = [...param][0]
|
this.form.idCard = item.cardId
|
this.form.nickname = item.name
|
this.form.phone = item.phone
|
this.form.headImgUrl = item.photos
|
this.form.sex = item.gender === '女' ? '0' : '1'
|
},
|
// * 保存按钮回调
|
async saveUser() {
|
this.ischeckUp = true
|
const isRequire = this.verifyRequrie()
|
if (!isRequire) return
|
const isPasswordEqual = this.verifyPassword(this.form.password, this.form.confirmPassword)
|
if (!isPasswordEqual) {
|
this.$toast({
|
type: 'warning',
|
message: '两次输入密码不一致'
|
})
|
return
|
}
|
if (this.$route.query.userId) {
|
const { confirmPassword, password, ...param } = this.form
|
const res = await userEdit({
|
orgId: this.$route.query.currentId,
|
id: this.$route.query.userId,
|
...param
|
})
|
if (res && res.success) {
|
this.$toast({
|
type: 'success',
|
message: '编辑用户成功'
|
})
|
this.$router.push({
|
path: '/user',
|
query: {
|
currentId: this.$route.query.currentId
|
}
|
})
|
} else {
|
this.$toast({
|
type: 'warning',
|
message: res.message
|
})
|
}
|
} else {
|
const { confirmPassword, ...param } = this.form
|
const res = await userAdd({
|
orgId: this.$route.query.currentId,
|
officeId: this.$route.query.officeId,
|
...param
|
})
|
if (res && res.code === 400) {
|
this.$toast({
|
type: 'warning',
|
message: res.message
|
})
|
} else {
|
this.$toast({
|
type: 'success',
|
message: '添加用户成功'
|
})
|
this.$router.push({
|
path: '/user',
|
query: {
|
currentId: this.$route.query.currentId
|
}
|
})
|
}
|
}
|
},
|
// * 验证password
|
verifyPassword(password, ConfirmPassword) {
|
if (password === ConfirmPassword) {
|
return true
|
}
|
return false
|
},
|
// * 验证必选项
|
verifyRequrie() {
|
const exPhone = /^1[3-9]\d{9}$/
|
const exidCard = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/
|
if (!this.form.username) {
|
this.$toast({
|
type: 'warning',
|
message: '请输入用户名'
|
})
|
return false
|
}
|
if (!this.form.password) {
|
this.$toast({
|
type: 'warning',
|
message: '请输入密码'
|
})
|
return false
|
}
|
if (!this.form.confirmPassword) {
|
this.$toast({
|
type: 'warning',
|
message: '请输入确认密码'
|
})
|
return false
|
}
|
if (!this.form.nickname) {
|
this.$toast({
|
type: 'warning',
|
message: '请输入姓名'
|
})
|
return false
|
}
|
if (!exPhone.test(this.form.phone)) {
|
this.$toast({
|
type: 'warning',
|
message: '请正确输入手机号'
|
})
|
return false
|
}
|
if (!exidCard.test(this.form.idCard)) {
|
this.$toast({
|
type: 'warning',
|
message: '请正确输入身份证号'
|
})
|
return false
|
}
|
return true
|
},
|
addFiles({ fileIds, fileList }) {
|
this.fileList = [...fileList]
|
this.fileIds = fileIds
|
this.form.headImgUrl = fileList.length && fileList[fileList.length - 1].url
|
},
|
// * 删除照片
|
handleDelImg() {
|
this.form.headImgUrl = ''
|
},
|
// * 取消
|
clearName() {
|
console.log('cancel')
|
}
|
},
|
components: {
|
UpLoad,
|
LaddaBtn,
|
PersonnelFormRelation
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.btn-content {
|
display: flex;
|
justify-content: flex-end;
|
}
|
.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;
|
}
|
img {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
color: red;
|
}
|
}
|
</style>
|
