创建文档
This commit is contained in:
37
docs/02.前端/01.说明/01.简介.md
Normal file
37
docs/02.前端/01.说明/01.简介.md
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
title: 简介
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/introduce/
|
||||
categories:
|
||||
- 前端
|
||||
- 说明
|
||||
tags:
|
||||
-
|
||||
---
|
||||
# 简介
|
||||
::: tip
|
||||
前端项目来源于GitHub中Armour所写的开源项目[vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)
|
||||
|
||||
项目地址:[https://github.com/Armour/vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)
|
||||
|
||||
本框架前端基于 [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) ，并增加部分功能，部分说明文档来源于 [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)
|
||||
|
||||
:::
|
||||
|
||||
|
||||
## 前序准备
|
||||
|
||||
你需要在本地安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。本项目技术栈基于 [typescript](https://www.typescriptlang.org/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 、[vue-cli](https://github.com/vuejs/vue-cli) 、[axios](https://github.com/axios/axios) 和 [element-ui](https://github.com/ElemeFE/element) ，提前了解和学习这些知识会对使用本项目有很大的帮助。
|
||||
|
||||
|
||||
|
||||
## 浏览器支持
|
||||
|
||||
Modern browsers and Internet Explorer 10+.
|
||||
|
||||
|
||||
|
||||
| [<img src="https://cdn.jsdelivr.net/gh/taixingyiji/image_store@main/blog/20210203122300.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://cdn.jsdelivr.net/gh/taixingyiji/image_store@main/blog/20210203122347.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://cdn.jsdelivr.net/gh/taixingyiji/image_store@main/blog/20210203122223.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://cdn.jsdelivr.net/gh/taixingyiji/image_store@main/blog/20210203122410.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
|
||||
| --------- | --------- | --------- | --------- |
|
||||
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
|
||||
|
||||
88
docs/02.前端/01.说明/02.功能.md
Normal file
88
docs/02.前端/01.说明/02.功能.md
Normal file
@@ -0,0 +1,88 @@
|
||||
---
|
||||
title: 功能
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/767f7b/
|
||||
categories:
|
||||
- 前端
|
||||
- 说明
|
||||
tags:
|
||||
-
|
||||
---
|
||||
# 功能
|
||||
|
||||
```txt
|
||||
- 登录 / 注销
|
||||
|
||||
- 权限验证
|
||||
- 页面权限
|
||||
- 指令权限
|
||||
- 权限配置
|
||||
- 二步登录
|
||||
|
||||
- 通用模板示例
|
||||
|
||||
- 后台配置可视化操作界面
|
||||
- 配置表增删改查
|
||||
- 配置字段增删改查
|
||||
- 配置基表及格式化字段增删改查
|
||||
|
||||
- 多环境发布
|
||||
- Dev / Stage / Prod
|
||||
|
||||
- 全局功能
|
||||
- 国际化多语言
|
||||
- 动态换肤
|
||||
- 动态侧边栏（支持多级路由嵌套）
|
||||
- 动态面包屑
|
||||
- 快捷导航(支持右键操作)
|
||||
- 粘贴板
|
||||
- Svg 图标
|
||||
- 搜索
|
||||
- 全屏
|
||||
- 设置
|
||||
- Mock 数据 / Mock 服务器
|
||||
- 支持 PWA
|
||||
|
||||
- 组件
|
||||
- 编辑器
|
||||
- 富文本编辑器
|
||||
- Markdown 编辑器
|
||||
- JSON 编辑器
|
||||
- 头像上传
|
||||
- 返回顶部
|
||||
- CountTo
|
||||
- 拖放区
|
||||
- 拖拽弹窗
|
||||
- 拖拽看板
|
||||
- 拖拽列表
|
||||
- 拖拽选择
|
||||
- ECharts 图表
|
||||
- Mixin
|
||||
- 拆分窗格
|
||||
- 黏性组件
|
||||
|
||||
- 表格
|
||||
- 动态表格
|
||||
- 拖拽表格
|
||||
- 内联编辑表格
|
||||
- 复杂表格
|
||||
|
||||
- Excel
|
||||
- 导出excel
|
||||
- 导入excel
|
||||
- 前端可视化excel
|
||||
|
||||
- Zip
|
||||
- 导出zip
|
||||
|
||||
- PDF
|
||||
- 下载 pdf
|
||||
|
||||
- 控制台
|
||||
- 引导页
|
||||
- 综合实例
|
||||
- 错误日志
|
||||
- 错误页面
|
||||
- 401
|
||||
- 404
|
||||
```
|
||||
63
docs/02.前端/01.说明/03.如何设置以及启动项目.md
Normal file
63
docs/02.前端/01.说明/03.如何设置以及启动项目.md
Normal file
@@ -0,0 +1,63 @@
|
||||
---
|
||||
title: 如何设置以及启动项目
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/b7e102/
|
||||
categories:
|
||||
- 前端
|
||||
- 说明
|
||||
tags:
|
||||
-
|
||||
---
|
||||
# 如何设置以及启动项目
|
||||
|
||||
## 安装依赖
|
||||
|
||||
```bash
|
||||
yarn install
|
||||
```
|
||||
|
||||
## 启动本地开发环境（自带热启动）
|
||||
|
||||
```bash
|
||||
yarn serve
|
||||
```
|
||||
|
||||
## 构建生产环境 (自带压缩)
|
||||
|
||||
```bash
|
||||
yarn build:prod
|
||||
```
|
||||
|
||||
## 构建阶段性生产环境 (自带压缩)
|
||||
|
||||
```bash
|
||||
yarn build:stage
|
||||
```
|
||||
|
||||
## 代码格式检查以及自动修复
|
||||
|
||||
```bash
|
||||
yarn lint
|
||||
```
|
||||
|
||||
## 运行单元测试
|
||||
|
||||
```bash
|
||||
yarn test:unit
|
||||
```
|
||||
|
||||
## 运行端对端测试
|
||||
|
||||
```bash
|
||||
yarn test:e2e
|
||||
```
|
||||
|
||||
## 自动生成 svg 组件
|
||||
|
||||
```bash
|
||||
yarn run svg
|
||||
```
|
||||
|
||||
## 自定义 Vue 配置
|
||||
|
||||
请看 [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
58
docs/02.前端/01.说明/04.目录结构.md
Normal file
58
docs/02.前端/01.说明/04.目录结构.md
Normal file
@@ -0,0 +1,58 @@
|
||||
---
|
||||
title: 目录结构
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/0ec1c8/
|
||||
categories:
|
||||
- 前端
|
||||
- 说明
|
||||
tags:
|
||||
-
|
||||
---
|
||||
# 目录结构
|
||||
|
||||
本项目已经为你生成了一个完整的开发框架，提供了涵盖后台开发的各类功能和坑位，下面是整个项目的目录结构。
|
||||
|
||||
```bash
|
||||
├── mock # mock 服务器 与 模拟数据
|
||||
├── public # 静态资源 (会被直接复制)
|
||||
│ │── favicon.ico # favicon图标
|
||||
│ │── manifest.json # PWA 配置文件
|
||||
│ └── index.html # html模板
|
||||
├── src # 源代码
|
||||
│ ├── api # ts业务代码
|
||||
│ │ ├── api # 所有请求
|
||||
│ │ ├── mixins # mixins 代码
|
||||
│ │ └── views # 页面实例代码
|
||||
│ ├── assets # 主题 字体等静态资源 (由 webpack 处理加载)
|
||||
│ ├── common # 通用工具类及公用方法
|
||||
│ ├── components # 全局组件
|
||||
│ ├── directive # 全局指令
|
||||
│ ├── filters # 全局过滤函数
|
||||
│ ├── icons # svg 图标
|
||||
│ ├── lang # 国际化
|
||||
│ ├── layout # 全局布局
|
||||
│ ├── pwa # PWA service worker 相关的文件
|
||||
│ ├── router # 路由
|
||||
│ ├── store # 全局 vuex store
|
||||
│ ├── styles # 全局样式
|
||||
│ ├── utils # 全局方法
|
||||
│ ├── views # 所有页面
|
||||
│ ├── App.vue # 入口页面
|
||||
│ ├── main.js # 入口文件 加载组件 初始化等
|
||||
│ ├── permission.ts # 权限管理
|
||||
│ ├── settings.ts # 设置文件
|
||||
│ └── shims.d.ts # 模块注入
|
||||
├── tests # 测试
|
||||
├── .circleci/ # 自动化 CI 配置
|
||||
├── .browserslistrc # browserslistrc 配置文件 (用于支持 Autoprefixer)
|
||||
├── .editorconfig # 编辑相关配置
|
||||
├── .env.xxx # 环境变量配置
|
||||
├── .eslintrc.js # eslint 配置
|
||||
├── babel.config.js # babel-loader 配置
|
||||
├── cypress.json # e2e 测试配置
|
||||
├── jest.config.js # jest 单元测试配置
|
||||
├── package.json # package.json 依赖
|
||||
├── postcss.config.js # postcss 配置
|
||||
├── tsconfig.json # typescript 配置
|
||||
└── vue.config.js # vue-cli 配置
|
||||
```
|
||||
70
docs/02.前端/02.配置/01.BaseURL配置.md
Normal file
70
docs/02.前端/02.配置/01.BaseURL配置.md
Normal file
@@ -0,0 +1,70 @@
|
||||
---
|
||||
title: BaseURL配置
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/b8a7ad/
|
||||
---
|
||||
# Base url设置
|
||||
|
||||
::: tip
|
||||
当我们配置好后台接口后，往往后台都会跟一个路径。如 `http://127.0.0.1:8080/common` 中的 `/common`，我们需要根据生产环境，开发环境，阶段性环境来进行不同的配置
|
||||
:::
|
||||
|
||||
## 配置开发环境
|
||||
|
||||
开发环境需要配置文件 `./.env.development`
|
||||
|
||||
``` properties
|
||||
# Base api,此处配置端口后面的Base URL
|
||||
VUE_APP_BASE_API = '/common'
|
||||
|
||||
# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
|
||||
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
|
||||
# It only does one thing by converting all import() to require().
|
||||
# This configuration can significantly increase the speed of hot updates,
|
||||
# when you have a large number of pages.
|
||||
# Detail: https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
|
||||
# 此处默认开启，如需了解更多请访问上方URL
|
||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||
```
|
||||
|
||||
## 配置阶段性环境
|
||||
|
||||
阶段性环境配置文件 `./env.staging`
|
||||
|
||||
- 前端后台部署在一起
|
||||
|
||||
``` properties
|
||||
# 设置成部署环境
|
||||
NODE_ENV = production
|
||||
|
||||
# Base api，配置
|
||||
VUE_APP_BASE_API = './'
|
||||
```
|
||||
|
||||
- 前后端分离部署
|
||||
|
||||
``` properties
|
||||
# 设置成部署环境
|
||||
NODE_ENV = production
|
||||
|
||||
# Base api，分离部署需要添加http路径
|
||||
VUE_APP_BASE_API = 'http://192.168.1.123:8080/common'
|
||||
```
|
||||
|
||||
## 配置生产环境
|
||||
|
||||
阶段性环境配置文件 `./env.production`
|
||||
|
||||
- 前端后台部署在一起
|
||||
|
||||
``` properties
|
||||
# Base api
|
||||
VUE_APP_BASE_API = './'
|
||||
```
|
||||
|
||||
- 前后端分离部署
|
||||
|
||||
``` properties
|
||||
# Base api，分离部署需要添加http路径
|
||||
VUE_APP_BASE_API = 'http://192.168.1.123:8080/common'
|
||||
```
|
||||
126
docs/02.前端/02.配置/02.vueconfig配置.md
Normal file
126
docs/02.前端/02.配置/02.vueconfig配置.md
Normal file
@@ -0,0 +1,126 @@
|
||||
---
|
||||
title: vue.config.js文件配置
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/f410bd/
|
||||
---
|
||||
# vue.config.js
|
||||
|
||||
::: tip
|
||||
本部分提供适当所需注释，如有其它配置更改需要，请查询[Vue-Cli](https://cli.vuejs.org/zh/config)
|
||||
:::
|
||||
|
||||
``` js
|
||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||
const path = require('path')
|
||||
|
||||
// If your port is set to 80,
|
||||
// use administrator privileges to execute the command line.
|
||||
// For example, on Mac: sudo npm run / sudo yarn
|
||||
const devServerPort = 9527 // TODO: get this variable from setting.ts
|
||||
const mockServerPort = 9528 // TODO: get this variable from setting.ts
|
||||
const name = 'Vue Typescript Admin' // TODO: get this variable from setting.ts
|
||||
|
||||
module.exports = {
|
||||
// 部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致，
|
||||
// 但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath
|
||||
publicPath: './',
|
||||
// 默认生成的打包文件夹路径
|
||||
outputDir: 'dist',
|
||||
// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。 资源放的目录
|
||||
assetsDir: './static',
|
||||
// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径 index的路劲和名字
|
||||
indexPath: './index.html',
|
||||
// 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
|
||||
lintOnSave: process.env.NODE_ENV === 'development',
|
||||
// 是否需要生成环境的 source map
|
||||
productionSourceMap: false,
|
||||
// 设置开发时的端口及后端目录
|
||||
devServer: {
|
||||
// 开发环境的启动端口
|
||||
port: devServerPort,
|
||||
open: true,
|
||||
overlay: {
|
||||
warnings: false,
|
||||
errors: true
|
||||
},
|
||||
// progress: false,
|
||||
proxy: {
|
||||
'/common': {
|
||||
// 开发环境的后台请求接口
|
||||
target: 'http://127.0.0.1:8081' ,
|
||||
changeOrigin: true, // needed for virtual hosted sites
|
||||
ws: true, // proxy websockets
|
||||
pathRewrite: {
|
||||
// '^/common': ''
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 向 PWA 插件传递选项
|
||||
pwa: {
|
||||
name: name,
|
||||
workboxPluginMode: 'InjectManifest',
|
||||
workboxOptions: {
|
||||
swSrc: path.resolve(__dirname, 'src/pwa/service-worker.js')
|
||||
}
|
||||
},
|
||||
// 这是一个不进行任何 schema 验证的对象，因此它可以用来传递任何第三方插件选项
|
||||
pluginOptions: {
|
||||
'style-resources-loader': {
|
||||
preProcessor: 'scss',
|
||||
patterns: [
|
||||
// 全局样式配置文件，加上自己的路径,不能使用(如下:alias)中配置的别名路径
|
||||
path.resolve(__dirname, 'src/styles/_variables.scss'),
|
||||
path.resolve(__dirname, 'src/styles/_mixins.scss')
|
||||
]
|
||||
}
|
||||
},
|
||||
// 将代码公共部分集中打包，减少打包所需时间，是打包后的文件体积更小
|
||||
chainWebpack(config) {
|
||||
// provide the app's title in webpack's name field, so that
|
||||
// it can be accessed in index.html to inject the correct title.
|
||||
config.set('name', name)
|
||||
|
||||
// https://webpack.js.org/configuration/devtool/#development
|
||||
// Change development env source map if you want.
|
||||
// The default in vue-cli is 'eval-cheap-module-source-map'.
|
||||
// config
|
||||
// .when(process.env.NODE_ENV === 'development',
|
||||
// config => config.devtool('eval-cheap-source-map')
|
||||
// )
|
||||
|
||||
config
|
||||
.when(process.env.NODE_ENV !== 'development',
|
||||
config => {
|
||||
config
|
||||
.optimization.splitChunks({
|
||||
chunks: 'all',
|
||||
cacheGroups: {
|
||||
libs: {
|
||||
name: 'chunk-libs',
|
||||
test: /[\\/]node_modules[\\/]/,
|
||||
priority: 10,
|
||||
chunks: 'initial' // only package third parties that are initially dependent
|
||||
},
|
||||
elementUI: {
|
||||
name: 'chunk-elementUI', // split elementUI into a single package
|
||||
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
|
||||
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
|
||||
},
|
||||
commons: {
|
||||
name: 'chunk-commons',
|
||||
test: path.resolve(__dirname, 'src/components'),
|
||||
minChunks: 3, // minimum common number
|
||||
priority: 5,
|
||||
reuseExistingChunk: true
|
||||
}
|
||||
}
|
||||
})
|
||||
config.optimization.runtimeChunk('single')
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
54
docs/02.前端/03.代码示例/01.Api示例.md
Normal file
54
docs/02.前端/03.代码示例/01.Api示例.md
Normal file
@@ -0,0 +1,54 @@
|
||||
---
|
||||
title: Api示例
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/5c0128/
|
||||
---
|
||||
# Api示例
|
||||
|
||||
::: tip
|
||||
此处提供一个如何从后台调用接口的Api示例
|
||||
:::
|
||||
|
||||
::: warning 注意
|
||||
多个功能模块推荐创建多个api文件，方便代码维护
|
||||
:::
|
||||
|
||||
1. 进入 `src>api>api` 文件夹中，创建一个文件，这里我们以UserApi.ts为例，并写入类的基本信息
|
||||
``` ts
|
||||
class UserApi{
|
||||
|
||||
}
|
||||
|
||||
export default UserApi
|
||||
```
|
||||
2. 引入封装好的 `axios` 并继承
|
||||
|
||||
``` ts {1,3}
|
||||
import BaseAxios from '@/common/http'
|
||||
|
||||
class UserApi extends BaseAxios<any, any>{
|
||||
|
||||
}
|
||||
|
||||
export default UserApi
|
||||
```
|
||||
3. 根据后台接口文档写入需要请求的方法，注意请求方法
|
||||
|
||||
``` ts {5,6,7,8,10,11,12,13}
|
||||
import BaseAxios from '@/common/http'
|
||||
|
||||
class UserApi extends BaseAxios<any, any>{
|
||||
|
||||
// 根据用户id获取角色id
|
||||
public getRoleByUserId(param: any): Promise<Base.AxiosResponse<any>> {
|
||||
return this.axios.get('/ftUser/getRoleByUserId', param)
|
||||
}
|
||||
|
||||
// 给用户添加角色
|
||||
public addRole(param: any): Promise<Base.AxiosResponse<any>> {
|
||||
return this.axios.post('/ftUser/addRole', param)
|
||||
}
|
||||
}
|
||||
|
||||
export default UserApi
|
||||
```
|
||||
263
docs/02.前端/03.代码示例/02.新增页面示例.md
Normal file
263
docs/02.前端/03.代码示例/02.新增页面示例.md
Normal file
@@ -0,0 +1,263 @@
|
||||
---
|
||||
title: 新增页面示例
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/5003ef/
|
||||
---
|
||||
# 新增页面示例
|
||||
|
||||
::: tip
|
||||
此处提供使用通用模板的页面使用方法，若要添加常规页面请参考 [Vue](https://cn.vuejs.org/) 官网提供的说明。
|
||||
使用此方法前需要已经在配置表配置好需要调用的单表信息。
|
||||
:::
|
||||
|
||||
1. 首先在 `src>api>views` 中新建文件夹 `user-example` ，进入文件夹新建文件 `user-example.ts`，写入以下信息
|
||||
|
||||
``` ts
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import { mixins } from 'vue-class-component'
|
||||
import Common from '@/api/mixins/Common'
|
||||
|
||||
@Component({
|
||||
name: 'userExample'
|
||||
})
|
||||
export default class extends mixins(Common) {
|
||||
}
|
||||
```
|
||||
|
||||
2. 添加默认配置信息，需要使用者根据注释及页面需求更改配置
|
||||
|
||||
``` ts {4,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61}
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import { mixins } from 'vue-class-component'
|
||||
import Common from '@/api/mixins/Common'
|
||||
import StringUtils from '@/common/StringUtils'
|
||||
|
||||
@Component({
|
||||
name: 'userExample'
|
||||
})
|
||||
export default class extends mixins(Common) {
|
||||
// 表格中 '操作'列的宽度
|
||||
private operationWidth = 200
|
||||
|
||||
async created() {
|
||||
// 设置默认排序
|
||||
this.sort = 'UPDATE_TIME'
|
||||
this.order = 'DESC'
|
||||
// 设置表别名
|
||||
this.tableAlias = 'user'
|
||||
// 获取表头及表单信息
|
||||
await this.acquireTableInfo()
|
||||
// 获取基表信息格式化下拉框及表格数据
|
||||
await this.getBaseTableInfo()
|
||||
// 获取列表信息
|
||||
this.acquireTable()
|
||||
// 设置默认校验构造
|
||||
this.formRules = {
|
||||
PASSWORD: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
|
||||
USERNAME: [{ required: true, message: '用户名不能为空', trigger: 'blur' }]
|
||||
}
|
||||
// 设置默认禁用字段
|
||||
this.disableField = ['CREATE_TIME', 'UPDATE_TIME']
|
||||
}
|
||||
|
||||
// 编辑表格新增行
|
||||
addRow() {
|
||||
const obj: any = {
|
||||
index: this.editList.length,
|
||||
edit: true
|
||||
}
|
||||
this.editList.push(obj)
|
||||
}
|
||||
|
||||
// 可编辑表格select
|
||||
editTableSelectionChange(val: any) {
|
||||
this.editTableSelectList = val
|
||||
}
|
||||
|
||||
// 表格校验规则
|
||||
tableRules(val: any) {
|
||||
const { rows, rules, callback } = val
|
||||
let message = ''
|
||||
Object.getOwnPropertyNames(rules).forEach(function(key) {
|
||||
if (key !== '__ob__') {
|
||||
if (StringUtils.isEmpty(rows[key])) {
|
||||
message += rules[key][0].message
|
||||
message += ','
|
||||
}
|
||||
}
|
||||
})
|
||||
callback(message)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
3. 在路径 `src>views` 新建文件夹 `user-example` , 进入 `user-example` 文件夹，新建文件 `user-example.vue`，并写入以下信息，scss请根据页面设计自行更改，或者复制通用页面示例中的scss，这里先不再显示。
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="../../api/views/user-example/user-example.ts"></script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
4. 在 `src>router>index.ts` 中增加 `user-example.vue` 的路由指向。
|
||||
|
||||
``` ts {3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18}
|
||||
export const asyncRoutes: RouteConfig[] = [
|
||||
....,
|
||||
{
|
||||
path: '/userExample',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'userExample',
|
||||
component: () => import(/* webpackChunkName: "icons" */ '@/views/user-example/userExample.vue'),
|
||||
name: 'userExample',
|
||||
meta: {
|
||||
title: 'userExample',
|
||||
icon: 'example',
|
||||
noCache: true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
....
|
||||
]
|
||||
```
|
||||
|
||||
此时可以看到目录上多了刚刚我们添加的路由
|
||||
|
||||
|
||||
|
||||
5. 此时目录还未显示中文，由于框架使用i18n插件，此时我们需要进入语言目录下进行设置，进入 `src>lang>zh.ts` 中设置显示中文。
|
||||
|
||||
::: warning 注意
|
||||
此处设置需要添加到router对象下，且key值需要与路由中的title设置一致
|
||||
:::
|
||||
|
||||
``` ts {3}
|
||||
export default {
|
||||
route: {
|
||||
userExample:'用户示例',
|
||||
...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
然后我们就可以看到显示目录变成中文。
|
||||
|
||||
|
||||
|
||||
6. 然后，我们添加通用组件到ts文件及页面中。
|
||||
|
||||
首先引入组件到ts文件中
|
||||
|
||||
``` ts {5,8,9,10}
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
import { mixins } from 'vue-class-component'
|
||||
import Common from '@/api/mixins/Common'
|
||||
import StringUtils from '@/common/StringUtils'
|
||||
import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'
|
||||
@Component({
|
||||
name: 'commonExample',
|
||||
components: {
|
||||
tableHeadCo,
|
||||
}
|
||||
})
|
||||
export default class extends mixins(Common) {
|
||||
// 表格中 '操作'列的宽度
|
||||
private operationWidth = 200
|
||||
|
||||
async created() {
|
||||
// 设置默认排序
|
||||
this.sort = 'UPDATE_TIME'
|
||||
this.order = 'DESC'
|
||||
// 设置表别名
|
||||
this.tableAlias = 'user'
|
||||
// 获取表头及表单信息
|
||||
await this.acquireTableInfo()
|
||||
// 获取基表信息格式化下拉框及表格数据
|
||||
await this.getBaseTableInfo()
|
||||
// 获取列表信息
|
||||
this.acquireTable()
|
||||
// 设置默认校验构造
|
||||
this.formRules = {
|
||||
PASSWORD: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
|
||||
USERNAME: [{ required: true, message: '用户名不能为空', trigger: 'blur' }]
|
||||
}
|
||||
// 设置默认禁用字段
|
||||
this.disableField = ['CREATE_TIME', 'UPDATE_TIME']
|
||||
}
|
||||
|
||||
// 编辑表格新增行
|
||||
addRow() {
|
||||
const obj: any = {
|
||||
index: this.editList.length,
|
||||
edit: true
|
||||
}
|
||||
this.editList.push(obj)
|
||||
}
|
||||
|
||||
// 可编辑表格select
|
||||
editTableSelectionChange(val: any) {
|
||||
this.editTableSelectList = val
|
||||
}
|
||||
|
||||
// 表格校验规则
|
||||
tableRules(val: any) {
|
||||
const { rows, rules, callback } = val
|
||||
let message = ''
|
||||
Object.getOwnPropertyNames(rules).forEach(function(key) {
|
||||
if (key !== '__ob__') {
|
||||
if (StringUtils.isEmpty(rows[key])) {
|
||||
message += rules[key][0].message
|
||||
message += ','
|
||||
}
|
||||
}
|
||||
})
|
||||
callback(message)
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
然后再vue实例中引入组件
|
||||
|
||||
``` vue {3,4,5,6,7,8,9,10,11,12,13,14}
|
||||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<table-head-co
|
||||
ref="tableCo"
|
||||
:check-box-visible="true"
|
||||
:formatter="tableFomatter"
|
||||
:form-list="tableList"
|
||||
:table-heads="tableHead"
|
||||
:loading="loading"
|
||||
:slot-visible="true"
|
||||
:width="operationWidth"
|
||||
@handle-sort-change="handleSortChange"
|
||||
@handle-selection-change="handleSelectionChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="../../api/views/user-example/user-example.ts"></script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
然后我们刷新页面，就可以看到刚刚引入的组件了。
|
||||
|
||||
|
||||
|
||||
7. 页面实例讲解完毕，最后，请按照使用者按照需要进行页面相关的开发或引入其他组件进行开发。
|
||||
|
||||
457
docs/02.前端/04.组件/01.Table组件.md
Normal file
457
docs/02.前端/04.组件/01.Table组件.md
Normal file
@@ -0,0 +1,457 @@
|
||||
---
|
||||
title: 通用表格组件
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/1ab4ce/
|
||||
---
|
||||
# 通用表格组件
|
||||
|
||||
## 普通表格
|
||||
|
||||
普通表格，仅传入数据显示
|
||||
|
||||
***
|
||||
|
||||
<ClientOnly><Web-Table></Web-Table></ClientOnly>
|
||||
|
||||
::: details 代码块
|
||||
|
||||
***ts版本***
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<div>
|
||||
<table-head-co
|
||||
ref="tableCo"
|
||||
:form-list="tableList"
|
||||
:table-heads="tableHead"
|
||||
:width="200"
|
||||
:cellAlign="center"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
|
||||
@Component({
|
||||
name: 'commonExample',
|
||||
components: {
|
||||
tableHeadCo,
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
tableHead:any[] = [
|
||||
{ fieldName: 'date', nameCn: '日期', isHead: 1 },
|
||||
{ fieldName: 'name', nameCn: '姓名', isHead: 1 },
|
||||
{ fieldName: 'address', nameCn: '地址', isHead: 1 },
|
||||
]
|
||||
tableList:any[] = [{
|
||||
date: '2016-05-02',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}]
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
***js版本***
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<div>
|
||||
<table-head-co
|
||||
ref="tableCo"
|
||||
:form-list="tableList"
|
||||
:table-heads="tableHead"
|
||||
:width="200"
|
||||
:cellAlign="center"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tableHeadCo
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
tableHead: [
|
||||
{ fieldName: 'date', nameCn: '日期', isHead: 1 },
|
||||
{ fieldName: 'name', nameCn: '姓名', isHead: 1 },
|
||||
{ fieldName: 'address', nameCn: '地址', isHead: 1 },
|
||||
],
|
||||
tableList: [{
|
||||
date: '2016-05-02',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 带复选框的表格
|
||||
|
||||
带复选框的表格，提供复选框回调函数，点击复选框时可打开控制台查看打印内容。
|
||||
|
||||
***
|
||||
|
||||
<ClientOnly><Web-TableCheckBox></Web-TableCheckBox></ClientOnly>
|
||||
|
||||
::: details 代码块
|
||||
|
||||
***ts版本***
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<div>
|
||||
<table-head-co
|
||||
ref="tableCo"
|
||||
:form-list="tableList"
|
||||
:table-heads="tableHead"
|
||||
:width="200"
|
||||
:check-box-visible="true"
|
||||
@handle-selection-change="handleSelectionChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
|
||||
@Component({
|
||||
name: 'commonExample',
|
||||
components: {
|
||||
tableHeadCo,
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
tableHead:any[] = [
|
||||
{ fieldName: 'date', nameCn: '日期', isHead: 1 },
|
||||
{ fieldName: 'name', nameCn: '姓名', isHead: 1 },
|
||||
{ fieldName: 'address', nameCn: '地址', isHead: 1 },
|
||||
]
|
||||
|
||||
tableList:any[] = [{
|
||||
date: '2016-05-02',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}]
|
||||
|
||||
// 复选框监听事件
|
||||
handleSelectionChange(val){
|
||||
console.log(val)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
***js版本***
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<div>
|
||||
<table-head-co
|
||||
ref="tableCo"
|
||||
:form-list="tableList"
|
||||
:table-heads="tableHead"
|
||||
:width="200"
|
||||
:check-box-visible="true"
|
||||
@handle-selection-change="handleSelectionChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tableHeadCo
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
tableHead: [
|
||||
{ fieldName: 'date', nameCn: '日期', isHead: 1 },
|
||||
{ fieldName: 'name', nameCn: '姓名', isHead: 1 },
|
||||
{ fieldName: 'address', nameCn: '地址', isHead: 1 },
|
||||
],
|
||||
tableList: [{
|
||||
date: '2016-05-02',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 复选框改变监听事件
|
||||
handleSelectionChange(val){
|
||||
console.log(val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 带插槽的表格
|
||||
|
||||
表格组件提供插槽功能，可以将插槽设置成按钮等其他功能，点击编辑按钮可以查看控制台打印内容。
|
||||
|
||||
***
|
||||
|
||||
<ClientOnly><Web-TableSlot></Web-TableSlot></ClientOnly>
|
||||
|
||||
::: details 代码块
|
||||
|
||||
***ts版本***
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<div>
|
||||
<table-head-co
|
||||
ref="tableCo"
|
||||
:form-list="tableList"
|
||||
:table-heads="tableHead"
|
||||
:width="200"
|
||||
:slot-visible="true"
|
||||
>
|
||||
<template
|
||||
v-slot="scope"
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="showEdit(scope.item.row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
</template>
|
||||
</table-head-co>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import tableHeadCo from '../Co/tableHeadCo'
|
||||
import { Component, Prop, Vue } from 'vue-property-decorator'
|
||||
|
||||
@Component({
|
||||
name: 'commonExample',
|
||||
components: {
|
||||
tableHeadCo,
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
tableHead:any[] = [
|
||||
{ fieldName: 'date', nameCn: '日期', isHead: 1, commonWidth: 120 },
|
||||
{ fieldName: 'name', nameCn: '姓名', isHead: 1, commonWidth: 100 },
|
||||
{ fieldName: 'address', nameCn: '地址', isHead: 1 },
|
||||
]
|
||||
tableList:any[] = [{
|
||||
date: '2016-05-02',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}]
|
||||
|
||||
// 点击事件
|
||||
showEdit(val){
|
||||
console.log(val)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
***js版本***
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<div>
|
||||
<table-head-co
|
||||
ref="tableCo"
|
||||
:form-list="tableList"
|
||||
:table-heads="tableHead"
|
||||
:width="200"
|
||||
:slot-visible="true"
|
||||
>
|
||||
<template
|
||||
v-slot="scope"
|
||||
>
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="showEdit(scope.item.row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
</template>
|
||||
</table-head-co>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import tableHeadCo from '@/components/CommonCo/tableHeadCo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
tableHeadCo
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
tableHead: [
|
||||
{ fieldName: 'date', nameCn: '日期', isHead: 1, commonWidth: 120 },
|
||||
{ fieldName: 'name', nameCn: '姓名', isHead: 1, commonWidth: 100 },
|
||||
{ fieldName: 'address', nameCn: '地址', isHead: 1 },
|
||||
],
|
||||
tableList: [{
|
||||
date: '2016-05-02',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '小明',
|
||||
address: '北京市海淀区中关村南四街'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
showEdit(val){
|
||||
console.log(val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Table Attributes
|
||||
|
||||
|
||||
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值
|
||||
| :---| :---- | :---- |:---- |:---- |
|
||||
| check-box-visible | 是否显示复选框 | Boolean |-|false|
|
||||
| table-heads | 表头 | Array |-|-|
|
||||
| form-list | 需要显示的数据 | Array |-|-|
|
||||
| loading | 表格加载动画 | Boolean |-|false|
|
||||
| formatter | 格式化表格数据 | Function(row, column, cellValue, index) |-|-|
|
||||
| cellAlign | 表格对齐方式 | String | left/center/right | center |
|
||||
| slotVisible | 是否显示操作列 | Boolean |-|false|
|
||||
| width | 操作列的宽度 | Number |-|200|
|
||||
|
||||
## Table Events
|
||||
|
||||
|
||||
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| :---| :---- | :---- |
|
||||
| handle-selection-change | 当用户手动勾选数据行的 Checkbox 时触发的事件 | row |
|
||||
| handle-sort-change | 当表格的排序条件发生变化的时候会触发该事件 | column |
|
||||
|
||||
## Table Slot
|
||||
|
||||
|
||||
|
||||
| name | 说明 |
|
||||
| :---| :---- |
|
||||
| - | 用于放置在操作列上的按钮等元素，需要从scope.item中获取当前行的值 |
|
||||
|
||||
## Table Header style
|
||||
|
||||
|
||||
|
||||
| name | 说明 |
|
||||
| :---| :---- |
|
||||
| header-cell-style | 用于设置表头样式 |
|
||||
672
docs/02.前端/04.组件/02.Form组件.md
Normal file
672
docs/02.前端/04.组件/02.Form组件.md
Normal file
@@ -0,0 +1,672 @@
|
||||
---
|
||||
title: 表单组件
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/65ed1c/
|
||||
---
|
||||
# 表单组件
|
||||
|
||||
## 基本表单
|
||||
|
||||
表单组件以模态框的形式展示表单内容。
|
||||
|
||||
***
|
||||
|
||||
<ClientOnly><Web-Form></Web-Form></ClientOnly>
|
||||
|
||||
::: details 代码块
|
||||
|
||||
***ts版本***
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<div>
|
||||
<el-button type="primary" size="medium" @click="showAdd">新增表单</el-button>
|
||||
<form-co
|
||||
ref="formCo"
|
||||
:form-title="dialogTitle"
|
||||
:form-visible="dialogCreateFormVisible"
|
||||
:form-sub-botton="'提交'"
|
||||
:form-key="tableHead"
|
||||
:form-data="formData"
|
||||
:form-rules="formRules"
|
||||
:form-type="formType"
|
||||
:disable-field="disableField"
|
||||
@form-submit="formSubmit"
|
||||
@cancel-form="cancelForm"
|
||||
@before-cancel-form="cancelForm"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import formCo from "../Co/formCo";
|
||||
|
||||
@Component({
|
||||
name: "commonForm",
|
||||
components: {
|
||||
formCo
|
||||
}
|
||||
})
|
||||
|
||||
export default class extends Vue {
|
||||
public dialogTitle = '新增记录';
|
||||
public formType = 1;
|
||||
public formData: any = {};
|
||||
public dialogCreateFormVisible = false;
|
||||
public tableHead: any = [
|
||||
{
|
||||
fieldId: 1,
|
||||
fieldName: "user_id",
|
||||
isChange: 0,
|
||||
isForm: 0,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户ID",
|
||||
webType: "el-input",
|
||||
},
|
||||
{
|
||||
fieldId: 2,
|
||||
fieldName: "username",
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: "String",
|
||||
nameCn: "用户名",
|
||||
webType: "el-input",
|
||||
},
|
||||
{
|
||||
fieldId: 3,
|
||||
fieldName: "password",
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: "String",
|
||||
nameCn: "密码",
|
||||
webType: "password",
|
||||
},
|
||||
{
|
||||
fieldId: 4,
|
||||
fieldName: "enabled",
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户状态",
|
||||
selectList: [
|
||||
{
|
||||
fieldId: 4,
|
||||
selectId: 1,
|
||||
selectKey: "禁用",
|
||||
selectType: 1,
|
||||
selectValue: "1",
|
||||
},
|
||||
{
|
||||
fieldId: 4,
|
||||
selectId: 2,
|
||||
selectKey: "启用",
|
||||
selectType: 1,
|
||||
selectValue: "2",
|
||||
},
|
||||
],
|
||||
webType: "el-select",
|
||||
},
|
||||
{
|
||||
fieldId: 5,
|
||||
fieldName: "user_type",
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户类型",
|
||||
selectList: [
|
||||
{
|
||||
fieldId: 5,
|
||||
selectId: 3,
|
||||
selectKey: "外部用户",
|
||||
selectType: 1,
|
||||
selectValue: "1",
|
||||
},
|
||||
{
|
||||
fieldId: 5,
|
||||
selectId: 4,
|
||||
selectKey: "内部用户",
|
||||
selectType: 1,
|
||||
selectValue: "2",
|
||||
},
|
||||
],
|
||||
webType: "el-select",
|
||||
},
|
||||
{
|
||||
fieldId: 6,
|
||||
fieldName: "create_time",
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: "datetime",
|
||||
nameCn: "创建时间",
|
||||
webType: "el-date-picker",
|
||||
},
|
||||
{
|
||||
fieldId: 7,
|
||||
fieldName: "update_time",
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: "datetime",
|
||||
nameCn: "修改时间",
|
||||
webType: "el-date-picker",
|
||||
}
|
||||
];
|
||||
public disableField: Array<any> = ["create_time", "update_time"];
|
||||
public formRules: any = {
|
||||
assword: [
|
||||
{ required: true, message: "密码不能为空", trigger: "blur" },
|
||||
],
|
||||
username: [
|
||||
{ required: true, message: "用户名不能为空", trigger: "blur" },
|
||||
],
|
||||
};
|
||||
|
||||
//提交表单
|
||||
formSubmit(value) {
|
||||
this.dialogCreateFormVisible = false;
|
||||
},
|
||||
//关闭表单
|
||||
cancelForm() {
|
||||
this.dialogCreateFormVisible = false;
|
||||
this.formData = {};
|
||||
this.$nextTick(() => {
|
||||
const ref = this.$refs.formCo;
|
||||
ref.$refs.formCommon.resetFields();
|
||||
});
|
||||
},
|
||||
showAdd() {
|
||||
this.dialogTitle = "新增记录";
|
||||
this.formType = 1;
|
||||
this.formData = {};
|
||||
this.dialogCreateFormVisible = true;
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
***js版本***
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<div>
|
||||
<el-button type="primary" size="medium" @click="showAdd">新增表单</el-button>
|
||||
<form-co
|
||||
ref="formCo"
|
||||
:form-title="dialogTitle"
|
||||
:form-visible="dialogCreateFormVisible"
|
||||
:form-sub-botton="'提交'"
|
||||
:form-key="tableHead"
|
||||
:form-data="formData"
|
||||
:form-rules="formRules"
|
||||
:form-type="formType"
|
||||
:disable-field="disableField"
|
||||
@form-submit="formSubmit"
|
||||
@cancel-form="cancelForm"
|
||||
@before-cancel-form="cancelForm"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import formCo from "../Co/formCo";
|
||||
export default {
|
||||
components: {
|
||||
formCo,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogTitle: "新增记录",
|
||||
formType: 1,
|
||||
formData: {},
|
||||
dialogCreateFormVisible: false,
|
||||
tableHead: [
|
||||
{
|
||||
fieldId: 1,
|
||||
fieldName: "user_id",
|
||||
isChange: 0,
|
||||
isForm: 0,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户ID",
|
||||
webType: "el-input",
|
||||
},
|
||||
{
|
||||
fieldId: 2,
|
||||
fieldName: "username",
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: "String",
|
||||
nameCn: "用户名",
|
||||
webType: "el-input",
|
||||
},
|
||||
{
|
||||
fieldId: 3,
|
||||
fieldName: "password",
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: "String",
|
||||
nameCn: "密码",
|
||||
webType: "password",
|
||||
},
|
||||
{
|
||||
fieldId: 4,
|
||||
fieldName: "enabled",
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户状态",
|
||||
selectList: [
|
||||
{
|
||||
fieldId: 4,
|
||||
selectId: 1,
|
||||
selectKey: "禁用",
|
||||
selectType: 1,
|
||||
selectValue: "1",
|
||||
},
|
||||
{
|
||||
fieldId: 4,
|
||||
selectId: 2,
|
||||
selectKey: "启用",
|
||||
selectType: 1,
|
||||
selectValue: "2",
|
||||
},
|
||||
],
|
||||
webType: "el-select",
|
||||
},
|
||||
{
|
||||
fieldId: 5,
|
||||
fieldName: "user_type",
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户类型",
|
||||
selectList: [
|
||||
{
|
||||
fieldId: 5,
|
||||
selectId: 3,
|
||||
selectKey: "外部用户",
|
||||
selectType: 1,
|
||||
selectValue: "1",
|
||||
},
|
||||
{
|
||||
fieldId: 5,
|
||||
selectId: 4,
|
||||
selectKey: "内部用户",
|
||||
selectType: 1,
|
||||
selectValue: "2",
|
||||
},
|
||||
],
|
||||
webType: "el-select",
|
||||
},
|
||||
{
|
||||
fieldId: 6,
|
||||
fieldName: "create_time",
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: "datetime",
|
||||
nameCn: "创建时间",
|
||||
webType: "el-date-picker",
|
||||
},
|
||||
{
|
||||
fieldId: 7,
|
||||
fieldName: "update_time",
|
||||
isChange: 1,
|
||||
isForm: 1,
|
||||
javaType: "datetime",
|
||||
nameCn: "修改时间",
|
||||
webType: "el-date-picker",
|
||||
},
|
||||
],
|
||||
disableField: ["create_time", "update_time"],
|
||||
formRules: {
|
||||
password: [
|
||||
{ required: true, message: "密码不能为空", trigger: "blur" },
|
||||
],
|
||||
username: [
|
||||
{ required: true, message: "用户名不能为空", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//提交表单
|
||||
formSubmit(value) {
|
||||
this.dialogCreateFormVisible = false;
|
||||
},
|
||||
//关闭表单
|
||||
cancelForm() {
|
||||
this.dialogCreateFormVisible = false;
|
||||
this.formData = {};
|
||||
this.$nextTick(() => {
|
||||
const ref = this.$refs.formCo;
|
||||
ref.$refs.formCommon.resetFields();
|
||||
});
|
||||
},
|
||||
showAdd() {
|
||||
this.dialogTitle = "新增记录";
|
||||
this.formType = 1;
|
||||
this.formData = {};
|
||||
this.dialogCreateFormVisible = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 查询表单
|
||||
|
||||
表单组件查询功能。
|
||||
|
||||
***
|
||||
|
||||
<ClientOnly><Web-SearchForm></Web-SearchForm></ClientOnly>
|
||||
|
||||
::: details 代码块
|
||||
|
||||
***ts版本***
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-card shadow="always" class="select-card">
|
||||
<search-co
|
||||
:form-key="tableHead"
|
||||
:search-data="searchForm"
|
||||
:time-format="'yyyy-MM-dd HH:mm:ss'"
|
||||
@search-submit="query"
|
||||
@reset-search-form="resetSearch"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import searchCo from "../Co/searchCo";
|
||||
|
||||
@Component({
|
||||
name: "commonForm",
|
||||
components: {
|
||||
searchCo
|
||||
}
|
||||
})
|
||||
|
||||
export default class extends Vue {
|
||||
public searchForm: any = {};
|
||||
public tableHead: any = [
|
||||
{
|
||||
fieldId: 1,
|
||||
fieldName: "user_id",
|
||||
isChange: 0,
|
||||
isForm: 0,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户ID",
|
||||
webType: "el-input",
|
||||
},
|
||||
{
|
||||
fieldId: 2,
|
||||
fieldName: "username",
|
||||
isChange: 1,
|
||||
isSearch: 1,
|
||||
javaType: "String",
|
||||
nameCn: "用户名",
|
||||
webType: "el-input",
|
||||
},
|
||||
{
|
||||
fieldId: 3,
|
||||
fieldName: "password",
|
||||
isChange: 1,
|
||||
isSearch: 0,
|
||||
javaType: "String",
|
||||
nameCn: "密码",
|
||||
webType: "password",
|
||||
},
|
||||
{
|
||||
fieldId: 4,
|
||||
fieldName: "enabled",
|
||||
isChange: 1,
|
||||
isSearch: 1,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户状态",
|
||||
selectList: [
|
||||
{
|
||||
fieldId: 4,
|
||||
selectId: 1,
|
||||
selectKey: "禁用",
|
||||
selectType: 1,
|
||||
selectValue: "1",
|
||||
},
|
||||
{
|
||||
fieldId: 4,
|
||||
selectId: 2,
|
||||
selectKey: "启用",
|
||||
selectType: 1,
|
||||
selectValue: "2",
|
||||
},
|
||||
],
|
||||
webType: "el-select",
|
||||
},
|
||||
{
|
||||
fieldId: 5,
|
||||
fieldName: "user_type",
|
||||
isChange: 1,
|
||||
isSearch: 1,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户类型",
|
||||
selectList: [
|
||||
{
|
||||
fieldId: 5,
|
||||
selectId: 3,
|
||||
selectKey: "外部用户",
|
||||
selectType: 1,
|
||||
selectValue: "1",
|
||||
},
|
||||
{
|
||||
fieldId: 5,
|
||||
selectId: 4,
|
||||
selectKey: "内部用户",
|
||||
selectType: 1,
|
||||
selectValue: "2",
|
||||
},
|
||||
],
|
||||
webType: "el-select",
|
||||
},
|
||||
{
|
||||
fieldId: 6,
|
||||
fieldName: "create_time",
|
||||
isChange: 1,
|
||||
isSearch: 1,
|
||||
javaType: "datetime",
|
||||
nameCn: "创建时间",
|
||||
webType: "el-date-picker",
|
||||
},
|
||||
{
|
||||
fieldId: 7,
|
||||
fieldName: "update_time",
|
||||
isChange: 1,
|
||||
isSearch: 1,
|
||||
javaType: "datetime",
|
||||
nameCn: "修改时间",
|
||||
webType: "el-date-picker",
|
||||
},
|
||||
];
|
||||
|
||||
// 查询表格
|
||||
query() {};
|
||||
// 重置search表单
|
||||
resetSearch() {
|
||||
this.searchForm = {};
|
||||
};
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
***js版本***
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-card shadow="always" class="select-card">
|
||||
<search-co
|
||||
:form-key="tableHead"
|
||||
:search-data="searchForm"
|
||||
:time-format="'yyyy-MM-dd HH:mm:ss'"
|
||||
@search-submit="query"
|
||||
@reset-search-form="resetSearch"
|
||||
/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import searchCo from "../Co/searchCo";
|
||||
export default {
|
||||
components: {
|
||||
searchCo,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
searchForm: {},
|
||||
tableHead: [
|
||||
{
|
||||
fieldId: 1,
|
||||
fieldName: "user_id",
|
||||
isChange: 0,
|
||||
isForm: 0,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户ID",
|
||||
webType: "el-input",
|
||||
},
|
||||
{
|
||||
fieldId: 2,
|
||||
fieldName: "username",
|
||||
isChange: 1,
|
||||
isSearch: 1,
|
||||
javaType: "String",
|
||||
nameCn: "用户名",
|
||||
webType: "el-input",
|
||||
},
|
||||
{
|
||||
fieldId: 3,
|
||||
fieldName: "password",
|
||||
isChange: 1,
|
||||
isSearch: 0,
|
||||
javaType: "String",
|
||||
nameCn: "密码",
|
||||
webType: "password",
|
||||
},
|
||||
{
|
||||
fieldId: 4,
|
||||
fieldName: "enabled",
|
||||
isChange: 1,
|
||||
isSearch: 1,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户状态",
|
||||
selectList: [
|
||||
{
|
||||
fieldId: 4,
|
||||
selectId: 1,
|
||||
selectKey: "禁用",
|
||||
selectType: 1,
|
||||
selectValue: "1",
|
||||
},
|
||||
{
|
||||
fieldId: 4,
|
||||
selectId: 2,
|
||||
selectKey: "启用",
|
||||
selectType: 1,
|
||||
selectValue: "2",
|
||||
},
|
||||
],
|
||||
webType: "el-select",
|
||||
},
|
||||
{
|
||||
fieldId: 5,
|
||||
fieldName: "user_type",
|
||||
isChange: 1,
|
||||
isSearch: 1,
|
||||
javaType: "Integer",
|
||||
nameCn: "用户类型",
|
||||
selectList: [
|
||||
{
|
||||
fieldId: 5,
|
||||
selectId: 3,
|
||||
selectKey: "外部用户",
|
||||
selectType: 1,
|
||||
selectValue: "1",
|
||||
},
|
||||
{
|
||||
fieldId: 5,
|
||||
selectId: 4,
|
||||
selectKey: "内部用户",
|
||||
selectType: 1,
|
||||
selectValue: "2",
|
||||
},
|
||||
],
|
||||
webType: "el-select",
|
||||
},
|
||||
{
|
||||
fieldId: 6,
|
||||
fieldName: "create_time",
|
||||
isChange: 1,
|
||||
isSearch: 1,
|
||||
javaType: "datetime",
|
||||
nameCn: "创建时间",
|
||||
webType: "el-date-picker",
|
||||
},
|
||||
{
|
||||
fieldId: 7,
|
||||
fieldName: "update_time",
|
||||
isChange: 1,
|
||||
isSearch: 1,
|
||||
javaType: "datetime",
|
||||
nameCn: "修改时间",
|
||||
webType: "el-date-picker",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 查询表格
|
||||
query() {},
|
||||
// 重置search表单
|
||||
resetSearch() {
|
||||
this.searchForm = {};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Form Attributes
|
||||
|
||||
|
||||
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值
|
||||
| :---| :---- | :---- |:---- |:---- |
|
||||
| form-title | 表单标题 | String |-|-|
|
||||
| form-visible | 展示/关闭表单 | Boolean |-|-|
|
||||
| form-sub-botton | 表单提交按钮显示文字 | String |-|-|
|
||||
| form-key | 表单key值 | Array |-|-|
|
||||
| form-data | 表单数据（可为空） | Object |-|-|
|
||||
| form-rules | 表单校验规则 | Object | - | - |
|
||||
| form-type | 表单提交类型 1为新增，2为编辑 | Number |-|-|
|
||||
| disable-field | 表单不可编辑的部分 | Array |-|-|
|
||||
|
||||
## Form Events
|
||||
|
||||
|
||||
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| :---| :---- | :---- |
|
||||
| form-submit | 当用户手动点击提交按钮时触发的事件 | - |
|
||||
| cancel-form | 当用户手动点击取消按钮时触发的事件 | - |
|
||||
| search-submit | 表单提交触发的事件 | - |
|
||||
| reset-search-form | 重置搜索表单触发的事件 | - |
|
||||
274
docs/02.前端/04.组件/03.流程图组件.md
Normal file
274
docs/02.前端/04.组件/03.流程图组件.md
Normal file
@@ -0,0 +1,274 @@
|
||||
---
|
||||
title: 流程图组件
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/49aa37/
|
||||
---
|
||||
# 流程图组件
|
||||
|
||||
## 基本流程图
|
||||
|
||||
表格组件提供获取Object内容作为流程图的标识和名称，该组件也可以不传入任何参数直接引用，例如`<bpmn/>`即可调用组件。
|
||||
|
||||
注意：标识必须以字母和下划线开头，不支持中文。
|
||||
|
||||
***
|
||||
|
||||
<ClientOnly><Web-BpmnNameForm></Web-BpmnNameForm></ClientOnly>
|
||||
|
||||
::: details 代码块
|
||||
|
||||
***ts版本***
|
||||
|
||||
``` vue
|
||||
<template>
|
||||
<div>
|
||||
<bpmn :updateDate="updateDate" :updateBpmnFlag="updateBpmnFlag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import bpmn from "../Bpmn/bpmn";
|
||||
|
||||
@Component({
|
||||
name: "bpmnNameForm",
|
||||
components: {
|
||||
bpmn
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
private updateDate: { [key: string]: any } = { key: "process", name: "流程图" }
|
||||
private updateBpmnFlag: Boolean = false
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
***js版本***
|
||||
|
||||
``` vue
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<bpmn :updateDate="updateDate" :updateBpmnFlag="updateBpmnFlag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bpmn from "../Bpmn/bpmn";
|
||||
export default {
|
||||
components: {
|
||||
bpmn,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
updateDate: { key: "process", name: "流程图" },
|
||||
updateBpmnFlag: false
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
|
||||
:::
|
||||
|
||||
## 仅能查看的流程图
|
||||
|
||||
该组件仅提供查看功能。
|
||||
|
||||
***
|
||||
|
||||
<ClientOnly><Web-OnlyShowBpmn></Web-OnlyShowBpmn></ClientOnly>
|
||||
|
||||
::: details 代码块
|
||||
|
||||
***ts版本***
|
||||
|
||||
``` vue
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-button type="primary" @click="showBpmn()">查看流程图</el-button>
|
||||
<el-dialog title="流程图" :visible.sync="dialogShowBpmnVisible">
|
||||
<bpmnView :showData='showBpmnData'></bpmnView>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import bpmnView from "../Bpmn/bpmnView";
|
||||
|
||||
@Component({
|
||||
name: "onlyShowBpmn",
|
||||
components: {
|
||||
bpmnView
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
private dialogShowBpmnVisible: boolean = false;
|
||||
private showBpmnData:any =
|
||||
`
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:activiti="http://activiti.org/bpmn" id="m1577635100724" name="" targetNamespace="http://www.activiti.org/testm1577635100724">
|
||||
<process id="process1" name="流程图1" processType="None" isClosed="false" isExecutable="true">
|
||||
<extensionElements>
|
||||
<camunda:properties />
|
||||
</extensionElements>
|
||||
<startEvent id="_2" name="start">
|
||||
<outgoing>Flow_1mn3ncy</outgoing>
|
||||
</startEvent>
|
||||
<sequenceFlow id="Flow_1mn3ncy" sourceRef="_2" targetRef="Activity_03u7gdx" />
|
||||
<endEvent id="Event_1jrsaua">
|
||||
<incoming>Flow_0wm6kz4</incoming>
|
||||
</endEvent>
|
||||
<sequenceFlow id="Flow_0wm6kz4" sourceRef="Activity_03u7gdx" targetRef="Event_1jrsaua" />
|
||||
<userTask id="Activity_03u7gdx">
|
||||
<incoming>Flow_1mn3ncy</incoming>
|
||||
<outgoing>Flow_0wm6kz4</outgoing>
|
||||
</userTask>
|
||||
</process>
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_leave">
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_leave" bpmnElement="process1">
|
||||
<bpmndi:BPMNEdge id="Flow_1mn3ncy_di" bpmnElement="Flow_1mn3ncy">
|
||||
<di:waypoint x="176" y="384" />
|
||||
<di:waypoint x="230" y="384" />
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_0wm6kz4_di" bpmnElement="Flow_0wm6kz4">
|
||||
<di:waypoint x="330" y="384" />
|
||||
<di:waypoint x="392" y="384" />
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNShape id="BPMNShape__2" bpmnElement="_2">
|
||||
<omgdc:Bounds x="144" y="368" width="32" height="32" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<omgdc:Bounds x="149" y="400" width="23" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Event_1jrsaua_di" bpmnElement="Event_1jrsaua">
|
||||
<omgdc:Bounds x="392" y="366" width="36" height="36" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_0f4773x_di" bpmnElement="Activity_03u7gdx">
|
||||
<omgdc:Bounds x="230" y="344" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
</bpmndi:BPMNPlane>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</definitions>
|
||||
`,
|
||||
|
||||
private async showBpmn() {
|
||||
this.dialogShowBpmnVisible = true;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
***js版本***
|
||||
|
||||
``` vue
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-button type="primary" @click="showBpmn()">查看流程图</el-button>
|
||||
<el-dialog title="流程图" :visible.sync="dialogShowBpmnVisible">
|
||||
<bpmn-view :showData='showBpmnData'></bpmn-view>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bpmnView from "../Bpmn/bpmnView";
|
||||
export default {
|
||||
components: {
|
||||
bpmnView,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogShowBpmnVisible: false,
|
||||
showBpmnData: `
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:activiti="http://activiti.org/bpmn" id="m1577635100724" name="" targetNamespace="http://www.activiti.org/testm1577635100724">
|
||||
<process id="process1" name="流程图1" processType="None" isClosed="false" isExecutable="true">
|
||||
<extensionElements>
|
||||
<camunda:properties />
|
||||
</extensionElements>
|
||||
<startEvent id="_2" name="start">
|
||||
<outgoing>Flow_1mn3ncy</outgoing>
|
||||
</startEvent>
|
||||
<sequenceFlow id="Flow_1mn3ncy" sourceRef="_2" targetRef="Activity_03u7gdx" />
|
||||
<endEvent id="Event_1jrsaua">
|
||||
<incoming>Flow_0wm6kz4</incoming>
|
||||
</endEvent>
|
||||
<sequenceFlow id="Flow_0wm6kz4" sourceRef="Activity_03u7gdx" targetRef="Event_1jrsaua" />
|
||||
<userTask id="Activity_03u7gdx">
|
||||
<incoming>Flow_1mn3ncy</incoming>
|
||||
<outgoing>Flow_0wm6kz4</outgoing>
|
||||
</userTask>
|
||||
</process>
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_leave">
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_leave" bpmnElement="process1">
|
||||
<bpmndi:BPMNEdge id="Flow_1mn3ncy_di" bpmnElement="Flow_1mn3ncy">
|
||||
<di:waypoint x="176" y="384" />
|
||||
<di:waypoint x="230" y="384" />
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_0wm6kz4_di" bpmnElement="Flow_0wm6kz4">
|
||||
<di:waypoint x="330" y="384" />
|
||||
<di:waypoint x="392" y="384" />
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNShape id="BPMNShape__2" bpmnElement="_2">
|
||||
<omgdc:Bounds x="144" y="368" width="32" height="32" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<omgdc:Bounds x="149" y="400" width="23" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Event_1jrsaua_di" bpmnElement="Event_1jrsaua">
|
||||
<omgdc:Bounds x="392" y="366" width="36" height="36" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_0f4773x_di" bpmnElement="Activity_03u7gdx">
|
||||
<omgdc:Bounds x="230" y="344" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
</bpmndi:BPMNPlane>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</definitions>
|
||||
`,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showBpmn() {
|
||||
this.dialogShowBpmnVisible = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## Bpmn Attributes
|
||||
|
||||
|
||||
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值
|
||||
| :---| :---- | :---- |:---- |:---- |
|
||||
| updateBpmnFlag | 是否为编辑流程图 | Boolean |-|false|
|
||||
| updateDate | 数据(编辑时传入String) | String/Object |-|-|
|
||||
|
||||
|
||||
## Bpmn Components Events
|
||||
|
||||
|
||||
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| :---| :---- | :---- |
|
||||
| openBpmn | 当用户手动点击文件icon时触发的事件，打开bpmn格式文件 | file |
|
||||
| downloadBpmn | 当用户手动点击下载icon时触发的事件，下载bpmn格式文件 | - |
|
||||
| downloadSvg | 当用户手动点击图片icon时触发的事件，下载svg格式文件 | - |
|
||||
| handleUpdateData | 当用户手动点击上传icon时触发的事件，上传已有流程图 | - |
|
||||
|
||||
|
||||
185
docs/02.前端/04.组件/04.流程图组件之编辑.md
Normal file
185
docs/02.前端/04.组件/04.流程图组件之编辑.md
Normal file
@@ -0,0 +1,185 @@
|
||||
---
|
||||
title: 流程图组件之编辑
|
||||
date: 2021-02-03 09:26:32
|
||||
permalink: /pages/514c8f/
|
||||
---
|
||||
# 流程图组件之编辑
|
||||
|
||||
## 获取已有流程图内容，并编辑
|
||||
|
||||
表格组件提供获取已有流程图并编辑的功能。
|
||||
|
||||
***
|
||||
|
||||
<ClientOnly><Web-EditBpmn></Web-EditBpmn></ClientOnly>
|
||||
|
||||
::: details 代码块
|
||||
|
||||
***ts版本***
|
||||
``` vue
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<bpmn :updateDate="updateDate" :updateBpmnFlag="updateBpmnFlag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import bpmn from "../Bpmn/bpmn";
|
||||
|
||||
@Component({
|
||||
name: "editBpmn",
|
||||
components: {
|
||||
bpmn
|
||||
}
|
||||
})
|
||||
export default class extends Vue {
|
||||
private updateBpmnFlag: Boolean = false
|
||||
|
||||
private updateDate: any = `
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:activiti="http://activiti.org/bpmn" id="m1577635100724" name="" targetNamespace="http://www.activiti.org/testm1577635100724">
|
||||
<process id="process1" name="流程图1" processType="None" isClosed="false" isExecutable="true">
|
||||
<extensionElements>
|
||||
<camunda:properties />
|
||||
</extensionElements>
|
||||
<startEvent id="_2" name="start">
|
||||
<outgoing>Flow_1mn3ncy</outgoing>
|
||||
</startEvent>
|
||||
<sequenceFlow id="Flow_1mn3ncy" sourceRef="_2" targetRef="Activity_03u7gdx" />
|
||||
<endEvent id="Event_1jrsaua">
|
||||
<incoming>Flow_0wm6kz4</incoming>
|
||||
</endEvent>
|
||||
<sequenceFlow id="Flow_0wm6kz4" sourceRef="Activity_03u7gdx" targetRef="Event_1jrsaua" />
|
||||
<userTask id="Activity_03u7gdx">
|
||||
<incoming>Flow_1mn3ncy</incoming>
|
||||
<outgoing>Flow_0wm6kz4</outgoing>
|
||||
</userTask>
|
||||
</process>
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_leave">
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_leave" bpmnElement="process1">
|
||||
<bpmndi:BPMNEdge id="Flow_1mn3ncy_di" bpmnElement="Flow_1mn3ncy">
|
||||
<di:waypoint x="176" y="384" />
|
||||
<di:waypoint x="230" y="384" />
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_0wm6kz4_di" bpmnElement="Flow_0wm6kz4">
|
||||
<di:waypoint x="330" y="384" />
|
||||
<di:waypoint x="392" y="384" />
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNShape id="BPMNShape__2" bpmnElement="_2">
|
||||
<omgdc:Bounds x="144" y="368" width="32" height="32" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<omgdc:Bounds x="149" y="400" width="23" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Event_1jrsaua_di" bpmnElement="Event_1jrsaua">
|
||||
<omgdc:Bounds x="392" y="366" width="36" height="36" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_0f4773x_di" bpmnElement="Activity_03u7gdx">
|
||||
<omgdc:Bounds x="230" y="344" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
</bpmndi:BPMNPlane>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</definitions>
|
||||
`
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
***js版本***
|
||||
|
||||
``` vue
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<bpmn :updateDate="updateDate" :updateBpmnFlag="updateBpmnFlag" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import bpmn from "../Bpmn/bpmn";
|
||||
export default {
|
||||
components: {
|
||||
bpmn,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
updateBpmnFlag: true,
|
||||
updateDate: `
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:activiti="http://activiti.org/bpmn" id="m1577635100724" name="" targetNamespace="http://www.activiti.org/testm1577635100724">
|
||||
<process id="process1" name="流程图1" processType="None" isClosed="false" isExecutable="true">
|
||||
<extensionElements>
|
||||
<camunda:properties />
|
||||
</extensionElements>
|
||||
<startEvent id="_2" name="start">
|
||||
<outgoing>Flow_1mn3ncy</outgoing>
|
||||
</startEvent>
|
||||
<sequenceFlow id="Flow_1mn3ncy" sourceRef="_2" targetRef="Activity_03u7gdx" />
|
||||
<endEvent id="Event_1jrsaua">
|
||||
<incoming>Flow_0wm6kz4</incoming>
|
||||
</endEvent>
|
||||
<sequenceFlow id="Flow_0wm6kz4" sourceRef="Activity_03u7gdx" targetRef="Event_1jrsaua" />
|
||||
<userTask id="Activity_03u7gdx">
|
||||
<incoming>Flow_1mn3ncy</incoming>
|
||||
<outgoing>Flow_0wm6kz4</outgoing>
|
||||
</userTask>
|
||||
</process>
|
||||
<bpmndi:BPMNDiagram id="BPMNDiagram_leave">
|
||||
<bpmndi:BPMNPlane id="BPMNPlane_leave" bpmnElement="process1">
|
||||
<bpmndi:BPMNEdge id="Flow_1mn3ncy_di" bpmnElement="Flow_1mn3ncy">
|
||||
<di:waypoint x="176" y="384" />
|
||||
<di:waypoint x="230" y="384" />
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="Flow_0wm6kz4_di" bpmnElement="Flow_0wm6kz4">
|
||||
<di:waypoint x="330" y="384" />
|
||||
<di:waypoint x="392" y="384" />
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNShape id="BPMNShape__2" bpmnElement="_2">
|
||||
<omgdc:Bounds x="144" y="368" width="32" height="32" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<omgdc:Bounds x="149" y="400" width="23" height="14" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Event_1jrsaua_di" bpmnElement="Event_1jrsaua">
|
||||
<omgdc:Bounds x="392" y="366" width="36" height="36" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="Activity_0f4773x_di" bpmnElement="Activity_03u7gdx">
|
||||
<omgdc:Bounds x="230" y="344" width="100" height="80" />
|
||||
</bpmndi:BPMNShape>
|
||||
</bpmndi:BPMNPlane>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</definitions>
|
||||
`
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
```
|
||||
:::
|
||||
|
||||
## Bpmn Attributes
|
||||
|
||||
|
||||
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值
|
||||
| :---| :---- | :---- |:---- |:---- |
|
||||
| updateBpmnFlag | 是否为编辑流程图 | Boolean |-|false|
|
||||
| updateDate | 数据(编辑时传入String) | String/Object |-|-|
|
||||
|
||||
|
||||
## Bpmn Components Events
|
||||
|
||||
|
||||
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| :---| :---- | :---- |
|
||||
| openBpmn | 当用户手动点击文件icon时触发的事件，打开bpmn格式文件 | file |
|
||||
| downloadBpmn | 当用户手动点击下载icon时触发的事件，下载bpmn格式文件 | - |
|
||||
| downloadSvg | 当用户手动点击图片icon时触发的事件，下载svg格式文件 | - |
|
||||
| handleUpdateData | 当用户手动点击上传icon时触发的事件，上传已有流程图 | - |
|
||||
Reference in New Issue
Block a user