wwk / Antis_BlindBox_Service

<template>
	<transition name="el-zoom-in-center">
		<div class="NCC-preview-main user-form">
			<div class="NCC-common-page-header">
				<el-page-header @back="goBack" :content="!dataForm.id ?$t(`user.addUser`) : $t(`user.editUser`)" />
				<div class="options">
					<el-button type="primary" :loading="btnLoading" @click="handleConfirm()">
						{{$t('common.confirmButton')}}
					</el-button>
					<el-button @click="goBack">{{$t('common.cancelButton')}} </el-button>
				</div>
			</div>
			<div class="main" v-loading="formLoading" :element-loading-text="$t('common.loadingText')">
				<el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="80px">
					<div class="NCC-common-title mb-20">
						<h2 class="bold">基础信息</h2>
					</div>
					<el-row :gutter="20" class="custom-row">
						<el-col :sm="12" :xs="24">
							<el-form-item label="账户" prop="account">
								<el-input v-model="dataForm.account" placeholder="账户名称" />
							</el-form-item>
						</el-col>
						<el-col :sm="12" :xs="24">
							<el-form-item label="姓名" prop="realName">
								<el-input v-model="dataForm.realName" placeholder="真实姓名" />
							</el-form-item>
						</el-col>
						<el-col :sm="12" :xs="24">
							<el-form-item label="学校名称" prop="school">
								<el-input v-model="dataForm.school" placeholder="学校名称" />
							</el-form-item>
						</el-col>
						<el-col :sm="12" :xs="24">
							<el-form-item label="学号" prop="schoolNumber">
								<el-input v-model="dataForm.schoolNumber" placeholder="学号" />
							</el-form-item>
						</el-col>
						<el-col :sm="12" :xs="24">
							<el-form-item label="性别" prop="gender">
								<el-select v-model="dataForm.gender" placeholder="选择性别">
									<el-option value="1" label="男"></el-option>
									<el-option value="2" label="女"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :sm="12" :xs="24">
							<el-form-item label="电子邮箱" prop="email">
								<el-input v-model="dataForm.email" placeholder="电子邮箱" />
							</el-form-item>
						</el-col>

						<el-col :sm="12" :xs="24">
							<el-form-item label="备注" prop="description">
								<el-input v-model="dataForm.description" type="textarea" :rows="3" />
							</el-form-item>
						</el-col>
						<!-- <el-col :sm="12" :xs="24">
							<el-form-item label="积分数量" prop="intergrate">
								<el-input v-model="dataForm.intergrate" placeholder="积分数量" />
							</el-form-item>
						</el-col>
						<el-col :sm="12" :xs="24">
							<el-form-item label="身份类型" prop="type">
								<el-select v-model="dataForm.type" placeholder="请选择">
									<el-option label="普通用户" value="1"></el-option>
									<el-option label="技师用户" value="2"></el-option>
								</el-select>
							</el-form-item>
						</el-col> -->
						<el-col :span="12">
							<el-form-item label="排序" prop="sortCode">
								<el-input-number :min="0" :max="9999" v-model="dataForm.sortCode"
									controls-position="right" />
							</el-form-item>
						</el-col>
						<!-- <el-col :span="12">
							<el-form-item label="状态" prop="enabledMark">
								<el-switch v-model="dataForm.enabledMark" :active-value="1" :inactive-value="0" />
							</el-form-item>
						</el-col> -->
						<!-- <el-col :sm="12" :xs="24">
							<el-form-item label="证件号码" prop="certificatesNumber">
								<el-input v-model="dataForm.certificatesNumber" placeholder="证件号码" />
							</el-form-item>
						</el-col> -->

						<el-col :sm="12" :xs="24">
							<el-form-item label="手机号码" prop="mobilePhone">
								<el-input v-model="dataForm.mobilePhone" placeholder="手机号码" />
							</el-form-item>
						</el-col>

						<el-col :span="24" >
							<el-form-item label="通讯地址" prop="postalAddress">
								<el-input v-model="dataForm.postalAddress" type="textarea" :rows="3"
									placeholder="请填写通讯地址" />
							</el-form-item>
						</el-col>
					</el-row>
					<div class="NCC-common-title mb-20">
						<h2 class="bold">扩展信息</h2>
					</div>
					<el-row :gutter="20" class="custom-row">
						<el-col :span="24">
							<el-form-item label="头像" prop="headIcon">
								<el-upload class="avatar-uploader" :action="define.comUploadUrl+'/userAvatar'"
									:show-file-list="false" :on-success="handleAvatarSuccess" accept="image/*">
									<img v-if="dataForm.headIcon" :src="define.comUrl+dataForm.headIcon" class="avatar">
									<i v-else class="el-icon-plus avatar-uploader-icon" />
								</el-upload>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
		</div>
	</transition>
</template>

<script>
	import {
		getDepartmentSelector
	} from '@/api/permission/department'
	import {
		getPositionSelector
	} from '@/api/permission/position'
	import {
		getRoleSelector
	} from '@/api/permission/role'
	import request from '@/utils/request'
	import {
		createUser,
		updateUser,
		getUserInfo
	} from '@/api/permission/user'
	import {
		APIURl
	} from '@/utils/define'
	export default {
		data() {
			return {
				dialogVisibleInfo: false,
				APIURl,
				visible: false,
				btnLoading: false,
				AllUserList: [],
				dataForm: {
					id: '',
					sortCode: 0,
					enabledMark: 1,
					account: '',
					realName: '',
					organizeId: '',
					managerId: '',
					positionId: '',
					roleId: '',
					description: '',
					headIcon: '',
					gender: null,
					nationId: '',
					nativePlace: '',
					entryDate: null,
					certificatesType: '',
					certificatesNumber: '',
					education: '',
					birthday: null,
					telePhone: '',
					landline: '',
					mobilePhone: '',
					email: '',
					urgentContacts: '',
					urgentTelePhone: '',
					postalAddress: '',
					"schoolNumber":"",
					"school":''
				},
				roleId: [],
				departmentTreeData: [],
				positionTreeData: [],
				roleTreeData: [],
				genderTreeData: [],
				nationTreeData: [],
				educationTreeData: [],
				certificatesTypeTreeData: [],
				formLoading: false,
				genderProps: {
					value: 'enCode',
					label: 'fullName'
				},
				dataRule: {
					// ^[1-9]\d*$　
					// { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号' },
					account: [{
							required: true,
							message: '请输入账户名称',
							trigger: 'blur'
						},
						{
							max: 50,
							message: '账户名称最多为50个字符！',
							trigger: 'blur'
						}
					],
					realName: [{
							required: true,
							message: '请输入真实姓名',
							trigger: 'blur'
						},
						{
							max: 50,
							message: '真实姓名最多为50个字符！',
							trigger: 'blur'
						}
					],
					// gender: [{
					// 	required: true,
					// 	message: '请选择性别',
					// 	trigger: 'change'
					// }],
					// intergrate: [{
					// 		required: true,
					// 		message: '积分数量',
					// 		trigger: 'change'
					// 	},
					// 	{
					// 		pattern: /^[1-9]\d*$/,
					// 		message: '请输入正确的积分格式'
					// 	}
					// ],
					// moneys: [{
					// 		required: true,
					// 		message: '请输入余额',
					// 		trigger: 'change'
					// 	},
					// 	{
					// 		pattern: /^[1-9]\d*$/,
					// 		message: '请输入余额正确格式'
					// 	}
					// ],


				}
			}
		},
		methods: {
			handlePictureCardPreview(file) {
				this.dialogVisibleInfo = true;
			},
			GetAllUserList() {
				request({
					url: `/api/permission/users/GetAllUserListCustom`,
					method: 'POST',
				}).then(res => {
					this.AllUserList = res.data
				})
			},
			init(id, organizeId) {
				this.visible = true
				this.dataForm.id = id || ''
				this.roleId = []
				this.$nextTick(() => {
					this.$refs['dataForm'].resetFields()
					this.GetAllUserList()
					// 获取公司+部门
					getDepartmentSelector().then(res => {
						this.departmentTreeData = res.data.list
					})

					// 获取岗位
					getPositionSelector().then(res => {
						this.positionTreeData = res.data.list
					})

					// 获取角色
					getRoleSelector().then(res => {
						this.roleTreeData = res.data.list
					})

					// 获取民族
					this.$store.dispatch('base/getDictionaryData', {
						sort: 'Nation'
					}).then(res => {
						this.nationTreeData = res
					})

					// 获取学历
					this.$store.dispatch('base/getDictionaryData', {
						sort: 'Education'
					}).then(res => {
						this.educationTreeData = res
					})

					// 获取证件类型
					this.$store.dispatch('base/getDictionaryData', {
						sort: 'certificateType'
					}).then(res => {
						this.certificatesTypeTreeData = res
					})

					// 获取性别
					this.$store.dispatch('base/getDictionaryData', {
						sort: 'sex'
					}).then(res => {
						this.genderTreeData = res
					})

					if (this.dataForm.id) {
						this.formLoading = true
						getUserInfo(this.dataForm.id).then(res => {
							this.dataForm = res.data
							if (this.dataForm.roleId) this.roleId = this.dataForm.roleId.split(',')
							this.formLoading = false
						}).catch(() => this.formLoading = false)
					} else {
						this.dataForm.organizeId = organizeId
					}
				})
			},
			goBack() {
				this.$emit('close')
			},
			roleIdChange() {
				this.dataForm.roleId = this.roleId.toString()
			},
			handleAvatarSuccess(res) {
				if (res.code === 200 && res.data && res.data.url) {
					this.dataForm.headIcon = res.data.url
				} else {
					this.$message.error('头像上传失败');
				}
			},
			handleConfirm() {
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {
						this.btnLoading = true
						const formMethod = this.dataForm.id ? updateUser : createUser
						formMethod(this.dataForm).then(res => {
							this.$message({
								message: res.msg,
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.visible = false
									this.btnLoading = false
									this.$emit('close', true)
								}
							})
						}).catch(() => {
							this.btnLoading = false
						})
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.user-form {
		.main {
			padding: 10px 30px 0;
		}

		>>>.el-select,
		>>>.el-date-editor {
			width: 100%;
		}

		>>>.avatar-uploader {
			.el-upload {
				border: 1px dashed #dcdfe6;
				border-radius: 6px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
			}

			.el-upload:hover {
				border-color: #409eff;
			}
		}

		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 130px;
			height: 130px;
			line-height: 130px;
			text-align: center;
		}

		.avatar {
			width: 130px;
			height: 130px;
			display: block;
		}
	}
</style>