bocai_supplyChain_pc/src/views/merchantBack.vue

<template>
  <div class>
    <a-layout id="components-layout-demo-responsive">
      <a-layout-sider :width="pLeft" breakpoint="lg" :collapsedWidth="collapsedWidth" @breakpoint="onBreakpoint" :trigger="collapsed ? 'null' : ''" v-model="collapsed" class="leftMenu ant-layout-sider-has-trigger" style="z-index: 100">
        <div class="logo br1" style="box-shadow: none;margin-left: -8px">
          <div @click.stop="clearOpenkey" style="cursor: pointer;">
            <router-link to="/main">
              <!-- <img src="https://matripe-cms.oss-cn-beijing.aliyuncs.com/1shoudan/daotianLogo.svg" alt /> -->
              <svg class="svg_icon f24" aria-hidden="true" :class="collapsed ? 'ml4' : ''">
                <use xlink:href="#icon-bocai1" />
              </svg>
              <!-- <router-link :to="{name:'home'}"><img src="http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/adminLogo.svg" alt=""> -->
              <h1 v-if="!collapsed" style>稻田商家后台</h1>
              <!-- style="position: relative;top: -1px;" -->
            </router-link>
          </div>
        </div>

        <a-menu mode="inline" id="leftMenu" :selectedKeys="[$route.name]" :openKeys.sync="openKeys" @click="handleClick" class style="overflow-y:scroll;height:calc(100vh - 49px);overflow-x:hidden">
          <template v-for="(item, index) in roles">
            <a-menu-item :key="item.name" :title="null" v-if="item.path != '' && item.level < 3">
              <router-link :to="{ name: item.name }">
                <i class="iconfont f12 mr8" :class="item.icon" />

                <span class="nav-text" v-if="!collapsed" v-text="item.title"></span>
              </router-link>
            </a-menu-item>
            <a-sub-menu :key="item.name" v-if="item.path == ''">
              <span slot="title">
                <i class="iconfont f12 mr8" :class="item.icon" />
                <span v-text="item.title" v-if="!collapsed"></span>
              </span>
              <a-menu-item-group>
                <a-menu-item class="f14" :key="child.name" v-for="(child, idx) in item.children">
                  <!-- <router-link :to="{name:child.name}" :target="child.title == '监控页' ? '_blank' : '_self'"> -->
                  <router-link :to="{ name: child.name }">{{ child.title }}</router-link>
                </a-menu-item>
              </a-menu-item-group>
            </a-sub-menu>
          </template>
        </a-menu>
        <div class="ant-layout-sider-trigger" :style="{ width: pLeft }">
          <a-icon v-if="hideIcon" class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="onTrigger" />
        </div>
      </a-layout-sider>
      <a-layout>
        <a-layout-header class="header" :style="{ paddingLeft: pLeft , width:`calc(80% - ${pLeft})`}">
          <div class="topmenu" :style="{ width:`calc(100% - ${pLeft})`}" style="display: flex;justify-content: space-between;background-color: #fff; box-shadow: 1px 1px 2px #e8e8e8; position: fixed; top: 0; z-index: 100">
            <div class="flex1" style="z-index: 999">
              <div class="logined mr24 fsa" style="height:48px;line-height:48px;">
                <div class="fl">
                  <span class="f16 ml16 fw500 c085">{{ currentPage }}</span>
                </div>
                <div class="fsa">
                  <a-button class="mr20">
                    <router-link to="/list">职位列表</router-link>
                  </a-button>
                  <a-dropdown overlayClassName="logindropdown" placement="bottomRight">
                    <!-- <img :src="userbaseInfo.imgSrc" alt="" v-if="userbaseInfo.imgSrc !== ''" style="border-radius: 50%" />
                    <span v-else><i class="iconfont icon-morentouxiang" style="color:#ff4400"></i></span>-->
                    <span class="fsa f14">
                      <span class="iconfont icon-morentouxiang mr4 f32" v-if="!userbaseInfo.imgSrc"></span>
                      <img :src="userbaseInfo.imgSrc" class="mr4" style="border-radius:50%;width:32px;height:32px;" alt v-else />
                      <div class="ml4">{{ userbaseInfo.aliasName || userbaseInfo.userName}}</div>
                    </span>
                    <div class="loginbox backTable" slot="overlay">
                      <router-link to="/accountsetting">
                        <div>
                          <span>
                            <i class="iconfont icon-gerenzhongxin"></i>个人中心
                          </span>
                          <i class="iconfont icon-youjiantou"></i>
                        </div>
                      </router-link>
                      <router-link to="/main">
                        <div>
                          <span>
                            <i class="iconfont icon-shangjiahoutai"></i>返回首页
                          </span>
                          <i class="iconfont icon-youjiantou"></i>
                        </div>
                      </router-link>
                      <button @click="logout">退出登录</button>
                    </div>
                  </a-dropdown>
                </div>
              </div>
            </div>
          </div>
        </a-layout-header>
        <a-layout-content class="trans" :style="{ margin: '2px 0 0 0', paddingLeft: pLeft, paddingTop: pTop }">
          <!-- <div id="littleUse" style="margin-top: 48px"> -->
          <router-view @setTitle="setTitle"></router-view>
          <!-- </div> -->
        </a-layout-content>
        <a-layout-footer :style="{ marginLeft: pLeft }" class="tac f12" style="textalign: center">
          <span>
            powered by
            <svg class="svg_icon ml4" style="font-size:46px;margin-top:-2px" aria-hidden="true">
              <use xlink:href="#icon-bocai2" />
            </svg>｜Copyright © 2015-2023 Bocai. All Rights Reserved.｜
          </span>
          <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">豫ICP备2023001993号</a>
        </a-layout-footer>
      </a-layout>
    </a-layout>
    <div>
      <!-- <div class="backFooter" style="height: 64px;background-color: #f5f5f5;line-height: 64px;color: #999;font-size: 14px;text-align: center;padding-left: 152px;">Copyright © 2015 - 2021 Matripe. All Rights Reserved.</div> -->
    </div>
    <!-- <notice @parentPageCallBack="showMessageFromChild" ref="child"></notice> -->
  </div>
</template>

<script>
import { logoutApi } from '../api/login'

export default {
  inject: ['reload'],

  // 组件名称
  name: '',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      roles: [
        {
          id: 1,
          parentId: '',
          name: 'HomePage',
          url: ' ',
          icon: 'icon-houtaishouye',
          component: '',
          path: 'HomePage',
          title: '后台首页-',
          menuName: 'HomePage',
          level: 1,
          menuType: 1,
        },
        {
          id: 2,
          parentId: '',
          name: 'JobManagement',
          url: ' ',
          icon: 'icon-zhiweiguanli',
          component: '',
          path: '',
          title: '职位管理-',
          menuName: 'dashboard',
          level: 1,
          menuType: 1,
          children: [
            {
              id: -110,
              parentId: 294,
              name: 'TheJobList',
              url: 'http://www.idaotian.com/box/btv/#/',
              icon: 'home',
              component: '',
              path: 'http://www.idaotian.com/box/btv/#/',
              title: '职位列表-',
              menuName: '职位列表',
            },
            {
              id: -110,
              parentId: 294,
              name: 'BrokerageConfig',
              url: 'http://www.idaotian.com/box/btv/#/',
              icon: 'home',
              component: '',
              path: 'http://www.idaotian.com/box/btv/#/',
              title: '佣金配置-',
              menuName: '佣金配置',
            },
          ],
        },
        {
          id: 3,
          parentId: '',
          name: 'TownsmanManagement',
          url: ' ',
          icon: 'icon-laoxiangguanli',
          component: '',
          path: '',
          title: '老乡管理-',
          menuName: 'TownsmanManagement',
          level: 1,
          menuType: 1,
          children: [
            {
              id: -110,
              parentId: 294,
              name: 'TownsmanList',
              url: 'http://www.idaotian.com/box/btv/#/',
              icon: 'home',
              component: '',
              path: 'http://www.idaotian.com/box/btv/#/',
              title: '老乡列表-',
              menuName: '老乡列表',
            },
          ],
        },
        {
          id: 4,
          parentId: '',
          name: 'AgencyManagement',
          url: ' ',
          icon: 'icon-dailiguanli',
          component: '',
          path: '',
          title: '代理管理-',
          menuName: 'AgencyManagement',
          level: 1,
          menuType: 1,
          children: [
            {
              id: -110,
              parentId: 294,
              name: 'AgencyList',
              url: 'http://www.idaotian.com/box/btv/#/',
              icon: 'home',
              component: '',
              path: 'http://www.idaotian.com/box/btv/#/',
              title: '代理列表-',
              menuName: '代理列表',
            },
          ],
        },
        {
          id: 5,
          parentId: '',
          name: 'teammanagement',
          url: ' ',
          icon: 'icon-tuanduiguanli',

          component: '',
          path: '',
          title: '团队管理',
          menuName: 'teammanagement',
          level: 1,
          menuType: 1,
          children: [
            {
              id: 295,
              parentId: 294,
              name: 'MemberInfo',
              url: '/memberInfo',
              icon: '',
              component: 'home',
              path: '/home',
              title: '团队成员',
              menuName: 'teammanagement',
              level: 2,
              menuType: 1,
              children: '',
            },
            {
              id: 296,
              parentId: 294,
              name: 'RoleManagement',
              url: '/memberInfo',
              icon: '',
              component: 'home',
              path: '/home',
              title: '角色管理',
              menuName: 'teammanagement',
              level: 2,
              menuType: 1,
              children: '',
            },
            {
              id: 296,
              parentId: 294,
              name: 'InfoList',
              url: '/memberInfo',
              icon: '',
              component: 'home',
              path: '/home',
              title: '通讯录-',
              menuName: '通讯录',
              level: 2,
              menuType: 1,
              children: '',
            },
          ],
        },
        // {
        //   id: 294,
        //   parentId: '',
        //   name: 'dashboard',
        //   url: ' ',
        //   icon: 'icon-yibiaopan',
        //   component: '',
        //   path: '',
        //   title: '仪表盘',
        //   menuName: 'dashboard',
        //   level: 1,
        //   menuType: 1,
        //   children: [
        //     {
        //       id: -110,
        //       parentId: 294,
        //       name: 'WorkBench',
        //       url: 'http://www.idaotian.com/box/btv/#/',
        //       icon: 'home',
        //       component: '',
        //       path: 'http://www.idaotian.com/box/btv/#/',
        //       title: '工作台',
        //       menuName: '工作台',
        //     },
        //     {
        //       id: -110,
        //       parentId: 294,
        //       name: 'BocaiTV',
        //       url: 'http://www.idaotian.com/box/btv/#/',
        //       icon: 'home',
        //       component: '',
        //       path: 'http://www.idaotian.com/box/btv/#/',
        //       title: '伯才TV',
        //       menuName: '伯才TV',
        //     },
        //   ],
        // },

        {
          id: 6,
          parentId: '',
          name: 'OrderManagement',
          url: ' ',
          icon: 'icon-gongdanguanli',
          component: '',
          path: '',
          title: '工单管理-',
          menuName: 'OrderManagement',
          level: 1,
          menuType: 1,
          children: [
            {
              id: -110,
              parentId: 294,
              name: 'OrderList',
              url: 'http://www.idaotian.com/box/btv/#/',
              icon: 'home',
              component: '',
              path: 'http://www.idaotian.com/box/btv/#/',
              title: '工单列表-',
              menuName: '工单列表',
            },
          ],
        },
        {
          id: 7,
          parentId: '',
          name: 'BillCenter',
          url: ' ',
          icon: 'icon-zhangdanzhongxin',
          component: '',
          path: '',
          title: '账单中心-',
          menuName: 'BillCenter',
          level: 1,
          menuType: 1,
          children: [
            {
              id: -110,
              parentId: 294,
              name: 'MineBill',
              url: 'http://www.idaotian.com/box/btv/#/',
              icon: 'home',
              component: '',
              path: 'http://www.idaotian.com/box/btv/#/',
              title: '我的账单-',
              menuName: '我的账单',
            },
          ],
        },
        {
          id: 8,
          parentId: '',
          name: 'group',
          url: ' ',
          icon: 'icon-shujutongji',
          component: '',
          path: '',
          title: '数据报表',
          menuName: 'group',
          level: 1,
          menuType: 1,
          children: [
            {
              id: 295,
              parentId: 294,
              name: 'DataStatistics',
              url: '/memberInfo',
              icon: '',
              component: 'home',
              path: '/home',
              title: '团队数据',
              menuName: 'group',
              level: 2,
              menuType: 1,
              children: '',
            },
            {
              id: 402,
              parentId: 294,
              name: 'DataScreen',
              url: '/statistics/dataScreen',
              icon: '',
              component: 'statistics/dataScreen',
              path: '/statistics/dataScreen',
              title: '数据大屏',
              menuName: 'dashboard',
              level: 2,
              menuType: 1,
              children: '',
            },
          ],
        },
        {
          id: 9,
          parentId: '',
          name: 'container',
          url: ' ',
          icon: 'icon-neirongguanli',
          component: '',
          path: '',
          title: '内容管理',
          menuName: 'container',
          level: 1,
          menuType: 1,
          children: [
            {
              id: 295,
              parentId: 294,
              name: 'NotificationCenter',
              url: '/memberInfo',
              icon: '',
              component: 'home',
              path: '/home',
              title: '通知中心',
              menuName: 'container',
              level: 2,
              menuType: 1,
              children: '',
            },
          ],
        },
        {
          id: 10,
          parentId: '',
          name: 'GlobalConfig',
          url: ' ',
          icon: 'icon-tongyongshezhi',
          component: '',
          path: '',
          title: '通用设置',
          menuName: 'GlobalConfig',
          level: 1,
          menuType: 1,
          children: [
            {
              id: -110,
              parentId: 294,
              name: 'BocaiTV',
              url: 'http://www.idaotian.com/box/btv/#/',
              icon: 'home',
              component: '',
              path: 'http://www.idaotian.com/box/btv/#/',
              title: 'TV配置',
              menuName: 'TV配置',
            },
            {
              id: -110,
              parentId: 294,
              name: 'Qiwei',
              url: 'http://www.idaotian.com/box/btv/#/',
              icon: 'home',
              component: '',
              path: 'http://www.idaotian.com/box/btv/#/',
              title: '企微配置-',
              menuName: '企微配置',
            },
            {
              id: -110,
              parentId: 294,
              name: 'NavigationConfig',
              url: 'http://www.idaotian.com/box/btv/#/',
              icon: 'home',
              component: '',
              path: 'http://www.idaotian.com/box/btv/#/',
              title: '导航配置-',
              menuName: '导航配置',
            },
          ],
        },
        {
          id: 11,
          parentId: '',
          name: 'FirmConfig',
          url: ' ',
          icon: 'icon-qiyeshezhi',
          component: '',
          path: '',
          title: '企业设置-',
          menuName: 'GlobalConfig',
          level: 1,
          menuType: 1,
          children: [
            {
              id: -110,
              parentId: 294,
              name: 'FirmInfo',
              url: 'http://www.idaotian.com/box/btv/#/',
              icon: 'home',
              component: '',
              path: 'http://www.idaotian.com/box/btv/#/',
              title: '企业信息-',
              menuName: '企业信息',
            },
          ],
        },
        {
          id: 12,
          parentId: '',
          name: 'ServiceMarket',
          url: ' ',
          icon: 'icon-fuwushichang',
          component: '',
          path: 'ServiceMarket',
          title: '服务市场-',
          menuName: 'ServiceMarket',
          level: 1,
          menuType: 1,
        },
      ],
      openKeys: ['dashboard'],
      userbaseInfo: JSON.parse(localStorage.getItem('LOGIN_DATA')),
      currentPage: '',
      pLeft: '200px',
      pTop: '47px',
      collapsedWidth: 48,
      collapsed: false,
      hideIcon: true,
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {
    console.log(this.$route)
    var _openKey = []
    this.roles.forEach((item) => {
      if (item.children) {
        item.children.forEach((sItem) => {
          if (sItem.name == this.$route.name) {
            _openKey[0] = item.name
          }
        })
      }
    })
    this.openKeys = _openKey
  },
  // 组件方法
  methods: {
    onTrigger(a) {
      this.collapsed = !this.collapsed
      if (this.collapsed) {
        this.pLeft = '48px'
      } else {
        this.pLeft = '200px'
      }
    },
    onBreakpoint(broken) {
      // console.log(broken + "=======");
      // debugger;

      if (broken) {
        this.pLeft = '48px'
      } else {
        this.pLeft = '200px'
      }
    },
    onCollapse(collapsed, type) {
      if (collapsed || type == 'clickTrigger') {
        this.hideIcon = false
        this.collapsedWidth = 0
        this.pLeft = 0
      } else {
        this.hideIcon = true
        this.collapsedWidth = 48
        // this.pLeft = '80px'
      }
    },
    handleClick(e) {
      console.log(e)
      this.openKeys = e.keyPath
      // console.log('click', e.key + "===" + this.sk)

      if (e.key == 13) {
        this.secondmenu = true
      } else {
        this.secondmenu = false
      }
    },
    async logout() {
      try {
        const data = await logoutApi()
        console.log(data)
        if (data.status === 200) {
          localStorage.removeItem('LOGIN_DATA')
          this.reload()
          this.$router.push('/main')
        } else {
          console.log(1)
        }
      } catch (error) {
        console.log(error)
        this.$message.warning(error.message)
      }
    },
    setTitle(e) {
      console.log(e)
      this.currentPage = e
    },
  },
}
</script>

<style scoped lang="less">
@import 'http://matripeweb.oss-cn-hangzhou.aliyuncs.com/antd/ant.css';
@import '//at.alicdn.com/t/c/font_3280016_tiqe2sb1q2.css';

body {
  margin: 0;
  padding: 0;
  background: #f0f2f5;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

.ant-menu {
  // border-right: 1px solid #eee !important;
  &::-webkit-scrollbar {
    width: 0 !important;
  }
}
header.header,
.left-sider {
  font-size: 14px;
}

#littleUse {
  min-height: calc(100vh - 118px);
  min-width: 1080px;
}

.trans {
  -webkit-transition: all 0.2s;
  // height: calc(100vh - 64px);
  min-height: calc(100vh - 64px);
  overflow: hidden;
  background-color: #f0f2f5;
  transition: all 0.2s;
  // padding: 18px;
  // padding-right: 36px;
  // padding-bottom: 0;
  // padding-right: 32px;
  // margin-left: 192px !important;
}

.header {
  background-color: #fff;
  padding: 0;
  width: 100%;
  z-index: 90;
  /*box-shadow: 1px 1px 2px #ddd;*/
  border-bottom: 1px solid #e8e8e8;
}
.logo {
  background: #fff;
  /*border-right: 1px solid #e8e8e8;*/
  border-bottom: 1px solid #e8e8e8;
  position: relative;
  height: 49px;
  overflow: hidden;
  line-height: 48px;
  background: #fff;
  margin-left: -8px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
}

.logo img,
.topLogo {
  height: 18px;
  width: 18px;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  margin-bottom: 3px;
}

.logo h1 {
  font-size: 16px;
  // margin: 0 0 0 4px;
  font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
  font-weight: 500;
  vertical-align: middle;
  display: inline-block;
}

#components-layout-demo-top-side-2 .logo {
  width: 130px !important;
  background: url(http://matripe.oss-cn-beijing.aliyuncs.com/adminlogo.png) !important;
}

.breadcrumb {
  .breadcrumb-menu {
    margin-top: 16px;
  }

  h2 {
    margin-bottom: 0;
    font-size: 20px;
    float: left;
  }
}

.breadcrumb {
  background-color: #fff;
  padding: 16px 24px;
}

.sm-breadcrumb {
  padding: 0 16px;

  .ant-tabs .ant-tabs-small-bar .ant-tabs-nav-container {
    font-size: 12px;
  }

  .breadcrumb-menu.pb0 {
    padding-bottom: 0;
  }

  .ant-tabs-bar {
    border-bottom: 0;
  }

  .breadcrumb h2 {
    margin-bottom: 0;
    font-size: 20px;
    float: left;
  }

  .ant-tabs-bar.ant-tabs-top-bar {
    margin-bottom: 0;
  }
}

.sm-breadcrumb .breadcrumb-menu {
  margin-top: 0px;
  padding: 16px 0;
}

.p30.sm-p30 {
  padding: 16px;
}

/*.ant-modal-body .ant-table-tbody > tr > td,.ant-modal-body .ant-table-thead > tr > th {
   white-space: initial;
}
*/

.ant-table-tbody > tr > td:first-child {
  overflow: initial;
  white-space: initial;
  text-overflow: initial;
}

.specialNullA:empty:before {
  content: '-';
  color: #333;
  cursor: pointer;
}

.header,
.left-sider {
  position: fixed;
  font-size: 12px;
  /*-webkit-box-shadow: 1px 1px 2px #ddd;
    box-shadow: 1px 1px 2px #ddd;*/
}

/deep/.ant-menu-item-group-title {
  padding: 0 !important;
}
.ant-menu-item > a {
  display: block;
  color: unset;
}
.topmenu {
  height: 48px;
}

.ant-layout-header {
  height: 49px;
  line-height: 49px;
}
.logined {
  overflow: hidden;
  // border: 1px solid #eee;
  line-height: 38px;
  font-size: 14px;
  cursor: default;
  &:hover {
    // color: #ff4400;
  }
  img {
    width: 24px;
    height: 24px;
  }
}
.loginbox {
  > div:first-child {
    text-align: left;
    padding-left: 0;
  }
}
/deep/.ant-tag {
  &.ant-tag-checkable:hover {
    // color: #ff4400;
    cursor: pointer;
  }
  &.ant-tag-checkable:active {
    // color: #ff4400;
    background-color: transparent;
  }
  &.ant-tag-checkable-checked {
    background-color: transparent;
    color: #1890ff;
  }
}
/deep/.spinstyle {
  .ant-spin-dot-item {
    background-color: #1890ff !important;
  }
  .ant-spin-text {
    color: #1890ff !important;
  }
}
.backFooter {
  position: unset;
  // bottom: 0;
}
/deep/.ant-breadcrumb {
  .ant-breadcrumb-link {
    a:hover {
      color: unset !important;
    }
  }
}
.ant-layout-sider-trigger {
  color: rgba(0, 0, 0, 0.65);
  background: #fff;
  border-top: 1px solid #f0f0f0;
  border-right: 1px solid #e0e0e0;
  text-align: left;

  .trigger {
    font-size: 18px;
    line-height: 48px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
    padding-left: 16px;
  }

  .trigger:hover,
  .c1890 {
    color: #1890ff;
  }
}
.leftMenu {
  height: 100vh;
  background: #fff;
  /*box-shadow: 1px 1px 2px #ddd;*/
  position: fixed;
  left: 0;
  z-index: 2;
  // border-right: 1px solid #e8e8e8;
}
.ant-menu-inline-collapsed {
  width: 48px;
  > .ant-menu-item {
    padding: 0 16px !important;
  }
  > .ant-menu-submenu {
    > .ant-menu-submenu-title {
    }
  }
}
/deep/.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title {
  padding: 0 16px !important;
}
/deep/.ant-menu-submenu-title {
  color: unset !important;
}
/deep/ .ant-tooltip-open {
  // display: none !important;
  // opacity: 0;
}
</style>