Merge branch 'dev' of https://fcd.gdyditc.com/itc-framework/ma/2024/front into dev-zhaoDN/global-workflow-setting

src/api/actHiTaskinst/index.ts

@@ -0,0 +1,87 @@
+import { ActHiTaskinstPageModel, ActHiTaskinstPageParams, ActHiTaskinstPageResult } from './model/ActHiTaskinstModel';
+import { defHttp } from '/@/utils/http/axios';
+import { ErrorMessageMode } from '/#/axios';
+
+enum Api {
+  Page = '/dev/actHiTaskinst/page',
+  List = '/dev/actHiTaskinst/list',
+  Info = '/dev/actHiTaskinst/info',
+  ActHiTaskinst = '/dev/actHiTaskinst',
+  
+  
+}
+
+/**
+ * @description: 查询ActHiTaskinst分页列表
+ */
+export async function getActHiTaskinstPage(params: ActHiTaskinstPageParams, mode: ErrorMessageMode = 'modal') {
+  return defHttp.get<ActHiTaskinstPageResult>(
+    {
+      url: Api.Page,
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}
+
+/**
+ * @description: 获取ActHiTaskinst信息
+ */
+export async function getActHiTaskinst(id: String, mode: ErrorMessageMode = 'modal') {
+  return defHttp.get<ActHiTaskinstPageModel>(
+    {
+      url: Api.Info,
+      params: { id },
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}
+
+/**
+ * @description: 新增ActHiTaskinst
+ */
+export async function addActHiTaskinst(actHiTaskinst: Recordable, mode: ErrorMessageMode = 'modal') {
+  return defHttp.post<boolean>(
+    {
+      url: Api.ActHiTaskinst,
+      params: actHiTaskinst,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}
+
+/**
+ * @description: 更新ActHiTaskinst
+ */
+export async function updateActHiTaskinst(actHiTaskinst: Recordable, mode: ErrorMessageMode = 'modal') {
+  return defHttp.put<boolean>(
+    {
+      url: Api.ActHiTaskinst,
+      params: actHiTaskinst,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}
+
+/**
+ * @description: 删除ActHiTaskinst（批量删除）
+ */
+export async function deleteActHiTaskinst(ids: string[], mode: ErrorMessageMode = 'modal') {
+  return defHttp.delete<boolean>(
+    {
+      url: Api.ActHiTaskinst,
+      data: ids,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}

src/api/actHiTaskinst/model/ActHiTaskinstModel.ts

@@ -0,0 +1,54 @@
+import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';
+
+/**
+ * @description: ActHiTaskinst分页参数 模型
+ */
+export interface ActHiTaskinstPageParams extends BasicPageParams {
+  id: string;
+
+  taskDefKey: string;
+
+  procDefKey: string;
+
+  procDefId: string;
+
+  rootProcInstId: string;
+
+  procInstId: string;
+
+  executionId: string;
+
+  actInstId: string;
+
+  name: string;
+}
+
+/**
+ * @description: ActHiTaskinst分页返回值模型
+ */
+export interface ActHiTaskinstPageModel {
+  id: string;
+
+  taskDefKey: string;
+
+  procDefKey: string;
+
+  procDefId: string;
+
+  rootProcInstId: string;
+
+  procInstId: string;
+
+  executionId: string;
+
+  actInstId: string;
+
+  name: string;
+}
+
+0;
+
+/**
+ * @description: ActHiTaskinst分页返回值结构
+ */
+export type ActHiTaskinstPageResult = BasicFetchResult<ActHiTaskinstPageModel>;

src/api/auditOpt/auditRecord/index.ts

@@ -0,0 +1,154 @@
+import { XjrWorkflowApproveRecordPageModel, XjrWorkflowApproveRecordPageParams, XjrWorkflowApproveRecordPageResult } from './model/AuditRecordModel';
+import { defHttp } from '/@/utils/http/axios';
+import { ErrorMessageMode } from '/#/axios';
+
+enum Api {
+  Page = '/auditOpt/auditRecord/page',
+  List = '/auditOpt/auditRecord/list',
+  Info = '/auditOpt/auditRecord/info',
+  XjrWorkflowApproveRecord = '/auditOpt/auditRecord',
+  GetApproveRecord = '/workflow/adminOperation/getAllApproveRecord',
+  DelApproveRecord = '/auditOpt/auditRecord',
+  AddApproveRcord = '/workflow/adminOperation/addApproveRecord',
+  UpdateApproveRcord = '/workflow/adminOperation/updateApproveRecord',
+}
+
+/**
+ * @description: 查询XjrWorkflowApproveRecord分页列表
+ */
+export async function getXjrWorkflowApproveRecordPage(params: XjrWorkflowApproveRecordPageParams, mode: ErrorMessageMode = 'modal') {
+  return defHttp.get<XjrWorkflowApproveRecordPageResult>(
+    {
+      url: Api.Page,
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}
+
+/**
+ * @description: 获取XjrWorkflowApproveRecord信息
+ */
+export async function getXjrWorkflowApproveRecord(id: String, mode: ErrorMessageMode = 'modal') {
+  return defHttp.get<XjrWorkflowApproveRecordPageModel>(
+    {
+      url: Api.Info,
+      params: { id },
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}
+
+/**
+ * @description: 新增XjrWorkflowApproveRecord
+ */
+export async function addXjrWorkflowApproveRecord(xjrWorkflowApproveRecord: Recordable, mode: ErrorMessageMode = 'modal') {
+  return defHttp.post<boolean>(
+    {
+      url: Api.XjrWorkflowApproveRecord,
+      params: xjrWorkflowApproveRecord,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}
+
+/**
+ * @description: 更新XjrWorkflowApproveRecord
+ */
+export async function updateXjrWorkflowApproveRecord(xjrWorkflowApproveRecord: Recordable, mode: ErrorMessageMode = 'modal') {
+  return defHttp.put<boolean>(
+    {
+      url: Api.XjrWorkflowApproveRecord,
+      params: xjrWorkflowApproveRecord,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}
+
+/**
+ * @description: 删除XjrWorkflowApproveRecord（批量删除）
+ */
+export async function deleteXjrWorkflowApproveRecord(ids: string[], mode: ErrorMessageMode = 'modal') {
+  return defHttp.delete<boolean>(
+    {
+      url: Api.XjrWorkflowApproveRecord,
+      data: ids,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}
+
+/**
+ * @description: 获取所有审批意见
+ */
+export async function getAllApproveRecord(
+  params: any,
+  mode: ErrorMessageMode = 'modal',
+) {
+  return defHttp.get<any>(
+    {
+      url: Api.GetApproveRecord,
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}
+
+/**
+ * @description: 删除审批意见
+ */
+export async function deleteApproveRecord(params:any, mode: ErrorMessageMode = 'modal') {
+  return defHttp.delete<boolean>(
+    {
+      url: Api.DelApproveRecord,
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}
+
+/**
+ * @description: 新增审批意见
+ */
+
+export async function addApproveRecord(params:any, mode: ErrorMessageMode = 'modal') {
+  return defHttp.post<boolean>(
+    {
+      url: Api.AddApproveRcord,
+      params ,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}
+
+/**
+ * @description: 新增审批意见
+ */
+
+export async function updateApproveRecord(params:any, mode: ErrorMessageMode = 'modal') {
+  return defHttp.post<boolean>(
+    {
+      url: Api.UpdateApproveRcord,
+      params ,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}

src/api/auditOpt/auditRecord/model/auditRecordModel.ts

@@ -0,0 +1,77 @@
+import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';
+
+/**
+ * @description: XjrWorkflowApproveRecord分页参数 模型
+ */
+export interface XjrWorkflowApproveRecordPageParams extends BasicPageParams {
+  taskName: string;
+
+  approveTimeStart: string;
+  approveTimeEnd: string;
+
+  approveUserId: string;
+
+  approveComment: string;
+}
+
+/**
+ * @description: XjrWorkflowApproveRecord分页返回值模型
+ */
+export interface XjrWorkflowApproveRecordPageModel {
+  id: string;
+
+  taskName: string;
+
+  approveUserId: string;
+
+  approveTime: string;
+
+  approveComment: string;
+}
+
+/**
+ * @description: XjrWorkflowApproveRecord表类型
+ */
+export interface XjrWorkflowApproveRecordModel {
+  id: number;
+
+  schemaId: number;
+
+  processId: string;
+
+  taskId: string;
+
+  taskDefinitionKey: string;
+
+  taskName: string;
+
+  approveType: number;
+
+  approveResult: string;
+
+  approveComment: string;
+
+  approveUserId: number;
+
+  approveTime: string;
+
+  approveStamp: number;
+
+  serialNumber: number;
+
+  currentProgress: number;
+
+  startUserId: number;
+
+  approveUserPostId: number;
+
+  tenantId: number;
+
+  deleteMark: number;
+}
+
+/**
+ * @description: XjrWorkflowApproveRecord分页返回值结构
+ */
+export type XjrWorkflowApproveRecordPageResult =
+  BasicFetchResult<XjrWorkflowApproveRecordPageModel>;

src/api/formChange/changeLogDetail/index.ts

@@ -0,0 +1,117 @@
+import {FormChangeRecordItemPageModel, FormChangeRecordItemPageParams, FormChangeRecordItemPageResult} from './model/ChangeLogDetailModel';
+import {defHttp} from '/@/utils/http/axios';
+import {ErrorMessageMode} from '/#/axios';
+
+enum Api {
+    Page = '/formChange/changeLogDetail/page',
+    List = '/formChange/changeLogDetail/list',
+    Info = '/formChange/changeLogDetail/info',
+    FormChangeRecordItem = '/formChange/changeLogDetail',
+    getRecordDetail = '/formChange/changeLogDetail/queryByRecordId'
+}
+
+/**
+ * @description: 查询FormChangeRecordItem分页列表
+ */
+export async function getFormChangeRecordItemPage(params: FormChangeRecordItemPageParams, mode: ErrorMessageMode = 'modal') {
+    return defHttp.get<FormChangeRecordItemPageResult>(
+        {
+            url: Api.Page,
+            params,
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}
+
+/**
+ * @description: 获取FormChangeRecordItem信息
+ */
+export async function getFormChangeRecordItem(id: String, mode: ErrorMessageMode = 'modal') {
+    return defHttp.get<FormChangeRecordItemPageModel>(
+        {
+            url: Api.Info,
+            params: {id},
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}
+
+/**
+ * @description: 新增FormChangeRecordItem
+ */
+export async function addFormChangeRecordItem(formChangeRecordItem: Recordable, mode: ErrorMessageMode = 'modal') {
+    return defHttp.post<boolean>(
+        {
+            url: Api.FormChangeRecordItem,
+            params: formChangeRecordItem,
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}
+
+/**
+ * @description: 更新FormChangeRecordItem
+ */
+export async function updateFormChangeRecordItem(formChangeRecordItem: Recordable, mode: ErrorMessageMode = 'modal') {
+    return defHttp.put<boolean>(
+        {
+            url: Api.FormChangeRecordItem,
+            params: formChangeRecordItem,
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}
+
+/**
+ * @description: 删除FormChangeRecordItem（批量删除）
+ */
+export async function deleteFormChangeRecordItem(ids: string[], mode: ErrorMessageMode = 'modal') {
+    return defHttp.delete<boolean>(
+        {
+            url: Api.FormChangeRecordItem,
+            data: ids,
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}
+
+
+/**
+ * @description: 查询FormChangeRecordItem分页列表
+ */
+export async function getRecordDetail(params: any, mode: ErrorMessageMode = 'modal') {
+    return defHttp.get<FormChangeRecordItemPageResult>(
+        {
+            url: Api.getRecordDetail,
+            params,
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}
+
+/**
+ * @description: 查询FormChangeRecordItem分页列表
+ */
+export async function getFormChangeRecordItemList(params: any, mode: ErrorMessageMode = 'modal') {
+    return defHttp.get<FormChangeRecordItemPageResult>(
+        {
+            url: Api.Page,
+            params,
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}

src/api/formChange/changeLogDetail/model/ChangeLogDetailModel.ts

@@ -0,0 +1,97 @@
+import {BasicPageParams, BasicFetchResult} from '/@/api/model/baseModel';
+
+/**
+ * @description: FormChangeRecordItem分页参数 模型
+ */
+export interface FormChangeRecordItemPageParams extends BasicPageParams {
+    operationId: string;
+
+    formType: string;
+
+    formCode: string;
+
+    dataId: string;
+
+    fieldCode: string;
+
+    fieldName: string;
+
+    fieldType: string;
+
+    oldValue: string;
+
+    newValue: string;
+
+    changeType: string;
+}
+
+/**
+ * @description: FormChangeRecordItem分页返回值模型
+ */
+export interface FormChangeRecordItemPageModel {
+    id: string;
+
+    operationId: string;
+
+    formType: string;
+
+    formCode: string;
+
+    dataId: string;
+
+    fieldCode: string;
+
+    fieldName: string;
+
+    fieldType: string;
+
+    oldValue: string;
+
+    newValue: string;
+
+    changeType: string;
+}
+
+/**
+ * @description: FormChangeRecordItem表类型
+ */
+export interface FormChangeRecordItemModel {
+    id: number;
+
+    operationId: number;
+
+    formType: string;
+
+    formCode: string;
+
+    dataId: number;
+
+    fieldCode: string;
+
+    fieldName: string;
+
+    fieldType: string;
+
+    oldValue: string;
+
+    newValue: string;
+
+    changeType: string;
+
+    createUserId: number;
+
+    createDate: string;
+
+    modifyUserId: number;
+
+    modifyDate: string;
+
+    deleteMark: number;
+
+    enabledMark: number;
+}
+
+/**
+ * @description: FormChangeRecordItem分页返回值结构
+ */
+export type FormChangeRecordItemPageResult = BasicFetchResult<FormChangeRecordItemPageModel>;

src/api/formChange/formChangeLog/index.ts

@@ -0,0 +1,102 @@
+import {FormChangeRecordPageModel, FormChangeRecordPageParams, FormChangeRecordPageResult} from './model/FormChangeLogModel';
+import {defHttp} from '/@/utils/http/axios';
+import {ErrorMessageMode} from '/#/axios';
+
+enum Api {
+    Page = '/formChange/formChangeLog/page',
+    List = '/formChange/formChangeLog/list',
+    Info = '/formChange/formChangeLog/info',
+    FormChangeRecord = '/formChange/formChangeLog',
+    getRecordList = '/formChange/formChangeLog/queryRecord',
+
+}
+
+/**
+ * @description: 查询FormChangeRecord分页列表
+ */
+export async function getFormChangeRecordPage(params: FormChangeRecordPageParams, mode: ErrorMessageMode = 'modal') {
+    return defHttp.get<FormChangeRecordPageResult>(
+        {
+            url: Api.Page,
+            params,
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}
+
+/**
+ * @description: 获取FormChangeRecord信息
+ */
+export async function getFormChangeRecord(id: String, mode: ErrorMessageMode = 'modal') {
+    return defHttp.get<FormChangeRecordPageModel>(
+        {
+            url: Api.Info,
+            params: {id},
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}
+
+/**
+ * @description: 新增FormChangeRecord
+ */
+export async function addFormChangeRecord(formChangeRecord: Recordable, mode: ErrorMessageMode = 'modal') {
+    return defHttp.post<boolean>(
+        {
+            url: Api.FormChangeRecord,
+            params: formChangeRecord,
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}
+
+/**
+ * @description: 更新FormChangeRecord
+ */
+export async function updateFormChangeRecord(formChangeRecord: Recordable, mode: ErrorMessageMode = 'modal') {
+    return defHttp.put<boolean>(
+        {
+            url: Api.FormChangeRecord,
+            params: formChangeRecord,
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}
+
+/**
+ * @description: 删除FormChangeRecord（批量删除）
+ */
+export async function deleteFormChangeRecord(ids: string[], mode: ErrorMessageMode = 'modal') {
+    return defHttp.delete<boolean>(
+        {
+            url: Api.FormChangeRecord,
+            data: ids,
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}
+
+/**
+ * @description: 获取变更数据列表
+ */
+export async function getRecordList(params: any, mode: ErrorMessageMode = 'modal') {
+    return defHttp.get<FormChangeRecordPageModel>(
+        {
+            url: Api.getRecordList,
+            params,
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}

src/api/formChange/formChangeLog/model/FormChangeLogModel.ts

@@ -0,0 +1,48 @@
+import {BasicPageParams, BasicFetchResult} from '/@/api/model/baseModel';
+
+/**
+ * @description: FormChangeRecord分页参数 模型
+ */
+export interface FormChangeRecordPageParams extends BasicPageParams {
+    formId: string;
+
+    formDataId: string;
+
+    ipAddress: string;
+
+    changeReason: string;
+
+    version: string;
+
+    createUserName : string;
+
+    createDate: string;
+}
+
+/**
+ * @description: FormChangeRecord分页返回值模型
+ */
+export interface FormChangeRecordPageModel {
+    id: string;
+
+    formId: string;
+
+    formDataId: string;
+
+    ipAddress: string;
+
+    changeReason: string;
+
+    version: string;
+
+    createUserName : string;
+
+    createDate: string;
+}
+
+0;
+
+/**
+ * @description: FormChangeRecord分页返回值结构
+ */
+export type FormChangeRecordPageResult = BasicFetchResult<FormChangeRecordPageModel>;

src/api/workflow/adminOperation.ts

@@ -0,0 +1,100 @@
+import { defHttp } from '/@/utils/http/axios';
+
+import { ErrorMessageMode } from '/#/axios';
+
+enum Api {
+  UpdatedWorkFlow = '/workflow/adminOperation/updateFormVariables',
+  GetProcessNode = '/workflow/execute/getAllTaskNodes',
+  ChangeProcessNode = '/workflow/adminOperation/processDesignatedNode',
+  setSign='/workflow/adminOperation/set-sign',
+  setAssignee = '/workflow/adminOperation/set-assignee',
+}
+/**
+ * @description: 更新流程变量
+ */
+
+export async function updateWorkflow(params:any, mode: ErrorMessageMode = 'modal') {
+  return defHttp.post<boolean>(
+    {
+      url: Api.UpdatedWorkFlow,
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}
+
+/**
+ * @description: 获取该流程下所有用户节点
+ */
+export async function getProcessUserNodes(
+  params: any,
+  mode: ErrorMessageMode = 'modal',
+) {
+  return defHttp.post<any>(
+    {
+      url: Api.GetProcessNode,
+      params,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}
+
+/**
+ * @description: 流程流转
+ */
+
+export async function SetChangeProcessNode(params:any, mode: ErrorMessageMode = 'modal') {
+  return defHttp.post<boolean>(
+    {
+      url: Api.ChangeProcessNode,
+      params ,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}
+
+/**
+ * @description: 加签减签
+ */
+
+export async function postSetSign(
+  schemaId: string,
+  taskId: string,
+  userIds: Array<string>,
+  addUserIds: Array<string>,
+  subUserIds: Array<string>,
+  mode: ErrorMessageMode = 'modal',
+) {
+  return defHttp.post<boolean>(
+    {
+      url: Api.setSign,
+      params: { schemaId, taskId, userIds, addUserIds, subUserIds},
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}
+
+
+/**
+ * @description: 修改审批人
+ */
+
+export async function postSetAssignee(params:any, mode: ErrorMessageMode = 'modal') {
+  return defHttp.post<boolean>(
+    {
+      url: Api.setAssignee,
+      params ,
+    },
+    {
+      errorMessageMode: mode,
+    },
+  );
+}

src/components/SecondDev/OpinionDialogSelected.vue

@@ -0,0 +1,387 @@
+<template>
+    <a-modal :mask-closable="false" :title="dialogTitle" :visible="isOpen" :width="500" centered class="geg"
+        @cancel="onClickCancel">
+        <template #footer>
+            <a-button :disabled="loading || isStart" @click="onClickCancel">{{ isStart ? '请注意流程已发起' : '取消' }}</a-button>
+            <a-button :loading="loading" type="primary" @click="onClickOK">确定</a-button>
+        </template>
+        <div class="dialog-wrap">
+            <a-form :label-col="{ span: 6 }" :model="formState" autocomplete="off">
+                <a-form-item v-if="_action === 'agree'" label="下一节点" name="nextNodeName">
+                    <span>{{ getNextNodesName() }}</span>
+                </a-form-item>
+                <!--选择任意节点 start-->
+                <a-form-item v-if="_action === 'select'" label="审批节点" name="selectNextNodeName">
+                    <a-select v-model:value="selected.taskId" :options="allTaskNodes" placeholder="请选择审批节点"
+                        :filterOption="search" :field-names="{ label: 'taskName', value: 'taskId' }"
+                        :disabled="editable"></a-select>
+                </a-form-item>
+                <a-form-item v-if="_action === 'select'" label="审批人">
+                    <SelectUser :selectedIds="selected.userId" :multiple="selected.multiple" @change="getUserList"
+                        placeholder="请选择审核人">
+                        <a-input v-model:value="selected.userName" placeholder="请选择审批人" :disabled="editable" />
+                    </SelectUser>
+                </a-form-item>
+                <a-form-item v-if="_action === 'select' && selected.choseTime" label="审批时间">
+                    <a-date-picker show-time format="YYYY-MM-DD HH:mm:ss" placeholder="请选择时间"
+                        v-model:value="selected.time" @change="onChange" @ok="onOk" />
+                </a-form-item>
+                <!--选择任意节点 end-->
+                <template v-for="node in flowNextNodes">
+                    <a-form-item v-if="_action === 'agree' && !isEnd"
+                        :label="flowNextNodes.length > 1 ? node.activityName + '审批人' : '审批人'">
+                        <a-select v-show="node.chooseAssign" v-model:value="node.assignees"
+                            :options="node.nextAssignees" :placeholder="'请选择' + node.activityName + '的审批人'"
+                            max-tag-count="responsive" mode="multiple" :filterOption="search"></a-select>
+                        <span v-show="!node.chooseAssign">{{ getAssigneeText(node) }}</span>
+                    </a-form-item>
+                </template>
+
+                <a-form-item v-if="_action === 'reject'" label="退回至" name="rejectNode">
+                    <a-select v-model:value="rejectNodeId">
+                        <a-select-option v-for="(item, index) in rejectNodeList" :key="index"
+                            :value="item.activityId">{{
+                                item.activityName }}</a-select-option>
+                    </a-select>
+                </a-form-item>
+                <!--选择任意节点：填写备注-->
+                <a-form-item v-if="_action === 'select'" :label="selected.choseTime ? '审批意见' : '备注'"
+                    name="selectOpinion">
+                    <a-dropdown placement="bottom" v-if="selected.choseTime">
+                        <a-button type="link" class="opinion-but">常用审批意见</a-button>
+                        <template #overlay>
+                            <a-menu>
+                                <a-menu-item v-for="item in normalOpinionList" @click="clickMenu(item.text)">
+                                    <a href="javascript:;">{{ item.text }}</a>
+                                </a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                    <a-textarea v-model:value="selected.opinion" :maxlength="200" :rows="3" style="margin-top: 35px;"
+                        placeholder="请输入内容，不超过200字" :rules="[{ required: true, message: '必须填写!' }]" />
+                </a-form-item>
+                <!--选择任意节点：填写备注-->
+                <a-form-item v-if="_action != 'select'" label="审批意见" name="opinion"
+                    :rules="[{ required: true, message: '审批意见必须填写!' }]">
+                    <a-dropdown placement="bottom">
+                        <a-button type="link" class="opinion-but">常用审批意见</a-button>
+                        <template #overlay>
+                            <a-menu>
+                                <a-menu-item v-for="item in normalOpinionList" @click="clickMenu(item.text)">
+                                    <a href="javascript:;">{{ item.text }}</a>
+                                </a-menu-item>
+                            </a-menu>
+                        </template>
+                    </a-dropdown>
+                    <a-textarea v-model:value="formState.opinion" :maxlength="200" :rows="3" style="margin-top: 35px;"
+                        placeholder="请输入审批意见，不超过200字" />
+                </a-form-item>
+            </a-form>
+        </div>
+    </a-modal>
+</template>
+
+<script setup>
+import { computed, reactive, ref } from 'vue';
+import { getRejectNodeList } from '/@/api/workflow/task';
+import { getUserMulti } from '/@/api/system/user';
+import { SelectUser } from '/@/components/SelectOrganizational/index';
+import { message, Dropdown } from 'ant-design-vue';
+import dayjs, { Dayjs } from 'dayjs';
+
+const aDropdown = Dropdown;
+
+const dialogTitle = ref('审批');
+const isOpen = ref(false);
+const rejectNodeList = ref([]);
+const rejectNodeId = ref('');
+const loading = ref(false);
+const isEnd = ref(false);
+const isStart = ref(false);
+
+let _action = ref('agree');
+let _processId = '';
+let _taskId = '';
+let flowNextNodes = ref([]);
+let allTaskNodes = ref([]);
+let selectedNode = ref('');
+let _callback = null;
+let _onCancel = null;
+const normalOpinionList = [
+    {
+        text: '请批准。'
+    },
+    {
+        text: '同意。'
+    },
+    {
+        text: '批准。'
+    },
+    {
+        text: '不同意。'
+    },
+    {
+        text: '请修改。'
+    }
+]
+const formState = reactive({
+    opinion: '',
+    opinionList: ['同意。', '请领导审批。']
+});
+function clickMenu(val) {
+    formState.opinion = val
+    selected.opinion = val
+}
+
+const selected = reactive({
+    taskId: '',
+    userId: [],
+    userName: '',
+    opinion: '',
+    selectedList: [],
+    time: '',
+    choseTime: false,
+    multiple: true
+})
+
+const editable = ref(false);
+
+const taskName = computed(() => {
+    let name = allTaskNodes.value.map((ele) => {
+        if (ele.taskId === selected.taskId) {
+            return ele.taskName
+        }
+    })
+    return name;
+})
+
+function getAssigneeText(node) {
+    // 注意这里用的是下拉框的数据结构 所以字段是value和label
+    return (node.nextAssignees || [])
+        .filter((item) => node.assignees.includes(item.value))
+        .map((item) => item.label)
+        .join('、');
+}
+
+function getNextNodesName() {
+    return flowNextNodes.value.length > 1 ? '多个并行节点' : flowNextNodes.value[0].activityName;
+}
+
+function toggleDialog({ isClose, isCreateFlow, action, callback, rejectCancel, processId, taskId, nextNodes, schemaId, choseTime, title, multiple, taskNode, edit, record } = {}) {
+    if (isClose) {
+        isOpen.value = false;
+        loading.value = false;
+        return;
+    }
+    isOpen.value = true;
+    _action.value = action;
+    _callback = callback;
+    _onCancel = rejectCancel;
+    _processId = processId;
+    _taskId = taskId;
+    flowNextNodes.value = nextNodes;
+    isStart.value = isCreateFlow;
+    formState.opinion = '';
+    dialogTitle.value = title ? title : '审批';
+    selected.choseTime = choseTime;
+    selected.multiple = multiple == false ? multiple : true;
+    editable.value = edit ? edit : false
+
+    if (action === 'select') {
+        allTaskNodes.value = taskNode
+        console.log(11111111111, taskNode);
+        console.log(22222222222, allTaskNodes);
+    }
+
+    if (taskId)
+        selected.taskId = taskId
+
+    if (record != null) {
+        console.log(record);
+        selected.selectedList = record.approveUserId
+        selected.opinion = record.approveComment
+        selected.time = dayjs(record.approveTime, 'YYYY-MM-DD HH:mm:ss')
+        selected.userName = record.approveUserName
+    }
+    if (nextNodes && nextNodes.length) {
+        // 下一个节点唯一时（可能有并行节点）
+        const nNode = nextNodes[0];
+        //formState.nextNodeName = nNode.activityName;
+        isEnd.value = nNode.isEnd;
+        nextNodes.forEach((nNode) => {
+            if (!nNode.userList?.length) {
+                return;
+            }
+            const selected = [];
+            nNode.nextAssignees = nNode.userList.map((item) => {
+                if (item.checked || nNode.userList.length === 1) {
+                    // 只有一个人的时候必须选他
+                    selected.push(item['F_UserId']);
+                }
+                return {
+                    value: item['F_UserId'],
+                    label: item['F_RealName'],
+                    item: item
+                };
+            });
+            nNode.assignees = selected;
+            if (!nNode.chooseAssign) {
+                // 不需要选审批人的时候 所有备选人都要放到下个节点
+                nNode.assignees = nNode.userList.map((item) => item['F_UserId']);
+            }
+            nNode.chooseAssign = nNode.chooseAssign;
+        });
+        flowNextNodes.value = nextNodes;
+    }
+    if (action === 'reject') {
+        loadRejectNodeList();
+    }
+}
+
+function search(inputValue, option) {
+    return inputValue ? (option.item.F_Account.indexOf(inputValue) > -1 || option.item.F_RealName.indexOf(inputValue) > -1) : true;
+}
+
+async function loadRejectNodeList() {
+    rejectNodeId.value = '';
+    let res = await getRejectNodeList(_processId, _taskId);
+    if (res && Array.isArray(res) && res.length > 0) {
+        rejectNodeList.value = res;
+        dialogTitle.value = `退回`;
+        if (res?.length) {
+            res.forEach((nNode) => {
+                if (!nNode.userList?.length) {
+                    return;
+                }
+                const selected = [];
+                nNode.nextAssignees = nNode.userList.map((item) => {
+                    if (item.checked || nNode.userList.length === 1) {
+                        // 只有一个人的时候必须选他
+                        selected.push(item['F_UserId']);
+                    }
+                    return {
+                        value: item['F_UserId'],
+                        label: item['F_RealName'] + (item.remarks ? "(" + item.remarks + ")" : ""),
+                        item: item
+                    };
+                });
+                nNode.assignees = selected;
+                if (!nNode.chooseAssign) {
+                    // 不需要选审批人的时候 所有备选人都要放到下个节点
+                    nNode.assignees = nNode.userList.map((item) => item['F_UserId']);
+                }
+                nNode.chooseAssign = nNode.chooseAssign;
+            });
+        }
+    }
+}
+
+function onClickOK() {
+    if (_action.value === 'select') {
+        // if (!selected.choseTime) {
+        //     if (selected.opinion === null || selected.opinion.trim() === '') {
+        //         return message.error('请填写备注');
+        //     }
+        // }
+        if (selected.opinion === null || selected.opinion.trim() === '') {
+            return message.error('请填写备注');
+        }
+        if (_callback && typeof _callback === 'function') {
+            _callback({
+                info: selected,
+                taskName: taskName,
+            });
+            isOpen.value = false;
+            clearSelectVal();
+        } else {
+            isOpen.value = false;
+        }
+    } else {
+        const nextTaskUser = {};
+        if (_action.value === 'agree' && !isEnd.value) {
+            const isEmpty = flowNextNodes.value.find((node) => !node.assignees?.length);
+            if (isEmpty) {
+                return message.error('请选择审批人');
+            }
+            flowNextNodes.value.forEach((nNode) => {
+                nextTaskUser[nNode.activityId] = isEnd.value ? '' : nNode.assignees.join(',');
+            });
+        }
+        if (_action.value === 'reject') {
+            const isChoose = rejectNodeList.value.find((node) => node.activityId == rejectNodeId.value && node.assignees?.length);
+            if (!isChoose) {
+                return message.error('请选择审批人');
+            }
+            rejectNodeList.value.forEach((nNode) => {
+                if (nNode.activityId == rejectNodeId.value) {
+                    nextTaskUser[nNode.activityId] = isEnd.value ? '' : nNode.assignees.join(',');
+                }
+            });
+        }
+        if (formState.opinion === null || formState.opinion.trim() === '') {
+            return message.error('请填写审批意见');
+        }
+        if (_callback && typeof _callback === 'function') {
+            loading.value = true;
+            _callback({
+                opinion: formState.opinion,
+                rejectNodeId: rejectNodeId.value,
+                nextTaskUser,
+                isEnd
+            });
+        } else {
+            isOpen.value = false;
+        }
+    }
+}
+
+function onClickCancel() {
+    clearSelectVal();
+    if (isStart.value) {
+        return;
+    }
+    if (_onCancel && typeof _onCancel === 'function') {
+        _onCancel();
+    }
+    isOpen.value = false;
+}
+
+function clearSelectVal() {
+    selected.taskId = '';
+    selected.userId = [];
+    selected.opinion = '';
+    selected.userName = '';
+    selected.time = null;
+}
+
+function stopLoading() {
+    loading.value = false;
+}
+
+async function getUserList(list) {
+    selected.selectedList = await getUserMulti(list.join(','));
+    selected.userName = selected.selectedList
+        .map((ele) => {
+            return ele.name;
+        })
+        .join(',');
+}
+
+defineExpose({
+    toggleDialog,
+    stopLoading,
+    clearSelectVal
+});
+</script>
+
+<style lang="less" scoped>
+.dialog-wrap {
+    padding: 10px 15px 0 0;
+}
+
+.opinion-but {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+</style>

src/components/SystemForm/src/Form.vue

@@ -210,6 +210,22 @@
     }
     return saveValId;
   }
+
+  async function setDisabledForm(isDisabled) {
+    return SystemFormRef.value.setDisabledForm(isDisabled);
+  }
+
+  async function handleDelete(id) {
+  let ret;
+  try {
+    ret = await SystemFormRef.value.handleDelete(id);
+  } catch (e) {
+    message.error('表单未配置删除');
+    return null;
+  }
+  return ret;
+}
+
   defineExpose({
     workflowSubmit,
     getRowKey,
@@ -217,6 +233,8 @@
     getUploadComponentIds,
     setFieldsValue,
     getIsOldSystem,
+    setDisabledForm,
+    handleDelete
   });
 </script>
 

src/views/actHiTaskinst/components/ActhitaskinstModal.vue

@@ -0,0 +1,110 @@
+<template>
+
+    <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" @cancel="handleClose" :paddingRight="15" :bodyStyle="{ minHeight: '400px !important' }">
+      <ModalForm ref="formRef" :fromPage="FromPageType.MENU" />
+    </BasicModal>
+
+</template>
+<script lang="ts" setup>
+  import { ref, computed, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { formProps } from './config';
+  import ModalForm from './Form.vue';
+  import { FromPageType } from '/@/enums/workflowEnum';
+
+  const emit = defineEmits(['success', 'register']);
+
+  const { notification } = useMessage();
+  const formRef = ref();
+  const state = reactive({
+    formModel: {},
+    isUpdate: true,
+    isView: false,
+    isCopy: false,
+    rowId: '',
+  });
+
+  const { t } = useI18n();
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    state.isUpdate = !!data?.isUpdate;
+    state.isView = !!data?.isView;
+    state.isCopy = !!data?.isCopy;
+
+    setModalProps({
+      destroyOnClose: true,
+      maskClosable: false,
+      showCancelBtn: !state.isView,
+      showOkBtn: !state.isView,
+      canFullscreen: true,
+      width: 900,
+    });
+    if (state.isUpdate || state.isView || state.isCopy) {
+      state.rowId = data.id;
+      if (state.isView) {
+        await formRef.value.setDisabledForm();
+      }
+      await formRef.value.setFormDataFromId(state.rowId);
+    } else {
+      formRef.value.resetFields();
+    }
+  });
+
+  const getTitle = computed(() => (state.isView ? '查看' : !state.isUpdate ? '新增' : '编辑'));
+
+  async function saveModal() {
+    let saveSuccess = false;
+    try {
+      const values = await formRef.value?.validate();
+      //添加隐藏组件
+      if (formProps.hiddenComponent?.length) {
+        formProps.hiddenComponent.forEach((component) => {
+          values[component.bindField] = component.value;
+        });
+      }
+      if (values !== false) {
+        try {
+          if (!state.isUpdate || state.isCopy) {
+            saveSuccess = await formRef.value.add(values);
+          } else {
+            saveSuccess = await formRef.value.update({ values, rowId: state.rowId });
+          }
+          return saveSuccess;
+        } catch (error) {}
+      }
+    } catch (error) {
+      return saveSuccess;
+    }
+  }
+
+  async function handleSubmit() {
+    try {
+      const saveSuccess = await saveModal();
+      setModalProps({ confirmLoading: true });
+      if (saveSuccess) {
+        if (!state.isUpdate || state.isCopy) {
+          //false 新增
+          notification.success({
+            message: 'Tip',
+            description: t('新增成功！'),
+          }); //提示消息
+        } else {
+          notification.success({
+            message: 'Tip',
+            description: t('修改成功！'),
+          }); //提示消息
+        }
+        closeModal();
+        formRef.value.resetFields();
+        emit('success');
+      }
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+    
+  function handleClose() {
+    formRef.value.resetFields();
+  }
+</script>

src/views/actHiTaskinst/components/CustomDevForm.vue

@@ -0,0 +1,491 @@
+<template>
+    <div ref="formWrap">
+        <Form ref="formRef" :label-col="getProps?.labelCol" :labelAlign="getProps?.labelAlign"
+            :layout="getProps?.layout" :model="formModel" :wrapper-col="getProps?.wrapperCol"
+            @keypress.enter="handleEnterPress">
+            <!-- id  -->
+
+            <!-- <Col v-if="getIfShow2('e21c39e056964ba1af0207c8dfa7b54b')"
+                v-show="getIsShow2('e21c39e056964ba1af0207c8dfa7b54b')"
+                :span="getColWidth(schemaMap['e21c39e056964ba1af0207c8dfa7b54b'])">
+            <template v-if="showComponent(schemaMap['e21c39e056964ba1af0207c8dfa7b54b'])">
+                <SimpleFormItem v-model:value="formModel[schemaMap['e21c39e056964ba1af0207c8dfa7b54b'].field]"
+                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
+                    :schema="schemaMap['e21c39e056964ba1af0207c8dfa7b54b']" />
+            </template>
+</Col> -->
+            <!-- 节点名称  -->
+
+            <!-- <Col v-if="getIfShow2('a7f8acb0021c4df09452039b01ec313d')"
+                v-show="getIsShow2('a7f8acb0021c4df09452039b01ec313d')"
+                :span="getColWidth(schemaMap['a7f8acb0021c4df09452039b01ec313d'])">
+            <template v-if="showComponent(schemaMap['a7f8acb0021c4df09452039b01ec313d'])">
+                <SimpleFormItem v-model:value="formModel[schemaMap['a7f8acb0021c4df09452039b01ec313d'].field]"
+                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
+                    :schema="schemaMap['a7f8acb0021c4df09452039b01ec313d']" />
+            </template>
+            </Col> -->
+            <!-- 流程名称  -->
+
+            <!-- <Col v-if="getIfShow2('7107f6f6ef594c6687b9087e7f823c4d')"
+                v-show="getIsShow2('7107f6f6ef594c6687b9087e7f823c4d')"
+                :span="getColWidth(schemaMap['7107f6f6ef594c6687b9087e7f823c4d'])">
+            <template v-if="showComponent(schemaMap['7107f6f6ef594c6687b9087e7f823c4d'])">
+                <SimpleFormItem v-model:value="formModel[schemaMap['7107f6f6ef594c6687b9087e7f823c4d'].field]"
+                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
+                    :schema="schemaMap['7107f6f6ef594c6687b9087e7f823c4d']" />
+            </template>
+            </Col> -->
+            <!-- 流程默认id  -->
+
+            <!-- <Col v-if="getIfShow2('76db839377a7417f87d9d7540dd1f5f4')"
+                v-show="getIsShow2('76db839377a7417f87d9d7540dd1f5f4')"
+                :span="getColWidth(schemaMap['76db839377a7417f87d9d7540dd1f5f4'])">
+            <template v-if="showComponent(schemaMap['76db839377a7417f87d9d7540dd1f5f4'])">
+                <SimpleFormItem v-model:value="formModel[schemaMap['76db839377a7417f87d9d7540dd1f5f4'].field]"
+                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
+                    :schema="schemaMap['76db839377a7417f87d9d7540dd1f5f4']" />
+            </template>
+            </Col> -->
+            <!-- 根节点实例id  -->
+
+            <!-- <Col v-if="getIfShow2('11acfec9f51b4a45a390840acd00b077')"
+                v-show="getIsShow2('11acfec9f51b4a45a390840acd00b077')"
+                :span="getColWidth(schemaMap['11acfec9f51b4a45a390840acd00b077'])">
+            <template v-if="showComponent(schemaMap['11acfec9f51b4a45a390840acd00b077'])">
+                <SimpleFormItem v-model:value="formModel[schemaMap['11acfec9f51b4a45a390840acd00b077'].field]"
+                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
+                    :schema="schemaMap['11acfec9f51b4a45a390840acd00b077']" />
+            </template>
+            </Col> -->
+            <!-- 流程实例id  -->
+
+            <!-- <Col v-if="getIfShow2('31d294d5c7c845f88d1176ab5a4913e0')"
+                v-show="getIsShow2('31d294d5c7c845f88d1176ab5a4913e0')"
+                :span="getColWidth(schemaMap['31d294d5c7c845f88d1176ab5a4913e0'])">
+            <template v-if="showComponent(schemaMap['31d294d5c7c845f88d1176ab5a4913e0'])">
+                <SimpleFormItem v-model:value="formModel[schemaMap['31d294d5c7c845f88d1176ab5a4913e0'].field]"
+                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
+                    :schema="schemaMap['31d294d5c7c845f88d1176ab5a4913e0']" />
+            </template>
+            </Col> -->
+            <!-- 执行节点id  -->
+
+            <!-- <Col v-if="getIfShow2('f58327d6d3b04aad93eb415b3b8bfc60')"
+                v-show="getIsShow2('f58327d6d3b04aad93eb415b3b8bfc60')"
+                :span="getColWidth(schemaMap['f58327d6d3b04aad93eb415b3b8bfc60'])">
+            <template v-if="showComponent(schemaMap['f58327d6d3b04aad93eb415b3b8bfc60'])">
+                <SimpleFormItem v-model:value="formModel[schemaMap['f58327d6d3b04aad93eb415b3b8bfc60'].field]"
+                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
+                    :schema="schemaMap['f58327d6d3b04aad93eb415b3b8bfc60']" />
+            </template>
+            </Col> -->
+            <!-- 节点实例id  -->
+
+            <!-- <Col v-if="getIfShow2('c88aeae388c4488aa459e023cd1a35e8')"
+                v-show="getIsShow2('c88aeae388c4488aa459e023cd1a35e8')"
+                :span="getColWidth(schemaMap['c88aeae388c4488aa459e023cd1a35e8'])">
+            <template v-if="showComponent(schemaMap['c88aeae388c4488aa459e023cd1a35e8'])">
+                <SimpleFormItem v-model:value="formModel[schemaMap['c88aeae388c4488aa459e023cd1a35e8'].field]"
+                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
+                    :schema="schemaMap['c88aeae388c4488aa459e023cd1a35e8']" />
+            </template>
+            </Col> -->
+            <!-- 节点名称  -->
+
+            <!-- <Col v-if="getIfShow2('e444605174364af2b10897b2987d2dec')"
+                v-show="getIsShow2('e444605174364af2b10897b2987d2dec')"
+                :span="getColWidth(schemaMap['e444605174364af2b10897b2987d2dec'])">
+            <template v-if="showComponent(schemaMap['e444605174364af2b10897b2987d2dec'])">
+                <SimpleFormItem v-model:value="formModel[schemaMap['e444605174364af2b10897b2987d2dec'].field]"
+                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
+                    :schema="schemaMap['e444605174364af2b10897b2987d2dec']" />
+            </template>
+            </Col> -->
+
+            <!--任务id-->
+            <!-- <Col v-if="getIfShow2('e111605174364af2b10897b2987d2dec')"
+                v-show="getIsShow2('e111605174364af2b10897b2987d2dec')"
+                :span="getColWidth(schemaMap['e111605174364af2b10897b2987d2dec'])">
+            <template v-if="showComponent(schemaMap['e111605174364af2b10897b2987d2dec'])">
+                <SimpleFormItem v-model:value="formModel[schemaMap['e111605174364af2b10897b2987d2dec'].field]"
+                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
+                    :schema="schemaMap['e111605174364af2b10897b2987d2dec']" />
+            </template>
+            </Col> -->
+
+            <!--任务名称-->
+            <!-- <Col v-if="getIfShow2('e444555174364af2b10897b2987d2dec')"
+                v-show="getIsShow2('e444555174364af2b10897b2987d2dec')"
+                :span="getColWidth(schemaMap['e444555174364af2b10897b2987d2dec'])">
+            <template v-if="showComponent(schemaMap['e444555174364af2b10897b2987d2dec'])">
+                <SimpleFormItem v-model:value="formModel[schemaMap['e444555174364af2b10897b2987d2dec'].field]"
+                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
+                    :schema="schemaMap['e444555174364af2b10897b2987d2dec']" />
+            </template>
+            </Col> -->
+
+            <!--审核人-->
+            <!-- <Col v-if="getIfShow2('c33aeae997a4488aa459e023ae1a21e8')"
+                v-show="getIsShow2('c33aeae997a4488aa459e023ae1a21e8')"
+                :span="getColWidth(schemaMap['c33aeae997a4488aa459e023ae1a21e8'])">
+            <template v-if="showComponent(schemaMap['c33aeae997a4488aa459e023ae1a21e8'])">
+                <SimpleFormItem v-model:value="formModel[schemaMap['c33aeae997a4488aa459e023ae1a21e8'].field]"
+                    :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj"
+                    :schema="schemaMap['c33aeae997a4488aa459e023ae1a21e8']" />
+            </template>
+            </Col> -->
+
+            <!--流程id-->
+            <div class="ant-col ant-col-24">
+                <div class="ant-row ant-form-item" style="row-gap: 0px;">
+                    <div class="ant-col ant-form-item-label" style="width: 120px;">
+                        <label>流程实列id</label>
+                    </div>
+                    <div class="ant-col ant-form-item-control">
+                        <div class="ant-form-item-control-input">
+                            <div class="ant-form-item-control-input-content">
+                                <div class="field-readonly">
+                                    {{ assignee.value.processInstId }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="ant-col ant-col-24">
+                <div class="ant-row ant-form-item" style="row-gap: 0px;">
+                    <div class="ant-col ant-form-item-label" style="width: 120px;">
+                        <label>子流程实例id</label>
+                    </div>
+                    <div class="ant-col ant-form-item-control">
+                        <div class="ant-form-item-control-input">
+                            <div class="ant-form-item-control-input-content">
+                                <div class="field-readonly">
+                                    {{ assignee.value.subProcessInstId ? assignee.value.subProcessInstId : '无' }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="ant-col ant-col-24">
+                <div class="ant-row ant-form-item" style="row-gap: 0px;">
+                    <div class="ant-col ant-form-item-label" style="width: 120px;">
+                        <label>子流程实例名</label>
+                    </div>
+                    <div class="ant-col ant-form-item-control">
+                        <div class="ant-form-item-control-input">
+                            <div class="ant-form-item-control-input-content">
+                                <div class="field-readonly">
+                                    {{ assignee.value.subProcessInstName ? assignee.value.subProcessInstName : '无' }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!--任务名称-->
+            <div class="ant-col ant-col-24">
+                <div class="ant-row ant-form-item" style="row-gap: 0px;">
+                    <div class="ant-col ant-form-item-label" style="width: 120px;">
+                        <label>节点key</label>
+                    </div>
+                    <div class="ant-col ant-form-item-control">
+                        <div class="ant-form-item-control-input">
+                            <div class="ant-form-item-control-input-content">
+                                <div class="field-readonly">
+                                    {{ assignee.value.taskDefKey }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!--任务id-->
+            <div class="ant-col ant-col-24">
+                <div class="ant-row ant-form-item" style="row-gap: 0px;">
+                    <div class="ant-col ant-form-item-label" style="width: 120px;">
+                        <label>节点id</label>
+                    </div>
+                    <div class="ant-col ant-form-item-control">
+                        <div class="ant-form-item-control-input">
+                            <div class="ant-form-item-control-input-content">
+                                <div class="field-readonly">
+                                    {{ assignee.value.taskId }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="ant-col ant-col-24">
+                <div class="ant-row ant-form-item" style="row-gap: 0px;">
+                    <div class="ant-col ant-form-item-label" style="width: 120px;">
+                        <label>节点名称</label>
+                    </div>
+                    <div class="ant-col ant-form-item-control">
+                        <div class="ant-form-item-control-input">
+                            <div class="ant-form-item-control-input-content">
+                                <div class="field-readonly">
+                                    {{ assignee.value.taskName }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ant-col ant-form-item-control ant-col-12">
+                        <a-button v-auth="'monitor:appointedAuditor'" @click="flowChange">{{
+                            t('将任务流转到')
+                            }}</a-button>
+                    </div>
+                </div>
+            </div>
+            <!--审批人-->
+            <div class="ant-col ant-col-24">
+                <div class="ant-row ant-form-item" style="row-gap: 0px;">
+                    <div class="ant-col ant-form-item-label" style="width: 120px;">
+                        <label>审批人</label>
+                    </div>
+                    <div class="ant-col ant-form-item-control">
+                        <div class="ant-form-item-control-input">
+                            <div class="ant-form-item-control-input-content">
+                                <div class="field-readonly">
+                                    {{ users }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ant-col ant-form-item-control ant-col-12">
+                        <!-- <a-button style="width: 20%;" v-auth="'monitor:appointedAuditor'" @click="addOrSubtractUser">{{
+                            t('加减签')
+                            }}</a-button> -->
+                        <a-button v-if="!showAdd" v-auth="'monitor:appointedAuditor'" style="margin-right: 10px;"
+                            @click="approveUser">{{
+                                t('修改审批人')
+                            }}</a-button>
+                        <AddOrSubtract v-else :schemaId="schemaId" :taskId="assignee.value.taskId"
+                            :selectedUser="assignee.value.assigneeVoList">
+                        </AddOrSubtract>
+                    </div>
+                </div>
+            </div>
+
+            <!-- 创建时间 -->
+            <div class="ant-col ant-col-24">
+                <div class="ant-row ant-form-item" style="row-gap: 0px;">
+                    <div class="ant-col ant-form-item-label" style="width: 120px;">
+                        <label>创建时间</label>
+                    </div>
+                    <div class="ant-col ant-form-item-control">
+                        <div class="ant-form-item-control-input">
+                            <div class="ant-form-item-control-input-content">
+                                <div class="field-readonly">
+                                    {{ assignee.value.createTime }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div :style="{ textAlign: getProps.buttonLocation }">
+                <slot name="buttonBefore"></slot>
+                <a-button v-if="getProps.showSubmitButton" type="primary" @click="handleSubmit">
+                    {{ t('提交') }}
+                </a-button>
+                <a-button v-if="getProps.showResetButton" style="margin-left: 10px" @click="handleReset">
+                    {{ t('重置') }}
+                </a-button>
+                <slot name="buttonAfter"></slot>
+            </div>
+        </Form>
+    </div>
+    <template>
+        <ApproveProcessMonitor v-if="showApproveUser" :taskId="assignee.value.taskId" :userList="assignee.value"
+            title="修改审批人" @close="
+                (val) => {
+                    showApproveUser = false;
+                    if (val.length > 0) {
+                        assignee.value.assigneeNameStr = val.map((ele) => {
+                            return ele.name;
+                        }).join(',');
+                    }
+                }
+            " />
+    </template>
+    <!-- 指派审核人 -->
+    <!-- 流程流转 -->
+    <opinionDialog ref="opinionDlg" />
+    <!-- <AddOrSubtract v-if="showAdd"></AddOrSubtract> -->
+
+</template>
+
+<script>
+// 注意，这里继承的是SimpleFormSetup，使用script setup写法的组件无法继承，必须使用特别的版本
+import SimpleFormSetup from '/@/components/SimpleForm/src/SimpleFormSetup.vue';
+import { Col, Form, message, Row } from 'ant-design-vue';
+import SimpleFormItem from '/@/components/SimpleForm/src/components/SimpleFormItem.vue';
+import { ref, reactive, inject } from 'vue';
+import { CheckCircleOutlined } from '@ant-design/icons-vue';
+import ApproveProcessMonitor from '../../../views/workflow/task/components/flow/ApproveProcessMonitorUser.vue';
+import { data } from '../../demo/excel/data';
+import opinionDialog from '/@/components/SecondDev/OpinionDialogSelected.vue';
+import { getProcessUserNodes, SetChangeProcessNode } from '/@/api/workflow/adminOperation'
+import AddOrSubtract from '../../workflow/task/components/flow/AddOrSubtractWork.vue';
+
+
+const FormItem = Form.Item;
+
+export default {
+    components: {
+        CheckCircleOutlined,
+        Form,
+        Col,
+        SimpleFormItem,
+        Row,
+        FormItem,
+        ApproveProcessMonitor,
+        opinionDialog,
+        AddOrSubtract,
+    },
+    mixins: [SimpleFormSetup],
+    setup(props, ctx) {
+        const ret = SimpleFormSetup.setup(props, ctx);
+        const expose = ctx.expose;
+        const assignee = ctx.attrs.clickedTaskAssignees
+        const currentTaskAssigneeNames = ctx.attrs.currentTaskAssigneeNames
+        const isCustom = ref(Boolean)
+        const schemaId = ctx.attrs.schemaId;
+        const processId = ctx.attrs.processId;
+        isCustom.value = ctx.attrs.isCustom;
+
+        const showApproveUser = ref(Boolean);
+        showApproveUser.value = false;
+        const showAdd = ref(Boolean);
+        showAdd.value = true;
+
+        const opinionDlg = ref();
+        const selectedInfo = ref();
+        const allTaskNodes = inject('taskNode');;
+
+        const users = ref('');
+        users.value = assignee.value.assigneeVoList.map((ele) => {
+            return ele.name + '(' + ele.code + ')';
+        }).join('，')
+
+        if (assignee.value.assigneeVoList.length > 1) {
+            showAdd.value = false;
+        }
+
+        function approveUser() {
+            showApproveUser.value = true;
+        }
+
+        function flowChange() {
+            opinionDlg.value.toggleDialog({
+                action: 'select',
+                schemaId: schemaId,
+                choseTime: false,
+                title: '流程流转',
+                taskNode: allTaskNodes,
+                callback(args) {
+                    selectedInfo.value = args.info
+                    submit(args.info)
+                }
+            });
+        }
+
+        function submit(info) {
+            const key = info.taskId;
+            const userIds = info.selectedList.map((ele) => {
+                return ele.id
+            }).join(',');
+            SetChangeProcessNode({
+                'processInstanceId': processId,
+                'targetTaskNodeId': info.taskId,
+                'nextTaskUserMap': {
+                    [key]: userIds
+                },
+                "remark": info.opinion
+            }).then((res) => {
+                if (res) {
+                    message.info("流程流转成功！");
+                    flowFail();
+                } else {
+                    message.info("操作失败，请稍后再试！");
+                }
+            })
+        }
+
+        function flowFail() {
+            opinionDlg.value.stopLoading();
+        }
+
+
+
+        return {
+            approveUser,
+            flowChange,
+            showAdd,
+            processId,
+            schemaId,
+            showApproveUser,
+            isCustom,
+            assignee,
+            currentTaskAssigneeNames,
+            opinionDlg,
+            users,
+            ...ret
+        };
+    },
+    computed: {
+        // 这里需要增加一个计算属性 否则流程关联时字段读写状态会失效
+        schemaMap() {
+            const schemaMap = {};
+            this.getSchemas.forEach((schema) => {
+                schemaMap[schema.key] = schema;
+                if (schema.children) {
+                    schema.children.forEach(sChild => {
+                        if (sChild.list) {
+                            sChild.list.forEach(lChild => {
+                                schemaMap[lChild.key] = lChild;
+                            });
+                        }
+                    });
+                }
+            });
+            return schemaMap;
+        }
+    },
+    methods: {
+        getIfShow2: function (key) {
+            return this.getIfShow(this.schemaMap[key], this.formModel[this.schemaMap[key].field]);
+        },
+
+        getIsShow2: function (key) {
+            return this.getIsShow(this.schemaMap[key], this.formModel[this.schemaMap[key].field]);
+        },
+
+        getTabProps(key) {
+            const schema = this.schemaMap[key];
+            return {
+                size: schema.componentProps.tabSize,
+                tabPosition: schema.componentProps.tabPosition,
+                type: schema.componentProps.type
+            }
+        },
+
+        getTdStyle(tdElement) {
+            return {
+                height: tdElement.height ? tdElement.height + 'px' : '',
+                minHeight: (tdElement.height || '42') + 'px',
+                overflow: 'hidden',
+                padding: '10px'
+            }
+        },
+        // approveUser: function () {
+        //     return data.value.approvedUserVisible = true;
+        // }
+    }
+};
+</script>

src/views/actHiTaskinst/components/Form.vue

@@ -0,0 +1,188 @@
+<template>
+  <SimpleForm ref="systemFormRef" :formProps="data.formDataProps" :formModel="{}"
+    :isWorkFlow="props.fromPage != FromPageType.MENU" :clickedTaskAssignees="props.clickedTaskAssignees"
+    :processId="props.processId" :isCustom="props.customFlg" :schemaId="props.schemaId"
+    :currentTaskAssigneeNames="taskAssigneeNames" />
+</template>
+<script lang="ts" setup>
+import { reactive, ref, onMounted, computed } from 'vue';
+import { formProps, formEventConfigs } from './config';
+// import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
+import SimpleForm from './CustomDevForm.vue';
+import { addActHiTaskinst, getActHiTaskinst, updateActHiTaskinst } from '/@/api/actHiTaskinst/index';
+import { cloneDeep } from 'lodash-es';
+import { FormDataProps } from '/@/components/Designer/src/types';
+import { usePermission } from '/@/hooks/web/usePermission';
+import { FromPageType } from '/@/enums/workflowEnum';
+import { createFormEvent, getFormDataEvent, loadFormEvent, submitFormEvent, } from '/@/hooks/web/useFormEvent';
+import { changeWorkFlowForm, changeSchemaDisabled } from '/@/hooks/web/useWorkFlowForm';
+import { WorkFlowFormParams } from '/@/model/workflow/bpmnConfig';
+const { filterFormSchemaAuth } = usePermission();
+
+const RowKey = 'id';
+const emits = defineEmits(['changeUploadComponentIds', 'loadingCompleted', 'form-mounted', 'close']);
+const props = defineProps({
+  processId: "",
+  schemaId: "",
+  customFlg: false,
+  clickedTaskAssignees: {},
+  currentTaskAssigneeNames: {},
+  fromPage: {
+    type: Number,
+    default: FromPageType.MENU,
+  },
+});
+
+const systemFormRef = ref();
+const data: { formDataProps: FormDataProps } = reactive({
+  formDataProps: cloneDeep(formProps),
+});
+const state = reactive({
+  formModel: {},
+});
+
+const taskAssigneeNames = computed(() => {
+  emits('close', props.currentTaskAssigneeNames)
+  return props.currentTaskAssigneeNames;
+});
+
+onMounted(async () => {
+  try {
+    if (props.fromPage == FromPageType.MENU) {
+      setMenuPermission();
+      await createFormEvent(formEventConfigs, state.formModel,
+        systemFormRef.value,
+        formProps.schemas); //表单事件：初始化表单
+      await loadFormEvent(formEventConfigs, state.formModel,
+        systemFormRef.value,
+        formProps.schemas); //表单事件：加载表单
+    } else if (props.fromPage == FromPageType.FLOW) {
+      emits('loadingCompleted'); //告诉系统表单已经加载完毕
+      // loadingCompleted后 工作流页面直接利用Ref调用setWorkFlowForm方法
+    } else if (props.fromPage == FromPageType.PREVIEW) {
+      // 预览 无需权限，表单事件也无需执行
+    } else if (props.fromPage == FromPageType.DESKTOP) {
+      // 桌面设计 表单事件需要执行
+      emits('loadingCompleted'); //告诉系统表单已经加载完毕
+      await createFormEvent(formEventConfigs, state.formModel,
+        systemFormRef.value,
+        formProps.schemas); //表单事件：初始化表单
+      await loadFormEvent(formEventConfigs, state.formModel,
+        systemFormRef.value,
+        formProps.schemas); //表单事件：加载表单
+    }
+    emits('form-mounted', formProps);
+  } catch (error) {
+
+  }
+});
+// 根据菜单页面权限，设置表单属性（必填，禁用，显示）
+function setMenuPermission() {
+  data.formDataProps.schemas = filterFormSchemaAuth(formProps.schemas!);
+}
+
+// 校验form 通过返回表单数据
+async function validate() {
+  let values = [];
+  try {
+    values = await systemFormRef.value?.validate();
+    //添加隐藏组件
+    if (data.formDataProps.hiddenComponent?.length) {
+      data.formDataProps.hiddenComponent.forEach((component) => {
+        values[component.bindField] = component.value;
+      });
+    }
+  } finally {
+  }
+  return values;
+}
+// 根据行唯一ID查询行数据，并设置表单数据   【编辑】
+async function setFormDataFromId(rowId, skipUpdate) {
+  try {
+    const record = await getActHiTaskinst(rowId);
+    if (skipUpdate) {
+      return record;
+    }
+    setFieldsValue(record);
+    state.formModel = record;
+    await getFormDataEvent(formEventConfigs, state.formModel, systemFormRef.value, formProps.schemas); //表单事件：获取表单数据
+    return record;
+  } catch (error) {
+
+  }
+}
+// 辅助设置表单数据
+function setFieldsValue(record) {
+  systemFormRef.value.setFieldsValue(record);
+}
+// 重置表单数据
+async function resetFields() {
+  await systemFormRef.value.resetFields();
+}
+//  设置表单数据全部为Disabled  【查看】
+async function setDisabledForm() {
+  data.formDataProps.schemas = changeSchemaDisabled(cloneDeep(data.formDataProps.schemas));
+}
+// 获取行键值
+function getRowKey() {
+  return RowKey;
+}
+// 更新api表单数据
+async function update({ values, rowId }) {
+  try {
+    values[RowKey] = rowId;
+    state.formModel = values;
+    let saveVal = await updateActHiTaskinst(values);
+    await submitFormEvent(formEventConfigs, state.formModel,
+      systemFormRef.value,
+      formProps.schemas); //表单事件：提交表单
+    return saveVal;
+  } catch (error) { }
+}
+// 新增api表单数据
+async function add(values) {
+  try {
+    state.formModel = values;
+    let saveVal = await addActHiTaskinst(values);
+    await submitFormEvent(formEventConfigs, state.formModel,
+      systemFormRef.value,
+      formProps.schemas); //表单事件：提交表单
+    return saveVal;
+  } catch (error) { }
+}
+// 根据工作流页面权限，设置表单属性（必填，禁用，显示）
+async function setWorkFlowForm(obj: WorkFlowFormParams) {
+  try {
+    let flowData = changeWorkFlowForm(cloneDeep(formProps), obj);
+    let { buildOptionJson, uploadComponentIds, formModels, isViewProcess } = flowData;
+    data.formDataProps = buildOptionJson;
+    emits('changeUploadComponentIds', uploadComponentIds); //工作流中必须保存上传组件id【附件汇总需要】
+    if (isViewProcess) {
+      setDisabledForm(); //查看
+    }
+    state.formModel = formModels;
+    setFieldsValue(formModels);
+  } catch (error) { }
+  await createFormEvent(formEventConfigs, state.formModel,
+    systemFormRef.value,
+    formProps.schemas); //表单事件：初始化表单
+  await loadFormEvent(formEventConfigs, state.formModel,
+    systemFormRef.value,
+    formProps.schemas); //表单事件：加载表单
+}
+
+
+
+defineExpose({
+  setFieldsValue,
+  resetFields,
+  validate,
+  add,
+  update,
+  setFormDataFromId,
+  setDisabledForm,
+  setMenuPermission,
+  setWorkFlowForm,
+  getRowKey,
+});
+</script>

src/views/actHiTaskinst/components/config.ts

@@ -0,0 +1,612 @@
+import { FormProps, FormSchema } from '/@/components/Form';
+import { BasicColumn } from '/@/components/Table';
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'id',
+    label: 'id',
+    component: 'Input',
+  },
+  {
+    field: 'taskDefKey',
+    label: '节点名称',
+    component: 'Input',
+  },
+  {
+    field: 'procDefKey',
+    label: '流程名称',
+    component: 'Input',
+  },
+  {
+    field: 'procDefId',
+    label: '流程默认id',
+    component: 'Input',
+  },
+  {
+    field: 'rootProcInstId',
+    label: '根节点实例id',
+    component: 'Input',
+  },
+  {
+    field: 'procInstId',
+    label: '流程实例id',
+    component: 'Input',
+  },
+  {
+    field: 'executionId',
+    label: '执行节点id',
+    component: 'Input',
+  },
+  {
+    field: 'actInstId',
+    label: '节点实例id',
+    component: 'Input',
+  },
+  {
+    field: 'name',
+    label: '节点名称',
+    component: 'Input',
+  },
+];
+
+export const columns: BasicColumn[] = [
+  {
+    dataIndex: 'id',
+    title: 'id',
+    componentType: 'input',
+    align: 'left',
+
+    sorter: true,
+  },
+
+  {
+    dataIndex: 'taskDefKey',
+    title: '节点名称',
+    componentType: 'input',
+    align: 'left',
+
+    sorter: true,
+  },
+
+  {
+    dataIndex: 'procDefKey',
+    title: '流程名称',
+    componentType: 'input',
+    align: 'left',
+
+    sorter: true,
+  },
+
+  {
+    dataIndex: 'procDefId',
+    title: '流程默认id',
+    componentType: 'input',
+    align: 'left',
+
+    sorter: true,
+  },
+
+  {
+    dataIndex: 'rootProcInstId',
+    title: '根节点实例id',
+    componentType: 'input',
+    align: 'left',
+
+    sorter: true,
+  },
+
+  {
+    dataIndex: 'procInstId',
+    title: '流程实例id',
+    componentType: 'input',
+    align: 'left',
+
+    sorter: true,
+  },
+
+  {
+    dataIndex: 'executionId',
+    title: '执行节点id',
+    componentType: 'input',
+    align: 'left',
+
+    sorter: true,
+  },
+
+  {
+    dataIndex: 'actInstId',
+    title: '节点实例id',
+    componentType: 'input',
+    align: 'left',
+
+    sorter: true,
+  },
+
+  {
+    dataIndex: 'name',
+    title: '节点名称',
+    componentType: 'input',
+    align: 'left',
+
+    sorter: true,
+  },
+];
+//表单事件
+export const formEventConfigs = {
+  0: [
+    {
+      type: 'circle',
+      color: '#2774ff',
+      text: '开始节点',
+      icon: '#icon-kaishi',
+      bgcColor: '#D8E5FF',
+      isUserDefined: false,
+      isClick: true,
+    },
+    {
+      color: '#F6AB01',
+      icon: '#icon-chushihua',
+      text: '初始化表单',
+      bgcColor: '#f9f5ea',
+      isUserDefined: false,
+      nodeInfo: { processEvent: [] },
+      isClick: false,
+    },
+  ],
+  1: [
+    {
+      color: '#B36EDB',
+      icon: '#icon-shujufenxi',
+      text: '获取表单数据',
+      detail: '(新增无此操作)',
+      bgcColor: '#F8F2FC',
+      isUserDefined: false,
+      nodeInfo: { processEvent: [] },
+      isClick: false,
+    },
+  ],
+  2: [
+    {
+      color: '#F8625C',
+      icon: '#icon-jiazai',
+      text: '加载表单',
+      bgcColor: '#FFF1F1',
+      isUserDefined: false,
+      nodeInfo: { processEvent: [] },
+      isClick: false,
+    },
+  ],
+  3: [
+    {
+      color: '#6C6AE0',
+      icon: '#icon-jsontijiao',
+      text: '提交表单',
+      bgcColor: '#F5F4FF',
+      isUserDefined: false,
+      nodeInfo: { processEvent: [] },
+      isClick: false,
+    },
+  ],
+  4: [
+    {
+      type: 'circle',
+      color: '#F8625C',
+      text: '结束节点',
+      icon: '#icon-jieshuzhiliao',
+      bgcColor: '#FFD6D6',
+      isLast: true,
+      isUserDefined: false,
+      isClick: false,
+    },
+  ],
+};
+export const formProps: FormProps = {
+  labelCol: { span: 3, offset: 0 },
+  labelAlign: 'right',
+  layout: 'horizontal',
+  size: 'default',
+  schemas: [
+    {
+      key: 'e21c39e056964ba1af0207c8dfa7b54b',
+      field: 'id',
+      label: 'id',
+      type: 'input',
+      component: 'Input',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: false,
+        respNewRow: false,
+        placeholder: '请输入id',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: true,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: false,
+        scan: false,
+        style: { width: '100%' },
+      },
+    },
+    {
+      key: 'a7f8acb0021c4df09452039b01ec313d',
+      field: 'taskDefKey',
+      label: '节点名称',
+      type: 'input',
+      component: 'Input',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: false,
+        respNewRow: false,
+        placeholder: '请输入节点名称',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: true,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: false,
+        scan: false,
+        style: { width: '100%' },
+      },
+    },
+    {
+      key: '7107f6f6ef594c6687b9087e7f823c4d',
+      field: 'procDefKey',
+      label: '流程名称',
+      type: 'input',
+      component: 'Input',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: false,
+        respNewRow: false,
+        placeholder: '请输入流程名称',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: true,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: false,
+        scan: false,
+        style: { width: '100%' },
+      },
+    },
+    {
+      key: '76db839377a7417f87d9d7540dd1f5f4',
+      field: 'procDefId',
+      label: '流程默认id',
+      type: 'input',
+      component: 'Input',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: false,
+        respNewRow: false,
+        placeholder: '请输入流程默认id',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: true,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: false,
+        scan: false,
+        style: { width: '100%' },
+      },
+    },
+    {
+      key: '11acfec9f51b4a45a390840acd00b077',
+      field: 'rootProcInstId',
+      label: '根节点实例id',
+      type: 'input',
+      component: 'Input',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: false,
+        respNewRow: false,
+        placeholder: '请输入根节点实例id',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: true,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: false,
+        scan: false,
+        style: { width: '100%' },
+      },
+    },
+    {
+      key: '31d294d5c7c845f88d1176ab5a4913e0',
+      field: 'procInstId',
+      label: '流程实例id',
+      type: 'input',
+      component: 'Input',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: false,
+        respNewRow: false,
+        placeholder: '请输入流程实例id',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: true,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: false,
+        scan: false,
+        style: { width: '100%' },
+      },
+    },
+    {
+      key: 'f58327d6d3b04aad93eb415b3b8bfc60',
+      field: 'executionId',
+      label: '执行节点id',
+      type: 'input',
+      component: 'Input',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: false,
+        respNewRow: false,
+        placeholder: '请输入执行节点id',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: true,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: false,
+        scan: false,
+        style: { width: '100%' },
+      },
+    },
+    {
+      key: 'c88aeae388c4488aa459e023cd1a35e8',
+      field: 'actInstId',
+      label: '节点实例id',
+      type: 'input',
+      component: 'Input',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: false,
+        respNewRow: false,
+        placeholder: '请输入节点实例id',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: true,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: false,
+        scan: false,
+        style: { width: '100%' },
+      },
+    },
+    {
+      key: 'e444605174364af2b10897b2987d2dec',
+      field: 'name',
+      label: '节点名称',
+      type: 'input',
+      component: 'Input',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: false,
+        respNewRow: false,
+        placeholder: '请输入节点名称',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: true,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: false,
+        scan: false,
+        style: { width: '100%' },
+      },
+    },
+    {
+      key: 'e111605174364af2b10897b2987d2dec',
+      field: 'taskId',
+      label: '任务id',
+      type: 'input',
+      component: 'Input',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: false,
+        respNewRow: false,
+        placeholder: '请输入节点名称',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: true,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: false,
+        scan: false,
+        style: { width: '100%' },
+      },
+    },
+    {
+      key: 'e444555174364af2b10897b2987d2dec',
+      field: 'taskName',
+      label: '任务名称',
+      type: 'input',
+      component: 'Input',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: false,
+        respNewRow: false,
+        placeholder: '请输入节点名称',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: true,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: false,
+        scan: false,
+        style: { width: '100%' },
+      },
+    },
+    {
+      key: 'c33aeae997a4488aa459e023ae1a21e8',
+      field: 'assigneeName',
+      label: '审核人',
+      type: 'input',
+      component: 'Input',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: false,
+        respNewRow: false,
+        placeholder: '请输入节点名称',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: true,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: false,
+        scan: false,
+        style: { width: '100%' },
+      },
+    },
+  ],
+  showActionButtonGroup: false,
+  buttonLocation: 'center',
+  actionColOptions: { span: 24 },
+  showResetButton: false,
+  showSubmitButton: false,
+  hiddenComponent: [],
+};

src/views/actHiTaskinst/components/workflowPermission.ts

@@ -0,0 +1,137 @@
+export const permissionList = [
+  {
+    required: true,
+    view: true,
+    edit: true,
+    disabled: false,
+    isSaveTable: false,
+    tableName: '',
+    fieldName: 'id',
+    fieldId: 'id',
+    isSubTable: false,
+    showChildren: true,
+    type: 'input',
+    key: 'e21c39e056964ba1af0207c8dfa7b54b',
+    children: [],
+  },
+  {
+    required: true,
+    view: true,
+    edit: true,
+    disabled: false,
+    isSaveTable: false,
+    tableName: '',
+    fieldName: '节点名称',
+    fieldId: 'taskDefKey',
+    isSubTable: false,
+    showChildren: true,
+    type: 'input',
+    key: 'a7f8acb0021c4df09452039b01ec313d',
+    children: [],
+  },
+  {
+    required: true,
+    view: true,
+    edit: true,
+    disabled: false,
+    isSaveTable: false,
+    tableName: '',
+    fieldName: '流程名称',
+    fieldId: 'procDefKey',
+    isSubTable: false,
+    showChildren: true,
+    type: 'input',
+    key: '7107f6f6ef594c6687b9087e7f823c4d',
+    children: [],
+  },
+  {
+    required: true,
+    view: true,
+    edit: true,
+    disabled: false,
+    isSaveTable: false,
+    tableName: '',
+    fieldName: '流程默认id',
+    fieldId: 'procDefId',
+    isSubTable: false,
+    showChildren: true,
+    type: 'input',
+    key: '76db839377a7417f87d9d7540dd1f5f4',
+    children: [],
+  },
+  {
+    required: true,
+    view: true,
+    edit: true,
+    disabled: false,
+    isSaveTable: false,
+    tableName: '',
+    fieldName: '根节点实例id',
+    fieldId: 'rootProcInstId',
+    isSubTable: false,
+    showChildren: true,
+    type: 'input',
+    key: '11acfec9f51b4a45a390840acd00b077',
+    children: [],
+  },
+  {
+    required: true,
+    view: true,
+    edit: true,
+    disabled: false,
+    isSaveTable: false,
+    tableName: '',
+    fieldName: '流程实例id',
+    fieldId: 'procInstId',
+    isSubTable: false,
+    showChildren: true,
+    type: 'input',
+    key: '31d294d5c7c845f88d1176ab5a4913e0',
+    children: [],
+  },
+  {
+    required: true,
+    view: true,
+    edit: true,
+    disabled: false,
+    isSaveTable: false,
+    tableName: '',
+    fieldName: '执行节点id',
+    fieldId: 'executionId',
+    isSubTable: false,
+    showChildren: true,
+    type: 'input',
+    key: 'f58327d6d3b04aad93eb415b3b8bfc60',
+    children: [],
+  },
+  {
+    required: true,
+    view: true,
+    edit: true,
+    disabled: false,
+    isSaveTable: false,
+    tableName: '',
+    fieldName: '节点实例id',
+    fieldId: 'actInstId',
+    isSubTable: false,
+    showChildren: true,
+    type: 'input',
+    key: 'c88aeae388c4488aa459e023cd1a35e8',
+    children: [],
+  },
+  {
+    required: true,
+    view: true,
+    edit: true,
+    disabled: false,
+    isSaveTable: false,
+    tableName: '',
+    fieldName: '节点名称',
+    fieldId: 'name',
+    isSubTable: false,
+    showChildren: true,
+    type: 'input',
+    key: 'e444605174364af2b10897b2987d2dec',
+    children: [],
+  },
+];

src/views/actHiTaskinst/index.vue

@@ -0,0 +1,328 @@
+<template>
+  <PageWrapper dense fixedHeight contentFullHeight contentClass="flex">
+
+
+    <BasicTable @register="registerTable" ref="tableRef" @row-dbClick="dbClickRow">
+
+      <template #toolbar>
+        <template v-for="button in tableButtonConfig" :key="button.code">
+          <a-button v-if="button.isDefault" :type="button.type" @click="buttonClick(button.code)">
+            <template #icon>
+              <Icon :icon="button.icon" />
+            </template>
+            {{ button.name }}
+          </a-button>
+          <a-button v-else :type="button.type">
+            <template #icon>
+              <Icon :icon="button.icon" />
+            </template>
+            {{ button.name }}
+          </a-button>
+        </template>
+      </template>
+      <template #bodyCell="{ column, record }">
+
+
+
+        <template v-if="column.dataIndex === 'action'">
+          <TableAction :actions="getActions(record)" />
+        </template>
+      </template>
+    </BasicTable>
+
+
+
+    <ActHiTaskinstModal @register="registerModal" @success="handleSuccess" />
+
+
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+import {
+  ref, computed, onMounted, onUnmounted, createVNode,
+
+} from 'vue';
+
+import { Modal } from 'ant-design-vue';
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { BasicTable, useTable, TableAction, ActionItem } from '/@/components/Table';
+import { getActHiTaskinstPage, deleteActHiTaskinst } from '/@/api/actHiTaskinst/index';
+import { PageWrapper } from '/@/components/Page';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { usePermission } from '/@/hooks/web/usePermission';
+import { useRouter } from 'vue-router';
+
+
+
+
+import { useModal } from '/@/components/Modal';
+
+
+
+import ActHiTaskinstModal from './components/ActHiTaskinstModal.vue';
+
+
+
+
+
+
+import { searchFormSchema, columns } from './components/config';
+import Icon from '/@/components/Icon/index';
+
+
+
+
+
+
+
+import useEventBus from '/@/hooks/event/useEventBus';
+
+const { bus, CREATE_FLOW, FLOW_PROCESSED, FORM_LIST_MODIFIED } = useEventBus();
+
+const { notification } = useMessage();
+const { t } = useI18n();
+defineEmits(['register']);
+const { filterColumnAuth, filterButtonAuth } = usePermission();
+
+const filterColumns = filterColumnAuth(columns);
+const tableRef = ref();
+
+//展示在列表内的按钮
+const actionButtons = ref<string[]>(['view', 'edit', 'copyData', 'delete', 'startwork', 'flowRecord']);
+const buttonConfigs = computed(() => {
+  const list = [{ "name": "新增", "code": "add", "icon": "ant-design:plus-outlined", "isDefault": true, "isUse": true }, { "name": "编辑", "code": "edit", "icon": "ant-design:form-outlined", "isDefault": true, "isUse": true }, { "name": "刷新", "code": "refresh", "icon": "ant-design:reload-outlined", "isDefault": true, "isUse": true }, { "name": "查看", "code": "view", "icon": "ant-design:eye-outlined", "isDefault": true, "isUse": true }, { "name": "删除", "code": "delete", "icon": "ant-design:delete-outlined", "isDefault": true, "isUse": true }]
+  return filterButtonAuth(list);
+})
+
+const tableButtonConfig = computed(() => {
+  return buttonConfigs.value?.filter((x) => !actionButtons.value.includes(x.code));
+});
+
+const actionButtonConfig = computed(() => {
+  return buttonConfigs.value?.filter((x) => actionButtons.value.includes(x.code));
+});
+
+const btnEvent = { add: handleAdd, edit: handleEdit, refresh: handleRefresh, view: handleView, delete: handleDelete, }
+
+const { currentRoute } = useRouter();
+const router = useRouter();
+
+
+const formIdComputedRef = ref();
+formIdComputedRef.value = currentRoute.value.meta.formId
+const schemaIdComputedRef = ref();
+schemaIdComputedRef.value = currentRoute.value.meta.schemaId
+
+
+
+
+
+
+const [registerModal, { openModal }] = useModal();
+
+
+const formName = '监控流程任务管理';
+const [registerTable, { reload, }] = useTable({
+  title: '' || (formName + '列表'),
+  api: getActHiTaskinstPage,
+  rowKey: 'id',
+  columns: filterColumns,
+  formConfig: {
+    rowProps: {
+      gutter: 16,
+    },
+    schemas: searchFormSchema,
+    fieldMapToTime: [],
+    showResetButton: false,
+  },
+  beforeFetch: (params) => {
+    return { ...params, FormId: formIdComputedRef.value, PK: 'id' };
+  },
+  afterFetch: (res) => {
+    tableRef.value.setToolBarWidth();
+
+  },
+  useSearchForm: true,
+  showTableSetting: true,
+
+  striped: false,
+  actionColumn: {
+    width: 160,
+    title: '操作',
+    dataIndex: 'action',
+    slots: { customRender: 'action' },
+  },
+  tableSetting: {
+    size: false,
+    setting: false,
+  },
+
+});
+
+function dbClickRow(record) {
+  const { processId, taskIds, schemaId } = record.workflowData || {};
+  if (taskIds && taskIds.length) {
+    router.push({
+      path: '/flow/' + schemaId + '/' + (processId || '') + '/approveFlow',
+      query: {
+        taskId: taskIds[0],
+        formName: formName
+      }
+    });
+  } else if (schemaId && !taskIds && processId) {
+    router.push({
+      path: '/flow/' + schemaId + '/' + processId + '/approveFlow',
+      query: {
+        readonly: 1,
+        taskId: '',
+        formName: formName
+      }
+    });
+  } else {
+    router.push({
+      path: '/form/actHiTaskinst/' + record.id + '/viewForm',
+      query: {
+        formPath: 'dev/actHiTaskinst',
+        formName: formName
+      }
+    });
+  }
+}
+
+function buttonClick(code) {
+
+  btnEvent[code]();
+}
+
+function handleAdd() {
+  if (schemaIdComputedRef.value) {
+    router.push({
+      path: '/flow/' + schemaIdComputedRef.value + '/0/createFlow'
+    });
+  } else {
+    router.push({
+      path: '/form/actHiTaskinst/0/createForm',
+      query: {
+        formPath: 'dev/actHiTaskinst',
+        formName: formName
+      }
+    });
+  }
+}
+
+function handleEdit(record: Recordable) {
+
+  router.push({
+    path: '/form/actHiTaskinst/' + record.id + '/updateForm',
+    query: {
+      formPath: 'dev/actHiTaskinst',
+      formName: formName
+    }
+  });
+}
+
+
+
+function handleDelete(record: Recordable) {
+  deleteList([record.id]);
+}
+
+function deleteList(ids) {
+  Modal.confirm({
+    title: '提示信息',
+    icon: createVNode(ExclamationCircleOutlined),
+    content: '是否确认删除？',
+    okText: '确认',
+    cancelText: '取消',
+    onOk() {
+      deleteActHiTaskinst(ids).then((_) => {
+        handleSuccess();
+        notification.success({
+          message: 'Tip',
+          description: t('删除成功！'),
+        });
+      });
+    },
+    onCancel() { },
+  });
+}
+
+
+
+
+
+
+function handleRefresh() {
+  reload();
+}
+function handleSuccess() {
+
+  reload();
+}
+
+function handleView(record: Recordable) {
+
+  dbClickRow(record);
+
+}
+
+
+
+
+onMounted(() => {
+
+  if (schemaIdComputedRef.value) {
+    bus.on(FLOW_PROCESSED, handleRefresh);
+    bus.on(CREATE_FLOW, handleRefresh);
+  } else {
+    bus.on(FORM_LIST_MODIFIED, handleRefresh);
+  }
+});
+onUnmounted(() => {
+  if (schemaIdComputedRef.value) {
+    bus.off(FLOW_PROCESSED, handleRefresh);
+    bus.off(CREATE_FLOW, handleRefresh);
+  } else {
+    bus.off(FORM_LIST_MODIFIED, handleRefresh);
+  }
+});
+function getActions(record: Recordable): ActionItem[] {
+
+  const actionsList: ActionItem[] = actionButtonConfig.value?.map((button) => {
+    if (!record.workflowData?.processId) {
+      return {
+        icon: button?.icon,
+        tooltip: button?.name,
+        color: button.code === 'delete' ? 'error' : undefined,
+        onClick: btnEvent[button.code].bind(null, record),
+      };
+    } else {
+      if (button.code === 'view') {
+        return {
+          icon: button?.icon,
+          tooltip: button?.name,
+          onClick: btnEvent[button.code].bind(null, record),
+        };
+      } else {
+        return {};
+      }
+    }
+  });
+  return actionsList;
+}
+
+</script>
+<style lang="less" scoped>
+:deep(.ant-table-selection-col) {
+  width: 50px;
+}
+
+.show {
+  display: flex;
+}
+
+.hide {
+  display: none !important;
+}
+</style>

src/views/auditOpt/auditRecord/components/Form.vue

@@ -0,0 +1,206 @@
+<template>
+  <SimpleForm
+    ref="systemFormRef"
+    :formProps="data.formDataProps"
+    :formModel="{}"
+    :isWorkFlow="props.fromPage!=FromPageType.MENU"
+  />
+</template>
+<script lang="ts" setup>
+  import { reactive, ref, onMounted, createVNode } from 'vue';
+  import { formProps, formEventConfigs } from './config';
+  import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
+  import { addXjrWorkflowApproveRecord, getXjrWorkflowApproveRecord, updateXjrWorkflowApproveRecord, deleteXjrWorkflowApproveRecord } from '/@/api/auditOpt/auditRecord';
+  import { cloneDeep } from 'lodash-es';
+  import { FormDataProps } from '/@/components/Designer/src/types';
+  import { usePermission } from '/@/hooks/web/usePermission';
+  import { FromPageType } from '/@/enums/workflowEnum';
+  import { createFormEvent, getFormDataEvent, loadFormEvent, submitFormEvent,} from '/@/hooks/web/useFormEvent';
+  import { changeWorkFlowForm, changeSchemaDisabled } from '/@/hooks/web/useWorkFlowForm';
+  import { WorkFlowFormParams } from '/@/model/workflow/bpmnConfig';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+  import { Modal} from "ant-design-vue";
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  
+  const { filterFormSchemaAuth } = usePermission();
+
+  const RowKey = 'id';
+  const emits = defineEmits(['changeUploadComponentIds','loadingCompleted', 'form-mounted']);
+  const props = defineProps({
+    fromPage: {
+      type: Number,
+      default: FromPageType.MENU,
+    },
+  });
+  const systemFormRef = ref();
+  const data: { formDataProps: FormDataProps } = reactive({
+    formDataProps: cloneDeep(formProps),
+  });
+  const state = reactive({
+    formModel: {},
+  });
+  const { notification } = useMessage();
+  const { t } = useI18n();
+
+  onMounted(async () => {
+    try {
+      if (props.fromPage == FromPageType.MENU) {
+        setMenuPermission();
+        await createFormEvent(formEventConfigs, state.formModel,
+          systemFormRef.value,
+          formProps.schemas); //表单事件：初始化表单
+        await loadFormEvent(formEventConfigs, state.formModel,
+          systemFormRef.value,
+          formProps.schemas); //表单事件：加载表单
+      } else if (props.fromPage == FromPageType.FLOW) {
+        emits('loadingCompleted'); //告诉系统表单已经加载完毕
+        // loadingCompleted后 工作流页面直接利用Ref调用setWorkFlowForm方法
+      } else if (props.fromPage == FromPageType.PREVIEW) {
+        // 预览 无需权限，表单事件也无需执行
+      } else if (props.fromPage == FromPageType.DESKTOP) {
+        // 桌面设计 表单事件需要执行
+        emits('loadingCompleted'); //告诉系统表单已经加载完毕
+        await createFormEvent(formEventConfigs, state.formModel,
+          systemFormRef.value,
+          formProps.schemas); //表单事件：初始化表单
+        await loadFormEvent(formEventConfigs, state.formModel,
+          systemFormRef.value,
+          formProps.schemas); //表单事件：加载表单
+      }
+      emits('form-mounted', formProps);
+    } catch (error) {
+
+    }
+  });
+  // 根据菜单页面权限，设置表单属性（必填，禁用，显示）
+  function setMenuPermission() {
+    data.formDataProps.schemas = filterFormSchemaAuth(formProps.schemas!);
+  }
+
+  // 校验form 通过返回表单数据
+  async function validate() {
+    let values = [];
+    try {
+      values = await systemFormRef.value?.validate();
+      //添加隐藏组件
+      if (data.formDataProps.hiddenComponent?.length) {
+        data.formDataProps.hiddenComponent.forEach((component) => {
+          values[component.bindField] = component.value;
+        });
+      }
+    } finally {
+    }
+    return values;
+  }
+  // 根据行唯一ID查询行数据，并设置表单数据   【编辑】
+  async function setFormDataFromId(rowId, skipUpdate) {
+    try {
+      const record = await getXjrWorkflowApproveRecord(rowId);
+      if (skipUpdate) {
+          return record;
+      }
+      setFieldsValue(record);
+      state.formModel = record;
+      await getFormDataEvent(formEventConfigs, state.formModel, systemFormRef.value, formProps.schemas); //表单事件：获取表单数据
+      return record;  
+    } catch (error) {
+
+    }
+  }
+  // 辅助设置表单数据
+  function setFieldsValue(record) {
+    systemFormRef.value.setFieldsValue(record);
+  }
+  // 重置表单数据
+  async function resetFields() {
+    await systemFormRef.value.resetFields();
+  }
+  //  设置表单数据全部为Disabled  【查看】
+  async function setDisabledForm(isDisabled) {
+    data.formDataProps.schemas = changeSchemaDisabled(cloneDeep(data.formDataProps.schemas),isDisabled);
+  }
+  // 获取行键值
+  function getRowKey() {
+    return RowKey;
+  }
+  // 更新api表单数据
+  async function update({ values, rowId }) {
+    try {
+      values[RowKey] = rowId;
+      state.formModel = values;
+      let saveVal = await updateXjrWorkflowApproveRecord(values);
+      await submitFormEvent(formEventConfigs, state.formModel,
+        systemFormRef.value,
+        formProps.schemas); //表单事件：提交表单
+      return saveVal;
+    } catch (error) {}
+  }
+  // 新增api表单数据
+  async function add(values) {
+    try {
+      state.formModel = values;
+      let saveVal = await addXjrWorkflowApproveRecord(values);
+      await submitFormEvent(formEventConfigs, state.formModel,
+        systemFormRef.value,
+        formProps.schemas); //表单事件：提交表单
+      return saveVal;
+    } catch (error) {}
+  }
+  // 根据工作流页面权限，设置表单属性（必填，禁用，显示）
+  async function setWorkFlowForm(obj: WorkFlowFormParams) {
+    try {
+      let flowData = changeWorkFlowForm(cloneDeep(formProps), obj);
+      let { buildOptionJson, uploadComponentIds, formModels, isViewProcess } = flowData;
+      data.formDataProps = buildOptionJson;
+      emits('changeUploadComponentIds', uploadComponentIds); //工作流中必须保存上传组件id【附件汇总需要】
+      if (isViewProcess) {
+        setDisabledForm(); //查看
+      }
+      state.formModel = formModels;
+      setFieldsValue(formModels);
+    } catch (error) {}
+    await createFormEvent(formEventConfigs, state.formModel,
+      systemFormRef.value,
+      formProps.schemas); //表单事件：初始化表单
+    await loadFormEvent(formEventConfigs, state.formModel,
+      systemFormRef.value,
+      formProps.schemas); //表单事件：加载表单
+  }
+  // 详情页删除功能
+  function handleDelete(record: Recordable) {
+    deleteList([record]);
+  }
+  function deleteList(ids) {
+    Modal.confirm({
+      title: '提示信息',
+      icon: createVNode(ExclamationCircleOutlined),
+      content: '是否确认删除？',
+      okText: '确认',
+      cancelText: '取消',
+      onOk() {
+        deleteXjrWorkflowApproveRecord(ids).then((_) => {
+          notification.success({
+            message: 'Tip',
+            description: t('删除成功！'),
+          });
+        });
+      },
+      onCancel() {
+      },
+    });
+  }
+  defineExpose({
+    setFieldsValue,
+    resetFields,
+    validate,
+    add,
+    update,
+    setFormDataFromId,
+    setDisabledForm,
+    setMenuPermission,
+    setWorkFlowForm,
+    getRowKey,
+    handleDelete
+  });
+</script>

src/views/auditOpt/auditRecord/components/auditRecordModal.vue

@@ -0,0 +1,110 @@
+<template>
+
+    <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" @cancel="handleClose" :paddingRight="15" :bodyStyle="{ minHeight: '400px !important' }">
+      <ModalForm ref="formRef" :fromPage="FromPageType.MENU" />
+    </BasicModal>
+
+</template>
+<script lang="ts" setup>
+  import { ref, computed, reactive } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { formProps } from './config';
+  import ModalForm from './Form.vue';
+  import { FromPageType } from '/@/enums/workflowEnum';
+
+  const emit = defineEmits(['success', 'register']);
+
+  const { notification } = useMessage();
+  const formRef = ref();
+  const state = reactive({
+    formModel: {},
+    isUpdate: true,
+    isView: false,
+    isCopy: false,
+    rowId: '',
+  });
+
+  const { t } = useI18n();
+  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+    state.isUpdate = !!data?.isUpdate;
+    state.isView = !!data?.isView;
+    state.isCopy = !!data?.isCopy;
+
+    setModalProps({
+      destroyOnClose: true,
+      maskClosable: false,
+      showCancelBtn: !state.isView,
+      showOkBtn: !state.isView,
+      canFullscreen: true,
+      width: 900,
+    });
+    if (state.isUpdate || state.isView || state.isCopy) {
+      state.rowId = data.id;
+      if (state.isView) {
+        await formRef.value.setDisabledForm();
+      }
+      await formRef.value.setFormDataFromId(state.rowId);
+    } else {
+      formRef.value.resetFields();
+    }
+  });
+
+  const getTitle = computed(() => (state.isView ? '查看' : !state.isUpdate ? '新增' : '编辑'));
+
+  async function saveModal() {
+    let saveSuccess = false;
+    try {
+      const values = await formRef.value?.validate();
+      //添加隐藏组件
+      if (formProps.hiddenComponent?.length) {
+        formProps.hiddenComponent.forEach((component) => {
+          values[component.bindField] = component.value;
+        });
+      }
+      if (values !== false) {
+        try {
+          if (!state.isUpdate || state.isCopy) {
+            saveSuccess = await formRef.value.add(values);
+          } else {
+            saveSuccess = await formRef.value.update({ values, rowId: state.rowId });
+          }
+          return saveSuccess;
+        } catch (error) {}
+      }
+    } catch (error) {
+      return saveSuccess;
+    }
+  }
+
+  async function handleSubmit() {
+    try {
+      const saveSuccess = await saveModal();
+      setModalProps({ confirmLoading: true });
+      if (saveSuccess) {
+        if (!state.isUpdate || state.isCopy) {
+          //false 新增
+          notification.success({
+            message: 'Tip',
+            description: t('新增成功！'),
+          }); //提示消息
+        } else {
+          notification.success({
+            message: 'Tip',
+            description: t('修改成功！'),
+          }); //提示消息
+        }
+        closeModal();
+        formRef.value.resetFields();
+        emit('success');
+      }
+    } finally {
+      setModalProps({ confirmLoading: false });
+    }
+  }
+    
+  function handleClose() {
+    formRef.value.resetFields();
+  }
+</script>

src/views/auditOpt/auditRecord/components/config.ts

@@ -0,0 +1,282 @@
+import { FormProps, FormSchema } from '/@/components/Form';
+import { BasicColumn } from '/@/components/Table';
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'taskName',
+    label: '节点名称',
+    component: 'Input',
+  },
+  {
+    field: 'approveTime',
+    label: '审批时间',
+    component: 'RangePicker',
+    componentProps: {
+      format: 'YYYY-MM-DD HH:mm:ss',
+      style: { width: '100%' },
+      getPopupContainer: () => document.body,
+    },
+  },
+
+  // {
+  //   field: 'approveUserId',
+  //   label: '审批用户id',
+  //   component: 'Input',
+  // },
+  // {
+  //   field: 'approveComment',
+  //   label: '审批意见',
+  //   component: 'Input',
+  // },
+];
+
+export const columns: BasicColumn[] = [
+  {
+    dataIndex: 'taskName',
+    title: '节点名称',
+    componentType: 'input',
+    align: 'left',
+
+    sorter: true,
+  },
+
+  // {
+  //   dataIndex: 'approveUserId',
+  //   title: '审批用户id',
+  //   componentType: 'input',
+  //   align: 'left',
+
+  //   sorter: true,
+  // },
+
+  {
+    dataIndex: 'approveUserName',
+    title: '审批用户',
+    componentType: 'input',
+    align: 'left',
+
+    sorter: true,
+  },
+
+  {
+    dataIndex: 'approveComment',
+    title: '审批意见',
+    componentType: 'textarea',
+    align: 'left',
+
+    sorter: true,
+  },
+
+  {
+    dataIndex: 'approveTime',
+    title: '审批时间',
+    componentType: 'date',
+    align: 'left',
+
+    sorter: true,
+  },
+
+  
+];
+//表单事件
+export const formEventConfigs = {
+  0: [
+    {
+      type: 'circle',
+      color: '#2774ff',
+      text: '开始节点',
+      icon: '#icon-kaishi',
+      bgcColor: '#D8E5FF',
+      isUserDefined: false,
+    },
+    {
+      color: '#F6AB01',
+      icon: '#icon-chushihua',
+      text: '初始化表单',
+      bgcColor: '#f9f5ea',
+      isUserDefined: false,
+      nodeInfo: { processEvent: [] },
+    },
+  ],
+  1: [
+    {
+      color: '#B36EDB',
+      icon: '#icon-shujufenxi',
+      text: '获取表单数据',
+      detail: '(新增无此操作)',
+      bgcColor: '#F8F2FC',
+      isUserDefined: false,
+      nodeInfo: { processEvent: [] },
+    },
+  ],
+  2: [
+    {
+      color: '#F8625C',
+      icon: '#icon-jiazai',
+      text: '加载表单',
+      bgcColor: '#FFF1F1',
+      isUserDefined: false,
+      nodeInfo: { processEvent: [] },
+    },
+  ],
+  3: [
+    {
+      color: '#6C6AE0',
+      icon: '#icon-jsontijiao',
+      text: '提交表单',
+      bgcColor: '#F5F4FF',
+      isUserDefined: false,
+      nodeInfo: { processEvent: [] },
+    },
+  ],
+  4: [
+    {
+      type: 'circle',
+      color: '#F8625C',
+      text: '结束节点',
+      icon: '#icon-jieshuzhiliao',
+      bgcColor: '#FFD6D6',
+      isLast: true,
+      isUserDefined: false,
+    },
+  ],
+};
+export const formProps: FormProps = {
+  labelCol: { span: 3, offset: 0 },
+  labelAlign: 'right',
+  layout: 'horizontal',
+  size: 'default',
+  schemas: [
+    {
+      key: 'd3792e446e3449fda47a82706b6427bd',
+      field: 'taskName',
+      label: '节点名称',
+      type: 'select',
+      component: 'Select',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: true,
+        respNewRow: false,
+        placeholder: '请输入节点名称',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: false,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: true,
+        scan: false,
+        respBreakLine: false,
+        style: { width: '100%' },
+      },
+    },
+    {
+      key: 'b225f99234434d1d8c76bc72ba944267',
+      field: 'approveUserId',
+      label: '审批用户id',
+      type: 'input',
+      component: 'Input',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: true,
+        respNewRow: false,
+        placeholder: '请输入审批用户id',
+        prefix: '',
+        suffix: '',
+        addonBefore: '',
+        addonAfter: '',
+        disabled: false,
+        allowClear: false,
+        showLabel: true,
+        required: false,
+        rules: [],
+        events: {},
+        isSave: false,
+        isShow: true,
+        scan: false,
+        style: { width: '100%' },
+      },
+    },
+    {
+      key: '04e6cbe34eed4220bf7123c74181a505',
+      field: 'approveTime',
+      label: '审批时间',
+      type: 'date',
+      component: 'DatePicker',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        span: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: true,
+        respNewRow: false,
+        defaultValue: '',
+        width: '100%',
+        placeholder: '请选择审批时间',
+        format: 'YYYY-MM-DD HH:mm:ss',
+        showLabel: true,
+        allowClear: true,
+        disabled: false,
+        required: false,
+        isShow: true,
+        rules: [],
+        events: {},
+        style: { width: '100%' },
+      },
+    },
+    {
+      key: '49afa528cd3b422395a9ac5e4b363a99',
+      field: 'approveComment',
+      label: '审批意见',
+      type: 'textarea',
+      component: 'InputTextArea',
+      colProps: { span: 24 },
+      defaultValue: '',
+      componentProps: {
+        width: '100%',
+        span: '',
+        defaultValue: '',
+        labelWidthMode: 'fix',
+        labelFixWidth: 120,
+        responsive: true,
+        respNewRow: true,
+        placeholder: '请输入审批意见',
+        rows: 4,
+        autoSize: false,
+        showCount: false,
+        disabled: false,
+        showLabel: true,
+        allowClear: false,
+        required: false,
+        isShow: true,
+        rules: [],
+        events: {},
+        style: { width: '100%' },
+      },
+    },
+  ],
+  showActionButtonGroup: false,
+  buttonLocation: 'center',
+  actionColOptions: { span: 24 },
+  showResetButton: false,
+  showSubmitButton: false,
+  hiddenComponent: [],
+};

src/views/auditOpt/auditRecord/components/workflowPermission.ts

@@ -0,0 +1,62 @@
+export const permissionList = [
+  {
+    required: true,
+    view: true,
+    edit: true,
+    disabled: false,
+    isSaveTable: false,
+    tableName: '',
+    fieldName: '节点名称',
+    fieldId: 'taskName',
+    isSubTable: false,
+    showChildren: true,
+    type: 'input',
+    key: 'd3792e446e3449fda47a82706b6427bd',
+    children: [],
+  },
+  {
+    required: true,
+    view: true,
+    edit: true,
+    disabled: false,
+    isSaveTable: false,
+    tableName: '',
+    fieldName: '审批用户id',
+    fieldId: 'approveUserId',
+    isSubTable: false,
+    showChildren: true,
+    type: 'input',
+    key: 'b225f99234434d1d8c76bc72ba944267',
+    children: [],
+  },
+  {
+    required: true,
+    view: true,
+    edit: true,
+    disabled: false,
+    isSaveTable: false,
+    tableName: '',
+    fieldName: '审批时间',
+    fieldId: 'approveTime',
+    isSubTable: false,
+    showChildren: true,
+    type: 'date',
+    key: '04e6cbe34eed4220bf7123c74181a505',
+    children: [],
+  },
+  {
+    required: true,
+    view: true,
+    edit: true,
+    disabled: false,
+    isSaveTable: false,
+    tableName: '',
+    fieldName: '审批意见',
+    fieldId: 'approveComment',
+    isSubTable: false,
+    showChildren: true,
+    type: 'textarea',
+    key: '49afa528cd3b422395a9ac5e4b363a99',
+    children: [],
+  },
+];

src/views/auditOpt/auditRecord/index.vue

@@ -0,0 +1,397 @@
+<template>
+  <PageWrapper dense fixedHeight contentFullHeight contentClass="flex">
+
+
+    <BasicTable @register="registerTable" ref="tableRef" @row-dbClick="dbClickRow">
+
+      <template #toolbar>
+        <template v-for="button in tableButtonConfig" :key="button.code">
+          <a-button v-if="button.isDefault" :type="button.type" @click="buttonClick(button.code)">
+            <template #icon>
+              <Icon :icon="button.icon" />
+            </template>
+            {{ button.name }}
+          </a-button>
+          <a-button v-else :type="button.type">
+            <template #icon>
+              <Icon :icon="button.icon" />
+            </template>
+            {{ button.name }}
+          </a-button>
+        </template>
+      </template>
+      <template #bodyCell="{ column, record }">
+
+
+
+        <template v-if="column.dataIndex === 'action'">
+          <TableAction :actions="getActions(record)" />
+        </template>
+      </template>
+    </BasicTable>
+
+
+
+    <AuditRecordModal @register="registerModal" @success="handleSuccess" />
+
+    <opinionDialog ref="opinionDlg" />
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+import {
+  ref, computed, onMounted, onUnmounted, createVNode,
+
+} from 'vue';
+
+import { Modal } from 'ant-design-vue';
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { BasicTable, useTable, TableAction, ActionItem } from '/@/components/Table';
+import { getXjrWorkflowApproveRecordPage, deleteXjrWorkflowApproveRecord, getAllApproveRecord, addApproveRecord, deleteApproveRecord, updateApproveRecord } from '/@/api/auditOpt/auditRecord';
+import { PageWrapper } from '/@/components/Page';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { usePermission } from '/@/hooks/web/usePermission';
+import { useRouter } from 'vue-router';
+import { getXjrWorkflowApproveRecord } from '/@/api/auditOpt/auditRecord';
+import { useModal } from '/@/components/Modal';
+import AuditRecordModal from './components/AuditRecordModal.vue';
+import { searchFormSchema, columns } from './components/config';
+import Icon from '/@/components/Icon/index';
+import useEventBus from '/@/hooks/event/useEventBus';
+import CustomModeler from '/@bpmn/modeler';
+import dayjs, { Dayjs } from 'dayjs';
+import opinionDialog from '/@/components/SecondDev/OpinionDialogSelected.vue';
+import { message } from 'ant-design-vue';
+
+const { bus, CREATE_FLOW, FLOW_PROCESSED, FORM_LIST_MODIFIED } = useEventBus();
+
+const { notification } = useMessage();
+const { t } = useI18n();
+defineEmits(['register']);
+const { filterColumnAuth, filterButtonAuth } = usePermission();
+
+// const filterColumns = filterColumnAuth(columns);
+const filterColumns = columns;
+const tableRef = ref();
+
+const props = defineProps({
+  processId: String,
+  xml: String,
+  schemaId: String,
+});
+const opinionDlg = ref();
+
+//展示在列表内的按钮
+const actionButtons = ref<string[]>(['view', 'edit', 'copyData', 'delete', 'startwork', 'flowRecord']);
+const buttonConfigs = computed(() => {
+  // { "name": "查看", "code": "view", "icon": "ant-design:eye-outlined", "isDefault": true, "isUse": true },
+  // { "name": "查看详情", "code": "detail", "icon": "ant-design:eye-outlined", "isDefault": true, "isUse": true }, 
+  const list = [{ "name": "新增", "code": "add", "icon": "ant-design:plus-outlined", "isDefault": true, "isUse": true }, { "name": "编辑", "code": "edit", "icon": "ant-design:form-outlined", "isDefault": true, "isUse": true }, { "name": "刷新", "code": "refresh", "icon": "ant-design:reload-outlined", "isDefault": true, "isUse": true }, { "name": "删除", "code": "delete", "icon": "ant-design:delete-outlined", "isDefault": true, "isUse": true }]
+  // return filterButtonAuth(list);
+  return list;
+})
+
+const tableButtonConfig = computed(() => {
+  return buttonConfigs.value?.filter((x) => !actionButtons.value.includes(x.code));
+});
+
+const actionButtonConfig = computed(() => {
+  return buttonConfigs.value?.filter((x) => actionButtons.value.includes(x.code));
+});
+
+const btnEvent = { add: handleAdd, edit: handleEdit, refresh: handleRefresh, view: handleView, detail: handleDetail, delete: handleDelete, }
+
+const { currentRoute } = useRouter();
+const router = useRouter();
+
+
+const formIdComputedRef = ref();
+formIdComputedRef.value = currentRoute.value.meta.formId
+const schemaIdComputedRef = ref();
+schemaIdComputedRef.value = currentRoute.value.meta.schemaId
+
+
+
+const [registerModal, { openModal }] = useModal();
+const allTaskNodes = ref<Array<{ 'taskId': string, 'taskName': string }>>([]);
+
+const formName = '审批意见';
+const [registerTable, { reload, }] = useTable({
+  title: '' || (formName + '列表'),
+  api: getXjrWorkflowApproveRecordPage,
+  rowKey: 'id',
+  columns: filterColumns,
+  formConfig: {
+    rowProps: {
+      gutter: 16,
+    },
+    schemas: searchFormSchema,
+    fieldMapToTime: [['approveTime', ['approveTimeStart', 'approveTimeEnd'], 'YYYY-MM-DD HH:mm:ss ', true],],
+    showResetButton: false,
+  },
+  beforeFetch: (params) => {
+    return { ...params, FormId: formIdComputedRef.value, 'processInstanceId': props.processId };
+  },
+  afterFetch: (res) => {
+    tableRef.value.setToolBarWidth();
+  },
+  useSearchForm: true,
+  showTableSetting: true,
+  striped: false,
+  actionColumn: {
+    width: 160,
+    title: '操作',
+    dataIndex: 'action',
+    slots: { customRender: 'action' },
+  },
+  tableSetting: {
+    size: false,
+    setting: false,
+  },
+
+});
+
+function dbClickRow(record) {
+  const { processId, taskIds, schemaId } = record.workflowData || {};
+  if (taskIds && taskIds.length) {
+    router.push({
+      path: '/flow/' + schemaId + '/' + (processId || '') + '/approveFlow',
+      query: {
+        taskId: taskIds[0],
+        formName: formName
+      }
+    });
+  } else if (schemaId && !taskIds && processId) {
+    router.push({
+      path: '/flow/' + schemaId + '/' + processId + '/approveFlow',
+      query: {
+        readonly: 1,
+        taskId: '',
+        formName: formName
+      }
+    });
+  } else {
+    router.push({
+      path: '/form/auditRecord/' + record.id + '/viewForm',
+      query: {
+        formPath: 'auditOpt/auditRecord',
+        formName: formName
+      }
+    });
+  }
+}
+
+async function init() {
+  const bpmnViewer = await new CustomModeler({
+    container: '',
+    additionalModules: [
+      {
+        labelEditingProvider: ['value', ''], //禁用节点编辑
+        paletteProvider: ['value', ''], //禁用/清空左侧工具栏
+        contextPadProvider: ['value', ''], //禁用图形菜单
+        bendpoints: ['value', {}], //禁用连线拖动
+        move: ['value', ''], //禁用单个图形拖动
+      },
+    ],
+  });
+  await bpmnViewer.importXML(props.xml);
+  bpmnViewer.get('elementRegistry').getAll().forEach(ele => {
+    if ((ele.di.get('bpmnElement').id as String).startsWith('Activity')) {
+      allTaskNodes.value.push({ 'taskName': ele.di.get('bpmnElement').name, 'taskId': ele.di.get('bpmnElement').id })
+    }
+  });
+}
+
+function buttonClick(code) {
+
+  btnEvent[code]();
+}
+
+function handleAdd() {
+  opinionDlg.value.toggleDialog({
+    action: 'select',
+    schemaId: props.schemaId,
+    choseTime: true,
+    multiple: false,
+    taskNode: allTaskNodes.value,
+    title: '新增审批记录',
+    callback(args) {
+      submit(args.info)
+    }
+  });
+}
+
+function submit(info) {
+  addApproveRecord({
+    'schemaId': props.schemaId,
+    'processId': props.processId,
+    'taskDefinitionKey': info.taskId,
+    'approveUserId': info.selectedList[0]['id'],
+    'approveTime': dayjs(info.time).format('YYYY-MM-DD HH:mm:ss'),
+    'approveComment': info.opinion
+  }).then(async res => {
+    if (res) {
+      message.info("新增成功！")
+      reload();
+    } else {
+      message.info("新增失败！")
+    }
+  })
+}
+
+function handleEdit(record: Recordable) {
+  console.log(77777, record);
+  opinionDlg.value.toggleDialog({
+    action: 'select',
+    schemaId: props.schemaId,
+    choseTime: true,
+    multiple: false,
+    taskNode: allTaskNodes.value,
+    taskId: record.taskDefinitionKey,
+    title: '编辑审批记录',
+    edit: true,
+    record: record,
+    callback(args) {
+      editAction(args.info, record)
+    }
+  });
+  // router.push({
+  //   path: '/form/auditRecord/' + record.id + '/updateForm',
+  //   query: {
+  //     formPath: 'auditOpt/auditRecord',
+  //     formName: formName
+  //   }
+  // });
+}
+
+function editAction(info, record) {
+  updateApproveRecord({
+    'id': record.id,
+    'approveComment': info.opinion,
+    'approveTime': dayjs(info.time).format('YYYY-MM-DD HH:mm:ss'),
+  }).then(async res => {
+    if (res) {
+      message.info("修改成功！")
+      reload();
+    } else {
+      message.info("修改失败！")
+    }
+  })
+}
+
+function handleDetail(record: Recordable) {
+
+}
+
+
+
+function handleDelete(record: Recordable) {
+  deleteList([record.id]);
+}
+
+function deleteList(ids) {
+  Modal.confirm({
+    title: '提示信息',
+    icon: createVNode(ExclamationCircleOutlined),
+    content: '是否确认删除？',
+    okText: '确认',
+    cancelText: '取消',
+    onOk() {
+      deleteApproveRecord(ids).then((res) => {
+        if (res) {
+          notification.success({
+            message: 'Tip',
+            description: t('删除成功！'),
+          });
+          handleSuccess();
+        } else {
+          notification.success({
+            message: 'Tip',
+            description: t('删除失败！'),
+          });
+        }
+
+      });
+    },
+    onCancel() { },
+  });
+}
+
+
+
+
+
+
+function handleRefresh() {
+  reload();
+}
+function handleSuccess() {
+
+  reload();
+}
+
+function handleView(record: Recordable) {
+
+  dbClickRow(record);
+
+}
+
+
+
+
+onMounted(() => {
+  if (schemaIdComputedRef.value) {
+    bus.on(FLOW_PROCESSED, handleRefresh);
+    bus.on(CREATE_FLOW, handleRefresh);
+  } else {
+    bus.on(FORM_LIST_MODIFIED, handleRefresh);
+  }
+  init();
+});
+onUnmounted(() => {
+  if (schemaIdComputedRef.value) {
+    bus.off(FLOW_PROCESSED, handleRefresh);
+    bus.off(CREATE_FLOW, handleRefresh);
+  } else {
+    bus.off(FORM_LIST_MODIFIED, handleRefresh);
+  }
+});
+function getActions(record: Recordable): ActionItem[] {
+
+  const actionsList: ActionItem[] = actionButtonConfig.value?.map((button) => {
+    if (!record.workflowData?.processId) {
+      return {
+        icon: button?.icon,
+        tooltip: button?.name,
+        color: button.code === 'delete' ? 'error' : undefined,
+        onClick: btnEvent[button.code].bind(null, record),
+      };
+    } else {
+      if (button.code === 'view') {
+        return {
+          icon: button?.icon,
+          tooltip: button?.name,
+          onClick: btnEvent[button.code].bind(null, record),
+        };
+      } else {
+        return {};
+      }
+    }
+  });
+  return actionsList;
+}
+
+</script>
+<style lang="less" scoped>
+:deep(.ant-table-selection-col) {
+  width: 50px;
+}
+
+.show {
+  display: flex;
+}
+
+.hide {
+  display: none !important;
+}
+</style>

src/views/formChange/changeLogDetail/components/ChangeRowDetailModal.vue

@@ -0,0 +1,201 @@
+<template>
+    <!-- <h2 align="left" disabled="true" size="default" isshow="true" style="font-size: 18px; font-weight: bold;"
+        required="false">变更详情</h2> -->
+    <div class="geg-flow-history">
+        <div v-for="(item, index) in dataList" :class="{ sep: index !== 0 }" class="item">
+            <div class="row">
+                <div class="col-6">
+                    <span style="color: gray;">{{ index + 1 + "、" }}</span>
+                    <span style="color: gray;">用户 </span>
+                    <span style="font-weight: bold;font-size: larger;"> {{ props.currentUserName }} </span>
+                    <span style="color: gray;"> 将 </span>
+                    <span style="font-weight: bold;font-size: larger;"> {{ item.fieldName ? item.fieldName :
+                        item.fieldCode }} </span>
+                    <span v-if="item.changeType == 'insert'">{{ " 新增为 " }}
+                        <span v-for="file in fileList">
+                            <span style="font-weight: bold;font-size: larger;color: black;"
+                                v-if="file.id == item.oldValue">{{ file.name + "-" }}</span>
+                        </span>
+                        <span style="font-weight: bold;font-size: larger;">{{
+                            item.newValue }} </span>
+                    </span>
+                    <span v-if="item.changeType == 'update'" style="color: gray;">{{ " 从 " }}
+                        <span v-for="file2 in fileList">
+                            <span style="font-weight: bold;font-size: larger;color: black;"
+                                v-if="file2.id == item.oldValue">{{ file2.name + "-" }}</span>
+                        </span>
+                        <span style="font-weight: bold;font-size: larger;color: black;">{{
+                            item.oldValue }}</span>
+                        <span>{{ " 修改至 " }}</span>
+                        <span v-for="file3 in fileList">
+                            <span style="font-weight: bold;font-size: larger;color: black;"
+                                v-if="file3.id == item.newValue">{{ file3.name + "-" }}</span>
+                        </span>
+                        <span style="font-weight: bold;font-size: larger;color: black;">{{
+                            item.newValue }}</span>
+                    </span>
+                    <span v-if="item.changeType == 'delete'" style="color: gray;">{{ " 删除了 " }}</span>
+                </div>
+                <div class="col-4">&nbsp;&nbsp;&nbsp;&nbsp;</div>
+                <div class="col-2">
+                    {{ props.currentCreateTime }}
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from '/@/hooks/web/useI18n';
+import { defineProps, onMounted, ref, watch } from 'vue';
+import dayjs from 'dayjs';
+import { getFileList } from "/@/api/system/file";
+import { getFormChangeRecordItemPage, getFormChangeRecordItemList } from '/@/api/formChange/changeLogDetail/index'
+import { FormChangeRecordItemModel, FormChangeRecordItemPageModel, FormChangeRecordItemPageParams } from '/@/api/formChange/changeLogDetail/model/ChangeLogDetailModel';
+import { array } from 'vue-types';
+import { FilePageListModel } from '/@/api/system/file/model';
+
+const { t } = useI18n();
+const props = defineProps({
+    mode: {
+        type: String,
+        default: 'simple'
+    },
+    items: Array,
+    autoHide: {
+        type: Boolean,
+        default: true
+    },
+    sort: {
+        type: String,
+        default: 'desc'
+    },
+    rowId: {
+        type: Number
+    },
+    currentUserName: {
+        type: String,
+    },
+    currentCreateTime: {
+        type: String,
+    },
+    formInfos: {
+        type: Array,
+    },
+    isShow: {
+        type: Boolean
+    }
+});
+
+const dataList = ref<FormChangeRecordItemPageModel[]>([]);
+const fileList = ref<{ id: string; name: string }[]>([]);
+
+
+function parseTime(t) {
+    return dayjs(t).format('YYYY-MM-DD HH:mm');
+}
+
+async function getData() {
+
+    getFormChangeRecordItemList({ "operationId": props.rowId, "size": 99, "limit": 1 }).then((res) => {
+        dataList.value = res.list;
+    })
+
+    fileList.value = [];
+
+    dataList.value.forEach(async ele1 => {
+        props.formInfos?.forEach(ele2 => {
+            if (ele1.fieldName == null && ele1.fieldCode == ele2.fieldId) {
+                ele1.fieldName = ele2.fieldName
+            }
+        })
+        if (ele1.fieldCode.indexOf('file') > 0 || ele1.fieldCode.indexOf('File') > 0) {
+            const newlist = await getFileList({ folderId: ele1.newValue });
+            fileList.value.push({ 'id': ele1.newValue, 'name': newlist.map((item) => item.fileName).join('、') });
+
+            const oldlist = await getFileList({ folderId: ele1.oldValue });
+            fileList.value.push({ 'id': ele1.oldValue, 'name': oldlist.map((item) => item.fileName).join('、') });
+        }
+    })
+}
+
+
+onMounted(async () => {
+    await getData();
+});
+
+watch(
+    () => props.isShow,
+    async (val) => {
+        if (val) {
+            await getData();
+        }
+    },
+);
+
+
+
+</script>
+
+<style lang="less">
+.geg-flow-history {
+    .signature {
+        /* height: 20px;*/
+        height: 30px;
+        width: 50px;
+    }
+
+    .row {
+        display: flex;
+        flex-direction: row;
+        margin: 6px 0;
+        line-height: 20px;
+        font-size: 14px;
+    }
+
+    .col-1 {
+        width: 160px;
+    }
+
+    .col-2 {
+        width: 130px;
+        color: #5a6875;
+    }
+
+    .col-3 {
+        flex: 1;
+
+        &.agree {
+            color: #52c41a;
+        }
+    }
+
+    .tag {
+        padding-right: 4px;
+
+        &.agree {
+            color: #52c41a;
+        }
+
+        &.reject {
+            color: #eaa63c;
+        }
+    }
+
+    .col-node {
+        width: 120px;
+    }
+
+    .position {
+        color: #90a0af;
+    }
+
+    .item {
+        padding: 8px 0;
+
+        &.sep {
+            border-top: 1px solid #e9e9e9;
+        }
+    }
+}
+</style>

src/views/formChange/changeLogDetail/components/ChangelogdetailModal.vue

@@ -0,0 +1,110 @@
+<template>
+    <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" @cancel="handleClose" :paddingRight="15" :bodyStyle="{ minHeight: '400px !important' }">
+        <ModalForm ref="formRef" :fromPage="FromPageType.MENU"/>
+    </BasicModal>
+</template>
+
+<script lang="ts" setup>
+    import {ref, computed, reactive} from 'vue';
+    import {BasicModal, useModalInner} from '/@/components/Modal';
+    import {useMessage} from '/@/hooks/web/useMessage';
+    import {useI18n} from '/@/hooks/web/useI18n';
+    import {formProps} from './config';
+    import ModalForm from './Form.vue';
+    import {FromPageType} from '/@/enums/workflowEnum';
+
+    const emit = defineEmits(['success', 'register']);
+
+    const {notification} = useMessage();
+    const formRef = ref();
+    const state = reactive({
+        formModel: {},
+        isUpdate: true,
+        isView: false,
+        isCopy: false,
+        rowId: '',
+    });
+
+    const {t} = useI18n();
+    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
+        state.isUpdate = !!data?.isUpdate;
+        state.isView = !!data?.isView;
+        state.isCopy = !!data?.isCopy;
+
+        setModalProps({
+            destroyOnClose: true,
+            maskClosable: false,
+            showCancelBtn: !state.isView,
+            showOkBtn: !state.isView,
+            canFullscreen: true,
+            width: 900,
+        });
+        if (state.isUpdate || state.isView || state.isCopy) {
+            state.rowId = data.id;
+            if (state.isView) {
+                await formRef.value.setDisabledForm();
+            }
+            await formRef.value.setFormDataFromId(state.rowId);
+        } else {
+            formRef.value.resetFields();
+        }
+    });
+
+    const getTitle = computed(() => (state.isView ? '查看' : !state.isUpdate ? '新增' : '编辑'));
+
+    async function saveModal() {
+        let saveSuccess = false;
+        try {
+            const values = await formRef.value?.validate();
+            //添加隐藏组件
+            if (formProps.hiddenComponent?.length) {
+                formProps.hiddenComponent.forEach((component) => {
+                    values[component.bindField] = component.value;
+                });
+            }
+            if (values !== false) {
+                try {
+                    if (!state.isUpdate || state.isCopy) {
+                        saveSuccess = await formRef.value.add(values);
+                    } else {
+                        saveSuccess = await formRef.value.update({values, rowId: state.rowId});
+                    }
+                    return saveSuccess;
+                } catch (error) {
+                }
+            }
+        } catch (error) {
+            return saveSuccess;
+        }
+    }
+
+    async function handleSubmit() {
+        try {
+            const saveSuccess = await saveModal();
+            setModalProps({confirmLoading: true});
+            if (saveSuccess) {
+                if (!state.isUpdate || state.isCopy) {
+                    //false 新增
+                    notification.success({
+                        message: 'Tip',
+                        description: t('新增成功！'),
+                    }); //提示消息
+                } else {
+                    notification.success({
+                        message: 'Tip',
+                        description: t('修改成功！'),
+                    }); //提示消息
+                }
+                closeModal();
+                formRef.value.resetFields();
+                emit('success');
+            }
+        } finally {
+            setModalProps({confirmLoading: false});
+        }
+    }
+
+    function handleClose() {
+        formRef.value.resetFields();
+    }
+</script>

src/views/formChange/changeLogDetail/components/CustomDevForm.vue

@@ -0,0 +1,169 @@
+
+<template>
+    <div ref="formWrap">
+        <Form ref="formRef" :label-col="getProps?.labelCol" :labelAlign="getProps?.labelAlign" :layout="getProps?.layout" :model="formModel" :wrapper-col="getProps?.wrapperCol" @keypress.enter="handleEnterPress">
+          <!-- 主表id  -->
+
+    <Col v-if="getIfShow2('1f7a5fa213f549748f3d00e177d86b1b')" v-show="getIsShow2('1f7a5fa213f549748f3d00e177d86b1b')" :span="getColWidth(schemaMap['1f7a5fa213f549748f3d00e177d86b1b'])">
+        <template v-if="showComponent(schemaMap['1f7a5fa213f549748f3d00e177d86b1b'])">
+            <SimpleFormItem v-model:value="formModel[schemaMap['1f7a5fa213f549748f3d00e177d86b1b'].field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schemaMap['1f7a5fa213f549748f3d00e177d86b1b']" />
+        </template>
+    </Col>
+    <!-- 表单类型  -->
+
+    <Col v-if="getIfShow2('524a5c581073419d8e8daff9e461695a')" v-show="getIsShow2('524a5c581073419d8e8daff9e461695a')" :span="getColWidth(schemaMap['524a5c581073419d8e8daff9e461695a'])">
+        <template v-if="showComponent(schemaMap['524a5c581073419d8e8daff9e461695a'])">
+            <SimpleFormItem v-model:value="formModel[schemaMap['524a5c581073419d8e8daff9e461695a'].field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schemaMap['524a5c581073419d8e8daff9e461695a']" />
+        </template>
+    </Col>
+    <!-- 表单编码  -->
+
+    <Col v-if="getIfShow2('d74b7a7bede24820a6c85677a6cdb5fe')" v-show="getIsShow2('d74b7a7bede24820a6c85677a6cdb5fe')" :span="getColWidth(schemaMap['d74b7a7bede24820a6c85677a6cdb5fe'])">
+        <template v-if="showComponent(schemaMap['d74b7a7bede24820a6c85677a6cdb5fe'])">
+            <SimpleFormItem v-model:value="formModel[schemaMap['d74b7a7bede24820a6c85677a6cdb5fe'].field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schemaMap['d74b7a7bede24820a6c85677a6cdb5fe']" />
+        </template>
+    </Col>
+    <!-- 主表或子表的id  -->
+
+    <Col v-if="getIfShow2('3d499852001044c0a6230e5ce18532d2')" v-show="getIsShow2('3d499852001044c0a6230e5ce18532d2')" :span="getColWidth(schemaMap['3d499852001044c0a6230e5ce18532d2'])">
+        <template v-if="showComponent(schemaMap['3d499852001044c0a6230e5ce18532d2'])">
+            <SimpleFormItem v-model:value="formModel[schemaMap['3d499852001044c0a6230e5ce18532d2'].field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schemaMap['3d499852001044c0a6230e5ce18532d2']" />
+        </template>
+    </Col>
+    <!-- 变更字段编码  -->
+
+    <Col v-if="getIfShow2('32b4ed61b5504f74943ead2cdc770baf')" v-show="getIsShow2('32b4ed61b5504f74943ead2cdc770baf')" :span="getColWidth(schemaMap['32b4ed61b5504f74943ead2cdc770baf'])">
+        <template v-if="showComponent(schemaMap['32b4ed61b5504f74943ead2cdc770baf'])">
+            <SimpleFormItem v-model:value="formModel[schemaMap['32b4ed61b5504f74943ead2cdc770baf'].field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schemaMap['32b4ed61b5504f74943ead2cdc770baf']" />
+        </template>
+    </Col>
+    <!-- 变更字段名  -->
+
+    <Col v-if="getIfShow2('f08ff059b6db43608e6ecf5f195f92bb')" v-show="getIsShow2('f08ff059b6db43608e6ecf5f195f92bb')" :span="getColWidth(schemaMap['f08ff059b6db43608e6ecf5f195f92bb'])">
+        <template v-if="showComponent(schemaMap['f08ff059b6db43608e6ecf5f195f92bb'])">
+            <SimpleFormItem v-model:value="formModel[schemaMap['f08ff059b6db43608e6ecf5f195f92bb'].field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schemaMap['f08ff059b6db43608e6ecf5f195f92bb']" />
+        </template>
+    </Col>
+    <!-- 变更字段类型  -->
+
+    <Col v-if="getIfShow2('4f11bf8e79484cc7a694b52c9524c371')" v-show="getIsShow2('4f11bf8e79484cc7a694b52c9524c371')" :span="getColWidth(schemaMap['4f11bf8e79484cc7a694b52c9524c371'])">
+        <template v-if="showComponent(schemaMap['4f11bf8e79484cc7a694b52c9524c371'])">
+            <SimpleFormItem v-model:value="formModel[schemaMap['4f11bf8e79484cc7a694b52c9524c371'].field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schemaMap['4f11bf8e79484cc7a694b52c9524c371']" />
+        </template>
+    </Col>
+    <!-- 变更前的值  -->
+
+    <Col v-if="getIfShow2('5aa4b801a16d41e88b8ef61a0a93f2f7')" v-show="getIsShow2('5aa4b801a16d41e88b8ef61a0a93f2f7')" :span="getColWidth(schemaMap['5aa4b801a16d41e88b8ef61a0a93f2f7'])">
+        <template v-if="showComponent(schemaMap['5aa4b801a16d41e88b8ef61a0a93f2f7'])">
+            <SimpleFormItem v-model:value="formModel[schemaMap['5aa4b801a16d41e88b8ef61a0a93f2f7'].field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schemaMap['5aa4b801a16d41e88b8ef61a0a93f2f7']" />
+        </template>
+    </Col>
+    <!-- 变更后的值  -->
+
+    <Col v-if="getIfShow2('870896f3810543bc83a1510ff141bfb8')" v-show="getIsShow2('870896f3810543bc83a1510ff141bfb8')" :span="getColWidth(schemaMap['870896f3810543bc83a1510ff141bfb8'])">
+        <template v-if="showComponent(schemaMap['870896f3810543bc83a1510ff141bfb8'])">
+            <SimpleFormItem v-model:value="formModel[schemaMap['870896f3810543bc83a1510ff141bfb8'].field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schemaMap['870896f3810543bc83a1510ff141bfb8']" />
+        </template>
+    </Col>
+    <!-- 变更类型  -->
+
+    <Col v-if="getIfShow2('52ef4d91155f4666b697b5aab1adb2c7')" v-show="getIsShow2('52ef4d91155f4666b697b5aab1adb2c7')" :span="getColWidth(schemaMap['52ef4d91155f4666b697b5aab1adb2c7'])">
+        <template v-if="showComponent(schemaMap['52ef4d91155f4666b697b5aab1adb2c7'])">
+            <SimpleFormItem v-model:value="formModel[schemaMap['52ef4d91155f4666b697b5aab1adb2c7'].field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schemaMap['52ef4d91155f4666b697b5aab1adb2c7']" />
+        </template>
+    </Col>
+    
+           <div :style="{ textAlign: getProps.buttonLocation }">
+                <slot name="buttonBefore"></slot>
+                <a-button v-if="getProps.showSubmitButton" type="primary" @click="handleSubmit">
+                    {{ t('提交') }}
+                </a-button>
+                <a-button v-if="getProps.showResetButton" style="margin-left: 10px" @click="handleReset">
+                    {{ t('重置') }}
+                </a-button>
+                <slot name="buttonAfter"></slot>
+            </div>
+        </Form>
+    </div>
+</template>
+
+<script>
+    // 注意，这里继承的是SimpleFormSetup，使用script setup写法的组件无法继承，必须使用特别的版本
+    import SimpleFormSetup from '/@/components/SimpleForm/src/SimpleFormSetup.vue';
+    import { Col, Form, Row } from 'ant-design-vue';
+    import SimpleFormItem from '/@/components/SimpleForm/src/components/SimpleFormItem.vue';
+    import { ref } from 'vue';
+    import { CheckCircleOutlined } from '@ant-design/icons-vue';
+    
+
+    const FormItem = Form.Item;
+
+    export default {
+        components: { 
+            CheckCircleOutlined, 
+            Form, 
+            Col, 
+            SimpleFormItem, 
+            Row, 
+            FormItem
+             
+        },
+        mixins: [SimpleFormSetup],
+        setup(props, ctx) {
+            const ret = SimpleFormSetup.setup(props, ctx);
+            const expose = ctx.expose;
+            
+            
+            return {
+                
+                ...ret
+            };
+        },
+        computed: {
+            // 这里需要增加一个计算属性 否则流程关联时字段读写状态会失效
+            schemaMap() {
+                const schemaMap = {};
+                this.getSchemas.forEach((schema) => {
+                    schemaMap[schema.key] = schema;
+                    if(schema.children) {
+                        schema.children.forEach(sChild=>{
+                           if(sChild.list){
+                               sChild.list.forEach(lChild=>{
+                                   schemaMap[lChild.key] = lChild;
+                               });
+                           } 
+                        });
+                    }
+                });
+                return schemaMap;
+            }
+        },
+        methods: {
+            getIfShow2: function (key) {
+                return this.getIfShow(this.schemaMap[key], this.formModel[this.schemaMap[key].field]);
+            },
+
+            getIsShow2: function (key) {
+                return this.getIsShow(this.schemaMap[key], this.formModel[this.schemaMap[key].field]);
+            },
+
+            getTabProps(key) {
+                const schema = this.schemaMap[key];
+                return {
+                    size: schema.componentProps.tabSize,
+                    tabPosition: schema.componentProps.tabPosition,
+                    type: schema.componentProps.type
+                }
+            },
+            
+            getTdStyle(tdElement) {
+                return {
+                    height: tdElement.height ? tdElement.height + 'px' : '',
+                    minHeight: (tdElement.height || '42') + 'px',
+                    overflow: 'hidden',
+                    padding: '10px'
+                }
+            }
+        }
+    };
+</script>

src/views/formChange/changeLogDetail/components/Form.vue

@@ -0,0 +1,185 @@
+<template>
+    <SimpleForm ref="systemFormRef" :formProps="data.formDataProps" :formModel="{}"
+        :isWorkFlow="props.fromPage != FromPageType.MENU" />
+</template>
+<script lang="ts" setup>
+import { reactive, ref, onMounted } from 'vue';
+import { formProps, formEventConfigs } from './config';
+import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
+import { addFormChangeRecordItem, getFormChangeRecordItem, updateFormChangeRecordItem } from '/@/api/formChange/changeLogDetail';
+import { cloneDeep } from 'lodash-es';
+import { FormDataProps } from '/@/components/Designer/src/types';
+import { usePermission } from '/@/hooks/web/usePermission';
+import { FromPageType } from '/@/enums/workflowEnum';
+import { createFormEvent, getFormDataEvent, loadFormEvent, submitFormEvent, } from '/@/hooks/web/useFormEvent';
+import { changeWorkFlowForm, changeSchemaDisabled } from '/@/hooks/web/useWorkFlowForm';
+import { WorkFlowFormParams } from '/@/model/workflow/bpmnConfig';
+
+const { filterFormSchemaAuth } = usePermission();
+
+const RowKey = 'id';
+const emits = defineEmits(['changeUploadComponentIds', 'loadingCompleted', 'form-mounted']);
+const props = defineProps({
+    fromPage: {
+        type: Number,
+        default: FromPageType.MENU,
+    },
+});
+const systemFormRef = ref();
+const data: { formDataProps: FormDataProps } = reactive({
+    formDataProps: cloneDeep(formProps),
+});
+const state = reactive({
+    formModel: {},
+});
+
+onMounted(async () => {
+    try {
+        if (props.fromPage == FromPageType.MENU) {
+            setMenuPermission();
+            await createFormEvent(formEventConfigs, state.formModel,
+                systemFormRef.value,
+                formProps.schemas); //表单事件：初始化表单
+            await loadFormEvent(formEventConfigs, state.formModel,
+                systemFormRef.value,
+                formProps.schemas); //表单事件：加载表单
+        } else if (props.fromPage == FromPageType.FLOW) {
+            emits('loadingCompleted'); //告诉系统表单已经加载完毕
+            // loadingCompleted后 工作流页面直接利用Ref调用setWorkFlowForm方法
+        } else if (props.fromPage == FromPageType.PREVIEW) {
+            // 预览 无需权限，表单事件也无需执行
+        } else if (props.fromPage == FromPageType.DESKTOP) {
+            // 桌面设计 表单事件需要执行
+            emits('loadingCompleted'); //告诉系统表单已经加载完毕
+            await createFormEvent(formEventConfigs, state.formModel,
+                systemFormRef.value,
+                formProps.schemas); //表单事件：初始化表单
+            await loadFormEvent(formEventConfigs, state.formModel,
+                systemFormRef.value,
+                formProps.schemas); //表单事件：加载表单
+        }
+        emits('form-mounted', formProps);
+    } catch (error) {
+
+    }
+});
+
+// 根据菜单页面权限，设置表单属性（必填，禁用，显示）
+function setMenuPermission() {
+    data.formDataProps.schemas = filterFormSchemaAuth(formProps.schemas!);
+}
+
+// 校验form 通过返回表单数据
+async function validate() {
+    let values = [];
+    try {
+        values = await systemFormRef.value?.validate();
+        //添加隐藏组件
+        if (data.formDataProps.hiddenComponent?.length) {
+            data.formDataProps.hiddenComponent.forEach((component) => {
+                values[component.bindField] = component.value;
+            });
+        }
+    } finally {
+    }
+    return values;
+}
+
+// 根据行唯一ID查询行数据，并设置表单数据   【编辑】
+async function setFormDataFromId(rowId, skipUpdate) {
+    try {
+        const record = await getFormChangeRecordItem(rowId);
+        if (skipUpdate) {
+            return record;
+        }
+        setFieldsValue(record);
+        state.formModel = record;
+        await getFormDataEvent(formEventConfigs, state.formModel, systemFormRef.value, formProps.schemas); //表单事件：获取表单数据
+        return record;
+    } catch (error) {
+
+    }
+}
+
+// 辅助设置表单数据
+function setFieldsValue(record) {
+    systemFormRef.value.setFieldsValue(record);
+}
+
+// 重置表单数据
+async function resetFields() {
+    await systemFormRef.value.resetFields();
+}
+
+//  设置表单数据全部为Disabled  【查看】
+async function setDisabledForm() {
+    data.formDataProps.schemas = changeSchemaDisabled(cloneDeep(data.formDataProps.schemas));
+}
+
+// 获取行键值
+function getRowKey() {
+    return RowKey;
+}
+
+// 更新api表单数据
+async function update({ values, rowId }) {
+    try {
+        values[RowKey] = rowId;
+        state.formModel = values;
+        let saveVal = await updateFormChangeRecordItem(values);
+        await submitFormEvent(formEventConfigs, state.formModel,
+            systemFormRef.value,
+            formProps.schemas); //表单事件：提交表单
+        return saveVal;
+    } catch (error) {
+    }
+}
+
+// 新增api表单数据
+async function add(values) {
+    try {
+        state.formModel = values;
+        let saveVal = await addFormChangeRecordItem(values);
+        await submitFormEvent(formEventConfigs, state.formModel,
+            systemFormRef.value,
+            formProps.schemas); //表单事件：提交表单
+        return saveVal;
+    } catch (error) {
+    }
+}
+
+// 根据工作流页面权限，设置表单属性（必填，禁用，显示）
+async function setWorkFlowForm(obj: WorkFlowFormParams) {
+    try {
+        let flowData = changeWorkFlowForm(cloneDeep(formProps), obj);
+        let { buildOptionJson, uploadComponentIds, formModels, isViewProcess } = flowData;
+        data.formDataProps = buildOptionJson;
+        emits('changeUploadComponentIds', uploadComponentIds); //工作流中必须保存上传组件id【附件汇总需要】
+        if (isViewProcess) {
+            setDisabledForm(); //查看
+        }
+        state.formModel = formModels;
+        setFieldsValue(formModels);
+    } catch (error) {
+    }
+    await createFormEvent(formEventConfigs, state.formModel,
+        systemFormRef.value,
+        formProps.schemas); //表单事件：初始化表单
+    await loadFormEvent(formEventConfigs, state.formModel,
+        systemFormRef.value,
+        formProps.schemas); //表单事件：加载表单
+}
+
+defineExpose({
+    setFieldsValue,
+    resetFields,
+    validate,
+    add,
+    update,
+    setFormDataFromId,
+    setDisabledForm,
+    setMenuPermission,
+    setWorkFlowForm,
+    getRowKey,
+});
+</script>

src/views/formChange/changeLogDetail/components/config.ts

@@ -0,0 +1,564 @@
+import {FormProps, FormSchema} from '/@/components/Form';
+import {BasicColumn} from '/@/components/Table';
+
+export const searchFormSchema: FormSchema[] = [
+    {
+        field: 'operationId',
+        label: '主表id',
+        component: 'Input',
+    },
+    {
+        field: 'formType',
+        label: '表单类型',
+        component: 'Input',
+    },
+    {
+        field: 'formCode',
+        label: '表单编码',
+        component: 'Input',
+    },
+    {
+        field: 'dataId',
+        label: '主表或子表的id',
+        component: 'Input',
+    },
+    {
+        field: 'fieldCode',
+        label: '变更字段编码',
+        component: 'Input',
+    },
+    {
+        field: 'fieldName',
+        label: '变更字段名',
+        component: 'Input',
+    },
+    {
+        field: 'fieldType',
+        label: '变更字段类型',
+        component: 'Input',
+    },
+    {
+        field: 'oldValue',
+        label: '变更前的值',
+        component: 'Input',
+    },
+    {
+        field: 'newValue',
+        label: '变更后的值',
+        component: 'Input',
+    },
+    {
+        field: 'changeType',
+        label: '变更类型',
+        component: 'Input',
+    },
+];
+
+export const columns: BasicColumn[] = [
+    {
+        dataIndex: 'operationId',
+        title: '主表id',
+        componentType: 'input',
+        align: 'left',
+
+        sorter: true,
+    },
+
+    {
+        dataIndex: 'formType',
+        title: '表单类型',
+        componentType: 'input',
+        align: 'left',
+
+        sorter: true,
+    },
+
+    {
+        dataIndex: 'formCode',
+        title: '表单编码',
+        componentType: 'input',
+        align: 'left',
+
+        sorter: true,
+    },
+
+    {
+        dataIndex: 'dataId',
+        title: '主表或子表的id',
+        componentType: 'input',
+        align: 'left',
+
+        sorter: true,
+    },
+
+    {
+        dataIndex: 'fieldCode',
+        title: '变更字段编码',
+        componentType: 'input',
+        align: 'left',
+
+        sorter: true,
+    },
+
+    {
+        dataIndex: 'fieldName',
+        title: '变更字段名',
+        componentType: 'input',
+        align: 'left',
+
+        sorter: true,
+    },
+
+    {
+        dataIndex: 'fieldType',
+        title: '变更字段类型',
+        componentType: 'input',
+        align: 'left',
+
+        sorter: true,
+    },
+
+    {
+        dataIndex: 'oldValue',
+        title: '变更前的值',
+        componentType: 'input',
+        align: 'left',
+
+        sorter: true,
+    },
+
+    {
+        dataIndex: 'newValue',
+        title: '变更后的值',
+        componentType: 'input',
+        align: 'left',
+
+        sorter: true,
+    },
+
+    {
+        dataIndex: 'changeType',
+        title: '变更类型',
+        componentType: 'input',
+        align: 'left',
+
+        sorter: true,
+    },
+];
+//表单事件
+export const formEventConfigs = {
+    0: [
+        {
+            type: 'circle',
+            color: '#2774ff',
+            text: '开始节点',
+            icon: '#icon-kaishi',
+            bgcColor: '#D8E5FF',
+            isUserDefined: false,
+        },
+        {
+            color: '#F6AB01',
+            icon: '#icon-chushihua',
+            text: '初始化表单',
+            bgcColor: '#f9f5ea',
+            isUserDefined: false,
+            nodeInfo: {processEvent: []},
+        },
+    ],
+    1: [
+        {
+            color: '#B36EDB',
+            icon: '#icon-shujufenxi',
+            text: '获取表单数据',
+            detail: '(新增无此操作)',
+            bgcColor: '#F8F2FC',
+            isUserDefined: false,
+            nodeInfo: {processEvent: []},
+        },
+    ],
+    2: [
+        {
+            color: '#F8625C',
+            icon: '#icon-jiazai',
+            text: '加载表单',
+            bgcColor: '#FFF1F1',
+            isUserDefined: false,
+            nodeInfo: {processEvent: []},
+        },
+    ],
+    3: [
+        {
+            color: '#6C6AE0',
+            icon: '#icon-jsontijiao',
+            text: '提交表单',
+            bgcColor: '#F5F4FF',
+            isUserDefined: false,
+            nodeInfo: {processEvent: []},
+        },
+    ],
+    4: [
+        {
+            type: 'circle',
+            color: '#F8625C',
+            text: '结束节点',
+            icon: '#icon-jieshuzhiliao',
+            bgcColor: '#FFD6D6',
+            isLast: true,
+            isUserDefined: false,
+        },
+    ],
+};
+export const formProps: FormProps = {
+    labelCol: {span: 3, offset: 0},
+    labelAlign: 'right',
+    layout: 'horizontal',
+    size: 'default',
+    schemas: [
+        {
+            key: '1f7a5fa213f549748f3d00e177d86b1b',
+            field: 'operationId',
+            label: '主表id',
+            type: 'input',
+            component: 'Input',
+            colProps: {span: 24},
+            defaultValue: '',
+            componentProps: {
+                width: '100%',
+                span: '',
+                defaultValue: '',
+                labelWidthMode: 'fix',
+                labelFixWidth: 120,
+                responsive: true,
+                respNewRow: false,
+                placeholder: '请输入主表id',
+                maxlength: null,
+                prefix: '',
+                suffix: '',
+                addonBefore: '',
+                addonAfter: '',
+                disabled: true,
+                allowClear: false,
+                showLabel: true,
+                required: false,
+                rules: [],
+                events: {},
+                isSave: false,
+                isShow: true,
+                scan: false,
+                style: {width: '100%'},
+            },
+        },
+        {
+            key: '524a5c581073419d8e8daff9e461695a',
+            field: 'formType',
+            label: '表单类型',
+            type: 'input',
+            component: 'Input',
+            colProps: {span: 24},
+            defaultValue: '',
+            componentProps: {
+                width: '100%',
+                span: '',
+                defaultValue: '',
+                labelWidthMode: 'fix',
+                labelFixWidth: 120,
+                responsive: true,
+                respNewRow: false,
+                placeholder: '请输入表单类型',
+                maxlength: null,
+                prefix: '',
+                suffix: '',
+                addonBefore: '',
+                addonAfter: '',
+                disabled: true,
+                allowClear: false,
+                showLabel: true,
+                required: false,
+                rules: [],
+                events: {},
+                isSave: false,
+                isShow: true,
+                scan: false,
+                style: {width: '100%'},
+            },
+        },
+        {
+            key: 'd74b7a7bede24820a6c85677a6cdb5fe',
+            field: 'formCode',
+            label: '表单编码',
+            type: 'input',
+            component: 'Input',
+            colProps: {span: 24},
+            defaultValue: '',
+            componentProps: {
+                width: '100%',
+                span: '',
+                defaultValue: '',
+                labelWidthMode: 'fix',
+                labelFixWidth: 120,
+                responsive: true,
+                respNewRow: false,
+                placeholder: '请输入表单编码',
+                maxlength: null,
+                prefix: '',
+                suffix: '',
+                addonBefore: '',
+                addonAfter: '',
+                disabled: true,
+                allowClear: false,
+                showLabel: true,
+                required: false,
+                rules: [],
+                events: {},
+                isSave: false,
+                isShow: true,
+                scan: false,
+                style: {width: '100%'},
+            },
+        },
+        {
+            key: '3d499852001044c0a6230e5ce18532d2',
+            field: 'dataId',
+            label: '主表或子表的id',
+            type: 'input',
+            component: 'Input',
+            colProps: {span: 24},
+            defaultValue: '',
+            componentProps: {
+                width: '100%',
+                span: '',
+                defaultValue: '',
+                labelWidthMode: 'fix',
+                labelFixWidth: 120,
+                responsive: true,
+                respNewRow: false,
+                placeholder: '请输入主表或子表的id',
+                maxlength: null,
+                prefix: '',
+                suffix: '',
+                addonBefore: '',
+                addonAfter: '',
+                disabled: true,
+                allowClear: false,
+                showLabel: true,
+                required: false,
+                rules: [],
+                events: {},
+                isSave: false,
+                isShow: true,
+                scan: false,
+                style: {width: '100%'},
+            },
+        },
+        {
+            key: '32b4ed61b5504f74943ead2cdc770baf',
+            field: 'fieldCode',
+            label: '变更字段编码',
+            type: 'input',
+            component: 'Input',
+            colProps: {span: 24},
+            defaultValue: '',
+            componentProps: {
+                width: '100%',
+                span: '',
+                defaultValue: '',
+                labelWidthMode: 'fix',
+                labelFixWidth: 120,
+                responsive: true,
+                respNewRow: false,
+                placeholder: '请输入变更字段编码',
+                maxlength: null,
+                prefix: '',
+                suffix: '',
+                addonBefore: '',
+                addonAfter: '',
+                disabled: true,
+                allowClear: false,
+                showLabel: true,
+                required: false,
+                rules: [],
+                events: {},
+                isSave: false,
+                isShow: true,
+                scan: false,
+                style: {width: '100%'},
+            },
+        },
+        {
+            key: 'f08ff059b6db43608e6ecf5f195f92bb',
+            field: 'fieldName',
+            label: '变更字段名',
+            type: 'input',
+            component: 'Input',
+            colProps: {span: 24},
+            defaultValue: '',
+            componentProps: {
+                width: '100%',
+                span: '',
+                defaultValue: '',
+                labelWidthMode: 'fix',
+                labelFixWidth: 120,
+                responsive: true,
+                respNewRow: false,
+                placeholder: '请输入变更字段名',
+                maxlength: null,
+                prefix: '',
+                suffix: '',
+                addonBefore: '',
+                addonAfter: '',
+                disabled: true,
+                allowClear: false,
+                showLabel: true,
+                required: false,
+                rules: [],
+                events: {},
+                isSave: false,
+                isShow: true,
+                scan: false,
+                style: {width: '100%'},
+            },
+        },
+        {
+            key: '4f11bf8e79484cc7a694b52c9524c371',
+            field: 'fieldType',
+            label: '变更字段类型',
+            type: 'input',
+            component: 'Input',
+            colProps: {span: 24},
+            defaultValue: '',
+            componentProps: {
+                width: '100%',
+                span: '',
+                defaultValue: '',
+                labelWidthMode: 'fix',
+                labelFixWidth: 120,
+                responsive: true,
+                respNewRow: false,
+                placeholder: '请输入变更字段类型',
+                maxlength: null,
+                prefix: '',
+                suffix: '',
+                addonBefore: '',
+                addonAfter: '',
+                disabled: true,
+                allowClear: false,
+                showLabel: true,
+                required: false,
+                rules: [],
+                events: {},
+                isSave: false,
+                isShow: true,
+                scan: false,
+                style: {width: '100%'},
+            },
+        },
+        {
+            key: '5aa4b801a16d41e88b8ef61a0a93f2f7',
+            field: 'oldValue',
+            label: '变更前的值',
+            type: 'input',
+            component: 'Input',
+            colProps: {span: 24},
+            defaultValue: '',
+            componentProps: {
+                width: '100%',
+                span: '',
+                defaultValue: '',
+                labelWidthMode: 'fix',
+                labelFixWidth: 120,
+                responsive: true,
+                respNewRow: false,
+                placeholder: '请输入变更前的值',
+                maxlength: null,
+                prefix: '',
+                suffix: '',
+                addonBefore: '',
+                addonAfter: '',
+                disabled: true,
+                allowClear: false,
+                showLabel: true,
+                required: false,
+                rules: [],
+                events: {},
+                isSave: false,
+                isShow: true,
+                scan: false,
+                style: {width: '100%'},
+            },
+        },
+        {
+            key: '870896f3810543bc83a1510ff141bfb8',
+            field: 'newValue',
+            label: '变更后的值',
+            type: 'input',
+            component: 'Input',
+            colProps: {span: 24},
+            defaultValue: '',
+            componentProps: {
+                width: '100%',
+                span: '',
+                defaultValue: '',
+                labelWidthMode: 'fix',
+                labelFixWidth: 120,
+                responsive: true,
+                respNewRow: false,
+                placeholder: '请输入变更后的值',
+                maxlength: null,
+                prefix: '',
+                suffix: '',
+                addonBefore: '',
+                addonAfter: '',
+                disabled: true,
+                allowClear: false,
+                showLabel: true,
+                required: false,
+                rules: [],
+                events: {},
+                isSave: false,
+                isShow: true,
+                scan: false,
+                style: {width: '100%'},
+            },
+        },
+        {
+            key: '52ef4d91155f4666b697b5aab1adb2c7',
+            field: 'changeType',
+            label: '变更类型',
+            type: 'input',
+            component: 'Input',
+            colProps: {span: 24},
+            defaultValue: '',
+            componentProps: {
+                width: '100%',
+                span: '',
+                defaultValue: '',
+                labelWidthMode: 'fix',
+                labelFixWidth: 120,
+                responsive: true,
+                respNewRow: false,
+                placeholder: '请输入变更类型',
+                maxlength: null,
+                prefix: '',
+                suffix: '',
+                addonBefore: '',
+                addonAfter: '',
+                disabled: true,
+                allowClear: false,
+                showLabel: true,
+                required: false,
+                rules: [],
+                events: {},
+                isSave: false,
+                isShow: true,
+                scan: false,
+                style: {width: '100%'},
+            },
+        },
+    ],
+    showActionButtonGroup: false,
+    buttonLocation: 'center',
+    actionColOptions: {span: 24},
+    showResetButton: false,
+    showSubmitButton: false,
+    hiddenComponent: [],
+};

src/views/formChange/changeLogDetail/components/workflowPermission.ts

@@ -0,0 +1,152 @@
+export const permissionList = [
+    {
+        required: true,
+        view: true,
+        edit: true,
+        disabled: false,
+        isSaveTable: false,
+        tableName: '',
+        fieldName: '主表id',
+        fieldId: 'operationId',
+        isSubTable: false,
+        showChildren: true,
+        type: 'input',
+        key: '1f7a5fa213f549748f3d00e177d86b1b',
+        children: [],
+    },
+    {
+        required: true,
+        view: true,
+        edit: true,
+        disabled: false,
+        isSaveTable: false,
+        tableName: '',
+        fieldName: '表单类型',
+        fieldId: 'formType',
+        isSubTable: false,
+        showChildren: true,
+        type: 'input',
+        key: '524a5c581073419d8e8daff9e461695a',
+        children: [],
+    },
+    {
+        required: true,
+        view: true,
+        edit: true,
+        disabled: false,
+        isSaveTable: false,
+        tableName: '',
+        fieldName: '表单编码',
+        fieldId: 'formCode',
+        isSubTable: false,
+        showChildren: true,
+        type: 'input',
+        key: 'd74b7a7bede24820a6c85677a6cdb5fe',
+        children: [],
+    },
+    {
+        required: true,
+        view: true,
+        edit: true,
+        disabled: false,
+        isSaveTable: false,
+        tableName: '',
+        fieldName: '主表或子表的id',
+        fieldId: 'dataId',
+        isSubTable: false,
+        showChildren: true,
+        type: 'input',
+        key: '3d499852001044c0a6230e5ce18532d2',
+        children: [],
+    },
+    {
+        required: true,
+        view: true,
+        edit: true,
+        disabled: false,
+        isSaveTable: false,
+        tableName: '',
+        fieldName: '变更字段编码',
+        fieldId: 'fieldCode',
+        isSubTable: false,
+        showChildren: true,
+        type: 'input',
+        key: '32b4ed61b5504f74943ead2cdc770baf',
+        children: [],
+    },
+    {
+        required: true,
+        view: true,
+        edit: true,
+        disabled: false,
+        isSaveTable: false,
+        tableName: '',
+        fieldName: '变更字段名',
+        fieldId: 'fieldName',
+        isSubTable: false,
+        showChildren: true,
+        type: 'input',
+        key: 'f08ff059b6db43608e6ecf5f195f92bb',
+        children: [],
+    },
+    {
+        required: true,
+        view: true,
+        edit: true,
+        disabled: false,
+        isSaveTable: false,
+        tableName: '',
+        fieldName: '变更字段类型',
+        fieldId: 'fieldType',
+        isSubTable: false,
+        showChildren: true,
+        type: 'input',
+        key: '4f11bf8e79484cc7a694b52c9524c371',
+        children: [],
+    },
+    {
+        required: true,
+        view: true,
+        edit: true,
+        disabled: false,
+        isSaveTable: false,
+        tableName: '',
+        fieldName: '变更前的值',
+        fieldId: 'oldValue',
+        isSubTable: false,
+        showChildren: true,
+        type: 'input',
+        key: '5aa4b801a16d41e88b8ef61a0a93f2f7',
+        children: [],
+    },
+    {
+        required: true,
+        view: true,
+        edit: true,
+        disabled: false,
+        isSaveTable: false,
+        tableName: '',
+        fieldName: '变更后的值',
+        fieldId: 'newValue',
+        isSubTable: false,
+        showChildren: true,
+        type: 'input',
+        key: '870896f3810543bc83a1510ff141bfb8',
+        children: [],
+    },
+    {
+        required: true,
+        view: true,
+        edit: true,
+        disabled: false,
+        isSaveTable: false,
+        tableName: '',
+        fieldName: '变更类型',
+        fieldId: 'changeType',
+        isSubTable: false,
+        showChildren: true,
+        type: 'input',
+        key: '52ef4d91155f4666b697b5aab1adb2c7',
+        children: [],
+    },
+];

src/views/formChange/changeLogDetail/index.vue

@@ -0,0 +1,339 @@
+<template>
+    <!-- <PageWrapper dense fixedHeight contentFullHeight contentClass="flex">
+        <BasicTable @register="registerTable" ref="tableRef" @row-dbClick="dbClickRow">
+            <template #toolbar>
+                <template v-for="button in tableButtonConfig" :key="button.code">
+                    <a-button v-if="button.isDefault" :type="button.type" @click="buttonClick(button.code)">
+                        <template #icon>
+                            <Icon :icon="button.icon" />
+                        </template>
+{{ button.name }}
+</a-button>
+<a-button v-else :type="button.type">
+    <template #icon>
+                            <Icon :icon="button.icon" />
+                        </template>
+    {{ button.name }}
+</a-button>
+</template>
+</template>
+<template #bodyCell="{ column, record }">
+                <template v-if="column.dataIndex === 'action'">
+                    <TableAction :actions="getActions(record)" />
+                </template>
+</template>
+</BasicTable>
+<ChangeLogDetailModal @register="registerModal" @success="handleSuccess" />
+</PageWrapper> -->
+    <!-- <DiffDetailModal></DiffDetailModal> -->
+    <!-- <LookTask :processId="processId" :taskId="taskId" style="overflow: auto;" /> -->
+</template>
+
+<script lang="ts" setup>
+import {
+    ref, computed, onMounted, onUnmounted, createVNode,
+    provide,
+
+} from 'vue';
+
+import { Modal } from 'ant-design-vue';
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { BasicTable, useTable, TableAction, ActionItem } from '/@/components/Table';
+import { getFormChangeRecordItemPage, deleteFormChangeRecordItem } from '/@/api/formChange/changeLogDetail';
+import { PageWrapper } from '/@/components/Page';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { usePermission } from '/@/hooks/web/usePermission';
+import { useRouter } from 'vue-router';
+import { getFormChangeRecordItem } from '/@/api/formChange/changeLogDetail';
+import DiffDetailModal from './components/DiffDetailModal.vue'
+// import LookTask from '/@/views/workflow/task/components/flow/ChangeLookTask.vue';
+import { getRecordDetail } from '/@/api/formChange/changeLogDetail/index'
+
+
+import { useModal } from '/@/components/Modal';
+
+
+import ChangeLogDetailModal from './components/ChangeLogDetailModal.vue';
+
+
+import { searchFormSchema, columns } from './components/config';
+import Icon from '/@/components/Icon/index';
+
+
+import useEventBus from '/@/hooks/event/useEventBus';
+
+let props = withDefaults(
+    defineProps<{
+        processId: string | undefined;
+        taskId: string | undefined;
+        recordId: string;
+    }>(),
+    {
+        processId: '',
+        taskId: '',
+        recordId: '123456789-987654321'
+    },
+);
+
+const recordList = [{ 'oldValue': 'old111', 'filedCode': 'totalContractAmount', 'changeType': 'update' }, { 'oldValue': 'old222', 'filedCode': 'totalInvoiceAmount', 'changeType': 'add' }];
+provide('recordList', recordList);
+
+const { bus, CREATE_FLOW, FLOW_PROCESSED, FORM_LIST_MODIFIED } = useEventBus();
+
+const { notification } = useMessage();
+const { t } = useI18n();
+defineEmits(['register']);
+const { filterColumnAuth, filterButtonAuth } = usePermission();
+
+const filterColumns = filterColumnAuth(columns);
+const tableRef = ref();
+
+//展示在列表内的按钮
+const actionButtons = ref<string[]>(['view', 'edit', 'copyData', 'delete', 'startwork', 'flowRecord']);
+const buttonConfigs = computed(() => {
+    const list = [{ "isUse": true, "name": "新增", "code": "add", "icon": "ant-design:plus-outlined", "isDefault": true, "type": "primary" }, {
+        "isUse": true,
+        "name": "编辑",
+        "code": "edit",
+        "icon": "ant-design:form-outlined",
+        "isDefault": true
+    }, { "isUse": true, "name": "刷新", "code": "refresh", "icon": "ant-design:reload-outlined", "isDefault": true }, { "isUse": true, "name": "查看", "code": "view", "icon": "ant-design:eye-outlined", "isDefault": true }, {
+        "isUse": true,
+        "name": "查看详情",
+        "code": "detail",
+        "icon": "ant-design:eye-outlined",
+        "isDefault": true
+    }, { "isUse": true, "name": "删除", "code": "delete", "icon": "ant-design:delete-outlined", "isDefault": true }]
+    return filterButtonAuth(list);
+})
+
+const tableButtonConfig = computed(() => {
+    return buttonConfigs.value?.filter((x) => !actionButtons.value.includes(x.code));
+});
+
+const actionButtonConfig = computed(() => {
+    return buttonConfigs.value?.filter((x) => actionButtons.value.includes(x.code));
+});
+
+// const btnEvent = { add: handleAdd, edit: handleEdit, refresh: handleRefresh, view: handleView, detail: handleDetail, delete: handleDelete, }
+const btnEvent = { add: handleAdd, edit: handleEdit, refresh: handleRefresh, view: handleView, delete: handleDelete, }
+
+const { currentRoute } = useRouter();
+const router = useRouter();
+
+
+const formIdComputedRef = ref();
+formIdComputedRef.value = currentRoute.value.meta.formId
+const schemaIdComputedRef = ref();
+schemaIdComputedRef.value = currentRoute.value.meta.schemaId
+
+
+const [registerModal, { openModal }] = useModal();
+
+
+const formName = '变更日志详情';
+const [registerTable, { reload, }] = useTable({
+    title: '' || (formName + '列表'),
+    api: getFormChangeRecordItemPage,
+    rowKey: 'id',
+    columns: filterColumns,
+    formConfig: {
+        rowProps: {
+            gutter: 16,
+        },
+        schemas: searchFormSchema,
+        fieldMapToTime: [],
+        showResetButton: false,
+    },
+    beforeFetch: (params) => {
+        return { ...params, FormId: formIdComputedRef.value, PK: 'id' };
+    },
+    afterFetch: (res) => {
+        tableRef.value.setToolBarWidth();
+
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+
+    striped: false,
+    actionColumn: {
+        width: 160,
+        title: '操作',
+        dataIndex: 'action',
+        slots: { customRender: 'action' },
+    },
+    tableSetting: {
+        size: false,
+        setting: false,
+    },
+
+});
+
+function dbClickRow(record) {
+    const { processId, taskIds, schemaId } = record.workflowData || {};
+    if (taskIds && taskIds.length) {
+        router.push({
+            path: '/flow/' + schemaId + '/' + (processId || '') + '/approveFlow',
+            query: {
+                taskId: taskIds[0],
+                formName: formName
+            }
+        });
+    } else if (schemaId && !taskIds && processId) {
+        router.push({
+            path: '/flow/' + schemaId + '/' + processId + '/approveFlow',
+            query: {
+                readonly: 1,
+                taskId: '',
+                formName: formName
+            }
+        });
+    } else {
+        router.push({
+            path: '/form/changeLogDetail/' + record.id + '/viewForm',
+            query: {
+                formPath: 'formChange/changeLogDetail',
+                formName: formName
+            }
+        });
+    }
+}
+
+function buttonClick(code) {
+
+    btnEvent[code]();
+}
+
+function handleAdd() {
+    if (schemaIdComputedRef.value) {
+        router.push({
+            path: '/flow/' + schemaIdComputedRef.value + '/0/createFlow'
+        });
+    } else {
+        router.push({
+            path: '/form/changeLogDetail/0/createForm',
+            query: {
+                formPath: 'formChange/changeLogDetail',
+                formName: formName
+            }
+        });
+    }
+}
+
+function handleEdit(record: Recordable) {
+
+    router.push({
+        path: '/form/changeLogDetail/' + record.id + '/updateForm',
+        query: {
+            formPath: 'formChange/changeLogDetail',
+            formName: formName
+        }
+    });
+}
+
+
+function handleDelete(record: Recordable) {
+    deleteList([record.id]);
+}
+
+function deleteList(ids) {
+    Modal.confirm({
+        title: '提示信息',
+        icon: createVNode(ExclamationCircleOutlined),
+        content: '是否确认删除？',
+        okText: '确认',
+        cancelText: '取消',
+        onOk() {
+            deleteFormChangeRecordItem(ids).then((_) => {
+                handleSuccess();
+                notification.success({
+                    message: 'Tip',
+                    description: t('删除成功！'),
+                });
+            });
+        },
+        onCancel() {
+        },
+    });
+}
+
+
+function handleRefresh() {
+    reload();
+}
+
+function handleSuccess() {
+
+    reload();
+}
+
+function handleView(record: Recordable) {
+
+    dbClickRow(record);
+
+}
+
+
+onMounted(() => {
+
+    if (schemaIdComputedRef.value) {
+        bus.on(FLOW_PROCESSED, handleRefresh);
+        bus.on(CREATE_FLOW, handleRefresh);
+    } else {
+        bus.on(FORM_LIST_MODIFIED, handleRefresh);
+    }
+
+    // getRecordDetail({ 'recordId': props.recordId }).then(res => {
+    //     provide('recordList', res.list);
+    // })
+
+});
+onUnmounted(() => {
+    if (schemaIdComputedRef.value) {
+        bus.off(FLOW_PROCESSED, handleRefresh);
+        bus.off(CREATE_FLOW, handleRefresh);
+    } else {
+        bus.off(FORM_LIST_MODIFIED, handleRefresh);
+    }
+});
+
+function getActions(record: Recordable): ActionItem[] {
+
+    const actionsList: ActionItem[] = actionButtonConfig.value?.map((button) => {
+        if (!record.workflowData?.processId) {
+            return {
+                icon: button?.icon,
+                tooltip: button?.name,
+                color: button.code === 'delete' ? 'error' : undefined,
+                onClick: btnEvent[button.code].bind(null, record),
+            };
+        } else {
+            if (button.code === 'view') {
+                return {
+                    icon: button?.icon,
+                    tooltip: button?.name,
+                    onClick: btnEvent[button.code].bind(null, record),
+                };
+            } else {
+                return {};
+            }
+        }
+    });
+    return actionsList;
+}
+
+</script>
+<style lang="less" scoped>
+:deep(.ant-table-selection-col) {
+    width: 50px;
+}
+
+.show {
+    display: flex;
+}
+
+.hide {
+    display: none !important;
+}
+</style>

src/views/formChange/formChangeLog/components/CustomDevForm.vue

@@ -0,0 +1,134 @@
+
+<template>
+    <div ref="formWrap">
+        <Form ref="formRef" :label-col="getProps?.labelCol" :labelAlign="getProps?.labelAlign" :layout="getProps?.layout" :model="formModel" :wrapper-col="getProps?.wrapperCol" @keypress.enter="handleEnterPress">
+          <!-- 业务表单id  -->
+
+    <Col v-if="getIfShow2('2b23009bb6be47d9bd60ffa7b928e3d3')" v-show="getIsShow2('2b23009bb6be47d9bd60ffa7b928e3d3')" :span="getColWidth(schemaMap['2b23009bb6be47d9bd60ffa7b928e3d3'])">
+        <template v-if="showComponent(schemaMap['2b23009bb6be47d9bd60ffa7b928e3d3'])">
+            <SimpleFormItem v-model:value="formModel[schemaMap['2b23009bb6be47d9bd60ffa7b928e3d3'].field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schemaMap['2b23009bb6be47d9bd60ffa7b928e3d3']" />
+        </template>
+    </Col>
+    <!-- 关联的业务数据id  -->
+
+    <Col v-if="getIfShow2('ae02eb3114b24e0184df37f394394f2b')" v-show="getIsShow2('ae02eb3114b24e0184df37f394394f2b')" :span="getColWidth(schemaMap['ae02eb3114b24e0184df37f394394f2b'])">
+        <template v-if="showComponent(schemaMap['ae02eb3114b24e0184df37f394394f2b'])">
+            <SimpleFormItem v-model:value="formModel[schemaMap['ae02eb3114b24e0184df37f394394f2b'].field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schemaMap['ae02eb3114b24e0184df37f394394f2b']" />
+        </template>
+    </Col>
+    <!-- 变更人的ip地址  -->
+
+    <Col v-if="getIfShow2('d6f4b7d9678a4e968a3107a5c610e48f')" v-show="getIsShow2('d6f4b7d9678a4e968a3107a5c610e48f')" :span="getColWidth(schemaMap['d6f4b7d9678a4e968a3107a5c610e48f'])">
+        <template v-if="showComponent(schemaMap['d6f4b7d9678a4e968a3107a5c610e48f'])">
+            <SimpleFormItem v-model:value="formModel[schemaMap['d6f4b7d9678a4e968a3107a5c610e48f'].field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schemaMap['d6f4b7d9678a4e968a3107a5c610e48f']" />
+        </template>
+    </Col>
+    <!-- 变更原因  -->
+
+    <Col v-if="getIfShow2('6305f47c32214c14b60efac51758e47c')" v-show="getIsShow2('6305f47c32214c14b60efac51758e47c')" :span="getColWidth(schemaMap['6305f47c32214c14b60efac51758e47c'])">
+        <template v-if="showComponent(schemaMap['6305f47c32214c14b60efac51758e47c'])">
+            <SimpleFormItem v-model:value="formModel[schemaMap['6305f47c32214c14b60efac51758e47c'].field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schemaMap['6305f47c32214c14b60efac51758e47c']" />
+        </template>
+    </Col>
+    <!-- 变更版本号  -->
+
+    <Col v-if="getIfShow2('6ea6d70beac740dfb44e5b4dae8a5f92')" v-show="getIsShow2('6ea6d70beac740dfb44e5b4dae8a5f92')" :span="getColWidth(schemaMap['6ea6d70beac740dfb44e5b4dae8a5f92'])">
+        <template v-if="showComponent(schemaMap['6ea6d70beac740dfb44e5b4dae8a5f92'])">
+            <SimpleFormItem v-model:value="formModel[schemaMap['6ea6d70beac740dfb44e5b4dae8a5f92'].field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schemaMap['6ea6d70beac740dfb44e5b4dae8a5f92']" />
+        </template>
+    </Col>
+    
+           <div :style="{ textAlign: getProps.buttonLocation }">
+                <slot name="buttonBefore"></slot>
+                <a-button v-if="getProps.showSubmitButton" type="primary" @click="handleSubmit">
+                    {{ t('提交') }}
+                </a-button>
+                <a-button v-if="getProps.showResetButton" style="margin-left: 10px" @click="handleReset">
+                    {{ t('重置') }}
+                </a-button>
+                <slot name="buttonAfter"></slot>
+            </div>
+        </Form>
+    </div>
+</template>
+
+<script>
+    // 注意，这里继承的是SimpleFormSetup，使用script setup写法的组件无法继承，必须使用特别的版本
+    import SimpleFormSetup from '/@/components/SimpleForm/src/SimpleFormSetup.vue';
+    import { Col, Form, Row } from 'ant-design-vue';
+    import SimpleFormItem from '/@/components/SimpleForm/src/components/SimpleFormItem.vue';
+    import { ref } from 'vue';
+    import { CheckCircleOutlined } from '@ant-design/icons-vue';
+    
+
+    const FormItem = Form.Item;
+
+    export default {
+        components: { 
+            CheckCircleOutlined, 
+            Form, 
+            Col, 
+            SimpleFormItem, 
+            Row, 
+            FormItem
+             
+        },
+        mixins: [SimpleFormSetup],
+        setup(props, ctx) {
+            const ret = SimpleFormSetup.setup(props, ctx);
+            const expose = ctx.expose;
+            
+            
+            return {
+                
+                ...ret
+            };
+        },
+        computed: {
+            // 这里需要增加一个计算属性 否则流程关联时字段读写状态会失效
+            schemaMap() {
+                const schemaMap = {};
+                this.getSchemas.forEach((schema) => {
+                    schemaMap[schema.key] = schema;
+                    if(schema.children) {
+                        schema.children.forEach(sChild=>{
+                           if(sChild.list){
+                               sChild.list.forEach(lChild=>{
+                                   schemaMap[lChild.key] = lChild;
+                               });
+                           } 
+                        });
+                    }
+                });
+                return schemaMap;
+            }
+        },
+        methods: {
+            getIfShow2: function (key) {
+                return this.getIfShow(this.schemaMap[key], this.formModel[this.schemaMap[key].field]);
+            },
+
+            getIsShow2: function (key) {
+                return this.getIsShow(this.schemaMap[key], this.formModel[this.schemaMap[key].field]);
+            },
+
+            getTabProps(key) {
+                const schema = this.schemaMap[key];
+                return {
+                    size: schema.componentProps.tabSize,
+                    tabPosition: schema.componentProps.tabPosition,
+                    type: schema.componentProps.type
+                }
+            },
+            
+            getTdStyle(tdElement) {
+                return {
+                    height: tdElement.height ? tdElement.height + 'px' : '',
+                    minHeight: (tdElement.height || '42') + 'px',
+                    overflow: 'hidden',
+                    padding: '10px'
+                }
+            }
+        }
+    };
+</script>

src/views/formChange/formChangeLog/components/Form.vue

@@ -0,0 +1,186 @@
+<template>
+    <SimpleForm ref="systemFormRef" :formProps="data.formDataProps" :formModel="{}"
+        :isWorkFlow="props.fromPage != FromPageType.MENU" />
+</template>
+<script lang="ts" setup>
+import { reactive, ref, onMounted } from 'vue';
+import { formProps, formEventConfigs } from './config';
+import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
+// import SimpleForm from './CustomDevForm.vue';
+import { addFormChangeRecord, getFormChangeRecord, updateFormChangeRecord } from '/@/api/formChange/formChangeLog';
+import { cloneDeep } from 'lodash-es';
+import { FormDataProps } from '/@/components/Designer/src/types';
+import { usePermission } from '/@/hooks/web/usePermission';
+import { FromPageType } from '/@/enums/workflowEnum';
+import { createFormEvent, getFormDataEvent, loadFormEvent, submitFormEvent, } from '/@/hooks/web/useFormEvent';
+import { changeWorkFlowForm, changeSchemaDisabled } from '/@/hooks/web/useWorkFlowForm';
+import { WorkFlowFormParams } from '/@/model/workflow/bpmnConfig';
+
+const { filterFormSchemaAuth } = usePermission();
+
+const RowKey = 'id';
+const emits = defineEmits(['changeUploadComponentIds', 'loadingCompleted', 'form-mounted']);
+const props = defineProps({
+    fromPage: {
+        type: Number,
+        default: FromPageType.MENU,
+    },
+});
+const systemFormRef = ref();
+const data: { formDataProps: FormDataProps } = reactive({
+    formDataProps: cloneDeep(formProps),
+});
+const state = reactive({
+    formModel: {},
+});
+
+onMounted(async () => {
+    try {
+        if (props.fromPage == FromPageType.MENU) {
+            setMenuPermission();
+            await createFormEvent(formEventConfigs, state.formModel,
+                systemFormRef.value,
+                formProps.schemas); //表单事件：初始化表单
+            await loadFormEvent(formEventConfigs, state.formModel,
+                systemFormRef.value,
+                formProps.schemas); //表单事件：加载表单
+        } else if (props.fromPage == FromPageType.FLOW) {
+            emits('loadingCompleted'); //告诉系统表单已经加载完毕
+            // loadingCompleted后 工作流页面直接利用Ref调用setWorkFlowForm方法
+        } else if (props.fromPage == FromPageType.PREVIEW) {
+            // 预览 无需权限，表单事件也无需执行
+        } else if (props.fromPage == FromPageType.DESKTOP) {
+            // 桌面设计 表单事件需要执行
+            emits('loadingCompleted'); //告诉系统表单已经加载完毕
+            await createFormEvent(formEventConfigs, state.formModel,
+                systemFormRef.value,
+                formProps.schemas); //表单事件：初始化表单
+            await loadFormEvent(formEventConfigs, state.formModel,
+                systemFormRef.value,
+                formProps.schemas); //表单事件：加载表单
+        }
+        emits('form-mounted', formProps);
+    } catch (error) {
+
+    }
+});
+
+// 根据菜单页面权限，设置表单属性（必填，禁用，显示）
+function setMenuPermission() {
+    data.formDataProps.schemas = filterFormSchemaAuth(formProps.schemas!);
+}
+
+// 校验form 通过返回表单数据
+async function validate() {
+    let values = [];
+    try {
+        values = await systemFormRef.value?.validate();
+        //添加隐藏组件
+        if (data.formDataProps.hiddenComponent?.length) {
+            data.formDataProps.hiddenComponent.forEach((component) => {
+                values[component.bindField] = component.value;
+            });
+        }
+    } finally {
+    }
+    return values;
+}
+
+// 根据行唯一ID查询行数据，并设置表单数据   【编辑】
+async function setFormDataFromId(rowId, skipUpdate) {
+    try {
+        const record = await getFormChangeRecord(rowId);
+        if (skipUpdate) {
+            return record;
+        }
+        setFieldsValue(record);
+        state.formModel = record;
+        await getFormDataEvent(formEventConfigs, state.formModel, systemFormRef.value, formProps.schemas); //表单事件：获取表单数据
+        return record;
+    } catch (error) {
+
+    }
+}
+
+// 辅助设置表单数据
+function setFieldsValue(record) {
+    systemFormRef.value.setFieldsValue(record);
+}
+
+// 重置表单数据
+async function resetFields() {
+    await systemFormRef.value.resetFields();
+}
+
+//  设置表单数据全部为Disabled  【查看】
+async function setDisabledForm() {
+    data.formDataProps.schemas = changeSchemaDisabled(cloneDeep(data.formDataProps.schemas));
+}
+
+// 获取行键值
+function getRowKey() {
+    return RowKey;
+}
+
+// 更新api表单数据
+async function update({ values, rowId }) {
+    try {
+        values[RowKey] = rowId;
+        state.formModel = values;
+        let saveVal = await updateFormChangeRecord(values);
+        await submitFormEvent(formEventConfigs, state.formModel,
+            systemFormRef.value,
+            formProps.schemas); //表单事件：提交表单
+        return saveVal;
+    } catch (error) {
+    }
+}
+
+// 新增api表单数据
+async function add(values) {
+    try {
+        state.formModel = values;
+        let saveVal = await addFormChangeRecord(values);
+        await submitFormEvent(formEventConfigs, state.formModel,
+            systemFormRef.value,
+            formProps.schemas); //表单事件：提交表单
+        return saveVal;
+    } catch (error) {
+    }
+}
+
+// 根据工作流页面权限，设置表单属性（必填，禁用，显示）
+async function setWorkFlowForm(obj: WorkFlowFormParams) {
+    try {
+        let flowData = changeWorkFlowForm(cloneDeep(formProps), obj);
+        let { buildOptionJson, uploadComponentIds, formModels, isViewProcess } = flowData;
+        data.formDataProps = buildOptionJson;
+        emits('changeUploadComponentIds', uploadComponentIds); //工作流中必须保存上传组件id【附件汇总需要】
+        if (isViewProcess) {
+            setDisabledForm(); //查看
+        }
+        state.formModel = formModels;
+        setFieldsValue(formModels);
+    } catch (error) {
+    }
+    await createFormEvent(formEventConfigs, state.formModel,
+        systemFormRef.value,
+        formProps.schemas); //表单事件：初始化表单
+    await loadFormEvent(formEventConfigs, state.formModel,
+        systemFormRef.value,
+        formProps.schemas); //表单事件：加载表单
+}
+
+defineExpose({
+    setFieldsValue,
+    resetFields,
+    validate,
+    add,
+    update,
+    setFormDataFromId,
+    setDisabledForm,
+    setMenuPermission,
+    setWorkFlowForm,
+    getRowKey,
+});
+</script>

src/views/formChange/formChangeLog/components/FormchangelogModal.vue

@@ -0,0 +1,111 @@
+<template>
+
+    <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit" @cancel="handleClose" :paddingRight="15" :bodyStyle="{ minHeight: '400px !important' }">
+        <ModalForm ref="formRef" :fromPage="FromPageType.MENU"/>
+    </BasicModal>
+
+</template>
+<script lang="ts" setup>
+    import {ref, computed, reactive} from 'vue';
+    import {BasicModal, useModalInner} from '/@/components/Modal';
+    import {useMessage} from '/@/hooks/web/useMessage';
+    import {useI18n} from '/@/hooks/web/useI18n';
+    import {formProps} from './config';
+    import ModalForm from './Form.vue';
+    import {FromPageType} from '/@/enums/workflowEnum';
+
+    const emit = defineEmits(['success', 'register']);
+
+    const {notification} = useMessage();
+    const formRef = ref();
+    const state = reactive({
+        formModel: {},
+        isUpdate: true,
+        isView: false,
+        isCopy: false,
+        rowId: '',
+    });
+
+    const {t} = useI18n();
+    const [registerModal, {setModalProps, closeModal}] = useModalInner(async (data) => {
+        state.isUpdate = !!data?.isUpdate;
+        state.isView = !!data?.isView;
+        state.isCopy = !!data?.isCopy;
+
+        setModalProps({
+            destroyOnClose: true,
+            maskClosable: false,
+            showCancelBtn: !state.isView,
+            showOkBtn: !state.isView,
+            canFullscreen: true,
+            width: 900,
+        });
+        if (state.isUpdate || state.isView || state.isCopy) {
+            state.rowId = data.id;
+            if (state.isView) {
+                await formRef.value.setDisabledForm();
+            }
+            await formRef.value.setFormDataFromId(state.rowId);
+        } else {
+            formRef.value.resetFields();
+        }
+    });
+
+    const getTitle = computed(() => (state.isView ? '查看' : !state.isUpdate ? '新增' : '编辑'));
+
+    async function saveModal() {
+        let saveSuccess = false;
+        try {
+            const values = await formRef.value?.validate();
+            //添加隐藏组件
+            if (formProps.hiddenComponent?.length) {
+                formProps.hiddenComponent.forEach((component) => {
+                    values[component.bindField] = component.value;
+                });
+            }
+            if (values !== false) {
+                try {
+                    if (!state.isUpdate || state.isCopy) {
+                        saveSuccess = await formRef.value.add(values);
+                    } else {
+                        saveSuccess = await formRef.value.update({values, rowId: state.rowId});
+                    }
+                    return saveSuccess;
+                } catch (error) {
+                }
+            }
+        } catch (error) {
+            return saveSuccess;
+        }
+    }
+
+    async function handleSubmit() {
+        try {
+            const saveSuccess = await saveModal();
+            setModalProps({confirmLoading: true});
+            if (saveSuccess) {
+                if (!state.isUpdate || state.isCopy) {
+                    //false 新增
+                    notification.success({
+                        message: 'Tip',
+                        description: t('新增成功！'),
+                    }); //提示消息
+                } else {
+                    notification.success({
+                        message: 'Tip',
+                        description: t('修改成功！'),
+                    }); //提示消息
+                }
+                closeModal();
+                formRef.value.resetFields();
+                emit('success');
+            }
+        } finally {
+            setModalProps({confirmLoading: false});
+        }
+    }
+
+    function handleClose() {
+        formRef.value.resetFields();
+    }
+</script>

src/views/formChange/formChangeLog/components/config.ts

@@ -0,0 +1,315 @@
+import {FormProps, FormSchema} from '/@/components/Form';
+import {BasicColumn} from '/@/components/Table';
+
+export const searchFormSchema: FormSchema[] = [
+    {
+        field: 'formId',
+        label: '业务表单id',
+        component: 'Input',
+    },
+    {
+        field: 'formDataId',
+        label: '关联的业务数据id',
+        component: 'Input',
+    },
+    {
+        field: 'ipAddress',
+        label: '变更人的ip地址',
+        component: 'Input',
+    },
+    {
+        field: 'changeReason',
+        label: '变更原因',
+        component: 'Input',
+    },
+    {
+        field: 'version',
+        label: '变更版本号',
+        component: 'Input',
+    },
+];
+
+export const columns: BasicColumn[] = [
+    {
+        dataIndex: 'createUserName',
+        title: '变更人',
+        componentType: 'input',
+        align: 'left',
+        sorter: true,
+    },
+    {
+        dataIndex: 'createDate',
+        title: '变更时间',
+        componentType: 'input',
+        align: 'left',
+        sorter: true,
+    },
+    {
+        dataIndex: 'ipAddress',
+        title: '变更人的ip地址',
+        componentType: 'input',
+        align: 'left',
+        sorter: true,
+    },
+    {
+        dataIndex: 'changeReason',
+        title: '变更原因',
+        componentType: 'input',
+        align: 'left',
+        sorter: true,
+    },
+    {
+        dataIndex: 'version',
+        title: '变更版本号',
+        componentType: 'input',
+        align: 'left',
+        sorter: true,
+    },
+];
+//表单事件
+export const formEventConfigs = {
+    0: [
+        {
+            type: 'circle',
+            color: '#2774ff',
+            text: '开始节点',
+            icon: '#icon-kaishi',
+            bgcColor: '#D8E5FF',
+            isUserDefined: false,
+        },
+        {
+            color: '#F6AB01',
+            icon: '#icon-chushihua',
+            text: '初始化表单',
+            bgcColor: '#f9f5ea',
+            isUserDefined: false,
+            nodeInfo: {processEvent: []},
+        },
+    ],
+    1: [
+        {
+            color: '#B36EDB',
+            icon: '#icon-shujufenxi',
+            text: '获取表单数据',
+            detail: '(新增无此操作)',
+            bgcColor: '#F8F2FC',
+            isUserDefined: false,
+            nodeInfo: {processEvent: []},
+        },
+    ],
+    2: [
+        {
+            color: '#F8625C',
+            icon: '#icon-jiazai',
+            text: '加载表单',
+            bgcColor: '#FFF1F1',
+            isUserDefined: false,
+            nodeInfo: {processEvent: []},
+        },
+    ],
+    3: [
+        {
+            color: '#6C6AE0',
+            icon: '#icon-jsontijiao',
+            text: '提交表单',
+            bgcColor: '#F5F4FF',
+            isUserDefined: false,
+            nodeInfo: {processEvent: []},
+        },
+    ],
+    4: [
+        {
+            type: 'circle',
+            color: '#F8625C',
+            text: '结束节点',
+            icon: '#icon-jieshuzhiliao',
+            bgcColor: '#FFD6D6',
+            isLast: true,
+            isUserDefined: false,
+        },
+    ],
+};
+export const formProps: FormProps = {
+    labelCol: {span: 3, offset: 0},
+    labelAlign: 'right',
+    layout: 'horizontal',
+    size: 'default',
+    schemas: [
+        {
+            key: '2b23009bb6be47d9bd60ffa7b928e3d3',
+            field: 'formId',
+            label: '业务表单id',
+            type: 'input',
+            component: 'Input',
+            colProps: {span: 24},
+            defaultValue: '',
+            componentProps: {
+                width: '100%',
+                span: '',
+                defaultValue: '',
+                labelWidthMode: 'fix',
+                labelFixWidth: 120,
+                responsive: true,
+                respNewRow: false,
+                placeholder: '请输入业务表单id',
+                maxlength: null,
+                prefix: '',
+                suffix: '',
+                addonBefore: '',
+                addonAfter: '',
+                disabled: false,
+                allowClear: false,
+                showLabel: true,
+                required: false,
+                rules: [],
+                events: {},
+                isSave: false,
+                isShow: true,
+                scan: false,
+                style: {width: '100%'},
+            },
+        },
+        {
+            key: 'ae02eb3114b24e0184df37f394394f2b',
+            field: 'formDataId',
+            label: '关联的业务数据id',
+            type: 'input',
+            component: 'Input',
+            colProps: {span: 24},
+            defaultValue: '',
+            componentProps: {
+                width: '100%',
+                span: '',
+                defaultValue: '',
+                labelWidthMode: 'fix',
+                labelFixWidth: 120,
+                responsive: true,
+                respNewRow: false,
+                placeholder: '请输入关联的业务数据id',
+                maxlength: null,
+                prefix: '',
+                suffix: '',
+                addonBefore: '',
+                addonAfter: '',
+                disabled: false,
+                allowClear: false,
+                showLabel: true,
+                required: false,
+                rules: [],
+                events: {},
+                isSave: false,
+                isShow: true,
+                scan: false,
+                style: {width: '100%'},
+            },
+        },
+        {
+            key: 'd6f4b7d9678a4e968a3107a5c610e48f',
+            field: 'ipAddress',
+            label: '变更人的ip地址',
+            type: 'input',
+            component: 'Input',
+            colProps: {span: 24},
+            defaultValue: '',
+            componentProps: {
+                width: '100%',
+                span: '',
+                defaultValue: '',
+                labelWidthMode: 'fix',
+                labelFixWidth: 120,
+                responsive: true,
+                respNewRow: false,
+                placeholder: '请输入变更人的ip地址',
+                maxlength: null,
+                prefix: '',
+                suffix: '',
+                addonBefore: '',
+                addonAfter: '',
+                disabled: false,
+                allowClear: false,
+                showLabel: true,
+                required: false,
+                rules: [],
+                events: {},
+                isSave: false,
+                isShow: true,
+                scan: false,
+                style: {width: '100%'},
+            },
+        },
+        {
+            key: '6305f47c32214c14b60efac51758e47c',
+            field: 'changeReason',
+            label: '变更原因',
+            type: 'input',
+            component: 'Input',
+            colProps: {span: 24},
+            defaultValue: '',
+            componentProps: {
+                width: '100%',
+                span: '',
+                defaultValue: '',
+                labelWidthMode: 'fix',
+                labelFixWidth: 120,
+                responsive: true,
+                respNewRow: false,
+                placeholder: '请输入变更原因',
+                maxlength: null,
+                prefix: '',
+                suffix: '',
+                addonBefore: '',
+                addonAfter: '',
+                disabled: false,
+                allowClear: false,
+                showLabel: true,
+                required: false,
+                rules: [],
+                events: {},
+                isSave: false,
+                isShow: true,
+                scan: false,
+                style: {width: '100%'},
+            },
+        },
+        {
+            key: '6ea6d70beac740dfb44e5b4dae8a5f92',
+            field: 'version',
+            label: '变更版本号',
+            type: 'input',
+            component: 'Input',
+            colProps: {span: 24},
+            defaultValue: '',
+            componentProps: {
+                width: '100%',
+                span: '',
+                defaultValue: '',
+                labelWidthMode: 'fix',
+                labelFixWidth: 120,
+                responsive: true,
+                respNewRow: false,
+                placeholder: '请输入变更版本号',
+                maxlength: null,
+                prefix: '',
+                suffix: '',
+                addonBefore: '',
+                addonAfter: '',
+                disabled: false,
+                allowClear: false,
+                showLabel: true,
+                required: false,
+                rules: [],
+                events: {},
+                isSave: false,
+                isShow: true,
+                scan: false,
+                style: {width: '100%'},
+            },
+        },
+    ],
+    showActionButtonGroup: false,
+    buttonLocation: 'center',
+    actionColOptions: {span: 24},
+    showResetButton: false,
+    showSubmitButton: false,
+    hiddenComponent: [],
+};

src/views/formChange/formChangeLog/components/workflowPermission.ts

@@ -0,0 +1,77 @@
+export const permissionList = [
+    {
+        required: true,
+        view: true,
+        edit: true,
+        disabled: false,
+        isSaveTable: false,
+        tableName: '',
+        fieldName: '业务表单id',
+        fieldId: 'formId',
+        isSubTable: false,
+        showChildren: true,
+        type: 'input',
+        key: '2b23009bb6be47d9bd60ffa7b928e3d3',
+        children: [],
+    },
+    {
+        required: true,
+        view: true,
+        edit: true,
+        disabled: false,
+        isSaveTable: false,
+        tableName: '',
+        fieldName: '关联的业务数据id',
+        fieldId: 'formDataId',
+        isSubTable: false,
+        showChildren: true,
+        type: 'input',
+        key: 'ae02eb3114b24e0184df37f394394f2b',
+        children: [],
+    },
+    {
+        required: true,
+        view: true,
+        edit: true,
+        disabled: false,
+        isSaveTable: false,
+        tableName: '',
+        fieldName: '变更人的ip地址',
+        fieldId: 'ipAddress',
+        isSubTable: false,
+        showChildren: true,
+        type: 'input',
+        key: 'd6f4b7d9678a4e968a3107a5c610e48f',
+        children: [],
+    },
+    {
+        required: true,
+        view: true,
+        edit: true,
+        disabled: false,
+        isSaveTable: false,
+        tableName: '',
+        fieldName: '变更原因',
+        fieldId: 'changeReason',
+        isSubTable: false,
+        showChildren: true,
+        type: 'input',
+        key: '6305f47c32214c14b60efac51758e47c',
+        children: [],
+    },
+    {
+        required: true,
+        view: true,
+        edit: true,
+        disabled: false,
+        isSaveTable: false,
+        tableName: '',
+        fieldName: '变更版本号',
+        fieldId: 'version',
+        isSubTable: false,
+        showChildren: true,
+        type: 'input',
+        key: '6ea6d70beac740dfb44e5b4dae8a5f92',
+        children: [],
+    },
+];

src/views/formChange/formChangeLog/index.vue

@@ -0,0 +1,335 @@
+<template>
+    <PageWrapper dense fixedHeight contentFullHeight contentClass="flex">
+        <BasicTable @register="registerTable" ref="tableRef" @row-dbClick="dbClickRow">
+            <template #toolbar>
+                <template v-for="button in tableButtonConfig" :key="button.code">
+                    <a-button v-if="button.isDefault" :type="button.type" @click="buttonClick(button.code)">
+                        <template #icon>
+                            <Icon :icon="button.icon" />
+                        </template>
+                        {{ button.name }}
+                    </a-button>
+                    <a-button v-else :type="button.type">
+                        <template #icon>
+                            <Icon :icon="button.icon" />
+                        </template>
+                        {{ button.name }}
+                    </a-button>
+                </template>
+            </template>
+            <template #bodyCell="{ column, record }">
+                <template v-if="column.dataIndex === 'action'">
+                    <TableAction :actions="getActions(record)" />
+                </template>
+            </template>
+        </BasicTable>
+        <FormChangeLogModal @register="registerModal" @success="handleSuccess" />
+    </PageWrapper>
+    <a-modal v-model:visible="visibleFlowRecordModal" style="width: 1200px;height: 500px;" :maskClosable="false"
+        @cancel="handleClose" @ok="handleClose" :title="t('变更明细')">
+        <div style=" height: 500px;overflow: auto; padding: 0px 15px">
+            <ChangeRowDetailModal :rowId="currentRowId" :currentUserName="currentUserName"
+                :currentCreateTime="currentCreateTime" :formInfos="props.formInfos[0]['formConfig']['children']"
+                :isShow="visibleFlowRecordModal">
+            </ChangeRowDetailModal>
+        </div>
+    </a-modal>
+</template>
+
+<script lang="ts" setup>
+import {
+    ref, computed, onMounted, onUnmounted, createVNode,
+    inject,
+
+} from 'vue';
+
+import { Modal } from 'ant-design-vue';
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { BasicTable, useTable, TableAction, ActionItem } from '/@/components/Table';
+import { getFormChangeRecordPage, deleteFormChangeRecord, getRecordList } from '/@/api/formChange/formChangeLog';
+import { PageWrapper } from '/@/components/Page';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { usePermission } from '/@/hooks/web/usePermission';
+import { useRouter } from 'vue-router';
+import { getFormChangeRecord } from '/@/api/formChange/formChangeLog';
+import { useModal } from '/@/components/Modal';
+import FormChangeLogModal from './components/FormChangeLogModal.vue';
+import { BasicModal } from '/@/components/Modal';
+import { searchFormSchema, columns } from './components/config';
+import Icon from '/@/components/Icon/index';
+import useEventBus from '/@/hooks/event/useEventBus';
+import ChangeRowDetailModal from '../changeLogDetail/components/ChangeRowDetailModal.vue';
+
+const { bus, CREATE_FLOW, FLOW_PROCESSED, FORM_LIST_MODIFIED } = useEventBus();
+
+const { notification } = useMessage();
+const { t } = useI18n();
+defineEmits(['register']);
+const { filterColumnAuth, filterButtonAuth } = usePermission();
+
+// const filterColumns = filterColumnAuth(columns);
+const filterColumns = columns;
+const tableRef = ref();
+const visibleFlowRecordModal = ref(false);
+const currentRowId = ref(0);
+const currentUserName = ref('');
+const currentCreateTime = ref('');
+const props = withDefaults(
+    defineProps<{
+        formDataId: number
+        formInfos: any
+    }>(),
+    {
+        formDataId: 0
+    },
+);
+
+//展示在列表内的按钮
+const actionButtons = ref<string[]>(['view', 'edit', 'copyData', 'delete', 'startwork', 'flowRecord']);
+const buttonConfigs = computed(() => {
+    // const list = [{ "isUse": true, "name": "新增", "code": "add", "icon": "ant-design:plus-outlined", "isDefault": true, "type": "primary" }, {
+    //     "isUse": true,
+    //     "name": "编辑",
+    //     "code": "edit",
+    //     "icon": "ant-design:form-outlined",
+    //     "isDefault": true
+    // }, { "isUse": true, "name": "刷新", "code": "refresh", "icon": "ant-design:reload-outlined", "isDefault": true }, { "isUse": true, "name": "查看", "code": "view", "icon": "ant-design:eye-outlined", "isDefault": true }, {
+    //     "isUse": true,
+    //     "name": "删除",
+    //     "code": "delete",
+    //     "icon": "ant-design:delete-outlined",
+    //     "isDefault": true
+    // }]
+    const list = []
+    return filterButtonAuth(list);
+})
+
+const tableButtonConfig = computed(() => {
+    return buttonConfigs.value?.filter((x) => !actionButtons.value.includes(x.code));
+});
+
+const actionButtonConfig = computed(() => {
+    return buttonConfigs.value?.filter((x) => actionButtons.value.includes(x.code));
+});
+
+const btnEvent = { add: handleAdd, edit: handleEdit, refresh: handleRefresh, view: handleView, delete: handleDelete, }
+
+const { currentRoute } = useRouter();
+const router = useRouter();
+
+
+const formIdComputedRef = ref();
+formIdComputedRef.value = currentRoute.value.meta.formId
+const schemaIdComputedRef = ref();
+schemaIdComputedRef.value = currentRoute.value.meta.schemaId
+
+
+const [registerModal, { openModal }] = useModal();
+
+
+const formName = '表单更新记录';
+const [registerTable, { reload, }] = useTable({
+    title: '' || (formName + '列表'),
+    api: getFormChangeRecordPage,
+    // api: getRecordList,
+    rowKey: 'id',
+    columns: filterColumns,
+    formConfig: {
+        rowProps: {
+            gutter: 16,
+        },
+        schemas: searchFormSchema,
+        fieldMapToTime: [],
+        showResetButton: false,
+    },
+    beforeFetch: (params) => {
+        return { ...params, FormId: formIdComputedRef.value, formDataId: props.formDataId };
+    },
+    afterFetch: (res) => {
+        tableRef.value.setToolBarWidth();
+
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+
+    striped: false,
+    tableSetting: {
+        size: false,
+        setting: false,
+    },
+
+});
+
+function handleClose() {
+    visibleFlowRecordModal.value = false;
+}
+
+function dbClickRow(record) {
+    // console.log(1111111111, record);
+    // const { processId, taskIds, schemaId } = record.workflowData || {};
+    // if (taskIds && taskIds.length) {
+    //     router.push({
+    //         path: '/flow/' + schemaId + '/' + (processId || '') + '/approveFlow',
+    //         query: {
+    //             taskId: taskIds[0],
+    //             formName: formName
+    //         }
+    //     });
+    // } else if (schemaId && !taskIds && processId) {
+    //     router.push({
+    //         path: '/flow/' + schemaId + '/' + processId + '/approveFlow',
+    //         query: {
+    //             readonly: 1,
+    //             taskId: '',
+    //             formName: formName
+    //         }
+    //     });
+    // } else {
+    //     router.push({
+    //         path: '/form/formChangeLog/' + record.id + '/viewForm',
+    //         query: {
+    //             formPath: 'formChange/formChangeLog',
+    //             formName: formName
+    //         }
+    //     });
+    // }
+    currentRowId.value = record.id;
+    currentUserName.value = record.createUserName;
+    currentCreateTime.value = record.createDate;
+    visibleFlowRecordModal.value = true;
+
+}
+
+function buttonClick(code) {
+
+    btnEvent[code]();
+}
+
+function handleAdd() {
+    if (schemaIdComputedRef.value) {
+        router.push({
+            path: '/flow/' + schemaIdComputedRef.value + '/0/createFlow'
+        });
+    } else {
+        router.push({
+            path: '/form/formChangeLog/0/createForm',
+            query: {
+                formPath: 'formChange/formChangeLog',
+                formName: formName
+            }
+        });
+    }
+}
+
+function handleEdit(record: Recordable) {
+
+    router.push({
+        path: '/form/formChangeLog/' + record.id + '/updateForm',
+        query: {
+            formPath: 'formChange/formChangeLog',
+            formName: formName
+        }
+    });
+}
+
+
+function handleDelete(record: Recordable) {
+    deleteList([record.id]);
+}
+
+function deleteList(ids) {
+    Modal.confirm({
+        title: '提示信息',
+        icon: createVNode(ExclamationCircleOutlined),
+        content: '是否确认删除？',
+        okText: '确认',
+        cancelText: '取消',
+        onOk() {
+            deleteFormChangeRecord(ids).then((_) => {
+                handleSuccess();
+                notification.success({
+                    message: 'Tip',
+                    description: t('删除成功！'),
+                });
+            });
+        },
+        onCancel() {
+        },
+    });
+}
+
+
+function handleRefresh() {
+    reload();
+}
+
+function handleSuccess() {
+
+    reload();
+}
+
+function handleView(record: Recordable) {
+
+    dbClickRow(record);
+
+}
+
+
+onMounted(() => {
+
+    if (schemaIdComputedRef.value) {
+        bus.on(FLOW_PROCESSED, handleRefresh);
+        bus.on(CREATE_FLOW, handleRefresh);
+    } else {
+        bus.on(FORM_LIST_MODIFIED, handleRefresh);
+    }
+});
+onUnmounted(() => {
+    if (schemaIdComputedRef.value) {
+        bus.off(FLOW_PROCESSED, handleRefresh);
+        bus.off(CREATE_FLOW, handleRefresh);
+    } else {
+        bus.off(FORM_LIST_MODIFIED, handleRefresh);
+    }
+});
+
+function getActions(record: Recordable): ActionItem[] {
+
+    const actionsList: ActionItem[] = actionButtonConfig.value?.map((button) => {
+        if (!record.workflowData?.processId) {
+            return {
+                icon: button?.icon,
+                tooltip: button?.name,
+                color: button.code === 'delete' ? 'error' : undefined,
+                onClick: btnEvent[button.code].bind(null, record),
+            };
+        } else {
+            if (button.code === 'view') {
+                return {
+                    icon: button?.icon,
+                    tooltip: button?.name,
+                    onClick: btnEvent[button.code].bind(null, record),
+                };
+            } else {
+                return {};
+            }
+        }
+    });
+    return actionsList;
+}
+
+</script>
+<style lang="less" scoped>
+:deep(.ant-table-selection-col) {
+    width: 50px;
+}
+
+.show {
+    display: flex;
+}
+
+.hide {
+    display: none !important;
+}
+</style>

src/views/secondDev/approveFlowPage.vue

@@ -1,4 +1,5 @@
 <template>
+    <a-spin :spinning="spinning" tip="请稍后...">
     <div class="page-bg-wrap">
         <div class="geg-flow-page">
             <div class="top-toolbar">
@@ -62,6 +63,7 @@
             </a-modal>
         </div>
     </div>
+</a-spin>
 </template>
 
 <script setup>
@@ -85,6 +87,7 @@
     import { useMessage } from '/@/hooks/web/useMessage';
     import { useUserStore } from '/@/store/modules/user';
 
+    const spinning = ref(false);
     const userStore = useUserStore();
     const { t } = useI18n();
     const { notification } = useMessage();
@@ -156,6 +159,7 @@
                 okType: 'danger',
                 cancelText: t('取消'),
                 onOk() {
+                    openSpinning();
                     withdraw(processId.value, drawNode.value).then((res) => {
                         if (res) {
                             notification.open({
@@ -170,6 +174,8 @@
                                 description: t('撤回失败')
                             });
                         }
+                    }).finally(()=>{
+                        closeSpinning();
                     });
                 },
                 onCancel() {}
@@ -190,10 +196,12 @@
     }
 
     async function onApproveClick(isAutoAgreeBreak = false) {
+        openSpinning();
         if (!isAutoAgreeBreak) {
             await submit();
         }
         if (!validateSuccess.value) {
+            closeSpinning();
             return;
         }
         const params = await getApproveParams();
@@ -204,6 +212,7 @@
         if (isAutoAgreeBreak) {
             opinionDlg.value.stopLoading()
         }
+        closeSpinning();
         opinionDlg.value.toggleDialog({
             action: 'agree',
             nextNodes,
@@ -461,4 +470,11 @@
         }
         
     } 
+
+    function openSpinning() {
+        spinning.value = true;
+    }
+    function closeSpinning() {
+        spinning.value = false;
+    }
 </script>

src/views/workflow/task/components/flow/AddOrSubtractWork.vue

@@ -0,0 +1,119 @@
+<template>
+  <a-button class="mr-2" @click="show">{{ t('加签或减签') }}</a-button>
+  <a-modal :width="1000" :visible="data.visible" :title="t('加签或减签')" :maskClosable="false" @ok="submit" @cancel="cancel"
+    @close="cancel()">
+    <div class="p-5 box">
+      <SelectApproveUser :schemaId="props.schemaId" :taskId="props.taskId" :selectedUser="props.selectedUser"
+        @update:selectIds="handleSelectIds" @update:addUserIds="handleAddIds" @update:subUserIds="handleSubIds" />
+    </div>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue';
+import SelectApproveUser from './SelectApproveUser.vue';
+import { postSetSign } from '/@/api/workflow/adminOperation';
+import { notification } from 'ant-design-vue';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { message } from 'ant-design-vue';
+const { t } = useI18n();
+const props = defineProps({
+  schemaId: {
+    type: String,
+    // required: true,
+  },
+  processId: {
+    type: String,
+    // required: true,
+  },
+  taskId: {
+    type: String,
+    // required: true,
+  },
+  selectedUser: Array
+});
+let data: {
+  visible: boolean;
+  selectedIds: Array<number>;
+  addUserIds: Array<number>;
+  subUserIds: Array<number>;
+} = reactive({
+  visible: false,
+  selectedIds: [],
+  addUserIds: [],
+  subUserIds: []
+});
+function show() {
+  data.selectedIds = [];
+  data.addUserIds = [];
+  data.subUserIds = [];
+  data.visible = true;
+}
+function cancel() {
+  data.selectedIds = [];
+  data.addUserIds = [];
+  data.subUserIds = [];
+  data.visible = false;
+}
+function handleSelectIds(ids) {
+  ids.forEach((ele) => {
+    data.selectedIds.push(ele as number);
+  })
+  // data.selectedIds = ids;
+}
+function handleAddIds(ids) {
+  ids.forEach((ele) => {
+    data.addUserIds.push(ele as number);
+  })
+  // data.addUserIds = ids;
+}
+function handleSubIds(ids) {
+  ids.forEach((ele) => {
+    data.subUserIds.push(ele as number);
+  })
+  // data.subUserIds = ids;
+}
+async function submit() {
+  let msgs: Array<string> = [];
+  if (msgs.length > 0) {
+    msgs.forEach((msg) => {
+      notification.open({
+        type: 'error',
+        message: t('加签减签'),
+        description: msg,
+      });
+    });
+  } else {
+    try {
+      if (props.schemaId && props.taskId) {
+        const msg = await postSetSign(props.schemaId, props.taskId, data.selectedIds, data.addUserIds, data.subUserIds);
+        if (msg) {
+          message.info("加减签成功！")
+        } else {
+          message.info("加减签失败！")
+        }
+        cancel();
+      }
+    } catch (_error) {
+      notification.open({
+        type: 'error',
+        message: t('加签减签'),
+        description: t('选择加签减签失败'),
+      });
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.box {
+  height: 500px;
+}
+
+.list-page-box {
+  display: flex;
+  flex-wrap: wrap;
+  overflow-y: auto;
+  padding: 10px 0;
+}
+</style>

src/views/workflow/task/components/flow/ApproveProcessMonitorUser.vue

@@ -1,26 +1,15 @@
 <template>
-  <a-modal
-    :width="800"
-    :visible="true"
-    :title="t('指派审核人')"
-    :maskClosable="false"
-    @ok="submit"
-    @cancel="close"
-  >
+  <a-modal :width="800" :visible="true" :title="t('指派审核人')" :maskClosable="false" @ok="submit" @cancel="close">
     <div class="p-5">
-      <div class="mt-2"
-        ><div>{{ title }}{{ t('【当前】：') }}</div>
+      <div class="mt-2">
+        <div>{{ title }}{{ t('【当前】：') }}</div>
         <a-input :value="data.currentUserNames" disabled />
       </div>
-      <div class="mt-2"
-        ><div>{{ title }}{{ t('【指派给】：') }}</div>
+      <div class="mt-2">
+        <div>{{ title }}{{ t('【指派给】：') }}</div>
 
-        <SelectUser
-          :selectedIds="selectedIds"
-          :disabledIds="data.currentUserIds"
-          :multiple="true"
-          @change="getUserList"
-        >
+        <SelectUser :selectedIds="selectedIds" :disabledIds="data.currentUserIds" :multiple="false"
+          @change="getUserList">
           <a-input :value="data.selectedNames" />
         </SelectUser>
       </div>
@@ -29,90 +18,109 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, onMounted, reactive } from 'vue';
-  import { getApproveUserList, postSetAssignee } from '/@/api/workflow/task';
-  import { SelectUser } from '/@/components/SelectOrganizational/index';
-  import { getUserMulti } from '/@/api/system/user';
-  import { notification } from 'ant-design-vue';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  const { t } = useI18n();
-  const props = defineProps({
-    schemaId: {
-      type: String,
-      required: true,
-    },
-    title: {
-      type: String,
-      required: true,
-    },
-    taskId: {
-      type: String,
-      required: true,
-    },
-  });
-  let emits = defineEmits(['close']);
-  let data: {
-    currentUserNames: string;
-    currentUserIds: Array<string>;
-    selectedNames: string;
-    selectedList: Array<{ id: string; name: string }>;
-  } = reactive({
-    selectedList: [],
-    currentUserIds: [],
-    currentUserNames: '',
-    selectedNames: '',
-  });
-  const selectedIds = computed(() => {
-    return data.selectedList.map((ele) => {
-      return ele.id;
-    });
-  });
-  onMounted(async () => {
-    if (props.schemaId && props.taskId) {
-      try {
-        let userList = await getApproveUserList(props.schemaId, props.taskId);
-        data.currentUserNames = userList
-          .map((ele) => {
-            return ele.name;
-          })
-          .join(',');
-        data.currentUserIds = userList.map((ele) => {
-          return ele.id;
-        });
-      } catch (_error) {}
-    }
-  });
-
-  async function getUserList(list: Array<string>) {
-    data.selectedList = await getUserMulti(list.join(','));
-    data.selectedNames = data.selectedList
+import { computed, onMounted, reactive } from 'vue';
+import { getApproveUserList } from '/@/api/workflow/task';
+import { postSetAssignee } from '/@/api/workflow/adminOperation';
+import { SelectUser } from '/@/components/SelectOrganizational/index';
+import { getUserMulti } from '/@/api/system/user';
+import { notification } from 'ant-design-vue';
+import { useI18n } from '/@/hooks/web/useI18n';
+const { t } = useI18n();
+const props = defineProps({
+schemaId: {
+  type: String,
+  // required: true,
+},
+title: {
+  type: String,
+  // required: true,
+},
+taskId: {
+  type: String,
+  // required: true,
+},
+userList: {
+  type: Array,
+}
+});
+let emits = defineEmits(['close']);
+let data: {
+currentUserNames: string;
+currentUserIds: Array<string>;
+selectedNames: string;
+selectedList: Array<{ id: string; name: string }>;
+} = reactive({
+selectedList: [],
+currentUserIds: [],
+currentUserNames: '',
+selectedNames: '',
+});
+const selectedIds = computed(() => {
+return data.selectedList.map((ele) => {
+  return ele.id;
+});
+});
+onMounted(async () => {
+if (props.schemaId && props.taskId) {
+  try {
+    let userList = await getApproveUserList(props.schemaId, props.taskId);
+    data.currentUserNames = userList
       .map((ele) => {
         return ele.name;
       })
       .join(',');
+    data.currentUserIds = userList.map((ele) => {
+      return ele.id;
+    });
+    data.selectedList = userList.map((ele) => {
+      return { 'id': ele.id, 'name': ele.name }
+    })
+  } catch (_error) { }
+} else {
+  data.currentUserNames = props.userList.assigneeVoList.map((ele) => {
+    return ele.name;
+  });
+  data.currentUserIds = props.userList.assigneeVoList.map((ele) => {
+    return ele.id;
+  });
+  data.selectedList = props.userList.assigneeVoList.map((ele) => {
+    return { 'id': ele.id, 'name': ele.name }
+  })
+}
+});
+
+async function getUserList(list: Array<string>) {
+data.selectedList = await getUserMulti(list.join(','));
+data.selectedNames = data.selectedList
+  .map((ele) => {
+    return ele.name;
+  })
+  .join(',');
+}
+async function submit() {
+try {
+  let res = await postSetAssignee({ 'taskId': props.taskId, 'assignees': selectedIds.value });
+  // let res = await postSetAssignee(props.taskId, selectedIds.value);
+  if (res) {
+    notification.open({
+      type: 'success',
+      message: t('修改审核人'),
+      description: t('修改审核人成功'),
+    });
+    emits('close', data.selectedList);
+    // close();
+  } else {
+    notification.open({
+      type: 'error',
+      message: t('修改审核人'),
+      description: t('修改审核人失败'),
+    });
   }
-  async function submit() {
-    try {
-      let res = await postSetAssignee(props.taskId, selectedIds.value);
-      if (res) {
-        notification.open({
-          type: 'success',
-          message: t('指派审核人'),
-          description: t('指派审核人成功'),
-        });
-        close();
-      } else {
-        notification.open({
-          type: 'error',
-          message: t('指派审核人'),
-          description: t('指派审核人失败'),
-        });
-      }
-    } catch (error) {}
-  }
-  function close() {
-    emits('close');
-  }
+} catch (error) { }
+}
+function close() {
+emits('close');
+}
 </script>
 
 <style lang="less" scoped></style>

src/views/workflow/task/components/flow/FlowPanel.vue

@@ -2,7 +2,9 @@
   <a-tabs :tab-position="props.position" v-model:activeKey="activeKey">
     <a-tab-pane :key="1" :tab="t('表单信息')" force-render><slot></slot></a-tab-pane>
     <a-tab-pane :key="2" :tab="t('流程信息')">
-      <ProcessInformation :xml="xml" :processId="processId"
+      <ProcessInformation :xml="xml" :processId="processId" :schemaId="schemaId"
+        :currentTaskAssigneeNames="currentTaskAssigneeNames" :currentTaskAssignees="currentTaskAssignees"
+        :canClick="true"
     /></a-tab-pane>
     <a-tab-pane :key="3" :tab="t('流转记录')" style="overflow: auto"
       ><FlowRecord :list="taskRecords" :processId="processId"
@@ -10,9 +12,15 @@
     <a-tab-pane :key="4" :tab="t('附件汇总')"
       ><SummaryOfAttachments :processId="processId"
     /></a-tab-pane>
-    <a-tab-pane :key="5 + index" v-for="(item, index) in predecessorTasks" :tab="item.schemaName">
+    <a-tab-pane :key="5" :tab="t('流程变更记录')">
+      <ChangeRecord :processId="processId" :formDataId="formDataId" :formInfos="formInfos" />
+    </a-tab-pane>
+    <a-tab-pane :key="6" :tab="t('审批记录')">
+      <AuditRecord :processId="processId" :schemaId="schemaId" :xml="xml" />
+    </a-tab-pane>
+    <a-tab-pane :key="7 + index" v-for="(item, index) in predecessorTasks" :tab="item.schemaName">
       <LookRelationTask
-        v-if="activeKey === 5 + index"
+        v-if="activeKey === 7 + index"
         :taskId="item.taskId"
         :processId="item.processId"
         position="left"
@@ -29,6 +37,8 @@
   import { ref } from 'vue';
   import { SchemaTaskItem } from '/@/model/workflow/bpmnConfig';
   import { useI18n } from '/@/hooks/web/useI18n';
+  import ChangeRecord from '/@/views/formChange/formChangeLog/index.vue';
+  import AuditRecord from '/@/views/auditOpt/auditRecord/index.vue'
   const { t } = useI18n();
   let props = withDefaults(
     defineProps<{
@@ -37,6 +47,12 @@
       taskRecords: Array<any> | undefined;
       processId: string | undefined;
       predecessorTasks: Array<SchemaTaskItem> | undefined;
+      currentTaskAssignees: any;
+      currentTaskAssigneeNames: string;
+      currentTaskInfo: any;
+      schemaId: string;
+      formDataId: number;
+      formInfos: Array<any>;
     }>(),
     {
       xml: '',
@@ -44,6 +60,14 @@
       predecessorTasks: () => {
         return [];
       },
+      currentTaskAssigneeNames: '无',
+      currentTaskAssignees: {},
+      currentTaskInfo: {},
+      schemaId: '',
+      formDataId: 0,
+      formInfos: () => {
+        return [];
+      }
     },
   );
 

src/views/workflow/task/components/flow/FormInformation.vue

@@ -28,6 +28,16 @@
         <div v-for="(item, index) in forms.configs" :key="index" :tab="item.formName">
           <div v-show="activeIndex == index">
               <div class="page-bg-wrap">
+                <div class="top-toolbar" style="display: flex;margin-bottom: 10px">
+                <div id="adminButtons" v-show="activeIndex == index" style="margin-right:10px">
+                  <a-button @click="handleCancel" v-if="forms.modes[index] == 'edit'">取消</a-button>
+                  <a-button @click="handleSave" v-if="forms.modes[index] == 'edit'" type="primary" style="margin-left: 12px">保存</a-button>
+                  <a-button @click="handleEdit" v-if="forms.modes[index] == 'view'">编辑</a-button>
+                  <a-button @click="handleDelete" type="danger" style="margin-left: 12px">删除</a-button>
+                </div>
+                <div id="approveExtendButton"></div>
+                <div id="approveRightButton"></div>
+              </div>
                 <div class="top-toolbar">
                     <SystemForm
                       class="form-box"
@@ -70,6 +80,8 @@
   import { SystemForm } from '/@/components/SystemForm/index';
   import { FormType } from '/@/enums/workflowEnum';
   import { createFormEvent, loadFormEvent, submitFormEvent } from '/@/hooks/web/useFormEvent';
+  import { message } from "ant-design-vue";
+  import { updateWorkflow } from '/@/api/workflow/adminOperation';
   const { t } = useI18n();
   const props = withDefaults(
     defineProps<{
@@ -78,12 +90,14 @@
       opinions?: Array<TaskApproveOpinion> | undefined;
       opinionsComponents?: Array<string> | undefined;
       formAssignmentData?: null | Recordable;
+      processId: string;
     }>(),
     {
       disabled: false,
       formInfos: () => {
         return [];
       },
+      processId: ''
     },
   );
 
@@ -142,10 +156,12 @@
       isOldSystem?: boolean;
     }>;
     formEventConfigs: FormEventColumnConfig[];
+    modes: string[];
   } = reactive({
     formModels: [],
     configs: [],
     formEventConfigs: [],
+    modes: []
   });
   onMounted(async () => {
     for await (let element of props.formInfos) {
@@ -160,6 +176,8 @@
         }
       }
       forms.formModels.push(formModels);
+      // 默认赋值view
+      forms.modes.push('view');
       // 系统表单
       if (element.formType == FormType.SYSTEM) {
         forms.configs.push({
@@ -304,27 +322,32 @@
     }
     return formModes;
   }
-  async function getFormModels(saveRowKey) {
+  async function getFormModels(saveRowKey,isOnlyActive) {
     let formModes = {};
-
-    for (let index = 0; index < forms.configs.length; index++) {
-      const ele = forms.configs[index];
-      if (ele.formType == FormType.SYSTEM) {
-        let values = await itemRefs.value[index].workflowSubmit(saveRowKey);
-        formModes[ele.formKey] = values;
-      } else {
-        formModes[ele.formKey] = ele.formModel;
-      }
+  for (let index = 0; index < forms.configs.length; index++) {
+    if (isOnlyActive && index != activeIndex.value) {
+      continue;
     }
+    const ele = forms.configs[index];
+    if (ele.formType == FormType.SYSTEM) {
+      let values = await itemRefs.value[index].workflowSubmit(saveRowKey);
+      formModes[ele.formKey] = values;
+    } else {
+      formModes[ele.formKey] = ele.formModel;
+    }
+  }
 
-    // forms.configs.forEach((ele) => {
-    //   formModes[ele.formKey] = ele.formModel;
-    // });
-    forms.formEventConfigs.forEach(async (ele, i) => {
-      //此组件 获取数据 就是为了提交表单 所以 表单提交数据 事件 就此处执行
-      await submitFormEvent(ele, forms.configs[i]?.formModel);
-    });
-    return formModes;
+  // forms.configs.forEach((ele) => {
+  //   formModes[ele.formKey] = ele.formModel;
+  // });
+  forms.formEventConfigs.forEach(async (ele, i) => {
+    if (isOnlyActive && i != activeIndex.value) {
+      return true;
+    }
+    //此组件 获取数据 就是为了提交表单 所以 表单提交数据 事件 就此处执行
+    await submitFormEvent(ele, forms.configs[i]?.formModel);
+  });
+  return formModes;
   }
   function getSystemType() {
     let system = {};
@@ -359,6 +382,34 @@
       resize.releaseCapture && resize.releaseCapture();
     };
   }
+
+  function handleCancel() {
+  itemRefs.value[activeIndex.value].setDisabledForm(true);
+  forms.modes[activeIndex.value] = 'view';
+  itemRefs.value[activeIndex.value].setFieldsValue(forms.formModels[activeIndex.value]);
+}
+async function handleDelete() {
+    let formVal = await itemRefs.value[activeIndex.value].getFieldsValue();
+    await itemRefs.value[activeIndex.value].handleDelete(formVal.id)
+}
+
+async function handleSave() {
+  const params = await getFormModels(true, true);
+  const code = await updateWorkflow({ 'variables': params, 'processInstanceId': props.processId })
+  if (code) {
+    message.success(t('保存成功'));
+  } else {
+    message.success(t('保存失败，请稍后再试'));
+  }
+  itemRefs.value[activeIndex.value].setDisabledForm(true);
+  forms.modes[activeIndex.value] = 'view';
+}
+
+function handleEdit() {
+  itemRefs.value[activeIndex.value].setDisabledForm(false);
+  forms.modes[activeIndex.value] = 'edit';
+}
+
   defineExpose({
     validateForm,
     getFormModels,
@@ -366,6 +417,10 @@
     setFormData,
     getUploadComponentIds,
     getSystemType,
+    handleEdit,
+    handleSave,
+    handleCancel,
+    handleDelete
   });
 </script>
 

src/views/workflow/task/components/flow/LookTask.vue

@@ -13,6 +13,7 @@
       :opinions="data.opinions"
       :formInfos="data.formInfos"
       :disabled="true"
+      :processId="props.processId"
     />
   </FlowPanel>
 </template>

src/views/workflow/task/components/flow/ProcessInformation.vue

@@ -1,164 +1,201 @@
 <template>
-    <div style="margin:20px;">
-        当前流程审批人：{{currentTaskAssigneeNames.replaceAll(",","、")}}
-    </div>
-    <div style="margin:20px;" v-if="currentTaskAssignees">
-        节点审批人：
-        <div v-for="(assignees,taskKey) in currentTaskAssignees" :key="taskKey">
-            <span>{{assignees[0].taskName}}{{currentTaskInfo?.taskDefinitionKey==taskKey?'（当前审批节点）':''}}：</span>
-            <span v-for="(assignee,index) in assignees" :key="index">
-                {{assignee.assigneeNameStr?(assignee.assigneeNameStr?.replaceAll(",","/") + (index<assignees.length-1?'、':'')):('')}}
-            </span>
-        </div>
-    </div>
-  <!--  流程信息 -->
-  <div class="flow-record-box">
-    <div id="bpmnCanvas" class="canvas" ref="bpmnCanvas"></div>
+  <div style="margin:20px;">
+      当前流程审批人：{{currentTaskAssigneeNames.replaceAll(",","、")}}
   </div>
+  <div style="margin:20px;" v-if="currentTaskAssignees">
+      节点审批人：
+      <div v-for="(assignees,taskKey) in currentTaskAssignees" :key="taskKey">
+          <span>{{assignees[0].taskName}}{{currentTaskInfo?.taskDefinitionKey==taskKey?'（当前审批节点）':''}}：</span>
+          <span :class="canClick ? 'custom-cursor' : ''" v-for="(assignee,index) in assignees" :key="index" @click="openView(assignee)">
+              {{assignee.assigneeNameStr?(assignee.assigneeNameStr?.replaceAll(",","/") + (index<assignees.length-1?'、':'')):('')}}
+          </span>
+      </div>
+  </div>
+<!--  流程信息 -->
+<div class="flow-record-box">
+  <div id="bpmnCanvas" class="canvas" ref="bpmnCanvas"></div>
+</div>
 
-  <div class="fixed-bottom">
-    <ZoomInOrOut @in="zoomViewport(false)" @out="zoomViewport(true)" />
-  </div>
+<div class="fixed-bottom">
+  <ZoomInOrOut @in="zoomViewport(false)" @out="zoomViewport(true)" />
+</div>
+
+<a-modal v-if="visibleFlowRecordModal" :visible="true" :width="1000" title="编辑节点" @close="() => {
+  visibleFlowRecordModal = false;
+}" @cancel="() => {
+  visibleFlowRecordModal = false;
+}" @ok="() => {
+  visibleFlowRecordModal = false;
+  initBpmnModeler()
+}">
+  <CurrentNode :schemaId="schemaId" :currentTaskAssigneeNames="currentTaskAssigneeNames"
+    :clickedTaskAssignees="clickedTaskAssignees" :processId="processId">
+  </CurrentNode>
+</a-modal>
 </template>
 <script lang="ts" setup>
-  import CustomModeler from '/@bpmn/modeler';
-  import { ZoomInOrOut } from '/@/components/ModalPanel';
-  import { getFinishedTask } from '/@/api/workflow/task';
-  import { ref, reactive, onMounted } from 'vue';
+import CustomModeler from '/@bpmn/modeler';
+import { ZoomInOrOut } from '/@/components/ModalPanel';
+import { getFinishedTask } from '/@/api/workflow/task';
+import { ref, reactive, onMounted, provide } from 'vue';
+import CurrentNode from '../../../../actHiTaskinst/components/Form.vue';
 
-  const props = withDefaults(
-    defineProps<{
-      xml: string;
-      processId: string;
-      currentTaskAssignees: any;
-        currentTaskAssigneeNames: string;
-        currentTaskInfo:any;
-    }>(),
-    {
-      xml: '',
-      processId: '',
-        currentTaskAssigneeNames:'无',
-        currentTaskAssignees: {},
-        currentTaskInfo:{}
-    },
-  );
-  const bpmnCanvas = ref();
-  let data: {
-    bpmnViewer: any;
-    zoom: number;
-    xmlString: string;
-  } = reactive({
-    bpmnViewer: null,
-    zoom: 1,
-    xmlString: '',
-  });
-  onMounted(() => {
-    data.xmlString = props.xml;
-    if (data.xmlString) initBpmnModeler();
-  });
+const visibleFlowRecordModal = ref(false);
+const props = withDefaults(
+  defineProps<{
+    xml: string;
+    processId: string;
+    currentTaskAssignees: any;
+    currentTaskAssigneeNames: string;
+    currentTaskInfo:any;
+    schemaId: string;
+    clickedTaskAssignees: any;
+    canClick: boolean;
+  }>(),
+  {
+    xml: '',
+    processId: '',
+    currentTaskAssigneeNames:'无',
+    currentTaskAssignees: {},
+    currentTaskInfo:{},
+    schemaId: '',
+    clickedTaskAssignees: {},
+    canClick: false
+  },
+);
+const taskNode = ref<Array<{ 'taskId': string, 'taskName': string }>>([]);
+const bpmnCanvas = ref();
+let data: {
+  bpmnViewer: any;
+  zoom: number;
+  xmlString: string;
+} = reactive({
+  bpmnViewer: null,
+  zoom: 1,
+  xmlString: '',
+});
+onMounted(() => {
+  data.xmlString = props.xml;
+  if (data.xmlString) initBpmnModeler();
+});
 
-  async function initBpmnModeler() {
-    data.bpmnViewer = await new CustomModeler({
-      container: bpmnCanvas.value,
-      additionalModules: [
-        {
-          labelEditingProvider: ['value', ''], //禁用节点编辑
-          paletteProvider: ['value', ''], //禁用/清空左侧工具栏
-          contextPadProvider: ['value', ''], //禁用图形菜单
-          bendpoints: ['value', {}], //禁用连线拖动
-          move: ['value', ''], //禁用单个图形拖动
-        },
-      ],
+async function initBpmnModeler() {
+  data.bpmnViewer = await new CustomModeler({
+    container: bpmnCanvas.value,
+    additionalModules: [
+      {
+        labelEditingProvider: ['value', ''], //禁用节点编辑
+        paletteProvider: ['value', ''], //禁用/清空左侧工具栏
+        contextPadProvider: ['value', ''], //禁用图形菜单
+        bendpoints: ['value', {}], //禁用连线拖动
+        move: ['value', ''], //禁用单个图形拖动
+      },
+    ],
+  });
+  await redrawing();
+  if (props.processId) {
+    let res = await getFinishedTask(props.processId);
+    setColors(
+      res.finishedNodes ? res.finishedNodes : [],
+      res.currentNodes ? res.currentNodes : [],
+    );
+  }
+}
+async function redrawing() {
+  try {
+    await data.bpmnViewer.importXML(data.xmlString);
+    data.bpmnViewer.get('elementRegistry').getAll().forEach(ele => {
+    if ((ele.di.get('bpmnElement').id as String).startsWith('Activity')) {
+      taskNode.value.push({ 'taskName': ele.di.get('bpmnElement').name, 'taskId': ele.di.get('bpmnElement').id })
+    }
+  });
+    let canvas = data.bpmnViewer.get('canvas');
+    canvas.zoom('fit-viewport', 'auto');
+  } catch (err) {
+    console.log('err: ', err);
+  }
+}
+
+provide('taskNode', taskNode);
+
+function setColors(finishedIds: Array<string>, currentIds: Array<string>) {
+  // finishedIds 完成的节点id
+  // currentIds 进行中节点id
+  let modeling = data.bpmnViewer.get('modeling');
+  const elementRegistry = data.bpmnViewer.get('elementRegistry');
+  if (finishedIds.length > 0) {
+    finishedIds.forEach((it) => {
+      let Event = elementRegistry.get(it);
+
+      modeling.setColor(Event, {
+        stroke: 'green',
+        fill: 'white',
+      });
     });
-    await redrawing();
-    if (props.processId) {
-      let res = await getFinishedTask(props.processId);
-      setColors(
-        res.finishedNodes ? res.finishedNodes : [],
-        res.currentNodes ? res.currentNodes : [],
-      );
-    }
   }
-  async function redrawing() {
-    try {
-      await data.bpmnViewer.importXML(data.xmlString);
-      let canvas = data.bpmnViewer.get('canvas');
-      canvas.zoom('fit-viewport', 'auto');
-    } catch (err) {
-      console.log('err: ', err);
-    }
+  if (currentIds.length > 0) {
+    currentIds.forEach((it) => {
+      let Event = elementRegistry.get(it);
+      modeling.setColor(Event, {
+        stroke: '#409eff',
+        fill: 'white',
+      });
+    });
   }
-  function setColors(finishedIds: Array<string>, currentIds: Array<string>) {
-    // finishedIds 完成的节点id
-    // currentIds 进行中节点id
-    let modeling = data.bpmnViewer.get('modeling');
-    const elementRegistry = data.bpmnViewer.get('elementRegistry');
-    if (finishedIds.length > 0) {
-      finishedIds.forEach((it) => {
-        let Event = elementRegistry.get(it);
+}
+function zoomViewport(zoomIn = true) {
+  data.zoom = data.bpmnViewer.get('canvas').zoom();
+  data.zoom += zoomIn ? 0.1 : -0.1;
+  data.bpmnViewer.get('canvas').zoom(data.zoom);
+}
 
-        modeling.setColor(Event, {
-          stroke: 'green',
-          fill: 'white',
-        });
-      });
-    }
-    if (currentIds.length > 0) {
-      currentIds.forEach((it) => {
-        let Event = elementRegistry.get(it);
-        modeling.setColor(Event, {
-          stroke: '#409eff',
-          fill: 'white',
-        });
-      });
-    }
-  }
-  function zoomViewport(zoomIn = true) {
-    data.zoom = data.bpmnViewer.get('canvas').zoom();
-    data.zoom += zoomIn ? 0.1 : -0.1;
-    data.bpmnViewer.get('canvas').zoom(data.zoom);
-  }
+function openView(val) {
+if (props.canClick) {
+  visibleFlowRecordModal.value = true;
+  props.clickedTaskAssignees.value = val;
+}
+}
 </script>
 <style lang="less">
-  @import '/@/assets/style/bpmn-js/diagram-js.css';
-  @import '/@/assets/style/bpmn-js/bpmn-font/css/bpmn.css';
-  @import '/@/assets/style/bpmn-js/bpmn-font/css/bpmn-codes.css';
-  @import '/@/assets/style/bpmn-js/bpmn-font/css/bpmn-embedded.css';
+@import '/@/assets/style/bpmn-js/diagram-js.css';
+@import '/@/assets/style/bpmn-js/bpmn-font/css/bpmn.css';
+@import '/@/assets/style/bpmn-js/bpmn-font/css/bpmn-codes.css';
+@import '/@/assets/style/bpmn-js/bpmn-font/css/bpmn-embedded.css';
 
-  .bjs-powered-by {
-    display: none !important;
-  }
+.bjs-powered-by {
+  display: none !important;
+}
 
-  .flow-record-box {
-    width: 100%;
-    height: 80vh;
-    position: relative;
-    margin-top: 50px;
-  }
+.flow-record-box {
+  width: 100%;
+  height: 80vh;
+  position: relative;
+  margin-top: 50px;
+}
 
-  /* 画布 */
-  .canvas {
-    width: 100%;
-    height: 100%;
-  }
+/* 画布 */
+.canvas {
+  width: 100%;
+  height: 100%;
+}
 
-  /* 按钮（放大 缩小 清除） */
-  .fixed-bottom {
-    position: absolute;
-    top: 110px;
-    font-size: 30px;
-    left: 40%;
-    display: flex;
-  }
+/* 按钮（放大 缩小 清除） */
+.fixed-bottom {
+  position: absolute;
+  top: 110px;
+  font-size: 30px;
+  left: 40%;
+  display: flex;
+}
 
-  .flow-record-box{
-    // 选择节点的蓝框
-    .djs-outline{
-       display: none;
-    }
-    // 编辑节点的按钮
-    .djs-overlay-container{
-       display: none;
-    }
+.flow-record-box{
+  // 选择节点的蓝框
+  .djs-outline{
+     display: none;
   }
+  // 编辑节点的按钮
+  .djs-overlay-container{
+     display: none;
+  }
+}
 </style>

src/views/workflow/task/components/flow/SelectApproveUser.vue

@@ -1,46 +1,28 @@
 <template>
-  <div v-if="data.visible">
+  <div v-if="true">
     <a-tabs>
       <a-tab-pane key="1" :tab="t('候选人')">
         <div class="list-page-box" v-if="data.approvedList.length > 0">
-          <UserCard
-            :class="data.approvedIds.includes(user.id) ? 'picked' : 'not-picked'"
-            v-for="(user, userIndex) in data.approvedList"
-            :key="userIndex"
-            :item="user"
-            @click="checkApprovedId(user)"
-            :disabled="user.canRemove ? false : true"
-          >
+          <UserCard :class="data.approvedIds.includes(user.id) ? 'picked' : 'not-picked'"
+            v-for="(user, userIndex) in data.approvedList" :key="userIndex" :item="user" @click="checkApprovedId(user)"
+            :disabled="user.canRemove ? false : true">
             <template #check>
-              <a-checkbox
-                size="small"
-                :checked="data.approvedIds.includes(user.id)"
-                :disabled="user.canRemove ? false : true"
-              />
+              <a-checkbox size="small" :checked="data.approvedIds.includes(user.id)"
+                :disabled="user.canRemove ? false : true" />
             </template>
           </UserCard>
         </div>
       </a-tab-pane>
 
       <a-tab-pane key="2" :tab="t('已选人员')">
-        <SelectUser
-          v-if="hasMoreBtn"
-          :selectedIds="data.selectedIds"
-          :disabledIds="data.disabledIds"
-          :multiple="true"
-          @change="changeList"
-        >
+        <SelectUser v-if="hasMoreBtn" :selectedIds="data.selectedIds" :disabledIds="data.disabledIds" :multiple="true"
+          @change="changeList">
           <a-button type="primary">{{ t('更多人员添加') }}</a-button>
         </SelectUser>
         <div class="list-page-box" v-if="data.selectedList.length > 0">
-          <UserCard
-            :class="data.selectedIds.includes(user.id) ? 'picked' : 'not-picked'"
-            v-for="(user, userIndex) in data.selectedList"
-            :key="userIndex"
-            :item="user"
-            @click="checked(user)"
-            :disabled="data.disabledIds.includes(user.id)"
-          >
+          <UserCard :class="data.selectedIds.includes(user.id) ? 'picked' : 'not-picked'"
+            v-for="(user, userIndex) in data.selectedList" :key="userIndex" :item="user" @click="checked(user)"
+            :disabled="data.disabledIds.includes(user.id)">
             <template #check>
               <a-checkbox size="small" :checked="data.selectedIds.includes(user.id)" />
             </template>
@@ -52,144 +34,162 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, reactive } from 'vue';
-  import { getUserMulti } from '/@/api/system/user';
-  import { getApproveUserList } from '/@/api/workflow/task';
-  import { SelectUser } from '/@/components/SelectOrganizational/index';
-  import { UserCard } from '/@/components/SelectOrganizational/index';
-  import { cloneDeep } from 'lodash-es';
-  import { useI18n } from '/@/hooks/web/useI18n';
-  const { t } = useI18n();
-  const props = defineProps({
-    schemaId: String,
-    taskId: String,
-    hasMoreBtn: {
-      type: Boolean,
-      default: true,
-    },
-  });
-  const emits = defineEmits(['update:selectIds']);
-  // const emits = defineEmits('change');
-  let data: {
-    visible: boolean;
-    approvedList: Array<{
-      [x: string]: any;
-      id: string;
-      name: string;
-    }>;
-    selectedList: Array<{ id: string; name: string }>;
-    approvedIds: Array<string>;
-    disabledIds: Array<string>;
-    selectedIds: Array<string>;
-  } = reactive({
-    visible: false,
-    approvedList: [],
-    selectedList: [],
-    approvedIds: [],
-    disabledIds: [],
-    selectedIds: [],
-  });
-  onMounted(async () => {
-    if (props.schemaId && props.taskId) {
-      try {
-        let userList = await getApproveUserList(props.schemaId, props.taskId);
-        data.approvedList = cloneDeep(userList);
-        data.approvedIds = data.approvedList.map((ele) => {
+import { onMounted, reactive } from 'vue';
+import { getUserMulti } from '/@/api/system/user';
+import { getApproveUserList } from '/@/api/workflow/task';
+import { SelectUser } from '/@/components/SelectOrganizational/index';
+import { UserCard } from '/@/components/SelectOrganizational/index';
+import { cloneDeep } from 'lodash-es';
+import { useI18n } from '/@/hooks/web/useI18n';
+const { t } = useI18n();
+const props = defineProps({
+  schemaId: String,
+  taskId: String,
+  hasMoreBtn: {
+    type: Boolean,
+    default: true,
+  },
+  selectedUser: Array
+});
+const emits = defineEmits(['update:selectIds', 'update:addUserIds', 'update:subUserIds']);
+// const emits = defineEmits('change');
+let data: {
+  visible: boolean;
+  approvedList: Array<{
+    [x: string]: any;
+    id: string;
+    name: string;
+  }>;
+  selectedList: Array<{ id: string; name: string }>;
+  approvedIds: Array<string>;
+  disabledIds: Array<string>;
+  selectedIds: Array<string>;
+  addIds: Array<string>;
+  subIds: Array<string>;
+} = reactive({
+  visible: true,
+  approvedList: [],
+  selectedList: [],
+  approvedIds: [],
+  disabledIds: [],
+  selectedIds: [],
+  addIds: [],
+  subIds: [],
+});
+onMounted(async () => {
+  if (props.schemaId && props.taskId) {
+    try {
+      let userList = await getApproveUserList(props.schemaId, props.taskId);
+      data.approvedList = cloneDeep(userList);
+      data.approvedIds = data.approvedList.map((ele) => {
+        return ele.id;
+      });
+      data.disabledIds = data.approvedList
+        .filter((ele) => {
+          return !ele.canRemove;
+        })
+        .map((ele) => {
           return ele.id;
         });
-        data.disabledIds = data.approvedList
-          .filter((ele) => {
-            return !ele.canRemove;
-          })
-          .map((ele) => {
-            return ele.id;
-          });
-
-        data.selectedList = cloneDeep(userList);
+      if (props.selectedUser?.length) {
+        props.selectedUser.forEach((ele) => {
+          ele.canRemove = ele.canRemove ? false : true;
+          data.selectedList.push(ele);
+        })
         data.selectedIds = data.selectedList.map((ele) => {
           return ele.id;
         });
-        changeData();
-        data.visible = true;
-      } catch (_error) {}
+      }
+      changeData();
+      data.visible = true;
+    } catch (_error) { }
+  }
+});
+function checkApprovedId(user) {
+  if (data.disabledIds.includes(user.id)) {
+    return false;
+  }
+  if (data.approvedIds.includes(user.id)) {
+    data.approvedIds.splice(
+      data.approvedIds.findIndex((item) => item === user.id),
+      1,
+    );
+    data.selectedIds.splice(
+      data.selectedIds.findIndex((item) => item === user.id),
+      1,
+    );
+    data.selectedList.splice(
+      data.selectedList.findIndex((item) => item.id === user.id),
+      1,
+    );
+    data.subIds.push(user.id)
+  } else {
+    data.approvedIds.push(user.id);
+    data.selectedIds.push(user.id);
+    data.selectedList.push(user);
+    data.addIds.push(user.id);
+  }
+  changeData();
+}
+function checked(user) {
+  if (data.disabledIds.includes(user.id)) {
+    return false;
+  }
+
+  if (data.selectedIds.includes(user.id)) {
+    data.selectedList.splice(
+      data.selectedList.findIndex((item) => item.id === user.id),
+      1,
+    );
+    data.selectedIds = data.selectedIds.filter((o) => {
+      return o != user.id;
+    });
+    data.subIds.push(user.id);
+  } else {
+    data.selectedList.push(user);
+    data.selectedIds.push(user.id);
+    data.addIds.push(user.id);
+  }
+
+  if (data.approvedIds.includes(user.id)) {
+    data.approvedIds.splice(
+      data.approvedIds.findIndex((item) => item === user.id),
+      1,
+    );
+  } else {
+    data.approvedIds.push(user.id);
+  }
+  changeData();
+}
+async function changeList(userIds: Array<string>) {
+  data.selectedList = await getUserMulti(userIds.join(','));
+  data.selectedIds = userIds;
+  userIds.forEach((id) => {
+    if (!data.approvedIds.includes(id)) {
+      data.approvedIds.push(id);
+      data.addIds.push(id);
     }
   });
-  function checkApprovedId(user) {
-    if (data.disabledIds.includes(user.id)) {
-      return false;
-    }
-    if (data.approvedIds.includes(user.id)) {
-      data.approvedIds.splice(
-        data.approvedIds.findIndex((item) => item === user.id),
-        1,
-      );
-      data.selectedIds.splice(
-        data.selectedIds.findIndex((item) => item === user.id),
-        1,
-      );
-      data.selectedList.splice(
-        data.selectedList.findIndex((item) => item.id === user.id),
-        1,
-      );
-    } else {
-      data.approvedIds.push(user.id);
-      data.selectedIds.push(user.id);
-      data.selectedList.push(user);
-    }
-    changeData();
-  }
-  function checked(user) {
-    if (data.disabledIds.includes(user.id)) {
-      return false;
-    }
-
-    if (data.selectedIds.includes(user.id)) {
-      data.selectedList.splice(
-        data.selectedList.findIndex((item) => item.id === user.id),
-        1,
-      );
-      data.selectedIds = data.selectedIds.filter((o) => {
-        return o != user.id;
-      });
-    } else {
-      data.selectedList.push(user);
-      data.selectedIds.push(user.id);
-    }
-
-    if (data.approvedIds.includes(user.id)) {
-      data.approvedIds.splice(
-        data.approvedIds.findIndex((item) => item === user.id),
-        1,
-      );
-    } else {
-      data.approvedIds.push(user.id);
-    }
-    changeData();
-  }
-  async function changeList(userIds: Array<string>) {
-    data.selectedList = await getUserMulti(userIds.join(','));
-    data.selectedIds = userIds;
-    userIds.forEach((id) => {
-      if (!data.approvedIds.includes(id)) {
-        data.approvedIds.push(id);
-      }
-    });
-    changeData();
-  }
-  function changeData() {
-    emits('update:selectIds', data.selectedIds);
-  }
+  changeData();
+}
+function changeData() {
+  console.log(111111, data.addIds);
+  console.log(222222, data.subIds)
+  emits('update:selectIds', data.selectedIds);
+  emits('update:addUserIds', data.addIds);
+  emits('update:subUserIds', data.subIds);
+}
 </script>
 
 <style lang="less" scoped>
-  .box {
-    height: 500px;
-  }
+.box {
+  height: 500px;
+}
 
-  .list-page-box {
-    display: flex;
-    flex-wrap: wrap;
-    overflow-y: auto;
-    padding: 10px 0;
-  }
+.list-page-box {
+  display: flex;
+  flex-wrap: wrap;
+  overflow-y: auto;
+  padding: 10px 0;
+}
 </style>