From 348004745d6b8d2c0946759425251853dba16db9 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 23 Dec 2025 13:29:37 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90bpm=E3=80=91=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E7=9B=91=E5=90=AC=E5=99=A8=EF=BC=9A100%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bpm/process-listener/index.ts         |  41 ++++
 .../process-expression/detail/index.vue       |   4 +-
 .../components/search-form.vue                |  94 ++++++++
 .../process-listener/detail/index.vue         | 138 +++++++++++
 src/pages-bpm/process-listener/form/index.vue | 219 ++++++++++++++++++
 src/pages-bpm/process-listener/index.vue      | 168 ++++++++++++++
 6 files changed, 663 insertions(+), 1 deletion(-)
 create mode 100644 src/api/bpm/process-listener/index.ts
 create mode 100644 src/pages-bpm/process-listener/components/search-form.vue
 create mode 100644 src/pages-bpm/process-listener/detail/index.vue
 create mode 100644 src/pages-bpm/process-listener/form/index.vue
 create mode 100644 src/pages-bpm/process-listener/index.vue

diff --git a/src/api/bpm/process-listener/index.ts b/src/api/bpm/process-listener/index.ts
new file mode 100644
index 0000000..8a9b508
--- /dev/null
+++ b/src/api/bpm/process-listener/index.ts
@@ -0,0 +1,41 @@
+import type { PageParam, PageResult } from '@/http/types'
+import { http } from '@/http/http'
+
+const baseUrl = '/bpm/process-listener'
+
+/** 流程监听器 */
+export interface ProcessListener {
+  id?: number
+  name: string // 监听器名字
+  type: string // 监听器类型
+  status: number // 监听器状态
+  event: string // 监听事件
+  valueType: string // 监听器值类型
+  value: string // 监听器值
+  createTime?: Date
+}
+
+/** 获取流程监听器分页列表 */
+export function getProcessListenerPage(params: PageParam) {
+  return http.get<PageResult<ProcessListener>>(`${baseUrl}/page`, params)
+}
+
+/** 获取流程监听器详情 */
+export function getProcessListener(id: number) {
+  return http.get<ProcessListener>(`${baseUrl}/get?id=${id}`)
+}
+
+/** 创建流程监听器 */
+export function createProcessListener(data: ProcessListener) {
+  return http.post<number>(`${baseUrl}/create`, data)
+}
+
+/** 更新流程监听器 */
+export function updateProcessListener(data: ProcessListener) {
+  return http.put<boolean>(`${baseUrl}/update`, data)
+}
+
+/** 删除流程监听器 */
+export function deleteProcessListener(id: number) {
+  return http.delete<boolean>(`${baseUrl}/delete?id=${id}`)
+}
diff --git a/src/pages-bpm/process-expression/detail/index.vue b/src/pages-bpm/process-expression/detail/index.vue
index ee36513..4e490c8 100644
--- a/src/pages-bpm/process-expression/detail/index.vue
+++ b/src/pages-bpm/process-expression/detail/index.vue
@@ -16,7 +16,9 @@
           <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="formData?.status" />
         </wd-cell>
         <wd-cell title="表达式">
-          <view class="break-all">{{ formData?.expression }}</view>
+          <view class="break-all">
+            {{ formData?.expression }}
+          </view>
         </wd-cell>
         <wd-cell title="创建时间" :value="formatDateTime(formData?.createTime)" />
       </wd-cell-group>
diff --git a/src/pages-bpm/process-listener/components/search-form.vue b/src/pages-bpm/process-listener/components/search-form.vue
new file mode 100644
index 0000000..58b9745
--- /dev/null
+++ b/src/pages-bpm/process-listener/components/search-form.vue
@@ -0,0 +1,94 @@
+<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.type" shape="button">
+          <wd-radio value="">
+            全部
+          </wd-radio>
+          <wd-radio
+            v-for="dict in getStrDictOptions(DICT_TYPE.BPM_PROCESS_LISTENER_TYPE)"
+            :key="dict.value"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </wd-radio>
+        </wd-radio-group>
+      </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, getStrDictOptions } from '@/hooks/useDict'
+import { getNavbarHeight } from '@/utils'
+import { DICT_TYPE } from '@/utils/constants'
+
+const emit = defineEmits<{
+  search: [data: Record<string, any>]
+  reset: []
+}>()
+
+const visible = ref(false)
+const formData = reactive({
+  name: undefined as string | undefined,
+  type: '', // 空字符串表示全部
+})
+
+/** 搜索条件 placeholder 拼接 */
+const placeholder = computed(() => {
+  const conditions: string[] = []
+  if (formData.name) {
+    conditions.push(`名字:${formData.name}`)
+  }
+  if (formData.type) {
+    conditions.push(`类型:${getDictLabel(DICT_TYPE.BPM_PROCESS_LISTENER_TYPE, formData.type)}`)
+  }
+  return conditions.length > 0 ? conditions.join(' | ') : '搜索流程监听器'
+})
+
+/** 搜索 */
+function handleSearch() {
+  visible.value = false
+  emit('search', {
+    ...formData,
+    type: formData.type || undefined,
+  })
+}
+
+/** 重置 */
+function handleReset() {
+  formData.name = undefined
+  formData.type = ''
+  visible.value = false
+  emit('reset')
+}
+</script>
diff --git a/src/pages-bpm/process-listener/detail/index.vue b/src/pages-bpm/process-listener/detail/index.vue
new file mode 100644
index 0000000..9893fef
--- /dev/null
+++ b/src/pages-bpm/process-listener/detail/index.vue
@@ -0,0 +1,138 @@
+<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.BPM_PROCESS_LISTENER_TYPE" :value="formData?.type" />
+        </wd-cell>
+        <wd-cell title="监听器状态">
+          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="formData?.status" />
+        </wd-cell>
+        <wd-cell title="监听事件" :value="formData?.event" />
+        <wd-cell title="值类型">
+          <dict-tag :type="DICT_TYPE.BPM_PROCESS_LISTENER_VALUE_TYPE" :value="formData?.valueType" />
+        </wd-cell>
+        <wd-cell title="值">
+          <view class="break-all">
+            {{ formData?.value }}
+          </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-listener:update'])"
+          class="flex-1" type="warning" @click="handleEdit"
+        >
+          编辑
+        </wd-button>
+        <wd-button
+          v-if="hasAccessByCodes(['bpm:process-listener:delete'])"
+          class="flex-1" type="error" :loading="deleting" @click="handleDelete"
+        >
+          删除
+        </wd-button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import type { ProcessListener } from '@/api/bpm/process-listener'
+import { onMounted, ref } from 'vue'
+import { useToast } from 'wot-design-uni'
+import { deleteProcessListener, getProcessListener } from '@/api/bpm/process-listener'
+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<ProcessListener>()
+const deleting = ref(false)
+
+/** 返回上一页 */
+function handleBack() {
+  navigateBackPlus('/pages-bpm/process-listener/index')
+}
+
+/** 加载流程监听器详情 */
+async function getDetail() {
+  if (!props.id) {
+    return
+  }
+  try {
+    toast.loading('加载中...')
+    formData.value = await getProcessListener(props.id)
+  } finally {
+    toast.close()
+  }
+}
+
+/** 编辑流程监听器 */
+function handleEdit() {
+  uni.navigateTo({
+    url: `/pages-bpm/process-listener/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 deleteProcessListener(props.id)
+        toast.success('删除成功')
+        setTimeout(() => {
+          handleBack()
+        }, 500)
+      } finally {
+        deleting.value = false
+      }
+    },
+  })
+}
+
+/** 初始化 */
+onMounted(() => {
+  getDetail()
+})
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/pages-bpm/process-listener/form/index.vue b/src/pages-bpm/process-listener/form/index.vue
new file mode 100644
index 0000000..6a0aefa
--- /dev/null
+++ b/src/pages-bpm/process-listener/form/index.vue
@@ -0,0 +1,219 @@
+<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-cell title="监听器类型" title-width="180rpx" prop="type" center>
+            <wd-radio-group v-model="formData.type" shape="button" @change="handleTypeChange">
+              <wd-radio
+                v-for="dict in getStrDictOptions(DICT_TYPE.BPM_PROCESS_LISTENER_TYPE)"
+                :key="dict.value"
+                :value="dict.value"
+              >
+                {{ dict.label }}
+              </wd-radio>
+            </wd-radio-group>
+          </wd-cell>
+          <wd-cell title="监听事件" title-width="180rpx" prop="event" center>
+            <wd-radio-group v-model="formData.event" shape="button">
+              <wd-radio
+                v-for="option in eventOptions"
+                :key="option.value"
+                :value="option.value"
+              >
+                {{ option.label }}
+              </wd-radio>
+            </wd-radio-group>
+          </wd-cell>
+          <wd-cell title="值类型" title-width="180rpx" prop="valueType" center>
+            <wd-radio-group v-model="formData.valueType" shape="button" @change="handleValueTypeChange">
+              <wd-radio
+                v-for="dict in getStrDictOptions(DICT_TYPE.BPM_PROCESS_LISTENER_VALUE_TYPE)"
+                :key="dict.value"
+                :value="dict.value"
+              >
+                {{ dict.label }}
+              </wd-radio>
+            </wd-radio-group>
+          </wd-cell>
+          <wd-input
+            v-model="formData.value"
+            :label="valueLabel"
+            label-width="180rpx"
+            prop="value"
+            clearable
+            :placeholder="valuePlaceholder"
+          />
+        </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 { ProcessListener } from '@/api/bpm/process-listener'
+import { computed, onMounted, ref } from 'vue'
+import { useToast } from 'wot-design-uni'
+import { createProcessListener, getProcessListener, updateProcessListener } from '@/api/bpm/process-listener'
+import { getIntDictOptions, getStrDictOptions } 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 EVENT_EXECUTION_OPTIONS = [
+  { label: '开始', value: 'start' },
+  { label: '结束', value: 'end' },
+]
+
+/** 任务监听器事件选项 */
+const EVENT_OPTIONS = [
+  { label: '创建', value: 'create' },
+  { label: '指派', value: 'assignment' },
+  { label: '完成', value: 'complete' },
+  { label: '删除', value: 'delete' },
+  { label: '更新', value: 'update' },
+  { label: '超时', value: 'timeout' },
+]
+
+const toast = useToast()
+const getTitle = computed(() => props.id ? '编辑流程监听器' : '新增流程监听器')
+const formLoading = ref(false)
+const formData = ref<ProcessListener>({
+  id: undefined,
+  name: '',
+  type: '',
+  status: CommonStatusEnum.ENABLE,
+  event: '',
+  valueType: '',
+  value: '',
+})
+const formRules = {
+  name: [{ required: true, message: '监听器名字不能为空' }],
+  type: [{ required: true, message: '监听器类型不能为空' }],
+  status: [{ required: true, message: '监听器状态不能为空' }],
+  event: [{ required: true, message: '监听事件不能为空' }],
+  valueType: [{ required: true, message: '值类型不能为空' }],
+  value: [{ required: true, message: '值不能为空' }],
+}
+const formRef = ref()
+
+/** 根据类型获取事件选项 */
+const eventOptions = computed(() => {
+  return formData.value.type === 'execution' ? EVENT_EXECUTION_OPTIONS : EVENT_OPTIONS
+})
+
+/** 值标签 */
+const valueLabel = computed(() => {
+  return formData.value.valueType === 'class' ? '类路径' : '表达式'
+})
+
+/** 值占位符 */
+const valuePlaceholder = computed(() => {
+  return formData.value.valueType === 'class' ? '请输入类路径' : '请输入表达式'
+})
+
+/** 返回上一页 */
+function handleBack() {
+  navigateBackPlus('/pages-bpm/process-listener/index')
+}
+
+/** 类型变更时清空事件 */
+function handleTypeChange() {
+  formData.value.event = ''
+}
+
+/** 值类型变更时清空值 */
+function handleValueTypeChange() {
+  formData.value.value = ''
+}
+
+/** 加载流程监听器详情 */
+async function getDetail() {
+  if (!props.id) {
+    return
+  }
+  formData.value = await getProcessListener(props.id)
+}
+
+/** 提交表单 */
+async function handleSubmit() {
+  const { valid } = await formRef.value.validate()
+  if (!valid) {
+    return
+  }
+
+  formLoading.value = true
+  try {
+    if (props.id) {
+      await updateProcessListener(formData.value)
+      toast.success('修改成功')
+    } else {
+      await createProcessListener(formData.value)
+      toast.success('新增成功')
+    }
+    setTimeout(() => {
+      handleBack()
+    }, 500)
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 初始化 */
+onMounted(() => {
+  getDetail()
+})
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/pages-bpm/process-listener/index.vue b/src/pages-bpm/process-listener/index.vue
new file mode 100644
index 0000000..92a6e74
--- /dev/null
+++ b/src/pages-bpm/process-listener/index.vue
@@ -0,0 +1,168 @@
+<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 flex items-center text-28rpx text-[#666]">
+            <text class="mr-8rpx shrink-0 text-[#999]">监听器类型：</text>
+            <dict-tag :type="DICT_TYPE.BPM_PROCESS_LISTENER_TYPE" :value="item.type" />
+          </view>
+          <view class="mb-12rpx flex items-center text-28rpx text-[#666]">
+            <text class="mr-8rpx text-[#999]">监听事件：</text>
+            <text>{{ item.event }}</text>
+          </view>
+          <view class="mb-12rpx flex items-center text-28rpx text-[#666]">
+            <text class="mr-8rpx text-[#999]">值类型：</text>
+            <dict-tag :type="DICT_TYPE.BPM_PROCESS_LISTENER_VALUE_TYPE" :value="item.valueType" />
+          </view>
+          <view class="mb-12rpx text-28rpx text-[#666]">
+            <text class="mr-8rpx text-[#999]">值：</text>
+            <text class="break-all">{{ item.value }}</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-listener:create'])"
+      position="right-bottom"
+      type="primary"
+      :expandable="false"
+      @click="handleAdd"
+    />
+  </view>
+</template>
+
+<script lang="ts" setup>
+import type { ProcessListener } from '@/api/bpm/process-listener'
+import type { LoadMoreState } from '@/http/types'
+import { onReachBottom } from '@dcloudio/uni-app'
+import { onMounted, ref } from 'vue'
+import { getProcessListenerPage } from '@/api/bpm/process-listener'
+import { useAccess } from '@/hooks/useAccess'
+import { navigateBackPlus } from '@/utils'
+import { DICT_TYPE } from '@/utils/constants'
+import SearchForm from './components/search-form.vue'
+
+definePage({
+  style: {
+    navigationBarTitleText: '',
+    navigationStyle: 'custom',
+  },
+})
+
+const { hasAccessByCodes } = useAccess()
+const total = ref(0)
+const list = ref<ProcessListener[]>([])
+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 getProcessListenerPage(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-listener/form/index',
+  })
+}
+
+/** 查看详情 */
+function handleDetail(item: ProcessListener) {
+  uni.navigateTo({
+    url: `/pages-bpm/process-listener/detail/index?id=${item.id}`,
+  })
+}
+
+/** 触底加载更多 */
+onReachBottom(() => {
+  loadMore()
+})
+
+/** 初始化 */
+onMounted(() => {
+  getList()
+})
+</script>
+
+<style lang="scss" scoped>
+</style>