datang-ui/src/components/Location/Location.vue

<template>
  <div class="content-nav d-flex justify-space-between">
    <div class="content-title">
      <span :class="index < 2 ? 'red' : ''" v-for="(item, index) in title.split('')" :key="index">{{ item }}</span>
    </div>
    <div style="font-size:16px">
      <img src="@/assets/location.png" alt="" />
      您当前位置:
      <span class="ml-4" style="cursor: pointer;" @click="backFirst"> 首页 </span>
      <template v-if="title !== '关键词'">
        <span @click="backTitle" style="cursor: pointer;"> > {{ titleName }} </span>
        <span> > {{ titleTwo }} </span>
      </template>
      <template v-else>
        <span> > {{ title }} </span>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      default: '首页',
      type: String,
    },
  },
  data() {
    return {
      str: '',
      tabList: [
        {
          title: '首页',
          url: '/',
          children: [],
        },
        {
          title: '公司概况',
          url: '/profile',
          children: [
            {
              title: '公司简介',
              code: '0101',
            },
            {
              title: '公司领导',
              code: '0102',
            },
            {
              title: '组织架构',
              code: '0103',
            },
            {
              title: '企业VI',
              code: '0104',
            },
            {
              title: '联系方式',
              code: '0105',
            },
          ],
        },
        {
          title: '新闻中心',
          url: '/news',
          children: [
            {
              title: '集团新闻',
              code: '0201',
            },
            {
              title: '省公司新闻',
              code: '0202',
            },
            {
              title: '公司新闻',
              code: '0203',
            },
            {
              title: '图片新闻',
              code: '0204',
            },
            {
              title: '热点专题',
              code: '0205',
            },
            {
              title: '媒体关注',
              code: '0206',
            },
            {
              title: '视频新闻',
              code: '0207',
            },
            {
              title: '专题片',
              code: '0208',
            },
            {
              title: '企业画册',
              code: '0209',
            },
            {
              title: '现场风采',
              code: '0210',
            },
          ],
        },
        {
          title: '党的建设',
          url: '/building',
          children: [
            {
              title: '中心组学习',
              code: '0301',
            },
            {
              title: '示范党委',
              code: '0302',
            },
            {
              title: '党支部达标',
              code: '0303',
            },
            {
              title: '群团工作',
              code: '0304',
            },
            {
              title: '党建动态',
              code: '0305',
            },
            {
              title: '党风廉政',
              code: '0306',
            },
          ],
        },
        {
          title: '安全生产',
          url: '/production',
          children: [
            {
              title: '安全会议',
              code: '0401',
            },
            {
              title: '安全生产记录',
              code: '0402',
            },
            {
              title: '应急管理',
              code: '0403',
            },
            {
              title: '三讲一落实',
              code: '0404',
            },
            {
              title: '曝光台',
              code: '0405',
            },
          ],
        },
        {
          title: '通知公告',
          url: '/notice',
          children: [
            {
              title: '通知',
              code: '0501',
            },
            {
              title: '通报',
              code: '0502',
            },
            {
              title: '公告',
              code: '0503',
            },
            {
              title: '值班安排',
              code: '0504',
            },
            {
              title: '浮窗',
              code: '0505',
            },
          ],
        },
        {
          title: '信息公开',
          url: '/information',
          children: [
            {
              title: '基本信息',
              code: '0601',
            },
            {
              title: '经营管理',
              code: '0602',
            },
            {
              title: '公司公告',
              code: '0603',
            },
            {
              title: '社会责任',
              code: '0604',
            },
            {
              title: '关于信息公开',
              code: '0605',
            },
          ],
        },
        {
          title: '审批事项',
          children: [
            {
              title: '公务用车',
              code: '',
            },
            {
              title: '领导干部外出报备',
              code: '',
            },
            {
              title: '疫情防控',
              code: '',
            },
            {
              title: '用印申请',
              code: '',
            },
            {
              title: '业务招待事项',
              code: '',
            },
            {
              title: '会议室使用',
              code: '',
            },
            {
              title: '办公用品领用',
              code: '',
            },
          ],
        },
        {
          title: '制度资料',
          url: '/system',
          children: [
            {
              title: '集团公司制度',
              code: '0801',
            },
            {
              title: '山西公司制度',
              code: '0802',
            },
            {
              title: '行业标准与制度',
              code: '0803',
            },
            {
              title: '公司制度',
              code: '0804',
            },
            {
              title: '地方规章',
              code: '0805',
            },
            {
              title: '培训课件',
              code: '0806',
            },
            {
              title: '培训影像',
              code: '0807',
            },
            {
              title: '科技创新',
              code: '0808',
            },
          ],
        },
        {
          title: '部门首页',
          url: '/department',
          children: [
            {
              title: '总经理工作部',
              code: '0901',
            },
            {
              title: '计划营销部',
              code: '0902',
            },
            {
              title: '财务管理部',
              code: '0903',
            },
            {
              title: '人力资源部',
              code: '0904',
            },
            {
              title: '党群工作部',
              code: '0905',
            },
            {
              title: '纪委办公室（审计部）',
              code: '0906',
            },
            {
              title: '燃料采购部',
              code: '0907',
            },
            {
              title: '物资管理部',
              code: '0908',
            },
            {
              title: '项目开发部',
              code: '0909',
            },
            {
              title: '燃料质量验收部',
              code: '0910',
            },
            {
              title: '安全监督部',
              code: '0911',
            },
            {
              title: '设备部',
              code: '0912',
            },
            {
              title: '发电部',
              code: '0913',
            },
            {
              title: '维护部',
              code: '0914',
            },
            {
              title: '热工专业',
              code: '0915',
            },
            {
              title: '电气专业',
              code: '0916',
            },
          ],
        },
        {
          title: '首页专题',
          url: '/pile',
          children: [
            {
              title: '光荣榜',
              code: '9902',
            },
            {
              title: '今天我出镜',
              code: '9903',
            },
          ],
        },
      ],
      titleName: '',
      titleTwo: '',
    };
  },
  watch: {
    '$route.query.code'() {
      this.getLocal();
    },
  },
  created() {
    this.getLocal();
  },
  methods: {
    getLocal() {
      const path = this.$route.path;
      const query = this.$route.query;
      for (let i = 0; i < this.tabList.length; i++) {
        const title = this.tabList[i];
        if (title.url === path) {
          this.titleName = title.title;
          for (let k = 0; k < title.children.length; k++) {
            if (query.code && query.code === title.children[k].code) {
              this.titleTwo = title.children[k].title;
            }
          }
        }
      }
    },
    backFirst() {
      this.$router.push('/');
    },
    backTitle() {
      for (let i = 0; i < this.tabList.length; i++) {
        const item = this.tabList[i];
        if (item.children && item.children.length) {
          for (let k = 0; k < item.children.length; k++) {
            const itemC = item.children[k];
            if (this.title === itemC.title && k !== 0) {
              this.$router.push({
                path: this.tabList[i].url,
                query: {
                  code: item.children[0].code,
                },
              });
              return;
            }
          }
        }
      }
    },
  },
};
</script>
<style scoped>
.red {
  color: #b61412;
}
.content-title {
  font-size: 20px !important;
}
.content-nav {
  height: 40px;
  margin-bottom: 16px;
  background: #fff;
  line-height: 40px;
  padding: 0 16px;
}
img {
  width: 28px;
}
</style>