From 869f939f0142bcd3ea4fb83e2c965144e0fb0bf6 Mon Sep 17 00:00:00 2001
From: 18226920803 <Liang@1123>
Date: Tue, 9 Jun 2026 12:05:28 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E6=97=A0=E6=B3=95=E4=BF=9D?=
 =?UTF-8?q?=E5=AD=98=E6=B5=81=E7=A8=8B=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 smart-flow-web/src/router/flow/flow.js        |   2 +-
 .../views/flow/definition/definition-form.vue | 578 +++++++++++-------
 .../views/flow/definition/definition-list.vue |  18 +-
 .../src/views/flow/definition/warm-flow.vue   |   9 +-
 4 files changed, 362 insertions(+), 245 deletions(-)

diff --git a/smart-flow-web/src/router/flow/flow.js b/smart-flow-web/src/router/flow/flow.js
index 3531dd5..ffded59 100644
--- a/smart-flow-web/src/router/flow/flow.js
+++ b/smart-flow-web/src/router/flow/flow.js
@@ -7,7 +7,7 @@ export const flowRouters = [
         permissions: ['flow:definition:design'],
         children: [
             {
-                path: 'index/:id(\\d+)',
+                path: 'index/:id',
                 component: () => import('/@/views/flow/definition/warm-flow.vue'),
                 name: 'Design',
                 meta: { title: '流程设计', activeMenu: '/flow/definition' }
diff --git a/smart-flow-web/src/views/flow/definition/definition-form.vue b/smart-flow-web/src/views/flow/definition/definition-form.vue
index 6f76776..d25822a 100644
--- a/smart-flow-web/src/views/flow/definition/definition-form.vue
+++ b/smart-flow-web/src/views/flow/definition/definition-form.vue
@@ -1,262 +1,374 @@
-
 <template>
   <a-modal
-      :title="form.positionId ? '编辑' : '添加'"
-      width="600px"
-      :open="visibleFlag"
-      @cancel="onClose"
-      :maskClosable="false"
-      :destroyOnClose="true"
-      forceRender
+    :title="title"
+    :open="visible"
+    :width="1000"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+    :confirmLoading="submitLoading"
   >
-    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 6 }">
-      <a-tabs v-model:activeKey="tabsValue">
-        <a-tab-pane key="1" tab="基础设置"/>
-        <a-tab-pane key="2" tab="监听器" force-render/>
-      </a-tabs>
-      <div v-show="tabsValue === '1'">
-      <a-form-item label="流程编码" name="flowCode">
-        <a-input style="width: 100%" v-model:value="form.flowCode" placeholder="流程编码" />
-      </a-form-item>
-      <a-form-item label="流程名称" name="flowName">
-        <a-input style="width: 100%" v-model:value="form.flowName" placeholder="流程名称" />
-      </a-form-item>
-      <a-form-item label="流程类别" name="category">
-        <a-input style="width: 100%" v-model:value="form.category" placeholder="流程类别" />
-      </a-form-item>
-        <a-form-item label="审批表单" name="formCustom">
-        <a-select v-model:value="form.formCustom" style="width: 100%"  :allowClear="true">
-          <a-select-option value="N">表单路径</a-select-option>
-        </a-select>
-        </a-form-item>
-        <a-form-item label="审批表单路径" name="formPath" v-if="form.formCustom === 'N'">
-          <a-input style="width: 100%" v-model:value="form.formPath" placeholder="请输入审批表单路径"  />
-        </a-form-item>
-      </div>
-      <div v-show="tabsValue === '2'">
-        <a-form-item name="listenerRows" class="listenerItem">
-          <a-table
-              :dataSource="form.listenerRows"
-              :columns="columns"
-              :pagination="false"
-              size="small"
-          >
-            <template #bodyCell="{ column, record, index }">
-              <template v-if="column.dataIndex === 'listenerType'">
-                <a-form-item
-                    :name="['listenerRows', index, 'listenerType']"
-                    :rules="rules.listenerType"
-                >
-                  <a-select
-                      v-model:value="record.listenerType"
-                      placeholder="请选择类型"
-                  >
-                    <a-select-option value="start">开始</a-select-option>
-                    <a-select-option value="assignment">分派</a-select-option>
-                    <a-select-option value="finish">完成</a-select-option>
-                    <a-select-option value="create">创建</a-select-option>
-                  </a-select>
-                </a-form-item>
-              </template>
-
-              <template v-if="column.dataIndex === 'listenerPath'">
-                <a-form-item
-                    :name="['listenerRows', index, 'listenerPath']"
-                    :rules="rules.listenerPath"
-                >
-                  <a-input
-                      v-model:value="record.listenerPath"
-                      placeholder="请输入路径"
-                  />
-                </a-form-item>
-              </template>
-
-              <template v-if="column.dataIndex === 'action'">
-                <a-button
-                    type="link"
-                    danger
-                    size="small"
-                    @click="handleDeleteRow(index)"
-                >
-                  <template #icon><delete-outlined /></template>
-                </a-button>
-              </template>
+    <el-form ref="formRef" :model="form" class="dialogForm" :rules="rules" label-width="150px" :disabled="disabled">
+      <el-form-item label="流程编码" prop="flowCode">
+        <el-input v-model="form.flowCode" placeholder="请输入流程编码" maxlength="40" show-word-limit />
+      </el-form-item>
+
+      <el-form-item label="流程名称" prop="flowName">
+        <el-input v-model="form.flowName" placeholder="请输入流程名称" maxlength="100" show-word-limit @input="nameChange" />
+      </el-form-item>
+
+      <el-form-item label="设计器模型" prop="modelValue">
+        <el-radio-group v-model="form.modelValue" :disabled="!!definitionId" @change="modelValueChange">
+          <el-radio label="CLASSICS">经典模型</el-radio>
+          <el-radio label="MIMIC">仿钉钉模型
+            <span style="color: #ff4949; margin-left: 50px;">切换后重置节点，保存后不支持修改！</span>
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="流程类别" prop="category">
+        <el-tree-select
+          v-model="form.category"
+          :data="categoryList"
+          :props="{ value: 'id', label: 'name', children: 'children' }"
+          value-key="id"
+          placeholder="请选择流程类别"
+          check-strictly/>
+      </el-form-item>
+
+      <el-form-item label="自定义表单" prop="formCustom">
+        <el-radio-group v-model="form.formCustom">
+          <el-radio label="N">
+              <span class="flex-hc">
+                  否
+                  <el-tooltip class="box-item" effect="dark" placement="top"
+                              content="填写页面地址：如system/process/approve">
+                    <el-icon :size="14" class="ml5">
+                      <WarningFilled />
+                    </el-icon>
+                  </el-tooltip>
+                </span>
+          </el-radio>
+          <el-radio label="Y">
+              <span class="flex-hc">
+                  是
+                  <el-tooltip class="box-item" effect="dark" placement="top"
+                              content="填写自定义表单的唯一标识：如formCode+version">
+                    <el-icon :size="14" class="ml5">
+                      <WarningFilled />
+                    </el-icon>
+                  </el-tooltip>
+                </span>
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="表单路径" prop="formPath" v-if="form.formCustom === 'N'">
+        <el-input v-model="form.formPath" placeholder="请输入审批表单路径" maxlength="100" show-word-limit/>
+      </el-form-item>
+
+      <el-form-item label="自定义表单唯一标识" prop="formPath" v-else-if="form.formCustom === 'Y'">
+        <el-tree-select
+          v-model="form.formPath"
+          :data="formPathList"
+          :props="{ value: 'id', label: 'name', children: 'children' }"
+          value-key="id"
+          placeholder="请选择流程类别"
+          check-strictly/>
+      </el-form-item>
+
+      <el-form-item prop="listenerRows" class="listenerItem">
+        <el-table v-if="form.listenerRows && form.listenerRows.length > 0" :key="form.listenerRows.length" :data="form.listenerRows" style="width: 100%">
+          <el-table-column prop="listenerType" width="150" label="类型">
+            <template #default="scope">
+              <el-form-item :prop="`listenerRows.${scope?.$index}.listenerType`" :rules="rules.listenerType">
+                <el-select v-model="scope.row.listenerType" placeholder="请选择类型">
+                  <el-option label="开始" value="start"></el-option>
+                  <el-option label="分派" value="assignment"></el-option>
+                  <el-option label="完成" value="finish"></el-option>
+                  <el-option label="创建" value="create"></el-option>
+                </el-select>
+              </el-form-item>
             </template>
-          </a-table>
-
-          <a-button
-              type="primary"
-              style="margin-top: 10px"
-              @click="handleAddRow"
-          >
-            增加行
-          </a-button>
-        </a-form-item>
-      </div>
-    </a-form>
-
-    <template #footer>
-      <a-space>
-        <a-button @click="onClose">取消</a-button>
-        <a-button type="primary" @click="onSubmit">保存</a-button>
-      </a-space>
-    </template>
+          </el-table-column>
+
+          <el-table-column prop="listenerPath" label="路径">
+            <template #default="scope">
+              <el-form-item :prop="`listenerRows.${scope?.$index}.listenerPath`" :rules="rules.listenerPath">
+                <el-input v-model="scope.row.listenerPath" placeholder="请输入路径" />
+              </el-form-item>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" width="65" v-if="!disabled">
+            <template #default="scope">
+              <el-button size="small" type="danger" icon="Delete" @click="handleDeleteRow(scope?.$index)" />
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-button v-if="!disabled" style="margin-top: 10px;" type="primary" @click="handleAddRow">增加行</el-button>
+      </el-form-item>
+    </el-form>
+  </a-modal>
+
+  <a-modal title="流程设计"
+           :open="designVisible"
+           width="90%"
+           :footer="null"
+           @cancel="closeDesign">
+    <div style="height: 80vh" class="iframe-wrapper">
+      <iframe :src="designIframeUrl" style="width: 100%; height: 100%" frameborder="0" scrolling="no" class="custom-iframe" />
+    </div>
   </a-modal>
 </template>
-<script setup>
-  import { reactive, ref, nextTick } from 'vue';
-  import _ from 'lodash';
-  import { message } from 'ant-design-vue';
-  import { SmartLoading } from '/@/components/framework/smart-loading';
-  import { definitionApi } from '/@/api/flow/definition-api';
-  import { smartSentry } from '/@/lib/smart-sentry';
-
-  // ------------------------ 事件 ------------------------
-
-  const emits = defineEmits(['reloadList']);
-
-  // ------------------------ 显示与隐藏 ------------------------
-  // 是否显示
-  const visibleFlag = ref(false);
-  // 显示标签页
-  const tabsValue = ref('1');
-
-  const columns = [
-    {
-      title: '类型',
-      dataIndex: 'listenerType',
-      width: 150,
-    },
-    {
-      title: '路径',
-      dataIndex: 'listenerPath',
-    },
-    {
-      title: '操作',
-      dataIndex: 'action',
-      width: 65,
-    },
-  ];
-
-  function handleAddRow() {
-    form.listenerRows.push({
-      listenerType: undefined, // 初始未选择类型
-      listenerPath: ''        // 初始空路径
-    });
-  }
-  function handleDeleteRow(index) {
-    form.listenerRows.splice(index, 1);
-  }
 
-  function show(rowData) {
-    Object.assign(form, formDefault);
-    if (rowData && !_.isEmpty(rowData)) {
-      Object.assign(form, rowData);
+<script setup name="BaseInfo">
+import { ref, getCurrentInstance, watch } from "vue";
+import { useRouter } from "vue-router";
+import { WarningFilled } from "@element-plus/icons-vue";
+import { message } from 'ant-design-vue';
+import { definitionApi } from '/@/api/flow/definition-api';
+import { SmartLoading } from '/@/components/framework/smart-loading';
+import { smartSentry } from '/@/lib/smart-sentry';
+import { useUserStore } from "/@/store/modules/system/user.js";
+
+const router = useRouter();
+const { proxy } = getCurrentInstance();
+const emit = defineEmits(['reloadList']);
+
+const props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  logicJson: {
+    type: Object,
+    default () {
+      return {}
     }
-    if (rowData.listenerType) {
-      const listenerTypes = rowData.listenerType.split(",");
-      const listenerPaths = rowData.listenerPath.split("@@");
-      form.listenerRows = listenerTypes.map((type, index) => ({
-        listenerType: type,
-        listenerPath: listenerPaths[index]
-      }));
-    } else {
-      form.listenerRows = [];
+  },
+  categoryList: {
+    type: Array,
+    default () {
+      return []
     }
-    visibleFlag.value = true;
-    nextTick(() => {
-      formRef.value.clearValidate();
-
-      // 解决弹窗错误信息显示,没有可忽略
-      const domArr = document.getElementsByClassName('ant-modal');
-      if (domArr && domArr.length > 0) {
-        Array.from(domArr).forEach((item) => {
-          if (item.childNodes && item.childNodes.length > 0) {
-            Array.from(item.childNodes).forEach((child) => {
-              if (child.setAttribute) {
-                child.setAttribute('aria-hidden', 'false');
-              }
-            });
-          }
-        });
-      }
-    });
+  },
+  formPathList: {
+    type: Array,
+    default () {
+      return []
+    }
+  },
+  definitionId: {
+    type: String,
+    default () {
+      return null
+    }
+  },
+});
+
+const visible = ref(false);
+const title = ref('新增流程定义');
+const submitLoading = ref(false);
+
+const designVisible = ref(false);
+const designIframeUrl = ref("");
+
+const form = ref({
+  id: null,
+  flowCode: "",
+  flowName: "",
+  modelValue: "",
+  category: "",
+  formCustom: "N",
+  formPath: "",
+  listenerType: "",
+  listenerPath: "",
+  listenerRows: []
+});
+
+watch(() => props.logicJson, newValue => {
+  if (newValue && Object.keys(newValue).length > 0) {
+    Object.assign(form.value, newValue);
+    setListenerData();
   }
+});
 
-  function onClose() {
-    Object.assign(form, formDefault);
-    visibleFlag.value = false;
+const rules = {
+  modelValue: [
+    { required: true, message: "设计器模型不能为空", trigger: "blur" }
+  ],
+  flowCode: [
+    { required: true, message: "流程编码不能为空", trigger: "blur" }
+  ],
+  flowName: [
+    { required: true, message: "流程名称不能为空", trigger: "blur" }
+  ],
+  formCustom: [
+    { required: true, message: "请选择审批表单是否自定义", trigger: "change" }
+  ],
+  listenerType: [
+    { required: true, message: '监听器不能为空', trigger: ['change', 'blur'] }
+  ],
+  listenerPath: [
+    { required: true, message: '监听器不能为空', trigger: ['change', 'blur'] }
+  ]
+};
+
+const formRef = ref();
+
+function setListenerData() {
+  if (form.value.listenerType) {
+    const listenerTypes = form.value.listenerType.split(",");
+    const listenerPaths = form.value.listenerPath.split("@@");
+    form.value.listenerRows = listenerTypes.map((type, index) => ({
+      listenerType: type,
+      listenerPath: listenerPaths[index]
+    }));
+  } else {
+    form.value.listenerRows = [];
   }
+}
 
-  // ------------------------ 表单 ------------------------
+function handleAddRow() {
+  form.value.listenerRows.push({ listenerType: "", listenerPath: "" });
+  formRef.value?.clearValidate("listenerRows");
+}
 
-  // 组件ref
-  const formRef = ref();
+function handleDeleteRow(index) {
+  form.value.listenerRows.splice(index, 1);
+}
 
-  const formDefault = {
-    id: undefined,
-    flowCode: undefined,
-    flowName: undefined,
-    category: undefined,
-    formCustom: 'N',
-    formPath: undefined,
-    listenerRows: [], // 新增初始化监听器数组
-  };
+function validate() {
+  return new Promise((resolve) => {
+    proxy.$nextTick(() => {
+      proxy.$refs.formRef.validate(valid => {
+        resolve(valid);
+      });
+    });
+  });
+}
 
-  let form = reactive({ ...formDefault });
+function nameChange(flowName) {
+  proxy.$emit('update:flow-name', flowName);
+}
 
-  const rules = {
-    flowCode: [{ required: true, message: '请输入流程编码' }],
-    flowName: [{ required: true, message: '请输入流程名称' }],
-    formCustom: [{ required: true, message: '请选择审批表单' }],
-    listenerType: [{ required: true, message: '监听器不能为空', trigger: ['change', 'blur'] }],
-    listenerPath: [{ required: true, message: '监听器不能为空', trigger: ['change', 'blur'] }]
-  };
+function modelValueChange() {
+  proxy.$emit('update:model-value');
+}
 
-  // 点击确定，验证表单
-  async function onSubmit() {
-    try {
-      await formRef.value.validateFields();
-      form.listenerType = form.listenerRows.map(row => row.listenerType).join(",")
-      form.listenerPath = form.listenerRows.map(row => row.listenerPath).join("@@")
-      console.log(form)
-      save();
-    } catch (err) {
-      message.error('参数验证错误，请仔细填写表单数据!');
-    }
+function getFormData() {
+  form.value.listenerType = form.value.listenerRows.map(row => row.listenerType).join(",");
+  form.value.listenerPath = form.value.listenerRows.map(row => row.listenerPath).join("@@");
+  return form.value;
+}
+
+function show(data) {
+  if (data && data.id) {
+    title.value = '编辑流程定义';
+    Object.assign(form.value, data);
+    setListenerData();
+    visible.value = true;
+  } else {
+    router.push({ path: "/flow/flow-design/index/new" });
   }
+}
 
-  // 新建、编辑API
-  async function save() {
+function resetForm() {
+  form.value = {
+    id: null,
+    flowCode: "",
+    flowName: "",
+    modelValue: "",
+    category: "",
+    formCustom: "N",
+    formPath: "",
+    listenerType: "",
+    listenerPath: "",
+    listenerRows: []
+  };
+}
+
+function handleCancel() {
+  visible.value = false;
+  resetForm();
+}
+
+async function handleSubmit() {
+  try {
+    const valid = await validate();
+    if (!valid) return;
+
+    submitLoading.value = true;
     SmartLoading.show();
-    try {
-      if (form.id) {
-        await definitionApi.update(form);
-      } else {
-        await definitionApi.add(form);
+
+    const formData = getFormData();
+    
+    if (formData.id) {
+      await definitionApi.update(formData);
+      message.success('修改成功');
+    } else {
+      const result = await definitionApi.add(formData);
+      message.success('新增成功');
+      
+      visible.value = false;
+      resetForm();
+      
+      if (result.data && result.data.id) {
+        designIframeUrl.value = import.meta.env.VITE_APP_API_URL + 
+          `/warm-flow-ui/index.html?id=${result.data.id}&disabled=false&Authorization=Bearer ` + 
+          useUserStore().getToken + 
+          '&clientid=' + import.meta.env.VITE_APP_CLIENT_ID;
+        designVisible.value = true;
       }
-      message.success('操作成功');
-      emits('reloadList');
-      onClose();
-    } catch (err) {
-      smartSentry.captureError(err);
-    } finally {
-      SmartLoading.hide();
+      return;
     }
+
+    visible.value = false;
+    resetForm();
+    emit('reloadList');
+  } catch (e) {
+    smartSentry.captureError(e);
+  } finally {
+    submitLoading.value = false;
+    SmartLoading.hide();
   }
+}
+
+function closeDesign() {
+  designVisible.value = false;
+  emit('reloadList');
+}
+
+defineExpose({ getFormData, validate, show });
 
-  defineExpose({
-    show,
-  });
 </script>
+
 <style scoped>
-/* 关键优化点：覆盖表单项和表格边距 */
-.listenerItem :deep() .ant-form-item {
-  margin-top: 5px !important;
-  margin-bottom: 5px !important;
+:deep(.Tabs) {
+  margin-top: -20px;
+  box-shadow: none;
+  border-bottom: 0;
+}
+:deep(.Tabs .el-tabs__content) {
+  display: none;
+}
+:deep(.Tabs .el-tabs__item.is-active) {
+  margin-left: 0;
+  border-top: 1px solid var(--el-border-color);
+  margin-top: 0;
+}
+.dialogForm {
+  border-top: 0;
+  padding: 15px;
+  width: 1000px;
+  margin: 50px auto;
+}
+:deep(.listenerItem .el-form-item__label) {
+  float: none;
+  display: inline-block;
+  text-align: left;
 }
-.listenerItem :deep() .ant-table {
-  margin-top: 5px !important;
-  margin-bottom: 5px !important;
+:deep(.listenerItem .el-form-item__content) {
+  margin-left: 0 !important;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/smart-flow-web/src/views/flow/definition/definition-list.vue b/smart-flow-web/src/views/flow/definition/definition-list.vue
index 5d16800..f877f62 100644
--- a/smart-flow-web/src/views/flow/definition/definition-list.vue
+++ b/smart-flow-web/src/views/flow/definition/definition-list.vue
@@ -218,6 +218,13 @@
   import {useRouter} from "vue-router";
   import {useUserStore} from "/@/store/modules/system/user.js";
 
+  // ---------------------------- 添加/修改 ----------------------------
+  const formRef = ref();
+
+  function showForm(data) {
+    formRef.value.show(data);
+  }
+
   // ---------------------------- 表格列 ----------------------------
 
   const columns = ref([
@@ -318,14 +325,7 @@
 
   onMounted(queryData);
 
-  // ---------------------------- 添加/修改 ----------------------------
-  const formRef = ref();
-
-  function showForm(data) {
-    formRef.value.show(data);
-  }
-
-  // 响应式数据
+  // ---------------------------- 导入相关 ----------------------------
   const upload = reactive({
     open: false,
     isUploading: false,
@@ -588,4 +588,4 @@
     flowChart.value = false;
   };
 
-</script>
+</script>
\ No newline at end of file
diff --git a/smart-flow-web/src/views/flow/definition/warm-flow.vue b/smart-flow-web/src/views/flow/definition/warm-flow.vue
index b34bd1c..b2715f0 100644
--- a/smart-flow-web/src/views/flow/definition/warm-flow.vue
+++ b/smart-flow-web/src/views/flow/definition/warm-flow.vue
@@ -10,7 +10,12 @@ import {useUserStore} from "/@/store/modules/system/user.js";
 const { proxy } = getCurrentInstance();
 import {getCurrentInstance, onMounted, onUnmounted, ref} from 'vue';
 
-const iframeUrl = ref(import.meta.env.VITE_APP_API_URL + `/warm-flow-ui/index.html?id=${proxy.$route.params.id}&disabled=${proxy.$route.query.disabled}&Authorization=Bearer ` + useUserStore().getToken);
+const routeId = proxy.$route.params.id;
+const isNew = routeId === 'new';
+const iframeUrl = ref(isNew 
+  ? import.meta.env.VITE_APP_API_URL + `/warm-flow-ui/index.html?disabled=false&Authorization=Bearer ` + useUserStore().getToken
+  : import.meta.env.VITE_APP_API_URL + `/warm-flow-ui/index.html?id=${routeId}&disabled=false&Authorization=Bearer ` + useUserStore().getToken
+);
 
 onMounted(() => {
   window.addEventListener("message", handleMessage);
@@ -40,4 +45,4 @@ function close() {
   width: 100%;
   height: calc(100vh - 84px);
 }
-</style>
+</style>
\ No newline at end of file