From 3e359e4550d018035406a97c190b98f83839ba7f Mon Sep 17 00:00:00 2001
From: houzhongjian <houzhongyi@126.com>
Date: 星期五, 13 十二月 2024 10:41:05 +0800
Subject: [PATCH] 1、工作流重做更新 2、@import修改为@use以应对sass升级弃用@import 3、进入系统后自动redirect到home页
---
src/views/bpm/processInstance/index.vue | 158 +++++++++++++++++++++++++++++++++++-----------------
1 files changed, 105 insertions(+), 53 deletions(-)
diff --git a/src/views/bpm/processInstance/index.vue b/src/views/bpm/processInstance/index.vue
index 3951a83..f2bb29d 100644
--- a/src/views/bpm/processInstance/index.vue
+++ b/src/views/bpm/processInstance/index.vue
@@ -9,7 +9,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 +18,19 @@
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: '130px' }">
+ <!-- TODO @tuituji：应该选择好分类，就触发搜索啦。 -->
<el-select
v-model="queryParams.category"
placeholder="请选择流程分类"
clearable
- class="!w-240px"
+ class="!w-155px"
>
<el-option
v-for="category in categoryList"
@@ -42,43 +40,79 @@
/>
</el-select>
</el-form-item>
- <el-form-item label="流程状态" prop="status">
- <el-select
- v-model="queryParams.status"
- placeholder="请选择流程状态"
- clearable
- class="!w-240px"
- >
- <el-option
- v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
- :key="dict.value"
- :label="dict.label"
- :value="dict.value"
- />
- </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)"
- >
- <Icon icon="ep:plus" class="mr-5px" /> 发起流程
+
+ <!-- 高级筛选 -->
+ <!-- TODO @ tuituji：style 可以使用 unocss -->
+ <el-form-item :style="{ position: 'absolute', right: '0px' }">
+ <el-button v-popover="popoverRef" v-click-outside="onClickOutside" :icon="List">
+ 高级筛选
</el-button>
+ <el-popover
+ ref="popoverRef"
+ trigger="click"
+ virtual-triggering
+ persistent
+ :width="400"
+ :show-arrow="false"
+ placement="bottom-end"
+ >
+ <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="status">
+ <el-select
+ v-model="queryParams.status"
+ placeholder="请选择流程状态"
+ clearable
+ class="!w-390px"
+ >
+ <el-option
+ v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
+ :key="dict.value"
+ :label="dict.label"
+ :value="dict.value"
+ />
+ </el-select>
+ </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>
+ </el-popover>
+ <!-- TODO @tuituji：这里应该有确认，和取消、清空搜索条件，三个按钮。 -->
</el-form-item>
</el-form>
</ContentWrap>
@@ -94,6 +128,8 @@
min-width="100"
fixed="left"
/>
+ <!-- TODO @芋艿：摘要 -->
+ <!-- TODO @tuituji：流程状态。可见需求文档里 -->
<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 +149,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 +161,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 +197,13 @@
</ContentWrap>
</template>
<script lang="ts" setup>
+// TODO @tuituji：List 改成 <Icon icon="ep:plus" class="mr-5px" /> 类似这种组件哈。
+import { List } from '@element-plus/icons-vue'
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 +220,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 () => {
@@ -259,6 +297,15 @@
await getList()
}
+// TODO @tuituji：这个 import 是不是没用哈？
+import { ClickOutside as vClickOutside } from 'element-plus'
+
+// TODO @tuituji：onClickAdvancedSearch。方法名叫这个，会更好一些哇？打开高级搜索。
+const popoverRef = ref()
+const onClickOutside = () => {
+ unref(popoverRef).popperRef?.delayHide?.()
+}
+
/** 激活时 **/
onActivated(() => {
getList()
@@ -270,3 +317,8 @@
categoryList.value = await CategoryApi.getCategorySimpleList()
})
</script>
+<style>
+.bold-label .el-form-item__label {
+ font-weight: bold; /* 将字体加粗 */
+}
+</style>
--
Gitblit v1.9.3