|
@@ -6,16 +6,24 @@
|
|
<upload-image tip="建议尺寸:60 * 60px" />
|
|
<upload-image tip="建议尺寸:60 * 60px" />
|
|
</el-form-item> -->
|
|
</el-form-item> -->
|
|
<el-form-item label="登录名:" prop="username">
|
|
<el-form-item label="登录名:" prop="username">
|
|
- <el-input v-model="userInfo.username" placeholder="登录名" />
|
|
|
|
|
|
+ <el-input v-model="userInfo.username" :placeholder="`通过登录名登录时请加上前缀,例如:${prefix}_test`">
|
|
|
|
+ <template slot="prepend">{{ prefix }}_</template>
|
|
|
|
+ </el-input>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item v-if="!userInfo.id" label="密码:" prop="password">
|
|
<el-form-item v-if="!userInfo.id" label="密码:" prop="password">
|
|
- <el-input v-model="userInfo.password" placeholder="密码" />
|
|
|
|
|
|
+ <el-input v-model="userInfo.password" placeholder="请输入密码" type="password" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item label="联系人:">
|
|
|
|
- <el-input v-model="userInfo.linkMan" placeholder="联系人" />
|
|
|
|
|
|
+ <el-form-item label="联系人:" prop="linkMan">
|
|
|
|
+ <el-input v-model="userInfo.linkMan" placeholder="请输入联系人" />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="手机号:" prop="mobile">
|
|
<el-form-item label="手机号:" prop="mobile">
|
|
- <el-input v-model="userInfo.mobile" placeholder="手机号" />
|
|
|
|
|
|
+ <el-input
|
|
|
|
+ v-model="userInfo.mobile"
|
|
|
|
+ placeholder="请输入手机号"
|
|
|
|
+ maxlength="11"
|
|
|
|
+ show-word-limit
|
|
|
|
+ @input="onMobileInput"
|
|
|
|
+ />
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item label="状态:">
|
|
<el-form-item label="状态:">
|
|
<el-radio-group v-model="userInfo.status">
|
|
<el-radio-group v-model="userInfo.status">
|
|
@@ -42,6 +50,8 @@
|
|
<script>
|
|
<script>
|
|
import { fetchRoleList, createUser, getUser, updateUser } from '@/api/system'
|
|
import { fetchRoleList, createUser, getUser, updateUser } from '@/api/system'
|
|
import { isMobile } from '@/utils/validate'
|
|
import { isMobile } from '@/utils/validate'
|
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
|
+import { deepClone } from '@/utils'
|
|
|
|
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
@@ -59,7 +69,7 @@ export default {
|
|
}
|
|
}
|
|
// 校验手机号
|
|
// 校验手机号
|
|
const validateMobile = (rule, value, callback) => {
|
|
const validateMobile = (rule, value, callback) => {
|
|
- if (value && isMobile(value)) {
|
|
|
|
|
|
+ if (isMobile(value)) {
|
|
callback()
|
|
callback()
|
|
} else {
|
|
} else {
|
|
callback(new Error('请输入合法的手机号'))
|
|
callback(new Error('请输入合法的手机号'))
|
|
@@ -80,15 +90,22 @@ export default {
|
|
roleList: [],
|
|
roleList: [],
|
|
rules: {
|
|
rules: {
|
|
username: [
|
|
username: [
|
|
- { required: true, message: '请输入登录名', trigger: 'blur' },
|
|
|
|
|
|
+ { required: true, message: '登录名不能为空', trigger: 'blur' },
|
|
{ min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
|
|
{ min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
|
|
],
|
|
],
|
|
- mobile: [{ validator: validateMobile, trigger: 'blur' }],
|
|
|
|
- password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
|
|
|
|
|
+ linkMan: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
|
|
|
|
+ mobile: [
|
|
|
|
+ { required: true, message: '手机号不能为空', trigger: 'blur' },
|
|
|
|
+ { validator: validateMobile, trigger: 'blur' }
|
|
|
|
+ ],
|
|
|
|
+ password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
|
|
roleList: [{ required: true, validator: validateRoleList, trigger: 'change' }]
|
|
roleList: [{ required: true, validator: validateRoleList, trigger: 'change' }]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ computed: {
|
|
|
|
+ ...mapGetters(['prefix'])
|
|
|
|
+ },
|
|
created() {
|
|
created() {
|
|
this.editType = this.$route.query.type
|
|
this.editType = this.$route.query.type
|
|
this.fetchRoleList()
|
|
this.fetchRoleList()
|
|
@@ -100,14 +117,16 @@ export default {
|
|
methods: {
|
|
methods: {
|
|
// 获取角色列表
|
|
// 获取角色列表
|
|
fetchRoleList() {
|
|
fetchRoleList() {
|
|
- fetchRoleList().then(res => {
|
|
|
|
|
|
+ fetchRoleList().then((res) => {
|
|
this.roleList = [...this.roleList, ...res.data.list]
|
|
this.roleList = [...this.roleList, ...res.data.list]
|
|
})
|
|
})
|
|
},
|
|
},
|
|
// 修改保存用户信息
|
|
// 修改保存用户信息
|
|
updateUserInfo() {
|
|
updateUserInfo() {
|
|
- this.userInfo.roleIds = this.userInfo.roleList.join(',')
|
|
|
|
- updateUser(this.userInfo.id, this.userInfo).then(res => {
|
|
|
|
|
|
+ const userInfo = deepClone(this.userInfo)
|
|
|
|
+ userInfo.roleIds = userInfo.roleList.join(',')
|
|
|
|
+ userInfo.username = `${this.prefix}_${userInfo.username}`
|
|
|
|
+ updateUser(userInfo.id, userInfo).then((res) => {
|
|
this.$message.success('修改用户成功')
|
|
this.$message.success('修改用户成功')
|
|
this.$store.dispatch('tagsView/delView', this.$route)
|
|
this.$store.dispatch('tagsView/delView', this.$route)
|
|
this.$router.back()
|
|
this.$router.back()
|
|
@@ -115,8 +134,10 @@ export default {
|
|
},
|
|
},
|
|
// 保存用户信息
|
|
// 保存用户信息
|
|
createUserInfo() {
|
|
createUserInfo() {
|
|
- this.userInfo.roleIds = this.userInfo.roleList.join(',')
|
|
|
|
- createUser(this.userInfo).then(res => {
|
|
|
|
|
|
+ const userInfo = deepClone(this.userInfo)
|
|
|
|
+ userInfo.roleIds = userInfo.roleList.join(',')
|
|
|
|
+ userInfo.username = `${this.prefix}_${userInfo.username}`
|
|
|
|
+ createUser(userInfo).then((res) => {
|
|
this.$message.success('添加用户成功')
|
|
this.$message.success('添加用户成功')
|
|
this.$store.dispatch('tagsView/delView', this.$route)
|
|
this.$store.dispatch('tagsView/delView', this.$route)
|
|
this.$router.back()
|
|
this.$router.back()
|
|
@@ -124,7 +145,7 @@ export default {
|
|
},
|
|
},
|
|
// 提交表单
|
|
// 提交表单
|
|
onSubmit() {
|
|
onSubmit() {
|
|
- this.$refs.userInfoFormRef.validate(valide => {
|
|
|
|
|
|
+ this.$refs.userInfoFormRef.validate((valide) => {
|
|
if (!valide) return
|
|
if (!valide) return
|
|
if (this.editType === 'add') {
|
|
if (this.editType === 'add') {
|
|
this.createUserInfo()
|
|
this.createUserInfo()
|
|
@@ -135,19 +156,28 @@ export default {
|
|
},
|
|
},
|
|
// 获取用户信息
|
|
// 获取用户信息
|
|
fetchUserInfo() {
|
|
fetchUserInfo() {
|
|
- getUser(this.userInfo.id).then(res => {
|
|
|
|
|
|
+ getUser(this.userInfo.id).then((res) => {
|
|
this.setUserInfo(res.data)
|
|
this.setUserInfo(res.data)
|
|
})
|
|
})
|
|
},
|
|
},
|
|
// 设置用户信息
|
|
// 设置用户信息
|
|
setUserInfo(data) {
|
|
setUserInfo(data) {
|
|
- console.log(data)
|
|
|
|
- for (const key in this.userInfo) {
|
|
|
|
- if (Object.hasOwnProperty.call(data, key)) {
|
|
|
|
|
|
+ for (const key in data) {
|
|
|
|
+ if (Object.hasOwnProperty.call(this.userInfo, key)) {
|
|
this.userInfo[key] = data[key]
|
|
this.userInfo[key] = data[key]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
- this.userInfo.roleList = data.roleIds.split(',').map(item => parseInt(item))
|
|
|
|
|
|
+ const prefix = this.prefix + '_'
|
|
|
|
+ const prefixLen = prefix.length
|
|
|
|
+ if (this.userInfo.username.startsWith(prefix)) {
|
|
|
|
+ this.userInfo.username = this.userInfo.username.substring(prefixLen)
|
|
|
|
+ }
|
|
|
|
+ this.userInfo.roleList = data.roleIds.split(',').map((item) => parseInt(item))
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 输入手机号时
|
|
|
|
+ onMobileInput() {
|
|
|
|
+ this.userInfo.mobile = this.userInfo.mobile.replace(/[^\w\.\/]/gi, '')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -158,5 +188,12 @@ export default {
|
|
width: 600px;
|
|
width: 600px;
|
|
margin: 0 auto;
|
|
margin: 0 auto;
|
|
margin-top: 100px;
|
|
margin-top: 100px;
|
|
|
|
+
|
|
|
|
+ ::v-deep {
|
|
|
|
+ .el-input-group__prepend {
|
|
|
|
+ background: transparent;
|
|
|
|
+ padding: 0 10px 0 15px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|