From ee6317e9060a4276767926dfd959ffab819a38e8 Mon Sep 17 00:00:00 2001
From: xingyu <xingyu4j@vip.qq.com>
Date: Thu, 28 Jul 2022 12:18:38 +0800
Subject: [PATCH] feat: bpm api

---
 yudao-ui-admin-vue3/src/api/bpm/form/index.ts |  48 ++++
 yudao-ui-admin-vue3/src/api/bpm/form/types.ts |   9 +
 .../src/api/bpm/leave/index.ts                |  18 ++
 .../src/api/bpm/leave/types.ts                |  10 +
 .../src/api/bpm/model/index.ts                |  36 +++
 .../src/api/bpm/model/types.ts                |  15 ++
 .../src/api/bpm/processInstance/index.ts      |  23 ++
 .../src/api/bpm/processInstance/types.ts      |  18 ++
 yudao-ui-admin-vue3/src/api/bpm/task/index.ts |  36 +++
 yudao-ui-admin-vue3/src/api/bpm/task/types.ts |   9 +
 .../src/api/bpm/taskAssignRule/index.ts       |  21 ++
 .../src/api/bpm/taskAssignRule/types.ts       |   9 +
 .../src/api/bpm/userGroup/index.ts            |  39 +++
 .../src/api/bpm/userGroup/types.ts            |   9 +
 .../src/api/system/user/index.ts              |   5 +
 .../src/views/bpm/definition/index.vue        |   7 -
 .../src/views/bpm/form/form.data.ts           |  61 +++++
 .../src/views/bpm/form/index.vue              | 170 ++++++++++++-
 .../src/views/bpm/group/group.data.ts         |  69 ++++++
 .../src/views/bpm/group/index.vue             | 230 +++++++++++++++++-
 20 files changed, 827 insertions(+), 15 deletions(-)
 create mode 100644 yudao-ui-admin-vue3/src/api/bpm/form/index.ts
 create mode 100644 yudao-ui-admin-vue3/src/api/bpm/form/types.ts
 create mode 100644 yudao-ui-admin-vue3/src/api/bpm/leave/index.ts
 create mode 100644 yudao-ui-admin-vue3/src/api/bpm/leave/types.ts
 create mode 100644 yudao-ui-admin-vue3/src/api/bpm/model/index.ts
 create mode 100644 yudao-ui-admin-vue3/src/api/bpm/model/types.ts
 create mode 100644 yudao-ui-admin-vue3/src/api/bpm/processInstance/index.ts
 create mode 100644 yudao-ui-admin-vue3/src/api/bpm/processInstance/types.ts
 create mode 100644 yudao-ui-admin-vue3/src/api/bpm/task/index.ts
 create mode 100644 yudao-ui-admin-vue3/src/api/bpm/task/types.ts
 create mode 100644 yudao-ui-admin-vue3/src/api/bpm/taskAssignRule/index.ts
 create mode 100644 yudao-ui-admin-vue3/src/api/bpm/taskAssignRule/types.ts
 create mode 100644 yudao-ui-admin-vue3/src/api/bpm/userGroup/index.ts
 create mode 100644 yudao-ui-admin-vue3/src/api/bpm/userGroup/types.ts
 delete mode 100644 yudao-ui-admin-vue3/src/views/bpm/definition/index.vue
 create mode 100644 yudao-ui-admin-vue3/src/views/bpm/form/form.data.ts
 create mode 100644 yudao-ui-admin-vue3/src/views/bpm/group/group.data.ts

diff --git a/yudao-ui-admin-vue3/src/api/bpm/form/index.ts b/yudao-ui-admin-vue3/src/api/bpm/form/index.ts
new file mode 100644
index 000000000..23f2fce0b
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/api/bpm/form/index.ts
@@ -0,0 +1,48 @@
+import { useAxios } from '@/hooks/web/useAxios'
+import { FormVO } from './types'
+const request = useAxios()
+
+// 创建工作流的表单定义
+export const createFormApi = async (data: FormVO) => {
+  return await request.post({
+    url: '/bpm/form/create',
+    data: data
+  })
+}
+
+// 更新工作流的表单定义
+export const updateFormApi = async (data: FormVO) => {
+  return await request.put({
+    url: '/bpm/form/update',
+    data: data
+  })
+}
+
+// 删除工作流的表单定义
+export const deleteFormApi = async (id: number) => {
+  return await request.delete({
+    url: '/bpm/form/delete?id=' + id
+  })
+}
+
+// 获得工作流的表单定义
+export const getFormApi = async (id: number) => {
+  return await request.get({
+    url: '/bpm/form/get?id=' + id
+  })
+}
+
+// 获得工作流的表单定义分页
+export const getFormPageApi = async (params) => {
+  return await request.get({
+    url: '/bpm/form/page',
+    params
+  })
+}
+
+// 获得动态表单的精简列表
+export const getSimpleFormsApi = async () => {
+  return await request.get({
+    url: '/bpm/form/list-all-simple'
+  })
+}
diff --git a/yudao-ui-admin-vue3/src/api/bpm/form/types.ts b/yudao-ui-admin-vue3/src/api/bpm/form/types.ts
new file mode 100644
index 000000000..2bc8b6912
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/api/bpm/form/types.ts
@@ -0,0 +1,9 @@
+export type FormVO = {
+  id: number
+  name: string
+  conf: string
+  fields: string[]
+  status: number
+  remark: string
+  createTime: string
+}
diff --git a/yudao-ui-admin-vue3/src/api/bpm/leave/index.ts b/yudao-ui-admin-vue3/src/api/bpm/leave/index.ts
new file mode 100644
index 000000000..7f266cdf4
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/api/bpm/leave/index.ts
@@ -0,0 +1,18 @@
+import { useAxios } from '@/hooks/web/useAxios'
+import { LeaveVO } from './types'
+const request = useAxios()
+
+// 创建请假申请
+export const createLeaveApi = async (data: LeaveVO) => {
+  return await request.post({ url: '/bpm/oa/leave/create', data: data })
+}
+
+// 获得请假申请
+export const getLeaveApi = async (id: number) => {
+  return await request.get({ url: '/bpm/oa/leave/get?id=' + id })
+}
+
+// 获得请假申请分页
+export const getLeavePageApi = async (params) => {
+  return await request.get({ url: '/bpm/oa/leave/page', params })
+}
diff --git a/yudao-ui-admin-vue3/src/api/bpm/leave/types.ts b/yudao-ui-admin-vue3/src/api/bpm/leave/types.ts
new file mode 100644
index 000000000..60b4bf831
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/api/bpm/leave/types.ts
@@ -0,0 +1,10 @@
+export type LeaveVO = {
+  id: number
+  result: number
+  type: number
+  reason: string
+  processInstanceId: string
+  startTime: string
+  endTime: string
+  createTime: string
+}
diff --git a/yudao-ui-admin-vue3/src/api/bpm/model/index.ts b/yudao-ui-admin-vue3/src/api/bpm/model/index.ts
new file mode 100644
index 000000000..cc577a7fc
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/api/bpm/model/index.ts
@@ -0,0 +1,36 @@
+import { useAxios } from '@/hooks/web/useAxios'
+import { ModelVO } from './types'
+const request = useAxios()
+
+export const getModelPage = async (params) => {
+  return await request.get({ url: '/bpm/model/page', params })
+}
+
+export const getModel = async (id: number) => {
+  return await request.get({ url: '/bpm/model/get?id=' + id })
+}
+
+export const updateModel = async (data: ModelVO) => {
+  return await request.put({ url: '/bpm/model/update', data: data })
+}
+
+// 任务状态修改
+export const updateModelState = async (id: number, state: string) => {
+  const data = {
+    id: id,
+    state: state
+  }
+  return await request.put({ url: '/bpm/model/update-state', data: data })
+}
+
+export const createModel = async (data: ModelVO) => {
+  return await request.post({ url: '/bpm/model/create', data: data })
+}
+
+export const deleteModel = async (id: number) => {
+  return await request.delete({ url: '/bpm/model/delete?id=' + id })
+}
+
+export const deployModel = async (id: number) => {
+  return await request.post({ url: '/bpm/model/deploy?id=' + id })
+}
diff --git a/yudao-ui-admin-vue3/src/api/bpm/model/types.ts b/yudao-ui-admin-vue3/src/api/bpm/model/types.ts
new file mode 100644
index 000000000..96266fab3
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/api/bpm/model/types.ts
@@ -0,0 +1,15 @@
+export type ModelVO = {
+  id: number
+  formName: string
+  key: string
+  name: string
+  description: string
+  category: string
+  formType: number
+  formId: number
+  formCustomCreatePath: string
+  formCustomViewPath: string
+  status: number
+  remark: string
+  createTime: string
+}
diff --git a/yudao-ui-admin-vue3/src/api/bpm/processInstance/index.ts b/yudao-ui-admin-vue3/src/api/bpm/processInstance/index.ts
new file mode 100644
index 000000000..b49dfa615
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/api/bpm/processInstance/index.ts
@@ -0,0 +1,23 @@
+import { useAxios } from '@/hooks/web/useAxios'
+import { ProcessInstanceVO } from './types'
+const request = useAxios()
+
+export const getMyProcessInstancePage = async (params) => {
+  return await request.get({ url: '/bpm/process-instance/my-page', params })
+}
+
+export const createProcessInstance = async (data: ProcessInstanceVO) => {
+  return await request.post({ url: '/bpm/process-instance/create', data: data })
+}
+
+export const cancelProcessInstance = async (id: number, reason: string) => {
+  const data = {
+    id: id,
+    reason: reason
+  }
+  return await request.delete({ url: '/bpm/process-instance/cancel', data: data })
+}
+
+export const getProcessInstance = async (id: number) => {
+  return await request.get({ url: '/bpm/process-instance/get?id=' + id })
+}
diff --git a/yudao-ui-admin-vue3/src/api/bpm/processInstance/types.ts b/yudao-ui-admin-vue3/src/api/bpm/processInstance/types.ts
new file mode 100644
index 000000000..3ab506389
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/api/bpm/processInstance/types.ts
@@ -0,0 +1,18 @@
+export type task = {
+  id: string
+  name: string
+}
+export type ProcessInstanceVO = {
+  id: number
+  name: string
+  processDefinitionId: string
+  category: string
+  result: number
+  tasks: task[]
+  fields: string[]
+  status: number
+  remark: string
+  businessKey: string
+  createTime: string
+  endTime: string
+}
diff --git a/yudao-ui-admin-vue3/src/api/bpm/task/index.ts b/yudao-ui-admin-vue3/src/api/bpm/task/index.ts
new file mode 100644
index 000000000..7967f5e37
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/api/bpm/task/index.ts
@@ -0,0 +1,36 @@
+import { useAxios } from '@/hooks/web/useAxios'
+
+const request = useAxios()
+
+export const getTodoTaskPage = async (params) => {
+  return await request.get({ url: '/bpm/task/todo-page', params })
+}
+
+export const getDoneTaskPage = async (params) => {
+  return await request.get({ url: '/bpm/task/done-page', params })
+}
+
+export const completeTask = async (data) => {
+  return await request.put({ url: '/bpm/task/complete', data: data })
+}
+
+export const approveTask = async (data) => {
+  return await request.put({ url: '/bpm/task/approve', data: data })
+}
+
+export const rejectTask = async (data) => {
+  return await request.put({ url: '/bpm/task/reject', data: data })
+}
+export const backTask = async (data) => {
+  return await request.put({ url: '/bpm/task/back', data: data })
+}
+
+export const updateTaskAssignee = async (data) => {
+  return await request.put({ url: '/bpm/task/update-assignee', data: data })
+}
+
+export const getTaskListByProcessInstanceId = async (processInstanceId) => {
+  return await request.get({
+    url: '/bpm/task/list-by-process-instance-id?processInstanceId=' + processInstanceId
+  })
+}
diff --git a/yudao-ui-admin-vue3/src/api/bpm/task/types.ts b/yudao-ui-admin-vue3/src/api/bpm/task/types.ts
new file mode 100644
index 000000000..2bc8b6912
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/api/bpm/task/types.ts
@@ -0,0 +1,9 @@
+export type FormVO = {
+  id: number
+  name: string
+  conf: string
+  fields: string[]
+  status: number
+  remark: string
+  createTime: string
+}
diff --git a/yudao-ui-admin-vue3/src/api/bpm/taskAssignRule/index.ts b/yudao-ui-admin-vue3/src/api/bpm/taskAssignRule/index.ts
new file mode 100644
index 000000000..f6105293d
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/api/bpm/taskAssignRule/index.ts
@@ -0,0 +1,21 @@
+import { useAxios } from '@/hooks/web/useAxios'
+import { TaskAssignVO } from './types'
+const request = useAxios()
+
+export const getTaskAssignRuleList = async (params) => {
+  return await request.get({ url: '/bpm/task-assign-rule/list', params })
+}
+
+export const createTaskAssignRule = async (data: TaskAssignVO) => {
+  return await request.post({
+    url: '/bpm/task-assign-rule/create',
+    data: data
+  })
+}
+
+export const updateTaskAssignRule = async (data: TaskAssignVO) => {
+  return await request.put({
+    url: '/bpm/task-assign-rule/update',
+    data: data
+  })
+}
diff --git a/yudao-ui-admin-vue3/src/api/bpm/taskAssignRule/types.ts b/yudao-ui-admin-vue3/src/api/bpm/taskAssignRule/types.ts
new file mode 100644
index 000000000..e9340e7ea
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/api/bpm/taskAssignRule/types.ts
@@ -0,0 +1,9 @@
+export type TaskAssignVO = {
+  id: number
+  modelId: string
+  processDefinitionId: string
+  taskDefinitionKey: string
+  taskDefinitionName: string
+  options: string[]
+  type: number
+}
diff --git a/yudao-ui-admin-vue3/src/api/bpm/userGroup/index.ts b/yudao-ui-admin-vue3/src/api/bpm/userGroup/index.ts
new file mode 100644
index 000000000..e7cd3f507
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/api/bpm/userGroup/index.ts
@@ -0,0 +1,39 @@
+import { useAxios } from '@/hooks/web/useAxios'
+import { UserGroupVO } from './types'
+const request = useAxios()
+
+// 创建用户组
+export const createUserGroupApi = async (data: UserGroupVO) => {
+  return await request.post({
+    url: '/bpm/user-group/create',
+    data: data
+  })
+}
+
+// 更新用户组
+export const updateUserGroupApi = async (data: UserGroupVO) => {
+  return await request.put({
+    url: '/bpm/user-group/update',
+    data: data
+  })
+}
+
+// 删除用户组
+export const deleteUserGroupApi = async (id: number) => {
+  return await request.delete({ url: '/bpm/user-group/delete?id=' + id })
+}
+
+// 获得用户组
+export const getUserGroupApi = async (id: number) => {
+  return await request.get({ url: '/bpm/user-group/get?id=' + id })
+}
+
+// 获得用户组分页
+export const getUserGroupPageApi = async (params) => {
+  return await request.get({ url: '/bpm/user-group/page', params })
+}
+
+// 获取用户组精简信息列表
+export const listSimpleUserGroupsApi = async () => {
+  return await request.get({ url: '/bpm/user-group/list-all-simple' })
+}
diff --git a/yudao-ui-admin-vue3/src/api/bpm/userGroup/types.ts b/yudao-ui-admin-vue3/src/api/bpm/userGroup/types.ts
new file mode 100644
index 000000000..d0d67ad43
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/api/bpm/userGroup/types.ts
@@ -0,0 +1,9 @@
+export type UserGroupVO = {
+  id: number
+  name: string
+  description: string
+  memberUserIds: number[]
+  status: number
+  remark: string
+  createTime: string
+}
diff --git a/yudao-ui-admin-vue3/src/api/system/user/index.ts b/yudao-ui-admin-vue3/src/api/system/user/index.ts
index f4a484eaf..5085d5c11 100644
--- a/yudao-ui-admin-vue3/src/api/system/user/index.ts
+++ b/yudao-ui-admin-vue3/src/api/system/user/index.ts
@@ -55,3 +55,8 @@ export const updateUserStatusApi = (id: number, status: number) => {
   }
   return request.put({ url: '/system/user/update-status', data: data })
 }
+
+// 获取用户精简信息列表
+export const getListSimpleUsersApi = () => {
+  return request.get({ url: '/system/user/list-all-simple' })
+}
diff --git a/yudao-ui-admin-vue3/src/views/bpm/definition/index.vue b/yudao-ui-admin-vue3/src/views/bpm/definition/index.vue
deleted file mode 100644
index b03cb75c8..000000000
--- a/yudao-ui-admin-vue3/src/views/bpm/definition/index.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div>index</div>
-</template>
-
-<style scoped></style>
diff --git a/yudao-ui-admin-vue3/src/views/bpm/form/form.data.ts b/yudao-ui-admin-vue3/src/views/bpm/form/form.data.ts
new file mode 100644
index 000000000..32de7da57
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/views/bpm/form/form.data.ts
@@ -0,0 +1,61 @@
+import { reactive } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import { required } from '@/utils/formRules'
+import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
+import { DICT_TYPE } from '@/utils/dict'
+const { t } = useI18n() // 国际化
+
+// 表单校验
+export const rules = reactive({
+  name: [required]
+})
+
+// CrudSchema
+const crudSchemas = reactive<CrudSchema[]>([
+  {
+    label: t('common.index'),
+    field: 'id',
+    type: 'index',
+    form: {
+      show: false
+    },
+    detail: {
+      show: false
+    }
+  },
+  {
+    label: '表单名',
+    field: 'name',
+    search: {
+      show: true
+    }
+  },
+  {
+    label: t('common.status'),
+    field: 'status',
+    dictType: DICT_TYPE.COMMON_STATUS
+  },
+  {
+    label: '备注',
+    field: 'remark'
+  },
+  {
+    label: t('common.createTime'),
+    field: 'createTime',
+    form: {
+      show: false
+    }
+  },
+  {
+    label: t('table.action'),
+    field: 'action',
+    width: '240px',
+    form: {
+      show: false
+    },
+    detail: {
+      show: false
+    }
+  }
+])
+export const { allSchemas } = useCrudSchemas(crudSchemas)
diff --git a/yudao-ui-admin-vue3/src/views/bpm/form/index.vue b/yudao-ui-admin-vue3/src/views/bpm/form/index.vue
index b03cb75c8..edd99c84b 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/form/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/form/index.vue
@@ -1,7 +1,169 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, unref } from 'vue'
+import dayjs from 'dayjs'
+import { ElMessage } from 'element-plus'
+import { DICT_TYPE } from '@/utils/dict'
+import { useTable } from '@/hooks/web/useTable'
+import { useI18n } from '@/hooks/web/useI18n'
+import { FormExpose } from '@/components/Form'
+import type { FormVO } from '@/api/bpm/form/types'
+import { rules, allSchemas } from './form.data'
+import * as FormApi from '@/api/bpm/form'
+const { t } = useI18n() // 国际化
+
+// ========== 列表相关 ==========
+const { register, tableObject, methods } = useTable<FormVO>({
+  getListApi: FormApi.getFormPageApi,
+  delListApi: FormApi.deleteFormApi
+})
+const { getList, setSearchParams, delList } = methods
+
+// ========== CRUD 相关 ==========
+const actionLoading = ref(false) // 遮罩层
+const actionType = ref('') // 操作按钮的类型
+const dialogVisible = ref(false) // 是否显示弹出层
+const dialogTitle = ref('edit') // 弹出层标题
+const formRef = ref<FormExpose>() // 表单 Ref
+
+// 设置标题
+const setDialogTile = (type: string) => {
+  dialogTitle.value = t('action.' + type)
+  actionType.value = type
+  dialogVisible.value = true
+}
+
+// 新增操作
+const handleCreate = () => {
+  setDialogTile('create')
+  // 重置表单
+  unref(formRef)?.getElFormRef()?.resetFields()
+}
+
+// 修改操作
+const handleUpdate = async (row: FormVO) => {
+  setDialogTile('update')
+  // 设置数据
+  const res = await FormApi.getFormApi(row.id)
+  unref(formRef)?.setValues(res)
+}
+
+// 提交按钮
+const submitForm = async () => {
+  actionLoading.value = true
+  // 提交请求
+  try {
+    const data = unref(formRef)?.formModel as FormVO
+    if (actionType.value === 'create') {
+      await FormApi.createFormApi(data)
+      ElMessage.success(t('common.createSuccess'))
+    } else {
+      await FormApi.updateFormApi(data)
+      ElMessage.success(t('common.updateSuccess'))
+    }
+    // 操作成功，重新加载列表
+    dialogVisible.value = false
+    await getList()
+  } finally {
+    actionLoading.value = false
+  }
+}
+
+// 删除操作
+const handleDelete = (row: FormVO) => {
+  delList(row.id, false)
+}
+
+// ========== 详情相关 ==========
+const detailRef = ref() // 详情 Ref
+
+// 详情操作
+const handleDetail = async (row: FormVO) => {
+  // 设置数据
+  detailRef.value = row
+  setDialogTile('detail')
+}
+
+// ========== 初始化 ==========
+getList()
+</script>
 
 <template>
-  <div>index</div>
-</template>
+  <!-- 搜索工作区 -->
+  <ContentWrap>
+    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
+  </ContentWrap>
+  <ContentWrap>
+    <!-- 操作工具栏 -->
+    <div class="mb-10px">
+      <el-button type="primary" v-hasPermi="['bpm:form:create']" @click="handleCreate">
+        <Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
+      </el-button>
+    </div>
+    <!-- 列表 -->
+    <Table
+      :columns="allSchemas.tableColumns"
+      :selection="false"
+      :data="tableObject.tableList"
+      :loading="tableObject.loading"
+      :pagination="{
+        total: tableObject.total
+      }"
+      v-model:pageSize="tableObject.pageSize"
+      v-model:currentPage="tableObject.currentPage"
+      @register="register"
+    >
+      <template #status="{ row }">
+        <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
+      </template>
+      <template #createTime="{ row }">
+        <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
+      </template>
+      <template #action="{ row }">
+        <el-button link type="primary" v-hasPermi="['bpm:form:update']" @click="handleUpdate(row)">
+          <Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }}
+        </el-button>
+        <el-button link type="primary" v-hasPermi="['bpm:form:update']" @click="handleDetail(row)">
+          <Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
+        </el-button>
+        <el-button link type="primary" v-hasPermi="['bpm:form:delete']" @click="handleDelete(row)">
+          <Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
+        </el-button>
+      </template>
+    </Table>
+  </ContentWrap>
 
-<style scoped></style>
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <!-- 对话框(添加 / 修改) -->
+    <Form
+      v-if="['create', 'update'].includes(actionType)"
+      :schema="allSchemas.formSchema"
+      :rules="rules"
+      ref="formRef"
+    />
+    <!-- 对话框(详情) -->
+    <Descriptions
+      v-if="actionType === 'detail'"
+      :schema="allSchemas.detailSchema"
+      :data="detailRef"
+    >
+      <template #status="{ row }">
+        <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
+      </template>
+      <template #createTime="{ row }">
+        <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
+      </template>
+    </Descriptions>
+    <!-- 操作按钮 -->
+    <template #footer>
+      <el-button
+        v-if="['create', 'update'].includes(actionType)"
+        type="primary"
+        :loading="actionLoading"
+        @click="submitForm"
+      >
+        {{ t('action.save') }}
+      </el-button>
+      <el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
+    </template>
+  </Dialog>
+</template>
diff --git a/yudao-ui-admin-vue3/src/views/bpm/group/group.data.ts b/yudao-ui-admin-vue3/src/views/bpm/group/group.data.ts
new file mode 100644
index 000000000..83562b156
--- /dev/null
+++ b/yudao-ui-admin-vue3/src/views/bpm/group/group.data.ts
@@ -0,0 +1,69 @@
+import { reactive } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import { required } from '@/utils/formRules'
+import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
+import { DICT_TYPE } from '@/utils/dict'
+const { t } = useI18n() // 国际化
+
+// 表单校验
+export const rules = reactive({
+  name: [required]
+})
+
+// CrudSchema
+const crudSchemas = reactive<CrudSchema[]>([
+  {
+    label: t('common.index'),
+    field: 'id',
+    type: 'index',
+    form: {
+      show: false
+    },
+    detail: {
+      show: false
+    }
+  },
+  {
+    label: '组名',
+    field: 'name',
+    search: {
+      show: true
+    }
+  },
+  {
+    label: '成员',
+    field: 'memberUserIds'
+  },
+  {
+    label: '描述',
+    field: 'description'
+  },
+  {
+    label: t('common.status'),
+    field: 'status',
+    dictType: DICT_TYPE.COMMON_STATUS
+  },
+  {
+    label: '备注',
+    field: 'remark'
+  },
+  {
+    label: t('common.createTime'),
+    field: 'createTime',
+    form: {
+      show: false
+    }
+  },
+  {
+    label: t('table.action'),
+    field: 'action',
+    width: '240px',
+    form: {
+      show: false
+    },
+    detail: {
+      show: false
+    }
+  }
+])
+export const { allSchemas } = useCrudSchemas(crudSchemas)
diff --git a/yudao-ui-admin-vue3/src/views/bpm/group/index.vue b/yudao-ui-admin-vue3/src/views/bpm/group/index.vue
index b03cb75c8..20c9c7201 100644
--- a/yudao-ui-admin-vue3/src/views/bpm/group/index.vue
+++ b/yudao-ui-admin-vue3/src/views/bpm/group/index.vue
@@ -1,7 +1,229 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, unref, onMounted } from 'vue'
+import dayjs from 'dayjs'
+import { ElMessage, ElSelect, ElOption } from 'element-plus'
+import { DICT_TYPE } from '@/utils/dict'
+import { useTable } from '@/hooks/web/useTable'
+import { useI18n } from '@/hooks/web/useI18n'
+import { FormExpose } from '@/components/Form'
+import type { UserGroupVO } from '@/api/bpm/userGroup/types'
+import { rules, allSchemas } from './group.data'
+import * as UserGroupApi from '@/api/bpm/userGroup'
+import { getListSimpleUsersApi } from '@/api/system/user'
+import { UserVO } from '@/api/system/user/types'
+
+const { t } = useI18n() // 国际化
+
+// ========== 列表相关 ==========
+const { register, tableObject, methods } = useTable<UserGroupVO>({
+  getListApi: UserGroupApi.getUserGroupPageApi,
+  delListApi: UserGroupApi.deleteUserGroupApi
+})
+const { getList, setSearchParams, delList } = methods
+
+// ========== CRUD 相关 ==========
+const actionLoading = ref(false) // 遮罩层
+const actionType = ref('') // 操作按钮的类型
+const dialogVisible = ref(false) // 是否显示弹出层
+const dialogTitle = ref('edit') // 弹出层标题
+const formRef = ref<FormExpose>() // 表单 Ref
+
+// ========== 用户选择  ==========
+const userIds = ref<number[]>([])
+const userOptions = ref<UserVO[]>([])
+const getUserOptions = async () => {
+  const res = await getListSimpleUsersApi()
+  userOptions.value.push(...res)
+}
+
+// 设置标题
+const setDialogTile = (type: string) => {
+  dialogTitle.value = t('action.' + type)
+  actionType.value = type
+  dialogVisible.value = true
+}
+
+// 新增操作
+const handleCreate = () => {
+  setDialogTile('create')
+  userIds.value = []
+  // 重置表单
+  unref(formRef)?.getElFormRef()?.resetFields()
+}
+
+// 修改操作
+const handleUpdate = async (row: UserGroupVO) => {
+  setDialogTile('update')
+  // 设置数据
+  const res = await UserGroupApi.getUserGroupApi(row.id)
+  userIds.value = res.memberUserIds
+  unref(formRef)?.setValues(res)
+}
+
+// 提交按钮
+const submitForm = async () => {
+  actionLoading.value = true
+  // 提交请求
+  try {
+    const data = unref(formRef)?.formModel as UserGroupVO
+    data.memberUserIds = userIds.value
+    if (actionType.value === 'create') {
+      await UserGroupApi.createUserGroupApi(data)
+      ElMessage.success(t('common.createSuccess'))
+    } else {
+      await UserGroupApi.updateUserGroupApi(data)
+      ElMessage.success(t('common.updateSuccess'))
+    }
+    // 操作成功，重新加载列表
+    dialogVisible.value = false
+    await getList()
+  } finally {
+    actionLoading.value = false
+  }
+}
+
+// 删除操作
+const handleDelete = (row: UserGroupVO) => {
+  delList(row.id, false)
+}
+
+// 根据用户名获取用户真实名
+const getUserNickName = (userId: number) => {
+  for (const user of userOptions.value) {
+    if (user.id === userId) return user.nickname
+  }
+  return '未知(' + userId + ')'
+}
+// ========== 详情相关 ==========
+const detailRef = ref() // 详情 Ref
+
+// 详情操作
+const handleDetail = async (row: UserGroupVO) => {
+  // 设置数据
+  detailRef.value = row
+  setDialogTile('detail')
+}
+
+// ========== 初始化 ==========
+onMounted(async () => {
+  await getList()
+  await getUserOptions()
+})
+</script>
 
 <template>
-  <div>index</div>
-</template>
+  <!-- 搜索工作区 -->
+  <ContentWrap>
+    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
+  </ContentWrap>
+  <ContentWrap>
+    <!-- 操作工具栏 -->
+    <div class="mb-10px">
+      <el-button type="primary" v-hasPermi="['bpm:user-group:create']" @click="handleCreate">
+        <Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }}
+      </el-button>
+    </div>
+    <!-- 列表 -->
+    <Table
+      :columns="allSchemas.tableColumns"
+      :selection="false"
+      :data="tableObject.tableList"
+      :loading="tableObject.loading"
+      :pagination="{
+        total: tableObject.total
+      }"
+      v-model:pageSize="tableObject.pageSize"
+      v-model:currentPage="tableObject.currentPage"
+      @register="register"
+    >
+      <template #status="{ row }">
+        <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
+      </template>
+      <template #memberUserIds="{ row }">
+        <span v-for="userId in row.memberUserIds" :key="userId">
+          {{ getUserNickName(userId) + ' ' }}
+        </span>
+      </template>
+      <template #createTime="{ row }">
+        <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
+      </template>
+      <template #action="{ row }">
+        <el-button
+          link
+          type="primary"
+          v-hasPermi="['bpm:user-group:update']"
+          @click="handleUpdate(row)"
+        >
+          <Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }}
+        </el-button>
+        <el-button
+          link
+          type="primary"
+          v-hasPermi="['bpm:user-group:update']"
+          @click="handleDetail(row)"
+        >
+          <Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
+        </el-button>
+        <el-button
+          link
+          type="primary"
+          v-hasPermi="['bpm:user-group:delete']"
+          @click="handleDelete(row)"
+        >
+          <Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }}
+        </el-button>
+      </template>
+    </Table>
+  </ContentWrap>
 
-<style scoped></style>
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <!-- 对话框(添加 / 修改) -->
+    <Form
+      v-if="['create', 'update'].includes(actionType)"
+      :schema="allSchemas.formSchema"
+      :rules="rules"
+      ref="formRef"
+    >
+      <template #memberUserIds>
+        <el-select v-model="userIds" multiple>
+          <el-option
+            v-for="item in userOptions"
+            :key="item.id"
+            :label="item.nickname"
+            :value="item.id"
+          />
+        </el-select>
+      </template>
+    </Form>
+    <!-- 对话框(详情) -->
+    <Descriptions
+      v-if="actionType === 'detail'"
+      :schema="allSchemas.detailSchema"
+      :data="detailRef"
+    >
+      <template #memberUserIds="{ row }">
+        <span v-for="userId in row.memberUserIds" :key="userId">
+          {{ getUserNickName(userId) + ' ' }}
+        </span>
+      </template>
+      <template #status="{ row }">
+        <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
+      </template>
+      <template #createTime="{ row }">
+        <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
+      </template>
+    </Descriptions>
+    <!-- 操作按钮 -->
+    <template #footer>
+      <el-button
+        v-if="['create', 'update'].includes(actionType)"
+        type="primary"
+        :loading="actionLoading"
+        @click="submitForm"
+      >
+        {{ t('action.save') }}
+      </el-button>
+      <el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
+    </template>
+  </Dialog>
+</template>