You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
417 lines
14 KiB
417 lines
14 KiB
<template>
|
|
<el-dialog :visible.sync="visible"
|
|
:title="!dataForm.id ? $t('add') : $t('update')"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false">
|
|
<el-form :model="dataForm"
|
|
:rules="dataRule"
|
|
ref="dataForm"
|
|
@keyup.enter.native="dataFormSubmitHandle()"
|
|
label-width="120px">
|
|
<el-form-item prop="username"
|
|
:label="$t('user.username')">
|
|
<el-input v-model="dataForm.username"
|
|
:placeholder="$t('user.username')"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="deptName"
|
|
:label="$t('user.deptName')"
|
|
class="dept-list">
|
|
<el-popover v-model="deptListVisible"
|
|
ref="deptListPopover"
|
|
placement="bottom-start"
|
|
trigger="click">
|
|
<el-tree :data="deptList"
|
|
:props="{ label: 'name', children: 'children' }"
|
|
node-key="id"
|
|
ref="deptListTree"
|
|
:highlight-current="true"
|
|
:expand-on-click-node="false"
|
|
accordion
|
|
@current-change="deptListTreeCurrentChangeHandle">
|
|
</el-tree>
|
|
</el-popover>
|
|
<el-input v-model="dataForm.deptName"
|
|
v-popover:deptListPopover
|
|
:readonly="true"
|
|
:placeholder="$t('user.deptName')"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="用户类型"
|
|
prop="userTagKey">
|
|
<el-select v-model="dataForm.userTagKey"
|
|
placeholder="用户类型">
|
|
<el-option v-for="item in userTagDictList"
|
|
:key="item.dictValue"
|
|
:label="item.dictName"
|
|
:value="item.dictValue">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item prop="password"
|
|
:label="$t('user.password')"
|
|
:class="{ 'is-required': !dataForm.id }">
|
|
<el-input v-model="dataForm.password"
|
|
type="password"
|
|
:placeholder="$t('user.password')"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="comfirmPassword"
|
|
:label="$t('user.comfirmPassword')"
|
|
:class="{ 'is-required': !dataForm.id }">
|
|
<el-input v-model="dataForm.comfirmPassword"
|
|
type="password"
|
|
:placeholder="$t('user.comfirmPassword')"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="realName"
|
|
:label="$t('user.realName')">
|
|
<el-input v-model="dataForm.realName"
|
|
:placeholder="$t('user.realName')"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="gender"
|
|
:label="$t('user.gender')"
|
|
size="mini">
|
|
<el-radio-group v-model="dataForm.gender">
|
|
<el-radio :label="1">{{ $t('user.gender1') }}</el-radio>
|
|
<el-radio :label="0">{{ $t('user.gender0') }}</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item prop="email"
|
|
:label="$t('user.email')">
|
|
<el-input v-model="dataForm.email"
|
|
:placeholder="$t('user.email')"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="mobile"
|
|
:label="$t('user.mobile')">
|
|
<el-input v-model="dataForm.mobile"
|
|
:placeholder="$t('user.mobile')"></el-input>
|
|
</el-form-item>
|
|
<el-form-item prop="staffName"
|
|
label="关联网格员">
|
|
<div>
|
|
<el-input style="width: 70%" v-model="dataForm.wgyInfo.staffName" readonly
|
|
placeholder="绑定网格员"></el-input>
|
|
<el-button type="text" @click="relationEpmetStaffUser(dataForm.mobile)">点击绑定</el-button>
|
|
<el-button type="text" @click="unbindEpmetUser()">清空</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item prop="roleIdList"
|
|
:label="$t('user.roleIdList')"
|
|
class="role-list">
|
|
<el-select v-model="dataForm.roleIdList"
|
|
multiple
|
|
:placeholder="$t('user.roleIdList')">
|
|
<el-option v-for="role in roleList"
|
|
:key="role.id"
|
|
:label="role.name"
|
|
:value="role.id"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item prop="status"
|
|
:label="$t('user.status')"
|
|
size="mini">
|
|
<el-radio-group v-model="dataForm.status">
|
|
<el-radio :label="0">{{ $t('user.status0') }}</el-radio>
|
|
<el-radio :label="1">{{ $t('user.status1') }}</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item prop="verifyFlag"
|
|
label="短信验证登陆"
|
|
size="mini">
|
|
<el-radio-group v-model="dataForm.verifyFlag" @change="verifyFlagChange">
|
|
<el-radio :label="'0'">停用</el-radio>
|
|
<el-radio :label="'1'">本人验证</el-radio>
|
|
<el-radio :label="'2'">领导验证</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="登录验证手机" v-if="dataForm.verifyFlag !== '0'"
|
|
prop="verifyMobile">
|
|
<el-autocomplete
|
|
class="inline-input" :disabled="dataForm.verifyFlag === '1'"
|
|
v-model="dataForm.verifyMobile"
|
|
:fetch-suggestions="querySearch"
|
|
placeholder="请输入内容"
|
|
@select="handleSelect"
|
|
></el-autocomplete>
|
|
</el-form-item>
|
|
</el-form>
|
|
<template slot="footer">
|
|
<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
|
|
<el-button type="primary"
|
|
@click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import debounce from 'lodash/debounce'
|
|
import { isEmail, isMobile } from '@/utils/validate'
|
|
export default {
|
|
data () {
|
|
return {
|
|
visible: false,
|
|
deptList: [],
|
|
deptListVisible: false,
|
|
roleList: [],
|
|
roleIdListDefault: [],
|
|
dataForm: {
|
|
id: '',
|
|
username: '',
|
|
deptId: '0',
|
|
deptName: '',
|
|
password: '',
|
|
comfirmPassword: '',
|
|
realName: '',
|
|
gender: 1,
|
|
email: '',
|
|
mobile: '',
|
|
roleIdList: [],
|
|
status: 1,
|
|
verifyFlag: '0',
|
|
verifyMobile: '',
|
|
userTagKey: '',
|
|
wgyInfo: {
|
|
id: '',
|
|
sysUserId: '',
|
|
staffId: '',
|
|
staffName: '',
|
|
mobile: '',
|
|
agencyId: '',
|
|
agencyAllName: '',
|
|
customerId: ''
|
|
}
|
|
},
|
|
verifyMobileList: [],
|
|
userTagDictList: []
|
|
}
|
|
},
|
|
computed: {
|
|
dataRule () {
|
|
var validatePassword = (rule, value, callback) => {
|
|
if (!this.dataForm.id && !/\S/.test(value)) {
|
|
return callback(new Error(this.$t('validate.required')))
|
|
}
|
|
callback()
|
|
}
|
|
var validateComfirmPassword = (rule, value, callback) => {
|
|
if (!this.dataForm.id && !/\S/.test(value)) {
|
|
return callback(new Error(this.$t('validate.required')))
|
|
}
|
|
if (this.dataForm.password !== value) {
|
|
return callback(new Error(this.$t('user.validate.comfirmPassword')))
|
|
}
|
|
callback()
|
|
}
|
|
var validateEmail = (rule, value, callback) => {
|
|
if (!isEmail(value)) {
|
|
return callback(new Error(this.$t('validate.format', { 'attr': this.$t('user.email') })))
|
|
}
|
|
callback()
|
|
}
|
|
var validateMobile = (rule, value, callback) => {
|
|
if (!isMobile(value)) {
|
|
return callback(new Error(this.$t('validate.format', { 'attr': this.$t('user.mobile') })))
|
|
}
|
|
callback()
|
|
}
|
|
return {
|
|
username: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
deptName: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'change' }
|
|
],
|
|
password: [
|
|
{ validator: validatePassword, trigger: 'blur' }
|
|
],
|
|
comfirmPassword: [
|
|
{ validator: validateComfirmPassword, trigger: 'blur' }
|
|
],
|
|
realName: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
],
|
|
email: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' },
|
|
{ validator: validateEmail, trigger: 'blur' }
|
|
],
|
|
mobile: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' },
|
|
{ validator: validateMobile, trigger: 'blur' }
|
|
],
|
|
userTagKey: [
|
|
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
|
]
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
init () {
|
|
this.visible = true
|
|
this.$nextTick(() => {
|
|
this.$refs['dataForm'].resetFields()
|
|
this.roleIdListDefault = []
|
|
Promise.all([
|
|
this.getDeptList(),
|
|
this.getRoleList()
|
|
]).then(() => {
|
|
if (this.dataForm.id) {
|
|
this.getInfo()
|
|
}
|
|
})
|
|
})
|
|
this.getUserTagDicList()
|
|
},
|
|
// 根据手机号获取产品工作人员信息
|
|
relationEpmetStaffUser (mobile) {
|
|
if (mobile === '') {
|
|
return this.$message.warning('请先填写手机号')
|
|
}
|
|
this.$http.get(`/sys/sysepmetuserrelation/getstaffuser/${mobile}`).then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
return this.$message.error(res.msg)
|
|
}
|
|
this.dataForm.wgyInfo = {
|
|
...this.dataForm.wgyInfo,
|
|
...res.data
|
|
}
|
|
if (res.data.staffId === '') {
|
|
return this.$message.warning('未匹配到当前手机号绑定网格员')
|
|
}
|
|
}).catch(() => { })
|
|
},
|
|
// 清空已绑定的产品工作人员信息
|
|
unbindEpmetUser () {
|
|
this.dataForm.wgyInfo.staffId = ''
|
|
this.dataForm.wgyInfo.staffName = ''
|
|
this.dataForm.wgyInfo.mobile = ''
|
|
this.dataForm.wgyInfo.agencyId = ''
|
|
this.dataForm.wgyInfo.agencyAllName = ''
|
|
this.dataForm.wgyInfo.customerId = ''
|
|
},
|
|
// 获取部门列表
|
|
getDeptList () {
|
|
return this.$http.get('/sys/dept/list').then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
return this.$message.error(res.msg)
|
|
}
|
|
this.deptList = res.data
|
|
}).catch(() => { })
|
|
},
|
|
// 获取角色列表
|
|
getRoleList () {
|
|
return this.$http.get('/sys/role/list').then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
return this.$message.error(res.msg)
|
|
}
|
|
this.roleList = res.data
|
|
}).catch(() => { })
|
|
},
|
|
// 获取用户标签字典列表
|
|
getUserTagDicList () {
|
|
this.$http.get(`/sys/dict/listSimple/user_tag`).then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
return this.$message.error(res.msg)
|
|
}
|
|
this.userTagDictList = res.data
|
|
}).catch(() => { })
|
|
},
|
|
// 获取信息
|
|
getInfo () {
|
|
this.$http.get(`/sys/user/${this.dataForm.id}`).then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
return this.$message.error(res.msg)
|
|
}
|
|
this.dataForm = {
|
|
...this.dataForm,
|
|
...res.data,
|
|
roleIdList: []
|
|
}
|
|
this.$refs.deptListTree.setCurrentKey(this.dataForm.deptId)
|
|
// 角色配置, 区分是否为默认角色
|
|
for (var i = 0; i < res.data.roleIdList.length; i++) {
|
|
if (this.roleList.filter(item => item.id === res.data.roleIdList[i])[0]) {
|
|
this.dataForm.roleIdList.push(res.data.roleIdList[i])
|
|
continue
|
|
}
|
|
this.roleIdListDefault.push(res.data.roleIdList[i])
|
|
}
|
|
}).catch(() => { })
|
|
},
|
|
// 所属部门树, 选中
|
|
deptListTreeCurrentChangeHandle (data, node) {
|
|
this.dataForm.deptId = data.id
|
|
this.dataForm.deptName = data.name
|
|
this.deptListVisible = false
|
|
},
|
|
handleSelect (item) {
|
|
console.log(item)
|
|
},
|
|
verifyFlagChange (e) {
|
|
if (e === '2') {
|
|
this.$http.get(`/sys/user/getLeaderPhone/${this.dataForm.deptId}`).then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
return this.$message.error(res.msg)
|
|
}
|
|
this.verifyMobileList = res.data
|
|
}).catch(() => { })
|
|
} else {
|
|
this.verifyMobileList = []
|
|
this.dataForm.verifyMobile = this.dataForm.mobile
|
|
}
|
|
},
|
|
querySearch (queryString, cb) {
|
|
let results = this.verifyMobileList
|
|
// 调用 callback 返回建议列表的数据
|
|
cb(results)
|
|
},
|
|
// 表单提交
|
|
dataFormSubmitHandle: debounce(function () {
|
|
this.$refs['dataForm'].validate((valid) => {
|
|
if (!valid) {
|
|
return false
|
|
}
|
|
if (this.dataForm.verifyFlag === '0') {
|
|
this.dataForm.verifyMobile = ''
|
|
}
|
|
// 判断当前用户手机号是否与网格员手机号匹配
|
|
if (this.dataForm.wgyInfo.mobile !== '' && this.dataForm.mobile !== this.dataForm.wgyInfo.mobile) {
|
|
return this.$message.error('当前手机号与网格员信息不匹配，请重新绑定')
|
|
}
|
|
this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/user', {
|
|
...this.dataForm,
|
|
roleIdList: [
|
|
...this.dataForm.roleIdList,
|
|
...this.roleIdListDefault
|
|
]
|
|
}).then(({ data: res }) => {
|
|
if (res.code !== 0) {
|
|
return this.$message.error(res.msg)
|
|
}
|
|
this.$message({
|
|
message: this.$t('prompt.success'),
|
|
type: 'success',
|
|
duration: 500,
|
|
onClose: () => {
|
|
this.visible = false
|
|
this.$emit('refreshDataList')
|
|
}
|
|
})
|
|
}).catch(() => { })
|
|
})
|
|
}, 1000, { 'leading': true, 'trailing': false })
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.mod-sys__user {
|
|
.dept-list {
|
|
.el-input__inner,
|
|
.el-input__suffix {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
.role-list {
|
|
.el-select {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|