bpm-design

关于系统安装说明

如果遇到 vue@"3.2.26" from the root project npm ERR! peer vue@"^3.2.0" from @element-plus/[email protected]

等等报错版本不匹配

执行 npm i --legacy-peer-deps

关于系统配置的说明

本流程设计项目（以下简称 design 端）使用了 JcbpmVue 的 ProcessDesign 组件，渲染流程设计，其中：配置项，权限按钮数据，服务组件，流程线-表达式，待办标题，设置经办者，设置表单，等配置项，可以手动开发代码，动态配置数据获取的接口地址。

配置的规则可以参考【https://www.npmjs.com/package/jcbpm-vue】，唯一的不同点仅在于对数据获取的接口代码开发 示例

// 对于接口开发的一些注意事项:
{
	// 写在接口地址url上的参数，即代表是需要动态传值的参数，这些参数要与data对象中的属性逐一对应，
	// 一些默认传值的参数，则可以不写在url上，只在data对象中定义并写好传递的参数值即可，
	// 参数仅支持 大小写字母 或 ()_()格式。 eg.  name, deptId, dept_id等。
	url: `${window['REQUEST_URL']['MANAGE-API']}/microflows?current={current}&size={size}&dept_id={dept_id}`,
	// method目前仅支持GET方式
	method: 'GET',
	// headers中Authorization为必传项，也支持配置其他属性
	headers: {
		"Authorization": rbacStorageToken,
		// ...
	},
	// data非必传
	// data中是接口的默认入参字段、默认传值，
	// 操作JcbpmVue中ProcessDesign组件的查询、或分页功能时，组件传递的分页参数是current、size，此分页参数暂不支持自定义修改。
	data: {
		"field": 'id,name',
		"dept_id": '',
		"current": 1,
		"size": 10,
	},
	// bindData与bindPage、configData、configPage非必传
	// 由于业务或开发习惯不同，接口返回的数据结构也不尽相同，
	// 所以对于JcbpmVue的ProcessDesign组件，需要通过一些配置，让接口返回的参数可以正常的在组件中显示出来，
	// 举例接口返回的数据格式如下：
	// {
	// 	data: [
	// 		{
	// 			id
	// 			name
	// 			...
	// 		},
	//		...
	// 	]
	// 	meta: {
	// 		pagination: {
	// 			perPage
	// 			currentPage
	// 			total
	// 			...
	// 		}
	// 	}
	// }
	// bindData与bindPage表明展示数据与分页数据从接口返回的哪个字段中获取，
	// 对于树形tree结构，返回的数据中一定要有key、title两个必要属性，
	// configData一般是树形数据配置，属性是转成树形结构中需要的字段，属性值为接口返回数据中的对应字段，
	// arrayToTree是否需要把数据从数组转成树形，返回数据已经是树形的话是否需要jsonReplace将数据中添加字段，
	// 对于分页page结构，要求返回的数据格式如下：
	// {
	//	records: []
	//	size: number
	//	current: number
	//	total: number
	// }，
	// configPage一般是分页数据配置，属性是分页数据中需要的字段，属性值为接口返回数据中的对应字段。
	bindData: 'data',
	configData: {
		"key": 'id',
		"title": 'name',
		"deptId": 'id',
		"deptName": 'name',
		"arrayToTree": true,
		"jsonReplace": false,
	},
	bindPage: 'meta.pagination',
	configPage: {
		"size": 'perPage',
		"current": 'currentPage',
		"total": 'total',
	},
}

获取 design 端缓存在 localStorage 中一些数据的方法:

// token值
window.localStorage.getItem('JCAccessToken') || ''
// 应用ID
window.localStorage.getItem('JCINFOBPMDESIGN_USER_APPLICATION_ID') || ''
// 应用类型
window.localStorage.getItem('JCINFOBPMDESIGN_USER_APPLICATION_TYPE') || ''

配置项 processDesignConfig

/**
 * 如果你的项目
 * 1.接入4a
 * 通过访问 http(s)://域名(ip:port)/bpm/design/design/user/auth?accessToken={__登录token__}&processAppId={__应用Id__}
 * 2.未接入4a
 * 通过访问 http(s)://域名(ip:port)/bpm/design/design/user/auth?accessToken={__登录token__}&processAppId={__应用Id__}&AuthorizationAppType=N4A
 *
 * 此为默认配置代码
 **/

getProcessDesignConfig = () => {
	// 获取token, design端存储在缓存中token的key为 'JCAccessToken'
	const getAuthenticationToken = () => {
		const rbacStorageToken =
			window.localStorage.getItem('JCAccessToken') || ''
	}
	const applicationId =
		window.localStorage.getItem('JCINFOBPMDESIGN_USER_APPLICATION_ID') || ''
	const applicationType =
		window.localStorage.getItem('JCINFOBPMDESIGN_USER_APPLICATION_TYPE') ||
		''
	return {
		AuthenticationToken: getAuthenticationToken,
		ManageRequestPrefix: window['REQUEST_URL']['MANAGE-API'], // design端默认接口前缀
		ApplicationId: applicationId,
		AuthorizationAppType: applicationType,
	}
}

操作设置数据 permissionButtonData

/**
 * 如果已设计完成的流程，操作设置中缺少字段order，使用design端渲染流程图时，控制台会产生报错提示，重新配置保存即可。
 **/
getCustomPermissionBtn = () => {
    return [
        {
            id: string,         // 必传；唯一标识。
            order: number,        // 必传；排序。
            label: string,        // 必传；按钮名称。
            icon: string,         // 非必传；按钮图片名称； edit、user-add、user-delete、rollback、redo、file、team、terminate。
            sign: string,         // 必传；todo/done按钮标志；用来区分此按钮是待办中显示，还是已办中显示。例如：拿回按钮take，在已办任务列表中显示，则sign设置为 done。
            custom: boolean,        // 必传；true/false；用来区分是否是通过新增按钮添加的自定义按钮
            type: string,       // 必传；与id保持一致
            multiInstance: boolean, // 必传；用来区分是否是多实例节点才显示的按钮
            selected: boolean,       // 必传；用来区分是否是默认选中并且不可取消勾选的按钮
            customAlias: string, // 别名 - 输入框
        },
	    ...
    ]
}

服务组件 microflowItemList

getMicroflowListOptions = () => {
	const rbacStorageToken = window.localStorage.getItem('JCAccessToken')
	return {
		url: `${window['REQUEST_URL']['MANAGE-API']}/microflows?current={current}&size={size}&name={name}`,
		method: 'GET',
		headers: {
			Authorization: rbacStorageToken,
		},
		data: {
			current: 1,
			size: 10,
			name: '',
		},
	}
}

流程线-表达式 flowConditionalList

getFlowConditionalList = () => {
	const rbacStorageToken = window.localStorage.getItem('JCAccessToken')
	return {
		url: `${window['REQUEST_URL']['MANAGE-API']}/formitems?size=-1&formId={formId}`,
		method: 'GET',
		headers: {
			Authorization: rbacStorageToken,
		},
		data: {
			size: -1,
			formId: '',
		},
	}
}

待办标题 taskTitleList

getTaskTitleList = () => {
	const rbacStorageToken = window.localStorage.getItem('JCAccessToken')
	return {
		url: `${window['REQUEST_URL']['MANAGE-API']}/formitems?size=-1&formId={formId}`,
		method: 'GET',
		headers: {
			Authorization: rbacStorageToken,
		},
		data: {
			size: -1,
			formId: '',
		},
	}
}

设置经办者 customTabOptions

getCustomTabOptions = () => {
	// 自定义 经办者tab数据
	return [
		{
			title: '人员',
			type: 'user',
			left: {
				viewType: 'tree',
				checkable: false,
				data: () => {
					const rbacStorageToken =
						window.localStorage.getItem('JCAccessToken')
					return {
						url: `${window['REQUEST_URL']['RBAC-API']}/departments?name={name}`,
						method: 'GET',
						headers: {
							Authorization: rbacStorageToken,
						},
						data: {
							per_page: -1,
							name: '',
						},
						bindData: 'data',
						configData: {
							key: 'id',
							title: 'name',
							deptId: 'id',
							deptName: 'name',
							arrayToTree: true,
						},
					}
				},
			},
			right: {
				params: [
					{
						value: 'name',
						label: '名称',
					},
					{
						value: 'department_id',
						label: '部门Id',
						isTreeParam: true,
					},
				],
				viewType: 'page',
				pagination: true,
				columns: [
					{
						title: '序号',
						dataIndex: 'index',
						align: 'center',
						slots: { customRender: 'index' },
					},
					{
						title: '姓名',
						dataIndex: 'name',
						align: 'center',
					},
					{
						title: '部门名称',
						dataIndex: 'deptName',
						align: 'center',
						slots: { customRender: 'deptName' },
					},
				],
				data: () => {
					const rbacStorageToken =
						window.localStorage.getItem('JCAccessToken')
					const applicationID = window.localStorage.getItem(
						'JCINFOBPMDESIGN_USER_APPLICATION_ID'
					)
					return {
						url: `${window['REQUEST_URL']['RBAC-API']}/applications/${applicationID}/users?page={current}&per_page={size}&name={name}&department_id={department_id}`,
						method: 'GET',
						headers: {
							Authorization: rbacStorageToken,
						},
						data: {
							page: 10,
							per_page: 1,
							name: '',
							department_id: '',
						},
						bindData: 'data',
						bindPage: 'meta.pagination',
						configPage: {
							size: 'perPage',
							current: 'currentPage',
							total: 'total',
						},
					}
				},
			},
		},
	]
}

设置表单 customFormTabOptions

getCustomFormTabOptions = () => {
	return [
		{
			title: '表单',
			type: 'form',
			draggable: true,
			data: () => {
				const rbacStorageToken =
					window.localStorage.getItem('JCAccessToken')
				return {
					url: `${window['REQUEST_URL']['MANAGE-API']}/forms?size={size}&current={current}&name={name}`,
					method: 'GET',
					headers: {
						Authorization: rbacStorageToken,
						'Access-Control-Allow-Origin': '*',
						'Access-Control-Allow-Methods':
							'GET, PUT, POST, DELETE, OPTION',
						'Access-Control-Allow-Headers': 'Content-Type',
					},
					data: {
						size: 10,
						current: 1,
						name: '',
					},
				}
			},
			params: [
				{
					value: 'name',
					label: '表单名称',
				},
			],
			columns: [
				{
					title: '序号',
					dataIndex: 'index',
					slots: { customRender: 'index' },
					align: 'center',
					width: '5%',
				},
				{
					title: '表单Id',
					dataIndex: 'id',
					align: 'center',
					width: '15%',
				},
				{
					title: '表单名称',
					dataIndex: 'name',
					align: 'center',
					width: '20%',
				},
				{
					title: '别名',
					dataIndex: 'customAlias',
					slots: { customRender: 'customAlias' },
					align: 'center',
					width: '10%',
				},
				{
					title: '创建时间',
					dataIndex: 'createTime',
					align: 'center',
					width: '10%',
				},
				{
					title: '标签',
					dataIndex: 'tag',
					slots: { customRender: 'tag' },
					align: 'center',
					width: '10%',
				},
				{
					title: '备注',
					dataIndex: 'remark',
					align: 'center',
					width: '25%',
				},
			],
		},
	]
}

本地应用 - 资源配置 formItemList

getFormFieldsList = () => {
	const rbacStorageToken = window.localStorage.getItem('JCAccessToken')
	return {
		url: `${window['REQUEST_URL']['MANAGE-API']}/formitems?size={size}&formId={formId}`,
		method: 'GET',
		headers: {
			Authorization: rbacStorageToken,
		},
		data: {
			size: -1,
			formId: '',
		},
	}
}

表单引擎 - 资源配置 formEngineItemList

getEngineFormFieldsList = () => {
	const rbacStorageToken = window.localStorage.getItem('JCAccessToken')
	return {
		url: `${window['REQUEST_URL']['MANAGE-API']}/jcforms/{formId}?size={size}&formId={formId}`,
		method: 'GET',
		headers: {
			Authorization: rbacStorageToken,
		},
		data: {
			size: -1,
			formId: '',
		},
	}
}

连接器 connectorsItemList

getConnectorsList = () => {
	const rbacStorageToken = window.localStorage.getItem('JCAccessToken')
	return {
		url: `${window['REQUEST_URL']['MANAGE-API']}/connectors?size={size}&current={current}&name={name}`,
		method: 'GET',
		headers: {
			Authorization: rbacStorageToken,
		},
		data: {
			size: 10,
			current: 1,
			name: '',
		},
	}
}