feat:【bpm】流程表达式:100%

This commit is contained in:
YunaiV
2025-12-23 13:19:16 +08:00
parent fb42a9c2ec
commit 41b928436e
5 changed files with 620 additions and 0 deletions

View File

@@ -0,0 +1,38 @@
import type { PageParam, PageResult } from '@/http/types'
import { http } from '@/http/http'
const baseUrl = '/bpm/process-expression'
/** 流程表达式 */
export interface ProcessExpression {
id?: number
name: string // 表达式名字
status: number // 表达式状态
expression: string // 表达式
createTime?: Date
}
/** 获取流程表达式分页列表 */
export function getProcessExpressionPage(params: PageParam) {
return http.get<PageResult<ProcessExpression>>(`${baseUrl}/page`, params)
}
/** 获取流程表达式详情 */
export function getProcessExpression(id: number) {
return http.get<ProcessExpression>(`${baseUrl}/get?id=${id}`)
}
/** 创建流程表达式 */
export function createProcessExpression(data: ProcessExpression) {
return http.post<number>(`${baseUrl}/create`, data)
}
/** 更新流程表达式 */
export function updateProcessExpression(data: ProcessExpression) {
return http.put<boolean>(`${baseUrl}/update`, data)
}
/** 删除流程表达式 */
export function deleteProcessExpression(id: number) {
return http.delete<boolean>(`${baseUrl}/delete?id=${id}`)
}

View File

@@ -0,0 +1,153 @@
<template>
<!-- 搜索框入口 -->
<view @click="visible = true">
<wd-search :placeholder="placeholder" hide-cancel disabled />
</view>
<!-- 搜索弹窗 -->
<wd-popup v-model="visible" position="top" @close="visible = false">
<view class="yd-search-form-container" :style="{ paddingTop: `${getNavbarHeight()}px` }">
<view class="yd-search-form-item">
<view class="yd-search-form-label">
表达式名字
</view>
<wd-input
v-model="formData.name"
placeholder="请输入表达式名字"
clearable
/>
</view>
<view class="yd-search-form-item">
<view class="yd-search-form-label">
表达式状态
</view>
<wd-radio-group v-model="formData.status" shape="button">
<wd-radio :value="-1">
全部
</wd-radio>
<wd-radio
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:value="dict.value"
>
{{ dict.label }}
</wd-radio>
</wd-radio-group>
</view>
<view class="yd-search-form-item">
<view class="yd-search-form-label">
创建时间
</view>
<view class="yd-search-form-date-range-container">
<view class="flex-1" @click="visibleCreateTime[0] = true">
<view class="yd-search-form-date-range-picker">
{{ formatDate(formData.createTime?.[0]) || '开始日期' }}
</view>
</view>
-
<view class="flex-1" @click="visibleCreateTime[1] = true">
<view class="yd-search-form-date-range-picker">
{{ formatDate(formData.createTime?.[1]) || '结束日期' }}
</view>
</view>
</view>
<wd-datetime-picker-view v-if="visibleCreateTime[0]" v-model="tempCreateTime[0]" type="date" />
<view v-if="visibleCreateTime[0]" class="yd-search-form-date-range-actions">
<wd-button size="small" plain @click="visibleCreateTime[0] = false">
取消
</wd-button>
<wd-button size="small" type="primary" @click="handleCreateTime0Confirm">
确定
</wd-button>
</view>
<wd-datetime-picker-view v-if="visibleCreateTime[1]" v-model="tempCreateTime[1]" type="date" />
<view v-if="visibleCreateTime[1]" class="yd-search-form-date-range-actions">
<wd-button size="small" plain @click="visibleCreateTime[1] = false">
取消
</wd-button>
<wd-button size="small" type="primary" @click="handleCreateTime1Confirm">
确定
</wd-button>
</view>
</view>
<view class="yd-search-form-actions">
<wd-button class="flex-1" plain @click="handleReset">
重置
</wd-button>
<wd-button class="flex-1" type="primary" @click="handleSearch">
搜索
</wd-button>
</view>
</view>
</wd-popup>
</template>
<script lang="ts" setup>
import { computed, reactive, ref } from 'vue'
import { getDictLabel, getIntDictOptions } from '@/hooks/useDict'
import { getNavbarHeight } from '@/utils'
import { DICT_TYPE } from '@/utils/constants'
import { formatDate, formatDateRange } from '@/utils/date'
const emit = defineEmits<{
search: [data: Record<string, any>]
reset: []
}>()
const visible = ref(false)
const formData = reactive({
name: undefined as string | undefined,
status: -1, // -1 表示全部
createTime: [undefined, undefined] as [number | undefined, number | undefined],
})
// 时间范围选择器状态
const visibleCreateTime = ref<[boolean, boolean]>([false, false])
const tempCreateTime = ref<[number, number]>([Date.now(), Date.now()])
/** 搜索条件 placeholder 拼接 */
const placeholder = computed(() => {
const conditions: string[] = []
if (formData.name) {
conditions.push(`名字:${formData.name}`)
}
if (formData.status !== -1) {
conditions.push(`状态:${getDictLabel(DICT_TYPE.COMMON_STATUS, formData.status)}`)
}
if (formData.createTime?.[0] && formData.createTime?.[1]) {
conditions.push(`创建时间:${formatDate(formData.createTime[0])}~${formatDate(formData.createTime[1])}`)
}
return conditions.length > 0 ? conditions.join(' | ') : '搜索流程表达式'
})
/** 创建时间[0]确认 */
function handleCreateTime0Confirm() {
formData.createTime = [tempCreateTime.value[0], formData.createTime?.[1]]
visibleCreateTime.value[0] = false
}
/** 创建时间[1]确认 */
function handleCreateTime1Confirm() {
formData.createTime = [formData.createTime?.[0], tempCreateTime.value[1]]
visibleCreateTime.value[1] = false
}
/** 搜索 */
function handleSearch() {
visible.value = false
emit('search', {
...formData,
status: formData.status === -1 ? undefined : formData.status,
createTime: formatDateRange(formData.createTime),
})
}
/** 重置 */
function handleReset() {
formData.name = undefined
formData.status = -1
formData.createTime = [undefined, undefined]
visible.value = false
emit('reset')
}
</script>

View File

@@ -0,0 +1,129 @@
<template>
<view class="yd-page-container">
<!-- 顶部导航栏 -->
<wd-navbar
title="流程表达式详情"
left-arrow placeholder safe-area-inset-top fixed
@click-left="handleBack"
/>
<!-- 详情内容 -->
<view>
<wd-cell-group border>
<wd-cell title="编号" :value="formData?.id" />
<wd-cell title="表达式名字" :value="formData?.name" />
<wd-cell title="表达式状态">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="formData?.status" />
</wd-cell>
<wd-cell title="表达式">
<view class="break-all">{{ formData?.expression }}</view>
</wd-cell>
<wd-cell title="创建时间" :value="formatDateTime(formData?.createTime)" />
</wd-cell-group>
</view>
<!-- 底部操作按钮 -->
<view class="yd-detail-footer">
<view class="yd-detail-footer-actions">
<wd-button
v-if="hasAccessByCodes(['bpm:process-expression:update'])"
class="flex-1" type="warning" @click="handleEdit"
>
编辑
</wd-button>
<wd-button
v-if="hasAccessByCodes(['bpm:process-expression:delete'])"
class="flex-1" type="error" :loading="deleting" @click="handleDelete"
>
删除
</wd-button>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import type { ProcessExpression } from '@/api/bpm/process-expression'
import { onMounted, ref } from 'vue'
import { useToast } from 'wot-design-uni'
import { deleteProcessExpression, getProcessExpression } from '@/api/bpm/process-expression'
import { useAccess } from '@/hooks/useAccess'
import { navigateBackPlus } from '@/utils'
import { DICT_TYPE } from '@/utils/constants'
import { formatDateTime } from '@/utils/date'
const props = defineProps<{
id?: number | any
}>()
definePage({
style: {
navigationBarTitleText: '',
navigationStyle: 'custom',
},
})
const { hasAccessByCodes } = useAccess()
const toast = useToast()
const formData = ref<ProcessExpression>()
const deleting = ref(false)
/** 返回上一页 */
function handleBack() {
navigateBackPlus('/pages-bpm/process-expression/index')
}
/** 加载流程表达式详情 */
async function getDetail() {
if (!props.id) {
return
}
try {
toast.loading('加载中...')
formData.value = await getProcessExpression(props.id)
} finally {
toast.close()
}
}
/** 编辑流程表达式 */
function handleEdit() {
uni.navigateTo({
url: `/pages-bpm/process-expression/form/index?id=${props.id}`,
})
}
/** 删除流程表达式 */
function handleDelete() {
if (!props.id) {
return
}
uni.showModal({
title: '提示',
content: '确定要删除该流程表达式吗?',
success: async (res) => {
if (!res.confirm) {
return
}
deleting.value = true
try {
await deleteProcessExpression(props.id)
toast.success('删除成功')
setTimeout(() => {
handleBack()
}, 500)
} finally {
deleting.value = false
}
},
})
}
/** 初始化 */
onMounted(() => {
getDetail()
})
</script>
<style lang="scss" scoped>
</style>

View File

@@ -0,0 +1,139 @@
<template>
<view class="yd-page-container">
<!-- 顶部导航栏 -->
<wd-navbar
:title="getTitle"
left-arrow placeholder safe-area-inset-top fixed
@click-left="handleBack"
/>
<!-- 表单区域 -->
<view>
<wd-form ref="formRef" :model="formData" :rules="formRules">
<wd-cell-group border>
<wd-input
v-model="formData.name"
label="表达式名字"
label-width="180rpx"
prop="name"
clearable
placeholder="请输入表达式名字"
/>
<wd-cell title="表达式状态" title-width="180rpx" prop="status" center>
<wd-radio-group v-model="formData.status" shape="button">
<wd-radio
v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
:key="dict.value"
:value="dict.value"
>
{{ dict.label }}
</wd-radio>
</wd-radio-group>
</wd-cell>
<wd-textarea
v-model="formData.expression"
label="表达式"
label-width="180rpx"
prop="expression"
clearable
placeholder="请输入表达式"
/>
</wd-cell-group>
</wd-form>
</view>
<!-- 底部保存按钮 -->
<view class="yd-detail-footer">
<wd-button
type="primary"
block
:loading="formLoading"
@click="handleSubmit"
>
保存
</wd-button>
</view>
</view>
</template>
<script lang="ts" setup>
import type { ProcessExpression } from '@/api/bpm/process-expression'
import { computed, onMounted, ref } from 'vue'
import { useToast } from 'wot-design-uni'
import { createProcessExpression, getProcessExpression, updateProcessExpression } from '@/api/bpm/process-expression'
import { getIntDictOptions } from '@/hooks/useDict'
import { navigateBackPlus } from '@/utils'
import { CommonStatusEnum, DICT_TYPE } from '@/utils/constants'
const props = defineProps<{
id?: number | any
}>()
definePage({
style: {
navigationBarTitleText: '',
navigationStyle: 'custom',
},
})
const toast = useToast()
const getTitle = computed(() => props.id ? '编辑流程表达式' : '新增流程表达式')
const formLoading = ref(false)
const formData = ref<ProcessExpression>({
id: undefined,
name: '',
status: CommonStatusEnum.ENABLE,
expression: '',
})
const formRules = {
name: [{ required: true, message: '表达式名字不能为空' }],
status: [{ required: true, message: '表达式状态不能为空' }],
expression: [{ required: true, message: '表达式不能为空' }],
}
const formRef = ref()
/** 返回上一页 */
function handleBack() {
navigateBackPlus('/pages-bpm/process-expression/index')
}
/** 加载流程表达式详情 */
async function getDetail() {
if (!props.id) {
return
}
formData.value = await getProcessExpression(props.id)
}
/** 提交表单 */
async function handleSubmit() {
const { valid } = await formRef.value.validate()
if (!valid) {
return
}
formLoading.value = true
try {
if (props.id) {
await updateProcessExpression(formData.value)
toast.success('修改成功')
} else {
await createProcessExpression(formData.value)
toast.success('新增成功')
}
setTimeout(() => {
handleBack()
}, 500)
} finally {
formLoading.value = false
}
}
/** 初始化 */
onMounted(() => {
getDetail()
})
</script>
<style lang="scss" scoped>
</style>

View File

@@ -0,0 +1,161 @@
<template>
<view class="yd-page-container">
<!-- 顶部导航栏 -->
<wd-navbar
title="流程表达式管理"
left-arrow placeholder safe-area-inset-top fixed
@click-left="handleBack"
/>
<!-- 搜索组件 -->
<SearchForm @search="handleQuery" @reset="handleReset" />
<!-- 流程表达式列表 -->
<view class="p-24rpx">
<view
v-for="item in list"
:key="item.id"
class="mb-24rpx overflow-hidden rounded-12rpx bg-white shadow-sm"
@click="handleDetail(item)"
>
<view class="p-24rpx">
<view class="mb-16rpx flex items-center justify-between gap-16rpx">
<view class="min-w-0 flex-1 truncate text-32rpx text-[#333] font-semibold">
{{ item.name }}
</view>
<view class="shrink-0">
<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="item.status" />
</view>
</view>
<view class="mb-12rpx text-28rpx text-[#666]">
<text class="mr-8rpx text-[#999]">表达式</text>
<text class="break-all">{{ item.expression }}</text>
</view>
<view class="mb-12rpx flex items-center text-28rpx text-[#666]">
<text class="mr-8rpx text-[#999]">创建时间</text>
<text class="line-clamp-1">{{ formatDateTime(item.createTime) }}</text>
</view>
</view>
</view>
<!-- 加载更多 -->
<view v-if="loadMoreState !== 'loading' && list.length === 0" class="py-100rpx text-center">
<wd-status-tip image="content" tip="暂无流程表达式数据" />
</view>
<wd-loadmore
v-if="list.length > 0"
:state="loadMoreState"
@reload="loadMore"
/>
</view>
<!-- 新增按钮 -->
<wd-fab
v-if="hasAccessByCodes(['bpm:process-expression:create'])"
position="right-bottom"
type="primary"
:expandable="false"
@click="handleAdd"
/>
</view>
</template>
<script lang="ts" setup>
import type { ProcessExpression } from '@/api/bpm/process-expression'
import type { LoadMoreState } from '@/http/types'
import { onReachBottom } from '@dcloudio/uni-app'
import { onMounted, ref } from 'vue'
import { getProcessExpressionPage } from '@/api/bpm/process-expression'
import { useAccess } from '@/hooks/useAccess'
import { navigateBackPlus } from '@/utils'
import { DICT_TYPE } from '@/utils/constants'
import { formatDateTime } from '@/utils/date'
import SearchForm from './components/search-form.vue'
definePage({
style: {
navigationBarTitleText: '',
navigationStyle: 'custom',
},
})
const { hasAccessByCodes } = useAccess()
const total = ref(0)
const list = ref<ProcessExpression[]>([])
const loadMoreState = ref<LoadMoreState>('loading')
const queryParams = ref({
pageNo: 1,
pageSize: 10,
})
/** 返回上一页 */
function handleBack() {
navigateBackPlus()
}
/** 查询流程表达式列表 */
async function getList() {
loadMoreState.value = 'loading'
try {
const data = await getProcessExpressionPage(queryParams.value)
list.value = [...list.value, ...data.list]
total.value = data.total
loadMoreState.value = list.value.length >= total.value ? 'finished' : 'loading'
} catch {
queryParams.value.pageNo = queryParams.value.pageNo > 1 ? queryParams.value.pageNo - 1 : 1
loadMoreState.value = 'error'
}
}
/** 搜索按钮操作 */
function handleQuery(data?: Record<string, any>) {
queryParams.value = {
...data,
pageNo: 1,
pageSize: queryParams.value.pageSize,
}
list.value = []
getList()
}
/** 重置按钮操作 */
function handleReset() {
handleQuery()
}
/** 加载更多 */
function loadMore() {
if (loadMoreState.value === 'finished') {
return
}
queryParams.value.pageNo++
getList()
}
/** 新增流程表达式 */
function handleAdd() {
uni.navigateTo({
url: '/pages-bpm/process-expression/form/index',
})
}
/** 查看详情 */
function handleDetail(item: ProcessExpression) {
uni.navigateTo({
url: `/pages-bpm/process-expression/detail/index?id=${item.id}`,
})
}
/** 触底加载更多 */
onReachBottom(() => {
loadMore()
})
/** 初始化 */
onMounted(() => {
getList()
})
</script>
<style lang="scss" scoped>
</style>