init

src/views/document/TabsCardDocument.vue

@@ -0,0 +1,90 @@
+<template>
+  <el-tabs v-model="activeName" type="border-card" class="demo-tabs" @tab-click="handleClick">
+    <template v-for="item in tabsPaneList" :key="item.name">
+      <el-tab-pane :label="item.label" :name="item.name">
+        <LowTable
+          :ref="(el) => (tableRef[item.name] = el)"
+          :tableId="item.formId"
+          :calcHeight="item.calcHeight || undefined"
+          :enhanceData="item.enhanceData"
+          :fixed-search="item.fixedSearch || {}"
+        ></LowTable>
+      </el-tab-pane>
+    </template>
+  </el-tabs>
+</template>
+
+<script setup lang="ts">
+// 引入依赖低代码的table代码，这样就可以动态引入表格
+import {LowTable} from "@/components/LowDesign";
+
+// 定义该组件的选项
+defineOptions({name: 'TabsCardDocument'})
+
+const activeName = ref('institution')
+const tableRef = ref({})
+
+const tabsPaneList = ref([
+  {
+    label: '制度',
+    name: 'institution',
+    formId: '1966386366515343361',
+    calcHeight: 200,
+    enhanceData: {hideHeader: 'disabled'},
+    fixedSearch: {file_main_type: 0}
+  },
+  {
+    label: '预案',
+    name: 'plan',
+    formId: '1966386366515343361',
+    calcHeight: 200,
+    fixedSearch: {file_main_type: 1}
+  },
+  {
+    label: '标准',
+    name: 'standard',
+    formId: '1966386366515343361',
+    calcHeight: 200,
+    fixedSearch: {file_main_type: 2}
+  },
+  {
+    label: '规程',
+    name: 'regulations',
+    formId: '1966386366515343361',
+    calcHeight: 200,
+    fixedSearch: {file_main_type: 3}
+  },
+  {
+    label: '目标责任',
+    name: 'responsibility',
+    formId: '1966386366515343361',
+    calcHeight: 200,
+    fixedSearch: {file_main_type: 4}
+  },
+])
+
+// 定义点击tab的事件动作
+const handleClick = (tab) => {
+  const key = tab.props.name
+  tableRef.value[key].initTableLayout()
+}
+
+</script>
+
+<style lang="scss" scoped>
+.demo-tabs > .el-tabs__content {
+  padding: 32px;
+  font-size: 32px;
+  font-weight: 600;
+  color: #6b778c;
+}
+
+.demo-tabs {
+  ::v-deep(.el-tabs__nav-wrap) {
+    .el-tabs__item {
+      height: 50px;
+      font-size: 16px;
+    }
+  }
+}
+</style>