From 455c192a9af0ececc2ced078ac56683d5bb69e07 Mon Sep 17 00:00:00 2001
From: tuituji111 <tuituji111@163.com>
Date: Mon, 25 Nov 2024 22:57:39 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91BPM=20?=
=?UTF-8?q?=E7=95=8C=E9=9D=A2=E4=BC=98=E5=8C=96=EF=BC=9A=E5=B7=A5=E4=BD=9C?=
=?UTF-8?q?=E6=B5=81=E7=A8=8B/=E5=AE=A1=E6=89=B9=E4=B8=AD=E5=BF=83/?=
=?UTF-8?q?=E6=88=91=E7=9A=84=E6=B5=81=E7=A8=8B=20+3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/bpm/processInstance/index.vue | 34 +++----
src/views/bpm/task/done/index.vue | 113 ++++++++++++++++++++----
src/views/bpm/task/todo/index.vue | 94 ++++++++++++++++----
3 files changed, 188 insertions(+), 53 deletions(-)
diff --git a/src/views/bpm/processInstance/index.vue b/src/views/bpm/processInstance/index.vue
index 404bc479..49175c96 100644
--- a/src/views/bpm/processInstance/index.vue
+++ b/src/views/bpm/processInstance/index.vue
@@ -25,7 +25,7 @@
</el-form-item>
<!-- TODO @ tuituji：style 可以使用 unocss -->
- <el-form-item label="" prop="category" :style="{ position: 'absolute', right: '130px' }">
+ <el-form-item label="" prop="category" :style="{ position: 'absolute', right: '300px' }">
<!-- TODO @tuituji：应该选择好分类，就触发搜索啦。 RE:done & to check-->
<el-select
v-model="queryParams.category"
@@ -43,6 +43,23 @@
</el-select>
</el-form-item>
+ <el-form-item label="" prop="status" :style="{ position: 'absolute', right: '130px' }">
+ <el-select
+ v-model="queryParams.status"
+ placeholder="请选择流程状态"
+ clearable
+ class="!w-155px"
+ @change="handleQuery"
+ >
+ <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>
+
<!-- 高级筛选 -->
<!-- TODO @ tuituji：style 可以使用 unocss -->
<el-form-item :style="{ position: 'absolute', right: '0px' }">
@@ -88,21 +105,6 @@
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"
diff --git a/src/views/bpm/task/done/index.vue b/src/views/bpm/task/done/index.vue
index 98768212..4d9cbd58 100644
--- a/src/views/bpm/task/done/index.vue
+++ b/src/views/bpm/task/done/index.vue
@@ -16,7 +16,7 @@
class="-mb-15px"
label-width="68px"
>
- <el-form-item label="任务名称" prop="name">
+ <el-form-item label="" prop="name">
<el-input
v-model="queryParams.name"
class="!w-240px"
@@ -25,27 +25,96 @@
@keyup.enter="handleQuery"
/>
</el-form-item>
- <el-form-item label="创建时间" prop="createTime">
- <el-date-picker
- v-model="queryParams.createTime"
- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
- class="!w-240px"
- end-placeholder="结束日期"
- start-placeholder="开始日期"
- type="daterange"
- value-format="YYYY-MM-DD HH:mm:ss"
- />
- </el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon class="mr-5px" icon="ep:search" />
搜索
</el-button>
- <el-button @click="resetQuery">
- <Icon class="mr-5px" icon="ep:refresh" />
- 重置
- </el-button>
</el-form-item>
+
+ <el-form-item label="" prop="category" :style="{ position: 'absolute', right: '300px' }">
+ <el-select
+ v-model="queryParams.category"
+ placeholder="请选择流程分类"
+ clearable
+ class="!w-155px"
+ @change="handleQuery"
+ >
+ <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="" prop="status" :style="{ position: 'absolute', right: '130px' }">
+ <el-select
+ v-model="queryParams.status"
+ placeholder="请选择流程状态"
+ clearable
+ class="!w-155px"
+ @change="handleQuery"
+ >
+ <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 :style="{ position: 'absolute', right: '0px' }">
+ <el-popover
+ :visible="showPopover"
+ persistent
+ :width="400"
+ :show-arrow="false"
+ placement="bottom-end"
+ >
+ <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="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 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>
@@ -110,9 +179,10 @@
</ContentWrap>
</template>
<script lang="ts" setup>
-import { DICT_TYPE } from '@/utils/dict'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter, formatPast2 } from '@/utils/formatTime'
import * as TaskApi from '@/api/bpm/task'
+import { CategoryApi, CategoryVO } from '@/api/bpm/category'
defineOptions({ name: 'BpmTodoTask' })
@@ -125,9 +195,13 @@ const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: '',
+ category: undefined,
+ status: undefined,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
+const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
+const showPopover = ref(false)
/** 查询任务列表 */
const getList = async () => {
@@ -165,7 +239,8 @@ const handleAudit = (row: any) => {
}
/** 初始化 **/
-onMounted(() => {
- getList()
+onMounted(async () => {
+ await getList()
+ categoryList.value = await CategoryApi.getCategorySimpleList()
})
</script>
diff --git a/src/views/bpm/task/todo/index.vue b/src/views/bpm/task/todo/index.vue
index bf32ecb1..32129376 100644
--- a/src/views/bpm/task/todo/index.vue
+++ b/src/views/bpm/task/todo/index.vue
@@ -16,7 +16,7 @@
class="-mb-15px"
label-width="68px"
>
- <el-form-item label="任务名称" prop="name">
+ <el-form-item label="" prop="name">
<el-input
v-model="queryParams.name"
class="!w-240px"
@@ -25,27 +25,79 @@
@keyup.enter="handleQuery"
/>
</el-form-item>
- <el-form-item label="创建时间" prop="createTime">
- <el-date-picker
- v-model="queryParams.createTime"
- :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
- class="!w-240px"
- end-placeholder="结束日期"
- start-placeholder="开始日期"
- type="daterange"
- value-format="YYYY-MM-DD HH:mm:ss"
- />
- </el-form-item>
<el-form-item>
<el-button @click="handleQuery">
<Icon class="mr-5px" icon="ep:search" />
搜索
</el-button>
- <el-button @click="resetQuery">
- <Icon class="mr-5px" icon="ep:refresh" />
- 重置
- </el-button>
</el-form-item>
+
+ <el-form-item label="" prop="category" :style="{ position: 'absolute', right: '130px' }">
+ <el-select
+ v-model="queryParams.category"
+ placeholder="请选择流程分类"
+ clearable
+ class="!w-155px"
+ @change="handleQuery"
+ >
+ <el-option
+ v-for="category in categoryList"
+ :key="category.code"
+ :label="category.name"
+ :value="category.code"
+ />
+ </el-select>
+ </el-form-item>
+
+ <!-- 高级筛选 -->
+ <el-form-item :style="{ position: 'absolute', right: '0px' }">
+ <el-popover
+ :visible="showPopover"
+ persistent
+ :width="400"
+ :show-arrow="false"
+ placement="bottom-end"
+ >
+ <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="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 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>
@@ -95,6 +147,7 @@
<script lang="ts" setup>
import { dateFormatter } from '@/utils/formatTime'
import * as TaskApi from '@/api/bpm/task'
+import { CategoryApi, CategoryVO } from '@/api/bpm/category'
defineOptions({ name: 'BpmTodoTask' })
@@ -107,9 +160,11 @@ const queryParams = reactive({
pageNo: 1,
pageSize: 10,
name: '',
+ category: undefined,
createTime: []
})
const queryFormRef = ref() // 搜索的表单
+const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
/** 查询任务列表 */
const getList = async () => {
@@ -123,6 +178,8 @@ const getList = async () => {
}
}
+const showPopover = ref(false)
+
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
@@ -147,7 +204,8 @@ const handleAudit = (row: any) => {
}
/** 初始化 **/
-onMounted(() => {
- getList()
+onMounted(async () => {
+ await getList()
+ categoryList.value = await CategoryApi.getCategorySimpleList()
})
</script>