From 8ccceef72199179b434d5aa883ffd067310175c3 Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期一, 17 十月 2022 15:33:40 +0800 Subject: [PATCH] 去掉页面上固定地址 --- src/views/systemSetting/baseSetting/department/createUser/index.vue | 824 +++++++++++++++++++++++++++++++--------------------------- 1 files changed, 444 insertions(+), 380 deletions(-) diff --git a/src/views/systemSetting/baseSetting/department/createUser/index.vue b/src/views/systemSetting/baseSetting/department/createUser/index.vue index f07eccf..87520fd 100644 --- a/src/views/systemSetting/baseSetting/department/createUser/index.vue +++ b/src/views/systemSetting/baseSetting/department/createUser/index.vue @@ -1,414 +1,478 @@ <template> - <div class="createUser"> - <main> - <div class="mainContent"> - <el-form ref="user" label-width="140px" autoComplete="on" :model="depart" :rules="createDepartRules" - label-position="right"> - <!-- 閮ㄩ棬鍚嶇О --> - <el-form-item class="optionItem" label="閮ㄩ棬鍚嶇О:" prop="departName"> - <el-input v-model="depart.departName" placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�"></el-input> - </el-form-item> - <!-- 涓婄骇閮ㄩ棬 --> - <el-form-item class="optionItems" label="涓婄骇閮ㄩ棬:" prop="parentId"> - <el-select v-model="depart.parentId" placeholder="璇疯緭鍏ヤ笂绾ч儴闂�"> - <el-option :value="mylabel"> - <el-tree ref="tree" :check-strictly="true" :data="departList" :props="defaultProps" - show-checkbox @check-change="handleCheck" default-expand-all node-key="id"> - </el-tree> - </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 departTypeList" :key="item.id" :label="item.name" - :value="item.id"> - </el-option> - </el-select> - </el-form-item> - <!--娣诲姞浜哄憳 --> - <el-form-item class="optionItem add" label="娣诲姞浜哄憳:"> - <ul class="addPerson"> - <li v-for="(item,index) in cehckedList" :key="index" @click="setLeader(index)"> - <div class="li-item"> - <div class="li-icon"> - <i :class="['el-icon-user-solid',item.checked ? 'leader': '']"></i> - </div> - <label style="font-size: 12px;" :class="[item.checked ? 'leader': '']">{{item.username}}</label> - </div> - </li> - <li class="li-btn"><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 type="textarea" v-model="depart.departDes" placeholder="璇疯緭鍏ラ儴闂ㄦ弿杩�"></el-input> - </el-form-item> - </el-form> + <div class="createUser"> + <main> + <div class="mainContent"> + <el-form + ref="user" + label-width="140px" + autoComplete="on" + :model="depart" + :rules="createDepartRules" + label-position="right" + > + <!-- 閮ㄩ棬鍚嶇О --> + <el-form-item class="optionItem" label="閮ㄩ棬鍚嶇О:" prop="departName"> + <el-input + v-model="depart.departName" + placeholder="璇疯緭鍏ラ儴闂ㄥ悕绉�" + ></el-input> + </el-form-item> + <!-- 涓婄骇閮ㄩ棬 --> + <el-form-item class="optionItems" label="涓婄骇閮ㄩ棬:" prop="parentId"> + <el-select v-model="depart.parentId" placeholder="璇疯緭鍏ヤ笂绾ч儴闂�"> + <el-option :value="mylabel"> + <el-tree + ref="tree" + :check-strictly="true" + :data="departList" + :props="defaultProps" + show-checkbox + @check-change="handleCheck" + default-expand-all + node-key="id" + > + </el-tree> + </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 departTypeList" + :key="item.id" + :label="item.name" + :value="item.id" + > + </el-option> + </el-select> + </el-form-item> + <!--娣诲姞浜哄憳 --> + <el-form-item class="optionItem add" label="娣诲姞浜哄憳:"> + <ul class="addPerson"> + <li + v-for="(item, index) in cehckedList" + :key="index" + @click="setLeader(index)" + > + <div class="li-item"> + <div class="li-icon"> + <i + :class="[ + 'el-icon-user-solid', + item.checked ? 'leader' : '', + ]" + ></i> + </div> + <label + style="font-size: 12px" + :class="[item.checked ? 'leader' : '']" + >{{ item.username }}</label + > + </div> + </li> + <li class="li-btn"> + <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> - </main> - <footer> - <div class="optionBtn"> - <el-button @click="handleClose">鍙栨秷</el-button> - <el-button type="primary" class="btn submit" @click="handleUser">纭畾</el-button> - </div> - </footer> - </div> + </el-form-item> + <el-form-item> + <label style="color:#ff0000ab">绾㈣壊浠h〃閮ㄩ棬棰嗗锛岀偣鍑诲ご鍍忓彲璁剧疆閮ㄩ棬棰嗗</label> + </el-form-item> + <!-- 閮ㄩ棬鎻忚堪 --> + <el-form-item class="optionItem" label="閮ㄩ棬鎻忚堪:" prop="departDes"> + <el-input + type="textarea" + :rows="4" + v-model="depart.departDes" + placeholder="璇疯緭鍏ラ儴闂ㄦ弿杩�" + ></el-input> + </el-form-item> + </el-form> + </div> + </main> + <footer> + <div class="optionBtn"> + <el-button @click="handleClose">鍙栨秷</el-button> + <el-button type="primary" class="btn submit" @click="handleUser" + >纭畾</el-button + > + </div> + </footer> + </div> </template> <script> -import { getTypeList } from '@/utils/helper' +import { getTypeList } from "@/utils/helper"; export default { - data() { - const validateNickname = (rule, value, callback) => { - if (!value) { - callback(new Error("璇峰~鍐欓儴闂ㄥ悕绉�")); - } else { - callback(); + data() { + const validateNickname = (rule, value, callback) => { + if (!value) { + callback(new Error("璇峰~鍐欓儴闂ㄥ悕绉�")); + } else { + callback(); + } + }; + const validatePass = (rule, value, callback) => { + if (!value) { + callback(); + } else { + callback(); + } + }; + const validatePhone = (rule, value, callback) => { + if (!value) { + callback(); + } else { + callback(); + } + }; + return { + depart: { + departName: "", + parentId: "", + departType: "", + departDes: "", + }, + createDepartRules: { + departName: [ + { required: true, trigger: "blur", validator: validateNickname }, + ], + parentId: [ + { required: false, trigger: "blur", validator: validatePass }, + ], + departType: [ + { required: false, trigger: "blur", validator: validatePhone }, + ], + departDes: [{ required: false, trigger: "blur" }], + }, + userList: [], + departList: [], + checkedUser: [], + cehckedList: [], + openUser: false, + departTypeList: [], + selectOrg: { + orgsid: [], + }, + mylabel: "", + defaultProps: { + children: "children", + label: "departName", + }, + }; + }, + created() { + const that = this; + // 鑾峰彇閮ㄩ棬鏍戝舰缁撴瀯鍥� + this.getDepartTree(); + // 鑾峰彇鐢ㄦ埛鍒楄〃 + this.getUserList(); + // 鑾峰彇閮ㄩ棬绫诲瀷鍒楄〃 + this.getDepartTypeList(); + }, + methods: { + handleUser() { + this.$refs.user.validate((valid) => { + if (valid) { + const { depart, cehckedList, selectOrg } = this; + const arr = []; + cehckedList.forEach((item) => { + arr.push({ isLeader: item.isLeader, userId: item.id }); + }); + console.log(arr); + this.$axios({ + method: "post", + url: "/sccg/depart/create", + data: { + departName: depart.departName, + parentId: selectOrg.orgsid[0], + 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(); } - }; - const validatePass = (rule, value, callback) => { - if (!value) { - callback(); - } else { - callback(); - } - }; - const validatePhone = (rule, value, callback) => { - if (!value) { - callback(); - } else { - callback(); - } - }; - return { - depart: { - departName: '', - parentId: '', - departType: '', - departDes: '', - }, - createDepartRules: { - departName: [ - { required: true, trigger: "blur", validator: validateNickname }, - ], - parentId: [ - { required: false, trigger: "blur", validator: validatePass }, - ], - departType: [ - { required: false, trigger: "blur", validator: validatePhone }, - ], - departDes: [ - { required: false, trigger: "blur" }, - ], - }, - userList: [], - departList: [], - checkedUser: [], - cehckedList: [], - openUser: false, - departTypeList: [], - selectOrg: { - orgsid: [] - }, - mylabel: '', - defaultProps: { - children: 'children', - label: 'departName', - }, + }); + } else { + return false; } + }); }, - created() { - const that = this; - // 鑾峰彇閮ㄩ棬鏍戝舰缁撴瀯鍥� - this.getDepartTree(); - // 鑾峰彇鐢ㄦ埛鍒楄〃 - this.getUserList(); - // 鑾峰彇閮ㄩ棬绫诲瀷鍒楄〃 - this.getDepartTypeList(); + // 鑾峰彇閮ㄩ棬鏍戝舰缁撴瀯鍥� + getDepartTree() { + this.$axios({ + method: "get", + url: "sccg/depart/tree", + }).then((res) => { + console.log(res); + res.data.unshift({ id: 0, departName: "椤剁骇鑿滃崟" }); + this.departList = res.data; + }); }, - methods: { - handleUser() { - this.$refs.user.validate((valid) => { - if (valid) { - const { depart,cehckedList,selectOrg } = this; - const arr = []; - cehckedList.forEach(item => { - arr.push({ isLeader: item.isLeader, userId: item.id, }); - }) - console.log(arr); - this.$axios({ - method: 'post', - url: '/sccg/depart/create', - data: { - departName: depart.departName, - parentId: selectOrg.orgsid[0], 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 => { - console.log(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); - console.log(this.userList); - this.cehckedList = []; - this.userList.forEach(item => { - this.checkedUser.forEach(child => { - if (item.id == child) { - this.cehckedList.push({ id: item.id, username: item.username, isLeader: 0, checked: false }); - } - }) - }) - this.cehckedList[0].isLeader = 1; - this.cehckedList[0].checked = true; - this.openUser = false; - }, - handleClose() { - this.$emit('changMyDialog', { flag: false }); - }, - // 鑾峰彇閮ㄩ棬绫诲瀷 - async getDepartTypeList() { - this.departTypeList = await getTypeList(1, '08') - }, - handleCheck(data, checked) { - this.depart.parentId = data.departName; - // 鑾峰彇褰撳墠閫夋嫨鐨刬d鍦ㄦ暟缁勪腑鐨勭储寮� - const indexs = this.selectOrg.orgsid.indexOf(data.id) - // 濡傛灉涓嶅瓨鍦ㄦ暟缁勪腑锛屽苟涓旀暟缁勪腑宸茬粡鏈変竴涓猧d骞朵笖checked涓簍rue鐨勬椂鍊欙紝浠h〃涓嶈兘鍐嶆閫夋嫨銆� - if (indexs < 0 && this.selectOrg.orgsid.length === 1 && checked) { - this.$message({ - message: '鍙兘閫夋嫨涓�涓儴闂紒', - type: 'warning', - showClose: true - }) - // 璁剧疆宸查�夋嫨鐨勮妭鐐逛负false 寰堥噸瑕� - this.$refs.tree.setChecked(data, false) - } else if (this.selectOrg.orgsid.length === 0 && checked) { - // 鍙戠幇鏁扮粍涓虹┖ 骞朵笖鏄凡閫夋嫨 - // 闃叉鏁扮粍鏈夊�硷紝棣栧厛娓呯┖锛屽啀push - this.selectOrg.orgsid = [] - this.selectOrg.orgsid.push(data.id) - } else if ( - indexs >= 0 && - this.selectOrg.orgsid.length === 1 && - !checked - ) { - // 鍐嶆鐩存帴杩涜璧嬪�间负绌烘搷浣� - this.selectOrg.orgsid = [] - this.depart.parentId = ''; - } - }, - // 璁剧疆棰嗗 - setLeader(idx){ - this.cehckedList.forEach((item,index)=>{ - if(index === idx){ - item.checked = true; - item.isLeader = 1; - }else{ - item.checked = false; - item.isLeader = 0; - } - }) + // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭� + getUserList() { + // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�佺敤鎴锋煡璇�(鏆傛椂鏀寔鐢佃瘽鍙风爜) + this.$axios.get(`sccg/admin/list`).then((res) => { + if (res.code === 200) { + this.userList = res.data.records; } + }); }, - props: ['refresh', 'changMyDialog'] -} + addUser() { + console.log(this.checkedUser); + console.log(this.userList); + this.cehckedList = []; + this.userList.forEach((item) => { + this.checkedUser.forEach((child) => { + if (item.id == child) { + this.cehckedList.push({ + id: item.id, + username: item.username, + isLeader: 0, + checked: false, + }); + } + }); + }); + this.cehckedList[0].isLeader = 1; + this.cehckedList[0].checked = true; + this.openUser = false; + }, + handleClose() { + this.$emit("changMyDialog", { flag: false }); + }, + // 鑾峰彇閮ㄩ棬绫诲瀷 + async getDepartTypeList() { + this.departTypeList = await getTypeList(1, "08"); + }, + handleCheck(data, checked) { + this.depart.parentId = data.departName; + // 鑾峰彇褰撳墠閫夋嫨鐨刬d鍦ㄦ暟缁勪腑鐨勭储寮� + const indexs = this.selectOrg.orgsid.indexOf(data.id); + // 濡傛灉涓嶅瓨鍦ㄦ暟缁勪腑锛屽苟涓旀暟缁勪腑宸茬粡鏈変竴涓猧d骞朵笖checked涓簍rue鐨勬椂鍊欙紝浠h〃涓嶈兘鍐嶆閫夋嫨銆� + if (indexs < 0 && this.selectOrg.orgsid.length === 1 && checked) { + this.$message({ + message: "鍙兘閫夋嫨涓�涓儴闂紒", + type: "warning", + showClose: true, + }); + // 璁剧疆宸查�夋嫨鐨勮妭鐐逛负false 寰堥噸瑕� + this.$refs.tree.setChecked(data, false); + } else if (this.selectOrg.orgsid.length === 0 && checked) { + // 鍙戠幇鏁扮粍涓虹┖ 骞朵笖鏄凡閫夋嫨 + // 闃叉鏁扮粍鏈夊�硷紝棣栧厛娓呯┖锛屽啀push + this.selectOrg.orgsid = []; + this.selectOrg.orgsid.push(data.id); + } else if ( + indexs >= 0 && + this.selectOrg.orgsid.length === 1 && + !checked + ) { + // 鍐嶆鐩存帴杩涜璧嬪�间负绌烘搷浣� + this.selectOrg.orgsid = []; + this.depart.parentId = ""; + } + }, + // 璁剧疆棰嗗 + setLeader(idx) { + this.cehckedList.forEach((item, index) => { + if (index === idx) { + item.checked = true; + item.isLeader = 1; + } else { + item.checked = false; + item.isLeader = 0; + } + }); + }, + }, + props: ["refresh", "changMyDialog"], +}; </script> <style lang="scss" scoped> .createUser { - border-radius: 1px; + border-radius: 1px; + background-color: #09152f; + + main { + text-align: left; + padding: 0 55px; background-color: #09152f; + padding-bottom: 50px; - main { - text-align: left; - padding: 0 55px; + .mainContent { + display: flex; + justify-content: center; + padding-top: 50px; + + &::v-deep .el-form-item__label { + color: #4b9bb7; + } + + &::v-deep .el-input__inner { background-color: #09152f; - padding-bottom: 50px; + border: 1px solid #17324c; + } - .mainContent { - display: flex; - justify-content: center; - padding-top: 50px; + &::v-deep .el-textarea__inner { + background-color: #09152f; + border: 1px solid #17324c; + } - &::v-deep .el-form-item__label { - color: #4b9bb7; - } + .addPerson { + display: flex; + list-style: none; + padding: 0; + flex-wrap: wrap; + max-width: 280px; + li { + color: #fff; + text-align: center; + font-size: 30px; + margin-left: 10px; + } + } + .li-icon { + background-color: #cccccc; + width: 36px; + height: 36px; + border-radius: 50%; + margin: 0 auto; + } + .li-btn { + background-color: #cccccc; + width: 36px; + height: 36px; + border-radius: 50%; + } + .el-form-item__content { + width: 400px; - &::v-deep .el-input__inner { - background-color: #09152f; - border: 1px solid #17324c; - } + .el-select { + width: 100%; + } + } - &::v-deep .el-textarea__inner { - background-color: #09152f; - border: 1px solid #17324c; - } + .optionHandleSp { + display: flex; - .addPerson { - display: flex; - list-style: none; - padding: 0; - - li { - background-color: #cccccc; - width: 36px; - height: 36px; - border-radius: 50%; - color: #fff; - text-align: center; - font-size: 30px; - margin-left: 10px; - } - } - - .el-form-item__content { - width: 400px; - - .el-select { - width: 100%; - } - } - - .optionHandleSp { - display: flex; - - .areaNumber, - .moreNumber { - flex: 1; - } - - .telNumber { - flex: 2; - } - } - + .areaNumber, + .moreNumber { + flex: 1; } - .add { + .telNumber { + flex: 2; + } + } + } + + .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; - .card { - position: absolute; - z-index: 2000; - right: 0; + .el-checkbox-group { + display: flex; + flex-direction: column; - .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; - } - } + .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; + } } + } } + } - .li-item { - display: flex; - flex-direction: column; - } + .li-item { + display: flex; + flex-direction: column; + } - .leader { - color: red; - } - - footer { - border-top: 1px solid #fff; - height: 80px; - display: flex; - align-items: center; - justify-content: flex-end; - padding-right: 20px; - } + .leader { + color: red; + } + .el-input { + width: 280px !important; + } + footer { + border-top: 1px solid #fff; + height: 80px; + display: flex; + align-items: center; + justify-content: flex-end; + padding-right: 20px; + } } </style> \ No newline at end of file -- Gitblit v1.8.0