b2c6f0662b64d89f72427daf26f366d97c45ff81.svn-base 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. <!-- -->
  2. <template>
  3. <div>
  4. <el-menu :default-active="activeIndex" class="el-menu-profession" mode="horizontal" @select="handleSelect">
  5. <el-submenu
  6. :index="item.index"
  7. v-for="(item,index) in reallMenuLists"
  8. v-if="item.children"
  9. :key="index">
  10. <template slot="title">{{item.title}}</template>
  11. <el-menu-item style="font-size:large;color:#303133"
  12. @click="changeObjtypeEvent(itemChildren,indexChildren)"
  13. :index="itemChildren.index"
  14. v-for="(itemChildren,indexChildren) in item.children"
  15. :key="indexChildren">{{itemChildren.title}}</el-menu-item>
  16. </el-submenu>
  17. <el-menu-item
  18. style="font-size:large;color:#303133"
  19. v-for="(item,index) in reallMenuLists"
  20. v-if="!item.children" :index="item.index"
  21. :key="item.index"
  22. @click="changeObjtypeEvent(item,index)">{{item.title}}</el-menu-item>
  23. </el-menu>
  24. </div>
  25. </template>
  26. <script>
  27. //这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
  28. //例如:import 《组件名称》 from '《组件路径》';
  29. export default {
  30. //import引入的组件需要注入到对象中才能使用
  31. props:['currentNodeId','projectName','reallMenuLists'],
  32. components: {},
  33. data() {
  34. //这里存放数据
  35. return {
  36. // type:'',//专业类型
  37. activeIndex: '',
  38. checkedMemder:{},
  39. activeName: '前期与设计',
  40. };
  41. },
  42. //监听属性 类似于data概念
  43. computed: {
  44. type(){
  45. if(this.activeName == '前期与设计'){
  46. return 1;
  47. }else if(this.activeName == '建设管理'){
  48. return 2;
  49. }else if(this.activeName == '计划下达与执行'){
  50. return 3;
  51. }else if(this.activeName == '资金使用与管理'){
  52. return 4;
  53. }else if(this.activeName == '工程质量'){
  54. return 5;
  55. }else{
  56. return 6;
  57. }
  58. },
  59. persId() {
  60. return localStorage.getItem("userid")
  61. ? localStorage.getItem("userid")
  62. : "1098101939614724096";
  63. },
  64. },
  65. //监控data中的数据变化
  66. watch: {
  67. },
  68. //方法集合
  69. methods: {
  70. setactiveIndex(){
  71. this.activeIndex = '1'
  72. },
  73. handleSelect(key, keyPath) {
  74. console.log(key, keyPath);
  75. },
  76. changeObjtypeEvent(item,index){
  77. let upObj = {};
  78. if(this.currentNodeId == ''){
  79. this.$message({
  80. message: '请先在左侧选择工程!',
  81. type: 'warning'
  82. });
  83. }else{
  84. // this.checkedMemder = item;//控制了点选的是哪个子表
  85. upObj['tableName'] = item.title;
  86. upObj['type'] = item.pType;
  87. if(item.hasOwnProperty('reportSrc')){
  88. upObj['tableSrc'] = item.reportSrc;
  89. }
  90. this.$emit('professionChildrenTableName',upObj);
  91. }
  92. },
  93. },
  94. //生命周期 - 创建完成(可以访问当前this实例)
  95. created() {
  96. },
  97. //生命周期 - 挂载完成(可以访问DOM元素)
  98. mounted() {
  99. },
  100. beforeMount() {}, //生命周期 - 挂载之前
  101. beforeUpdate() {}, //生命周期 - 更新之前
  102. updated() {}, //生命周期 - 更新之后
  103. beforeDestroy() {}, //生命周期 - 销毁之前
  104. destroyed() {}, //生命周期 - 销毁完成
  105. activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
  106. }
  107. </script>
  108. <style lang="scss">
  109. .el-menu-profession{
  110. .el-submenu__title{
  111. font-size: large;
  112. color: #303133 !important;
  113. }
  114. // .el-menu--horizontal>.el-submenu .el-submenu__title{
  115. // color: #303133 !important;
  116. // }
  117. // .el-menu--horizontal .el-menu .el-menu-item{
  118. // color: #303133 !important;
  119. // }
  120. }
  121. @media screen and (max-width: 1680px) {
  122. .el-menu-profession .el-submenu__title{
  123. padding: 0 12px;
  124. }
  125. }
  126. </style>