From ce87e7746d6399c5a38a7f4fe10447d911b06051 Mon Sep 17 00:00:00 2001 From: “dzb” <2632970487@qq.com> Date: 星期六, 08 十月 2022 09:14:50 +0800 Subject: [PATCH] 新增案件池在学习、暂不处理 --- src/views/systemSetting/baseSetting/department/createUser/index.vue | 141 ++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 121 insertions(+), 20 deletions(-) diff --git a/src/views/systemSetting/baseSetting/department/createUser/index.vue b/src/views/systemSetting/baseSetting/department/createUser/index.vue index e0273f4..26eaf15 100644 --- a/src/views/systemSetting/baseSetting/department/createUser/index.vue +++ b/src/views/systemSetting/baseSetting/department/createUser/index.vue @@ -11,8 +11,8 @@ <!-- 涓婄骇閮ㄩ棬 --> <el-form-item class="optionItems" label="涓婄骇閮ㄩ棬:" prop="parentId"> <el-select v-model="depart.parentId" placeholder="璇疯緭鍏ヤ笂绾ч儴闂�"> - <el-option v-for="item in departList" :key="item.departName" :label="item.departName" :value="item.id" - :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> @@ -21,13 +21,29 @@ <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 :max="3" v-model="checkedUser" @change="handleCheckedUserChange"> + <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"> @@ -50,7 +66,7 @@ const validateNickname = (rule, value, callback) => { if (!value) { callback(new Error("璇峰~鍐欓儴闂ㄥ悕绉�")); - }else{ + } else { callback(); } }; @@ -93,25 +109,26 @@ { required: false, trigger: "blur" }, ], }, - typeList: [], + userList: [], departList: [], + checkedUser: [], + openUser: false, } }, created() { const that = this; // 鑾峰彇閮ㄩ棬鏍戝舰缁撴瀯鍥� this.getDepartTree(); - // 鑾峰彇鍏ㄩ儴閮ㄩ棬鍒楄〃 - // this.$axios.get('sccg/depart/page').then(res => { - // that.departList = res.data.records; - // }) + // 鑾峰彇鐢ㄦ埛鍒楄〃 + this.getUserList(); }, methods: { handleUser() { this.$refs.user.validate((valid) => { if (valid) { - const { depart } = this; + const { depart, checkedUser } = this; console.log(depart); + console.log(checkedUser); this.$axios.post('/sccg/depart/create', { departName: depart.departName, parentId: depart.parentId, departType: depart.departType, departDes: depart.departDes @@ -130,23 +147,52 @@ this.refresh(); } }) - }else{ + } else { return false; } }) }, // 鑾峰彇閮ㄩ棬鏍戝舰缁撴瀯鍥� - getDepartTree(){ + getDepartTree() { this.$axios({ - method:'get', - url:'sccg/depart/tree', + method: 'get', + url: 'sccg/depart/tree', }) - .then(res=>{ - res.data.unshift({id:0,departName:'涓�绾ц彍鍗曟爮'}) - this.departList = res.data; - console.log(res); + .then(res => { + res.data.unshift({ id: 0, departName: '椤剁骇鑿滃崟' }) + this.departList = res.data; + }) + }, + // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭� + getUserList() { + const that = this; + const { currentPage, pageSize, search } = this; + // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�佺敤鎴锋煡璇�(鏆傛椂鏀寔鐢佃瘽鍙风爜) + this.$axios.get(`sccg/admin/list`).then(res => { + if (res.code === 200) { + console.log(res) + this.userList = res.data.records; + console.log(this.userList); + } }) - } + }, + handleCheckedUserChange(value) { + // console.log(value); + if (value.length > 3) { + console.log(this.checkedUser); + this.$message({ + type: 'warning', + message: '鏈�澶氬彧鑳芥坊鍔犱笁涓垚鍛�' + }) + } + // let checkedCount = value.length; + // this.checkAll = checkedCount === this.cities.length; + // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length; + }, + addUser() { + console.log(this.checkedUser); + this.openUser = false; + }, }, props: ['refresh'] } @@ -220,6 +266,61 @@ } } + + .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 { -- Gitblit v1.8.0