!694 fix： 修复bpm相关bug

Merge pull request !694 from SamllNorth_Lee/fix/bpm

Author: YunaiV

pnpm-lock.yaml

@@ -75,7 +75,7 @@ watch(
 
 <template>
   <ElIcon :class="prefixCls" :color="color" :size="size">
-    <svg v-if="isLocal" :class="getSvgClass" aria-hidden="true">
+    <svg v-if="isLocal" :class="getSvgClass">
       <use :xlink:href="symbolId" />
     </svg>
 

src/components/Icon/src/Icon.vue

@@ -25,7 +25,6 @@
 
 <script setup lang="ts">
 import SimpleProcessModel from './SimpleProcessModel.vue'
-import { updateBpmSimpleModel, getBpmSimpleModel } from '@/api/bpm/simple'
 import { SimpleFlowNode, NodeType, NodeId, NODE_DEFAULT_TEXT } from './consts'
 import { getModel } from '@/api/bpm/model'
 import { getForm, FormVO } from '@/api/bpm/form'
@@ -35,6 +34,7 @@ import * as DeptApi from '@/api/system/dept'
 import * as PostApi from '@/api/system/post'
 import * as UserApi from '@/api/system/user'
 import * as UserGroupApi from '@/api/bpm/userGroup'
+import { BpmModelFormType } from '@/utils/constants'
 
 defineOptions({
   name: 'SimpleProcessDesigner'
@@ -168,7 +168,7 @@ onMounted(async () => {
       const bpmnModel = await getModel(props.modelId)
       if (bpmnModel) {
         formType.value = bpmnModel.formType
-        if (formType.value === 10) {
+        if (formType.value === BpmModelFormType.NORMAL && bpmnModel.formId) {
           const bpmnForm = (await getForm(bpmnModel.formId)) as unknown as FormVO
           formFields.value = bpmnForm?.fields
         }

src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue

@@ -449,3 +449,18 @@ export function jsonParse(str: string) {
     return ''
   }
 }
+
+/**
+ * 截取字符串
+ *
+ * @param name
+ * @param start
+ * @param end
+ */
+
+export const sliceName = (name: string,start: number, end : number) => {
+  if (name.length > end) {
+    return name.slice(start, end)
+  }
+  return name
+}

src/utils/index.ts

@@ -88,6 +88,9 @@
                 />
               </el-tooltip>
               <el-image v-if="row.icon" :src="row.icon" class="h-38px w-38px mr-10px rounded" />
+              <div v-else class="flow-icon">
+                <span style="font-size: 12px; color: #fff">{{ sliceName(row.name,0,2) }}</span>
+              </div>
               {{ row.name }}
             </div>
           </template>
@@ -249,6 +252,11 @@
       </div>
     </template>
   </Dialog>
+
+  <!-- 弹窗：表单详情 -->
+  <Dialog title="表单详情" :fullscreen="true" v-model="formDetailVisible">
+    <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
+  </Dialog>
 </template>
 
 <script lang="ts" setup>
@@ -265,6 +273,7 @@ import { useAppStore } from '@/store/modules/app'
 import { cloneDeep, isEqual } from 'lodash-es'
 import { useTagsView } from '@/hooks/web/useTagsView'
 import { useDebounceFn } from '@vueuse/core'
+import { sliceName } from '@/utils/index'
 
 defineOptions({ name: 'BpmModel' })
 
@@ -437,11 +446,10 @@ const handleChangeState = async (row: any) => {
 /** 发布流程 */
 const handleDeploy = async (row: any) => {
   try {
-    // 删除的二次确认
-    await message.confirm('是否部署该流程！！')
+    await message.confirm('是否确认发布该流程？')
     // 发起部署
     await ModelApi.deployModel(row.id)
-    message.success(t('部署成功'))
+    message.success(t('发布成功'))
     // 刷新列表
     emit('success')
   } catch {}
@@ -464,7 +472,7 @@ const formDetailPreview = ref({
   option: {}
 })
 const handleFormDetail = async (row: any) => {
-  if (row.formType == 10) {
+  if (row.formType == BpmModelFormType.NORMAL) {
     // 设置表单
     const data = await FormApi.getForm(row.formId)
     setConfAndFields2(formDetailPreview, data.conf, data.fields)
@@ -617,6 +625,17 @@ watchEffect(() => {
 }
 </style>
 <style lang="scss" scoped>
+.flow-icon {
+  display: flex;
+  width: 38px;
+  height: 38px;
+  margin-right: 10px;
+  background-color: var(--el-color-primary);
+  border-radius: 0.25rem;
+  align-items: center;
+  justify-content: center;
+}
+
 .category-draggable-model {
   :deep(.el-table__cell) {
     overflow: hidden;

src/views/bpm/model/CategoryDraggableModel.vue

@@ -6,7 +6,7 @@
           class="!w-440px"
           v-model="modelData.key"
           :disabled="!!modelData.id"
-          placeholder="请输入流标标识"
+          placeholder="请输入流程标识，以字母或下划线开头"
         />
         <el-tooltip
           class="item"
@@ -41,7 +41,7 @@
         />
       </el-select>
     </el-form-item>
-    <el-form-item label="流程图标" prop="icon" class="mb-20px">
+    <el-form-item label="流程图标" class="mb-20px">
       <UploadImg v-model="modelData.icon" :limit="1" height="64px" width="64px" />
     </el-form-item>
     <el-form-item label="流程描述" prop="description" class="mb-20px">
@@ -155,7 +155,6 @@ const rules = {
   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' }],
   visible: [{ required: true, message: '是否可见不能为空', trigger: 'blur' }],
   managerUserIds: [{ required: true, message: '流程管理员不能为空', trigger: 'blur' }]

src/views/bpm/model/form/BasicInfo.vue

@@ -285,9 +285,8 @@ const handleSave = async () => {
     } else {
       // 新增场景
       formData.value.id = await ModelApi.createModel(modelData)
-      message.success('新增成功')
       try {
-        await message.confirm('创建流程成功，是否继续编辑？')
+        await message.confirm('流程创建成功，是否继续编辑？')
         // 用户点击继续编辑，跳转到编辑页面
         await nextTick()
         // 先删除当前页签
@@ -317,7 +316,6 @@ const handleDeploy = async () => {
     if (!formData.value.id) {
       await message.confirm('是否确认发布该流程？')
     }
-
     // 校验所有步骤
     await validateAllSteps()
 

src/views/bpm/model/form/index.vue

@@ -58,7 +58,16 @@
                   >
                     <template #default>
                       <div class="flex">
-                        <el-image :src="definition.icon" class="w-32px h-32px" />
+                        <el-image
+                          v-if="definition.icon"
+                          :src="definition.icon"
+                          class="w-32px h-32px"
+                        />
+                        <div v-else class="flow-icon">
+                          <span style="font-size: 12px; color: #fff">{{
+                            sliceName(definition.name,0,2)
+                          }}</span>
+                        </div>
                         <el-text class="!ml-10px" size="large">{{ definition.name }}</el-text>
                       </div>
                     </template>
@@ -88,6 +97,7 @@ import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import { CategoryApi, CategoryVO } from '@/api/bpm/category'
 import ProcessDefinitionDetail from './ProcessDefinitionDetail.vue'
 import { groupBy } from 'lodash-es'
+import { sliceName } from '@/utils/index'
 
 defineOptions({ name: 'BpmProcessInstanceCreate' })
 
@@ -282,13 +292,25 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+.flow-icon {
+  display: flex;
+  width: 32px;
+  height: 32px;
+  margin-right: 10px;
+  background-color: var(--el-color-primary);
+  border-radius: 0.25rem;
+  align-items: center;
+  justify-content: center;
+}
+
 .process-definition-container::before {
-  content: '';
-  border-left: 1px solid #e6e6e6;
   position: absolute;
   left: 20.8%;
   height: 100%;
+  border-left: 1px solid #e6e6e6;
+  content: '';
 }
+
 :deep() {
   .definition-item-card {
     .el-card__body {