2025-10-17 10:31:13 +08:00
|
|
|
|
<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}
|
|
|
|
|
|
},
|
2025-10-20 10:53:20 +08:00
|
|
|
|
{
|
|
|
|
|
|
label: '工作档案',
|
|
|
|
|
|
name: 'workArchive',
|
|
|
|
|
|
formId: '1966386366515343361',
|
|
|
|
|
|
calcHeight: 200,
|
|
|
|
|
|
fixedSearch: {file_main_type: 5}
|
|
|
|
|
|
},
|
2025-10-17 10:31:13 +08:00
|
|
|
|
])
|
|
|
|
|
|
|
|
|
|
|
|
// 定义点击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>
|
