Compare commits
	
		
			324 Commits
		
	
	
		
			688c541074
			...
			projects/m
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
| 1c7c10205e | |||
| 
						 | 
					74003e9d89 | ||
| 
						 | 
					cb72e2b68a | ||
| 025b061ec2 | |||
| 
						 | 
					f2912eaee1 | ||
| 
						 | 
					8025d00709 | ||
| 60edd8f2c4 | |||
| c0214c9eb7 | |||
| da85e5211a | |||
| 23afb0db0d | |||
| d0adf3a63e | |||
| 
						 | 
					b81c95f796 | ||
| e7f21456a3 | |||
| 
						 | 
					1537b1be58 | ||
| 
						 | 
					b2304941a4 | ||
| 14b2a49053 | |||
| 
						 | 
					6adac714f0 | ||
| 
						 | 
					0349f3cde0 | ||
| 
						 | 
					4cafa78908 | ||
| 61ef172534 | |||
| 
						 | 
					19d913a49e | ||
| 
						 | 
					70c3fd44d6 | ||
| 78d6f0bb23 | |||
| 
						 | 
					cf51eff0b7 | ||
| 
						 | 
					539dddf217 | ||
| 
						 | 
					317d01934b | ||
| 
						 | 
					cdfe5c9c1b | ||
| c1ea5157a5 | |||
| 41ceefc20e | |||
| 54425859b5 | |||
| a2a4f8dccd | |||
| 
						 | 
					fd3b054108 | ||
| 
						 | 
					dacae0cbd8 | ||
| 
						 | 
					be83c8196e | ||
| 
						 | 
					ef3f5d3fe7 | ||
| 
						 | 
					ec550f22ec | ||
| 
						 | 
					60633ac581 | ||
| 
						 | 
					9351b82d11 | ||
| 5e4227ba25 | |||
| 82f63dc4ff | |||
| 9a29185410 | |||
| 43e824f958 | |||
| 
						 | 
					de831b339f | ||
| 
						 | 
					f0105c377c | ||
| 3ba5574669 | |||
| 
						 | 
					082988d6d7 | ||
| 
						 | 
					7acb861919 | ||
| c41153a946 | |||
| 6d658d9212 | |||
| bf4bab2f3c | |||
| 20f0efa413 | |||
| 
						 | 
					c48f81b1d9 | ||
| 
						 | 
					7233720c2e | ||
| 6a491ff498 | |||
| 
						 | 
					be607e4bf3 | ||
| 
						 | 
					87ef42e277 | ||
| aa65a7e97e | |||
| 
						 | 
					b8d26c87d8 | ||
| b89f510e61 | |||
| 
						 | 
					0e60f426bc | ||
| 
						 | 
					21f4879394 | ||
| 067cd4765e | |||
| 3c4fe6daaa | |||
| 
						 | 
					e24f9c1079 | ||
| 
						 | 
					61567ce86a | ||
| 2ee66714ca | |||
| ab5867c4fd | |||
| 9a53391999 | |||
| ec0c09a674 | |||
| 
						 | 
					90e9b179eb | ||
| 
						 | 
					8e2b332c7b | ||
| f37a12d2e1 | |||
| cb19872012 | |||
| 
						 | 
					8ba79185d4 | ||
| 
						 | 
					104cda5a41 | ||
| 
						 | 
					151c5708c4 | ||
| 837735b7e8 | |||
| 
						 | 
					e00a08385f | ||
| 
						 | 
					a8c3d2c585 | ||
| eb097e77bd | |||
| 
						 | 
					30eecb8bd1 | ||
| 
						 | 
					f4a6229170 | ||
| ab593bff20 | |||
| 4b01dd3ec3 | |||
| ed3ea7dde8 | |||
| 1d9e272f99 | |||
| 
						 | 
					43c9153777 | ||
| 
						 | 
					c6d504583b | ||
| 
						 | 
					22f3c87f02 | ||
| 
						 | 
					1f54c9179d | ||
| f7247f5161 | |||
| 
						 | 
					c8856f34b5 | ||
| 
						 | 
					42c42abc08 | ||
| 0fffed9b0e | |||
| 
						 | 
					d251daa3f5 | ||
| 
						 | 
					ed5120ca97 | ||
| 
						 | 
					becf34d089 | ||
| f0d64de77b | |||
| 56819176b3 | |||
| d302179f6f | |||
| 8c117fae8e | |||
| 
						 | 
					b6cf7b2ddc | ||
| 
						 | 
					2f98b42bd2 | ||
| fb8ae9226a | |||
| 3d3763c4ef | |||
| ea675b9dea | |||
| bda065e4be | |||
| 
						 | 
					5ea4c219ed | ||
| 
						 | 
					16186667da | ||
| 
						 | 
					c7cd6e7b1e | ||
| 
						 | 
					29c3a9fb72 | ||
| 
						 | 
					1e1313d090 | ||
| d0eb1d84c8 | |||
| 
						 | 
					445d8f4818 | ||
| 
						 | 
					46ce982cfc | ||
| 391e06a382 | |||
| 72e1b4e8f9 | |||
| b41ba04cb4 | |||
| 
						 | 
					4482ce0433 | ||
| 
						 | 
					ecf6745c8a | ||
| c9128ce946 | |||
| ba08175de8 | |||
| 
						 | 
					22f8322baf | ||
| 
						 | 
					6f8abc9758 | ||
| 59d53b60c7 | |||
| d448280782 | |||
| 0337b54202 | |||
| 
						 | 
					9dec81e0b2 | ||
| 
						 | 
					64de2c50b6 | ||
| 
						 | 
					bd0f9e24fd | ||
| 
						 | 
					f3043ee11f | ||
| 5584a47575 | |||
| b0078cb099 | |||
| e5acd497b5 | |||
| 6b452dce36 | |||
| aacf87f6d3 | |||
| 
						 | 
					bfa17e422d | ||
| 
						 | 
					e25f872589 | ||
| 83b834d2fc | |||
| 1b2c16fcdb | |||
| 475ec35ec5 | |||
| 1328da9616 | |||
| 92b9ec7da7 | |||
| c1af47db81 | |||
| 15afbcd612 | |||
| 
						 | 
					dabbc6b63a | ||
| 
						 | 
					cfab3353d3 | ||
| 
						 | 
					2298fc56b6 | ||
| bb77d0f8c6 | |||
| 
						 | 
					e8938a62eb | ||
| 
						 | 
					2a599d96b3 | ||
| 
						 | 
					6050eb4df5 | ||
| 02c3b3db0d | |||
| 3308fcbef9 | |||
| cb7135bad5 | |||
| 4a56f92961 | |||
| 
						 | 
					8f11c2f47c | ||
| 
						 | 
					b41dc9593c | ||
| 862fe20760 | |||
| 1ed409a98e | |||
| 68e738cf12 | |||
| 
						 | 
					4866198a98 | ||
| 
						 | 
					49df8a72bd | ||
| 
						 | 
					087af452de | ||
| 
						 | 
					63a753d7d6 | ||
| b1cdf083dd | |||
| 673ddcb996 | |||
| a9e60dbe82 | |||
| 
						 | 
					92d197a513 | ||
| 
						 | 
					e7f440a142 | ||
| 5d3622bf62 | |||
| 5ccb9297e1 | |||
| ce528f18b6 | |||
| 
						 | 
					024060182e | ||
| 
						 | 
					4f111a95d6 | ||
| 8fc6b73179 | |||
| 7f504e5cdd | |||
| 7c5d8bde0b | |||
| 
						 | 
					0b1761e83c | ||
| 
						 | 
					cafa156d72 | ||
| ed46ed7d09 | |||
| 
						 | 
					f89c6dfe14 | ||
| 
						 | 
					a3b2eae33f | ||
| e70ff40554 | |||
| d3d93acd0f | |||
| 93236f9828 | |||
| 
						 | 
					fef8824844 | ||
| a4fceeb981 | |||
| 84468cc883 | |||
| ea04d55fc1 | |||
| ef1078360a | |||
| 60f6c3a8fe | |||
| a4b340ac5d | |||
| 
						 | 
					2592551e66 | ||
| 
						 | 
					1fde96e677 | ||
| 0b16e1fe0d | |||
| abcec3bcdc | |||
| bdd14eec70 | |||
| 44e7e219a4 | |||
| 
						 | 
					ec51beb8ea | ||
| 
						 | 
					433618e71d | ||
| 812b72f10d | |||
| 
						 | 
					05f10ab51d | ||
| 
						 | 
					e7828fd277 | ||
| 58457487d1 | |||
| 
						 | 
					6c54c223c5 | ||
| 
						 | 
					b2cc509f8e | ||
| b6236e89b1 | |||
| cbc7cbc574 | |||
| b5b952e1cc | |||
| 33ed9f15fa | |||
| c85c6e4323 | |||
| 30d22b34e1 | |||
| 3d3fa2ccee | |||
| f960ece594 | |||
| 949675b3a2 | |||
| f52815abe6 | |||
| 
						 | 
					ac4cea0c7e | ||
| 
						 | 
					93fea84c79 | ||
| a06682de3f | |||
| e1773dae03 | |||
| f6d866907c | |||
| 7fe8d7e72c | |||
| 1e4a33a703 | |||
| d1ad913bab | |||
| 
						 | 
					38edf00925 | ||
| 
						 | 
					bf231f7157 | ||
| 04e2471a54 | |||
| 
						 | 
					9e2ce5f636 | ||
| 
						 | 
					8a54c046d9 | ||
| 3fa702cc12 | |||
| 8ebff703ee | |||
| 
						 | 
					02e267e647 | ||
| 
						 | 
					a6ffba4cf8 | ||
| 3de4d5c5f2 | |||
| c6c2d1c3b1 | |||
| 
						 | 
					1bbd749094 | ||
| 
						 | 
					073b4b8e20 | ||
| 3ec82a6a41 | |||
| 7c83268e0c | |||
| 49cb1e6877 | |||
| 
						 | 
					481dde003a | ||
| 
						 | 
					43e54e8ee7 | ||
| 28dbe075a4 | |||
| 
						 | 
					4571786780 | ||
| 
						 | 
					21cef13168 | ||
| 5f5e0ffc69 | |||
| 4d0841bd32 | |||
| b6d3b17300 | |||
| dad71db912 | |||
| 94c7f803cc | |||
| 0dae8cd16d | |||
| 
						 | 
					1fd547893f | ||
| 
						 | 
					ad5812df96 | ||
| 
						 | 
					c01106e389 | ||
| 021182e873 | |||
| 
						 | 
					71834ef906 | ||
| 
						 | 
					412ec6ab0c | ||
| 9aca4874c1 | |||
| 
						 | 
					c9d25e5e88 | ||
| 
						 | 
					610090c2a0 | ||
| 83917eaf4a | |||
| 
						 | 
					d64e9b9535 | ||
| 
						 | 
					b0f44c2332 | ||
| 8ae9efe4bd | |||
| 
						 | 
					15358fd7e2 | ||
| 
						 | 
					dfabc9ed23 | ||
| 78f6165cfc | |||
| 
						 | 
					7944824ffe | ||
| 984cf2e7d5 | |||
| 
						 | 
					07bc6aab69 | ||
| 
						 | 
					7a14b2846a | ||
| db7d4745dd | |||
| 6b99175574 | |||
| 
						 | 
					34aeb029b5 | ||
| 
						 | 
					caf614ca35 | ||
| b8f9d3626f | |||
| 
						 | 
					c8913f192c | ||
| 
						 | 
					0fa651fccf | ||
| 33782e189c | |||
| ee828ec4a7 | |||
| e75d2f1810 | |||
| ff9ee438ae | |||
| df10a757bf | |||
| cea7fb622f | |||
| 6924566ab0 | |||
| 13c8c2bfbc | |||
| 
						 | 
					0d118d499f | ||
| 
						 | 
					f00a972f32 | ||
| 58aaabb6d1 | |||
| 
						 | 
					4cc890c961 | ||
| 
						 | 
					04cea7a199 | ||
| fa746ab9b0 | |||
| 08d2d7f5d3 | |||
| e4948eb340 | |||
| f80f648771 | |||
| 5d16c37965 | |||
| 9235a6b602 | |||
| 
						 | 
					b8c39e8095 | ||
| 
						 | 
					53526b5f78 | ||
| 0fe8b7490f | |||
| 65f42828b8 | |||
| dfe6405870 | |||
| 312ed7ecb7 | |||
| b367bfcbe4 | |||
| 1c301215d1 | |||
| e0fac4556d | |||
| 
						 | 
					f025a2b77b | ||
| 
						 | 
					c361a8c519 | ||
| cb9456358f | |||
| 23334b5017 | |||
| 830de9fed9 | |||
| 24a38689d4 | |||
| 6ce3faf98d | |||
| f5107cfb70 | |||
| 
						 | 
					028cd07e1a | ||
| 
						 | 
					0aa509e430 | ||
| b07fb8c3d4 | |||
| 63e9100368 | |||
| 2e5e423a38 | |||
| 3b8c8b047b | |||
| d9b354f0c4 | |||
| 783cb0c3fe | |||
| 17f31863f9 | 
@@ -1,3 +1,3 @@
 | 
				
			|||||||
.dockerignore
 | 
					.dockerignore
 | 
				
			||||||
dist
 | 
					#dist
 | 
				
			||||||
node_modules
 | 
					node_modules
 | 
				
			||||||
 
 | 
				
			|||||||
							
								
								
									
										59
									
								
								.drone.yml
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,59 @@
 | 
				
			|||||||
 | 
					---
 | 
				
			||||||
 | 
					kind: pipeline
 | 
				
			||||||
 | 
					type: docker
 | 
				
			||||||
 | 
					name: default
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					steps:
 | 
				
			||||||
 | 
					- name: build
 | 
				
			||||||
 | 
					  image: node:16-alpine
 | 
				
			||||||
 | 
					  pull: if_not_exists
 | 
				
			||||||
 | 
					  environment:
 | 
				
			||||||
 | 
					    NODE_ENV: ""
 | 
				
			||||||
 | 
					  commands:
 | 
				
			||||||
 | 
					  #- yarn install --frozen-lockfile
 | 
				
			||||||
 | 
					  - yarn install 
 | 
				
			||||||
 | 
					  - env ${NODE_ENV} yarn build:prod 
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					- name: publish
 | 
				
			||||||
 | 
					  image: docker:dind
 | 
				
			||||||
 | 
					  pull: if_not_exists
 | 
				
			||||||
 | 
					  volumes:
 | 
				
			||||||
 | 
					  - name: dockersock
 | 
				
			||||||
 | 
					    path: /var/run/docker.sock
 | 
				
			||||||
 | 
					  - name: dockerconfig
 | 
				
			||||||
 | 
					    path: /root/.docker
 | 
				
			||||||
 | 
					  commands:
 | 
				
			||||||
 | 
					  - docker build -t hub.kszny.picaiba.com/kszny/xcac-ui ./
 | 
				
			||||||
 | 
					  - docker push hub.kszny.picaiba.com/kszny/xcac-ui
 | 
				
			||||||
 | 
					  depends_on:
 | 
				
			||||||
 | 
					  - build
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					- name: deploy
 | 
				
			||||||
 | 
					  image: appleboy/drone-ssh
 | 
				
			||||||
 | 
					  pull: if-not-exists
 | 
				
			||||||
 | 
					  settings:
 | 
				
			||||||
 | 
					    host:
 | 
				
			||||||
 | 
					      - 172.24.145.74
 | 
				
			||||||
 | 
					    username: root
 | 
				
			||||||
 | 
					    password: Root@123
 | 
				
			||||||
 | 
					    port: 22
 | 
				
			||||||
 | 
					    command_timeout: 2m
 | 
				
			||||||
 | 
					    script:
 | 
				
			||||||
 | 
					    - docker pull hub.kszny.picaiba.com/kszny/xcac-ui
 | 
				
			||||||
 | 
					    - docker run --rm -v /data/www/xcac:/tmp hub.kszny.picaiba.com/kszny/xcac-ui sh -c "rm -rf /tmp/* && mv -f /html /tmp"
 | 
				
			||||||
 | 
					  depends_on:
 | 
				
			||||||
 | 
					  - publish
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					volumes:
 | 
				
			||||||
 | 
					- name: dockersock
 | 
				
			||||||
 | 
					  host:
 | 
				
			||||||
 | 
					    path: /var/run/docker.sock
 | 
				
			||||||
 | 
					- name: dockerconfig
 | 
				
			||||||
 | 
					  host:
 | 
				
			||||||
 | 
					    path: /root/.docker
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					trigger:
 | 
				
			||||||
 | 
					  branch:
 | 
				
			||||||
 | 
					  - projects/mesxc-test
 | 
				
			||||||
 | 
					  event:
 | 
				
			||||||
 | 
					  - push
 | 
				
			||||||
							
								
								
									
										29
									
								
								.env.dev
									
									
									
									
									
								
							
							
						
						@@ -1,7 +1,7 @@
 | 
				
			|||||||
###
 | 
					###
 | 
				
			||||||
 # @Author: Do not edit
 | 
					 # @Author: zhp
 | 
				
			||||||
 # @Date: 2023-08-29 09:40:39
 | 
					 # @Date: 2024-04-12 14:30:48
 | 
				
			||||||
 # @LastEditTime: 2024-03-25 15:59:53
 | 
					 # @LastEditTime: 2024-04-25 10:07:02
 | 
				
			||||||
 # @LastEditors: zhp
 | 
					 # @LastEditors: zhp
 | 
				
			||||||
 # @Description:
 | 
					 # @Description:
 | 
				
			||||||
###
 | 
					###
 | 
				
			||||||
@@ -12,24 +12,19 @@ ENV = 'development'
 | 
				
			|||||||
VUE_APP_TITLE = MES系统
 | 
					VUE_APP_TITLE = MES系统
 | 
				
			||||||
 | 
					
 | 
				
			||||||
# 芋道管理系统/开发环境
 | 
					# 芋道管理系统/开发环境
 | 
				
			||||||
# VUE_APP_BASE_API = 'http://100.64.0.26:48082'
 | 
					 | 
				
			||||||
# VUE_APP_BASE_API = 'http://10.70.2.2:8080'
 | 
					 | 
				
			||||||
# VUE_APP_BASE_API = 'http://192.168.1.20:48080'
 | 
					 | 
				
			||||||
# VUE_APP_BASE_API = 'http://192.168.2.173:48080'
 | 
					 | 
				
			||||||
# VUE_APP_BASE_API = 'http://192.168.1.49:48082'
 | 
					 | 
				
			||||||
# VUE_APP_BASE_API = 'http://192.168.1.8:48082'
 | 
					 | 
				
			||||||
# VUE_APP_BASE_API = 'http://192.168.4.159:48080'
 | 
					 | 
				
			||||||
# VUE_APP_BASE_API = 'http://192.168.1.104:48082'
 | 
					 | 
				
			||||||
VUE_APP_BASE_API = 'http://192.168.0.33:48082'
 | 
					VUE_APP_BASE_API = 'http://192.168.0.33:48082'
 | 
				
			||||||
# VUE_APP_BASE_API = 'http://192.168.1.62:48082'
 | 
					# VUE_APP_BASE_API = 'http://192.168.1.104:48082'
 | 
				
			||||||
# VUE_APP_BASE_API = 'http://192.168.1.78:48082'
 | 
					# VUE_APP_BASE_API = 'http://10.70.2.2:8080'
 | 
				
			||||||
# VUE_APP_BASE_API = 'http://192.168.1.47:48082'
 | 
					# 积木报表指向地址
 | 
				
			||||||
# socket地址
 | 
					VUE_APP_JIMU_API = 'http://192.168.1.101:48082'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					# socket地址(现场)
 | 
				
			||||||
VUE_APP_Socket_API = 'ws://10.70.2.2:8080'
 | 
					VUE_APP_Socket_API = 'ws://10.70.2.2:8080'
 | 
				
			||||||
 | 
					# socket地址(公司线上)
 | 
				
			||||||
 | 
					# VUE_APP_Socket_API = 'ws://192.168.0.33:48082'
 | 
				
			||||||
 | 
					# socket dcs地址(只有现场)
 | 
				
			||||||
VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081'
 | 
					VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
# 积木报表指向地址
 | 
					 | 
				
			||||||
VUE_APP_JIMU_API = 'http://10.70.2.22:8080'
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
# 路由懒加载
 | 
					# 路由懒加载
 | 
				
			||||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
 | 
					VUE_CLI_BABEL_TRANSPILE_MODULES = true
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -1,11 +1,4 @@
 | 
				
			|||||||
###
 | 
					# 生产环境配置(许昌现场)
 | 
				
			||||||
 # @Author: zhp
 | 
					 | 
				
			||||||
 # @Date: 2023-11-07 19:11:40
 | 
					 | 
				
			||||||
 # @LastEditTime: 2023-11-16 16:40:59
 | 
					 | 
				
			||||||
 # @LastEditors: zhp
 | 
					 | 
				
			||||||
 # @Description:
 | 
					 | 
				
			||||||
###
 | 
					 | 
				
			||||||
# 生产环境配置
 | 
					 | 
				
			||||||
ENV = 'production'
 | 
					ENV = 'production'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
# 页面标题
 | 
					# 页面标题
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -1,4 +1,4 @@
 | 
				
			|||||||
# 生产环境配置
 | 
					# 公司线上环境(33服务器)
 | 
				
			||||||
ENV = 'production'
 | 
					ENV = 'production'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
# 页面标题
 | 
					# 页面标题
 | 
				
			||||||
@@ -7,15 +7,12 @@ VUE_APP_TITLE = MES系统
 | 
				
			|||||||
# 芋道管理系统/生产环境
 | 
					# 芋道管理系统/生产环境
 | 
				
			||||||
VUE_APP_BASE_API = '/prod-api'
 | 
					VUE_APP_BASE_API = '/prod-api'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
# dcs地址
 | 
					 | 
				
			||||||
VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081'
 | 
					 | 
				
			||||||
# socket地址
 | 
					 | 
				
			||||||
VUE_APP_Socket_API = 'ws://10.70.2.2:8080'
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
# 积木报表指向地址
 | 
					# 积木报表指向地址
 | 
				
			||||||
VUE_APP_JIMU_API = 'http://192.168.0.33:48082'
 | 
					VUE_APP_JIMU_API = 'http://192.168.0.33:48082'
 | 
				
			||||||
# socket地址
 | 
					# socket地址
 | 
				
			||||||
VUE_APP_Socket_API = 'ws://192.168.0.33:48082'
 | 
					VUE_APP_Socket_API = 'ws://192.168.0.33:48082'
 | 
				
			||||||
 | 
					# dcs地址(只有现场的)
 | 
				
			||||||
 | 
					VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
# 根据服务器或域名修改
 | 
					# 根据服务器或域名修改
 | 
				
			||||||
 
 | 
				
			|||||||
							
								
								
									
										24
									
								
								Dockerfile
									
									
									
									
									
								
							
							
						
						@@ -1,21 +1,3 @@
 | 
				
			|||||||
FROM node:16-alpine as build-stage
 | 
					FROM busybox 
 | 
				
			||||||
 | 
					LABEL maintainer thomas.hairong@gmail.com
 | 
				
			||||||
WORKDIR /admim
 | 
					COPY dist /html/
 | 
				
			||||||
 | 
					 | 
				
			||||||
COPY .npmrc package.json yarn.lock ./
 | 
					 | 
				
			||||||
RUN --mount=type=cache,id=yarn-store,target=/root/.yarn-store \
 | 
					 | 
				
			||||||
    yarn install --frozen-lockfile
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
COPY . .
 | 
					 | 
				
			||||||
ARG NODE_ENV=""
 | 
					 | 
				
			||||||
RUN env ${NODE_ENV} yarn build:prod
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
## -- stage: dist => nginx --
 | 
					 | 
				
			||||||
FROM nginx:alpine
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
ENV TZ=Asia/Shanghai
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
 | 
					 | 
				
			||||||
COPY --from=build-stage /admim/dist /usr/share/nginx/html
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
EXPOSE 80
 | 
					 | 
				
			||||||
 
 | 
				
			|||||||
@@ -50,7 +50,7 @@
 | 
				
			|||||||
    "benz-amr-recorder": "^1.1.5",
 | 
					    "benz-amr-recorder": "^1.1.5",
 | 
				
			||||||
    "bpmn-js-token-simulation": "0.10.0",
 | 
					    "bpmn-js-token-simulation": "0.10.0",
 | 
				
			||||||
    "clipboard": "2.0.8",
 | 
					    "clipboard": "2.0.8",
 | 
				
			||||||
    "code-brick-zj": "^1.0.5",
 | 
					    "code-brick-zj": "^1.1.0",
 | 
				
			||||||
    "core-js": "^3.26.0",
 | 
					    "core-js": "^3.26.0",
 | 
				
			||||||
    "crypto-js": "^4.0.0",
 | 
					    "crypto-js": "^4.0.0",
 | 
				
			||||||
    "diagram-js": "^12.3.0",
 | 
					    "diagram-js": "^12.3.0",
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -35,3 +35,21 @@ export function getQoq(data) {
 | 
				
			|||||||
    data: data
 | 
					    data: data
 | 
				
			||||||
  })
 | 
					  })
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 获取能源设备树
 | 
				
			||||||
 | 
					export function getTree() {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/analysis/energy-analysis/getTree',
 | 
				
			||||||
 | 
					    method: 'get'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 导出(走势分析)
 | 
				
			||||||
 | 
					export function exportTrend(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/analysis/energy-analysis/exportTrend',
 | 
				
			||||||
 | 
					    method: 'post',
 | 
				
			||||||
 | 
					    responseType: 'blob',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
@@ -1,7 +1,7 @@
 | 
				
			|||||||
/*
 | 
					/*
 | 
				
			||||||
 * @Author: Do not edit
 | 
					 * @Author: Do not edit
 | 
				
			||||||
 * @Date: 2023-10-21 11:50:46
 | 
					 * @Date: 2023-10-21 11:50:46
 | 
				
			||||||
 * @LastEditTime: 2023-10-30 14:37:28
 | 
					 * @LastEditTime: 2024-04-19 17:13:24
 | 
				
			||||||
 * @LastEditors: DY
 | 
					 * @LastEditors: DY
 | 
				
			||||||
 * @Description: 
 | 
					 * @Description: 
 | 
				
			||||||
 */
 | 
					 */
 | 
				
			||||||
@@ -66,3 +66,12 @@ export function getCoreDepartmentList(query) {
 | 
				
			|||||||
    params: query
 | 
					    params: query
 | 
				
			||||||
  })
 | 
					  })
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 设备获得所有列表
 | 
				
			||||||
 | 
					export function getDepartmentList(query) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/system/dept/list-all-simple',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    params: query
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -54,3 +54,27 @@ export function energyQuantityManualExport(data) {
 | 
				
			|||||||
    responseType: 'blob'
 | 
					    responseType: 'blob'
 | 
				
			||||||
  })
 | 
					  })
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					// 获得能源表名配置分页
 | 
				
			||||||
 | 
					export function energyTablePage(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/base/energy-table/page',
 | 
				
			||||||
 | 
					    method: 'post',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					// 获得能源表名配置
 | 
				
			||||||
 | 
					export function energyTableGet(query) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/base/energy-table/get',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    params: query
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					// 更新能源表名配置
 | 
				
			||||||
 | 
					export function energyTableUpdate(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/base/energy-table/update',
 | 
				
			||||||
 | 
					    method: 'put',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
@@ -68,3 +68,4 @@ export function exportEnergyTypeExcel(query) {
 | 
				
			|||||||
    responseType: 'blob'
 | 
					    responseType: 'blob'
 | 
				
			||||||
  })
 | 
					  })
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -2,7 +2,7 @@
 | 
				
			|||||||
/*
 | 
					/*
 | 
				
			||||||
 * @Author: zhp
 | 
					 * @Author: zhp
 | 
				
			||||||
 * @Date: 2023-11-06 15:38:12
 | 
					 * @Date: 2023-11-06 15:38:12
 | 
				
			||||||
 * @LastEditTime: 2023-12-15 15:29:16
 | 
					 * @LastEditTime: 2024-04-11 14:57:02
 | 
				
			||||||
 * @LastEditors: zhp
 | 
					 * @LastEditors: zhp
 | 
				
			||||||
 * @Description:
 | 
					 * @Description:
 | 
				
			||||||
 */
 | 
					 */
 | 
				
			||||||
@@ -94,7 +94,7 @@ export function getWorkerList(query) {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
export function getMaterialCheckList(query) {
 | 
					export function getMaterialCheckList(query) {
 | 
				
			||||||
  return request({
 | 
					  return request({
 | 
				
			||||||
    url: '/base/core-hot-material-check/listByMaterial',
 | 
					    url: 'base/quality-hot-material-det/filterList',
 | 
				
			||||||
    method: 'get',
 | 
					    method: 'get',
 | 
				
			||||||
    params: query
 | 
					    params: query
 | 
				
			||||||
  })
 | 
					  })
 | 
				
			||||||
@@ -102,7 +102,7 @@ export function getMaterialCheckList(query) {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
export function createQualityHotMaterialDet(query){
 | 
					export function createQualityHotMaterialDet(query){
 | 
				
			||||||
   return request({
 | 
					   return request({
 | 
				
			||||||
    url: '/base/quality-hot-material-det/create',
 | 
					    url: 'base/quality-hot-material-det/createBatch',
 | 
				
			||||||
    method: 'post',
 | 
					    method: 'post',
 | 
				
			||||||
    data: query
 | 
					    data: query
 | 
				
			||||||
  })
 | 
					  })
 | 
				
			||||||
@@ -110,7 +110,7 @@ export function createQualityHotMaterialDet(query){
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
export function updateQualityHotMaterialDet(query){
 | 
					export function updateQualityHotMaterialDet(query){
 | 
				
			||||||
   return request({
 | 
					   return request({
 | 
				
			||||||
    url: '/base/quality-hot-material-det/listbyfilter',
 | 
					    url: 'base/quality-hot-material-det/updateBatch',
 | 
				
			||||||
    method: 'put',
 | 
					    method: 'put',
 | 
				
			||||||
    data: query
 | 
					    data: query
 | 
				
			||||||
  })
 | 
					  })
 | 
				
			||||||
@@ -118,7 +118,7 @@ export function updateQualityHotMaterialDet(query){
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
export function getQualityHotMaterialDetList(query){
 | 
					export function getQualityHotMaterialDetList(query){
 | 
				
			||||||
   return request({
 | 
					   return request({
 | 
				
			||||||
    url: '/base/quality-hot-material-det/listbyfilter',
 | 
					    url: '/base/quality-hot-material-det/filterList',
 | 
				
			||||||
    method: 'get',
 | 
					    method: 'get',
 | 
				
			||||||
    params: query
 | 
					    params: query
 | 
				
			||||||
  })
 | 
					  })
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -1,7 +1,7 @@
 | 
				
			|||||||
/*
 | 
					/*
 | 
				
			||||||
 * @Author: zhp
 | 
					 * @Author: zhp
 | 
				
			||||||
 * @Date: 2023-11-07 15:02:37
 | 
					 * @Date: 2023-11-07 15:02:37
 | 
				
			||||||
 * @LastEditTime: 2023-11-07 18:32:07
 | 
					 * @LastEditTime: 2024-04-09 15:14:42
 | 
				
			||||||
 * @LastEditors: zhp
 | 
					 * @LastEditors: zhp
 | 
				
			||||||
 * @Description:
 | 
					 * @Description:
 | 
				
			||||||
 */
 | 
					 */
 | 
				
			||||||
 
 | 
				
			|||||||
							
								
								
									
										20
									
								
								src/api/infra/apiAccessLog.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,20 @@
 | 
				
			|||||||
 | 
					import request from '@/utils/request'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 获得API 访问日志分页
 | 
				
			||||||
 | 
					export function getApiAccessLogPage(query) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/api-access-log/page',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    params: query
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 导出API 访问日志 Excel
 | 
				
			||||||
 | 
					export function exportApiAccessLogExcel(query) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/api-access-log/export-excel',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    params: query,
 | 
				
			||||||
 | 
					    responseType: 'blob'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
							
								
								
									
										28
									
								
								src/api/infra/apiErrorLog.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,28 @@
 | 
				
			|||||||
 | 
					import request from '@/utils/request'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 更新 API 错误日志的处理状态
 | 
				
			||||||
 | 
					export function updateApiErrorLogProcess(id, processStatus) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/api-error-log/update-status?id=' + id + '&processStatus=' + processStatus,
 | 
				
			||||||
 | 
					    method: 'put',
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 获得API 错误日志分页
 | 
				
			||||||
 | 
					export function getApiErrorLogPage(query) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/api-error-log/page',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    params: query
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 导出API 错误日志 Excel
 | 
				
			||||||
 | 
					export function exportApiErrorLogExcel(query) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/api-error-log/export-excel',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    params: query,
 | 
				
			||||||
 | 
					    responseType: 'blob'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
							
								
								
									
										90
									
								
								src/api/infra/codegen.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,90 @@
 | 
				
			|||||||
 | 
					import request from '@/utils/request'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 获得表定义分页
 | 
				
			||||||
 | 
					export function getCodegenTablePage(query) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/codegen/table/page',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    params: query
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 获得表和字段的明细
 | 
				
			||||||
 | 
					export function getCodegenDetail(tableId) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/codegen/detail?tableId=' + tableId,
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 修改代码生成信息
 | 
				
			||||||
 | 
					export function updateCodegen(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/codegen/update',
 | 
				
			||||||
 | 
					    method: 'put',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 基于数据库的表结构,同步数据库的表和字段定义
 | 
				
			||||||
 | 
					export function syncCodegenFromDB(tableId) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/codegen/sync-from-db?tableId=' + tableId,
 | 
				
			||||||
 | 
					    method: 'put'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 基于 SQL 建表语句,同步数据库的表和字段定义
 | 
				
			||||||
 | 
					export function syncCodegenFromSQL(tableId, sql) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/codegen/sync-from-sql?tableId=' + tableId,
 | 
				
			||||||
 | 
					    method: 'put',
 | 
				
			||||||
 | 
					    headers:{
 | 
				
			||||||
 | 
					      'Content-type': 'application/x-www-form-urlencoded'
 | 
				
			||||||
 | 
					    },
 | 
				
			||||||
 | 
					    data: 'tableId=' + tableId + "&sql=" + sql,
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 预览生成代码
 | 
				
			||||||
 | 
					export function previewCodegen(tableId) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/codegen/preview?tableId=' + tableId,
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 下载生成代码
 | 
				
			||||||
 | 
					export function downloadCodegen(tableId) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/codegen/download?tableId=' + tableId,
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    responseType: 'blob'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 获得表定义分页
 | 
				
			||||||
 | 
					export function getSchemaTableList(query) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/codegen/db/table/list',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    params: query
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 基于数据库的表结构,创建代码生成器的表定义
 | 
				
			||||||
 | 
					export function createCodegenList(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/codegen/create-list',
 | 
				
			||||||
 | 
					    method: 'post',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 删除数据库的表和字段定义
 | 
				
			||||||
 | 
					export function deleteCodegen(tableId) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/codegen/delete?tableId=' + tableId,
 | 
				
			||||||
 | 
					    method: 'delete'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
							
								
								
									
										62
									
								
								src/api/infra/config.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,62 @@
 | 
				
			|||||||
 | 
					import request from '@/utils/request'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 查询参数列表
 | 
				
			||||||
 | 
					export function listConfig(query) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/config/page',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    params: query
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 查询参数详细
 | 
				
			||||||
 | 
					export function getConfig(configId) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/config/get?id=' + configId,
 | 
				
			||||||
 | 
					    method: 'get'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 根据参数键名查询参数值
 | 
				
			||||||
 | 
					export function getConfigKey(configKey) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/config/get-value-by-key?key=' + configKey,
 | 
				
			||||||
 | 
					    method: 'get'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 新增参数配置
 | 
				
			||||||
 | 
					export function addConfig(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/config/create',
 | 
				
			||||||
 | 
					    method: 'post',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 修改参数配置
 | 
				
			||||||
 | 
					export function updateConfig(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/config/update',
 | 
				
			||||||
 | 
					    method: 'put',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 删除参数配置
 | 
				
			||||||
 | 
					export function delConfig(configId) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/config/delete?id=' + configId,
 | 
				
			||||||
 | 
					    method: 'delete'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 导出参数
 | 
				
			||||||
 | 
					export function exportConfig(query) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/config/export',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    params: query,
 | 
				
			||||||
 | 
					    responseType: 'blob'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
							
								
								
									
										43
									
								
								src/api/infra/dataSourceConfig.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,43 @@
 | 
				
			|||||||
 | 
					import request from '@/utils/request'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 创建数据源配置
 | 
				
			||||||
 | 
					export function createDataSourceConfig(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/data-source-config/create',
 | 
				
			||||||
 | 
					    method: 'post',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 更新数据源配置
 | 
				
			||||||
 | 
					export function updateDataSourceConfig(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/data-source-config/update',
 | 
				
			||||||
 | 
					    method: 'put',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 删除数据源配置
 | 
				
			||||||
 | 
					export function deleteDataSourceConfig(id) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/data-source-config/delete?id=' + id,
 | 
				
			||||||
 | 
					    method: 'delete'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 获得数据源配置
 | 
				
			||||||
 | 
					export function getDataSourceConfig(id) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/data-source-config/get?id=' + id,
 | 
				
			||||||
 | 
					    method: 'get'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 获得数据源配置列表
 | 
				
			||||||
 | 
					export function getDataSourceConfigList() {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/data-source-config/list',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
							
								
								
									
										26
									
								
								src/api/infra/dbDoc.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,26 @@
 | 
				
			|||||||
 | 
					// 导出参数
 | 
				
			||||||
 | 
					import request from "@/utils/request";
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export function exportHtml() {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/db-doc/export-html',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    responseType: 'blob'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export function exportWord() {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/db-doc/export-word',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    responseType: 'blob'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export function exportMarkdown() {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/db-doc/export-markdown',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    responseType: 'blob'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
							
								
								
									
										18
									
								
								src/api/infra/file.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,18 @@
 | 
				
			|||||||
 | 
					import request from '@/utils/request'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 删除文件
 | 
				
			||||||
 | 
					export function deleteFile(id) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/file/delete?id=' + id,
 | 
				
			||||||
 | 
					    method: 'delete'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 获得文件分页
 | 
				
			||||||
 | 
					export function getFilePage(query) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/file/page',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    params: query
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
							
								
								
									
										59
									
								
								src/api/infra/fileConfig.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,59 @@
 | 
				
			|||||||
 | 
					import request from '@/utils/request'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 创建文件配置
 | 
				
			||||||
 | 
					export function createFileConfig(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/file-config/create',
 | 
				
			||||||
 | 
					    method: 'post',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 更新文件配置
 | 
				
			||||||
 | 
					export function updateFileConfig(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/file-config/update',
 | 
				
			||||||
 | 
					    method: 'put',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 更新文件配置为主配置
 | 
				
			||||||
 | 
					export function updateFileConfigMaster(id) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/file-config/update-master?id=' + id,
 | 
				
			||||||
 | 
					    method: 'put'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 删除文件配置
 | 
				
			||||||
 | 
					export function deleteFileConfig(id) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/file-config/delete?id=' + id,
 | 
				
			||||||
 | 
					    method: 'delete'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 获得文件配置
 | 
				
			||||||
 | 
					export function getFileConfig(id) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/file-config/get?id=' + id,
 | 
				
			||||||
 | 
					    method: 'get'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 获得文件配置分页
 | 
				
			||||||
 | 
					export function getFileConfigPage(query) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/file-config/page',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    params: query
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export function testFileConfig(id) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/file-config/test?id=' + id,
 | 
				
			||||||
 | 
					    method: 'get'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
							
								
								
									
										82
									
								
								src/api/infra/job.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,82 @@
 | 
				
			|||||||
 | 
					import request from '@/utils/request'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 查询定时任务调度列表
 | 
				
			||||||
 | 
					export function listJob(query) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/job/page',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    params: query
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 查询定时任务调度详细
 | 
				
			||||||
 | 
					export function getJob(jobId) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/job/get?id=' + jobId,
 | 
				
			||||||
 | 
					    method: 'get'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 新增定时任务调度
 | 
				
			||||||
 | 
					export function addJob(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/job/create',
 | 
				
			||||||
 | 
					    method: 'post',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 修改定时任务调度
 | 
				
			||||||
 | 
					export function updateJob(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/job/update',
 | 
				
			||||||
 | 
					    method: 'put',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 删除定时任务调度
 | 
				
			||||||
 | 
					export function delJob(jobId) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/job/delete?id=' + jobId,
 | 
				
			||||||
 | 
					    method: 'delete'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 导出定时任务调度
 | 
				
			||||||
 | 
					export function exportJob(query) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/job/export-excel',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    params: query,
 | 
				
			||||||
 | 
					    responseType: 'blob'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 任务状态修改
 | 
				
			||||||
 | 
					export function updateJobStatus(jobId, status) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/job/update-status',
 | 
				
			||||||
 | 
					    method: 'put',
 | 
				
			||||||
 | 
					    headers:{
 | 
				
			||||||
 | 
					      'Content-type': 'application/x-www-form-urlencoded'
 | 
				
			||||||
 | 
					    },
 | 
				
			||||||
 | 
					    data: 'id=' + jobId + "&status=" + status,
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 定时任务立即执行一次
 | 
				
			||||||
 | 
					export function runJob(jobId) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/job/trigger?id=' + jobId,
 | 
				
			||||||
 | 
					    method: 'put'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 获得定时任务的下 n 次执行时间
 | 
				
			||||||
 | 
					export function getJobNextTimes(jobId) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/job/get_next_times?id=' + jobId,
 | 
				
			||||||
 | 
					    method: 'get'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
							
								
								
									
										28
									
								
								src/api/infra/jobLog.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,28 @@
 | 
				
			|||||||
 | 
					import request from '@/utils/request'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 获得定时任务
 | 
				
			||||||
 | 
					export function getJobLog(id) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/job-log/get?id=' + id,
 | 
				
			||||||
 | 
					    method: 'get'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 获得定时任务分页
 | 
				
			||||||
 | 
					export function getJobLogPage(query) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/job-log/page',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    params: query
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 导出定时任务 Excel
 | 
				
			||||||
 | 
					export function exportJobLogExcel(query) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/job-log/export-excel',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    params: query,
 | 
				
			||||||
 | 
					    responseType: 'blob'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
							
								
								
									
										9
									
								
								src/api/infra/redis.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,9 @@
 | 
				
			|||||||
 | 
					import request from '@/utils/request'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 查询缓存详细
 | 
				
			||||||
 | 
					export function getCache() {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/redis/get-monitor-info',
 | 
				
			||||||
 | 
					    method: 'get'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
							
								
								
									
										54
									
								
								src/api/infra/testDemo.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,54 @@
 | 
				
			|||||||
 | 
					import request from '@/utils/request'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 创建字典类型
 | 
				
			||||||
 | 
					export function createTestDemo(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/test-demo/create',
 | 
				
			||||||
 | 
					    method: 'post',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 更新字典类型
 | 
				
			||||||
 | 
					export function updateTestDemo(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/test-demo/update',
 | 
				
			||||||
 | 
					    method: 'put',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 删除字典类型
 | 
				
			||||||
 | 
					export function deleteTestDemo(id) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/test-demo/delete?id=' + id,
 | 
				
			||||||
 | 
					    method: 'delete'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 获得字典类型
 | 
				
			||||||
 | 
					export function getTestDemo(id) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/test-demo/get?id=' + id,
 | 
				
			||||||
 | 
					    method: 'get'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 获得字典类型分页
 | 
				
			||||||
 | 
					export function getTestDemoPage(query) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/test-demo/page',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    params: query
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 导出字典类型 Excel
 | 
				
			||||||
 | 
					export function exportTestDemoExcel(query) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/infra/test-demo/export-excel',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    params: query,
 | 
				
			||||||
 | 
					    responseType: 'blob'
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
@@ -1,7 +1,7 @@
 | 
				
			|||||||
/*
 | 
					/*
 | 
				
			||||||
 * @Author: zhp
 | 
					 * @Author: zhp
 | 
				
			||||||
 * @Date: 2023-11-07 14:10:18
 | 
					 * @Date: 2023-11-07 14:10:18
 | 
				
			||||||
 * @LastEditTime: 2023-11-16 17:49:52
 | 
					 * @LastEditTime: 2024-04-11 16:16:05
 | 
				
			||||||
 * @LastEditors: zhp
 | 
					 * @LastEditors: zhp
 | 
				
			||||||
 * @Description:
 | 
					 * @Description:
 | 
				
			||||||
 */
 | 
					 */
 | 
				
			||||||
@@ -18,14 +18,14 @@ export function getStatisticalDataPage(query) {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
export function getWorkOrderList(query) {
 | 
					export function getWorkOrderList(query) {
 | 
				
			||||||
  return request({
 | 
					  return request({
 | 
				
			||||||
    url: '/base/core-work-order/listbyfilter',
 | 
					    url: 'base/core-work-order/listbyfilter',
 | 
				
			||||||
    method: 'get',
 | 
					    method: 'get',
 | 
				
			||||||
    params: query,
 | 
					    params: query,
 | 
				
			||||||
  })
 | 
					  })
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
export function getProductList(query) {
 | 
					export function getProductList(query) {
 | 
				
			||||||
  return request({
 | 
					  return request({
 | 
				
			||||||
    url: '/base/core-product/listAll',
 | 
					    url: 'base/core-product/listAll',
 | 
				
			||||||
    method: 'get',
 | 
					    method: 'get',
 | 
				
			||||||
    params: query,
 | 
					    params: query,
 | 
				
			||||||
  })
 | 
					  })
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -1,8 +1,8 @@
 | 
				
			|||||||
/*
 | 
					/*
 | 
				
			||||||
 * @Author: zhp
 | 
					 * @Author: zhp
 | 
				
			||||||
 * @Date: 2023-10-31 10:55:20
 | 
					 * @Date: 2023-10-31 10:55:20
 | 
				
			||||||
 * @LastEditTime: 2023-12-06 14:09:14
 | 
					 * @LastEditTime: 2024-04-25 15:28:44
 | 
				
			||||||
 * @LastEditors: zhp
 | 
					 * @LastEditors: DY
 | 
				
			||||||
 * @Description:
 | 
					 * @Description:
 | 
				
			||||||
 */
 | 
					 */
 | 
				
			||||||
import request from '@/utils/request'
 | 
					import request from '@/utils/request'
 | 
				
			||||||
@@ -34,11 +34,11 @@ export function exportEnergyPlcExcel(query) {
 | 
				
			|||||||
  })
 | 
					  })
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export function getOriginalGlassRetrace(query) {
 | 
					export function getOriginalGlassRetrace(data) {
 | 
				
			||||||
   return request({
 | 
					   return request({
 | 
				
			||||||
    url: '/base/original-glass-statistics/originalGlassRetrace',
 | 
					    url: '/base/original-glass-statistics/originalGlassRetrace',
 | 
				
			||||||
    method: 'get',
 | 
					    method: 'post',
 | 
				
			||||||
    params: query,
 | 
					    data
 | 
				
			||||||
  })
 | 
					  })
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
							
								
								
									
										45
									
								
								src/api/report/customizedReports.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,45 @@
 | 
				
			|||||||
 | 
					import request from '@/utils/request'
 | 
				
			||||||
 | 
					// 原片工段数据
 | 
				
			||||||
 | 
					export function originalSection(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/extend/customized-reports/originalSection',
 | 
				
			||||||
 | 
					    method: 'post',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 原片产线数据
 | 
				
			||||||
 | 
					export function getOriginalLine(query) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/extend/customized-reports/getOriginalLine',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    params: query
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 深加工产线数据
 | 
				
			||||||
 | 
					export function getProcessingLine(query) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/extend/customized-reports/getProcessingLine',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    params: query
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 深加工工段数据
 | 
				
			||||||
 | 
					export function processing(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/extend/customized-reports/processing',
 | 
				
			||||||
 | 
					    method: 'post',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// isra数据记录
 | 
				
			||||||
 | 
					export function israData(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/extend/customized-reports/isra',
 | 
				
			||||||
 | 
					    method: 'post',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
@@ -1,7 +1,7 @@
 | 
				
			|||||||
/*
 | 
					/*
 | 
				
			||||||
 * @Author: Do not edit
 | 
					 * @Author: Do not edit
 | 
				
			||||||
 * @Date: 2023-12-08 10:26:48
 | 
					 * @Date: 2023-12-08 10:26:48
 | 
				
			||||||
 * @LastEditTime: 2023-12-13 17:16:00
 | 
					 * @LastEditTime: 2024-04-24 16:31:37
 | 
				
			||||||
 * @LastEditors: DY
 | 
					 * @LastEditors: DY
 | 
				
			||||||
 * @Description: 
 | 
					 * @Description: 
 | 
				
			||||||
 */
 | 
					 */
 | 
				
			||||||
@@ -59,3 +59,39 @@ export function exportGlasscExcel(query) {
 | 
				
			|||||||
    responseType: 'blob'
 | 
					    responseType: 'blob'
 | 
				
			||||||
  })
 | 
					  })
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 生产月报查询--冷端生产线
 | 
				
			||||||
 | 
					export function productionMonthY(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/extend/customized-reports/productionMonthY',
 | 
				
			||||||
 | 
					    method: 'post',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 生产月报查询--深加工生产线
 | 
				
			||||||
 | 
					export function productionMonthD(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/extend/customized-reports/productionMonthD',
 | 
				
			||||||
 | 
					    method: 'post',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 生产年报查询--冷端生产线
 | 
				
			||||||
 | 
					export function productionYearY(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/extend/customized-reports/productionYearY',
 | 
				
			||||||
 | 
					    method: 'post',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 生产年报查询--冷端生产线
 | 
				
			||||||
 | 
					export function productionYearD(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: '/extend/customized-reports/productionYearD',
 | 
				
			||||||
 | 
					    method: 'post',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 
 | 
				
			|||||||
							
								
								
									
										96
									
								
								src/api/report/qcReport.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,96 @@
 | 
				
			|||||||
 | 
					/*
 | 
				
			||||||
 | 
					 * @Author: zhp
 | 
				
			||||||
 | 
					 * @Date: 2024-04-18 09:27:54
 | 
				
			||||||
 | 
					 * @LastEditTime: 2024-04-23 15:16:12
 | 
				
			||||||
 | 
					 * @LastEditors: zhp
 | 
				
			||||||
 | 
					 * @Description:
 | 
				
			||||||
 | 
					 */
 | 
				
			||||||
 | 
					import request from '@/utils/request'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 更新质量检测类型基础
 | 
				
			||||||
 | 
					export function getOriginalData(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: 'extend/customized-reports/original',
 | 
				
			||||||
 | 
					    method: 'post',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					export function getIngredientData(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: 'extend/customized-reports/materialCost',
 | 
				
			||||||
 | 
					    method: 'post',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export function getCuttingtData(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: 'extend/customized-reports/cutting',
 | 
				
			||||||
 | 
					    method: 'post',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export function getAutoDailyData(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: 'base/report-auto-daily/listAll',
 | 
				
			||||||
 | 
					    method: 'post',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export function getQualityRecordReport(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: 'base/quality-inspection-record/qualityRecordReport',
 | 
				
			||||||
 | 
					    method: 'post',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export function getProductChildData(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: 'base/report-auto-ydaily-det/list',
 | 
				
			||||||
 | 
					    method: 'post',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export function updateAutoDailyData(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: 'base/report-auto-daily/update',
 | 
				
			||||||
 | 
					    method: 'put',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export function getCWSectionList(query) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: 'base/core-production-line/listAll',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    params: query
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export function getCuttingReportDataList(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: 'extend/customized-reports/cuttingReport',
 | 
				
			||||||
 | 
					    method: 'post',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export function getProcessingLineDataList(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: 'extend/customized-reports/getProcessingLine',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export function getOriginalLineDataList(data) {
 | 
				
			||||||
 | 
					  return request({
 | 
				
			||||||
 | 
					    url: 'extend/customized-reports/getOriginalLine',
 | 
				
			||||||
 | 
					    method: 'get',
 | 
				
			||||||
 | 
					    data: data
 | 
				
			||||||
 | 
					  })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
@@ -1,10 +1,10 @@
 | 
				
			|||||||
<?xml version="1.0" encoding="UTF-8"?>
 | 
					<?xml version="1.0" encoding="UTF-8"?>
 | 
				
			||||||
<svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 | 
					<svg width="32px" height="32px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 | 
				
			||||||
    <title>编组 54</title>
 | 
					    <title>编组 54</title>
 | 
				
			||||||
    <g id="驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 | 
					    <g id="驾驶舱" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 | 
				
			||||||
        <g id="运营总览_生产线监控驾驶舱" transform="translate(-1866.000000, -36.000000)">
 | 
					        <g id="运营总览_生产线监控驾驶舱" transform="translate(-1866.000000, -36.000000)">
 | 
				
			||||||
            <g id="编组-54" transform="translate(1866.000000, 36.000000)">
 | 
					            <g id="编组-54" transform="translate(1866.000000, 36.000000)">
 | 
				
			||||||
                <rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="21" height="21"></rect>
 | 
					                <rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="32" height="32"></rect>
 | 
				
			||||||
                <path d="M18.4001211,1 L18.574731,1.00571398 C18.8641421,1.02474925 19.1451559,1.09128771 19.4122178,1.20447947 C19.7221027,1.33395436 19.9991094,1.52058631 20.2392616,1.76073844 C20.4776764,1.99915325 20.6652172,2.27804627 20.7953442,2.58736464 C20.9313506,2.90825642 21,3.24882158 21,3.59987893 L21,3.59987893 L21,18.4001211 L20.994286,18.574731 C20.9752507,18.8641421 20.9087123,19.1451559 20.7955205,19.4122178 C20.6660456,19.7221027 20.4794137,19.9991094 20.2392616,20.2392616 C20.0008468,20.4776764 19.7219537,20.6652172 19.4126354,20.7953442 C19.0917436,20.9313506 18.7511784,21 18.4001211,21 L18.4001211,21 L3.59987893,21 L3.42526905,20.994286 C3.13585794,20.9752507 2.85484405,20.9087123 2.58778224,20.7955205 C2.2778973,20.6660456 2.00089057,20.4794137 1.76073844,20.2392616 C1.52232363,20.0008468 1.33478285,19.7219537 1.20465581,19.4126354 C1.06864936,19.0917436 1,18.7511784 1,18.4001211 L1,18.4001211 L1,3.59987893 L1.00571398,3.42526905 C1.02474925,3.13585794 1.09128771,2.85484405 1.20447947,2.58778224 C1.33395436,2.2778973 1.52058631,2.00089057 1.76073844,1.76073844 C1.99915325,1.52232363 2.27804627,1.33478285 2.58736464,1.20465581 C2.90825642,1.06864936 3.24882158,1 3.59987893,1 L3.59987893,1 L18.4001211,1 Z M18.4001211,2.29539952 L3.59987893,2.29539952 L3.49797651,2.2993263 C2.82542992,2.35136056 2.29539952,2.9140495 2.29539952,3.59987893 L2.29539952,3.59987893 L2.29539952,18.4001211 L2.2993263,18.5020235 C2.35136056,19.1745701 2.9140495,19.7046005 3.59987893,19.7046005 L3.59987893,19.7046005 L18.4001211,19.7046005 L18.5020235,19.7006737 C19.1745701,19.6486394 19.7046005,19.0859505 19.7046005,18.4001211 L19.7046005,18.4001211 L19.7046005,3.59987893 L19.7006737,3.49797651 C19.6486394,2.82542992 19.0859505,2.29539952 18.4001211,2.29539952 L18.4001211,2.29539952 Z M4.56580299,11.8731508 L4.63987359,11.8789244 C4.95620444,11.9219442 5.20096852,12.1943435 5.20096852,12.5208838 L5.20096852,12.5208838 L5.20096852,15.8606113 L8.39814764,12.6634321 L8.45892035,12.6098356 C8.71226443,12.4133149 9.08161636,12.4311804 9.3138681,12.6634321 C9.56547415,12.9150382 9.56547415,13.3275466 9.3138681,13.5791526 L9.3138681,13.5791526 L6.09149511,16.7990315 L9.4155569,16.7990315 L9.49368756,16.8035151 C9.82695229,16.8420028 10.0864105,17.123441 10.081435,17.4601165 C10.0742517,17.8119637 9.78624591,18.094431 9.43371671,18.094431 L9.43371671,18.094431 L4.5691586,18.094431 L4.49163938,18.0899766 C4.16113157,18.051728 3.90556901,17.7718105 3.90556901,17.4308414 L3.90556901,17.4308414 L3.90556901,12.5367736 L3.91007171,12.4587841 C3.94871707,12.1260764 4.23118526,11.8665247 4.56580299,11.8731508 L4.56580299,11.8731508 Z M17.4353814,3.90556901 L17.512257,3.91000958 C17.8400885,3.94813523 18.094431,4.22707005 18.094431,4.56461864 L18.094431,4.56461864 L18.094431,9.46095642 L18.0899283,9.53894589 C18.0512829,9.87165361 17.7688147,10.1312053 17.434197,10.1245792 C17.0828999,10.1173731 16.7990315,9.82850504 16.7990315,9.47684625 L16.7990315,9.47684625 L16.7990315,6.13938874 L13.6018524,9.33656786 L13.5410796,9.39016441 C13.2877356,9.58668512 12.9183836,9.5688196 12.6861319,9.33656786 C12.4345258,9.08496181 12.4345258,8.67245345 12.6861319,8.4208474 L12.6861319,8.4208474 L15.9060108,5.20096852 L12.5821731,5.20096852 L12.5040246,5.19648608 C12.170734,5.1580095 11.9119308,4.876675 11.9185506,4.54071802 C11.9257483,4.18803625 12.2137541,3.90556901 12.5662833,3.90556901 L12.5662833,3.90556901 L17.4353814,3.90556901 Z" id="形状结合" fill="#52FFF1" fill-rule="nonzero" opacity="0.79078311"></path>
 | 
					                <path d="M18.4001211,1 L18.574731,1.00571398 C18.8641421,1.02474925 19.1451559,1.09128771 19.4122178,1.20447947 C19.7221027,1.33395436 19.9991094,1.52058631 20.2392616,1.76073844 C20.4776764,1.99915325 20.6652172,2.27804627 20.7953442,2.58736464 C20.9313506,2.90825642 21,3.24882158 21,3.59987893 L21,3.59987893 L21,18.4001211 L20.994286,18.574731 C20.9752507,18.8641421 20.9087123,19.1451559 20.7955205,19.4122178 C20.6660456,19.7221027 20.4794137,19.9991094 20.2392616,20.2392616 C20.0008468,20.4776764 19.7219537,20.6652172 19.4126354,20.7953442 C19.0917436,20.9313506 18.7511784,21 18.4001211,21 L18.4001211,21 L3.59987893,21 L3.42526905,20.994286 C3.13585794,20.9752507 2.85484405,20.9087123 2.58778224,20.7955205 C2.2778973,20.6660456 2.00089057,20.4794137 1.76073844,20.2392616 C1.52232363,20.0008468 1.33478285,19.7219537 1.20465581,19.4126354 C1.06864936,19.0917436 1,18.7511784 1,18.4001211 L1,18.4001211 L1,3.59987893 L1.00571398,3.42526905 C1.02474925,3.13585794 1.09128771,2.85484405 1.20447947,2.58778224 C1.33395436,2.2778973 1.52058631,2.00089057 1.76073844,1.76073844 C1.99915325,1.52232363 2.27804627,1.33478285 2.58736464,1.20465581 C2.90825642,1.06864936 3.24882158,1 3.59987893,1 L3.59987893,1 L18.4001211,1 Z M18.4001211,2.29539952 L3.59987893,2.29539952 L3.49797651,2.2993263 C2.82542992,2.35136056 2.29539952,2.9140495 2.29539952,3.59987893 L2.29539952,3.59987893 L2.29539952,18.4001211 L2.2993263,18.5020235 C2.35136056,19.1745701 2.9140495,19.7046005 3.59987893,19.7046005 L3.59987893,19.7046005 L18.4001211,19.7046005 L18.5020235,19.7006737 C19.1745701,19.6486394 19.7046005,19.0859505 19.7046005,18.4001211 L19.7046005,18.4001211 L19.7046005,3.59987893 L19.7006737,3.49797651 C19.6486394,2.82542992 19.0859505,2.29539952 18.4001211,2.29539952 L18.4001211,2.29539952 Z M4.56580299,11.8731508 L4.63987359,11.8789244 C4.95620444,11.9219442 5.20096852,12.1943435 5.20096852,12.5208838 L5.20096852,12.5208838 L5.20096852,15.8606113 L8.39814764,12.6634321 L8.45892035,12.6098356 C8.71226443,12.4133149 9.08161636,12.4311804 9.3138681,12.6634321 C9.56547415,12.9150382 9.56547415,13.3275466 9.3138681,13.5791526 L9.3138681,13.5791526 L6.09149511,16.7990315 L9.4155569,16.7990315 L9.49368756,16.8035151 C9.82695229,16.8420028 10.0864105,17.123441 10.081435,17.4601165 C10.0742517,17.8119637 9.78624591,18.094431 9.43371671,18.094431 L9.43371671,18.094431 L4.5691586,18.094431 L4.49163938,18.0899766 C4.16113157,18.051728 3.90556901,17.7718105 3.90556901,17.4308414 L3.90556901,17.4308414 L3.90556901,12.5367736 L3.91007171,12.4587841 C3.94871707,12.1260764 4.23118526,11.8665247 4.56580299,11.8731508 L4.56580299,11.8731508 Z M17.4353814,3.90556901 L17.512257,3.91000958 C17.8400885,3.94813523 18.094431,4.22707005 18.094431,4.56461864 L18.094431,4.56461864 L18.094431,9.46095642 L18.0899283,9.53894589 C18.0512829,9.87165361 17.7688147,10.1312053 17.434197,10.1245792 C17.0828999,10.1173731 16.7990315,9.82850504 16.7990315,9.47684625 L16.7990315,9.47684625 L16.7990315,6.13938874 L13.6018524,9.33656786 L13.5410796,9.39016441 C13.2877356,9.58668512 12.9183836,9.5688196 12.6861319,9.33656786 C12.4345258,9.08496181 12.4345258,8.67245345 12.6861319,8.4208474 L12.6861319,8.4208474 L15.9060108,5.20096852 L12.5821731,5.20096852 L12.5040246,5.19648608 C12.170734,5.1580095 11.9119308,4.876675 11.9185506,4.54071802 C11.9257483,4.18803625 12.2137541,3.90556901 12.5662833,3.90556901 L12.5662833,3.90556901 L17.4353814,3.90556901 Z" id="形状结合" fill="#52FFF1" fill-rule="nonzero" opacity="0.79078311"></path>
 | 
				
			||||||
            </g>
 | 
					            </g>
 | 
				
			||||||
        </g>
 | 
					        </g>
 | 
				
			||||||
 
 | 
				
			|||||||
| 
		 Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/img/1.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 75 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/img/OperationalOverview/AGV.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 126 KiB  | 
| 
		 Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 141 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								src/assets/img/large.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 19 KiB  | 
| 
		 Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 16 KiB  | 
@@ -21,9 +21,11 @@ body {
 | 
				
			|||||||
.searchBarBox .el-form-item--medium .el-form-item__label {
 | 
					.searchBarBox .el-form-item--medium .el-form-item__label {
 | 
				
			||||||
	line-height: 40px;
 | 
						line-height: 40px;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.searchBarBox .el-form-item--medium .el-form-item__content {
 | 
					.searchBarBox .el-form-item--medium .el-form-item__content {
 | 
				
			||||||
	line-height: 40px;
 | 
						line-height: 40px;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.searchBarBox .el-range-editor--small.el-input__inner {
 | 
					.searchBarBox .el-range-editor--small.el-input__inner {
 | 
				
			||||||
	height: 34px;
 | 
						height: 34px;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
@@ -153,13 +155,11 @@ aside {
 | 
				
			|||||||
	text-align: right;
 | 
						text-align: right;
 | 
				
			||||||
	padding-right: 20px;
 | 
						padding-right: 20px;
 | 
				
			||||||
	transition: 600ms ease position;
 | 
						transition: 600ms ease position;
 | 
				
			||||||
	background: linear-gradient(
 | 
						background: linear-gradient(90deg,
 | 
				
			||||||
		90deg,
 | 
					 | 
				
			||||||
			rgba(32, 182, 249, 1) 0%,
 | 
								rgba(32, 182, 249, 1) 0%,
 | 
				
			||||||
			rgba(32, 182, 249, 1) 0%,
 | 
								rgba(32, 182, 249, 1) 0%,
 | 
				
			||||||
			rgba(33, 120, 241, 1) 100%,
 | 
								rgba(33, 120, 241, 1) 100%,
 | 
				
			||||||
		rgba(33, 120, 241, 1) 100%
 | 
								rgba(33, 120, 241, 1) 100%);
 | 
				
			||||||
	);
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
	.subtitle {
 | 
						.subtitle {
 | 
				
			||||||
		font-size: 20px;
 | 
							font-size: 20px;
 | 
				
			||||||
@@ -204,10 +204,85 @@ aside {
 | 
				
			|||||||
	z-index: 1000 !important;
 | 
						z-index: 1000 !important;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 滚动条
 | 
				
			||||||
 | 
					::-webkit-scrollbar {
 | 
				
			||||||
 | 
						width: 8px;
 | 
				
			||||||
 | 
						height: 8px;
 | 
				
			||||||
 | 
						background-color: transparent;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					::-webkit-scrollbar-track-piece {
 | 
				
			||||||
 | 
						background-color: rgba(144, 147, 153, 0);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					::-webkit-scrollbar-corner {
 | 
				
			||||||
 | 
						background-color: rgba(144, 147, 153, 0);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					::-webkit-scrollbar-track {
 | 
				
			||||||
 | 
						width: 6px;
 | 
				
			||||||
 | 
						background: rgba(144, 147, 153, 0);
 | 
				
			||||||
 | 
						-webkit-border-radius: 2em;
 | 
				
			||||||
 | 
						-moz-border-radius: 2em;
 | 
				
			||||||
 | 
						border-radius: 2em;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					::-webkit-scrollbar-thumb {
 | 
				
			||||||
 | 
						background-color: #EDEDED;
 | 
				
			||||||
 | 
						background-clip: padding-box;
 | 
				
			||||||
 | 
						min-height: 28px;
 | 
				
			||||||
 | 
						-webkit-border-radius: 2em;
 | 
				
			||||||
 | 
						-moz-border-radius: 2em;
 | 
				
			||||||
 | 
						border-radius: 2em;
 | 
				
			||||||
 | 
						transition: background-color .3s;
 | 
				
			||||||
 | 
						cursor: pointer;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					::-webkit-scrollbar-thumb:hover {
 | 
				
			||||||
 | 
						background-color: #D9D9D9;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 抽屉head区域---start
 | 
				
			||||||
 | 
					.el-drawer__header {
 | 
				
			||||||
 | 
						padding-bottom: 20px;
 | 
				
			||||||
 | 
						padding-left: 30px;
 | 
				
			||||||
 | 
						margin-bottom: 23px;
 | 
				
			||||||
 | 
						font-size: 20px;
 | 
				
			||||||
 | 
						font-weight: 500;
 | 
				
			||||||
 | 
						color: rgba(0, 0, 0, 0.85);
 | 
				
			||||||
 | 
						border-bottom: 1px solid rgba(233, 233, 233, 1);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.el-drawer__header> :first-child::before {
 | 
				
			||||||
 | 
						content: '';
 | 
				
			||||||
 | 
						display: inline-block;
 | 
				
			||||||
 | 
						width: 4px;
 | 
				
			||||||
 | 
						height: 24px;
 | 
				
			||||||
 | 
						background-color: #0b58ff;
 | 
				
			||||||
 | 
						margin-right: 8px;
 | 
				
			||||||
 | 
						vertical-align: middle;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 抽屉head区域---end
 | 
				
			||||||
 | 
					// 弹出框,上下分布,去掉label的padding-bottom
 | 
				
			||||||
 | 
					.el-form--label-top .el-form-item__label {
 | 
				
			||||||
 | 
						padding: 0;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					// 大屏滚动表格
 | 
				
			||||||
 | 
					.dv-scroll-board .rows .ceil,
 | 
				
			||||||
 | 
					.dv-scroll-board .header .header-item {
 | 
				
			||||||
 | 
						border-right: 1px solid rgba(13, 23, 40, 1);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.dv-scroll-board .rows .ceil:last-child,
 | 
				
			||||||
 | 
					.dv-scroll-board .header .header-item:last-child {
 | 
				
			||||||
 | 
						border-right: none;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.no-data-bg {
 | 
					.no-data-bg {
 | 
				
			||||||
	height: 240px;
 | 
						height: 240px;
 | 
				
			||||||
	background: url(../images/no-data-bg.png) 50% 100% / contain
 | 
						background: url(../images/no-data-bg.png) 50% 100% / contain no-repeat;
 | 
				
			||||||
		no-repeat;
 | 
					 | 
				
			||||||
	position: relative;
 | 
						position: relative;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	&::after {
 | 
						&::after {
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -1,8 +1,9 @@
 | 
				
			|||||||
<template>
 | 
					<template>
 | 
				
			||||||
  <el-breadcrumb class="app-breadcrumb" separator="/">
 | 
					  <el-breadcrumb class="app-breadcrumb" separator="/">
 | 
				
			||||||
    <transition-group name="breadcrumb">
 | 
					    <transition-group name="breadcrumb">
 | 
				
			||||||
      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
 | 
					      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
 | 
				
			||||||
        <span v-if="item.redirect==='noRedirect'||index===levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
 | 
					        <span v-if="item.redirect === 'noRedirect' || index === levelList.length - 1" class="no-redirect">{{ item.meta.title
 | 
				
			||||||
 | 
					          }}</span>
 | 
				
			||||||
        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
 | 
					        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
 | 
				
			||||||
      </el-breadcrumb-item>
 | 
					      </el-breadcrumb-item>
 | 
				
			||||||
    </transition-group>
 | 
					    </transition-group>
 | 
				
			||||||
@@ -35,7 +36,7 @@ export default {
 | 
				
			|||||||
      const first = matched[0]
 | 
					      const first = matched[0]
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      if (!this.isDashboard(first)) {
 | 
					      if (!this.isDashboard(first)) {
 | 
				
			||||||
        matched = [{ path: '/', meta: { title: '首页' }}].concat(matched)
 | 
					        matched = [{ path: '/', meta: { title: '首页' } }].concat(matched)
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
 | 
					      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
 | 
				
			||||||
@@ -64,7 +65,7 @@ export default {
 | 
				
			|||||||
.app-breadcrumb.el-breadcrumb {
 | 
					.app-breadcrumb.el-breadcrumb {
 | 
				
			||||||
  display: inline-block;
 | 
					  display: inline-block;
 | 
				
			||||||
  font-size: 14px;
 | 
					  font-size: 14px;
 | 
				
			||||||
  line-height: 56px;
 | 
					  line-height: 48px;
 | 
				
			||||||
  margin-left: 8px;
 | 
					  margin-left: 8px;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  .no-redirect {
 | 
					  .no-redirect {
 | 
				
			||||||
@@ -73,7 +74,8 @@ export default {
 | 
				
			|||||||
  }
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.app-breadcrumb .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link {
 | 
					.app-breadcrumb .el-breadcrumb__inner a,
 | 
				
			||||||
 | 
					.el-breadcrumb__inner.is-link {
 | 
				
			||||||
  color: rgba(0, 0, 0, 0.45);
 | 
					  color: rgba(0, 0, 0, 0.45);
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
</style>
 | 
					</style>
 | 
				
			||||||
 
 | 
				
			|||||||
							
								
								
									
										138
									
								
								src/components/ButtonNav/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -0,0 +1,138 @@
 | 
				
			|||||||
 | 
					<!-- 
 | 
				
			||||||
 | 
					    filename: index.vue
 | 
				
			||||||
 | 
					    author: liubin
 | 
				
			||||||
 | 
					    date: 2024-04-02 09:49:36
 | 
				
			||||||
 | 
					    description: 
 | 
				
			||||||
 | 
					-->
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<template>
 | 
				
			||||||
 | 
						<!-- 按钮切换 -->
 | 
				
			||||||
 | 
						<div
 | 
				
			||||||
 | 
							v-if="buttonMode"
 | 
				
			||||||
 | 
							class="button-nav">
 | 
				
			||||||
 | 
							<button
 | 
				
			||||||
 | 
								v-for="m in menus"
 | 
				
			||||||
 | 
								:key="m"
 | 
				
			||||||
 | 
								@click="currentMenu = m"
 | 
				
			||||||
 | 
								:data-text="m"
 | 
				
			||||||
 | 
								:class="[m === currentMenu ? 'active' : '']"></button>
 | 
				
			||||||
 | 
						</div>
 | 
				
			||||||
 | 
						<!-- 标签切换 -->
 | 
				
			||||||
 | 
						<div
 | 
				
			||||||
 | 
							v-else
 | 
				
			||||||
 | 
							class="custom-tabs"
 | 
				
			||||||
 | 
							style="height: 100%; width: 100%">
 | 
				
			||||||
 | 
							<el-tabs
 | 
				
			||||||
 | 
								class="tag-nav"
 | 
				
			||||||
 | 
								v-model="currentMenu"
 | 
				
			||||||
 | 
								style="height: 100%">
 | 
				
			||||||
 | 
								<el-tab-pane
 | 
				
			||||||
 | 
									v-for="(m, idx) in menus"
 | 
				
			||||||
 | 
									:key="m"
 | 
				
			||||||
 | 
									:label="idx == 0 ? `\u2002${m}\u2002` : `\u3000${m}\u3000`"
 | 
				
			||||||
 | 
									:name="m">
 | 
				
			||||||
 | 
									<slot :name="`tab${idx + 1}`"></slot>
 | 
				
			||||||
 | 
								</el-tab-pane>
 | 
				
			||||||
 | 
							</el-tabs>
 | 
				
			||||||
 | 
						</div>
 | 
				
			||||||
 | 
					</template>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<script>
 | 
				
			||||||
 | 
					export default {
 | 
				
			||||||
 | 
						name: 'ButtonNav',
 | 
				
			||||||
 | 
						props: {
 | 
				
			||||||
 | 
							menus: {
 | 
				
			||||||
 | 
								type: Array,
 | 
				
			||||||
 | 
								required: true,
 | 
				
			||||||
 | 
								default: () => [],
 | 
				
			||||||
 | 
								validator: (val) => {
 | 
				
			||||||
 | 
									return val.length > 0;
 | 
				
			||||||
 | 
								},
 | 
				
			||||||
 | 
							},
 | 
				
			||||||
 | 
							buttonMode: {
 | 
				
			||||||
 | 
								type: Boolean,
 | 
				
			||||||
 | 
								default: true,
 | 
				
			||||||
 | 
							},
 | 
				
			||||||
 | 
						},
 | 
				
			||||||
 | 
						data() {
 | 
				
			||||||
 | 
							return {
 | 
				
			||||||
 | 
								currentMenu: '',
 | 
				
			||||||
 | 
							};
 | 
				
			||||||
 | 
						},
 | 
				
			||||||
 | 
						created() {
 | 
				
			||||||
 | 
							this.currentMenu = this.menus[0];
 | 
				
			||||||
 | 
						},
 | 
				
			||||||
 | 
						watch: {
 | 
				
			||||||
 | 
							currentMenu(val) {
 | 
				
			||||||
 | 
								this.$emit('change', val);
 | 
				
			||||||
 | 
							},
 | 
				
			||||||
 | 
						},
 | 
				
			||||||
 | 
					};
 | 
				
			||||||
 | 
					</script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<style scoped lang="scss">
 | 
				
			||||||
 | 
					.button-nav {
 | 
				
			||||||
 | 
						width: 100%;
 | 
				
			||||||
 | 
						// padding: 12px 0;
 | 
				
			||||||
 | 
						display: flex;
 | 
				
			||||||
 | 
						gap: 12px;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						* {
 | 
				
			||||||
 | 
							user-select: none;
 | 
				
			||||||
 | 
						}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
						button {
 | 
				
			||||||
 | 
							cursor: pointer;
 | 
				
			||||||
 | 
							appearance: none;
 | 
				
			||||||
 | 
							outline: none;
 | 
				
			||||||
 | 
							border: none;
 | 
				
			||||||
 | 
							background: #fff;
 | 
				
			||||||
 | 
							border-radius: 8px;
 | 
				
			||||||
 | 
							padding: 20px;
 | 
				
			||||||
 | 
							color: #888;
 | 
				
			||||||
 | 
							letter-spacing: 2px;
 | 
				
			||||||
 | 
							flex: 1;
 | 
				
			||||||
 | 
							box-sizing: padding-box;
 | 
				
			||||||
 | 
							position: relative;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
							&::after {
 | 
				
			||||||
 | 
								content: attr(data-text);
 | 
				
			||||||
 | 
								position: absolute;
 | 
				
			||||||
 | 
								top: 10px;
 | 
				
			||||||
 | 
								left: 50%;
 | 
				
			||||||
 | 
								font-size: 18px;
 | 
				
			||||||
 | 
								font-weight: 500;
 | 
				
			||||||
 | 
								transform: translate(-50%);
 | 
				
			||||||
 | 
							}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
							&.active {
 | 
				
			||||||
 | 
								color: #111;
 | 
				
			||||||
 | 
								border-bottom: 4px solid #0b58ff;
 | 
				
			||||||
 | 
							}
 | 
				
			||||||
 | 
						}
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					</style>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<style scoped>
 | 
				
			||||||
 | 
					.custom-tabs >>> .el-tabs__header {
 | 
				
			||||||
 | 
						margin-bottom: 8px;
 | 
				
			||||||
 | 
						display: inline-block;
 | 
				
			||||||
 | 
						/* transform: translateY(-12px); */
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.custom-tabs >>> .el-tabs__item {
 | 
				
			||||||
 | 
						padding-left: 0px !important;
 | 
				
			||||||
 | 
						padding-right: 0px !important;
 | 
				
			||||||
 | 
						line-height: 36px !important;
 | 
				
			||||||
 | 
						height: 36px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.custom-tabs >>> .el-tabs__content {
 | 
				
			||||||
 | 
						height: calc(100% - 42px);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.custom-tabs >>> .el-tab-pane {
 | 
				
			||||||
 | 
						box-sizing: border-box;
 | 
				
			||||||
 | 
						height: 100%;
 | 
				
			||||||
 | 
						padding: 20px;
 | 
				
			||||||
 | 
						border: 10px solid #f002;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					</style>
 | 
				
			||||||
@@ -12,7 +12,7 @@
 | 
				
			|||||||
		:label-width="`${labelWidth}px`"
 | 
							:label-width="`${labelWidth}px`"
 | 
				
			||||||
		:size="size"
 | 
							:size="size"
 | 
				
			||||||
		:label-position="labelPosition"
 | 
							:label-position="labelPosition"
 | 
				
			||||||
		v-loading="formLoading">
 | 
							v-loading="0 && formLoading">
 | 
				
			||||||
		<el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex">
 | 
							<el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex">
 | 
				
			||||||
			<el-col v-for="col in row" :key="col.label" :span="24 / row.length">
 | 
								<el-col v-for="col in row" :key="col.label" :span="24 / row.length">
 | 
				
			||||||
				<el-form-item :label="col.label" :prop="col.prop" :rules="col.rules">
 | 
									<el-form-item :label="col.label" :prop="col.prop" :rules="col.rules">
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -1,33 +0,0 @@
 | 
				
			|||||||
<template>
 | 
					 | 
				
			||||||
  <el-alert v-if="enable()" type="success" show-icon>
 | 
					 | 
				
			||||||
    <template slot="title">
 | 
					 | 
				
			||||||
      <div @click="goToUrl">{{ '【' + title + '】文档地址:' + url }}</div>
 | 
					 | 
				
			||||||
    </template>
 | 
					 | 
				
			||||||
  </el-alert>
 | 
					 | 
				
			||||||
</template>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<script>
 | 
					 | 
				
			||||||
import {getDocEnable} from "@/utils/ruoyi";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  name: "DocAlert",
 | 
					 | 
				
			||||||
  props: {
 | 
					 | 
				
			||||||
    title: String,
 | 
					 | 
				
			||||||
    url: String,
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  methods: {
 | 
					 | 
				
			||||||
    enable: function () {
 | 
					 | 
				
			||||||
      return getDocEnable();
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    goToUrl: function() {
 | 
					 | 
				
			||||||
      window.open(this.url);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
</script>
 | 
					 | 
				
			||||||
<style scoped>
 | 
					 | 
				
			||||||
.el-alert--success.is-light {
 | 
					 | 
				
			||||||
  margin-bottom: 10px;
 | 
					 | 
				
			||||||
  cursor: pointer;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
</style>
 | 
					 | 
				
			||||||
@@ -1,141 +0,0 @@
 | 
				
			|||||||
<template>
 | 
					 | 
				
			||||||
  <div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item">
 | 
					 | 
				
			||||||
    <div class="pan-info">
 | 
					 | 
				
			||||||
      <div class="pan-info-roles-container">
 | 
					 | 
				
			||||||
        <slot />
 | 
					 | 
				
			||||||
      </div>
 | 
					 | 
				
			||||||
    </div>
 | 
					 | 
				
			||||||
    <!-- eslint-disable-next-line -->
 | 
					 | 
				
			||||||
    <div :style="{backgroundImage: `url(${image})`}" class="pan-thumb"></div>
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
</template>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<script>
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  name: 'PanThumb',
 | 
					 | 
				
			||||||
  props: {
 | 
					 | 
				
			||||||
    image: {
 | 
					 | 
				
			||||||
      type: String,
 | 
					 | 
				
			||||||
      required: true
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    zIndex: {
 | 
					 | 
				
			||||||
      type: Number,
 | 
					 | 
				
			||||||
      default: 1
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    width: {
 | 
					 | 
				
			||||||
      type: String,
 | 
					 | 
				
			||||||
      default: '150px'
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    height: {
 | 
					 | 
				
			||||||
      type: String,
 | 
					 | 
				
			||||||
      default: '150px'
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
</script>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<style scoped>
 | 
					 | 
				
			||||||
.pan-item {
 | 
					 | 
				
			||||||
  width: 200px;
 | 
					 | 
				
			||||||
  height: 200px;
 | 
					 | 
				
			||||||
  border-radius: 50%;
 | 
					 | 
				
			||||||
  display: inline-block;
 | 
					 | 
				
			||||||
  position: relative;
 | 
					 | 
				
			||||||
  cursor: default;
 | 
					 | 
				
			||||||
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.pan-info-roles-container {
 | 
					 | 
				
			||||||
  padding: 20px;
 | 
					 | 
				
			||||||
  text-align: center;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.pan-thumb {
 | 
					 | 
				
			||||||
  width: 100%;
 | 
					 | 
				
			||||||
  height: 100%;
 | 
					 | 
				
			||||||
  background-position: center center;
 | 
					 | 
				
			||||||
  background-size: cover;
 | 
					 | 
				
			||||||
  border-radius: 50%;
 | 
					 | 
				
			||||||
  overflow: hidden;
 | 
					 | 
				
			||||||
  position: absolute;
 | 
					 | 
				
			||||||
  transform-origin: 95% 40%;
 | 
					 | 
				
			||||||
  transition: all 0.3s ease-in-out;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
/* .pan-thumb:after {
 | 
					 | 
				
			||||||
  content: '';
 | 
					 | 
				
			||||||
  width: 8px;
 | 
					 | 
				
			||||||
  height: 8px;
 | 
					 | 
				
			||||||
  position: absolute;
 | 
					 | 
				
			||||||
  border-radius: 50%;
 | 
					 | 
				
			||||||
  top: 40%;
 | 
					 | 
				
			||||||
  left: 95%;
 | 
					 | 
				
			||||||
  margin: -4px 0 0 -4px;
 | 
					 | 
				
			||||||
  background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
 | 
					 | 
				
			||||||
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
 | 
					 | 
				
			||||||
} */
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.pan-info {
 | 
					 | 
				
			||||||
  position: absolute;
 | 
					 | 
				
			||||||
  width: inherit;
 | 
					 | 
				
			||||||
  height: inherit;
 | 
					 | 
				
			||||||
  border-radius: 50%;
 | 
					 | 
				
			||||||
  overflow: hidden;
 | 
					 | 
				
			||||||
  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.pan-info h3 {
 | 
					 | 
				
			||||||
  color: #fff;
 | 
					 | 
				
			||||||
  text-transform: uppercase;
 | 
					 | 
				
			||||||
  position: relative;
 | 
					 | 
				
			||||||
  letter-spacing: 2px;
 | 
					 | 
				
			||||||
  font-size: 18px;
 | 
					 | 
				
			||||||
  margin: 0 60px;
 | 
					 | 
				
			||||||
  padding: 22px 0 0 0;
 | 
					 | 
				
			||||||
  height: 85px;
 | 
					 | 
				
			||||||
  font-family: 'Open Sans', Arial, sans-serif;
 | 
					 | 
				
			||||||
  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.pan-info p {
 | 
					 | 
				
			||||||
  color: #fff;
 | 
					 | 
				
			||||||
  padding: 10px 5px;
 | 
					 | 
				
			||||||
  font-style: italic;
 | 
					 | 
				
			||||||
  margin: 0 30px;
 | 
					 | 
				
			||||||
  font-size: 12px;
 | 
					 | 
				
			||||||
  border-top: 1px solid rgba(255, 255, 255, 0.5);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.pan-info p a {
 | 
					 | 
				
			||||||
  display: block;
 | 
					 | 
				
			||||||
  width: 80px;
 | 
					 | 
				
			||||||
  height: 80px;
 | 
					 | 
				
			||||||
  background: rgba(255, 255, 255, 0.3);
 | 
					 | 
				
			||||||
  border-radius: 50%;
 | 
					 | 
				
			||||||
  color: #fff;
 | 
					 | 
				
			||||||
  font-style: normal;
 | 
					 | 
				
			||||||
  font-weight: 700;
 | 
					 | 
				
			||||||
  text-transform: uppercase;
 | 
					 | 
				
			||||||
  font-size: 9px;
 | 
					 | 
				
			||||||
  letter-spacing: 1px;
 | 
					 | 
				
			||||||
  padding-top: 24px;
 | 
					 | 
				
			||||||
  margin: 7px auto 0;
 | 
					 | 
				
			||||||
  font-family: 'Open Sans', Arial, sans-serif;
 | 
					 | 
				
			||||||
  opacity: 0;
 | 
					 | 
				
			||||||
  transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
 | 
					 | 
				
			||||||
  transform: translateX(60px) rotate(90deg);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.pan-info p a:hover {
 | 
					 | 
				
			||||||
  background: rgba(255, 255, 255, 0.5);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.pan-item:hover .pan-thumb {
 | 
					 | 
				
			||||||
  transform: rotate(-110deg);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.pan-item:hover .pan-info p a {
 | 
					 | 
				
			||||||
  opacity: 1;
 | 
					 | 
				
			||||||
  transform: translateX(0px) rotate(0deg);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
</style>
 | 
					 | 
				
			||||||
@@ -1,21 +0,0 @@
 | 
				
			|||||||
## form-generator
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
github 地址:https://github.com/JakHuang/form-generator
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
* generator
 | 
					 | 
				
			||||||
* parser
 | 
					 | 
				
			||||||
* render
 | 
					 | 
				
			||||||
* tinymce
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
## bpmn-process-designer
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
github 地址:https://github.com/miyuesc/bpmn-process-designer
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
* bpmnProcessDesigner
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
TODO 目前存在的问题,如果选择 activiti 类型时,因为不支持内置表单的设计,所以会报 Error: unknown type activiti:FormData 错误。具体可见 https://github.com/miyuesc/bpmn-process-designer/issues/16 。
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
另外几个流程设计器的选型:
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
* https://gitee.com/jimlow/vue-bpmn 相比差一些,已经停止维护,不算推荐。
 | 
					 | 
				
			||||||
* https://github.com/GoldSubmarine/workflow-bpmn-modeler 仅支持 flowable 流程引擎。如果只考虑 flowable 的话,也是非常不错的选择。
 | 
					 | 
				
			||||||
@@ -1,21 +0,0 @@
 | 
				
			|||||||
<template>
 | 
					 | 
				
			||||||
  <div>
 | 
					 | 
				
			||||||
    <svg-icon icon-class="question" @click="goto"/>
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
</template>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<script>
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  name: 'YudaoDoc',
 | 
					 | 
				
			||||||
  data() {
 | 
					 | 
				
			||||||
    return {
 | 
					 | 
				
			||||||
      url: 'https://doc.iocoder.cn/'
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  methods: {
 | 
					 | 
				
			||||||
    goto() {
 | 
					 | 
				
			||||||
      window.open(this.url)
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
</script>
 | 
					 | 
				
			||||||
@@ -1,21 +0,0 @@
 | 
				
			|||||||
<template>
 | 
					 | 
				
			||||||
  <div>
 | 
					 | 
				
			||||||
    <svg-icon icon-class="github" @click="goto"/>
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
</template>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<script>
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  name: 'YudaoGit',
 | 
					 | 
				
			||||||
  data() {
 | 
					 | 
				
			||||||
    return {
 | 
					 | 
				
			||||||
      url: 'https://github.com/YunaiV/ruoyi-vue-pro'
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  methods: {
 | 
					 | 
				
			||||||
    goto() {
 | 
					 | 
				
			||||||
      window.open(this.url)
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
</script>
 | 
					 | 
				
			||||||
@@ -1,211 +0,0 @@
 | 
				
			|||||||
<template>
 | 
					 | 
				
			||||||
  <div class="editPage__video">
 | 
					 | 
				
			||||||
      <el-upload
 | 
					 | 
				
			||||||
        class="uploader"
 | 
					 | 
				
			||||||
        list-type="picture-card"
 | 
					 | 
				
			||||||
        :action="uploadUrl"
 | 
					 | 
				
			||||||
        :on-success="handleSuccess"
 | 
					 | 
				
			||||||
        :before-upload="beforeUpload"
 | 
					 | 
				
			||||||
        :headers="headers"
 | 
					 | 
				
			||||||
        :on-error="handleError"
 | 
					 | 
				
			||||||
        :show-file-list="false"
 | 
					 | 
				
			||||||
      >
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        <div v-if="uploadFlag" @mouseenter="mouseover" @mouseleave="mouseout">
 | 
					 | 
				
			||||||
          <i class="el-icon-success success-icon"></i>
 | 
					 | 
				
			||||||
          <div :class="{'hide': activeHover, 'success': !activeHover}">
 | 
					 | 
				
			||||||
            <span class="item-actions">
 | 
					 | 
				
			||||||
              <span
 | 
					 | 
				
			||||||
                class="item-preview"
 | 
					 | 
				
			||||||
                @click.stop="handlePreview()"
 | 
					 | 
				
			||||||
              >
 | 
					 | 
				
			||||||
                <i class="el-icon-zoom-in"></i>
 | 
					 | 
				
			||||||
              </span>
 | 
					 | 
				
			||||||
              <span
 | 
					 | 
				
			||||||
                class="item-delete"
 | 
					 | 
				
			||||||
                @click.stop="handleRemove()"
 | 
					 | 
				
			||||||
              >
 | 
					 | 
				
			||||||
                <i class="el-icon-delete"></i>
 | 
					 | 
				
			||||||
              </span>
 | 
					 | 
				
			||||||
            </span>
 | 
					 | 
				
			||||||
          </div>
 | 
					 | 
				
			||||||
        </div>
 | 
					 | 
				
			||||||
        <i v-else-if="uploadFlag === null" class="el-icon-plus uploader-icon"></i>
 | 
					 | 
				
			||||||
        <i v-else-if="!uploadFlag" class="el-icon-circle-close uploader-icon" style="color: red"></i>
 | 
					 | 
				
			||||||
    </el-upload>
 | 
					 | 
				
			||||||
    <!-- 上传提示 -->
 | 
					 | 
				
			||||||
    <div class="el-upload__tip" slot="tip" v-if="showTip">
 | 
					 | 
				
			||||||
      请上传
 | 
					 | 
				
			||||||
      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
 | 
					 | 
				
			||||||
      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
 | 
					 | 
				
			||||||
      的文件
 | 
					 | 
				
			||||||
    </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    <el-dialog :visible.sync="dialogVisible" append-to-body  width="800"  title="预览">
 | 
					 | 
				
			||||||
      <video width="100%" v-if="videoUrl" controls="controls" :key="menuKey">
 | 
					 | 
				
			||||||
          <source :src="videoUrl" type="video/mp4" />
 | 
					 | 
				
			||||||
      </video>
 | 
					 | 
				
			||||||
    </el-dialog>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
</template>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<script>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
import { getAccessToken } from "@/utils/auth";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  props: {
 | 
					 | 
				
			||||||
    value: [String, Object],
 | 
					 | 
				
			||||||
    // 大小限制(MB)
 | 
					 | 
				
			||||||
    fileSize: {
 | 
					 | 
				
			||||||
      type: Number,
 | 
					 | 
				
			||||||
      default: 300,
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 文件类型, 例如"video/mp4"
 | 
					 | 
				
			||||||
    fileType: {
 | 
					 | 
				
			||||||
      type: [String, Array],
 | 
					 | 
				
			||||||
      default: () =>["video/mp4"],
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 是否显示提示
 | 
					 | 
				
			||||||
    isShowTip: {
 | 
					 | 
				
			||||||
      type: Boolean,
 | 
					 | 
				
			||||||
      default: true
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  data() {
 | 
					 | 
				
			||||||
    return {
 | 
					 | 
				
			||||||
      uploadFlag: null,
 | 
					 | 
				
			||||||
      activeHover: true,
 | 
					 | 
				
			||||||
      dialogVisible: false,
 | 
					 | 
				
			||||||
      videoUrl: null,
 | 
					 | 
				
			||||||
      // 视频上传
 | 
					 | 
				
			||||||
      uploadUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
 | 
					 | 
				
			||||||
      headers: { Authorization: "Bearer " + getAccessToken() }, // 设置上传的请求头部
 | 
					 | 
				
			||||||
      // 应付多个组件的情况 记录当前组件的key值
 | 
					 | 
				
			||||||
      menuKey: 1, // 用来强制刷新,
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  watch: {
 | 
					 | 
				
			||||||
    value: {
 | 
					 | 
				
			||||||
      handler(val) {
 | 
					 | 
				
			||||||
        if (val) {
 | 
					 | 
				
			||||||
          this.videoUrl = val;
 | 
					 | 
				
			||||||
          this.uploadFlag = true;
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      },
 | 
					 | 
				
			||||||
      deep: true,
 | 
					 | 
				
			||||||
      immediate: true
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  computed: {
 | 
					 | 
				
			||||||
    // 是否显示提示
 | 
					 | 
				
			||||||
    showTip() {
 | 
					 | 
				
			||||||
      return this.isShowTip && (this.fileType || this.fileSize);
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  methods: {
 | 
					 | 
				
			||||||
     // 上传成功的函数
 | 
					 | 
				
			||||||
     handleSuccess(res) {
 | 
					 | 
				
			||||||
      ++this.menuKey;
 | 
					 | 
				
			||||||
      if(res.code === 0){
 | 
					 | 
				
			||||||
        this.uploadFlag = true;
 | 
					 | 
				
			||||||
        this.videoUrl = res.data;
 | 
					 | 
				
			||||||
        this.$emit("input", this.videoUrl);
 | 
					 | 
				
			||||||
      }else{
 | 
					 | 
				
			||||||
        this.uploadFlag = false;
 | 
					 | 
				
			||||||
        this.$message.error("错误!"+ res.msg);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    handleError(){
 | 
					 | 
				
			||||||
      this.uploadFlag = false;
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    beforeUpload(file) {
 | 
					 | 
				
			||||||
      const isMp4 = this.fileType.includes(file.type);
 | 
					 | 
				
			||||||
      const isLt300MB = file.size / 1024 / 1024 < 300;
 | 
					 | 
				
			||||||
      if (!isMp4) {
 | 
					 | 
				
			||||||
        this.$message.error("视频只能是"+ this.fileType.join("/") +"格式!");
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      if (!isLt300MB) {
 | 
					 | 
				
			||||||
        this.$message.error("上传视频大小不能超过 300MB!");
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      return isMp4 && isLt300MB;
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
     // 预览
 | 
					 | 
				
			||||||
     handlePreview() {
 | 
					 | 
				
			||||||
      this.dialogVisible = true;
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
     // 删除视频
 | 
					 | 
				
			||||||
    handleRemove() {
 | 
					 | 
				
			||||||
      this.videoUrl = null;
 | 
					 | 
				
			||||||
      this.uploadFlag = null;
 | 
					 | 
				
			||||||
      this.$emit("input", null);
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    mouseover(){
 | 
					 | 
				
			||||||
      this.activeHover = false;
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    mouseout(){
 | 
					 | 
				
			||||||
      this.activeHover = true;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
</script>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<style lang="scss">
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  .editPage__video {
 | 
					 | 
				
			||||||
    .hide{
 | 
					 | 
				
			||||||
      visibility:hidden;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    .success{
 | 
					 | 
				
			||||||
      position: relative;
 | 
					 | 
				
			||||||
      width: 78px;
 | 
					 | 
				
			||||||
      height: 78px;
 | 
					 | 
				
			||||||
      line-height: 78px;
 | 
					 | 
				
			||||||
      background-color: rgba(0,0,0,.5);
 | 
					 | 
				
			||||||
      transition: opacity .3s;
 | 
					 | 
				
			||||||
      cursor: default;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      .item-preview .el-icon-zoom-in{
 | 
					 | 
				
			||||||
        width: 30px;
 | 
					 | 
				
			||||||
        font-size: 20px;
 | 
					 | 
				
			||||||
        color: #f2f2f2;
 | 
					 | 
				
			||||||
        cursor: pointer;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      .item-delete .el-icon-delete{
 | 
					 | 
				
			||||||
        width: 30px;
 | 
					 | 
				
			||||||
        font-size: 20px;
 | 
					 | 
				
			||||||
        color: #f2f2f2;
 | 
					 | 
				
			||||||
        cursor: pointer;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    .uploader-icon {
 | 
					 | 
				
			||||||
      font-size: 28px;
 | 
					 | 
				
			||||||
      color: #8c939d;
 | 
					 | 
				
			||||||
      width: 80px;
 | 
					 | 
				
			||||||
      height: 80px;
 | 
					 | 
				
			||||||
      line-height: 80px;
 | 
					 | 
				
			||||||
      text-align: center;
 | 
					 | 
				
			||||||
      position: absolute;
 | 
					 | 
				
			||||||
      left: 0;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    .success-icon {
 | 
					 | 
				
			||||||
      font-size: 28px;
 | 
					 | 
				
			||||||
      color: green;
 | 
					 | 
				
			||||||
      width: 80px;
 | 
					 | 
				
			||||||
      height: 80px;
 | 
					 | 
				
			||||||
      line-height: 80px;
 | 
					 | 
				
			||||||
      text-align: center;
 | 
					 | 
				
			||||||
      position: absolute;
 | 
					 | 
				
			||||||
      left: 0;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    .el-upload{
 | 
					 | 
				
			||||||
      width: 80px;
 | 
					 | 
				
			||||||
      height: 80px;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
</style>
 | 
					 | 
				
			||||||
@@ -1,476 +0,0 @@
 | 
				
			|||||||
<template>
 | 
					 | 
				
			||||||
  <div class="my-process-designer">
 | 
					 | 
				
			||||||
    <div class="my-process-designer__header">
 | 
					 | 
				
			||||||
      <slot name="control-header"></slot>
 | 
					 | 
				
			||||||
      <template v-if="!$slots['control-header']">
 | 
					 | 
				
			||||||
        <el-button-group key="file-control">
 | 
					 | 
				
			||||||
          <el-button :size="headerButtonSize" icon="el-icon-folder-opened" @click="$refs.refFile.click()">打开文件</el-button>
 | 
					 | 
				
			||||||
          <el-tooltip effect="light">
 | 
					 | 
				
			||||||
            <div slot="content">
 | 
					 | 
				
			||||||
              <el-button :size="headerButtonSize" type="text" @click="downloadProcessAsXml()">下载为XML文件</el-button>
 | 
					 | 
				
			||||||
              <br />
 | 
					 | 
				
			||||||
              <el-button :size="headerButtonSize" type="text" @click="downloadProcessAsSvg()">下载为SVG文件</el-button>
 | 
					 | 
				
			||||||
              <br />
 | 
					 | 
				
			||||||
              <el-button :size="headerButtonSize" type="text" @click="downloadProcessAsBpmn()">下载为BPMN文件</el-button>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
            <el-button :size="headerButtonSize" icon="el-icon-download">下载文件</el-button>
 | 
					 | 
				
			||||||
          </el-tooltip>
 | 
					 | 
				
			||||||
          <el-tooltip effect="light">
 | 
					 | 
				
			||||||
            <div slot="content">
 | 
					 | 
				
			||||||
              <el-button :size="headerButtonSize" type="text" @click="previewProcessXML">预览XML</el-button>
 | 
					 | 
				
			||||||
              <br />
 | 
					 | 
				
			||||||
              <el-button :size="headerButtonSize" type="text" @click="previewProcessJson">预览JSON</el-button>
 | 
					 | 
				
			||||||
            </div>
 | 
					 | 
				
			||||||
            <el-button :size="headerButtonSize" icon="el-icon-view">预览</el-button>
 | 
					 | 
				
			||||||
          </el-tooltip>
 | 
					 | 
				
			||||||
          <el-tooltip v-if="simulation" effect="light" :content="this.simulationStatus ? '退出模拟' : '开启模拟'">
 | 
					 | 
				
			||||||
            <el-button :size="headerButtonSize" icon="el-icon-cpu" @click="processSimulation">
 | 
					 | 
				
			||||||
              模拟
 | 
					 | 
				
			||||||
            </el-button>
 | 
					 | 
				
			||||||
          </el-tooltip>
 | 
					 | 
				
			||||||
        </el-button-group>
 | 
					 | 
				
			||||||
        <el-button-group key="align-control">
 | 
					 | 
				
			||||||
          <el-tooltip effect="light" content="向左对齐">
 | 
					 | 
				
			||||||
            <el-button :size="headerButtonSize" class="align align-left" icon="el-icon-s-data" @click="elementsAlign('left')" />
 | 
					 | 
				
			||||||
          </el-tooltip>
 | 
					 | 
				
			||||||
          <el-tooltip effect="light" content="向右对齐">
 | 
					 | 
				
			||||||
            <el-button :size="headerButtonSize" class="align align-right" icon="el-icon-s-data" @click="elementsAlign('right')" />
 | 
					 | 
				
			||||||
          </el-tooltip>
 | 
					 | 
				
			||||||
          <el-tooltip effect="light" content="向上对齐">
 | 
					 | 
				
			||||||
            <el-button :size="headerButtonSize" class="align align-top" icon="el-icon-s-data" @click="elementsAlign('top')" />
 | 
					 | 
				
			||||||
          </el-tooltip>
 | 
					 | 
				
			||||||
          <el-tooltip effect="light" content="向下对齐">
 | 
					 | 
				
			||||||
            <el-button :size="headerButtonSize" class="align align-bottom" icon="el-icon-s-data" @click="elementsAlign('bottom')" />
 | 
					 | 
				
			||||||
          </el-tooltip>
 | 
					 | 
				
			||||||
          <el-tooltip effect="light" content="水平居中">
 | 
					 | 
				
			||||||
            <el-button :size="headerButtonSize" class="align align-center" icon="el-icon-s-data" @click="elementsAlign('center')" />
 | 
					 | 
				
			||||||
          </el-tooltip>
 | 
					 | 
				
			||||||
          <el-tooltip effect="light" content="垂直居中">
 | 
					 | 
				
			||||||
            <el-button :size="headerButtonSize" class="align align-middle" icon="el-icon-s-data" @click="elementsAlign('middle')" />
 | 
					 | 
				
			||||||
          </el-tooltip>
 | 
					 | 
				
			||||||
        </el-button-group>
 | 
					 | 
				
			||||||
        <el-button-group key="scale-control">
 | 
					 | 
				
			||||||
          <el-tooltip effect="light" content="缩小视图">
 | 
					 | 
				
			||||||
            <el-button :size="headerButtonSize" :disabled="defaultZoom < 0.2" icon="el-icon-zoom-out" @click="processZoomOut()" />
 | 
					 | 
				
			||||||
          </el-tooltip>
 | 
					 | 
				
			||||||
          <el-button :size="headerButtonSize">{{ Math.floor(this.defaultZoom * 10 * 10) + "%" }}</el-button>
 | 
					 | 
				
			||||||
          <el-tooltip effect="light" content="放大视图">
 | 
					 | 
				
			||||||
            <el-button :size="headerButtonSize" :disabled="defaultZoom > 4" icon="el-icon-zoom-in" @click="processZoomIn()" />
 | 
					 | 
				
			||||||
          </el-tooltip>
 | 
					 | 
				
			||||||
          <el-tooltip effect="light" content="重置视图并居中">
 | 
					 | 
				
			||||||
            <el-button :size="headerButtonSize" icon="el-icon-c-scale-to-original" @click="processReZoom()" />
 | 
					 | 
				
			||||||
          </el-tooltip>
 | 
					 | 
				
			||||||
        </el-button-group>
 | 
					 | 
				
			||||||
        <el-button-group key="stack-control">
 | 
					 | 
				
			||||||
          <el-tooltip effect="light" content="撤销">
 | 
					 | 
				
			||||||
            <el-button :size="headerButtonSize" :disabled="!revocable" icon="el-icon-refresh-left" @click="processUndo()" />
 | 
					 | 
				
			||||||
          </el-tooltip>
 | 
					 | 
				
			||||||
          <el-tooltip effect="light" content="恢复">
 | 
					 | 
				
			||||||
            <el-button :size="headerButtonSize" :disabled="!recoverable" icon="el-icon-refresh-right" @click="processRedo()" />
 | 
					 | 
				
			||||||
          </el-tooltip>
 | 
					 | 
				
			||||||
          <el-tooltip effect="light" content="重新绘制">
 | 
					 | 
				
			||||||
            <el-button :size="headerButtonSize" icon="el-icon-refresh" @click="processRestart" />
 | 
					 | 
				
			||||||
          </el-tooltip>
 | 
					 | 
				
			||||||
        </el-button-group>
 | 
					 | 
				
			||||||
        <el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-plus" @click="processSave" :disabled = "simulationStatus">保存模型</el-button>
 | 
					 | 
				
			||||||
      </template>
 | 
					 | 
				
			||||||
      <!-- 用于打开本地文件-->
 | 
					 | 
				
			||||||
      <input type="file" id="files" ref="refFile" style="display: none" accept=".xml, .bpmn" @change="importLocalFile" />
 | 
					 | 
				
			||||||
    </div>
 | 
					 | 
				
			||||||
    <div class="my-process-designer__container">
 | 
					 | 
				
			||||||
      <div class="my-process-designer__canvas" ref="bpmn-canvas"></div>
 | 
					 | 
				
			||||||
    </div>
 | 
					 | 
				
			||||||
    <el-dialog title="预览" width="80%" :visible.sync="previewModelVisible" append-to-body destroy-on-close>
 | 
					 | 
				
			||||||
      <pre><code class="hljs" v-html="highlightedCode(previewType, previewResult)"></code></pre>
 | 
					 | 
				
			||||||
    </el-dialog>
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
</template>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<script>
 | 
					 | 
				
			||||||
import BpmnModeler from "bpmn-js/lib/Modeler";
 | 
					 | 
				
			||||||
import DefaultEmptyXML from "./plugins/defaultEmpty";
 | 
					 | 
				
			||||||
// 翻译方法
 | 
					 | 
				
			||||||
import customTranslate from "./plugins/translate/customTranslate";
 | 
					 | 
				
			||||||
import translationsCN from "./plugins/translate/zh";
 | 
					 | 
				
			||||||
// 模拟流转流程
 | 
					 | 
				
			||||||
import tokenSimulation from "bpmn-js-token-simulation";
 | 
					 | 
				
			||||||
// 标签解析构建器
 | 
					 | 
				
			||||||
// import bpmnPropertiesProvider from "bpmn-js-properties-panel/lib/provider/bpmn";
 | 
					 | 
				
			||||||
// 标签解析 Moddle
 | 
					 | 
				
			||||||
import camundaModdleDescriptor from "./plugins/descriptor/camundaDescriptor.json";
 | 
					 | 
				
			||||||
import activitiModdleDescriptor from "./plugins/descriptor/activitiDescriptor.json";
 | 
					 | 
				
			||||||
import flowableModdleDescriptor from "./plugins/descriptor/flowableDescriptor.json";
 | 
					 | 
				
			||||||
// 标签解析 Extension
 | 
					 | 
				
			||||||
import camundaModdleExtension from "./plugins/extension-moddle/camunda";
 | 
					 | 
				
			||||||
import activitiModdleExtension from "./plugins/extension-moddle/activiti";
 | 
					 | 
				
			||||||
import flowableModdleExtension from "./plugins/extension-moddle/flowable";
 | 
					 | 
				
			||||||
// 引入json转换与高亮
 | 
					 | 
				
			||||||
import convert from "xml-js";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
// 代码高亮插件
 | 
					 | 
				
			||||||
import hljs from "highlight.js/lib/highlight";
 | 
					 | 
				
			||||||
import "highlight.js/styles/github-gist.css";
 | 
					 | 
				
			||||||
hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
 | 
					 | 
				
			||||||
hljs.registerLanguage("json", require("highlight.js/lib/languages/json"));
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  name: "MyProcessDesigner",
 | 
					 | 
				
			||||||
  componentName: "MyProcessDesigner",
 | 
					 | 
				
			||||||
  props: {
 | 
					 | 
				
			||||||
    value: String, // xml 字符串
 | 
					 | 
				
			||||||
    valueWatch: true, // xml 字符串的 watch 状态
 | 
					 | 
				
			||||||
    processId: String, // 流程 key 标识
 | 
					 | 
				
			||||||
    processName: String, // 流程 name 名字
 | 
					 | 
				
			||||||
    formId: Number, // 流程 form 表单编号
 | 
					 | 
				
			||||||
    translations: Object, // 自定义的翻译文件
 | 
					 | 
				
			||||||
    additionalModel: [Object, Array], // 自定义model
 | 
					 | 
				
			||||||
    moddleExtension: Object, // 自定义moddle
 | 
					 | 
				
			||||||
    onlyCustomizeAddi: {
 | 
					 | 
				
			||||||
      type: Boolean,
 | 
					 | 
				
			||||||
      default: false
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    onlyCustomizeModdle: {
 | 
					 | 
				
			||||||
      type: Boolean,
 | 
					 | 
				
			||||||
      default: false
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    simulation: {
 | 
					 | 
				
			||||||
      type: Boolean,
 | 
					 | 
				
			||||||
      default: true
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    keyboard: {
 | 
					 | 
				
			||||||
      type: Boolean,
 | 
					 | 
				
			||||||
      default: true
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    prefix: {
 | 
					 | 
				
			||||||
      type: String,
 | 
					 | 
				
			||||||
      default: "camunda"
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    events: {
 | 
					 | 
				
			||||||
      type: Array,
 | 
					 | 
				
			||||||
      default: () => ["element.click"]
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    headerButtonSize: {
 | 
					 | 
				
			||||||
      type: String,
 | 
					 | 
				
			||||||
      default: "small",
 | 
					 | 
				
			||||||
      validator: value => ["default", "medium", "small", "mini"].indexOf(value) !== -1
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    headerButtonType: {
 | 
					 | 
				
			||||||
      type: String,
 | 
					 | 
				
			||||||
      default: "primary",
 | 
					 | 
				
			||||||
      validator: value => ["default", "primary", "success", "warning", "danger", "info"].indexOf(value) !== -1
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  data() {
 | 
					 | 
				
			||||||
    return {
 | 
					 | 
				
			||||||
      defaultZoom: 1,
 | 
					 | 
				
			||||||
      previewModelVisible: false,
 | 
					 | 
				
			||||||
      simulationStatus: false,
 | 
					 | 
				
			||||||
      previewResult: "",
 | 
					 | 
				
			||||||
      previewType: "xml",
 | 
					 | 
				
			||||||
      recoverable: false,
 | 
					 | 
				
			||||||
      revocable: false
 | 
					 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  computed: {
 | 
					 | 
				
			||||||
    additionalModules() {
 | 
					 | 
				
			||||||
      const Modules = [];
 | 
					 | 
				
			||||||
      // 仅保留用户自定义扩展模块
 | 
					 | 
				
			||||||
      if (this.onlyCustomizeAddi) {
 | 
					 | 
				
			||||||
        if (Object.prototype.toString.call(this.additionalModel) === "[object Array]") {
 | 
					 | 
				
			||||||
          return this.additionalModel || [];
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
        return [this.additionalModel];
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      // 插入用户自定义扩展模块
 | 
					 | 
				
			||||||
      if (Object.prototype.toString.call(this.additionalModel) === "[object Array]") {
 | 
					 | 
				
			||||||
        Modules.push(...this.additionalModel);
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        this.additionalModel && Modules.push(this.additionalModel);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      // 翻译模块
 | 
					 | 
				
			||||||
      const TranslateModule = {
 | 
					 | 
				
			||||||
        translate: ["value", customTranslate(this.translations || translationsCN)]
 | 
					 | 
				
			||||||
      };
 | 
					 | 
				
			||||||
      Modules.push(TranslateModule);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      // 模拟流转模块
 | 
					 | 
				
			||||||
      if (this.simulation) {
 | 
					 | 
				
			||||||
        Modules.push(tokenSimulation);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      // 根据需要的流程类型设置扩展元素构建模块
 | 
					 | 
				
			||||||
      // if (this.prefix === "bpmn") {
 | 
					 | 
				
			||||||
      //   Modules.push(bpmnModdleExtension);
 | 
					 | 
				
			||||||
      // }
 | 
					 | 
				
			||||||
      if (this.prefix === "camunda") {
 | 
					 | 
				
			||||||
        Modules.push(camundaModdleExtension);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      if (this.prefix === "flowable") {
 | 
					 | 
				
			||||||
        Modules.push(flowableModdleExtension);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      if (this.prefix === "activiti") {
 | 
					 | 
				
			||||||
        Modules.push(activitiModdleExtension);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      return Modules;
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    moddleExtensions() {
 | 
					 | 
				
			||||||
      const Extensions = {};
 | 
					 | 
				
			||||||
      // 仅使用用户自定义模块
 | 
					 | 
				
			||||||
      if (this.onlyCustomizeModdle) {
 | 
					 | 
				
			||||||
        return this.moddleExtension || null;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      // 插入用户自定义模块
 | 
					 | 
				
			||||||
      if (this.moddleExtension) {
 | 
					 | 
				
			||||||
        for (let key in this.moddleExtension) {
 | 
					 | 
				
			||||||
          Extensions[key] = this.moddleExtension[key];
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      // 根据需要的 "流程类型" 设置 对应的解析文件
 | 
					 | 
				
			||||||
      if (this.prefix === "activiti") {
 | 
					 | 
				
			||||||
        Extensions.activiti = activitiModdleDescriptor;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      if (this.prefix === "flowable") {
 | 
					 | 
				
			||||||
        Extensions.flowable = flowableModdleDescriptor;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      if (this.prefix === "camunda") {
 | 
					 | 
				
			||||||
        Extensions.camunda = camundaModdleDescriptor;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      return Extensions;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  mounted() {
 | 
					 | 
				
			||||||
    this.initBpmnModeler();
 | 
					 | 
				
			||||||
    this.createNewDiagram(this.value);
 | 
					 | 
				
			||||||
    this.$once("hook:beforeDestroy", () => {
 | 
					 | 
				
			||||||
      if (this.bpmnModeler) this.bpmnModeler.destroy();
 | 
					 | 
				
			||||||
      this.$emit("destroy", this.bpmnModeler);
 | 
					 | 
				
			||||||
      this.bpmnModeler = null;
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  methods: {
 | 
					 | 
				
			||||||
    initBpmnModeler() {
 | 
					 | 
				
			||||||
      if (this.bpmnModeler) return;
 | 
					 | 
				
			||||||
      this.bpmnModeler = new BpmnModeler({
 | 
					 | 
				
			||||||
        container: this.$refs["bpmn-canvas"],
 | 
					 | 
				
			||||||
        keyboard: this.keyboard ? { bindTo: document } : null,
 | 
					 | 
				
			||||||
        additionalModules: this.additionalModules,
 | 
					 | 
				
			||||||
        moddleExtensions: this.moddleExtensions
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
      this.$emit("init-finished", this.bpmnModeler);
 | 
					 | 
				
			||||||
      this.initModelListeners();
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    initModelListeners() {
 | 
					 | 
				
			||||||
      const EventBus = this.bpmnModeler.get("eventBus");
 | 
					 | 
				
			||||||
      const that = this;
 | 
					 | 
				
			||||||
      // 注册需要的监听事件, 将. 替换为 - , 避免解析异常
 | 
					 | 
				
			||||||
      this.events.forEach(event => {
 | 
					 | 
				
			||||||
        EventBus.on(event, function(eventObj) {
 | 
					 | 
				
			||||||
          let eventName = event.replace(/\./g, "-");
 | 
					 | 
				
			||||||
          let element = eventObj ? eventObj.element : null;
 | 
					 | 
				
			||||||
          that.$emit(eventName, element, eventObj);
 | 
					 | 
				
			||||||
        });
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
      // 监听图形改变返回xml
 | 
					 | 
				
			||||||
      EventBus.on("commandStack.changed", async event => {
 | 
					 | 
				
			||||||
        try {
 | 
					 | 
				
			||||||
          this.recoverable = this.bpmnModeler.get("commandStack").canRedo();
 | 
					 | 
				
			||||||
          this.revocable = this.bpmnModeler.get("commandStack").canUndo();
 | 
					 | 
				
			||||||
          let { xml } = await this.bpmnModeler.saveXML({ format: true });
 | 
					 | 
				
			||||||
          this.$emit("commandStack-changed", event);
 | 
					 | 
				
			||||||
          this.$emit("input", xml);
 | 
					 | 
				
			||||||
          this.$emit("change", xml);
 | 
					 | 
				
			||||||
        } catch (e) {
 | 
					 | 
				
			||||||
          console.error(`[Process Designer Warn]: ${e.message || e}`);
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
      // 监听视图缩放变化
 | 
					 | 
				
			||||||
      this.bpmnModeler.on("canvas.viewbox.changed", ({ viewbox }) => {
 | 
					 | 
				
			||||||
        this.$emit("canvas-viewbox-changed", { viewbox });
 | 
					 | 
				
			||||||
        const { scale } = viewbox;
 | 
					 | 
				
			||||||
        this.defaultZoom = Math.floor(scale * 100) / 100;
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    /* 创建新的流程图 */
 | 
					 | 
				
			||||||
    async createNewDiagram(xml) {
 | 
					 | 
				
			||||||
      // 将字符串转换成图显示出来
 | 
					 | 
				
			||||||
      let newId = this.processId || `Process_${new Date().getTime()}`;
 | 
					 | 
				
			||||||
      let newName = this.processName || `业务流程_${new Date().getTime()}`;
 | 
					 | 
				
			||||||
      let xmlString = xml || DefaultEmptyXML(newId, newName, this.prefix);
 | 
					 | 
				
			||||||
      try {
 | 
					 | 
				
			||||||
        // console.log(this.bpmnModeler.importXML);
 | 
					 | 
				
			||||||
        let { warnings } = await this.bpmnModeler.importXML(xmlString);
 | 
					 | 
				
			||||||
        if (warnings && warnings.length) {
 | 
					 | 
				
			||||||
          warnings.forEach(warn => console.warn(warn));
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      } catch (e) {
 | 
					 | 
				
			||||||
        console.error(`[Process Designer Warn]: ${e?.message || e}`);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    // 下载流程图到本地
 | 
					 | 
				
			||||||
    async downloadProcess(type, name) {
 | 
					 | 
				
			||||||
      try {
 | 
					 | 
				
			||||||
        const _this = this;
 | 
					 | 
				
			||||||
        // 按需要类型创建文件并下载
 | 
					 | 
				
			||||||
        if (type === "xml" || type === "bpmn") {
 | 
					 | 
				
			||||||
          const { err, xml } = await this.bpmnModeler.saveXML();
 | 
					 | 
				
			||||||
          // 读取异常时抛出异常
 | 
					 | 
				
			||||||
          if (err) {
 | 
					 | 
				
			||||||
            console.error(`[Process Designer Warn ]: ${err.message || err}`);
 | 
					 | 
				
			||||||
          }
 | 
					 | 
				
			||||||
          let { href, filename } = _this.setEncoded(type.toUpperCase(), name, xml);
 | 
					 | 
				
			||||||
          downloadFunc(href, filename);
 | 
					 | 
				
			||||||
        } else {
 | 
					 | 
				
			||||||
          const { err, svg } = await this.bpmnModeler.saveSVG();
 | 
					 | 
				
			||||||
          // 读取异常时抛出异常
 | 
					 | 
				
			||||||
          if (err) {
 | 
					 | 
				
			||||||
            return console.error(err);
 | 
					 | 
				
			||||||
          }
 | 
					 | 
				
			||||||
          let { href, filename } = _this.setEncoded("SVG", name, svg);
 | 
					 | 
				
			||||||
          downloadFunc(href, filename);
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      } catch (e) {
 | 
					 | 
				
			||||||
        console.error(`[Process Designer Warn ]: ${e.message || e}`);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      // 文件下载方法
 | 
					 | 
				
			||||||
      function downloadFunc(href, filename) {
 | 
					 | 
				
			||||||
        if (href && filename) {
 | 
					 | 
				
			||||||
          let a = document.createElement("a");
 | 
					 | 
				
			||||||
          a.download = filename; //指定下载的文件名
 | 
					 | 
				
			||||||
          a.href = href; //  URL对象
 | 
					 | 
				
			||||||
          a.click(); // 模拟点击
 | 
					 | 
				
			||||||
          URL.revokeObjectURL(a.href); // 释放URL 对象
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    // 根据所需类型进行转码并返回下载地址
 | 
					 | 
				
			||||||
    setEncoded(type, filename = "diagram", data) {
 | 
					 | 
				
			||||||
      const encodedData = encodeURIComponent(data);
 | 
					 | 
				
			||||||
      return {
 | 
					 | 
				
			||||||
        filename: `${filename}.${type}`,
 | 
					 | 
				
			||||||
        href: `data:application/${type === "svg" ? "text/xml" : "bpmn20-xml"};charset=UTF-8,${encodedData}`,
 | 
					 | 
				
			||||||
        data: data
 | 
					 | 
				
			||||||
      };
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    // 加载本地文件
 | 
					 | 
				
			||||||
    importLocalFile() {
 | 
					 | 
				
			||||||
      const that = this;
 | 
					 | 
				
			||||||
      const file = this.$refs.refFile.files[0];
 | 
					 | 
				
			||||||
      const reader = new FileReader();
 | 
					 | 
				
			||||||
      reader.readAsText(file);
 | 
					 | 
				
			||||||
      reader.onload = function() {
 | 
					 | 
				
			||||||
        let xmlStr = this.result;
 | 
					 | 
				
			||||||
        that.createNewDiagram(xmlStr);
 | 
					 | 
				
			||||||
      };
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    /* ------------------------------------------------ refs methods ------------------------------------------------------ */
 | 
					 | 
				
			||||||
    downloadProcessAsXml() {
 | 
					 | 
				
			||||||
      this.downloadProcess("xml");
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    downloadProcessAsBpmn() {
 | 
					 | 
				
			||||||
      this.downloadProcess("bpmn");
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    downloadProcessAsSvg() {
 | 
					 | 
				
			||||||
      this.downloadProcess("svg");
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    processSimulation() {
 | 
					 | 
				
			||||||
      this.simulationStatus = !this.simulationStatus;
 | 
					 | 
				
			||||||
      this.simulation && this.bpmnModeler.get("toggleMode").toggleMode();
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    processRedo() {
 | 
					 | 
				
			||||||
      this.bpmnModeler.get("commandStack").redo();
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    processUndo() {
 | 
					 | 
				
			||||||
      this.bpmnModeler.get("commandStack").undo();
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    processZoomIn(zoomStep = 0.1) {
 | 
					 | 
				
			||||||
      let newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100;
 | 
					 | 
				
			||||||
      if (newZoom > 4) {
 | 
					 | 
				
			||||||
        throw new Error("[Process Designer Warn ]: The zoom ratio cannot be greater than 4");
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      this.defaultZoom = newZoom;
 | 
					 | 
				
			||||||
      this.bpmnModeler.get("canvas").zoom(this.defaultZoom);
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    processZoomOut(zoomStep = 0.1) {
 | 
					 | 
				
			||||||
      let newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100;
 | 
					 | 
				
			||||||
      if (newZoom < 0.2) {
 | 
					 | 
				
			||||||
        throw new Error("[Process Designer Warn ]: The zoom ratio cannot be less than 0.2");
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      this.defaultZoom = newZoom;
 | 
					 | 
				
			||||||
      this.bpmnModeler.get("canvas").zoom(this.defaultZoom);
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    processZoomTo(newZoom = 1) {
 | 
					 | 
				
			||||||
      if (newZoom < 0.2) {
 | 
					 | 
				
			||||||
        throw new Error("[Process Designer Warn ]: The zoom ratio cannot be less than 0.2");
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      if (newZoom > 4) {
 | 
					 | 
				
			||||||
        throw new Error("[Process Designer Warn ]: The zoom ratio cannot be greater than 4");
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      this.defaultZoom = newZoom;
 | 
					 | 
				
			||||||
      this.bpmnModeler.get("canvas").zoom(newZoom);
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    processReZoom() {
 | 
					 | 
				
			||||||
      this.defaultZoom = 1;
 | 
					 | 
				
			||||||
      this.bpmnModeler.get("canvas").zoom("fit-viewport", "auto");
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    processRestart() {
 | 
					 | 
				
			||||||
      this.recoverable = false;
 | 
					 | 
				
			||||||
      this.revocable = false;
 | 
					 | 
				
			||||||
      this.createNewDiagram(null);
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    elementsAlign(align) {
 | 
					 | 
				
			||||||
      const Align = this.bpmnModeler.get("alignElements");
 | 
					 | 
				
			||||||
      const Selection = this.bpmnModeler.get("selection");
 | 
					 | 
				
			||||||
      const SelectedElements = Selection.get();
 | 
					 | 
				
			||||||
      if (!SelectedElements || SelectedElements.length <= 1) {
 | 
					 | 
				
			||||||
        this.$message.warning("请按住 Ctrl 键选择多个元素对齐");
 | 
					 | 
				
			||||||
        return;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      this.$confirm("自动对齐可能造成图形变形,是否继续?", "警告", {
 | 
					 | 
				
			||||||
        confirmButtonText: "确定",
 | 
					 | 
				
			||||||
        cancelButtonText: "取消",
 | 
					 | 
				
			||||||
        type: "warning"
 | 
					 | 
				
			||||||
      }).then(() => Align.trigger(SelectedElements, align));
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    /*-----------------------------    方法结束     ---------------------------------*/
 | 
					 | 
				
			||||||
    previewProcessXML() {
 | 
					 | 
				
			||||||
      this.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
 | 
					 | 
				
			||||||
        this.previewResult = xml;
 | 
					 | 
				
			||||||
        this.previewType = "xml";
 | 
					 | 
				
			||||||
        this.previewModelVisible = true;
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    previewProcessJson() {
 | 
					 | 
				
			||||||
      this.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
 | 
					 | 
				
			||||||
        this.previewResult = convert.xml2json(xml, { spaces: 2 });
 | 
					 | 
				
			||||||
        this.previewType = "json";
 | 
					 | 
				
			||||||
        this.previewModelVisible = true;
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    /* ------------------------------------------------ 芋道源码 methods ------------------------------------------------------ */
 | 
					 | 
				
			||||||
    async processSave() {
 | 
					 | 
				
			||||||
      const { err, xml } = await this.bpmnModeler.saveXML();
 | 
					 | 
				
			||||||
      // 读取异常时抛出异常
 | 
					 | 
				
			||||||
      if (err) {
 | 
					 | 
				
			||||||
        this.$modal.msgError('保存模型失败,请重试!')
 | 
					 | 
				
			||||||
        return
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      // 触发 save 事件
 | 
					 | 
				
			||||||
      this.$emit('save', xml)
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    /** 高亮显示 */
 | 
					 | 
				
			||||||
    highlightedCode(previewType, previewResult) {
 | 
					 | 
				
			||||||
      const result = hljs.highlight(previewType, previewResult || "", true);
 | 
					 | 
				
			||||||
      return result.value || ' ';
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
</script>
 | 
					 | 
				
			||||||
@@ -1,487 +0,0 @@
 | 
				
			|||||||
<template>
 | 
					 | 
				
			||||||
  <div class="my-process-designer">
 | 
					 | 
				
			||||||
    <div class="my-process-designer__container">
 | 
					 | 
				
			||||||
      <div class="my-process-designer__canvas" ref="bpmn-canvas"></div>
 | 
					 | 
				
			||||||
    </div>
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
</template>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<script>
 | 
					 | 
				
			||||||
import BpmnViewer from "bpmn-js/lib/Viewer";
 | 
					 | 
				
			||||||
import DefaultEmptyXML from "./plugins/defaultEmpty";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  name: "MyProcessViewer",
 | 
					 | 
				
			||||||
  componentName: "MyProcessViewer",
 | 
					 | 
				
			||||||
  props: {
 | 
					 | 
				
			||||||
    value: {  // BPMN XML 字符串
 | 
					 | 
				
			||||||
      type: String,
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    prefix: { // 使用哪个引擎
 | 
					 | 
				
			||||||
      type: String,
 | 
					 | 
				
			||||||
      default: "camunda",
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    activityData: { // 活动的数据。传递时,可高亮流程
 | 
					 | 
				
			||||||
      type: Array,
 | 
					 | 
				
			||||||
      default: () => [],
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    processInstanceData: { // 流程实例的数据。传递时,可展示流程发起人等信息
 | 
					 | 
				
			||||||
      type: Object,
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    taskData: { // 任务实例的数据。传递时,可展示 UserTask 审核相关的信息
 | 
					 | 
				
			||||||
      type: Array,
 | 
					 | 
				
			||||||
      default: () => [],
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  data() {
 | 
					 | 
				
			||||||
    return {
 | 
					 | 
				
			||||||
      xml: '',
 | 
					 | 
				
			||||||
      activityList: [],
 | 
					 | 
				
			||||||
      processInstance: undefined,
 | 
					 | 
				
			||||||
      taskList: [],
 | 
					 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  mounted() {
 | 
					 | 
				
			||||||
    this.xml = this.value;
 | 
					 | 
				
			||||||
    this.activityList = this.activityData;
 | 
					 | 
				
			||||||
    // 初始化
 | 
					 | 
				
			||||||
    this.initBpmnModeler();
 | 
					 | 
				
			||||||
    this.createNewDiagram(this.xml);
 | 
					 | 
				
			||||||
    this.$once("hook:beforeDestroy", () => {
 | 
					 | 
				
			||||||
      if (this.bpmnModeler) this.bpmnModeler.destroy();
 | 
					 | 
				
			||||||
      this.$emit("destroy", this.bpmnModeler);
 | 
					 | 
				
			||||||
      this.bpmnModeler = null;
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
    // 初始模型的监听器
 | 
					 | 
				
			||||||
    this.initModelListeners();
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  watch: {
 | 
					 | 
				
			||||||
    value: function (newValue) { // 在 xmlString 发生变化时,重新创建,从而绘制流程图
 | 
					 | 
				
			||||||
      this.xml = newValue;
 | 
					 | 
				
			||||||
      this.createNewDiagram(this.xml);
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    activityData: function (newActivityData) {
 | 
					 | 
				
			||||||
      this.activityList = newActivityData;
 | 
					 | 
				
			||||||
      this.createNewDiagram(this.xml);
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    processInstanceData: function (newProcessInstanceData) {
 | 
					 | 
				
			||||||
      this.processInstance = newProcessInstanceData;
 | 
					 | 
				
			||||||
      this.createNewDiagram(this.xml);
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    taskData: function (newTaskListData) {
 | 
					 | 
				
			||||||
      this.taskList = newTaskListData;
 | 
					 | 
				
			||||||
      this.createNewDiagram(this.xml);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  methods: {
 | 
					 | 
				
			||||||
    initBpmnModeler() {
 | 
					 | 
				
			||||||
      if (this.bpmnModeler) return;
 | 
					 | 
				
			||||||
      this.bpmnModeler = new BpmnViewer({
 | 
					 | 
				
			||||||
        container: this.$refs["bpmn-canvas"],
 | 
					 | 
				
			||||||
        bpmnRenderer: {
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      })
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    /* 创建新的流程图 */
 | 
					 | 
				
			||||||
    async createNewDiagram(xml) {
 | 
					 | 
				
			||||||
      // 将字符串转换成图显示出来
 | 
					 | 
				
			||||||
      let newId = `Process_${new Date().getTime()}`;
 | 
					 | 
				
			||||||
      let newName = `业务流程_${new Date().getTime()}`;
 | 
					 | 
				
			||||||
      let xmlString = xml || DefaultEmptyXML(newId, newName, this.prefix);
 | 
					 | 
				
			||||||
      try {
 | 
					 | 
				
			||||||
        // console.log(this.bpmnModeler.importXML);
 | 
					 | 
				
			||||||
        let { warnings } = await this.bpmnModeler.importXML(xmlString);
 | 
					 | 
				
			||||||
        if (warnings && warnings.length) {
 | 
					 | 
				
			||||||
          warnings.forEach(warn => console.warn(warn));
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
        // 高亮流程图
 | 
					 | 
				
			||||||
        await this.highlightDiagram();
 | 
					 | 
				
			||||||
        const canvas = this.bpmnModeler.get('canvas');
 | 
					 | 
				
			||||||
        canvas.zoom("fit-viewport", "auto");
 | 
					 | 
				
			||||||
      } catch (e) {
 | 
					 | 
				
			||||||
        console.error(e);
 | 
					 | 
				
			||||||
        // console.error(`[Process Designer Warn]: ${e?.message || e}`);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    /* 高亮流程图 */
 | 
					 | 
				
			||||||
    // TODO 芋艿:如果多个 endActivity 的话,目前的逻辑可能有一定的问题。https://www.jdon.com/workflow/multi-events.html
 | 
					 | 
				
			||||||
    async highlightDiagram() {
 | 
					 | 
				
			||||||
      const activityList = this.activityList;
 | 
					 | 
				
			||||||
      if (activityList.length === 0) {
 | 
					 | 
				
			||||||
        return;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      // 参考自 https://gitee.com/tony2y/RuoYi-flowable/blob/master/ruoyi-ui/src/components/Process/index.vue#L222 实现
 | 
					 | 
				
			||||||
      // 再次基础上,增加不同审批结果的颜色等等
 | 
					 | 
				
			||||||
      let canvas = this.bpmnModeler.get('canvas');
 | 
					 | 
				
			||||||
      let todoActivity = activityList.find(m => !m.endTime) // 找到待办的任务
 | 
					 | 
				
			||||||
      let endActivity = activityList[activityList.length - 1] // 获得最后一个任务
 | 
					 | 
				
			||||||
      // debugger
 | 
					 | 
				
			||||||
      // console.log(this.bpmnModeler.getDefinitions().rootElements[0].flowElements);
 | 
					 | 
				
			||||||
      this.bpmnModeler.getDefinitions().rootElements[0].flowElements?.forEach(n => {
 | 
					 | 
				
			||||||
        let activity = activityList.find(m => m.key === n.id) // 找到对应的活动
 | 
					 | 
				
			||||||
        if (!activity) {
 | 
					 | 
				
			||||||
          return;
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
        if (n.$type === 'bpmn:UserTask') { // 用户任务
 | 
					 | 
				
			||||||
          // 处理用户任务的高亮
 | 
					 | 
				
			||||||
          const task = this.taskList.find(m => m.id === activity.taskId); // 找到活动对应的 taskId
 | 
					 | 
				
			||||||
          if (!task) {
 | 
					 | 
				
			||||||
            return;
 | 
					 | 
				
			||||||
          }
 | 
					 | 
				
			||||||
          // 高亮任务
 | 
					 | 
				
			||||||
          canvas.addMarker(n.id, this.getResultCss(task.result));
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
          // 如果非通过,就不走后面的线条了
 | 
					 | 
				
			||||||
          if (task.result !== 2) {
 | 
					 | 
				
			||||||
            return;
 | 
					 | 
				
			||||||
          }
 | 
					 | 
				
			||||||
          // 处理 outgoing 出线
 | 
					 | 
				
			||||||
          const outgoing = this.getActivityOutgoing(activity);
 | 
					 | 
				
			||||||
          outgoing?.forEach(nn => {
 | 
					 | 
				
			||||||
            // debugger
 | 
					 | 
				
			||||||
            let targetActivity = activityList.find(m => m.key === nn.targetRef.id)
 | 
					 | 
				
			||||||
            // 如果目标活动存在,则根据该活动是否结束,进行【bpmn:SequenceFlow】连线的高亮设置
 | 
					 | 
				
			||||||
            if (targetActivity) {
 | 
					 | 
				
			||||||
              canvas.addMarker(nn.id, targetActivity.endTime ? 'highlight' : 'highlight-todo');
 | 
					 | 
				
			||||||
            } else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') { // TODO 芋艿:这个流程,暂时没走到过
 | 
					 | 
				
			||||||
              canvas.addMarker(nn.id, activity.endTime ? 'highlight' : 'highlight-todo');
 | 
					 | 
				
			||||||
              canvas.addMarker(nn.targetRef.id, activity.endTime ? 'highlight' : 'highlight-todo');
 | 
					 | 
				
			||||||
            } else if (nn.targetRef.$type === 'bpmn:EndEvent') { // TODO 芋艿:这个流程,暂时没走到过
 | 
					 | 
				
			||||||
              if (!todoActivity && endActivity.key === n.id) {
 | 
					 | 
				
			||||||
                canvas.addMarker(nn.id, 'highlight');
 | 
					 | 
				
			||||||
                canvas.addMarker(nn.targetRef.id, 'highlight');
 | 
					 | 
				
			||||||
              }
 | 
					 | 
				
			||||||
              if (!activity.endTime) {
 | 
					 | 
				
			||||||
                canvas.addMarker(nn.id, 'highlight-todo');
 | 
					 | 
				
			||||||
                canvas.addMarker(nn.targetRef.id, 'highlight-todo');
 | 
					 | 
				
			||||||
              }
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
          });
 | 
					 | 
				
			||||||
        } else if (n.$type === 'bpmn:ExclusiveGateway') { // 排它网关
 | 
					 | 
				
			||||||
          // 设置【bpmn:ExclusiveGateway】排它网关的高亮
 | 
					 | 
				
			||||||
          canvas.addMarker(n.id, this.getActivityHighlightCss(activity));
 | 
					 | 
				
			||||||
          // 查找需要高亮的连线
 | 
					 | 
				
			||||||
          let matchNN = undefined;
 | 
					 | 
				
			||||||
          let matchActivity = undefined;
 | 
					 | 
				
			||||||
          n.outgoing?.forEach(nn => {
 | 
					 | 
				
			||||||
            let targetActivity = activityList.find(m => m.key === nn.targetRef.id);
 | 
					 | 
				
			||||||
            if (!targetActivity) {
 | 
					 | 
				
			||||||
              return;
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
            // 特殊判断 endEvent 类型的原因,ExclusiveGateway 可能后续连有 2 个路径:
 | 
					 | 
				
			||||||
            //  1. 一个是 UserTask => EndEvent
 | 
					 | 
				
			||||||
            //  2. 一个是 EndEvent
 | 
					 | 
				
			||||||
            // 在选择路径 1 时,其实 EndEvent 可能也存在,导致 1 和 2 都高亮,显然是不正确的。
 | 
					 | 
				
			||||||
            // 所以,在 matchActivity 为 EndEvent 时,需要进行覆盖~~
 | 
					 | 
				
			||||||
            if (!matchActivity || matchActivity.type === 'endEvent') {
 | 
					 | 
				
			||||||
              matchNN = nn;
 | 
					 | 
				
			||||||
              matchActivity = targetActivity;
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
          })
 | 
					 | 
				
			||||||
          if (matchNN && matchActivity) {
 | 
					 | 
				
			||||||
            canvas.addMarker(matchNN.id, this.getActivityHighlightCss(matchActivity));
 | 
					 | 
				
			||||||
          }
 | 
					 | 
				
			||||||
        } else if (n.$type === 'bpmn:ParallelGateway') { // 并行网关
 | 
					 | 
				
			||||||
          // 设置【bpmn:ParallelGateway】并行网关的高亮
 | 
					 | 
				
			||||||
          canvas.addMarker(n.id, this.getActivityHighlightCss(activity));
 | 
					 | 
				
			||||||
          n.outgoing?.forEach(nn => {
 | 
					 | 
				
			||||||
            // 获得连线是否有指向目标。如果有,则进行高亮
 | 
					 | 
				
			||||||
            const targetActivity = activityList.find(m => m.key === nn.targetRef.id)
 | 
					 | 
				
			||||||
            if (targetActivity) {
 | 
					 | 
				
			||||||
              canvas.addMarker(nn.id, this.getActivityHighlightCss(targetActivity)); // 高亮【bpmn:SequenceFlow】连线
 | 
					 | 
				
			||||||
              // 高亮【...】目标。其中 ... 可以是 bpm:UserTask、也可以是其它的。当然,如果是 bpm:UserTask 的话,其实不做高亮也没问题,因为上面有逻辑做了这块。
 | 
					 | 
				
			||||||
              canvas.addMarker(nn.targetRef.id, this.getActivityHighlightCss(targetActivity));
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
          })
 | 
					 | 
				
			||||||
        } else if (n.$type === 'bpmn:StartEvent') { // 开始节点
 | 
					 | 
				
			||||||
          n.outgoing?.forEach(nn => { // outgoing 例如说【bpmn:SequenceFlow】连线
 | 
					 | 
				
			||||||
            // 获得连线是否有指向目标。如果有,则进行高亮
 | 
					 | 
				
			||||||
            let targetActivity = activityList.find(m => m.key === nn.targetRef.id);
 | 
					 | 
				
			||||||
            if (targetActivity) {
 | 
					 | 
				
			||||||
              canvas.addMarker(nn.id, 'highlight'); // 高亮【bpmn:SequenceFlow】连线
 | 
					 | 
				
			||||||
              canvas.addMarker(n.id, 'highlight'); // 高亮【bpmn:StartEvent】开始节点(自己)
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
          });
 | 
					 | 
				
			||||||
        } else if (n.$type === 'bpmn:EndEvent') { // 结束节点
 | 
					 | 
				
			||||||
          if (!this.processInstance || this.processInstance.result === 1) {
 | 
					 | 
				
			||||||
            return;
 | 
					 | 
				
			||||||
          }
 | 
					 | 
				
			||||||
          canvas.addMarker(n.id, this.getResultCss(this.processInstance.result));
 | 
					 | 
				
			||||||
        } else if (n.$type === 'bpmn:ServiceTask'){ //服务任务
 | 
					 | 
				
			||||||
          if(activity.startTime>0 && activity.endTime===0){//进入执行,标识进行色
 | 
					 | 
				
			||||||
            canvas.addMarker(n.id, this.getResultCss(1));
 | 
					 | 
				
			||||||
          }
 | 
					 | 
				
			||||||
          if(activity.endTime>0){// 执行完成,节点标识完成色, 所有outgoing标识完成色。
 | 
					 | 
				
			||||||
            canvas.addMarker(n.id, this.getResultCss(2));
 | 
					 | 
				
			||||||
            const outgoing = this.getActivityOutgoing(activity)
 | 
					 | 
				
			||||||
            outgoing?.forEach(out=>{
 | 
					 | 
				
			||||||
              canvas.addMarker(out.id,this.getResultCss(2))
 | 
					 | 
				
			||||||
            })
 | 
					 | 
				
			||||||
          }
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      })
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    getActivityHighlightCss(activity) {
 | 
					 | 
				
			||||||
      return activity.endTime ? 'highlight' : 'highlight-todo';
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    getResultCss(result) {
 | 
					 | 
				
			||||||
      if (result === 1) { // 审批中
 | 
					 | 
				
			||||||
        return 'highlight-todo';
 | 
					 | 
				
			||||||
      } else if (result === 2) { // 已通过
 | 
					 | 
				
			||||||
        return 'highlight';
 | 
					 | 
				
			||||||
      } else if (result === 3) { // 不通过
 | 
					 | 
				
			||||||
        return 'highlight-reject';
 | 
					 | 
				
			||||||
      } else if (result === 4) { // 已取消
 | 
					 | 
				
			||||||
        return 'highlight-cancel';
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      return '';
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    getActivityOutgoing(activity) {
 | 
					 | 
				
			||||||
      // 如果有 outgoing,则直接使用它
 | 
					 | 
				
			||||||
      if (activity.outgoing && activity.outgoing.length > 0) {
 | 
					 | 
				
			||||||
        return activity.outgoing;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      // 如果没有,则遍历获得起点为它的【bpmn:SequenceFlow】节点们。原因是:bpmn-js 的 UserTask 拿不到 outgoing
 | 
					 | 
				
			||||||
      const flowElements = this.bpmnModeler.getDefinitions().rootElements[0].flowElements;
 | 
					 | 
				
			||||||
      const outgoing = [];
 | 
					 | 
				
			||||||
      flowElements.forEach(item => {
 | 
					 | 
				
			||||||
        if (item.$type !== 'bpmn:SequenceFlow') {
 | 
					 | 
				
			||||||
          return;
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
        if (item.sourceRef.id === activity.key) {
 | 
					 | 
				
			||||||
          outgoing.push(item);
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
      return outgoing;
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    initModelListeners() {
 | 
					 | 
				
			||||||
      const EventBus = this.bpmnModeler.get("eventBus");
 | 
					 | 
				
			||||||
      const that = this;
 | 
					 | 
				
			||||||
      // 注册需要的监听事件
 | 
					 | 
				
			||||||
      EventBus.on('element.hover', function(eventObj) {
 | 
					 | 
				
			||||||
        let element = eventObj ? eventObj.element : null;
 | 
					 | 
				
			||||||
        that.elementHover(element);
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
      EventBus.on('element.out', function(eventObj) {
 | 
					 | 
				
			||||||
        let element = eventObj ? eventObj.element : null;
 | 
					 | 
				
			||||||
        that.elementOut(element);
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 流程图的元素被 hover
 | 
					 | 
				
			||||||
    elementHover(element) {
 | 
					 | 
				
			||||||
      this.element = element;
 | 
					 | 
				
			||||||
      !this.elementOverlayIds && (this.elementOverlayIds = {});
 | 
					 | 
				
			||||||
      !this.overlays && (this.overlays = this.bpmnModeler.get("overlays"));
 | 
					 | 
				
			||||||
      // 展示信息
 | 
					 | 
				
			||||||
      const activity = this.activityList.find(m => m.key === element.id);
 | 
					 | 
				
			||||||
      if (!activity) {
 | 
					 | 
				
			||||||
        return;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      if (!this.elementOverlayIds[element.id] && element.type !== "bpmn:Process") {
 | 
					 | 
				
			||||||
        let html = `<div class="element-overlays">
 | 
					 | 
				
			||||||
            <p>Elemet id: ${element.id}</p>
 | 
					 | 
				
			||||||
            <p>Elemet type: ${element.type}</p>
 | 
					 | 
				
			||||||
          </div>`; // 默认值
 | 
					 | 
				
			||||||
        if (element.type === 'bpmn:StartEvent' && this.processInstance) {
 | 
					 | 
				
			||||||
          html = `<p>发起人:${this.processInstance.startUser.nickname}</p>
 | 
					 | 
				
			||||||
                  <p>部门:${this.processInstance.startUser.deptName}</p>
 | 
					 | 
				
			||||||
                  <p>创建时间:${this.parseTime(this.processInstance.createTime)}`;
 | 
					 | 
				
			||||||
        } else if (element.type === 'bpmn:UserTask') {
 | 
					 | 
				
			||||||
          // debugger
 | 
					 | 
				
			||||||
          let task = this.taskList.find(m => m.id === activity.taskId); // 找到活动对应的 taskId
 | 
					 | 
				
			||||||
          if (!task) {
 | 
					 | 
				
			||||||
            return;
 | 
					 | 
				
			||||||
          }
 | 
					 | 
				
			||||||
          html = `<p>审批人:${task.assigneeUser.nickname}</p>
 | 
					 | 
				
			||||||
                  <p>部门:${task.assigneeUser.deptName}</p>
 | 
					 | 
				
			||||||
                  <p>结果:${this.getDictDataLabel(this.DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT, task.result)}</p>
 | 
					 | 
				
			||||||
                  <p>创建时间:${this.parseTime(task.createTime)}</p>`;
 | 
					 | 
				
			||||||
          if (task.endTime) {
 | 
					 | 
				
			||||||
            html += `<p>结束时间:${this.parseTime(task.endTime)}</p>`
 | 
					 | 
				
			||||||
          }
 | 
					 | 
				
			||||||
          if (task.reason) {
 | 
					 | 
				
			||||||
            html += `<p>审批建议:${task.reason}</p>`
 | 
					 | 
				
			||||||
          }
 | 
					 | 
				
			||||||
        } else if (element.type === 'bpmn:ServiceTask' && this.processInstance) {
 | 
					 | 
				
			||||||
          if(activity.startTime>0){
 | 
					 | 
				
			||||||
            html = `<p>创建时间:${this.parseTime(activity.startTime)}</p>`;
 | 
					 | 
				
			||||||
          }
 | 
					 | 
				
			||||||
          if(activity.endTime>0){
 | 
					 | 
				
			||||||
            html += `<p>结束时间:${this.parseTime(activity.endTime)}</p>`
 | 
					 | 
				
			||||||
          }
 | 
					 | 
				
			||||||
          console.log(html)
 | 
					 | 
				
			||||||
        } else if (element.type === 'bpmn:EndEvent' && this.processInstance) {
 | 
					 | 
				
			||||||
          html = `<p>结果:${this.getDictDataLabel(this.DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT, this.processInstance.result)}</p>`;
 | 
					 | 
				
			||||||
          if (this.processInstance.endTime) {
 | 
					 | 
				
			||||||
            html += `<p>结束时间:${this.parseTime(this.processInstance.endTime)}</p>`
 | 
					 | 
				
			||||||
          }
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
        this.elementOverlayIds[element.id] = this.overlays.add(element, {
 | 
					 | 
				
			||||||
          position: { left: 0, bottom: 0 },
 | 
					 | 
				
			||||||
          html: `<div class="element-overlays">${html}</div>`
 | 
					 | 
				
			||||||
        });
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 流程图的元素被 out
 | 
					 | 
				
			||||||
    elementOut(element) {
 | 
					 | 
				
			||||||
      this.overlays.remove({ element });
 | 
					 | 
				
			||||||
      this.elementOverlayIds[element.id] = null;
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
</script>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<style>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
/** 处理中 */
 | 
					 | 
				
			||||||
.highlight-todo.djs-connection > .djs-visual > path {
 | 
					 | 
				
			||||||
  stroke: #1890ff !important;
 | 
					 | 
				
			||||||
  stroke-dasharray: 4px !important;
 | 
					 | 
				
			||||||
  fill-opacity: 0.2 !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
 | 
					 | 
				
			||||||
  fill: #1890ff !important;
 | 
					 | 
				
			||||||
  stroke: #1890ff !important;
 | 
					 | 
				
			||||||
  stroke-dasharray: 4px !important;
 | 
					 | 
				
			||||||
  fill-opacity: 0.2 !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
:deep(.highlight-todo.djs-connection > .djs-visual > path) {
 | 
					 | 
				
			||||||
  stroke: #1890ff !important;
 | 
					 | 
				
			||||||
  stroke-dasharray: 4px !important;
 | 
					 | 
				
			||||||
  fill-opacity: 0.2 !important;
 | 
					 | 
				
			||||||
  marker-end: url(#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
:deep(.highlight-todo.djs-shape .djs-visual > :nth-child(1)) {
 | 
					 | 
				
			||||||
  fill: #1890ff !important;
 | 
					 | 
				
			||||||
  stroke: #1890ff !important;
 | 
					 | 
				
			||||||
  stroke-dasharray: 4px !important;
 | 
					 | 
				
			||||||
  fill-opacity: 0.2 !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
/** 通过 */
 | 
					 | 
				
			||||||
.highlight.djs-shape .djs-visual > :nth-child(1) {
 | 
					 | 
				
			||||||
  fill: green !important;
 | 
					 | 
				
			||||||
  stroke: green !important;
 | 
					 | 
				
			||||||
  fill-opacity: 0.2 !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.highlight.djs-shape .djs-visual > :nth-child(2) {
 | 
					 | 
				
			||||||
  fill: green !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.highlight.djs-shape .djs-visual > path {
 | 
					 | 
				
			||||||
  fill: green !important;
 | 
					 | 
				
			||||||
  fill-opacity: 0.2 !important;
 | 
					 | 
				
			||||||
  stroke: green !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.highlight.djs-connection > .djs-visual > path {
 | 
					 | 
				
			||||||
  stroke: green !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
 | 
					 | 
				
			||||||
  fill: green !important; /* color elements as green */
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
:deep(.highlight.djs-shape .djs-visual > :nth-child(1)) {
 | 
					 | 
				
			||||||
  fill: green !important;
 | 
					 | 
				
			||||||
  stroke: green !important;
 | 
					 | 
				
			||||||
  fill-opacity: 0.2 !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
:deep(.highlight.djs-shape .djs-visual > :nth-child(2)) {
 | 
					 | 
				
			||||||
  fill: green !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
:deep(.highlight.djs-shape .djs-visual > path) {
 | 
					 | 
				
			||||||
  fill: green !important;
 | 
					 | 
				
			||||||
  fill-opacity: 0.2 !important;
 | 
					 | 
				
			||||||
  stroke: green !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
:deep(.highlight.djs-connection > .djs-visual > path) {
 | 
					 | 
				
			||||||
  stroke: green !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
/** 不通过 */
 | 
					 | 
				
			||||||
.highlight-reject.djs-shape .djs-visual > :nth-child(1) {
 | 
					 | 
				
			||||||
  fill: red !important;
 | 
					 | 
				
			||||||
  stroke: red !important;
 | 
					 | 
				
			||||||
  fill-opacity: 0.2 !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.highlight-reject.djs-shape .djs-visual > :nth-child(2) {
 | 
					 | 
				
			||||||
  fill: red !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.highlight-reject.djs-shape .djs-visual > path {
 | 
					 | 
				
			||||||
  fill: red !important;
 | 
					 | 
				
			||||||
  fill-opacity: 0.2 !important;
 | 
					 | 
				
			||||||
  stroke: red !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.highlight-reject.djs-connection > .djs-visual > path {
 | 
					 | 
				
			||||||
  stroke: red !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.highlight-reject:not(.djs-connection) .djs-visual > :nth-child(1) {
 | 
					 | 
				
			||||||
  fill: red !important; /* color elements as green */
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(1)) {
 | 
					 | 
				
			||||||
  fill: red !important;
 | 
					 | 
				
			||||||
  stroke: red !important;
 | 
					 | 
				
			||||||
  fill-opacity: 0.2 !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(2)) {
 | 
					 | 
				
			||||||
  fill: red !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
:deep(.highlight-reject.djs-shape .djs-visual > path) {
 | 
					 | 
				
			||||||
  fill: red !important;
 | 
					 | 
				
			||||||
  fill-opacity: 0.2 !important;
 | 
					 | 
				
			||||||
  stroke: red !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
:deep(.highlight-reject.djs-connection > .djs-visual > path) {
 | 
					 | 
				
			||||||
  stroke: red !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
/** 已取消 */
 | 
					 | 
				
			||||||
.highlight-cancel.djs-shape .djs-visual > :nth-child(1) {
 | 
					 | 
				
			||||||
  fill: grey !important;
 | 
					 | 
				
			||||||
  stroke: grey !important;
 | 
					 | 
				
			||||||
  fill-opacity: 0.2 !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.highlight-cancel.djs-shape .djs-visual > :nth-child(2) {
 | 
					 | 
				
			||||||
  fill: grey !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.highlight-cancel.djs-shape .djs-visual > path {
 | 
					 | 
				
			||||||
  fill: grey !important;
 | 
					 | 
				
			||||||
  fill-opacity: 0.2 !important;
 | 
					 | 
				
			||||||
  stroke: grey !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.highlight-cancel.djs-connection > .djs-visual > path {
 | 
					 | 
				
			||||||
  stroke: grey !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.highlight-cancel:not(.djs-connection) .djs-visual > :nth-child(1) {
 | 
					 | 
				
			||||||
  fill: grey !important; /* color elements as green */
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(1)) {
 | 
					 | 
				
			||||||
  fill: grey !important;
 | 
					 | 
				
			||||||
  stroke: grey !important;
 | 
					 | 
				
			||||||
  fill-opacity: 0.2 !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(2)) {
 | 
					 | 
				
			||||||
  fill: grey !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
:deep(.highlight-cancel.djs-shape .djs-visual > path) {
 | 
					 | 
				
			||||||
  fill: grey !important;
 | 
					 | 
				
			||||||
  fill-opacity: 0.2 !important;
 | 
					 | 
				
			||||||
  stroke: grey !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
:deep(.highlight-cancel.djs-connection > .djs-visual > path) {
 | 
					 | 
				
			||||||
  stroke: grey !important;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.element-overlays {
 | 
					 | 
				
			||||||
  box-sizing: border-box;
 | 
					 | 
				
			||||||
  padding: 8px;
 | 
					 | 
				
			||||||
  background: rgba(0, 0, 0, 0.6);
 | 
					 | 
				
			||||||
  border-radius: 4px;
 | 
					 | 
				
			||||||
  color: #fafafa;
 | 
					 | 
				
			||||||
  width: 200px;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
</style>
 | 
					 | 
				
			||||||
@@ -1,8 +0,0 @@
 | 
				
			|||||||
import MyProcessDesigner from "./ProcessDesigner.vue";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
MyProcessDesigner.install = function(Vue) {
 | 
					 | 
				
			||||||
  Vue.component(MyProcessDesigner.name, MyProcessDesigner);
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
// 流程图的设计器,可编辑
 | 
					 | 
				
			||||||
export default MyProcessDesigner;
 | 
					 | 
				
			||||||
@@ -1,8 +0,0 @@
 | 
				
			|||||||
import MyProcessViewer from "./ProcessViewer.vue";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
MyProcessViewer.install = function(Vue) {
 | 
					 | 
				
			||||||
  Vue.component(MyProcessViewer.name, MyProcessViewer);
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
// 流程图的查看器,不可编辑
 | 
					 | 
				
			||||||
export default MyProcessViewer;
 | 
					 | 
				
			||||||
@@ -1,390 +0,0 @@
 | 
				
			|||||||
import { assign, forEach, isArray } from "min-dash";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
import { is } from "bpmn-js/lib/util/ModelUtil";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
import { isExpanded, isEventSubProcess } from "bpmn-js/lib/util/DiUtil";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
import { isAny } from "bpmn-js/lib/features/modeling/util/ModelingUtil";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
import { getChildLanes } from "bpmn-js/lib/features/modeling/util/LaneUtil";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
import { hasPrimaryModifier } from "diagram-js/lib/util/Mouse";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
/**
 | 
					 | 
				
			||||||
 * A provider for BPMN 2.0 elements context pad
 | 
					 | 
				
			||||||
 */
 | 
					 | 
				
			||||||
export default function ContextPadProvider(
 | 
					 | 
				
			||||||
  config,
 | 
					 | 
				
			||||||
  injector,
 | 
					 | 
				
			||||||
  eventBus,
 | 
					 | 
				
			||||||
  contextPad,
 | 
					 | 
				
			||||||
  modeling,
 | 
					 | 
				
			||||||
  elementFactory,
 | 
					 | 
				
			||||||
  connect,
 | 
					 | 
				
			||||||
  create,
 | 
					 | 
				
			||||||
  popupMenu,
 | 
					 | 
				
			||||||
  canvas,
 | 
					 | 
				
			||||||
  rules,
 | 
					 | 
				
			||||||
  translate,
 | 
					 | 
				
			||||||
  elementRegistry
 | 
					 | 
				
			||||||
) {
 | 
					 | 
				
			||||||
  config = config || {};
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  contextPad.registerProvider(this);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  this._contextPad = contextPad;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  this._modeling = modeling;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  this._elementFactory = elementFactory;
 | 
					 | 
				
			||||||
  this._connect = connect;
 | 
					 | 
				
			||||||
  this._create = create;
 | 
					 | 
				
			||||||
  this._popupMenu = popupMenu;
 | 
					 | 
				
			||||||
  this._canvas = canvas;
 | 
					 | 
				
			||||||
  this._rules = rules;
 | 
					 | 
				
			||||||
  this._translate = translate;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (config.autoPlace !== false) {
 | 
					 | 
				
			||||||
    this._autoPlace = injector.get("autoPlace", false);
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  eventBus.on("create.end", 250, function(event) {
 | 
					 | 
				
			||||||
    const context = event.context,
 | 
					 | 
				
			||||||
      shape = context.shape
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    if (!hasPrimaryModifier(event) || !contextPad.isOpen(shape)) {
 | 
					 | 
				
			||||||
      return;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    const entries = contextPad.getEntries(shape)
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    if (entries.replace) {
 | 
					 | 
				
			||||||
      entries.replace.action.click(event, shape);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
ContextPadProvider.$inject = [
 | 
					 | 
				
			||||||
  "config.contextPad",
 | 
					 | 
				
			||||||
  "injector",
 | 
					 | 
				
			||||||
  "eventBus",
 | 
					 | 
				
			||||||
  "contextPad",
 | 
					 | 
				
			||||||
  "modeling",
 | 
					 | 
				
			||||||
  "elementFactory",
 | 
					 | 
				
			||||||
  "connect",
 | 
					 | 
				
			||||||
  "create",
 | 
					 | 
				
			||||||
  "popupMenu",
 | 
					 | 
				
			||||||
  "canvas",
 | 
					 | 
				
			||||||
  "rules",
 | 
					 | 
				
			||||||
  "translate",
 | 
					 | 
				
			||||||
  "elementRegistry"
 | 
					 | 
				
			||||||
];
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
ContextPadProvider.prototype.getContextPadEntries = function(element) {
 | 
					 | 
				
			||||||
  const contextPad = this._contextPad,
 | 
					 | 
				
			||||||
    modeling = this._modeling,
 | 
					 | 
				
			||||||
    elementFactory = this._elementFactory,
 | 
					 | 
				
			||||||
    connect = this._connect,
 | 
					 | 
				
			||||||
    create = this._create,
 | 
					 | 
				
			||||||
    popupMenu = this._popupMenu,
 | 
					 | 
				
			||||||
    canvas = this._canvas,
 | 
					 | 
				
			||||||
    rules = this._rules,
 | 
					 | 
				
			||||||
    autoPlace = this._autoPlace,
 | 
					 | 
				
			||||||
    translate = this._translate
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  const actions = {}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (element.type === "label") {
 | 
					 | 
				
			||||||
    return actions;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  const businessObject = element.businessObject
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  function startConnect(event, element) {
 | 
					 | 
				
			||||||
    connect.start(event, element);
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  function removeElement() {
 | 
					 | 
				
			||||||
    modeling.removeElements([element]);
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  function getReplaceMenuPosition(element) {
 | 
					 | 
				
			||||||
    const Y_OFFSET = 5
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    const diagramContainer = canvas.getContainer(),
 | 
					 | 
				
			||||||
      pad = contextPad.getPad(element).html
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    const diagramRect = diagramContainer.getBoundingClientRect(),
 | 
					 | 
				
			||||||
      padRect = pad.getBoundingClientRect()
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    const top = padRect.top - diagramRect.top
 | 
					 | 
				
			||||||
    const left = padRect.left - diagramRect.left
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    const pos = {
 | 
					 | 
				
			||||||
      x: left,
 | 
					 | 
				
			||||||
      y: top + padRect.height + Y_OFFSET
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    return pos;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  /**
 | 
					 | 
				
			||||||
   * Create an append action
 | 
					 | 
				
			||||||
   *
 | 
					 | 
				
			||||||
   * @param {string} type
 | 
					 | 
				
			||||||
   * @param {string} className
 | 
					 | 
				
			||||||
   * @param {string} [title]
 | 
					 | 
				
			||||||
   * @param {Object} [options]
 | 
					 | 
				
			||||||
   *
 | 
					 | 
				
			||||||
   * @return {Object} descriptor
 | 
					 | 
				
			||||||
   */
 | 
					 | 
				
			||||||
  function appendAction(type, className, title, options) {
 | 
					 | 
				
			||||||
    if (typeof title !== "string") {
 | 
					 | 
				
			||||||
      options = title;
 | 
					 | 
				
			||||||
      title = translate("Append {type}", { type: type.replace(/^bpmn:/, "") });
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    function appendStart(event, element) {
 | 
					 | 
				
			||||||
      const shape = elementFactory.createShape(assign({ type: type }, options))
 | 
					 | 
				
			||||||
      create.start(event, shape, {
 | 
					 | 
				
			||||||
        source: element
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    const append = autoPlace
 | 
					 | 
				
			||||||
      ? function(event, element) {
 | 
					 | 
				
			||||||
        const shape = elementFactory.createShape(assign({ type: type }, options))
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        autoPlace.append(element, shape)
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      : appendStart
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    return {
 | 
					 | 
				
			||||||
      group: "model",
 | 
					 | 
				
			||||||
      className: className,
 | 
					 | 
				
			||||||
      title: title,
 | 
					 | 
				
			||||||
      action: {
 | 
					 | 
				
			||||||
        dragstart: appendStart,
 | 
					 | 
				
			||||||
        click: append
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  function splitLaneHandler(count) {
 | 
					 | 
				
			||||||
    return function(event, element) {
 | 
					 | 
				
			||||||
      // actual split
 | 
					 | 
				
			||||||
      modeling.splitLane(element, count);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      // refresh context pad after split to
 | 
					 | 
				
			||||||
      // get rid of split icons
 | 
					 | 
				
			||||||
      contextPad.open(element, true);
 | 
					 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (isAny(businessObject, ["bpmn:Lane", "bpmn:Participant"]) && isExpanded(businessObject)) {
 | 
					 | 
				
			||||||
    const childLanes = getChildLanes(element)
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    assign(actions, {
 | 
					 | 
				
			||||||
      "lane-insert-above": {
 | 
					 | 
				
			||||||
        group: "lane-insert-above",
 | 
					 | 
				
			||||||
        className: "bpmn-icon-lane-insert-above",
 | 
					 | 
				
			||||||
        title: translate("Add Lane above"),
 | 
					 | 
				
			||||||
        action: {
 | 
					 | 
				
			||||||
          click: function(event, element) {
 | 
					 | 
				
			||||||
            modeling.addLane(element, "top");
 | 
					 | 
				
			||||||
          }
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    if (childLanes.length < 2) {
 | 
					 | 
				
			||||||
      if (element.height >= 120) {
 | 
					 | 
				
			||||||
        assign(actions, {
 | 
					 | 
				
			||||||
          "lane-divide-two": {
 | 
					 | 
				
			||||||
            group: "lane-divide",
 | 
					 | 
				
			||||||
            className: "bpmn-icon-lane-divide-two",
 | 
					 | 
				
			||||||
            title: translate("Divide into two Lanes"),
 | 
					 | 
				
			||||||
            action: {
 | 
					 | 
				
			||||||
              click: splitLaneHandler(2)
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
          }
 | 
					 | 
				
			||||||
        });
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      if (element.height >= 180) {
 | 
					 | 
				
			||||||
        assign(actions, {
 | 
					 | 
				
			||||||
          "lane-divide-three": {
 | 
					 | 
				
			||||||
            group: "lane-divide",
 | 
					 | 
				
			||||||
            className: "bpmn-icon-lane-divide-three",
 | 
					 | 
				
			||||||
            title: translate("Divide into three Lanes"),
 | 
					 | 
				
			||||||
            action: {
 | 
					 | 
				
			||||||
              click: splitLaneHandler(3)
 | 
					 | 
				
			||||||
            }
 | 
					 | 
				
			||||||
          }
 | 
					 | 
				
			||||||
        });
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    assign(actions, {
 | 
					 | 
				
			||||||
      "lane-insert-below": {
 | 
					 | 
				
			||||||
        group: "lane-insert-below",
 | 
					 | 
				
			||||||
        className: "bpmn-icon-lane-insert-below",
 | 
					 | 
				
			||||||
        title: translate("Add Lane below"),
 | 
					 | 
				
			||||||
        action: {
 | 
					 | 
				
			||||||
          click: function(event, element) {
 | 
					 | 
				
			||||||
            modeling.addLane(element, "bottom");
 | 
					 | 
				
			||||||
          }
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (is(businessObject, "bpmn:FlowNode")) {
 | 
					 | 
				
			||||||
    if (is(businessObject, "bpmn:EventBasedGateway")) {
 | 
					 | 
				
			||||||
      assign(actions, {
 | 
					 | 
				
			||||||
        "append.receive-task": appendAction("bpmn:ReceiveTask", "bpmn-icon-receive-task", translate("Append ReceiveTask")),
 | 
					 | 
				
			||||||
        "append.message-intermediate-event": appendAction(
 | 
					 | 
				
			||||||
          "bpmn:IntermediateCatchEvent",
 | 
					 | 
				
			||||||
          "bpmn-icon-intermediate-event-catch-message",
 | 
					 | 
				
			||||||
          translate("Append MessageIntermediateCatchEvent"),
 | 
					 | 
				
			||||||
          { eventDefinitionType: "bpmn:MessageEventDefinition" }
 | 
					 | 
				
			||||||
        ),
 | 
					 | 
				
			||||||
        "append.timer-intermediate-event": appendAction(
 | 
					 | 
				
			||||||
          "bpmn:IntermediateCatchEvent",
 | 
					 | 
				
			||||||
          "bpmn-icon-intermediate-event-catch-timer",
 | 
					 | 
				
			||||||
          translate("Append TimerIntermediateCatchEvent"),
 | 
					 | 
				
			||||||
          { eventDefinitionType: "bpmn:TimerEventDefinition" }
 | 
					 | 
				
			||||||
        ),
 | 
					 | 
				
			||||||
        "append.condition-intermediate-event": appendAction(
 | 
					 | 
				
			||||||
          "bpmn:IntermediateCatchEvent",
 | 
					 | 
				
			||||||
          "bpmn-icon-intermediate-event-catch-condition",
 | 
					 | 
				
			||||||
          translate("Append ConditionIntermediateCatchEvent"),
 | 
					 | 
				
			||||||
          { eventDefinitionType: "bpmn:ConditionalEventDefinition" }
 | 
					 | 
				
			||||||
        ),
 | 
					 | 
				
			||||||
        "append.signal-intermediate-event": appendAction(
 | 
					 | 
				
			||||||
          "bpmn:IntermediateCatchEvent",
 | 
					 | 
				
			||||||
          "bpmn-icon-intermediate-event-catch-signal",
 | 
					 | 
				
			||||||
          translate("Append SignalIntermediateCatchEvent"),
 | 
					 | 
				
			||||||
          { eventDefinitionType: "bpmn:SignalEventDefinition" }
 | 
					 | 
				
			||||||
        )
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    } else if (isEventType(businessObject, "bpmn:BoundaryEvent", "bpmn:CompensateEventDefinition")) {
 | 
					 | 
				
			||||||
      assign(actions, {
 | 
					 | 
				
			||||||
        "append.compensation-activity": appendAction("bpmn:Task", "bpmn-icon-task", translate("Append compensation activity"), {
 | 
					 | 
				
			||||||
          isForCompensation: true
 | 
					 | 
				
			||||||
        })
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    } else if (
 | 
					 | 
				
			||||||
      !is(businessObject, "bpmn:EndEvent") &&
 | 
					 | 
				
			||||||
      !businessObject.isForCompensation &&
 | 
					 | 
				
			||||||
      !isEventType(businessObject, "bpmn:IntermediateThrowEvent", "bpmn:LinkEventDefinition") &&
 | 
					 | 
				
			||||||
      !isEventSubProcess(businessObject)
 | 
					 | 
				
			||||||
    ) {
 | 
					 | 
				
			||||||
      assign(actions, {
 | 
					 | 
				
			||||||
        "append.end-event": appendAction("bpmn:EndEvent", "bpmn-icon-end-event-none", translate("Append EndEvent")),
 | 
					 | 
				
			||||||
        "append.gateway": appendAction("bpmn:ExclusiveGateway", "bpmn-icon-gateway-none", translate("Append Gateway")),
 | 
					 | 
				
			||||||
        "append.append-task": appendAction("bpmn:UserTask", "bpmn-icon-user-task", translate("Append Task")),
 | 
					 | 
				
			||||||
        "append.intermediate-event": appendAction(
 | 
					 | 
				
			||||||
          "bpmn:IntermediateThrowEvent",
 | 
					 | 
				
			||||||
          "bpmn-icon-intermediate-event-none",
 | 
					 | 
				
			||||||
          translate("Append Intermediate/Boundary Event")
 | 
					 | 
				
			||||||
        )
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (!popupMenu.isEmpty(element, "bpmn-replace")) {
 | 
					 | 
				
			||||||
    // Replace menu entry
 | 
					 | 
				
			||||||
    assign(actions, {
 | 
					 | 
				
			||||||
      replace: {
 | 
					 | 
				
			||||||
        group: "edit",
 | 
					 | 
				
			||||||
        className: "bpmn-icon-screw-wrench",
 | 
					 | 
				
			||||||
        title: translate("Change type"),
 | 
					 | 
				
			||||||
        action: {
 | 
					 | 
				
			||||||
          click: function(event, element) {
 | 
					 | 
				
			||||||
            const position = assign(getReplaceMenuPosition(element), {
 | 
					 | 
				
			||||||
              cursor: { x: event.x, y: event.y }
 | 
					 | 
				
			||||||
            })
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
            popupMenu.open(element, "bpmn-replace", position);
 | 
					 | 
				
			||||||
          }
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (isAny(businessObject, ["bpmn:FlowNode", "bpmn:InteractionNode", "bpmn:DataObjectReference", "bpmn:DataStoreReference"])) {
 | 
					 | 
				
			||||||
    assign(actions, {
 | 
					 | 
				
			||||||
      "append.text-annotation": appendAction("bpmn:TextAnnotation", "bpmn-icon-text-annotation"),
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      connect: {
 | 
					 | 
				
			||||||
        group: "connect",
 | 
					 | 
				
			||||||
        className: "bpmn-icon-connection-multi",
 | 
					 | 
				
			||||||
        title: translate("Connect using " + (businessObject.isForCompensation ? "" : "Sequence/MessageFlow or ") + "Association"),
 | 
					 | 
				
			||||||
        action: {
 | 
					 | 
				
			||||||
          click: startConnect,
 | 
					 | 
				
			||||||
          dragstart: startConnect
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (isAny(businessObject, ["bpmn:DataObjectReference", "bpmn:DataStoreReference"])) {
 | 
					 | 
				
			||||||
    assign(actions, {
 | 
					 | 
				
			||||||
      connect: {
 | 
					 | 
				
			||||||
        group: "connect",
 | 
					 | 
				
			||||||
        className: "bpmn-icon-connection-multi",
 | 
					 | 
				
			||||||
        title: translate("Connect using DataInputAssociation"),
 | 
					 | 
				
			||||||
        action: {
 | 
					 | 
				
			||||||
          click: startConnect,
 | 
					 | 
				
			||||||
          dragstart: startConnect
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (is(businessObject, "bpmn:Group")) {
 | 
					 | 
				
			||||||
    assign(actions, {
 | 
					 | 
				
			||||||
      "append.text-annotation": appendAction("bpmn:TextAnnotation", "bpmn-icon-text-annotation")
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  // delete element entry, only show if allowed by rules
 | 
					 | 
				
			||||||
  let deleteAllowed = rules.allowed('elements.delete', { elements: [element] })
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (isArray(deleteAllowed)) {
 | 
					 | 
				
			||||||
    // was the element returned as a deletion candidate?
 | 
					 | 
				
			||||||
    deleteAllowed = deleteAllowed[0] === element;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (deleteAllowed) {
 | 
					 | 
				
			||||||
    assign(actions, {
 | 
					 | 
				
			||||||
      delete: {
 | 
					 | 
				
			||||||
        group: "edit",
 | 
					 | 
				
			||||||
        className: "bpmn-icon-trash",
 | 
					 | 
				
			||||||
        title: translate("Remove"),
 | 
					 | 
				
			||||||
        action: {
 | 
					 | 
				
			||||||
          click: removeElement
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  return actions;
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
// helpers /////////
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function isEventType(eventBo, type, definition) {
 | 
					 | 
				
			||||||
  const isType = eventBo.$instanceOf(type)
 | 
					 | 
				
			||||||
  let isDefinition = false
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  const definitions = eventBo.eventDefinitions || []
 | 
					 | 
				
			||||||
  forEach(definitions, function(def) {
 | 
					 | 
				
			||||||
    if (def.$type === definition) {
 | 
					 | 
				
			||||||
      isDefinition = true;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  return isType && isDefinition;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
@@ -1,6 +0,0 @@
 | 
				
			|||||||
import CustomContextPadProvider from "./contentPadProvider";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  __init__: ["contextPadProvider"],
 | 
					 | 
				
			||||||
  contextPadProvider: ["type", CustomContextPadProvider]
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
@@ -1,24 +0,0 @@
 | 
				
			|||||||
export default (key, name, type) => {
 | 
					 | 
				
			||||||
  if (!type) type = "camunda";
 | 
					 | 
				
			||||||
  const TYPE_TARGET = {
 | 
					 | 
				
			||||||
    activiti: "http://activiti.org/bpmn",
 | 
					 | 
				
			||||||
    camunda: "http://bpmn.io/schema/bpmn",
 | 
					 | 
				
			||||||
    flowable: "http://flowable.org/bpmn"
 | 
					 | 
				
			||||||
  };
 | 
					 | 
				
			||||||
  return `<?xml version="1.0" encoding="UTF-8"?>
 | 
					 | 
				
			||||||
<bpmn2:definitions 
 | 
					 | 
				
			||||||
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 | 
					 | 
				
			||||||
  xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"
 | 
					 | 
				
			||||||
  xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
 | 
					 | 
				
			||||||
  xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
 | 
					 | 
				
			||||||
  xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
 | 
					 | 
				
			||||||
  id="diagram_${key}"
 | 
					 | 
				
			||||||
  targetNamespace="${TYPE_TARGET[type]}">
 | 
					 | 
				
			||||||
  <bpmn2:process id="${key}" name="${name}" isExecutable="true">
 | 
					 | 
				
			||||||
  </bpmn2:process>
 | 
					 | 
				
			||||||
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
 | 
					 | 
				
			||||||
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="${key}">
 | 
					 | 
				
			||||||
    </bpmndi:BPMNPlane>
 | 
					 | 
				
			||||||
  </bpmndi:BPMNDiagram>
 | 
					 | 
				
			||||||
</bpmn2:definitions>`;
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
@@ -1,74 +0,0 @@
 | 
				
			|||||||
"use strict";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
const some = require('min-dash').some
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
const ALLOWED_TYPES = {
 | 
					 | 
				
			||||||
  FailedJobRetryTimeCycle: ['bpmn:StartEvent', 'bpmn:BoundaryEvent', 'bpmn:IntermediateCatchEvent', 'bpmn:Activity'],
 | 
					 | 
				
			||||||
  Connector: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
 | 
					 | 
				
			||||||
  Field: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent']
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function is(element, type) {
 | 
					 | 
				
			||||||
  return element && typeof element.$instanceOf === "function" && element.$instanceOf(type);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function exists(element) {
 | 
					 | 
				
			||||||
  return element && element.length;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function includesType(collection, type) {
 | 
					 | 
				
			||||||
  return (
 | 
					 | 
				
			||||||
    exists(collection) &&
 | 
					 | 
				
			||||||
    some(collection, function(element) {
 | 
					 | 
				
			||||||
      return is(element, type);
 | 
					 | 
				
			||||||
    })
 | 
					 | 
				
			||||||
  );
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function anyType(element, types) {
 | 
					 | 
				
			||||||
  return some(types, function(type) {
 | 
					 | 
				
			||||||
    return is(element, type);
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function isAllowed(propName, propDescriptor, newElement) {
 | 
					 | 
				
			||||||
  const name = propDescriptor.name,
 | 
					 | 
				
			||||||
    types = ALLOWED_TYPES[name.replace(/activiti:/, '')]
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  return name === propName && anyType(newElement, types);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function ActivitiModdleExtension(eventBus) {
 | 
					 | 
				
			||||||
  eventBus.on(
 | 
					 | 
				
			||||||
    "property.clone",
 | 
					 | 
				
			||||||
    function(context) {
 | 
					 | 
				
			||||||
      const newElement = context.newElement,
 | 
					 | 
				
			||||||
        propDescriptor = context.propertyDescriptor
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      this.canCloneProperty(newElement, propDescriptor);
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    this
 | 
					 | 
				
			||||||
  );
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
ActivitiModdleExtension.$inject = ["eventBus"];
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
ActivitiModdleExtension.prototype.canCloneProperty = function(newElement, propDescriptor) {
 | 
					 | 
				
			||||||
  if (isAllowed("activiti:FailedJobRetryTimeCycle", propDescriptor, newElement)) {
 | 
					 | 
				
			||||||
    return (
 | 
					 | 
				
			||||||
      includesType(newElement.eventDefinitions, "bpmn:TimerEventDefinition") ||
 | 
					 | 
				
			||||||
      includesType(newElement.eventDefinitions, "bpmn:SignalEventDefinition") ||
 | 
					 | 
				
			||||||
      is(newElement.loopCharacteristics, "bpmn:MultiInstanceLoopCharacteristics")
 | 
					 | 
				
			||||||
    );
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (isAllowed("activiti:Connector", propDescriptor, newElement)) {
 | 
					 | 
				
			||||||
    return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition");
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (isAllowed("activiti:Field", propDescriptor, newElement)) {
 | 
					 | 
				
			||||||
    return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition");
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
module.exports = ActivitiModdleExtension;
 | 
					 | 
				
			||||||
@@ -1,9 +0,0 @@
 | 
				
			|||||||
/*
 | 
					 | 
				
			||||||
 * @author igdianov
 | 
					 | 
				
			||||||
 * address https://github.com/igdianov/activiti-bpmn-moddle
 | 
					 | 
				
			||||||
 * */
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
module.exports = {
 | 
					 | 
				
			||||||
  __init__: ["ActivitiModdleExtension"],
 | 
					 | 
				
			||||||
  ActivitiModdleExtension: ["type", require("./activitiExtension")]
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
@@ -1,146 +0,0 @@
 | 
				
			|||||||
"use strict";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
const isFunction = require('min-dash').isFunction,
 | 
					 | 
				
			||||||
  isObject = require('min-dash').isObject,
 | 
					 | 
				
			||||||
  some = require('min-dash').some
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
const WILDCARD = '*'
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function CamundaModdleExtension(eventBus) {
 | 
					 | 
				
			||||||
  const self = this
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  eventBus.on("moddleCopy.canCopyProperty", function(context) {
 | 
					 | 
				
			||||||
    const property = context.property,
 | 
					 | 
				
			||||||
      parent = context.parent
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    return self.canCopyProperty(property, parent);
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
CamundaModdleExtension.$inject = ["eventBus"];
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
/**
 | 
					 | 
				
			||||||
 * Check wether to disallow copying property.
 | 
					 | 
				
			||||||
 */
 | 
					 | 
				
			||||||
CamundaModdleExtension.prototype.canCopyProperty = function(property, parent) {
 | 
					 | 
				
			||||||
  // (1) check wether property is allowed in parent
 | 
					 | 
				
			||||||
  if (isObject(property) && !isAllowedInParent(property, parent)) {
 | 
					 | 
				
			||||||
    return false;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  // (2) check more complex scenarios
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (is(property, "camunda:InputOutput") && !this.canHostInputOutput(parent)) {
 | 
					 | 
				
			||||||
    return false;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (isAny(property, ["camunda:Connector", "camunda:Field"]) && !this.canHostConnector(parent)) {
 | 
					 | 
				
			||||||
    return false;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (is(property, "camunda:In") && !this.canHostIn(parent)) {
 | 
					 | 
				
			||||||
    return false;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
CamundaModdleExtension.prototype.canHostInputOutput = function(parent) {
 | 
					 | 
				
			||||||
  // allowed in camunda:Connector
 | 
					 | 
				
			||||||
  const connector = getParent(parent, 'camunda:Connector')
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (connector) {
 | 
					 | 
				
			||||||
    return true;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  // special rules inside bpmn:FlowNode
 | 
					 | 
				
			||||||
  const flowNode = getParent(parent, 'bpmn:FlowNode')
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (!flowNode) {
 | 
					 | 
				
			||||||
    return false;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (isAny(flowNode, ["bpmn:StartEvent", "bpmn:Gateway", "bpmn:BoundaryEvent"])) {
 | 
					 | 
				
			||||||
    return false;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  return !(is(flowNode, "bpmn:SubProcess") && flowNode.get("triggeredByEvent"));
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
CamundaModdleExtension.prototype.canHostConnector = function(parent) {
 | 
					 | 
				
			||||||
  const serviceTaskLike = getParent(parent, 'camunda:ServiceTaskLike')
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (is(serviceTaskLike, "bpmn:MessageEventDefinition")) {
 | 
					 | 
				
			||||||
    // only allow on throw and end events
 | 
					 | 
				
			||||||
    return getParent(parent, "bpmn:IntermediateThrowEvent") || getParent(parent, "bpmn:EndEvent");
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  return true;
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
CamundaModdleExtension.prototype.canHostIn = function(parent) {
 | 
					 | 
				
			||||||
  const callActivity = getParent(parent, 'bpmn:CallActivity')
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (callActivity) {
 | 
					 | 
				
			||||||
    return true;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  const signalEventDefinition = getParent(parent, 'bpmn:SignalEventDefinition')
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (signalEventDefinition) {
 | 
					 | 
				
			||||||
    // only allow on throw and end events
 | 
					 | 
				
			||||||
    return getParent(parent, "bpmn:IntermediateThrowEvent") || getParent(parent, "bpmn:EndEvent");
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  return true;
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
module.exports = CamundaModdleExtension;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
// helpers //////////
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function is(element, type) {
 | 
					 | 
				
			||||||
  return element && isFunction(element.$instanceOf) && element.$instanceOf(type);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function isAny(element, types) {
 | 
					 | 
				
			||||||
  return some(types, function(t) {
 | 
					 | 
				
			||||||
    return is(element, t);
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function getParent(element, type) {
 | 
					 | 
				
			||||||
  if (!type) {
 | 
					 | 
				
			||||||
    return element.$parent;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (is(element, type)) {
 | 
					 | 
				
			||||||
    return element;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (!element.$parent) {
 | 
					 | 
				
			||||||
    return;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  return getParent(element.$parent, type);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function isAllowedInParent(property, parent) {
 | 
					 | 
				
			||||||
  // (1) find property descriptor
 | 
					 | 
				
			||||||
  const descriptor = property.$type && property.$model.getTypeDescriptor(property.$type)
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  const allowedIn = descriptor && descriptor.meta && descriptor.meta.allowedIn
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (!allowedIn || isWildcard(allowedIn)) {
 | 
					 | 
				
			||||||
    return true;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  // (2) check wether property has parent of allowed type
 | 
					 | 
				
			||||||
  return some(allowedIn, function(type) {
 | 
					 | 
				
			||||||
    return getParent(parent, type);
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function isWildcard(allowedIn) {
 | 
					 | 
				
			||||||
  return allowedIn.indexOf(WILDCARD) !== -1;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
@@ -1,6 +0,0 @@
 | 
				
			|||||||
"use strict";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
module.exports = {
 | 
					 | 
				
			||||||
  __init__: ["camundaModdleExtension"],
 | 
					 | 
				
			||||||
  camundaModdleExtension: ["type", require("./extension")]
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
@@ -1,74 +0,0 @@
 | 
				
			|||||||
"use strict";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
const some = require('min-dash').some
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
const ALLOWED_TYPES = {
 | 
					 | 
				
			||||||
  FailedJobRetryTimeCycle: ['bpmn:StartEvent', 'bpmn:BoundaryEvent', 'bpmn:IntermediateCatchEvent', 'bpmn:Activity'],
 | 
					 | 
				
			||||||
  Connector: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
 | 
					 | 
				
			||||||
  Field: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent']
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function is(element, type) {
 | 
					 | 
				
			||||||
  return element && typeof element.$instanceOf === "function" && element.$instanceOf(type);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function exists(element) {
 | 
					 | 
				
			||||||
  return element && element.length;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function includesType(collection, type) {
 | 
					 | 
				
			||||||
  return (
 | 
					 | 
				
			||||||
    exists(collection) &&
 | 
					 | 
				
			||||||
    some(collection, function(element) {
 | 
					 | 
				
			||||||
      return is(element, type);
 | 
					 | 
				
			||||||
    })
 | 
					 | 
				
			||||||
  );
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function anyType(element, types) {
 | 
					 | 
				
			||||||
  return some(types, function(type) {
 | 
					 | 
				
			||||||
    return is(element, type);
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function isAllowed(propName, propDescriptor, newElement) {
 | 
					 | 
				
			||||||
  const name = propDescriptor.name,
 | 
					 | 
				
			||||||
    types = ALLOWED_TYPES[name.replace(/flowable:/, '')]
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  return name === propName && anyType(newElement, types);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
function FlowableModdleExtension(eventBus) {
 | 
					 | 
				
			||||||
  eventBus.on(
 | 
					 | 
				
			||||||
    "property.clone",
 | 
					 | 
				
			||||||
    function(context) {
 | 
					 | 
				
			||||||
      const newElement = context.newElement,
 | 
					 | 
				
			||||||
        propDescriptor = context.propertyDescriptor
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      this.canCloneProperty(newElement, propDescriptor);
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    this
 | 
					 | 
				
			||||||
  );
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
FlowableModdleExtension.$inject = ["eventBus"];
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
FlowableModdleExtension.prototype.canCloneProperty = function(newElement, propDescriptor) {
 | 
					 | 
				
			||||||
  if (isAllowed("flowable:FailedJobRetryTimeCycle", propDescriptor, newElement)) {
 | 
					 | 
				
			||||||
    return (
 | 
					 | 
				
			||||||
      includesType(newElement.eventDefinitions, "bpmn:TimerEventDefinition") ||
 | 
					 | 
				
			||||||
      includesType(newElement.eventDefinitions, "bpmn:SignalEventDefinition") ||
 | 
					 | 
				
			||||||
      is(newElement.loopCharacteristics, "bpmn:MultiInstanceLoopCharacteristics")
 | 
					 | 
				
			||||||
    );
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (isAllowed("flowable:Connector", propDescriptor, newElement)) {
 | 
					 | 
				
			||||||
    return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition");
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  if (isAllowed("flowable:Field", propDescriptor, newElement)) {
 | 
					 | 
				
			||||||
    return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition");
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
module.exports = FlowableModdleExtension;
 | 
					 | 
				
			||||||
@@ -1,9 +0,0 @@
 | 
				
			|||||||
/*
 | 
					 | 
				
			||||||
 * @author igdianov
 | 
					 | 
				
			||||||
 * address https://github.com/igdianov/activiti-bpmn-moddle
 | 
					 | 
				
			||||||
 * */
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
module.exports = {
 | 
					 | 
				
			||||||
  __init__: ["FlowableModdleExtension"],
 | 
					 | 
				
			||||||
  FlowableModdleExtension: ["type", require("./flowableExtension")]
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
@@ -1,156 +0,0 @@
 | 
				
			|||||||
import PaletteProvider from "bpmn-js/lib/features/palette/PaletteProvider";
 | 
					 | 
				
			||||||
import { assign } from "min-dash";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export default function CustomPalette(palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate) {
 | 
					 | 
				
			||||||
  PaletteProvider.call(this, palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate, 2000);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
const F = function() {}; // 核心,利用空对象作为中介;
 | 
					 | 
				
			||||||
F.prototype = PaletteProvider.prototype; // 核心,将父类的原型赋值给空对象F;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
// 利用中介函数重写原型链方法
 | 
					 | 
				
			||||||
F.prototype.getPaletteEntries = function() {
 | 
					 | 
				
			||||||
  const actions = {},
 | 
					 | 
				
			||||||
    create = this._create,
 | 
					 | 
				
			||||||
    elementFactory = this._elementFactory,
 | 
					 | 
				
			||||||
    spaceTool = this._spaceTool,
 | 
					 | 
				
			||||||
    lassoTool = this._lassoTool,
 | 
					 | 
				
			||||||
    handTool = this._handTool,
 | 
					 | 
				
			||||||
    globalConnect = this._globalConnect,
 | 
					 | 
				
			||||||
    translate = this._translate
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  function createAction(type, group, className, title, options) {
 | 
					 | 
				
			||||||
    function createListener(event) {
 | 
					 | 
				
			||||||
      const shape = elementFactory.createShape(assign({ type: type }, options))
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      if (options) {
 | 
					 | 
				
			||||||
        shape.businessObject.di.isExpanded = options.isExpanded;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      create.start(event, shape);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    const shortType = type.replace(/^bpmn:/, '')
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    return {
 | 
					 | 
				
			||||||
      group: group,
 | 
					 | 
				
			||||||
      className: className,
 | 
					 | 
				
			||||||
      title: title || translate("Create {type}", { type: shortType }),
 | 
					 | 
				
			||||||
      action: {
 | 
					 | 
				
			||||||
        dragstart: createListener,
 | 
					 | 
				
			||||||
        click: createListener
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  function createSubprocess(event) {
 | 
					 | 
				
			||||||
    const subProcess = elementFactory.createShape({
 | 
					 | 
				
			||||||
      type: 'bpmn:SubProcess',
 | 
					 | 
				
			||||||
      x: 0,
 | 
					 | 
				
			||||||
      y: 0,
 | 
					 | 
				
			||||||
      isExpanded: true
 | 
					 | 
				
			||||||
    })
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    const startEvent = elementFactory.createShape({
 | 
					 | 
				
			||||||
      type: 'bpmn:StartEvent',
 | 
					 | 
				
			||||||
      x: 40,
 | 
					 | 
				
			||||||
      y: 82,
 | 
					 | 
				
			||||||
      parent: subProcess
 | 
					 | 
				
			||||||
    })
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    create.start(event, [subProcess, startEvent], {
 | 
					 | 
				
			||||||
      hints: {
 | 
					 | 
				
			||||||
        autoSelect: [startEvent]
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  function createParticipant(event) {
 | 
					 | 
				
			||||||
    create.start(event, elementFactory.createParticipantShape());
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  assign(actions, {
 | 
					 | 
				
			||||||
    "hand-tool": {
 | 
					 | 
				
			||||||
      group: "tools",
 | 
					 | 
				
			||||||
      className: "bpmn-icon-hand-tool",
 | 
					 | 
				
			||||||
      title: translate("Activate the hand tool"),
 | 
					 | 
				
			||||||
      action: {
 | 
					 | 
				
			||||||
        click: function(event) {
 | 
					 | 
				
			||||||
          handTool.activateHand(event);
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    "lasso-tool": {
 | 
					 | 
				
			||||||
      group: "tools",
 | 
					 | 
				
			||||||
      className: "bpmn-icon-lasso-tool",
 | 
					 | 
				
			||||||
      title: translate("Activate the lasso tool"),
 | 
					 | 
				
			||||||
      action: {
 | 
					 | 
				
			||||||
        click: function(event) {
 | 
					 | 
				
			||||||
          lassoTool.activateSelection(event);
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    "space-tool": {
 | 
					 | 
				
			||||||
      group: "tools",
 | 
					 | 
				
			||||||
      className: "bpmn-icon-space-tool",
 | 
					 | 
				
			||||||
      title: translate("Activate the create/remove space tool"),
 | 
					 | 
				
			||||||
      action: {
 | 
					 | 
				
			||||||
        click: function(event) {
 | 
					 | 
				
			||||||
          spaceTool.activateSelection(event);
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    "global-connect-tool": {
 | 
					 | 
				
			||||||
      group: "tools",
 | 
					 | 
				
			||||||
      className: "bpmn-icon-connection-multi",
 | 
					 | 
				
			||||||
      title: translate("Activate the global connect tool"),
 | 
					 | 
				
			||||||
      action: {
 | 
					 | 
				
			||||||
        click: function(event) {
 | 
					 | 
				
			||||||
          globalConnect.toggle(event);
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    "tool-separator": {
 | 
					 | 
				
			||||||
      group: "tools",
 | 
					 | 
				
			||||||
      separator: true
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    "create.start-event": createAction("bpmn:StartEvent", "event", "bpmn-icon-start-event-none", translate("Create StartEvent")),
 | 
					 | 
				
			||||||
    "create.intermediate-event": createAction(
 | 
					 | 
				
			||||||
      "bpmn:IntermediateThrowEvent",
 | 
					 | 
				
			||||||
      "event",
 | 
					 | 
				
			||||||
      "bpmn-icon-intermediate-event-none",
 | 
					 | 
				
			||||||
      translate("Create Intermediate/Boundary Event")
 | 
					 | 
				
			||||||
    ),
 | 
					 | 
				
			||||||
    "create.end-event": createAction("bpmn:EndEvent", "event", "bpmn-icon-end-event-none", translate("Create EndEvent")),
 | 
					 | 
				
			||||||
    "create.exclusive-gateway": createAction("bpmn:ExclusiveGateway", "gateway", "bpmn-icon-gateway-none", translate("Create Gateway")),
 | 
					 | 
				
			||||||
    "create.user-task": createAction("bpmn:UserTask", "activity", "bpmn-icon-user-task", translate("Create User Task")),
 | 
					 | 
				
			||||||
    "create.data-object": createAction("bpmn:DataObjectReference", "data-object", "bpmn-icon-data-object", translate("Create DataObjectReference")),
 | 
					 | 
				
			||||||
    "create.data-store": createAction("bpmn:DataStoreReference", "data-store", "bpmn-icon-data-store", translate("Create DataStoreReference")),
 | 
					 | 
				
			||||||
    "create.subprocess-expanded": {
 | 
					 | 
				
			||||||
      group: "activity",
 | 
					 | 
				
			||||||
      className: "bpmn-icon-subprocess-expanded",
 | 
					 | 
				
			||||||
      title: translate("Create expanded SubProcess"),
 | 
					 | 
				
			||||||
      action: {
 | 
					 | 
				
			||||||
        dragstart: createSubprocess,
 | 
					 | 
				
			||||||
        click: createSubprocess
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    "create.participant-expanded": {
 | 
					 | 
				
			||||||
      group: "collaboration",
 | 
					 | 
				
			||||||
      className: "bpmn-icon-participant",
 | 
					 | 
				
			||||||
      title: translate("Create Pool/Participant"),
 | 
					 | 
				
			||||||
      action: {
 | 
					 | 
				
			||||||
        dragstart: createParticipant,
 | 
					 | 
				
			||||||
        click: createParticipant
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    "create.group": createAction("bpmn:Group", "artifact", "bpmn-icon-group", translate("Create Group"))
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  return actions;
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
CustomPalette.$inject = ["palette", "create", "elementFactory", "spaceTool", "lassoTool", "handTool", "globalConnect", "translate"];
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
CustomPalette.prototype = new F(); // 核心,将 F的实例赋值给子类;
 | 
					 | 
				
			||||||
CustomPalette.prototype.constructor = CustomPalette; // 修复子类CustomPalette的构造器指向,防止原型链的混乱;
 | 
					 | 
				
			||||||
@@ -1,22 +0,0 @@
 | 
				
			|||||||
// import PaletteModule from "diagram-js/lib/features/palette";
 | 
					 | 
				
			||||||
// import CreateModule from "diagram-js/lib/features/create";
 | 
					 | 
				
			||||||
// import SpaceToolModule from "diagram-js/lib/features/space-tool";
 | 
					 | 
				
			||||||
// import LassoToolModule from "diagram-js/lib/features/lasso-tool";
 | 
					 | 
				
			||||||
// import HandToolModule from "diagram-js/lib/features/hand-tool";
 | 
					 | 
				
			||||||
// import GlobalConnectModule from "diagram-js/lib/features/global-connect";
 | 
					 | 
				
			||||||
// import translate from "diagram-js/lib/i18n/translate";
 | 
					 | 
				
			||||||
//
 | 
					 | 
				
			||||||
// import PaletteProvider from "./paletteProvider";
 | 
					 | 
				
			||||||
//
 | 
					 | 
				
			||||||
// export default {
 | 
					 | 
				
			||||||
//   __depends__: [PaletteModule, CreateModule, SpaceToolModule, LassoToolModule, HandToolModule, GlobalConnectModule, translate],
 | 
					 | 
				
			||||||
//   __init__: ["paletteProvider"],
 | 
					 | 
				
			||||||
//   paletteProvider: ["type", PaletteProvider]
 | 
					 | 
				
			||||||
// };
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
import CustomPalette from "./CustomPalette";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  __init__: ["paletteProvider"],
 | 
					 | 
				
			||||||
  paletteProvider: ["type", CustomPalette]
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
@@ -1,160 +0,0 @@
 | 
				
			|||||||
import { assign } from "min-dash";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
/**
 | 
					 | 
				
			||||||
 * A palette provider for BPMN 2.0 elements.
 | 
					 | 
				
			||||||
 */
 | 
					 | 
				
			||||||
export default function PaletteProvider(palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate) {
 | 
					 | 
				
			||||||
  this._palette = palette;
 | 
					 | 
				
			||||||
  this._create = create;
 | 
					 | 
				
			||||||
  this._elementFactory = elementFactory;
 | 
					 | 
				
			||||||
  this._spaceTool = spaceTool;
 | 
					 | 
				
			||||||
  this._lassoTool = lassoTool;
 | 
					 | 
				
			||||||
  this._handTool = handTool;
 | 
					 | 
				
			||||||
  this._globalConnect = globalConnect;
 | 
					 | 
				
			||||||
  this._translate = translate;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  palette.registerProvider(this);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
PaletteProvider.$inject = ["palette", "create", "elementFactory", "spaceTool", "lassoTool", "handTool", "globalConnect", "translate"];
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
PaletteProvider.prototype.getPaletteEntries = function() {
 | 
					 | 
				
			||||||
  const actions = {},
 | 
					 | 
				
			||||||
    create = this._create,
 | 
					 | 
				
			||||||
    elementFactory = this._elementFactory,
 | 
					 | 
				
			||||||
    spaceTool = this._spaceTool,
 | 
					 | 
				
			||||||
    lassoTool = this._lassoTool,
 | 
					 | 
				
			||||||
    handTool = this._handTool,
 | 
					 | 
				
			||||||
    globalConnect = this._globalConnect,
 | 
					 | 
				
			||||||
    translate = this._translate
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  function createAction(type, group, className, title, options) {
 | 
					 | 
				
			||||||
    function createListener(event) {
 | 
					 | 
				
			||||||
      const shape = elementFactory.createShape(assign({ type: type }, options))
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      if (options) {
 | 
					 | 
				
			||||||
        shape.businessObject.di.isExpanded = options.isExpanded;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      create.start(event, shape);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    const shortType = type.replace(/^bpmn:/, '')
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    return {
 | 
					 | 
				
			||||||
      group: group,
 | 
					 | 
				
			||||||
      className: className,
 | 
					 | 
				
			||||||
      title: title || translate("Create {type}", { type: shortType }),
 | 
					 | 
				
			||||||
      action: {
 | 
					 | 
				
			||||||
        dragstart: createListener,
 | 
					 | 
				
			||||||
        click: createListener
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  function createSubprocess(event) {
 | 
					 | 
				
			||||||
    const subProcess = elementFactory.createShape({
 | 
					 | 
				
			||||||
      type: 'bpmn:SubProcess',
 | 
					 | 
				
			||||||
      x: 0,
 | 
					 | 
				
			||||||
      y: 0,
 | 
					 | 
				
			||||||
      isExpanded: true
 | 
					 | 
				
			||||||
    })
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    const startEvent = elementFactory.createShape({
 | 
					 | 
				
			||||||
      type: 'bpmn:StartEvent',
 | 
					 | 
				
			||||||
      x: 40,
 | 
					 | 
				
			||||||
      y: 82,
 | 
					 | 
				
			||||||
      parent: subProcess
 | 
					 | 
				
			||||||
    })
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    create.start(event, [subProcess, startEvent], {
 | 
					 | 
				
			||||||
      hints: {
 | 
					 | 
				
			||||||
        autoSelect: [startEvent]
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  function createParticipant(event) {
 | 
					 | 
				
			||||||
    create.start(event, elementFactory.createParticipantShape());
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  assign(actions, {
 | 
					 | 
				
			||||||
    "hand-tool": {
 | 
					 | 
				
			||||||
      group: "tools",
 | 
					 | 
				
			||||||
      className: "bpmn-icon-hand-tool",
 | 
					 | 
				
			||||||
      title: translate("Activate the hand tool"),
 | 
					 | 
				
			||||||
      action: {
 | 
					 | 
				
			||||||
        click: function(event) {
 | 
					 | 
				
			||||||
          handTool.activateHand(event);
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    "lasso-tool": {
 | 
					 | 
				
			||||||
      group: "tools",
 | 
					 | 
				
			||||||
      className: "bpmn-icon-lasso-tool",
 | 
					 | 
				
			||||||
      title: translate("Activate the lasso tool"),
 | 
					 | 
				
			||||||
      action: {
 | 
					 | 
				
			||||||
        click: function(event) {
 | 
					 | 
				
			||||||
          lassoTool.activateSelection(event);
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    "space-tool": {
 | 
					 | 
				
			||||||
      group: "tools",
 | 
					 | 
				
			||||||
      className: "bpmn-icon-space-tool",
 | 
					 | 
				
			||||||
      title: translate("Activate the create/remove space tool"),
 | 
					 | 
				
			||||||
      action: {
 | 
					 | 
				
			||||||
        click: function(event) {
 | 
					 | 
				
			||||||
          spaceTool.activateSelection(event);
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    "global-connect-tool": {
 | 
					 | 
				
			||||||
      group: "tools",
 | 
					 | 
				
			||||||
      className: "bpmn-icon-connection-multi",
 | 
					 | 
				
			||||||
      title: translate("Activate the global connect tool"),
 | 
					 | 
				
			||||||
      action: {
 | 
					 | 
				
			||||||
        click: function(event) {
 | 
					 | 
				
			||||||
          globalConnect.toggle(event);
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    "tool-separator": {
 | 
					 | 
				
			||||||
      group: "tools",
 | 
					 | 
				
			||||||
      separator: true
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    "create.start-event": createAction("bpmn:StartEvent", "event", "bpmn-icon-start-event-none", translate("Create StartEvent")),
 | 
					 | 
				
			||||||
    "create.intermediate-event": createAction(
 | 
					 | 
				
			||||||
      "bpmn:IntermediateThrowEvent",
 | 
					 | 
				
			||||||
      "event",
 | 
					 | 
				
			||||||
      "bpmn-icon-intermediate-event-none",
 | 
					 | 
				
			||||||
      translate("Create Intermediate/Boundary Event")
 | 
					 | 
				
			||||||
    ),
 | 
					 | 
				
			||||||
    "create.end-event": createAction("bpmn:EndEvent", "event", "bpmn-icon-end-event-none", translate("Create EndEvent")),
 | 
					 | 
				
			||||||
    "create.exclusive-gateway": createAction("bpmn:ExclusiveGateway", "gateway", "bpmn-icon-gateway-none", translate("Create Gateway")),
 | 
					 | 
				
			||||||
    "create.user-task": createAction("bpmn:UserTask", "activity", "bpmn-icon-user-task", translate("Create User Task")),
 | 
					 | 
				
			||||||
    "create.data-object": createAction("bpmn:DataObjectReference", "data-object", "bpmn-icon-data-object", translate("Create DataObjectReference")),
 | 
					 | 
				
			||||||
    "create.data-store": createAction("bpmn:DataStoreReference", "data-store", "bpmn-icon-data-store", translate("Create DataStoreReference")),
 | 
					 | 
				
			||||||
    "create.subprocess-expanded": {
 | 
					 | 
				
			||||||
      group: "activity",
 | 
					 | 
				
			||||||
      className: "bpmn-icon-subprocess-expanded",
 | 
					 | 
				
			||||||
      title: translate("Create expanded SubProcess"),
 | 
					 | 
				
			||||||
      action: {
 | 
					 | 
				
			||||||
        dragstart: createSubprocess,
 | 
					 | 
				
			||||||
        click: createSubprocess
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    "create.participant-expanded": {
 | 
					 | 
				
			||||||
      group: "collaboration",
 | 
					 | 
				
			||||||
      className: "bpmn-icon-participant",
 | 
					 | 
				
			||||||
      title: translate("Create Pool/Participant"),
 | 
					 | 
				
			||||||
      action: {
 | 
					 | 
				
			||||||
        dragstart: createParticipant,
 | 
					 | 
				
			||||||
        click: createParticipant
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    "create.group": createAction("bpmn:Group", "artifact", "bpmn-icon-group", translate("Create Group"))
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  return actions;
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
@@ -1,41 +0,0 @@
 | 
				
			|||||||
// import translations from "./zh";
 | 
					 | 
				
			||||||
//
 | 
					 | 
				
			||||||
// export default function customTranslate(template, replacements) {
 | 
					 | 
				
			||||||
//   replacements = replacements || {};
 | 
					 | 
				
			||||||
//
 | 
					 | 
				
			||||||
//   // Translate
 | 
					 | 
				
			||||||
//   template = translations[template] || template;
 | 
					 | 
				
			||||||
//
 | 
					 | 
				
			||||||
//   // Replace
 | 
					 | 
				
			||||||
//   return template.replace(/{([^}]+)}/g, function(_, key) {
 | 
					 | 
				
			||||||
//     let str = replacements[key];
 | 
					 | 
				
			||||||
//     if (
 | 
					 | 
				
			||||||
//       translations[replacements[key]] !== null &&
 | 
					 | 
				
			||||||
//       translations[replacements[key]] !== "undefined"
 | 
					 | 
				
			||||||
//     ) {
 | 
					 | 
				
			||||||
//       // eslint-disable-next-line no-mixed-spaces-and-tabs
 | 
					 | 
				
			||||||
//       str = translations[replacements[key]];
 | 
					 | 
				
			||||||
//       // eslint-disable-next-line no-mixed-spaces-and-tabs
 | 
					 | 
				
			||||||
//     }
 | 
					 | 
				
			||||||
//     return str || "{" + key + "}";
 | 
					 | 
				
			||||||
//   });
 | 
					 | 
				
			||||||
// }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export default function customTranslate(translations) {
 | 
					 | 
				
			||||||
  return function(template, replacements) {
 | 
					 | 
				
			||||||
    replacements = replacements || {};
 | 
					 | 
				
			||||||
    // Translate
 | 
					 | 
				
			||||||
    template = translations[template] || template;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    // Replace
 | 
					 | 
				
			||||||
    return template.replace(/{([^}]+)}/g, function(_, key) {
 | 
					 | 
				
			||||||
      let str = replacements[key];
 | 
					 | 
				
			||||||
      if (translations[replacements[key]] !== null && translations[replacements[key]] !== undefined) {
 | 
					 | 
				
			||||||
        // eslint-disable-next-line no-mixed-spaces-and-tabs
 | 
					 | 
				
			||||||
        str = translations[replacements[key]];
 | 
					 | 
				
			||||||
        // eslint-disable-next-line no-mixed-spaces-and-tabs
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      return str || "{" + key + "}";
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
  };
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
@@ -1,238 +0,0 @@
 | 
				
			|||||||
/**
 | 
					 | 
				
			||||||
 * This is a sample file that should be replaced with the actual translation.
 | 
					 | 
				
			||||||
 *
 | 
					 | 
				
			||||||
 * Checkout https://github.com/bpmn-io/bpmn-js-i18n for a list of available
 | 
					 | 
				
			||||||
 * translations and labels to translate.
 | 
					 | 
				
			||||||
 */
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  // 添加部分
 | 
					 | 
				
			||||||
  "Append EndEvent": "追加结束事件",
 | 
					 | 
				
			||||||
  "Append Gateway": "追加网关",
 | 
					 | 
				
			||||||
  "Append Task": "追加任务",
 | 
					 | 
				
			||||||
  "Append Intermediate/Boundary Event": "追加中间抛出事件/边界事件",
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  "Activate the global connect tool": "激活全局连接工具",
 | 
					 | 
				
			||||||
  "Append {type}": "添加 {type}",
 | 
					 | 
				
			||||||
  "Add Lane above": "在上面添加道",
 | 
					 | 
				
			||||||
  "Divide into two Lanes": "分割成两个道",
 | 
					 | 
				
			||||||
  "Divide into three Lanes": "分割成三个道",
 | 
					 | 
				
			||||||
  "Add Lane below": "在下面添加道",
 | 
					 | 
				
			||||||
  "Append compensation activity": "追加补偿活动",
 | 
					 | 
				
			||||||
  "Change type": "修改类型",
 | 
					 | 
				
			||||||
  "Connect using Association": "使用关联连接",
 | 
					 | 
				
			||||||
  "Connect using Sequence/MessageFlow or Association": "使用顺序/消息流或者关联连接",
 | 
					 | 
				
			||||||
  "Connect using DataInputAssociation": "使用数据输入关联连接",
 | 
					 | 
				
			||||||
  Remove: "移除",
 | 
					 | 
				
			||||||
  "Activate the hand tool": "激活抓手工具",
 | 
					 | 
				
			||||||
  "Activate the lasso tool": "激活套索工具",
 | 
					 | 
				
			||||||
  "Activate the create/remove space tool": "激活创建/删除空间工具",
 | 
					 | 
				
			||||||
  "Create expanded SubProcess": "创建扩展子过程",
 | 
					 | 
				
			||||||
  "Create IntermediateThrowEvent/BoundaryEvent": "创建中间抛出事件/边界事件",
 | 
					 | 
				
			||||||
  "Create Pool/Participant": "创建池/参与者",
 | 
					 | 
				
			||||||
  "Parallel Multi Instance": "并行多重事件",
 | 
					 | 
				
			||||||
  "Sequential Multi Instance": "时序多重事件",
 | 
					 | 
				
			||||||
  DataObjectReference: "数据对象参考",
 | 
					 | 
				
			||||||
  DataStoreReference: "数据存储参考",
 | 
					 | 
				
			||||||
  Loop: "循环",
 | 
					 | 
				
			||||||
  "Ad-hoc": "即席",
 | 
					 | 
				
			||||||
  "Create {type}": "创建 {type}",
 | 
					 | 
				
			||||||
  Task: "任务",
 | 
					 | 
				
			||||||
  "Send Task": "发送任务",
 | 
					 | 
				
			||||||
  "Receive Task": "接收任务",
 | 
					 | 
				
			||||||
  "User Task": "用户任务",
 | 
					 | 
				
			||||||
  "Manual Task": "手工任务",
 | 
					 | 
				
			||||||
  "Business Rule Task": "业务规则任务",
 | 
					 | 
				
			||||||
  "Service Task": "服务任务",
 | 
					 | 
				
			||||||
  "Script Task": "脚本任务",
 | 
					 | 
				
			||||||
  "Call Activity": "调用活动",
 | 
					 | 
				
			||||||
  "Sub Process (collapsed)": "子流程(折叠的)",
 | 
					 | 
				
			||||||
  "Sub Process (expanded)": "子流程(展开的)",
 | 
					 | 
				
			||||||
  "Start Event": "开始事件",
 | 
					 | 
				
			||||||
  StartEvent: "开始事件",
 | 
					 | 
				
			||||||
  "Intermediate Throw Event": "中间事件",
 | 
					 | 
				
			||||||
  "End Event": "结束事件",
 | 
					 | 
				
			||||||
  EndEvent: "结束事件",
 | 
					 | 
				
			||||||
  "Create StartEvent": "创建开始事件",
 | 
					 | 
				
			||||||
  "Create EndEvent": "创建结束事件",
 | 
					 | 
				
			||||||
  "Create Task": "创建任务",
 | 
					 | 
				
			||||||
  "Create User Task": "创建用户任务",
 | 
					 | 
				
			||||||
  "Create Gateway": "创建网关",
 | 
					 | 
				
			||||||
  "Create DataObjectReference": "创建数据对象",
 | 
					 | 
				
			||||||
  "Create DataStoreReference": "创建数据存储",
 | 
					 | 
				
			||||||
  "Create Group": "创建分组",
 | 
					 | 
				
			||||||
  "Create Intermediate/Boundary Event": "创建中间/边界事件",
 | 
					 | 
				
			||||||
  "Message Start Event": "消息开始事件",
 | 
					 | 
				
			||||||
  "Timer Start Event": "定时开始事件",
 | 
					 | 
				
			||||||
  "Conditional Start Event": "条件开始事件",
 | 
					 | 
				
			||||||
  "Signal Start Event": "信号开始事件",
 | 
					 | 
				
			||||||
  "Error Start Event": "错误开始事件",
 | 
					 | 
				
			||||||
  "Escalation Start Event": "升级开始事件",
 | 
					 | 
				
			||||||
  "Compensation Start Event": "补偿开始事件",
 | 
					 | 
				
			||||||
  "Message Start Event (non-interrupting)": "消息开始事件(非中断)",
 | 
					 | 
				
			||||||
  "Timer Start Event (non-interrupting)": "定时开始事件(非中断)",
 | 
					 | 
				
			||||||
  "Conditional Start Event (non-interrupting)": "条件开始事件(非中断)",
 | 
					 | 
				
			||||||
  "Signal Start Event (non-interrupting)": "信号开始事件(非中断)",
 | 
					 | 
				
			||||||
  "Escalation Start Event (non-interrupting)": "升级开始事件(非中断)",
 | 
					 | 
				
			||||||
  "Message Intermediate Catch Event": "消息中间捕获事件",
 | 
					 | 
				
			||||||
  "Message Intermediate Throw Event": "消息中间抛出事件",
 | 
					 | 
				
			||||||
  "Timer Intermediate Catch Event": "定时中间捕获事件",
 | 
					 | 
				
			||||||
  "Escalation Intermediate Throw Event": "升级中间抛出事件",
 | 
					 | 
				
			||||||
  "Conditional Intermediate Catch Event": "条件中间捕获事件",
 | 
					 | 
				
			||||||
  "Link Intermediate Catch Event": "链接中间捕获事件",
 | 
					 | 
				
			||||||
  "Link Intermediate Throw Event": "链接中间抛出事件",
 | 
					 | 
				
			||||||
  "Compensation Intermediate Throw Event": "补偿中间抛出事件",
 | 
					 | 
				
			||||||
  "Signal Intermediate Catch Event": "信号中间捕获事件",
 | 
					 | 
				
			||||||
  "Signal Intermediate Throw Event": "信号中间抛出事件",
 | 
					 | 
				
			||||||
  "Message End Event": "消息结束事件",
 | 
					 | 
				
			||||||
  "Escalation End Event": "定时结束事件",
 | 
					 | 
				
			||||||
  "Error End Event": "错误结束事件",
 | 
					 | 
				
			||||||
  "Cancel End Event": "取消结束事件",
 | 
					 | 
				
			||||||
  "Compensation End Event": "补偿结束事件",
 | 
					 | 
				
			||||||
  "Signal End Event": "信号结束事件",
 | 
					 | 
				
			||||||
  "Terminate End Event": "终止结束事件",
 | 
					 | 
				
			||||||
  "Message Boundary Event": "消息边界事件",
 | 
					 | 
				
			||||||
  "Message Boundary Event (non-interrupting)": "消息边界事件(非中断)",
 | 
					 | 
				
			||||||
  "Timer Boundary Event": "定时边界事件",
 | 
					 | 
				
			||||||
  "Timer Boundary Event (non-interrupting)": "定时边界事件(非中断)",
 | 
					 | 
				
			||||||
  "Escalation Boundary Event": "升级边界事件",
 | 
					 | 
				
			||||||
  "Escalation Boundary Event (non-interrupting)": "升级边界事件(非中断)",
 | 
					 | 
				
			||||||
  "Conditional Boundary Event": "条件边界事件",
 | 
					 | 
				
			||||||
  "Conditional Boundary Event (non-interrupting)": "条件边界事件(非中断)",
 | 
					 | 
				
			||||||
  "Error Boundary Event": "错误边界事件",
 | 
					 | 
				
			||||||
  "Cancel Boundary Event": "取消边界事件",
 | 
					 | 
				
			||||||
  "Signal Boundary Event": "信号边界事件",
 | 
					 | 
				
			||||||
  "Signal Boundary Event (non-interrupting)": "信号边界事件(非中断)",
 | 
					 | 
				
			||||||
  "Compensation Boundary Event": "补偿边界事件",
 | 
					 | 
				
			||||||
  "Exclusive Gateway": "互斥网关",
 | 
					 | 
				
			||||||
  "Parallel Gateway": "并行网关",
 | 
					 | 
				
			||||||
  "Inclusive Gateway": "相容网关",
 | 
					 | 
				
			||||||
  "Complex Gateway": "复杂网关",
 | 
					 | 
				
			||||||
  "Event based Gateway": "事件网关",
 | 
					 | 
				
			||||||
  Transaction: "转运",
 | 
					 | 
				
			||||||
  "Sub Process": "子流程",
 | 
					 | 
				
			||||||
  "Event Sub Process": "事件子流程",
 | 
					 | 
				
			||||||
  "Collapsed Pool": "折叠池",
 | 
					 | 
				
			||||||
  "Expanded Pool": "展开池",
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  // Errors
 | 
					 | 
				
			||||||
  "no parent for {element} in {parent}": "在{parent}里,{element}没有父类",
 | 
					 | 
				
			||||||
  "no shape type specified": "没有指定的形状类型",
 | 
					 | 
				
			||||||
  "flow elements must be children of pools/participants": "流元素必须是池/参与者的子类",
 | 
					 | 
				
			||||||
  "out of bounds release": "out of bounds release",
 | 
					 | 
				
			||||||
  "more than {count} child lanes": "子道大于{count} ",
 | 
					 | 
				
			||||||
  "element required": "元素不能为空",
 | 
					 | 
				
			||||||
  "diagram not part of bpmn:Definitions": "流程图不符合bpmn规范",
 | 
					 | 
				
			||||||
  "no diagram to display": "没有可展示的流程图",
 | 
					 | 
				
			||||||
  "no process or collaboration to display": "没有可展示的流程/协作",
 | 
					 | 
				
			||||||
  "element {element} referenced by {referenced}#{property} not yet drawn": "由{referenced}#{property}引用的{element}元素仍未绘制",
 | 
					 | 
				
			||||||
  "already rendered {element}": "{element} 已被渲染",
 | 
					 | 
				
			||||||
  "failed to import {element}": "导入{element}失败",
 | 
					 | 
				
			||||||
  //属性面板的参数
 | 
					 | 
				
			||||||
  Id: "编号",
 | 
					 | 
				
			||||||
  Name: "名称",
 | 
					 | 
				
			||||||
  General: "常规",
 | 
					 | 
				
			||||||
  Details: "详情",
 | 
					 | 
				
			||||||
  "Message Name": "消息名称",
 | 
					 | 
				
			||||||
  Message: "消息",
 | 
					 | 
				
			||||||
  Initiator: "创建者",
 | 
					 | 
				
			||||||
  "Asynchronous Continuations": "持续异步",
 | 
					 | 
				
			||||||
  "Asynchronous Before": "异步前",
 | 
					 | 
				
			||||||
  "Asynchronous After": "异步后",
 | 
					 | 
				
			||||||
  "Job Configuration": "工作配置",
 | 
					 | 
				
			||||||
  Exclusive: "排除",
 | 
					 | 
				
			||||||
  "Job Priority": "工作优先级",
 | 
					 | 
				
			||||||
  "Retry Time Cycle": "重试时间周期",
 | 
					 | 
				
			||||||
  Documentation: "文档",
 | 
					 | 
				
			||||||
  "Element Documentation": "元素文档",
 | 
					 | 
				
			||||||
  "History Configuration": "历史配置",
 | 
					 | 
				
			||||||
  "History Time To Live": "历史的生存时间",
 | 
					 | 
				
			||||||
  Forms: "表单",
 | 
					 | 
				
			||||||
  "Form Key": "表单key",
 | 
					 | 
				
			||||||
  "Form Fields": "表单字段",
 | 
					 | 
				
			||||||
  "Business Key": "业务key",
 | 
					 | 
				
			||||||
  "Form Field": "表单字段",
 | 
					 | 
				
			||||||
  ID: "编号",
 | 
					 | 
				
			||||||
  Type: "类型",
 | 
					 | 
				
			||||||
  Label: "名称",
 | 
					 | 
				
			||||||
  "Default Value": "默认值",
 | 
					 | 
				
			||||||
  "Default Flow": "默认流转路径",
 | 
					 | 
				
			||||||
  "Conditional Flow": "条件流转路径",
 | 
					 | 
				
			||||||
  "Sequence Flow": "普通流转路径",
 | 
					 | 
				
			||||||
  Validation: "校验",
 | 
					 | 
				
			||||||
  "Add Constraint": "添加约束",
 | 
					 | 
				
			||||||
  Config: "配置",
 | 
					 | 
				
			||||||
  Properties: "属性",
 | 
					 | 
				
			||||||
  "Add Property": "添加属性",
 | 
					 | 
				
			||||||
  Value: "值",
 | 
					 | 
				
			||||||
  Listeners: "监听器",
 | 
					 | 
				
			||||||
  "Execution Listener": "执行监听",
 | 
					 | 
				
			||||||
  "Event Type": "事件类型",
 | 
					 | 
				
			||||||
  "Listener Type": "监听器类型",
 | 
					 | 
				
			||||||
  "Java Class": "Java类",
 | 
					 | 
				
			||||||
  Expression: "表达式",
 | 
					 | 
				
			||||||
  "Must provide a value": "必须提供一个值",
 | 
					 | 
				
			||||||
  "Delegate Expression": "代理表达式",
 | 
					 | 
				
			||||||
  Script: "脚本",
 | 
					 | 
				
			||||||
  "Script Format": "脚本格式",
 | 
					 | 
				
			||||||
  "Script Type": "脚本类型",
 | 
					 | 
				
			||||||
  "Inline Script": "内联脚本",
 | 
					 | 
				
			||||||
  "External Script": "外部脚本",
 | 
					 | 
				
			||||||
  Resource: "资源",
 | 
					 | 
				
			||||||
  "Field Injection": "字段注入",
 | 
					 | 
				
			||||||
  Extensions: "扩展",
 | 
					 | 
				
			||||||
  "Input/Output": "输入/输出",
 | 
					 | 
				
			||||||
  "Input Parameters": "输入参数",
 | 
					 | 
				
			||||||
  "Output Parameters": "输出参数",
 | 
					 | 
				
			||||||
  Parameters: "参数",
 | 
					 | 
				
			||||||
  "Output Parameter": "输出参数",
 | 
					 | 
				
			||||||
  "Timer Definition Type": "定时器定义类型",
 | 
					 | 
				
			||||||
  "Timer Definition": "定时器定义",
 | 
					 | 
				
			||||||
  Date: "日期",
 | 
					 | 
				
			||||||
  Duration: "持续",
 | 
					 | 
				
			||||||
  Cycle: "循环",
 | 
					 | 
				
			||||||
  Signal: "信号",
 | 
					 | 
				
			||||||
  "Signal Name": "信号名称",
 | 
					 | 
				
			||||||
  Escalation: "升级",
 | 
					 | 
				
			||||||
  Error: "错误",
 | 
					 | 
				
			||||||
  "Link Name": "链接名称",
 | 
					 | 
				
			||||||
  Condition: "条件名称",
 | 
					 | 
				
			||||||
  "Variable Name": "变量名称",
 | 
					 | 
				
			||||||
  "Variable Event": "变量事件",
 | 
					 | 
				
			||||||
  "Specify more than one variable change event as a comma separated list.": "多个变量事件以逗号隔开",
 | 
					 | 
				
			||||||
  "Wait for Completion": "等待完成",
 | 
					 | 
				
			||||||
  "Activity Ref": "活动参考",
 | 
					 | 
				
			||||||
  "Version Tag": "版本标签",
 | 
					 | 
				
			||||||
  Executable: "可执行文件",
 | 
					 | 
				
			||||||
  "External Task Configuration": "扩展任务配置",
 | 
					 | 
				
			||||||
  "Task Priority": "任务优先级",
 | 
					 | 
				
			||||||
  External: "外部",
 | 
					 | 
				
			||||||
  Connector: "连接器",
 | 
					 | 
				
			||||||
  "Must configure Connector": "必须配置连接器",
 | 
					 | 
				
			||||||
  "Connector Id": "连接器编号",
 | 
					 | 
				
			||||||
  Implementation: "实现方式",
 | 
					 | 
				
			||||||
  "Field Injections": "字段注入",
 | 
					 | 
				
			||||||
  Fields: "字段",
 | 
					 | 
				
			||||||
  "Result Variable": "结果变量",
 | 
					 | 
				
			||||||
  Topic: "主题",
 | 
					 | 
				
			||||||
  "Configure Connector": "配置连接器",
 | 
					 | 
				
			||||||
  "Input Parameter": "输入参数",
 | 
					 | 
				
			||||||
  Assignee: "代理人",
 | 
					 | 
				
			||||||
  "Candidate Users": "候选用户",
 | 
					 | 
				
			||||||
  "Candidate Groups": "候选组",
 | 
					 | 
				
			||||||
  "Due Date": "到期时间",
 | 
					 | 
				
			||||||
  "Follow Up Date": "跟踪日期",
 | 
					 | 
				
			||||||
  Priority: "优先级",
 | 
					 | 
				
			||||||
  "The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)":
 | 
					 | 
				
			||||||
    "跟踪日期必须符合EL表达式,如: ${someDate} ,或者一个ISO标准日期,如:2015-06-26T09:54:00",
 | 
					 | 
				
			||||||
  "The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)":
 | 
					 | 
				
			||||||
    "跟踪日期必须符合EL表达式,如: ${someDate} ,或者一个ISO标准日期,如:2015-06-26T09:54:00",
 | 
					 | 
				
			||||||
  Variables: "变量",
 | 
					 | 
				
			||||||
  "Candidate Starter Configuration": "候选人起动器配置",
 | 
					 | 
				
			||||||
  "Candidate Starter Groups": "候选人起动器组",
 | 
					 | 
				
			||||||
  "This maps to the process definition key.": "这映射到流程定义键。",
 | 
					 | 
				
			||||||
  "Candidate Starter Users": "候选人起动器的用户",
 | 
					 | 
				
			||||||
  "Specify more than one user as a comma separated list.": "指定多个用户作为逗号分隔的列表。",
 | 
					 | 
				
			||||||
  "Tasklist Configuration": "Tasklist配置",
 | 
					 | 
				
			||||||
  Startable: "启动",
 | 
					 | 
				
			||||||
  "Specify more than one group as a comma separated list.": "指定多个组作为逗号分隔的列表。"
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
@@ -1,21 +0,0 @@
 | 
				
			|||||||
import MyProcessDesigner from "./designer";
 | 
					 | 
				
			||||||
import MyProcessPenal from "./penal";
 | 
					 | 
				
			||||||
import MyProcessViewer from './designer/index2';
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
const components = [MyProcessDesigner, MyProcessPenal, MyProcessViewer];
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
const install = function(Vue) {
 | 
					 | 
				
			||||||
  components.forEach(component => {
 | 
					 | 
				
			||||||
    Vue.component(component.name, component);
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
if (typeof window !== "undefined" && window.Vue) {
 | 
					 | 
				
			||||||
  install(window.Vue);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  version: "0.0.1",
 | 
					 | 
				
			||||||
  install,
 | 
					 | 
				
			||||||
  ...components
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
@@ -1,48 +0,0 @@
 | 
				
			|||||||
<template>
 | 
					 | 
				
			||||||
  <div class="my-process-palette">
 | 
					 | 
				
			||||||
    <div class="test-button" @click="addTask" @mousedown="addTask">测试任务</div>
 | 
					 | 
				
			||||||
    <div class="test-container" id="palette-container">1</div>
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
</template>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<script>
 | 
					 | 
				
			||||||
import { assign } from "min-dash";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  name: "MyProcessPalette",
 | 
					 | 
				
			||||||
  data() {
 | 
					 | 
				
			||||||
    return {};
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  mounted() {},
 | 
					 | 
				
			||||||
  methods: {
 | 
					 | 
				
			||||||
    addTask(event, options = {}) {
 | 
					 | 
				
			||||||
      const ElementFactory = window.bpmnInstances.elementFactory;
 | 
					 | 
				
			||||||
      const create = window.bpmnInstances.modeler.get("create");
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      console.log(ElementFactory, create);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      const shape = ElementFactory.createShape(assign({ type: "bpmn:UserTask" }, options));
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      if (options) {
 | 
					 | 
				
			||||||
        shape.businessObject.di.isExpanded = options.isExpanded;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      create.start(event, shape);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
</script>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<style scoped lang="scss">
 | 
					 | 
				
			||||||
.my-process-palette {
 | 
					 | 
				
			||||||
  box-sizing: border-box;
 | 
					 | 
				
			||||||
  padding: 80px 20px 20px 20px;
 | 
					 | 
				
			||||||
  .test-button {
 | 
					 | 
				
			||||||
    box-sizing: border-box;
 | 
					 | 
				
			||||||
    padding: 8px 16px;
 | 
					 | 
				
			||||||
    border-radius: 4px;
 | 
					 | 
				
			||||||
    border: 1px solid rgba(24, 144, 255, 0.8);
 | 
					 | 
				
			||||||
    cursor: pointer;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
</style>
 | 
					 | 
				
			||||||
@@ -1,197 +0,0 @@
 | 
				
			|||||||
<template>
 | 
					 | 
				
			||||||
  <div class="process-panel__container" :style="{ width: `${this.width}px` }">
 | 
					 | 
				
			||||||
    <el-collapse v-model="activeTab">
 | 
					 | 
				
			||||||
      <el-collapse-item name="base">
 | 
					 | 
				
			||||||
        <div slot="title" class="panel-tab__title"><i class="el-icon-info"></i>常规</div>
 | 
					 | 
				
			||||||
        <element-base-info :id-edit-disabled="idEditDisabled" :business-object="elementBusinessObject" :type="elementType"
 | 
					 | 
				
			||||||
                           :model="model" />
 | 
					 | 
				
			||||||
      </el-collapse-item>
 | 
					 | 
				
			||||||
      <el-collapse-item name="condition" v-if="elementType === 'Process'" key="message">
 | 
					 | 
				
			||||||
        <div slot="title" class="panel-tab__title"><i class="el-icon-s-comment"></i>消息与信号</div>
 | 
					 | 
				
			||||||
        <signal-and-massage />
 | 
					 | 
				
			||||||
      </el-collapse-item>
 | 
					 | 
				
			||||||
      <el-collapse-item name="condition" v-if="conditionFormVisible" key="condition">
 | 
					 | 
				
			||||||
        <div slot="title" class="panel-tab__title"><i class="el-icon-s-promotion"></i>流转条件</div>
 | 
					 | 
				
			||||||
        <flow-condition :business-object="elementBusinessObject" :type="elementType" />
 | 
					 | 
				
			||||||
      </el-collapse-item>
 | 
					 | 
				
			||||||
      <el-collapse-item name="condition" v-if="formVisible" key="form">
 | 
					 | 
				
			||||||
        <div slot="title" class="panel-tab__title"><i class="el-icon-s-order"></i>表单</div>
 | 
					 | 
				
			||||||
<!--        <element-form :id="elementId" :type="elementType" />-->
 | 
					 | 
				
			||||||
        友情提示:使用 <router-link target="_blank" :to="{path:'/bpm/manager/form'}"><el-link type="danger">流程表单</el-link> </router-link>
 | 
					 | 
				
			||||||
        替代,提供更好的表单设计功能
 | 
					 | 
				
			||||||
      </el-collapse-item>
 | 
					 | 
				
			||||||
      <el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task">
 | 
					 | 
				
			||||||
        <div slot="title" class="panel-tab__title"><i class="el-icon-s-claim"></i>任务</div>
 | 
					 | 
				
			||||||
        <element-task :id="elementId" :type="elementType" />
 | 
					 | 
				
			||||||
      </el-collapse-item>
 | 
					 | 
				
			||||||
      <el-collapse-item name="multiInstance" v-if="elementType.indexOf('Task') !== -1" key="multiInstance">
 | 
					 | 
				
			||||||
        <div slot="title" class="panel-tab__title"><i class="el-icon-s-help"></i>多实例</div>
 | 
					 | 
				
			||||||
        <element-multi-instance :business-object="elementBusinessObject" :type="elementType" />
 | 
					 | 
				
			||||||
      </el-collapse-item>
 | 
					 | 
				
			||||||
      <el-collapse-item name="listeners" key="listeners">
 | 
					 | 
				
			||||||
        <div slot="title" class="panel-tab__title"><i class="el-icon-message-solid"></i>执行监听器</div>
 | 
					 | 
				
			||||||
        <element-listeners :id="elementId" :type="elementType" />
 | 
					 | 
				
			||||||
      </el-collapse-item>
 | 
					 | 
				
			||||||
      <el-collapse-item name="taskListeners" v-if="elementType === 'UserTask'" key="taskListeners">
 | 
					 | 
				
			||||||
        <div slot="title" class="panel-tab__title"><i class="el-icon-message-solid"></i>任务监听器</div>
 | 
					 | 
				
			||||||
        <user-task-listeners :id="elementId" :type="elementType" />
 | 
					 | 
				
			||||||
      </el-collapse-item>
 | 
					 | 
				
			||||||
      <el-collapse-item name="extensions" key="extensions">
 | 
					 | 
				
			||||||
        <div slot="title" class="panel-tab__title"><i class="el-icon-circle-plus"></i>扩展属性</div>
 | 
					 | 
				
			||||||
        <element-properties :id="elementId" :type="elementType" />
 | 
					 | 
				
			||||||
      </el-collapse-item>
 | 
					 | 
				
			||||||
      <el-collapse-item name="other" key="other">
 | 
					 | 
				
			||||||
        <div slot="title" class="panel-tab__title"><i class="el-icon-s-promotion"></i>其他</div>
 | 
					 | 
				
			||||||
        <element-other-config :id="elementId" />
 | 
					 | 
				
			||||||
      </el-collapse-item>
 | 
					 | 
				
			||||||
    </el-collapse>
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
</template>
 | 
					 | 
				
			||||||
<script>
 | 
					 | 
				
			||||||
import ElementBaseInfo from "./base/ElementBaseInfo";
 | 
					 | 
				
			||||||
import ElementOtherConfig from "./other/ElementOtherConfig";
 | 
					 | 
				
			||||||
import ElementTask from "./task/ElementTask";
 | 
					 | 
				
			||||||
import ElementMultiInstance from "./multi-instance/ElementMultiInstance";
 | 
					 | 
				
			||||||
import FlowCondition from "./flow-condition/FlowCondition";
 | 
					 | 
				
			||||||
import SignalAndMassage from "./signal-message/SignalAndMessage";
 | 
					 | 
				
			||||||
import ElementListeners from "./listeners/ElementListeners";
 | 
					 | 
				
			||||||
import ElementProperties from "./properties/ElementProperties";
 | 
					 | 
				
			||||||
import ElementForm from "./form/ElementForm";
 | 
					 | 
				
			||||||
import UserTaskListeners from "./listeners/UserTaskListeners";
 | 
					 | 
				
			||||||
/**
 | 
					 | 
				
			||||||
 * 侧边栏
 | 
					 | 
				
			||||||
 * @Author MiyueFE
 | 
					 | 
				
			||||||
 * @Home https://github.com/miyuesc
 | 
					 | 
				
			||||||
 * @Date 2021年3月31日18:57:51
 | 
					 | 
				
			||||||
 */
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  name: "MyPropertiesPanel",
 | 
					 | 
				
			||||||
  components: {
 | 
					 | 
				
			||||||
    UserTaskListeners,
 | 
					 | 
				
			||||||
    ElementForm,
 | 
					 | 
				
			||||||
    ElementProperties,
 | 
					 | 
				
			||||||
    ElementListeners,
 | 
					 | 
				
			||||||
    SignalAndMassage,
 | 
					 | 
				
			||||||
    FlowCondition,
 | 
					 | 
				
			||||||
    ElementMultiInstance,
 | 
					 | 
				
			||||||
    ElementTask,
 | 
					 | 
				
			||||||
    ElementOtherConfig,
 | 
					 | 
				
			||||||
    ElementBaseInfo
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  componentName: "MyPropertiesPanel",
 | 
					 | 
				
			||||||
  props: {
 | 
					 | 
				
			||||||
    bpmnModeler: Object,
 | 
					 | 
				
			||||||
    prefix: {
 | 
					 | 
				
			||||||
      type: String,
 | 
					 | 
				
			||||||
      default: "camunda"
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    width: {
 | 
					 | 
				
			||||||
      type: Number,
 | 
					 | 
				
			||||||
      default: 480
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    idEditDisabled: {
 | 
					 | 
				
			||||||
      type: Boolean,
 | 
					 | 
				
			||||||
      default: false
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    model: Object, // 流程模型的数据
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  provide() {
 | 
					 | 
				
			||||||
    return {
 | 
					 | 
				
			||||||
      prefix: this.prefix,
 | 
					 | 
				
			||||||
      width: this.width
 | 
					 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  data() {
 | 
					 | 
				
			||||||
    return {
 | 
					 | 
				
			||||||
      activeTab: "base",
 | 
					 | 
				
			||||||
      elementId: "",
 | 
					 | 
				
			||||||
      elementType: "",
 | 
					 | 
				
			||||||
      elementBusinessObject: {}, // 元素 businessObject 镜像,提供给需要做判断的组件使用
 | 
					 | 
				
			||||||
      conditionFormVisible: false, // 流转条件设置
 | 
					 | 
				
			||||||
      formVisible: false // 表单配置
 | 
					 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  watch: {
 | 
					 | 
				
			||||||
    elementId: {
 | 
					 | 
				
			||||||
      handler() {
 | 
					 | 
				
			||||||
        this.activeTab = "base";
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  created() {
 | 
					 | 
				
			||||||
    this.initModels();
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  methods: {
 | 
					 | 
				
			||||||
    initModels() {
 | 
					 | 
				
			||||||
      // 初始化 modeler 以及其他 moddle
 | 
					 | 
				
			||||||
      if (!this.bpmnModeler) {
 | 
					 | 
				
			||||||
        // 避免加载时 流程图 并未加载完成
 | 
					 | 
				
			||||||
        this.timer = setTimeout(() => this.initModels(), 10);
 | 
					 | 
				
			||||||
        return;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      if (this.timer) clearTimeout(this.timer);
 | 
					 | 
				
			||||||
      window.bpmnInstances = {
 | 
					 | 
				
			||||||
        modeler: this.bpmnModeler,
 | 
					 | 
				
			||||||
        modeling: this.bpmnModeler.get("modeling"),
 | 
					 | 
				
			||||||
        moddle: this.bpmnModeler.get("moddle"),
 | 
					 | 
				
			||||||
        eventBus: this.bpmnModeler.get("eventBus"),
 | 
					 | 
				
			||||||
        bpmnFactory: this.bpmnModeler.get("bpmnFactory"),
 | 
					 | 
				
			||||||
        elementFactory: this.bpmnModeler.get("elementFactory"),
 | 
					 | 
				
			||||||
        elementRegistry: this.bpmnModeler.get("elementRegistry"),
 | 
					 | 
				
			||||||
        replace: this.bpmnModeler.get("replace"),
 | 
					 | 
				
			||||||
        selection: this.bpmnModeler.get("selection")
 | 
					 | 
				
			||||||
      };
 | 
					 | 
				
			||||||
      this.getActiveElement();
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    getActiveElement() {
 | 
					 | 
				
			||||||
      // 初始第一个选中元素 bpmn:Process
 | 
					 | 
				
			||||||
      this.initFormOnChanged(null);
 | 
					 | 
				
			||||||
      this.bpmnModeler.on("import.done", e => {
 | 
					 | 
				
			||||||
        this.initFormOnChanged(null);
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
      // 监听选择事件,修改当前激活的元素以及表单
 | 
					 | 
				
			||||||
      this.bpmnModeler.on("selection.changed", ({ newSelection }) => {
 | 
					 | 
				
			||||||
        this.initFormOnChanged(newSelection[0] || null);
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
      this.bpmnModeler.on("element.changed", ({ element }) => {
 | 
					 | 
				
			||||||
        // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候,更新表单的元素与原选中元素不一致。
 | 
					 | 
				
			||||||
        if (element && element.id === this.elementId) {
 | 
					 | 
				
			||||||
          this.initFormOnChanged(element);
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 初始化数据
 | 
					 | 
				
			||||||
    initFormOnChanged(element) {
 | 
					 | 
				
			||||||
      let activatedElement = element;
 | 
					 | 
				
			||||||
      if (!activatedElement) {
 | 
					 | 
				
			||||||
        activatedElement =
 | 
					 | 
				
			||||||
          window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Process") ??
 | 
					 | 
				
			||||||
          window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Collaboration");
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      if (!activatedElement) return;
 | 
					 | 
				
			||||||
      console.log(`
 | 
					 | 
				
			||||||
              ----------
 | 
					 | 
				
			||||||
      select element changed:
 | 
					 | 
				
			||||||
                id:  ${activatedElement.id}
 | 
					 | 
				
			||||||
              type:  ${activatedElement.businessObject.$type}
 | 
					 | 
				
			||||||
              ----------
 | 
					 | 
				
			||||||
              `);
 | 
					 | 
				
			||||||
      console.log("businessObject: ", activatedElement.businessObject);
 | 
					 | 
				
			||||||
      window.bpmnInstances.bpmnElement = activatedElement;
 | 
					 | 
				
			||||||
      this.bpmnElement = activatedElement;
 | 
					 | 
				
			||||||
      this.elementId = activatedElement.id;
 | 
					 | 
				
			||||||
      this.elementType = activatedElement.type.split(":")[1] || "";
 | 
					 | 
				
			||||||
      this.elementBusinessObject = JSON.parse(JSON.stringify(activatedElement.businessObject));
 | 
					 | 
				
			||||||
      this.conditionFormVisible = !!(
 | 
					 | 
				
			||||||
        this.elementType === "SequenceFlow" &&
 | 
					 | 
				
			||||||
        activatedElement.source &&
 | 
					 | 
				
			||||||
        activatedElement.source.type.indexOf("StartEvent") === -1
 | 
					 | 
				
			||||||
      );
 | 
					 | 
				
			||||||
      this.formVisible = this.elementType === "UserTask" || this.elementType === "StartEvent";
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    beforeDestroy() {
 | 
					 | 
				
			||||||
      window.bpmnInstances = null;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
</script>
 | 
					 | 
				
			||||||
@@ -1,147 +0,0 @@
 | 
				
			|||||||
<template>
 | 
					 | 
				
			||||||
  <div class="panel-tab__content">
 | 
					 | 
				
			||||||
    <el-form
 | 
					 | 
				
			||||||
      size="mini"
 | 
					 | 
				
			||||||
      label-width="90px"
 | 
					 | 
				
			||||||
      :model="model"
 | 
					 | 
				
			||||||
      :rules="rules"
 | 
					 | 
				
			||||||
      @submit.native.prevent
 | 
					 | 
				
			||||||
    >
 | 
					 | 
				
			||||||
      <div v-if="elementBaseInfo.$type === 'bpmn:Process'">
 | 
					 | 
				
			||||||
        <!-- 如果是 Process 信息的时候,使用自定义表单 -->
 | 
					 | 
				
			||||||
        <el-link
 | 
					 | 
				
			||||||
          href="https://doc.iocoder.cn/bpm/#_3-%E6%B5%81%E7%A8%8B%E5%9B%BE%E7%A4%BA%E4%BE%8B"
 | 
					 | 
				
			||||||
          type="danger"
 | 
					 | 
				
			||||||
          target="_blank"
 | 
					 | 
				
			||||||
          >如何实现实现会签、或签?</el-link
 | 
					 | 
				
			||||||
        >
 | 
					 | 
				
			||||||
        <el-form-item label="流程标识" prop="key">
 | 
					 | 
				
			||||||
          <el-input
 | 
					 | 
				
			||||||
            v-model="model.key"
 | 
					 | 
				
			||||||
            placeholder="请输入流标标识"
 | 
					 | 
				
			||||||
            :disabled="model.id !== undefined && model.id.length > 0"
 | 
					 | 
				
			||||||
            @change="handleKeyUpdate"
 | 
					 | 
				
			||||||
          />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="流程名称" prop="name">
 | 
					 | 
				
			||||||
          <el-input
 | 
					 | 
				
			||||||
            v-model="model.name"
 | 
					 | 
				
			||||||
            placeholder="请输入流程名称"
 | 
					 | 
				
			||||||
            clearable
 | 
					 | 
				
			||||||
            @change="handleNameUpdate"
 | 
					 | 
				
			||||||
          />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
      </div>
 | 
					 | 
				
			||||||
      <div v-else>
 | 
					 | 
				
			||||||
        <el-form-item label="ID">
 | 
					 | 
				
			||||||
          <el-input
 | 
					 | 
				
			||||||
            v-model="elementBaseInfo.id"
 | 
					 | 
				
			||||||
            clearable
 | 
					 | 
				
			||||||
            @change="updateBaseInfo('id')"
 | 
					 | 
				
			||||||
          />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="名称">
 | 
					 | 
				
			||||||
          <el-input
 | 
					 | 
				
			||||||
            v-model="elementBaseInfo.name"
 | 
					 | 
				
			||||||
            clearable
 | 
					 | 
				
			||||||
            @change="updateBaseInfo('name')"
 | 
					 | 
				
			||||||
          />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
      </div>
 | 
					 | 
				
			||||||
    </el-form>
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
</template>
 | 
					 | 
				
			||||||
<script>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  name: "ElementBaseInfo",
 | 
					 | 
				
			||||||
  props: {
 | 
					 | 
				
			||||||
    businessObject: Object,
 | 
					 | 
				
			||||||
    model: Object, // 流程模型的数据
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  data () {
 | 
					 | 
				
			||||||
    return {
 | 
					 | 
				
			||||||
      elementBaseInfo: {},
 | 
					 | 
				
			||||||
      // 流程表单的下拉框的数据
 | 
					 | 
				
			||||||
      forms: [],
 | 
					 | 
				
			||||||
      // 流程模型的校验
 | 
					 | 
				
			||||||
      rules: {
 | 
					 | 
				
			||||||
        key: [{ required: true, message: "流程标识不能为空", trigger: "blur" }],
 | 
					 | 
				
			||||||
        name: [{ required: true, message: "流程名称不能为空", trigger: "blur" }],
 | 
					 | 
				
			||||||
      },
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  watch: {
 | 
					 | 
				
			||||||
    businessObject: {
 | 
					 | 
				
			||||||
      immediate: false,
 | 
					 | 
				
			||||||
      handler: function (val) {
 | 
					 | 
				
			||||||
        if (val) {
 | 
					 | 
				
			||||||
          this.$nextTick(() => this.resetBaseInfo())
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 'model.key': {
 | 
					 | 
				
			||||||
    //   immediate: false,
 | 
					 | 
				
			||||||
    //   handler: function (val) {
 | 
					 | 
				
			||||||
    //     this.handleKeyUpdate(val)
 | 
					 | 
				
			||||||
    //   }
 | 
					 | 
				
			||||||
    // }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  created () {
 | 
					 | 
				
			||||||
    // 针对上传的 bpmn 流程图时,需要延迟 1 秒的时间,保证 key 和 name 的更新
 | 
					 | 
				
			||||||
    setTimeout(() => {
 | 
					 | 
				
			||||||
      this.handleKeyUpdate(this.model.key)
 | 
					 | 
				
			||||||
      this.handleNameUpdate(this.model.name)
 | 
					 | 
				
			||||||
    }, 1000)
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  methods: {
 | 
					 | 
				
			||||||
    resetBaseInfo () {
 | 
					 | 
				
			||||||
      this.bpmnElement = window?.bpmnInstances?.bpmnElement
 | 
					 | 
				
			||||||
      this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject))
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    handleKeyUpdate (value) {
 | 
					 | 
				
			||||||
      // 校验 value 的值,只有 XML NCName 通过的情况下,才进行赋值。否则,会导致流程图报错,无法绘制的问题
 | 
					 | 
				
			||||||
      if (!value) {
 | 
					 | 
				
			||||||
        return
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      if (!value.match(/[a-zA-Z_][\-_.0-9a-zA-Z$]*/)) {
 | 
					 | 
				
			||||||
        console.log('key 不满足 XML NCName 规则,所以不进行赋值')
 | 
					 | 
				
			||||||
        return
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      console.log('key 满足 XML NCName 规则,所以进行赋值')
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      // 在 BPMN 的 XML 中,流程标识 key,其实对应的是 id 节点
 | 
					 | 
				
			||||||
      this.elementBaseInfo['id'] = value
 | 
					 | 
				
			||||||
      this.updateBaseInfo('id')
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    handleNameUpdate (value) {
 | 
					 | 
				
			||||||
      if (!value) {
 | 
					 | 
				
			||||||
        return
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      this.elementBaseInfo['name'] = value
 | 
					 | 
				
			||||||
      this.updateBaseInfo('name')
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    handleDescriptionUpdate (value) {
 | 
					 | 
				
			||||||
      // TODO 芋艿:documentation 暂时无法修改,后续在看看
 | 
					 | 
				
			||||||
      // this.elementBaseInfo['documentation'] = value;
 | 
					 | 
				
			||||||
      // this.updateBaseInfo('documentation');
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    updateBaseInfo (key) {
 | 
					 | 
				
			||||||
      // 触发 elementBaseInfo 对应的字段
 | 
					 | 
				
			||||||
      const attrObj = Object.create(null)
 | 
					 | 
				
			||||||
      attrObj[key] = this.elementBaseInfo[key]
 | 
					 | 
				
			||||||
      if (key === "id") {
 | 
					 | 
				
			||||||
        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
 | 
					 | 
				
			||||||
          id: this.elementBaseInfo[key],
 | 
					 | 
				
			||||||
          di: { id: `${this.elementBaseInfo[key]}_di` }
 | 
					 | 
				
			||||||
        })
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, attrObj)
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  beforeDestroy () {
 | 
					 | 
				
			||||||
    this.bpmnElement = null
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
</script>
 | 
					 | 
				
			||||||
@@ -1,142 +0,0 @@
 | 
				
			|||||||
<template>
 | 
					 | 
				
			||||||
  <div class="panel-tab__content">
 | 
					 | 
				
			||||||
    <el-form :model="flowConditionForm" label-width="90px" size="mini" @submit.native.prevent>
 | 
					 | 
				
			||||||
      <el-form-item label="流转类型">
 | 
					 | 
				
			||||||
        <el-select v-model="flowConditionForm.type" @change="updateFlowType">
 | 
					 | 
				
			||||||
          <el-option label="普通流转路径" value="normal" />
 | 
					 | 
				
			||||||
          <el-option label="默认流转路径" value="default" />
 | 
					 | 
				
			||||||
          <el-option label="条件流转路径" value="condition" />
 | 
					 | 
				
			||||||
        </el-select>
 | 
					 | 
				
			||||||
      </el-form-item>
 | 
					 | 
				
			||||||
      <el-form-item label="条件格式" v-if="flowConditionForm.type === 'condition'" key="condition">
 | 
					 | 
				
			||||||
        <el-select v-model="flowConditionForm.conditionType">
 | 
					 | 
				
			||||||
          <el-option label="表达式" value="expression" />
 | 
					 | 
				
			||||||
          <el-option label="脚本" value="script" />
 | 
					 | 
				
			||||||
        </el-select>
 | 
					 | 
				
			||||||
      </el-form-item>
 | 
					 | 
				
			||||||
      <el-form-item label="表达式" v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'expression'" key="express">
 | 
					 | 
				
			||||||
        <el-input v-model="flowConditionForm.body" style="width:192px;"  clearable @change="updateFlowCondition" />
 | 
					 | 
				
			||||||
      </el-form-item>
 | 
					 | 
				
			||||||
      <template v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'script'">
 | 
					 | 
				
			||||||
        <el-form-item label="脚本语言" key="language">
 | 
					 | 
				
			||||||
          <el-input v-model="flowConditionForm.language" clearable @change="updateFlowCondition" />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="脚本类型" key="scriptType">
 | 
					 | 
				
			||||||
          <el-select v-model="flowConditionForm.scriptType">
 | 
					 | 
				
			||||||
            <el-option label="内联脚本" value="inlineScript" />
 | 
					 | 
				
			||||||
            <el-option label="外部脚本" value="externalScript" />
 | 
					 | 
				
			||||||
          </el-select>
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="脚本" v-if="flowConditionForm.scriptType === 'inlineScript'" key="body">
 | 
					 | 
				
			||||||
          <el-input v-model="flowConditionForm.body" type="textarea" clearable @change="updateFlowCondition" />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="资源地址" v-if="flowConditionForm.scriptType === 'externalScript'" key="resource">
 | 
					 | 
				
			||||||
          <el-input v-model="flowConditionForm.resource" clearable @change="updateFlowCondition" />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
      </template>
 | 
					 | 
				
			||||||
    </el-form>
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
</template>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<script>
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  name: "FlowCondition",
 | 
					 | 
				
			||||||
  props: {
 | 
					 | 
				
			||||||
    businessObject: Object,
 | 
					 | 
				
			||||||
    type: String
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  data() {
 | 
					 | 
				
			||||||
    return {
 | 
					 | 
				
			||||||
      flowConditionForm: {}
 | 
					 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  watch: {
 | 
					 | 
				
			||||||
    businessObject: {
 | 
					 | 
				
			||||||
      immediate: true,
 | 
					 | 
				
			||||||
      handler() {
 | 
					 | 
				
			||||||
        this.$nextTick(() => this.resetFlowCondition());
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  methods: {
 | 
					 | 
				
			||||||
    resetFlowCondition() {
 | 
					 | 
				
			||||||
      this.bpmnElement = window.bpmnInstances.bpmnElement;
 | 
					 | 
				
			||||||
      this.bpmnElementSource = this.bpmnElement.source;
 | 
					 | 
				
			||||||
      this.bpmnElementSourceRef = this.bpmnElement.businessObject.sourceRef;
 | 
					 | 
				
			||||||
      if (this.bpmnElementSourceRef && this.bpmnElementSourceRef.default && this.bpmnElementSourceRef.default.id === this.bpmnElement.id) {
 | 
					 | 
				
			||||||
        // 默认
 | 
					 | 
				
			||||||
        this.flowConditionForm = { type: "default" };
 | 
					 | 
				
			||||||
      } else if (!this.bpmnElement.businessObject.conditionExpression) {
 | 
					 | 
				
			||||||
        // 普通
 | 
					 | 
				
			||||||
        this.flowConditionForm = { type: "normal" };
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        // 带条件
 | 
					 | 
				
			||||||
        const conditionExpression = this.bpmnElement.businessObject.conditionExpression;
 | 
					 | 
				
			||||||
        this.flowConditionForm = { ...conditionExpression, type: "condition" };
 | 
					 | 
				
			||||||
        // resource 可直接标识 是否是外部资源脚本
 | 
					 | 
				
			||||||
        if (this.flowConditionForm.resource) {
 | 
					 | 
				
			||||||
          this.$set(this.flowConditionForm, "conditionType", "script");
 | 
					 | 
				
			||||||
          this.$set(this.flowConditionForm, "scriptType", "externalScript");
 | 
					 | 
				
			||||||
          return;
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
        if (conditionExpression.language) {
 | 
					 | 
				
			||||||
          this.$set(this.flowConditionForm, "conditionType", "script");
 | 
					 | 
				
			||||||
          this.$set(this.flowConditionForm, "scriptType", "inlineScript");
 | 
					 | 
				
			||||||
          return;
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
        this.$set(this.flowConditionForm, "conditionType", "expression");
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    updateFlowType(flowType) {
 | 
					 | 
				
			||||||
      // 正常条件类
 | 
					 | 
				
			||||||
      if (flowType === "condition") {
 | 
					 | 
				
			||||||
        this.flowConditionRef = window.bpmnInstances.moddle.create("bpmn:FormalExpression");
 | 
					 | 
				
			||||||
        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
 | 
					 | 
				
			||||||
          conditionExpression: this.flowConditionRef
 | 
					 | 
				
			||||||
        });
 | 
					 | 
				
			||||||
        return;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      // 默认路径
 | 
					 | 
				
			||||||
      if (flowType === "default") {
 | 
					 | 
				
			||||||
        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
 | 
					 | 
				
			||||||
          conditionExpression: null
 | 
					 | 
				
			||||||
        });
 | 
					 | 
				
			||||||
        window.bpmnInstances.modeling.updateProperties(this.bpmnElementSource, {
 | 
					 | 
				
			||||||
          default: this.bpmnElement
 | 
					 | 
				
			||||||
        });
 | 
					 | 
				
			||||||
        return;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      // 正常路径,如果来源节点的默认路径是当前连线时,清除父元素的默认路径配置
 | 
					 | 
				
			||||||
      if (this.bpmnElementSourceRef.default && this.bpmnElementSourceRef.default.id === this.bpmnElement.id) {
 | 
					 | 
				
			||||||
        window.bpmnInstances.modeling.updateProperties(this.bpmnElementSource, {
 | 
					 | 
				
			||||||
          default: null
 | 
					 | 
				
			||||||
        });
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
 | 
					 | 
				
			||||||
        conditionExpression: null
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    updateFlowCondition() {
 | 
					 | 
				
			||||||
      let { conditionType, scriptType, body, resource, language } = this.flowConditionForm;
 | 
					 | 
				
			||||||
      let condition;
 | 
					 | 
				
			||||||
      if (conditionType === "expression") {
 | 
					 | 
				
			||||||
        condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body });
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        if (scriptType === "inlineScript") {
 | 
					 | 
				
			||||||
          condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body, language });
 | 
					 | 
				
			||||||
          this.$set(this.flowConditionForm, "resource", "");
 | 
					 | 
				
			||||||
        } else {
 | 
					 | 
				
			||||||
          this.$set(this.flowConditionForm, "body", "");
 | 
					 | 
				
			||||||
          condition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { resource, language });
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { conditionExpression: condition });
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  beforeDestroy() {
 | 
					 | 
				
			||||||
    this.bpmnElement = null;
 | 
					 | 
				
			||||||
    this.bpmnElementSource = null;
 | 
					 | 
				
			||||||
    this.bpmnElementSourceRef = null;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
</script>
 | 
					 | 
				
			||||||
@@ -1,361 +0,0 @@
 | 
				
			|||||||
<template>
 | 
					 | 
				
			||||||
  <div class="panel-tab__content">
 | 
					 | 
				
			||||||
    <el-form size="mini" label-width="80px" @submit.native.prevent>
 | 
					 | 
				
			||||||
      <el-form-item label="表单标识">
 | 
					 | 
				
			||||||
        <el-input v-model="formKey" clearable @change="updateElementFormKey" />
 | 
					 | 
				
			||||||
      </el-form-item>
 | 
					 | 
				
			||||||
      <el-form-item label="业务标识">
 | 
					 | 
				
			||||||
        <el-select v-model="businessKey" @change="updateElementBusinessKey">
 | 
					 | 
				
			||||||
          <el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />
 | 
					 | 
				
			||||||
          <el-option label="无" value="" />
 | 
					 | 
				
			||||||
        </el-select>
 | 
					 | 
				
			||||||
      </el-form-item>
 | 
					 | 
				
			||||||
    </el-form>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    <!--字段列表-->
 | 
					 | 
				
			||||||
    <div class="element-property list-property">
 | 
					 | 
				
			||||||
      <el-divider><i class="el-icon-coin"></i> 表单字段</el-divider>
 | 
					 | 
				
			||||||
      <el-table :data="fieldList" size="mini" max-height="240" border fit>
 | 
					 | 
				
			||||||
        <el-table-column label="序号" type="index" width="50px" />
 | 
					 | 
				
			||||||
        <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />
 | 
					 | 
				
			||||||
        <el-table-column label="字段类型" prop="type" min-width="80px" :formatter="row => fieldType[row.type] || row.type" show-overflow-tooltip />
 | 
					 | 
				
			||||||
        <el-table-column label="默认值" prop="defaultValue" min-width="80px" show-overflow-tooltip />
 | 
					 | 
				
			||||||
        <el-table-column label="操作" width="90px">
 | 
					 | 
				
			||||||
          <template v-slot="{ row, $index }">
 | 
					 | 
				
			||||||
            <el-button size="mini" type="text" @click="openFieldForm(row, $index)">编辑</el-button>
 | 
					 | 
				
			||||||
            <el-divider direction="vertical" />
 | 
					 | 
				
			||||||
            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeField(row, $index)">移除</el-button>
 | 
					 | 
				
			||||||
          </template>
 | 
					 | 
				
			||||||
        </el-table-column>
 | 
					 | 
				
			||||||
      </el-table>
 | 
					 | 
				
			||||||
    </div>
 | 
					 | 
				
			||||||
    <div class="element-drawer__button">
 | 
					 | 
				
			||||||
      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openFieldForm(null, -1)">添加字段</el-button>
 | 
					 | 
				
			||||||
    </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    <!--字段配置侧边栏-->
 | 
					 | 
				
			||||||
    <el-drawer :visible.sync="fieldModelVisible" title="字段配置" :size="`${width}px`" append-to-body destroy-on-close>
 | 
					 | 
				
			||||||
      <el-form :model="formFieldForm" label-width="90px" size="mini" @submit.native.prevent>
 | 
					 | 
				
			||||||
        <el-form-item label="字段ID">
 | 
					 | 
				
			||||||
          <el-input v-model="formFieldForm.id" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="类型">
 | 
					 | 
				
			||||||
          <el-select v-model="formFieldForm.typeType" placeholder="请选择字段类型" clearable @change="changeFieldTypeType">
 | 
					 | 
				
			||||||
            <el-option v-for="(value, key) of fieldType" :label="value" :value="key" :key="key" />
 | 
					 | 
				
			||||||
          </el-select>
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'">
 | 
					 | 
				
			||||||
          <el-input v-model="formFieldForm.type" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="名称">
 | 
					 | 
				
			||||||
          <el-input v-model="formFieldForm.label" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'">
 | 
					 | 
				
			||||||
          <el-input v-model="formFieldForm.datePattern" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="默认值">
 | 
					 | 
				
			||||||
          <el-input v-model="formFieldForm.defaultValue" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
      </el-form>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      <!-- 枚举值设置 -->
 | 
					 | 
				
			||||||
      <template v-if="formFieldForm.type === 'enum'">
 | 
					 | 
				
			||||||
        <el-divider key="enum-divider" />
 | 
					 | 
				
			||||||
        <p class="listener-filed__title" key="enum-title">
 | 
					 | 
				
			||||||
          <span><i class="el-icon-menu"></i>枚举值列表:</span>
 | 
					 | 
				
			||||||
          <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'enum')">添加枚举值</el-button>
 | 
					 | 
				
			||||||
        </p>
 | 
					 | 
				
			||||||
        <el-table :data="fieldEnumList" size="mini" key="enum-table" max-height="240" border fit>
 | 
					 | 
				
			||||||
          <el-table-column label="序号" width="50px" type="index" />
 | 
					 | 
				
			||||||
          <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />
 | 
					 | 
				
			||||||
          <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />
 | 
					 | 
				
			||||||
          <el-table-column label="操作" width="90px">
 | 
					 | 
				
			||||||
            <template v-slot="{ row, $index }">
 | 
					 | 
				
			||||||
              <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'enum')">编辑</el-button>
 | 
					 | 
				
			||||||
              <el-divider direction="vertical" />
 | 
					 | 
				
			||||||
              <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'enum')">移除</el-button>
 | 
					 | 
				
			||||||
            </template>
 | 
					 | 
				
			||||||
          </el-table-column>
 | 
					 | 
				
			||||||
        </el-table>
 | 
					 | 
				
			||||||
      </template>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      <!-- 校验规则 -->
 | 
					 | 
				
			||||||
      <el-divider key="validation-divider" />
 | 
					 | 
				
			||||||
      <p class="listener-filed__title" key="validation-title">
 | 
					 | 
				
			||||||
        <span><i class="el-icon-menu"></i>约束条件列表:</span>
 | 
					 | 
				
			||||||
        <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'constraint')">添加约束</el-button>
 | 
					 | 
				
			||||||
      </p>
 | 
					 | 
				
			||||||
      <el-table :data="fieldConstraintsList" size="mini" key="validation-table" max-height="240" border fit>
 | 
					 | 
				
			||||||
        <el-table-column label="序号" width="50px" type="index" />
 | 
					 | 
				
			||||||
        <el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip />
 | 
					 | 
				
			||||||
        <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />
 | 
					 | 
				
			||||||
        <el-table-column label="操作" width="90px">
 | 
					 | 
				
			||||||
          <template v-slot="{ row, $index }">
 | 
					 | 
				
			||||||
            <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'constraint')">编辑</el-button>
 | 
					 | 
				
			||||||
            <el-divider direction="vertical" />
 | 
					 | 
				
			||||||
            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'constraint')">移除</el-button>
 | 
					 | 
				
			||||||
          </template>
 | 
					 | 
				
			||||||
        </el-table-column>
 | 
					 | 
				
			||||||
      </el-table>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      <!-- 表单属性 -->
 | 
					 | 
				
			||||||
      <el-divider key="property-divider" />
 | 
					 | 
				
			||||||
      <p class="listener-filed__title" key="property-title">
 | 
					 | 
				
			||||||
        <span><i class="el-icon-menu"></i>字段属性列表:</span>
 | 
					 | 
				
			||||||
        <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'property')">添加属性</el-button>
 | 
					 | 
				
			||||||
      </p>
 | 
					 | 
				
			||||||
      <el-table :data="fieldPropertiesList" size="mini" key="property-table" max-height="240" border fit>
 | 
					 | 
				
			||||||
        <el-table-column label="序号" width="50px" type="index" />
 | 
					 | 
				
			||||||
        <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />
 | 
					 | 
				
			||||||
        <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
 | 
					 | 
				
			||||||
        <el-table-column label="操作" width="90px">
 | 
					 | 
				
			||||||
          <template v-slot="{ row, $index }">
 | 
					 | 
				
			||||||
            <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'property')">编辑</el-button>
 | 
					 | 
				
			||||||
            <el-divider direction="vertical" />
 | 
					 | 
				
			||||||
            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'property')">移除</el-button>
 | 
					 | 
				
			||||||
          </template>
 | 
					 | 
				
			||||||
        </el-table-column>
 | 
					 | 
				
			||||||
      </el-table>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      <!-- 底部按钮 -->
 | 
					 | 
				
			||||||
      <div class="element-drawer__button">
 | 
					 | 
				
			||||||
        <el-button size="mini">取 消</el-button>
 | 
					 | 
				
			||||||
        <el-button size="mini" type="primary" @click="saveField">保 存</el-button>
 | 
					 | 
				
			||||||
      </div>
 | 
					 | 
				
			||||||
    </el-drawer>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    <el-dialog :visible.sync="fieldOptionModelVisible" :title="optionModelTitle" width="600px" append-to-body destroy-on-close>
 | 
					 | 
				
			||||||
      <el-form :model="fieldOptionForm" size="mini" label-width="96px" @submit.native.prevent>
 | 
					 | 
				
			||||||
        <el-form-item label="编号/ID" v-if="fieldOptionType !== 'constraint'" key="option-id">
 | 
					 | 
				
			||||||
          <el-input v-model="fieldOptionForm.id" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="名称" v-if="fieldOptionType !== 'property'" key="option-name">
 | 
					 | 
				
			||||||
          <el-input v-model="fieldOptionForm.name" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="配置" v-if="fieldOptionType === 'constraint'" key="option-config">
 | 
					 | 
				
			||||||
          <el-input v-model="fieldOptionForm.config" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="值" v-if="fieldOptionType === 'property'" key="option-value">
 | 
					 | 
				
			||||||
          <el-input v-model="fieldOptionForm.value" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
      </el-form>
 | 
					 | 
				
			||||||
      <template slot="footer">
 | 
					 | 
				
			||||||
        <el-button size="mini" @click="fieldOptionModelVisible = false">取 消</el-button>
 | 
					 | 
				
			||||||
        <el-button size="mini" type="primary" @click="saveFieldOption">确 定</el-button>
 | 
					 | 
				
			||||||
      </template>
 | 
					 | 
				
			||||||
    </el-dialog>
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
</template>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<script>
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  name: "ElementForm",
 | 
					 | 
				
			||||||
  props: {
 | 
					 | 
				
			||||||
    id: String,
 | 
					 | 
				
			||||||
    type: String
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  inject: {
 | 
					 | 
				
			||||||
    prefix: "prefix",
 | 
					 | 
				
			||||||
    width: "width"
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  data() {
 | 
					 | 
				
			||||||
    return {
 | 
					 | 
				
			||||||
      formKey: "",
 | 
					 | 
				
			||||||
      businessKey: "",
 | 
					 | 
				
			||||||
      optionModelTitle: "",
 | 
					 | 
				
			||||||
      fieldList: [],
 | 
					 | 
				
			||||||
      formFieldForm: {},
 | 
					 | 
				
			||||||
      fieldType: {
 | 
					 | 
				
			||||||
        long: "长整型",
 | 
					 | 
				
			||||||
        string: "字符串",
 | 
					 | 
				
			||||||
        boolean: "布尔类",
 | 
					 | 
				
			||||||
        date: "日期类",
 | 
					 | 
				
			||||||
        enum: "枚举类",
 | 
					 | 
				
			||||||
        custom: "自定义类型"
 | 
					 | 
				
			||||||
      },
 | 
					 | 
				
			||||||
      formFieldIndex: -1, // 编辑中的字段, -1 为新增
 | 
					 | 
				
			||||||
      formFieldOptionIndex: -1, // 编辑中的字段配置项, -1 为新增
 | 
					 | 
				
			||||||
      fieldModelVisible: false,
 | 
					 | 
				
			||||||
      fieldOptionModelVisible: false,
 | 
					 | 
				
			||||||
      fieldOptionForm: {}, // 当前激活的字段配置项数据
 | 
					 | 
				
			||||||
      fieldOptionType: "", // 当前激活的字段配置项弹窗 类型
 | 
					 | 
				
			||||||
      fieldEnumList: [], // 枚举值列表
 | 
					 | 
				
			||||||
      fieldConstraintsList: [], // 约束条件列表
 | 
					 | 
				
			||||||
      fieldPropertiesList: [] // 绑定属性列表
 | 
					 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  watch: {
 | 
					 | 
				
			||||||
    id: {
 | 
					 | 
				
			||||||
      immediate: true,
 | 
					 | 
				
			||||||
      handler(val) {
 | 
					 | 
				
			||||||
        val && val.length && this.$nextTick(() => this.resetFormList());
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  methods: {
 | 
					 | 
				
			||||||
    resetFormList() {
 | 
					 | 
				
			||||||
      this.bpmnELement = window.bpmnInstances.bpmnElement;
 | 
					 | 
				
			||||||
      this.formKey = this.bpmnELement.businessObject.formKey;
 | 
					 | 
				
			||||||
      // 获取元素扩展属性 或者 创建扩展属性
 | 
					 | 
				
			||||||
      this.elExtensionElements =
 | 
					 | 
				
			||||||
        this.bpmnELement.businessObject.get("extensionElements") || window.bpmnInstances.moddle.create("bpmn:ExtensionElements", { values: [] });
 | 
					 | 
				
			||||||
      // 获取元素表单配置 或者 创建新的表单配置
 | 
					 | 
				
			||||||
      this.formData =
 | 
					 | 
				
			||||||
        this.elExtensionElements.values.filter(ex => ex.$type === `${this.prefix}:FormData`)?.[0] ||
 | 
					 | 
				
			||||||
        window.bpmnInstances.moddle.create(`${this.prefix}:FormData`, { fields: [] });
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      // 业务标识 businessKey, 绑定在 formData 中
 | 
					 | 
				
			||||||
      this.businessKey = this.formData.businessKey;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      // 保留剩余扩展元素,便于后面更新该元素对应属性
 | 
					 | 
				
			||||||
      this.otherExtensions = this.elExtensionElements.values.filter(ex => ex.$type !== `${this.prefix}:FormData`);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      // 复制原始值,填充表格
 | 
					 | 
				
			||||||
      this.fieldList = JSON.parse(JSON.stringify(this.formData.fields || []));
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      // 更新元素扩展属性,避免后续报错
 | 
					 | 
				
			||||||
      this.updateElementExtensions();
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    updateElementFormKey() {
 | 
					 | 
				
			||||||
      window.bpmnInstances.modeling.updateProperties(this.bpmnELement, { formKey: this.formKey });
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    updateElementBusinessKey() {
 | 
					 | 
				
			||||||
      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnELement, this.formData, { businessKey: this.businessKey });
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 根据类型调整字段type
 | 
					 | 
				
			||||||
    changeFieldTypeType(type) {
 | 
					 | 
				
			||||||
      this.$set(this.formFieldForm, "type", type === "custom" ? "" : type);
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    // 打开字段详情侧边栏
 | 
					 | 
				
			||||||
    openFieldForm(field, index) {
 | 
					 | 
				
			||||||
      this.formFieldIndex = index;
 | 
					 | 
				
			||||||
      if (index !== -1) {
 | 
					 | 
				
			||||||
        const FieldObject = this.formData.fields[index];
 | 
					 | 
				
			||||||
        this.formFieldForm = JSON.parse(JSON.stringify(field));
 | 
					 | 
				
			||||||
        // 设置自定义类型
 | 
					 | 
				
			||||||
        this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
 | 
					 | 
				
			||||||
        // 初始化枚举值列表
 | 
					 | 
				
			||||||
        field.type === "enum" && (this.fieldEnumList = JSON.parse(JSON.stringify(FieldObject?.values || [])));
 | 
					 | 
				
			||||||
        // 初始化约束条件列表
 | 
					 | 
				
			||||||
        this.fieldConstraintsList = JSON.parse(JSON.stringify(FieldObject?.validation?.constraints || []));
 | 
					 | 
				
			||||||
        // 初始化自定义属性列表
 | 
					 | 
				
			||||||
        this.fieldPropertiesList = JSON.parse(JSON.stringify(FieldObject?.properties?.values || []));
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        this.formFieldForm = {};
 | 
					 | 
				
			||||||
        // 初始化枚举值列表
 | 
					 | 
				
			||||||
        this.fieldEnumList = [];
 | 
					 | 
				
			||||||
        // 初始化约束条件列表
 | 
					 | 
				
			||||||
        this.fieldConstraintsList = [];
 | 
					 | 
				
			||||||
        // 初始化自定义属性列表
 | 
					 | 
				
			||||||
        this.fieldPropertiesList = [];
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      this.fieldModelVisible = true;
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 打开字段 某个 配置项 弹窗
 | 
					 | 
				
			||||||
    openFieldOptionForm(option, index, type) {
 | 
					 | 
				
			||||||
      this.fieldOptionModelVisible = true;
 | 
					 | 
				
			||||||
      this.fieldOptionType = type;
 | 
					 | 
				
			||||||
      this.formFieldOptionIndex = index;
 | 
					 | 
				
			||||||
      if (type === "property") {
 | 
					 | 
				
			||||||
        this.fieldOptionForm = option ? JSON.parse(JSON.stringify(option)) : {};
 | 
					 | 
				
			||||||
        return (this.optionModelTitle = "属性配置");
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      if (type === "enum") {
 | 
					 | 
				
			||||||
        this.fieldOptionForm = option ? JSON.parse(JSON.stringify(option)) : {};
 | 
					 | 
				
			||||||
        return (this.optionModelTitle = "枚举值配置");
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      this.fieldOptionForm = option ? JSON.parse(JSON.stringify(option)) : {};
 | 
					 | 
				
			||||||
      return (this.optionModelTitle = "约束条件配置");
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    // 保存字段 某个 配置项
 | 
					 | 
				
			||||||
    saveFieldOption() {
 | 
					 | 
				
			||||||
      if (this.formFieldOptionIndex === -1) {
 | 
					 | 
				
			||||||
        if (this.fieldOptionType === "property") {
 | 
					 | 
				
			||||||
          this.fieldPropertiesList.push(this.fieldOptionForm);
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
        if (this.fieldOptionType === "constraint") {
 | 
					 | 
				
			||||||
          this.fieldConstraintsList.push(this.fieldOptionForm);
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
        if (this.fieldOptionType === "enum") {
 | 
					 | 
				
			||||||
          this.fieldEnumList.push(this.fieldOptionForm);
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        this.fieldOptionType === "property" && this.fieldPropertiesList.splice(this.formFieldOptionIndex, 1, this.fieldOptionForm);
 | 
					 | 
				
			||||||
        this.fieldOptionType === "constraint" && this.fieldConstraintsList.splice(this.formFieldOptionIndex, 1, this.fieldOptionForm);
 | 
					 | 
				
			||||||
        this.fieldOptionType === "enum" && this.fieldEnumList.splice(this.formFieldOptionIndex, 1, this.fieldOptionForm);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      this.fieldOptionModelVisible = false;
 | 
					 | 
				
			||||||
      this.fieldOptionForm = {};
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 保存字段配置
 | 
					 | 
				
			||||||
    saveField() {
 | 
					 | 
				
			||||||
      const { id, type, label, defaultValue, datePattern } = this.formFieldForm;
 | 
					 | 
				
			||||||
      const Field = window.bpmnInstances.moddle.create(`${this.prefix}:FormField`, { id, type, label });
 | 
					 | 
				
			||||||
      defaultValue && (Field.defaultValue = defaultValue);
 | 
					 | 
				
			||||||
      datePattern && (Field.datePattern = datePattern);
 | 
					 | 
				
			||||||
      // 构建属性
 | 
					 | 
				
			||||||
      if (this.fieldPropertiesList && this.fieldPropertiesList.length) {
 | 
					 | 
				
			||||||
        const fieldPropertyList = this.fieldPropertiesList.map(fp => {
 | 
					 | 
				
			||||||
          return window.bpmnInstances.moddle.create(`${this.prefix}:Property`, { id: fp.id, value: fp.value });
 | 
					 | 
				
			||||||
        });
 | 
					 | 
				
			||||||
        Field.properties = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, { values: fieldPropertyList });
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      // 构建校验规则
 | 
					 | 
				
			||||||
      if (this.fieldConstraintsList && this.fieldConstraintsList.length) {
 | 
					 | 
				
			||||||
        const fieldConstraintList = this.fieldConstraintsList.map(fc => {
 | 
					 | 
				
			||||||
          return window.bpmnInstances.moddle.create(`${this.prefix}:Constraint`, { name: fc.name, config: fc.config });
 | 
					 | 
				
			||||||
        });
 | 
					 | 
				
			||||||
        Field.validation = window.bpmnInstances.moddle.create(`${this.prefix}:Validation`, { constraints: fieldConstraintList });
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      // 构建枚举值
 | 
					 | 
				
			||||||
      if (this.fieldEnumList && this.fieldEnumList.length) {
 | 
					 | 
				
			||||||
        Field.values = this.fieldEnumList.map(fe => {
 | 
					 | 
				
			||||||
          return window.bpmnInstances.moddle.create(`${this.prefix}:Value`, { name: fe.name, id: fe.id });
 | 
					 | 
				
			||||||
        });
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      // 更新数组 与 表单配置实例
 | 
					 | 
				
			||||||
      if (this.formFieldIndex === -1) {
 | 
					 | 
				
			||||||
        this.fieldList.push(this.formFieldForm);
 | 
					 | 
				
			||||||
        this.formData.fields.push(Field);
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        this.fieldList.splice(this.formFieldIndex, 1, this.formFieldForm);
 | 
					 | 
				
			||||||
        this.formData.fields.splice(this.formFieldIndex, 1, Field);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      this.updateElementExtensions();
 | 
					 | 
				
			||||||
      this.fieldModelVisible = false;
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    // 移除某个 字段的 配置项
 | 
					 | 
				
			||||||
    removeFieldOptionItem(option, index, type) {
 | 
					 | 
				
			||||||
      if (type === "property") {
 | 
					 | 
				
			||||||
        this.fieldPropertiesList.splice(index, 1);
 | 
					 | 
				
			||||||
        return;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      if (type === "enum") {
 | 
					 | 
				
			||||||
        this.fieldEnumList.splice(index, 1);
 | 
					 | 
				
			||||||
        return;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      this.fieldConstraintsList.splice(index, 1);
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 移除 字段
 | 
					 | 
				
			||||||
    removeField(field, index) {
 | 
					 | 
				
			||||||
      this.fieldList.splice(index, 1);
 | 
					 | 
				
			||||||
      this.formData.fields.splice(index, 1);
 | 
					 | 
				
			||||||
      this.updateElementExtensions();
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    updateElementExtensions() {
 | 
					 | 
				
			||||||
      // 更新回扩展元素
 | 
					 | 
				
			||||||
      const newElExtensionElements = window.bpmnInstances.moddle.create(`bpmn:ExtensionElements`, {
 | 
					 | 
				
			||||||
        values: this.otherExtensions.concat(this.formData)
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
      // 更新到元素上
 | 
					 | 
				
			||||||
      window.bpmnInstances.modeling.updateProperties(this.bpmnELement, {
 | 
					 | 
				
			||||||
        extensionElements: newElExtensionElements
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
</script>
 | 
					 | 
				
			||||||
@@ -1,7 +0,0 @@
 | 
				
			|||||||
import MyPropertiesPanel from "./PropertiesPanel.vue";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
MyPropertiesPanel.install = function(Vue) {
 | 
					 | 
				
			||||||
  Vue.component(MyPropertiesPanel.name, MyPropertiesPanel);
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export default MyPropertiesPanel;
 | 
					 | 
				
			||||||
@@ -1,296 +0,0 @@
 | 
				
			|||||||
<template>
 | 
					 | 
				
			||||||
  <div class="panel-tab__content">
 | 
					 | 
				
			||||||
    <el-table :data="elementListenersList" size="mini" border>
 | 
					 | 
				
			||||||
      <el-table-column label="序号" width="50px" type="index" />
 | 
					 | 
				
			||||||
      <el-table-column label="事件类型" min-width="100px" prop="event" />
 | 
					 | 
				
			||||||
      <el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
 | 
					 | 
				
			||||||
      <el-table-column label="操作" width="90px">
 | 
					 | 
				
			||||||
        <template v-slot="{ row, $index }">
 | 
					 | 
				
			||||||
          <el-button size="mini" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
 | 
					 | 
				
			||||||
          <el-divider direction="vertical" />
 | 
					 | 
				
			||||||
          <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
 | 
					 | 
				
			||||||
        </template>
 | 
					 | 
				
			||||||
      </el-table-column>
 | 
					 | 
				
			||||||
    </el-table>
 | 
					 | 
				
			||||||
    <div class="element-drawer__button">
 | 
					 | 
				
			||||||
      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
 | 
					 | 
				
			||||||
    </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    <!-- 监听器 编辑/创建 部分 -->
 | 
					 | 
				
			||||||
    <el-drawer :visible.sync="listenerFormModelVisible" title="执行监听器" :size="`${width}px`" append-to-body destroy-on-close>
 | 
					 | 
				
			||||||
      <el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
 | 
					 | 
				
			||||||
        <el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
 | 
					 | 
				
			||||||
          <el-select v-model="listenerForm.event">
 | 
					 | 
				
			||||||
            <el-option label="start" value="start" />
 | 
					 | 
				
			||||||
            <el-option label="end" value="end" />
 | 
					 | 
				
			||||||
          </el-select>
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
 | 
					 | 
				
			||||||
          <el-select v-model="listenerForm.listenerType">
 | 
					 | 
				
			||||||
            <el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
 | 
					 | 
				
			||||||
          </el-select>
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item
 | 
					 | 
				
			||||||
          v-if="listenerForm.listenerType === 'classListener'"
 | 
					 | 
				
			||||||
          label="Java类"
 | 
					 | 
				
			||||||
          prop="class"
 | 
					 | 
				
			||||||
          key="listener-class"
 | 
					 | 
				
			||||||
          :rules="{ required: true, trigger: ['blur', 'change'] }"
 | 
					 | 
				
			||||||
        >
 | 
					 | 
				
			||||||
          <el-input v-model="listenerForm.class" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item
 | 
					 | 
				
			||||||
          v-if="listenerForm.listenerType === 'expressionListener'"
 | 
					 | 
				
			||||||
          label="表达式"
 | 
					 | 
				
			||||||
          prop="expression"
 | 
					 | 
				
			||||||
          key="listener-expression"
 | 
					 | 
				
			||||||
          :rules="{ required: true, trigger: ['blur', 'change'] }"
 | 
					 | 
				
			||||||
        >
 | 
					 | 
				
			||||||
          <el-input v-model="listenerForm.expression" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item
 | 
					 | 
				
			||||||
          v-if="listenerForm.listenerType === 'delegateExpressionListener'"
 | 
					 | 
				
			||||||
          label="代理表达式"
 | 
					 | 
				
			||||||
          prop="delegateExpression"
 | 
					 | 
				
			||||||
          key="listener-delegate"
 | 
					 | 
				
			||||||
          :rules="{ required: true, trigger: ['blur', 'change'] }"
 | 
					 | 
				
			||||||
        >
 | 
					 | 
				
			||||||
          <el-input v-model="listenerForm.delegateExpression" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <template v-if="listenerForm.listenerType === 'scriptListener'">
 | 
					 | 
				
			||||||
          <el-form-item
 | 
					 | 
				
			||||||
            label="脚本格式"
 | 
					 | 
				
			||||||
            prop="scriptFormat"
 | 
					 | 
				
			||||||
            key="listener-script-format"
 | 
					 | 
				
			||||||
            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
 | 
					 | 
				
			||||||
          >
 | 
					 | 
				
			||||||
            <el-input v-model="listenerForm.scriptFormat" clearable />
 | 
					 | 
				
			||||||
          </el-form-item>
 | 
					 | 
				
			||||||
          <el-form-item
 | 
					 | 
				
			||||||
            label="脚本类型"
 | 
					 | 
				
			||||||
            prop="scriptType"
 | 
					 | 
				
			||||||
            key="listener-script-type"
 | 
					 | 
				
			||||||
            :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
 | 
					 | 
				
			||||||
          >
 | 
					 | 
				
			||||||
            <el-select v-model="listenerForm.scriptType">
 | 
					 | 
				
			||||||
              <el-option label="内联脚本" value="inlineScript" />
 | 
					 | 
				
			||||||
              <el-option label="外部脚本" value="externalScript" />
 | 
					 | 
				
			||||||
            </el-select>
 | 
					 | 
				
			||||||
          </el-form-item>
 | 
					 | 
				
			||||||
          <el-form-item
 | 
					 | 
				
			||||||
            v-if="listenerForm.scriptType === 'inlineScript'"
 | 
					 | 
				
			||||||
            label="脚本内容"
 | 
					 | 
				
			||||||
            prop="value"
 | 
					 | 
				
			||||||
            key="listener-script"
 | 
					 | 
				
			||||||
            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
 | 
					 | 
				
			||||||
          >
 | 
					 | 
				
			||||||
            <el-input v-model="listenerForm.value" clearable />
 | 
					 | 
				
			||||||
          </el-form-item>
 | 
					 | 
				
			||||||
          <el-form-item
 | 
					 | 
				
			||||||
            v-if="listenerForm.scriptType === 'externalScript'"
 | 
					 | 
				
			||||||
            label="资源地址"
 | 
					 | 
				
			||||||
            prop="resource"
 | 
					 | 
				
			||||||
            key="listener-resource"
 | 
					 | 
				
			||||||
            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
 | 
					 | 
				
			||||||
          >
 | 
					 | 
				
			||||||
            <el-input v-model="listenerForm.resource" clearable />
 | 
					 | 
				
			||||||
          </el-form-item>
 | 
					 | 
				
			||||||
        </template>
 | 
					 | 
				
			||||||
      </el-form>
 | 
					 | 
				
			||||||
      <el-divider />
 | 
					 | 
				
			||||||
      <p class="listener-filed__title">
 | 
					 | 
				
			||||||
        <span><i class="el-icon-menu"></i>注入字段:</span>
 | 
					 | 
				
			||||||
        <el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
 | 
					 | 
				
			||||||
      </p>
 | 
					 | 
				
			||||||
      <el-table :data="fieldsListOfListener" size="mini" max-height="240" border fit style="flex: none">
 | 
					 | 
				
			||||||
        <el-table-column label="序号" width="50px" type="index" />
 | 
					 | 
				
			||||||
        <el-table-column label="字段名称" min-width="100px" prop="name" />
 | 
					 | 
				
			||||||
        <el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
 | 
					 | 
				
			||||||
        <el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
 | 
					 | 
				
			||||||
        <el-table-column label="操作" width="100px">
 | 
					 | 
				
			||||||
          <template v-slot="{ row, $index }">
 | 
					 | 
				
			||||||
            <el-button size="mini" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
 | 
					 | 
				
			||||||
            <el-divider direction="vertical" />
 | 
					 | 
				
			||||||
            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
 | 
					 | 
				
			||||||
          </template>
 | 
					 | 
				
			||||||
        </el-table-column>
 | 
					 | 
				
			||||||
      </el-table>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      <div class="element-drawer__button">
 | 
					 | 
				
			||||||
        <el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
 | 
					 | 
				
			||||||
        <el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button>
 | 
					 | 
				
			||||||
      </div>
 | 
					 | 
				
			||||||
    </el-drawer>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    <!-- 注入西段 编辑/创建 部分 -->
 | 
					 | 
				
			||||||
    <el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
 | 
					 | 
				
			||||||
      <el-form :model="listenerFieldForm" size="mini" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
 | 
					 | 
				
			||||||
        <el-form-item label="字段名称:" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
 | 
					 | 
				
			||||||
          <el-input v-model="listenerFieldForm.name" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="字段类型:" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
 | 
					 | 
				
			||||||
          <el-select v-model="listenerFieldForm.fieldType">
 | 
					 | 
				
			||||||
            <el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
 | 
					 | 
				
			||||||
          </el-select>
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item
 | 
					 | 
				
			||||||
          v-if="listenerFieldForm.fieldType === 'string'"
 | 
					 | 
				
			||||||
          label="字段值:"
 | 
					 | 
				
			||||||
          prop="string"
 | 
					 | 
				
			||||||
          key="field-string"
 | 
					 | 
				
			||||||
          :rules="{ required: true, trigger: ['blur', 'change'] }"
 | 
					 | 
				
			||||||
        >
 | 
					 | 
				
			||||||
          <el-input v-model="listenerFieldForm.string" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item
 | 
					 | 
				
			||||||
          v-if="listenerFieldForm.fieldType === 'expression'"
 | 
					 | 
				
			||||||
          label="表达式:"
 | 
					 | 
				
			||||||
          prop="expression"
 | 
					 | 
				
			||||||
          key="field-expression"
 | 
					 | 
				
			||||||
          :rules="{ required: true, trigger: ['blur', 'change'] }"
 | 
					 | 
				
			||||||
        >
 | 
					 | 
				
			||||||
          <el-input v-model="listenerFieldForm.expression" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
      </el-form>
 | 
					 | 
				
			||||||
      <template slot="footer">
 | 
					 | 
				
			||||||
        <el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
 | 
					 | 
				
			||||||
        <el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
 | 
					 | 
				
			||||||
      </template>
 | 
					 | 
				
			||||||
    </el-dialog>
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
</template>
 | 
					 | 
				
			||||||
<script>
 | 
					 | 
				
			||||||
import { createListenerObject, updateElementExtensions } from "../../utils";
 | 
					 | 
				
			||||||
import { initListenerType, initListenerForm, listenerType, fieldType } from "./utilSelf";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  name: "ElementListeners",
 | 
					 | 
				
			||||||
  props: {
 | 
					 | 
				
			||||||
    id: String,
 | 
					 | 
				
			||||||
    type: String
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  inject: {
 | 
					 | 
				
			||||||
    prefix: "prefix",
 | 
					 | 
				
			||||||
    width: "width"
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  data() {
 | 
					 | 
				
			||||||
    return {
 | 
					 | 
				
			||||||
      elementListenersList: [], // 监听器列表
 | 
					 | 
				
			||||||
      listenerForm: {}, // 监听器详情表单
 | 
					 | 
				
			||||||
      listenerFormModelVisible: false, // 监听器 编辑 侧边栏显示状态
 | 
					 | 
				
			||||||
      fieldsListOfListener: [],
 | 
					 | 
				
			||||||
      listenerFieldForm: {}, // 监听器 注入字段 详情表单
 | 
					 | 
				
			||||||
      listenerFieldFormModelVisible: false, // 监听器 注入字段表单弹窗 显示状态
 | 
					 | 
				
			||||||
      editingListenerIndex: -1, // 监听器所在下标,-1 为新增
 | 
					 | 
				
			||||||
      editingListenerFieldIndex: -1, // 字段所在下标,-1 为新增
 | 
					 | 
				
			||||||
      listenerTypeObject: listenerType,
 | 
					 | 
				
			||||||
      fieldTypeObject: fieldType
 | 
					 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  watch: {
 | 
					 | 
				
			||||||
    id: {
 | 
					 | 
				
			||||||
      immediate: true,
 | 
					 | 
				
			||||||
      handler(val) {
 | 
					 | 
				
			||||||
        val && val.length && this.$nextTick(() => this.resetListenersList());
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  methods: {
 | 
					 | 
				
			||||||
    resetListenersList() {
 | 
					 | 
				
			||||||
      this.bpmnElement = window.bpmnInstances.bpmnElement;
 | 
					 | 
				
			||||||
      this.otherExtensionList = [];
 | 
					 | 
				
			||||||
      this.bpmnElementListeners =
 | 
					 | 
				
			||||||
        this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type === `${this.prefix}:ExecutionListener`) ?? [];
 | 
					 | 
				
			||||||
      this.elementListenersList = this.bpmnElementListeners.map(listener => initListenerType(listener));
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 打开 监听器详情 侧边栏
 | 
					 | 
				
			||||||
    openListenerForm(listener, index) {
 | 
					 | 
				
			||||||
      if (listener) {
 | 
					 | 
				
			||||||
        this.listenerForm = initListenerForm(listener);
 | 
					 | 
				
			||||||
        this.editingListenerIndex = index;
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        this.listenerForm = {};
 | 
					 | 
				
			||||||
        this.editingListenerIndex = -1; // 标记为新增
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      if (listener && listener.fields) {
 | 
					 | 
				
			||||||
        this.fieldsListOfListener = listener.fields.map(field => ({ ...field, fieldType: field.string ? "string" : "expression" }));
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        this.fieldsListOfListener = [];
 | 
					 | 
				
			||||||
        this.$set(this.listenerForm, "fields", []);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      // 打开侧边栏并清楚验证状态
 | 
					 | 
				
			||||||
      this.listenerFormModelVisible = true;
 | 
					 | 
				
			||||||
      this.$nextTick(() => {
 | 
					 | 
				
			||||||
        if (this.$refs["listenerFormRef"]) this.$refs["listenerFormRef"].clearValidate();
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 打开监听器字段编辑弹窗
 | 
					 | 
				
			||||||
    openListenerFieldForm(field, index) {
 | 
					 | 
				
			||||||
      this.listenerFieldForm = field ? JSON.parse(JSON.stringify(field)) : {};
 | 
					 | 
				
			||||||
      this.editingListenerFieldIndex = field ? index : -1;
 | 
					 | 
				
			||||||
      this.listenerFieldFormModelVisible = true;
 | 
					 | 
				
			||||||
      this.$nextTick(() => {
 | 
					 | 
				
			||||||
        if (this.$refs["listenerFieldFormRef"]) this.$refs["listenerFieldFormRef"].clearValidate();
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 保存监听器注入字段
 | 
					 | 
				
			||||||
    async saveListenerFiled() {
 | 
					 | 
				
			||||||
      let validateStatus = await this.$refs["listenerFieldFormRef"].validate();
 | 
					 | 
				
			||||||
      if (!validateStatus) return; // 验证不通过直接返回
 | 
					 | 
				
			||||||
      if (this.editingListenerFieldIndex === -1) {
 | 
					 | 
				
			||||||
        this.fieldsListOfListener.push(this.listenerFieldForm);
 | 
					 | 
				
			||||||
        this.listenerForm.fields.push(this.listenerFieldForm);
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        this.fieldsListOfListener.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
 | 
					 | 
				
			||||||
        this.listenerForm.fields.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      this.listenerFieldFormModelVisible = false;
 | 
					 | 
				
			||||||
      this.$nextTick(() => (this.listenerFieldForm = {}));
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 移除监听器字段
 | 
					 | 
				
			||||||
    removeListenerField(field, index) {
 | 
					 | 
				
			||||||
      this.$confirm("确认移除该字段吗?", "提示", {
 | 
					 | 
				
			||||||
        confirmButtonText: "确 认",
 | 
					 | 
				
			||||||
        cancelButtonText: "取 消"
 | 
					 | 
				
			||||||
      })
 | 
					 | 
				
			||||||
        .then(() => {
 | 
					 | 
				
			||||||
          this.fieldsListOfListener.splice(index, 1);
 | 
					 | 
				
			||||||
          this.listenerForm.fields.splice(index, 1);
 | 
					 | 
				
			||||||
        })
 | 
					 | 
				
			||||||
        .catch(() => console.info("操作取消"));
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 移除监听器
 | 
					 | 
				
			||||||
    removeListener(listener, index) {
 | 
					 | 
				
			||||||
      this.$confirm("确认移除该监听器吗?", "提示", {
 | 
					 | 
				
			||||||
        confirmButtonText: "确 认",
 | 
					 | 
				
			||||||
        cancelButtonText: "取 消"
 | 
					 | 
				
			||||||
      })
 | 
					 | 
				
			||||||
        .then(() => {
 | 
					 | 
				
			||||||
          this.bpmnElementListeners.splice(index, 1);
 | 
					 | 
				
			||||||
          this.elementListenersList.splice(index, 1);
 | 
					 | 
				
			||||||
          updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
 | 
					 | 
				
			||||||
        })
 | 
					 | 
				
			||||||
        .catch(() => console.info("操作取消"));
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 保存监听器配置
 | 
					 | 
				
			||||||
    async saveListenerConfig() {
 | 
					 | 
				
			||||||
      let validateStatus = await this.$refs["listenerFormRef"].validate();
 | 
					 | 
				
			||||||
      if (!validateStatus) return; // 验证不通过直接返回
 | 
					 | 
				
			||||||
      const listenerObject = createListenerObject(this.listenerForm, false, this.prefix);
 | 
					 | 
				
			||||||
      if (this.editingListenerIndex === -1) {
 | 
					 | 
				
			||||||
        this.bpmnElementListeners.push(listenerObject);
 | 
					 | 
				
			||||||
        this.elementListenersList.push(this.listenerForm);
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        this.bpmnElementListeners.splice(this.editingListenerIndex, 1, listenerObject);
 | 
					 | 
				
			||||||
        this.elementListenersList.splice(this.editingListenerIndex, 1, this.listenerForm);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      // 保存其他配置
 | 
					 | 
				
			||||||
      this.otherExtensionList = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type !== `${this.prefix}:ExecutionListener`) ?? [];
 | 
					 | 
				
			||||||
      updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
 | 
					 | 
				
			||||||
      // 4. 隐藏侧边栏
 | 
					 | 
				
			||||||
      this.listenerFormModelVisible = false;
 | 
					 | 
				
			||||||
      this.listenerForm = {};
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
</script>
 | 
					 | 
				
			||||||
@@ -1,319 +0,0 @@
 | 
				
			|||||||
<template>
 | 
					 | 
				
			||||||
  <div class="panel-tab__content">
 | 
					 | 
				
			||||||
    <el-table :data="elementListenersList" size="mini" border>
 | 
					 | 
				
			||||||
      <el-table-column label="序号" width="50px" type="index" />
 | 
					 | 
				
			||||||
      <el-table-column label="事件类型" min-width="80px" show-overflow-tooltip :formatter="row => listenerEventTypeObject[row.event]" />
 | 
					 | 
				
			||||||
      <el-table-column label="事件id" min-width="80px" prop="id" show-overflow-tooltip />
 | 
					 | 
				
			||||||
      <el-table-column label="监听器类型" min-width="80px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
 | 
					 | 
				
			||||||
      <el-table-column label="操作" width="90px">
 | 
					 | 
				
			||||||
        <template v-slot="{ row, $index }">
 | 
					 | 
				
			||||||
          <el-button size="mini" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
 | 
					 | 
				
			||||||
          <el-divider direction="vertical" />
 | 
					 | 
				
			||||||
          <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
 | 
					 | 
				
			||||||
        </template>
 | 
					 | 
				
			||||||
      </el-table-column>
 | 
					 | 
				
			||||||
    </el-table>
 | 
					 | 
				
			||||||
    <div class="element-drawer__button">
 | 
					 | 
				
			||||||
      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
 | 
					 | 
				
			||||||
    </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    <!-- 监听器 编辑/创建 部分 -->
 | 
					 | 
				
			||||||
    <el-drawer :visible.sync="listenerFormModelVisible" title="任务监听器" :size="`${width}px`" append-to-body destroy-on-close>
 | 
					 | 
				
			||||||
      <el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
 | 
					 | 
				
			||||||
        <el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
 | 
					 | 
				
			||||||
          <el-select v-model="listenerForm.event">
 | 
					 | 
				
			||||||
            <el-option v-for="i in Object.keys(listenerEventTypeObject)" :key="i" :label="listenerEventTypeObject[i]" :value="i" />
 | 
					 | 
				
			||||||
          </el-select>
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="监听器ID" prop="id" :rules="{ required: true, trigger: ['blur', 'change'] }">
 | 
					 | 
				
			||||||
          <el-input v-model="listenerForm.id" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
 | 
					 | 
				
			||||||
          <el-select v-model="listenerForm.listenerType">
 | 
					 | 
				
			||||||
            <el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
 | 
					 | 
				
			||||||
          </el-select>
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item
 | 
					 | 
				
			||||||
          v-if="listenerForm.listenerType === 'classListener'"
 | 
					 | 
				
			||||||
          label="Java类"
 | 
					 | 
				
			||||||
          prop="class"
 | 
					 | 
				
			||||||
          key="listener-class"
 | 
					 | 
				
			||||||
          :rules="{ required: true, trigger: ['blur', 'change'] }"
 | 
					 | 
				
			||||||
        >
 | 
					 | 
				
			||||||
          <el-input v-model="listenerForm.class" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item
 | 
					 | 
				
			||||||
          v-if="listenerForm.listenerType === 'expressionListener'"
 | 
					 | 
				
			||||||
          label="表达式"
 | 
					 | 
				
			||||||
          prop="expression"
 | 
					 | 
				
			||||||
          key="listener-expression"
 | 
					 | 
				
			||||||
          :rules="{ required: true, trigger: ['blur', 'change'] }"
 | 
					 | 
				
			||||||
        >
 | 
					 | 
				
			||||||
          <el-input v-model="listenerForm.expression" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item
 | 
					 | 
				
			||||||
          v-if="listenerForm.listenerType === 'delegateExpressionListener'"
 | 
					 | 
				
			||||||
          label="代理表达式"
 | 
					 | 
				
			||||||
          prop="delegateExpression"
 | 
					 | 
				
			||||||
          key="listener-delegate"
 | 
					 | 
				
			||||||
          :rules="{ required: true, trigger: ['blur', 'change'] }"
 | 
					 | 
				
			||||||
        >
 | 
					 | 
				
			||||||
          <el-input v-model="listenerForm.delegateExpression" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <template v-if="listenerForm.listenerType === 'scriptListener'">
 | 
					 | 
				
			||||||
          <el-form-item
 | 
					 | 
				
			||||||
            label="脚本格式"
 | 
					 | 
				
			||||||
            prop="scriptFormat"
 | 
					 | 
				
			||||||
            key="listener-script-format"
 | 
					 | 
				
			||||||
            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
 | 
					 | 
				
			||||||
          >
 | 
					 | 
				
			||||||
            <el-input v-model="listenerForm.scriptFormat" clearable />
 | 
					 | 
				
			||||||
          </el-form-item>
 | 
					 | 
				
			||||||
          <el-form-item
 | 
					 | 
				
			||||||
            label="脚本类型"
 | 
					 | 
				
			||||||
            prop="scriptType"
 | 
					 | 
				
			||||||
            key="listener-script-type"
 | 
					 | 
				
			||||||
            :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
 | 
					 | 
				
			||||||
          >
 | 
					 | 
				
			||||||
            <el-select v-model="listenerForm.scriptType">
 | 
					 | 
				
			||||||
              <el-option label="内联脚本" value="inlineScript" />
 | 
					 | 
				
			||||||
              <el-option label="外部脚本" value="externalScript" />
 | 
					 | 
				
			||||||
            </el-select>
 | 
					 | 
				
			||||||
          </el-form-item>
 | 
					 | 
				
			||||||
          <el-form-item
 | 
					 | 
				
			||||||
            v-if="listenerForm.scriptType === 'inlineScript'"
 | 
					 | 
				
			||||||
            label="脚本内容"
 | 
					 | 
				
			||||||
            prop="value"
 | 
					 | 
				
			||||||
            key="listener-script"
 | 
					 | 
				
			||||||
            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
 | 
					 | 
				
			||||||
          >
 | 
					 | 
				
			||||||
            <el-input v-model="listenerForm.value" clearable />
 | 
					 | 
				
			||||||
          </el-form-item>
 | 
					 | 
				
			||||||
          <el-form-item
 | 
					 | 
				
			||||||
            v-if="listenerForm.scriptType === 'externalScript'"
 | 
					 | 
				
			||||||
            label="资源地址"
 | 
					 | 
				
			||||||
            prop="resource"
 | 
					 | 
				
			||||||
            key="listener-resource"
 | 
					 | 
				
			||||||
            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
 | 
					 | 
				
			||||||
          >
 | 
					 | 
				
			||||||
            <el-input v-model="listenerForm.resource" clearable />
 | 
					 | 
				
			||||||
          </el-form-item>
 | 
					 | 
				
			||||||
        </template>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
        <template v-if="listenerForm.event === 'timeout'">
 | 
					 | 
				
			||||||
          <el-form-item label="定时器类型" prop="eventDefinitionType" key="eventDefinitionType">
 | 
					 | 
				
			||||||
            <el-select v-model="listenerForm.eventDefinitionType">
 | 
					 | 
				
			||||||
              <el-option label="日期" value="date" />
 | 
					 | 
				
			||||||
              <el-option label="持续时长" value="duration" />
 | 
					 | 
				
			||||||
              <el-option label="循环" value="cycle" />
 | 
					 | 
				
			||||||
              <el-option label="无" value="null" />
 | 
					 | 
				
			||||||
            </el-select>
 | 
					 | 
				
			||||||
          </el-form-item>
 | 
					 | 
				
			||||||
          <el-form-item
 | 
					 | 
				
			||||||
            v-if="!!listenerForm.eventDefinitionType && listenerForm.eventDefinitionType !== 'null'"
 | 
					 | 
				
			||||||
            label="定时器"
 | 
					 | 
				
			||||||
            prop="eventTimeDefinitions"
 | 
					 | 
				
			||||||
            key="eventTimeDefinitions"
 | 
					 | 
				
			||||||
            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写定时器配置' }"
 | 
					 | 
				
			||||||
          >
 | 
					 | 
				
			||||||
            <el-input v-model="listenerForm.eventTimeDefinitions" clearable />
 | 
					 | 
				
			||||||
          </el-form-item>
 | 
					 | 
				
			||||||
        </template>
 | 
					 | 
				
			||||||
      </el-form>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      <el-divider />
 | 
					 | 
				
			||||||
      <p class="listener-filed__title">
 | 
					 | 
				
			||||||
        <span><i class="el-icon-menu"></i>注入字段:</span>
 | 
					 | 
				
			||||||
        <el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
 | 
					 | 
				
			||||||
      </p>
 | 
					 | 
				
			||||||
      <el-table :data="fieldsListOfListener" size="mini" max-height="240" border fit style="flex: none">
 | 
					 | 
				
			||||||
        <el-table-column label="序号" width="50px" type="index" />
 | 
					 | 
				
			||||||
        <el-table-column label="字段名称" min-width="100px" prop="name" />
 | 
					 | 
				
			||||||
        <el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
 | 
					 | 
				
			||||||
        <el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
 | 
					 | 
				
			||||||
        <el-table-column label="操作" width="100px">
 | 
					 | 
				
			||||||
          <template v-slot="{ row, $index }">
 | 
					 | 
				
			||||||
            <el-button size="mini" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
 | 
					 | 
				
			||||||
            <el-divider direction="vertical" />
 | 
					 | 
				
			||||||
            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
 | 
					 | 
				
			||||||
          </template>
 | 
					 | 
				
			||||||
        </el-table-column>
 | 
					 | 
				
			||||||
      </el-table>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      <div class="element-drawer__button">
 | 
					 | 
				
			||||||
        <el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
 | 
					 | 
				
			||||||
        <el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button>
 | 
					 | 
				
			||||||
      </div>
 | 
					 | 
				
			||||||
    </el-drawer>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    <!-- 注入西段 编辑/创建 部分 -->
 | 
					 | 
				
			||||||
    <el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
 | 
					 | 
				
			||||||
      <el-form :model="listenerFieldForm" size="mini" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
 | 
					 | 
				
			||||||
        <el-form-item label="字段名称:" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
 | 
					 | 
				
			||||||
          <el-input v-model="listenerFieldForm.name" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="字段类型:" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
 | 
					 | 
				
			||||||
          <el-select v-model="listenerFieldForm.fieldType">
 | 
					 | 
				
			||||||
            <el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
 | 
					 | 
				
			||||||
          </el-select>
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item
 | 
					 | 
				
			||||||
          v-if="listenerFieldForm.fieldType === 'string'"
 | 
					 | 
				
			||||||
          label="字段值:"
 | 
					 | 
				
			||||||
          prop="string"
 | 
					 | 
				
			||||||
          key="field-string"
 | 
					 | 
				
			||||||
          :rules="{ required: true, trigger: ['blur', 'change'] }"
 | 
					 | 
				
			||||||
        >
 | 
					 | 
				
			||||||
          <el-input v-model="listenerFieldForm.string" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item
 | 
					 | 
				
			||||||
          v-if="listenerFieldForm.fieldType === 'expression'"
 | 
					 | 
				
			||||||
          label="表达式:"
 | 
					 | 
				
			||||||
          prop="expression"
 | 
					 | 
				
			||||||
          key="field-expression"
 | 
					 | 
				
			||||||
          :rules="{ required: true, trigger: ['blur', 'change'] }"
 | 
					 | 
				
			||||||
        >
 | 
					 | 
				
			||||||
          <el-input v-model="listenerFieldForm.expression" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
      </el-form>
 | 
					 | 
				
			||||||
      <template slot="footer">
 | 
					 | 
				
			||||||
        <el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
 | 
					 | 
				
			||||||
        <el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
 | 
					 | 
				
			||||||
      </template>
 | 
					 | 
				
			||||||
    </el-dialog>
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
</template>
 | 
					 | 
				
			||||||
<script>
 | 
					 | 
				
			||||||
import { createListenerObject, updateElementExtensions } from "../../utils";
 | 
					 | 
				
			||||||
import { initListenerForm, initListenerType, eventType, listenerType, fieldType } from "./utilSelf";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  name: "UserTaskListeners",
 | 
					 | 
				
			||||||
  props: {
 | 
					 | 
				
			||||||
    id: String,
 | 
					 | 
				
			||||||
    type: String
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  inject: {
 | 
					 | 
				
			||||||
    prefix: "prefix",
 | 
					 | 
				
			||||||
    width: "width"
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  data() {
 | 
					 | 
				
			||||||
    return {
 | 
					 | 
				
			||||||
      elementListenersList: [],
 | 
					 | 
				
			||||||
      listenerEventTypeObject: eventType,
 | 
					 | 
				
			||||||
      listenerTypeObject: listenerType,
 | 
					 | 
				
			||||||
      listenerFormModelVisible: false,
 | 
					 | 
				
			||||||
      listenerForm: {},
 | 
					 | 
				
			||||||
      fieldTypeObject: fieldType,
 | 
					 | 
				
			||||||
      fieldsListOfListener: [],
 | 
					 | 
				
			||||||
      listenerFieldFormModelVisible: false, // 监听器 注入字段表单弹窗 显示状态
 | 
					 | 
				
			||||||
      editingListenerIndex: -1, // 监听器所在下标,-1 为新增
 | 
					 | 
				
			||||||
      editingListenerFieldIndex: -1, // 字段所在下标,-1 为新增
 | 
					 | 
				
			||||||
      listenerFieldForm: {} // 监听器 注入字段 详情表单
 | 
					 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  watch: {
 | 
					 | 
				
			||||||
    id: {
 | 
					 | 
				
			||||||
      immediate: true,
 | 
					 | 
				
			||||||
      handler(val) {
 | 
					 | 
				
			||||||
        val && val.length && this.$nextTick(() => this.resetListenersList());
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  methods: {
 | 
					 | 
				
			||||||
    resetListenersList() {
 | 
					 | 
				
			||||||
      this.bpmnElement = window.bpmnInstances.bpmnElement;
 | 
					 | 
				
			||||||
      this.otherExtensionList = [];
 | 
					 | 
				
			||||||
      this.bpmnElementListeners = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type === `${this.prefix}:TaskListener`) ?? [];
 | 
					 | 
				
			||||||
      this.elementListenersList = this.bpmnElementListeners.map(listener => initListenerType(listener));
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    openListenerForm(listener, index) {
 | 
					 | 
				
			||||||
      if (listener) {
 | 
					 | 
				
			||||||
        this.listenerForm = initListenerForm(listener);
 | 
					 | 
				
			||||||
        this.editingListenerIndex = index;
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        this.listenerForm = {};
 | 
					 | 
				
			||||||
        this.editingListenerIndex = -1; // 标记为新增
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      if (listener && listener.fields) {
 | 
					 | 
				
			||||||
        this.fieldsListOfListener = listener.fields.map(field => ({ ...field, fieldType: field.string ? "string" : "expression" }));
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        this.fieldsListOfListener = [];
 | 
					 | 
				
			||||||
        this.$set(this.listenerForm, "fields", []);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      // 打开侧边栏并清楚验证状态
 | 
					 | 
				
			||||||
      this.listenerFormModelVisible = true;
 | 
					 | 
				
			||||||
      this.$nextTick(() => {
 | 
					 | 
				
			||||||
        if (this.$refs["listenerFormRef"]) this.$refs["listenerFormRef"].clearValidate();
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 移除监听器
 | 
					 | 
				
			||||||
    removeListener(listener, index) {
 | 
					 | 
				
			||||||
      this.$confirm("确认移除该监听器吗?", "提示", {
 | 
					 | 
				
			||||||
        confirmButtonText: "确 认",
 | 
					 | 
				
			||||||
        cancelButtonText: "取 消"
 | 
					 | 
				
			||||||
      })
 | 
					 | 
				
			||||||
        .then(() => {
 | 
					 | 
				
			||||||
          this.bpmnElementListeners.splice(index, 1);
 | 
					 | 
				
			||||||
          this.elementListenersList.splice(index, 1);
 | 
					 | 
				
			||||||
          updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
 | 
					 | 
				
			||||||
        })
 | 
					 | 
				
			||||||
        .catch(() => console.info("操作取消"));
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 保存监听器
 | 
					 | 
				
			||||||
    async saveListenerConfig() {
 | 
					 | 
				
			||||||
      let validateStatus = await this.$refs["listenerFormRef"].validate();
 | 
					 | 
				
			||||||
      if (!validateStatus) return; // 验证不通过直接返回
 | 
					 | 
				
			||||||
      const listenerObject = createListenerObject(this.listenerForm, true, this.prefix);
 | 
					 | 
				
			||||||
      if (this.editingListenerIndex === -1) {
 | 
					 | 
				
			||||||
        this.bpmnElementListeners.push(listenerObject);
 | 
					 | 
				
			||||||
        this.elementListenersList.push(this.listenerForm);
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        this.bpmnElementListeners.splice(this.editingListenerIndex, 1, listenerObject);
 | 
					 | 
				
			||||||
        this.elementListenersList.splice(this.editingListenerIndex, 1, this.listenerForm);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      // 保存其他配置
 | 
					 | 
				
			||||||
      this.otherExtensionList = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type !== `${this.prefix}:TaskListener`) ?? [];
 | 
					 | 
				
			||||||
      updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
 | 
					 | 
				
			||||||
      // 4. 隐藏侧边栏
 | 
					 | 
				
			||||||
      this.listenerFormModelVisible = false;
 | 
					 | 
				
			||||||
      this.listenerForm = {};
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 打开监听器字段编辑弹窗
 | 
					 | 
				
			||||||
    openListenerFieldForm(field, index) {
 | 
					 | 
				
			||||||
      this.listenerFieldForm = field ? JSON.parse(JSON.stringify(field)) : {};
 | 
					 | 
				
			||||||
      this.editingListenerFieldIndex = field ? index : -1;
 | 
					 | 
				
			||||||
      this.listenerFieldFormModelVisible = true;
 | 
					 | 
				
			||||||
      this.$nextTick(() => {
 | 
					 | 
				
			||||||
        if (this.$refs["listenerFieldFormRef"]) this.$refs["listenerFieldFormRef"].clearValidate();
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 保存监听器注入字段
 | 
					 | 
				
			||||||
    async saveListenerFiled() {
 | 
					 | 
				
			||||||
      let validateStatus = await this.$refs["listenerFieldFormRef"].validate();
 | 
					 | 
				
			||||||
      if (!validateStatus) return; // 验证不通过直接返回
 | 
					 | 
				
			||||||
      if (this.editingListenerFieldIndex === -1) {
 | 
					 | 
				
			||||||
        this.fieldsListOfListener.push(this.listenerFieldForm);
 | 
					 | 
				
			||||||
        this.listenerForm.fields.push(this.listenerFieldForm);
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        this.fieldsListOfListener.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
 | 
					 | 
				
			||||||
        this.listenerForm.fields.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      this.listenerFieldFormModelVisible = false;
 | 
					 | 
				
			||||||
      this.$nextTick(() => (this.listenerFieldForm = {}));
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 移除监听器字段
 | 
					 | 
				
			||||||
    removeListenerField(field, index) {
 | 
					 | 
				
			||||||
      this.$confirm("确认移除该字段吗?", "提示", {
 | 
					 | 
				
			||||||
        confirmButtonText: "确 认",
 | 
					 | 
				
			||||||
        cancelButtonText: "取 消"
 | 
					 | 
				
			||||||
      })
 | 
					 | 
				
			||||||
        .then(() => {
 | 
					 | 
				
			||||||
          this.fieldsListOfListener.splice(index, 1);
 | 
					 | 
				
			||||||
          this.listenerForm.fields.splice(index, 1);
 | 
					 | 
				
			||||||
        })
 | 
					 | 
				
			||||||
        .catch(() => console.info("操作取消"));
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
</script>
 | 
					 | 
				
			||||||
@@ -1,178 +0,0 @@
 | 
				
			|||||||
export const template = isTaskListener => {
 | 
					 | 
				
			||||||
  return `
 | 
					 | 
				
			||||||
  <div class="panel-tab__content">
 | 
					 | 
				
			||||||
    <el-table :data="elementListenersList" size="mini" border>
 | 
					 | 
				
			||||||
      <el-table-column label="序号" width="50px" type="index" />
 | 
					 | 
				
			||||||
      <el-table-column label="事件类型" min-width="100px" prop="event" />
 | 
					 | 
				
			||||||
      <el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
 | 
					 | 
				
			||||||
      <el-table-column label="操作" width="90px">
 | 
					 | 
				
			||||||
        <template v-slot="{ row, $index }">
 | 
					 | 
				
			||||||
          <el-button size="mini" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
 | 
					 | 
				
			||||||
          <el-divider direction="vertical" />
 | 
					 | 
				
			||||||
          <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
 | 
					 | 
				
			||||||
        </template>
 | 
					 | 
				
			||||||
      </el-table-column>
 | 
					 | 
				
			||||||
    </el-table>
 | 
					 | 
				
			||||||
    <div class="element-drawer__button">
 | 
					 | 
				
			||||||
      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
 | 
					 | 
				
			||||||
    </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    <!-- 监听器 编辑/创建 部分 -->
 | 
					 | 
				
			||||||
    <el-drawer :visible.sync="listenerFormModelVisible" title="执行监听器" :size="width + 'px'" append-to-body destroy-on-close>
 | 
					 | 
				
			||||||
      <el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
 | 
					 | 
				
			||||||
        <el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
 | 
					 | 
				
			||||||
          <el-select v-model="listenerForm.event">
 | 
					 | 
				
			||||||
            <el-option label="start" value="start" />
 | 
					 | 
				
			||||||
            <el-option label="end" value="end" />
 | 
					 | 
				
			||||||
          </el-select>
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
 | 
					 | 
				
			||||||
          <el-select v-model="listenerForm.listenerType">
 | 
					 | 
				
			||||||
            <el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
 | 
					 | 
				
			||||||
          </el-select>
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item
 | 
					 | 
				
			||||||
          v-if="listenerForm.listenerType === 'classListener'"
 | 
					 | 
				
			||||||
          label="Java类"
 | 
					 | 
				
			||||||
          prop="class"
 | 
					 | 
				
			||||||
          key="listener-class"
 | 
					 | 
				
			||||||
          :rules="{ required: true, trigger: ['blur', 'change'] }"
 | 
					 | 
				
			||||||
        >
 | 
					 | 
				
			||||||
          <el-input v-model="listenerForm.class" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item
 | 
					 | 
				
			||||||
          v-if="listenerForm.listenerType === 'expressionListener'"
 | 
					 | 
				
			||||||
          label="表达式"
 | 
					 | 
				
			||||||
          prop="expression"
 | 
					 | 
				
			||||||
          key="listener-expression"
 | 
					 | 
				
			||||||
          :rules="{ required: true, trigger: ['blur', 'change'] }"
 | 
					 | 
				
			||||||
        >
 | 
					 | 
				
			||||||
          <el-input v-model="listenerForm.expression" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item
 | 
					 | 
				
			||||||
          v-if="listenerForm.listenerType === 'delegateExpressionListener'"
 | 
					 | 
				
			||||||
          label="代理表达式"
 | 
					 | 
				
			||||||
          prop="delegateExpression"
 | 
					 | 
				
			||||||
          key="listener-delegate"
 | 
					 | 
				
			||||||
          :rules="{ required: true, trigger: ['blur', 'change'] }"
 | 
					 | 
				
			||||||
        >
 | 
					 | 
				
			||||||
          <el-input v-model="listenerForm.delegateExpression" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <template v-if="listenerForm.listenerType === 'scriptListener'">
 | 
					 | 
				
			||||||
          <el-form-item
 | 
					 | 
				
			||||||
            label="脚本格式"
 | 
					 | 
				
			||||||
            prop="scriptFormat"
 | 
					 | 
				
			||||||
            key="listener-script-format"
 | 
					 | 
				
			||||||
            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
 | 
					 | 
				
			||||||
          >
 | 
					 | 
				
			||||||
            <el-input v-model="listenerForm.scriptFormat" clearable />
 | 
					 | 
				
			||||||
          </el-form-item>
 | 
					 | 
				
			||||||
          <el-form-item
 | 
					 | 
				
			||||||
            label="脚本类型"
 | 
					 | 
				
			||||||
            prop="scriptType"
 | 
					 | 
				
			||||||
            key="listener-script-type"
 | 
					 | 
				
			||||||
            :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
 | 
					 | 
				
			||||||
          >
 | 
					 | 
				
			||||||
            <el-select v-model="listenerForm.scriptType">
 | 
					 | 
				
			||||||
              <el-option label="内联脚本" value="inlineScript" />
 | 
					 | 
				
			||||||
              <el-option label="外部脚本" value="externalScript" />
 | 
					 | 
				
			||||||
            </el-select>
 | 
					 | 
				
			||||||
          </el-form-item>
 | 
					 | 
				
			||||||
          <el-form-item
 | 
					 | 
				
			||||||
            v-if="listenerForm.scriptType === 'inlineScript'"
 | 
					 | 
				
			||||||
            label="脚本内容"
 | 
					 | 
				
			||||||
            prop="value"
 | 
					 | 
				
			||||||
            key="listener-script"
 | 
					 | 
				
			||||||
            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
 | 
					 | 
				
			||||||
          >
 | 
					 | 
				
			||||||
            <el-input v-model="listenerForm.value" clearable />
 | 
					 | 
				
			||||||
          </el-form-item>
 | 
					 | 
				
			||||||
          <el-form-item
 | 
					 | 
				
			||||||
            v-if="listenerForm.scriptType === 'externalScript'"
 | 
					 | 
				
			||||||
            label="资源地址"
 | 
					 | 
				
			||||||
            prop="resource"
 | 
					 | 
				
			||||||
            key="listener-resource"
 | 
					 | 
				
			||||||
            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
 | 
					 | 
				
			||||||
          >
 | 
					 | 
				
			||||||
            <el-input v-model="listenerForm.resource" clearable />
 | 
					 | 
				
			||||||
          </el-form-item>
 | 
					 | 
				
			||||||
        </template>
 | 
					 | 
				
			||||||
        ${
 | 
					 | 
				
			||||||
          isTaskListener
 | 
					 | 
				
			||||||
            ? "<el-form-item label='定时器类型' prop='eventDefinitionType' key='eventDefinitionType'>" +
 | 
					 | 
				
			||||||
              "<el-select v-model='listenerForm.eventDefinitionType'>" +
 | 
					 | 
				
			||||||
              "<el-option label='日期' value='date' />" +
 | 
					 | 
				
			||||||
              "<el-option label='持续时长' value='duration' />" +
 | 
					 | 
				
			||||||
              "<el-option label='循环' value='cycle' />" +
 | 
					 | 
				
			||||||
              "<el-option label='无' value='' />" +
 | 
					 | 
				
			||||||
              "</el-select>" +
 | 
					 | 
				
			||||||
              "</el-form-item>" +
 | 
					 | 
				
			||||||
              "<el-form-item v-if='!!listenerForm.eventDefinitionType' label='定时器' prop='eventDefinitions' key='eventDefinitions'>" +
 | 
					 | 
				
			||||||
              "<el-input v-model='listenerForm.eventDefinitions' clearable />" +
 | 
					 | 
				
			||||||
              "</el-form-item>"
 | 
					 | 
				
			||||||
            : ""
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      </el-form>
 | 
					 | 
				
			||||||
      <el-divider />
 | 
					 | 
				
			||||||
      <p class="listener-filed__title">
 | 
					 | 
				
			||||||
        <span><i class="el-icon-menu"></i>注入字段:</span>
 | 
					 | 
				
			||||||
        <el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
 | 
					 | 
				
			||||||
      </p>
 | 
					 | 
				
			||||||
      <el-table :data="fieldsListOfListener" size="mini" max-height="240" border fit style="flex: none">
 | 
					 | 
				
			||||||
        <el-table-column label="序号" width="50px" type="index" />
 | 
					 | 
				
			||||||
        <el-table-column label="字段名称" min-width="100px" prop="name" />
 | 
					 | 
				
			||||||
        <el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
 | 
					 | 
				
			||||||
        <el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
 | 
					 | 
				
			||||||
        <el-table-column label="操作" width="100px">
 | 
					 | 
				
			||||||
          <template v-slot="{ row, $index }">
 | 
					 | 
				
			||||||
            <el-button size="mini" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
 | 
					 | 
				
			||||||
            <el-divider direction="vertical" />
 | 
					 | 
				
			||||||
            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
 | 
					 | 
				
			||||||
          </template>
 | 
					 | 
				
			||||||
        </el-table-column>
 | 
					 | 
				
			||||||
      </el-table>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      <div class="element-drawer__button">
 | 
					 | 
				
			||||||
        <el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
 | 
					 | 
				
			||||||
        <el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button>
 | 
					 | 
				
			||||||
      </div>
 | 
					 | 
				
			||||||
    </el-drawer>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    <!-- 注入西段 编辑/创建 部分 -->
 | 
					 | 
				
			||||||
    <el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
 | 
					 | 
				
			||||||
      <el-form :model="listenerFieldForm" size="mini" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
 | 
					 | 
				
			||||||
        <el-form-item label="字段名称:" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
 | 
					 | 
				
			||||||
          <el-input v-model="listenerFieldForm.name" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="字段类型:" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
 | 
					 | 
				
			||||||
          <el-select v-model="listenerFieldForm.fieldType">
 | 
					 | 
				
			||||||
            <el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
 | 
					 | 
				
			||||||
          </el-select>
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item
 | 
					 | 
				
			||||||
          v-if="listenerFieldForm.fieldType === 'string'"
 | 
					 | 
				
			||||||
          label="字段值:"
 | 
					 | 
				
			||||||
          prop="string"
 | 
					 | 
				
			||||||
          key="field-string"
 | 
					 | 
				
			||||||
          :rules="{ required: true, trigger: ['blur', 'change'] }"
 | 
					 | 
				
			||||||
        >
 | 
					 | 
				
			||||||
          <el-input v-model="listenerFieldForm.string" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item
 | 
					 | 
				
			||||||
          v-if="listenerFieldForm.fieldType === 'expression'"
 | 
					 | 
				
			||||||
          label="表达式:"
 | 
					 | 
				
			||||||
          prop="expression"
 | 
					 | 
				
			||||||
          key="field-expression"
 | 
					 | 
				
			||||||
          :rules="{ required: true, trigger: ['blur', 'change'] }"
 | 
					 | 
				
			||||||
        >
 | 
					 | 
				
			||||||
          <el-input v-model="listenerFieldForm.expression" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
      </el-form>
 | 
					 | 
				
			||||||
      <template slot="footer">
 | 
					 | 
				
			||||||
        <el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
 | 
					 | 
				
			||||||
        <el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
 | 
					 | 
				
			||||||
      </template>
 | 
					 | 
				
			||||||
    </el-dialog>
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
  `;
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
@@ -1,62 +0,0 @@
 | 
				
			|||||||
// 初始化表单数据
 | 
					 | 
				
			||||||
export function initListenerForm(listener) {
 | 
					 | 
				
			||||||
  let self = {
 | 
					 | 
				
			||||||
    ...listener
 | 
					 | 
				
			||||||
  };
 | 
					 | 
				
			||||||
  if (listener.script) {
 | 
					 | 
				
			||||||
    self = {
 | 
					 | 
				
			||||||
      ...listener,
 | 
					 | 
				
			||||||
      ...listener.script,
 | 
					 | 
				
			||||||
      scriptType: listener.script.resource ? "externalScript" : "inlineScript"
 | 
					 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
  if (listener.event === "timeout" && listener.eventDefinitions) {
 | 
					 | 
				
			||||||
    if (listener.eventDefinitions.length) {
 | 
					 | 
				
			||||||
      let k = "";
 | 
					 | 
				
			||||||
      for (let key in listener.eventDefinitions[0]) {
 | 
					 | 
				
			||||||
        console.log(listener.eventDefinitions, key);
 | 
					 | 
				
			||||||
        if (key.indexOf("time") !== -1) {
 | 
					 | 
				
			||||||
          k = key;
 | 
					 | 
				
			||||||
          self.eventDefinitionType = key.replace("time", "").toLowerCase();
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      console.log(k);
 | 
					 | 
				
			||||||
      self.eventTimeDefinitions = listener.eventDefinitions[0][k].body;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
  return self;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export function initListenerType(listener) {
 | 
					 | 
				
			||||||
  let listenerType;
 | 
					 | 
				
			||||||
  if (listener.class) listenerType = "classListener";
 | 
					 | 
				
			||||||
  if (listener.expression) listenerType = "expressionListener";
 | 
					 | 
				
			||||||
  if (listener.delegateExpression) listenerType = "delegateExpressionListener";
 | 
					 | 
				
			||||||
  if (listener.script) listenerType = "scriptListener";
 | 
					 | 
				
			||||||
  return {
 | 
					 | 
				
			||||||
    ...JSON.parse(JSON.stringify(listener)),
 | 
					 | 
				
			||||||
    ...(listener.script ?? {}),
 | 
					 | 
				
			||||||
    listenerType: listenerType
 | 
					 | 
				
			||||||
  };
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export const listenerType = {
 | 
					 | 
				
			||||||
  classListener: "Java 类",
 | 
					 | 
				
			||||||
  expressionListener: "表达式",
 | 
					 | 
				
			||||||
  delegateExpressionListener: "代理表达式",
 | 
					 | 
				
			||||||
  scriptListener: "脚本"
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export const eventType = {
 | 
					 | 
				
			||||||
  create: "创建",
 | 
					 | 
				
			||||||
  assignment: "指派",
 | 
					 | 
				
			||||||
  complete: "完成",
 | 
					 | 
				
			||||||
  delete: "删除",
 | 
					 | 
				
			||||||
  update: "更新",
 | 
					 | 
				
			||||||
  timeout: "超时"
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export const fieldType = {
 | 
					 | 
				
			||||||
  string: "字符串",
 | 
					 | 
				
			||||||
  expression: "表达式"
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
@@ -1,192 +0,0 @@
 | 
				
			|||||||
<template>
 | 
					 | 
				
			||||||
  <div class="panel-tab__content">
 | 
					 | 
				
			||||||
    <el-form size="mini" label-width="90px" @submit.native.prevent>
 | 
					 | 
				
			||||||
      <el-form-item label="回路特性">
 | 
					 | 
				
			||||||
        <el-select v-model="loopCharacteristics" @change="changeLoopCharacteristicsType">
 | 
					 | 
				
			||||||
          <!--bpmn:MultiInstanceLoopCharacteristics-->
 | 
					 | 
				
			||||||
          <el-option label="并行多重事件" value="ParallelMultiInstance" />
 | 
					 | 
				
			||||||
          <el-option label="时序多重事件" value="SequentialMultiInstance" />
 | 
					 | 
				
			||||||
          <!--bpmn:StandardLoopCharacteristics-->
 | 
					 | 
				
			||||||
          <el-option label="循环事件" value="StandardLoop" />
 | 
					 | 
				
			||||||
          <el-option label="无" value="Null" />
 | 
					 | 
				
			||||||
        </el-select>
 | 
					 | 
				
			||||||
      </el-form-item>
 | 
					 | 
				
			||||||
      <template v-if="loopCharacteristics === 'ParallelMultiInstance' || loopCharacteristics === 'SequentialMultiInstance'">
 | 
					 | 
				
			||||||
        <el-form-item label="循环基数" key="loopCardinality">
 | 
					 | 
				
			||||||
          <el-input v-model="loopInstanceForm.loopCardinality" clearable @change="updateLoopCardinality" />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="集合" key="collection" v-show="false">
 | 
					 | 
				
			||||||
          <el-input v-model="loopInstanceForm.collection" clearable @change="updateLoopBase" />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="元素变量" key="elementVariable">
 | 
					 | 
				
			||||||
          <el-input v-model="loopInstanceForm.elementVariable" clearable @change="updateLoopBase" />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="完成条件" key="completionCondition">
 | 
					 | 
				
			||||||
          <el-input v-model="loopInstanceForm.completionCondition" clearable @change="updateLoopCondition" />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="异步状态" key="async">
 | 
					 | 
				
			||||||
          <el-checkbox v-model="loopInstanceForm.asyncBefore" label="异步前" @change="updateLoopAsync('asyncBefore')" />
 | 
					 | 
				
			||||||
          <el-checkbox v-model="loopInstanceForm.asyncAfter" label="异步后" @change="updateLoopAsync('asyncAfter')" />
 | 
					 | 
				
			||||||
          <el-checkbox
 | 
					 | 
				
			||||||
            v-model="loopInstanceForm.exclusive"
 | 
					 | 
				
			||||||
            v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
 | 
					 | 
				
			||||||
            label="排除"
 | 
					 | 
				
			||||||
            @change="updateLoopAsync('exclusive')"
 | 
					 | 
				
			||||||
          />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="重试周期" prop="timeCycle" v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore" key="timeCycle">
 | 
					 | 
				
			||||||
          <el-input v-model="loopInstanceForm.timeCycle" clearable @change="updateLoopTimeCycle" />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
      </template>
 | 
					 | 
				
			||||||
    </el-form>
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
</template>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<script>
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  name: "ElementMultiInstance",
 | 
					 | 
				
			||||||
  props: {
 | 
					 | 
				
			||||||
    businessObject: Object,
 | 
					 | 
				
			||||||
    type: String
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  inject: {
 | 
					 | 
				
			||||||
    prefix: "prefix"
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  data() {
 | 
					 | 
				
			||||||
    return {
 | 
					 | 
				
			||||||
      loopCharacteristics: "",
 | 
					 | 
				
			||||||
      //默认配置,用来覆盖原始不存在的选项,避免报错
 | 
					 | 
				
			||||||
      defaultLoopInstanceForm: {
 | 
					 | 
				
			||||||
        completionCondition: "",
 | 
					 | 
				
			||||||
        loopCardinality: "",
 | 
					 | 
				
			||||||
        extensionElements: [],
 | 
					 | 
				
			||||||
        asyncAfter: false,
 | 
					 | 
				
			||||||
        asyncBefore: false,
 | 
					 | 
				
			||||||
        exclusive: false
 | 
					 | 
				
			||||||
      },
 | 
					 | 
				
			||||||
      loopInstanceForm: {}
 | 
					 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  watch: {
 | 
					 | 
				
			||||||
    businessObject: {
 | 
					 | 
				
			||||||
      immediate: true,
 | 
					 | 
				
			||||||
      handler(val) {
 | 
					 | 
				
			||||||
        this.bpmnElement = window.bpmnInstances.bpmnElement;
 | 
					 | 
				
			||||||
        this.getElementLoop(val);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  methods: {
 | 
					 | 
				
			||||||
    getElementLoop(businessObject) {
 | 
					 | 
				
			||||||
      if (!businessObject.loopCharacteristics) {
 | 
					 | 
				
			||||||
        this.loopCharacteristics = "Null";
 | 
					 | 
				
			||||||
        this.loopInstanceForm = {};
 | 
					 | 
				
			||||||
        return;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      if (businessObject.loopCharacteristics.$type === "bpmn:StandardLoopCharacteristics") {
 | 
					 | 
				
			||||||
        this.loopCharacteristics = "StandardLoop";
 | 
					 | 
				
			||||||
        this.loopInstanceForm = {};
 | 
					 | 
				
			||||||
        return;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      if (businessObject.loopCharacteristics.isSequential) {
 | 
					 | 
				
			||||||
        this.loopCharacteristics = "SequentialMultiInstance";
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        this.loopCharacteristics = "ParallelMultiInstance";
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      // 合并配置
 | 
					 | 
				
			||||||
      this.loopInstanceForm = {
 | 
					 | 
				
			||||||
        ...this.defaultLoopInstanceForm,
 | 
					 | 
				
			||||||
        ...businessObject.loopCharacteristics,
 | 
					 | 
				
			||||||
        completionCondition: businessObject.loopCharacteristics?.completionCondition?.body ?? "",
 | 
					 | 
				
			||||||
        loopCardinality: businessObject.loopCharacteristics?.loopCardinality?.body ?? ""
 | 
					 | 
				
			||||||
      };
 | 
					 | 
				
			||||||
      // 保留当前元素 businessObject 上的 loopCharacteristics 实例
 | 
					 | 
				
			||||||
      this.multiLoopInstance = window.bpmnInstances.bpmnElement.businessObject.loopCharacteristics;
 | 
					 | 
				
			||||||
      // 更新表单
 | 
					 | 
				
			||||||
      if (
 | 
					 | 
				
			||||||
        businessObject.loopCharacteristics.extensionElements &&
 | 
					 | 
				
			||||||
        businessObject.loopCharacteristics.extensionElements.values &&
 | 
					 | 
				
			||||||
        businessObject.loopCharacteristics.extensionElements.values.length
 | 
					 | 
				
			||||||
      ) {
 | 
					 | 
				
			||||||
        this.$set(this.loopInstanceForm, "timeCycle", businessObject.loopCharacteristics.extensionElements.values[0].body);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    changeLoopCharacteristicsType(type) {
 | 
					 | 
				
			||||||
      // this.loopInstanceForm = { ...this.defaultLoopInstanceForm }; // 切换类型取消原表单配置
 | 
					 | 
				
			||||||
      // 取消多实例配置
 | 
					 | 
				
			||||||
      if (type === "Null") {
 | 
					 | 
				
			||||||
        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, { loopCharacteristics: null });
 | 
					 | 
				
			||||||
        return;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      // 配置循环
 | 
					 | 
				
			||||||
      if (type === "StandardLoop") {
 | 
					 | 
				
			||||||
        const loopCharacteristicsObject = window.bpmnInstances.moddle.create("bpmn:StandardLoopCharacteristics");
 | 
					 | 
				
			||||||
        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
 | 
					 | 
				
			||||||
          loopCharacteristics: loopCharacteristicsObject
 | 
					 | 
				
			||||||
        });
 | 
					 | 
				
			||||||
        this.multiLoopInstance = null;
 | 
					 | 
				
			||||||
        return;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      // 时序
 | 
					 | 
				
			||||||
      if (type === "SequentialMultiInstance") {
 | 
					 | 
				
			||||||
        this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics", { isSequential: true });
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics", { collection: "${coll_userList}" });
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
 | 
					 | 
				
			||||||
        loopCharacteristics: this.multiLoopInstance
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 循环基数
 | 
					 | 
				
			||||||
    updateLoopCardinality(cardinality) {
 | 
					 | 
				
			||||||
      let loopCardinality = null;
 | 
					 | 
				
			||||||
      if (cardinality && cardinality.length) {
 | 
					 | 
				
			||||||
        loopCardinality = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: cardinality });
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, { loopCardinality });
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 完成条件
 | 
					 | 
				
			||||||
    updateLoopCondition(condition) {
 | 
					 | 
				
			||||||
      let completionCondition = null;
 | 
					 | 
				
			||||||
      if (condition && condition.length) {
 | 
					 | 
				
			||||||
        completionCondition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: condition });
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, { completionCondition });
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 重试周期
 | 
					 | 
				
			||||||
    updateLoopTimeCycle(timeCycle) {
 | 
					 | 
				
			||||||
      const extensionElements = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
 | 
					 | 
				
			||||||
        values: [
 | 
					 | 
				
			||||||
          window.bpmnInstances.moddle.create(`${this.prefix}:FailedJobRetryTimeCycle`, {
 | 
					 | 
				
			||||||
            body: timeCycle
 | 
					 | 
				
			||||||
          })
 | 
					 | 
				
			||||||
        ]
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, { extensionElements });
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 直接更新的基础信息
 | 
					 | 
				
			||||||
    updateLoopBase() {
 | 
					 | 
				
			||||||
      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, {
 | 
					 | 
				
			||||||
        collection: this.loopInstanceForm.collection || null,
 | 
					 | 
				
			||||||
        elementVariable: this.loopInstanceForm.elementVariable || null
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    // 各异步状态
 | 
					 | 
				
			||||||
    updateLoopAsync(key) {
 | 
					 | 
				
			||||||
      const { asyncBefore, asyncAfter } = this.loopInstanceForm;
 | 
					 | 
				
			||||||
      let asyncAttr = Object.create(null);
 | 
					 | 
				
			||||||
      if (!asyncBefore && !asyncAfter) {
 | 
					 | 
				
			||||||
        this.$set(this.loopInstanceForm, "exclusive", false);
 | 
					 | 
				
			||||||
        asyncAttr = { asyncBefore: false, asyncAfter: false, exclusive: false, extensionElements: null };
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        asyncAttr[key] = this.loopInstanceForm[key];
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.multiLoopInstance, asyncAttr);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  beforeDestroy() {
 | 
					 | 
				
			||||||
    this.multiLoopInstance = null;
 | 
					 | 
				
			||||||
    this.bpmnElement = null;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
</script>
 | 
					 | 
				
			||||||
@@ -1,59 +0,0 @@
 | 
				
			|||||||
<template>
 | 
					 | 
				
			||||||
  <div class="panel-tab__content">
 | 
					 | 
				
			||||||
    <div class="element-property input-property">
 | 
					 | 
				
			||||||
      <div class="element-property__label">元素文档:</div>
 | 
					 | 
				
			||||||
      <div class="element-property__value">
 | 
					 | 
				
			||||||
        <el-input
 | 
					 | 
				
			||||||
          type="textarea"
 | 
					 | 
				
			||||||
          v-model="documentation"
 | 
					 | 
				
			||||||
          size="mini"
 | 
					 | 
				
			||||||
          resize="vertical"
 | 
					 | 
				
			||||||
          :autosize="{ minRows: 2, maxRows: 4 }"
 | 
					 | 
				
			||||||
          @input="updateDocumentation"
 | 
					 | 
				
			||||||
          @blur="updateDocumentation"
 | 
					 | 
				
			||||||
        />
 | 
					 | 
				
			||||||
      </div>
 | 
					 | 
				
			||||||
    </div>
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
</template>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<script>
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  name: "ElementOtherConfig",
 | 
					 | 
				
			||||||
  props: {
 | 
					 | 
				
			||||||
    id: String
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  data() {
 | 
					 | 
				
			||||||
    return {
 | 
					 | 
				
			||||||
      documentation: ""
 | 
					 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  watch: {
 | 
					 | 
				
			||||||
    id: {
 | 
					 | 
				
			||||||
      immediate: true,
 | 
					 | 
				
			||||||
      handler: function(id) {
 | 
					 | 
				
			||||||
        if (id && id.length) {
 | 
					 | 
				
			||||||
          this.$nextTick(() => {
 | 
					 | 
				
			||||||
            const documentations = window.bpmnInstances.bpmnElement.businessObject?.documentation;
 | 
					 | 
				
			||||||
            this.documentation = documentations && documentations.length ? documentations[0].text : "";
 | 
					 | 
				
			||||||
          });
 | 
					 | 
				
			||||||
        } else {
 | 
					 | 
				
			||||||
          this.documentation = "";
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  methods: {
 | 
					 | 
				
			||||||
    updateDocumentation() {
 | 
					 | 
				
			||||||
      (this.bpmnElement && this.bpmnElement.id === this.id) || (this.bpmnElement = window.bpmnInstances.elementRegistry.get(this.id));
 | 
					 | 
				
			||||||
      const documentation = window.bpmnInstances.bpmnFactory.create("bpmn:Documentation", { text: this.documentation });
 | 
					 | 
				
			||||||
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
 | 
					 | 
				
			||||||
        documentation: [documentation]
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  beforeDestroy() {
 | 
					 | 
				
			||||||
    this.bpmnElement = null;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
</script>
 | 
					 | 
				
			||||||
@@ -1,135 +0,0 @@
 | 
				
			|||||||
<template>
 | 
					 | 
				
			||||||
  <div class="panel-tab__content">
 | 
					 | 
				
			||||||
    <el-table :data="elementPropertyList" size="mini" max-height="240" border fit>
 | 
					 | 
				
			||||||
      <el-table-column label="序号" width="50px" type="index" />
 | 
					 | 
				
			||||||
      <el-table-column label="属性名" prop="name" min-width="100px" show-overflow-tooltip />
 | 
					 | 
				
			||||||
      <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
 | 
					 | 
				
			||||||
      <el-table-column label="操作" width="90px">
 | 
					 | 
				
			||||||
        <template v-slot="{ row, $index }">
 | 
					 | 
				
			||||||
          <el-button size="mini" type="text" @click="openAttributesForm(row, $index)">编辑</el-button>
 | 
					 | 
				
			||||||
          <el-divider direction="vertical" />
 | 
					 | 
				
			||||||
          <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeAttributes(row, $index)">移除</el-button>
 | 
					 | 
				
			||||||
        </template>
 | 
					 | 
				
			||||||
      </el-table-column>
 | 
					 | 
				
			||||||
    </el-table>
 | 
					 | 
				
			||||||
    <div class="element-drawer__button">
 | 
					 | 
				
			||||||
      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openAttributesForm(null, -1)">添加属性</el-button>
 | 
					 | 
				
			||||||
    </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    <el-dialog :visible.sync="propertyFormModelVisible" title="属性配置" width="600px" append-to-body destroy-on-close>
 | 
					 | 
				
			||||||
      <el-form :model="propertyForm" label-width="80px" size="mini" ref="attributeFormRef" @submit.native.prevent>
 | 
					 | 
				
			||||||
        <el-form-item label="属性名:" prop="name">
 | 
					 | 
				
			||||||
          <el-input v-model="propertyForm.name" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="属性值:" prop="value">
 | 
					 | 
				
			||||||
          <el-input v-model="propertyForm.value" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
      </el-form>
 | 
					 | 
				
			||||||
      <template slot="footer">
 | 
					 | 
				
			||||||
        <el-button size="mini" @click="propertyFormModelVisible = false">取 消</el-button>
 | 
					 | 
				
			||||||
        <el-button size="mini" type="primary" @click="saveAttribute">确 定</el-button>
 | 
					 | 
				
			||||||
      </template>
 | 
					 | 
				
			||||||
    </el-dialog>
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
</template>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<script>
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  name: "ElementProperties",
 | 
					 | 
				
			||||||
  props: {
 | 
					 | 
				
			||||||
    id: String,
 | 
					 | 
				
			||||||
    type: String
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  inject: {
 | 
					 | 
				
			||||||
    prefix: "prefix",
 | 
					 | 
				
			||||||
    width: "width"
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  data() {
 | 
					 | 
				
			||||||
    return {
 | 
					 | 
				
			||||||
      elementPropertyList: [],
 | 
					 | 
				
			||||||
      propertyForm: {},
 | 
					 | 
				
			||||||
      editingPropertyIndex: -1,
 | 
					 | 
				
			||||||
      propertyFormModelVisible: false
 | 
					 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  watch: {
 | 
					 | 
				
			||||||
    id: {
 | 
					 | 
				
			||||||
      immediate: true,
 | 
					 | 
				
			||||||
      handler(val) {
 | 
					 | 
				
			||||||
        val && val.length && this.resetAttributesList();
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  methods: {
 | 
					 | 
				
			||||||
    resetAttributesList() {
 | 
					 | 
				
			||||||
      this.bpmnElement = window.bpmnInstances.bpmnElement;
 | 
					 | 
				
			||||||
      this.otherExtensionList = []; // 其他扩展配置
 | 
					 | 
				
			||||||
      this.bpmnElementProperties =
 | 
					 | 
				
			||||||
        this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => {
 | 
					 | 
				
			||||||
          if (ex.$type !== `${this.prefix}:Properties`) {
 | 
					 | 
				
			||||||
            this.otherExtensionList.push(ex);
 | 
					 | 
				
			||||||
          }
 | 
					 | 
				
			||||||
          return ex.$type === `${this.prefix}:Properties`;
 | 
					 | 
				
			||||||
        }) ?? [];
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
      // 保存所有的 扩展属性字段
 | 
					 | 
				
			||||||
      this.bpmnElementPropertyList = this.bpmnElementProperties.reduce((pre, current) => pre.concat(current.values), []);
 | 
					 | 
				
			||||||
      // 复制 显示
 | 
					 | 
				
			||||||
      this.elementPropertyList = JSON.parse(JSON.stringify(this.bpmnElementPropertyList ?? []));
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    openAttributesForm(attr, index) {
 | 
					 | 
				
			||||||
      this.editingPropertyIndex = index;
 | 
					 | 
				
			||||||
      this.propertyForm = index === -1 ? {} : JSON.parse(JSON.stringify(attr));
 | 
					 | 
				
			||||||
      this.propertyFormModelVisible = true;
 | 
					 | 
				
			||||||
      this.$nextTick(() => {
 | 
					 | 
				
			||||||
        if (this.$refs["attributeFormRef"]) this.$refs["attributeFormRef"].clearValidate();
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    removeAttributes(attr, index) {
 | 
					 | 
				
			||||||
      this.$confirm("确认移除该属性吗?", "提示", {
 | 
					 | 
				
			||||||
        confirmButtonText: "确 认",
 | 
					 | 
				
			||||||
        cancelButtonText: "取 消"
 | 
					 | 
				
			||||||
      })
 | 
					 | 
				
			||||||
        .then(() => {
 | 
					 | 
				
			||||||
          this.elementPropertyList.splice(index, 1);
 | 
					 | 
				
			||||||
          this.bpmnElementPropertyList.splice(index, 1);
 | 
					 | 
				
			||||||
          // 新建一个属性字段的保存列表
 | 
					 | 
				
			||||||
          const propertiesObject = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, {
 | 
					 | 
				
			||||||
            values: this.bpmnElementPropertyList
 | 
					 | 
				
			||||||
          });
 | 
					 | 
				
			||||||
          this.updateElementExtensions(propertiesObject);
 | 
					 | 
				
			||||||
          this.resetAttributesList();
 | 
					 | 
				
			||||||
        })
 | 
					 | 
				
			||||||
        .catch(() => console.info("操作取消"));
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    saveAttribute() {
 | 
					 | 
				
			||||||
      const { name, value } = this.propertyForm;
 | 
					 | 
				
			||||||
      console.log(this.bpmnElementPropertyList);
 | 
					 | 
				
			||||||
      if (this.editingPropertyIndex !== -1) {
 | 
					 | 
				
			||||||
        window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.bpmnElementPropertyList[this.editingPropertyIndex], {
 | 
					 | 
				
			||||||
          name,
 | 
					 | 
				
			||||||
          value
 | 
					 | 
				
			||||||
        });
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        // 新建属性字段
 | 
					 | 
				
			||||||
        const newPropertyObject = window.bpmnInstances.moddle.create(`${this.prefix}:Property`, { name, value });
 | 
					 | 
				
			||||||
        // 新建一个属性字段的保存列表
 | 
					 | 
				
			||||||
        const propertiesObject = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, {
 | 
					 | 
				
			||||||
          values: this.bpmnElementPropertyList.concat([newPropertyObject])
 | 
					 | 
				
			||||||
        });
 | 
					 | 
				
			||||||
        this.updateElementExtensions(propertiesObject);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      this.propertyFormModelVisible = false;
 | 
					 | 
				
			||||||
      this.resetAttributesList();
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    updateElementExtensions(properties) {
 | 
					 | 
				
			||||||
      const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
 | 
					 | 
				
			||||||
        values: this.otherExtensionList.concat([properties])
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
 | 
					 | 
				
			||||||
        extensionElements: extensions
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
</script>
 | 
					 | 
				
			||||||
@@ -1,104 +0,0 @@
 | 
				
			|||||||
<template>
 | 
					 | 
				
			||||||
  <div class="panel-tab__content">
 | 
					 | 
				
			||||||
    <div class="panel-tab__content--title">
 | 
					 | 
				
			||||||
      <span><i class="el-icon-menu" style="margin-right: 8px; color: #555555"></i>消息列表</span>
 | 
					 | 
				
			||||||
      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openModel('message')">创建新消息</el-button>
 | 
					 | 
				
			||||||
    </div>
 | 
					 | 
				
			||||||
    <el-table :data="messageList" size="mini" border>
 | 
					 | 
				
			||||||
      <el-table-column type="index" label="序号" width="60px" />
 | 
					 | 
				
			||||||
      <el-table-column label="消息ID" prop="id" max-width="300px" show-overflow-tooltip />
 | 
					 | 
				
			||||||
      <el-table-column label="消息名称" prop="name" max-width="300px" show-overflow-tooltip />
 | 
					 | 
				
			||||||
    </el-table>
 | 
					 | 
				
			||||||
    <div class="panel-tab__content--title" style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eeeeee">
 | 
					 | 
				
			||||||
      <span><i class="el-icon-menu" style="margin-right: 8px; color: #555555"></i>信号列表</span>
 | 
					 | 
				
			||||||
      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openModel('signal')">创建新信号</el-button>
 | 
					 | 
				
			||||||
    </div>
 | 
					 | 
				
			||||||
    <el-table :data="signalList" size="mini" border>
 | 
					 | 
				
			||||||
      <el-table-column type="index" label="序号" width="60px" />
 | 
					 | 
				
			||||||
      <el-table-column label="信号ID" prop="id" max-width="300px" show-overflow-tooltip />
 | 
					 | 
				
			||||||
      <el-table-column label="信号名称" prop="name" max-width="300px" show-overflow-tooltip />
 | 
					 | 
				
			||||||
    </el-table>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    <el-dialog :visible.sync="modelVisible" :title="modelConfig.title" :close-on-click-modal="false" width="400px" append-to-body destroy-on-close>
 | 
					 | 
				
			||||||
      <el-form :model="modelObjectForm" size="mini" label-width="90px" @submit.native.prevent>
 | 
					 | 
				
			||||||
        <el-form-item :label="modelConfig.idLabel">
 | 
					 | 
				
			||||||
          <el-input v-model="modelObjectForm.id" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item :label="modelConfig.nameLabel">
 | 
					 | 
				
			||||||
          <el-input v-model="modelObjectForm.name" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
      </el-form>
 | 
					 | 
				
			||||||
      <template slot="footer">
 | 
					 | 
				
			||||||
        <el-button size="mini" @click="modelVisible = false">取 消</el-button>
 | 
					 | 
				
			||||||
        <el-button size="mini" type="primary" @click="addNewObject">保 存</el-button>
 | 
					 | 
				
			||||||
      </template>
 | 
					 | 
				
			||||||
    </el-dialog>
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
</template>
 | 
					 | 
				
			||||||
<script>
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  name: "SignalAndMassage",
 | 
					 | 
				
			||||||
  data() {
 | 
					 | 
				
			||||||
    return {
 | 
					 | 
				
			||||||
      signalList: [],
 | 
					 | 
				
			||||||
      messageList: [],
 | 
					 | 
				
			||||||
      modelVisible: false,
 | 
					 | 
				
			||||||
      modelType: "",
 | 
					 | 
				
			||||||
      modelObjectForm: {}
 | 
					 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  computed: {
 | 
					 | 
				
			||||||
    modelConfig() {
 | 
					 | 
				
			||||||
      if (this.modelType === "message") {
 | 
					 | 
				
			||||||
        return { title: "创建消息", idLabel: "消息ID", nameLabel: "消息名称" };
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        return { title: "创建信号", idLabel: "信号ID", nameLabel: "信号名称" };
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  mounted() {
 | 
					 | 
				
			||||||
    this.initDataList();
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  methods: {
 | 
					 | 
				
			||||||
    initDataList() {
 | 
					 | 
				
			||||||
      this.rootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;
 | 
					 | 
				
			||||||
      this.messageIdMap = {};
 | 
					 | 
				
			||||||
      this.signalIdMap = {};
 | 
					 | 
				
			||||||
      this.messageList = [];
 | 
					 | 
				
			||||||
      this.signalList = [];
 | 
					 | 
				
			||||||
      this.rootElements.forEach(el => {
 | 
					 | 
				
			||||||
        if (el.$type === "bpmn:Message") {
 | 
					 | 
				
			||||||
          this.messageIdMap[el.id] = true;
 | 
					 | 
				
			||||||
          this.messageList.push({ ...el });
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
        if (el.$type === "bpmn:Signal") {
 | 
					 | 
				
			||||||
          this.signalIdMap[el.id] = true;
 | 
					 | 
				
			||||||
          this.signalList.push({ ...el });
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    openModel(type) {
 | 
					 | 
				
			||||||
      this.modelType = type;
 | 
					 | 
				
			||||||
      this.modelObjectForm = {};
 | 
					 | 
				
			||||||
      this.modelVisible = true;
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    addNewObject() {
 | 
					 | 
				
			||||||
      if (this.modelType === "message") {
 | 
					 | 
				
			||||||
        if (this.messageIdMap[this.modelObjectForm.id]) {
 | 
					 | 
				
			||||||
          return this.$message.error("该消息已存在,请修改id后重新保存");
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
        const messageRef = window.bpmnInstances.moddle.create("bpmn:Message", this.modelObjectForm);
 | 
					 | 
				
			||||||
        this.rootElements.push(messageRef);
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        if (this.signalIdMap[this.modelObjectForm.id]) {
 | 
					 | 
				
			||||||
          return this.$message.error("该信号已存在,请修改id后重新保存");
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
        const signalRef = window.bpmnInstances.moddle.create("bpmn:Signal", this.modelObjectForm);
 | 
					 | 
				
			||||||
        this.rootElements.push(signalRef);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      this.modelVisible = false;
 | 
					 | 
				
			||||||
      this.initDataList();
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
</script>
 | 
					 | 
				
			||||||
@@ -1,72 +0,0 @@
 | 
				
			|||||||
<template>
 | 
					 | 
				
			||||||
  <div class="panel-tab__content">
 | 
					 | 
				
			||||||
    <el-form size="mini" label-width="90px" @submit.native.prevent>
 | 
					 | 
				
			||||||
      <el-form-item label="异步延续">
 | 
					 | 
				
			||||||
        <el-checkbox v-model="taskConfigForm.asyncBefore" label="异步前" @change="changeTaskAsync" />
 | 
					 | 
				
			||||||
        <el-checkbox v-model="taskConfigForm.asyncAfter" label="异步后" @change="changeTaskAsync" />
 | 
					 | 
				
			||||||
        <el-checkbox v-model="taskConfigForm.exclusive" v-if="taskConfigForm.asyncAfter || taskConfigForm.asyncBefore" label="排除" @change="changeTaskAsync" />
 | 
					 | 
				
			||||||
      </el-form-item>
 | 
					 | 
				
			||||||
      <component :is="witchTaskComponent" v-bind="$props" />
 | 
					 | 
				
			||||||
    </el-form>
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
</template>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<script>
 | 
					 | 
				
			||||||
import UserTask from "./task-components/UserTask";
 | 
					 | 
				
			||||||
import ScriptTask from "./task-components/ScriptTask";
 | 
					 | 
				
			||||||
import ReceiveTask from "./task-components/ReceiveTask";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  name: "ElementTaskConfig",
 | 
					 | 
				
			||||||
  components: { UserTask, ScriptTask, ReceiveTask },
 | 
					 | 
				
			||||||
  props: {
 | 
					 | 
				
			||||||
    id: String,
 | 
					 | 
				
			||||||
    type: String
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  data() {
 | 
					 | 
				
			||||||
    return {
 | 
					 | 
				
			||||||
      taskConfigForm: {
 | 
					 | 
				
			||||||
        asyncAfter: false,
 | 
					 | 
				
			||||||
        asyncBefore: false,
 | 
					 | 
				
			||||||
        exclusive: false
 | 
					 | 
				
			||||||
      },
 | 
					 | 
				
			||||||
      witchTaskComponent: "",
 | 
					 | 
				
			||||||
      installedComponent: {
 | 
					 | 
				
			||||||
        // 手工任务与普通任务一致,不需要其他配置
 | 
					 | 
				
			||||||
        // 接收消息任务,需要在全局下插入新的消息实例,并在该节点下的 messageRef 属性绑定该实例
 | 
					 | 
				
			||||||
        // 发送任务、服务任务、业务规则任务共用一个相同配置
 | 
					 | 
				
			||||||
        UserTask: "UserTask", // 用户任务配置
 | 
					 | 
				
			||||||
        ScriptTask: "ScriptTask", // 脚本任务配置
 | 
					 | 
				
			||||||
        ReceiveTask: "ReceiveTask" // 消息接收任务
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  watch: {
 | 
					 | 
				
			||||||
    id: {
 | 
					 | 
				
			||||||
      immediate: true,
 | 
					 | 
				
			||||||
      handler() {
 | 
					 | 
				
			||||||
        this.bpmnElement = window.bpmnInstances.bpmnElement;
 | 
					 | 
				
			||||||
        this.taskConfigForm.asyncBefore = this.bpmnElement?.businessObject?.asyncBefore;
 | 
					 | 
				
			||||||
        this.taskConfigForm.asyncAfter = this.bpmnElement?.businessObject?.asyncAfter;
 | 
					 | 
				
			||||||
        this.taskConfigForm.exclusive = this.bpmnElement?.businessObject?.exclusive;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    type: {
 | 
					 | 
				
			||||||
      immediate: true,
 | 
					 | 
				
			||||||
      handler() {
 | 
					 | 
				
			||||||
        this.witchTaskComponent = this.installedComponent[this.type];
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  methods: {
 | 
					 | 
				
			||||||
    changeTaskAsync() {
 | 
					 | 
				
			||||||
      if (!this.taskConfigForm.asyncBefore && !this.taskConfigForm.asyncAfter) {
 | 
					 | 
				
			||||||
        this.taskConfigForm.exclusive = false;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      window.bpmnInstances.modeling.updateProperties(window.bpmnInstances.bpmnElement, {
 | 
					 | 
				
			||||||
        ...this.taskConfigForm
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
</script>
 | 
					 | 
				
			||||||
@@ -1,97 +0,0 @@
 | 
				
			|||||||
<template>
 | 
					 | 
				
			||||||
  <div style="margin-top: 16px">
 | 
					 | 
				
			||||||
    <el-form-item label="消息实例">
 | 
					 | 
				
			||||||
      <div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap">
 | 
					 | 
				
			||||||
        <el-select v-model="bindMessageId" @change="updateTaskMessage">
 | 
					 | 
				
			||||||
          <el-option v-for="id in Object.keys(messageMap)" :value="id" :label="messageMap[id]" :key="id" />
 | 
					 | 
				
			||||||
        </el-select>
 | 
					 | 
				
			||||||
        <el-button size="mini" type="primary" icon="el-icon-plus" style="margin-left: 8px" @click="openMessageModel" />
 | 
					 | 
				
			||||||
      </div>
 | 
					 | 
				
			||||||
    </el-form-item>
 | 
					 | 
				
			||||||
    <el-dialog :visible.sync="messageModelVisible" :close-on-click-modal="false" title="创建新消息" width="400px" append-to-body destroy-on-close>
 | 
					 | 
				
			||||||
      <el-form :model="newMessageForm" size="mini" label-width="90px" @submit.native.prevent>
 | 
					 | 
				
			||||||
        <el-form-item label="消息ID">
 | 
					 | 
				
			||||||
          <el-input v-model="newMessageForm.id" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
        <el-form-item label="消息名称">
 | 
					 | 
				
			||||||
          <el-input v-model="newMessageForm.name" clearable />
 | 
					 | 
				
			||||||
        </el-form-item>
 | 
					 | 
				
			||||||
      </el-form>
 | 
					 | 
				
			||||||
      <template slot="footer">
 | 
					 | 
				
			||||||
        <el-button size="mini" type="primary" @click="createNewMessage">确 认</el-button>
 | 
					 | 
				
			||||||
      </template>
 | 
					 | 
				
			||||||
    </el-dialog>
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
</template>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<script>
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  name: "ReceiveTask",
 | 
					 | 
				
			||||||
  props: {
 | 
					 | 
				
			||||||
    id: String,
 | 
					 | 
				
			||||||
    type: String
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  data() {
 | 
					 | 
				
			||||||
    return {
 | 
					 | 
				
			||||||
      bindMessageId: "",
 | 
					 | 
				
			||||||
      newMessageForm: {},
 | 
					 | 
				
			||||||
      messageMap: {},
 | 
					 | 
				
			||||||
      messageModelVisible: false
 | 
					 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  watch: {
 | 
					 | 
				
			||||||
    id: {
 | 
					 | 
				
			||||||
      immediate: true,
 | 
					 | 
				
			||||||
      handler() {
 | 
					 | 
				
			||||||
        this.$nextTick(() => this.getBindMessage());
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  created() {
 | 
					 | 
				
			||||||
    this.bpmnMessageRefsMap = Object.create(null);
 | 
					 | 
				
			||||||
    this.bpmnRootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;
 | 
					 | 
				
			||||||
    this.bpmnRootElements
 | 
					 | 
				
			||||||
      .filter(el => el.$type === "bpmn:Message")
 | 
					 | 
				
			||||||
      .forEach(m => {
 | 
					 | 
				
			||||||
        this.bpmnMessageRefsMap[m.id] = m;
 | 
					 | 
				
			||||||
        this.$set(this.messageMap, m.id, m.name);
 | 
					 | 
				
			||||||
      });
 | 
					 | 
				
			||||||
    this.$set(this.messageMap, "-1", "无"); // 添加一个空对象,保证可以取消原消息绑定
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  methods: {
 | 
					 | 
				
			||||||
    getBindMessage() {
 | 
					 | 
				
			||||||
      this.bpmnElement = window.bpmnInstances.bpmnElement;
 | 
					 | 
				
			||||||
      this.bindMessageId = this.bpmnElement.businessObject?.messageRef?.id || "-1";
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    openMessageModel() {
 | 
					 | 
				
			||||||
      this.messageModelVisible = true;
 | 
					 | 
				
			||||||
      this.newMessageForm = {};
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    createNewMessage() {
 | 
					 | 
				
			||||||
      if (this.messageMap[this.newMessageForm.id]) {
 | 
					 | 
				
			||||||
        this.$message.error("该消息已存在,请修改id后重新保存");
 | 
					 | 
				
			||||||
        return;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      const newMessage = window.bpmnInstances.moddle.create("bpmn:Message", this.newMessageForm);
 | 
					 | 
				
			||||||
      this.bpmnRootElements.push(newMessage);
 | 
					 | 
				
			||||||
      this.$set(this.messageMap, this.newMessageForm.id, this.newMessageForm.name);
 | 
					 | 
				
			||||||
      this.bpmnMessageRefsMap[this.newMessageForm.id] = newMessage;
 | 
					 | 
				
			||||||
      this.messageModelVisible = false;
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    updateTaskMessage(messageId) {
 | 
					 | 
				
			||||||
      if (messageId === "-1") {
 | 
					 | 
				
			||||||
        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
 | 
					 | 
				
			||||||
          messageRef: null
 | 
					 | 
				
			||||||
        });
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
 | 
					 | 
				
			||||||
          messageRef: this.bpmnMessageRefsMap[messageId]
 | 
					 | 
				
			||||||
        });
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  beforeDestroy() {
 | 
					 | 
				
			||||||
    this.bpmnElement = null;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
</script>
 | 
					 | 
				
			||||||
@@ -1,85 +0,0 @@
 | 
				
			|||||||
<template>
 | 
					 | 
				
			||||||
  <div style="margin-top: 16px">
 | 
					 | 
				
			||||||
    <el-form-item label="脚本格式">
 | 
					 | 
				
			||||||
      <el-input v-model="scriptTaskForm.scriptFormat" clearable @input="updateElementTask()" @change="updateElementTask()" />
 | 
					 | 
				
			||||||
    </el-form-item>
 | 
					 | 
				
			||||||
    <el-form-item label="脚本类型">
 | 
					 | 
				
			||||||
      <el-select v-model="scriptTaskForm.scriptType">
 | 
					 | 
				
			||||||
        <el-option label="内联脚本" value="inline" />
 | 
					 | 
				
			||||||
        <el-option label="外部资源" value="external" />
 | 
					 | 
				
			||||||
      </el-select>
 | 
					 | 
				
			||||||
    </el-form-item>
 | 
					 | 
				
			||||||
    <el-form-item label="脚本" v-show="scriptTaskForm.scriptType === 'inline'">
 | 
					 | 
				
			||||||
      <el-input
 | 
					 | 
				
			||||||
        v-model="scriptTaskForm.script"
 | 
					 | 
				
			||||||
        type="textarea"
 | 
					 | 
				
			||||||
        resize="vertical"
 | 
					 | 
				
			||||||
        :autosize="{ minRows: 2, maxRows: 4 }"
 | 
					 | 
				
			||||||
        clearable
 | 
					 | 
				
			||||||
        @input="updateElementTask()"
 | 
					 | 
				
			||||||
        @change="updateElementTask()"
 | 
					 | 
				
			||||||
      />
 | 
					 | 
				
			||||||
    </el-form-item>
 | 
					 | 
				
			||||||
    <el-form-item label="资源地址" v-show="scriptTaskForm.scriptType === 'external'">
 | 
					 | 
				
			||||||
      <el-input v-model="scriptTaskForm.resource" clearable @input="updateElementTask()" @change="updateElementTask()" />
 | 
					 | 
				
			||||||
    </el-form-item>
 | 
					 | 
				
			||||||
    <el-form-item label="结果变量">
 | 
					 | 
				
			||||||
      <el-input v-model="scriptTaskForm.resultVariable" clearable @input="updateElementTask()" @change="updateElementTask()" />
 | 
					 | 
				
			||||||
    </el-form-item>
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
</template>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<script>
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  name: "ScriptTask",
 | 
					 | 
				
			||||||
  props: {
 | 
					 | 
				
			||||||
    id: String,
 | 
					 | 
				
			||||||
    type: String
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  data() {
 | 
					 | 
				
			||||||
    return {
 | 
					 | 
				
			||||||
      defaultTaskForm: {
 | 
					 | 
				
			||||||
        scriptFormat: "",
 | 
					 | 
				
			||||||
        script: "",
 | 
					 | 
				
			||||||
        resource: "",
 | 
					 | 
				
			||||||
        resultVariable: ""
 | 
					 | 
				
			||||||
      },
 | 
					 | 
				
			||||||
      scriptTaskForm: {}
 | 
					 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  watch: {
 | 
					 | 
				
			||||||
    id: {
 | 
					 | 
				
			||||||
      immediate: true,
 | 
					 | 
				
			||||||
      handler() {
 | 
					 | 
				
			||||||
        this.bpmnElement = window.bpmnInstances.bpmnElement;
 | 
					 | 
				
			||||||
        this.$nextTick(() => this.resetTaskForm());
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  methods: {
 | 
					 | 
				
			||||||
    resetTaskForm() {
 | 
					 | 
				
			||||||
      for (let key in this.defaultTaskForm) {
 | 
					 | 
				
			||||||
        let value = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
 | 
					 | 
				
			||||||
        this.$set(this.scriptTaskForm, key, value);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      this.$set(this.scriptTaskForm, "scriptType", this.scriptTaskForm.script ? "inline" : "external");
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    updateElementTask() {
 | 
					 | 
				
			||||||
      let taskAttr = Object.create(null);
 | 
					 | 
				
			||||||
      taskAttr.scriptFormat = this.scriptTaskForm.scriptFormat || null;
 | 
					 | 
				
			||||||
      taskAttr.resultVariable = this.scriptTaskForm.resultVariable || null;
 | 
					 | 
				
			||||||
      if (this.scriptTaskForm.scriptType === "inline") {
 | 
					 | 
				
			||||||
        taskAttr.script = this.scriptTaskForm.script || null;
 | 
					 | 
				
			||||||
        taskAttr.resource = null;
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        taskAttr.resource = this.scriptTaskForm.resource || null;
 | 
					 | 
				
			||||||
        taskAttr.script = null;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  beforeDestroy() {
 | 
					 | 
				
			||||||
    this.bpmnElement = null;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
</script>
 | 
					 | 
				
			||||||
@@ -1,89 +0,0 @@
 | 
				
			|||||||
<template>
 | 
					 | 
				
			||||||
  <div style="margin-top: 16px">
 | 
					 | 
				
			||||||
<!--    <el-form-item label="处理用户">-->
 | 
					 | 
				
			||||||
<!--      <el-select v-model="userTaskForm.assignee" @change="updateElementTask('assignee')">-->
 | 
					 | 
				
			||||||
<!--        <el-option v-for="ak in mockData" :key="'ass-' + ak" :label="`用户${ak}`" :value="`user${ak}`" />-->
 | 
					 | 
				
			||||||
<!--      </el-select>-->
 | 
					 | 
				
			||||||
<!--    </el-form-item>-->
 | 
					 | 
				
			||||||
<!--    <el-form-item label="候选用户">-->
 | 
					 | 
				
			||||||
<!--      <el-select v-model="userTaskForm.candidateUsers" multiple collapse-tags @change="updateElementTask('candidateUsers')">-->
 | 
					 | 
				
			||||||
<!--        <el-option v-for="uk in mockData" :key="'user-' + uk" :label="`用户${uk}`" :value="`user${uk}`" />-->
 | 
					 | 
				
			||||||
<!--      </el-select>-->
 | 
					 | 
				
			||||||
<!--    </el-form-item>-->
 | 
					 | 
				
			||||||
<!--    <el-form-item label="候选分组">-->
 | 
					 | 
				
			||||||
<!--      <el-select v-model="userTaskForm.candidateGroups" multiple collapse-tags @change="updateElementTask('candidateGroups')">-->
 | 
					 | 
				
			||||||
<!--        <el-option v-for="gk in mockData" :key="'ass-' + gk" :label="`分组${gk}`" :value="`group${gk}`" />-->
 | 
					 | 
				
			||||||
<!--      </el-select>-->
 | 
					 | 
				
			||||||
<!--    </el-form-item>-->
 | 
					 | 
				
			||||||
    <el-form-item label="到期时间">
 | 
					 | 
				
			||||||
      <el-input v-model="userTaskForm.dueDate" clearable @change="updateElementTask('dueDate')" />
 | 
					 | 
				
			||||||
    </el-form-item>
 | 
					 | 
				
			||||||
    <el-form-item label="跟踪时间">
 | 
					 | 
				
			||||||
      <el-input v-model="userTaskForm.followUpDate" clearable @change="updateElementTask('followUpDate')" />
 | 
					 | 
				
			||||||
    </el-form-item>
 | 
					 | 
				
			||||||
    <el-form-item label="优先级">
 | 
					 | 
				
			||||||
      <el-input v-model="userTaskForm.priority" clearable @change="updateElementTask('priority')" />
 | 
					 | 
				
			||||||
    </el-form-item>
 | 
					 | 
				
			||||||
    友情提示:任务的分配规则,使用
 | 
					 | 
				
			||||||
    <router-link target="_blank" :to="{path:'/bpm/manager/model'}"><el-link type="danger">流程模型</el-link> </router-link>
 | 
					 | 
				
			||||||
    下的【分配规则】替代,提供指定角色、部门负责人、部门成员、岗位、工作组、自定义脚本等 7 种维护的任务分配维度,更加灵活!
 | 
					 | 
				
			||||||
  </div>
 | 
					 | 
				
			||||||
</template>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
<script>
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  name: "UserTask",
 | 
					 | 
				
			||||||
  props: {
 | 
					 | 
				
			||||||
    id: String,
 | 
					 | 
				
			||||||
    type: String
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  data() {
 | 
					 | 
				
			||||||
    return {
 | 
					 | 
				
			||||||
      defaultTaskForm: {
 | 
					 | 
				
			||||||
        assignee: "",
 | 
					 | 
				
			||||||
        candidateUsers: [],
 | 
					 | 
				
			||||||
        candidateGroups: [],
 | 
					 | 
				
			||||||
        dueDate: "",
 | 
					 | 
				
			||||||
        followUpDate: "",
 | 
					 | 
				
			||||||
        priority: ""
 | 
					 | 
				
			||||||
      },
 | 
					 | 
				
			||||||
      userTaskForm: {},
 | 
					 | 
				
			||||||
      mockData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
 | 
					 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  watch: {
 | 
					 | 
				
			||||||
    id: {
 | 
					 | 
				
			||||||
      immediate: true,
 | 
					 | 
				
			||||||
      handler() {
 | 
					 | 
				
			||||||
        this.bpmnElement = window.bpmnInstances.bpmnElement;
 | 
					 | 
				
			||||||
        this.$nextTick(() => this.resetTaskForm());
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  methods: {
 | 
					 | 
				
			||||||
    resetTaskForm() {
 | 
					 | 
				
			||||||
      for (let key in this.defaultTaskForm) {
 | 
					 | 
				
			||||||
        let value;
 | 
					 | 
				
			||||||
        if (key === "candidateUsers" || key === "candidateGroups") {
 | 
					 | 
				
			||||||
          value = this.bpmnElement?.businessObject[key] ? this.bpmnElement.businessObject[key].split(",") : [];
 | 
					 | 
				
			||||||
        } else {
 | 
					 | 
				
			||||||
          value = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
        this.$set(this.userTaskForm, key, value);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    },
 | 
					 | 
				
			||||||
    updateElementTask(key) {
 | 
					 | 
				
			||||||
      const taskAttr = Object.create(null);
 | 
					 | 
				
			||||||
      if (key === "candidateUsers" || key === "candidateGroups") {
 | 
					 | 
				
			||||||
        taskAttr[key] = this.userTaskForm[key] && this.userTaskForm[key].length ? this.userTaskForm[key].join() : null;
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        taskAttr[key] = this.userTaskForm[key] || null;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  beforeDestroy() {
 | 
					 | 
				
			||||||
    this.bpmnElement = null;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
</script>
 | 
					 | 
				
			||||||
@@ -1,70 +0,0 @@
 | 
				
			|||||||
/* 改变主题色变量 */
 | 
					 | 
				
			||||||
$--color-primary: #1890ff;
 | 
					 | 
				
			||||||
$--color-danger: #ff4d4f;
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
/* 改变 icon 字体路径变量,必需 */
 | 
					 | 
				
			||||||
$--font-path: '~element-ui/lib/theme-chalk/fonts';
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
@import "~element-ui/packages/theme-chalk/src/index";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.el-table td,
 | 
					 | 
				
			||||||
.el-table th {
 | 
					 | 
				
			||||||
  color: #333;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.el-drawer__header {
 | 
					 | 
				
			||||||
  padding: 16px 16px 8px 16px;
 | 
					 | 
				
			||||||
  margin: 0;
 | 
					 | 
				
			||||||
  line-height: 24px;
 | 
					 | 
				
			||||||
  font-size: 18px;
 | 
					 | 
				
			||||||
  color: #303133;
 | 
					 | 
				
			||||||
  box-sizing: border-box;
 | 
					 | 
				
			||||||
  border-bottom: 1px solid #e8e8e8;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
div[class^="el-drawer"]:focus,
 | 
					 | 
				
			||||||
span:focus {
 | 
					 | 
				
			||||||
  outline: none;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.el-drawer__body {
 | 
					 | 
				
			||||||
  box-sizing: border-box;
 | 
					 | 
				
			||||||
  padding: 16px;
 | 
					 | 
				
			||||||
  width: 100%;
 | 
					 | 
				
			||||||
  overflow-y: auto;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.el-dialog {
 | 
					 | 
				
			||||||
  margin-top: 50vh !important;
 | 
					 | 
				
			||||||
  transform: translateY(-50%);
 | 
					 | 
				
			||||||
  overflow: hidden;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.el-dialog__wrapper {
 | 
					 | 
				
			||||||
  overflow: hidden;
 | 
					 | 
				
			||||||
  max-height: 100vh;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.el-dialog__header {
 | 
					 | 
				
			||||||
  padding: 16px 16px 8px 16px;
 | 
					 | 
				
			||||||
  box-sizing: border-box;
 | 
					 | 
				
			||||||
  border-bottom: 1px solid #e8e8e8;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.el-dialog__body {
 | 
					 | 
				
			||||||
  padding: 16px;
 | 
					 | 
				
			||||||
  max-height: 80vh;
 | 
					 | 
				
			||||||
  box-sizing: border-box;
 | 
					 | 
				
			||||||
  overflow-y: auto;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.el-dialog__footer {
 | 
					 | 
				
			||||||
  padding: 16px;
 | 
					 | 
				
			||||||
  box-sizing: border-box;
 | 
					 | 
				
			||||||
  border-top: 1px solid #e8e8e8;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.el-dialog__close {
 | 
					 | 
				
			||||||
  font-weight: 600;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.el-select {
 | 
					 | 
				
			||||||
  width: 100%;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.el-divider:not(.el-divider--horizontal) {
 | 
					 | 
				
			||||||
  margin: 0 8px ;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.el-divider.el-divider--horizontal {
 | 
					 | 
				
			||||||
  margin: 16px 0;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
@@ -1,2 +0,0 @@
 | 
				
			|||||||
@import "./process-designer.scss";
 | 
					 | 
				
			||||||
@import "./process-panel.scss";
 | 
					 | 
				
			||||||
@@ -1,156 +0,0 @@
 | 
				
			|||||||
@import "~bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css";
 | 
					 | 
				
			||||||
@import "~bpmn-js-token-simulation/assets/css/font-awesome.min.css";
 | 
					 | 
				
			||||||
@import "~bpmn-js-token-simulation/assets/css/normalize.css";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
// 边框被 token-simulation 样式覆盖了
 | 
					 | 
				
			||||||
.djs-palette {
 | 
					 | 
				
			||||||
  background: var(--palette-background-color);
 | 
					 | 
				
			||||||
  border: solid 1px var(--palette-border-color) !important;
 | 
					 | 
				
			||||||
  border-radius: 2px;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.my-process-designer {
 | 
					 | 
				
			||||||
  display: flex;
 | 
					 | 
				
			||||||
  flex-direction: column;
 | 
					 | 
				
			||||||
  width: 100%;
 | 
					 | 
				
			||||||
  height: 100%;
 | 
					 | 
				
			||||||
  box-sizing: border-box;
 | 
					 | 
				
			||||||
  .my-process-designer__header {
 | 
					 | 
				
			||||||
    width: 100%;
 | 
					 | 
				
			||||||
    min-height: 36px;
 | 
					 | 
				
			||||||
    .el-button {
 | 
					 | 
				
			||||||
      text-align: center;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    .el-button-group {
 | 
					 | 
				
			||||||
      margin: 4px;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    .el-tooltip__popper {
 | 
					 | 
				
			||||||
      .el-button {
 | 
					 | 
				
			||||||
        width: 100%;
 | 
					 | 
				
			||||||
        text-align: left;
 | 
					 | 
				
			||||||
        padding-left: 8px;
 | 
					 | 
				
			||||||
        padding-right: 8px;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      .el-button:hover {
 | 
					 | 
				
			||||||
        background: rgba(64, 158, 255, 0.8);
 | 
					 | 
				
			||||||
        color: #ffffff;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    .align {
 | 
					 | 
				
			||||||
      position: relative;
 | 
					 | 
				
			||||||
      i {
 | 
					 | 
				
			||||||
        &:after {
 | 
					 | 
				
			||||||
          content: "|";
 | 
					 | 
				
			||||||
          position: absolute;
 | 
					 | 
				
			||||||
          transform: rotate(90deg) translate(200%, 60%);
 | 
					 | 
				
			||||||
        }
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    .align.align-left i {
 | 
					 | 
				
			||||||
      transform: rotate(90deg);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    .align.align-right i {
 | 
					 | 
				
			||||||
      transform: rotate(-90deg);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    .align.align-top i {
 | 
					 | 
				
			||||||
      transform: rotate(180deg);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    .align.align-bottom i {
 | 
					 | 
				
			||||||
      transform: rotate(0deg);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    .align.align-center i {
 | 
					 | 
				
			||||||
      transform: rotate(90deg);
 | 
					 | 
				
			||||||
      &:after {
 | 
					 | 
				
			||||||
        transform: rotate(90deg) translate(0, 60%);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    .align.align-middle i {
 | 
					 | 
				
			||||||
      transform: rotate(0deg);
 | 
					 | 
				
			||||||
      &:after {
 | 
					 | 
				
			||||||
        transform: rotate(90deg) translate(0, 60%);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
  .my-process-designer__container {
 | 
					 | 
				
			||||||
    display: inline-flex;
 | 
					 | 
				
			||||||
    width: 100%;
 | 
					 | 
				
			||||||
    flex: 1;
 | 
					 | 
				
			||||||
    .my-process-designer__canvas {
 | 
					 | 
				
			||||||
      flex: 1;
 | 
					 | 
				
			||||||
      height: 100%;
 | 
					 | 
				
			||||||
      position: relative;
 | 
					 | 
				
			||||||
      background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+")
 | 
					 | 
				
			||||||
      repeat !important;
 | 
					 | 
				
			||||||
      div.toggle-mode {
 | 
					 | 
				
			||||||
        display: none;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    .my-process-designer__property-panel {
 | 
					 | 
				
			||||||
      height: 100%;
 | 
					 | 
				
			||||||
      overflow: scroll;
 | 
					 | 
				
			||||||
      overflow-y: auto;
 | 
					 | 
				
			||||||
      z-index: 10;
 | 
					 | 
				
			||||||
      * {
 | 
					 | 
				
			||||||
        box-sizing: border-box;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    svg {
 | 
					 | 
				
			||||||
      width: 100%;
 | 
					 | 
				
			||||||
      height: 100%;
 | 
					 | 
				
			||||||
      min-height: 100%;
 | 
					 | 
				
			||||||
      overflow: hidden;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
//侧边栏配置
 | 
					 | 
				
			||||||
.djs-palette.open {
 | 
					 | 
				
			||||||
  .djs-palette-entries {
 | 
					 | 
				
			||||||
    div[class^="bpmn-icon-"]:before,
 | 
					 | 
				
			||||||
    div[class*="bpmn-icon-"]:before {
 | 
					 | 
				
			||||||
      line-height: unset;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    div.entry {
 | 
					 | 
				
			||||||
      position: relative;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    div.entry:hover {
 | 
					 | 
				
			||||||
      &::after {
 | 
					 | 
				
			||||||
        width: max-content;
 | 
					 | 
				
			||||||
        content: attr(title);
 | 
					 | 
				
			||||||
        vertical-align: text-bottom;
 | 
					 | 
				
			||||||
        position: absolute;
 | 
					 | 
				
			||||||
        right: -10px;
 | 
					 | 
				
			||||||
        top: 0;
 | 
					 | 
				
			||||||
        bottom: 0;
 | 
					 | 
				
			||||||
        overflow: hidden;
 | 
					 | 
				
			||||||
        transform: translateX(100%);
 | 
					 | 
				
			||||||
        font-size: 0.5em;
 | 
					 | 
				
			||||||
        display: inline-block;
 | 
					 | 
				
			||||||
        text-decoration: inherit;
 | 
					 | 
				
			||||||
        font-variant: normal;
 | 
					 | 
				
			||||||
        text-transform: none;
 | 
					 | 
				
			||||||
        background: #fafafa;
 | 
					 | 
				
			||||||
        box-shadow: 0 0 6px #eeeeee;
 | 
					 | 
				
			||||||
        border: 1px solid #cccccc;
 | 
					 | 
				
			||||||
        box-sizing: border-box;
 | 
					 | 
				
			||||||
        padding: 0 16px;
 | 
					 | 
				
			||||||
        border-radius: 4px;
 | 
					 | 
				
			||||||
        z-index: 100;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
pre {
 | 
					 | 
				
			||||||
  margin: 0;
 | 
					 | 
				
			||||||
  height: 100%;
 | 
					 | 
				
			||||||
  overflow: hidden;
 | 
					 | 
				
			||||||
  max-height: calc(80vh - 32px);
 | 
					 | 
				
			||||||
  overflow-y: auto;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.hljs {
 | 
					 | 
				
			||||||
  word-break: break-word;
 | 
					 | 
				
			||||||
  white-space: pre-wrap;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.hljs * {
 | 
					 | 
				
			||||||
  font-family: Consolas, Monaco, monospace;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
@@ -1,107 +0,0 @@
 | 
				
			|||||||
.process-panel__container {
 | 
					 | 
				
			||||||
  box-sizing: border-box;
 | 
					 | 
				
			||||||
  padding: 0 8px;
 | 
					 | 
				
			||||||
  border-left: 1px solid #eeeeee;
 | 
					 | 
				
			||||||
  box-shadow: 0 0 8px #cccccc;
 | 
					 | 
				
			||||||
  max-height: 100%;
 | 
					 | 
				
			||||||
  overflow-y: scroll;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.panel-tab__title {
 | 
					 | 
				
			||||||
  font-weight: 600;
 | 
					 | 
				
			||||||
  padding: 0 8px;
 | 
					 | 
				
			||||||
  font-size: 1.1em;
 | 
					 | 
				
			||||||
  line-height: 1.2em;
 | 
					 | 
				
			||||||
  i {
 | 
					 | 
				
			||||||
    margin-right: 8px;
 | 
					 | 
				
			||||||
    font-size: 1.2em;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.panel-tab__content {
 | 
					 | 
				
			||||||
  width: 100%;
 | 
					 | 
				
			||||||
  box-sizing: border-box;
 | 
					 | 
				
			||||||
  border-top: 1px solid #eeeeee;
 | 
					 | 
				
			||||||
  padding: 8px 16px;
 | 
					 | 
				
			||||||
  .panel-tab__content--title {
 | 
					 | 
				
			||||||
    display: flex;
 | 
					 | 
				
			||||||
    justify-content: space-between;
 | 
					 | 
				
			||||||
    padding-bottom: 8px;
 | 
					 | 
				
			||||||
    span {
 | 
					 | 
				
			||||||
      flex: 1;
 | 
					 | 
				
			||||||
      text-align: left;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.element-property {
 | 
					 | 
				
			||||||
  width: 100%;
 | 
					 | 
				
			||||||
  display: flex;
 | 
					 | 
				
			||||||
  align-items: flex-start;
 | 
					 | 
				
			||||||
  margin: 8px 0;
 | 
					 | 
				
			||||||
  .element-property__label {
 | 
					 | 
				
			||||||
    display: block;
 | 
					 | 
				
			||||||
    width: 90px;
 | 
					 | 
				
			||||||
    text-align: right;
 | 
					 | 
				
			||||||
    overflow: hidden;
 | 
					 | 
				
			||||||
    padding-right: 12px;
 | 
					 | 
				
			||||||
    line-height: 32px;
 | 
					 | 
				
			||||||
    font-size: 14px;
 | 
					 | 
				
			||||||
    box-sizing: border-box;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
  .element-property__value {
 | 
					 | 
				
			||||||
    flex: 1;
 | 
					 | 
				
			||||||
    line-height: 32px;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
  .el-form-item {
 | 
					 | 
				
			||||||
    width: 100%;
 | 
					 | 
				
			||||||
    margin-bottom: 0;
 | 
					 | 
				
			||||||
    padding-bottom: 18px;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.list-property {
 | 
					 | 
				
			||||||
  flex-direction: column;
 | 
					 | 
				
			||||||
  .element-listener-item {
 | 
					 | 
				
			||||||
    width: 100%;
 | 
					 | 
				
			||||||
    display: inline-grid;
 | 
					 | 
				
			||||||
    grid-template-columns: 16px auto 32px 32px;
 | 
					 | 
				
			||||||
    grid-column-gap: 8px;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
  .element-listener-item + .element-listener-item {
 | 
					 | 
				
			||||||
    margin-top: 8px;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.listener-filed__title {
 | 
					 | 
				
			||||||
  display: inline-flex;
 | 
					 | 
				
			||||||
  width: 100%;
 | 
					 | 
				
			||||||
  justify-content: space-between;
 | 
					 | 
				
			||||||
  align-items: center;
 | 
					 | 
				
			||||||
  margin-top: 0;
 | 
					 | 
				
			||||||
  span {
 | 
					 | 
				
			||||||
    width: 200px;
 | 
					 | 
				
			||||||
    text-align: left;
 | 
					 | 
				
			||||||
    font-size: 14px;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
  i {
 | 
					 | 
				
			||||||
    margin-right: 8px;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.element-drawer__button {
 | 
					 | 
				
			||||||
  margin-top: 8px;
 | 
					 | 
				
			||||||
  width: 100%;
 | 
					 | 
				
			||||||
  display: inline-flex;
 | 
					 | 
				
			||||||
  justify-content: space-around;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.element-drawer__button > .el-button {
 | 
					 | 
				
			||||||
  width: 100%;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
.el-collapse-item__content {
 | 
					 | 
				
			||||||
  padding-bottom: 0;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.el-input.is-disabled .el-input__inner {
 | 
					 | 
				
			||||||
  color: #999999;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
.el-form-item.el-form-item--mini {
 | 
					 | 
				
			||||||
  margin-bottom: 0;
 | 
					 | 
				
			||||||
  & + .el-form-item {
 | 
					 | 
				
			||||||
    margin-top: 16px;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
@@ -1,69 +0,0 @@
 | 
				
			|||||||
// 创建监听器实例
 | 
					 | 
				
			||||||
export function createListenerObject(options, isTask, prefix) {
 | 
					 | 
				
			||||||
  const listenerObj = Object.create(null);
 | 
					 | 
				
			||||||
  listenerObj.event = options.event;
 | 
					 | 
				
			||||||
  isTask && (listenerObj.id = options.id); // 任务监听器特有的 id 字段
 | 
					 | 
				
			||||||
  switch (options.listenerType) {
 | 
					 | 
				
			||||||
    case "scriptListener":
 | 
					 | 
				
			||||||
      listenerObj.script = createScriptObject(options, prefix);
 | 
					 | 
				
			||||||
      break;
 | 
					 | 
				
			||||||
    case "expressionListener":
 | 
					 | 
				
			||||||
      listenerObj.expression = options.expression;
 | 
					 | 
				
			||||||
      break;
 | 
					 | 
				
			||||||
    case "delegateExpressionListener":
 | 
					 | 
				
			||||||
      listenerObj.delegateExpression = options.delegateExpression;
 | 
					 | 
				
			||||||
      break;
 | 
					 | 
				
			||||||
    default:
 | 
					 | 
				
			||||||
      listenerObj.class = options.class;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
  // 注入字段
 | 
					 | 
				
			||||||
  if (options.fields) {
 | 
					 | 
				
			||||||
    listenerObj.fields = options.fields.map(field => {
 | 
					 | 
				
			||||||
      return createFieldObject(field, prefix);
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
  // 任务监听器的 定时器 设置
 | 
					 | 
				
			||||||
  if (isTask && options.event === "timeout" && !!options.eventDefinitionType) {
 | 
					 | 
				
			||||||
    const timeDefinition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: options.eventTimeDefinitions });
 | 
					 | 
				
			||||||
    const TimerEventDefinition = window.bpmnInstances.moddle.create("bpmn:TimerEventDefinition", {
 | 
					 | 
				
			||||||
      id: `TimerEventDefinition_${uuid(8)}`,
 | 
					 | 
				
			||||||
      [`time${options.eventDefinitionType.replace(/^\S/, s => s.toUpperCase())}`]: timeDefinition
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
    listenerObj.eventDefinitions = [TimerEventDefinition];
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
  return window.bpmnInstances.moddle.create(`${prefix}:${isTask ? "TaskListener" : "ExecutionListener"}`, listenerObj);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
// 创建 监听器的注入字段 实例
 | 
					 | 
				
			||||||
export function createFieldObject(option, prefix) {
 | 
					 | 
				
			||||||
  const { name, fieldType, string, expression } = option;
 | 
					 | 
				
			||||||
  const fieldConfig = fieldType === "string" ? { name, string } : { name, expression };
 | 
					 | 
				
			||||||
  return window.bpmnInstances.moddle.create(`${prefix}:Field`, fieldConfig);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
// 创建脚本实例
 | 
					 | 
				
			||||||
export function createScriptObject(options, prefix) {
 | 
					 | 
				
			||||||
  const { scriptType, scriptFormat, value, resource } = options;
 | 
					 | 
				
			||||||
  const scriptConfig = scriptType === "inlineScript" ? { scriptFormat, value } : { scriptFormat, resource };
 | 
					 | 
				
			||||||
  return window.bpmnInstances.moddle.create(`${prefix}:Script`, scriptConfig);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
// 更新元素扩展属性
 | 
					 | 
				
			||||||
export function updateElementExtensions(element, extensionList) {
 | 
					 | 
				
			||||||
  const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
 | 
					 | 
				
			||||||
    values: extensionList
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
  window.bpmnInstances.modeling.updateProperties(element, {
 | 
					 | 
				
			||||||
    extensionElements: extensions
 | 
					 | 
				
			||||||
  });
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
// 创建一个id
 | 
					 | 
				
			||||||
export function uuid(length = 8, chars) {
 | 
					 | 
				
			||||||
  let result = "";
 | 
					 | 
				
			||||||
  let charsString = chars || "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
 | 
					 | 
				
			||||||
  for (let i = length; i > 0; --i) {
 | 
					 | 
				
			||||||
    result += charsString[Math.floor(Math.random() * charsString.length)];
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
  return result;
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
@@ -1,5 +0,0 @@
 | 
				
			|||||||
const hljs = require("highlight.js/lib/core");
 | 
					 | 
				
			||||||
hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
 | 
					 | 
				
			||||||
hljs.registerLanguage("json", require("highlight.js/lib/languages/json"));
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
module.exports = hljs;
 | 
					 | 
				
			||||||
@@ -1,14 +0,0 @@
 | 
				
			|||||||
import BpmnRenderer from "bpmn-js/lib/draw/BpmnRenderer";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export default function CustomRenderer(config, eventBus, styles, pathMap, canvas, textRenderer) {
 | 
					 | 
				
			||||||
  BpmnRenderer.call(this, config, eventBus, styles, pathMap, canvas, textRenderer, 2000);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  this.handlers["label"] = function() {
 | 
					 | 
				
			||||||
    return null;
 | 
					 | 
				
			||||||
  };
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
const F = function() {}; // 核心,利用空对象作为中介;
 | 
					 | 
				
			||||||
F.prototype = BpmnRenderer.prototype; // 核心,将父类的原型赋值给空对象F;
 | 
					 | 
				
			||||||
CustomRenderer.prototype = new F(); // 核心,将 F的实例赋值给子类;
 | 
					 | 
				
			||||||
CustomRenderer.prototype.constructor = CustomRenderer; // 修复子类CustomRenderer的构造器指向,防止原型链的混乱;
 | 
					 | 
				
			||||||
@@ -1,6 +0,0 @@
 | 
				
			|||||||
import CustomRenderer from "./CustomRenderer";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  __init__: ["customRenderer"],
 | 
					 | 
				
			||||||
  customRenderer: ["type", CustomRenderer]
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
@@ -1,16 +0,0 @@
 | 
				
			|||||||
import BpmnRules from "bpmn-js/lib/features/rules/BpmnRules";
 | 
					 | 
				
			||||||
import inherits from "inherits";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export default function CustomRules(eventBus) {
 | 
					 | 
				
			||||||
  BpmnRules.call(this, eventBus);
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
inherits(CustomRules, BpmnRules);
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
CustomRules.prototype.canDrop = function() {
 | 
					 | 
				
			||||||
  return false;
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
CustomRules.prototype.canMove = function() {
 | 
					 | 
				
			||||||
  return false;
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
@@ -1,6 +0,0 @@
 | 
				
			|||||||
import CustomRules from "./CustomRules";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  __init__: ["customRules"],
 | 
					 | 
				
			||||||
  customRules: ["type", CustomRules]
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
@@ -1,25 +0,0 @@
 | 
				
			|||||||
/**
 | 
					 | 
				
			||||||
 * This is a sample file that should be replaced with the actual translation.
 | 
					 | 
				
			||||||
 *
 | 
					 | 
				
			||||||
 * Checkout https://github.com/bpmn-io/bpmn-js-i18n for a list of available
 | 
					 | 
				
			||||||
 * translations and labels to translate.
 | 
					 | 
				
			||||||
 */
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  "Exclusive Gateway": "Exklusives Gateway",
 | 
					 | 
				
			||||||
  "Parallel Gateway": "Paralleles Gateway",
 | 
					 | 
				
			||||||
  "Inclusive Gateway": "Inklusives Gateway",
 | 
					 | 
				
			||||||
  "Complex Gateway": "Komplexes Gateway",
 | 
					 | 
				
			||||||
  "Event based Gateway": "Ereignis-basiertes Gateway",
 | 
					 | 
				
			||||||
  "Message Start Event": "消息启动事件",
 | 
					 | 
				
			||||||
  "Timer Start Event": "定时启动事件",
 | 
					 | 
				
			||||||
  "Conditional Start Event": "条件启动事件",
 | 
					 | 
				
			||||||
  "Signal Start Event": "信号启动事件",
 | 
					 | 
				
			||||||
  "Error Start Event": "错误启动事件",
 | 
					 | 
				
			||||||
  "Escalation Start Event": "升级启动事件",
 | 
					 | 
				
			||||||
  "Compensation Start Event": "补偿启动事件",
 | 
					 | 
				
			||||||
  "Message Start Event (non-interrupting)": "消息启动事件 (非中断)",
 | 
					 | 
				
			||||||
  "Timer Start Event (non-interrupting)": "定时启动事件 (非中断)",
 | 
					 | 
				
			||||||
  "Conditional Start Event (non-interrupting)": "条件启动事件 (非中断)",
 | 
					 | 
				
			||||||
  "Signal Start Event (non-interrupting)": "信号启动事件 (非中断)",
 | 
					 | 
				
			||||||
  "Escalation Start Event (non-interrupting)": "升级启动事件 (非中断)"
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
@@ -1,39 +0,0 @@
 | 
				
			|||||||
//outside.js
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
const ctx = "@@clickoutsideContext";
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
export default {
 | 
					 | 
				
			||||||
  bind(el, binding, vnode) {
 | 
					 | 
				
			||||||
    const ele = el;
 | 
					 | 
				
			||||||
    const documentHandler = e => {
 | 
					 | 
				
			||||||
      if (!vnode.context || ele.contains(e.target)) {
 | 
					 | 
				
			||||||
        return false;
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
      // 调用指令回调
 | 
					 | 
				
			||||||
      if (binding.expression) {
 | 
					 | 
				
			||||||
        vnode.context[el[ctx].methodName](e);
 | 
					 | 
				
			||||||
      } else {
 | 
					 | 
				
			||||||
        el[ctx].bindingFn(e);
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
    // 将方法添加到ele
 | 
					 | 
				
			||||||
    ele[ctx] = {
 | 
					 | 
				
			||||||
      documentHandler,
 | 
					 | 
				
			||||||
      methodName: binding.expression,
 | 
					 | 
				
			||||||
      bindingFn: binding.value
 | 
					 | 
				
			||||||
    };
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
    setTimeout(() => {
 | 
					 | 
				
			||||||
      document.addEventListener("touchstart", documentHandler); // 为document绑定事件
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  update(el, binding) {
 | 
					 | 
				
			||||||
    const ele = el;
 | 
					 | 
				
			||||||
    ele[ctx].methodName = binding.expression;
 | 
					 | 
				
			||||||
    ele[ctx].bindingFn = binding.value;
 | 
					 | 
				
			||||||
  },
 | 
					 | 
				
			||||||
  unbind(el) {
 | 
					 | 
				
			||||||
    document.removeEventListener("touchstart", el[ctx].documentHandler); // 解绑
 | 
					 | 
				
			||||||
    delete el[ctx];
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
};
 | 
					 | 
				
			||||||
@@ -1,10 +0,0 @@
 | 
				
			|||||||
export function debounce(fn, delay = 500) {
 | 
					 | 
				
			||||||
  let timer;
 | 
					 | 
				
			||||||
  return function(...args) {
 | 
					 | 
				
			||||||
    if (timer) {
 | 
					 | 
				
			||||||
      clearTimeout(timer);
 | 
					 | 
				
			||||||
      timer = null;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    timer = setTimeout(fn.bind(this, ...args), delay);
 | 
					 | 
				
			||||||
  };
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
@@ -1,63 +0,0 @@
 | 
				
			|||||||
class Log {
 | 
					 | 
				
			||||||
  static type = ["primary", "success", "warn", "error", "info"];
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  static typeColor(type = "default") {
 | 
					 | 
				
			||||||
    let color = "";
 | 
					 | 
				
			||||||
    switch (type) {
 | 
					 | 
				
			||||||
      case "primary":
 | 
					 | 
				
			||||||
        color = "#2d8cf0";
 | 
					 | 
				
			||||||
        break;
 | 
					 | 
				
			||||||
      case "success":
 | 
					 | 
				
			||||||
        color = "#19be6b";
 | 
					 | 
				
			||||||
        break;
 | 
					 | 
				
			||||||
      case "info":
 | 
					 | 
				
			||||||
        color = "#909399";
 | 
					 | 
				
			||||||
        break;
 | 
					 | 
				
			||||||
      case "warn":
 | 
					 | 
				
			||||||
        color = "#ff9900";
 | 
					 | 
				
			||||||
        break;
 | 
					 | 
				
			||||||
      case "error":
 | 
					 | 
				
			||||||
        color = "#f03f14";
 | 
					 | 
				
			||||||
        break;
 | 
					 | 
				
			||||||
      case "default":
 | 
					 | 
				
			||||||
        color = "#35495E";
 | 
					 | 
				
			||||||
        break;
 | 
					 | 
				
			||||||
      default:
 | 
					 | 
				
			||||||
        color = type;
 | 
					 | 
				
			||||||
        break;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    return color;
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  static print(text, type = "default", back = false) {
 | 
					 | 
				
			||||||
    if (typeof text === "object") {
 | 
					 | 
				
			||||||
      // 如果是對象則調用打印對象方式
 | 
					 | 
				
			||||||
      console.dir(text);
 | 
					 | 
				
			||||||
      return;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    if (back) {
 | 
					 | 
				
			||||||
      // 如果是打印帶背景圖的
 | 
					 | 
				
			||||||
      console.log(`%c ${text} `, `background:${this.typeColor(type)}; padding: 2px; border-radius: 4px;color: #fff;`);
 | 
					 | 
				
			||||||
    } else {
 | 
					 | 
				
			||||||
      console.log(`%c ${text} `, `color: ${this.typeColor(type)};`);
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
  static pretty(title, text, type = "primary") {
 | 
					 | 
				
			||||||
    if (typeof text === "object") {
 | 
					 | 
				
			||||||
      console.log(
 | 
					 | 
				
			||||||
        `%c ${title} %c`,
 | 
					 | 
				
			||||||
        `background:${this.typeColor(type)};border:1px solid ${this.typeColor(type)}; padding: 1px; border-radius: 4px 0 0 4px; color: #fff;`
 | 
					 | 
				
			||||||
      );
 | 
					 | 
				
			||||||
      console.dir(text);
 | 
					 | 
				
			||||||
      return;
 | 
					 | 
				
			||||||
    }
 | 
					 | 
				
			||||||
    console.log(
 | 
					 | 
				
			||||||
      `%c ${title} %c ${text} %c`,
 | 
					 | 
				
			||||||
      `background:${this.typeColor(type)};border:1px solid ${this.typeColor(type)}; padding: 1px; border-radius: 4px 0 0 4px; color: #fff;`,
 | 
					 | 
				
			||||||
      `border:1px solid ${this.typeColor(type)}; padding: 1px; border-radius: 0 4px 4px 0; color: ${this.typeColor(type)};`,
 | 
					 | 
				
			||||||
      "background:transparent"
 | 
					 | 
				
			||||||
    );
 | 
					 | 
				
			||||||
  }
 | 
					 | 
				
			||||||
}
 | 
					 | 
				
			||||||
export default Log;
 | 
					 | 
				
			||||||