Skip to content

phsl / admin

Go to a project
Commit 8665d0a4 by YunaiV
Options

review：【BPM 工作流】https://github.com/yudaocode/yudao-ui-admin-vue3/pull/153/files

parent 9ee8f8e1
Showing with 326 additions and 116 deletions
src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
...@@ -88,8 +88,8 @@ import ElementProperties from './properties/ElementProperties.vue' ...@@ -88,8 +88,8 @@ import ElementProperties from './properties/ElementProperties.vue'
// import ElementForm from './form/ElementForm.vue' // import ElementForm from './form/ElementForm.vue'
import UserTaskListeners from './listeners/UserTaskListeners.vue' import UserTaskListeners from './listeners/UserTaskListeners.vue'
import { getTaskCollapseItemName, isTaskCollapseItemShow } from './task/data' import { getTaskCollapseItemName, isTaskCollapseItemShow } from './task/data'
import TimeEventConfig from "./time-event-config/TimeEventConfig.vue" import TimeEventConfig from './time-event-config/TimeEventConfig.vue'
import { ref, computed, watch, onMounted } from 'vue' import { ref, watch, onMounted } from 'vue'
defineOptions({ name: 'MyPropertiesPanel' }) defineOptions({ name: 'MyPropertiesPanel' })
...@@ -150,7 +150,7 @@ const initBpmnInstances = () => { ...@@ -150,7 +150,7 @@ const initBpmnInstances = () => {
} }
// 检查所有实例是否都存在 // 检查所有实例是否都存在
const allInstancesExist = Object.values(instances).every(instance => instance) const allInstancesExist = Object.values(instances).every((instance) => instance)
if (allInstancesExist) { if (allInstancesExist) {
const w = window as any const w = window as any
w.bpmnInstances = instances w.bpmnInstances = instances
...@@ -283,15 +283,9 @@ function updateNode() { ...@@ -283,15 +283,9 @@ function updateNode() {
timerDef.timeCycle = moddle.create('bpmn:FormalExpression', { body: condition.value }) timerDef.timeCycle = moddle.create('bpmn:FormalExpression', { body: condition.value })
} }
modeling.updateModdleProperties( modeling.updateModdleProperties(element, element.businessObject, {
element, eventDefinitions: [timerDef]
element.businessObject, })
{
eventDefinitions: [timerDef]
}
)
console.log('当前eventDefinitions:', element.businessObject.eventDefinitions)
} }
// 初始化和监听 // 初始化和监听
......
src/components/bpmnProcessDesigner/package/penal/time-event-config/CycleConfig.vue
<template> <template>
<el-tabs v-model="tab"> <el-tabs v-model="tab">
<el-tab-pane label="CRON表达式" name="cron"> <el-tab-pane label="CRON表达式" name="cron">
<div style="margin-bottom: 10px;"> <div style="margin-bottom: 10px">
<el-input v-model="cronStr" readonly style="width: 400px; font-weight: bold;" :key="'cronStr'" /> <el-input
v-model="cronStr"
readonly
style="width: 400px; font-weight: bold"
:key="'cronStr'"
/>
</div> </div>
<div style="display: flex; gap: 8px; margin-bottom: 8px;"> <div style="display: flex; gap: 8px; margin-bottom: 8px">
<el-input v-model="fields.second" placeholder="秒" style="width: 80px;" :key="'second'" /> <el-input v-model="fields.second" placeholder="秒" style="width: 80px" :key="'second'" />
<el-input v-model="fields.minute" placeholder="分" style="width: 80px;" :key="'minute'" /> <el-input v-model="fields.minute" placeholder="分" style="width: 80px" :key="'minute'" />
<el-input v-model="fields.hour" placeholder="时" style="width: 80px;" :key="'hour'" /> <el-input v-model="fields.hour" placeholder="时" style="width: 80px" :key="'hour'" />
<el-input v-model="fields.day" placeholder="天" style="width: 80px;" :key="'day'" /> <el-input v-model="fields.day" placeholder="天" style="width: 80px" :key="'day'" />
<el-input v-model="fields.month" placeholder="月" style="width: 80px;" :key="'month'" /> <el-input v-model="fields.month" placeholder="月" style="width: 80px" :key="'month'" />
<el-input v-model="fields.week" placeholder="周" style="width: 80px;" :key="'week'" /> <el-input v-model="fields.week" placeholder="周" style="width: 80px" :key="'week'" />
<el-input v-model="fields.year" placeholder="年" style="width: 80px;" :key="'year'" /> <el-input v-model="fields.year" placeholder="年" style="width: 80px" :key="'year'" />
</div> </div>
<el-tabs v-model="activeField" type="card" style="margin-bottom: 8px;"> <el-tabs v-model="activeField" type="card" style="margin-bottom: 8px">
<el-tab-pane v-for="f in cronFieldList" :label="f.label" :name="f.key" :key="f.key"> <el-tab-pane v-for="f in cronFieldList" :label="f.label" :name="f.key" :key="f.key">
<div style="margin-bottom: 8px;"> <div style="margin-bottom: 8px">
<el-radio-group v-model="cronMode[f.key]" :key="'radio-'+f.key"> <el-radio-group v-model="cronMode[f.key]" :key="'radio-' + f.key">
<el-radio label="every" :key="'every-'+f.key">每{{f.label}}</el-radio> <el-radio label="every" :key="'every-' + f.key">每{{ f.label }}</el-radio>
<el-radio label="range" :key="'range-'+f.key">从 <el-input-number v-model="cronRange[f.key][0]" :min="f.min" :max="f.max" size="small" style="width:60px" :key="'range0-'+f.key" /> 到 <el-input-number v-model="cronRange[f.key][1]" :min="f.min" :max="f.max" size="small" style="width:60px" :key="'range1-'+f.key" /> 之间每{{f.label}}</el-radio> <el-radio label="range" :key="'range-' + f.key"
<el-radio label="step" :key="'step-'+f.key">从第 <el-input-number v-model="cronStep[f.key][0]" :min="f.min" :max="f.max" size="small" style="width:60px" :key="'step0-'+f.key" /> 开始每 <el-input-number v-model="cronStep[f.key][1]" :min="1" :max="f.max" size="small" style="width:60px" :key="'step1-'+f.key" /> {{f.label}}</el-radio> >从
<el-radio label="appoint" :key="'appoint-'+f.key">指定</el-radio> <el-input-number
v-model="cronRange[f.key][0]"
:min="f.min"
:max="f.max"
size="small"
style="width: 60px"
:key="'range0-' + f.key"
/>
到
<el-input-number
v-model="cronRange[f.key][1]"
:min="f.min"
:max="f.max"
size="small"
style="width: 60px"
:key="'range1-' + f.key"
/>
之间每{{ f.label }}</el-radio
>
<el-radio label="step" :key="'step-' + f.key"
>从第
<el-input-number
v-model="cronStep[f.key][0]"
:min="f.min"
:max="f.max"
size="small"
style="width: 60px"
:key="'step0-' + f.key"
/>
开始每
<el-input-number
v-model="cronStep[f.key][1]"
:min="1"
:max="f.max"
size="small"
style="width: 60px"
:key="'step1-' + f.key"
/>
{{ f.label }}</el-radio
>
<el-radio label="appoint" :key="'appoint-' + f.key">指定</el-radio>
</el-radio-group> </el-radio-group>
</div> </div>
<div v-if="cronMode[f.key]==='appoint'"> <div v-if="cronMode[f.key] === 'appoint'">
<el-checkbox-group v-model="cronAppoint[f.key]" :key="'group-'+f.key"> <el-checkbox-group v-model="cronAppoint[f.key]" :key="'group-' + f.key">
<el-checkbox v-for="n in f.max+1" :label="pad(n-1)" :key="'cb-'+f.key+'-'+(n-1)">{{pad(n-1)}}</el-checkbox> <el-checkbox
v-for="n in f.max + 1"
:label="pad(n - 1)"
:key="'cb-' + f.key + '-' + (n - 1)"
>{{ pad(n - 1) }}</el-checkbox
>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="标准格式" name="iso" :key="'iso-tab'"> <el-tab-pane label="标准格式" name="iso" :key="'iso-tab'">
<div style="margin-bottom: 10px;"> <div style="margin-bottom: 10px">
<el-input v-model="isoStr" placeholder="如R1/2025-05-21T21:59:54/P3DT30M30S" style="width: 400px; font-weight: bold;" :key="'isoStr'" /> <el-input
v-model="isoStr"
placeholder="如R1/2025-05-21T21:59:54/P3DT30M30S"
style="width: 400px; font-weight: bold"
:key="'isoStr'"
/>
</div> </div>
<div style="margin-bottom: 10px;">循环次数：<el-input-number v-model="repeat" :min="1" style="width: 100px;" :key="'repeat'" /></div> <div style="margin-bottom: 10px"
<div style="margin-bottom: 10px;">日期时间：<el-date-picker v-model="isoDate" type="datetime" placeholder="选择日期时间" style="width: 200px;" :key="'isoDate'" /></div> >循环次数：<el-input-number v-model="repeat" :min="1" style="width: 100px" :key="'repeat'"
<div style="margin-bottom: 10px;">当前时长：<el-input v-model="isoDuration" placeholder="如P3DT30M30S" style="width: 200px;" :key="'isoDuration'" /></div> /></div>
<div style="margin-bottom: 10px"
>日期时间：<el-date-picker
v-model="isoDate"
type="datetime"
placeholder="选择日期时间"
style="width: 200px"
:key="'isoDate'"
/></div>
<div style="margin-bottom: 10px"
>当前时长：<el-input
v-model="isoDuration"
placeholder="如P3DT30M30S"
style="width: 200px"
:key="'isoDuration'"
/></div>
<div> <div>
<div>秒：<el-button v-for="s in [5,10,30,50]" @click="setDuration('S',s)" :key="'sec-'+s">{{s}}</el-button>自定义</div> <div
<div>分：<el-button v-for="m in [5,10,30,50]" @click="setDuration('M',m)" :key="'min-'+m">{{m}}</el-button>自定义</div> >秒：<el-button
<div>小时：<el-button v-for="h in [4,8,12,24]" @click="setDuration('H',h)" :key="'hour-'+h">{{h}}</el-button>自定义</div> v-for="s in [5, 10, 30, 50]"
<div>天：<el-button v-for="d in [1,2,3,4]" @click="setDuration('D',d)" :key="'day-'+d">{{d}}</el-button>自定义</div> @click="setDuration('S', s)"
<div>月：<el-button v-for="mo in [1,2,3,4]" @click="setDuration('M',mo)" :key="'mon-'+mo">{{mo}}</el-button>自定义</div> :key="'sec-' + s"
<div>年：<el-button v-for="y in [1,2,3,4]" @click="setDuration('Y',y)" :key="'year-'+y">{{y}}</el-button>自定义</div> >{{ s }}</el-button
>自定义</div
>
<div
>分：<el-button
v-for="m in [5, 10, 30, 50]"
@click="setDuration('M', m)"
:key="'min-' + m"
>{{ m }}</el-button
>自定义</div
>
<div
>小时：<el-button
v-for="h in [4, 8, 12, 24]"
@click="setDuration('H', h)"
:key="'hour-' + h"
>{{ h }}</el-button
>自定义</div
>
<div
>天：<el-button
v-for="d in [1, 2, 3, 4]"
@click="setDuration('D', d)"
:key="'day-' + d"
>{{ d }}</el-button
>自定义</div
>
<div
>月：<el-button
v-for="mo in [1, 2, 3, 4]"
@click="setDuration('M', mo)"
:key="'mon-' + mo"
>{{ mo }}</el-button
>自定义</div
>
<div
>年：<el-button
v-for="y in [1, 2, 3, 4]"
@click="setDuration('Y', y)"
:key="'year-' + y"
>{{ y }}</el-button
>自定义</div
>
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
...@@ -56,7 +168,15 @@ const emit = defineEmits(['change']) ...@@ -56,7 +168,15 @@ const emit = defineEmits(['change'])
const tab = ref('cron') const tab = ref('cron')
const cronStr = ref(props.value || '* * * * * ?') const cronStr = ref(props.value || '* * * * * ?')
const fields = ref({ second: '*', minute: '*', hour: '*', day: '*', month: '*', week: '?', year: '' }) const fields = ref({
second: '*',
minute: '*',
hour: '*',
day: '*',
month: '*',
week: '?',
year: ''
})
const cronFieldList = [ const cronFieldList = [
{ key: 'second', label: '秒', min: 0, max: 59 }, { key: 'second', label: '秒', min: 0, max: 59 },
{ key: 'minute', label: '分', min: 0, max: 59 }, { key: 'minute', label: '分', min: 0, max: 59 },
...@@ -67,27 +187,67 @@ const cronFieldList = [ ...@@ -67,27 +187,67 @@ const cronFieldList = [
{ key: 'year', label: '年', min: 1970, max: 2099 } { key: 'year', label: '年', min: 1970, max: 2099 }
] ]
const activeField = ref('second') const activeField = ref('second')
const cronMode = ref({ second: 'appoint', minute: 'every', hour: 'every', day: 'every', month: 'every', week: 'every', year: 'every' }) const cronMode = ref({
const cronAppoint = ref({ second: ['00','01'], minute: [], hour: [], day: [], month: [], week: [], year: [] }) second: 'appoint',
const cronRange = ref({ second: [0,1], minute: [0,1], hour: [0,1], day: [1,2], month: [1,2], week: [1,2], year: [1970,1971] }) minute: 'every',
const cronStep = ref({ second: [1,1], minute: [1,1], hour: [1,1], day: [1,1], month: [1,1], week: [1,1], year: [1970,1] }) hour: 'every',
day: 'every',
month: 'every',
week: 'every',
year: 'every'
})
const cronAppoint = ref({
second: ['00', '01'],
minute: [],
hour: [],
day: [],
month: [],
week: [],
year: []
})
const cronRange = ref({
second: [0, 1],
minute: [0, 1],
hour: [0, 1],
day: [1, 2],
month: [1, 2],
week: [1, 2],
year: [1970, 1971]
})
const cronStep = ref({
second: [1, 1],
minute: [1, 1],
hour: [1, 1],
day: [1, 1],
month: [1, 1],
week: [1, 1],
year: [1970, 1]
})
function pad(n) { return n<10 ? '0'+n : ''+n } function pad(n) {
return n < 10 ? '0' + n : '' + n
}
watch([fields, cronMode, cronAppoint, cronRange, cronStep], () => { watch(
// 组装cron表达式 [fields, cronMode, cronAppoint, cronRange, cronStep],
let arr = cronFieldList.map(f => { () => {
if (cronMode.value[f.key]==='every') return '*' // 组装cron表达式
if (cronMode.value[f.key]==='appoint') return cronAppoint.value[f.key].join(',') || '*' let arr = cronFieldList.map((f) => {
if (cronMode.value[f.key]==='range') return `${cronRange.value[f.key][0]}-${cronRange.value[f.key][1]}` if (cronMode.value[f.key] === 'every') return '*'
if (cronMode.value[f.key]==='step') return `${cronStep.value[f.key][0]}/${cronStep.value[f.key][1]}` if (cronMode.value[f.key] === 'appoint') return cronAppoint.value[f.key].join(',') || '*'
return fields.value[f.key] || '*' if (cronMode.value[f.key] === 'range')
}) return `${cronRange.value[f.key][0]}-${cronRange.value[f.key][1]}`
// week和year特殊处理 if (cronMode.value[f.key] === 'step')
arr[5] = arr[5] || '?' return `${cronStep.value[f.key][0]}/${cronStep.value[f.key][1]}`
cronStr.value = arr.join(' ') return fields.value[f.key] || '*'
if (tab.value==='cron') emit('change', cronStr.value) })
}, { deep: true }) // week和year特殊处理
arr[5] = arr[5] || '?'
cronStr.value = arr.join(' ')
if (tab.value === 'cron') emit('change', cronStr.value)
},
{ deep: true }
)
// 标准格式 // 标准格式
const isoStr = ref('') const isoStr = ref('')
...@@ -104,15 +264,22 @@ function setDuration(type, val) { ...@@ -104,15 +264,22 @@ function setDuration(type, val) {
} }
function updateIsoStr() { function updateIsoStr() {
let str = `R${repeat.value}` let str = `R${repeat.value}`
if (isoDate.value) str += '/' + (typeof isoDate.value==='string'?isoDate.value:new Date(isoDate.value).toISOString()) if (isoDate.value)
str +=
'/' +
(typeof isoDate.value === 'string' ? isoDate.value : new Date(isoDate.value).toISOString())
if (isoDuration.value) str += '/' + isoDuration.value if (isoDuration.value) str += '/' + isoDuration.value
isoStr.value = str isoStr.value = str
if (tab.value==='iso') emit('change', isoStr.value) if (tab.value === 'iso') emit('change', isoStr.value)
} }
watch([repeat, isoDate, isoDuration], updateIsoStr) watch([repeat, isoDate, isoDuration], updateIsoStr)
watch(() => props.value, (val) => { watch(
if (!val) return () => props.value,
if (tab.value==='cron') cronStr.value = val (val) => {
if (tab.value==='iso') isoStr.value = val if (!val) return
}, { immediate: true }) if (tab.value === 'cron') cronStr.value = val
</script> if (tab.value === 'iso') isoStr.value = val
\ No newline at end of file },
{ immediate: true }
)
</script>
src/components/bpmnProcessDesigner/package/penal/time-event-config/DurationConfig.vue
<template> <template>
<div> <div>
<div style="margin-bottom: 10px;">当前选择：<el-input v-model="isoString" readonly style="width: 300px;" /></div> <div style="margin-bottom: 10px"
<div v-for="unit in units" :key="unit.key" style="margin-bottom: 8px;"> >当前选择：<el-input v-model="isoString" readonly style="width: 300px"
/></div>
<div v-for="unit in units" :key="unit.key" style="margin-bottom: 8px">
<span>{{ unit.label }}：</span> <span>{{ unit.label }}：</span>
<el-button-group> <el-button-group>
<el-button v-for="val in unit.presets" :key="val" size="mini" @click="setUnit(unit.key, val)">{{ val }}</el-button> <el-button
<el-input v-model.number="custom[unit.key]" size="mini" style="width: 60px; margin-left: 8px;" placeholder="自定义" @change="setUnit(unit.key, custom[unit.key])" /> v-for="val in unit.presets"
:key="val"
size="mini"
@click="setUnit(unit.key, val)"
>{{ val }}</el-button
>
<el-input
v-model.number="custom[unit.key]"
size="mini"
style="width: 60px; margin-left: 8px"
placeholder="自定义"
@change="setUnit(unit.key, custom[unit.key])"
/>
</el-button-group> </el-button-group>
</div> </div>
</div> </div>
...@@ -49,18 +63,24 @@ function updateIsoString() { ...@@ -49,18 +63,24 @@ function updateIsoString() {
emit('change', isoString.value) emit('change', isoString.value)
} }
watch(() => props.value, (val) => { watch(
if (!val) return () => props.value,
// 解析ISO 8601字符串到custom (val) => {
const match = val.match(/^P(?:(\d+)Y)?(?:(\d+)M)?(?:(\d+)D)?(?:T(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?)?$/) if (!val) return
if (match) { // 解析ISO 8601字符串到custom
custom.value.Y = match[1] || '' const match = val.match(
custom.value.M = match[2] || '' /^P(?:(\d+)Y)?(?:(\d+)M)?(?:(\d+)D)?(?:T(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?)?$/
custom.value.D = match[3] || '' )
custom.value.H = match[4] || '' if (match) {
custom.value.m = match[5] || '' custom.value.Y = match[1] || ''
custom.value.S = match[6] || '' custom.value.M = match[2] || ''
updateIsoString() custom.value.D = match[3] || ''
} custom.value.H = match[4] || ''
}, { immediate: true }) custom.value.m = match[5] || ''
</script> custom.value.S = match[6] || ''
updateIsoString()
}
},
{ immediate: true }
)
</script>
src/components/bpmnProcessDesigner/package/penal/time-event-config/TimeEventConfig.vue
<template> <template>
<div class="panel-tab__content"> <div class="panel-tab__content">
<div style="margin-top: 10px;"> <div style="margin-top: 10px">
<span>类型：</span> <span>类型：</span>
<el-button-group> <el-button-group>
<el-button size="mini" :type="type==='time'?'primary':''" @click="setType('time')">时间</el-button> <el-button size="mini" :type="type === 'time' ? 'primary' : ''" @click="setType('time')"
<el-button size="mini" :type="type==='duration'?'primary':''" @click="setType('duration')">持续</el-button> >时间</el-button
<el-button size="mini" :type="type==='cycle'?'primary':''" @click="setType('cycle')">循环</el-button> >
<el-button
size="mini"
:type="type === 'duration' ? 'primary' : ''"
@click="setType('duration')"
>持续</el-button
>
<el-button size="mini" :type="type === 'cycle' ? 'primary' : ''" @click="setType('cycle')"
>循环</el-button
>
</el-button-group> </el-button-group>
<el-icon v-if="valid" color="green" style="margin-left:8px"><CircleCheckFilled /></el-icon> <el-icon v-if="valid" color="green" style="margin-left: 8px"><CircleCheckFilled /></el-icon>
</div> </div>
<div style="margin-top: 10px; display: flex; align-items: center;"> <div style="margin-top: 10px; display: flex; align-items: center">
<span>条件：</span> <span>条件：</span>
<el-input <el-input
v-model="condition" v-model="condition"
:placeholder="placeholder" :placeholder="placeholder"
style="width: calc(100% - 100px);" style="width: calc(100% - 100px)"
:readonly="type !== 'duration' && type !== 'cycle'" :readonly="type !== 'duration' && type !== 'cycle'"
@focus="handleInputFocus" @focus="handleInputFocus"
@blur="updateNode" @blur="updateNode"
...@@ -24,7 +33,9 @@ ...@@ -24,7 +33,9 @@
<el-icon color="orange"><WarningFilled /></el-icon> <el-icon color="orange"><WarningFilled /></el-icon>
</el-tooltip> </el-tooltip>
<el-tooltip :content="helpText" placement="top"> <el-tooltip :content="helpText" placement="top">
<el-icon color="#409EFF" style="cursor: pointer" @click="showHelp = true"><QuestionFilled /></el-icon> <el-icon color="#409EFF" style="cursor: pointer" @click="showHelp = true"
><QuestionFilled
/></el-icon>
</el-tooltip> </el-tooltip>
<el-button <el-button
v-if="type === 'time'" v-if="type === 'time'"
...@@ -57,40 +68,55 @@ ...@@ -57,40 +68,55 @@
</el-input> </el-input>
</div> </div>
<!-- 时间选择器 --> <!-- 时间选择器 -->
<el-dialog v-model="showDatePicker" title="选择时间" width="400px" @close="showDatePicker=false"> <el-dialog
v-model="showDatePicker"
title="选择时间"
width="400px"
@close="showDatePicker = false"
>
<el-date-picker <el-date-picker
v-model="dateValue" v-model="dateValue"
type="datetime" type="datetime"
placeholder="选择日期时间" placeholder="选择日期时间"
style="width: 100%;" style="width: 100%"
@change="onDateChange" @change="onDateChange"
/> />
<template #footer> <template #footer>
<el-button @click="showDatePicker=false">取消</el-button> <el-button @click="showDatePicker = false">取消</el-button>
<el-button type="primary" @click="onDateConfirm">确定</el-button> <el-button type="primary" @click="onDateConfirm">确定</el-button>
</template> </template>
</el-dialog> </el-dialog>
<!-- 持续时长选择器 --> <!-- 持续时长选择器 -->
<el-dialog v-model="showDurationDialog" title="时间配置" width="600px" @close="showDurationDialog=false"> <el-dialog
v-model="showDurationDialog"
title="时间配置"
width="600px"
@close="showDurationDialog = false"
>
<DurationConfig :value="condition" @change="onDurationChange" /> <DurationConfig :value="condition" @change="onDurationChange" />
<template #footer> <template #footer>
<el-button @click="showDurationDialog=false">取消</el-button> <el-button @click="showDurationDialog = false">取消</el-button>
<el-button type="primary" @click="onDurationConfirm">确定</el-button> <el-button type="primary" @click="onDurationConfirm">确定</el-button>
</template> </template>
</el-dialog> </el-dialog>
<!-- 循环配置器 --> <!-- 循环配置器 -->
<el-dialog v-model="showCycleDialog" title="时间配置" width="800px" @close="showCycleDialog=false"> <el-dialog
v-model="showCycleDialog"
title="时间配置"
width="800px"
@close="showCycleDialog = false"
>
<CycleConfig :value="condition" @change="onCycleChange" /> <CycleConfig :value="condition" @change="onCycleChange" />
<template #footer> <template #footer>
<el-button @click="showCycleDialog=false">取消</el-button> <el-button @click="showCycleDialog = false">取消</el-button>
<el-button type="primary" @click="onCycleConfirm">确定</el-button> <el-button type="primary" @click="onCycleConfirm">确定</el-button>
</template> </template>
</el-dialog> </el-dialog>
<!-- 帮助说明 --> <!-- 帮助说明 -->
<el-dialog v-model="showHelp" title="格式说明" width="600px" @close="showHelp=false"> <el-dialog v-model="showHelp" title="格式说明" width="600px" @close="showHelp = false">
<div v-html="helpHtml"></div> <div v-html="helpHtml"></div>
<template #footer> <template #footer>
<el-button @click="showHelp=false">关闭</el-button> <el-button @click="showHelp = false">关闭</el-button>
</template> </template>
</el-dialog> </el-dialog>
</div> </div>
...@@ -158,7 +184,6 @@ function syncFromBusinessObject() { ...@@ -158,7 +184,6 @@ function syncFromBusinessObject() {
} }
onMounted(syncFromBusinessObject) onMounted(syncFromBusinessObject)
// 切换类型 // 切换类型
function setType(t) { function setType(t) {
type.value = t type.value = t
...@@ -235,9 +260,10 @@ function updateNode() { ...@@ -235,9 +260,10 @@ function updateNode() {
if (!element) return if (!element) return
// 1. 复用原有 timerDef，或新建 // 1. 复用原有 timerDef，或新建
let timerDef = (element.businessObject.eventDefinitions && element.businessObject.eventDefinitions[0]) let timerDef =
element.businessObject.eventDefinitions && element.businessObject.eventDefinitions[0]
if (!timerDef) { if (!timerDef) {
timerDef =bpmnInstances().bpmnFactory.create('bpmn:TimerEventDefinition', {}) timerDef = bpmnInstances().bpmnFactory.create('bpmn:TimerEventDefinition', {})
modeling.updateProperties(element, { modeling.updateProperties(element, {
eventDefinitions: [timerDef] eventDefinitions: [timerDef]
}) })
...@@ -250,11 +276,17 @@ function updateNode() { ...@@ -250,11 +276,17 @@ function updateNode() {
// 3. 设置新的 // 3. 设置新的
if (type.value === 'time' && condition.value) { if (type.value === 'time' && condition.value) {
timerDef.timeDate =bpmnInstances().bpmnFactory.create('bpmn:FormalExpression', { body: condition.value }) timerDef.timeDate = bpmnInstances().bpmnFactory.create('bpmn:FormalExpression', {
body: condition.value
})
} else if (type.value === 'duration' && condition.value) { } else if (type.value === 'duration' && condition.value) {
timerDef.timeDuration =bpmnInstances().bpmnFactory.create('bpmn:FormalExpression', { body: condition.value }) timerDef.timeDuration = bpmnInstances().bpmnFactory.create('bpmn:FormalExpression', {
body: condition.value
})
} else if (type.value === 'cycle' && condition.value) { } else if (type.value === 'cycle' && condition.value) {
timerDef.timeCycle = bpmnInstances().bpmnFactory.create('bpmn:FormalExpression', { body: condition.value }) timerDef.timeCycle = bpmnInstances().bpmnFactory.create('bpmn:FormalExpression', {
body: condition.value
})
} }
bpmnInstances().modeling.updateProperties(toRaw(element), { bpmnInstances().modeling.updateProperties(toRaw(element), {
...@@ -262,13 +294,11 @@ function updateNode() { ...@@ -262,13 +294,11 @@ function updateNode() {
}) })
} }
watch( watch(
() => props.businessObject, () => props.businessObject,
(val) => { (val) => {
if (val) { if (val) {
nextTick(() => { nextTick(() => {
syncFromBusinessObject() syncFromBusinessObject()
}) })
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment