Newer
Older
DH_Apicture / src / views / pictureOnMap / page / components / DialogTabs / dialogTabs.vue
@zhangqy zhangqy 27 days ago 4 KB 优化
  1. <template>
  2. <div id="NewdialogTabs" class="h100 flex flex-v">
  3. <div class="dialogTitle">
  4. <div class="title">{{ title }}</div>
  5. <div class="closeIcon" @click="closeFun"></div>
  6. </div>
  7. <div class="contentBox flex-1">
  8. <el-tabs
  9. v-model="AllData.editableTabsValue"
  10. :stretch="true"
  11. @tab-click="TabsChange"
  12. >
  13. <el-tab-pane
  14. v-for="item in AllData.editableTabs"
  15. :key="item.name"
  16. :label="item.title"
  17. :name="item.name"
  18. >
  19. <component
  20. :is="item.content"
  21. :dataID="dataID"
  22. :dataCode="dataCode"
  23. :tabsType="AllData.editableTabsValue"
  24. @update-tabs-type="updateTabsType"
  25. :RefreshName="AllData.RefreshName"
  26. :typeName="typeName"
  27. :key="AllData.RefreshName"
  28. v-if="AllData.RefreshName == item.name"
  29. :arrstcode="arrstcode"
  30. :arrid="arrid"
  31. :Getproperties="Getproperties"
  32. ></component>
  33. </el-tab-pane>
  34. </el-tabs>
  35. </div>
  36. </div>
  37. </template>
  38.  
  39. <script setup name="NewdialogTabs">
  40. import { ref, reactive, toRefs, onMounted } from "vue";
  41. const emit = defineEmits(["closeFun"]);
  42. import Config from "./DialogConfig";
  43. // 父元素传值
  44. // debugger;
  45. const props = defineProps({
  46. // 数据id
  47. dataID: {
  48. type: [String, Number],
  49. },
  50. dataCode: {
  51. type: String,
  52. },
  53. // 当前站点需要展示的且已集成的组件列表
  54. comIDs: {
  55. type: Array,
  56. },
  57. // 自定义组件,产品化开发人员不建议使用,此配置是给项目的特殊需求预留功能,项目中正常的组件需求可以直接使用comIDs
  58. customComponents: {
  59. type: Array,
  60. },
  61. // 默认打开tabs的key
  62. RefName: {
  63. type: String,
  64. },
  65. typeName: {
  66. type: String,
  67. },
  68. title: {
  69. type: String,
  70. },
  71. arrstcode: {
  72. type: Array,
  73. },
  74. arrid: {
  75. type: Array,
  76. },
  77. Getproperties: {
  78. type: Object,
  79. },
  80. Getmenuarr: {
  81. type: Array,
  82. },
  83. });
  84.  
  85. // 声明本页面中的变量
  86. const AllData = reactive({
  87. editableTabsValue: "",
  88. editableTabs: [],
  89. RefreshName: "",
  90. });
  91.  
  92. const updateTabsType = (name) => {
  93. AllData.editableTabsValue = name;
  94. AllData.RefreshName = name;
  95. };
  96. // tab切换事件
  97. const TabsChange = (tab, event) => {
  98. AllData.RefreshName = tab.paneName;
  99. // console.log(tab, AllData.RefreshName);
  100. };
  101. const closeFun = () => {
  102. emit("closeFun", false);
  103. };
  104. onMounted(() => {
  105. // 获取当前组件已分配的组件ID与配置文件中的公共组件ID进行对比,控制展示的tab选项
  106. let ComparisonTable = Config.ComparisonTable;
  107. AllData.editableTabs = [];
  108. Promise.all(
  109. ComparisonTable.map(function (element) {
  110. // 动态修改后台返回的组件名称
  111. props.Getmenuarr.map((item) => {
  112. if (item.moduleName == element.name) {
  113. element.title = item.menuName;
  114. element.show = item.show;
  115. }
  116. });
  117.  
  118. if (props.comIDs.includes(element.name) && element.show) {
  119. return element;
  120. }
  121. })
  122. ).then(function (data) {
  123. data = data.filter((n) => n);
  124. //赋值其拥有的公共组件
  125. AllData.editableTabs = AllData.editableTabs.concat(data);
  126. console.log(AllData.editableTabs, "公共组件");
  127. //对自定义组件进行插入
  128. props.customComponents.forEach((element) => {
  129. if (element.sort && element.sort != "") {
  130. // 如果有排序,就按照排序顺序插入到editableTabs中
  131. AllData.editableTabs.splice(element.sort, 0, element);
  132. } else if (element.sort == 0) {
  133. // 如果0,就默认放置在数据队列的最前面
  134. AllData.editableTabs.splice(0, 0, element);
  135. } else {
  136. // 如果没有排序,就默认放置在数据队列的最后面
  137. AllData.editableTabs.push(element);
  138. }
  139. });
  140. if (
  141. props.RefName == "" ||
  142. props.RefName == undefined ||
  143. !props.comIDs.includes(props.RefName)
  144. ) {
  145. // 默认展示第一个
  146. AllData.editableTabsValue = AllData.editableTabs[0].name;
  147. AllData.RefreshName = AllData.editableTabs[0].name;
  148. } else {
  149. AllData.editableTabsValue = props.RefName;
  150. AllData.RefreshName = props.RefName;
  151. }
  152. });
  153. });
  154. </script>
  155.  
  156. <style lang="scss">
  157. #NewdialogTabs {
  158. width: 100%;
  159. height: 100%;
  160. color: #fff;
  161. .contentBox {
  162. height: 100%;
  163. }
  164. .el-tabs--top {
  165. width: 100%;
  166. height: 100%;
  167.  
  168. .el-tabs__nav-wrap::after {
  169. display: none;
  170. }
  171.  
  172. .el-tabs__header {
  173. // background: #031c33;
  174.  
  175. .el-tabs__item {
  176. color: #d5dee7;
  177. font-size: 13px;
  178. padding: 0;
  179. // border-bottom: 2px solid #34333345;
  180. }
  181.  
  182. .is-active {
  183. color: #00b4ff;
  184. }
  185.  
  186. .el-tabs__active-bar {
  187. color: #00b4ff;
  188. }
  189. }
  190.  
  191. .el-tabs__content {
  192. width: 100%;
  193. height: calc(100% - 54px);
  194.  
  195. .el-tab-pane {
  196. width: 100%;
  197. height: 100%;
  198. }
  199. }
  200. }
  201. }
  202. </style>