fix: bpmn-process-designer SelectOption 标题展示问题

apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/template.js

@@ -1,178 +0,0 @@
-export const template = (isTaskListener) => {
-  return `
-  <div class="panel-tab__content">
-    <el-table :data="elementListenersList" size="small" border>
-      <el-table-column label="序号" width="50px" type="index" />
-      <el-table-column label="事件类型" min-width="100px" prop="event" />
-      <el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
-      <el-table-column label="操作" width="90px">
-        <template #default="scope">
-          <el-button size="small" type="primary" link @click="openListenerForm(scope, scope.$index)">编辑</el-button>
-          <el-divider direction="vertical" />
-          <el-button size="small" type="primary" link style="color: #ff4d4f" @click="removeListener(scope, scope.$index)">移除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <div class="element-drawer__button">
-      <el-button size="small" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
-    </div>
-
-    <!-- 监听器 编辑/创建 部分 -->
-    <el-drawer :visible.sync="listenerFormModelVisible" title="执行监听器" :size="width + 'px'" append-to-body destroy-on-close>
-      <el-form size="small" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
-        <el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
-          <el-select v-model="listenerForm.event">
-            <el-option label="start" value="start" />
-            <el-option label="end" value="end" />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
-          <el-select v-model="listenerForm.listenerType">
-            <el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-if="listenerForm.listenerType === 'classListener'"
-          label="Java类"
-          prop="class"
-          key="listener-class"
-          :rules="{ required: true, trigger: ['blur', 'change'] }"
-        >
-          <el-input v-model="listenerForm.class" clearable />
-        </el-form-item>
-        <el-form-item
-          v-if="listenerForm.listenerType === 'expressionListener'"
-          label="表达式"
-          prop="expression"
-          key="listener-expression"
-          :rules="{ required: true, trigger: ['blur', 'change'] }"
-        >
-          <el-input v-model="listenerForm.expression" clearable />
-        </el-form-item>
-        <el-form-item
-          v-if="listenerForm.listenerType === 'delegateExpressionListener'"
-          label="代理表达式"
-          prop="delegateExpression"
-          key="listener-delegate"
-          :rules="{ required: true, trigger: ['blur', 'change'] }"
-        >
-          <el-input v-model="listenerForm.delegateExpression" clearable />
-        </el-form-item>
-        <template v-if="listenerForm.listenerType === 'scriptListener'">
-          <el-form-item
-            label="脚本格式"
-            prop="scriptFormat"
-            key="listener-script-format"
-            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
-          >
-            <el-input v-model="listenerForm.scriptFormat" clearable />
-          </el-form-item>
-          <el-form-item
-            label="脚本类型"
-            prop="scriptType"
-            key="listener-script-type"
-            :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
-          >
-            <el-select v-model="listenerForm.scriptType">
-              <el-option label="内联脚本" value="inlineScript" />
-              <el-option label="外部脚本" value="externalScript" />
-            </el-select>
-          </el-form-item>
-          <el-form-item
-            v-if="listenerForm.scriptType === 'inlineScript'"
-            label="脚本内容"
-            prop="value"
-            key="listener-script"
-            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
-          >
-            <el-input v-model="listenerForm.value" clearable />
-          </el-form-item>
-          <el-form-item
-            v-if="listenerForm.scriptType === 'externalScript'"
-            label="资源地址"
-            prop="resource"
-            key="listener-resource"
-            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
-          >
-            <el-input v-model="listenerForm.resource" clearable />
-          </el-form-item>
-        </template>
-        ${
-          isTaskListener
-            ? "<el-form-item label='定时器类型' prop='eventDefinitionType' key='eventDefinitionType'>" +
-              "<el-select v-model='listenerForm.eventDefinitionType'>" +
-              "<el-option label='日期' value='date' />" +
-              "<el-option label='持续时长' value='duration' />" +
-              "<el-option label='循环' value='cycle' />" +
-              "<el-option label='无' value='' />" +
-              '</el-select>' +
-              '</el-form-item>' +
-              "<el-form-item v-if='!!listenerForm.eventDefinitionType' label='定时器' prop='eventDefinitions' key='eventDefinitions'>" +
-              "<el-input v-model='listenerForm.eventDefinitions' clearable />" +
-              '</el-form-item>'
-            : ''
-        }
-      </el-form>
-      <el-divider />
-      <p class="listener-filed__title">
-        <span><i class="el-icon-menu"></i>注入字段：</span>
-        <el-button size="small" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
-      </p>
-      <el-table :data="fieldsListOfListener" size="small" max-height="240" border fit style="flex: none">
-        <el-table-column label="序号" width="50px" type="index" />
-        <el-table-column label="字段名称" min-width="100px" prop="name" />
-        <el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
-        <el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
-        <el-table-column label="操作" width="100px">
-          <template #default="scope">
-            <el-button size="small" type="primary" link @click="openListenerFieldForm(scope, scope.$index)">编辑</el-button>
-            <el-divider direction="vertical" />
-            <el-button size="small" type="primary" link style="color: #ff4d4f" @click="removeListenerField(scope, scope.$index)">移除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <div class="element-drawer__button">
-        <el-button size="small" @click="listenerFormModelVisible = false">取 消</el-button>
-        <el-button size="small" type="primary" @click="saveListenerConfig">保 存</el-button>
-      </div>
-    </el-drawer>
-
-    <!-- 注入西段 编辑/创建 部分 -->
-    <el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
-      <el-form :model="listenerFieldForm" size="small" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
-        <el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
-          <el-input v-model="listenerFieldForm.name" clearable />
-        </el-form-item>
-        <el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
-          <el-select v-model="listenerFieldForm.fieldType">
-            <el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
-          </el-select>
-        </el-form-item>
-        <el-form-item
-          v-if="listenerFieldForm.fieldType === 'string'"
-          label="字段值："
-          prop="string"
-          key="field-string"
-          :rules="{ required: true, trigger: ['blur', 'change'] }"
-        >
-          <el-input v-model="listenerFieldForm.string" clearable />
-        </el-form-item>
-        <el-form-item
-          v-if="listenerFieldForm.fieldType === 'expression'"
-          label="表达式："
-          prop="expression"
-          key="field-expression"
-          :rules="{ required: true, trigger: ['blur', 'change'] }"
-        >
-          <el-input v-model="listenerFieldForm.expression" clearable />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
-        <el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
-      </template>
-    </el-dialog>
-  </div>
-  `;
-};

apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue

@@ -123,9 +123,10 @@ watch(
           <SelectOption
             v-for="key in Object.keys(messageMap)"
             :value="key"
-            :label="messageMap[key]"
             :key="key"
-          />
+          >
+            {{ messageMap[key] }}
+          </SelectOption>
         </Select>
         <Button
           type="primary"

apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue

@@ -355,9 +355,10 @@ onBeforeUnmount(() => {
         <SelectOption
           v-for="(dict, index) in CANDIDATE_STRATEGY"
           :key="index"
-          :label="dict.label"
           :value="dict.value"
-        />
+        >
+          {{ dict.label }}
+        </SelectOption>
       </Select>
     </FormItem>
     <FormItem
@@ -375,9 +376,10 @@ onBeforeUnmount(() => {
         <SelectOption
           v-for="item in roleOptions"
           :key="item.id"
-          :label="item.name"
           :value="item.id"
-        />
+        >
+          {{ item.name }}
+        </SelectOption>
       </Select>
     </FormItem>
     <FormItem
@@ -416,9 +418,10 @@ onBeforeUnmount(() => {
         <SelectOption
           v-for="item in postOptions"
           :key="item.id"
-          :label="item.name"
           :value="item.id"
-        />
+        >
+          {{ item.name }}
+        </SelectOption>
       </Select>
     </FormItem>
     <FormItem
@@ -436,9 +439,10 @@ onBeforeUnmount(() => {
         <SelectOption
           v-for="item in userOptions"
           :key="item.id"
-          :label="item.nickname"
           :value="item.id"
-        />
+        >
+          {{ item.nickname }}
+        </SelectOption>
       </Select>
     </FormItem>
     <FormItem
@@ -456,9 +460,10 @@ onBeforeUnmount(() => {
         <SelectOption
           v-for="item in userGroupOptions"
           :key="item.id"
-          :label="item.name"
           :value="item.id"
-        />
+        >
+          {{ item.name }}
+        </SelectOption>
       </Select>
     </FormItem>
     <FormItem
@@ -475,10 +480,11 @@ onBeforeUnmount(() => {
         <SelectOption
           v-for="(item, idx) in userFieldOnFormOptions"
           :key="idx"
-          :label="item.title"
           :value="item.field"
           :disabled="!item.required"
-        />
+        >
+          {{ item.title }}
+        </SelectOption>
       </Select>
     </FormItem>
     <FormItem
@@ -497,10 +503,11 @@ onBeforeUnmount(() => {
         <SelectOption
           v-for="(item, idx) in deptFieldOnFormOptions"
           :key="idx"
-          :label="item.title"
           :value="item.field"
           :disabled="!item.required"
-        />
+        >
+          {{ item.title }}
+        </SelectOption>
       </Select>
     </FormItem>
     <FormItem
@@ -520,9 +527,10 @@ onBeforeUnmount(() => {
         <SelectOption
           v-for="(item, index) in MULTI_LEVEL_DEPT"
           :key="index"
-          :label="item.label"
           :value="item.value"
-        />
+        >
+          {{ item.label }}
+        </SelectOption>
       </Select>
     </FormItem>
     <FormItem