| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135 |
- <!-- -->
- <template>
- <div>
- <el-menu :default-active="activeIndex" class="el-menu-profession" mode="horizontal" @select="handleSelect">
- <el-submenu
- :index="item.index"
- v-for="(item,index) in reallMenuLists"
- v-if="item.children"
- :key="index">
- <template slot="title">{{item.title}}</template>
- <el-menu-item style="font-size:large;color:#303133"
- @click="changeObjtypeEvent(itemChildren,indexChildren)"
- :index="itemChildren.index"
- v-for="(itemChildren,indexChildren) in item.children"
- :key="indexChildren">{{itemChildren.title}}</el-menu-item>
- </el-submenu>
- <el-menu-item
- style="font-size:large;color:#303133"
- v-for="(item,index) in reallMenuLists"
- v-if="!item.children" :index="item.index"
- :key="item.index"
- @click="changeObjtypeEvent(item,index)">{{item.title}}</el-menu-item>
- </el-menu>
- </div>
- </template>
- <script>
- //这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
- //例如:import 《组件名称》 from '《组件路径》';
- export default {
- //import引入的组件需要注入到对象中才能使用
- props:['currentNodeId','projectName','reallMenuLists'],
- components: {},
- data() {
- //这里存放数据
- return {
- // type:'',//专业类型
- activeIndex: '',
- checkedMemder:{},
- activeName: '前期与设计',
- };
- },
- //监听属性 类似于data概念
- computed: {
- type(){
- if(this.activeName == '前期与设计'){
- return 1;
- }else if(this.activeName == '建设管理'){
- return 2;
- }else if(this.activeName == '计划下达与执行'){
- return 3;
- }else if(this.activeName == '资金使用与管理'){
- return 4;
- }else if(this.activeName == '工程质量'){
- return 5;
- }else{
- return 6;
- }
- },
- persId() {
- return localStorage.getItem("userid")
- ? localStorage.getItem("userid")
- : "1098101939614724096";
- },
- },
- //监控data中的数据变化
- watch: {
- },
- //方法集合
- methods: {
- setactiveIndex(){
- this.activeIndex = '1'
- },
- handleSelect(key, keyPath) {
- console.log(key, keyPath);
- },
- changeObjtypeEvent(item,index){
- let upObj = {};
- if(this.currentNodeId == ''){
- this.$message({
- message: '请先在左侧选择工程!',
- type: 'warning'
- });
- }else{
- // this.checkedMemder = item;//控制了点选的是哪个子表
- upObj['tableName'] = item.title;
- upObj['type'] = item.pType;
- if(item.hasOwnProperty('reportSrc')){
- upObj['tableSrc'] = item.reportSrc;
- }
- this.$emit('professionChildrenTableName',upObj);
- }
- },
- },
- //生命周期 - 创建完成(可以访问当前this实例)
- created() {
- },
- //生命周期 - 挂载完成(可以访问DOM元素)
- mounted() {
- },
- beforeMount() {}, //生命周期 - 挂载之前
- beforeUpdate() {}, //生命周期 - 更新之前
- updated() {}, //生命周期 - 更新之后
- beforeDestroy() {}, //生命周期 - 销毁之前
- destroyed() {}, //生命周期 - 销毁完成
- activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
- }
- </script>
- <style lang="scss">
- .el-menu-profession{
- .el-submenu__title{
- font-size: large;
- color: #303133 !important;
- }
- // .el-menu--horizontal>.el-submenu .el-submenu__title{
- // color: #303133 !important;
- // }
- // .el-menu--horizontal .el-menu .el-menu-item{
- // color: #303133 !important;
- // }
- }
- @media screen and (max-width: 1680px) {
- .el-menu-profession .el-submenu__title{
- padding: 0 12px;
- }
- }
- </style>
|