- <template>
- <div id="NewdialogTabs" class="h100 flex flex-v">
- <div class="dialogTitle">
- <div class="title">{{ title }}</div>
- <div class="closeIcon" @click="closeFun"></div>
- </div>
- <div class="contentBox flex-1">
- <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"
- :dataCode="dataCode"
- :tabsType="AllData.editableTabsValue"
- @update-tabs-type="updateTabsType"
- :RefreshName="AllData.RefreshName"
- :typeName="typeName"
- :key="AllData.RefreshName"
- v-if="AllData.RefreshName == item.name"
- :arrstcode="arrstcode"
- :arrid="arrid"
- :Getproperties="Getproperties"
- ></component>
- </el-tab-pane>
- </el-tabs>
- </div>
- </div>
- </template>
-
- <script setup name="NewdialogTabs">
- import { ref, reactive, toRefs, onMounted } from "vue";
- const emit = defineEmits(["closeFun"]);
- import Config from "./DialogConfig";
- // 父元素传值
- // debugger;
- const props = defineProps({
- // 数据id
- dataID: {
- type: [String, Number],
- },
- dataCode: {
- type: String,
- },
- // 当前站点需要展示的且已集成的组件列表
- comIDs: {
- type: Array,
- },
- // 自定义组件,产品化开发人员不建议使用,此配置是给项目的特殊需求预留功能,项目中正常的组件需求可以直接使用comIDs
- customComponents: {
- type: Array,
- },
- // 默认打开tabs的key
- RefName: {
- type: String,
- },
- typeName: {
- type: String,
- },
- title: {
- type: String,
- },
- arrstcode: {
- type: Array,
- },
- arrid: {
- type: Array,
- },
- Getproperties: {
- type: Object,
- },
- Getmenuarr: {
- type: Array,
- },
- });
-
- // 声明本页面中的变量
- 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);
- };
- const closeFun = () => {
- emit("closeFun", false);
- };
- onMounted(() => {
- // 获取当前组件已分配的组件ID与配置文件中的公共组件ID进行对比,控制展示的tab选项
- let ComparisonTable = Config.ComparisonTable;
- AllData.editableTabs = [];
- Promise.all(
- ComparisonTable.map(function (element) {
- // 动态修改后台返回的组件名称
- props.Getmenuarr.map((item) => {
- if (item.moduleName == element.name) {
- element.title = item.menuName;
- element.show = item.show;
- }
- });
-
- if (props.comIDs.includes(element.name) && element.show) {
- 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 ||
- !props.comIDs.includes(props.RefName)
- ) {
- // 默认展示第一个
- 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: 100%;
- color: #fff;
- .contentBox {
- height: 100%;
- }
- .el-tabs--top {
- width: 100%;
- height: 100%;
-
- .el-tabs__nav-wrap::after {
- display: none;
- }
-
- .el-tabs__header {
- // background: #031c33;
-
- .el-tabs__item {
- color: #d5dee7;
- font-size: 13px;
- padding: 0;
- // border-bottom: 2px solid #34333345;
- }
-
- .is-active {
- color: #00b4ff;
- }
-
- .el-tabs__active-bar {
- color: #00b4ff;
- }
- }
-
- .el-tabs__content {
- width: 100%;
- height: calc(100% - 54px);
-
- .el-tab-pane {
- width: 100%;
- height: 100%;
- }
- }
- }
- }
- </style>