Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
4a7fd44b 1 parent c23dd1a7

初始化流程图结构调整

Inline Side-by-side
Showing 2 changed files with 51 additions and 69 deletions
......@@ -385,54 +385,28 @@ export default {
data: AppData, // 渲染的数据，数据格式参考G6文档
detailModel: null,
editorLoading: false, // 开始编辑器的loading状态
selectOptions: [
{ label: '待确认', value: '0' },
{ label: '填写表单', value: '1' },
{ label: '部门负责人审批', value: '2' },
{ label: '总经理审批', value: '3' },
],
menuData: [
{
label: '流程节点',
menus: [
{ label: '开始', shape: 'ellipse', id: 'start-node' },
{ label: '结束', shape: 'ellipse', id: 'end-node' },
{ label: '审批节点', busType: '123' },
{ label: '判断节点', shape: 'diamond' },
],
},
{
label: '其他形状节点',
menus: [
{ label: '矩形节点', shape: 'rect' },
{ label: '圆形节点', shape: 'circle' },
{ label: '椭圆节点', shape: 'ellipse' },
{ label: '菱形节点', shape: 'diamond' },
{ label: '三角形节点', shape: 'triangle' },
{ label: '星形节点', shape: 'star' },
],
},
],
// activityConfig: {
// advertisement: {
// text: "广告宣传1",
// desc: "通过广告宣传新品",
// color: "#9283ed",
// img: "https://cdn.ipadbiz.cn/oa/advertisement-node.svg"
// menuData: [
// {
// label: '流程节点',
// menus: [
// { label: '开始', shape: 'ellipse', id: 'start-node' },
// { label: '结束', shape: 'ellipse', id: 'end-node' },
// { label: '审批节点', busType: '123' },
// { label: '判断节点', shape: 'diamond' },
// ],
// },
// coupon: {
// text: "优惠券",
// desc: "发放奖励优惠券",
// color: "#ed8383",
// img: "https://cdn.ipadbiz.cn/oa/coupon-node.svg"
// {
// label: '其他形状节点',
// menus: [
// { label: '矩形节点', shape: 'rect' },
// { label: '圆形节点', shape: 'circle' },
// { label: '椭圆节点', shape: 'ellipse' },
// { label: '菱形节点', shape: 'diamond' },
// { label: '三角形节点', shape: 'triangle' },
// { label: '星形节点', shape: 'star' },
// ],
// },
// crowd: {
// text: "用户反馈",
// desc: "收集用户反馈信息",
// color: "#92dba8",
// img: "https://cdn.ipadbiz.cn/oa/crowd-node.svg"
// }
// },
// ],
controlList: {
flow: {
text: '流程节点',
......@@ -489,9 +463,7 @@ export default {
btnText: '',
},
node_name: '', // 节点名称
userTags: [ // 节点负责人
{ id: "user-1-1", name: "用户1-1" }
],
userTags: [], // 节点负责人,
auth_all_checked: false,
auth_all_edit: false,
field_auths: [ // 字段权限
......@@ -1269,7 +1241,7 @@ body {
}
/* .demo-tabs > .el-tabs__content { */
/* padding: 32px; */
/* padding: 32px; */
/* } */
.flow-tag__wrapper {
......@@ -1348,27 +1320,32 @@ body {
}
}
.el-tabs__item.is-active, .el-radio-button__inner:hover {
.el-tabs__item.is-active,
.el-radio-button__inner:hover {
color: #009688 !important;
}
.el-tabs__active-bar, .el-radio-button__original-radio:checked+.el-radio-button__inner {
background-color: #009688!important;
.el-tabs__active-bar,
.el-radio-button__original-radio:checked + .el-radio-button__inner {
background-color: #009688 !important;
}
.el-tag {
background-color: #009688!important;
background-color: #009688 !important;
color: white !important;
}
.el-tag .el-tag__close, .el-radio-button__original-radio:checked+.el-radio-button__inner:hover {
.el-tag .el-tag__close,
.el-radio-button__original-radio:checked + .el-radio-button__inner:hover {
color: white !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-switch.is-checked .el-switch__core {
background-color: #009688!important;
border-color: #009688!important;
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-switch.is-checked .el-switch__core {
background-color: #009688 !important;
border-color: #009688 !important;
}
.el-button:focus, .el-button:hover {
color: #009688!important;
border-color: #009688!important;
background-color: white!important;
.el-button:focus,
.el-button:hover {
color: #009688 !important;
border-color: #009688 !important;
background-color: white !important;
outline: 0;
}
</style>
......
/*
* @Date: 2023-10-27 09:29:48
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-11-20 13:54:00
* @LastEditTime: 2023-11-22 17:41:19
* @FilePath: /vue-flow-editor/doc/data.js
* @Description: 初始化结构，数据都是固定的
*/
import { v4 as uuidv4 } from 'uuid';
const flow_id = uuidv4();
const cc_id = uuidv4();
export const AppData = {
nodes: [
{
......@@ -16,7 +21,7 @@ export const AppData = {
control: 'start',
},
{
id: '5353453523',
id: flow_id,
x: 225,
y: 210,
text: '流程节点',
......@@ -32,7 +37,7 @@ export const AppData = {
// control: 'flow',
// },
{
id: '1700204887203',
id: cc_id,
x: 465,
y: 210,
text: '抄送节点',
......@@ -52,19 +57,19 @@ export const AppData = {
{
source: 'start-node',
sourceAnchor: 2,
target: '5353453523',
target: flow_id,
targetAnchor: 0,
},
{
source: '5353453523',
source: flow_id,
sourceAnchor: 2,
target: 'end-node',
targetAnchor: 0,
},
{
source: '5353453523',
source: flow_id,
sourceAnchor: 3,
target: '1700204887203',
target: cc_id,
targetAnchor: 1,
},
// {
......