feat: 新增 导航tag滚动展示

调试滚动与翻页样式

client/src/service/demand.ts

@@ -14,7 +14,7 @@ export const getRecruitList = (params: RecruitListDTO): Promise<PageRecruitPage>
  * @param data
  */
 export const updateRecruit = (data: Recruit): Promise<string> => {
-  return request.post({ url: '/recruit/update', data }, '/business')
+  return request.post({ url: '/recruit/updateADM', data }, '/business')
 }
 
 /**

client/src/views/OaSystem/oaLayout/tagList.vue

@@ -1,7 +1,16 @@
 <template>
   <div class="_tagList">
     <div class="tag-view">
+      <el-icon
+        class="arrow-btn"
+        v-show="showListContainerArrow"
+        :size="20"
+        @click="handleTagListScroll('left')"
+      >
+        <DArrowLeft />
+      </el-icon>
       <draggable
+        ref="tagListRef"
         class="tags-draggable-list"
         v-model="visitedViews"
         item-key="fullPath"
@@ -13,6 +22,7 @@
         <template #item="{ element: item, index }">
           <ContextMenu
             :ref="itemRefs.set"
+            :id="`router-tag-${item.fullPath}`"
             :schema="[
               {
                 icon: 'ep:refresh',
@@ -85,6 +95,7 @@
                 <div class="pBox">
                   <el-tooltip
                     effect="dark"
+                    :disabled="(item?.query?.name ?? '') === ''"
                     :content="`${item.meta.title}
                     ${item.meta.title === '' ? item?.query?.title ?? '' : ''}
                     ${(item?.query?.name ?? '') !== '' ? `（ ${item?.query?.name} ）` : ''}`"
@@ -106,6 +117,14 @@
           </ContextMenu>
         </template>
       </draggable>
+      <el-icon
+        class="arrow-btn"
+        v-show="showListContainerArrow"
+        :size="20"
+        @click="handleTagListScroll('right')"
+      >
+        <DArrowRight />
+      </el-icon>
       <div v-if="(visitedViews?.length ?? 0) > 1" class="all-tags-close" @click="allTagsClose">
         关闭全部
       </div>
@@ -139,6 +158,8 @@ const tagsViewStore = useTagsViewStore()
 const affixTagArr = ref<RouteLocationNormalizedLoaded[]>([])
 // 所有右键菜单组件的元素
 const itemRefs = useTemplateRefsList<ComponentRef<typeof ContextMenu & ContextMenuExpose>>()
+const tagListRef = ref()
+const showListContainerArrow = ref(false)
 
 const visitedViews = computed({
   get: () => tagsViewStore.visitedViews,
@@ -155,6 +176,17 @@ const initTags = () => {
   }
 }
 
+const handleTagListScroll = (type: 'left' | 'right'): void => {
+  switch (type) {
+    case 'left':
+      tagListRef.value.$el.scrollTo(tagListRef.value.$el.scrollLeft - 450, 0)
+      break
+    case 'right':
+      tagListRef.value.$el.scrollTo(tagListRef.value.$el.scrollLeft + 450, 0)
+      break
+  }
+}
+
 // 右键菜单装填改变的时候
 const visibleChange = (visible: boolean, tagItem: RouteLocationNormalizedLoaded) => {
   if (visible) {
@@ -200,6 +232,14 @@ const addTags = () => {
     selectedTag.value = unref(currentRoute)
     tagsViewStore.addView(unref(currentRoute))
   }
+  nextTick(() => {
+    // 当前选择路由滚入视野
+    const targetEl = document.getElementById(`router-tag-${unref(currentRoute).fullPath}`)
+    targetEl?.scrollIntoView()
+    //  计算内容宽度是否超出
+    showListContainerArrow.value =
+      tagListRef.value.$el.scrollWidth > tagListRef.value.$el.clientWidth
+  })
   return false
 }
 // 关闭选中的tag
@@ -278,14 +318,26 @@ onMounted(() => {
     height: 100%;
     padding-right: 10px;
 
+    .arrow-btn {
+      cursor: pointer;
+    }
+
     .tags-draggable-list {
+      overflow-x: auto;
       width: calc(100% - 64px);
       height: 100%;
       display: flex;
-      align-items: center;
+      padding-top: 6px;
+
+      &::-webkit-scrollbar-thumb {
+        background-color: transparent;
+      }
+
+      &::-webkit-scrollbar-thumb:hover {
+        background-color: rgba(0, 0, 0, 0.2);
+      }
 
       .tag-body {
-        min-width: 60px;
         margin-right: 12px;
 
         &:hover {
@@ -373,6 +425,7 @@ onMounted(() => {
     }
 
     .all-tags-close {
+      margin-left: 8px;
       flex-shrink: 0;
       font-size: 17px;
       font-weight: 400;

client/src/views/OaSystem/personnelManagement/zpxqspPage/index.vue

@@ -186,7 +186,7 @@ const { mutate: updateRow } = useMutation(updateRecruit, {
   }
 })
 
-//待编辑数据
+//待编辑数据xc
 let editRowData = ref<Recruit>({ recruitNum: 0 })
 const handleEditRow = (row: Recruit) => {
   editRowData.value = { ...row }