2.0.9 • Published 12 months ago

g-ant-vue v2.0.9

Weekly downloads
-
License
ISC
Repository
-
Last release
12 months ago

介绍

poros是一款使用于东智技术中台的前端插件，根据使用的业务场景对项目进行拓展，以及封装了大量的组件以及工具函数。 1. 插件化：poros是基于ant-design-vue二次封装的前端vue插件。 2. 配置化：支持配置系统参数，以及对项目的router和store进行拓展。 3. 组件化：不仅集成了ant-design-vue的所有组件，也提供了技术中台常用的业务组件以及各种工具函数。

PS：建议使用poros-cli

安装

poros未上传到npm公有库，注意npm源切换到getech私有库

# npm源切换到getech
npm config set registry=http://10.74.20.125:8081/repository/npm-group/
npm install poros

# OR 临时使用getech源
npm --registry http://10.74.20.125:8081/repository/npm-group/ install poros

在项目中使用

poros作为vue插件使用，支持配置。 1. system（必填）：项目运行前，请先确保系统标识已在技术中台-系统管理中注册。 2. store（选填）：poros内部自有一套状态管理。如果传入该项目的store，则作为store的子模块(poros)，自定义的组件可通过store.state.poros访问。

import Vue from 'vue'
import Poros from 'poros'
import App from './App.vue'
import router from './router'
import store from './store'
import logo from '@/assets/images/logo.png'

Vue.config.productionTip = false

Vue.use(Poros, {
  system: { // 系统配置，必填
    code: 'demo', // 系统标识
    name: '前端脚手架', // 系统名称
    logo: logo // 系统logo
  },
  store, // store，选填
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

定制主题

主题的定制方案采用ant-design-vue推荐的方案。由于是webpack的解决方案，所以该插件没有集成。若使用poros-cli创建的项目，有集成该功能。

开发

登录

系统由统一认证中心进行登录和访问，所以poros插件并未集成登录功能，但poros提供了鉴权用的接口以及工具函数给开发者另外进行登录页开发（具体请看api）。或者使用poros-cli生成的项目会集成登录功能。

状态管理

poros内部自有一套状态管理（vuex）维护系统相关的数据，如果开发者期望在自己的组件中访问这些数据，可以配置时传入store，那么这些数据会作为store的子模块（poros）暴露给开发者。

鉴权

poros提供了一个指令（v-action）用于鉴权。在技术中台-角色管理处进行权限分配。如果组件使用了该指令且用户没有对应的权限，则组件不展示。

<template>
<div>
  <button v-action:add>新增</button>
  <button v-action:edit>编辑</button>
</div>
</template>

组件

poros集成了ant-design-vue的组件，只是组件使用时的前缀需要改成p-，例如：

<template>
<div>
  <!-- <a-button type="primary">按钮</a-button> -->
  <p-button type="primary">按钮</p-button>
</div>
</template>

样式名也需要修改为poros-的前缀

.ant-btn {}
// 修改为
.poros-btn {}

大部分组件都可以在ant-design-vue官方文档中找到使用方法，这里就不加赘述。这里仅提供其他业务组件或被改造后的组件的使用方式。

  1. ConfigProvider：配置注入组件

    该组件与ant-design-vue的ConfigProvider组件同名，是经过其二次封装的组件。使用poros的组件都需要被其包裹，由其注入system配置才能使用。建议在App.vue中使用。

    <template>
  <p-config-provider>
    <div id="app">
      <router-view />
    </div>
  </p-config-provider>
</template>

  2. SiderMenu：左侧菜单栏组件

    SiderMenu是对ant-design-vue的layout-sider和tree组件进行封装，使用请用Layout标签包裹。并且该组件依赖router，如果配置时不传router，则该组件无数据内容显示。

    <template>
<p-layout>
  <p-sider-menu :collapsed="collapsed" />
</p-layout>
</template>
<script>
export default {
  data() {
    return {
      collapsed: false
    }
  }
}
</script>

    参数解读：

    • inlineIndent：缩进，缺省值为18
    • logo：是否显示顶部logo，缺省值为true
    • search：是否显示搜索栏，缺省值为true
    • collapsed：是否收起

    该左侧菜单只会渲染系统配置的动态路由，若想显示静态路由，请在router的根节点的meta添加fixed和icon

    import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
      {
          path: '/',
          component: Home,
          meta: {
              fixed: 'sider', // 显示在左侧菜单
              icon: 'pie-chart' // 菜单图标（选填）
          },
          children: [...]
      },
      ...
  ]
})

  3. SysNav：系统导航栏组件

    在顶部展示的系统导航栏，会根据用户的角色获取可以访问的系统，并可以在顶部对系统的显示/隐藏进行配置。

    <template>
<p-layout>
  <p-layout-header>
    <p-sys-nav />
  </p-layout-header>
</p-layout>
</template>

  4. RouterTabs：路由管理组件

    RouterTabs内部集成了keep-alive和router-view，只需把RouterView替换成RouterTabs，就可以对路由进行交互式操作。

    <template>
  <!-- <router-view /> -->
  <p-router-tabs />
</template>
<script>

    参数解读：

    • scroll：是否溢出滚动，缺省值为false
    • no-cache：是否缓存，缺省值为false

  5. SwitchForm：可展开表单组件

    SwitchForm是对ant的FormModel进行封装的行内表单可展开/隐藏的组件，在FormModel的基础上拓展了以下属性：

    • col：一行展示多少列，缺省值为3
    • row：隐藏模式下显示多少行，缺省值为1
    • gutter：表单间距，缺省值为24
    • collapsed：控制展开或收起，缺省值为true

    事件：

    • collapsed：展开/隐藏的回调

    插槽：

    • button：添加到表单右侧的ButtonGroup

    注意：

    • 对FormModel进行二次封装，FormModel的大部分功能（除了labelAlign，layout，labelCol，wrapperCol）都支持使用，只需把标签名换成SwitchForm即可。
    • label的长度为70px，刚好显示4个汉字的长度，如果需要调整请自己设置css样式。
    • 表单左侧会有一个ButtonGroup，如果表单元素大于{col*row}个，则显示展开/收起按钮，另外button插槽也会插入这里。
    <template>
  <p-switch-form :col="col" :row="row" :gutter="24" :model="form" :rules="rules">
    <p-switch-form-item prop="input1">
      <p-input v-model="form.input1"/>
    </p-switch-form-item>
    <p-switch-form-item prop="input2">
      <p-input v-model="form.input2"/>
    </p-switch-form-item>
    <p-switch-form-item prop="input3">
      <p-input v-model="form.input3"/>
    </p-switch-form-item>
    <p-switch-form-item prop="input4">
      <p-input v-model="form.input4"/>
    </p-switch-form-item>
    <template slot="button">
      <p-button type="primary">搜索</p-button>
      <p-button>清空</p-button>
    </template>
  </p-switch-form>
</template>
<script>
export default {
  data() {
    return {
      col: 3,
      row: 1,
      gutter: 24,
      form: {
        input1: '',
        input2: '',
        input3: '',
        input4: ''
      },
      rules: {
        input1: [{required: true, message: '请输入'}]
      }
    }
  }
}
</script>

  6. UserSelect：用户选择器

    UserSelect集成了用户信息接口，弹出模态框快速选择用户。

    <template>
  <p-user-select
    v-model="visible"
    :title="title"
    :checked.sync="uids",
    :max="max"
  />
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      title: "弹出框标题",
      checked: [],
      max: 0
    }
  }
}
</script>

    参数解读：

    • visible(v-model)：是否弹出
    • title：模态框标题，缺省值为"选择用户"
    • checked：被选中的用户信息，请用修饰符sync
    • max：最大选择数量，缺省值为0，不限制

  7. DicSelect：字典组件

    字典组件就是一个集成了字典接口的Select组件，只需要传入字典标识即可获取字典内容，其他配置同Select。

    <template>
  <p-dic-select :code="dicCode" v-model="value"/>
</template>
<script>
export default {
  data() {
    return {
      dicCode: 'demo', // 系统标识
      value: ''
    }
  }
}
</script>

  8. Button.Link：link按钮组件

    ant的link button只有一个主题色，所以给它做了拓展，link按钮支持数种颜色。

    <template>
<p-button-link>primary</p-button-link>
<p-button-link type="success">success</p-button-link>
<p-button-link type="warn">warn</p-button-link>
<p-button-link type="danger">danger</p-button-link>
</template>

  9. 其他组件正在开发中...

工具函数

poros还暴露了一些的工具函数给开发者

  • http & request：axios和请求函数

poros封装了axios暴露给开发者，通过其发起的请求会自动获取token并携带。开发者可以为自己的业务添加拦截器。如果都不需要，可以自己封装请求函数。

import http from 'poros/http'
import { get, post, put, del } from 'poros/http'
import { auth } from 'poros/utils'
import router from '@/router'
const { removeToken } = utils.auth

/** 添加响应拦截器 */
http.interceptors.response.use(res => {
  switch(res.data.code) {
    case 401:
      removeToken()
      const isDev = process.env.NODE_ENV === 'development'
      if(isDev) {
        router.push('/login').catch(() => {})
      } else {
        window.location.href = '/auth'
      }
    default:
      return res
  }
})

/** get */
export function getData(params) {
  return get('/api/data', params)
}
/** post */
export function postData(params) {
  return post('/api/data', params)
}
/** put */
export function putData(params) {
  return put('/api/data', params)
}
/** del */
export function delData(params) {
  return del('/api/data', params)
}
  • api：接口

封装了部分业务接口，具体参数请看接口文档

import { api } from 'poros/utils'
api.getUserInfo(res => {
    // @todo
})
// 根据用户名(手机号)加密密钥
name: getKey
method: GET
path: /api/poros-authcenter/secret/{{username}}

// 登录
name: login
method: POST
path: /api/poros-authcenter/login

// 登出
name: logout
method: GET
path: /api/poros-authcenter/user/logout

// 获取当前登录的用户信息
name: getUserInfo
method: GET
path: /api/poros-authcenter/user/message

// 获取系统菜单列表
name: getMenus
method: GET
path: /api/poros-permission/menu/menus

// 获取角色系统权限
name: getSysUid
method: GET
path: /api/poros-permission/sys/uid

// 获取一级组织
name: getOrgList
method: GET
path: /api/poros-permission/secOrg/list

// 获取子组织
name: getOrgBizList
method: GET
path: /api/poros-permission/secOrg/bizList

// 获取用户列表
name: getUserList
method: GET
path: /api/poros-permission/secStaff/list

// 通过字典code 获取对应的字典
name: getDicByCode
method: GET
path: /api/poros-permission/dict/data/list
  • auth：鉴权

auth提供了三个函数对token进行操作，分别是：

import { auth } from 'poros/utils'

auth.setToken(TOKEN, 'Bearer') // 设置token
auth.getToken() // 获取token
auth.removeToken() // 移除token

  • ls：vue-ls插件，提供给开发者使用，详情请看文档

  • validate：校验函数

封装关于表单校验的正则表达式以及符合ant-form表单校验的校验函数。

import { validate } from 'poros/utils'
ant-design-vueaxioscodemirrorcryptojs-cookiemomentvue-lsvuex
@infinitebrahmanuniverse/nolb-g-@everything-registry/sub-chunk-1715@zalastax/nolb-g-
2.0.9

12 months ago

2.0.8-hx

3 years ago