feat: 新增流程实例变量修改功能

新增了流程实例变量的查询与修改接口，并在前端页面中实现了对应的弹窗表单，
支持用户查看和修改流程变量。同时优化了变量展示界面，增加了字段类型标签
和修改限制提示。

apps/web-antd/src/api/workflow/instance/index.ts

@@ -1,5 +1,5 @@
 import type { TaskInfo } from '../task/model';
-import type { FlowInfoResponse } from './model';
+import type { FlowInfoResponse, FlowInstanceVariableResp } from './model';
 
 import type { ID, IDS, PageQuery, PageResult } from '#/api/common';
 
@@ -104,8 +104,8 @@ export function flowInfo(businessId: string) {
  * @returns Map<string,any>
  */
 export function instanceVariable(instanceId: string) {
-  return requestClient.get<Record<string, any>>(
-    `/workflow/instance/variable/${instanceId}`,
+  return requestClient.get<FlowInstanceVariableResp>(
+    `/workflow/instance/instanceVariable/${instanceId}`,
   );
 }
 
@@ -118,3 +118,22 @@ export function workflowInstanceInvalid(data: {
 }) {
   return requestClient.postWithMsg<void>('/workflow/instance/invalid', data);
 }
+
+/**
+ * 修改流程参数
+ * @param data 参数
+ * @param data.instanceId 实例ID
+ * @param data.key 参数key
+ * @param data.value 值
+ * @returns void
+ */
+export function updateFlowVariable(data: {
+  instanceId: string;
+  key: string;
+  value: any;
+}) {
+  return requestClient.putWithMsg<void>(
+    '/workflow/instance/updateVariable',
+    data,
+  );
+}

apps/web-antd/src/api/workflow/instance/model.d.ts

@@ -1,3 +1,5 @@
+export {};
+
 export interface Flow {
   id: string;
   createTime: string;
@@ -39,3 +41,14 @@ export interface FlowInfoResponse {
   instanceId: string;
   list: Flow[];
 }
+
+export interface FlowInstanceVariableResp {
+  /**
+   * json字符串 流程变量
+   */
+  variable: string;
+  variableList: {
+    key: string;
+    value: any;
+  }[];
+}

apps/web-antd/src/views/workflow/processInstance/index.vue

@@ -163,7 +163,9 @@ const [InstanceVariableModal, instanceVariableModalApi] = useVbenModal({
   connectedComponent: instanceVariableModal,
 });
 function handleVariable(row: Recordable<any>) {
-  instanceVariableModalApi.setData({ record: row.variable });
+  instanceVariableModalApi.setData({
+    instanceId: row.id,
+  });
   instanceVariableModalApi.open();
 }
 const [FlowInfoModal, flowInfoModalApi] = useVbenModal({

apps/web-antd/src/views/workflow/processInstance/instance-variable-modal.vue

@@ -1,28 +1,178 @@
-<script setup lang="ts">
+<script setup lang="tsx">
 import { ref } from 'vue';
 
 import { JsonPreview, useVbenModal } from '@vben/common-ui';
+import { cn, getPopupContainer } from '@vben/utils';
+
+import { Modal, Tag } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { instanceVariable, updateFlowVariable } from '#/api/workflow/instance';
+
+interface ModalData {
+  /**
+   * 变量 json字符串
+   */
+  record: string;
+  instanceId: string;
+}
 
 const data = ref({});
 const [BasicModal, modalApi] = useVbenModal({
   title: '流程变量',
   fullscreenButton: false,
   footer: false,
-  onOpenChange: (visible) => {
+  onOpenChange: async (visible) => {
     if (!visible) {
       data.value = {};
       return null;
     }
-    const recordString = modalApi.getData().record;
-    data.value = JSON.parse(recordString);
+    modalApi.modalLoading(true);
+
+    await loadData();
+
+    modalApi.modalLoading(false);
   },
 });
+
+const fieldTypeColors = {
+  string: 'cyan',
+  number: 'blue',
+  boolean: 'orange',
+  object: 'purple',
+};
+function getFieldTypeColor(fieldType: string) {
+  return (
+    fieldTypeColors[fieldType as keyof typeof fieldTypeColors] ?? 'default'
+  );
+}
+
+async function loadData() {
+  const { instanceId } = modalApi.getData() as ModalData;
+  const resp = await instanceVariable(instanceId);
+  const jsonObj = JSON.parse(resp.variable);
+  data.value = jsonObj;
+
+  // 表单
+  const objEntry = Object.entries(jsonObj);
+
+  interface OptionsType {
+    label: string;
+    value: string;
+    fieldType: string;
+  }
+
+  formApi.updateSchema([
+    {
+      fieldName: 'key',
+      componentProps: {
+        options: objEntry.map(
+          ([key, value]) =>
+            ({
+              label: key,
+              value: key,
+              fieldType: typeof value,
+            }) as OptionsType,
+        ),
+      },
+      renderComponentContent: () => ({
+        option: (option: OptionsType) => (
+          <div>
+            {option.label}
+            <Tag class="ml-1" color={getFieldTypeColor(option.fieldType)}>
+              {option.fieldType}
+            </Tag>
+          </div>
+        ),
+      }),
+    },
+  ]);
+}
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+      allowClear: true,
+    },
+    labelWidth: 80,
+  },
+  schema: [
+    {
+      fieldName: 'key',
+      component: 'Select',
+      label: '变量名称',
+      rules: 'selectRequired',
+      componentProps: {
+        getPopupContainer,
+      },
+    },
+    {
+      fieldName: 'value',
+      component: 'Input',
+      label: '变量值',
+      rules: 'selectRequired',
+    },
+  ],
+  resetButtonOptions: {
+    show: false,
+  },
+  submitButtonOptions: {
+    content: '修改',
+  },
+  handleSubmit: async (values) => {
+    console.log(values);
+    Modal.confirm({
+      title: '修改流程变量',
+      content: '确认修改流程变量吗？',
+      centered: true,
+      okButtonProps: {
+        danger: true,
+      },
+      onOk: async () => {
+        await handleSubmit(values);
+      },
+    });
+  },
+});
+
+async function handleSubmit(values: any) {
+  try {
+    modalApi.lock(true);
+
+    const { instanceId } = modalApi.getData() as ModalData;
+
+    // 修改
+    const requestData = {
+      instanceId,
+      key: values.key,
+      value: values.value,
+    };
+    await updateFlowVariable(requestData);
+    await formApi.resetForm();
+
+    // 查询修改后的
+    const resp = await instanceVariable(instanceId);
+    const jsonObj = JSON.parse(resp.variable);
+    data.value = jsonObj;
+  } catch (error) {
+    console.error(error);
+  } finally {
+    modalApi.lock(false);
+  }
+}
 </script>
 
 <template>
   <BasicModal>
-    <div class="min-h-[400px] overflow-y-auto">
+    <div
+      :class="cn('min-h-[400px] overflow-y-auto border', 'rounded-[4px] p-2')"
+    >
       <JsonPreview :data="data" />
     </div>
+    <div class="mt-2 text-sm font-medium text-red-500">
+      由于限制 只能变更字段为string类型
+    </div>
+    <Form class="mt-2" />
   </BasicModal>
 </template>