dz_farming_map_back/src/view/system/modal/userMobiel.vue

<template>
	<el-dialog 
		:title="modalTitle" 
		:visible.sync="modalVisible" 
		:width="formLabelWidth" 
		@close="handleCancel">
		<div class="userMobile">
			<el-form label-width="80px" :model="form" :rules="rules" ref="from">
				<el-form-item label="账号" prop="name">
					<el-input v-model="form.name" :disabled="limit.isRead"></el-input>
				</el-form-item>
				<el-form-item label="登录密码" prop="pwd" v-if="limit.isAdd">
					<el-input v-model="form.pwd" show-password></el-input>
					<span class="hight">默认密码为:123456</span>
				</el-form-item>
				<el-form-item label="角色" prop="roleIds">
					<el-select 
						v-model="form.roleIds" 
						placeholder="请选择" 
						@change="forceUpdate"
						:disabled="limit.isRead">
						<el-option 
							v-for="item in rolesList" 
							:key="item.id" 
							:label="item.name" 
							:value="item.id"
							></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="组织机构">
					<el-cascader 
						ref="refSubCat"
						v-model="form.branchId" 
						:options="branchList" 
						:props="optionProps" 
						:clearable="true" 
						:disabled="limit.isRead"></el-cascader>
				</el-form-item>
				<el-form-item label="姓名">
					<el-input v-model="form.realName" :disabled="limit.isRead"></el-input>
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<el-radio v-model="form.sex" label="男" :disabled="limit.isRead">男</el-radio>
					<el-radio v-model="form.sex" label="女" :disabled="limit.isRead">女</el-radio>
				</el-form-item>
				<el-form-item label="手机号码" prop="phone">
					<el-input v-model="form.phone" :disabled="limit.isRead"></el-input>
				</el-form-item>
			</el-form>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="handleCancel">取 消</el-button>
			<el-button type="primary" @click="submit" v-if="!limit.isRead">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
import {globalReg} from '@/api/CONST'
export default {
	name: 'userMobiel',
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: 'title'
		},
		action: {
			type: String,
			default: 'add'
		},
		selectRow:{
			type:Object,
			default:{}
		}
	},
	watch: {
		visible(newVal, oldVal) {
			this.modalVisible = newVal;
		},
		title(newVal, oldVal) {
			this.modalTitle = newVal;
		},
		action(newVal, oldVal) {
			this.modalAction = newVal;
		},
		selectRow(newVal,oldVal){
			this.modalSelectRow = newVal
		}
	},
	data() {
		return {
			modalTitle: this.title,
			modalVisible: this.visible,
			modalAction: this.action,
			modalSelectRow:this.selectRow,
			formLabelWidth: '820px',
			limit:{
				isRead:false,
				isAdd:false
			},
			optionProps: {
				expandTrigger:'hover',
				checkStrictly: true,
				value: 'id',
				label: 'branchName',
				children: 'children'
			},
			rolesList: [],
			branchList: [],
			rules:{
				name:[
					 { required: true, message: '账号名称不能为空!', trigger: 'blur' }
				],
				roleIds:[
					{ required: true, message: '角色不能为空!', trigger: 'blur' }
				],
				phone:[
					{ validator:this.validateTel, trigger: 'blur' }
				],
				pwd:[
					{ required: true, message: '密码不能为空!', trigger: 'blur' }
				],
				sex:[
					{ required: true, message: '性别不能为空!', trigger: 'blur' }
				]
			},
			form: {
				pwd:123456 //默认密码123456
			}
		};
	},
	created() {
		switch(this.modalAction) {
		     case 'add':
				this.limit.isAdd = true
		        break;
		     case 'edit':
				this.getDetail(this.modalSelectRow.userId)
		        break;
			 case 'view':
				this.getDetail(this.modalSelectRow.userId)
				this.limit.isRead = true
			    break;
		     default:
		        break;
		} 
		this.initPage()
	},
	methods: {
		forceUpdate(){
			this.$forceUpdate()
		},
		//初始化角色和组织机构
		initPage(){
			this.getRoles();
			this.getBranchid();
		},
		//获取用户详情
		getDetail(id){
			let params = {
				id:id
			}
			this.$port.viewUser(params)
				.then(res => {
					console.log(res)
					this.form = res
					this.form.roleIds = res.roles
				})
		},
		getRoles() {
			this.$port.getRolesList()
				.then(res => {
					this.rolesList = res.list;
				});
		},
		getBranchid() {
			this.$port.getBranchidList()
				.then(res => {
					this.branchList = this.getTreeData(res.list);
				});
		},
		getTreeData(data) {
			for (let i = 0; i < data.length; i++) {
				if (data[i].children.length < 1) {
					data[i].children = undefined;
				} else {
					this.getTreeData(data[i].children);
				}
			}
			return data;
		},
		submit(){
			switch(this.modalAction){
				case 'add':
					this.add()
					break;
				case 'edit':
					this.update()
					break;
				default:
					break;
			}
		},
		add(){
			this.$refs.from.validate((valid) => {
				if (valid) {
					let params = this.form
					params["branchId"] = params["branchId"] === undefined ? '' : params["branchId"].slice(-1).toString()
					this.$port.addUser(params).then(res => {
						if(!res.code){
							this.modalVisible = false
							this.$emit('closeModal', true);
						}
					})
				}else {
					return false;
				}
			})
		},
		update(){
			this.$refs.from.validate((valid) => {
				if (valid) {
					let params = this.form
					params["branchId"] = Array.isArray(params["branchId"]) ? params["branchId"].slice(-1).toString() : params["branchId"]
					params.userId = params.id
					delete params.roles
					this.$port.updateUser(params).then(res => {
						if(!res.code){
							this.modalVisible = false
							this.$emit('closeModal', true);
						}
					})
				}else {
					return false;
				}
			})
		},
		validateTel(rule, value, callback){
			if (value === undefined || value === '' || value === null) {
			  return callback() 
			  // new Error('请输入11位手机号,座机以 - 隔开')
			}
			let str = value.trim()
			if (globalReg.regPhone.test(str) || globalReg.regTel.test(str)) {
			  callback()
			} else {
			  callback(new Error('请输入11位手机号,座机以 - 隔开'))
			}
			callback()
		},
		handleCancel() {
			this.$emit('closeModal', false);
		}
	}
};
</script>

<style scoped lang="less"></style>