yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

冲突修改 Merge branch 'feature/bpm' of https://gitee.com/yudaocode/yudao-ui-admin-vue3 into feature/bpm

pull/669/head
jason 2025-01-19 20:45:27 +08:00
parent 42de3d9127 70e6b54642
commit aeb096a311
58 changed files with 1591 additions and 2039 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -38,7 +38,7 @@
"animate.css": "^4.1.1",
"axios": "^1.6.8",
"benz-amr-recorder": "^1.1.5",
"bpmn-js-token-simulation": "^0.10.0",
"bpmn-js-token-simulation": "^0.36.0",
"camunda-bpmn-moddle": "^7.0.1",
"cropperjs": "^1.6.1",
"crypto-js": "^4.2.0",
@ -47,7 +47,7 @@
"driver.js": "^1.3.1",
"echarts": "^5.5.0",
"echarts-wordcloud": "^2.1.0",
"element-plus": "2.8.4",
"element-plus": "2.9.1",
"fast-xml-parser": "^4.3.2",
"highlight.js": "^11.9.0",
"jsencrypt": "^3.3.2",

113
pnpm-lock.yaml
View File

@ -45,8 +45,8 @@ dependencies:
specifier: ^1.1.5
version: 1.1.5
bpmn-js-token-simulation:
specifier: ^0.10.0
version: 0.10.0
specifier: ^0.36.0
version: 0.36.0
camunda-bpmn-moddle:
specifier: ^7.0.1
version: 7.0.1
@ -72,8 +72,8 @@ dependencies:
specifier: ^2.1.0
version: 2.1.0(echarts@5.5.1)
element-plus:
specifier: 2.8.4
version: 2.8.4(vue@3.5.12)
specifier: 2.9.1
version: 2.9.1(vue@3.5.12)
fast-xml-parser:
specifier: ^4.3.2
version: 4.5.0
@ -149,6 +149,9 @@ dependencies:
vue-types:
specifier: ^5.1.1
version: 5.1.3(vue@3.5.12)
vue3-signature:
specifier: ^0.2.4
version: 0.2.4(vue@3.5.12)
vuedraggable:
specifier: ^4.1.0
version: 4.1.0(vue@3.5.12)
@ -2122,7 +2125,7 @@ packages:
'@form-create/element-ui': 3.2.14(vue@3.5.12)
'@form-create/utils': 3.2.14
codemirror: 6.65.7
element-plus: 2.8.4(vue@3.5.12)
element-plus: 2.9.1(vue@3.5.12)
vue: 3.5.12(typescript@5.3.3)
vuedraggable: 4.1.0(vue@3.5.12)
transitivePeerDependencies:
@ -4581,12 +4584,14 @@ packages:
min-dom: 4.2.1
dev: true
/bpmn-js-token-simulation@0.10.0:
resolution: {integrity: sha512-QuZQ/KVXKt9Vl+XENyOBoTW2Aw+uKjuBlKdCJL6El7AyM7DkJ5bZkSYURshId1SkBDdYg2mJ1flSmsrhGuSfwg==, tarball: https://registry.npmmirror.com/bpmn-js-token-simulation/-/bpmn-js-token-simulation-0.10.0.tgz}
/bpmn-js-token-simulation@0.36.0:
resolution: {integrity: sha512-vz+RHlbZCev/6dzk6FhJRz8M0aZ1GL7Xrza0ecWqeg4tHbgPozgyOm3tXTz75XdtOwRVVBzmCjcciXQX7A55wQ==, tarball: https://registry.npmmirror.com/bpmn-js-token-simulation/-/bpmn-js-token-simulation-0.36.0.tgz}
engines: {node: '>= 16'}
dependencies:
min-dash: 3.8.1
min-dom: 0.2.0
svg.js: 2.7.1
inherits-browser: 0.1.0
min-dash: 4.2.2
min-dom: 4.2.1
randomcolor: 0.6.2
dev: false
/bpmn-js@17.11.1:
@ -4927,51 +4932,13 @@ packages:
dot-prop: 5.3.0
dev: true
/component-classes@1.2.6:
resolution: {integrity: sha512-hPFGULxdwugu1QWW3SvVOCUHLzO34+a2J6Wqy0c5ASQkfi9/8nZcBB0ZohaEbXOQlCflMAEMmEWk7u7BVs4koA==, tarball: https://registry.npmmirror.com/component-classes/-/component-classes-1.2.6.tgz}
dependencies:
component-indexof: 0.0.3
dev: false
/component-closest@0.1.4:
resolution: {integrity: sha512-NF9hMj6JKGM5sb6wP/dg7GdJOttaIH9PcTsUNdWcrvu7Kw/5R5swQAFpgaYEHlARrNMyn4Wf7O1PlRej+pt76Q==, tarball: https://registry.npmmirror.com/component-closest/-/component-closest-0.1.4.tgz}
dependencies:
component-matches-selector: 0.1.7
dev: false
/component-delegate@0.2.4:
resolution: {integrity: sha512-OlpcB/6Fi+kXQPh/TfXnSvvmrU04ghz7vcJh/jgLF0Ni+I+E3WGlKJQbBGDa5X+kVUG8WxOgjP+8iWbz902fPg==, tarball: https://registry.npmmirror.com/component-delegate/-/component-delegate-0.2.4.tgz}
dependencies:
component-closest: 0.1.4
component-event: 0.1.4
dev: false
/component-emitter@1.3.1:
resolution: {integrity: sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ==, tarball: https://registry.npmmirror.com/component-emitter/-/component-emitter-1.3.1.tgz}
dev: true
/component-event@0.1.4:
resolution: {integrity: sha512-GMwOG8MnUHP1l8DZx1ztFO0SJTFnIzZnBDkXAj8RM2ntV2A6ALlDxgbMY1Fvxlg6WPQ+5IM/a6vg4PEYbjg/Rw==, tarball: https://registry.npmmirror.com/component-event/-/component-event-0.1.4.tgz}
dev: false
/component-event@0.2.1:
resolution: {integrity: sha512-wGA++isMqiDq1jPYeyv2as/Bt/u+3iLW0rEa+8NQ82jAv3TgqMiCM+B2SaBdn2DfLilLjjq736YcezihRYhfxw==, tarball: https://registry.npmmirror.com/component-event/-/component-event-0.2.1.tgz}
/component-indexof@0.0.3:
resolution: {integrity: sha512-puDQKvx/64HZXb4hBwIcvQLaLgux8o1CbWl39s41hrIIZDl1lJiD5jc22gj3RBeGK0ovxALDYpIbyjqDUUl0rw==, tarball: https://registry.npmmirror.com/component-indexof/-/component-indexof-0.0.3.tgz}
dev: false
/component-matches-selector@0.1.7:
resolution: {integrity: sha512-Yb2+pVBvrqkQVpPaDBF0DYXRreBveXJNrpJs9FnFu8PF6/5IIcz5oDZqiH9nB5hbD2/TmFVN5ZCxBzqu7yFFYQ==, tarball: https://registry.npmmirror.com/component-matches-selector/-/component-matches-selector-0.1.7.tgz}
dependencies:
component-query: 0.0.3
global-object: 1.0.0
dev: false
/component-query@0.0.3:
resolution: {integrity: sha512-VgebQseT1hz1Ps7vVp2uaSg+N/gsI5ts3AZUSnN6GMA2M82JH7o+qYifWhmVE/e8w/H48SJuA3nA9uX8zRe95Q==, tarball: https://registry.npmmirror.com/component-query/-/component-query-0.0.3.tgz}
dev: false
/compute-scroll-into-view@1.0.20:
resolution: {integrity: sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==, tarball: https://registry.npmmirror.com/compute-scroll-into-view/-/compute-scroll-into-view-1.0.20.tgz}
dev: false
@ -5521,6 +5488,10 @@ packages:
resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==, tarball: https://registry.npmmirror.com/deep-is/-/deep-is-0.1.4.tgz}
dev: true
/default-passive-events@2.0.0:
resolution: {integrity: sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ==, tarball: https://registry.npmmirror.com/default-passive-events/-/default-passive-events-2.0.0.tgz}
dev: false
/define-data-property@1.1.4:
resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==, tarball: https://registry.npmmirror.com/define-data-property/-/define-data-property-1.1.4.tgz}
engines: {node: '>= 0.4'}
@ -5795,8 +5766,8 @@ packages:
resolution: {integrity: sha512-nz88NNBsD7kQSAGGJyp8hS6xSPtWwqNogA0mjtc2nUYeEf3nURK9qpV18TuBdDmEDgVWotS8Wkzf+V52dSQ/LQ==, tarball: https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.5.67.tgz}
dev: true
/element-plus@2.8.4(vue@3.5.12):
resolution: {integrity: sha512-ZlVAdUOoJliv4kW3ntWnnSHMT+u/Os7mXJjk2xzOlqNeHaI2/ozlF+R58ZCEak8ZnDi6+5A2viWEYRsq64IuiA==, tarball: https://registry.npmmirror.com/element-plus/-/element-plus-2.8.4.tgz}
/element-plus@2.9.1(vue@3.5.12):
resolution: {integrity: sha512-9Agqf/jt4Ugk7EZ6C5LME71sgkvauPCsnvJN12Xid2XVobjufxMGpRE4L7pS4luJMOmFAH3J0NgYEGZT5r+NDg==, tarball: https://registry.npmmirror.com/element-plus/-/element-plus-2.9.1.tgz}
peerDependencies:
vue: ^3.2.0
dependencies:
@ -6674,10 +6645,6 @@ packages:
global-prefix: 3.0.0
dev: true
/global-object@1.0.0:
resolution: {integrity: sha512-mSPSkY6UsHv6hgW0V2dfWBWTS8TnPnLx3ECVNoWp6rBI2Bg66VYoqGoTFlH/l7XhAZ/l+StYlntXlt87BEeCcg==, tarball: https://registry.npmmirror.com/global-object/-/global-object-1.0.0.tgz}
dev: false
/global-prefix@3.0.0:
resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==, tarball: https://registry.npmmirror.com/global-prefix/-/global-prefix-3.0.0.tgz}
engines: {node: '>=6'}
@ -7899,10 +7866,6 @@ packages:
engines: {node: '>=18'}
dev: true
/min-dash@3.8.1:
resolution: {integrity: sha512-evumdlmIlg9mbRVPbC4F5FuRhNmcMS5pvuBUbqb1G9v09Ro0ImPEgz5n3khir83lFok1inKqVDjnKEg3GpDxQg==, tarball: https://registry.npmmirror.com/min-dash/-/min-dash-3.8.1.tgz}
dev: false
/min-dash@4.2.2:
resolution: {integrity: sha512-qbhSYUxk6mBaF096B3JOQSumXbKWHenmT97cSpdNzgkWwGjhjhE/KZODCoDNhI2I4C9Cb6R/Q13S4BYkUSXoXQ==, tarball: https://registry.npmmirror.com/min-dash/-/min-dash-4.2.2.tgz}
@ -7912,18 +7875,6 @@ packages:
dom-walk: 0.1.2
dev: false
/min-dom@0.2.0:
resolution: {integrity: sha512-VmxugbnAcVZGqvepjhOA4d4apmrpX8mMaRS+/jo0dI5Yorzrr4Ru9zc9KVALlY/+XakVCb8iQ+PYXljihQcsNw==, tarball: https://registry.npmmirror.com/min-dom/-/min-dom-0.2.0.tgz}
dependencies:
component-classes: 1.2.6
component-closest: 0.1.4
component-delegate: 0.2.4
component-event: 0.1.4
component-matches-selector: 0.1.7
component-query: 0.0.3
domify: 1.4.2
dev: false
/min-dom@4.2.1:
resolution: {integrity: sha512-TMoL8SEEIhUWYgkj7XMSgxmwSyGI+4fP2KFFGnN3FbHfbGHVdsLYSz8LoIsgPhz4dWRmLvxWWSMgzZMJW5sZuA==, tarball: https://registry.npmmirror.com/min-dom/-/min-dom-4.2.1.tgz}
dependencies:
@ -8714,6 +8665,10 @@ packages:
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==, tarball: https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz}
dev: true
/randomcolor@0.6.2:
resolution: {integrity: sha512-Mn6TbyYpFgwFuQ8KJKqf3bqqY9O1y37/0jgSK/61PUxV4QfIMv0+K2ioq8DfOjkBslcjwSzRfIDEXfzA9aCx7A==, tarball: https://registry.npmmirror.com/randomcolor/-/randomcolor-0.6.2.tgz}
dev: false
/rd@2.0.1:
resolution: {integrity: sha512-/XdKU4UazUZTXFmI0dpABt8jSXPWcEyaGdk340KdHnsEOdkTctlX23aAK7ChQDn39YGNlAJr1M5uvaKt4QnpNw==, tarball: https://registry.npmmirror.com/rd/-/rd-2.0.1.tgz}
dependencies:
@ -9128,6 +9083,10 @@ packages:
engines: {node: '>=14'}
dev: true
/signature_pad@3.0.0-beta.4:
resolution: {integrity: sha512-cOf2NhVuTiuNqe2X/ycEmizvCDXk0DoemhsEpnkcGnA4kS5iJYTCqZ9As7tFBbsch45Q1EdX61833+6sjJ8rrw==, tarball: https://registry.npmmirror.com/signature_pad/-/signature_pad-3.0.0-beta.4.tgz}
dev: false
/sirv@2.0.4:
resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==, tarball: https://registry.npmmirror.com/sirv/-/sirv-2.0.4.tgz}
engines: {node: '>= 10'}
@ -9561,10 +9520,6 @@ packages:
resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==, tarball: https://registry.npmmirror.com/svg-tags/-/svg-tags-1.0.0.tgz}
dev: true
/svg.js@2.7.1:
resolution: {integrity: sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==, tarball: https://registry.npmmirror.com/svg.js/-/svg.js-2.7.1.tgz}
dev: false
/svgo@2.8.0:
resolution: {integrity: sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==, tarball: https://registry.npmmirror.com/svgo/-/svgo-2.8.0.tgz}
engines: {node: '>=10.13.0'}
@ -10324,6 +10279,16 @@ packages:
vue: 3.5.12(typescript@5.3.3)
dev: false
/vue3-signature@0.2.4(vue@3.5.12):
resolution: {integrity: sha512-XFwwFVK9OG3F085pKIq2SlNVqx32WdFH+TXbGEWc5FfEKpx8oMmZuAwZZ50K/pH2FgmJSE8IRwU9DDhrLpd6iA==, tarball: https://registry.npmmirror.com/vue3-signature/-/vue3-signature-0.2.4.tgz}
peerDependencies:
vue: ^3.2.0
dependencies:
default-passive-events: 2.0.0
signature_pad: 3.0.0-beta.4
vue: 3.5.12(typescript@5.3.3)
dev: false
/vue@3.5.12(typescript@5.3.3):
resolution: {integrity: sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==, tarball: https://registry.npmmirror.com/vue/-/vue-3.5.12.tgz}
peerDependencies:

4
src/api/bpm/model/index.ts
View File

@ -72,3 +72,7 @@ export const deleteModel = async (id: number) => {
export const deployModel = async (id: number) => {
return await request.post({ url: '/bpm/model/deploy?id=' + id })
}
export const cleanModel = async (id: number) => {
return await request.delete({ url: '/bpm/model/clean?id=' + id })
}

3
src/api/bpm/processInstance/index.ts
View File

@ -36,6 +36,7 @@ export type ApprovalTaskInfo = {
assigneeUser: User
status: number
reason: string
signPicUrl: string
}
// 审批节点信息
@ -89,7 +90,7 @@ export const getProcessInstanceCopyPage = async (params: any) => {
// 获取审批详情
export const getApprovalDetail = async (params: any) => {
return await request.get({ url: 'bpm/process-instance/get-approval-detail' , params })
return await request.get({ url: 'bpm/process-instance/get-approval-detail', params })
}
// 获取表单字段权限

14
src/api/login/index.ts
View File

@ -22,11 +22,6 @@ export const register = (data: RegisterVO) => {
return request.post({ url: '/system/auth/register', data })
}
// 刷新访问令牌
export const refreshToken = () => {
return request.post({ url: '/system/auth/refresh-token?refreshToken=' + getRefreshToken() })
}
// 使用租户名，获得租户编号
export const getTenantIdByName = (name: string) => {
return request.get({ url: '/system/tenant/get-id-by-name?name=' + name })
@ -76,12 +71,17 @@ export const socialAuthRedirect = (type: number, redirectUri: string) => {
})
}
// 获取验证图片以及 token
export const getCode = (data) => {
export const getCode = (data: any) => {
debugger
return request.postOriginal({ url: 'system/captcha/get', data })
}
// 滑动或者点选验证
export const reqCheck = (data) => {
export const reqCheck = (data: any) => {
return request.postOriginal({ url: 'system/captcha/check', data })
}
// 通过短信重置密码
export const smsResetPassword = (data: any) => {
return request.post({ url: '/system/auth/sms-reset-password', data })
}

4
src/components/Echart/src/Echart.vue
View File

@ -9,6 +9,10 @@ import { useAppStore } from '@/store/modules/app'
import { isString } from '@/utils/is'
import { useDesign } from '@/hooks/web/useDesign'
import 'echarts/lib/component/markPoint'
import 'echarts/lib/component/markLine'
import 'echarts/lib/component/markArea'
defineOptions({ name: 'EChart' })
const { getPrefixCls, variables } = useDesign()

5
src/components/RouterSearch/index.vue
View File

@ -79,9 +79,14 @@ function remoteMethod(data) {
function handleChange(path) {
router.push({ path })
hiddenSearch()
hiddenTopSearch()
}
function hiddenSearch() {
showSearch.value = false
}
function hiddenTopSearch() {
showTopSearch.value = false
}

54
src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
View File

@ -46,7 +46,7 @@
</div>
<div class="handler-item-text">延迟器</div>
</div>
<div class="handler-item" @click="addNode(NodeType.ROUTE_BRANCH_NODE)">
<div class="handler-item" @click="addNode(NodeType.ROUTER_BRANCH_NODE)">
<!-- TODO @芋艿 需要更换一下iconfont的图标 -->
<div class="handler-item-icon copy">
<span class="iconfont icon-size icon-copy"></span>
@ -67,12 +67,13 @@ import {
ApproveMethodType,
AssignEmptyHandlerType,
AssignStartUserHandlerType,
ConditionType,
NODE_DEFAULT_NAME,
NodeType,
RejectHandlerType,
SimpleFlowNode
} from './consts'
import { generateUUID } from '@/utils'
import {generateUUID} from '@/utils'
defineOptions({
name: 'NodeHandler'
@ -164,9 +165,24 @@ const addNode = (type: number) => {
type: NodeType.CONDITION_NODE,
childNode: undefined,
conditionSetting: {
defaultFlow: false
},
defaultFlow: false,
conditionType: ConditionType.RULE,
conditionGroups: {
and: true,
conditions: [
{
and: true,
rules: [
{
opCode: '==',
leftSide: '',
rightSide: ''
}
]
}
]
}
}
},
{
id: 'Flow_' + generateUUID(),
@ -221,9 +237,24 @@ const addNode = (type: number) => {
type: NodeType.CONDITION_NODE,
childNode: undefined,
conditionSetting: {
defaultFlow: false
defaultFlow: false,
conditionType: ConditionType.RULE,
conditionGroups: {
and: true,
conditions: [
{
and: true,
rules: [
{
opCode: '==',
leftSide: '',
rightSide: ''
}
]
}
]
}
}
},
{
id: 'Flow_' + generateUUID(),
@ -249,14 +280,13 @@ const addNode = (type: number) => {
}
emits('update:childNode', data)
}
if (type === NodeType.ROUTE_BRANCH_NODE) {
if (type === NodeType.ROUTER_BRANCH_NODE) {
const data: SimpleFlowNode = {
id: 'GateWay_' + generateUUID(),
name: NODE_DEFAULT_NAME.get(NodeType.ROUTE_BRANCH_NODE) as string,
name: NODE_DEFAULT_NAME.get(NodeType.ROUTER_BRANCH_NODE) as string,
showText: '',
type: NodeType.ROUTE_BRANCH_NODE,
childNode: props.childNode,
defaultFlowId: 'Flow_' + generateUUID()
type: NodeType.ROUTER_BRANCH_NODE,
childNode: props.childNode
}
emits('update:childNode', data)
}

6
src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
View File

@ -45,8 +45,8 @@
@update:flow-node="handleModelValueUpdate"
/>
<!-- 路由分支节点 -->
<RouteNode
v-if="currentNode && currentNode.type === NodeType.ROUTE_BRANCH_NODE"
<RouterNode
v-if="currentNode && currentNode.type === NodeType.ROUTER_BRANCH_NODE"
:flow-node="currentNode"
@update:flow-node="handleModelValueUpdate"
/>
@ -73,7 +73,7 @@ import ExclusiveNode from './nodes/ExclusiveNode.vue'
import ParallelNode from './nodes/ParallelNode.vue'
import InclusiveNode from './nodes/InclusiveNode.vue'
import DelayTimerNode from './nodes/DelayTimerNode.vue'
import RouteNode from './nodes/RouteNode.vue'
import RouterNode from './nodes/RouterNode.vue'
import { SimpleFlowNode, NodeType } from './consts'
import { useWatchNode } from './node'
defineOptions({

121
src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
View File

@ -40,7 +40,7 @@ defineOptions({
name: 'SimpleProcessDesigner'
})
const emits = defineEmits(['success', 'init-finished']) // 保存成功事件
const emits = defineEmits(['success']) // 保存成功事件
const props = defineProps({
modelId: {
@ -59,13 +59,10 @@ const props = defineProps({
startUserIds: {
type: Array,
required: false
},
value: {
type: [String, Object],
required: false
}
})
const processData = inject('processData') as Ref
const loading = ref(false)
const formFields = ref<string[]>([])
const formType = ref(20)
@ -76,9 +73,6 @@ const deptOptions = ref<DeptApi.DeptVO[]>([]) // 部门列表
const deptTreeOptions = ref()
const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
// 添加当前值的引用
const currentValue = ref<SimpleFlowNode | undefined>()
provide('formFields', formFields)
provide('formType', formType)
provide('roleList', roleOptions)
@ -88,7 +82,8 @@ provide('deptList', deptOptions)
provide('userGroupList', userGroupOptions)
provide('deptTree', deptTreeOptions)
provide('startUserIds', props.startUserIds)
provide('tasks', [])
provide('processInstance', {})
const message = useMessage() // 国际化
const processNodeTree = ref<SimpleFlowNode | undefined>()
provide('processNodeTree', processNodeTree)
@ -113,70 +108,13 @@ const updateModel = () => {
}
}
// 加载流程数据
const loadProcessData = async (data: any) => {
try {
if (data) {
const parsedData = typeof data === 'string' ? JSON.parse(data) : data
processNodeTree.value = parsedData
currentValue.value = parsedData
// 确保数据加载后刷新视图
await nextTick()
if (simpleProcessModelRef.value?.refresh) {
await simpleProcessModelRef.value.refresh()
}
}
} catch (error) {
console.error('加载流程数据失败:', error)
}
}
// 监听属性变化
watch(
() => props.value,
async (newValue, oldValue) => {
if (newValue && newValue !== oldValue) {
await loadProcessData(newValue)
}
},
{ immediate: true, deep: true }
)
// 监听流程节点树变化，自动保存
watch(
() => processNodeTree.value,
async (newValue, oldValue) => {
if (newValue && oldValue && JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
await saveSimpleFlowModel(newValue)
}
},
{ deep: true }
)
const saveSimpleFlowModel = async (simpleModelNode: SimpleFlowNode) => {
if (!simpleModelNode) {
return
}
// 校验节点
errorNodes = []
validateNode(simpleModelNode, errorNodes)
if (errorNodes.length > 0) {
errorDialogVisible.value = true
return
}
try {
if (props.modelId) {
// 编辑模式
const data = {
id: props.modelId,
simpleModel: simpleModelNode
}
await updateBpmSimpleModel(data)
}
// 无论是编辑还是新建模式，都更新当前值并触发事件
currentValue.value = simpleModelNode
processData.value = simpleModelNode
emits('success', simpleModelNode)
} catch (error) {
console.error('保存失败:', error)
@ -247,61 +185,18 @@ onMounted(async () => {
deptTreeOptions.value = handleTree(deptOptions.value as DeptApi.DeptVO[], 'id')
// 获取用户组列表
userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
// 加载流程数据
if (props.modelId) {
// 获取 SIMPLE 设计器模型
const result = await getBpmSimpleModel(props.modelId)
if (result) {
await loadProcessData(result)
} else {
updateModel()
}
} else if (props.value) {
await loadProcessData(props.value)
if (processData.value) {
processNodeTree.value = processData?.value
} else {
updateModel()
}
} finally {
loading.value = false
emits('init-finished')
}
})
const simpleProcessModelRef = ref()
/** 获取当前流程数据 */
const getCurrentFlowData = async () => {
try {
if (simpleProcessModelRef.value) {
const data = await simpleProcessModelRef.value.getCurrentFlowData()
if (data) {
currentValue.value = data
return data
}
}
return currentValue.value
} catch (error) {
console.error('获取流程数据失败:', error)
return currentValue.value
}
}
// 刷新方法
const refresh = async () => {
try {
if (currentValue.value) {
await loadProcessData(currentValue.value)
}
} catch (error) {
console.error('刷新失败:', error)
}
}
defineExpose({
getCurrentFlowData,
updateModel,
loadProcessData,
refresh
})
defineExpose({})
</script>

52
src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
View File

@ -3,6 +3,22 @@
<div class="position-absolute top-0px right-0px bg-#fff">
<el-row type="flex" justify="end">
<el-button-group key="scale-control" size="default">
<el-button v-if="!readonly" size="default" @click="exportJson">
<Icon icon="ep:download" /> 导出
</el-button>
<el-button v-if="!readonly" size="default" @click="importJson">
<Icon icon="ep:upload" />导入
</el-button>
<!-- 用于打开本地文件-->
<input
v-if="!readonly"
type="file"
id="files"
ref="refFile"
style="display: none"
accept=".json"
@change="importLocalFile"
/>
<el-button size="default" :icon="ScaleToOriginal" @click="processReZoom()" />
<el-button size="default" :plain="true" :icon="ZoomOut" @click="zoomOut()" />
<el-button size="default" class="w-80px"> {{ scaleValue }}% </el-button>
@ -34,6 +50,8 @@ import ProcessNodeTree from './ProcessNodeTree.vue'
import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from './consts'
import { useWatchNode } from './node'
import { ZoomOut, ZoomIn, ScaleToOriginal } from '@element-plus/icons-vue'
import { isString } from '@/utils/is'
import download from '@/utils/download'
defineOptions({
name: 'SimpleProcessModel'
@ -52,7 +70,7 @@ const props = defineProps({
})
const emits = defineEmits<{
'save': [node: SimpleFlowNode | undefined]
save: [node: SimpleFlowNode | undefined]
}>()
const processNodeTree = useWatchNode(props)
@ -85,6 +103,16 @@ const processReZoom = () => {
const errorDialogVisible = ref(false)
let errorNodes: SimpleFlowNode[] = []
const saveSimpleFlowModel = async () => {
errorNodes = []
validateNode(processNodeTree.value, errorNodes)
if (errorNodes.length > 0) {
errorDialogVisible.value = true
return
}
emits('save', processNodeTree.value)
}
// 校验节点设置。 暂时以 showText 为空 未节点错误配置
const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNode[]) => {
if (node) {
@ -143,6 +171,28 @@ const getCurrentFlowData = async () => {
defineExpose({
getCurrentFlowData
})
/** 导出 JSON */
const exportJson = () => {
download.json(new Blob([JSON.stringify(processNodeTree.value)]), 'model.json')
}
/** 导入 JSON */
const refFile = ref()
const importJson = () => {
refFile.value.click()
}
const importLocalFile = () => {
const file = refFile.value.files[0]
const reader = new FileReader()
reader.readAsText(file)
reader.onload = function () {
if (isString(this.result)) {
processNodeTree.value = JSON.parse(this.result)
emits('save', processNodeTree.value)
}
}
}
</script>
<style lang="scss" scoped></style>

14
src/components/SimpleProcessDesignerV2/src/consts.ts
View File

@ -48,7 +48,7 @@ export enum NodeType {
/**
* 路由分支节点
*/
ROUTE_BRANCH_NODE = 54
ROUTER_BRANCH_NODE = 54
}
export enum NodeId {
@ -110,10 +110,12 @@ export interface SimpleFlowNode {
// 延迟设置
delaySetting?: DelaySetting
// 路由分支
routerGroups?: RouteCondition[]
routerGroups?: RouterCondition[]
defaultFlowId?: string
// 签名
signEnable?: boolean
// 审批意见
reasonRequire?: boolean
}
// 候选人策略枚举 （ 用于审批节点。抄送节点 )
export enum CandidateStrategy {
@ -447,8 +449,6 @@ export enum OperationButtonType {
* 条件规则结构定义
*/
export type ConditionRule = {
type: number
opName: string
opCode: string
leftSide: string
rightSide: string
@ -479,7 +479,7 @@ NODE_DEFAULT_TEXT.set(NodeType.COPY_TASK_NODE, '请配置抄送人')
NODE_DEFAULT_TEXT.set(NodeType.CONDITION_NODE, '请设置条件')
NODE_DEFAULT_TEXT.set(NodeType.START_USER_NODE, '请设置发起人')
NODE_DEFAULT_TEXT.set(NodeType.DELAY_TIMER_NODE, '请设置延迟器')
NODE_DEFAULT_TEXT.set(NodeType.ROUTE_BRANCH_NODE, '请设置路由节点')
NODE_DEFAULT_TEXT.set(NodeType.ROUTER_BRANCH_NODE, '请设置路由节点')
export const NODE_DEFAULT_NAME = new Map<number, string>()
NODE_DEFAULT_NAME.set(NodeType.USER_TASK_NODE, '审批人')
@ -487,7 +487,7 @@ NODE_DEFAULT_NAME.set(NodeType.COPY_TASK_NODE, '抄送人')
NODE_DEFAULT_NAME.set(NodeType.CONDITION_NODE, '条件')
NODE_DEFAULT_NAME.set(NodeType.START_USER_NODE, '发起人')
NODE_DEFAULT_NAME.set(NodeType.DELAY_TIMER_NODE, '延迟器')
NODE_DEFAULT_NAME.set(NodeType.ROUTE_BRANCH_NODE, '路由分支')
NODE_DEFAULT_NAME.set(NodeType.ROUTER_BRANCH_NODE, '路由分支')
// 候选人策略。暂时不从字典中取。 后续可能调整。控制显示顺序
export const CANDIDATE_STRATEGY: DictDataVO[] = [
@ -668,7 +668,7 @@ export const DELAY_TYPE = [
/**
* 路由分支结构定义
*/
export type RouteCondition = {
export type RouterCondition = {
nodeId: string
conditionType: ConditionType
conditionExpression: string

1
src/components/SimpleProcessDesignerV2/src/node.ts
View File

@ -148,6 +148,7 @@ export type UserTaskFormType = {
taskCompleteListenerHeader?: ListenerParam[]
taskCompleteListenerBody?: ListenerParam[]
signEnable: boolean
reasonRequire: boolean
}
export type CopyTaskFormType = {

242
src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
View File

@ -26,127 +26,11 @@
</div>
</template>
<div>
<div class="mb-3 font-size-16px" v-if="currentNode.conditionSetting?.defaultFlow">
未满足其它条件时，将进入此分支（该分支不可编辑和删除）
</div>
<div class="mb-3 font-size-16px" v-if="currentNode.conditionSetting?.defaultFlow"
>未满足其它条件时，将进入此分支（该分支不可编辑和删除）</div
>
<div v-else>
<el-form ref="formRef" :model="currentNode.conditionSetting" :rules="formRules" label-position="top">
<el-form-item label="配置方式" prop="conditionType">
<el-radio-group
v-model="currentNode.conditionSetting!.conditionType"
@change="changeConditionType"
>
<el-radio
v-for="(dict, index) in conditionConfigTypes"
:key="index"
:value="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
v-if="currentNode.conditionSetting?.conditionType === ConditionType.EXPRESSION"
label="条件表达式"
prop="conditionExpression"
>
<el-input
type="textarea"
v-model="currentNode.conditionSetting.conditionExpression"
clearable
style="width: 100%"
/>
</el-form-item>
<el-form-item
v-if="currentNode.conditionSetting?.conditionType === ConditionType.RULE"
label="条件规则"
>
<div class="condition-group-tool">
<div class="flex items-center">
<div class="mr-4">条件组关系</div>
<el-switch
v-model="conditionGroups.and"
inline-prompt
active-text="且"
inactive-text="或"
/>
</div>
</div>
<el-space direction="vertical" :spacer="conditionGroups.and ? '且' : '或'">
<el-card
class="condition-group"
style="width: 530px"
v-for="(condition, cIdx) in conditionGroups.conditions"
:key="cIdx"
>
<div class="condition-group-delete" v-if="conditionGroups.conditions.length > 1">
<Icon
color="#0089ff"
icon="ep:circle-close-filled"
:size="18"
@click="deleteConditionGroup(cIdx)"
/>
</div>
<template #header>
<div class="flex items-center justify-between">
<div>条件组</div>
<div class="flex">
<div class="mr-4">规则关系</div>
<el-switch
v-model="condition.and"
inline-prompt
active-text="且"
inactive-text="或"
/>
</div>
</div>
</template>
<div class="flex pt-2" v-for="(rule, rIdx) in condition.rules" :key="rIdx">
<div class="mr-2">
<el-select style="width: 160px" v-model="rule.leftSide">
<el-option
v-for="(item, index) in fieldOptions"
:key="index"
:label="item.title"
:value="item.field"
:disabled="!item.required"
/>
</el-select>
</div>
<div class="mr-2">
<el-select v-model="rule.opCode" style="width: 100px">
<el-option
v-for="item in COMPARISON_OPERATORS"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
<div class="mr-2">
<el-input v-model="rule.rightSide" style="width: 160px" />
</div>
<div class="mr-1 flex items-center" v-if="condition.rules.length > 1">
<Icon
icon="ep:delete"
:size="18"
@click="deleteConditionRule(condition, rIdx)"
/>
</div>
<div class="flex items-center">
<Icon icon="ep:plus" :size="18" @click="addConditionRule(condition, rIdx)" />
</div>
</div>
</el-card>
</el-space>
<div title="添加条件组" class="mt-4 cursor-pointer">
<Icon color="#0089ff" icon="ep:plus" :size="24" @click="addConditionGroup" />
</div>
</el-form-item>
</el-form>
<Condition ref="conditionRef" v-model="condition" />
</div>
</div>
<template #footer>
@ -161,33 +45,18 @@
<script setup lang="ts">
import {
SimpleFlowNode,
CONDITION_CONFIG_TYPES,
ConditionType,
ConditionSetting,
COMPARISON_OPERATORS,
ConditionGroup,
Condition,
ConditionRule,
ProcessVariableEnum
} from '../consts'
import { getDefaultConditionNodeName } from '../utils'
import { useFormFields } from '../node'
import { BpmModelFormType } from '@/utils/constants'
import Condition from './components/Condition.vue'
const message = useMessage() // 消息弹窗
defineOptions({
name: 'ConditionNodeConfig'
})
const formType = inject<Ref<number>>('formType') // 表单类型
const conditionConfigTypes = computed(() => {
return CONDITION_CONFIG_TYPES.filter((item) => {
// 业务表单暂时去掉条件规则选项
if (formType?.value === BpmModelFormType.CUSTOM && item.value === ConditionType.RULE) {
return false
} else {
return true
}
})
})
const props = defineProps({
conditionNode: {
type: Object as () => SimpleFlowNode,
@ -199,12 +68,10 @@ const props = defineProps({
}
})
const settingVisible = ref(false)
const currentNode = ref<SimpleFlowNode>(props.conditionNode)
const condition = ref<ConditionSetting>()
const open = () => {
if (currentNode.value.conditionSetting?.conditionType === ConditionType.RULE) {
if (currentNode.value.conditionSetting?.conditionGroups) {
conditionGroups.value = currentNode.value.conditionSetting.conditionGroups
}
}
condition.value = currentNode.value.conditionSetting
settingVisible.value = true
}
@ -228,7 +95,7 @@ const blurEvent = () => {
getDefaultConditionNodeName(props.nodeIndex, currentNode.value?.conditionSetting?.defaultFlow)
}
const currentNode = ref<SimpleFlowNode>(props.conditionNode)
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
@ -245,31 +112,27 @@ const handleClose = async (done: (cancel?: boolean) => void) => {
done()
}
}
// 表单校验规则
const formRules = reactive({
conditionType: [{ required: true, message: '配置方式不能为空', trigger: 'blur' }],
conditionExpression: [{ required: true, message: '条件表达式不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const conditionRef = ref()
// 保存配置
const saveConfig = async () => {
if (!currentNode.value.conditionSetting?.defaultFlow) {
// 校验表单
if (!formRef) return false
const valid = await formRef.value.validate()
const valid = await conditionRef.value.validate()
if (!valid) return false
const showText = getShowText()
if (!showText) {
return false
}
currentNode.value.showText = showText
currentNode.value.conditionSetting!.conditionType = condition.value?.conditionType
if (currentNode.value.conditionSetting?.conditionType === ConditionType.EXPRESSION) {
currentNode.value.conditionSetting.conditionGroups = undefined
currentNode.value.conditionSetting.conditionExpression = condition.value?.conditionExpression
}
if (currentNode.value.conditionSetting?.conditionType === ConditionType.RULE) {
currentNode.value.conditionSetting.conditionExpression = undefined
currentNode.value.conditionSetting.conditionGroups = conditionGroups.value
if (currentNode.value.conditionSetting!.conditionType === ConditionType.RULE) {
currentNode.value.conditionSetting!.conditionExpression = undefined
currentNode.value.conditionSetting!.conditionGroups = condition.value?.conditionGroups
}
}
settingVisible.value = false
@ -277,16 +140,16 @@ const saveConfig = async () => {
}
const getShowText = (): string => {
let showText = ''
if (currentNode.value.conditionSetting?.conditionType === ConditionType.EXPRESSION) {
if (currentNode.value.conditionSetting.conditionExpression) {
showText = `表达式：${currentNode.value.conditionSetting.conditionExpression}`
if (condition.value?.conditionType === ConditionType.EXPRESSION) {
if (condition.value.conditionExpression) {
showText = `表达式：${condition.value.conditionExpression}`
}
}
if (currentNode.value.conditionSetting?.conditionType === ConditionType.RULE) {
if (condition.value?.conditionType === ConditionType.RULE) {
// 条件组是否为与关系
const groupAnd = conditionGroups.value.and
const groupAnd = condition.value.conditionGroups?.and
let warningMesg: undefined | string = undefined
const conditionGroup = conditionGroups.value.conditions.map((item) => {
const conditionGroup = condition.value.conditionGroups?.conditions.map((item) => {
return (
'(' +
item.rules
@ -309,70 +172,13 @@ const getShowText = (): string => {
message.warning(warningMesg)
showText = ''
} else {
showText = conditionGroup.join(groupAnd ? ' 且 ' : ' 或 ')
showText = conditionGroup!.join(groupAnd ? ' 且 ' : ' 或 ')
}
}
return showText
}
// 改变条件配置方式
const changeConditionType = () => {}
const conditionGroups = ref<ConditionGroup>({
and: true,
conditions: [
{
and: true,
rules: [
{
type: 1,
opName: '等于',
opCode: '==',
leftSide: '',
rightSide: ''
}
]
}
]
})
// 添加条件组
const addConditionGroup = () => {
const condition = {
and: true,
rules: [
{
type: 1,
opName: '等于',
opCode: '==',
leftSide: '',
rightSide: ''
}
]
}
conditionGroups.value.conditions.push(condition)
}
// 删除条件组
const deleteConditionGroup = (idx: number) => {
conditionGroups.value.conditions.splice(idx, 1)
}
// 添加条件规则
const addConditionRule = (condition: Condition, idx: number) => {
const rule: ConditionRule = {
type: 1,
opName: '等于',
opCode: '==',
leftSide: '',
rightSide: ''
}
condition.rules.splice(idx + 1, 0, rule)
}
const deleteConditionRule = (condition: Condition, idx: number) => {
condition.rules.splice(idx, 1)
}
const fieldsInfo = useFormFields()
/** 条件规则可选择的表单字段 */
const fieldOptions = computed(() => {
const fieldsCopy = fieldsInfo.slice()

58
src/components/SimpleProcessDesignerV2/src/nodes-config/RouteNodeConfig.vue → src/components/SimpleProcessDesignerV2/src/nodes-config/RouterNodeConfig.vue
View File

@ -37,16 +37,19 @@
:value="node.value"
/>
</el-select>
<el-button class="mla" type="danger" link @click="deleteRouteGroup(index)"
>删除</el-button
>
<el-button class="mla" type="danger" link @click="deleteRouterGroup(index)">
删除
</el-button>
</div>
</template>
<Condition v-model="routerGroups[index]" />
<Condition
:ref="($event) => (conditionRef[index] = $event)"
v-model="routerGroups[index]"
/>
</el-card>
</el-form>
<el-button class="w-1/1" type="primary" :icon="Plus" @click="addRouteGroup">
<el-button class="w-1/1" type="primary" :icon="Plus" @click="addRouterGroup">
新增路由分支
</el-button>
</div>
@ -61,11 +64,12 @@
</template>
<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { SimpleFlowNode, NodeType, ConditionType, RouteCondition } from '../consts'
import { SimpleFlowNode, NodeType, ConditionType, RouterCondition } from '../consts'
import { useWatchNode, useDrawer, useNodeName } from '../node'
import Condition from './components/Condition.vue'
defineOptions({
name: 'RouteNodeConfig'
name: 'RouterNodeConfig'
})
const message = useMessage() // 消息弹窗
const props = defineProps({
@ -80,12 +84,21 @@ const { settingVisible, closeDrawer, openDrawer } = useDrawer()
// 当前节点
const currentNode = useWatchNode(props)
// 节点名称
const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.ROUTE_BRANCH_NODE)
const routerGroups = ref<RouteCondition[]>([])
const nodeOptions = ref()
const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.ROUTER_BRANCH_NODE)
const routerGroups = ref<RouterCondition[]>([])
const nodeOptions = ref<any>([])
const conditionRef = ref([])
// 保存配置
/** 保存配置 */
const saveConfig = async () => {
// 校验表单
let valid = true
for (const item of conditionRef.value) {
if (item && !(await item.validate())) {
valid = false
}
}
if (!valid) return false
const showText = getShowText()
if (!showText) return false
currentNode.value.name = nodeName.value!
@ -96,7 +109,7 @@ const saveConfig = async () => {
}
// 显示路由分支节点配置， 由父组件传过来
const showRouteNodeConfig = (node: SimpleFlowNode) => {
getRoutableNode()
getRouterNode(processNodeTree?.value)
routerGroups.value = []
nodeName.value = node.name
if (node.routerGroups) {
@ -132,7 +145,7 @@ const getShowText = () => {
return `${routerGroups.value.length}条路由分支`
}
const addRouteGroup = () => {
const addRouterGroup = () => {
routerGroups.value.push({
nodeId: '',
conditionType: ConditionType.RULE,
@ -144,8 +157,6 @@ const addRouteGroup = () => {
and: true,
rules: [
{
type: 1,
opName: '等于',
opCode: '==',
leftSide: '',
rightSide: ''
@ -157,20 +168,18 @@ const addRouteGroup = () => {
})
}
const deleteRouteGroup = (index: number) => {
const deleteRouterGroup = (index: number) => {
routerGroups.value.splice(index, 1)
}
// TODO @lesan：还有一些 router 的命名，没改过来呢
const getRoutableNode = () => {
// TODO @lesan 还需要满足以下要求
// 递归获取所有节点
const getRouterNode = (node) => {
// TODO 最好还需要满足以下要求
// 并行分支、包容分支内部节点不能跳转到外部节点
// 条件分支节点可以向上跳转到外部节点
let node = processNodeTree?.value
nodeOptions.value = []
while (true) {
if (!node) break
if (node.type !== NodeType.ROUTE_BRANCH_NODE) {
if (node.type !== NodeType.ROUTER_BRANCH_NODE && node.type !== NodeType.CONDITION_NODE) {
nodeOptions.value.push({
label: node.name,
value: node.id
@ -179,6 +188,11 @@ const getRoutableNode = () => {
if (!node.childNode || node.type === NodeType.END_EVENT_NODE) {
break
}
if (node.conditionNodes && node.conditionNodes.length) {
node.conditionNodes.forEach((item) => {
getRouterNode(item)
})
}
node = node.childNode
}
}

209
src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
View File

@ -359,11 +359,12 @@
<el-divider content-position="left">是否需要签名</el-divider>
<el-form-item prop="signEnable">
<el-switch
v-model="configForm.signEnable"
active-text="是"
inactive-text="否"
/>
<el-switch v-model="configForm.signEnable" active-text="是" inactive-text="否" />
</el-form-item>
<el-divider content-position="left">审批意见</el-divider>
<el-form-item prop="reasonRequire">
<el-switch v-model="configForm.reasonRequire" active-text="必填" inactive-text="非必填" />
</el-form-item>
</el-form>
</div>
@ -445,161 +446,7 @@
</div>
</el-tab-pane>
<el-tab-pane label="监听器" name="listener">
<el-form :model="configForm" label-position="top">
<div v-for="(listener, listenerIdx) in taskListener" :key="listenerIdx">
<el-divider content-position="left">
<el-text tag="b" size="large">{{ listener.name }}</el-text>
</el-divider>
<el-form-item>
<el-switch
v-model="configForm[`task${listener.type}ListenerEnable`]"
active-text="开启"
inactive-text="关闭"
/>
</el-form-item>
<div v-if="configForm[`task${listener.type}ListenerEnable`]">
<el-form-item>
<el-alert
title="仅支持 POST 请求，以请求体方式接收参数"
type="warning"
show-icon
:closable="false"
/>
</el-form-item>
<el-form-item
label="请求地址"
:prop="`task${listener.type}ListenerPath`"
:rules="{
required: true,
message: '请求地址不能为空',
trigger: 'blur'
}"
>
<el-input v-model="configForm[`task${listener.type}ListenerPath`]" />
</el-form-item>
<el-form-item label="请求头">
<div
class="flex pt-2"
v-for="(item, index) in configForm[`task${listener.type}ListenerHeader`]"
:key="index"
>
<div class="mr-2">
<el-input class="w-160px" v-model="item.key" />
</div>
<div class="mr-2">
<el-select class="w-100px!" v-model="item.type">
<el-option
v-for="types in LISTENER_MAP_TYPES"
:key="types.value"
:label="types.label"
:value="types.value"
/>
</el-select>
</div>
<div class="mr-2">
<el-input
v-if="item.type === ListenerParamTypeEnum.FIXED_VALUE"
class="w-160px"
v-model="item.value"
/>
<el-select
v-if="item.type === ListenerParamTypeEnum.FROM_FORM"
class="w-160px!"
v-model="item.value"
>
<el-option
v-for="(field, fIdx) in formFieldOptions"
:key="fIdx"
:label="field.title"
:value="field.field"
:disabled="!field.required"
/>
</el-select>
</div>
<div class="mr-1 flex items-center">
<Icon
icon="ep:delete"
:size="18"
@click="
deleteTaskListenerParam(
configForm[`task${listener.type}ListenerHeader`],
index
)
"
/>
</div>
</div>
<el-button
type="primary"
text
@click="addTaskListenerParam(configForm[`task${listener.type}ListenerHeader`])"
>
<Icon icon="ep:plus" class="mr-5px" />添加一行
</el-button>
</el-form-item>
<el-form-item label="请求体">
<div
class="flex pt-2"
v-for="(item, index) in configForm[`task${listener.type}ListenerBody`]"
:key="index"
>
<div class="mr-2">
<el-input class="w-160px" v-model="item.key" />
</div>
<div class="mr-2">
<el-select class="w-100px!" v-model="item.type">
<el-option
v-for="types in LISTENER_MAP_TYPES"
:key="types.value"
:label="types.label"
:value="types.value"
/>
</el-select>
</div>
<div class="mr-2">
<el-input
v-if="item.type === ListenerParamTypeEnum.FIXED_VALUE"
class="w-160px"
v-model="item.value"
/>
<el-select
v-if="item.type === ListenerParamTypeEnum.FROM_FORM"
class="w-160px!"
v-model="item.value"
>
<el-option
v-for="(field, fIdx) in formFieldOptions"
:key="fIdx"
:label="field.title"
:value="field.field"
:disabled="!field.required"
/>
</el-select>
</div>
<div class="mr-1 flex items-center">
<Icon
icon="ep:delete"
:size="18"
@click="
deleteTaskListenerParam(
configForm[`task${listener.type}ListenerBody`],
index
)
"
/>
</div>
</div>
<el-button
type="primary"
text
@click="addTaskListenerParam(configForm[`task${listener.type}ListenerBody`])"
>
<Icon icon="ep:plus" class="mr-5px" />添加一行
</el-button>
</el-form-item>
</div>
</div>
</el-form>
<UserTaskListener ref="userTaskListenerRef" v-model="configForm" :form-field-options="formFieldOptions" />
</el-tab-pane>
</el-tabs>
<template #footer>
@ -636,9 +483,7 @@ import {
ASSIGN_EMPTY_HANDLER_TYPES,
AssignEmptyHandlerType,
FieldPermissionType,
ProcessVariableEnum,
LISTENER_MAP_TYPES,
ListenerParamTypeEnum
ProcessVariableEnum
} from '../consts'
import {
@ -652,6 +497,7 @@ import {
import { defaultProps } from '@/utils/tree'
import { cloneDeep } from 'lodash-es'
import { convertTimeUnit, getApproveTypeText } from '../utils'
import UserTaskListener from './components/UserTaskListener.vue'
defineOptions({
name: 'UserTaskNodeConfig'
})
@ -729,21 +575,6 @@ const formRules = reactive({
assignEmptyHandlerUserIds: [{ required: true, message: '用户不能为空', trigger: 'change' }],
assignStartUserHandlerType: [{ required: true }]
})
// 监听器数组
const taskListener = ref([
{
name: '创建任务',
type: 'Create'
},
{
name: '指派任务执行人员',
type: 'Assign'
},
{
name: '完成任务',
type: 'Complete'
}
])
const {
configForm: tempConfigForm,
@ -792,6 +623,8 @@ const {
cTimeoutMaxRemindCount
} = useTimeoutHandler()
const userTaskListenerRef = ref()
// 保存配置
const saveConfig = async () => {
activeTabName.value = 'user'
@ -807,7 +640,8 @@ const saveConfig = async () => {
}
if (!formRef) return false
const valid = await formRef.value.validate()
if (!userTaskListenerRef) return false
const valid = (await formRef.value.validate()) && (await userTaskListenerRef.value.validate())
if (!valid) return false
const showText = getShowText()
if (!showText) return false
@ -869,6 +703,8 @@ const saveConfig = async () => {
}
// 签名
currentNode.value.signEnable = configForm.value.signEnable
// 审批意见
currentNode.value.reasonRequire = configForm.value.reasonRequire
currentNode.value.showText = showText
settingVisible.value = false
@ -937,7 +773,9 @@ const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
configForm.value.taskCompleteListenerHeader = node.taskCompleteListener?.header ?? []
configForm.value.taskCompleteListenerBody = node.taskCompleteListener?.body ?? []
// 6. 签名
configForm.value.signEnable = node.signEnable ?? false
configForm.value.signEnable = node?.signEnable ?? false
// 7. 审批意见
configForm.value.reasonRequire = node?.reasonRequire ?? false
}
defineExpose({ openDrawer, showUserTaskNodeConfig }) // 暴露方法给父组件
@ -1050,17 +888,6 @@ function useTimeoutHandler() {
cTimeoutMaxRemindCount
}
}
const addTaskListenerParam = (arr) => {
arr.push({
key: '',
type: 1,
value: ''
})
}
const deleteTaskListenerParam = (arr, index) => {
arr.splice(index, 1)
}
</script>
<style lang="scss" scoped>

99
src/components/SimpleProcessDesignerV2/src/nodes-config/components/Condition.vue
View File

@ -1,9 +1,7 @@
<!-- TODO @lesan：其它路由条件，可以使用这个哇？ -->
<template>
<el-form ref="formRef" :model="condition" :rules="formRules" label-position="top">
<!-- TODO @lesan：1）默认选中 条件规则；2）条件规则放前面，因为更常用！-->
<el-form-item label="配置方式" prop="conditionType">
<el-radio-group v-model="condition.conditionType">
<el-radio-group v-model="condition!.conditionType">
<el-radio
v-for="(dict, indexConditionType) in conditionConfigTypes"
:key="indexConditionType"
@ -14,46 +12,34 @@
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
v-if="condition.conditionType === ConditionType.EXPRESSION"
label="条件表达式"
prop="conditionExpression"
>
<el-input
type="textarea"
v-model="condition.conditionExpression"
clearable
style="width: 100%"
/>
</el-form-item>
<el-form-item v-if="condition.conditionType === ConditionType.RULE" label="条件规则">
<div class="condition-group-tool">
<div class="flex items-center">
<div class="mr-4">条件组关系</div>
<el-switch
v-model="condition.conditionGroups.and"
v-model="condition!.conditionGroups!.and"
inline-prompt
active-text="且"
inactive-text="或"
/>
</div>
</div>
<el-space direction="vertical" :spacer="condition.conditionGroups.and ? '且' : '或'">
<el-space direction="vertical" :spacer="condition!.conditionGroups!.and ? '且' : '或'">
<el-card
class="condition-group"
style="width: 530px"
v-for="(equation, cIdx) in condition.conditionGroups.conditions"
v-for="(equation, cIdx) in condition!.conditionGroups!.conditions"
:key="cIdx"
>
<div
class="condition-group-delete"
v-if="condition.conditionGroups.conditions.length > 1"
v-if="condition!.conditionGroups!.conditions.length > 1"
>
<Icon
color="#0089ff"
icon="ep:circle-close-filled"
:size="18"
@click="deleteConditionGroup(condition.conditionGroups.conditions, cIdx)"
@click="deleteConditionGroup(condition!.conditionGroups!.conditions, cIdx)"
/>
</div>
<template #header>
@ -73,15 +59,24 @@
<div class="flex pt-2" v-for="(rule, rIdx) in equation.rules" :key="rIdx">
<div class="mr-2">
<el-select style="width: 160px" v-model="rule.leftSide">
<el-option
v-for="(field, fIdx) in fieldOptions"
:key="fIdx"
:label="field.title"
:value="field.field"
:disabled="!field.required"
/>
</el-select>
<el-form-item
:prop="`conditionGroups.conditions.${cIdx}.rules.${rIdx}.leftSide`"
:rules="{
required: true,
message: '左值不能为空',
trigger: 'change'
}"
>
<el-select style="width: 160px" v-model="rule.leftSide">
<el-option
v-for="(field, fIdx) in fieldOptions"
:key="fIdx"
:label="field.title"
:value="field.field"
:disabled="!field.required"
/>
</el-select>
</el-form-item>
</div>
<div class="mr-2">
<el-select v-model="rule.opCode" style="width: 100px">
@ -94,7 +89,16 @@
</el-select>
</div>
<div class="mr-2">
<el-input v-model="rule.rightSide" style="width: 160px" />
<el-form-item
:prop="`conditionGroups.conditions.${cIdx}.rules.${rIdx}.rightSide`"
:rules="{
required: true,
message: '右值不能为空',
trigger: 'blur'
}"
>
<el-input v-model="rule.rightSide" style="width: 160px" />
</el-form-item>
</div>
<div class="mr-1 flex items-center" v-if="equation.rules.length > 1">
<Icon icon="ep:delete" :size="18" @click="deleteConditionRule(equation, rIdx)" />
@ -110,29 +114,37 @@
color="#0089ff"
icon="ep:plus"
:size="24"
@click="addConditionGroup(condition.conditionGroups.conditions)"
@click="addConditionGroup(condition?.conditionGroups!.conditions)"
/>
</div>
</el-form-item>
<el-form-item
v-if="condition.conditionType === ConditionType.EXPRESSION"
label="条件表达式"
prop="conditionExpression"
>
<el-input
type="textarea"
v-model="condition!.conditionExpression"
clearable
style="width: 100%"
/>
</el-form-item>
</el-form>
</template>
<script setup lang="ts">
import {
CONDITION_CONFIG_TYPES,
COMPARISON_OPERATORS,
CONDITION_CONFIG_TYPES,
ConditionType,
ConditionSetting,
ProcessVariableEnum
} from '../../consts'
import { BpmModelFormType } from '@/utils/constants'
import { useFormFields } from '../../node'
const props = defineProps({
modelValue: {
type: Object,
required: true
}
})
const props = defineProps<{modelValue: ConditionSetting}>()
const emit = defineEmits(['update:modelValue'])
const condition = computed({
get() {
@ -181,8 +193,6 @@ const deleteConditionRule = (condition, index) => {
const addConditionRule = (condition, index) => {
const rule = {
type: 1,
opName: '等于',
opCode: '==',
leftSide: '',
rightSide: ''
@ -195,8 +205,6 @@ const addConditionGroup = (conditions) => {
and: true,
rules: [
{
type: 1, // TODO @lesan：枚举~
opName: '等于',
opCode: '==',
leftSide: '',
rightSide: ''
@ -205,6 +213,13 @@ const addConditionGroup = (conditions) => {
}
conditions.push(condition)
}
const validate = async () => {
if (!formRef) return false
return await formRef.value.validate()
}
defineExpose({ validate })
</script>
<style lang="scss" scoped>

261
src/components/SimpleProcessDesignerV2/src/nodes-config/components/UserTaskListener.vue Normal file
View File

@ -0,0 +1,261 @@
<template>
<el-form ref="listenerFormRef" :model="configForm" label-position="top">
<div v-for="(listener, listenerIdx) in taskListener" :key="listenerIdx">
<el-divider content-position="left">
<el-text tag="b" size="large">{{ listener.name }}</el-text>
</el-divider>
<el-form-item>
<el-switch
v-model="configForm[`task${listener.type}ListenerEnable`]"
active-text="开启"
inactive-text="关闭"
/>
</el-form-item>
<div v-if="configForm[`task${listener.type}ListenerEnable`]">
<el-form-item>
<el-alert
title="仅支持 POST 请求，以请求体方式接收参数"
type="warning"
show-icon
:closable="false"
/>
</el-form-item>
<el-form-item
label="请求地址"
:prop="`task${listener.type}ListenerPath`"
:rules="{
required: true,
message: '请求地址不能为空',
trigger: 'blur'
}"
>
<el-input v-model="configForm[`task${listener.type}ListenerPath`]" />
</el-form-item>
<el-form-item label="请求头">
<div
class="flex pt-2"
v-for="(item, index) in configForm[`task${listener.type}ListenerHeader`]"
:key="index"
>
<div class="mr-2">
<el-form-item
:prop="`task${listener.type}ListenerHeader.${index}.key`"
:rules="{
required: true,
message: '参数名不能为空',
trigger: 'blur'
}"
>
<el-input class="w-160px" v-model="item.key" />
</el-form-item>
</div>
<div class="mr-2">
<el-select class="w-100px!" v-model="item.type">
<el-option
v-for="types in LISTENER_MAP_TYPES"
:key="types.value"
:label="types.label"
:value="types.value"
/>
</el-select>
</div>
<div class="mr-2">
<el-form-item
:prop="`task${listener.type}ListenerHeader.${index}.value`"
:rules="{
required: true,
message: '参数值不能为空',
trigger: 'blur'
}"
>
<el-input
v-if="item.type === ListenerParamTypeEnum.FIXED_VALUE"
class="w-160px"
v-model="item.value"
/>
</el-form-item>
<el-form-item
:prop="`task${listener.type}ListenerHeader.${index}.value`"
:rules="{
required: true,
message: '参数值不能为空',
trigger: 'change'
}"
>
<el-select
v-if="item.type === ListenerParamTypeEnum.FROM_FORM"
class="w-160px!"
v-model="item.value"
>
<el-option
v-for="(field, fIdx) in formFieldOptions"
:key="fIdx"
:label="field.title"
:value="field.field"
:disabled="!field.required"
/>
</el-select>
</el-form-item>
</div>
<div class="mr-1 flex items-center">
<Icon
icon="ep:delete"
:size="18"
@click="
deleteTaskListenerParam(configForm[`task${listener.type}ListenerHeader`], index)
"
/>
</div>
</div>
<el-button
type="primary"
text
@click="addTaskListenerParam(configForm[`task${listener.type}ListenerHeader`])"
>
<Icon icon="ep:plus" class="mr-5px" />添加一行
</el-button>
</el-form-item>
<el-form-item label="请求体">
<div
class="flex pt-2"
v-for="(item, index) in configForm[`task${listener.type}ListenerBody`]"
:key="index"
>
<div class="mr-2">
<el-form-item
:prop="`task${listener.type}ListenerBody.${index}.key`"
:rules="{
required: true,
message: '参数名不能为空',
trigger: 'blur'
}"
>
<el-input class="w-160px" v-model="item.key" />
</el-form-item>
</div>
<div class="mr-2">
<el-select class="w-100px!" v-model="item.type">
<el-option
v-for="types in LISTENER_MAP_TYPES"
:key="types.value"
:label="types.label"
:value="types.value"
/>
</el-select>
</div>
<div class="mr-2">
<el-form-item
:prop="`task${listener.type}ListenerBody.${index}.value`"
:rules="{
required: true,
message: '参数值不能为空',
trigger: 'blur'
}"
>
<el-input
v-if="item.type === ListenerParamTypeEnum.FIXED_VALUE"
class="w-160px"
v-model="item.value"
/>
</el-form-item>
<el-form-item
:prop="`task${listener.type}ListenerBody.${index}.value`"
:rules="{
required: true,
message: '参数值不能为空',
trigger: 'change'
}"
>
<el-select
v-if="item.type === ListenerParamTypeEnum.FROM_FORM"
class="w-160px!"
v-model="item.value"
>
<el-option
v-for="(field, fIdx) in formFieldOptions"
:key="fIdx"
:label="field.title"
:value="field.field"
:disabled="!field.required"
/>
</el-select>
</el-form-item>
</div>
<div class="mr-1 flex items-center">
<Icon
icon="ep:delete"
:size="18"
@click="
deleteTaskListenerParam(configForm[`task${listener.type}ListenerBody`], index)
"
/>
</div>
</div>
<el-button
type="primary"
text
@click="addTaskListenerParam(configForm[`task${listener.type}ListenerBody`])"
>
<Icon icon="ep:plus" class="mr-5px" />添加一行
</el-button>
</el-form-item>
</div>
</div>
</el-form>
</template>
<script setup lang="ts">
import { LISTENER_MAP_TYPES, ListenerParamTypeEnum } from '../../consts'
const props = defineProps({
modelValue: {
type: Object,
required: true
},
formFieldOptions: {
type: Object,
required: true
}
})
const emit = defineEmits(['update:modelValue'])
const listenerFormRef = ref()
const configForm = computed({
get() {
return props.modelValue
},
set(newValue) {
emit('update:modelValue', newValue)
}
})
const taskListener = ref([
{
name: '创建任务',
type: 'Create'
},
{
name: '指派任务执行人员',
type: 'Assign'
},
{
name: '完成任务',
type: 'Complete'
}
])
const addTaskListenerParam = (arr) => {
arr.push({
key: '',
type: 1,
value: ''
})
}
const deleteTaskListenerParam = (arr, index) => {
arr.splice(index, 1)
}
const validate = async () => {
if (!listenerFormRef) return false
return await listenerFormRef.value.validate()
}
defineExpose({ validate })
</script>

10
src/components/SimpleProcessDesignerV2/src/nodes/RouteNode.vue → src/components/SimpleProcessDesignerV2/src/nodes/RouterNode.vue
View File

@ -31,7 +31,7 @@
{{ currentNode.showText }}
</div>
<div class="node-text" v-else>
{{ NODE_DEFAULT_TEXT.get(NodeType.ROUTE_BRANCH_NODE) }}
{{ NODE_DEFAULT_TEXT.get(NodeType.ROUTER_BRANCH_NODE) }}
</div>
<Icon v-if="!readonly" icon="ep:arrow-right-bold" />
</div>
@ -49,17 +49,17 @@
:current-node="currentNode"
/>
</div>
<RouteNodeConfig v-if="!readonly && currentNode" ref="nodeSetting" :flow-node="currentNode" />
<RouterNodeConfig v-if="!readonly && currentNode" ref="nodeSetting" :flow-node="currentNode" />
</div>
</template>
<script setup lang="ts">
import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
import NodeHandler from '../NodeHandler.vue'
import { useNodeName2, useWatchNode, useTaskStatusClass } from '../node'
import RouteNodeConfig from '../nodes-config/RouteNodeConfig.vue'
import RouterNodeConfig from '../nodes-config/RouterNodeConfig.vue'
defineOptions({
name: 'RouteNode'
name: 'RouterNode'
})
const props = defineProps({
@ -77,7 +77,7 @@ const readonly = inject<Boolean>('readonly')
// 监控节点的变化
const currentNode = useWatchNode(props)
// 节点名称编辑
const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.ROUTE_BRANCH_NODE)
const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.ROUTER_BRANCH_NODE)
const nodeSetting = ref()
// 打开节点配置

24
src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
View File

@ -308,28 +308,6 @@ const props = defineProps({
}
})
// 监听value变化,重新加载流程图
watch(
() => props.value,
(newValue) => {
if (newValue && bpmnModeler) {
createNewDiagram(newValue)
}
},
{ immediate: true }
)
// 监听processId和processName变化
watch(
[() => props.processId, () => props.processName],
([newId, newName]) => {
if (newId && newName && !props.value) {
createNewDiagram(null)
}
},
{ immediate: true }
)
provide('configGlobal', props)
let bpmnModeler: any = null
const defaultZoom = ref(1)
@ -480,6 +458,7 @@ const initModelListeners = () => {
emit('commandStack-changed', event)
emit('input', xml)
emit('change', xml)
emit('save', xml)
} catch (e: any) {
console.error(`[Process Designer Warn]: ${e.message || e}`)
}
@ -568,6 +547,7 @@ const importLocalFile = () => {
reader.onload = function () {
let xmlStr = this.result
createNewDiagram(xmlStr)
emit('save', xmlStr)
}
}
/* ------------------------------------------------ refs methods ------------------------------------------------------ */

39
src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json
View File

@ -1438,6 +1438,45 @@
"isBody": true
}
]
},
{
"name": "SignEnable",
"superClass": ["Element"],
"meta": {
"allowedIn": ["bpmn:UserTask"]
},
"properties": [
{
"name": "value",
"type": "Boolean",
"isBody": true
}
]
},
{
"name": "SkipExpression",
"extends": ["bpmn:UserTask"],
"properties": [
{
"name": "skipExpression",
"isAttr": true,
"type": "String"
}
]
},
{
"name": "ReasonRequire",
"superClass": ["Element"],
"meta": {
"allowedIn": ["bpmn:UserTask"]
},
"properties": [
{
"name": "value",
"type": "Boolean",
"isBody": true
}
]
}
],
"emumerations": []

2
src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="process-panel__container" :style="{ width: `${width}px` }">
<div class="process-panel__container" :style="{ width: `${width}px`, maxHeight: '600px' }">
<el-collapse v-model="activeTab" v-if="isReady">
<el-collapse-item name="base">
<!-- class="panel-tab__title" -->

3
src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue
View File

@ -152,6 +152,9 @@ watch(
handleKeyUpdate(props.model.key)
handleNameUpdate(props.model.name)
}
},
{
immediate: true
}
)

35
src/components/bpmnProcessDesigner/package/penal/custom-config/components/UserTaskCustomConfig.vue
View File

@ -5,6 +5,7 @@
4. 操作按钮
5. 字段权限
6. 审批类型
7. 是否需要签名
-->
<template>
<div>
@ -161,6 +162,16 @@
</el-radio-group>
</div>
</div>
<el-divider content-position="left">是否需要签名</el-divider>
<el-form-item prop="signEnable">
<el-switch v-model="signEnable.value" active-text="是" inactive-text="否" />
</el-form-item>
<el-divider content-position="left">审批意见</el-divider>
<el-form-item prop="reasonRequire">
<el-switch v-model="reasonRequire.value" active-text="必填" inactive-text="非必填" />
</el-form-item>
</div>
</template>
@ -218,6 +229,12 @@ const { formType, fieldsPermissionConfig, getNodeConfigFormFields } = useFormFie
// 审批类型
const approveType = ref({ value: ApproveType.USER })
// 是否需要签名
const signEnable = ref({ value: false })
// 审批意见
const reasonRequire = ref({ value: false })
const elExtensionElements = ref()
const otherExtensions = ref()
const bpmnElement = ref()
@ -311,6 +328,16 @@ const resetCustomConfigList = () => {
})
}
// 是否需要签名
signEnable.value =
elExtensionElements.value.values?.filter((ex) => ex.$type === `${prefix}:SignEnable`)?.[0] ||
bpmnInstances().moddle.create(`${prefix}:SignEnable`, { value: false })
// 审批意见
reasonRequire.value =
elExtensionElements.value.values?.filter((ex) => ex.$type === `${prefix}:ReasonRequire`)?.[0] ||
bpmnInstances().moddle.create(`${prefix}:ReasonRequire`, { value: false })
// 保留剩余扩展元素，便于后面更新该元素对应属性
otherExtensions.value =
elExtensionElements.value.values?.filter(
@ -322,7 +349,9 @@ const resetCustomConfigList = () => {
ex.$type !== `${prefix}:AssignEmptyUserIds` &&
ex.$type !== `${prefix}:ButtonsSetting` &&
ex.$type !== `${prefix}:FieldsPermission` &&
ex.$type !== `${prefix}:ApproveType`
ex.$type !== `${prefix}:ApproveType` &&
ex.$type !== `${prefix}:SignEnable` &&
ex.$type !== `${prefix}:ReasonRequire`
) ?? []
// 更新元素扩展属性，避免后续报错
@ -373,7 +402,9 @@ const updateElementExtensions = () => {
assignEmptyUserIdsEl.value,
approveType.value,
...buttonsSettingEl.value,
...fieldsPermissionEl.value
...fieldsPermissionEl.value,
signEnable.value,
reasonRequire.value
]
})
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {

32
src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue
View File

@ -192,6 +192,16 @@
<!-- 选择弹窗 -->
<ProcessExpressionDialog ref="processExpressionDialogRef" @select="selectProcessExpression" />
</el-form-item>
<el-form-item label="跳过表达式" prop="skipExpression">
<el-input
type="textarea"
v-model="userTaskForm.skipExpression"
clearable
style="width: 100%"
@change="updateSkipExpression"
/>
</el-form-item>
</el-form>
</template>
@ -220,7 +230,8 @@ const props = defineProps({
const prefix = inject('prefix')
const userTaskForm = ref({
candidateStrategy: undefined, // 分配规则
candidateParam: [] // 分配选项
candidateParam: [], // 分配选项
skipExpression: '' // 跳过表达式
})
const bpmnElement = ref()
const bpmnInstances = () => (window as any)?.bpmnInstances
@ -311,6 +322,13 @@ const resetTaskForm = () => {
(ex) => ex.$type !== `${prefix}:CandidateStrategy` && ex.$type !== `${prefix}:CandidateParam`
) ?? []
// 跳过表达式
if (businessObject.skipExpression != undefined) {
userTaskForm.value.skipExpression = businessObject.skipExpression
} else {
userTaskForm.value.skipExpression = ''
}
// 改用通过extensionElements来存储数据
return
if (businessObject.candidateStrategy != undefined) {
@ -390,6 +408,18 @@ const updateElementTask = () => {
})
}
const updateSkipExpression = () => {
if (userTaskForm.value.skipExpression && userTaskForm.value.skipExpression !== '') {
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
skipExpression: userTaskForm.value.skipExpression
})
} else {
bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
skipExpression: null
})
}
}
// 打开监听器弹窗
const processExpressionDialogRef = ref()
const openProcessExpressionDialog = async () => {

14
src/components/bpmnProcessDesigner/package/theme/process-designer.scss
View File

@ -1,6 +1,4 @@
@use 'bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css';
@use 'bpmn-js-token-simulation/assets/css/font-awesome.min.css';
@use 'bpmn-js-token-simulation/assets/css/normalize.css';
// 边框被 token-simulation 样式覆盖了
.djs-palette {
@ -97,12 +95,12 @@
box-sizing: border-box;
}
}
svg {
width: 100%;
height: 100%;
min-height: 100%;
overflow: hidden;
}
// svg {
// width: 100%;
// height: 100%;
// min-height: 100%;
// overflow: hidden;
// }
}
}

21
src/directives/permission/hasPermi.ts
View File

@ -5,18 +5,10 @@ const { t } = useI18n() // 国际化
export function hasPermi(app: App<Element>) {
app.directive('hasPermi', (el, binding) => {
const { wsCache } = useCache()
const { value } = binding
const all_permission = '*:*:*'
const userInfo = wsCache.get(CACHE_KEY.USER)
const permissions = userInfo?.permissions || []
if (value && value instanceof Array && value.length > 0) {
const permissionFlag = value
const hasPermissions = permissions.some((permission: string) => {
return all_permission === permission || permissionFlag.includes(permission)
})
const hasPermissions = hasPermission(value)
if (!hasPermissions) {
el.parentNode && el.parentNode.removeChild(el)
@ -26,3 +18,14 @@ export function hasPermi(app: App<Element>) {
}
})
}
export const hasPermission = (permission: string[]) => {
const { wsCache } = useCache()
const all_permission = '*:*:*'
const userInfo = wsCache.get(CACHE_KEY.USER)
const permissions = userInfo?.permissions || []
return permissions.some((p: string) => {
return all_permission === p || permission.includes(p)
})
}

5
src/layout/components/Footer/src/Footer.vue
View File

@ -12,6 +12,9 @@ const prefixCls = getPrefixCls('footer')
const appStore = useAppStore()
const title = computed(() => appStore.getTitle)
// 添加当前年份计算属性
const currentYear = computed(() => new Date().getFullYear())
</script>
<template>
@ -19,6 +22,6 @@ const title = computed(() => appStore.getTitle)
:class="prefixCls"
class="h-[var(--app-footer-height)] bg-[var(--app-content-bg-color)] text-center leading-[var(--app-footer-height)] text-[var(--el-text-color-placeholder)] dark:bg-[var(--el-bg-color)] overflow-hidden"
>
<span class="text-14px">Copyright ©2022-{{ title }}</span>
<span class="text-14px">Copyright ©{{ currentYear }} {{ title }}</span>
</div>
</template>

108
src/layout/components/TagsView/src/TagsView.vue
View File

@ -12,6 +12,10 @@ import { useDesign } from '@/hooks/web/useDesign'
import { useTemplateRefsList } from '@vueuse/core'
import { ElScrollbar } from 'element-plus'
import { useScrollTo } from '@/hooks/event/useScrollTo'
import { useTagsView } from '@/hooks/web/useTagsView'
import { cloneDeep } from 'lodash-es'
defineOptions({ name: 'TagsView' })
const { getPrefixCls } = useDesign()
@ -19,7 +23,9 @@ const prefixCls = getPrefixCls('tags-view')
const { t } = useI18n()
const { currentRoute, push, replace } = useRouter()
const { currentRoute, push } = useRouter()
const { closeAll, closeLeft, closeRight, closeOther, closeCurrent, refreshPage } = useTagsView()
const permissionStore = usePermissionStore()
@ -31,6 +37,10 @@ const visitedViews = computed(() => tagsViewStore.getVisitedViews)
const affixTagArr = ref<RouteLocationNormalizedLoaded[]>([])
const selectedTag = computed(() => tagsViewStore.getSelectedTag)
const setSelectTag = tagsViewStore.setSelectedTag
const appStore = useAppStore()
const tagsViewImmerse = computed(() => appStore.getTagsViewImmerse)
@ -45,66 +55,30 @@ const initTags = () => {
for (const tag of unref(affixTagArr)) {
// Must have tag name
if (tag.name) {
tagsViewStore.addVisitedView(tag)
tagsViewStore.addVisitedView(cloneDeep(tag))
}
}
}
const selectedTag = ref<RouteLocationNormalizedLoaded>()
// 新增tag
const addTags = () => {
const { name } = unref(currentRoute)
if (name) {
selectedTag.value = unref(currentRoute)
setSelectTag(unref(currentRoute))
tagsViewStore.addView(unref(currentRoute))
}
return false
}
// 关闭选中的tag
const closeSelectedTag = (view: RouteLocationNormalizedLoaded) => {
if (view?.meta?.affix) return
tagsViewStore.delView(view)
if (isActive(view)) {
toLastView()
}
}
// 关闭全部
const closeAllTags = () => {
tagsViewStore.delAllViews()
toLastView()
}
// 关闭其它
const closeOthersTags = () => {
tagsViewStore.delOthersViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
}
// 重新加载
const refreshSelectedTag = async (view?: RouteLocationNormalizedLoaded) => {
if (!view) return
tagsViewStore.delCachedView()
const { path, query } = view
await nextTick()
replace({
path: '/redirect' + path,
query: query
closeCurrent(view, () => {
if (isActive(view)) {
toLastView()
}
})
}
// 关闭左侧
const closeLeftTags = () => {
tagsViewStore.delLeftViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
}
// 关闭右侧
const closeRightTags = () => {
tagsViewStore.delRightViews(unref(selectedTag) as RouteLocationNormalizedLoaded)
}
// 跳转到最后一个
// 去最后一个
const toLastView = () => {
const visitedViews = tagsViewStore.getVisitedViews
const latestView = visitedViews.slice(-1)[0]
@ -118,11 +92,38 @@ const toLastView = () => {
addTags()
return
}
// TODO: You can set another route
push('/')
// You can set another route
push(permissionStore.getAddRouters[0].path)
}
}
// 关闭全部
const closeAllTags = () => {
closeAll(() => {
toLastView()
})
}
// 关闭其它
const closeOthersTags = () => {
closeOther()
}
// 重新加载
const refreshSelectedTag = async (view?: RouteLocationNormalizedLoaded) => {
refreshPage(view)
}
// 关闭左侧
const closeLeftTags = () => {
closeLeft()
}
// 关闭右侧
const closeRightTags = () => {
closeRight()
}
// 滚动到选中的tag
const moveToCurrentTag = async () => {
await nextTick()
@ -209,13 +210,14 @@ const isActive = (route: RouteLocationNormalizedLoaded): boolean => {
// 所有右键菜单组件的元素
const itemRefs = useTemplateRefsList<ComponentRef<typeof ContextMenu & ContextMenuExpose>>()
// 右键菜单装填改变的时候
// 右键菜单状态改变的时候
const visibleChange = (visible: boolean, tagItem: RouteLocationNormalizedLoaded) => {
if (visible) {
for (const v of unref(itemRefs)) {
const elDropdownMenuRef = v.elDropdownMenuRef
if (tagItem.fullPath !== v.tagItem.fullPath) {
elDropdownMenuRef?.handleClose()
setSelectTag(tagItem)
}
}
}
@ -243,7 +245,17 @@ const move = (to: number) => {
start()
}
onMounted(() => {
const canShowIcon = (item: RouteLocationNormalizedLoaded) => {
if (
(item?.matched?.[1]?.meta?.icon && unref(tagsViewIcon)) ||
(item?.meta?.affix && unref(tagsViewIcon) && item?.meta?.icon)
) {
return true
}
return false
}
onBeforeMount(() => {
initTags()
addTags()
})

2
src/layout/components/useRenderLayout.tsx
View File

@ -197,7 +197,7 @@ export const useRenderLayout = () => {
`${prefixCls}-content-scrollbar`,
{
'!h-[calc(100%-var(--tags-view-height))] mt-[calc(var(--tags-view-height))]':
fixedHeader.value
fixedHeader.value && tagsView.value
}
]}
>

5
src/locales/en.ts
View File

@ -140,7 +140,10 @@ export default {
btnQRCode: 'QR code sign in',
qrcode: 'Scan the QR code to log in',
btnRegister: 'Sign up',
SmsSendMsg: 'code has been sent'
SmsSendMsg: 'code has been sent',
resetPassword: "Reset Password",
resetPasswordSuccess: "Reset Password Success",
invalidTenantName:"Invalid Tenant Name"
},
captcha: {
verification: 'Please complete security verification',

5
src/locales/zh-CN.ts
View File

@ -141,7 +141,10 @@ export default {
btnQRCode: '二维码登录',
qrcode: '扫描二维码登录',
btnRegister: '注册',
SmsSendMsg: '验证码已发送'
SmsSendMsg: '验证码已发送',
resetPassword: "重置密码",
resetPasswordSuccess: "重置密码成功",
invalidTenantName: "无效的租户名称"
},
captcha: {
verification: '请完成安全验证',

3
src/router/modules/remaining.ts
View File

@ -344,7 +344,8 @@ const remainingRouter: AppRouteRecordRaw[] = [
}
},
{
path: 'manager/model/update/:id',
// TODO @zws：1）建议，在加一个路由。然后标题是“复制流程”，这样体验会好点；2）复制出来的数据，在名字前面，加“副本 ”，和钉钉保持一致！
path: 'manager/model/:type/:id',
component: () => import('@/views/bpm/model/form/index.vue'),
name: 'BpmModelUpdate',
meta: {

26
src/store/modules/tagsView.ts
View File

@ -4,16 +4,19 @@ import { getRawRoute } from '@/utils/routerHelper'
import { defineStore } from 'pinia'
import { store } from '../index'
import { findIndex } from '@/utils'
import { useUserStoreWithOut } from './user'
export interface TagsViewState {
visitedViews: RouteLocationNormalizedLoaded[]
cachedViews: Set<string>
selectedTag?: RouteLocationNormalizedLoaded
}
export const useTagsViewStore = defineStore('tagsView', {
state: (): TagsViewState => ({
visitedViews: [],
cachedViews: new Set()
cachedViews: new Set(),
selectedTag: undefined
}),
getters: {
getVisitedViews(): RouteLocationNormalizedLoaded[] {
@ -21,6 +24,9 @@ export const useTagsViewStore = defineStore('tagsView', {
},
getCachedViews(): string[] {
return Array.from(this.cachedViews)
},
getSelectedTag(): RouteLocationNormalizedLoaded | undefined {
return this.selectedTag
}
},
actions: {
@ -98,8 +104,12 @@ export const useTagsViewStore = defineStore('tagsView', {
},
// 删除所有tag
delAllVisitedViews() {
const userStore = useUserStoreWithOut()
// const affixTags = this.visitedViews.filter((tag) => tag.meta.affix)
this.visitedViews = []
this.visitedViews = userStore.getUser
? this.visitedViews.filter((tag) => tag?.meta?.affix)
: []
},
// 删除其他
delOthersViews(view: RouteLocationNormalizedLoaded) {
@ -145,6 +155,18 @@ export const useTagsViewStore = defineStore('tagsView', {
break
}
}
},
// 设置当前选中的 tag
setSelectedTag(tag: RouteLocationNormalizedLoaded) {
this.selectedTag = tag
},
setTitle(title: string, path?: string) {
for (const v of this.visitedViews) {
if (v.path === (path ?? this.selectedTag?.path)) {
v.meta.title = title
break
}
}
}
},
persist: false

29
src/utils/download.ts
View File

@ -33,6 +33,10 @@ const download = {
markdown: (data: Blob, fileName: string) => {
download0(data, fileName, 'text/markdown')
},
// 下载 Json 方法
json: (data: Blob, fileName: string) => {
download0(data, fileName, 'application/json')
},
// 下载图片（允许跨域）
image: ({
url,
@ -65,6 +69,31 @@ const download = {
a.download = 'image.png'
a.click()
}
},
base64ToFile: (base64: any, fileName: string) => {
// 将base64按照 , 进行分割 将前缀 与后续内容分隔开
const data = base64.split(',')
// 利用正则表达式 从前缀中获取图片的类型信息（image/png、image/jpeg、image/webp等）
const type = data[0].match(/:(.*?);/)[1]
// 从图片的类型信息中 获取具体的文件格式后缀（png、jpeg、webp）
const suffix = type.split('/')[1]
// 使用atob()对base64数据进行解码 结果是一个文件数据流 以字符串的格式输出
const bstr = window.atob(data[1])
// 获取解码结果字符串的长度
let n = bstr.length
// 根据解码结果字符串的长度创建一个等长的整形数字数组
// 但在创建时 所有元素初始值都为 0
const u8arr = new Uint8Array(n)
// 将整形数组的每个元素填充为解码结果字符串对应位置字符的UTF-16 编码单元
while (n--) {
// charCodeAt()：获取给定索引处字符对应的 UTF-16 代码单元
u8arr[n] = bstr.charCodeAt(n)
}
// 将File文件对象返回给方法的调用者
return new File([u8arr], `${fileName}.${suffix}`, {
type: type
})
}
}

3
src/utils/routerHelper.ts
View File

@ -73,7 +73,7 @@ export const generateRoute = (routes: AppCustomRouteRecordRaw[]): AppRouteRecord
noCache: !route.keepAlive,
alwaysShow:
route.children &&
route.children.length === 1 &&
route.children.length > 0 &&
(route.alwaysShow !== undefined ? route.alwaysShow : true)
} as any
// 特殊逻辑：如果后端配置的 MenuDO.component 包含 ?，则表示需要传递参数
@ -100,7 +100,6 @@ export const generateRoute = (routes: AppCustomRouteRecordRaw[]): AppRouteRecord
//处理顶级非目录路由
if (!route.children && route.parentId == 0 && route.component) {
data.component = Layout
data.meta = {}
data.name = toCamelCase(route.path, true) + 'Parent'
data.redirect = ''
meta.alwaysShow = true

4
src/views/Login/Login.vue
View File

@ -59,6 +59,8 @@
<RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
<!-- 三方登录 -->
<SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
<!-- 忘记密码 -->
<ForgetPasswordForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
</div>
</Transition>
</div>
@ -73,7 +75,7 @@ import { useAppStore } from '@/store/modules/app'
import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue } from './components'
import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue, ForgetPasswordForm } from './components'
defineOptions({ name: 'Login' })

278
src/views/Login/components/ForgetPasswordForm.vue Normal file
View File

@ -0,0 +1,278 @@
<template>
<el-form
v-show="getShow"
ref="formSmsResetPassword"
:model="resetPasswordData"
:rules="rules"
class="login-form"
label-position="top"
label-width="120px"
size="large"
>
<el-row style="margin-right: -10px; margin-left: -10px">
<!-- 租户名 -->
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item>
<LoginFormTitle style="width: 100%" />
</el-form-item>
</el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item v-if="resetPasswordData.tenantEnable === 'true'" prop="tenantName">
<el-input
v-model="resetPasswordData.tenantName"
:placeholder="t('login.tenantNamePlaceholder')"
:prefix-icon="iconHouse"
type="primary"
link
/>
</el-form-item>
</el-col>
<!-- 手机号 -->
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item prop="mobile">
<el-input
v-model="resetPasswordData.mobile"
:placeholder="t('login.mobileNumberPlaceholder')"
:prefix-icon="iconCellphone"
/>
</el-form-item>
</el-col>
<Verify
ref="verify"
:captchaType="captchaType"
:imgSize="{ width: '400px', height: '200px' }"
mode="pop"
@success="getSmsCode"
/>
<!-- 验证码 -->
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item prop="code">
<el-row :gutter="5" justify="space-between" style="width: 100%">
<el-col :span="24">
<el-input
v-model="resetPasswordData.code"
:placeholder="t('login.codePlaceholder')"
:prefix-icon="iconCircleCheck"
>
<template #append>
<span
v-if="mobileCodeTimer <= 0"
class="getMobileCode"
style="cursor: pointer"
@click="getCode"
>
{{ t('login.getSmsCode') }}
</span>
<span v-if="mobileCodeTimer > 0" class="getMobileCode" style="cursor: pointer">
{{ mobileCodeTimer }}秒后可重新获取
</span>
</template>
</el-input>
<!-- </el-button> -->
</el-col>
</el-row>
</el-form-item>
</el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item prop="password">
<InputPassword
v-model="resetPasswordData.password"
:placeholder="t('login.passwordPlaceholder')"
style="width: 100%"
strength="true"
/>
</el-form-item>
</el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item prop="check_password">
<InputPassword
v-model="resetPasswordData.check_password"
:placeholder="t('login.checkPassword')"
style="width: 100%"
strength="true"
/>
</el-form-item>
</el-col>
<!-- 登录按钮 / 返回按钮 -->
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item>
<XButton
:loading="loginLoading"
:title="t('login.resetPassword')"
class="w-[100%]"
type="primary"
@click="resetPassword()"
/>
</el-form-item>
</el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item>
<XButton
:loading="loginLoading"
:title="t('login.backLogin')"
class="w-[100%]"
@click="handleBackLogin()"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script lang="ts" setup>
import type { RouteLocationNormalizedLoaded } from 'vue-router'
import { useIcon } from '@/hooks/web/useIcon'
import { sendSmsCode, smsResetPassword } from '@/api/login'
import LoginFormTitle from './LoginFormTitle.vue'
import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
import { ElLoading } from 'element-plus'
import * as authUtil from '@/utils/auth'
import * as LoginApi from '@/api/login'
defineOptions({ name: 'ForgetPasswordForm' })
const verify = ref()
const { t } = useI18n()
const message = useMessage()
const { currentRoute, push } = useRouter()
const formSmsResetPassword = ref()
const loginLoading = ref(false)
const iconHouse = useIcon({ icon: 'ep:house' })
const iconCellphone = useIcon({ icon: 'ep:cellphone' })
const iconCircleCheck = useIcon({ icon: 'ep:circle-check' })
const { validForm } = useFormValid(formSmsResetPassword)
const { handleBackLogin, getLoginState, setLoginState } = useLoginState()
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD)
const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
const validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'))
} else if (value !== resetPasswordData.password) {
callback(new Error('两次输入密码不一致!'))
} else {
callback()
}
}
const rules = {
tenantName: [{ required: true, min: 2, max: 20, trigger: 'blur', message: '长度为4到16位' }],
mobile: [{ required: true, min: 11, max: 11, trigger: 'blur', message: '手机号长度为11位' }],
password: [
{
required: true,
min: 4,
max: 16,
validator: validatePass2,
trigger: 'blur',
message: '密码长度为4到16位'
}
],
check_password: [{ required: true, validator: validatePass2, trigger: 'blur' }],
code: [required]
}
const resetPasswordData = reactive({
captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
tenantName: '',
username: '',
password: '',
check_password: '',
mobile: '',
code: ''
})
const smsVO = reactive({
tenantName: '',
mobile: '',
captchaVerification: '',
scene: 23
})
const mobileCodeTimer = ref(0)
const redirect = ref<string>('')
// 获取验证码
const getCode = async () => {
// 情况一，未开启：则直接发送验证码
if (resetPasswordData.captchaEnable === 'false') {
await getSmsCode({})
} else {
// 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行发送验证码
// 弹出验证码
verify.value.show()
}
}
const getSmsCode = async (params) => {
if (resetPasswordData.tenantEnable === 'true') {
await getTenantId()
}
smsVO.captchaVerification = params.captchaVerification
smsVO.mobile = resetPasswordData.mobile
await sendSmsCode(smsVO).then(async () => {
message.success(t('login.SmsSendMsg'))
// 设置倒计时
mobileCodeTimer.value = 60
let msgTimer = setInterval(() => {
mobileCodeTimer.value = mobileCodeTimer.value - 1
if (mobileCodeTimer.value <= 0) {
clearInterval(msgTimer)
}
}, 1000)
})
}
watch(
() => currentRoute.value,
(route: RouteLocationNormalizedLoaded) => {
redirect.value = route?.query?.redirect as string
},
{
immediate: true
}
)
const getTenantId = async () => {
if (resetPasswordData.tenantEnable === 'true') {
const res = await LoginApi.getTenantIdByName(resetPasswordData.tenantName)
if (res == null) {
message.error(t('login.invalidTenantName'))
throw t('login.invalidTenantName')
}
authUtil.setTenantId(res)
}
}
// 重置密码
const resetPassword = async () => {
const data = await validForm()
if (!data) return
await getTenantId()
loginLoading.value = true
await smsResetPassword(resetPasswordData)
.then(async () => {
message.success(t('login.resetPasswordSuccess'))
setLoginState(LoginStateEnum.LOGIN)
})
.catch(() => {})
.finally(() => {
loginLoading.value = false
setTimeout(() => {
const loadingInstance = ElLoading.service()
loadingInstance.close()
}, 400)
})
}
</script>
<style lang="scss" scoped>
:deep(.anticon) {
&:hover {
color: var(--el-color-primary) !important;
}
}
.smsbtn {
margin-top: 33px;
}
</style>

8
src/views/Login/components/LoginForm.vue
View File

@ -59,7 +59,13 @@
</el-checkbox>
</el-col>
<el-col :offset="6" :span="12">
<el-link style="float: right" type="primary">{{ t('login.forgetPassword') }}</el-link>
<el-link
style="float: right"
type="primary"
@click="setLoginState(LoginStateEnum.RESET_PASSWORD)"
>
{{ t('login.forgetPassword') }}
</el-link>
</el-col>
</el-row>
</el-form-item>

3
src/views/Login/components/index.ts
View File

@ -4,5 +4,6 @@ import LoginFormTitle from './LoginFormTitle.vue'
import RegisterForm from './RegisterForm.vue'
import QrCodeForm from './QrCodeForm.vue'
import SSOLoginVue from './SSOLogin.vue'
import ForgetPasswordForm from './ForgetPasswordForm.vue'
export { LoginForm, MobileForm, LoginFormTitle, RegisterForm, QrCodeForm, SSOLoginVue }
export { LoginForm, MobileForm, LoginFormTitle, RegisterForm, QrCodeForm, SSOLoginVue, ForgetPasswordForm }

52
src/views/bpm/model/CategoryDraggableModel.vue
View File

@ -163,6 +163,15 @@
>
修改
</el-button>
<el-button
link
type="primary"
@click="openModelForm('copy', scope.row.id)"
v-hasPermi="['bpm:model:update']"
:disabled="!isManagerUser(scope.row)"
>
复制
</el-button>
<el-button
link
class="!ml-5px"
@ -194,6 +203,14 @@
>
{{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
</el-dropdown-item>
<el-dropdown-item
type="danger"
command="handleClean"
v-if="checkPermi(['bpm:model:clean'])"
:disabled="!isManagerUser(scope.row)"
>
清理
</el-dropdown-item>
<el-dropdown-item
type="danger"
command="handleDelete"
@ -226,13 +243,9 @@
</div>
</template>
</Dialog>
<!-- 表单弹窗：添加流程模型 -->
<ModelForm :categoryId="categoryInfo.code" ref="modelFormRef" @success="emit('success')" />
</template>
<script lang="ts" setup>
import ModelForm from './ModelForm.vue'
import { CategoryApi, CategoryVO } from '@/api/bpm/category'
import Sortable from 'sortablejs'
import { propTypes } from '@/utils/propTypes'
@ -245,6 +258,7 @@ import { checkPermi } from '@/utils/permission'
import { useUserStoreWithOut } from '@/store/modules/user'
import { useAppStore } from '@/store/modules/app'
import { cloneDeep } from 'lodash-es'
import { useTagsView } from '@/hooks/web/useTagsView'
defineOptions({ name: 'BpmModel' })
@ -276,6 +290,9 @@ const handleModelCommand = (command: string, row: any) => {
case 'handleChangeState':
handleChangeState(row)
break
case 'handleClean':
handleClean(row)
break
default:
break
}
@ -309,6 +326,19 @@ const handleDelete = async (row: any) => {
} catch {}
}
/** 清理按钮操作 */
const handleClean = async (row: any) => {
try {
// 清理的二次确认
await message.confirm('是否确认清理流程名字为"' + row.name + '"的数据项?')
// 发起清理
await ModelApi.cleanModel(row.id)
message.success('清理成功')
// 刷新列表
emit('success')
} catch {}
}
/** 更新状态操作 */
const handleChangeState = async (row: any) => {
const state = row.processDefinition.suspensionState
@ -466,15 +496,19 @@ const handleDeleteCategory = async () => {
}
/** 添加流程模型弹窗 */
const modelFormRef = ref()
const openModelForm = (type: string, id?: number) => {
const tagsView = useTagsView()
const openModelForm = async (type: string, id?: number) => {
if (type === 'create') {
push({ name: 'BpmModelCreate' })
await push({ name: 'BpmModelCreate' })
} else {
push({
await push({
name: 'BpmModelUpdate',
params: { id }
params: { id, type }
})
// 设置标题
if (type === 'copy') {
tagsView.setTitle('复制流程')
}
}
}

440
src/views/bpm/model/ModelForm.vue
View File

@ -1,440 +0,0 @@
<template>
<Dialog v-model="dialogVisible" :title="dialogTitle" width="600">
<el-form
ref="formRef"
v-loading="formLoading"
:model="formData"
:rules="formRules"
label-width="110px"
>
<el-form-item label="流程标识" prop="key">
<el-input v-model="formData.key" :disabled="!!formData.id" placeholder="请输入流标标识" />
<el-tooltip
v-if="!formData.id"
class="item"
content="新建后，流程标识不可修改！"
effect="light"
placement="top"
>
<i class="el-icon-question" style="padding-left: 5px"></i>
</el-tooltip>
<el-tooltip v-else class="item" content="流程标识不可修改！" effect="light" placement="top">
<i class="el-icon-question" style="padding-left: 5px"></i>
</el-tooltip>
</el-form-item>
<el-form-item label="流程名称" prop="name">
<el-input
v-model="formData.name"
:disabled="!!formData.id"
clearable
placeholder="请输入流程名称"
/>
</el-form-item>
<el-form-item label="流程分类" prop="category">
<el-select
v-model="formData.category"
clearable
placeholder="请选择流程分类"
style="width: 100%"
>
<el-option
v-for="category in categoryList"
:key="category.code"
:label="category.name"
:value="category.code"
/>
</el-select>
</el-form-item>
<el-form-item label="流程图标" prop="icon">
<UploadImg v-model="formData.icon" :limit="1" height="64px" width="64px" />
</el-form-item>
<el-form-item label="流程描述" prop="description">
<el-input v-model="formData.description" clearable type="textarea" />
</el-form-item>
<el-form-item label="流程类型" prop="type">
<el-radio-group v-model="formData.type">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_TYPE)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="表单类型" prop="formType">
<el-radio-group v-model="formData.formType">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_FORM_TYPE)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="formData.formType === 10" label="流程表单" prop="formId">
<el-select v-model="formData.formId" clearable style="width: 100%">
<el-option v-for="form in formList" :key="form.id" :label="form.name" :value="form.id" />
</el-select>
</el-form-item>
<el-form-item
v-if="formData.formType === 20"
label="表单提交路由"
prop="formCustomCreatePath"
>
<el-input
v-model="formData.formCustomCreatePath"
placeholder="请输入表单提交路由"
style="width: 330px"
/>
<el-tooltip
class="item"
content="自定义表单的提交路径，使用 Vue 的路由地址，例如说：bpm/oa/leave/create.vue"
effect="light"
placement="top"
>
<i class="el-icon-question" style="padding-left: 5px"></i>
</el-tooltip>
</el-form-item>
<el-form-item v-if="formData.formType === 20" label="表单查看地址" prop="formCustomViewPath">
<el-input
v-model="formData.formCustomViewPath"
placeholder="请输入表单查看的组件地址"
style="width: 330px"
/>
<el-tooltip
class="item"
content="自定义表单的查看组件地址，使用 Vue 的组件地址，例如说：bpm/oa/leave/detail.vue"
effect="light"
placement="top"
>
<i class="el-icon-question" style="padding-left: 5px"></i>
</el-tooltip>
</el-form-item>
<el-form-item label="是否可见" prop="visible">
<el-radio-group v-model="formData.visible">
<el-radio
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
:key="dict.value as string"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="谁可以发起" prop="startUserType">
<el-select
v-model="formData.startUserType"
placeholder="请选择谁可以发起"
@change="handleStartUserTypeChange"
>
<el-option label="全员" :value="0" />
<el-option label="指定人员" :value="1" />
<el-option label="均不可提交" :value="2" />
</el-select>
<div v-if="formData.startUserType === 1" class="mt-2 flex flex-wrap gap-2">
<div
v-for="user in selectedStartUsers"
:key="user.id"
class="bg-gray-100 h-35px rounded-3xl flex items-center pr-8px dark:color-gray-600 position-relative"
>
<el-avatar class="!m-5px" :size="28" v-if="user.avatar" :src="user.avatar" />
<el-avatar class="!m-5px" :size="28" v-else>
{{ user.nickname.substring(0, 1) }}
</el-avatar>
{{ user.nickname }}
<Icon
icon="ep:close"
class="ml-2 cursor-pointer hover:text-red-500"
@click="handleRemoveStartUser(user)"
/>
</div>
<el-button type="primary" link @click="openStartUserSelect">
<Icon icon="ep:plus" />选择人员
</el-button>
</div>
</el-form-item>
<el-form-item label="流程管理员" prop="managerUserType">
<el-select
v-model="formData.managerUserType"
placeholder="请选择流程管理员"
@change="handleManagerUserTypeChange"
>
<el-option label="全员" :value="0" />
<el-option label="指定人员" :value="1" />
<el-option label="均不可提交" :value="2" />
</el-select>
<div v-if="formData.managerUserType === 1" class="mt-2 flex flex-wrap gap-2">
<div
v-for="user in selectedManagerUsers"
:key="user.id"
class="bg-gray-100 h-35px rounded-3xl flex items-center pr-8px dark:color-gray-600 position-relative"
>
<el-avatar class="!m-5px" :size="28" v-if="user.avatar" :src="user.avatar" />
<el-avatar class="!m-5px" :size="28" v-else>
{{ user.nickname.substring(0, 1) }}
</el-avatar>
{{ user.nickname }}
<Icon
icon="ep:close"
class="ml-2 cursor-pointer hover:text-red-500"
@click="handleRemoveManagerUser(user)"
/>
</div>
<el-button type="primary" link @click="openManagerUserSelect">
<Icon icon="ep:plus" />选择人员
</el-button>
</div>
</el-form-item>
</el-form>
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
<UserSelectForm ref="userSelectFormRef" @confirm="handleUserSelectConfirm" />
</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
import { ElMessageBox } from 'element-plus'
import * as ModelApi from '@/api/bpm/model'
import * as FormApi from '@/api/bpm/form'
import { CategoryApi, CategoryVO } from '@/api/bpm/category'
import { BpmModelFormType, BpmModelType } from '@/utils/constants'
import { UserVO } from '@/api/system/user'
import * as UserApi from '@/api/system/user'
import { useUserStoreWithOut } from '@/store/modules/user'
import { FormVO } from '@/api/bpm/form'
defineOptions({ name: 'ModelForm' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const userStore = useUserStoreWithOut() // 用户信息缓存
const props = defineProps({
categoryId: propTypes.number
})
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData: any = ref({
id: undefined,
name: '',
key: '',
category: undefined,
icon: undefined,
description: '',
type: BpmModelType.BPMN,
formType: BpmModelFormType.NORMAL,
formId: '',
formCustomCreatePath: '',
formCustomViewPath: '',
visible: true,
startUserType: undefined,
managerUserType: undefined,
startUserIds: [],
managerUserIds: []
})
const formRules = reactive({
name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
category: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }],
icon: [{ required: true, message: '流程图标不能为空', trigger: 'blur' }],
type: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
formType: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
formId: [{ required: true, message: '流程表单不能为空', trigger: 'blur' }],
formCustomCreatePath: [{ required: true, message: '表单提交路由不能为空', trigger: 'blur' }],
formCustomViewPath: [{ required: true, message: '表单查看地址不能为空', trigger: 'blur' }],
visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
managerUserIds: [{ required: true, message: '流程管理员不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
const formList = ref<FormVO[]>([]) // 流程表单的下拉框的数据
const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
const userList = ref<UserVO[]>([]) // 用户列表
const selectedStartUsers = ref<UserVO[]>([]) // 已选择的发起人列表
const selectedManagerUsers = ref<UserVO[]>([]) // 已选择的管理员列表
const userSelectFormRef = ref() // 用户选择弹窗 ref
const currentSelectType = ref<'start' | 'manager'>('start') // 当前选择的是发起人还是管理员
/** 打开弹窗 */
const open = async (type: string, id?: string) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await ModelApi.getModel(id)
} finally {
formLoading.value = false
}
// 加载数据时，根据已有的用户ID列表初始化已选用户
if (formData.value.startUserIds?.length) {
formData.value.startUserType = 1
selectedStartUsers.value = userList.value.filter((user) =>
formData.value.startUserIds.includes(user.id)
)
}
if (formData.value.managerUserIds?.length) {
formData.value.managerUserType = 1
selectedManagerUsers.value = userList.value.filter((user) =>
formData.value.managerUserIds.includes(user.id)
)
}
} else {
formData.value.managerUserIds.push(userStore.getUser.id)
}
// 获得流程表单的下拉框的数据
formList.value = await FormApi.getFormSimpleList()
// 查询流程分类列表
categoryList.value = await CategoryApi.getCategorySimpleList()
// 查询用户列表
userList.value = await UserApi.getSimpleUserList()
if (props.categoryId) {
formData.value.category = props.categoryId
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
if (!formRef) return
const valid = await formRef.value.validate()
if (!valid) return
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as ModelApi.ModelVO
if (formType.value === 'create') {
await ModelApi.createModel(data)
// 提示，引导用户做后续的操作
await ElMessageBox.alert(
'<strong>新建模型成功！</strong>后续需要执行如下 2 个步骤：' +
'<div>1. 点击【设计流程】按钮，绘制流程图</div>' +
'<div>2. 点击【发布流程】按钮，完成流程的最终发布</div>' +
'另外，每次流程修改后，都需要点击【发布流程】按钮，才能正式生效！！！',
'重要提示',
{
dangerouslyUseHTMLString: true,
type: 'success'
}
)
} else {
await ModelApi.updateModel(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
name: '',
key: '',
category: undefined,
icon: undefined,
description: '',
type: BpmModelType.BPMN,
formType: BpmModelFormType.NORMAL,
formId: '',
formCustomCreatePath: '',
formCustomViewPath: '',
visible: true,
startUserType: undefined,
managerUserType: undefined,
startUserIds: [],
managerUserIds: []
}
formRef.value?.resetFields()
selectedStartUsers.value = []
selectedManagerUsers.value = []
}
/** 处理发起人类型变化 */
const handleStartUserTypeChange = (value: number) => {
if (value !== 1) {
selectedStartUsers.value = []
formData.value.startUserIds = []
}
}
/** 处理管理员类型变化 */
const handleManagerUserTypeChange = (value: number) => {
if (value !== 1) {
selectedManagerUsers.value = []
formData.value.managerUserIds = []
}
}
/** 打开发起人选择 */
const openStartUserSelect = () => {
currentSelectType.value = 'start'
userSelectFormRef.value.open(0, selectedStartUsers.value)
}
/** 打开管理员选择 */
const openManagerUserSelect = () => {
currentSelectType.value = 'manager'
userSelectFormRef.value.open(0, selectedManagerUsers.value)
}
/** 处理用户选择确认 */
const handleUserSelectConfirm = (_, users: UserVO[]) => {
if (currentSelectType.value === 'start') {
selectedStartUsers.value = users
formData.value.startUserIds = users.map((u) => u.id)
} else {
selectedManagerUsers.value = users
formData.value.managerUserIds = users.map((u) => u.id)
}
}
/** 移除发起人 */
const handleRemoveStartUser = (user: UserVO) => {
selectedStartUsers.value = selectedStartUsers.value.filter((u) => u.id !== user.id)
formData.value.startUserIds = formData.value.startUserIds.filter((id: number) => id !== user.id)
}
/** 移除管理员 */
const handleRemoveManagerUser = (user: UserVO) => {
selectedManagerUsers.value = selectedManagerUsers.value.filter((u) => u.id !== user.id)
formData.value.managerUserIds = formData.value.managerUserIds.filter(
(id: number) => id !== user.id
)
}
</script>
<style lang="scss" scoped>
.bg-gray-100 {
background-color: #f5f7fa;
transition: all 0.3s;
&:hover {
background-color: #e6e8eb;
}
.ep-close {
font-size: 14px;
color: #909399;
transition: color 0.3s;
&:hover {
color: #f56c6c;
}
}
}
</style>

202
src/views/bpm/model/editor/index.vue
View File

@ -12,10 +12,12 @@
:additionalModel="controlForm.additionalModel"
:model="model"
@save="save"
:process-id="modelKey"
:process-name="modelName"
/>
<!-- 流程属性器，负责编辑每个流程节点的属性 -->
<MyProcessPenal
v-if="isModelerReady && modeler"
v-if="modeler"
key="penal"
:bpmnModeler="modeler"
:prefix="controlForm.prefix"
@ -37,8 +39,8 @@ defineOptions({ name: 'BpmModelEditor' })
const props = defineProps<{
modelId?: string
modelKey?: string
modelName?: string
modelKey: string
modelName: string
value?: string
}>()
@ -51,10 +53,13 @@ const formType = ref(20)
provide('formFields', formFields)
provide('formType', formType)
const xmlString = ref<string>('') // BPMN XML
// 注入流程数据
const xmlString = inject('processData') as Ref
// 注入模型数据
const modelData = inject('modelData') as Ref
const modeler = shallowRef() // BPMN Modeler
const processDesigner = ref()
const isModelerReady = ref(false)
const controlForm = ref({
simulation: true,
labelEditing: false,
@ -65,154 +70,26 @@ const controlForm = ref({
})
const model = ref<ModelApi.ModelVO>() // 流程模型的信息
// 初始化 bpmnInstances
const initBpmnInstances = () => {
if (!modeler.value) return false
try {
const instances = {
modeler: modeler.value,
modeling: modeler.value.get('modeling'),
moddle: modeler.value.get('moddle'),
eventBus: modeler.value.get('eventBus'),
bpmnFactory: modeler.value.get('bpmnFactory'),
elementFactory: modeler.value.get('elementFactory'),
elementRegistry: modeler.value.get('elementRegistry'),
replace: modeler.value.get('replace'),
selection: modeler.value.get('selection')
}
// 检查所有实例是否都存在
return Object.values(instances).every((instance) => instance)
} catch (error) {
console.error('初始化 bpmnInstances 失败:', error)
return false
}
}
/** 初始化 modeler */
const initModeler = async (item) => {
try {
modeler.value = item
// 等待 modeler 初始化完成
await nextTick()
// 确保 modeler 的所有实例都已经准备好
if (initBpmnInstances()) {
isModelerReady.value = true
emit('init-finished')
// 初始化完成后，设置初始值
if (props.modelId) {
// 编辑模式
const data = await ModelApi.getModel(props.modelId)
model.value = {
...data,
bpmnXml: undefined // 清空 bpmnXml 属性
}
xmlString.value = data.bpmnXml || getDefaultBpmnXml(data.key, data.name)
} else if (props.modelKey && props.modelName) {
// 新建模式
xmlString.value = props.value || getDefaultBpmnXml(props.modelKey, props.modelName)
model.value = {
key: props.modelKey,
name: props.modelName
} as ModelApi.ModelVO
}
// 导入XML并刷新视图
await nextTick()
try {
await modeler.value.importXML(xmlString.value)
if (processDesigner.value?.refresh) {
processDesigner.value.refresh()
}
} catch (error) {
console.error('导入XML失败:', error)
}
} else {
console.error('modeler 实例未完全初始化')
}
} catch (error) {
console.error('初始化 modeler 失败:', error)
}
}
/** 获取默认的BPMN XML */
const getDefaultBpmnXml = (key: string, name: string) => {
return `<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:xsd="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.activiti.org/processdef">
<process id="${key}" name="${name}" isExecutable="true" />
<bpmndi:BPMNDiagram id="BPMNDiagram">
<bpmndi:BPMNPlane id="${key}_di" bpmnElement="${key}" />
</bpmndi:BPMNDiagram>
</definitions>`
const initModeler = async (item: any) => {
//先初始化模型数据
model.value = modelData.value
modeler.value = item
}
/** 添加/修改模型 */
const save = async (bpmnXml: string) => {
try {
xmlString.value = bpmnXml
if (props.modelId) {
// 编辑模式
const data = {
...model.value,
bpmnXml: bpmnXml
} as unknown as ModelApi.ModelVO
await ModelApi.updateModelBpmn(data)
emit('success')
} else {
// 新建模式，直接返回XML
emit('success', bpmnXml)
}
emit('success', bpmnXml)
} catch (error) {
console.error('保存失败:', error)
message.error('保存失败')
}
}
// 监听 key、name 和 value 的变化
watch(
[() => props.modelKey, () => props.modelName, () => props.value],
async ([newKey, newName, newValue]) => {
if (!props.modelId && isModelerReady.value) {
let shouldRefresh = false
if (newKey && newName) {
const newXml = newValue || getDefaultBpmnXml(newKey, newName)
if (newXml !== xmlString.value) {
xmlString.value = newXml
shouldRefresh = true
}
model.value = {
...model.value,
key: newKey,
name: newName
} as ModelApi.ModelVO
} else if (newValue && newValue !== xmlString.value) {
xmlString.value = newValue
shouldRefresh = true
}
if (shouldRefresh) {
// 确保更新后重新渲染
await nextTick()
if (processDesigner.value?.refresh) {
try {
await modeler.value?.importXML(xmlString.value)
processDesigner.value.refresh()
} catch (error) {
console.error('导入XML失败:', error)
}
}
}
}
},
{ deep: true }
)
// 在组件卸载时清理
onBeforeUnmount(() => {
isModelerReady.value = false
modeler.value = null
// 清理全局实例
const w = window as any
@ -220,55 +97,6 @@ onBeforeUnmount(() => {
w.bpmnInstances = null
}
})
/** 获取 XML 字符串 */
const saveXML = async () => {
if (!modeler.value) {
return { xml: xmlString.value }
}
try {
const result = await modeler.value.saveXML({ format: true })
xmlString.value = result.xml
return result
} catch (error) {
console.error('获取XML失败:', error)
return { xml: xmlString.value }
}
}
/** 获取SVG字符串 */
const saveSVG = async () => {
if (!modeler.value) {
return { svg: undefined }
}
try {
return await modeler.value.saveSVG()
} catch (error) {
console.error('获取SVG失败:', error)
return { svg: undefined }
}
}
/** 刷新视图 */
const refresh = async () => {
if (processDesigner.value?.refresh && modeler.value) {
try {
await modeler.value.importXML(xmlString.value)
processDesigner.value.refresh()
} catch (error) {
console.error('刷新视图失败:', error)
}
}
}
// 暴露必要的属性和方法给父组件
defineExpose({
modeler,
isModelerReady,
saveXML,
saveSVG,
refresh
})
</script>
<style lang="scss">
.process-panel__container {

78
src/views/bpm/model/form/BasicInfo.vue
View File

@ -62,7 +62,7 @@
<el-radio-group v-model="modelData.visible">
<el-radio
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
:key="dict.value"
:key="dict.value as string"
:value="dict.value"
>
{{ dict.label }}
@ -77,7 +77,6 @@
>
<el-option label="全员" :value="0" />
<el-option label="指定人员" :value="1" />
<el-option label="均不可提交" :value="2" />
</el-select>
<div v-if="modelData.startUserType === 1" class="mt-2 flex flex-wrap gap-2">
<div
@ -97,21 +96,12 @@
/>
</div>
<el-button type="primary" link @click="openStartUserSelect">
<Icon icon="ep:plus" />选择人员
<Icon icon="ep:plus" /> 选择人员
</el-button>
</div>
</el-form-item>
<el-form-item label="流程管理员" prop="managerUserType" class="mb-20px">
<el-select
v-model="modelData.managerUserType"
placeholder="请选择流程管理员"
@change="handleManagerUserTypeChange"
>
<el-option label="全员" :value="0" />
<el-option label="指定人员" :value="1" />
<el-option label="均不可提交" :value="2" />
</el-select>
<div v-if="modelData.managerUserType === 1" class="mt-2 flex flex-wrap gap-2">
<el-form-item label="流程管理员" prop="managerUserIds" class="mb-20px">
<div class="flex flex-wrap gap-2">
<div
v-for="user in selectedManagerUsers"
:key="user.id"
@ -142,14 +132,11 @@
<script lang="ts" setup>
import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
import { UserVO } from '@/api/system/user'
import { CategoryVO } from '@/api/bpm/category'
const props = defineProps({
modelValue: {
type: Object,
required: true
},
categoryList: {
type: Array,
type: Array as PropType<CategoryVO[]>,
required: true
},
userList: {
@ -158,8 +145,6 @@ const props = defineProps({
}
})
const emit = defineEmits(['update:modelValue'])
const formRef = ref()
const selectedStartUsers = ref<UserVO[]>([])
const selectedManagerUsers = ref<UserVO[]>([])
@ -177,27 +162,30 @@ const rules = {
}
// 创建本地数据副本
const modelData = computed({
get: () => props.modelValue,
set: (val) => emit('update:modelValue', val)
})
const modelData = defineModel<any>()
// 初始化选中的用户
watch(
() => props.modelValue,
() => modelData.value,
(newVal) => {
if (newVal.startUserIds?.length) {
selectedStartUsers.value = props.userList.filter((user: UserVO) =>
newVal.startUserIds.includes(user.id)
) as UserVO[]
} else {
selectedStartUsers.value = []
}
if (newVal.managerUserIds?.length) {
selectedManagerUsers.value = props.userList.filter((user: UserVO) =>
newVal.managerUserIds.includes(user.id)
) as UserVO[]
} else {
selectedManagerUsers.value = []
}
},
{ immediate: true }
{
immediate: true
}
)
/** 打开发起人选择 */
@ -215,58 +203,42 @@ const openManagerUserSelect = () => {
/** 处理用户选择确认 */
const handleUserSelectConfirm = (_, users: UserVO[]) => {
if (currentSelectType.value === 'start') {
selectedStartUsers.value = users
emit('update:modelValue', {
modelData.value = {
...modelData.value,
startUserIds: users.map((u) => u.id)
})
}
} else {
selectedManagerUsers.value = users
emit('update:modelValue', {
modelData.value = {
...modelData.value,
managerUserIds: users.map((u) => u.id)
})
}
}
}
/** 处理发起人类型变化 */
const handleStartUserTypeChange = (value: number) => {
if (value !== 1) {
selectedStartUsers.value = []
emit('update:modelValue', {
modelData.value = {
...modelData.value,
startUserIds: []
})
}
}
/** 处理管理员类型变化 */
const handleManagerUserTypeChange = (value: number) => {
if (value !== 1) {
selectedManagerUsers.value = []
emit('update:modelValue', {
...modelData.value,
managerUserIds: []
})
}
}
}
/** 移除发起人 */
const handleRemoveStartUser = (user: UserVO) => {
selectedStartUsers.value = selectedStartUsers.value.filter((u) => u.id !== user.id)
emit('update:modelValue', {
modelData.value = {
...modelData.value,
startUserIds: modelData.value.startUserIds.filter((id: number) => id !== user.id)
})
}
}
/** 移除管理员 */
const handleRemoveManagerUser = (user: UserVO) => {
selectedManagerUsers.value = selectedManagerUsers.value.filter((u) => u.id !== user.id)
emit('update:modelValue', {
modelData.value = {
...modelData.value,
managerUserIds: modelData.value.managerUserIds.filter((id: number) => id !== user.id)
})
}
}
/** 表单校验 */

17
src/views/bpm/model/form/ExtraSettings.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
<el-form ref="formRef" :model="modelData" label-width="120px" class="mt-20px">
<el-form-item class="mb-20px">
<template #label>
<el-text size="large" tag="b">提交人权限</el-text>
</template>
<el-checkbox v-model="modelData.allowCancelRunningProcess" label="允许撤销审批中的申请" />
<div class="ml-22px">
<el-text type="info"> 第一个审批节点通过后，提交人仍可撤销申请 </el-text>
</div>
</el-form-item>
</el-form>
</template>
<script setup lang="ts">
const modelData = defineModel<any>()
</script>

11
src/views/bpm/model/form/FormDesign.vue
View File

@ -70,25 +70,16 @@ import * as FormApi from '@/api/bpm/form'
import { setConfAndFields2 } from '@/utils/formCreate'
const props = defineProps({
modelValue: {
type: Object,
required: true
},
formList: {
type: Array,
required: true
}
})
const emit = defineEmits(['update:modelValue'])
const formRef = ref()
// 创建本地数据副本
const modelData = computed({
get: () => props.modelValue,
set: (val) => emit('update:modelValue', val)
})
const modelData = defineModel<any>()
// 表单预览数据
const formPreview = ref({

176
src/views/bpm/model/form/ProcessDesign.vue
View File

@ -6,10 +6,7 @@
:model-id="modelData.id"
:model-key="modelData.key"
:model-name="modelData.name"
:value="currentBpmnXml"
ref="bpmnEditorRef"
@success="handleDesignSuccess"
@init-finished="handleEditorInit"
/>
</template>
@ -21,10 +18,7 @@
:model-key="modelData.key"
:model-name="modelData.name"
:start-user-ids="modelData.startUserIds"
:value="currentSimpleModel"
ref="simpleEditorRef"
@success="handleDesignSuccess"
@init-finished="handleEditorInit"
/>
</template>
</template>
@ -34,137 +28,16 @@ import { BpmModelType } from '@/utils/constants'
import BpmModelEditor from '../editor/index.vue'
import SimpleModelDesign from '../../simple/SimpleModelDesign.vue'
const props = defineProps({
modelValue: {
type: Object,
required: true
}
})
const emit = defineEmits(['update:modelValue', 'success'])
const bpmnEditorRef = ref()
const simpleEditorRef = ref()
const isEditorInitialized = ref(false)
// 创建本地数据副本
const modelData = computed({
get: () => props.modelValue,
set: (val) => emit('update:modelValue', val)
})
const modelData = defineModel<any>()
// 保存当前的流程XML或数据
const currentBpmnXml = ref('')
const currentSimpleModel = ref('')
// 初始化或更新当前的XML数据
const initOrUpdateXmlData = () => {
if (modelData.value) {
if (modelData.value.type === BpmModelType.BPMN) {
currentBpmnXml.value = modelData.value.bpmnXml || ''
} else {
currentSimpleModel.value = modelData.value.simpleModel || ''
}
}
}
// 监听modelValue的变化，更新数据
watch(
() => props.modelValue,
(newVal) => {
if (newVal) {
if (newVal.type === BpmModelType.BPMN) {
if (newVal.bpmnXml && newVal.bpmnXml !== currentBpmnXml.value) {
currentBpmnXml.value = newVal.bpmnXml
// 如果编辑器已经初始化，刷新视图
if (isEditorInitialized.value && bpmnEditorRef.value?.refresh) {
nextTick(() => {
bpmnEditorRef.value.refresh()
})
}
}
} else {
if (newVal.simpleModel && newVal.simpleModel !== currentSimpleModel.value) {
currentSimpleModel.value = newVal.simpleModel
// 如果编辑器已经初始化，刷新视图
if (isEditorInitialized.value && simpleEditorRef.value?.refresh) {
nextTick(() => {
simpleEditorRef.value.refresh()
})
}
}
}
}
},
{ immediate: true, deep: true }
)
/** 编辑器初始化完成的回调 */
const handleEditorInit = async () => {
isEditorInitialized.value = true
// 等待下一个tick，确保编辑器已经准备好
await nextTick()
// 初始化完成后，设置初始值
if (modelData.value.type === BpmModelType.BPMN) {
if (modelData.value.bpmnXml) {
currentBpmnXml.value = modelData.value.bpmnXml
if (bpmnEditorRef.value?.refresh) {
await nextTick()
bpmnEditorRef.value.refresh()
}
}
} else {
if (modelData.value.simpleModel) {
currentSimpleModel.value = modelData.value.simpleModel
if (simpleEditorRef.value?.refresh) {
await nextTick()
simpleEditorRef.value.refresh()
}
}
}
}
/** 获取当前流程数据 */
const getProcessData = async () => {
try {
if (modelData.value.type === BpmModelType.BPMN) {
if (!bpmnEditorRef.value || !isEditorInitialized.value) {
return currentBpmnXml.value || undefined
}
const { xml } = await bpmnEditorRef.value.saveXML()
if (xml) {
currentBpmnXml.value = xml
return xml
}
} else {
if (!simpleEditorRef.value || !isEditorInitialized.value) {
return currentSimpleModel.value || undefined
}
const flowData = await simpleEditorRef.value.getCurrentFlowData()
if (flowData) {
currentSimpleModel.value = flowData
return flowData
}
}
return modelData.value.type === BpmModelType.BPMN
? currentBpmnXml.value
: currentSimpleModel.value
} catch (error) {
console.error('获取流程数据失败:', error)
return modelData.value.type === BpmModelType.BPMN
? currentBpmnXml.value
: currentSimpleModel.value
}
}
const processData = inject('processData') as Ref
/** 表单校验 */
const validate = async () => {
try {
// 获取最新的流程数据
const processData = await getProcessData()
if (!processData) {
if (!processData.value) {
throw new Error('请设计流程')
}
return true
@ -172,27 +45,19 @@ const validate = async () => {
throw error
}
}
/** 处理设计器保存成功 */
const handleDesignSuccess = async (data?: any) => {
if (data) {
if (modelData.value.type === BpmModelType.BPMN) {
currentBpmnXml.value = data
} else {
currentSimpleModel.value = data
}
// 创建新的对象以触发响应式更新
const newModelData = {
...modelData.value,
bpmnXml: modelData.value.type === BpmModelType.BPMN ? data : null,
simpleModel: modelData.value.type === BpmModelType.BPMN ? null : data
}
// 使用emit更新父组件的数据
await nextTick()
emit('update:modelValue', newModelData)
emit('success', data)
//更新表单的模型数据部分
modelData.value = newModelData
}
}
@ -200,36 +65,7 @@ const handleDesignSuccess = async (data?: any) => {
const showDesigner = computed(() => {
return Boolean(modelData.value?.key && modelData.value?.name)
})
// 组件创建时初始化数据
onMounted(() => {
initOrUpdateXmlData()
})
// 组件卸载前保存数据
onBeforeUnmount(async () => {
try {
// 获取并保存最新的流程数据
const data = await getProcessData()
if (data) {
// 创建新的对象以触发响应式更新
const newModelData = {
...modelData.value,
bpmnXml: modelData.value.type === BpmModelType.BPMN ? data : null,
simpleModel: modelData.value.type === BpmModelType.BPMN ? null : data
}
// 使用emit更新父组件的数据
await nextTick()
emit('update:modelValue', newModelData)
}
} catch (error) {
console.error('保存数据失败:', error)
}
})
defineExpose({
validate,
getProcessData
validate
})
</script>

187
src/views/bpm/model/form/index.vue
View File

@ -67,12 +67,12 @@
</div>
<!-- 第三步：流程设计 -->
<ProcessDesign
v-if="currentStep === 2"
v-model="formData"
ref="processDesignRef"
@success="handleDesignSuccess"
/>
<ProcessDesign v-if="currentStep === 2" v-model="formData" ref="processDesignRef" />
<!-- 第四步：更多设置 -->
<div v-if="currentStep === 3" class="mx-auto w-700px">
<ExtraSettings v-model="formData" ref="extraSettingsRef" />
</div>
</div>
</div>
</ContentWrap>
@ -83,7 +83,7 @@ import { useRoute, useRouter } from 'vue-router'
import { useMessage } from '@/hooks/web/useMessage'
import * as ModelApi from '@/api/bpm/model'
import * as FormApi from '@/api/bpm/form'
import { CategoryApi } from '@/api/bpm/category'
import { CategoryApi, CategoryVO } from '@/api/bpm/category'
import * as UserApi from '@/api/system/user'
import { useUserStoreWithOut } from '@/store/modules/user'
import { BpmModelFormType, BpmModelType } from '@/utils/constants'
@ -91,6 +91,7 @@ import BasicInfo from './BasicInfo.vue'
import FormDesign from './FormDesign.vue'
import ProcessDesign from './ProcessDesign.vue'
import { useTagsViewStore } from '@/store/modules/tagsView'
import ExtraSettings from './ExtraSettings.vue'
const router = useRouter()
const { delView } = useTagsViewStore() // 视图操作
@ -118,11 +119,13 @@ const validateProcess = async () => {
await processDesignRef.value?.validate()
}
const currentStep = ref(0) // 步骤控制
const currentStep = ref(-1) // 步骤控制。-1 用于，一开始全部不展示等当前页面数据初始化完成
const steps = [
{ title: '基本信息', validator: validateBasic },
{ title: '表单设计', validator: validateForm },
{ title: '流程设计', validator: validateProcess }
{ title: '流程设计', validator: validateProcess },
{ title: '更多设置', validator: null }
]
// 表单数据
@ -140,14 +143,20 @@ const formData: any = ref({
formCustomViewPath: '',
visible: true,
startUserType: undefined,
managerUserType: undefined,
startUserIds: [],
managerUserIds: []
managerUserIds: [],
allowCancelRunningProcess: true
})
//流程数据
const processData = ref<any>()
provide('processData', processData)
provide('modelData', formData)
// 数据列表
const formList = ref([])
const categoryList = ref([])
const categoryList = ref<CategoryVO[]>([])
const userList = ref<UserApi.UserVO[]>([])
/** 初始化数据 */
@ -156,8 +165,16 @@ const initData = async () => {
if (modelId) {
// 修改场景
formData.value = await ModelApi.getModel(modelId)
formData.value.startUserType = formData.value.startUserIds?.length > 0 ? 1 : 0
// 复制场景
if (route.params.type === 'copy') {
delete formData.value.id
formData.value.name += '副本'
formData.value.key += '_copy'
}
} else {
// 新增场景
formData.value.startUserType = 0 // 全体
formData.value.managerUserIds.push(userStore.getUser.id)
}
@ -167,59 +184,54 @@ const initData = async () => {
categoryList.value = await CategoryApi.getCategorySimpleList()
// 获取用户列表
userList.value = await UserApi.getSimpleUserList()
// 最终，设置 currentStep 切换到第一步
currentStep.value = 0
}
/** 根据类型切换流程数据 */
watch(
async () => formData.value.type,
() => {
if (formData.value.type === BpmModelType.BPMN) {
processData.value = formData.value.bpmnXml
} else if (formData.value.type === BpmModelType.SIMPLE) {
processData.value = formData.value.simpleModel
}
console.log('加载流程数据', processData.value)
},
{
immediate: true
}
)
/** 校验所有步骤数据是否完整 */
const validateAllSteps = async () => {
try {
// 基本信息校验
await basicInfoRef.value?.validate()
if (!formData.value.key || !formData.value.name || !formData.value.category) {
try {
await validateBasic()
} catch (error) {
currentStep.value = 0
throw new Error('请完善基本信息')
}
// 表单设计校验
await formDesignRef.value?.validate()
if (formData.value.formType === 10 && !formData.value.formId) {
currentStep.value = 1
throw new Error('请选择流程表单')
}
if (
formData.value.formType === 20 &&
(!formData.value.formCustomCreatePath || !formData.value.formCustomViewPath)
) {
try {
await validateForm()
} catch (error) {
currentStep.value = 1
throw new Error('请完善自定义表单信息')
}
// 流程设计校验
// 如果已经有流程数据，则不需要重新校验
if (!formData.value.bpmnXml && !formData.value.simpleModel) {
// 如果当前不在第三步，需要先保存当前步骤数据
if (currentStep.value !== 2) {
await steps[currentStep.value].validator()
// 切换到第三步
currentStep.value = 2
// 等待组件渲染完成
await nextTick()
}
// 校验流程设计
await processDesignRef.value?.validate()
const processData = await processDesignRef.value?.getProcessData()
if (!processData) {
throw new Error('请设计流程')
}
// 保存流程数据
if (formData.value.type === BpmModelType.BPMN) {
formData.value.bpmnXml = processData
formData.value.simpleModel = null
} else {
formData.value.bpmnXml = null
formData.value.simpleModel = processData
}
// 表单设计校验
try {
await validateProcess()
} catch (error) {
currentStep.value = 2
throw new Error('请设计流程')
}
return true
@ -239,20 +251,6 @@ const handleSave = async () => {
...formData.value
}
// 如果当前在第三步，获取最新的流程设计数据
if (currentStep.value === 2) {
const processData = await processDesignRef.value?.getProcessData()
if (processData) {
if (formData.value.type === BpmModelType.BPMN) {
modelData.bpmnXml = processData
modelData.simpleModel = null
} else {
modelData.bpmnXml = null
modelData.simpleModel = processData
}
}
}
if (formData.value.id) {
// 修改场景
await ModelApi.updateModel(modelData)
@ -308,20 +306,6 @@ const handleDeploy = async () => {
...formData.value
}
// 如果当前在第三步，获取最新的流程设计数据
if (currentStep.value === 2) {
const processData = await processDesignRef.value?.getProcessData()
if (processData) {
if (formData.value.type === BpmModelType.BPMN) {
modelData.bpmnXml = processData
modelData.simpleModel = null
} else {
modelData.bpmnXml = null
modelData.simpleModel = processData
}
}
}
// 先保存所有数据
if (formData.value.id) {
await ModelApi.updateModel(modelData)
@ -344,60 +328,25 @@ const handleDeploy = async () => {
/** 步骤切换处理 */
const handleStepClick = async (index: number) => {
try {
// 如果是切换到第三步（流程设计），需要校验key和name
if (index === 2) {
if (!formData.value.key || !formData.value.name) {
message.warning('请先填写流程标识和流程名称')
return
}
console.log('index', index)
if (index !== 0) {
await validateBasic()
}
// 保存当前步骤的数据
if (currentStep.value === 2) {
const processData = await processDesignRef.value?.getProcessData()
if (processData) {
if (formData.value.type === BpmModelType.BPMN) {
formData.value.bpmnXml = processData
formData.value.simpleModel = null
} else {
formData.value.bpmnXml = null
formData.value.simpleModel = processData
}
}
} else {
// 只有在向后切换时才进行校验
if (index > currentStep.value) {
if (typeof steps[currentStep.value].validator === 'function') {
await steps[currentStep.value].validator()
}
}
if (index !== 1) {
await validateForm()
}
if (index !== 2) {
await validateProcess()
}
// 切换步骤
currentStep.value = index
// 如果切换到流程设计步骤，等待组件渲染完成后刷新设计器
if (index === 2) {
await nextTick()
// 等待更长时间确保组件完全初始化
await new Promise(resolve => setTimeout(resolve, 200))
if (processDesignRef.value?.refresh) {
await processDesignRef.value.refresh()
}
}
} catch (error) {
console.error('步骤切换失败:', error)
message.warning('请先完善当前步骤必填信息')
}
}
/** 处理设计器保存成功 */
const handleDesignSuccess = (bpmnXml?: string) => {
if (bpmnXml) {
formData.value.bpmnXml = bpmnXml
}
}
/** 返回列表页 */
const handleBack = () => {
// 先删除当前页签

6
src/views/bpm/model/index.vue
View File

@ -85,8 +85,6 @@
</div>
</ContentWrap>
<!-- 表单弹窗：添加/修改流程 -->
<ModelForm ref="formRef" @success="getList" />
<!-- 表单弹窗：添加分类 -->
<CategoryForm ref="categoryFormRef" @success="getList" />
<!-- 弹窗：表单详情 -->
@ -99,7 +97,6 @@
import draggable from 'vuedraggable'
import { CategoryApi } from '@/api/bpm/category'
import * as ModelApi from '@/api/bpm/model'
import ModelForm from './ModelForm.vue'
import CategoryForm from '../category/CategoryForm.vue'
import { cloneDeep } from 'lodash-es'
import CategoryDraggableModel from './CategoryDraggableModel.vue'
@ -123,7 +120,6 @@ const handleQuery = () => {
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
if (type === 'create') {
push({ name: 'BpmModelCreate' })
@ -206,7 +202,7 @@ const getList = async () => {
}
/** 初始化 **/
onMounted(() => {
onActivated(() => {
getList()
})
</script>

126
src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
View File

@ -44,8 +44,26 @@
:rows="4"
/>
</el-form-item>
<el-form-item
v-if="runningTask.signEnable"
label="签名"
prop="signPicUrl"
ref="approveSignFormRef"
>
<el-button @click="signRef.open()">点击签名</el-button>
<el-image
class="w-90px h-40px ml-5px"
v-if="approveReasonForm.signPicUrl"
:src="approveReasonForm.signPicUrl"
:preview-src-list="[approveReasonForm.signPicUrl]"
/>
</el-form-item>
<el-form-item>
<el-button :disabled="formLoading" type="success" @click="handleAudit(true, approveFormRef)">
<el-button
:disabled="formLoading"
type="success"
@click="handleAudit(true, approveFormRef)"
>
{{ getButtonDisplayName(OperationButtonType.APPROVE) }}
</el-button>
<el-button @click="closePropover('approve', approveFormRef)"> 取消 </el-button>
@ -86,7 +104,11 @@
/>
</el-form-item>
<el-form-item>
<el-button :disabled="formLoading" type="danger" @click="handleAudit(false,rejectFormRef)">
<el-button
:disabled="formLoading"
type="danger"
@click="handleAudit(false, rejectFormRef)"
>
{{ getButtonDisplayName(OperationButtonType.REJECT) }}
</el-button>
<el-button @click="closePropover('reject', rejectFormRef)"> 取消 </el-button>
@ -471,6 +493,9 @@
<Icon :size="14" icon="ep:refresh" />&nbsp; 再次提交
</div>
</div>
<!-- 签名弹窗 -->
<SignDialog ref="signRef" @success="handleSignFinish" />
</template>
<script lang="ts" setup>
import { useUserStoreWithOut } from '@/store/modules/user'
@ -479,11 +504,13 @@ import * as TaskApi from '@/api/bpm/task'
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
import * as UserApi from '@/api/system/user'
import {
OperationButtonType,
OPERATION_BUTTON_NAME
OPERATION_BUTTON_NAME,
OperationButtonType
} from '@/components/SimpleProcessDesignerV2/src/consts'
import { BpmProcessInstanceStatus, BpmModelFormType } from '@/utils/constants'
import { BpmModelFormType, BpmProcessInstanceStatus } from '@/utils/constants'
import type { FormInstance, FormRules } from 'element-plus'
import SignDialog from './SignDialog.vue'
defineOptions({ name: 'ProcessInstanceBtnContainer' })
const router = useRouter() // 路由
@ -492,12 +519,12 @@ const message = useMessage() // 消息弹窗
const userId = useUserStoreWithOut().getUser.id // 当前登录的编号
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const props = defineProps< {
processInstance: any, // 流程实例信息
processDefinition: any, // 流程定义信息
userOptions: UserApi.UserVO[],
normalForm: any, // 流程表单 formCreate
normalFormApi: any, // 流程表单 formCreate Api
const props = defineProps<{
processInstance: any // 流程实例信息
processDefinition: any // 流程定义信息
userOptions: UserApi.UserVO[]
normalForm: any // 流程表单 formCreate
normalFormApi: any // 流程表单 formCreate Api
writableFields: string[] // 流程表单可以编辑的字段
}>()
@ -521,20 +548,29 @@ const approveForm = ref<any>({}) // 审批通过时，额外的补充信息
const approveFormFApi = ref<any>({}) // approveForms 的 fAPi
// 审批通过意见表单
const reasonRequire = ref()
const approveFormRef = ref<FormInstance>()
const signRef = ref()
const approveSignFormRef = ref()
const approveReasonForm = reactive({
reason: ''
reason: '',
signPicUrl: ''
})
const approveReasonRule = reactive<FormRules<typeof approveReasonForm>>({
reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
const approveReasonRule = computed(() => {
return {
reason: [{ required: reasonRequire.value, message: '审批意见不能为空', trigger: 'blur' }],
signPicUrl: [{ required: true, message: '签名不能为空', trigger: 'change' }]
}
})
// 拒绝表单
const rejectFormRef = ref<FormInstance>()
const rejectReasonForm = reactive({
reason: ''
})
const rejectReasonRule = reactive<FormRules<typeof rejectReasonForm>>({
reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
const rejectReasonRule = computed(() => {
return {
reason: [{ required: reasonRequire.value, message: '审批意见不能为空', trigger: 'blur' }]
}
})
// 抄送表单
@ -555,7 +591,7 @@ const transferForm = reactive({
})
const transferFormRule = reactive<FormRules<typeof transferForm>>({
assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }],
reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }]
})
// 委派表单
@ -566,7 +602,7 @@ const delegateForm = reactive({
})
const delegateFormRule = reactive<FormRules<typeof delegateForm>>({
delegateUserId: [{ required: true, message: '接收人不能为空', trigger: 'change' }],
reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }]
})
// 加签表单
@ -577,7 +613,7 @@ const addSignForm = reactive({
})
const addSignFormRule = reactive<FormRules<typeof addSignForm>>({
addSignUserIds: [{ required: true, message: '加签处理人不能为空', trigger: 'change' }],
reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }]
})
// 减签表单
@ -588,7 +624,7 @@ const deleteSignForm = reactive({
})
const deleteSignFormRule = reactive<FormRules<typeof deleteSignForm>>({
deleteSignTaskId: [{ required: true, message: '减签人员不能为空', trigger: 'change' }],
reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }]
})
// 退回表单
@ -608,7 +644,7 @@ const cancelForm = reactive({
cancelReason: ''
})
const cancelFormRule = reactive<FormRules<typeof cancelForm>>({
cancelReason: [{ required: true, message: '取消理由不能为空', trigger: 'blur' }],
cancelReason: [{ required: true, message: '取消理由不能为空', trigger: 'blur' }]
})
/** 监听 approveFormFApis，实现它对应的 form-create 初始化后，隐藏掉对应的表单提交按钮 */
@ -627,11 +663,11 @@ watch(
const openPopover = async (type: string) => {
if (type === 'approve') {
// 校验流程表单
const valid = await validateNormalForm();
if (!valid) {
const valid = await validateNormalForm()
if (!valid) {
message.warning('表单校验不通过，请先完善表单!!')
return;
}
return
}
}
if (type === 'return') {
// 获取退回节点
@ -652,7 +688,7 @@ const openPopover = async (type: string) => {
const closePropover = (type: string, formRef: FormInstance | undefined) => {
if (formRef) {
formRef.resetFields()
}
}
popOverVisible.value[type] = false
}
@ -664,14 +700,18 @@ const handleAudit = async (pass: boolean, formRef: FormInstance | undefined) =>
if (!formRef) return
await formRef.validate()
if (pass) {
// 获取修改的流程变量, 暂时只支持流程表单
const variables = getUpdatedProcessInstanceVaiables();
// 获取修改的流程变量, 暂时只支持流程表单
const variables = getUpdatedProcessInstanceVariables()
// 审批通过数据
const data = {
id: runningTask.value.id,
reason: approveReasonForm.reason,
variables // 审批通过, 把修改的字段值赋于流程实例变量
}
// 签名
if (runningTask.value.signEnable) {
data.signPicUrl = approveReasonForm.signPicUrl
}
// 多表单处理，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
// TODO 芋艿 任务有多表单这里要如何处理，会和可编辑的字段冲突
const formCreateApi = approveFormFApi.value
@ -684,10 +724,10 @@ const handleAudit = async (pass: boolean, formRef: FormInstance | undefined) =>
popOverVisible.value.approve = false
message.success('审批通过成功')
} else {
// 审批不通过数据
const data = {
// 审批不通过数据
const data = {
id: runningTask.value.id,
reason: rejectReasonForm.reason,
reason: rejectReasonForm.reason
}
await TaskApi.rejectTask(data)
popOverVisible.value.reject = false
@ -713,7 +753,7 @@ const handleCopy = async () => {
const data = {
id: runningTask.value.id,
reason: copyForm.copyReason,
copyUserIds:copyForm.copyUserIds
copyUserIds: copyForm.copyUserIds
}
await TaskApi.copyTask(data)
copyFormRef.value.resetFields()
@ -752,7 +792,6 @@ const handleTransfer = async () => {
const handleDelegate = async () => {
formLoading.value = true
try {
// 1.1 校验表单
if (!delegateFormRef.value) return
await delegateFormRef.value.validate()
@ -932,6 +971,7 @@ const loadTodoTask = (task: any) => {
approveForm.value = {}
approveFormFApi.value = {}
runningTask.value = task
reasonRequire.value = task?.reasonRequire ?? false
// 处理 approve 表单.
if (task && task.formId && task.formConf) {
const tempApproveForm = {}
@ -949,23 +989,29 @@ const validateNormalForm = async () => {
try {
await props.normalFormApi?.validate()
} catch {
valid = false;
valid = false
}
return valid;
return valid
} else {
return true;
return true
}
}
/** 从可以编辑的流程表单字段，获取需要修改的流程实例的变量 */
const getUpdatedProcessInstanceVaiables = ()=> {
const getUpdatedProcessInstanceVariables = () => {
const variables = {}
props.writableFields.forEach( (field) => {
const fieldValue = props.normalFormApi.getValue(field)
variables[field] = fieldValue;
props.writableFields.forEach((field) => {
variables[field] = props.normalFormApi.getValue(field)
})
return variables
}
/** 处理签名完成 */
const handleSignFinish = (url: string) => {
approveReasonForm.signPicUrl = url
approveSignFormRef.value.validate('change')
}
defineExpose({ loadTodoTask })
</script>

2
src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
View File

@ -128,7 +128,7 @@ const setSimpleModelNodeTaskStatus = (
simpleModel.type === NodeType.CONDITION_BRANCH_NODE ||
simpleModel.type === NodeType.PARALLEL_BRANCH_NODE ||
simpleModel.type === NodeType.INCLUSIVE_BRANCH_NODE ||
simpleModel.type === NodeType.ROUTE_BRANCH_NODE
simpleModel.type === NodeType.ROUTER_BRANCH_NODE
) {
// 网关节点。只有通过和未执行状态
if (finishedActivityIds.includes(simpleModel.id)) {

11
src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
View File

@ -123,6 +123,17 @@
>
审批意见：{{ task.reason }}
</div>
<div
v-if="task.signPicUrl && activity.nodeType === NodeType.USER_TASK_NODE"
class="text-#a5a5a5 text-13px mt-1 w-full bg-#f8f8fa p2 rounded-md"
>
签名：
<el-image
class="w-90px h-40px ml-5px"
:src="task.signPicUrl"
:preview-src-list="[task.signPicUrl]"
/>
</div>
</teleport>
</div>
<!-- 情况二：遍历每个审批节点下的【候选的】task 任务。例如说，1）依次审批，2）未来的审批任务等 -->

50
src/views/bpm/processInstance/detail/SignDialog.vue Normal file
View File

@ -0,0 +1,50 @@
<template>
<el-dialog v-model="signDialogVisible" title="签名" width="935">
<div class="position-relative">
<Vue3Signature class="b b-solid b-gray" ref="signature" w="900px" h="400px" />
<el-button
class="pos-absolute bottom-20px right-10px"
type="primary"
text
size="small"
@click="signature.clear()"
>
<Icon icon="ep:delete" class="mr-5px" />
清除
</el-button>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="signDialogVisible = false">取消</el-button>
<el-button type="primary" @click="submit"> 提交 </el-button>
</div>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import Vue3Signature from 'vue3-signature'
import * as FileApi from '@/api/infra/file'
import download from '@/utils/download'
const message = useMessage() // 消息弹窗
const signDialogVisible = ref(false)
const signature = ref()
const open = async () => {
signDialogVisible.value = true
}
defineExpose({ open })
const emits = defineEmits(['success'])
const submit = async () => {
message.success('签名上传中请稍等。。。')
const res = await FileApi.updateFile({
file: download.base64ToFile(signature.value.save('image/png'), '签名')
})
emits('success', res.data)
signDialogVisible.value = false
}
</script>
<style scoped></style>

124
src/views/bpm/simple/SimpleModelDesign.vue
View File

@ -4,9 +4,7 @@
:model-id="modelId"
:model-key="modelKey"
:model-name="modelName"
:value="currentValue"
@success="handleSuccess"
@init-finished="handleInit"
:start-user-ids="startUserIds"
ref="designerRef"
/>
@ -19,136 +17,22 @@ defineOptions({
name: 'SimpleModelDesign'
})
const props = defineProps<{
defineProps<{
modelId?: string
modelKey?: string
modelName?: string
value?: any
startUserIds?: number[]
}>()
const emit = defineEmits(['success', 'init-finished'])
const emit = defineEmits(['success'])
const designerRef = ref()
const isInitialized = ref(false)
const currentValue = ref('')
// 初始化或更新当前值
const initOrUpdateValue = async () => {
if (props.value) {
currentValue.value = props.value
// 如果设计器已经初始化，立即加载数据
if (isInitialized.value && designerRef.value) {
try {
await designerRef.value.loadProcessData(props.value)
await nextTick()
if (designerRef.value.refresh) {
await designerRef.value.refresh()
}
} catch (error) {
console.error('加载流程数据失败:', error)
}
}
}
}
// 监听属性变化
watch(
[() => props.modelKey, () => props.modelName, () => props.value],
async ([newKey, newName, newValue], [oldKey, oldName, oldValue]) => {
if (designerRef.value && isInitialized.value) {
try {
if (newKey && newName && (newKey !== oldKey || newName !== oldName)) {
await designerRef.value.updateModel(newKey, newName)
}
if (newValue && newValue !== oldValue) {
currentValue.value = newValue
await designerRef.value.loadProcessData(newValue)
await nextTick()
if (designerRef.value.refresh) {
await designerRef.value.refresh()
}
}
} catch (error) {
console.error('更新流程数据失败:', error)
}
}
},
{ deep: true, immediate: true }
)
// 初始化完成回调
const handleInit = async () => {
try {
isInitialized.value = true
emit('init-finished')
// 等待下一个tick，确保设计器已经准备好
await nextTick()
// 初始化完成后，设置初始值
if (props.modelKey && props.modelName) {
await designerRef.value.updateModel(props.modelKey, props.modelName)
}
if (props.value) {
currentValue.value = props.value
await designerRef.value.loadProcessData(props.value)
// 再次刷新确保数据正确加载
await nextTick()
if (designerRef.value.refresh) {
await designerRef.value.refresh()
}
}
} catch (error) {
console.error('初始化流程数据失败:', error)
}
}
// 修改成功回调
const handleSuccess = (data?: any) => {
console.warn('handleSuccess', data)
if (data && data !== currentValue.value) {
currentValue.value = data
console.info('handleSuccess', data)
if (data) {
emit('success', data)
}
}
/** 获取当前流程数据 */
const getCurrentFlowData = async () => {
try {
if (designerRef.value) {
const data = await designerRef.value.getCurrentFlowData()
if (data) {
currentValue.value = data
}
return data
}
return currentValue.value || undefined
} catch (error) {
console.error('获取流程数据失败:', error)
return currentValue.value || undefined
}
}
// 组件创建时初始化数据
onMounted(() => {
initOrUpdateValue()
})
// 组件卸载前保存数据
onBeforeUnmount(async () => {
try {
const data = await getCurrentFlowData()
if (data) {
emit('success', data)
}
} catch (error) {
console.error('保存数据失败:', error)
}
})
defineExpose({
getCurrentFlowData,
refresh: () => designerRef.value?.refresh?.()
})
</script>
<style lang="scss" scoped></style>

10
src/views/infra/build/index.vue
View File

@ -135,7 +135,8 @@ const makeTemplate = () => {
/** 复制 **/
const copy = async (text: string) => {
const { copy, copied, isSupported } = useClipboard({ source: text })
const textToCopy = JSON.stringify(text, null, 2)
const { copy, copied, isSupported } = useClipboard({ source: textToCopy })
if (!isSupported) {
message.error(t('common.copyError'))
} else {
@ -149,17 +150,18 @@ const copy = async (text: string) => {
/**
* 代码高亮
*/
const highlightedCode = (code) => {
const highlightedCode = (code: string) => {
// 处理语言和代码
let language = 'json'
if (formType.value === 2) {
language = 'xml'
}
// debugger
if (!isString(code)) {
code = JSON.stringify(code)
code = JSON.stringify(code, null, 2)
}
// 高亮
const result = hljs.highlight(language, code, true)
const result = hljs.highlight(code, { language: language, ignoreIllegals: true })
return result.value || '&nbsp;'
}

10
src/views/infra/file/index.vue
View File

@ -95,6 +95,9 @@
/>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button link type="primary" @click="copyToClipboard(scope.row.url)">
复制链接
</el-button>
<el-button
link
type="danger"
@ -172,6 +175,13 @@ const openForm = () => {
formRef.value.open()
}
/** 复制到剪贴板方法 */
const copyToClipboard = (text: string) => {
navigator.clipboard.writeText(text).then(() => {
message.success('复制成功')
})
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {

20
src/views/system/area/index.vue
View File

@ -16,6 +16,7 @@
<template #default="{ height, width }">
<!-- Virtualized Table 虚拟化表格：高性能，解决表格在大数据量下的卡顿问题 -->
<el-table-v2
v-loading="loading"
:columns="columns"
:data="list"
:width="width"
@ -31,7 +32,7 @@
<AreaForm ref="formRef" />
</template>
<script setup lang="tsx">
import type { Column } from 'element-plus'
import { Column } from 'element-plus'
import AreaForm from './AreaForm.vue'
import * as AreaApi from '@/api/system/area'
@ -40,7 +41,7 @@ defineOptions({ name: 'SystemArea' })
// 表格的 column 字段
const columns: Column[] = [
{
dataKey: 'id', // 需要渲染当前列的数据字段。例如说：{id:9527, name:'Mike'}，则填 id
dataKey: 'id', // 需要渲染当前列的数据字段
title: '编号', // 显示在单元格表头的文本
width: 400, // 当前列的宽度，必须设置
fixed: true, // 是否固定列
@ -52,14 +53,17 @@ const columns: Column[] = [
width: 200
}
]
// 表格的数据
const list = ref([])
const loading = ref(true) // 列表的加载中
const list = ref([]) // 表格的数据
/**
* 获得数据列表
*/
/** 获得数据列表 */
const getList = async () => {
list.value = await AreaApi.getAreaTree()
loading.value = true
try {
list.value = await AreaApi.getAreaTree()
} finally {
loading.value = false
}
}
/** 添加/修改操作 */

185
src/views/system/menu/index.vue
View File

@ -53,10 +53,6 @@
<Icon class="mr-5px" icon="ep:plus" />
新增
</el-button>
<el-button plain type="danger" @click="toggleExpandAll">
<Icon class="mr-5px" icon="ep:sort" />
展开/折叠
</el-button>
<el-button plain @click="refreshMenu">
<Icon class="mr-5px" icon="ep:refresh" />
刷新菜单缓存
@ -67,65 +63,22 @@
<!-- 列表 -->
<ContentWrap>
<el-table
v-if="refreshTable"
v-loading="loading"
:data="list"
:default-expand-all="isExpandAll"
row-key="id"
>
<el-table-column :show-overflow-tooltip="true" label="菜单名称" prop="name" width="250" />
<el-table-column align="center" label="图标" prop="icon" width="100">
<template #default="scope">
<Icon :icon="scope.row.icon" />
</template>
</el-table-column>
<el-table-column label="排序" prop="sort" width="60" />
<el-table-column :show-overflow-tooltip="true" label="权限标识" prop="permission" />
<el-table-column :show-overflow-tooltip="true" label="组件路径" prop="component" />
<el-table-column :show-overflow-tooltip="true" label="组件名称" prop="componentName" />
<el-table-column label="状态" prop="status">
<template #default="scope">
<el-switch
class="ml-4px"
v-model="scope.row.status"
v-hasPermi="['system:menu:update']"
:active-value="CommonStatusEnum.ENABLE"
:inactive-value="CommonStatusEnum.DISABLE"
:loading="menuStatusUpdating[scope.row.id]"
@change="(val) => handleStatusChanged(scope.row, val as number)"
<div style="height: 700px">
<!-- AutoResizer 自动调节大小 -->
<el-auto-resizer>
<template #default="{ height, width }">
<!-- Virtualized Table 虚拟化表格：高性能，解决表格在大数据量下的卡顿问题 -->
<el-table-v2
v-loading="loading"
:columns="columns"
:data="list"
:width="width"
:height="height"
expand-column-key="name"
/>
</template>
</el-table-column>
<el-table-column align="center" label="操作">
<template #default="scope">
<el-button
v-hasPermi="['system:menu:update']"
link
type="primary"
@click="openForm('update', scope.row.id)"
>
修改
</el-button>
<el-button
v-hasPermi="['system:menu:create']"
link
type="primary"
@click="openForm('create', undefined, scope.row.id)"
>
新增
</el-button>
<el-button
v-hasPermi="['system:menu:delete']"
link
type="danger"
@click="handleDelete(scope.row.id)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-auto-resizer>
</div>
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
@ -138,6 +91,10 @@ import * as MenuApi from '@/api/system/menu'
import { MenuVO } from '@/api/system/menu'
import MenuForm from './MenuForm.vue'
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
import { h } from 'vue'
import { Column, ElButton } from 'element-plus'
import { Icon } from '@/components/Icon'
import { hasPermission } from '@/directives/permission/hasPermi'
import { CommonStatusEnum } from '@/utils/constants'
defineOptions({ name: 'SystemMenu' })
@ -146,6 +103,101 @@ const { wsCache } = useCache()
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
// 表格的 column 字段
const columns: Column[] = [
{
dataKey: 'name',
title: '菜单名称',
width: 250
},
{
dataKey: 'icon',
title: '图标',
width: 150,
cellRenderer: ({ rowData }) => {
return h(Icon, {
icon: rowData.icon
})
}
},
{
dataKey: 'sort',
title: '排序',
width: 100
},
{
dataKey: 'permission',
title: '权限标识',
width: 240
},
{
dataKey: 'component',
title: '组件路径',
width: 240
},
{
dataKey: 'componentName',
title: '组件名称',
width: 240
},
{
dataKey: 'status',
title: '状态',
width: 160,
cellRenderer: ({ rowData }) => {
return h(ElSwitch, {
modelValue: rowData.status,
activeValue: CommonStatusEnum.ENABLE,
inactiveValue: CommonStatusEnum.DISABLE,
loading: menuStatusUpdating.value[rowData.id],
disabled: !hasPermission(['system:menu:update']),
onChange: (val) => handleStatusChanged(rowData, val as number)
})
}
},
{
dataKey: 'operation',
title: '操作',
width: 200,
cellRenderer: ({ rowData }) => {
return h(
'div',
[
hasPermission(['system:menu:update']) &&
h(
ElButton,
{
link: true,
type: 'primary',
onClick: () => openForm('update', rowData.id)
},
'修改'
),
hasPermission(['system:menu:create']) &&
h(
ElButton,
{
link: true,
type: 'primary',
onClick: () => openForm('create', undefined, rowData.id)
},
'新增'
),
hasPermission(['system:menu:delete']) &&
h(
ElButton,
{
link: true,
type: 'danger',
onClick: () => handleDelete(rowData.id)
},
'删除'
)
].filter(Boolean)
)
}
}
]
const loading = ref(true) // 列表的加载中
const list = ref<any>([]) // 列表的数据
const queryParams = reactive({
@ -153,8 +205,6 @@ const queryParams = reactive({
status: undefined
})
const queryFormRef = ref() // 搜索的表单
const isExpandAll = ref(false) // 是否展开，默认全部折叠
const refreshTable = ref(true) // 重新渲染表格状态
/** 查询列表 */
const getList = async () => {
@ -184,15 +234,6 @@ const openForm = (type: string, id?: number, parentId?: number) => {
formRef.value.open(type, id, parentId)
}
/** 展开/折叠操作 */
const toggleExpandAll = () => {
refreshTable.value = false
isExpandAll.value = !isExpandAll.value
nextTick(() => {
refreshTable.value = true
})
}
/** 刷新菜单缓存按钮操作 */
const refreshMenu = async () => {
try {