perf(仪表板): 优化分享弹框交互

core/core-frontend/src/views/share/share/ShareHandler.vue

@@ -462,6 +462,7 @@ const beforeClose = async done => {
   }
   const uuidValid = await validateUuid()
   if (uuidValid) {
+    linkCustom.value = false
     showTicket.value = false
     done()
   }

core/core-frontend/src/views/share/share/ShareTicket.vue

@@ -153,7 +153,7 @@ const props = defineProps({
 })
 const ticketEditor = ref()
 const { ticketRequire } = toRefs(props)
-
+const ticketLimit = ref(0)
 const state = reactive({
   tableData: [],
   paginationConfig: {
@@ -178,9 +178,9 @@ const requireTicketChange = val => {
     emits('requireChange', val)
   })
 }
-const createLimit = (count?: number) => {
-  const realCount = count ? count : state.tableData.length || 0
-  if (realCount > 4) {
+const createLimit = () => {
+  const realCount = state.paginationConfig.total
+  if (ticketLimit.value && realCount >= ticketLimit.value) {
     ElMessageBox.confirm(t('chart.tips'), {
       confirmButtonType: 'primary',
       type: 'warning',
@@ -191,9 +191,9 @@ const createLimit = (count?: number) => {
       showCancelButton: false,
       tip: t('work_branch.max_ticket_count')
     })
-    return false
+    return true
   }
-  return true
+  return false
 }
 const getArgCount = row => {
   const args = row.args
@@ -209,6 +209,9 @@ const getArgCount = row => {
   }
 }
 const addRow = () => {
+  if (createLimit()) {
+    return
+  }
   ticketEditor.value.edit(null, formatLinkAddr())
 }
 const formatLinkAddr = () => {
@@ -280,7 +283,16 @@ const sizeChange = size => {
   state.paginationConfig.pageSize = size
   loadTicketData()
 }
+
+const getLimit = () => {
+  const url = '/ticket/limit'
+  request.get({ url }).then(res => {
+    const limit = res.data
+    ticketLimit.value = limit
+  })
+}
 onMounted(() => {
+  getLimit()
   loadTicketData()
 })
 </script>

core/core-frontend/src/views/share/share/ShareVisualHead.vue

@@ -45,7 +45,11 @@
           <template #suffix>
             <div class="share-input-suffix">
               <span class="suffix-split" />
-              <div class="input-suffix-btn edit-uuid-icon" v-if="!linkCustom" @click="editUuid">
+              <div
+                class="input-suffix-btn edit-uuid-icon"
+                v-if="!linkCustom"
+                @click.stop="editUuid"
+              >
                 <el-tooltip
                   class="item"
                   effect="dark"
@@ -57,7 +61,7 @@
                   </Icon>
                 </el-tooltip>
               </div>
-              <div class="input-suffix-btn" v-if="linkCustom" @click="resetUuid">
+              <div class="input-suffix-btn" v-if="linkCustom" @click.stop="resetUuid">
                 <el-tooltip
                   class="item"
                   effect="dark"
@@ -67,7 +71,7 @@
                   <Icon name="icon_close_outlined"><icon_close_outlined class="svg-icon" /></Icon>
                 </el-tooltip>
               </div>
-              <div class="input-suffix-btn done" v-if="linkCustom" @click="finishEditUuid">
+              <div class="input-suffix-btn done" v-if="linkCustom" @click.stop="finishEditUuid">
                 <el-tooltip class="item" effect="dark" :content="t('commons.save')" placement="top">
                   <Icon name="icon_done_outlined"><icon_done_outlined class="svg-icon" /></Icon>
                 </el-tooltip>
@@ -185,7 +189,7 @@
     </div>
   </el-popover>
   <custom-link-pwd ref="customPwdRef" @pwd-change="customPwdChange" />
-  <ticket-dialog ref="ticketDialogRef">
+  <ticket-dialog v-if="showTicket" ref="ticketDialogRef">
     <div v-if="!shareDisable && shareEnable && showTicket">
       <share-ticket
         :uuid="state.detailInfo.uuid"
@@ -271,6 +275,7 @@ const hideShare = async () => {
   }
   const uuidValid = await validateUuid()
   if (uuidValid) {
+    linkCustom.value = false
     popoverVisible.value = false
     return
   }
@@ -635,11 +640,15 @@ const resetUuid = event => {
 }
 const openTicket = () => {
   showTicket.value = true
-  ticketDialogRef.value.open()
+  nextTick(() => {
+    ticketDialogRef.value.open()
+  })
 }
 const closeTicket = () => {
   ticketDialogRef.value.close()
-  showTicket.value = false
+  nextTick(() => {
+    showTicket.value = false
+  })
 }
 const updateRequireTicket = val => {
   state.detailInfo.ticketRequire = val