update 调整流程变量显示

src/api/workflow/processInstance/types.ts

@@ -10,7 +10,7 @@ export interface ProcessInstanceQuery extends PageQuery {
 export interface ProcessInstanceVO extends BaseEntity {
   id: string;
   definitionId: string;
-  flowNmae: string;
+  flowName: string;
   flowCode: string;
   version: string;
   businessId: string;

src/views/workflow/processInstance/index.vue

@@ -101,9 +101,12 @@
                   </el-col>
                 </el-row>
                 <el-row :gutter="10" class="mb8">
-                  <el-col :span="tab === 'running'?1.5:24">
+                  <el-col :span="1.5">
                     <el-button type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button>
                   </el-col>
+                  <el-col :span="1.5">
+                    <el-button type="primary" size="small" icon="Document" @click="handleInstanceVariable(scope.row)">变量</el-button>
+                  </el-col>
                 </el-row>
               </template>
             </el-table-column>
@@ -135,6 +138,22 @@
         <el-table-column align="center" prop="deploymentTime" label="部署时间" :show-overflow-tooltip="true"></el-table-column>
       </el-table>
     </el-dialog>
+    <!-- 流程变量开始 -->
+    <el-dialog v-model="variableVisible" draggable title="流程变量" width="60%" :close-on-click-modal="false">
+      <el-card v-loading="variableLoading" class="box-card">
+        <template #header>
+          <div class="clearfix">
+            <span
+              >流程定义名称：<el-tag>{{ processDefinitionName }}</el-tag></span
+            >
+          </div>
+        </template>
+        <div class="max-h-500px overflow-y-auto">
+          <VueJsonPretty :data="formatToJsonObject(variables)" />
+        </div>
+      </el-card>
+    </el-dialog>
+    <!-- 流程变量结束 -->
   </div>
 </template>
 
@@ -144,13 +163,16 @@ import {
   getPageByFinish,
   deleteRunAndHisInstance,
   deleteFinishAndHisInstance,
-  deleteRunInstance
+  deleteRunInstance,
+  getInstanceVariable
 } from '@/api/workflow/processInstance';
 import { listCategory } from '@/api/workflow/category';
 import { CategoryVO } from '@/api/workflow/category/types';
 import { ProcessInstanceQuery, ProcessInstanceVO } from '@/api/workflow/processInstance/types';
 import workflowCommon from '@/api/workflow/workflowCommon';
 import { RouterJumpVo } from '@/api/workflow/workflowCommon/types';
+import VueJsonPretty from 'vue-json-pretty';
+import 'vue-json-pretty/lib/styles.css';
 //审批记录组件
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
@@ -171,8 +193,13 @@ const multiple = ref(true);
 const showSearch = ref(true);
 // 总条数
 const total = ref(0);
-// 流程定义id
-const processDefinitionId = ref<string>('');
+
+// 流程变量是否显示
+const variableVisible = ref(false);
+const variableLoading = ref(true);
+const variables = ref<string>('')
+//流程定义名称
+const processDefinitionName = ref();
 // 模型定义表格数据
 const processInstanceList = ref<ProcessInstanceVO[]>([]);
 const processDefinitionHistoryList = ref<Array<any>>([]);
@@ -327,6 +354,27 @@ const handleView = (row) => {
   workflowCommon.routerJump(routerJumpVo, proxy);
 };
 
+//查询流程变量
+const handleInstanceVariable = async (row: ProcessInstanceVO) => {
+  variableLoading.value = true;
+  variableVisible.value = true;
+  processDefinitionName.value = row.flowName;
+  let data = await getInstanceVariable(row.id);
+  variables.value = data.data.variable;
+  variableLoading.value = false;
+};
+
+/**
+ * json转为对象
+ * @param data 原始数据
+ */
+ function formatToJsonObject(data: string) {
+  try {
+    return JSON.parse(data);
+  } catch (error) {
+    return data;
+  }
+}
 onMounted(() => {
   getProcessInstanceRunningList();
   getTreeselect();

src/views/workflow/task/allTaskWaiting.vue

@@ -80,18 +80,15 @@
           <template #default="scope">
             <el-row :gutter="10" class="mb8">
               <el-col :span="1.5">
-                <el-button link type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button>
-              </el-col>
-              <el-col v-if="tab === 'waiting'" :span="1.5">
-                <el-button link type="primary" size="small" icon="Document" @click="handleInstanceVariable(scope.row)">流程变量</el-button>
+                <el-button type="primary" size="small" icon="View" @click="handleView(scope.row)">查看</el-button>
               </el-col>
             </el-row>
             <el-row v-if="scope.row.multiInstance" :gutter="10" class="mb8">
               <el-col :span="1.5">
-                <el-button link type="primary" size="small" icon="Remove" @click="deleteMultiInstanceUser(scope.row)">减签</el-button>
+                <el-button type="primary" size="small" icon="Remove" @click="deleteMultiInstanceUser(scope.row)">减签</el-button>
               </el-col>
               <el-col :span="1.5">
-                <el-button link type="primary" size="small" icon="CirclePlus" @click="addMultiInstanceUser(scope.row)">加签</el-button>
+                <el-button type="primary" size="small" icon="CirclePlus" @click="addMultiInstanceUser(scope.row)">加签</el-button>
               </el-col>
             </el-row>
           </template>
@@ -109,32 +106,11 @@
     <multiInstanceUser ref="multiInstanceUserRef" :title="title" @submit-callback="handleQuery" />
     <!-- 选人组件 -->
     <UserSelect ref="userSelectRef" :multiple="false" @confirm-call-back="submitCallback"></UserSelect>
-    <!-- 流程变量开始 -->
-    <el-dialog v-model="variableVisible" draggable title="流程变量" width="60%" :close-on-click-modal="false">
-      <el-card v-loading="variableLoading" class="box-card">
-        <template #header>
-          <div class="clearfix">
-            <span
-              >流程定义名称：<el-tag>{{ processDefinitionName }}</el-tag></span
-            >
-          </div>
-        </template>
-        <div v-for="(v, index) in variableList" :key="index">
-          <el-form v-if="v.key !== '_FLOWABLE_SKIP_EXPRESSION_ENABLED'" :label-position="'right'" label-width="150px">
-            <el-form-item :label="v.key + '：'">
-              {{ v.value }}
-            </el-form-item>
-          </el-form>
-        </div>
-      </el-card>
-    </el-dialog>
-    <!-- 流程变量结束 -->
   </div>
 </template>
 
 <script lang="ts" setup>
 import { getPageByAllTaskWait, getPageByAllTaskFinish, updateAssignee } from '@/api/workflow/task';
-import { getInstanceVariable } from '@/api/workflow/processInstance';
 import MultiInstanceUser from '@/components/Process/multiInstanceUser.vue';
 import UserSelect from '@/components/UserSelect';
 import { TaskQuery, FlowTaskVO, VariableVo } from '@/api/workflow/task/types';
@@ -165,16 +141,6 @@ const total = ref(0);
 // 模型定义表格数据
 const taskList = ref([]);
 const title = ref('');
-// 流程变量是否显示
-const variableVisible = ref(false);
-const variableLoading = ref(true);
-// 流程变量
-const variableList = ref<VariableVo>({
-  key: '',
-  value: ''
-});
-//流程定义名称
-const processDefinitionName = ref();
 // 查询参数
 const queryParams = ref<TaskQuery>({
   pageNum: 1,
@@ -262,15 +228,6 @@ const submitCallback = async (data) => {
     proxy?.$modal.msgWarning('请选择用户！');
   }
 };
-//查询流程变量
-const handleInstanceVariable = async (row: FlowTaskVO) => {
-  variableLoading.value = true;
-  variableVisible.value = true;
-  processDefinitionName.value = row.flowName;
-  let data = await getInstanceVariable(row.instanceId);
-  variableList.value = data.data.variableList;
-  variableLoading.value = false;
-};
 /** 查看按钮操作 */
 const handleView = (row) => {
   const routerJumpVo = reactive<RouterJumpVo>({