11<script lang="ts" setup>
22import delIcon from ' @/assets/svg/icon_delete.svg'
3+ import icon_more_outlined from ' @/assets/svg/icon_more_outlined.svg'
4+ import icon_moments_categories_outlined from ' @/assets/svg/icon_moments-categories_outlined.svg'
35import icon_admin_outlined from ' @/assets/svg/icon_admin_outlined.svg'
6+ import icon_describe_outlined from ' @/assets/svg/icon_describe_outlined.svg'
47import edit from ' @/assets/svg/icon_edit_outlined.svg'
58import { get_supplier } from ' @/entity/supplier'
6- import { computed , ref } from ' vue'
9+ import { computed , ref , unref } from ' vue'
710const props = withDefaults (
811 defineProps <{
912 name: string
@@ -12,6 +15,7 @@ const props = withDefaults(
1215 id? : string
1316 isDefault? : boolean
1417 supplier? : number
18+ num? : number
1519 }>(),
1620 {
1721 name: ' -' ,
@@ -20,6 +24,7 @@ const props = withDefaults(
2024 id: ' -' ,
2125 isDefault: false ,
2226 supplier: 0 ,
27+ num: 0 ,
2328 }
2429)
2530const errorMsg = ref (' ' )
@@ -38,7 +43,7 @@ const showErrorMask = (msg?: string) => {
3843 errorMsg .value = ' '
3944 }, 3000 )
4045}
41- const emits = defineEmits ([' edit' , ' del' , ' default' ])
46+ const emits = defineEmits ([' edit' , ' del' , ' default' , ' authorizedSpace ' , ' editworkspaceList ' ])
4247
4348const handleDefault = () => {
4449 emits (' default' )
@@ -52,6 +57,18 @@ const handleEdit = () => {
5257 emits (' edit' )
5358}
5459
60+ const handleEditWorkspaceList = () => {
61+ emits (' editworkspaceList' )
62+ }
63+ const handleAuthorizedSpace = () => {
64+ emits (' authorizedSpace' )
65+ }
66+ const buttonRef = ref ()
67+ const popoverRef = ref ()
68+ const onClickOutside = () => {
69+ unref (popoverRef ).popperRef ?.delayHide ?.()
70+ }
71+
5572defineExpose ({ showErrorMask })
5673 </script >
5774
@@ -77,6 +94,27 @@ defineExpose({ showErrorMask })
7794 <span class =" type" >{{ $t('model.basic_model') }}</span >
7895 <span class =" value" > {{ baseModel }}</span >
7996 </div >
97+ <div v-if =" false" class =" type-value" >
98+ <span class =" type" >{{ $t('authorized_space.authorized_space') }}</span >
99+ <span class =" value" style =" display : flex ; align-items : center " >
100+ {{ $t('permission.2', { msg: num }) }}
101+ <el-tooltip
102+ effect =" dark"
103+ :content =" $t('authorized_space.authorized_space_list')"
104+ placement =" top"
105+ offset =" 12"
106+ >
107+ <el-icon
108+ class =" hover-icon_with_bg"
109+ style =" cursor : pointer ; margin-left : 8px "
110+ size =" 16"
111+ @click =" handleEditWorkspaceList"
112+ >
113+ <icon _describe_outlined ></icon _describe_outlined >
114+ </el-icon >
115+ </el-tooltip >
116+ </span >
117+ </div >
80118 <div class =" methods" >
81119 <el-tooltip
82120 v-if =" isDefault"
@@ -104,12 +142,41 @@ defineExpose({ showErrorMask })
104142 </el-icon >
105143 {{ $t('dashboard.edit') }}
106144 </el-button >
107- <el-button secondary @click =" handleDel" >
108- <el-icon style =" margin-right : 4px " size =" 16" >
109- <delIcon ></delIcon >
110- </el-icon >
111- {{ $t('dashboard.delete') }}
112- </el-button >
145+
146+ <el-icon
147+ ref =" buttonRef"
148+ v-click-outside =" onClickOutside"
149+ class =" more"
150+ size =" 16"
151+ style =" color : #646a73 "
152+ @click.stop
153+ >
154+ <icon _more_outlined ></icon _more_outlined >
155+ </el-icon >
156+ <el-popover
157+ ref =" popoverRef"
158+ :virtual-ref =" buttonRef"
159+ virtual-triggering
160+ trigger =" click"
161+ :teleported =" false"
162+ popper-class =" popover-card_workspace"
163+ placement =" bottom-start"
164+ >
165+ <div class =" content" >
166+ <div class =" item" @click.stop =" handleAuthorizedSpace" >
167+ <el-icon size =" 16" >
168+ <icon _moments_categories_outlined ></icon _moments_categories_outlined >
169+ </el-icon >
170+ {{ $t('authorized_space.authorized_space') }}
171+ </div >
172+ <div class =" item" @click.stop =" handleDel" >
173+ <el-icon size =" 16" >
174+ <delIcon ></delIcon >
175+ </el-icon >
176+ {{ $t('dashboard.delete') }}
177+ </div >
178+ </div >
179+ </el-popover >
113180 </div >
114181 </div >
115182</template >
@@ -167,14 +234,45 @@ defineExpose({ showErrorMask })
167234 .methods {
168235 margin-top : 16px ;
169236 align-items : center ;
170- display : none ;
237+ display : flex ;
171238
172239 .divide {
173240 height : 14px ;
174241 width : 1px ;
175242 background-color : #1f232926 ;
176243 margin : 0 12px ;
177244 }
245+ .more {
246+ position : relative ;
247+ cursor : pointer ;
248+ margin-left : 12px ;
249+ width : 32px ;
250+ height : 32px ;
251+
252+ svg {
253+ position : relative ;
254+ z-index : 10 ;
255+ }
256+
257+ & ::after {
258+ content : ' ' ;
259+ position : absolute ;
260+ border-radius : 6px ;
261+ width : 30px ;
262+ height : 30px ;
263+ transform : translate (-50% , -50% );
264+ top : 50% ;
265+ left : 50% ;
266+ background : #fff ;
267+ border : 1px solid #d9dcdf ;
268+ }
269+
270+ & :hover {
271+ & ::after {
272+ background-color : #f5f6f7 ;
273+ }
274+ }
275+ }
178276 }
179277
180278 & :hover {
@@ -208,3 +306,61 @@ defineExpose({ showErrorMask })
208306 }
209307}
210308 </style >
309+
310+ <style lang="less">
311+ .popover-card_workspace.popover-card_workspace.popover-card_workspace {
312+ box-shadow : 0px 4px 8px 0px #1f23291a ;
313+ border-radius : 6px ;
314+ border : 1px solid #dee0e3 ;
315+ width : fit-content !important ;
316+ min-width : 120px !important ;
317+ padding : 0 ;
318+
319+ .content {
320+ position : relative ;
321+
322+ & ::after {
323+ position : absolute ;
324+ content : ' ' ;
325+ top : 39px !important ;
326+ left : 0 ;
327+ width : 100% ;
328+ height : 1px ;
329+ background : #dee0e3 ;
330+ }
331+
332+ .item {
333+ position : relative ;
334+ padding : 0 12px ;
335+ height : 40px ;
336+ display : flex ;
337+ align-items : center ;
338+ cursor : pointer ;
339+
340+ .ed-icon {
341+ margin-right : 8px ;
342+ color : #646a73 ;
343+ }
344+
345+ & :hover {
346+ & ::after {
347+ display : block ;
348+ }
349+ }
350+
351+ & ::after {
352+ content : ' ' ;
353+ width : calc (100% - 8px );
354+ height : 32px ;
355+ border-radius : 6px ;
356+ position : absolute ;
357+ top : 50% ;
358+ left : 50% ;
359+ transform : translate (-50% , -50% );
360+ background : #1f23291a ;
361+ display : none ;
362+ }
363+ }
364+ }
365+ }
366+ </style >
0 commit comments