From c1e14a5b3e91f92c2ee40bcf0c880fa5dfd09e4d Mon Sep 17 00:00:00 2001 From: ColorWhiteDeveloper <2632970487@qq.com> Date: 星期一, 19 九月 2022 16:34:36 +0800 Subject: [PATCH] 新增新建用户,修改用户状态 --- src/views/systemSetting/baseSetting/user/updateUser/index.vue | 363 +++++++++++++++++++++++++ /dev/null | 154 ----------- src/views/systemSetting/baseSetting/user/createUser/index.vue | 164 ++++++----- src/views/layout/index.vue | 19 src/utils/mydate.js | 16 + src/views/systemSetting/baseSetting/user/index.vue | 91 ++++-- src/views/layout/components/Menu/index.vue | 17 7 files changed, 547 insertions(+), 277 deletions(-) diff --git a/src/utils/mydate.js b/src/utils/mydate.js new file mode 100644 index 0000000..a058424 --- /dev/null +++ b/src/utils/mydate.js @@ -0,0 +1,16 @@ +function filterTime(time){ + const result = new Date(time); + let yy = result.getFullYear(), + mm = result.getMonth(), + dd = result.getDate(), + hh = result.getHours(), + mi = result.getMinutes(); + return yy+'-'+ fillTime(mm)+'-'+fillTime(dd)+" "+fillTime(hh)+':'+fillTime(mi); +} +function fillTime(num){ + if(num<10){ + return '0' + num; + } + return num; +} +export default filterTime; \ No newline at end of file diff --git a/src/views/layout/components/AsideBar/index.vue b/src/views/layout/components/AsideBar/index.vue deleted file mode 100644 index b4bbb39..0000000 --- a/src/views/layout/components/AsideBar/index.vue +++ /dev/null @@ -1,154 +0,0 @@ -<template> - <div class="AsideBar"> - <!-- 浜岀骇渚ц竟鏍� --> - <el-aside width="200px" class="aside"> - <el-scrollbar> - <el-menu class="el-menu-vertical" :default-active="$route.path"> - <div v-for="item in asideList" :key="item.name"> - <span class="AsideBarTitle">{{item.name}}</span> - <el-menu-item v-for="child in item.children" :key="child.name" :index="child.index" class="firstMenu" - @click="Jump(child.index)"> - <span class="firstSpan">{{child.name}}</span> - </el-menu-item> - </div> - </el-menu> - </el-scrollbar> - </el-aside> - </div> -</template> - -<script> -export default { - data() { - return { - menu: [ - { - name: '/home/system', children: [ - { - name: "鍩虹璁剧疆", index: '/home/system/base', children: [ - { - name: '鐢ㄦ埛绠$悊', index: '/home/system/user', - }, - { - name:'瑙掕壊绠$悊', index:'/home/system/role', - }, - { - name:'鏉冮檺绠$悊',index:'/home/system/authority', - }, - { - name:'閮ㄩ棬绠$悊',index:'/home/system/department', - } - ] - }, - { name: "骞冲彴璁剧疆", index: "/home/system/plateform", children: [ - { - name:'闂ㄦ埛璁剧疆',index:'/home/system/portalSetting' - }, - { - name:'绗笁鏂规帴鍙g鐞�',index:'/home/system/otherInterface' - } - ] }, - ], - } - ], - asideList: null, - } - }, - created() { - this.getAsideList(this.$route.path); - }, - watch: { - $route(to, from) { - this.getAsideList(to.fullPath); - } - }, - methods: { - getAsideList(path) { - let { menu } = this; - const that = this; - this.asideList = null; - menu.forEach(item => { - if (path.indexOf(item.name) !== -1) { - that.asideList = item.children; - } - }) - }, - Jump(path) { - this.$router.push(path); - } - } -}; -</script> - -<style lang="scss" scpoed> -.icon-padding { - padding-right: 10px; -} - -.aside { - background: #eaedf1; - color: black; - text-align: center; - box-sizing: border-box; - position: relative; - // 鍥哄畾鏍囬 - .siderbar-title { - position: fixed; - text-align: center; - margin: 0; - font-size: 26px; - width: 200px; - line-height: 66px; - top: 0; - left: 0; - z-index: 999; - box-shadow: 0 -5px 5px #0ff inset; - } - - .el-scrollbar { - height: calc(100vh - 66px); - box-sizing: border-box; - - .el-menu { - border: 0; - .AsideBarTitle { - display: block; - line-height: 60px; - color: #999; - font-weight: 650; - background-color: #f2f2f2; - border-bottom: 1px solid #e4e4e4; - } - - .firstMenu { - background: #eaedf1; - text-align: center; - height: 40px; - line-height: 40px; - background-color: #eaedf1; - color: #666666; - border-bottom: 1px solid #e4e4e4; - - &:hover .firstSpan { - color: #1a87fe; - } - - .el-menu-item { - &:hover { - color: #22d3eb; - } - } - } - - .is-active { - background-color: #fff; - color: #1a87fe; - } - } - - .el-scrollbar__wrap { - overflow-x: hidden; - } - } -} -</style> \ No newline at end of file diff --git a/src/views/layout/components/Menu/index.vue b/src/views/layout/components/Menu/index.vue index 60751bd..8ad84aa 100644 --- a/src/views/layout/components/Menu/index.vue +++ b/src/views/layout/components/Menu/index.vue @@ -1,7 +1,8 @@ <template> <div class="Menu"> <!-- 鑿滃崟鏍� --> - <el-aside width="160px" class="menu"> + <el-aside width="200px" class="menu"> + <h2 class="siderbar-title">閬傛槍鎵ф硶骞冲彴</h2> <el-scrollbar class="MenuScroll"> <!-- 璺敱 --> <el-menu class="el-menu-vertical"> @@ -57,12 +58,11 @@ </script> <style lang="scss" scpoed> -$bk:#333744; .icon-padding { padding-right: 10px; } .menu { - background: $bk; + background: #07162e; color: #e9eef3; text-align: center; box-sizing: border-box; @@ -78,18 +78,19 @@ top: 0; left: 0; z-index: 999; - box-shadow: 0 -5px 5px #0ff inset; + background-color: #08162f; } .MenuScroll { height: calc(100vh - 66px); box-sizing: border-box; + margin-top: 66px; .el-menu { background: linear-gradient(#07162e, #0f2b56); border: 0; .firstMenu { - background: $bk; + background: #07162e; text-align: left; &:hover .fisrtSpan { color: #fff; @@ -101,10 +102,10 @@ .el-menu-item { color: #c3c3c4; - background-color: #333744; - + background-color: #07162e; &:hover { color: #fff; + background-color: #0c2c4c; } } @@ -115,7 +116,7 @@ } .is-active { - background-color: #092c4a; + background-color: #07162e; } } diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue index 0fd3103..c9bb95e 100644 --- a/src/views/layout/index.vue +++ b/src/views/layout/index.vue @@ -1,15 +1,12 @@ <template> <el-container id="body-wrapper"> - <!-- 澶撮儴 --> - <Header /> - <el-container class="my-el-content"> - <!-- 渚ц竟瀵艰埅鏍� --> - <Menu /> - <AsideBar /> - <el-container class="my-el-container"> - <!-- 鍐呭鍖哄煙 --> - <Main /> - </el-container> + <!-- 渚ц竟瀵艰埅鏍� --> + <Menu /> + <el-container> + <!-- 澶撮儴 --> + <Header /> + <!-- 鍐呭鍖哄煙 --> + <Main /> </el-container> </el-container> </template> @@ -18,14 +15,12 @@ import Main from "./components/Main"; import Menu from "./components/Menu"; import Header from "./components/Header"; -import AsideBar from "./components/AsideBar" export default { name: "layout", components: { Menu, Main, Header, - AsideBar }, }; </script> diff --git a/src/views/systemSetting/baseSetting/user/createUser/index.vue b/src/views/systemSetting/baseSetting/user/createUser/index.vue index ff39f08..872c556 100644 --- a/src/views/systemSetting/baseSetting/user/createUser/index.vue +++ b/src/views/systemSetting/baseSetting/user/createUser/index.vue @@ -13,76 +13,75 @@ <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules" label-position="right"> <!-- 鐢ㄦ埛鍚嶇О --> - <el-form-item class="optionItem" label="鐢ㄦ埛鍚嶇О:" prop="nick_name"> - <el-input v-model="user.nick_name" placeholder="濉啓鐢ㄦ埛鍚嶇О"></el-input> + <el-form-item class="optionItem" label="鐢ㄦ埛鍚嶇О:" prop="nickName"> + <el-input v-model="user.nickName" placeholder="濉啓鐢ㄦ埛鍚嶇О"></el-input> </el-form-item> <!-- 鐢ㄦ埛瀵嗙爜 --> <el-form-item class="optionItems" label="鐢ㄦ埛瀵嗙爜:" prop="password"> <el-input v-model="user.password" type="password" placeholder="璇疯緭鍏ョ敤鎴峰瘑鐮�"></el-input> </el-form-item> <!-- 鎵�灞炵敤鎴峰鍚� --> - <el-form-item class="optionItem" label="鎵�灞炵敤鎴峰鍚�:" prop="true_name"> - <el-input v-model="user.true_name" placeholder="璇峰~鍐欑敤鎴峰鍚�"></el-input> + <el-form-item class="optionItem" label="鎵�灞炵敤鎴峰鍚�:" prop="username"> + <el-input v-model="user.username" placeholder="璇峰~鍐欑敤鎴峰鍚�"></el-input> </el-form-item> <!-- 鎬у埆 --> - <el-form-item class="optionItem" label="鎬у埆:" prop="gender"> + <!-- <el-form-item class="optionItem" label="鎬у埆:" prop="gender"> <el-radio-group v-model="user.gender"> <el-radio :label="1">鐢�</el-radio> <el-radio :label="2">濂�</el-radio> </el-radio-group> - </el-form-item> + </el-form-item> --> <!-- 鏄惁鍏氬憳 --> - <el-form-item class="optionItem" label="鏄惁鍏氬憳:" prop="member"> - <el-radio-group v-model="user.member"> + <el-form-item class="optionItem" label="鏄惁鍏氬憳:" prop="isDy"> + <el-radio-group v-model="user.isDy"> <el-radio :label="1">鏄�</el-radio> <el-radio :label="0">鍚�</el-radio> </el-radio-group> </el-form-item> <!-- 鎵�灞炴墜鏈哄彿鐮� --> - <el-form-item class="optionItem" label="鎵�灞炴墜鏈哄彿鐮�:" prop="phone"> - <el-input v-model="user.phone" placeholder="璇峰~鍐欐墜鏈哄彿鐮�"></el-input> + <el-form-item class="optionItem" label="鎵�灞炴墜鏈哄彿鐮�:" prop="mobile"> + <el-input v-model="user.mobile" placeholder="璇峰~鍐欐墜鏈哄彿鐮�"></el-input> </el-form-item> <!-- 閭鍦板潃 --> - <el-form-item class="optionItem" label="閭鍦板潃:" prop="mail"> - <el-input v-model="user.mail" placeholder="璇峰~鍐欓偖绠卞湴鍧�"></el-input> + <el-form-item class="optionItem" label="閭鍦板潃:" prop="email"> + <el-input v-model="user.email" placeholder="璇峰~鍐欓偖绠卞湴鍧�"></el-input> </el-form-item> <!-- 閫夋嫨瑙掕壊 --> - <el-form-item class="optionItem" label="閫夋嫨瑙掕壊:" prop="role"> + <!-- <el-form-item class="optionItem" label="閫夋嫨瑙掕壊:" prop="role"> <el-select v-model="user.role" placeholder="璇烽�夋嫨鎵�灞炶鑹�"> <el-option v-for="item in roleList" :key="item.name" :label="item.name" :value="item.value" :disabled="item.disabled"> </el-option> </el-select> - </el-form-item> + </el-form-item> --> <!-- 鐢ㄦ埛绫诲瀷 --> - <el-form-item class="optionItem" label="鐢ㄦ埛绫诲瀷:" prop="type"> - <el-select v-model="user.type" placeholder="璇烽�夋嫨鐢ㄦ埛绫诲瀷"> + <el-form-item class="optionItem" label="鐢ㄦ埛绫诲瀷:" prop="userType"> + <el-select v-model="user.userType" placeholder="璇烽�夋嫨鐢ㄦ埛绫诲瀷"> <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value" :disabled="item.disabled"> </el-option> </el-select> </el-form-item> <!-- 搴ф満/鍒嗘満 --> - <el-form-item class="optionItem" label="搴ф満/鍒嗘満:" prop="telPhone"> + <el-form-item class="optionItem" label="搴ф満/鍒嗘満:" prop="zj"> <div class="optionHandleSp"> - <el-input class="areaNumber" v-model="user.telPhone.areaNumber" placeholder="鐢佃瘽鍖哄彿"> + <el-input class="areaNumber" v-model="user.zj.areaNumber" placeholder="鐢佃瘽鍖哄彿"> </el-input> - <el-input class="telNumber" v-model="user.telPhone.phoneNumber" placeholder="鐢佃瘽鍙风爜"> + <el-input class="telNumber" v-model="user.zj.phoneNumber" placeholder="鐢佃瘽鍙风爜"> </el-input> - <el-input class="moreNumber" v-model="user.telPhone.moreNumber" placeholder="鍒嗘満鍙风爜"> + <el-input class="moreNumber" v-model="user.zj.moreNumber" placeholder="鍒嗘満鍙风爜"> </el-input> </div> </el-form-item> <!-- 鎵�灞為儴闂� --> - <el-form-item class="optionItem" label="鎵�灞為儴闂�:" prop="department"> - <el-select v-model="user.department" placeholder="璇烽�夋嫨鎵�灞為儴闂�"> - <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value" - :disabled="item.disabled"> + <el-form-item class="optionItem" label="鎵�灞為儴闂�:" prop="departmentId"> + <el-select v-model="user.departmentId" placeholder="璇烽�夋嫨鎵�灞為儴闂�"> + <el-option v-for="item in typeList" :key="item.name" :label="item.departName" :value="item.id"> </el-option> </el-select> </el-form-item> <!-- 褰撳墠鑱屽姟 --> - <el-form-item class="optionItem" label="褰撳墠鑱屽姟:" prop="work"> + <el-form-item class="optionItem" label="褰撳墠鑱屽姟:" prop="jobTitle"> <el-select v-model="user.work" placeholder="璇烽�夋嫨褰撳墠鑱屽姟"> <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value" :disabled="item.disabled"> @@ -90,15 +89,15 @@ </el-select> </el-form-item> <!-- 濉啓鎵�灞瀖ac鍦板潃 --> - <el-form-item class="optionItem" label="濉啓鎵�灞瀖ac鍦板潃:" prop="mac"> + <!-- <el-form-item class="optionItem" label="濉啓鎵�灞瀖ac鍦板潃:" prop="mac"> <el-input v-model="user.mac" placeholder="璇峰~鍐欐墍灞瀖ac鍦板潃"></el-input> - </el-form-item> + </el-form-item> --> <!-- 濉啓鎵�灞瀒p鍦板潃 --> - <el-form-item class="optionItem" label="濉啓鎵�灞瀒p鍦板潃:" prop="ip"> + <!-- <el-form-item class="optionItem" label="濉啓鎵�灞瀒p鍦板潃:" prop="ip"> <el-input v-model="user.ip" placeholder="璇峰~鍐欐墍灞瀒p鍦板潃"></el-input> - </el-form-item> + </el-form-item> --> <el-form-item class="optionBtn"> - <el-button type="primary" class="btn submit" @click="handleUser">鎻愪氦</el-button> + <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">鎻愪氦</el-button> <el-button class="btn reset">閲嶇疆</el-button> </el-form-item> </el-form> @@ -197,87 +196,110 @@ }; return { user: { - nick_name: '', + nickName: '', password: '', - true_name: '', - gender: 1, - member: 1, - phone: '', - mail: '', - role: null, - type: null, - telPhone: { + username: '', + // gender: 1, + isDy: 0, + mobile: '', + email: '', + // role: null, + userType: null, + zj: { areaNumber: '', phoneNumber: "", moreNumber: "", }, - department: null, - work: null, - mac: '', - ip: '', + departmentId: null, + jobTitle: null, + // mac: '', + // ip: '', }, createUserRules: { - nick_name: [ + nickName: [ { required: true, trigger: "blur", validator: validateNickname }, ], password: [ { required: true, trigger: "blur", validator: validatePass }, ], - true_name: [ + username: [ { required: true, trigger: "blur", validator: validateTruename }, ], - gender: [ + // gender: [ + // { required: true, trigger: "blur" }, + // ], + isDy: [ { required: true, trigger: "blur" }, ], - member: [ - { required: true, trigger: "blur" }, - ], - phone: [ + mobile: [ { required: true, trigger: "blur", validator: validatePhone }, ], - mail: [ + email: [ { required: false, trigger: "blur", validator: validateMail }, ], - role: [ - { required: true, trigger: "blur", validator: validateRole }, - ], - type: [ + // role: [ + // { required: true, trigger: "blur", validator: validateRole }, + // ], + userType: [ { required: true, trigger: "blur", validator: validateType }, ], - telPhone: [ + zj: [ { required: false, trigger: "blur" }, ], - department: [ + departmentId: [ { required: true, trigger: "blur", validator: validateDepartment }, ], - work: [ + jobTitle: [ { required: true, trigger: "blur", validator: validateWork }, ], - mac: [ - { required: false, trigger: "blur", validator: validateMac }, - ], - ip: [ - { required: false, trigger: "blur", validator: validateIp }, - ], + // mac: [ + // { required: false, trigger: "blur", validator: validateMac }, + // ], + // ip: [ + // { required: false, trigger: "blur", validator: validateIp }, + // ], }, roleList: [ { name: '瑙掕壊1', value: 1 }, { name: '瑙掕壊2', value: 2 } ], - typeList: [ - { name: '绫诲瀷1', value: 1 }, { name: '绫诲瀷2', value: 2 } - ] + typeList: [] } }, created() { - this.$axios.get("sccg/role/listAll").then(res=>{ - console.log(res); - }); + 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; + }) }, methods: { handleUser() { - console.log(this.user); + const {user} = this; + console.log(user); + this.$axios.post('sccg/admin/register',{ + departmentId:user.departmentId, + email:user.email, + jsDy:user.isDy, + jobTitle:user.jobTitle, + mobile:user.mobile, + nickName:user.nickName, + password:user.password, + userType:user.userType, + username:user.username, + }).then(res=>{ + if(res.code === 200){ + this.refresh(); + } + }) } }, + props:['refresh'] } </script> <style lang="scss" scpoed> diff --git a/src/views/systemSetting/baseSetting/user/index.vue b/src/views/systemSetting/baseSetting/user/index.vue index f559c55..f186680 100644 --- a/src/views/systemSetting/baseSetting/user/index.vue +++ b/src/views/systemSetting/baseSetting/user/index.vue @@ -8,9 +8,9 @@ <el-input placeholder="璇疯緭鍏ュ唴瀹�"></el-input> </div> <div class="addUser"> - <el-button type="primary" @click="dialogVisible = true">娣诲姞鐢ㄦ埛</el-button> - <el-dialog :visible.sync="dialogVisible" width="45%"> - <createUser /> + <el-button type="primary" @click="dialogCreate = true">娣诲姞鐢ㄦ埛</el-button> + <el-dialog :visible.sync="dialogCreate" width="45%"> + <createUser :refresh="getUserList" /> </el-dialog> </div> </div> @@ -26,30 +26,30 @@ <el-table-column label="鐢ㄦ埛ID" width="67"> <template slot-scope="scope">{{ scope.row.id }}</template> </el-table-column> - <el-table-column prop="name" label="鐢ㄦ埛鍚嶇О" width="82"> + <el-table-column prop="nickName" label="鐢ㄦ埛鍚嶇О" width="82"> </el-table-column> - <el-table-column prop="true_name" label="鎵�灞炲鍚�" width="76"> + <el-table-column prop="username" label="鎵�灞炲鍚�" width="76"> </el-table-column> - <el-table-column prop="phone" label="鑱旂郴鏂瑰紡" width="81"> + <el-table-column prop="mobile" label="鑱旂郴鏂瑰紡" width="81"> </el-table-column> - <el-table-column prop="role" label="鎵�灞炶鑹�" width="87"> + <el-table-column prop="note" label="鎵�灞炶鑹�" width="87"> </el-table-column> - <el-table-column prop="department" label="鎵�灞為儴闂�" width="80"> + <el-table-column prop="departName" label="鎵�灞為儴闂�" width="80"> </el-table-column> - <el-table-column prop="work" label="鎵�灞炶亴鍔�" width="83"> + <el-table-column prop="jobTitle" label="鎵�灞炶亴鍔�" width="83"> </el-table-column> <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" width="128"> </el-table-column> - <el-table-column prop="is_open" label="鍚敤" width="90"> + <el-table-column prop="status" label="鍚敤" width="90"> <template slot-scope="scope"> - <el-switch v-model="scope.row.is_open" active-color="##0079fe" inactive-color="#ff4949"> + <el-switch v-model="scope.row.status" active-color="#0079fe" inactive-color="#ff4949" @change="handleChangeStatus(scope.row)"> </el-switch> </template> </el-table-column> <el-table-column prop="operation" label="鎿嶄綔" width="246"> <template slot-scope="scope"> <div class="operation"> - <span>淇敼瑙掕壊</span> + <span @click="handleChangeRole(scope.row)">淇敼瑙掕壊</span> <span>鏌ョ湅</span> <span>淇敼瀵嗙爜</span> <span>鍒犻櫎</span> @@ -58,37 +58,63 @@ </template> </el-table-column> </el-table> + <el-dialog :visible.sync="dialogUpdate" width="45%"> + <updateUser /> + </el-dialog> </div> </main> </div> </template> <script> import createUser from "./createUser" +import updateUser from "./updateUser" +import helper from "@/utils/mydate.js" export default { - components:{ - createUser - }, + components: { + createUser, updateUser + }, data() { return { - tableData: [ - { - createTime: '2016-05-02', - name: 'admin', - address: '涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�', - role: '瓒呯骇绠$悊鍛�', - is_open: true, - } - ], - dialogVisible:false, + tableData: [], + dialogCreate: false, + dialogUpdate: false, + user: '', } }, - created(){ - // 鑾峰彇褰撳墠鐢ㄦ埛鐧诲綍淇℃伅 - this.$axios.get( - 'sccg/admin/info' - ).then(res=>{ - console.log(res); - }) + created() { + this.getUserList(); + }, + methods: { + // 淇敼瑙掕壊 + handleChangeRole(obj) { + this.dialogUpdate = true + this.user = obj; + // console.log(obj) + }, + // 淇敼鐢ㄦ埛鐘舵�� + handleChangeStatus(obj){ + let {id,status} = obj ; + status==true ? status=1:status=0; + console.log(id,status); + this.$axios.post(`sccg/admin/updateStatus/`+id+'?status='+status).then(res=>{ + console.log(res); + }) + }, + // 鑾峰彇鐢ㄦ埛鍒楄〃 + getUserList() { + const that = this; + this.dialogCreate = false; + // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭� + this.$axios.get('sccg/admin/list').then(res => { + if (res.code === 200) { + res.data.records.forEach(item => { + item.createTime = helper(item.createTime); + item.status==1 ? item.status = true:item.status = false; + }) + that.tableData = res.data.records; + } + }) + } } } </script> @@ -134,6 +160,7 @@ margin-top: 20px; padding: 0 10px; padding-bottom: 50px; + .mainTitle { line-height: 60px; } diff --git a/src/views/systemSetting/baseSetting/user/updateUser/index.vue b/src/views/systemSetting/baseSetting/user/updateUser/index.vue new file mode 100644 index 0000000..72f9605 --- /dev/null +++ b/src/views/systemSetting/baseSetting/user/updateUser/index.vue @@ -0,0 +1,363 @@ +<template> + <div class="createUser"> + <header> + <div class="headerTitle">鏂板璐︽埛</div> + <div class="headerTip"> + <span>*</span> + <label>涓哄繀濉」</label> + </div> + </header> + <main> + <div class="mainTitle">鍩虹淇℃伅</div> + <div class="mainContent"> + <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules" + label-position="right"> + <!-- 鐢ㄦ埛鍚嶇О --> + <el-form-item class="optionItem" label="鐢ㄦ埛鍚嶇О:" prop="nickName"> + <el-input v-model="user.nick_name" placeholder="濉啓鐢ㄦ埛鍚嶇О"></el-input> + </el-form-item> + <!-- 鐢ㄦ埛瀵嗙爜 --> + <el-form-item class="optionItems" label="鐢ㄦ埛瀵嗙爜:" prop="password"> + <el-input v-model="user.password" type="password" placeholder="璇疯緭鍏ョ敤鎴峰瘑鐮�"></el-input> + </el-form-item> + <!-- 鎵�灞炵敤鎴峰鍚� --> + <!-- <el-form-item class="optionItem" label="鎵�灞炵敤鎴峰鍚�:" prop="true_name"> + <el-input v-model="user.true_name" placeholder="璇峰~鍐欑敤鎴峰鍚�"></el-input> + </el-form-item> --> + <!-- 鎬у埆 --> + <!-- <el-form-item class="optionItem" label="鎬у埆:" prop="gender"> + <el-radio-group v-model="user.gender"> + <el-radio :label="1">鐢�</el-radio> + <el-radio :label="2">濂�</el-radio> + </el-radio-group> + </el-form-item> --> + <!-- 鏄惁鍏氬憳 --> + <el-form-item class="optionItem" label="鏄惁鍏氬憳:" prop="isDy"> + <el-radio-group v-model="user.member"> + <el-radio :label="1">鏄�</el-radio> + <el-radio :label="0">鍚�</el-radio> + </el-radio-group> + </el-form-item> + <!-- 鎵�灞炴墜鏈哄彿鐮� --> + <el-form-item class="optionItem" label="鎵�灞炴墜鏈哄彿鐮�:" prop="mobile"> + <el-input v-model="user.phone" placeholder="璇峰~鍐欐墜鏈哄彿鐮�"></el-input> + </el-form-item> + <!-- 閭鍦板潃 --> + <el-form-item class="optionItem" label="閭鍦板潃:" prop="email"> + <el-input v-model="user.mail" placeholder="璇峰~鍐欓偖绠卞湴鍧�"></el-input> + </el-form-item> + <!-- 閫夋嫨瑙掕壊 --> + <!-- <el-form-item class="optionItem" label="閫夋嫨瑙掕壊:" prop="role"> + <el-select v-model="user.role" placeholder="璇烽�夋嫨鎵�灞炶鑹�"> + <el-option v-for="item in roleList" :key="item.name" :label="item.name" :value="item.value" + :disabled="item.disabled"> + </el-option> + </el-select> + </el-form-item> --> + <!-- 鐢ㄦ埛绫诲瀷 --> + <el-form-item class="optionItem" label="鐢ㄦ埛绫诲瀷:" prop="userType"> + <el-select v-model="user.type" placeholder="璇烽�夋嫨鐢ㄦ埛绫诲瀷"> + <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value" + :disabled="item.disabled"> + </el-option> + </el-select> + </el-form-item> + <!-- 搴ф満/鍒嗘満 --> + <el-form-item class="optionItem" label="搴ф満/鍒嗘満:" prop="zj"> + <div class="optionHandleSp"> + <el-input class="areaNumber" v-model="user.zj.areaNumber" placeholder="鐢佃瘽鍖哄彿"> + </el-input> + <el-input class="telNumber" v-model="user.zj.phoneNumber" placeholder="鐢佃瘽鍙风爜"> + </el-input> + <el-input class="moreNumber" v-model="user.zj.moreNumber" placeholder="鍒嗘満鍙风爜"> + </el-input> + </div> + </el-form-item> + <!-- 鎵�灞為儴闂� --> + <el-form-item class="optionItem" label="鎵�灞為儴闂�:" prop="departmentId"> + <el-select v-model="user.department" placeholder="璇烽�夋嫨鎵�灞為儴闂�"> + <el-option v-for="item in typeList" :key="item.name" :label="item.departName" :value="item.id"> + </el-option> + </el-select> + </el-form-item> + <!-- 褰撳墠鑱屽姟 --> + <el-form-item class="optionItem" label="褰撳墠鑱屽姟:" prop="jobTitle"> + <el-select v-model="user.work" placeholder="璇烽�夋嫨褰撳墠鑱屽姟"> + <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value" + :disabled="item.disabled"> + </el-option> + </el-select> + </el-form-item> + <!-- 濉啓鎵�灞瀖ac鍦板潃 --> + <!-- <el-form-item class="optionItem" label="濉啓鎵�灞瀖ac鍦板潃:" prop="mac"> + <el-input v-model="user.mac" placeholder="璇峰~鍐欐墍灞瀖ac鍦板潃"></el-input> + </el-form-item> --> + <!-- 濉啓鎵�灞瀒p鍦板潃 --> + <!-- <el-form-item class="optionItem" label="濉啓鎵�灞瀒p鍦板潃:" prop="ip"> + <el-input v-model="user.ip" placeholder="璇峰~鍐欐墍灞瀒p鍦板潃"></el-input> + </el-form-item> --> + <el-form-item class="optionBtn"> + <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">鎻愪氦</el-button> + <el-button class="btn reset">閲嶇疆</el-button> + </el-form-item> + </el-form> + + </div> + </main> + </div> +</template> +<script> +export default { + data() { + const validateNickname = (rule, value, callback) => { + if (!value) { + callback(new Error("璇峰~鍐欑敤鎴峰悕绉�")); + } + }; + const validatePass = (rule, value, callback) => { + if (!value) { + callback(new Error("璇峰~鍐欑櫥褰曞瘑鐮�")); + } 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("璇疯緭鍏ユ纭殑鐢ㄦ埛濮撳悕"); + } + } + }; + const validatePhone = (rule, value, callback) => { + if (!value) { + callback(new Error("璇峰~鍐欐墜鏈哄彿鐮�")); + } else { + const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/ + if(!rep.test(value)){ + callback("璇疯緭鍏ユ纭殑鎵嬫満鍙风爜"); + } + } + }; + const validateMail = (rule, value, callback) => { + if (value) { + const rep = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; + if(!rep.test(value)){ + callback(new Error("璇疯緭鍏ユ纭殑閭")) + } + } + }; + const validateRole = (rule, value, callback) => { + if (!value) { + callback(new Error("璇峰~鍐欑櫥褰曞瘑鐮�")); + } else { + callback(); + } + }; + const validateType = (rule, value, callback) => { + if (!value) { + callback(new Error("璇峰~鍐欑櫥褰曞瘑鐮�")); + } else { + callback(); + } + }; + const validateDepartment = (rule, value, callback) => { + if (!value) { + callback(new Error("璇峰~鍐欑櫥褰曞瘑鐮�")); + } else { + callback(); + } + }; + const validateWork = (rule, value, callback) => { + if (!value) { + callback(new Error("璇峰~鍐欑櫥褰曞瘑鐮�")); + } else { + callback(); + } + }; + const validateMac = (rule, value, callback) => { + if (!value) { + callback(new Error("璇峰~鍐欑櫥褰曞瘑鐮�")); + } else { + callback(); + } + }; + const validateIp = (rule, value, callback) => { + if (!value) { + callback(new Error("璇峰~鍐欑櫥褰曞瘑鐮�")); + } else { + callback(); + } + }; + return { + user: { + nickName: '', + password: '', + username: '', + // gender: 1, + isDy: 1, + mobile: '', + email: '', + // role: null, + userType: null, + zj: { + areaNumber: '', + phoneNumber: "", + moreNumber: "", + }, + departmentId: null, + jobTitle: null, + // mac: '', + // ip: '', + }, + createUserRules: { + nickName: [ + { required: true, trigger: "blur", validator: validateNickname }, + ], + password: [ + { required: true, trigger: "blur", validator: validatePass }, + ], + username: [ + { required: true, trigger: "blur", validator: validateTruename }, + ], + // gender: [ + // { required: true, trigger: "blur" }, + // ], + isDy: [ + { required: true, trigger: "blur" }, + ], + mobile: [ + { required: true, trigger: "blur", validator: validatePhone }, + ], + email: [ + { required: false, trigger: "blur", validator: validateMail }, + ], + // role: [ + // { required: true, trigger: "blur", validator: validateRole }, + // ], + userType: [ + { required: true, trigger: "blur", validator: validateType }, + ], + zj: [ + { required: false, trigger: "blur" }, + ], + departmentId: [ + { required: true, trigger: "blur", validator: validateDepartment }, + ], + jobTitle: [ + { required: true, trigger: "blur", validator: validateWork }, + ], + // mac: [ + // { required: false, trigger: "blur", validator: validateMac }, + // ], + // ip: [ + // { required: false, trigger: "blur", validator: validateIp }, + // ], + }, + roleList: [ + { name: '瑙掕壊1', value: 1 }, { name: '瑙掕壊2', value: 2 } + ], + typeList: [] + } + }, + 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; + }) + }, + methods: { + handleUser() { + const that = this; + console.log(this.user); + // this.$axios.post('sccg/admin/register',that.user).then(res=>{ + // console.log(res); + // }) + } + }, + props:[] +} +</script> +<style lang="scss" scpoed> +.createUser { + border-radius: 1px; + // min-width: 1024px; + // min-height: 1450px; + background-color: #fff; + + header { + display: flex; + justify-content: space-between; + height: 60px; + line-height: 60px; + padding: 0 20px; + .headerTitle { + font-weight: 600; + color: #666; + } + + .headerTip span { + color: #ff3b6c; + } + + .headerTip label { + color: #999999; + } + } + + main { + border-top: 1px solid #f0f2f5; + text-align: left; + padding: 0 55px; + .mainTitle { + // margin-left: 60px; + color: #666; + font-weight: 600; + line-height: 100px; + font-size: 14px; + } + + .mainContent { + display: flex; + justify-content: center; + .el-form-item__content { + width: 400px; + + .el-select { + width: 100%; + } + } + .optionHandleSp{ + display: flex; + .areaNumber,.moreNumber{ + flex: 1; + } + .telNumber{ + flex: 2; + } + } + .optionBtn{ + display: flex; + justify-content: center; + margin-top: 80px; + .btn{ + padding: 12px 50px; + } + } + + } + } +} +</style> \ No newline at end of file -- Gitblit v1.8.0