web/packages/work-bench-frame

@jianyu/work-bench-frame

管理应用框架, 项目示例已移除，近期本地开发需搭配 @jianyu/work-bench-template 使用

Install

yarn add @jianyu/work-bench-frame

Description

.
├── README.md
├── babel.config.js
├── jsconfig.json
├── package.json
├── packages
│   ├── api
│   │   ├── index.js
│   │   ├── interceptors.js
│   │   └── service.js
│   ├── components
│   │   ├── Empty
│   │   │   └── index.vue
│   │   ├── Loading
│   │   │   └── index.vue
│   │   ├── Menu
│   │   │   └── index.vue
│   │   └── Navbar
│   │       ├── components
│   │       │   ├── item.vue
│   │       │   └── search.vue
│   │       └── index.vue
│   ├── core
│   │   ├── bridge.js
│   │   ├── event-bus.js
│   │   └── index.js
│   ├── index.js
│   ├── layout
│   │   └── work-bench
│   │       ├── content.vue
│   │       ├── index.vue
│   │       └── layout.vue
│   ├── micro-frame
│   │   ├── iframe
│   │   │   ├── layout.vue
│   │   │   └── router.js
│   │   └── qiankun
│   │       ├── layout.vue
│   │       ├── router.js
│   │       └── store.js
│   ├── router
│   │   ├── index.js
│   │   ├── router-interceptor.js
│   │   └── utils.js
│   ├── store
│   │   ├── index.js
│   │   └── modules
│   │       ├── dialog.js
│   │       ├── menu.js
│   │       ├── navbar-search.js
│   │       ├── navbar.js
│   │       └── user.js
│   ├── style
│   │   ├── _variables.scss
│   │   ├── base.scss
│   │   ├── common.scss
│   │   └── index.scss
│   └── utils
│       ├── date.js
│       └── menu.js
├── vue.config.js
└── yarn.lock

Waiting

• 更优的方案同步示例模版
• 完善、同步文档

Hooks

openDialog
onBeforeSelect
onOpenMenu
setMenuType
update-message-count
goSiteMessage
goSiteHome
read-message
click-nav-customer

nav-search

用于顶部导航搜索相关事件通信

该事件名称可通过 store[nav-search] 对应值配置更新

Config

可通过 store[nav-search] 对应值配置更新

// $BRACE 事件交互名称
EVENT_NAME: 'nav-search',
// 是否展示该模块
show: true,
// 输入信息
input: '',
placeholder: '请输入项目名称、企业名称等关键词',
// 搜索类型信息
type: 'bidding',
types: [
  {
    label: '招标采购搜索',
    key: 'bidding',
    submit: (data) => {
        // 自定义对应搜索类型的搜索事件业务逻辑
    }
  },
  {
    label: '企业搜索',
    key: 'company'
  },
  {
    label: '采购单位搜索',
    key: 'buyer'
  },
  {
    label: '供应搜索',
    key: 'supplier'
  }
]

Event

/**
 * 监听 nav-search--input 事件，用于更新nav-search
 * -- data.from - 用于判断是否本组件本身触发的事件通信
 * -- data.type
 * ---- change 用于更新 search 的值
 * ---- submit 用于触发 search 搜索事件
 * ---- value 用于获取 search 的值
 * -- data.params
 * ---- show  - search.show 模块展示
 * ---- type  - search.type 搜索类型 [bidding\标讯搜索]
 * ---- input - search.input 输入框值
 */
 
$on('nav-search', data => {})

$emit('nav-search', data)

// submit 触发的特殊通知事件，可监听该事件进行特殊提交处理，见下方例子
$emit('nav-search-submit', data, next)

example

1. 其他应用如何监听 change 事件

   $BRACE.$on('nav-search', (data) => {})
   

2. 其他应用如何通过 $BRACE 更新输入框值

   $BRACE.$emit('nav-search', {
   type: 'change',
   from: 'test',
   params: {
     input: 'xxxxx',
     show: true
   }
   })
   

3. 其他应用如何通过 $BRACE 获取状态信息

   $BRACE.$emit('nav-search', {
   type: 'value',
   from: 'test',
   callback: value => {
       console.log('ccc', value)
   }
   })
   

4. 其他应用如何通过 $BRACE 自定义提交逻辑

   $BRACE.$on('nav-search-submit', (data, next) => {
   // 默认逻辑
   next(data)
   })
   

Develop

Run Code

# now project
yarn link

# other project use
yarn link @jianyu/work-bench-frame

# other project unused
yarn unlink @jianyu/work-bench-frame

Update Version

• read help doc

  # update version 
  npm publish --registry http://192.168.3.207:4873/