From 9259c2235e31708f954a3578bde3c6a7ab9753e8 Mon Sep 17 00:00:00 2001
From: houzhongjian <houzhongyi@126.com>
Date: 星期一, 30 十二月 2024 15:51:40 +0800
Subject: [PATCH] 1、工作流相关组件更新 2、偶尔出现退出登录时路由报错的bug导致无法回到登录页面 3、全局配置文件修改，移除VITE_UPLOAD_URL配置等
---
src/views/bpm/processInstance/index.vue | 138 +++++++++++++++++++++++++++++++--------------
1 files changed, 94 insertions(+), 44 deletions(-)
diff --git a/src/views/bpm/processInstance/index.vue b/src/views/bpm/processInstance/index.vue
index 4f4c4bc..2ffb162 100644
--- a/src/views/bpm/processInstance/index.vue
+++ b/src/views/bpm/processInstance/index.vue
@@ -1,5 +1,4 @@
<template>
-
<ContentWrap>
<!-- 搜索工作栏 -->
<el-form
@@ -9,7 +8,7 @@
:inline="true"
label-width="68px"
>
- <el-form-item label="流程名称" prop="name">
+ <el-form-item label="" prop="name">
<el-input
v-model="queryParams.name"
placeholder="请输入流程名称"
@@ -18,21 +17,20 @@
class="!w-240px"
/>
</el-form-item>
- <el-form-item label="所属流程" prop="processDefinitionId">
- <el-input
- v-model="queryParams.processDefinitionId"
- placeholder="请输入流程定义的编号"
- clearable
- @keyup.enter="handleQuery"
- class="!w-240px"
- />
+
+ <el-form-item>
+ <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
</el-form-item>
- <el-form-item label="流程分类" prop="category">
+
+ <!-- TODO @ tuituji：style 可以使用 unocss -->
+ <el-form-item label="" prop="category" :style="{ position: 'absolute', right: '300px' }">
+ <!-- TODO @tuituji：应该选择好分类，就触发搜索啦。 RE:done & to check-->
<el-select
v-model="queryParams.category"
placeholder="请选择流程分类"
clearable
- class="!w-240px"
+ class="!w-155px"
+ @change="handleQuery"
>
<el-option
v-for="category in categoryList"
@@ -42,12 +40,14 @@
/>
</el-select>
</el-form-item>
- <el-form-item label="流程状态" prop="status">
+
+ <el-form-item label="" prop="status" :style="{ position: 'absolute', right: '130px' }">
<el-select
v-model="queryParams.status"
placeholder="请选择流程状态"
clearable
- class="!w-240px"
+ class="!w-155px"
+ @change="handleQuery"
>
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
@@ -57,28 +57,69 @@
/>
</el-select>
</el-form-item>
- <el-form-item label="发起时间" prop="createTime">
- <el-date-picker
- v-model="queryParams.createTime"
- value-format="YYYY-MM-DD HH:mm:ss"
- type="daterange"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
- 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>
- <el-button
- type="primary"
- plain
- v-hasPermi="['bpm:process-instance:query']"
- @click="handleCreate(undefined)"
+
+ <!-- 高级筛选 -->
+ <!-- TODO @ tuituji：style 可以使用 unocss -->
+ <el-form-item :style="{ position: 'absolute', right: '0px' }">
+ <el-popover
+ :visible="showPopover"
+ persistent
+ :width="400"
+ :show-arrow="false"
+ placement="bottom-end"
>
- <Icon icon="ep:plus" class="mr-5px" /> 发起流程
- </el-button>
+ <template #reference>
+ <el-button @click="showPopover = !showPopover">
+ <Icon icon="ep:plus" class="mr-5px" />高级筛选
+ </el-button>
+ </template>
+ <el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">
+ <el-select
+ v-model="queryParams.category"
+ placeholder="请选择流程发起人"
+ clearable
+ class="!w-390px"
+ >
+ <el-option
+ v-for="category in categoryList"
+ :key="category.code"
+ :label="category.name"
+ :value="category.code"
+ />
+ </el-select>
+ </el-form-item>
+ <el-form-item
+ label="所属流程"
+ class="bold-label"
+ label-position="top"
+ prop="processDefinitionKey"
+ >
+ <el-input
+ v-model="queryParams.processDefinitionKey"
+ placeholder="请输入流程定义的标识"
+ clearable
+ @keyup.enter="handleQuery"
+ class="!w-390px"
+ />
+ </el-form-item>
+ <el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
+ <el-date-picker
+ v-model="queryParams.createTime"
+ value-format="YYYY-MM-DD HH:mm:ss"
+ type="daterange"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期"
+ :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+ class="!w-240px"
+ />
+ </el-form-item>
+ <!-- TODO tuituiji：参考钉钉，1）按照清空、取消、确认排序。2）右对齐。3）确认增加 primary -->
+ <el-form-item class="bold-label" label-position="top">
+ <el-button @click="handleQuery"> 确认</el-button>
+ <el-button @click="showPopover = false"> 取消</el-button>
+ <el-button @click="resetQuery"> 清空</el-button>
+ </el-form-item>
+ </el-popover>
</el-form-item>
</el-form>
</ContentWrap>
@@ -94,6 +135,8 @@
min-width="100"
fixed="left"
/>
+ <!-- TODO @芋艿：摘要 -->
+ <!-- TODO tuituiji：参考钉钉；1）审批中时，展示审批任务；2）非审批中，展示状态 -->
<el-table-column label="流程状态" prop="status" width="120">
<template #default="scope">
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
@@ -113,7 +156,7 @@
width="180"
:formatter="dateFormatter"
/>
- <el-table-column align="center" label="耗时" prop="durationInMillis" width="160">
+ <!--<el-table-column align="center" label="耗时" prop="durationInMillis" width="160">
<template #default="scope">
{{ scope.row.durationInMillis > 0 ? formatPast2(scope.row.durationInMillis) : '-' }}
</template>
@@ -125,7 +168,7 @@
</el-button>
</template>
</el-table-column>
- <el-table-column label="流程编号" align="center" prop="id" min-width="320px" />
+ -->
<el-table-column label="操作" align="center" fixed="right" width="180">
<template #default="scope">
<el-button
@@ -161,11 +204,12 @@
</ContentWrap>
</template>
<script lang="ts" setup>
+// TODO @tuituji：List 改成 <Icon icon="ep:plus" class="mr-5px" /> 类似这种组件哈。 RE:done & to check
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { dateFormatter, formatPast2 } from '@/utils/formatTime'
+import { dateFormatter } from '@/utils/formatTime'
import { ElMessageBox } from 'element-plus'
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-import { CategoryApi } from '@/api/bpm/category'
+import { CategoryApi, CategoryVO } from '@/api/bpm/category'
import { ProcessInstanceVO } from '@/api/bpm/processInstance'
import * as DefinitionApi from '@/api/bpm/definition'
@@ -182,13 +226,13 @@
pageNo: 1,
pageSize: 10,
name: '',
- processDefinitionId: undefined,
+ processDefinitionKey: undefined,
category: undefined,
status: undefined,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
-const categoryList = ref([]) // 流程分类列表
+const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
/** 查询列表 */
const getList = async () => {
@@ -201,6 +245,8 @@
loading.value = false
}
}
+
+const showPopover = ref(false)
/** 搜索按钮操作 */
const handleQuery = () => {
@@ -221,7 +267,6 @@
const processDefinitionDetail = await DefinitionApi.getProcessDefinition(
row.processDefinitionId
)
- debugger
if (processDefinitionDetail.formType === 20) {
message.error('重新发起流程失败，原因：该流程使用业务表单，不支持重新发起')
return
@@ -235,7 +280,7 @@
}
/** 查看详情 */
-const handleDetail = (row) => {
+const handleDetail = (row: ProcessInstanceVO) => {
router.push({
name: 'BpmProcessInstanceDetail',
query: {
@@ -245,7 +290,7 @@
}
/** 取消按钮操作 */
-const handleCancel = async (row) => {
+const handleCancel = async (row: ProcessInstanceVO) => {
// 二次确认
const { value } = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
confirmButtonText: t('common.ok'),
@@ -271,3 +316,8 @@
categoryList.value = await CategoryApi.getCategorySimpleList()
})
</script>
+<style>
+.bold-label .el-form-item__label {
+ font-weight: bold; /* 将字体加粗 */
+}
+</style>
--
Gitblit v1.9.3