sccg_ui.git - Gitblit

			@@ -1,11 +1,5 @@
			<template>
			<div class="createUser">
			<header>
			<div class="headerTitle">新增部门信息</div>
			<div class="headerTip">
			<label>x</label>
			</div>
			</header>
			<main>
			<div class="mainContent">
			<el-form ref="user" label-width="140px" autoComplete="on" :model="depart" :rules="createDepartRules"
			@@ -17,40 +11,57 @@
			<!-- 上级部门 -->
			<el-form-item class="optionItems" label="上级部门:" prop="parentId">
			<el-select v-model="depart.parentId" placeholder="请输入上级部门">
			<el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"
			:disabled="item.disabled">
			<el-option v-for="item in departList" :key="item.departName" :label="item.departName"
			:value="item.id" :disabled="item.disabled">
			</el-option>
			</el-select>
			</el-form-item>
			<!-- 部门类型 -->
			<el-form-item class="optionItem" label="部门类型:" prop="departType">
			<el-select v-model="depart.departType" placeholder="请选择部门类型">
			<el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"
			:disabled="item.disabled">
			<el-option v-for="item in departTypeList" :key="item.id" :label="item.name"
			:value="item.id">
			</el-option>
			</el-select>
			<!-- <el-input v-model="depart.departType" placeholder="请选择部门类型"></el-input> -->
			</el-form-item>
			<!--添加人员 -->
			<el-form-item class="optionItem" label="添加人员:">
			<el-form-item class="optionItem add" label="添加人员:">
			<ul class="addPerson">
			<li><i class="el-icon-user-solid"></i></li>
			<li><i class="el-icon-user-solid"></i></li>
			<li><i class="el-icon-user-solid"></i></li>
			<li><i class="el-icon-plus"></i></li>
			<li><i class="el-icon-plus" @click="openUser = true"></i></li>
			</ul>
			<div class="card" v-if="openUser">
			<el-card class="box-card">
			<div slot="header" class="myclear">
			<span>工作人员</span>
			<div @click="addUser">添加</div>
			</div>
			<div class="scrollWrap">
			<el-checkbox-group v-model="checkedUser">
			<el-checkbox v-for="user in userList" :label="user.id" :key="user.id">
			{{user.username}}
			</el-checkbox>
			</el-checkbox-group>
			</div>
			<div class="hidebar"></div>
			</el-card>
			</div>
			</el-form-item>
			<!-- 部门描述 -->
			<el-form-item class="optionItem" label="部门描述:" prop="departDes">
			<el-input v-model="depart.departDes" placeholder="请输入部门描述"></el-input>
			<el-input type="textarea" v-model="depart.departDes" placeholder="请输入部门描述"></el-input>
			</el-form-item>
			</el-form>
			</div>
			</main>
			<footer>
			<div class="optionBtn">
			<el-button>取消</el-button>
			<el-button type="primary" class="btn submit" @click="handleUser">确定</el-button>
			</div>
			<el-button @click="handleClose">取消</el-button>
			<el-button type="primary" class="btn submit" @click="handleUser">确定</el-button>
			</div>
			</footer>
			</div>
			</template>
			@@ -59,37 +70,27 @@
			data() {
			const validateNickname = (rule, value, callback) => {
			if (!value) {
			callback(new Error("请填写用户名称"));
			callback(new Error("请填写部门名称"));
			} else {
			callback();
			}
			};
			const validatePass = (rule, value, callback) => {
			if (!value) {
			callback(new Error("请填写登录密码"));
			callback();
			} else {
			const rep = /^\w+$/;
			if (!rep.test(value)) {
			callback(new Error("密码只能是以数字、26个英文字母或者下划线组成的字符串"));
			}
			}
			};
			const validateTruename = (rule, value, callback) => {
			if (!value) {
			callback(new Error("请填写用户姓名"));
			} else {
			const rep = /^[\u4E00-\u9FA5]{2,4}$/;
			if (!rep.test(value)) {
			callback("请输入正确的用户姓名");
			}
			callback();
			}
			};
			const validatePhone = (rule, value, callback) => {
			if (!value) {
			callback(new Error("请填写手机号码"));
			callback();
			} else {
			const rep = /(^1[3\|4\|5\|7\|8\|9]\d{9}$)\|(^09\d{8}$)/
			if (!rep.test(value)) {
			callback("请输入正确的手机号码");
			}
			// const rep = /(^1[3\|4\|5\|7\|8\|9]\d{9}$)\|(^09\d{8}$)/
			// if (!rep.test(value)) {
			// callback("请输入正确的手机号码");
			// }
			callback();
			}
			};
			return {
			@@ -113,40 +114,105 @@
			{ required: false, trigger: "blur" },
			],
			},
			roleList: [
			{ name: '角色1', value: 1 }, { name: '角色2', value: 2 }
			],
			typeList: []
			userList: [],
			departList: [],
			checkedUser: [],
			openUser: false,
			departTypeList: [],
			}
			},
			created() {
			const that = this;
			// 获取角色列表
			// this.$axios.get('')
			// 获取用户类型列表
			// this.$axios.get('sccg/admin/list',{userType:0}).then(res=>{
			// console.log(res);
			// })
			// 获取全部部门列表
			// this.$axios.get('sccg/depart/page').then(res => {
			// that.typeList = res.data.records;
			// })
			// 获取部门树形结构图
			this.getDepartTree();
			// 获取用户列表
			this.getUserList();
			// 获取部门类型列表
			this.getDepartTypeList();
			},
			methods: {
			handleUser() {
			const { depart } = this;
			console.log(depart);
			this.$axios.post('/sccg/depart/create', {
			departName: depart.departName,
			parentId: depart.parentId, departType: depart.departType, departDes: depart.departDes
			}).then(res => {
			if (res.code === 200) {
			this.refresh();
			this.$refs.user.validate((valid) => {
			if (valid) {
			const { depart, checkedUser, userList } = this;
			console.log(depart);
			console.log(checkedUser);
			const arr = [];
			checkedUser.forEach(item => {
			userList.forEach(child => {
			if (item === child.id) {
			arr.push({ isLeader: 0, userId: item,});
			}
			})
			})
			this.$axios({
			method: 'post',
			url:'/sccg/depart/create',
			data: {
			departName: depart.departName,
			parentId: depart.parentId, departType: depart.departType, departDes: depart.departDes,
			departManagerList: arr
			}
			}).then(res => {
			if (res.code === 200) {
			this.$message({
			message: res.message,
			type: 'success'
			})
			this.refresh();
			} else if (res.code === 2001) {
			this.$message({
			message: res.message,
			type: 'error'
			})
			this.refresh();
			}
			})
			} else {
			return false;
			}
			})
			},
			// 获取部门树形结构图
			getDepartTree() {
			this.$axios({
			method: 'get',
			url: 'sccg/depart/tree',
			})
			.then(res => {
			res.data.unshift({ id: 0, departName: '顶级菜单' })
			this.departList = res.data;
			})
			},
			// 获取所有用户信息
			getUserList() {
			// 获取所有用户信息、用户查询(暂时支持电话号码)
			this.$axios.get(`sccg/admin/list`).then(res => {
			if (res.code === 200) {
			this.userList = res.data.records;
			}
			})
			},
			addUser() {
			console.log(this.checkedUser);
			this.openUser = false;
			},
			handleClose() {
			this.$emit('changMyDialog', { flag: false });
			},
			// 获取部门类型
			getDepartTypeList() {
			this.$axios({
			method: 'get',
			url: 'sccg/dict/query_depart_type',
			})
			.then(res => {
			console.log(res);
			this.departTypeList = res.data;
			})
			}
			},
			props: ['refresh']
			props: ['refresh', 'changMyDialog']
			}
			</script>
			<style lang="scss" scoped>
			@@ -154,30 +220,7 @@
			border-radius: 1px;
			background-color: #09152f;

			header {
			display: flex;
			justify-content: space-between;
			height: 60px;
			line-height: 60px;
			padding: 0 20px;
			border: 1px solid #fff;

			.headerTitle {
			color: #4b9bb7;
			font-weight: 600;
			}

			.headerTip span {
			color: #ff3b6c;
			}

			.headerTip label {
			color: #4b9bb7;
			}
			}

			main {
			border: 1px solid #fff;
			text-align: left;
			padding: 0 55px;
			background-color: #09152f;
			@@ -186,7 +229,8 @@
			.mainContent {
			display: flex;
			justify-content: center;
			margin-top: 50px;
			padding-top: 50px;

			&::v-deep .el-form-item__label {
			color: #4b9bb7;
			}
			@@ -195,11 +239,18 @@
			background-color: #09152f;
			border: 1px solid #17324c;
			}
			.addPerson{

			&::v-deep .el-textarea__inner {
			background-color: #09152f;
			border: 1px solid #17324c;
			}

			.addPerson {
			display: flex;
			list-style: none;
			padding:0;
			li{
			padding: 0;

			li {
			background-color: #cccccc;
			width: 36px;
			height: 36px;
			@@ -210,6 +261,7 @@
			margin-left: 10px;
			}
			}

			.el-form-item__content {
			width: 400px;

			@@ -232,9 +284,65 @@
			}

			}

			.add {
			position: relative;

			.card {
			position: absolute;
			z-index: 2000;
			right: 0;

			.box-card {
			max-height: 200px;
			overflow: hidden;
			background-color: #09152f;
			position: relative;
			max-width: 220px;

			.scrollWrap {
			overflow: scroll;
			height: 160px;
			position: relative;
			color: #4b9bb7;

			.el-checkbox-group {
			display: flex;
			flex-direction: column;

			.el-checkbox {
			line-height: 20px;
			}
			}
			}

			.myclear {
			width: 100%;
			line-height: 20px;
			color: #4b9bb7;
			display: flex;
			justify-content: space-between;
			}

			.hidebar {
			position: absolute;
			top: 77px;
			right: 20px;
			width: 20px;
			height: 160px;
			background-color: #09152f;
			}

			.item {
			line-height: 40px;
			}
			}
			}
			}
			}
			footer{
			border: 1px solid #fff;

			footer {
			border-top: 1px solid #fff;
			height: 80px;
			display: flex;
			align-items: center;