From bd09253eafc47831ea4ea7721d0dd4132a50c55f Mon Sep 17 00:00:00 2001 From: leiqiaochu Date: Fri, 22 Sep 2023 17:48:02 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9D=E5=A7=8B=E5=8C=96=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E6=94=B9=E9=80=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/init-home/Role/index.vue | 64 +++++++++++++++++++++++++----- 1 file changed, 54 insertions(+), 10 deletions(-) diff --git a/src/views/init-home/Role/index.vue b/src/views/init-home/Role/index.vue index 4fb5cf13..e3ef312b 100644 --- a/src/views/init-home/Role/index.vue +++ b/src/views/init-home/Role/index.vue @@ -4,13 +4,15 @@
平台角色内置分组
- {{ item.name }} +
+ {{ item.name }} +
{{ item.selected ? '取消选中' : '选中' }} - 编辑 + 编辑
- + 自定义分组 + + 自定义分组
@@ -69,7 +71,7 @@ - + { /** * 获取分组数据 */ -const group = ref([{ +const group = ref([{ name:'默认', show:false, - selected:false + selected:true },{ name:'岗位', show:false, @@ -125,6 +127,8 @@ const showAdd = ref(false) const formData = ref({ name:'' }) + +const formRef = ref() /** * 根据菜单找角色 */ @@ -211,7 +215,9 @@ const addRoleData = async () => { }; const showButton = (item:any) =>{ - item.show = true + if(item.name != '默认'){ + item.show = true + } } const hiddenButton = (item:any)=>{ item.show = false @@ -220,11 +226,31 @@ const hiddenButton = (item:any)=>{ const selectGroup = (item:any)=>{ item.selected = !item.selected } - -const addGroup = ()=>{ - console.log(showAdd.value) +/** + * 新增分组 + */ +const showAddGroup = ()=>{ + formData.value.name = '' showAdd.value = true } +/** + * 分组编辑 + */ +const showEditGroup = (item:any) =>{ + formData.value.name = item.name + showAdd.value = true +} +const addGroup = () =>{ + formRef.value?.validate().then(()=>{ + group.value.push({ + name:formData.value.name, + selected:true, + show:false, + closeIcon:true + }) + showAdd.value = false + }) +} defineExpose({ submitRole: addRoleData, }); @@ -244,6 +270,24 @@ defineExpose({ .button{ display: block; } + .group_name{ + border: .2px solid rgb(217, 217, 217); + text-align: center; + height: 32px; + line-height: 32px; + border-radius: 12%; + padding: 0 10px; + position: relative; + .closeIcon{ + font-size: 12px; + position: absolute; + top: 4px; + right: 4px; + } + } + .group_selected{ + background-color: rgb(190, 232, 251); + } } } }