feat(projects): 流程实例添加变量修改功能

src/views/workflow/process-instance/index.vue

@@ -67,6 +67,18 @@ const baseColumns = ref<NaiveUI.TableColumn<Api.Workflow.Instance>[]>([
     align: 'center',
     width: 48
   },
+  {
+    key: 'businessCode',
+    title: '业务编码',
+    align: 'center',
+    width: 120
+  },
+  {
+    key: 'businessName',
+    title: '业务名称',
+    align: 'center',
+    width: 120
+  },
   {
     key: 'flowName',
     title: '流程名称',
@@ -109,7 +121,7 @@ const baseColumns = ref<NaiveUI.TableColumn<Api.Workflow.Instance>[]>([
     key: 'activityStatus',
     title: '状态',
     align: 'center',
-    minWidth: 100,
+    minWidth: 80,
     render(row) {
       return (
         <NTag type={row.activityStatus === 0 ? 'warning' : 'success'}>
@@ -122,7 +134,7 @@ const baseColumns = ref<NaiveUI.TableColumn<Api.Workflow.Instance>[]>([
     key: 'flowStatus',
     title: '流程状态',
     align: 'center',
-    minWidth: 100,
+    minWidth: 80,
     render(row) {
       return <DictTag value={row.flowStatus} dictCode="wf_business_status" />;
     }
@@ -242,7 +254,7 @@ const {
       : [...baseColumns.value, ...finishColumns.value, ...operateColumns.value]
 });
 
-const { checkedRowKeys, editingData, handleEdit, onBatchDeleted, onDeleted } = useTableOperate(data, getData);
+const { checkedRowKeys, onBatchDeleted, onDeleted } = useTableOperate(data, getData);
 // 监听运行状态变化
 watch(runningStatus, async () => {
   const newApiFn = runningStatus.value ? fetchGetRunningInstanceList : fetchGetFinishedInstanceList;
@@ -256,7 +268,7 @@ const categoryPattern = ref<string>();
 const categoryData = ref<Api.Common.CommonTreeRecord>([]);
 const selectedKeys = ref<string[]>([]);
 const expandedKeys = ref<CommonType.IdType[]>(['100']);
-
+const instanceRowId = ref<CommonType.IdType>();
 const selectable = computed(() => {
   return !loading.value;
 });
@@ -312,7 +324,7 @@ async function handleCancel(instanceId: CommonType.IdType) {
 }
 
 async function handleShowVariable(id: CommonType.IdType) {
-  handleEdit('id', id);
+  instanceRowId.value = id;
   showVariableDrawer();
 }
 
@@ -409,7 +421,7 @@ async function handlePreview(row: Api.Workflow.Instance) {
           class="sm:h-full"
         />
         <component :is="dynamicComponent" :visible="previewVisible" operate-type="detail" :business-id="businessId" />
-        <InstanceVariableModal v-model:visible="variableVisible" :row-data="editingData" />
+        <InstanceVariableModal v-model:visible="variableVisible" :instance-id="instanceRowId!" />
       </NCard>
     </div>
   </TableSiderLayout>

src/views/workflow/process-instance/modules/process-instance-variable-modal.vue

@@ -1,23 +1,88 @@
 <script setup lang="ts">
+import { reactive, ref, watch } from 'vue';
+import { useLoading } from '@sa/hooks';
+import { fetchGetInstanceVariable, fetchUpdateInstanceVariable } from '@/service/api/workflow/instance';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
 import JsonPreview from '@/components/custom/json-preview.vue';
+import { $t } from '@/locales';
 
 defineOptions({
   name: 'InstanceVariableModal'
 });
 
 interface Props {
-  rowData: Api.Workflow.Instance | null;
+  instanceId: CommonType.IdType;
 }
-
 const props = defineProps<Props>();
 
+const { formRef, validate, restoreValidation } = useNaiveForm();
+const { createRequiredRule } = useFormRules();
+const { loading: updateLoading, startLoading: startUpdateLoading, endLoading: endUpdateLoading } = useLoading();
+
 const visible = defineModel<boolean>('visible', {
   default: false
 });
+const variableOptions = ref<CommonType.Option<string>[]>([]);
+
+const instanceVariableInfo = ref<Api.Workflow.InstanceVariableInfo>();
+
+type Model = Api.Workflow.InstanceVariableOperateParams;
+
+const model: Model = reactive(createDefaultModel());
+
+function createDefaultModel(): Model {
+  return {
+    instanceId: props.instanceId,
+    key: null,
+    value: ''
+  };
+}
+
+type RuleKey = Extract<keyof Model, 'key' | 'value'>;
+
+const rules: Record<RuleKey, App.Global.FormRule> = {
+  key: createRequiredRule('变量KEY不能为空'),
+  value: createRequiredRule('变量值不能为空')
+};
 
 function closeDrawer() {
   visible.value = false;
 }
+
+async function getInstanceVariable() {
+  startUpdateLoading();
+  const { error, data } = await fetchGetInstanceVariable(props.instanceId);
+  if (error) return;
+  instanceVariableInfo.value = data;
+  if (data.variableList) {
+    variableOptions.value = data.variableList.map(item => ({
+      label: item.key!,
+      value: item.key!
+    }));
+  }
+  endUpdateLoading();
+}
+
+function handleUpdateModelWhenEdit() {
+  Object.assign(model, createDefaultModel());
+}
+
+async function handleSubmit() {
+  await validate();
+  // request
+  const { error } = await fetchUpdateInstanceVariable(model);
+  if (error) return;
+  window.$message?.success($t('common.updateSuccess'));
+  await getInstanceVariable();
+}
+
+watch(visible, () => {
+  if (visible.value) {
+    getInstanceVariable();
+    handleUpdateModelWhenEdit();
+    restoreValidation();
+  }
+});
 </script>
 
 <template>
@@ -30,9 +95,27 @@ function closeDrawer() {
     class="max-w-90% w-600px"
     @close="closeDrawer"
   >
-    <JsonPreview :code="props.rowData?.variable"></JsonPreview>
+    <NSpin :show="updateLoading">
+      <NSpace vertical :size="16">
+        <div class="max-h-300px overflow-auto">
+          <JsonPreview :code="instanceVariableInfo?.variable as string" />
+        </div>
+        <NDivider>变量管理</NDivider>
+        <NForm ref="formRef" :model="model" :rules="rules">
+          <NGrid responsive="screen" item-responsive>
+            <NFormItemGi span="24 s:12 m:12" label="变量KEY" path="key" class="pr-24px">
+              <NSelect v-model:value="model.key" clearable :options="variableOptions" placeholder="请选择变量KEY" />
+            </NFormItemGi>
+            <NFormItemGi span="24 s:12 m:12" label="变量值" path="value" class="pr-24px">
+              <NInput v-model:value="model.value" placeholder="请输入变量值" />
+            </NFormItemGi>
+          </NGrid>
+        </NForm>
+      </NSpace>
+    </NSpin>
     <template #footer>
       <NSpace justify="end" :size="16">
+        <NButton type="primary" @click="handleSubmit">{{ $t('common.confirm') }}</NButton>
         <NButton @click="closeDrawer">{{ $t('common.close') }}</NButton>
       </NSpace>
     </template>