B端大仓文档

BreadCrumbTab

自定义标签面包屑说明

标签面包屑接收三个入参，当前高亮的数据项，当前标签数组以及当前控制高亮的唯一key,支持删除当前项，点击当前项，删除所有标签，删除其他标签四个事件。数据以及高亮数据逻辑外部处理，内部只负责布局的样式计算和事件的反馈

如何使用

<script setup lang="ts">
interface openMenuItem {
  id: string | number
  name: string
  NoDelete: boolean
  path?: string | null
  icon?: string | null
  appName?: string | null
  subAppId?: number | null
  type?: string | null
  isNoMaster: boolean
}
import { ref } from 'vue'
import { BreadCrumbTab } from '@fs/fui'
const momOpenMenus = ref<openMenuItem[]>([
  {
    "id": 99999999999999,
    "name": "首页",
    "NoDelete": true,
    "path": "/home",
    "icon": null,
    "appName": null,
    "subAppId": null,
    "isNoMaster": true
  },
  {
    "id": 542,
    "name": "设备信息维护",
    "NoDelete": false,
    "path": "/production-equipment/inform-maintain",
    "icon": "",
    "appName": "prod-manage",
    "subAppId": 12,
    "type": "menus_item-normal",
    "isNoMaster": false
  },
  {
    "id": 765,
    "name": "设备数据监控",
    "NoDelete": false,
    "path": "/production-equipment/data-monitoring",
    "icon": null,
    "appName": "prod-manage",
    "subAppId": 12,
    "type": "menus_item-normal",
    "isNoMaster": false
  },
  {
    "id": 195,
    "name": "工艺路线",
    "NoDelete": false,
    "path": "/basicData/processRoute",
    "icon": null,
    "appName": "prod-manage",
    "subAppId": 12,
    "type": "menus_item-normal",
    "isNoMaster": false
  },
  {
    "id": 197,
    "name": "工作中心",
    "NoDelete": false,
    "path": "/basicData/workCenter",
    "icon": null,
    "appName": "prod-manage",
    "subAppId": 12,
    "type": "menus_item-normal",
    "isNoMaster": false
  },
  {
    "id": 196,
    "name": "工序",
    "NoDelete": false,
    "path": "/basicData/process",
    "icon": null,
    "appName": "prod-manage",
    "subAppId": 12,
    "type": "menus_item-normal",
    "isNoMaster": false
  },
  {
    "id": 207,
    "name": "生产检验单",
    "NoDelete": false,
    "path": "/production/inspection",
    "icon": null,
    "appName": "quality-manage",
    "subAppId": 13,
    "type": "menus_item-normal",
    "isNoMaster": false
  },
])
const currentMomMenuActive = ref<openMenuItem>({
  id: 999999999999999,
  name: '首页',
  NoDelete: true,
  path: '/home',
  icon: null,
  appName: null,
  subAppId: null,
  isNoMaster: true,
})
const handleMenuClick = (item: openMenuItem, type: string, arr = []) => {
  currentMomMenuActive.value = item
  if (arr && arr.length > 0) {
    momOpenMenus.value = arr.concat()
  }
  console.log('menuClick:::', item, type, arr)
}
const handleMenuDelete = (item: any) => {
    const menusArr = momOpenMenus.value.concat()
    momOpenMenus.value = menusArr.filter((menu) => menu.id != item.id)
    const index = menusArr.findIndex((menu: openMenuItem) => menu.id == item.id)
    if (currentMomMenuActive.value.id == item.id) {
      // 关闭当前页面，高亮上一个页面
      let current = menusArr[index - 1]
      currentMomMenuActive.value = current
  }
  console.log('menuDelete:::', item)
}
const handleMenuDeleteAll = () => {
  momOpenMenus.value = [{
    "id": 99999999999999,
    "name": "首页",
    "NoDelete": true,
    "path": "/home",
    "icon": null,
    "appName": null,
    "subAppId": null,
    "isNoMaster": true
  }]
  currentMomMenuActive.value = {
    "id": 99999999999999,
    "name": "首页",
    "NoDelete": true,
    "path": "/home",
    "icon": null,
    "appName": null,
    "subAppId": null,
    "isNoMaster": true
  }
  console.log('deleteAll:::')
}
const handleMenuDeleteOther = (item: openMenuItem) => {
  console.log('删除其他:::')
  momOpenMenus.value = momOpenMenus.value.filter((menu) => menu.id == item.id || menu.id == 99999999999999)
}
</script>

<template>
  <BreadCrumbTab
    :momOpenMenus="momOpenMenus"
    :currentMomMenuActive="currentMomMenuActive"
    itemKey="id"
    @m-item-c="handleMenuClick"
    @m-item-d="handleMenuDelete"
    @m-item-all="handleMenuDeleteAll"
    @m-item-other="handleMenuDeleteOther"
  >
  </BreadCrumbTab>
</template>

<style lang="less" scoped></style>

代码演示

基本使用

<template>
  <BreadCrumbTab
    :momOpenMenus="momOpenMenus"
    :currentMomMenuActive="currentMomMenuActive"
    itemKey="id"
    @m-item-c="handleMenuClick"
    @m-item-d="handleMenuDelete"
    @m-item-all="handleMenuDeleteAll"
    @m-item-other="handleMenuDeleteOther"
  >
  </BreadCrumbTab>
</template>
<script setup lang="ts">
export interface openMenuItem {
  id?: string | number // 菜单id
  name: string // 菜单名字
  NoDelete?: boolean // 是否带删除按钮
  path?: string | null // 菜单路径
  icon?: string | null // 菜单图标
  appName?: string | null // 当前子应用名字，没有可以不传
  subAppId?: number | null // 当前微前端子应用id
  type?: string | null // 菜单类型
  isNoMaster?: boolean // 是否是不包含父级的菜单
}
import { ref } from 'vue'
import { BreadCrumbTab } from '@fs/fui'
const momOpenMenus = ref<openMenuItem[]>([
  {
    id: 99999999999999,
    name: "首页",
    NoDelete: true,
    path: "/home",
    icon: null,
    appName: null,
    subAppId: null,
    type: 'menus_item-normal',
    isNoMaster: true,
  },
  {
    id: 542,
    name: "设备信息维护",
    NoDelete: false,
    path: "/production-equipment/inform-maintain",
    icon: "",
    appName: "prod-manage",
    subAppId: 12,
    type: "menus_item-normal",
    isNoMaster: false
  },
  {
    id: 765,
    name: "设备数据监控",
    NoDelete: false,
    path: "/production-equipment/data-monitoring",
    icon: null,
    appName: "prod-manage",
    subAppId: 12,
    type: "menus_item-normal",
    isNoMaster: false,
  },
  {
    "id": 195,
    "name": "工艺路线",
    "NoDelete": false,
    "path": "/basicData/processRoute",
    "icon": null,
    "appName": "prod-manage",
    "subAppId": 12,
    "type": "menus_item-normal",
    "isNoMaster": false
  },
  {
    "id": 197,
    "name": "工作中心",
    "NoDelete": false,
    "path": "/basicData/workCenter",
    "icon": null,
    "appName": "prod-manage",
    "subAppId": 12,
    "type": "menus_item-normal",
    "isNoMaster": false
  },
  {
    "id": 196,
    "name": "工序",
    "NoDelete": false,
    "path": "/basicData/process",
    "icon": null,
    "appName": "prod-manage",
    "subAppId": 12,
    "type": "menus_item-normal",
    "isNoMaster": false
  },
  {
    "id": 207,
    "name": "生产检验单",
    "NoDelete": false,
    "path": "/production/inspection",
    "icon": null,
    "appName": "quality-manage",
    "subAppId": 13,
    "type": "menus_item-normal",
    "isNoMaster": false
  },
])
const currentMomMenuActive = ref<openMenuItem>({
  id: 999999999999999,
  name: '首页',
  NoDelete: true,
  path: '/home',
  icon: null,
  appName: null,
  subAppId: null,
  type: 'menus_item-normal',
  isNoMaster: true,
})
const handleMenuClick = (item: any, type: string, arr = []) => {
  currentMomMenuActive.value = item
  if (arr && arr.length > 0) {
    momOpenMenus.value = arr.concat()
  }
  console.log('menuClick:::', item, type, arr)
}
const handleMenuDelete = (item: any) => {
  const menusArr = momOpenMenus.value.concat()
  momOpenMenus.value = menusArr.filter((menu) => menu.id != item.id)
  const index = menusArr.findIndex((menu: openMenuItem) => menu.id == item.id)
  if (currentMomMenuActive.value.id == item.id) {
    // 关闭当前页面，高亮上一个页面
    let current = menusArr[index - 1]
    currentMomMenuActive.value = current
  }
  console.log('menuDelete:::', item)
}
const handleMenuDeleteAll = () => {
  momOpenMenus.value = [{
    "id": 99999999999999,
    "name": "首页",
    "NoDelete": true,
    "path": "/home",
    "icon": null,
    "appName": null,
    "subAppId": null,
    "isNoMaster": true
  }]
  currentMomMenuActive.value = {
    "id": 99999999999999,
    "name": "首页",
    "NoDelete": true,
    "path": "/home",
    "icon": null,
    "appName": null,
    "subAppId": null,
    "isNoMaster": true
  }
  console.log('deleteAll:::')
}
const handleMenuDeleteOther = (item:openMenuItem) => {
  momOpenMenus.value = momOpenMenus.value.filter((menu) => menu.id == item.id || menu.id == 99999999999999)
  console.log('删除其他:::')
}
</script>
<style lang="less">
.dc-bread-container {
  li + li {
    margin-top: 0;
  }
}
</style>

props

参数	说明	类型	默认值	版本
itemKey	当前高亮key	string
momOpenMenus	标签数组	array	-	-
currentMomMenuActive	当前高亮对象	object	-	-

事件

事件名	说明	回调参数	版本
mItemC	当前点击的标签栏, type是点击的菜单的类型，是横向菜单还是竖向菜单，‘ver’ 是竖向菜单，‘hor’为横向菜单,arr为重排序数组	function(item: openMenuItem, type: string, arr = [])	-
mItemD	删除当前项触发, 返回值为当前删除项	function(item: openMenuItem)	-
mItemAll	删除所有触发	function()	-
mItemOther	删除其他触发，返回值为当前删除项	function(item: openMenuItem)	-

BreadCrumbTab ​

自定义标签面包屑说明 ​

如何使用 ​

代码演示 ​

props ​

事件 ​

BreadCrumbTab

自定义标签面包屑说明

如何使用

代码演示

props

事件