Saber Vue3集成

因Vue3限制，目前没找到和Vue2一样的静态js引用方式，所有库依赖都放在插件私服组织里的软件包中，需要用npm/yarn来安装。前端配置较多，请耐心阅读。

WARNING

在Vue3版本中，表单设计器、流程设计器以及Saber中的页面都不再与Vue2版本一样依赖Avuejs，表单组件的依赖全部改为NfForm组件，目前只为插件服务，不提供单独的具体用法。基本兼容Avuejs中的form的用法，但也可能存在某些地方的疏漏会导致不可预见的bug，所以！！！介意勿用！！！但为了更好的发展以及更快速集成到其他框架，也必须做出本次改变。所以当大家在使用过程中发现NfForm表单组件有表现不正确的时候欢迎积极提出。NfForm也会积极迭代，包含element-plus和ant-design-vue两个版本。

TIP

Saber3为Vue3版本。
本项目会同步BladeX私服的Saber更新。若您的项目需要使用最新的Saber，插件私服中的此项目可直接使用，只需注意配置前4项。
若不使用插件私服的Saber，以下文档中提到的复制、拷贝均指的是插件私服的Saber3复制到你原有项目的Saber3。

TIP

插件的菜单是协同办公，不是BladeX自带的我的事务和流程管理！！！

1、插件私服创建token

登录插件私服 -> 右上角用户头像 -> 设置 -> 应用 -> 输入令牌名称 -> Select permissions 选择package Read and Write -> 生成令牌

WARNING

token只需要生成一次。
请妥善保管自己的token，泄露可能会导致账号财产丢失。若token泄露，请在应用里把token删掉，重新生成。

2、根目录创建.npmrc文件

若文件存在请进行下一步

3、.npmrc中添加内容

@nutflow:registry=https://git.nutflow.vip/api/packages/blade-workflow/npm/
//git.nutflow.vip/api/packages/blade-workflow/npm/:_authToken={TOKEN}

把{TOKEN}替换成刚才生成的token

WARNING

@saber开头的依赖装不上请查看BladeX的文档或到BladeX群里询问！！！
@saber的token是BladeX私服的token
@nutflow的token是插件私服的token

4、安装依赖

yarnnpm

yarn add @nutflow/nf-form-elp @nutflow/nf-form-design-elp @nutflow/nf-design-elp echarts

npm i @nutflow/nf-form-elp @nutflow/nf-form-design-elp @nutflow/nf-design-elp echarts

安装依赖可能遇到的问题

.npmrc中@nutflow的token不正确，不用怀疑，请仔细检查。例如用了bladex的token或者带了{}。报错如下：

Couldn't find package "@nutflow/nf-form-xxx" on the "npm" registry.
401 Unauthorized - GET https://git.nutflow.vip/api/packages/blade-workflow/npm/@nutflow%2Fnf-design-xxx

.npmrc未配置@nutflow的源，参考2、3步骤。或者.npmrc文件未生效，请自行百度解决。报错如下：

Error: https://registry.npmmirror.com/@nutflow%2Fnf-form-xxx: Not found
Not Found - GET https://registry.npmjs.org/@nutflow%2Fnf-design-xxx - Not found

淘宝镜像源证书过期。npm.taobao.org和registry.npm.taobao.org旧域名于2021年官方公告域名更换事件，已于2022年05月31日零时起停止服务，域名HTTPS证书于2024年1月22日正式到期，不可再用。请复制报错信息自行百度解决。报错如下：

npm ERR! request to registry.npm.taobao.org failed, reason: certificate has expired.

网络问题无法连接当前镜像源(一般是npm的默认源)，请百度自行解决或更改源地址。报错如下：

info There appears to be trouble with your network connection. Retrying…
info There appears to be trouble with your network connection. Retrying…
info There appears to be trouble with your network connection. Retrying…

5、配置/src/main.js

放在 app.mount('#app') 之前

import NfDesign from "@nutflow/nf-design-elp"; // 流程设计器
import NfForm from "@nutflow/nf-form-elp"; // 表单组件
import NfFormDesign from "@nutflow/nf-form-design-elp"; // 表单设计器
import NfCustomFields from "@/views/plugin/workflow/components/custom-fields"; // 自定义业务字段
app.use(NfDesign).use(NfForm).use(NfFormDesign).use(NfCustomFields);

6、拷贝页面到/src/views/plugin目录下

7、配置/src/router/views/index.js

注意层级，层级错误会导致页面嵌套显示。

{
  path: '/workflow',
  component: Layout,
  children: [
    {
      path: 'design/process/:id',
      name: '模型设计2',
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/plugin/workflow/pages/design/index.vue'),
    },
    {
      path: 'design/model/history/:id',
      name: '模型历史',
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/plugin/workflow/pages/design/model-history.vue'),
    },
    {
      path: 'design/form/history/:id',
      name: '表单历史',
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/plugin/workflow/pages/design/form-history.vue'),
    },
    {
      path: 'process/start/:params',
      name: '新建流程2',
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/plugin/workflow/pages/process/form/start.vue'),
    },
    {
      path: 'process/detail/:params',
      name: '流程详情',
      component: () =>
        import( /* webpackChunkName: "views" */ '@/views/plugin/workflow/pages/process/form/detail.vue'),
    }
  ]
},

8、流程设计器国际化（可选）

8.1、配置语言文件/src/lang/index.js

import { createI18n } from 'vue-i18n'
import Store from '@/store'
import elementEnLocale from 'element-plus/es/locale/lang/en'
import elementZhLocale from 'element-plus/es/locale/lang/zh-cn'
import elementJaLocale from 'element-plus/es/locale/lang/ja'
import enLocale from './en'
import zhLocale from './zh'
import AvueEnLocale from '@smallwei/avue/lib/locale/lang/en'
import AvueZhLocale from '@smallwei/avue/lib/locale/lang/zh'

import NfDesignEnLocale from '@nutflow/nf-design-elp/lib/locale/lang/en'
import NfDesignZhLocale from '@nutflow/nf-design-elp/lib/locale/lang/zh'
export const messages = {
  en: {
    ...enLocale,
    ...AvueEnLocale,
    ...elementEnLocale,
    ...NfDesignEnLocale,
  },
  'zh-cn': {
    ...zhLocale,
    ...AvueZhLocale,
    ...elementZhLocale,
    ...NfDesignZhLocale,
  }
}
export const language = Store.getters.language
export default createI18n({
  locale: language,
  messages,
});

8.2、修改/src/main.js引入

import NfDesign from '@nutflow/nf-design-elp' // 流程设计器
import NfForm from '@nutflow/nf-form-elp' // 表单组件
import NfFormDesign from '@nutflow/nf-form-design-elp' // 表单设计器
import NfCustomFields from '@/views/plugin/workflow/components/custom-fields' // 自定义业务字段
app.use(NfDesign, { locale: messages[language] })
   .use(NfForm)
   .use(NfFormDesign)
   .use(NfCustomFields)

9、表单组件 - 地图选择器（高德地图）（可选）

修改/src/main.js引入

import NfDesign from '@nutflow/nf-design-elp' // 流程设计器
import NfForm from '@nutflow/nf-form-elp' // 表单组件
import NfFormDesign from '@nutflow/nf-form-design-elp' // 表单设计器
import NfCustomFields from '@/views/plugin/workflow/components/custom-fields' // 自定义业务字段
app.use(NfDesign, { locale: messages[language] })
   .use(NfForm, {
      amap: {
        key: 'amap-key',
        secret: 'amap-secret'
      }
   })
   .use(NfFormDesign)
   .use(NfCustomFields)

常见问题

如何发布安装自己修改源码的nf三件套

适用于自己修改了表单组件、表单设计器组件、流程设计器组件后，发布并安装自己的软件包。以下以@nutflow/nf-form-elp为例。

1、修改package.json中的name以及version字段。如将@nutflow/nf-form-elp修改为@somename/nf-form-elp。@somename请自行定义。
2、修改.npmrc，添加以下内容

@somename:registry=https://git.nutflow.vip/api/packages/{your_git_name}/npm/
//git.nutflow.vip/api/packages/{your_git_name}/npm/:_authToken={TOKEN}

其中@somename是以上第1步中定义的源统一组织名称。{your_git_name}是插件私服右上角头像 -> 设置 -> 个人信息中的用户名。{TOKEN}为上面开始配置的token。请自行修改。

3、打包软件包。

yarnnpm

yarn lib

npm run lib

4、发布软件包。发布成功后会在插件私服右上角头像 -> 个人信息 -> 软件包中显示。

npm publish

警告

请不要将软件包发布的npm等公共开放源中！

5、安装软件包

在需要使用软件包的项目（如Saber3）中同样添加第2步中的.npmrc内容。然后在终端运行安装命令，自行修改源名称。

yarnnpm

yarn add @somename/nf-form-elp

# 可选，删除原有依赖
yarn remove @nutflow/nf-form-elp

npm i @somename/nf-form-elp

# 可选，删除原有依赖
npm uni @nutflow/nf-form-elp

6、引用依赖

Saber3Lemon

// /src/main.js
import NfForm from "@nutflow/nf-form-elp"; // 表单组件
// 修改为
import NfForm from "@somename/nf-form-elp"; // 表单组件

// /src/views/plugin/workflow/index.js
import NfForm from "@nutflow/nf-form-elp"; // 表单组件
// 修改为
import NfForm from "@somename/nf-form-elp"; // 表单组件

7、清除缓存

若存在安装新依赖后组件的表现和原来一样的情况，可能是未清除缓存的问题。

TIP

vite缓存：1、停止项目。2、手动删除node_modules/.vite文件夹。3、重启项目。
浏览器缓存：手动清除浏览器缓存。

DANGER

以上操作均来自npm基本知识，如有错误，请自行百度。

Saber Vue3集成 ​

1、插件私服创建token ​

2、根目录创建.npmrc文件 ​

3、.npmrc中添加内容 ​

4、安装依赖 ​

5、配置/src/main.js ​

6、拷贝页面到/src/views/plugin目录下 ​

7、配置/src/router/views/index.js ​

8、流程设计器国际化（可选） ​

8.1、配置语言文件/src/lang/index.js ​

8.2、修改/src/main.js引入 ​

9、表单组件 - 地图选择器（高德地图）（可选） ​

常见问题 ​

如何发布安装自己修改源码的nf三件套 ​

Saber Vue3集成

1、插件私服创建token

2、根目录创建.npmrc文件

3、.npmrc中添加内容

4、安装依赖

5、配置/src/main.js

6、拷贝页面到/src/views/plugin目录下

7、配置/src/router/views/index.js

8、流程设计器国际化（可选）

8.1、配置语言文件/src/lang/index.js

8.2、修改/src/main.js引入

9、表单组件 - 地图选择器（高德地图）（可选）

常见问题

如何发布安装自己修改源码的nf三件套