From 2bb0e066fdc522beb51dd13f6a72cd67bd5d6a58 Mon Sep 17 00:00:00 2001 From: “dzb” <2632970487@qq.com> Date: 星期日, 09 十月 2022 18:06:46 +0800 Subject: [PATCH] 修改bug,店铺管理新增、查询 --- src/views/systemSetting/baseSetting/role/updateUser/index.vue | 288 ++++++++++++++++++++++++++++----------------------------- 1 files changed, 141 insertions(+), 147 deletions(-) diff --git a/src/views/systemSetting/baseSetting/role/updateUser/index.vue b/src/views/systemSetting/baseSetting/role/updateUser/index.vue index 1231a29..295bcbe 100644 --- a/src/views/systemSetting/baseSetting/role/updateUser/index.vue +++ b/src/views/systemSetting/baseSetting/role/updateUser/index.vue @@ -1,35 +1,20 @@ <template> <div class="updateUser"> - <header> - <div class="headerTitle">{{updateFlag ? '淇敼瑙掕壊淇℃伅' :'鏌ョ湅瑙掕壊淇℃伅'}}</div> - </header> <main> <div class="mainContent"> - <el-form ref="user" label-width="140px" autoComplete="on" :model="role" :rules="createRoleRules" - label-position="right"> - <!-- 瑙掕壊鍚嶇О --> - <el-form-item class="optionItem" label="鐢ㄦ埛鍚嶇О:" prop="name"> - <el-input v-model="role.name" placeholder="璇峰~鍐欒鑹插悕绉�" :disabled="!updateFlag"></el-input> - </el-form-item> - <!-- 瑙掕壊绫诲瀷 --> - <el-form-item class="optionItems" label="瑙掕壊绫诲瀷:" prop="status"> - <el-select v-model="role.status" placeholder="璇烽�夋嫨鐢ㄦ埛绫诲瀷" :disabled="!updateFlag"> - <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="description"> - <el-input v-model="role.description" placeholder="璇疯緭鍏ユ弿杩板唴瀹�200瀛椾互鍐�" :disabled="!updateFlag"></el-input> - </el-form-item> - <el-form-item v-if="updateFlag"> - <div class="optionBtn"> - <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">纭</el-button> - </div> - </el-form-item> - </el-form> - + <div class="my-tree"> + <div class="my-tree__wrap"> + <el-tree ref="tree" :data="roleList" :props="defaultProps" show-checkbox @check="handleCheck" + :default-checked-keys="checkedIds" default-expand-all node-key="id"> + </el-tree> + </div> + <div class="my-tree__bottom"></div> + <div class="my-tree__right"></div> + </div> + <div class="selection"> + <el-button class="cancel" @click="resetRole">鍙栨秷</el-button> + <el-button class="save" @click="saveRole">淇濆瓨</el-button> + </div> </div> </main> </div> @@ -37,81 +22,92 @@ <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("璇疯緭鍏ユ纭殑鐢ㄦ埛濮撳悕"); - } - } - }; return { role: { name: '', - status: '', + sort: '', description: '', }, - createRoleRules: { - name: [ - { required: true, trigger: "blur", validator: validateNickname }, - ], - status: [ - { required: false, trigger: "blur", validator: validatePass }, - ], - description: [ - { required: false, trigger: "blur", validator: validateTruename }, - ], + roleList: [], + defaultProps: { + children: 'children', + label: 'title' }, - roleList: [ - { name: '瑙掕壊1', value: 1 }, { name: '瑙掕壊2', value: 2 } - ], - typeList: [] + treeLabel: '', + treeId: 23, + checkedIds: [], + resCheckedIds: [], } }, created() { const that = this; - this.userInfo.status ? this.userInfo.status = 1: this.userInfo.status = 0; - this.role = JSON.parse(JSON.stringify(that.userInfo)); - // 鑾峰彇瑙掕壊鍒楄〃 - // 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.getRoleMenus(this.userInfo.id); + this.getMenuList(); }, methods: { - handleUser() { - const { user } = this; - this.$axios.post('sccg/depart/status', { - id: user.departmentId, - status: user.status ? 1 : 0, - }).then(res => { - console.log(res); + // 鑾峰彇绯荤粺鑿滃崟 + getMenuList() { + this.$axios({ + method: 'get', + url: 'sccg/menu/treeList', }) + .then(res => { + this.roleList = res.data; + }) + }, + // 鏍戝舰鎺т欢澶嶉�夋鐐瑰嚮浜嬩欢 + handleCheck(data, checked) { + console.log(checked.checkedKeys); + this.checkedIds = checked.checkedKeys; + console.log(this.checkedIds); + }, + // 淇濆瓨role + saveRole() { + this.resCheckedIds = []; + const { userInfo } = this; + this.resCheckedIds = this.checkedIds; + this.$axios({ + method: 'post', + url: 'sccg/role/allocMenu?roleId=' + userInfo.id + '&menuIds=' + this.checkedIds, + }) + .then(res => { + if (res.code === 200) { + this.$message({ + type: 'success', + message: '淇敼瑙掕壊鏉冮檺鎴愬姛', + }) + this.getRoleMenus(userInfo.id); + this.$emit('changeDialog', { flag: false }); + this.getUserList(); + } else { + this.$message({ + type: 'warning', + message: res.message + }) + } + }) + // this.$emit('changeDialog',{dialogUpdate:false}); + }, + // 娑堥櫎role + resetRole() { + this.resCheckedIds = []; + this.$emit('changeDialog', { dialogUpdate: false }); + }, + // 鑾峰彇瑙掕壊鑿滃崟 + getRoleMenus(roleId) { + this.$axios({ + method: 'get', + url: `sccg/role/listMenu/${roleId}` + }) + .then(res => { + this.checkedIds = []; + res.data.forEach(item => { + this.checkedIds.push(item.id); + }) + }) } }, - props: ['userInfo', 'updateFlag'] + props: ['userInfo', 'updateFlag', 'getUserList', 'changeDialog'] } </script> <style lang="scss" scoped> @@ -119,77 +115,75 @@ border-radius: 1px; background-color: #09152f; - header { - display: flex; - justify-content: center; - 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; + padding: 50px 55px; background-color: #09152f; - padding-bottom: 50px; + .mainContent { - display: flex; - justify-content: center; - margin-top: 50px ; - .el-form-item__content { - width: 400px; + .my-tree { + height: 200px; + overflow: hidden; + background-color: #17324c; + position: relative; + border-radius: 4px; - .el-select { + .my-tree__wrap { + overflow: scroll; + height: 200px; + } + + .my-tree__bottom { + position: absolute; + left: 0px; + bottom: 0px; + background-color: #09152f; width: 100%; + height: 20px; + border-bottom-left-radius: 4px; + } + + .my-tree__right { + position: absolute; + right: 0px; + top: 0px; + background-color: #09152f; + width: 20px; + height: 100%; } } - - .optionHandleSp { - display: flex; - - .areaNumber, - .moreNumber { - flex: 1; - } - - .telNumber { - flex: 2; - } - } - - .optionBtn { - display: flex; - margin-top: 20px; - - .btn { - padding: 12px 50px; - } - } - } + } + + &::v-deep .el-textarea__inner { + background-color: #09152f; + border: 1px solid #17324c; + } + + ::v-deep .el-input__inner { + background-color: #09152f; + border: 1px solid #17324c; } } -.updateUser::v-deep .el-form-item__label { - color: #4b9bb7; -} +.selection { + margin-top: 10px; + display: flex; + justify-content: space-between; -.updateUser::v-deep .el-input__inner { - background-color: #09152f; - border: 1px solid #17324c; + .el-button { + padding: 10px 20px; + border-radius: 4px; + } + + .save { + background-color: #409eff; + color: #fff; + } + + .cancel { + background-color: #09152f; + color: #4b9bb7; + } } </style> \ No newline at end of file -- Gitblit v1.8.0