<template lang="">
<div class="vueFlow">
<div id="container"></div>
<div id="stencil"></div>
<div id="graph-container"></div>
</div>
<el-button @click="submitAll" type="primary">保存</el-button>
<el-dialog
:title="modalType == 'add' ? '新增' : '编辑'"
v-model="dialogVisible"
width="500"
v-loading="loading"
>
<byForm
:formConfig="formConfig"
:formOption="formOption"
v-model="formData.data"
:rules="rules"
ref="byform"
>
</byForm>
<template #footer>
<el-button @click="dialogVisible = false" size="large"
>取 消</el-button
>
<el-button
type="danger"
@click="deleteFlowDefinitionNodeObj()"
size="large"
:loading="submitLoading"
>
删 除
</el-button>
<el-button
type="primary"
@click="submitForm('byform')"
size="large"
:loading="submitLoading"
>
确 定
</el-button>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import {
defineComponent,
ref,
onMounted,
onUnmounted,
watch,
reactive,
toRefs,
computed,
nextTick,
getCurrentInstance,
} from 'vue'
import byForm from '@/components/byForm/index'
import { Graph, Shape } from '@antv/x6'
import { Stencil } from '@antv/x6-plugin-stencil'
import { Transform } from '@antv/x6-plugin-transform'
import { Selection } from '@antv/x6-plugin-selection'
import { Snapline } from '@antv/x6-plugin-snapline'
import { Keyboard } from '@antv/x6-plugin-keyboard'
import { Clipboard } from '@antv/x6-plugin-clipboard'
import { History } from '@antv/x6-plugin-history'
import Cookies from 'js-cookie'
import { ElMessage, ElMessageBox } from "element-plus";
defineProps({
title: {
type: Object,
default: '',
},
});
const { proxy } = getCurrentInstance()
const internalInstance = getCurrentInstance()
const dialogVisible = ref(false)
const modalType = ref('add')
const loading = ref(false)
const submitLoading = ref(false)
const formData = reactive({
data: {
userName: '',
password: '',
},
})
const byform = ref(null)
const flowDefinitionNodeObj = ref({})
const rules = reactive({
nodeName: [
{
required: true,
message: '请输入节点名称',
trigger: 'blur',
},
],
handleObjectType: [
{
required: true,
message: '办理人类型不能为空',
trigger: 'blur',
},
],
handleObjectId: [
{
required: true,
message: '办理人不能为空',
trigger: 'blur',
},
],
})
const formConfig = computed(() => {
return [
{
type: 'input',
prop: 'nodeName',
label: '节点名称',
required: true,
itemType: 'text',
},
{
type: 'select',
prop: 'handleObjectType',
label: '办理人',
placeholder: '请选择办理人类型',
required: true,
itemWidth: 30,
fn: (e) => {
console.log(e)
gethandleObjectList(e)
},
//1用户 2部门负责人 3部门总监 4岗位 5角色
data: [
{
label: '用户',
value: 1,
},
{
label: '部门负责人',
value: 2,
},
{
label: '部门总监',
value: 3,
},
{
label: '岗位',
value: 4,
},
{
label: '角色',
value: 5,
},
],
},
// {
// type: "treeSelect",
// prop: "handleObjectId",
// label: "请选择办理人",
// itemWidth: 30,
// data: [],
// },
{
type: 'select',
label: ' ',
itemWidth: 30,
prop: 'handleObjectId',
placeholder: '请选择办理人',
data: [],
},
{
type: 'input',
prop: 'handlingMethod',
label: '节点后置执行方法',
required: true,
itemType: 'text',
},
{
type: 'input',
prop: 'jumpCondition',
label: '条件表达式',
required: true,
itemType: 'text',
},
{
type: 'checkbox',
prop: 'nodeButtonSet',
label: '节点按钮',
//1通过 2驳回 3返回上一步 4退回到发起人
data: [
{
label: '通过',
value: 1,
},
{
label: '驳回',
value: 2,
},
{
label: '返回上一步',
value: 3,
},
{
label: '退回到发起人',
value: 4,
},
],
},
{
type: 'radio',
prop: 'jobNumber11',
label: '审批意见必填',
data: [
{
label: '是',
value: 1,
},
{
label: '否',
value: 0,
},
],
},
]
})
const formOption = reactive({
inline: true,
labelWidth: 100,
itemWidth: 100,
})
let graph
const submitForm = () => {
byform.value.handleSubmit((valid) => {
flowDefinitionNodeObj.value[formData.data.id] = formData.data
console.log(flowDefinitionNodeObj.value)
})
}
const submitFormData = {
flowInfoId:null,
titleTemplate:null,
tenantId:Cookies.get('tenantId'),
nodeObject:'',
lineObject:'',
flowDefinitionNodeList:[],
}
const submitAll = () => {
if(proxy.title == '') {
ElMessage({
message: '请输入流程标题',
type: 'warning',
})
return
}
submitFormData.titleTemplate = proxy.title
const nodeList = graph.toJSON().cells
console.log(nodeList)
const isStart = false
for (let i = 0; i < nodeList.length; i++) {
const element = nodeList[i];
//是办理节点
if(element.id != 1 && element.shape != "edge") {
console.log(element)
if(!flowDefinitionNodeObj.value[element.id]) {
ElMessage({
message: '有节点未配置，请检查节点123123123',
type: 'warning',
})
return
}
submitFormData.flowDefinitionNodeList.push({...flowDefinitionNodeObj.value[element.id],nodeType:2})
}
if(element.id == "1") {
submitFormData.flowDefinitionNodeList.push({
nodeName:'开始',
nodeType:1,
id:1,
nodeButtonSet:'',
parentId:0,
})
}
//说明是线
if(element.shape == "edge") {
console.log(flowDefinitionNodeObj)
if(!flowDefinitionNodeObj.value[element.target.cell]) {
ElMessage({
message: '有节点未配置，请检查节点',
type: 'warning',
})
return
}
flowDefinitionNodeObj.value[element.target.cell].id = element.target.cell
flowDefinitionNodeObj.value[element.target.cell].parentId = element.source.cell
submitFormData.flowDefinitionNodeList = []
}
}
addVersion()
console.log(flowDefinitionNodeObj.value)
}
//选取一个随机不重复的正整数id
const randomId = () => {
const id = Math.floor(Math.random() * 100000000000000000)
if(flowDefinitionNodeObj.value[id]) {
randomId()
} else {
return id
}
}
const addVersion = () => {
const idObg = {}
for (let i = 0; i < submitFormData.flowDefinitionNodeList.length; i++) {
const element = submitFormData.flowDefinitionNodeList[i];
if(isNaN(element.id)) {
if(idObg[element.id]) {
element.id = idObg[element.id]
} else {
const id = randomId()
idObg[element.id] = id
element.id = id
}
}
if(isNaN(element.parentId) && element.nodeName != '开始') {
if(idObg[element.parentId]) {
element.parentId = idObg[element.parentId]
} else {
const id = randomId()
idObg[element.parentId] = id
element.parentId = id
}
}
//nodeButtonSet转成字符串类型，用逗号隔开
if(element.nodeButtonSet) {
element.nodeButtonSet = element.nodeButtonSet.join(',')
}
}
console.log(submitFormData)
proxy.post('/flowDefinition/addVersion',submitFormData)
.then((res) => {
console.log(res)
ElMessage({
message: '保存成功',
type: 'success',
})
})
}
//将组数里的id和parentId转换成整正整数类型
const changeId = (arr) => {
for (let i = 0; i < arr.length; i++) {
const element = arr[i];
element.id = parseInt(element.id)
element.parentId = parseInt(element.parentId)
}
}
const deleteFlowDefinitionNodeObj = (id) => {
graph.removeNode(formData.data.id)
delete flowDefinitionNodeObj.value[id]
dialogVisible.value = false
}
const gethandleObjectList = (e) => {
formData.data.handleObjectId = ''
if(e === 1) {
proxy.get('/tenantUser/list?pageNum=1&pageSize=1000&tenantId=' + Cookies.get('tenantId'),{})
.then((res) => {
formConfig.value[2].data = res.rows.map((item) => {
return {
label: item.nickName,
value: item.userId,
}
})
})
}
if(e === 3 || e === 2) {
proxy.get('/tenantDept/list?pageNum=1&pageSize=1000&tenantId=' + Cookies.get('tenantId'),{})
.then((res) => {
formConfig.value[2].data =res.data.map(item=> {
return {
label: item.deptName,
value: item.deptId,
}
})
})
}
if(e === 4) {
}
if(e === 5) {
proxy.get('/tenantRole/list?pageNum=1&pageSize=1000&tenantId=' + Cookies.get('tenantId'),{})
.then((res) => {
formConfig.value[2].data = res.rows.map((item) => {
return {
label: item.roleName,
value: item.roleId,
}
})
})
}
}
const getTenantDept = () => {
}
getTenantDept()
const recursive = (data) => {
data.map((item) => {
item.label = item.deptName;
item.id = item.deptId;
if (item.children) {
recursive(item.children);
} else {
item.children = [];
}
});
};
const pushRoom = (port: any) => {
console.log(port)
if(port.node.label == '结束') {
flowDefinitionNodeObj.value[port.node.id] = {
nodeName:'结束',
nodeType:99,
id:port.id,
nodeButtonSet:'',
}
}
console.log(flowDefinitionNodeObj.value)
}
//用于存储流程定义节点数据
const antvInit = () => {
graph = new Graph({
height: 600,
container: document.getElementById('graph-container')!,
grid: true,
onPortRendered: pushRoom,
mousewheel: {
enabled: true,
zoomAtMousePosition: true,
modifiers: 'ctrl',
minScale: 0.5,
maxScale: 3,
},
connecting: {
router: 'manhattan',
connector: {
name: 'rounded',
args: {
radius: 8,
},
},
anchor: 'center',
connectionPoint: 'anchor',
allowBlank: false,
snap: {
radius: 20,
},
createEdge() {
return new Shape.Edge({
attrs: {
line: {
stroke: '#A2B1C3',
strokeWidth: 2,
targetMarker: {
name: 'block',
width: 12,
height: 8,
},
},
},
zIndex: 0,
})
},
validateConnection({ targetMagnet }) {
return !!targetMagnet
},
},
highlighting: {
magnetAdsorbed: {
name: 'stroke',
args: {
attrs: {
fill: '#5F95FF',
stroke: '#5F95FF',
},
},
},
},
})
const stencil = new Stencil({
title: '流程图',
target: graph,
stencilGraphWidth: 200,
stencilGraphHeight: 180,
collapsable: true,
groups: [
{
title: '基础流程图',
name: 'group1',
},
],
layoutOptions: {
columns: 2,
columnWidth: 80,
rowHeight: 55,
},
})
document.getElementById('stencil')!.appendChild(stencil.container)
// #region 使用插件
graph
.use(
new Transform({
resizing: true,
rotating: true,
})
)
.use(
new Selection({
enabled: true,
rubberband: true,
showNodeSelectionBox: true,
})
)
.use(
new Snapline({
enabled: true,
})
)
.use(
new Keyboard({
enabled: true,
})
)
.use(
new Clipboard({
enabled: true,
})
)
.use(
new History({
enabled: true,
})
)
// 控制连接桩显示/隐藏
const showPorts = (ports: NodeListOf<SVGElement>, show: boolean) => {
for (let i = 0, len = ports.length; i < len; i += 1) {
ports[i].style.visibility = show ? 'visible' : 'hidden'
}
}
graph.on('node:mouseenter', () => {
const container = document.getElementById('graph-container')!
const ports = container.querySelectorAll(
'.x6-port-body'
) as NodeListOf<SVGElement>
showPorts(ports, true)
})
graph.on('node:mouseleave', () => {
const container = document.getElementById('graph-container')!
const ports = container.querySelectorAll(
'.x6-port-body'
) as NodeListOf<SVGElement>
showPorts(ports, false)
})
// #endregion
graph.on('cell:click', ({ e, x, y, cell, view }) => {
console.log(cell)
if (cell.label === '开始' || cell.label === '结束' || cell.shape === 'edge') {
return
}
if (flowDefinitionNodeObj.value[cell.id]) {
formData.data = flowDefinitionNodeObj.value[cell.id]
} else {
formData.data = {
id: cell.id,
cell: cell,
}
}
dialogVisible.value = true
})
// #region 初始化图形
const ports = {
groups: {
top: {
position: 'top',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#5F95FF',
strokeWidth: 1,
fill: '#fff',
style: {
visibility: 'hidden',
},
},
},
},
right: {
position: 'right',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#5F95FF',
strokeWidth: 1,
fill: '#fff',
style: {
visibility: 'hidden',
},
},
},
},
bottom: {
position: 'bottom',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#5F95FF',
strokeWidth: 1,
fill: '#fff',
style: {
visibility: 'hidden',
},
},
},
},
left: {
position: 'left',
attrs: {
circle: {
r: 4,
magnet: true,
stroke: '#5F95FF',
strokeWidth: 1,
fill: '#fff',
style: {
visibility: 'hidden',
},
},
},
},
},
items: [
{
group: 'top',
},
{
group: 'right',
},
{
group: 'bottom',
},
{
group: 'left',
},
],
}
Graph.registerNode(
'custom-rect',
{
inherit: 'rect',
width: 66,
height: 36,
attrs: {
body: {
strokeWidth: 1,
stroke: '#5F95FF',
fill: '#EFF4FF',
},
text: {
fontSize: 12,
fill: '#262626',
},
},
ports: { ...ports },
},
true
)
Graph.registerNode(
'custom-polygon',
{
inherit: 'polygon',
width: 66,
height: 36,
attrs: {
body: {
strokeWidth: 1,
stroke: '#5F95FF',
fill: '#EFF4FF',
},
text: {
fontSize: 12,
fill: '#262626',
},
},
ports: {
...ports,
items: [
{
group: 'top',
},
{
group: 'bottom',
},
],
},
},
true
)
Graph.registerNode(
'custom-circle',
{
inherit: 'circle',
width: 45,
height: 45,
attrs: {
body: {
strokeWidth: 1,
stroke: '#5F95FF',
fill: '#EFF4FF',
},
text: {
fontSize: 12,
fill: '#262626',
},
},
ports: { ...ports },
},
true
)
Graph.registerNode(
'custom-image',
{
inherit: 'rect',
width: 52,
height: 52,
markup: [
{
tagName: 'rect',
selector: 'body',
},
{
tagName: 'image',
},
{
tagName: 'text',
selector: 'label',
},
],
attrs: {
body: {
stroke: '#5F95FF',
fill: '#5F95FF',
},
image: {
width: 26,
height: 26,
refX: 13,
refY: 16,
},
label: {
refX: 3,
refY: 2,
textAnchor: 'left',
textVerticalAnchor: 'top',
fontSize: 12,
fill: '#fff',
},
},
ports: { ...ports },
},
true
)
let firstLi = document.createElement('li')
firstLi.innerText = '指标详情'
console.log(firstLi)
const r1 = graph.createNode({
shape: 'custom-rect',
label: '开始',
zIndex: 100,
attrs: {
body: {
rx: 20,
ry: 26,
},
},
tools: [
{
name: 'button',
args: {
firstLi,
},
},
],
})
const r2 = graph.createNode({
shape: 'custom-rect',
label: '办理',
})
const r3 = graph.createNode({
shape: 'custom-rect',
attrs: {
body: {
rx: 6,
ry: 6,
},
},
label: '分支',
})
const r4 = graph.createNode({
shape: 'custom-polygon',
attrs: {
body: {
refPoints: '0,10 10,0 20,10 10,20',
},
},
label: '结束',
})
stencil.load([ r2, r4], 'group1')
graph.addNode({
shape: 'custom-rect',
label: '开始',
id: 1,
x: 500,
y: 100,
})
}
onMounted(() => {
antvInit()
//获取url router参数
const router = useRouter();
submitFormData.flowInfoId = router.currentRoute.value.query.id
})
</script>
<style lang="scss">
.x6-widget-stencil-title {
display: none;
}
.x6-widget-stencil-content {
top: 0 !important;
}
.vueFlow {
position: relative;
display: flex;
justify-content: space-between;
overflow: hidden;
height: 600px;
#stencil {
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 200px;
height: 500px;
background: #fff;
border-right: 1px solid #e8e8e8;
}
#container {
}
#graph-container {
width: 100%;
position: absolute;
right: 0;
top: 0;
}
}
</style>