自定义添加

src/components/Query/clickQuery/MultiLevelQuery.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-tabs class="multi_level_query_table" v-model="activeName" @tab-click="handleClick"
+    <el-tabs class="multi_level_query_table" v-model="activeName" @tab-click="handleClick" @tab-remove="removeTab"
         v-if="store.state.query_pick_last_pane">
         <el-tab-pane :label="store.state.query_pick_last_pane.name" name="second">
             <div class="list_vector_multi" v-for="(item_last, index) in store.state.query_pick_last_pane.value" :key="index"
@@ -9,7 +9,8 @@
             </div>
         </el-tab-pane>
 
-        <el-tab-pane :label="item.name" :name="item.name" v-for="(item, index) in store.state.query_pick_pane" :key="index">
+        <el-tab-pane :closable="item.close" :label="item.name" :name="item.name"
+            v-for="(item, index) in store.state.query_pick_pane" :key="index">
             <pie class="echart" :class="item.name == '权属' ? 'echart1' : ''" unit="亩"
                 @echartClick="(name) => echartClick(name, item.value)" :ref="`echartRef`"></pie>
             <div>{{ eclickname }}</div>
@@ -31,6 +32,7 @@
             </el-collapse>
 
         </el-tab-pane>
+        <el-tab-pane label="自定义" name="自定义">自定义</el-tab-pane>
     </el-tabs>
 </template>
 
@@ -67,6 +69,24 @@ export default {
     watch: {},
     //方法集合
     methods: {
+        removeTab(targetName) {
+            let tabs = store.state.query_pick_pane;
+            let activeName = this.activeName;
+            if (activeName === targetName) {
+                tabs.forEach((tab, index) => {
+                    if (tab.name === targetName) {
+                        let nextTab = tabs[index + 1] || tabs[index - 1];
+                        if (nextTab) {
+                            activeName = nextTab.name;
+                        }
+                    }
+                });
+            }
+
+            this.activeName = activeName;
+            store.state.query_pick_pane = tabs.filter(tab => tab.name !== targetName);
+        },
+
         compute(mj) {
             return mj ? (mj * 0.0015).toFixed(2) : 0;
         },
@@ -215,7 +235,6 @@ export default {
                     },
 
                 })
-                console.log('longitude, latitude: ', longitude, latitude);
 
                 const geojsonPoint = {
                     "type": "Point",
@@ -223,22 +242,22 @@ export default {
                 };
 
                 const wkt = wellknown.stringify(geojsonPoint);
-                let id = store.state.vectorlayerlist[store.state.vectorlayerlist.length - 1].id
-                console.log('store.state.vectorlayerlist[store.state.vectorlayerlist.length - 1]: ',);
+                // let id = store.state.vectorlayerlist[store.state.vectorlayerlist.length - 1].id
                 let obj = {
                     // "wkt": 'POINT (109.51207847188947 18.311530254307392)', //单面
-                    // "wkt": 'POINT (109.50728022974468 18.318266593715794)', //多面
-                    "wkt": wkt,
+                    "wkt": 'POINT (109.50728022974468 18.318266593715794)', //多面
+                    // "wkt": wkt,
 
-                    // "id": 'dd699f839bc04969ae2dc2e1964d0ad1',
-                    "id": id,
+                    "id": 'dd699f839bc04969ae2dc2e1964d0ad1',
+                    // "id": id,
 
                 }
                 GetTableData(obj).then(res => {
                     if (res.data.data != undefined) {
                         store.state.query_pick_last_pane = {
                             name: res.data.dataname,
-                            value: res.data.data[0]
+                            value: res.data.data[0],
+                            close: 'closable'
                         };
                     }
                     if (res.data.child != undefined) {
@@ -250,7 +269,9 @@ export default {
                                 let edata = []
                                 store.state.query_pick_pane.push({
                                     name: element.dataname,
-                                    value: []// element.data
+                                    value: [],// element.data
+                                    close: 'closable'
+
                                 });
 
                                 element.data.forEach(e => {
@@ -571,6 +592,8 @@ export default {
     position: absolute;
     top: 7rem;
     width: 19rem;
+
+
 }
 
 /* 去掉tabs标签栏下的下划线 */