work-order-plugin

vue2工单提交系统插件

相关环境

• Nodejs 版本: v16.15.0

安装

 npm install work-order-plugin

使用

• 在项目main.js中注册

// 插件依赖elementUI，必须从项目里传参进入，防止影响原项目样式以及后续统一样式
import WorkOrderPlugin from 'work-order-plugin'
import 'work-order-plugin/dist/work-order-plugin.css'
import ElementUI from 'element-ui'
Vue.use(WorkOrderPlugin, {
  apiUrl: 'http:/localhost:8080',
  apiKey: 'local-dev',
  apiSecret: 'local-secret',
  ElementUI
})

• 在vue文件中引用

<template>
  <WorkOrderPlugin v-if="showPlugin" :options="options" />
</template>

<script>
export default {
  data() {
    return {
      options: {
        username: '张三',
        showPlugin: false
      }
    }
  },
  mounted() {
    // 获取到用户信息后显示
    setTimeout(() => {
      this.showPlugin = true
    }, 1000)
  }
}
</script>

• 项目配置文件 vue.config.js

// 此项配置仅在本地开发测试软链接关联到项目是必须配置，否则解析会报错
configureWebpack: config => {
  config.resolve.symlinks = false
}

参数说明

| 参数 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | apiUrl | string | 是 | http://localhost:8080 | 后端API地址 | | apiKey | string | 是 | - | 项目所属key | | apiSecret | string | 是 | - | 项目秘钥 | | ElementUI | object | 是 | - | elementUI | | options | object | 否 | {} | options参数见下文 |

options参数说明

| 参数 | 类型 | 必填 | 默认值 | 说明 | |------|------|------|--------|------| | position | string | 否 | right | 位置：right / left | | userId | number / string | 是 | - | 用户id | | userName | string | 否 | - | 用户名称 | | userDepartment | string | 否 | - | 用户部门 | | userPhone | string | 否 | - | 用户手机号 |

本地开发

npm run dev

打包

npm run build

发布到npm

# 此方法需在npm账户上创建令牌
npm config set //registry.npmjs.org/:_authToken=你的令牌
npm run release