From 4c960b558c1b0b86ef7899a314b22d6a66b56c09 Mon Sep 17 00:00:00 2001
From: dyd <15993027711@163.com>
Date: Thu, 26 Jun 2025 09:41:22 +0800
Subject: [PATCH] =?UTF-8?q?#ICBR4R=20=E7=AE=A1=E7=90=86=E5=91=98=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E5=8F=98=E9=87=8F=E4=BF=AE=E6=94=B9=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/editProVar/procVarManage/index.ts     | 116 ++++++
 .../procVarManage/model/procVarManageModel.ts |  79 ++++
 .../procVarManage/components/Form.vue         | 235 ++++++++++++
 .../procVarManage/components/VarModal.vue     | 101 ++++++
 .../procVarManage/components/config.ts        | 225 ++++++++++++
 .../components/procVarManageModal.vue         | 109 ++++++
 .../components/workflowPermission.ts          |  47 +++
 src/views/editProVar/procVarManage/index.vue  | 339 ++++++++++++++++++
 .../task/components/flow/FlowPanel.vue        |  10 +-
 9 files changed, 1258 insertions(+), 3 deletions(-)
 create mode 100644 src/api/editProVar/procVarManage/index.ts
 create mode 100644 src/api/editProVar/procVarManage/model/procVarManageModel.ts
 create mode 100644 src/views/editProVar/procVarManage/components/Form.vue
 create mode 100644 src/views/editProVar/procVarManage/components/VarModal.vue
 create mode 100644 src/views/editProVar/procVarManage/components/config.ts
 create mode 100644 src/views/editProVar/procVarManage/components/procVarManageModal.vue
 create mode 100644 src/views/editProVar/procVarManage/components/workflowPermission.ts
 create mode 100644 src/views/editProVar/procVarManage/index.vue

diff --git a/src/api/editProVar/procVarManage/index.ts b/src/api/editProVar/procVarManage/index.ts
new file mode 100644
index 0000000..3996d33
--- /dev/null
+++ b/src/api/editProVar/procVarManage/index.ts
@@ -0,0 +1,116 @@
+import {ActRuVariablePageModel, ActRuVariablePageParams, ActRuVariablePageResult} from './model/ProcVarManageModel';
+import {defHttp} from '/@/utils/http/axios';
+import {ErrorMessageMode} from '/#/axios';
+
+enum Api {
+    Page = '/editProVar/procVarManage/page',
+    List = '/editProVar/procVarManage/list',
+    Info = '/editProVar/procVarManage/info',
+    ActRuVariable = '/editProVar/procVarManage',
+    GetSerializedVal = '/editProVar/procVarManage/getSerializedVal',
+    UpdateFormVariable = '/editProVar/procVarManage/updateFormVariable',
+}
+
+/**
+ * @description: 查询ActRuVariable分页列表
+ */
+export async function getActRuVariablePage(params: ActRuVariablePageParams, mode: ErrorMessageMode = 'modal') {
+    return defHttp.get<ActRuVariablePageResult>(
+        {
+            url: Api.Page,
+            params,
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}
+
+/**
+ * @description: 获取ActRuVariable信息
+ */
+export async function getActRuVariable(params: String, mode: ErrorMessageMode = 'modal') {
+    return defHttp.get<ActRuVariablePageModel>(
+        {
+            url: Api.Info,
+            params,
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}
+
+/**
+ * @description: 新增ActRuVariable
+ */
+export async function addActRuVariable(actRuVariable: Recordable, mode: ErrorMessageMode = 'modal') {
+    return defHttp.post<boolean>(
+        {
+            url: Api.ActRuVariable,
+            params: actRuVariable,
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}
+
+/**
+ * @description: 更新ActRuVariable
+ */
+export async function updateActRuVariable(actRuVariable: Recordable, mode: ErrorMessageMode = 'modal') {
+    return defHttp.put<boolean>(
+        {
+            url: Api.ActRuVariable,
+            params: actRuVariable,
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}
+
+/**
+ * @description: 删除ActRuVariable（批量删除）
+ */
+export async function deleteActRuVariable(ids: string[], mode: ErrorMessageMode = 'modal') {
+    return defHttp.delete<boolean>(
+        {
+            url: Api.ActRuVariable,
+            data: ids,
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}
+
+/**
+ * 获取表单变量
+ */
+export async function getSerializedVal(params, mode: ErrorMessageMode = 'modal') {
+    return defHttp.get({
+            url: Api.GetSerializedVal,
+            params
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}
+
+/**
+ * 修改表单变量
+ */
+export async function updateFormVariable(params, mode: ErrorMessageMode = 'modal') {
+    return defHttp.post(
+        {
+            url: Api.UpdateFormVariable,
+            params: params,
+        },
+        {
+            errorMessageMode: mode,
+        },
+    );
+}
diff --git a/src/api/editProVar/procVarManage/model/procVarManageModel.ts b/src/api/editProVar/procVarManage/model/procVarManageModel.ts
new file mode 100644
index 0000000..026f8f0
--- /dev/null
+++ b/src/api/editProVar/procVarManage/model/procVarManageModel.ts
@@ -0,0 +1,79 @@
+import {BasicPageParams, BasicFetchResult} from '/@/api/model/baseModel';
+
+/**
+ * @description: ActRuVariable分页参数 模型
+ */
+export interface ActRuVariablePageParams extends BasicPageParams {
+    name: string;
+
+    type: string;
+
+    value: string;
+
+    varScope: string;
+}
+
+/**
+ * @description: ActRuVariable分页返回值模型
+ */
+export interface ActRuVariablePageModel {
+    id: string;
+
+    name: string;
+
+    type: string;
+
+    value: string;
+
+    varScope: string;
+}
+
+/**
+ * @description: ActRuVariable表类型
+ */
+export interface ActRuVariableModel {
+    id: string;
+
+    rev: number;
+
+    type: string;
+
+    value: string;
+
+    executionId: string;
+
+    procInstId: string;
+
+    procDefId: string;
+
+    caseExecutionId: string;
+
+    caseInstId: string;
+
+    taskId: string;
+
+    batchId: string;
+
+    bytearrayId: string;
+
+    doubleVal: number;
+
+    longVal: number;
+
+    text: string;
+
+    text2: string;
+
+    varScope: string;
+
+    sequenceCounter: number;
+
+    isConcurrentLocal: string;
+
+    tenantId: string;
+}
+
+/**
+ * @description: ActRuVariable分页返回值结构
+ */
+export type ActRuVariablePageResult = BasicFetchResult<ActRuVariablePageModel>;
diff --git a/src/views/editProVar/procVarManage/components/Form.vue b/src/views/editProVar/procVarManage/components/Form.vue
new file mode 100644
index 0000000..14efd5f
--- /dev/null
+++ b/src/views/editProVar/procVarManage/components/Form.vue
@@ -0,0 +1,235 @@
+<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 {addActRuVariable, getActRuVariable, updateActRuVariable, deleteActRuVariable} from '/@/api/editProVar/procVarManage';
+    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';
+    import {useRouter} from "vue-router";
+
+    const router = useRouter();
+    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 currentRoute = router.currentRoute.value;
+            const queryParams = currentRoute.query;
+            let reqParam = {
+                name: queryParams.name,
+                type: queryParams.type,
+                value: queryParams.value,
+                processInstId: queryParams.processId,
+            };
+            const record = await getActRuVariable(reqParam);
+            if (skipUpdate) {
+                return record;
+            }
+            reqParam.value = record;
+            setFieldsValue(reqParam);
+            state.formModel = reqParam;
+            await getFormDataEvent(formEventConfigs, state.formModel, systemFormRef.value, formProps.schemas); //表单事件：获取表单数据
+            return reqParam;
+        } 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 {
+            let res = systemFormRef.value.getFieldsValue();
+            debugger
+            let saveVal = await updateActRuVariable(res);
+            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 addActRuVariable(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;
+            if(formModels[RowKey]) {
+                setFormDataFromId(formModels[RowKey], false)
+            } else {
+                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() {
+                deleteActRuVariable(ids).then((_) => {
+                    notification.success({
+                        message: 'Tip',
+                        description: t('删除成功！'),
+                    });
+                });
+            },
+            onCancel() {
+            },
+        });
+    }
+
+    defineExpose({
+        setFieldsValue,
+        resetFields,
+        validate,
+        add,
+        update,
+        setFormDataFromId,
+        setDisabledForm,
+        setMenuPermission,
+        setWorkFlowForm,
+        getRowKey,
+        handleDelete
+    });
+</script>
diff --git a/src/views/editProVar/procVarManage/components/VarModal.vue b/src/views/editProVar/procVarManage/components/VarModal.vue
new file mode 100644
index 0000000..4cd9494
--- /dev/null
+++ b/src/views/editProVar/procVarManage/components/VarModal.vue
@@ -0,0 +1,101 @@
+<template>
+    <a-modal
+        :mask-closable="false"
+        :title="title"
+        :visible="visible"
+        :width="600"
+        class="geg"
+        style="top: 120px"
+        @cancel="handleCancel"
+    >
+        <div class="dialog-wrap">
+            <a-tabs v-model:activeKey="activeKey">
+                <a-tab-pane key="1" tab="Serialized">
+                    <a-textarea v-model:value="formData.value" :rows="16" @change="handleChange"/>
+                </a-tab-pane>
+            </a-tabs>
+            <a-alert
+                v-if="showAlert"
+                style="margin-top: 12px"
+                message="警告：您确定要更改此对象的值吗？以不兼容的方式更改变量可能会导致严重的运行时问题。"
+                banner
+            />
+        </div>
+        <template #footer>
+            <a-button :loading="false" type="default" @click="handleCancel">取消</a-button>
+            <a-button
+                :loading="false"
+                type="danger"
+                @click="handleSubmit"
+                :disabled="disabledSubmit"
+            >
+                修改
+            </a-button>
+        </template>
+    </a-modal>
+</template>
+
+<script lang="ts" setup>
+    import {ref, watch} from 'vue';
+
+    const props = defineProps({
+        variableId: String,
+        visible: Boolean,
+        title: {type: String, default: '编辑表单变量'},
+        initialData: {type: Object, default: () => ({value: ''})},
+    });
+
+    const emit = defineEmits(['update:visible', 'submit', 'cancel']);
+
+    const formData = ref({
+        processId: props.processId,
+        value: props.initialData.value,
+    });
+
+    const oldData = ref({
+        processId: props.initialData.processId,
+        value: props.initialData.value,
+    });
+
+    const activeKey = ref('1');
+    const showAlert = ref(false);
+    const disabledSubmit = ref(true);
+
+    watch(
+        () => props.initialData,
+        (newData) => {
+            formData.value = {...newData};
+            oldData.value = {...newData};
+            disabledSubmit.value = true;
+            showAlert.value = false;
+            activeKey.value = '1'; //默认打开第一个tab
+        },
+        {deep: true},
+    );
+
+    const handleChange = () => {
+        const isModified =
+            formData.value.processId !== oldData.value.processId ||
+            formData.value.value !== oldData.value.value;
+        disabledSubmit.value = !isModified;
+        showAlert.value = isModified;
+    };
+
+    // 提交数据
+    const handleSubmit = () => {
+        emit('submit', formData.value);
+        //emit('update:visible', false);
+    };
+
+    // 关闭弹窗
+    const handleCancel = () => {
+        emit('cancel');
+        emit('update:visible', false);
+    };
+</script>
+
+<style lang="less" scoped>
+    .dialog-wrap {
+        padding: 12px;
+    }
+</style>
diff --git a/src/views/editProVar/procVarManage/components/config.ts b/src/views/editProVar/procVarManage/components/config.ts
new file mode 100644
index 0000000..cbd0c04
--- /dev/null
+++ b/src/views/editProVar/procVarManage/components/config.ts
@@ -0,0 +1,225 @@
+import {FormProps, FormSchema} from '/@/components/Form';
+import {BasicColumn} from '/@/components/Table';
+
+export const searchFormSchema: FormSchema[] = [
+    {
+        field: 'name',
+        label: '名称',
+        component: 'Input',
+    },
+    {
+        field: 'type',
+        label: '类型',
+        component: 'Input',
+    },
+    {
+        field: 'value',
+        label: '值',
+        component: 'Input',
+    },
+];
+
+export const columns: BasicColumn[] = [
+    {
+        dataIndex: 'name',
+        title: '名称',
+        componentType: 'input',
+        align: 'left',
+        sorter: false,
+    },
+    {
+        dataIndex: 'type',
+        title: '类型',
+        componentType: 'input',
+        align: 'left',
+        sorter: false,
+    },
+    {
+        dataIndex: 'value',
+        title: '值',
+        componentType: 'input',
+        align: 'left',
+        sorter: false
+    },
+];
+
+//表单事件
+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: 'f3a754603cf54ea98d8a05eee8fbb1ea',
+            field: 'name',
+            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: 'fb6f3446078f47468407d8514614f5f0',
+            field: 'type',
+            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: 'd1d2c89ec84b4f039be9debce7bdaa88',
+            field: 'value',
+            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: [],
+};
diff --git a/src/views/editProVar/procVarManage/components/procVarManageModal.vue b/src/views/editProVar/procVarManage/components/procVarManageModal.vue
new file mode 100644
index 0000000..8e7eb47
--- /dev/null
+++ b/src/views/editProVar/procVarManage/components/procVarManageModal.vue
@@ -0,0 +1,109 @@
+<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>
diff --git a/src/views/editProVar/procVarManage/components/workflowPermission.ts b/src/views/editProVar/procVarManage/components/workflowPermission.ts
new file mode 100644
index 0000000..dc72571
--- /dev/null
+++ b/src/views/editProVar/procVarManage/components/workflowPermission.ts
@@ -0,0 +1,47 @@
+export const permissionList = [
+    {
+        required: true,
+        view: true,
+        edit: true,
+        disabled: false,
+        isSaveTable: false,
+        tableName: '',
+        fieldName: '名称',
+        fieldId: 'name',
+        isSubTable: false,
+        showChildren: true,
+        type: 'input',
+        key: 'f3a754603cf54ea98d8a05eee8fbb1ea',
+        children: [],
+    },
+    {
+        required: true,
+        view: true,
+        edit: true,
+        disabled: false,
+        isSaveTable: false,
+        tableName: '',
+        fieldName: '类型',
+        fieldId: 'type',
+        isSubTable: false,
+        showChildren: true,
+        type: 'input',
+        key: 'fb6f3446078f47468407d8514614f5f0',
+        children: [],
+    },
+    {
+        required: true,
+        view: true,
+        edit: true,
+        disabled: false,
+        isSaveTable: false,
+        tableName: '',
+        fieldName: '值',
+        fieldId: 'value',
+        isSubTable: false,
+        showChildren: true,
+        type: 'input',
+        key: 'd1d2c89ec84b4f039be9debce7bdaa88',
+        children: [],
+    },
+];
diff --git a/src/views/editProVar/procVarManage/index.vue b/src/views/editProVar/procVarManage/index.vue
new file mode 100644
index 0000000..affc5da
--- /dev/null
+++ b/src/views/editProVar/procVarManage/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 === 'value'">
+                    <div v-if="record.type.indexOf('Object') === 0">
+                        <div :style="{color: '#155cb5',cursor: 'pointer'}" @click="handleOpenModalPage(record)">{{record.value}}</div>
+                    </div>
+                </template>
+                <template v-if="column.dataIndex === 'action'">
+                        <TableAction :actions="getActions(record)"/>
+                    <div v-if="record.type.indexOf('Object') !== 0">
+                    </div>
+                </template>
+            </template>
+        </BasicTable>
+        <ProcVarManageModal @register="registerModal" @success="handleSuccess"/>
+
+        <VarModal
+            v-model:visible="isOpenVarModal"
+            :initialData="modalFormData"
+            @submit="handleVarModalSubmit"
+            @cancel="handleVarModalCancel"
+        />
+
+    </PageWrapper>
+</template>
+
+<script lang="ts" setup>
+    import {ref, computed, onMounted, onUnmounted, createVNode, watch,} from 'vue';
+    import {Modal} from 'ant-design-vue';
+    import {ExclamationCircleOutlined} from '@ant-design/icons-vue';
+    import {BasicTable, useTable, TableAction, ActionItem} from '/@/components/Table';
+    import {getActRuVariablePage, deleteActRuVariable, getSerializedVal, updateFormVariable} from '/@/api/editProVar/procVarManage';
+    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 {getActRuVariable} from '/@/api/editProVar/procVarManage';
+    import {useModal} from '/@/components/Modal';
+    import ProcVarManageModal from './components/ProcVarManageModal.vue';
+    import {searchFormSchema, columns} from './components/config';
+    import Icon from '/@/components/Icon/index';
+    import useEventBus from '/@/hooks/event/useEventBus';
+    import VarModal from './components/VarModal.vue';
+
+    const props = defineProps({
+        processId: String,
+        xml: String,
+        schemaId: String,
+    });
+    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 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}*/
+        ]
+        //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, 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: getActRuVariablePage,
+        rowKey: 'id',
+        columns: filterColumns,
+        formConfig: {
+            rowProps: {
+                gutter: 16,
+            },
+            schemas: searchFormSchema,
+            fieldMapToTime: [],
+            showResetButton: false,
+        },
+        beforeFetch: (params) => {
+            return {...params, FormId: formIdComputedRef.value, PK: 'id', procInstId: 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,
+        },
+    });
+
+    const isOpenVarModal = ref(false);
+    const modalFormData = ref({
+        processInstId: '',
+        key: '',
+        value: '',
+    });
+
+    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/procVarManage/' + record.id + '/viewForm',
+                query: {
+                    formPath: 'editProVar/procVarManage',
+                    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/procVarManage/0/createForm',
+                query: {
+                    formPath: 'editProVar/procVarManage',
+                    formName: formName
+                }
+            });
+        }
+    }
+
+    async function handleEdit(record: Recordable) {
+        router.push({
+            path: '/form/procVarManage/' + props.id + '/updateForm',
+            query: {
+                formPath: 'editProVar/procVarManage',
+                formName: formName,
+                name: record.name,
+                type: record.type,
+                value: record.value,
+                processId: props.processId,
+            },
+        });
+    }
+
+    async function handleOpenModalPage(record) {
+        let reqParam = {
+            processInstId: props.processId,
+            name: record.name
+        }
+        const res = await getSerializedVal(reqParam);
+        if (res) {
+            modalFormData.value = {
+                processId: props.processId,
+                key: record.name,
+                value: res,
+            };
+            isOpenVarModal.value = true;
+        }
+    }
+
+    // 处理弹窗提交
+    const handleVarModalSubmit = async (data) => {
+        let res = await updateFormVariable(data)
+        if (res) {
+            isOpenVarModal.value = false;
+            notification.success({message: '更新成功'});
+            await reload();
+        }
+    };
+
+    // 处理弹窗取消
+    const handleVarModalCancel = () => {
+        console.log('用户取消编辑');
+    };
+
+    function handleDelete(record: Recordable) {
+        deleteList([record.id]);
+    }
+
+    function deleteList(ids) {
+        Modal.confirm({
+            title: '提示信息',
+            icon: createVNode(ExclamationCircleOutlined),
+            content: '是否确认删除？',
+            okText: '确认',
+            cancelText: '取消',
+            onOk() {
+                deleteActRuVariable(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;
+    }
+
+    .dialog-wrap {
+        padding: 12px 12px 12px 12px;
+    }
+</style>
diff --git a/src/views/workflow/task/components/flow/FlowPanel.vue b/src/views/workflow/task/components/flow/FlowPanel.vue
index 051ccdb..59f0ee0 100644
--- a/src/views/workflow/task/components/flow/FlowPanel.vue
+++ b/src/views/workflow/task/components/flow/FlowPanel.vue
@@ -18,9 +18,12 @@
     <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">
+    <a-tab-pane :key="7" :tab="t('流程变量')">
+      <ProcVarPage :processId="processId" :schemaId="schemaId" :xml="xml" />
+    </a-tab-pane>
+    <a-tab-pane :key="8 + index" v-for="(item, index) in predecessorTasks" :tab="item.schemaName">
       <LookRelationTask
-        v-if="activeKey === 7 + index"
+        v-if="activeKey === 8 + index"
         :taskId="item.taskId"
         :processId="item.processId"
         position="left"
@@ -38,7 +41,8 @@
   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'
+  import AuditRecord from '/@/views/auditOpt/auditRecord/index.vue';
+  import ProcVarPage from '/@/views/editProVar/procVarManage/index.vue';
   const { t } = useI18n();
   let props = withDefaults(
     defineProps<{