TAB切换组件

applications/dee-mes/src/privateComponents/components/UnqualifiedSearch/config.js

@@ -9,7 +9,7 @@ export default {
           title: '搜索参数配置',
           width: 1,
           component: {
-            defaultValue: '{"layKey":"JobResponseInExpermentQuery","typeName":"JobResponseInExperment"}',
+            defaultValue: '{"typeName":"JobResponseInExperment","layKey":"JobResponseInExpermentQuery"}',
             name: 'el-input',
             type: 'textarea',
             rows: '4'
@@ -20,7 +20,7 @@ export default {
           title: 'TAB参数配置',
           width: 1,
           component: {
-            defaultValue: '[{"id":1,"name":"不合格品","typeName":"JobResponseInTest","layKey":"unqualified_Table"},{"id":2,"name":"试验","typeName":"JobResponseInExperment","layKey":"unqualified_Table"}]',
+            defaultValue: '[{"name":"不合格品","typeName":"JobResponseInTest","layKey":"unqualified_Table"},{"name":"试验","typeName":"JobResponseInExperment","layKey":"unqualified_Table"}]',
             name: 'el-input',
             type: 'textarea',
             rows: '4'

applications/dee-mes/src/privateComponents/components/UnqualifiedSearch/index.vue

 /**
-* @Description:  双TAB切换
+* @Description:  TAB切换
 * @author xioln
 * @date 2023-10-25
 * @FilePath: applications/dee-mes/src/privateComponents/components/UnqualifiedSearch/index.vue
 */
 <template>
   <div class="unqualifie-search">
-    <dee-as-com
-      ref="deeSearch"
-      :lay-config="serchOptions"
-      @searchEvent="searchEvent"
-    />
-    <dee-tab
-      ref="deetab"
-      class="dee-tab"
-      :tabs="tabOptions"
-      @tabClick="tabClick"
-    >
-      <div v-for="(item, index) in tabOptions" :key="index" :slot="item.id">
-        <dee-as-com
-          :ref="item.id"
-          :lay-config="{
-            typeName: item.typeName,
-            layKey: item.layKey
-          }"
-        />
-      </div>
-    </dee-tab>
+    <dee-as-com ref="deeSearch" :lay-config="serchOptions" @searchEvent="searchEvent" />
+    <el-tabs ref="tabRef" v-model="activeTab" class="dee-tab" type="card" @tab-click="tabClick">
+      <el-tab-pane v-for="(tab, index) in tabOptions" :key="index" :label="tab.name" :name="index.toString()">
+        <dee-as-com :ref="'tab' + index" :lay-config="getLayConfig(tab)" />
+      </el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 <script>
@@ -49,7 +34,8 @@ export default {
       serchOptions: {},
       tabOptions: [],
       searchItems: [],
-      currTab: null
+      activeTab: '0',
+      tableRef: null
     }
   },
   computed: {},
@@ -72,20 +58,48 @@ export default {
   created() {
     // 初始化数据
   },
+  mounted() {
+    // 初始化数据
+  },
   methods: {
+    getLayConfig(item) {
+      // 根据 item 的属性创建 lay-config 对象
+      return {
+        typeName: item.typeName,
+        layKey: item.layKey
+      }
+    },
     searchEvent(v) {
       this.searchItems = v.items
       this.searchFun()
     },
     tabClick(val) {
-      this.currTab = val.name
+      this.tableRef = val.$children[0]
       this.searchFun()
     },
     searchFun() {
-      this.$refs[this.currTab][0].$refs.asCom.getData(this.searchItems)
+      if (this.tableRef) {
+        this.tableRef.$refs.asCom.getData(this.searchItems)
+      } else {
+        this.$refs.tab0[0].$refs.asCom.getData(this.searchItems)
+      }
     }
   }
 }
 </script>
 <style lang='scss'>
+.unqualifie-search {
+  height: 100%;
+  .dee-tab {
+    height: 100%;
+  }
+
+  .is-active {
+    background-color: #f2f2f2;
+  }
+
+  .dee-table {
+    height: 60vh !important;
+  }
+}
 </style>