feat: BPM-数据报表

Author: LesanOuO

src/api/bpm/processInstance/index.ts

@@ -60,10 +60,6 @@ export const getProcessInstanceManagerPage = async (params: any) => {
   return await request.get({ url: '/bpm/process-instance/manager-page', params })
 }
 
-export const getProcessInstanceReportPage = async (params: any) => {
-  return await request.get({ url: '/bpm/process-instance/report-page', params })
-}
-
 export const createProcessInstance = async (data) => {
   return await request.post({ url: '/bpm/process-instance/create', data: data })
 }

src/views/bpm/processInstance/report/index.vue

@@ -66,6 +66,22 @@
           class="!w-240px"
         />
       </el-form-item>
+      <el-form-item
+        v-for="(item, index) in formFields"
+        :key="index"
+        :label="item.title"
+        :prop="item.field"
+      >
+        <!-- TODO 目前只支持input类型的字符串搜索 -->
+        <el-input
+          :disabled="item.type !== 'input'"
+          v-model="queryParams.formFieldsParams[item.field]"
+          :placeholder="`请输入${item.title}`"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
@@ -98,15 +114,15 @@
         :formatter="dateFormatter"
       />
       <el-table-column
-        v-for="(item, index) in formFieldsList"
+        v-for="(item, index) in formFields"
         :key="index"
         :label="item.title"
         :prop="item.field"
         width="120"
       >
         <!-- TODO 可以根据formField的type进行展示方式的控制，现在全部以字符串 -->
         <template #default="scope">
-          {{ scope.row.variables.find((variable) => variable.key === item.field)?.value }}
+          {{ scope.row.formVariables[item.field] ?? '' }}
         </template>
       </el-table-column>
     </el-table>
@@ -124,28 +140,28 @@ import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as UserApi from '@/api/system/user'
+import * as DefinitionApi from '@/api/bpm/definition'
+import { parseFormFields } from '@/components/FormCreate/src/utils'
 
 defineOptions({ name: 'BpmProcessInstanceReport' })
 
-const router = useRouter() // 路由
-const { query } = useRoute() // 查询参数
-const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
+const { query } = useRoute()
 
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
 const list = ref([]) // 列表的数据
-const formFieldsList = ref([])
+const formFields = ref()
+const processDefinitionId = query.processDefinitionId as string
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   startUserId: undefined,
   name: '',
-  processDefinitionId: query.processDefinitionId,
   processDefinitionKey: query.processDefinitionKey,
   status: undefined,
   createTime: [],
-  endTime: []
+  endTime: [],
+  formFieldsParams: {}
 })
 const queryFormRef = ref() // 搜索的表单
 const userList = ref<any[]>([]) // 用户列表
@@ -154,16 +170,31 @@ const userList = ref<any[]>([]) // 用户列表
 const getList = async () => {
   loading.value = true
   try {
-    const data = await ProcessInstanceApi.getProcessInstanceReportPage(queryParams)
-    list.value = data.pageResult.list
-    total.value = data.pageResult.total
-    // TODO @lesan：不确定，能不能通过 processDefinitionId 获取流程定义哈，从而拿到 formFields；
-    formFieldsList.value = data.formFields
+    let queryParamsClone = { ...queryParams }
+    queryParamsClone.formFieldsParams = JSON.stringify(queryParamsClone.formFieldsParams)
+    const data = await ProcessInstanceApi.getProcessInstanceManagerPage(queryParamsClone)
+    list.value = data.list
+    total.value = data.total
   } finally {
     loading.value = false
   }
 }
 
+const getProcessDefinition = async () => {
+  const processDefinition = await DefinitionApi.getProcessDefinition(processDefinitionId)
+  formFields.value = parseFormCreateFields(processDefinition.formFields)
+}
+
+const parseFormCreateFields = (formFields?: string[]) => {
+  const result: Array<Record<string, any>> = []
+  if (formFields) {
+    formFields.forEach((fieldStr: string) => {
+      parseFormFields(JSON.parse(fieldStr), result)
+    })
+  }
+  return result
+}
+
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
@@ -173,11 +204,13 @@ const handleQuery = () => {
 /** 重置按钮操作 */
 const resetQuery = () => {
   queryFormRef.value.resetFields()
+  queryFormRef.value.formFieldsParams = {}
   handleQuery()
 }
 
 /** 初始化 **/
 onMounted(async () => {
+  await getProcessDefinition()
   await getList()
   userList.value = await UserApi.getSimpleUserList()
 })