- <template>
- <div id="NewdialogTabs">
- <el-tabs v-model="AllData.editableTabsValue" :stretch="true" @tab-click="TabsChange">
- <el-tab-pane
- v-for="item in AllData.editableTabs"
- :key="item.name"
- :label="item.title"
- :name="item.name"
- >
- <component
- :is="item.content"
- :dataID="dataID"
- :SiteNo="SiteNo"
- :tabsType="AllData.editableTabsValue"
- @update-tabs-type="updateTabsType"
- :RefreshName="AllData.RefreshName"
- :key="AllData.RefreshName"
- v-if="AllData.RefreshName == item.name"
- ></component>
- </el-tab-pane>
- </el-tabs>
- </div>
- </template>
-
- <script setup name="NewdialogTabs">
- import { ref, reactive, toRefs, onMounted } from "vue";
- import Config from "./DialogConfig";
- // 父元素传值
- // debugger;
- const props = defineProps({
- // 数据id
- dataID: {
- type: String,
- },
- SiteNo: {
- type: String,
- },
- // 当前站点需要展示的且已集成的组件列表
- comIDs: {
- type: Array,
- },
- // 自定义组件,产品化开发人员不建议使用,此配置是给项目的特殊需求预留功能,项目中正常的组件需求可以直接使用comIDs
- customComponents: {
- type: Array,
- },
- // 默认打开tabs的key
- RefName: {
- type: String,
- },
- });
-
- // 声明本页面中的变量
- const AllData = reactive({
- editableTabsValue: "",
- editableTabs: [],
- RefreshName: "",
- });
- const updateTabsType = (name) => {
- AllData.editableTabsValue = name;
- AllData.RefreshName = name;
- };
- // tab切换事件
- const TabsChange = (tab, event) => {
- AllData.RefreshName = tab.paneName;
- console.log(tab, AllData.RefreshName);
- };
- onMounted(() => {
- // 获取当前组件已分配的组件ID与配置文件中的公共组件ID进行对比,控制展示的tab选项
- let ComparisonTable = Config.ComparisonTable;
- AllData.editableTabs = [];
- Promise.all(
- ComparisonTable.map(function (element) {
- if (props.comIDs.includes(element.name)) {
- return element;
- }
- })
- ).then(function (data) {
- data = data.filter((n) => n);
- //赋值其拥有的公共组件
- AllData.editableTabs = AllData.editableTabs.concat(data);
- console.log(AllData.editableTabs, "公共组件");
- //对自定义组件进行插入
- props.customComponents.forEach((element) => {
- if (element.sort && element.sort != "") {
- // 如果有排序,就按照排序顺序插入到editableTabs中
- AllData.editableTabs.splice(element.sort, 0, element);
- } else if (element.sort == 0) {
- // 如果0,就默认放置在数据队列的最前面
- AllData.editableTabs.splice(0, 0, element);
- } else {
- // 如果没有排序,就默认放置在数据队列的最后面
- AllData.editableTabs.push(element);
- }
- });
- if (props.RefName == "" || props.RefName == undefined) {
- // 默认展示第一个
- AllData.editableTabsValue = AllData.editableTabs[0].name;
- AllData.RefreshName = AllData.editableTabs[0].name;
- } else {
- AllData.editableTabsValue = props.RefName;
- AllData.RefreshName = props.RefName;
- }
- });
- });
- </script>
-
- <style lang="scss">
- #NewdialogTabs {
- width: 100%;
- height: calc(100% - 10px);
-
- .el-tabs--top {
- width: 100%;
- height: 100%;
-
- .el-tabs__nav-wrap::after {
- display: none;
- }
-
- .el-tabs__header {
- background: #02366B;
- margin: 0;
-
- .el-tabs__item {
- color: #93a7ba;
- font-size: 16px;
- }
-
- .is-active {
- color: #00A9FF
- }
-
- .el-tabs__active-bar {
- color: #00A9FF
- }
- }
-
- .el-tabs__content {
- width: 100%;
- height: calc(100% - 45px);
-
- .el-tab-pane {
- width: 100%;
- height: 100%;
- }
- }
- }
- }
- </style>