修改

src/lang/zh.js

@@ -1,277 +1,285 @@
 export default {
   route: {
-    dashboard: '首页',
-    introduction: '简述',
-    documentation: '文档',
-    guide: '引导页',
-    permission: '权限测试页',
-    pagePermission: '页面权限',
-    directivePermission: '指令权限',
-    icons: '图标',
-    components: '组件',
-    componentIndex: '介绍',
-    tinymce: '富文本编辑器',
-    markdown: 'Markdown',
-    jsonEditor: 'JSON编辑器',
-    dndList: '列表拖拽',
-    splitPane: 'Splitpane',
-    avatarUpload: '头像上传',
-    dropzone: 'Dropzone',
-    sticky: 'Sticky',
-    countTo: 'CountTo',
-    componentMixin: '小组件',
-    backToTop: '返回顶部',
-    dragDialog: '拖拽 Dialog',
-    dragKanban: '可拖拽看板',
-    charts: '图表',
-    keyboardChart: '键盘图表',
-    lineChart: '折线图',
-    mixChart: '混合图表',
-    example: '综合实例',
-    nested: '路由嵌套',
-    menu1: '菜单1',
-    'menu1-1': '菜单1-1',
-    'menu1-2': '菜单1-2',
-    'menu1-2-1': '菜单1-2-1',
-    'menu1-2-2': '菜单1-2-2',
-    'menu1-3': '菜单1-3',
-    menu2: '菜单2',
-    Table: 'Table',
-    dynamicTable: '动态Table',
-    dragTable: '拖拽Table',
-    inlineEditTable: 'Table内编辑',
-    complexTable: '综合Table',
-    treeTable: '树形表格',
-    customTreeTable: '自定义树表',
-    tab: 'Tab',
-    form: '表单',
-    createArticle: '创建文章',
-    editArticle: '编辑文章',
-    articleList: '文章列表',
-    errorPages: '错误页面',
-    page401: '401',
-    page404: '404',
-    errorLog: '错误日志',
-    excel: 'Excel',
-    exportExcel: 'Export Excel',
-    selectExcel: 'Export Selected',
-    uploadExcel: 'Upload Excel',
-    zip: 'Zip',
-    exportZip: 'Export Zip',
-    theme: '换肤',
-    clipboardDemo: 'Clipboard',
-    i18n: '国际化',
-    permissionManage: '权限管理',
-    adminManage: '用户管理',
-    roleManage: '角色管理',
-    dialysis: '透析管理',
-    paper: '透析管理',
-    advice: '今日医嘱',
-    prepare: '透析准备',
-    dialysisPrintOrder: '打印透析单',
-    details: '透析',
-    data_dictionary: '数据字典',
-    field_config: '字段配置',
-    template: '模版配置',
-    druguse: '医嘱模版',
-    watch: '透析监测',
-    addAdmin: '新增用户',
-    editAdmin: '编辑用户信息',
-    setupPerview: '设置权限',
-    user: '病人管理',
-    createPatient: '新增病人',
-    patientPage: '病人信息',
-    editPatient: '修改病人信息',
-    patient: '病人管理',
-    dialysisSolution: '透析处方',
-    inspection: '检验检查',
-    home: '首页',
-    weight: '干体重',
-    dialysisRecord: '透析记录',
-    scheduling: '排班信息',
-    proeducation: '宣教信息',
-    doctorAdvice: '医嘱信息',
-    dryWeight: '干体重',
-    device: '设备',
-    deviceManage: '设备管理',
-    modemanagement:'型号管理',
-    dialysisMachineManage: '设备管理',
-    workforce: '排班管理',
-    appointment: '排班管理',
-    sign: '治疗签到',
-    remind: '排班提醒',
-    signWeight: '签到称重',
-    deviceZoneManage: '分区管理',
-    deviceGroupManage: '分组管理',
-    deviceNumberManage: '床位管理',
-    service: '我的服务',
-    invoice: '发票管理',
-    invoiceApply: '申请发票',
-    servicePay: '立即支付',
-    serviceOrder: '购买服务',
-    payType: '选择支付方式',
-    weChatPay: '确认支付',
-    completeOrder: '购买结果',
-    orderRecord: '订单详情',
-    recordList: '订单记录',
-    stockManage: '库存管理',
-    goodType: '商品类型',
-    stockIn: '入库管理',
-    stockOut: '出库管理',
-    manufacturer: '厂家',
-    dealer: '经销商',
-    salesReturn: '退货',
-    salesReutrnRecord: '退货记录',
-    warehouseRecord: '入库记录',
-    addStockOut: '出库',
-    cancelStock: '出库退库',
-    cancelStockRecord: '退库记录',
-    stockOutRecord: '出库记录',
-    addStockIn: '入库',
-    stockQuery: '库存查询',
-    workforce_template: '排班模板设置',
-    statistics: '统计分析',
-    config: '库存配置',
-    goodInfo: '商品信息',
-    CourseOfDiseaseManage: '病程管理',
-    RescueRecord: '抢救记录',
-    special_permission_manage: '特殊权限管理',
-    schedule_print: '排班打印',
+    dashboard: "首页",
+    introduction: "简述",
+    documentation: "文档",
+    guide: "引导页",
+    permission: "权限测试页",
+    pagePermission: "页面权限",
+    directivePermission: "指令权限",
+    icons: "图标",
+    components: "组件",
+    componentIndex: "介绍",
+    tinymce: "富文本编辑器",
+    markdown: "Markdown",
+    jsonEditor: "JSON编辑器",
+    dndList: "列表拖拽",
+    splitPane: "Splitpane",
+    avatarUpload: "头像上传",
+    dropzone: "Dropzone",
+    sticky: "Sticky",
+    countTo: "CountTo",
+    componentMixin: "小组件",
+    backToTop: "返回顶部",
+    dragDialog: "拖拽 Dialog",
+    dragKanban: "可拖拽看板",
+    charts: "图表",
+    keyboardChart: "键盘图表",
+    lineChart: "折线图",
+    mixChart: "混合图表",
+    example: "综合实例",
+    nested: "路由嵌套",
+    menu1: "菜单1",
+    "menu1-1": "菜单1-1",
+    "menu1-2": "菜单1-2",
+    "menu1-2-1": "菜单1-2-1",
+    "menu1-2-2": "菜单1-2-2",
+    "menu1-3": "菜单1-3",
+    menu2: "菜单2",
+    Table: "Table",
+    dynamicTable: "动态Table",
+    dragTable: "拖拽Table",
+    inlineEditTable: "Table内编辑",
+    complexTable: "综合Table",
+    treeTable: "树形表格",
+    customTreeTable: "自定义树表",
+    tab: "Tab",
+    form: "表单",
+    createArticle: "创建文章",
+    editArticle: "编辑文章",
+    articleList: "文章列表",
+    errorPages: "错误页面",
+    page401: "401",
+    page404: "404",
+    errorLog: "错误日志",
+    excel: "Excel",
+    exportExcel: "Export Excel",
+    selectExcel: "Export Selected",
+    uploadExcel: "Upload Excel",
+    zip: "Zip",
+    exportZip: "Export Zip",
+    theme: "换肤",
+    clipboardDemo: "Clipboard",
+    i18n: "国际化",
+    permissionManage: "权限管理",
+    adminManage: "用户管理",
+    roleManage: "角色管理",
+    dialysis: "透析管理",
+    paper: "透析管理",
+    advice: "今日医嘱",
+    prepare: "透析准备",
+    dialysisPrintOrder: "打印透析单",
+    details: "透析",
+    data_dictionary: "数据字典",
+    field_config: "字段配置",
+    template: "模版配置",
+    druguse: "医嘱模版",
+    watch: "透析监测",
+    addAdmin: "新增用户",
+    editAdmin: "编辑用户信息",
+    setupPerview: "设置权限",
+    user: "病人管理",
+    createPatient: "新增病人",
+    patientPage: "病人信息",
+    editPatient: "修改病人信息",
+    patient: "病人管理",
+    dialysisSolution: "透析处方",
+    inspection: "检验检查",
+    home: "首页",
+    weight: "干体重",
+    dialysisRecord: "透析记录",
+    scheduling: "排班信息",
+    proeducation: "宣教信息",
+    doctorAdvice: "医嘱信息",
+    dryWeight: "干体重",
+    device: "设备",
+    deviceManage: "设备管理",
+    modemanagement: "型号管理",
+    dialysisMachineManage: "设备管理",
+    workforce: "排班管理",
+    appointment: "排班管理",
+    sign: "治疗签到",
+    remind: "排班提醒",
+    signWeight: "签到称重",
+    deviceZoneManage: "分区管理",
+    deviceGroupManage: "分组管理",
+    deviceNumberManage: "床位管理",
+    service: "我的服务",
+    invoice: "发票管理",
+    invoiceApply: "申请发票",
+    servicePay: "立即支付",
+    serviceOrder: "购买服务",
+    payType: "选择支付方式",
+    weChatPay: "确认支付",
+    completeOrder: "购买结果",
+    orderRecord: "订单详情",
+    recordList: "订单记录",
+    stockManage: "库存管理",
+    goodType: "商品类型",
+    stockIn: "入库管理",
+    stockOut: "出库管理",
+    manufacturer: "厂家",
+    dealer: "经销商",
+    salesReturn: "退货",
+    salesReutrnRecord: "退货记录",
+    warehouseRecord: "入库记录",
+    addStockOut: "出库",
+    cancelStock: "出库退库",
+    cancelStockRecord: "退库记录",
+    stockOutRecord: "出库记录",
+    addStockIn: "入库",
+    stockQuery: "库存查询",
+    workforce_template: "排班模板设置",
+    statistics: "统计分析",
+    config: "库存配置",
+    goodInfo: "商品信息",
+    CourseOfDiseaseManage: "病程管理",
+    RescueRecord: "抢救记录",
+    special_permission_manage: "特殊权限管理",
+    schedule_print: "排班打印",
 
-    stockInOrder: '耗材入库单',
-    salesReturnOrder: '耗材退货单',
-    stockOutOrder: '耗材出库单',
-    cancelStockOrder: '耗材退库单',
-    otherStockInOrder: '其他入库单',
-    otherSalesReturnOrder: '其他退货单',
-    otherStockOutOrder: '其他出库单',
-    otherCancelStockOrder: '其他退库单',
-    stockInOrderAdd: '新增入库单',
-    salesReturnOrderAdd: '新增退货单',
-    stockOutOrderAdd: '新增出库单',
-    cancelStockOrderAdd: '新增退库单',
-    stockInDetail: '入库单详情',
-    salesReturnDetail: '退货单详情',
-    stockOutDetail: '出库单详情',
-    cancelStockDetail: '退库单详情',
-    stockDetail: '出入库明细查询',
+    warehouseReceipt: "出入库单",
+    warehouseReceiptOther: "其他出入库单",
+    stockInOrder: "耗材入库单",
+    salesReturnOrder: "耗材退货单",
+    stockOutOrder: "耗材出库单",
+    cancelStockOrder: "耗材退库单",
+    otherStockInOrder: "其他入库单",
+    otherSalesReturnOrder: "其他退货单",
+    otherStockOutOrder: "其他出库单",
+    otherCancelStockOrder: "其他退库单",
+    stockInOrderAdd: "新增入库单",
+    salesReturnOrderAdd: "新增退货单",
+    stockOutOrderAdd: "新增出库单",
+    cancelStockOrderAdd: "新增退库单",
+    stockInDetail: "入库单详情",
+    salesReturnDetail: "退货单详情",
+    stockOutDetail: "出库单详情",
+    cancelStockDetail: "退库单详情",
+    stockDetail: "出入库明细查询",
 
-    showconfig: '显示配置',
-    user_detail: '使用明细',
-    systemManage: '系统管理',
-    printTemplate: '打印模版',
-    data_upload: '一键上报',
-    fast_upload: '快捷上报',
-    export: '一键导出',
-    upload_config: '质控上报配置',
-    quality_control: '质控上报',
-    remind_print: '排版提醒打印',
-    system_prescription:"透析方案",
+    showconfig: "显示配置",
+    user_detail: "使用明细",
+    systemManage: "系统管理",
+    printTemplate: "打印模版",
+    data_upload: "一键上报",
+    fast_upload: "快捷上报",
+    export: "一键导出",
+    upload_config: "质控上报配置",
+    quality_control: "质控上报",
+    remind_print: "排版提醒打印",
+    system_prescription: "透析方案",
     integration_config: "集成配置",
-    his_config:"HIS集成配置",
-
+    his_config: "HIS集成配置"
   },
   navbar: {
-    logOut: '退出登录',
-    dashboard: '首页',
-    github: '项目地址',
-    screenfull: '全屏',
-    theme: '换肤'
+    logOut: "退出登录",
+    dashboard: "首页",
+    github: "项目地址",
+    screenfull: "全屏",
+    theme: "换肤"
   },
   login: {
-    title: '系统登录',
-    logIn: '登录',
-    username: '账号',
-    password: '密码',
-    any: '随便填',
-    thirdparty: '第三方登录',
-    thirdpartyTips: '本地不能模拟，请结合自己业务进行模拟！！！'
+    title: "系统登录",
+    logIn: "登录",
+    username: "账号",
+    password: "密码",
+    any: "随便填",
+    thirdparty: "第三方登录",
+    thirdpartyTips: "本地不能模拟，请结合自己业务进行模拟！！！"
   },
   documentation: {
-    documentation: '文档',
-    github: 'Github 地址'
+    documentation: "文档",
+    github: "Github 地址"
   },
   permission: {
-    roles: '你的权限',
-    switchRoles: '切换权限'
+    roles: "你的权限",
+    switchRoles: "切换权限"
   },
   guide: {
-    description: '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于',
-    button: '打开引导'
+    description:
+      "引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于",
+    button: "打开引导"
   },
   components: {
-    documentation: '文档',
-    tinymceTips: '富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路，市面上常见的富文本都基本用过了，最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见',
-    dropzoneTips: '由于我司业务有特殊需求，而且要传七牛 所以没用第三方，选择了自己封装。代码非常的简单，具体代码你可以在这里看到 @/components/Dropzone',
-    stickyTips: '当页面滚动到预设的位置会吸附在顶部',
-    backToTopTips1: '页面滚动到指定位置会在右下角出现返回顶部按钮',
-    backToTopTips2: '可自定义按钮的样式、show/hide、出现的高度、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素',
-    imageUploadTips: '由于我在使用时它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的话，优先还是使用官方版本。'
+    documentation: "文档",
+    tinymceTips:
+      "富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路，市面上常见的富文本都基本用过了，最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见",
+    dropzoneTips:
+      "由于我司业务有特殊需求，而且要传七牛 所以没用第三方，选择了自己封装。代码非常的简单，具体代码你可以在这里看到 @/components/Dropzone",
+    stickyTips: "当页面滚动到预设的位置会吸附在顶部",
+    backToTopTips1: "页面滚动到指定位置会在右下角出现返回顶部按钮",
+    backToTopTips2:
+      "可自定义按钮的样式、show/hide、出现的高度、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素",
+    imageUploadTips:
+      "由于我在使用时它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的话，优先还是使用官方版本。"
   },
   table: {
-    dynamicTips1: '固定表头, 按照表头顺序排序',
-    dynamicTips2: '不固定表头, 按照点击顺序排序',
-    dragTips1: '默认顺序',
-    dragTips2: '拖拽后顺序',
-    title: '标题',
-    importance: '重要性',
-    type: '类型',
-    remark: '点评',
-    search: '搜索',
-    add: '新增',
-    export: '导出',
-    reviewer: '审核人',
-    id: '序号',
-    date: '时间',
-    author: '作者',
-    readings: '阅读数',
-    status: '状态',
-    actions: '操作',
-    edit: '编辑',
-    publish: '发布',
-    draft: '草稿',
-    delete: '删除',
-    cancel: '取 消',
-    confirm: '保 存'
+    dynamicTips1: "固定表头, 按照表头顺序排序",
+    dynamicTips2: "不固定表头, 按照点击顺序排序",
+    dragTips1: "默认顺序",
+    dragTips2: "拖拽后顺序",
+    title: "标题",
+    importance: "重要性",
+    type: "类型",
+    remark: "点评",
+    search: "搜索",
+    add: "新增",
+    export: "导出",
+    reviewer: "审核人",
+    id: "序号",
+    date: "时间",
+    author: "作者",
+    readings: "阅读数",
+    status: "状态",
+    actions: "操作",
+    edit: "编辑",
+    publish: "发布",
+    draft: "草稿",
+    delete: "删除",
+    cancel: "取 消",
+    confirm: "保 存"
   },
   errorLog: {
-    tips: '请点击右上角bug小图标',
-    description: '现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常，你可以在其中进行错误处理或者异常上报。',
-    documentation: '文档介绍'
+    tips: "请点击右上角bug小图标",
+    description:
+      "现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常，你可以在其中进行错误处理或者异常上报。",
+    documentation: "文档介绍"
   },
   excel: {
-    export: '导出',
-    selectedExport: '导出已选择项',
-    placeholder: '请输入文件名(默认excel-list)'
+    export: "导出",
+    selectedExport: "导出已选择项",
+    placeholder: "请输入文件名(默认excel-list)"
   },
   zip: {
-    export: '导出',
-    placeholder: '请输入文件名(默认file)'
+    export: "导出",
+    placeholder: "请输入文件名(默认file)"
   },
   theme: {
-    change: '换肤',
-    documentation: '换肤文档',
-    tips: 'Tips: 它区别于 navbar 上的 theme-pick, 是两种不同的换肤方法，各自有不同的应用场景，具体请参考文档。'
+    change: "换肤",
+    documentation: "换肤文档",
+    tips:
+      "Tips: 它区别于 navbar 上的 theme-pick, 是两种不同的换肤方法，各自有不同的应用场景，具体请参考文档。"
   },
   tagsView: {
-    close: '关闭',
-    closeOthers: '关闭其它',
-    closeAll: '关闭所有'
+    close: "关闭",
+    closeOthers: "关闭其它",
+    closeAll: "关闭所有"
   },
   data_config: {
-    patient: '病人管理',
-    scheduling: '排班管理',
-    device: '设备管理',
-    hemodialysis: '血透管理',
-    system: '系统配置',
-    education: '透后宣教',
-    summary: '透析小结',
-    config_name: '名称',
-    config_field: '字段名',
-    config_value: '字段值',
-    remark: '备注',
-    course_disease: '病程',
-    rescue_record: '抢救记录',
-    manage_ment: '设备管理'
+    patient: "病人管理",
+    scheduling: "排班管理",
+    device: "设备管理",
+    hemodialysis: "血透管理",
+    system: "系统配置",
+    education: "透后宣教",
+    summary: "透析小结",
+    config_name: "名称",
+    config_field: "字段名",
+    config_value: "字段值",
+    remark: "备注",
+    course_disease: "病程",
+    rescue_record: "抢救记录",
+    manage_ment: "设备管理"
   }
-}
+};

src/router/modules/stock.js

@@ -1,145 +1,189 @@
-import Layout from '@/views/layout/Layout'
+import Layout from "@/views/layout/Layout";
 
 export default {
-  path: '/stock/',
+  path: "/stock",
   component: Layout,
-  redirect: 'noredirect',
-  name: 'stockManage',
+  redirect: "noredirect",
+  name: "stockManage",
   alwaysShow: true,
   meta: {
-    title: 'stockManage',
-    icon: 'stock'
+    title: "stockManage",
+    icon: "stock",
+    isChild: true
   },
   children: [
     {
-      path: '/stock/in',
-      component: () => import('@/xt_pages/stock/stockInOrder'),
-      name: 'stockInOrder',
-      meta: { title: 'stockInOrder', noCache: true }
-    }, {
-      path: '/stock/return',
-      component: () => import('@/xt_pages/stock/salesReturnOrder'),
-      name: 'salesReturnOrder',
-      meta: { title: 'salesReturnOrder', noCache: true }
+      path: "/stock/a",
+      component: Layout,
+      redirect: "noredirect",
+      name: "warehouseReceipt",
+      meta: {
+        isChild: true,
+        title: "warehouseReceipt"
+      },
+      children: [
+        {
+          path: "/stock/a/in",
+          component: () => import("@/xt_pages/stock/stockInOrder"),
+          name: "stockInOrder",
+          meta: { title: "stockInOrder", noCache: true }
+        },
+        {
+          path: "/stock/return",
+          component: () => import("@/xt_pages/stock/salesReturnOrder"),
+          name: "salesReturnOrder",
+          meta: { title: "salesReturnOrder", noCache: true }
+        },
+        {
+          path: "/stock/out",
+          component: () => import("@/xt_pages/stock/stockOutOrder"),
+          name: "stockOutOrder",
+          meta: { title: "stockOutOrder", noCache: true }
+        },
+        {
+          path: "/stock/cancel",
+          component: () => import("@/xt_pages/stock/cancelStockOrder"),
+          name: "cancelStockOrder",
+          meta: { title: "cancelStockOrder", noCache: true }
+        }
+      ]
+    },
+    {
+      path: "/stock/",
+      component: Layout,
+      redirect: "noredirect",
+      name: "warehouseReceiptOther",
+      meta: {
+        isChild: true,
+        title: "warehouseReceiptOther"
+      },
+      children: [
+        {
+          path: "/stock/in/other",
+          component: () => import("@/xt_pages/stock/otherStockInOrder"),
+          name: "otherStockInOrder",
+          meta: { title: "otherStockInOrder", noCache: true }
+        },
+        {
+          path: "/stock/return/other",
+          component: () => import("@/xt_pages/stock/otherSalesReturnOrder"),
+          name: "otherSalesReturnOrder",
+          meta: { title: "otherSalesReturnOrder", noCache: true }
+        },
+        {
+          path: "/stock/out/other",
+          component: () => import("@/xt_pages/stock/otherStockOutOrder"),
+          name: "otherStockOutOrder",
+          meta: { title: "otherStockOutOrder", noCache: true }
+        },
+        {
+          path: "/stock/cancel/other",
+          component: () => import("@/xt_pages/stock/otherCancelStockOrder"),
+          name: "otherCancelStockOrder",
+          meta: { title: "otherCancelStockOrder", noCache: true }
+        }
+      ]
+    },
+    {
+      path: "/stock/query",
+      component: () => import("@/xt_pages/stock/stockQuery"),
+      name: "stockQuery",
+      meta: { title: "stockQuery", noCache: true }
+    },
+    {
+      path: "/stock/detail",
+      component: () => import("@/xt_pages/stock/stockDetailIndex"),
+      name: "stockDetail",
+      meta: { title: "stockDetail", noCache: true }
     },
     {
-      path: '/stock/out',
-      component: () => import('@/xt_pages/stock/stockOutOrder'),
-      name: 'stockOutOrder',
-      meta: { title: 'stockOutOrder', noCache: true }
-    }, {
-      path: '/stock/cancel',
-      component: () => import('@/xt_pages/stock/cancelStockOrder'),
-      name: 'cancelStockOrder',
-      meta: { title: 'cancelStockOrder', noCache: true }
-    }, {
-      path: '/stock/in/other',
-      component: () => import('@/xt_pages/stock/otherStockInOrder'),
-      name: 'otherStockInOrder',
-      meta: { title: 'otherStockInOrder', noCache: true }
-    }, {
-      path: '/stock/return/other',
-      component: () => import('@/xt_pages/stock/otherSalesReturnOrder'),
-      name: 'otherSalesReturnOrder',
-      meta: { title: 'otherSalesReturnOrder', noCache: true }
-    }, {
-      path: '/stock/out/other',
-      component: () => import('@/xt_pages/stock/otherStockOutOrder'),
-      name: 'otherStockOutOrder',
-      meta: { title: 'otherStockOutOrder', noCache: true }
-    }, {
-      path: '/stock/cancel/other',
-      component: () => import('@/xt_pages/stock/otherCancelStockOrder'),
-      name: 'otherCancelStockOrder',
-      meta: { title: 'otherCancelStockOrder', noCache: true }
-    }, {
-      path: '/stock/query',
-      component: () => import('@/xt_pages/stock/stockQuery'),
-      name: 'stockQuery',
-      meta: { title: 'stockQuery', noCache: true  }
-    }, {
-      path: '/stock/detail',
-      component: () => import('@/xt_pages/stock/stockDetailIndex'),
-      name: 'stockDetail',
-      meta: { title: 'stockDetail', noCache: true  }
-    }, {
-      path: '/stock/in/add',
-      component: () => import('@/xt_pages/stock/stockInOrderAdd'),
-      name: 'stockInOrderAdd',
+      path: "/stock/in/add",
+      component: () => import("@/xt_pages/stock/stockInOrderAdd"),
+      name: "stockInOrderAdd",
       hidden: true,
       is_menu: false,
-      meta: { title: 'stockInOrderAdd', noCache: true }
-    }, {
-      path: '/stock/in/detail',
-      component: () => import('@/xt_pages/stock/stockInDetail'),
-      name: 'stockInDetail',
+      meta: { title: "stockInOrderAdd", noCache: true }
+    },
+    {
+      path: "/stock/in/detail",
+      component: () => import("@/xt_pages/stock/stockInDetail"),
+      name: "stockInDetail",
       hidden: true,
       is_menu: false,
-      meta: { title: 'stockInDetail', noCache: true  }
-    }, {
-      path: '/stock/return/detail',
-      component: () => import('@/xt_pages/stock/salesReturnDetail'),
-      name: 'salesReturnDetail',
+      meta: { title: "stockInDetail", noCache: true }
+    },
+    {
+      path: "/stock/return/detail",
+      component: () => import("@/xt_pages/stock/salesReturnDetail"),
+      name: "salesReturnDetail",
       hidden: true,
       is_menu: false,
-      meta: { title: 'salesReturnDetail', noCache: true  }
-    }, {
-      path: '/stock/return/add',
-      component: () => import('@/xt_pages/stock/salesReturnOrderAdd'),
-      name: 'salesReturnOrderAdd',
+      meta: { title: "salesReturnDetail", noCache: true }
+    },
+    {
+      path: "/stock/return/add",
+      component: () => import("@/xt_pages/stock/salesReturnOrderAdd"),
+      name: "salesReturnOrderAdd",
       hidden: true,
       is_menu: false,
-      meta: { title: 'salesReturnOrderAdd', noCache: true }
-    }, {
-      path: '/stock/out/add',
-      component: () => import('@/xt_pages/stock/stockOutOrderAdd'),
-      name: 'stockOutOrderAdd',
+      meta: { title: "salesReturnOrderAdd", noCache: true }
+    },
+    {
+      path: "/stock/out/add",
+      component: () => import("@/xt_pages/stock/stockOutOrderAdd"),
+      name: "stockOutOrderAdd",
       hidden: true,
       is_menu: false,
-      meta: { title: 'stockOutOrderAdd', noCache: true }
-    }, {
-      path: '/stock/out/detail',
-      component: () => import('@/xt_pages/stock/stockOutDetail'),
-      name: 'stockOutDetail',
+      meta: { title: "stockOutOrderAdd", noCache: true }
+    },
+    {
+      path: "/stock/out/detail",
+      component: () => import("@/xt_pages/stock/stockOutDetail"),
+      name: "stockOutDetail",
       hidden: true,
       is_menu: false,
-      meta: { title: 'stockOutDetail', noCache: true }
-    }, {
-      path: '/stock/cancel/add',
-      component: () => import('@/xt_pages/stock/cancelStockOrderAdd'),
-      name: 'cancelStockOrderAdd',
+      meta: { title: "stockOutDetail", noCache: true }
+    },
+    {
+      path: "/stock/cancel/add",
+      component: () => import("@/xt_pages/stock/cancelStockOrderAdd"),
+      name: "cancelStockOrderAdd",
       hidden: true,
       is_menu: false,
-      meta: { title: 'cancelStockOrderAdd', noCache: true }
-    }, {
-      path: '/stock/cancel/detail',
-      component: () => import('@/xt_pages/stock/cancelStockDetail'),
-      name: 'cancelStockDetail',
+      meta: { title: "cancelStockOrderAdd", noCache: true }
+    },
+    {
+      path: "/stock/cancel/detail",
+      component: () => import("@/xt_pages/stock/cancelStockDetail"),
+      name: "cancelStockDetail",
       hidden: true,
       is_menu: false,
-      meta: { title: 'cancelStockDetail', noCache: true }
-    }, {
-      path: '/stock/config',
-      component: () => import('@/xt_pages/stock/index'),
-      name: 'config',
-      meta: { title: 'config', noCache: true  }
-    }, {
-      path: '/stock/print',
-      component: () => import('@/xt_pages/stock/detail/print'),
+      meta: { title: "cancelStockDetail", noCache: true }
+    },
+    {
+      path: "/stock/config",
+      component: () => import("@/xt_pages/stock/index"),
+      name: "config",
+      meta: { title: "config", noCache: true }
+    },
+    {
+      path: "/stock/print",
+      component: () => import("@/xt_pages/stock/detail/print"),
       hidden: true,
       is_menu: false,
-      name: 'stock_print',
+      name: "stock_print",
       meta: {
-        title: '库存打印',
+        title: "库存打印",
         noCache: true
       }
-    },{
-      path: '/stock/user/detail',
-      component: () => import('@/xt_pages/stock/stockUserDetail'),
-      name: 'user_detail',
+    },
+    {
+      path: "/stock/user/detail",
+      component: () => import("@/xt_pages/stock/stockUserDetail"),
+      name: "user_detail",
       hidden: true,
       is_menu: false,
-      meta: { title: 'user_detail', noCache: true  }
+      meta: { title: "user_detail", noCache: true }
     }
   ]
-}
+};

src/styles/sidebar.scss

@@ -2,7 +2,7 @@
   // 主体区域
   .main-container {
     min-height: 100%;
-    transition: margin-left .28s;
+    transition: margin-left 0.28s;
     margin-left: 150px;
     position: relative;
   }
@@ -20,10 +20,11 @@
     overflow: hidden;
     //reset element-ui css
     .horizontal-collapse-transition {
-      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+      transition: 0s width ease-in-out, 0s padding-left ease-in-out,
+        0s padding-right ease-in-out;
     }
     .scrollbar-wrapper {
-      overflow-x: hidden!important;
+      overflow-x: hidden !important;
       .el-scrollbar__view {
         height: 100%;
         .hamburger-container {
@@ -51,45 +52,45 @@
       width: 100% !important;
     }
   }
-  .hideSidebar {
-    .sidebar-container {
-      width: 36px !important;
-    }
-    .main-container {
-      margin-left: 36px;
-    }
-    .submenu-title-noDropdown {
-      padding-left: 10px !important;
-      position: relative;
-      .el-tooltip {
-        padding: 0 10px !important;
-      }
-    }
-    .el-submenu {
-      overflow: hidden;
-      &>.el-submenu__title {
-        padding-left: 10px !important;
-        
-        .el-submenu__icon-arrow {
-          display: none;
-        }
-      }
-    }
-    .el-menu--collapse {
-      .el-submenu {
-        &>.el-submenu__title {
-          &>span {
-            height: 0;
-            width: 0;
-            overflow: hidden;
-            visibility: hidden;
-            display: inline-block;
-          }
-        }
-      }
-    }
-  }
-  .sidebar-container .nest-menu .el-submenu>.el-submenu__title,
+  // .hideSidebar {
+  //   .sidebar-container {
+  //     width: 36px !important;
+  //   }
+  //   // .main-container {
+  //   //   margin-left: 36px;
+  //   // }
+  //   .submenu-title-noDropdown {
+  //     padding-left: 10px !important;
+  //     position: relative;
+  //     .el-tooltip {
+  //       padding: 0 10px !important;
+  //     }
+  //   }
+  //   .el-submenu {
+  //     overflow: hidden;
+  //     & > .el-submenu__title {
+  //       padding-left: 10px !important;
+
+  //       .el-submenu__icon-arrow {
+  //         display: none;
+  //       }
+  //     }
+  //   }
+  //   .el-menu--collapse {
+  //     .el-submenu {
+  //       & > .el-submenu__title {
+  //         & > span {
+  //           height: 0;
+  //           width: 0;
+  //           overflow: hidden;
+  //           visibility: hidden;
+  //           display: inline-block;
+  //         }
+  //       }
+  //     }
+  //   }
+  // }
+  .sidebar-container .nest-menu .el-submenu > .el-submenu__title,
   .sidebar-container .el-submenu .el-menu-item {
     // min-width: 180px !important;
     background-color: $subMenuBg !important;
@@ -107,7 +108,7 @@
       margin-left: 0px;
     }
     .sidebar-container {
-      transition: transform .28s;
+      transition: transform 0.28s;
       width: 180px !important;
     }
     &.hideSidebar {

src/views/layout/Layout.vue

@@ -1,24 +1,29 @@
 <template>
   <div class="app-wrapper" :class="classObj">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"></div>
-      <navbar></navbar>
+    <div
+      v-if="device === 'mobile' && sidebar.opened"
+      class="drawer-bg"
+      @click="handleClickOutside"
+    ></div>
+    <navbar></navbar>
 
     <div class="Header-container">
-    <sidebar class="sidebar-container"></sidebar>
-    <div class="main-container">
-      <tags-view></tags-view>
-      <app-main></app-main>
+      <sidebar class="sidebar-container" @callBackIndex="handleIndex"></sidebar>
+      <!-- <sidebar class="newSide" @callBackIndex="handleIndex"></sidebar> -->
+      <div class="main-container">
+        <tags-view :index="index"></tags-view>
+        <app-main></app-main>
+      </div>
     </div>
-   </div>
   </div>
 </template>
 
 <script>
-import { Navbar, Sidebar, AppMain, TagsView } from './components'
-import ResizeMixin from './mixin/ResizeHandler'
+import { Navbar, Sidebar, AppMain, TagsView } from "./components";
+import ResizeMixin from "./mixin/ResizeHandler";
 
 export default {
-  name: 'layout',
+  name: "layout",
   components: {
     Navbar,
     Sidebar,
@@ -28,47 +33,66 @@ export default {
   mixins: [ResizeMixin],
   computed: {
     sidebar() {
-      return this.$store.state.app.sidebar
+      return this.$store.state.app.sidebar;
     },
     device() {
-      return this.$store.state.app.device
+      return this.$store.state.app.device;
     },
     classObj() {
       return {
         hideSidebar: !this.sidebar.opened,
         openSidebar: this.sidebar.opened,
         withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === 'mobile'
-      }
+        mobile: this.device === "mobile"
+      };
     }
   },
+  data() {
+    return {
+      index: 0
+    };
+  },
   methods: {
     handleClickOutside() {
-      this.$store.dispatch('closeSideBar', { withoutAnimation: false })
+      this.$store.dispatch("closeSideBar", { withoutAnimation: false });
+    },
+    handleIndex(data) {
+      // console.log({ prop: data });
+      this.index = data;
     }
   }
-}
+};
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  @import "src/styles/mixin.scss";
-  .app-wrapper {
-    @include clearfix;
-    // position: relative;
-    height: 100%;
-    width: 100%;
-    // &.mobile.openSidebar{
-    //   position: fixed;
-    //   top: 0;
-    // }
-  }
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
+@import "src/styles/mixin.scss";
+.app-wrapper {
+  @include clearfix;
+  // position: relative;
+  height: 100%;
+  width: 100%;
+  // &.mobile.openSidebar{
+  //   position: fixed;
+  //   top: 0;
+  // }
+}
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
+.newSide {
+  width: 150px !important;
+  height: 100%;
+  position: fixed;
+  top: 60px;
+  bottom: 0;
+  left: 0;
+  z-index: 1001;
+  overflow: hidden;
+}
 </style>

src/views/layout/components/Sidebar/SidebarItem.vue

@@ -1,40 +1,129 @@
 <template>
-  <div v-if="!item.hidden&&item.children" class="menu-wrapper">
-
-      <router-link v-if="hasOneShowingChild(item.children) && !onlyOneChild.children&&!item.alwaysShow" :to="resolvePath(onlyOneChild.path)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <svg-icon v-if="onlyOneChild.meta&&onlyOneChild.meta.icon" :icon-class="onlyOneChild.meta.icon"></svg-icon>
-          <span v-if="onlyOneChild.meta&&onlyOneChild.meta.title" slot="title">{{generateTitle(onlyOneChild.meta.title)}}</span>
+  <div v-if="!item.hidden && item.children" class="menu-wrapper">
+    <div
+      v-if="
+        hasOneShowingChild(item.children) &&
+          !onlyOneChild.children &&
+          !item.alwaysShow
+      "
+      @click="onClick(item)"
+    >
+      <router-link :to="resolvePath(onlyOneChild.path)">
+        <el-menu-item
+          :index="resolvePath(onlyOneChild.path)"
+          :class="{ 'submenu-title-noDropdown': !isNest }"
+        >
+          <svg-icon
+            v-if="onlyOneChild.meta && onlyOneChild.meta.icon"
+            :icon-class="onlyOneChild.meta.icon"
+          ></svg-icon>
+          <span
+            v-if="onlyOneChild.meta && onlyOneChild.meta.title"
+            slot="title"
+            >{{ generateTitle(onlyOneChild.meta.title) }}</span
+          >
         </el-menu-item>
       </router-link>
+    </div>
 
-      <el-submenu v-else :index="item.name||item.path">
+    <div v-else>
+      <el-submenu
+        v-if="item.meta.isChild"
+        id="mySubmenu"
+        :index="item.name || item.path"
+      >
         <template slot="title">
-          <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
-          <span v-if="item.meta&&item.meta.title" slot="title">{{generateTitle(item.meta.title)}}</span>
+          <svg-icon
+            v-if="item.meta && item.meta.icon"
+            :icon-class="item.meta.icon"
+          ></svg-icon>
+          <span v-if="item.meta && item.meta.title" slot="title">{{
+            generateTitle(item.meta.title)
+          }}</span>
         </template>
-
         <template v-for="child in item.children" v-if="!child.hidden">
-          <sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :item="child" :key="child.path" :base-path="resolvePath(child.path)"></sidebar-item>
+          <router-link
+            :to="resolvePath(child.path)"
+            v-if="child.meta.isChild != true"
+            :key="child.name"
+          >
+            <el-menu-item :index="resolvePath(child.path)">
+              <svg-icon
+                v-if="child.meta && child.meta.icon"
+                :icon-class="child.meta.icon"
+              ></svg-icon>
+              <span v-if="child.meta && child.meta.title" slot="title">{{
+                generateTitle(child.meta.title)
+              }}</span>
+            </el-menu-item>
+          </router-link>
 
-          <router-link v-else :to="resolvePath(child.path)" :key="child.name">
+          <router-link
+            v-else
+            :to="resolvePath(child.children[0].path)"
+            :key="child.name"
+          >
             <el-menu-item :index="resolvePath(child.path)">
-              <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
-              <span v-if="child.meta&&child.meta.title" slot="title">{{generateTitle(child.meta.title)}}</span>
+              <svg-icon
+                v-if="child.meta && child.meta.icon"
+                :icon-class="child.meta.icon"
+              ></svg-icon>
+              <span v-if="child.meta && child.meta.title" slot="title">{{
+                generateTitle(child.meta.title)
+              }}</span>
             </el-menu-item>
           </router-link>
         </template>
       </el-submenu>
+      <div v-else @click="onClick(item)">
+        <router-link :to="resolvePath(item.children[0].path)">
+          <el-menu-item :index="item.name || item.path">
+            <template slot="title">
+              <svg-icon
+                v-if="item.meta && item.meta.icon"
+                :icon-class="item.meta.icon"
+              ></svg-icon>
+              <span v-if="item.meta && item.meta.title" slot="title">{{
+                generateTitle(item.meta.title)
+              }}</span>
+            </template>
+
+            <!-- <template v-for="child in item.children" v-if="!child.hidden">
+        <sidebar-item
+          :is-nest="true"
+          class="nest-menu"
+          v-if="child.children && child.children.length > 0"
+          :item="child"
+          :key="child.path"
+          :base-path="resolvePath(child.path)"
+        ></sidebar-item>
 
+        <router-link v-else :to="resolvePath(child.path)" :key="child.name">
+          <el-menu-item :index="resolvePath(child.path)">
+            <svg-icon
+              v-if="child.meta && child.meta.icon"
+              :icon-class="child.meta.icon"
+            ></svg-icon>
+            <span v-if="child.meta && child.meta.title" slot="title">{{
+              generateTitle(child.meta.title)
+            }}</span>
+          </el-menu-item>
+        </router-link>
+      </template> -->
+          </el-menu-item>
+        </router-link>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import path from 'path'
-import { generateTitle } from '@/utils/i18n'
+import path from "path";
+import { generateTitle } from "@/utils/i18n";
+import { mapGetters } from "vuex";
 
 export default {
-  name: 'SidebarItem',
+  name: "SidebarItem",
   props: {
     // route object
     item: {
@@ -47,35 +136,86 @@ export default {
     },
     basePath: {
       type: String,
-      default: ''
+      default: ""
+    },
+    index: {
+      type: Number
     }
   },
+  computed: {
+    ...mapGetters(["permission_routers"])
+  },
   data() {
     return {
       onlyOneChild: null
-    }
+    };
   },
   methods: {
     hasOneShowingChild(children) {
       const showingChildren = children.filter(item => {
         if (item.hidden) {
-          return false
+          return false;
         } else {
           // temp set(will be used if only has one showing child )
-          this.onlyOneChild = item
-          return true
+          this.onlyOneChild = item;
+          return true;
         }
-      })
+      });
       if (showingChildren.length === 1) {
-        return true
+        return true;
       }
-      return false
+      return false;
     },
     resolvePath(...paths) {
-      return path.resolve(this.basePath, ...paths)
+      return path.resolve(this.basePath, ...paths);
     },
-    generateTitle
-  }
-}
+    generateTitle,
+    onClick(index) {
+      this.permission_routers.map((item, i) => {
+        if (this.isObjectValueEqual(item, index)) {
+          this.$emit("a", i);
+        }
+      });
+    },
+    isObjectValueEqual(a, b) {
+      var aProps = Object.getOwnPropertyNames(a);
+      var bProps = Object.getOwnPropertyNames(b);
+
+      if (aProps.length != bProps.length) {
+        return false;
+      }
+
+      for (var i = 0; i < aProps.length; i++) {
+        var propName = aProps[i];
+
+        if (a[propName] !== b[propName]) {
+          return false;
+        }
+      }
+
+      return true;
+    }
+  },
+  created() {}
+};
 </script>
 
+<style lang="scss">
+#mySubmenu {
+  .el-menu {
+    display: flex;
+    flex-wrap: wrap;
+    > a:nth-child(odd) {
+      width: 40% !important;
+    }
+    > a:nth-child(even) {
+      width: 60% !important;
+    }
+    .el-menu-item {
+      min-width: 0;
+      padding: 0 5px !important;
+      font-size: 12px;
+    }
+  }
+}
+</style>

src/views/layout/components/Sidebar/index.vue

@@ -1,9 +1,13 @@
 <template>
   <el-scrollbar wrapClass="scrollbar-wrapper">
-    <div class="sideColumn">
-       <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>      
-    </div>
-    <el-menu
+    <!-- <div class="sideColumn">
+      <hamburger
+        class="hamburger-container"
+        :toggleClick="toggleSideBar"
+        :isActive="sidebar.opened"
+      ></hamburger>
+    </div> -->
+    <!-- <el-menu
       mode="vertical"
       :unique-opened="uniqueOpened"
       :show-timeout="200"
@@ -12,77 +16,183 @@
       background-color="#304156"
       text-color="#bfcbd9"
       active-text-color="#409EFF"
+    > -->
+    <el-menu
+      mode="vertical"
+      :unique-opened="uniqueOpened"
+      :show-timeout="200"
+      :default-active="$route.path"
+      background-color="#304156"
+      text-color="#bfcbd9"
+      active-text-color="#409EFF"
     >
-      <sidebar-item v-for="route in permission_routers" :key="route.name" :item="route" :base-path="route.path"></sidebar-item>
+      <sidebar-item
+        v-for="(route, index) in permission_routers"
+        :key="route.name"
+        :item="route"
+        :base-path="route.path"
+        :index="index"
+        @a="b"
+      ></sidebar-item>
     </el-menu>
   </el-scrollbar>
+  <!-- <div class="mianLeft">
+    <div class="logo">
+      <img src="/static/img/logo.8dbb9fd.png" alt="" />
+    </div>
+    <div class="navBox">
+      <div
+        class="navOne"
+        :class="activeClass == index ? 'active' : ''"
+        v-for="(item, index) in permission_routers"
+        :key="item.name"
+        v-if="!item.hidden && item.children"
+      >
+        <div v-if="item.meta" @click="onClick(index)" class="one">
+          <router-link :to="item.children[0].path">
+          <svg-icon
+            v-if="item.meta && item.meta.icon"
+            :icon-class="item.meta.icon"
+          ></svg-icon>
+          <p v-if="item.meta && item.meta.title">
+            {{ generateTitle(item.meta.title) }}
+          </p>
+          </router-link>
+        </div>
+
+        <div v-else @click="onClick(index)">
+          <router-link :to="item.children[0].path" class="one">
+            <svg-icon :icon-class="item.children[0].meta.icon"></svg-icon>
+            <p>
+              {{ generateTitle(item.children[0].meta.title) }}
+            </p>
+          </router-link>
+        </div>
+      </div>
+    </div>
+  </div> -->
 </template>
 
 <script>
 import { mapGetters } from "vuex";
 import SidebarItem from "./SidebarItem";
 import Hamburger from "@/components/Hamburger";
-
+import { generateTitle } from "@/utils/i18n";
 
 export default {
-  components: { SidebarItem,Hamburger },
+  components: { SidebarItem, Hamburger },
   computed: {
     ...mapGetters(["permission_routers", "sidebar"]),
     isCollapse() {
       return !this.sidebar.opened;
     }
   },
-  data(){
-    return{
-      uniqueOpened:true,
-    }
+  data() {
+    return {
+      uniqueOpened: true,
+      activeClass: 0,
+      index: 0
+    };
   },
-  methods:{
+  methods: {
     toggleSideBar() {
       this.$store.dispatch("toggleSideBar");
     },
+    generateTitle,
+    resolvePath(...paths) {
+      return path.resolve(this.basePath, ...paths);
+    },
+    b(index) {
+      // console.log(index);
+      // this.index = index;
+      // this.activeClass = index;
+      this.$emit("callBackIndex", index);
+    }
+  },
+  created() {
+    console.log(1111111121121111111, this.permission_routers);
+    // this.permission_routers.map(item => {
+    //   console.log(item.children);
+    // });
   }
 };
 </script>
 
-<style  rel="stylesheet/scss" lang="scss" scoped>
-.sideColumn{
-  background-color: rgb(48, 65, 86);
-.head {
-  text-align: center;
-  padding: 20px 0 0 0;
-  .tx {
-    .img {
-      width: 45px;
-      height: 45px;
-      border-radius: 50%;
-      -o-object-fit: cover;
-    object-fit: cover;
-    -o-object-position: center;
-    object-position: center;
+<style rel="stylesheet/scss" lang="scss" scoped>
+.mianLeft {
+  width: 150px;
+  height: 100%;
+  overflow-y: auto;
+  background: #304155;
+  .logo {
+    width: 100px;
+    height: 32px;
+    margin: 20px auto 0;
+    img {
+      width: 100%;
+      height: 100%;
+      display: block;
     }
-  } 
-  .title {
-    font-size: 14px;
-    color: #bfcbd9;
-    padding: 10px 10px 15px 10px;
-    line-height: 22px;
-
   }
-}
-.headShrink{
-  .tx{
-    .img{
-      width: 30px;
-      height: 30px;
+  .navBox {
+    display: flex;
+    flex-wrap: wrap;
+    .navOne {
+      width: 50%;
+      height: 75px;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      color: #fff;
+      .one {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        p {
+          margin-top: 10px;
+          font-size: 14px;
+        }
+      }
+    }
+    .active {
+      background: #409eff;
     }
+  }
+}
 
+.sideColumn {
+  background-color: rgb(48, 65, 86);
+  .head {
+    text-align: center;
+    padding: 20px 0 0 0;
+    .tx {
+      .img {
+        width: 45px;
+        height: 45px;
+        border-radius: 50%;
+        -o-object-fit: cover;
+        object-fit: cover;
+        -o-object-position: center;
+        object-position: center;
+      }
+    }
+    .title {
+      font-size: 14px;
+      color: #bfcbd9;
+      padding: 10px 10px 15px 10px;
+      line-height: 22px;
+    }
   }
-  .title{
-    display: none;
+  .headShrink {
+    .tx {
+      .img {
+        width: 30px;
+        height: 30px;
+      }
+    }
+    .title {
+      display: none;
+    }
   }
 }
-}
-
 </style>
-

src/views/layout/components/TagsView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tags-view-container">
-    <scroll-pane class="tags-view-wrapper" ref="scrollPane">
+    <!-- <scroll-pane class="tags-view-wrapper" ref="scrollPane">
       <router-link
         ref="tag"
         class="tags-view-item"
@@ -25,44 +25,86 @@
       <li @click="closeSelectedTag(selectedTag)">{{ $t("tagsView.close") }}</li>
       <li @click="closeOthersTags">{{ $t("tagsView.closeOthers") }}</li>
       <li @click="closeAllTags">{{ $t("tagsView.closeAll") }}</li>
-    </ul>
+    </ul> -->
+    <div class="tags-view-wrapper">
+      <div class="tagsBox">
+        <div
+          class="tagsOne"
+          v-if="permission_routers[newIndex].meta"
+          v-for="(item, i) in permission_routers[newIndex].children"
+          :key="i"
+        >
+          <router-link :to="item.path" v-if="!item.hidden && !item.is_menu">
+            <p
+              class="newTags"
+              :class="activeClass == i ? 'active' : ''"
+              @click="onClick(i)"
+            >
+              {{ generateTitle(item.meta.title) }}
+            </p>
+          </router-link>
+        </div>
+        <div v-else class="tagsOne">
+          <p
+            class="newTags"
+            :class="activeClass == i ? 'active' : ''"
+            @click="onClick(i)"
+          >
+            {{
+              generateTitle(permission_routers[newIndex].children[0].meta.title)
+            }}
+          </p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import ScrollPane from "@/components/ScrollPane";
 import { generateTitle } from "@/utils/i18n";
+//
+import { mapGetters } from "vuex";
 
 export default {
+  props: ["index"],
   components: { ScrollPane },
   data() {
     return {
       visible: false,
       top: 0,
       left: 0,
-      selectedTag: {}
+      selectedTag: {},
+      newIndex: 0,
+      activeClass: ""
     };
   },
   computed: {
-    visitedViews() {
-      return this.$store.state.tagsView.visitedViews;
-    }
+    // visitedViews() {
+    //   return this.$store.state.tagsView.visitedViews;
+    // },
+    ...mapGetters(["permission_routers"])
   },
   watch: {
-    $route() {
-      this.addViewTags();
-      this.moveToCurrentTag();
-    },
-    visible(value) {
-      if (value) {
-        document.body.addEventListener("click", this.closeMenu);
-      } else {
-        document.body.removeEventListener("click", this.closeMenu);
-      }
+    // $route() {
+    //   this.addViewTags();
+    //   this.moveToCurrentTag();
+    // },
+    // visible(value) {
+    //   if (value) {
+    //     document.body.addEventListener("click", this.closeMenu);
+    //   } else {
+    //     document.body.removeEventListener("click", this.closeMenu);
+    //   }
+    // },
+    index(newVal) {
+      this.newIndex = this.index;
     }
   },
   mounted() {
-    this.addViewTags();
+    console.log(111111122111118379487239847, this.permission_routers);
+    console.log(this.permission_routers);
+    // this.addViewTags();
   },
   methods: {
     generateTitle, // generateTitle by vue-i18n
@@ -124,6 +166,10 @@ export default {
     },
     closeMenu() {
       this.visible = false;
+    },
+    onClick(index) {
+      console.log(index);
+      this.activeClass = index;
     }
   }
 };
@@ -144,6 +190,7 @@ export default {
     white-space: normal;
     // right: 0;
     // left: 150px;
+    width: 100%;
 
     /* 针对缺省样式 (必须的) */
     &::-webkit-scrollbar {
@@ -234,6 +281,26 @@ export default {
       }
     }
   }
+  .tagsBox {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    .tagsOne {
+      .newTags {
+        border: 1px solid rgba(235, 238, 240, 1);
+        border-radius: 2px;
+        padding: 8px 12px;
+        margin-left: 10px;
+        font-size: 14px;
+      }
+    }
+    .active {
+      border: 1px solid rgba(64, 158, 255, 1);
+      background: rgba(64, 158, 255, 1);
+      border-radius: 2px;
+      color: #fff;
+    }
+  }
 }
 .scroll-wrapper {
   right: 0;