更新自定义指标组件

src/components/dialog/customIndicatorDialog.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { BaseFieldItem, TableFields } from '@/types/Tables/table'
 
-import { ref, reactive } from 'vue'
+import { ref, reactive, watch } from 'vue'
 import { useTable } from '@/hooks/useTable'
 
 const { isFixedField } = useTable()
@@ -31,7 +31,15 @@ const customIndicatorVisible = ref<boolean>(false)
 const indicatorSearch = ref<string>('')
 
 // 自定义指标左侧导航选中值
-const indicatorNavActive = ref<string>(props.indicatorFields[0]?.name)
+const indicatorNavActive = ref<string>()
+
+const watchIndicatorFields = watch(
+  () => props.indicatorFields[0]?.name,
+  (newName: string) => {
+    indicatorNavActive.value = newName
+  },
+  { deep: true },
+)
 
 // 拖拽的容器
 const dragContentRef = ref<HTMLElement>()
@@ -41,7 +49,10 @@ const dragingRef = ref<HTMLElement>()
 
 const indicatorOpen = () => {}
 
-const indicatorClose = () => {}
+const indicatorClose = () => {
+  // 重置到第一个锚点
+  indicatorNavActive.value = props.indicatorFields[0]?.name
+}
 
 /**
  * @description: 初始化一下被排序过的表格字段信息，这里要注意深拷贝
@@ -209,6 +220,22 @@ const applyCustomIndicator = () => {
   emits('updateFields', newTableFieldsInfo)
 }
 
+/**
+ * @description: 取消选择
+ * @param {*} name 字段名
+ * @return {*}
+ */
+const cancelSelect = (name: string) => {
+  for (let i = 0; i < props.indicatorFields.length; i++) {
+    let children = props.indicatorFields[i].children
+    let result = children.find(item => item.name === name)
+    if (result) {
+      result.state = false
+      break
+    }
+  }
+}
+
 initSortedTableFieldsInfo()
 
 defineExpose({ showCustomIndicator })
@@ -293,6 +320,9 @@ defineExpose({ showCustomIndicator })
               :name="item.name"
             >
               {{ item.label }}
+              <el-icon @click="cancelSelect(item.name)" class="closeBtn"
+                ><Close
+              /></el-icon>
             </div>
           </div>
         </div>
@@ -384,7 +414,6 @@ defineExpose({ showCustomIndicator })
   padding: 10px 0;
   overflow: auto;
   background-color: #f8f8f9;
-  border-right: 1px solid #eaebec;
 }
 
 .dragHeader,
@@ -421,6 +450,20 @@ defineExpose({ showCustomIndicator })
   transition: 0.1s all;
 }
 
+.dragBlock:hover {
+  .closeBtn {
+    display: block;
+  }
+}
+
+.closeBtn {
+  display: none;
+  cursor: pointer;
+  position: absolute;
+  top: 13px;
+  right: 8px;
+}
+
 .dragBlock:not(.notAllow):hover {
   background-color: #e7e7e7;
 }

src/components/navigation/Menu.vue

@@ -30,7 +30,6 @@ const initDefaultActive = () => {
   if (!(attrs.router || props.defaultActive))
     throw new Error('defaultActive or router is required')
   if (attrs.router) {
-    console.log('router')
     setRouterDefaultActive(defaultActive, props.menuList)
   } else defaultActive.value = props.defaultActive
 }

src/directive/scrollbar.ts

@@ -1,15 +0,0 @@
-import type { Directive, DirectiveBinding } from 'vue'
-
-const scrollbar: Directive = {
-  mounted(el: HTMLElement, binding: DirectiveBinding) {
-    if (binding.value) {
-      const bar = el?.querySelector('.el-scrollbar__bar')
-      if (bar && el) {
-        bar?.classList?.add('v-scroll__el-scrollbar__bar')
-        el?.appendChild(bar)
-      }
-    }
-  },
-}
-
-export default scrollbar

src/hooks/useTable.ts

@@ -7,7 +7,7 @@ export function useTable() {
   ): Promise<Array<TableData>> => {
     try {
       const res = await axiosInstance.get(url, config)
-      console.log(res)
+
       if (res.status !== 0) throw new Error('请求失败')
       return res.data as TableData[]
     } catch {