Skip to content

phsl / admin

Go to a project
Commit f125df7d by tuituji111
Options

【优化】BPM 界面优化：工作流程/审批中心/我的流程 +2

parent 7d29c631
Showing with 109 additions and 100 deletions
src/views/bpm/processInstance/index.vue
...@@ -19,104 +19,109 @@ ...@@ -19,104 +19,109 @@
class="!w-240px" class="!w-240px"
/> />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> <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" /> 发起流程
</el-button>
</el-form-item> </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: '130px' }">
<el-select <!-- TODO @tuituji：应该选择好分类，就触发搜索啦。 RE:done & to check-->
v-model="queryParams.category" <el-select
placeholder="请选择流程分类" v-model="queryParams.category"
clearable placeholder="请选择流程分类"
class="!w-240px" clearable
> class="!w-155px"
<el-option @change="handleQuery"
v-for="category in categoryList" >
:key="category.code" <el-option
:label="category.name" v-for="category in categoryList"
:value="category.code" :key="category.code"
/> :label="category.name"
</el-select> :value="category.code"
/>
</el-select>
</el-form-item> </el-form-item>
<!-- 高级筛选 -->
<!-- TODO @ tuituji：style 可以使用 unocss -->
<el-form-item :style="{ position: 'absolute', right: '0px' }"> <el-form-item :style="{ position: 'absolute', right: '0px' }">
<el-button v-popover="popoverRef" v-click-outside="onClickOutside" :icon="List" > <el-popover
高级筛选 :visible="showPopover"
</el-button> persistent
:width="400"
<el-popover :show-arrow="false"
ref="popoverRef" placement="bottom-end"
trigger="click" >
virtual-triggering <template #reference>
persistent <el-button @click="showPopover = !showPopover" >
:width="400" <Icon icon="ep:plus" class="mr-5px" />高级筛选
:show-arrow="false" </el-button>
placement="bottom-end"
> </template>
<el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category"> <el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">
<el-select <el-select
v-model="queryParams.category" v-model="queryParams.category"
placeholder="请选择流程发起人" placeholder="请选择流程发起人"
clearable clearable
class="!w-390px" 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-option <el-input
v-for="category in categoryList" v-model="queryParams.processDefinitionKey"
:key="category.code" placeholder="请输入流程定义的标识"
:label="category.name" clearable
:value="category.code" @keyup.enter="handleQuery"
class="!w-390px"
/> />
</el-select> </el-form-item>
</el-form-item> <el-form-item label="流程状态" class="bold-label" label-position="top" prop="status">
<el-form-item label="所属流程" class="bold-label" label-position="top" prop="processDefinitionKey"> <el-select
<el-input v-model="queryParams.status"
v-model="queryParams.processDefinitionKey" placeholder="请选择流程状态"
placeholder="请输入流程定义的标识" clearable
clearable class="!w-390px"
@keyup.enter="handleQuery" >
class="!w-390px" <el-option
/> v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
</el-form-item> :key="dict.value"
:label="dict.label"
<el-form-item label="流程状态" class="bold-label" label-position="top" prop="status"> :value="dict.value"
<el-select />
v-model="queryParams.status" </el-select>
placeholder="请选择流程状态" </el-form-item>
clearable <el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
class="!w-390px" <el-date-picker
> v-model="queryParams.createTime"
<el-option value-format="YYYY-MM-DD HH:mm:ss"
v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)" type="daterange"
:key="dict.value" start-placeholder="开始日期"
:label="dict.label" end-placeholder="结束日期"
:value="dict.value" :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
class="!w-240px"
/> />
</el-select> </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-form-item>
<el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime"> </el-popover>
<el-date-picker <!-- TODO @tuituji：这里应该有确认，和取消、清空搜索条件，三个按钮。 RE:done & to check-->
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>
</el-form-item> </el-form-item>
</el-form> </el-form>
</ContentWrap> </ContentWrap>
...@@ -131,6 +136,8 @@ ...@@ -131,6 +136,8 @@
min-width="100" min-width="100"
fixed="left" fixed="left"
/> />
<!-- TODO @芋艿：摘要 -->
<!-- TODO @tuituji：流程状态。可见需求文档里 Re:没看懂-->
<el-table-column label="流程状态" prop="status" width="120"> <el-table-column label="流程状态" prop="status" width="120">
<template #default="scope"> <template #default="scope">
<dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" /> <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
...@@ -162,7 +169,7 @@ ...@@ -162,7 +169,7 @@
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="流程编号" align="center" prop="id" min-width="320px" />--> -->
<el-table-column label="操作" align="center" fixed="right" width="180"> <el-table-column label="操作" align="center" fixed="right" width="180">
<template #default="scope"> <template #default="scope">
<el-button <el-button
...@@ -198,12 +205,12 @@ ...@@ -198,12 +205,12 @@
</ContentWrap> </ContentWrap>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Delete, Edit, Search, Share, Upload, List } from '@element-plus/icons-vue' // TODO @tuituji：List 改成 <Icon icon="ep:plus" class="mr-5px" /> 类似这种组件哈。 RE:done & to check
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dateFormatter, formatPast2 } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import { ElMessageBox } from 'element-plus' import { ElMessageBox } from 'element-plus'
import * as ProcessInstanceApi from '@/api/bpm/processInstance' 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 { ProcessInstanceVO } from '@/api/bpm/processInstance'
import * as DefinitionApi from '@/api/bpm/definition' import * as DefinitionApi from '@/api/bpm/definition'
...@@ -226,7 +233,7 @@ const queryParams = reactive({ ...@@ -226,7 +233,7 @@ const queryParams = reactive({
createTime: [] createTime: []
}) })
const queryFormRef = ref() // 搜索的表单 const queryFormRef = ref() // 搜索的表单
const categoryList = ref([]) // 流程分类列表 const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
/** 查询列表 */ /** 查询列表 */
const getList = async () => { const getList = async () => {
...@@ -240,6 +247,8 @@ const getList = async () => { ...@@ -240,6 +247,8 @@ const getList = async () => {
} }
} }
const showPopover = ref(false)
/** 搜索按钮操作 */ /** 搜索按钮操作 */
const handleQuery = () => { const handleQuery = () => {
queryParams.pageNo = 1 queryParams.pageNo = 1
...@@ -297,6 +306,15 @@ const handleCancel = async (row) => { ...@@ -297,6 +306,15 @@ const handleCancel = async (row) => {
await getList() 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(() => { onActivated(() => {
getList() getList()
...@@ -307,17 +325,9 @@ onMounted(async () => { ...@@ -307,17 +325,9 @@ onMounted(async () => {
await getList() await getList()
categoryList.value = await CategoryApi.getCategorySimpleList() categoryList.value = await CategoryApi.getCategorySimpleList()
}) })
import { ref, unref } from 'vue'
import { ClickOutside as vClickOutside } from 'element-plus'
const popoverRef = ref()
const onClickOutside = () => {
unref(popoverRef).popperRef?.delayHide?.()
}
</script> </script>
<style> <style>
.bold-label .el-form-item__label { .bold-label .el-form-item__label {
font-weight: bold; /* 将字体加粗 */ font-weight: bold; /* 将字体加粗 */
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment