Newer
Older
urbanLifeline_YanAn / src / views / DialogTabs / dialogTabs.vue
@zhangzhihui zhangzhihui on 12 Nov 3 KB 弹窗
  1. <template>
  2. <div id="NewdialogTabs">
  3. <el-tabs v-model="AllData.editableTabsValue" :stretch="true" @tab-click="TabsChange">
  4. <el-tab-pane
  5. v-for="item in AllData.editableTabs"
  6. :key="item.name"
  7. :label="item.title"
  8. :name="item.name"
  9. >
  10. <component
  11. :is="item.content"
  12. :dataID="dataID"
  13. :SiteNo="SiteNo"
  14. :tabsType="AllData.editableTabsValue"
  15. @update-tabs-type="updateTabsType"
  16. :RefreshName="AllData.RefreshName"
  17. :key="AllData.RefreshName"
  18. v-if="AllData.RefreshName == item.name"
  19. ></component>
  20. </el-tab-pane>
  21. </el-tabs>
  22. </div>
  23. </template>
  24.  
  25. <script setup name="NewdialogTabs">
  26. import { ref, reactive, toRefs, onMounted } from "vue";
  27. import Config from "./DialogConfig";
  28. // 父元素传值
  29. // debugger;
  30. const props = defineProps({
  31. // 数据id
  32. dataID: {
  33. type: String,
  34. },
  35. SiteNo: {
  36. type: String,
  37. },
  38. // 当前站点需要展示的且已集成的组件列表
  39. comIDs: {
  40. type: Array,
  41. },
  42. // 自定义组件,产品化开发人员不建议使用,此配置是给项目的特殊需求预留功能,项目中正常的组件需求可以直接使用comIDs
  43. customComponents: {
  44. type: Array,
  45. },
  46. // 默认打开tabs的key
  47. RefName: {
  48. type: String,
  49. },
  50. });
  51.  
  52. // 声明本页面中的变量
  53. const AllData = reactive({
  54. editableTabsValue: "",
  55. editableTabs: [],
  56. RefreshName: "",
  57. });
  58. const updateTabsType = (name) => {
  59. AllData.editableTabsValue = name;
  60. AllData.RefreshName = name;
  61. };
  62. // tab切换事件
  63. const TabsChange = (tab, event) => {
  64. AllData.RefreshName = tab.paneName;
  65. console.log(tab, AllData.RefreshName);
  66. };
  67. onMounted(() => {
  68. // 获取当前组件已分配的组件ID与配置文件中的公共组件ID进行对比,控制展示的tab选项
  69. let ComparisonTable = Config.ComparisonTable;
  70. AllData.editableTabs = [];
  71. Promise.all(
  72. ComparisonTable.map(function (element) {
  73. if (props.comIDs.includes(element.name)) {
  74. return element;
  75. }
  76. })
  77. ).then(function (data) {
  78. data = data.filter((n) => n);
  79. //赋值其拥有的公共组件
  80. AllData.editableTabs = AllData.editableTabs.concat(data);
  81. console.log(AllData.editableTabs, "公共组件");
  82. //对自定义组件进行插入
  83. props.customComponents.forEach((element) => {
  84. if (element.sort && element.sort != "") {
  85. // 如果有排序,就按照排序顺序插入到editableTabs中
  86. AllData.editableTabs.splice(element.sort, 0, element);
  87. } else if (element.sort == 0) {
  88. // 如果0,就默认放置在数据队列的最前面
  89. AllData.editableTabs.splice(0, 0, element);
  90. } else {
  91. // 如果没有排序,就默认放置在数据队列的最后面
  92. AllData.editableTabs.push(element);
  93. }
  94. });
  95. if (props.RefName == "" || props.RefName == undefined) {
  96. // 默认展示第一个
  97. AllData.editableTabsValue = AllData.editableTabs[0].name;
  98. AllData.RefreshName = AllData.editableTabs[0].name;
  99. } else {
  100. AllData.editableTabsValue = props.RefName;
  101. AllData.RefreshName = props.RefName;
  102. }
  103. });
  104. });
  105. </script>
  106.  
  107. <style lang="scss">
  108. #NewdialogTabs {
  109. width: 100%;
  110. height: calc(100% - 10px);
  111.  
  112. .el-tabs--top {
  113. width: 100%;
  114. height: 100%;
  115.  
  116. .el-tabs__nav-wrap::after {
  117. display: none;
  118. }
  119.  
  120. .el-tabs__header {
  121. background: #02366B;
  122. margin: 0;
  123.  
  124. .el-tabs__item {
  125. color: #93a7ba;
  126. font-size: 16px;
  127. }
  128.  
  129. .is-active {
  130. color: #00A9FF
  131. }
  132.  
  133. .el-tabs__active-bar {
  134. color: #00A9FF
  135. }
  136. }
  137.  
  138. .el-tabs__content {
  139. width: 100%;
  140. height: calc(100% - 45px);
  141.  
  142. .el-tab-pane {
  143. width: 100%;
  144. height: 100%;
  145. }
  146. }
  147. }
  148. }
  149. </style>