Просмотр исходного кода

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

YunaiV 7 месяцев назад
Родитель
Сommit
8665d0a4fb

+ 6 - 12
src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue

@@ -88,8 +88,8 @@ import ElementProperties from './properties/ElementProperties.vue'
 // import ElementForm from './form/ElementForm.vue'
 import UserTaskListeners from './listeners/UserTaskListeners.vue'
 import { getTaskCollapseItemName, isTaskCollapseItemShow } from './task/data'
-import TimeEventConfig from "./time-event-config/TimeEventConfig.vue"
-import { ref, computed, watch, onMounted } from 'vue'
+import TimeEventConfig from './time-event-config/TimeEventConfig.vue'
+import { ref, watch, onMounted } from 'vue'
 
 defineOptions({ name: 'MyPropertiesPanel' })
 
@@ -150,7 +150,7 @@ const initBpmnInstances = () => {
     }
 
     // 检查所有实例是否都存在
-    const allInstancesExist = Object.values(instances).every(instance => instance)
+    const allInstancesExist = Object.values(instances).every((instance) => instance)
     if (allInstancesExist) {
       const w = window as any
       w.bpmnInstances = instances
@@ -283,15 +283,9 @@ function updateNode() {
     timerDef.timeCycle = moddle.create('bpmn:FormalExpression', { body: condition.value })
   }
 
-  modeling.updateModdleProperties(
-    element,
-    element.businessObject,
-    {
-      eventDefinitions: [timerDef]
-    }
-  )
-
-  console.log('当前eventDefinitions:', element.businessObject.eventDefinitions)
+  modeling.updateModdleProperties(element, element.businessObject, {
+    eventDefinitions: [timerDef]
+  })
 }
 
 // 初始化和监听

+ 226 - 59
src/components/bpmnProcessDesigner/package/penal/time-event-config/CycleConfig.vue

@@ -1,50 +1,162 @@
 <template>
   <el-tabs v-model="tab">
     <el-tab-pane label="CRON表达式" name="cron">
-      <div style="margin-bottom: 10px;">
-        <el-input v-model="cronStr" readonly style="width: 400px; font-weight: bold;" :key="'cronStr'" />
+      <div style="margin-bottom: 10px">
+        <el-input
+          v-model="cronStr"
+          readonly
+          style="width: 400px; font-weight: bold"
+          :key="'cronStr'"
+        />
       </div>
-      <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.minute" placeholder="分" style="width: 80px;" :key="'minute'" />
-        <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.month" placeholder="月" style="width: 80px;" :key="'month'" />
-        <el-input v-model="fields.week" placeholder="周" style="width: 80px;" :key="'week'" />
-        <el-input v-model="fields.year" placeholder="年" style="width: 80px;" :key="'year'" />
+      <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.minute" placeholder="分" style="width: 80px" :key="'minute'" />
+        <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.month" placeholder="月" style="width: 80px" :key="'month'" />
+        <el-input v-model="fields.week" placeholder="周" style="width: 80px" :key="'week'" />
+        <el-input v-model="fields.year" placeholder="年" style="width: 80px" :key="'year'" />
       </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">
-          <div style="margin-bottom: 8px;">
-            <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="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="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>
+          <div style="margin-bottom: 8px">
+            <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="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="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>
           </div>
-          <div v-if="cronMode[f.key]==='appoint'">
-            <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>
+          <div v-if="cronMode[f.key] === 'appoint'">
+            <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-group>
           </div>
         </el-tab-pane>
       </el-tabs>
     </el-tab-pane>
     <el-tab-pane label="标准格式" name="iso" :key="'iso-tab'">
-      <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'" />
+      <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'"
+        />
       </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;">日期时间:<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 style="margin-bottom: 10px"
+        >循环次数:<el-input-number v-model="repeat" :min="1" style="width: 100px" :key="'repeat'"
+      /></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>秒:<el-button v-for="s in [5,10,30,50]" @click="setDuration('S',s)" :key="'sec-'+s">{{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
+          >秒:<el-button
+            v-for="s in [5, 10, 30, 50]"
+            @click="setDuration('S', s)"
+            :key="'sec-' + s"
+            >{{ 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>
     </el-tab-pane>
   </el-tabs>
@@ -56,7 +168,15 @@ const emit = defineEmits(['change'])
 
 const tab = ref('cron')
 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 = [
   { key: 'second', label: '秒', min: 0, max: 59 },
   { key: 'minute', label: '分', min: 0, max: 59 },
@@ -67,27 +187,67 @@ const cronFieldList = [
   { key: 'year', label: '年', min: 1970, max: 2099 }
 ]
 const activeField = ref('second')
-const cronMode = ref({ second: 'appoint', minute: 'every', 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] })
+const cronMode = ref({
+  second: 'appoint',
+  minute: 'every',
+  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], () => {
-  // 组装cron表达式
-  let arr = cronFieldList.map(f => {
-    if (cronMode.value[f.key]==='every') return '*'
-    if (cronMode.value[f.key]==='appoint') return cronAppoint.value[f.key].join(',') || '*'
-    if (cronMode.value[f.key]==='range') return `${cronRange.value[f.key][0]}-${cronRange.value[f.key][1]}`
-    if (cronMode.value[f.key]==='step') return `${cronStep.value[f.key][0]}/${cronStep.value[f.key][1]}`
-    return fields.value[f.key] || '*'
-  })
-  // week和year特殊处理
-  arr[5] = arr[5] || '?'
-  cronStr.value = arr.join(' ')
-  if (tab.value==='cron') emit('change', cronStr.value)
-}, { deep: true })
+watch(
+  [fields, cronMode, cronAppoint, cronRange, cronStep],
+  () => {
+    // 组装cron表达式
+    let arr = cronFieldList.map((f) => {
+      if (cronMode.value[f.key] === 'every') return '*'
+      if (cronMode.value[f.key] === 'appoint') return cronAppoint.value[f.key].join(',') || '*'
+      if (cronMode.value[f.key] === 'range')
+        return `${cronRange.value[f.key][0]}-${cronRange.value[f.key][1]}`
+      if (cronMode.value[f.key] === 'step')
+        return `${cronStep.value[f.key][0]}/${cronStep.value[f.key][1]}`
+      return fields.value[f.key] || '*'
+    })
+    // week和year特殊处理
+    arr[5] = arr[5] || '?'
+    cronStr.value = arr.join(' ')
+    if (tab.value === 'cron') emit('change', cronStr.value)
+  },
+  { deep: true }
+)
 
 // 标准格式
 const isoStr = ref('')
@@ -104,15 +264,22 @@ function setDuration(type, val) {
 }
 function updateIsoStr() {
   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
   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(() => props.value, (val) => {
-  if (!val) return
-  if (tab.value==='cron') cronStr.value = val
-  if (tab.value==='iso') isoStr.value = val
-}, { immediate: true })
-</script> 
+watch(
+  () => props.value,
+  (val) => {
+    if (!val) return
+    if (tab.value === 'cron') cronStr.value = val
+    if (tab.value === 'iso') isoStr.value = val
+  },
+  { immediate: true }
+)
+</script>

+ 39 - 19
src/components/bpmnProcessDesigner/package/penal/time-event-config/DurationConfig.vue

@@ -1,11 +1,25 @@
 <template>
   <div>
-    <div style="margin-bottom: 10px;">当前选择:<el-input v-model="isoString" readonly style="width: 300px;" /></div>
-    <div v-for="unit in units" :key="unit.key" style="margin-bottom: 8px;">
+    <div style="margin-bottom: 10px"
+      >当前选择:<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>
       <el-button-group>
-        <el-button 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
+          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>
     </div>
   </div>
@@ -49,18 +63,24 @@ function updateIsoString() {
   emit('change', isoString.value)
 }
 
-watch(() => props.value, (val) => {
-  if (!val) return
-  // 解析ISO 8601字符串到custom
-  const match = val.match(/^P(?:(\d+)Y)?(?:(\d+)M)?(?:(\d+)D)?(?:T(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?)?$/)
-  if (match) {
-    custom.value.Y = match[1] || ''
-    custom.value.M = match[2] || ''
-    custom.value.D = match[3] || ''
-    custom.value.H = match[4] || ''
-    custom.value.m = match[5] || ''
-    custom.value.S = match[6] || ''
-    updateIsoString()
-  }
-}, { immediate: true })
-</script> 
+watch(
+  () => props.value,
+  (val) => {
+    if (!val) return
+    // 解析ISO 8601字符串到custom
+    const match = val.match(
+      /^P(?:(\d+)Y)?(?:(\d+)M)?(?:(\d+)D)?(?:T(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?)?$/
+    )
+    if (match) {
+      custom.value.Y = match[1] || ''
+      custom.value.M = match[2] || ''
+      custom.value.D = match[3] || ''
+      custom.value.H = match[4] || ''
+      custom.value.m = match[5] || ''
+      custom.value.S = match[6] || ''
+      updateIsoString()
+    }
+  },
+  { immediate: true }
+)
+</script>

+ 55 - 25
src/components/bpmnProcessDesigner/package/penal/time-event-config/TimeEventConfig.vue

@@ -1,20 +1,29 @@
 <template>
   <div class="panel-tab__content">
-    <div style="margin-top: 10px;">
+    <div style="margin-top: 10px">
       <span>类型:</span>
       <el-button-group>
-        <el-button size="mini" :type="type==='time'?'primary':''" @click="setType('time')">时间</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 size="mini" :type="type === 'time' ? 'primary' : ''" @click="setType('time')"
+          >时间</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-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 style="margin-top: 10px; display: flex; align-items: center;">
+    <div style="margin-top: 10px; display: flex; align-items: center">
       <span>条件:</span>
       <el-input
         v-model="condition"
         :placeholder="placeholder"
-        style="width: calc(100% - 100px);"
+        style="width: calc(100% - 100px)"
         :readonly="type !== 'duration' && type !== 'cycle'"
         @focus="handleInputFocus"
         @blur="updateNode"
@@ -24,7 +33,9 @@
             <el-icon color="orange"><WarningFilled /></el-icon>
           </el-tooltip>
           <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-button
             v-if="type === 'time'"
@@ -57,40 +68,55 @@
       </el-input>
     </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
         v-model="dateValue"
         type="datetime"
         placeholder="选择日期时间"
-        style="width: 100%;"
+        style="width: 100%"
         @change="onDateChange"
       />
       <template #footer>
-        <el-button @click="showDatePicker=false">取消</el-button>
+        <el-button @click="showDatePicker = false">取消</el-button>
         <el-button type="primary" @click="onDateConfirm">确定</el-button>
       </template>
     </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" />
       <template #footer>
-        <el-button @click="showDurationDialog=false">取消</el-button>
+        <el-button @click="showDurationDialog = false">取消</el-button>
         <el-button type="primary" @click="onDurationConfirm">确定</el-button>
       </template>
     </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" />
       <template #footer>
-        <el-button @click="showCycleDialog=false">取消</el-button>
+        <el-button @click="showCycleDialog = false">取消</el-button>
         <el-button type="primary" @click="onCycleConfirm">确定</el-button>
       </template>
     </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>
       <template #footer>
-        <el-button @click="showHelp=false">关闭</el-button>
+        <el-button @click="showHelp = false">关闭</el-button>
       </template>
     </el-dialog>
   </div>
@@ -158,7 +184,6 @@ function syncFromBusinessObject() {
 }
 onMounted(syncFromBusinessObject)
 
-
 // 切换类型
 function setType(t) {
   type.value = t
@@ -235,9 +260,10 @@ function updateNode() {
   if (!element) return
 
   // 1. 复用原有 timerDef,或新建
-  let timerDef = (element.businessObject.eventDefinitions && element.businessObject.eventDefinitions[0])
+  let timerDef =
+    element.businessObject.eventDefinitions && element.businessObject.eventDefinitions[0]
   if (!timerDef) {
-    timerDef =bpmnInstances().bpmnFactory.create('bpmn:TimerEventDefinition', {})
+    timerDef = bpmnInstances().bpmnFactory.create('bpmn:TimerEventDefinition', {})
     modeling.updateProperties(element, {
       eventDefinitions: [timerDef]
     })
@@ -250,11 +276,17 @@ function updateNode() {
 
   // 3. 设置新的
   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) {
-    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) {
-    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), {
@@ -262,13 +294,11 @@ function updateNode() {
   })
 }
 
-
 watch(
   () => props.businessObject,
   (val) => {
     if (val) {
       nextTick(() => {
-
         syncFromBusinessObject()
       })
     }