init

src/views/bpm/definition/index.vue

@@ -0,0 +1,165 @@
+<template>
+  <ContentWrap>
+    <avue-crud
+      ref="crudRef"
+      v-model:page="tablePage"
+      :table-loading="loading"
+      :data="tableData"
+      :option="tableOption"
+      :permission="permission"
+      @refresh-change="getTableData"
+      @size-change="sizeChange"
+      @current-change="currentChange"
+    >
+      <template #menu="{ row }">
+        <el-button
+          type="primary"
+          text
+          @click="handleAssignRule(row)"
+          v-hasPermi="['bpm:task-assign-rule:query']"
+        >
+          分配规则
+        </el-button>
+      </template>
+      <template #name="{ row }">
+        <el-button type="primary" link @click="handleBpmnDetail(row)">
+          <span>{{ row.name }}</span>
+        </el-button>
+      </template>
+      <template #category="{ row }">
+        <dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="row.category || ''" />
+      </template>
+      <template #version="{ row }">
+        <el-tag>v{{ row.version }}</el-tag>
+      </template>
+      <template #suspensionState="{ row }">
+        <el-tag type="success" v-if="row.suspensionState === 1">激活</el-tag>
+        <el-tag type="warning" v-if="row.suspensionState === 2">挂起</el-tag>
+      </template>
+    </avue-crud>
+  </ContentWrap>
+
+  <!-- 弹窗：流程模型图的预览 -->
+  <Dialog title="流程图" v-model="bpmnDetailVisible" width="800">
+    <MyProcessViewer
+      key="designer"
+      v-model="bpmnXML"
+      :value="bpmnXML || ''"
+      v-bind="bpmnControlForm"
+      :prefix="bpmnControlForm.prefix"
+    />
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
+import * as DefinitionApi from '@/api/bpm/definition'
+
+defineOptions({ name: 'ModelVersions' })
+
+const { getCurrPermi } = useCrudPermi()
+const { query } = useRoute() // 查询参数
+const { push } = useRouter() // 路由
+
+const loading = ref(true) // 列表的加载中
+const tableOption = reactive({
+  editBtn: false,
+  delBtn: false,
+  addBtn: false,
+  menuWidth: 140,
+  align: 'center',
+  headerAlign: 'center',
+  calcHeight: 20,
+  column: [
+    { prop: 'id', label: '定义编号', width: 370 },
+    { prop: 'name', label: '流程名称' },
+    {
+      prop: 'category',
+      label: '定义分类',
+      width: 100,
+      type: 'select',
+      dicData: getIntDictOptions(DICT_TYPE.BPM_MODEL_CATEGORY)
+    },
+    { prop: 'version', label: '流程版本', width: 100, bind: 'processDefinition.version' },
+    { prop: 'suspensionState', label: '状态', width: 80 },
+    {
+      prop: 'deploymentTime',
+      label: '部署时间',
+      display: false,
+      type: 'datetime',
+      width: 180,
+      formatter: (row, val, value, column) => {
+        return dateFormatter(row, column, val)
+      }
+    },
+    {
+      prop: 'description',
+      label: '定义描述',
+      type: 'textarea'
+    }
+  ]
+}) //表格配置
+const tableData = ref([])
+const tablePage = ref({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0
+})
+
+const permission = getCurrPermi(['bpm:model'])
+const crudRef = ref()
+
+/** 流程图的详情按钮操作 */
+const bpmnDetailVisible = ref(false)
+const bpmnXML = ref(null)
+const bpmnControlForm = ref({
+  prefix: 'flowable'
+})
+
+/** 点击任务分配按钮 */
+const handleAssignRule = (row) => {
+  push({
+    name: 'BpmTaskAssignRuleList',
+    query: {
+      modelId: row.id
+    }
+  })
+}
+
+const handleBpmnDetail = async (row) => {
+  bpmnXML.value = await DefinitionApi.getProcessDefinitionBpmnXML(row.id)
+  bpmnDetailVisible.value = true
+}
+
+const getTableData = async () => {
+  loading.value = true
+  const searchObj = {
+    pageNo: tablePage.value.currentPage,
+    pageSize: tablePage.value.pageSize,
+    key: query.key
+  }
+  const data = await DefinitionApi.getProcessDefinitionPage(searchObj)
+  tableData.value = data.list
+  tablePage.value.total = data.total
+  loading.value = false
+}
+
+const sizeChange = (pageSize) => {
+  tablePage.value.pageSize = pageSize
+  getTableData()
+}
+
+const currentChange = (currentPage) => {
+  tablePage.value.currentPage = currentPage
+  getTableData()
+}
+
+useCrudHeight(crudRef)
+
+onMounted(() => {
+  tablePage.value.currentPage = 1
+  getTableData()
+})
+</script>

src/views/bpm/group/index.vue

@@ -0,0 +1,221 @@
+<template>
+  <ContentWrap>
+    <avue-crud
+      ref="crudRef"
+      v-model="tableForm"
+      v-model:page="tablePage"
+      v-model:search="tableSearch"
+      :data="tableData"
+      :option="tableOption"
+      :permission="permission"
+      :before-open="beforeOpen"
+      @search-change="searchChange"
+      @search-reset="resetChange"
+      @row-save="rowSave"
+      @row-update="rowUpdate"
+      @row-del="rowDel"
+      @refresh-change="getTableData"
+      @size-change="sizeChange"
+      @current-change="currentChange"
+    >
+      <template #status="scope">
+        <dict-tag
+          v-if="scope.row.status !== undefined"
+          :type="DICT_TYPE.COMMON_STATUS"
+          :value="scope.row.status"
+        />
+      </template>
+    </avue-crud>
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter, getSearchDate } from '@/utils/formatTime'
+import * as UserGroupApi from '@/api/bpm/userGroup'
+import * as UserApi from '@/api/system/user'
+import { CommonStatusEnum } from '@/utils/constants'
+
+defineOptions({ name: 'SystemDictType' })
+
+interface DictType {
+  label: string
+  value: number
+}
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const { getCurrPermi } = useCrudPermi()
+
+const loading = ref(true) // 列表的加载中
+const tableOption = reactive({
+  align: 'center',
+  headerAlign: 'center',
+  searchMenuSpan: 6,
+  searchMenuPosition: 'left',
+  labelSuffix: ' ',
+  span: 24,
+  dialogWidth: '50%',
+  column: {
+    id: {
+      label: '编号',
+      display: false
+    },
+    name: {
+      label: '组名',
+      search: true,
+      rules: [{ required: true, message: '组名不能为空', trigger: 'blur' }]
+    },
+    description: {
+      label: '描述',
+      type: 'textarea',
+      minRows: 2,
+      maxRows: 4
+    },
+    memberUserIds: {
+      label: '成员',
+      type: 'select',
+      span: 12,
+      multiple: true,
+      dicData: [] as DictType[],
+      rules: [{ required: true, message: '成员不能为空', trigger: 'blur' }]
+    },
+    status: {
+      label: '状态',
+      search: true,
+      type: 'radio',
+      dicData: getIntDictOptions(DICT_TYPE.COMMON_STATUS),
+      rules: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
+      value: CommonStatusEnum.ENABLE
+    },
+    createTime: {
+      label: '创建时间',
+      searchRange: true,
+      search: true,
+      display: false,
+      type: 'date',
+      searchType: 'daterange',
+      valueFormat: 'YYYY-MM-DD',
+      width: 180,
+      startPlaceholder: '开始时间',
+      endPlaceholder: '结束时间',
+      formatter: (row, val, value, column) => {
+        return dateFormatter(row, column, val)
+      }
+    }
+  }
+}) //表格配置
+const tableForm = ref<{ id?: number }>({})
+const tableData = ref([])
+const tableSearch = ref<any>({})
+const tablePage = ref({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0
+})
+const permission = getCurrPermi(['bpm:user-group'])
+const crudRef = ref()
+
+useCrudHeight(crudRef)
+
+/** 查询列表 */
+const getTableData = async () => {
+  loading.value = true
+
+  let searchObj = {
+    ...tableSearch.value,
+    pageNo: tablePage.value.currentPage,
+    pageSize: tablePage.value.pageSize
+  }
+
+  if (searchObj.createTime?.length) {
+    searchObj.createTime = getSearchDate(searchObj.createTime)
+  } else delete searchObj.createTime
+
+  for (let key in searchObj) if (searchObj[key] === '') delete searchObj[key]
+  try {
+    const data = await UserGroupApi.getUserGroupPage(searchObj)
+    tableData.value = data.list
+    tablePage.value.total = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const searchChange = (params, done) => {
+  tablePage.value.currentPage = 1
+  getTableData().finally(() => {
+    done()
+  })
+}
+
+/** 清空按钮操作 */
+const resetChange = () => {
+  searchChange({}, () => {})
+}
+
+const sizeChange = (pageSize) => {
+  tablePage.value.pageSize = pageSize
+  resetChange()
+}
+
+const currentChange = (currentPage) => {
+  tablePage.value.currentPage = currentPage
+  getTableData()
+}
+
+/** 表单打开前 */
+const beforeOpen = async (done, type) => {
+  if (['edit', 'view'].includes(type) && tableForm.value.id) {
+    tableForm.value = await UserGroupApi.getUserGroup(tableForm.value.id)
+  }
+  done()
+}
+
+/** 新增操作 */
+const rowSave = async (form, done, loading) => {
+  let bool = await UserGroupApi.createUserGroup(form).catch(() => false)
+  if (bool) {
+    message.success(t('common.createSuccess'))
+    resetChange()
+    done()
+  } else loading()
+}
+
+/** 编辑操作 */
+const rowUpdate = async (form, index, done, loading) => {
+  let bool = await UserGroupApi.updateUserGroup(form).catch(() => false)
+  if (bool) {
+    message.success(t('common.updateSuccess'))
+    getTableData()
+    done()
+  } else loading()
+}
+
+/** 删除按钮操作 */
+const rowDel = async (form, index) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await UserGroupApi.deleteUserGroup(form.id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getTableData()
+  } catch {}
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  // 加载用户列表
+  const data = await UserApi.getSimpleUserList()
+
+  tableOption.column.memberUserIds.dicData = data.map((item) => {
+    return {
+      label: item.nickname,
+      value: item.id
+    }
+  })
+  await getTableData()
+})
+</script>

src/views/bpm/model/ModelImportForm.vue

@@ -0,0 +1,140 @@
+<template>
+  <Dialog v-model="dialogVisible" title="导入流程" width="400">
+    <div>
+      <el-upload
+        ref="uploadRef"
+        v-model:file-list="fileList"
+        :action="importUrl"
+        :auto-upload="false"
+        :data="formData"
+        :disabled="formLoading"
+        :headers="uploadHeaders"
+        :limit="1"
+        :on-error="submitFormError"
+        :on-exceed="handleExceed"
+        :on-success="submitFormSuccess"
+        accept=".bpmn, .xml"
+        drag
+        name="bpmnFile"
+      >
+        <Icon class="el-icon--upload" icon="ep:upload-filled" />
+        <div class="el-upload__text"> 将文件拖到此处，或 <em>点击上传</em></div>
+        <template #tip>
+          <div class="el-upload__tip" style="color: red">
+            提示：仅允许导入“bpm”或“xml”格式文件！
+          </div>
+          <div>
+            <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
+              <el-form-item label="流程标识" prop="key">
+                <el-input
+                  v-model="formData.key"
+                  placeholder="请输入流标标识"
+                  style="width: 250px"
+                />
+              </el-form-item>
+              <el-form-item label="流程名称" prop="name">
+                <el-input v-model="formData.name" clearable placeholder="请输入流程名称" />
+              </el-form-item>
+              <el-form-item label="流程描述" prop="description">
+                <el-input v-model="formData.description" clearable type="textarea" />
+              </el-form-item>
+            </el-form>
+          </div>
+        </template>
+      </el-upload>
+    </div>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { getAccessToken, getTenantId } from '@/utils/auth'
+
+defineOptions({ name: 'ModelImportForm' })
+
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+const formData = ref({
+  key: '',
+  name: '',
+  description: ''
+})
+const formRules = reactive({
+  key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }]
+})
+const formRef = ref() // 表单 Ref
+const uploadRef = ref() // 上传 Ref
+const importUrl = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/bpm/model/import'
+const uploadHeaders = ref() // 上传 Header 头
+const fileList = ref([]) // 文件列表
+
+/** 打开弹窗 */
+const open = async () => {
+  dialogVisible.value = true
+  resetForm()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  if (fileList.value.length == 0) {
+    message.error('请上传文件')
+    return
+  }
+  // 提交请求
+  uploadHeaders.value = {
+    Authorization: 'Bearer ' + getAccessToken(),
+    'tenant-id': getTenantId()
+  }
+  formLoading.value = true
+  uploadRef.value!.submit()
+}
+
+/** 文件上传成功 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitFormSuccess = async (response: any) => {
+  if (response.code !== 0) {
+    message.error(response.msg)
+    formLoading.value = false
+    return
+  }
+  // 提示成功
+  message.success('导入流程成功！请点击【设计流程】按钮，进行编辑保存后，才可以进行【发布流程】')
+  // 发送操作成功的事件
+  emit('success')
+}
+
+/** 上传错误提示 */
+const submitFormError = (): void => {
+  message.error('导入流程失败，请您重新上传！')
+  formLoading.value = false
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  // 重置上传状态和文件
+  formLoading.value = false
+  uploadRef.value?.clearFiles()
+  // 重置表单
+  formData.value = {
+    key: '',
+    name: '',
+    description: ''
+  }
+  formRef.value?.resetFields()
+}
+
+/** 文件数超出提示 */
+const handleExceed = (): void => {
+  message.error('最多只能上传一个文件！')
+}
+</script>

src/views/bpm/model/editor/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <ContentWrap>
+    <!-- 流程设计器，负责绘制流程等 -->
+    <MyProcessDesigner
+      key="designer"
+      v-if="xmlString !== undefined"
+      v-model="xmlString"
+      :value="xmlString"
+      v-bind="controlForm"
+      keyboard
+      ref="processDesigner"
+      @init-finished="initModeler"
+      :additionalModel="controlForm.additionalModel"
+      @save="save"
+    />
+    <!-- 流程属性器，负责编辑每个流程节点的属性 -->
+    <MyProcessPenal
+      key="penal"
+      :bpmnModeler="modeler as any"
+      :prefix="controlForm.prefix"
+      class="process-panel"
+      :model="model"
+    />
+  </ContentWrap>
+</template>
+
+<script lang="ts" setup>
+import { MyProcessDesigner, MyProcessPenal } from '@/components/bpmnProcessDesigner/package'
+// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
+import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad'
+// 自定义左侧菜单（修改 默认任务 为 用户任务）
+import CustomPaletteProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/palette'
+import * as ModelApi from '@/api/bpm/model'
+
+defineOptions({ name: 'BpmModelEditor' })
+
+const router = useRouter() // 路由
+const { query } = useRoute() // 路由的查询
+const message = useMessage() // 国际化
+
+const xmlString = ref(undefined) // BPMN XML
+const modeler = ref(null) // BPMN Modeler
+const controlForm = ref({
+  simulation: true,
+  labelEditing: false,
+  labelVisible: false,
+  prefix: 'flowable',
+  headerButtonSize: 'mini',
+  additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
+})
+const model = ref<ModelApi.ModelVO>() // 流程模型的信息
+
+/** 初始化 modeler */
+const initModeler = (item) => {
+  setTimeout(() => {
+    modeler.value = item
+  }, 10)
+}
+
+/** 添加/修改模型 */
+const save = async (bpmnXml) => {
+  const data = {
+    ...model.value,
+    bpmnXml: bpmnXml // bpmnXml 只是初始化流程图，后续修改无法通过它获得
+  } as unknown as ModelApi.ModelVO
+  // 提交
+  if (data.id) {
+    await ModelApi.updateModel(data)
+    message.success('修改成功')
+  } else {
+    await ModelApi.createModel(data)
+    message.success('新增成功')
+  }
+  // 跳转回去
+  close()
+}
+
+/** 关闭按钮 */
+const close = () => {
+  router.push({ path: '/bpm/manager/model' })
+}
+
+/** 初始化 */
+onMounted(async () => {
+  const modelId = query.modelId as unknown as number
+  if (!modelId) {
+    message.error('缺少模型 modelId 编号')
+    return
+  }
+  // 查询模型
+  const data = await ModelApi.getModel(modelId)
+  xmlString.value = data.bpmnXml
+  model.value = {
+    ...data,
+    bpmnXml: undefined // 清空 bpmnXml 属性
+  }
+})
+</script>
+<style lang="scss">
+.process-panel__container {
+  position: absolute;
+  top: 90px;
+  right: 60px;
+}
+</style>

src/views/bpm/model/index.vue

@@ -0,0 +1,523 @@
+<template>
+  <ContentWrap>
+    <avue-crud
+      ref="crudRef"
+      v-model="tableForm"
+      v-model:page="tablePage"
+      v-model:search="tableSearch"
+      :table-loading="loading"
+      :data="tableData"
+      :option="tableOption"
+      :permission="permission"
+      :before-open="beforeOpen"
+      @search-change="searchChange"
+      @search-reset="resetChange"
+      @row-save="rowSave"
+      @row-del="rowDel"
+      @row-update="rowUpdate"
+      @refresh-change="getTableData"
+      @size-change="sizeChange"
+      @current-change="currentChange"
+    >
+      <template #menu-left>
+        <el-button type="success" plain @click="openImportForm" v-hasPermi="['bpm:model:import']">
+          <Icon icon="ep:upload" class="mr-5px" /> 导入流程
+        </el-button>
+      </template>
+      <template #menu="scope">
+        <el-button
+          link
+          type="primary"
+          @click="crudRef.rowEdit(scope.row, scope.index)"
+          v-hasPermi="['bpm:model:update']"
+        >
+          修改流程
+        </el-button>
+        <el-button
+          link
+          type="primary"
+          @click="handleDesign(scope.row)"
+          v-hasPermi="['bpm:model:update']"
+        >
+          设计流程
+        </el-button>
+        <el-button
+          link
+          type="primary"
+          @click="handleAssignRule(scope.row)"
+          v-hasPermi="['bpm:task-assign-rule:query']"
+        >
+          分配规则
+        </el-button>
+        <el-button
+          link
+          type="primary"
+          @click="handleDeploy(scope.row)"
+          v-hasPermi="['bpm:model:deploy']"
+        >
+          发布流程
+        </el-button>
+        <el-button
+          link
+          type="primary"
+          v-hasPermi="['bpm:process-definition:query']"
+          @click="handleDefinitionList(scope.row)"
+        >
+          流程定义
+        </el-button>
+        <el-button
+          link
+          type="danger"
+          @click="crudRef.rowDel(scope.row, scope.index)"
+          v-hasPermi="['bpm:model:delete']"
+        >
+          删除
+        </el-button>
+      </template>
+      <template #name="scope">
+        <el-button type="primary" link @click="handleBpmnDetail(scope.row)">
+          <span>{{ scope.row.name }}</span>
+        </el-button>
+      </template>
+      <template #category="scope">
+        <dict-tag
+          v-if="scope.row.category"
+          :type="DICT_TYPE.BPM_MODEL_CATEGORY"
+          :value="scope.row.category"
+        />
+      </template>
+      <template #formType="{ row }">
+        <el-button v-if="row.formType === 10" type="primary" link @click="handleFormDetail(row)">
+          <span>{{ row.formName }}</span>
+        </el-button>
+        <el-button
+          v-else-if="row.formType === 20"
+          type="primary"
+          link
+          @click="handleFormDetail(row)"
+        >
+          <span>{{ row.formCustomCreatePath }}</span>
+        </el-button>
+        <label v-else>暂无表单</label>
+      </template>
+      <template #processDefinitionVersion="scope">
+        <el-tag v-if="scope.row.processDefinition">
+          v{{ scope.row.processDefinition.version }}
+        </el-tag>
+        <el-tag v-else type="warning">未部署</el-tag>
+      </template>
+      <template #processDefinitionSuspensionState="scope">
+        <el-switch
+          v-if="scope.row.processDefinition"
+          v-model="scope.row.processDefinition.suspensionState"
+          :active-value="1"
+          :inactive-value="2"
+          @change="handleChangeState(scope.row)"
+        />
+      </template>
+      <template #deploymentTime="scope">
+        <span v-if="scope.row.processDefinition">
+          {{ formatDate(scope.row.processDefinition.deploymentTime) }}
+        </span>
+      </template>
+    </avue-crud>
+  </ContentWrap>
+  <!-- 弹窗：流程模型图的预览 -->
+  <Dialog title="流程图" v-model="bpmnDetailVisible" width="800">
+    <MyProcessViewer
+      key="designer"
+      v-model="bpmnXML"
+      :value="bpmnXML || ''"
+      v-bind="bpmnControlForm"
+      :prefix="bpmnControlForm.prefix"
+    />
+  </Dialog>
+  <!-- 表单弹窗：导入流程 -->
+  <ModelImportForm ref="importFormRef" @success="getTableData" />
+  <!-- 表单预览 -->
+  <FormView
+    v-model="showFormView"
+    formType="add"
+    showType="dialog"
+    :showButton="false"
+    v-bind="formOption"
+  ></FormView>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter, formatDate } from '@/utils/formatTime'
+import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
+import * as ModelApi from '@/api/bpm/model'
+import ModelImportForm from '@/views/bpm/model/ModelImportForm.vue'
+
+defineOptions({ name: 'SystemTenant' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const { push } = useRouter() // 路由
+const { getCurrPermi } = useCrudPermi()
+
+const loading = ref(true) // 列表的加载中
+const tableOption = reactive({
+  addBtnText: '新增流程',
+  editBtn: false,
+  delBtn: false,
+  menuWidth: 300,
+  align: 'center',
+  headerAlign: 'center',
+  searchMenuSpan: 6,
+  searchMenuPosition: 'left',
+  labelSuffix: ' ',
+  span: 24,
+  dialogWidth: '50%',
+  column: [
+    {
+      prop: 'key',
+      label: '流程标识',
+      search: true,
+      rules: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
+      editDisabled: true
+    },
+    {
+      prop: 'name',
+      label: '流程名称',
+      search: true,
+      rules: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
+      editDisabled: true
+    },
+    {
+      prop: 'category',
+      label: '流程分类',
+      width: 100,
+      addDisplay: false,
+      editDisplay: true,
+      search: true,
+      type: 'select',
+      dicData: getIntDictOptions(DICT_TYPE.BPM_MODEL_CATEGORY).map(el=>{return{...el, value: el.value + ''}}),
+      rules: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }]
+    },
+    {
+      prop: 'description',
+      label: '流程描述',
+      type: 'textarea',
+      hide: true,
+      minRows: 2,
+      maxRows: 4
+    },
+    {
+      prop: 'formType',
+      label: '表单类型',
+      type: 'radio',
+      dicData: getIntDictOptions(DICT_TYPE.BPM_MODEL_FORM_TYPE),
+      hide: true,
+      addDisplay: false,
+      editDisplay: true,
+      control: (val) => {
+        return {
+          formId: { display: val == 10 },
+          formCustomCreatePath: { display: val == 20 },
+          formCustomViewPath: { display: val == 20 }
+        }
+      }
+    },
+    {
+      prop: 'formId',
+      label: '流程表单',
+      type: 'select',
+      hide: true,
+      filterable: true,
+      display: false,
+      dicUrl: '/jeelowcode/desform/page',
+      dicMethod: 'post',
+      props: { label: 'desformName', value: 'id' },
+      dicFormatter: (data) => data.records
+    },
+    {
+      prop: 'formCustomCreatePath',
+      label: '表单提交路由',
+      hide: true,
+      display: false,
+      labelTip: '自定义表单的提交路径，使用 Vue 的路由地址'
+    },
+    {
+      prop: 'formCustomViewPath',
+      label: '表单查看地址',
+      hide: true,
+      display: false,
+      labelTip: '自定义表单的查看组件地址，使用 Vue 的组件地址'
+    },
+    {
+      prop: 'formType',
+      label: '表单信息',
+      display: false
+    },
+    {
+      prop: 'createTime',
+      label: '创建时间',
+      searchRange: true,
+      display: false,
+      type: 'datetime',
+      width: 180,
+      startPlaceholder: '开始时间',
+      endPlaceholder: '结束时间',
+      formatter: (row, val, value, column) => {
+        return dateFormatter(row, column, val)
+      }
+    },
+    {
+      label: '最新部署的流程定义',
+      children: [
+        {
+          prop: 'processDefinitionVersion',
+          label: '流程版本',
+          width: 100,
+          display: false
+        },
+        {
+          prop: 'processDefinitionSuspensionState',
+          label: '激活状态',
+          width: 100,
+          display: false
+        },
+        {
+          prop: 'deploymentTime',
+          label: '部署时间',
+          searchRange: true,
+          display: false,
+          type: 'datetime',
+          width: 180,
+          startPlaceholder: '开始时间',
+          endPlaceholder: '结束时间',
+          formatter: (row, val, value, column) => {
+            return dateFormatter(row, column, val)
+          }
+        }
+      ]
+    }
+  ]
+}) //表格配置
+const tableForm = ref<{ id?: number }>({})
+const tableData = ref([])
+const tableSearch = ref({})
+const tablePage = ref({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0
+})
+
+const showFormView = ref(false)
+const formOption = ref({
+  formId: '',
+  popOption: {
+    title: ''
+  }
+})
+
+const permission = getCurrPermi(['bpm:model'])
+const crudRef = ref()
+
+useCrudHeight(crudRef)
+
+/** 查询列表 */
+const getTableData = async () => {
+  loading.value = true
+  let searchObj = {
+    ...tableSearch.value,
+    pageNo: tablePage.value.currentPage,
+    pageSize: tablePage.value.pageSize
+  }
+  for (let key in searchObj) if (searchObj[key] === '') delete searchObj[key]
+  try {
+    const data = await ModelApi.getModelPage(searchObj)
+    tableData.value = data.list
+    tablePage.value.total = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const searchChange = (params, done) => {
+  tablePage.value.currentPage = 1
+  getTableData().finally(() => {
+    done()
+  })
+}
+
+/** 清空按钮操作 */
+const resetChange = () => {
+  searchChange({}, () => {})
+}
+
+const sizeChange = (pageSize) => {
+  tablePage.value.pageSize = pageSize
+  resetChange()
+}
+
+const currentChange = (currentPage) => {
+  tablePage.value.currentPage = currentPage
+  getTableData()
+}
+
+/** 表单打开前 */
+const beforeOpen = async (done, type) => {
+  if (['edit', 'view'].includes(type) && tableForm.value.id) {
+    tableForm.value = await ModelApi.getModel(tableForm.value.id)
+  }
+  done()
+}
+
+/** 新增操作 */
+const rowSave = async (form, done, loading) => {
+  let params = {
+    name: form.name,
+    key: form.key,
+    description: form.description,
+    formCustomViewPath: '',
+    formCustomCreatePath: '',
+    formId: '',
+    formType: 10
+  }
+
+  let bool = await ModelApi.createModel(params).catch(() => false)
+  if (bool) {
+    // 提示，引导用户做后续的操作
+    await ElMessageBox.alert(
+      '<strong>新建模型成功！</strong>后续需要执行如下 4 个步骤：' +
+        '<div>1. 点击【修改流程】按钮，配置流程的分类、表单信息</div>' +
+        '<div>2. 点击【设计流程】按钮，绘制流程图</div>' +
+        '<div>3. 点击【分配规则】按钮，设置每个用户任务的审批人</div>' +
+        '<div>4. 点击【发布流程】按钮，完成流程的最终发布</div>' +
+        '另外，每次流程修改后，都需要点击【发布流程】按钮，才能正式生效！！！',
+      '重要提示',
+      {
+        dangerouslyUseHTMLString: true,
+        type: 'success'
+      }
+    )
+    resetChange()
+    done()
+  } else loading()
+}
+
+/** 编辑操作 */
+const rowUpdate = async (form, index, done, loading) => {
+  let bool = await ModelApi.updateModel(form).catch(() => false)
+  if (bool) {
+    message.success(t('common.updateSuccess'))
+    resetChange()
+    done()
+  } else loading()
+}
+
+/** 删除按钮操作 */
+const rowDel = async (form, index) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ModelApi.deleteModel(form.id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getTableData()
+  } catch {}
+}
+
+/** 更新状态操作 */
+const handleChangeState = async (row) => {
+  const state = row.processDefinition.suspensionState
+  try {
+    // 修改状态的二次确认
+    const id = row.id
+    const statusState = state === 1 ? '激活' : '挂起'
+    const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
+    await message.confirm(content)
+    // 发起修改状态
+    await ModelApi.updateModelState(id, state)
+    // 刷新列表
+    await getTableData()
+  } catch {
+    // 取消后，进行恢复按钮
+    row.processDefinition.suspensionState = state === 1 ? 2 : 1
+  }
+}
+
+/** 流程图的详情按钮操作 */
+const bpmnDetailVisible = ref(false)
+const bpmnXML = ref(null)
+const bpmnControlForm = ref({
+  prefix: 'flowable'
+})
+const handleBpmnDetail = async (row) => {
+  const data = await ModelApi.getModel(row.id)
+  bpmnXML.value = data.bpmnXml || ''
+  bpmnDetailVisible.value = true
+}
+
+/** 流程表单的详情按钮操作 */
+const handleFormDetail = async (row) => {
+  if (row.formType == 10) {
+    formOption.value.formId = row.formId
+    formOption.value.popOption.title = row.formName
+    showFormView.value = true
+  } else {
+    await push({
+      path: row.formCustomCreatePath
+    })
+  }
+}
+
+/** 添加/修改操作 */
+const importFormRef = ref()
+const openImportForm = () => {
+  importFormRef.value.open()
+}
+
+/** 设计流程 */
+const handleDesign = (row) => {
+  push({
+    name: 'BpmModelEditor',
+    query: {
+      modelId: row.id
+    }
+  })
+}
+
+/** 点击任务分配按钮 */
+const handleAssignRule = (row) => {
+  push({
+    name: 'BpmTaskAssignRuleList',
+    query: {
+      modelId: row.id
+    }
+  })
+}
+
+/** 发布流程 */
+const handleDeploy = async (row) => {
+  try {
+    // 删除的二次确认
+    await message.confirm('是否部署该流程！！')
+    // 发起部署
+    await ModelApi.deployModel(row.id)
+    message.success(t('部署成功'))
+    // 刷新列表
+    await getTableData()
+  } catch {}
+}
+
+/** 跳转到指定流程定义列表 */
+const handleDefinitionList = (row) => {
+  push({
+    name: 'BpmProcessDefinition',
+    query: {
+      key: row.key
+    }
+  })
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  await getTableData()
+})
+</script>

src/views/bpm/processInstance/create/index.vue

@@ -0,0 +1,164 @@
+<template>
+  <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
+  <ContentWrap v-if="!selectProcessInstance">
+    <avue-crud
+      ref="crudRef"
+      v-model="tableForm"
+      :table-loading="loading"
+      :data="tableData"
+      :option="tableOption"
+      :permission="permission"
+      @refresh-change="getTableData"
+    >
+      <template #menu="{ row }">
+        <el-button link type="primary" @click="handleSelect(row)" v-hasPermi="['bpm:model:update']">
+          选择
+        </el-button>
+      </template>
+      <template #category="{ row }">
+        <el-tag>{{ row['$category'] }}</el-tag>
+      </template>
+      <template #version="{ row }">
+        <el-tag>v{{ row.version }}</el-tag>
+      </template>
+    </avue-crud>
+  </ContentWrap>
+  <!-- 第二步，填写表单，进行流程的提交 -->
+  <ContentWrap v-else>
+    <el-card class="box-card">
+      <div class="clearfix">
+        <span class="el-icon-document">申请信息【{{ selectProcessInstance.name }}】</span>
+        <el-button style="float: right" type="primary" @click="selectProcessInstance = undefined">
+          <Icon icon="ep:delete" /> 选择其它流程
+        </el-button>
+      </div>
+      <el-col :span="24" style="margin-top: 20px">
+        <FormView
+          :form-id="formId"
+          formType="add"
+          showType="view"
+          :beforeClose="submitForm"
+        ></FormView>
+      </el-col>
+    </el-card>
+    <!-- 流程图预览 -->
+    <ProcessInstanceBpmnViewer :bpmn-xml="bpmnXML || ''" />
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import * as DefinitionApi from '@/api/bpm/definition'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
+
+defineOptions({ name: 'BpmProcessInstanceCreate' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const router = useRouter() // 路由
+const { getCurrPermi } = useCrudPermi()
+
+const loading = ref(true) // 列表的加载中
+const tableOption = reactive({
+  header: false,
+  editBtn: false,
+  delBtn: false,
+  menuWidth: 300,
+  align: 'center',
+  headerAlign: 'center',
+  searchMenuSpan: 6,
+  searchMenuPosition: 'left',
+  labelSuffix: ' ',
+  span: 24,
+  dialogWidth: '50%',
+  column: [
+    {
+      prop: 'name',
+      label: '流程名称',
+      minWidth: 120
+    },
+    {
+      prop: 'category',
+      label: '流程分类',
+      type: 'select',
+      dicData: getIntDictOptions(DICT_TYPE.BPM_MODEL_CATEGORY),
+      minWidth: 90
+    },
+    {
+      prop: 'version',
+      label: '流程版本',
+      minWidth: 90
+    },
+    {
+      prop: 'description',
+      label: '流程描述',
+      type: 'textarea',
+      minWidth: 120
+    }
+  ]
+}) //表格配置
+const tableForm = ref<{ id?: number }>({})
+const tableData = ref([])
+const selectProcessInstance = ref() // 选择的流程实例
+const bpmnXML = ref(null)
+const formId = ref('')
+
+const permission = getCurrPermi(['bpm:model'])
+const crudRef = ref()
+
+useCrudHeight(crudRef)
+
+/** 查询列表 */
+const getTableData = async () => {
+  loading.value = true
+  try {
+    tableData.value = await DefinitionApi.getProcessDefinitionList({ suspensionState: 1 })
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 处理选择流程的按钮操作 **/
+const handleSelect = async (row) => {
+  // 设置选择的流程
+  selectProcessInstance.value = row
+  // 情况一：流程表单
+  if (row.formType == 10) {
+    // 设置表单
+    formId.value = row.formId
+    // 加载流程图
+    bpmnXML.value = await DefinitionApi.getProcessDefinitionBpmnXML(row.id)
+    // 情况二：业务表单
+  } else if (row.formCustomCreatePath) {
+    await router.push({
+      path: row.formCustomCreatePath
+    })
+    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
+  }
+}
+
+/** 提交按钮 */
+const submitForm = async (type, done, formData, loading) => {
+  if (type == 'submit') {
+    try {
+      await ProcessInstanceApi.createProcessInstance({
+        processDefinitionId: selectProcessInstance.value.id,
+        variables: formData
+      })
+      // 提示
+      message.success('发起流程成功')
+      router.go(-1)
+    } finally {
+      done()
+    }
+  } else {
+    if (loading) loading()
+    else done()
+  }
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  await getTableData()
+})
+</script>

src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue

@@ -0,0 +1,57 @@
+<template>
+  <el-card v-loading="loading" class="box-card">
+    <template #header>
+      <span class="el-icon-picture-outline">流程图</span>
+    </template>
+    <MyProcessViewer
+      key="designer"
+      :activityData="activityList"
+      :prefix="bpmnControlForm.prefix"
+      :processInstanceData="processInstance"
+      :taskData="tasks"
+      :value="bpmnXml"
+      v-bind="bpmnControlForm"
+    />
+  </el-card>
+</template>
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
+import * as ActivityApi from '@/api/bpm/activity'
+
+defineOptions({ name: 'BpmProcessInstanceBpmnViewer' })
+
+const props = defineProps({
+  loading: propTypes.bool, // 是否加载中
+  id: propTypes.string, // 流程实例的编号
+  processInstance: propTypes.any, // 流程实例的信息
+  tasks: propTypes.array, // 流程任务的数组
+  bpmnXml: propTypes.string // BPMN XML
+})
+
+const bpmnControlForm = ref({
+  prefix: 'flowable'
+})
+const activityList = ref([]) // 任务列表
+// const bpmnXML = computed(() => { // 不晓得为啊哈不能这么搞
+//   if (!props.processInstance || !props.processInstance.processDefinition) {
+//     return
+//   }
+//   return DefinitionApi.getProcessDefinitionBpmnXML(props.processInstance.processDefinition.id)
+// })
+
+/** 初始化 */
+onMounted(async () => {
+  if (props.id) {
+    activityList.value = await ActivityApi.getActivityList({
+      processInstanceId: props.id
+    })
+  }
+})
+</script>
+<style>
+.box-card {
+  width: 100%;
+  margin-bottom: 20px;
+}
+</style>

src/views/bpm/processInstance/detail/ProcessInstanceChildrenTaskList.vue

@@ -0,0 +1,95 @@
+<template>
+  <el-drawer v-model="drawerVisible" title="子任务" size="70%">
+    <!-- 当前任务 -->
+    <template #header>
+      <h4>【{{ baseTask.name }} 】审批人：{{ baseTask.assigneeUser?.nickname }}</h4>
+      <el-button
+        style="margin-left: 5px"
+        v-if="isSubSignButtonVisible(baseTask)"
+        type="danger"
+        plain
+        @click="handleSubSign(baseTask)"
+      >
+        <Icon icon="ep:remove" /> 减签
+      </el-button>
+    </template>
+    <!-- 子任务列表 -->
+    <el-table :data="baseTask.children" style="width: 100%" row-key="id" border>
+      <el-table-column prop="assigneeUser.nickname" label="审批人" />
+      <el-table-column prop="assigneeUser.deptName" label="所在部门" />
+      <el-table-column label="审批状态" prop="result">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="scope.row.result" />
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="提交时间"
+        align="center"
+        prop="createTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <el-table-column
+        label="结束时间"
+        align="center"
+        prop="endTime"
+        width="180"
+        :formatter="dateFormatter"
+      />
+      <el-table-column label="操作" prop="operation">
+        <template #default="scope">
+          <el-button
+            v-if="isSubSignButtonVisible(scope.row)"
+            type="danger"
+            plain
+            @click="handleSubSign(scope.row)"
+          >
+            <Icon icon="ep:remove" /> 减签
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 减签 -->
+    <TaskSubSignDialogForm ref="taskSubSignDialogForm" />
+  </el-drawer>
+</template>
+<script lang="ts" setup>
+import { isEmpty } from '@/utils/is'
+import { DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import TaskSubSignDialogForm from './TaskSubSignDialogForm.vue'
+
+defineOptions({ name: 'ProcessInstanceChildrenTaskList' })
+
+const message = useMessage() // 消息弹窗
+const drawerVisible = ref(false) // 抽屉的是否展示
+
+const baseTask = ref<object>({})
+/** 打开弹窗 */
+const open = async (task: any) => {
+  if (isEmpty(task.children)) {
+    message.warning('该任务没有子任务')
+    return
+  }
+  baseTask.value = task
+  // 展开抽屉
+  drawerVisible.value = true
+}
+defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
+
+/** 发起减签 */
+const taskSubSignDialogForm = ref()
+const handleSubSign = (item) => {
+  taskSubSignDialogForm.value.open(item.id)
+}
+
+/** 是否显示减签按钮 */
+const isSubSignButtonVisible = (task: any) => {
+  if (task && task.children && !isEmpty(task.children)) {
+    // 有子任务，且子任务有任意一个是 待处理 和 待前置任务完成 则显示减签按钮
+    const subTask = task.children.find((item) => item.result === 1 || item.result === 9)
+    return !isEmpty(subTask)
+  }
+  return false
+}
+</script>

src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue

@@ -0,0 +1,128 @@
+<template>
+  <el-card v-loading="loading" class="box-card">
+    <template #header>
+      <span class="el-icon-picture-outline">审批记录</span>
+    </template>
+    <el-col :span="24">
+      <div class="block">
+        <el-timeline>
+          <el-timeline-item
+            v-for="(item, index) in tasks"
+            :key="index"
+            :icon="getTimelineItemIcon(item)"
+            :type="getTimelineItemType(item)"
+          >
+            <p style="font-weight: 700">
+              任务：{{ item.name }}
+              <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT" :value="item.result" />
+              <el-button
+                style="margin-left: 5px"
+                v-if="!isEmpty(item.children)"
+                @click="openChildrenTask(item)"
+              >
+                <Icon icon="ep:memo" />
+                子任务
+              </el-button>
+            </p>
+            <el-card :body-style="{ padding: '10px' }">
+              <label v-if="item.assigneeUser" style="margin-right: 30px; font-weight: normal">
+                审批人：{{ item.assigneeUser.nickname }}
+                <el-tag size="small" type="info">{{ item.assigneeUser.deptName }}</el-tag>
+              </label>
+              <label v-if="item.createTime" style="font-weight: normal">创建时间：</label>
+              <label style="font-weight: normal; color: #8a909c">
+                {{ formatDate(item?.createTime) }}
+              </label>
+              <label v-if="item.endTime" style="margin-left: 30px; font-weight: normal">
+                审批时间：
+              </label>
+              <label v-if="item.endTime" style="font-weight: normal; color: #8a909c">
+                {{ formatDate(item?.endTime) }}
+              </label>
+              <label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">
+                耗时：
+              </label>
+              <label v-if="item.durationInMillis" style="font-weight: normal; color: #8a909c">
+                {{ formatPast2(item?.durationInMillis) }}
+              </label>
+              <p v-if="item.reason">
+                <el-tag :type="getTimelineItemType(item)">{{ item.reason }}</el-tag>
+              </p>
+            </el-card>
+          </el-timeline-item>
+        </el-timeline>
+      </div>
+    </el-col>
+    <!-- 子任务  -->
+    <ProcessInstanceChildrenTaskList ref="processInstanceChildrenTaskList" />
+  </el-card>
+</template>
+<script lang="ts" setup>
+import { formatDate, formatPast2 } from '@/utils/formatTime'
+import { propTypes } from '@/utils/propTypes'
+import { DICT_TYPE } from '@/utils/dict'
+import { isEmpty } from '@/utils/is'
+import ProcessInstanceChildrenTaskList from './ProcessInstanceChildrenTaskList.vue'
+
+defineOptions({ name: 'BpmProcessInstanceTaskList' })
+
+defineProps({
+  loading: propTypes.bool, // 是否加载中
+  tasks: propTypes.arrayOf(propTypes.object) // 流程任务的数组
+})
+
+/** 获得任务对应的 icon */
+const getTimelineItemIcon = (item) => {
+  if (item.result === 1) {
+    return 'el-icon-time'
+  }
+  if (item.result === 2) {
+    return 'el-icon-check'
+  }
+  if (item.result === 3) {
+    return 'el-icon-close'
+  }
+  if (item.result === 4) {
+    return 'el-icon-remove-outline'
+  }
+  if (item.result === 5) {
+    return 'el-icon-back'
+  }
+  return ''
+}
+
+/** 获得任务对应的颜色 */
+const getTimelineItemType = (item) => {
+  if (item.result === 1) {
+    return 'primary'
+  }
+  if (item.result === 2) {
+    return 'success'
+  }
+  if (item.result === 3) {
+    return 'danger'
+  }
+  if (item.result === 4) {
+    return 'info'
+  }
+  if (item.result === 5) {
+    return 'warning'
+  }
+  if (item.result === 6) {
+    return 'default'
+  }
+  if (item.result === 7 || item.result === 8) {
+    return 'warning'
+  }
+  return ''
+}
+
+/**
+ * 子任务
+ */
+const processInstanceChildrenTaskList = ref()
+
+const openChildrenTask = (item) => {
+  processInstanceChildrenTaskList.value.open(item)
+}
+</script>

src/views/bpm/processInstance/detail/TaskAddSignDialogForm.vue

@@ -0,0 +1,104 @@
+<template>
+  <Dialog v-model="dialogVisible" title="加签" width="500">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="110px"
+    >
+      <el-form-item label="加签处理人" prop="userIdList">
+        <userSelect v-model="formData.userIdList" v-bind="userVBind" class="w-100%"></userSelect>
+      </el-form-item>
+      <el-form-item label="加签理由" prop="reason">
+        <el-input v-model="formData.reason" clearable placeholder="请输入加签理由" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm('before')">
+        向前加签
+      </el-button>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm('after')">
+        向后加签
+      </el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import * as TaskApi from '@/api/bpm/task'
+import * as UserApi from '@/api/system/user'
+import { useUserStoreWithOut } from '@/store/modules/user'
+
+const message = useMessage() // 消息弹窗
+defineOptions({ name: 'BpmTaskUpdateAssigneeForm' })
+
+const userStore = useUserStoreWithOut()
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+const formData = ref({
+  id: '',
+  userIdList: '',
+  type: ''
+})
+const formRules = ref({
+  userIdList: [{ required: true, message: '加签处理人不能为空', trigger: 'change' }],
+  reason: [{ required: true, message: '加签理由不能为空', trigger: 'change' }]
+})
+
+const formRef = ref() // 表单 Ref
+const userList = ref<any[]>([]) // 用户列表
+
+const userVBind = {
+  prop: 'delegateUserId',
+  type: 'edit',
+  column: {
+    label: '加签处理人',
+    findType: 'all',
+    multiple: true,
+    columnKey: ['sex', 'post', 'deptName'],
+    disabledIds: [userStore.user.id]
+  }
+}
+
+/** 打开弹窗 */
+const open = async (id: string) => {
+  dialogVisible.value = true
+  resetForm()
+  formData.value.id = id
+  // 获得用户列表
+  userList.value = await UserApi.getSimpleUserList()
+}
+defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async (type: string) => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  formData.value.type = type
+  try {
+    await TaskApi.taskAddSign(formData.value)
+    message.success('加签成功')
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: '',
+    userIdList: '',
+    type: ''
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/bpm/processInstance/detail/TaskCCDialogForm.vue

@@ -0,0 +1,243 @@
+<template>
+  <Dialog v-model="dialogVisible" title="修改任务规则" width="600">
+    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
+      <el-form-item label="任务名称" prop="taskName">
+        <el-input v-model="formData.taskName" disabled placeholder="请输入任务名称" />
+      </el-form-item>
+      <el-form-item label="任务标识" prop="taskId">
+        <el-input v-model="formData.taskId" disabled placeholder="请输入任务标识" />
+      </el-form-item>
+      <el-form-item label="流程名称" prop="processInstanceName">
+        <el-input v-model="formData.processInstanceName" disabled placeholder="请输入流程名称" />
+      </el-form-item>
+      <el-form-item label="流程标识" prop="processInstanceKey">
+        <el-input v-model="formData.processInstanceKey" disabled placeholder="请输入流程标识" />
+      </el-form-item>
+      <el-form-item label="规则类型" prop="type">
+        <el-select v-model="formData.type" clearable style="width: 100%">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="formData.type === 10" label="指定角色" prop="roleIds">
+        <el-select v-model="formData.roleIds" clearable multiple style="width: 100%">
+          <el-option
+            v-for="item in roleOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        v-if="formData.type === 20 || formData.type === 21"
+        label="指定部门"
+        prop="deptIds"
+        span="24"
+      >
+        <el-tree-select
+          ref="treeRef"
+          v-model="formData.deptIds"
+          :data="deptTreeOptions"
+          :props="defaultProps"
+          empty-text="加载中，请稍后"
+          multiple
+          node-key="id"
+          show-checkbox
+        />
+      </el-form-item>
+      <el-form-item v-if="formData.type === 22" label="指定岗位" prop="postIds" span="24">
+        <el-select v-model="formData.postIds" clearable multiple style="width: 100%">
+          <el-option
+            v-for="item in postOptions"
+            :key="parseInt(item.id)"
+            :label="item.name"
+            :value="parseInt(item.id)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        v-if="formData.type === 30 || formData.type === 31 || formData.type === 32"
+        label="指定用户"
+        prop="userIds"
+        span="24"
+      >
+        <userSelect v-model="formData.userIds" v-bind="userVBind" class="w-100%"></userSelect>
+      </el-form-item>
+      <el-form-item v-if="formData.type === 40" label="指定用户组" prop="userGroupIds">
+        <el-select v-model="formData.userGroupIds" clearable multiple style="width: 100%">
+          <el-option
+            v-for="item in userGroupOptions"
+            :key="parseInt(item.id)"
+            :label="item.name"
+            :value="parseInt(item.id)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="formData.type === 50" label="指定脚本" prop="scripts">
+        <el-select v-model="formData.scripts" clearable multiple style="width: 100%">
+          <el-option
+            v-for="dict in taskAssignScriptDictDatas"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="抄送原因" prop="reason">
+        <el-input v-model="formData.reason" placeholder="请输入抄送原因" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <!-- 操作按钮 -->
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import * as RoleApi from '@/api/system/role'
+import * as DeptApi from '@/api/system/dept'
+import * as PostApi from '@/api/system/post'
+import * as UserApi from '@/api/system/user'
+import * as UserGroupApi from '@/api/bpm/userGroup'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+  type: Number(undefined),
+  taskName: '',
+  taskId: '',
+  processInstanceName: '',
+  processInstanceKey: '',
+  startUserId: '',
+  options: [] as any[],
+  roleIds: [],
+  deptIds: [],
+  postIds: [],
+  userIds: '',
+  userGroupIds: [],
+  scripts: [],
+  reason: ''
+})
+const formRules = reactive({
+  type: [{ required: true, message: '规则类型不能为空', trigger: 'change' }],
+  roleIds: [{ required: true, message: '指定角色不能为空', trigger: 'change' }],
+  deptIds: [{ required: true, message: '指定部门不能为空', trigger: 'change' }],
+  postIds: [{ required: true, message: '指定岗位不能为空', trigger: 'change' }],
+  userIds: [{ required: true, message: '指定用户不能为空', trigger: 'change' }],
+  userGroupIds: [{ required: true, message: '指定用户组不能为空', trigger: 'change' }],
+  scripts: [{ required: true, message: '指定脚本不能为空', trigger: 'change' }],
+  reason: [{ required: true, message: '抄送原因不能为空', trigger: 'change' }]
+})
+const userVBind = {
+  prop: 'assigneeUserId',
+  type: 'edit',
+  column: {
+    label: '用户',
+    findType: 'all',
+    multiple: true,
+    columnKey: ['sex', 'post', 'deptName']
+  }
+}
+const formRef = ref() // 表单 Ref
+const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
+const deptOptions = ref<DeptApi.DeptVO[]>([]) // 部门列表
+const deptTreeOptions = ref() // 部门树
+const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
+const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
+const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
+const taskAssignScriptDictDatas = getIntDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_SCRIPT)
+
+/** 打开弹窗 */
+const open = async (row) => {
+  // 1. 先重置表单
+  resetForm()
+  // 2. 再设置表单
+  if (row != null) {
+    formData.value.type = undefined as unknown as number
+    formData.value.taskName = row.name
+    formData.value.taskId = row.id
+    formData.value.processInstanceName = row.processInstance.name
+    formData.value.processInstanceKey = row.processInstance.id
+    formData.value.startUserId = row.processInstance.startUserId
+  }
+  // 打开弹窗
+  dialogVisible.value = true
+
+  // 获得角色列表
+  roleOptions.value = await RoleApi.getSimpleRoleList()
+  // 获得部门列表
+  deptOptions.value = await DeptApi.getSimpleDeptList()
+  deptTreeOptions.value = handleTree(deptOptions.value, 'id')
+  // 获得岗位列表
+  postOptions.value = await PostApi.getSimplePostList()
+  // 获得用户列表
+  userOptions.value = await UserApi.getSimpleUserList()
+  // 获得用户组列表
+  userGroupOptions.value = await UserGroupApi.getSimpleUserGroupList()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+
+  // 构建表单
+  const form = {
+    ...formData.value
+  }
+  // 将 roleIds 等选项赋值到 options 中
+  if (form.type === 10) {
+    form.options = form.roleIds
+  } else if (form.type === 20 || form.type === 21) {
+    form.options = form.deptIds
+  } else if (form.type === 22) {
+    form.options = form.postIds
+  } else if (form.type === 30 || form.type === 31 || form.type === 32) {
+    form.options = form.userIds.split(',')
+  } else if (form.type === 40) {
+    form.options = form.userGroupIds
+  } else if (form.type === 50) {
+    form.options = form.scripts
+  }
+  form.roleIds = undefined
+  form.deptIds = undefined
+  form.postIds = undefined
+  form.userIds = ''
+  form.userGroupIds = undefined
+  form.scripts = undefined
+
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = form as unknown as ProcessInstanceApi.ProcessInstanceCCVO
+    await ProcessInstanceApi.createProcessInstanceCC(data)
+    message.success(t('common.createSuccess'))
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formRef.value?.resetFields()
+}
+</script>

src/views/bpm/processInstance/detail/TaskDelegateForm.vue

@@ -0,0 +1,96 @@
+<template>
+  <Dialog v-model="dialogVisible" title="委派任务" width="500">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="110px"
+    >
+      <el-form-item label="接收人" prop="delegateUserId">
+        <userSelect
+          v-model="formData.delegateUserId"
+          v-bind="userVBind"
+          class="w-100%"
+        ></userSelect>
+      </el-form-item>
+      <el-form-item label="委派理由" prop="reason">
+        <el-input v-model="formData.reason" clearable placeholder="请输入委派理由" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import * as TaskApi from '@/api/bpm/task'
+import * as UserApi from '@/api/system/user'
+import { useUserStoreWithOut } from '@/store/modules/user'
+
+defineOptions({ name: 'BpmTaskDelegateForm' })
+
+const userStore = useUserStoreWithOut()
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+const formData = ref({
+  id: '',
+  delegateUserId: undefined
+})
+const formRules = ref({
+  delegateUserId: [{ required: true, message: '接收人不能为空', trigger: 'change' }]
+})
+const userVBind = {
+  prop: 'delegateUserId',
+  type: 'edit',
+  column: {
+    label: '接收人',
+    findType: 'all',
+    multiple: false,
+    columnKey: ['sex', 'post', 'deptName'],
+    disabledIds: [userStore.user.id]
+  }
+}
+
+const formRef = ref() // 表单 Ref
+const userList = ref<any[]>([]) // 用户列表
+
+/** 打开弹窗 */
+const open = async (id: string) => {
+  dialogVisible.value = true
+  resetForm()
+  formData.value.id = id
+  // 获得用户列表
+  userList.value = await UserApi.getSimpleUserList()
+}
+defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    await TaskApi.delegateTask(formData.value)
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: '',
+    delegateUserId: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/bpm/processInstance/detail/TaskReturnDialogForm.vue

@@ -0,0 +1,90 @@
+<template>
+  <Dialog v-model="dialogVisible" title="回退" width="500">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="110px"
+    >
+      <el-form-item label="退回节点" prop="targetDefinitionKey">
+        <el-select v-model="formData.targetDefinitionKey" clearable style="width: 100%">
+          <el-option
+            v-for="item in returnList"
+            :key="item.definitionKey"
+            :label="item.name"
+            :value="item.definitionKey"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="回退理由" prop="reason">
+        <el-input v-model="formData.reason" clearable placeholder="请输入回退理由" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" name="TaskRollbackDialogForm" setup>
+import * as TaskApi from '@/api/bpm/task'
+
+const message = useMessage() // 消息弹窗
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+const formData = ref({
+  id: '',
+  targetDefinitionKey: undefined,
+  reason: ''
+})
+const formRules = ref({
+  targetDefinitionKey: [{ required: true, message: '必须选择回退节点', trigger: 'change' }],
+  reason: [{ required: true, message: '回退理由不能为空', trigger: 'blur' }]
+})
+
+const formRef = ref() // 表单 Ref
+const returnList = ref([])
+/** 打开弹窗 */
+const open = async (id: string) => {
+  returnList.value = await TaskApi.getReturnList({ taskId: id })
+  if (returnList.value.length === 0) {
+    message.warning('当前没有可回退的节点')
+    return false
+  }
+  dialogVisible.value = true
+  resetForm()
+  formData.value.id = id
+}
+defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    await TaskApi.returnTask(formData.value)
+    message.success('回退成功')
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: '',
+    targetDefinitionKey: undefined,
+    reason: ''
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/bpm/processInstance/detail/TaskSubSignDialogForm.vue

@@ -0,0 +1,85 @@
+<template>
+  <Dialog v-model="dialogVisible" title="减签" width="500">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="110px"
+    >
+      <el-form-item label="减签任务" prop="id">
+        <el-radio-group v-model="formData.id">
+          <el-radio-button v-for="item in subTaskList" :key="item.id" :label="item.id">
+            {{ item.name }}({{ item.assigneeUser.deptName }}{{ item.assigneeUser.nickname }}--审批)
+          </el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="减签理由" prop="reason">
+        <el-input v-model="formData.reason" clearable placeholder="请输入减签理由" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" name="TaskRollbackDialogForm" setup>
+import * as TaskApi from '@/api/bpm/task'
+import { isEmpty } from '@/utils/is'
+
+const message = useMessage() // 消息弹窗
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+const formData = ref({
+  id: '',
+  reason: ''
+})
+const formRules = ref({
+  id: [{ required: true, message: '必须选择减签任务', trigger: 'change' }],
+  reason: [{ required: true, message: '减签理由不能为空', trigger: 'blur' }]
+})
+
+const formRef = ref() // 表单 Ref
+const subTaskList = ref([])
+/** 打开弹窗 */
+const open = async (id: string) => {
+  subTaskList.value = await TaskApi.getChildrenTaskList(id)
+  if (isEmpty(subTaskList.value)) {
+    message.warning('当前没有可减签的任务')
+    return false
+  }
+  dialogVisible.value = true
+  resetForm()
+}
+defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    await TaskApi.taskSubSign(formData.value)
+    message.success('减签成功')
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: '',
+    reason: ''
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/bpm/processInstance/detail/TaskUpdateAssigneeForm.vue

@@ -0,0 +1,93 @@
+<template>
+  <Dialog v-model="dialogVisible" title="转派审批人" width="500">
+    <el-form
+      ref="formRef"
+      v-loading="formLoading"
+      :model="formData"
+      :rules="formRules"
+      label-width="110px"
+    >
+      <el-form-item label="新审批人" prop="assigneeUserId">
+        <userSelect
+          v-model="formData.assigneeUserId"
+          v-bind="userVBind"
+          class="w-100%"
+        ></userSelect>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import * as TaskApi from '@/api/bpm/task'
+import * as UserApi from '@/api/system/user'
+import { useUserStoreWithOut } from '@/store/modules/user'
+
+defineOptions({ name: 'BpmTaskUpdateAssigneeForm' })
+
+const userStore = useUserStoreWithOut()
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+const formData = ref({
+  id: '',
+  assigneeUserId: undefined
+})
+const formRules = ref({
+  assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }]
+})
+
+const formRef = ref() // 表单 Ref
+const userList = ref<any[]>([]) // 用户列表
+const userVBind = {
+  prop: 'assigneeUserId',
+  type: 'edit',
+  column: {
+    label: '新审批人',
+    findType: 'all',
+    multiple: false,
+    columnKey: ['sex', 'post', 'deptName'],
+    disabledIds: [userStore.user.id]
+  }
+}
+
+/** 打开弹窗 */
+const open = async (id: string) => {
+  dialogVisible.value = true
+  resetForm()
+  formData.value.id = id
+  // 获得用户列表
+  userList.value = await UserApi.getSimpleUserList()
+}
+defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    await TaskApi.updateTaskAssignee(formData.value)
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: '',
+    assigneeUserId: undefined
+  }
+  formRef.value?.resetFields()
+}
+</script>

src/views/bpm/processInstance/detail/index.vue

@@ -0,0 +1,327 @@
+<template>
+  <ContentWrap>
+    <!-- 审批信息 -->
+    <el-card
+      v-for="(item, index) in runningTasks"
+      :key="index"
+      v-loading="processInstanceLoading"
+      class="box-card"
+    >
+      <template #header>
+        <span class="el-icon-picture-outline">审批任务【{{ item.name }}】</span>
+      </template>
+      <el-col :span="24">
+        <el-form
+          :ref="'form' + index"
+          :model="auditForms[index]"
+          :rules="auditRule"
+          label-width="100px"
+        >
+          <el-form-item v-if="processInstance && processInstance.name" label="流程名">
+            {{ processInstance.name }}
+          </el-form-item>
+          <el-form-item v-if="processInstance && processInstance.startUser" label="流程发起人">
+            {{ processInstance.startUser.nickname }}
+            <el-tag size="small" type="info">{{ processInstance.startUser.deptName }}</el-tag>
+          </el-form-item>
+          <el-form-item label="审批建议" prop="reason">
+            <el-input
+              v-model="auditForms[index].reason"
+              placeholder="请输入审批建议"
+              type="textarea"
+            />
+          </el-form-item>
+        </el-form>
+        <div style="margin-bottom: 20px; margin-left: 10%; font-size: 14px">
+          <el-button type="success" @click="handleAudit(item, true)">
+            <Icon icon="ep:select" />
+            通过
+          </el-button>
+          <el-button type="danger" @click="handleAudit(item, false)">
+            <Icon icon="ep:close" />
+            不通过
+          </el-button>
+          <el-button type="primary" @click="openTaskUpdateAssigneeForm(item.id)">
+            <Icon icon="ep:edit" />
+            转办
+          </el-button>
+          <el-button type="primary" @click="handleDelegate(item)">
+            <Icon icon="ep:position" />
+            委派
+          </el-button>
+          <el-button type="primary" @click="handleSign(item)">
+            <Icon icon="ep:plus" />
+            加签
+          </el-button>
+          <el-button type="warning" @click="handleBack(item)">
+            <Icon icon="ep:back" />
+            回退
+          </el-button>
+        </div>
+      </el-col>
+    </el-card>
+
+    <div id="Printer">
+    <!-- 申请信息 -->
+    <el-card v-loading="processInstanceLoading" class="box-card" 
+      >
+      <template #header>
+        <span class="el-icon-document">申请信息【{{ processInstance.name  }}】</span>
+         <el-button type="success" @click="printPage()">
+            <Icon icon="ep:printer" />
+            打印表单
+          </el-button>
+      </template>
+      <!-- 情况一：流程表单 -->
+      <el-col v-if="processInstance?.processDefinition?.formType === 10" :span="24">
+        <FormView form-type="view" show-type="view" v-bind="detailForm"></FormView>
+      </el-col>
+      <!-- 情况二：业务表单 -->
+      <div v-if="processInstance?.processDefinition?.formType === 20">
+        <BusinessFormComponent :id="processInstance.businessKey" />
+      </div>
+    </el-card>
+
+    <!-- 审批记录 -->
+    <ProcessInstanceTaskList :loading="tasksLoad" :tasks="tasks" />
+    </div>
+    <!-- 高亮流程图 -->
+    <ProcessInstanceBpmnViewer
+      :id="`${id}`"
+      :bpmn-xml="bpmnXML"
+      :loading="processInstanceLoading"
+      :process-instance="processInstance"
+      :tasks="tasks"
+    />
+
+    <!-- 弹窗：转派审批人 -->
+    <TaskUpdateAssigneeForm ref="taskUpdateAssigneeFormRef" @success="getDetail" />
+    <!-- 弹窗，回退节点 -->
+    <TaskReturnDialog ref="taskReturnDialogRef" @success="getDetail" />
+    <!-- 委派，将任务委派给别人处理，处理完成后，会重新回到原审批人手中-->
+    <TaskDelegateForm ref="taskDelegateForm" @success="getDetail" />
+    <!-- 加签，当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
+    <TaskAddSignDialogForm ref="taskAddSignDialogForm" @success="getDetail" />
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import { useUserStore } from '@/store/modules/user'
+import * as DefinitionApi from '@/api/bpm/definition'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import * as TaskApi from '@/api/bpm/task'
+import TaskUpdateAssigneeForm from './TaskUpdateAssigneeForm.vue'
+import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
+import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
+import TaskReturnDialog from './TaskReturnDialogForm.vue'
+import TaskDelegateForm from './TaskDelegateForm.vue'
+import TaskAddSignDialogForm from './TaskAddSignDialogForm.vue'
+import { registerComponent } from '@/utils/routerHelper'
+import { isEmpty } from '@/utils/is'
+import router from '@/router/index'
+import { $Print } from '@smallwei/avue'
+
+defineOptions({ name: 'BpmProcessInstanceDetail' })
+
+const { query } = useRoute() // 查询参数
+const message = useMessage() // 消息弹窗
+const { proxy } = getCurrentInstance() as any
+
+const userId = useUserStore().getUser.id // 当前登录的编号
+const id = query.id as unknown as number // 流程实例的编号
+const processInstanceLoading = ref(false) // 流程实例的加载中
+const processInstance = ref<any>({}) // 流程实例
+const bpmnXML = ref('') // BPMN XML
+const tasksLoad = ref(true) // 任务的加载中
+const tasks = ref<any[]>([]) // 任务列表
+// ========== 审批信息 ==========
+const runningTasks = ref<any[]>([]) // 运行中的任务
+const auditForms = ref<any[]>([]) // 审批任务的表单
+const auditRule = reactive({
+  reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
+})
+// ========== 申请信息 ==========
+const detailForm = ref({
+  formId: '',
+  optionsData: {},
+  defaultData: {}
+})
+
+/** 处理审批通过和不通过的操作 */
+const handleAudit = async (task, pass) => {
+  // 1.1 获得对应表单
+  const index = runningTasks.value.indexOf(task)
+  const auditFormRef = proxy.$refs['form' + index][0]
+  // 1.2 校验表单
+  const elForm = unref(auditFormRef)
+  if (!elForm) return
+  const valid = await elForm.validate()
+  if (!valid) return
+
+  // 2.1 提交审批
+  const data = {
+    id: task.id,
+    reason: auditForms.value[index].reason
+  }
+  if (pass) {
+    await TaskApi.approveTask(data)
+    message.success('审批通过成功')
+  } else {
+    await TaskApi.rejectTask(data)
+    message.success('审批不通过成功')
+  }
+  // 2.2 加载最新数据
+  getDetail()
+}
+
+const printPage = async () => {
+ 
+ const { href } = router.resolve({ name: 'BpmProcessInstanceInfo', 
+                                  query: { id: String(id), isPrint: '1'  }
+                                })
+  window.open(href, '_blank', 'noopener,noreferrer')
+}
+
+/** 转派审批人 */
+const taskUpdateAssigneeFormRef = ref()
+const openTaskUpdateAssigneeForm = (id: string) => {
+  taskUpdateAssigneeFormRef.value.open(id)
+}
+
+const taskDelegateForm = ref()
+/** 处理审批退回的操作 */
+const handleDelegate = async (task) => {
+  taskDelegateForm.value.open(task.id)
+}
+
+//回退弹框组件
+const taskReturnDialogRef = ref()
+/** 处理审批退回的操作 */
+const handleBack = async (task) => {
+  taskReturnDialogRef.value.open(task.id)
+}
+
+const taskAddSignDialogForm = ref()
+/** 处理审批加签的操作 */
+const handleSign = async (task) => {
+  taskAddSignDialogForm.value.open(task.id)
+}
+
+/** 获得详情 */
+const getDetail = () => {
+  // 1. 获得流程实例相关
+  getProcessInstance()
+  // 2. 获得流程任务列表（审批记录）
+  getTaskList()
+}
+
+/** 加载流程实例 */
+const BusinessFormComponent = ref(null) // 异步组件
+const getProcessInstance = async () => {
+  try {
+    processInstanceLoading.value = true
+    const data = await ProcessInstanceApi.getProcessInstance(id)
+    if (!data) {
+      message.error('查询不到流程信息！')
+      return
+    }
+    processInstance.value = data
+
+    // 设置表单信息
+    const processDefinition = data.processDefinition
+    if (processDefinition.formType === 10) {
+      detailForm.value.formId = processDefinition.formId
+      detailForm.value.optionsData = JSON.parse(processDefinition.formConf)
+      detailForm.value.defaultData = data.formVariables
+      // setConfAndFields2(
+      //   detailForm,
+      //   processDefinition.formConf,
+      //   processDefinition.formFields,
+      //   data.formVariables
+      // )
+      // nextTick().then(() => {
+      //   fApi.value?.fapi?.btn.show(false)
+      //   fApi.value?.fapi?.resetBtn.show(false)
+      //   fApi.value?.fapi?.disabled(true)
+      // })
+    } else {
+      BusinessFormComponent.value = registerComponent(data.processDefinition.formCustomViewPath)
+    }
+
+    // 加载流程图
+    bpmnXML.value = await DefinitionApi.getProcessDefinitionBpmnXML(processDefinition.id as number)
+  } finally {
+    processInstanceLoading.value = false
+  }
+}
+
+/** 加载任务列表 */
+const getTaskList = async () => {
+  try {
+    // 获得未取消的任务
+    tasksLoad.value = true
+    const data = await TaskApi.getTaskListByProcessInstanceId(id)
+    tasks.value = []
+    // 1.1 移除已取消的审批
+    data.forEach((task) => {
+      if (task.result !== 4) {
+        tasks.value.push(task)
+      }
+    })
+    // 1.2 排序，将未完成的排在前面，已完成的排在后面；
+    tasks.value.sort((a, b) => {
+      // 有已完成的情况，按照完成时间倒序
+      if (a.endTime && b.endTime) {
+        return b.endTime - a.endTime
+      } else if (a.endTime) {
+        return 1
+      } else if (b.endTime) {
+        return -1
+        // 都是未完成，按照创建时间倒序
+      } else {
+        return b.createTime - a.createTime
+      }
+    })
+
+    // 获得需要自己审批的任务
+    runningTasks.value = []
+    auditForms.value = []
+    loadRunningTask(tasks.value)
+  } finally {
+    tasksLoad.value = false
+  }
+}
+
+/**
+ * 设置 runningTasks 中的任务
+ */
+const loadRunningTask = (tasks) => {
+  tasks.forEach((task) => {
+    if (!isEmpty(task.children)) {
+      loadRunningTask(task.children)
+    }
+    // 2.1 只有待处理才需要
+    if (task.result !== 1 && task.result !== 6) {
+      return
+    }
+    // 2.2 自己不是处理人
+    if (!task.assigneeUser || task.assigneeUser.id !== userId) {
+      return
+    }
+    // 2.3 添加到处理任务
+    runningTasks.value.push({ ...task })
+    auditForms.value.push({
+      reason: ''
+    })
+  })
+}
+
+/** 初始化 */
+onMounted(async() => {
+  await getDetail()
+  await nextTick()
+ if (query.isPrint === '1') {
+    await new Promise(resolve => setTimeout(resolve, 2000))
+    $Print('#Printer')
+  }
+})
+</script>

src/views/bpm/processInstance/index.vue

@@ -0,0 +1,254 @@
+<template>
+  <ContentWrap>
+    <avue-crud
+      ref="crudRef"
+      v-model="tableForm"
+      v-model:page="tablePage"
+      v-model:search="tableSearch"
+      :table-loading="loading"
+      :data="tableData"
+      :option="tableOption"
+      :permission="permission"
+      @search-change="searchChange"
+      @search-reset="resetChange"
+      @refresh-change="getTableData"
+      @size-change="sizeChange"
+      @current-change="currentChange"
+    >
+      <template #category="{ row }">
+        <dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="row.category || ''" />
+      </template>
+      <template #status="scope">
+        <dict-tag
+          v-if="scope.row.status !== undefined"
+          :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
+          :value="scope.row.status"
+        />
+      </template>
+      <template #tasks="scope">
+        <el-button type="primary" v-for="task in scope.row.tasks" :key="task.id" link>
+          <span>{{ task.name }}</span>
+        </el-button>
+      </template>
+      <template #result="scope">
+        <dict-tag
+          v-if="scope.row.result !== undefined"
+          :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT"
+          :value="scope.row.result"
+        />
+      </template>
+      <template #menu-left>
+        <el-button type="primary" v-hasPermi="['bpm:process-instance:query']" @click="handleCreate">
+          <Icon icon="ep:plus" class="mr-5px" /> 发起流程
+        </el-button>
+      </template>
+      <!-- 自定义操作栏 -->
+      <template #menu="{ row }">
+        <el-button
+          link
+          type="primary"
+          v-hasPermi="['bpm:process-instance:cancel']"
+          @click="handleDetail(row)"
+        >
+          详情
+        </el-button>
+        <!-- <el-button
+          link
+          type="danger"
+          v-if="row.result === 1"
+          v-hasPermi="['bpm:process-instance:query']"
+          @click="handleCancel(row)"
+        >
+          取消
+        </el-button> -->
+      </template>
+    </avue-crud>
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter, getSearchDate } from '@/utils/formatTime'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+
+defineOptions({ name: 'BpmCCProcessInstance' })
+const router = useRouter() // 路由
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const { getCurrPermi } = useCrudPermi()
+
+const loading = ref(true) // 列表的加载中
+const tableOption = reactive({
+  addBtn: false,
+  editBtn: false,
+  delBtn: false,
+  align: 'center',
+  headerAlign: 'center',
+  searchMenuSpan: 6,
+  searchMenuPosition: 'left',
+  labelSuffix: ' ',
+  span: 24,
+  dialogWidth: '50%',
+  menuWidth: 170,
+  column: {
+    id: {
+      label: '流程编号',
+      width: 320
+    },
+    name: {
+      label: '流程名称',
+      search: true
+    },
+    category: {
+      label: '流程分类',
+      search: true,
+      type: 'select',
+      span: 12,
+      dicData: getIntDictOptions(DICT_TYPE.BPM_MODEL_CATEGORY),
+      rules: [{ required: true, message: '流程分类不能为空', trigger: 'blur' }]
+    },
+    tasks: {
+      label: '当前审批任务'
+    },
+    status: {
+      label: '状态',
+      search: true,
+      type: 'select',
+      span: 12,
+      dicData: getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS),
+      rules: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
+    },
+    result: {
+      label: '结果',
+      search: true,
+      type: 'select',
+      span: 12,
+      dicData: getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT),
+      rules: [{ required: true, message: '结果不能为空', trigger: 'blur' }]
+    },
+    createTime: {
+      label: '提交时间',
+      searchRange: true,
+      search: true,
+      display: false,
+      type: 'date',
+      searchType: 'daterange',
+      valueFormat: 'YYYY-MM-DD',
+      width: 180,
+      startPlaceholder: '开始时间',
+      endPlaceholder: '结束时间',
+      formatter: (row, val, value, column) => {
+        return dateFormatter(row, column, val)
+      }
+    },
+    endTime: {
+      label: '结束时间',
+      searchRange: true,
+      display: false,
+      type: 'datetime',
+      width: 180,
+      startPlaceholder: '开始时间',
+      endPlaceholder: '结束时间',
+      formatter: (row, val, value, column) => {
+        return dateFormatter(row, column, val)
+      }
+    }
+  }
+})
+//表格配置
+const tableForm = ref<{ id?: number }>({})
+const tableData = ref([])
+const tableSearch = ref<any>({})
+const tablePage = ref({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0
+})
+
+const permission = getCurrPermi(['bpm:process-instance'])
+const crudRef = ref()
+
+useCrudHeight(crudRef)
+
+/** 查询列表 */
+const getTableData = async () => {
+  loading.value = true
+
+  let searchObj = {
+    ...tableSearch.value,
+    pageNo: tablePage.value.currentPage,
+    pageSize: tablePage.value.pageSize
+  }
+
+  if (searchObj.createTime?.length) {
+    searchObj.createTime = getSearchDate(searchObj.createTime)
+  } else delete searchObj.createTime
+
+  for (let key in searchObj) if (searchObj[key] === '') delete searchObj[key]
+  try {
+    const data = await ProcessInstanceApi.getMyProcessInstancePage(searchObj)
+    tableData.value = data.list
+    tablePage.value.total = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const searchChange = (params, done) => {
+  tablePage.value.currentPage = 1
+  getTableData().finally(() => {
+    done()
+  })
+}
+
+/** 清空按钮操作 */
+const resetChange = () => {
+  searchChange({}, () => {})
+}
+
+const sizeChange = (pageSize) => {
+  tablePage.value.pageSize = pageSize
+  resetChange()
+}
+
+const currentChange = (currentPage) => {
+  tablePage.value.currentPage = currentPage
+  getTableData()
+}
+/** 取消按钮操作 */
+const handleCancel = async (row) => {
+  // 二次确认
+  const { value } = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
+    confirmButtonText: t('common.ok'),
+    cancelButtonText: t('common.cancel'),
+    inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
+    inputErrorMessage: '取消原因不能为空'
+  })
+  // 发起取消
+  await ProcessInstanceApi.cancelProcessInstance(row.id, value)
+  message.success('取消成功')
+  // 刷新列表
+  await getTableData()
+}
+
+/** 发起流程操作 **/
+const handleCreate = () => {
+  router.push({
+    name: 'BpmProcessInstanceCreate'
+  })
+}
+/** 查看详情 */
+const handleDetail = (row) => {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.id
+    }
+  })
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  await getTableData()
+})
+</script>

src/views/bpm/task/done/index.vue

@@ -0,0 +1,178 @@
+<template>
+  <ContentWrap>
+    <avue-crud
+      ref="crudRef"
+      v-model="tableForm"
+      v-model:page="tablePage"
+      v-model:search="tableSearch"
+      :data="tableData"
+      :option="tableOption"
+      :before-open="beforeOpen"
+      @search-change="searchChange"
+      @search-reset="resetChange"
+      @refresh-change="getTableData"
+      @size-change="sizeChange"
+      @current-change="currentChange"
+    >
+      <template #menu="{ row }">
+        <el-button link type="primary" @click="handleAudit(row)">流程</el-button>
+      </template>
+      <template #result="scope">
+        <dict-tag
+          v-if="scope.row.result"
+          :type="DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT"
+          :value="scope.row.result"
+        />
+      </template>
+    </avue-crud>
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import { dateFormatter, getSearchDate } from '@/utils/formatTime'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import * as TaskApi from '@/api/bpm/task'
+
+defineOptions({ name: 'BpmDoneTask' })
+
+const { push } = useRouter() // 路由
+
+const loading = ref(true) // 列表的加载中
+const tableOption = reactive({
+  addBtn: false,
+  editBtn: false,
+  delBtn: false,
+  viewBtn: true,
+  viewBtnText: '详情',
+  viewBtnIcon: 'none',
+  align: 'center',
+  headerAlign: 'center',
+  searchMenuSpan: 6,
+  searchMenuPosition: 'left',
+  labelSuffix: ' ',
+  span: 24,
+  dialogWidth: '50%',
+  column: {
+    id: {
+      label: '任务编号',
+      width: 300
+    },
+    name: {
+      label: '任务名称',
+      search: true
+    },
+    processInstanceName: {
+      label: '所属流程',
+      bind: 'processInstance.name'
+    },
+    processInstanceStartUserNickname: {
+      label: '流程发起人',
+      bind: 'processInstance.startUserNickname'
+    },
+    result: {
+      label: '状态',
+      type: 'select',
+      dicData: getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT)
+    },
+    reason: {
+      label: '原因'
+    },
+    searchCreateTime: {
+      label: '创建时间',
+      search: true,
+      display: false,
+      hide: true,
+      type: 'daterange',
+      searchRange: true,
+      valueFormat: 'YYYY-MM-DD',
+      startPlaceholder: '开始时间',
+      endPlaceholder: '结束时间'
+    },
+    createTime: {
+      label: '创建时间',
+      type: 'datetime',
+      width: 180,
+      formatter: (row, val, value, column) => {
+        return dateFormatter(row, column, val)
+      }
+    }
+  }
+}) //表格配置
+const tableForm = ref<any>({})
+const tableData = ref([])
+const tableSearch = ref<any>({})
+const tablePage = ref({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0
+})
+const crudRef = ref()
+
+useCrudHeight(crudRef)
+
+/** 查询列表 */
+const getTableData = async () => {
+  loading.value = true
+
+  let searchObj = {
+    ...tableSearch.value,
+    pageNo: tablePage.value.currentPage,
+    pageSize: tablePage.value.pageSize
+  }
+
+  if (searchObj.searchCreateTime?.length) {
+    searchObj.createTime = getSearchDate(searchObj.searchCreateTime)
+  } else delete searchObj.createTime
+  delete searchObj.searchCreateTime
+
+  for (let key in searchObj) if (searchObj[key] === '') delete searchObj[key]
+  try {
+    const data = await TaskApi.getDoneTaskPage(searchObj)
+    tableData.value = data.list
+    tablePage.value.total = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const searchChange = (params, done) => {
+  tablePage.value.currentPage = 1
+  getTableData().finally(() => {
+    done()
+  })
+}
+
+/** 清空按钮操作 */
+const resetChange = () => {
+  searchChange({}, () => {})
+}
+
+const sizeChange = (pageSize) => {
+  tablePage.value.pageSize = pageSize
+  resetChange()
+}
+
+const currentChange = (currentPage) => {
+  tablePage.value.currentPage = currentPage
+  getTableData()
+}
+
+const beforeOpen = (done, type) => {
+  done()
+}
+
+/** 处理审批按钮 */
+const handleAudit = (row) => {
+  push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.processInstance.id
+    }
+  })
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  await getTableData()
+})
+</script>

src/views/bpm/task/todo/index.vue

@@ -0,0 +1,183 @@
+<template>
+  <ContentWrap>
+    <avue-crud
+      ref="crudRef"
+      v-model="tableForm"
+      v-model:page="tablePage"
+      v-model:search="tableSearch"
+      :data="tableData"
+      :option="tableOption"
+      :permission="permission"
+      @search-change="searchChange"
+      @search-reset="resetChange"
+      @refresh-change="getTableData"
+      @size-change="sizeChange"
+      @current-change="currentChange"
+    >
+      <template #suspensionState="scope">
+        <el-tag v-if="scope.row.suspensionState === 1" type="success">激活</el-tag>
+        <el-tag v-if="scope.row.suspensionState === 2" type="warning">挂起</el-tag>
+      </template>
+      <template #processInstanceName="scope">
+        {{ scope.row.processInstance.name }}
+      </template>
+      <template #processInstanceStartUserNickname="scope">
+        {{ scope.row.processInstance.startUserNickname }}
+      </template>
+      <template #menu="{ row }">
+        <el-button link type="primary" @click="handleAudit(row)">审批</el-button>
+<!--        <el-button link type="primary" @click="handleCC(row)">抄送</el-button>-->
+      </template>
+    </avue-crud>
+    <TaskCCDialogForm ref="taskCCDialogForm" />
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import { dateFormatter, getSearchDate } from '@/utils/formatTime'
+import * as TaskApi from '@/api/bpm/task'
+import TaskCCDialogForm from '../../processInstance/detail/TaskCCDialogForm.vue'
+
+const { getCurrPermi } = useCrudPermi()
+
+defineOptions({ name: 'BpmDoneTask' })
+
+// const message = useMessage() // 消息弹窗
+// const { t } = useI18n() // 国际化
+const { push } = useRouter() // 路由
+
+const loading = ref(true) // 列表的加载中
+const tableOption = reactive({
+  addBtn: false,
+  editBtn: false,
+  delBtn: false,
+  align: 'center',
+  headerAlign: 'center',
+  searchMenuSpan: 6,
+  searchMenuPosition: 'left',
+  labelSuffix: ' ',
+  span: 24,
+  dialogWidth: '50%',
+  column: {
+    id: {
+      label: '任务编号',
+      width: 300,
+      display: false
+    },
+    name: {
+      label: '任务名称',
+      search: true
+    },
+    processInstanceName: {
+      label: '所属流程'
+    },
+    processInstanceStartUserNickname: {
+      label: '流程发起人'
+    },
+    suspensionState: {
+      label: '任务状态',
+
+      type: 'select',
+      span: 12,
+      dicData: []
+    },
+    createTime: {
+      label: '创建时间',
+      searchRange: true,
+      search: true,
+      display: false,
+      type: 'date',
+      searchType: 'daterange',
+      valueFormat: 'YYYY-MM-DD',
+      width: 180,
+      startPlaceholder: '开始时间',
+      endPlaceholder: '结束时间',
+      formatter: (row, val, value, column) => {
+        return dateFormatter(row, column, val)
+      }
+    }
+  }
+}) //表格配置
+const tableForm = ref<{ id?: number }>({})
+const tableData = ref([])
+const tableSearch = ref<any>({})
+const tablePage = ref({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0
+})
+
+const popupObj = ref({ detail: false })
+const currRow = ref<any>({})
+const permission = getCurrPermi(['bpm:task'])
+const crudRef = ref()
+
+useCrudHeight(crudRef)
+
+/** 查询列表 */
+const getTableData = async () => {
+  loading.value = true
+
+  let searchObj = {
+    ...tableSearch.value,
+    pageNo: tablePage.value.currentPage,
+    pageSize: tablePage.value.pageSize
+  }
+
+  if (searchObj.createTime?.length) {
+    searchObj.createTime = getSearchDate(searchObj.createTime)
+  } else delete searchObj.createTime
+
+  for (let key in searchObj) if (searchObj[key] === '') delete searchObj[key]
+  try {
+    const data = await TaskApi.getTodoTaskPage(searchObj)
+    tableData.value = data.list
+    tablePage.value.total = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const searchChange = (params, done) => {
+  tablePage.value.currentPage = 1
+  getTableData().finally(() => {
+    done()
+  })
+}
+
+/** 清空按钮操作 */
+const resetChange = () => {
+  searchChange({}, () => {})
+}
+
+const sizeChange = (pageSize) => {
+  tablePage.value.pageSize = pageSize
+  resetChange()
+}
+
+const currentChange = (currentPage) => {
+  tablePage.value.currentPage = currentPage
+  getTableData()
+}
+
+/** 处理审批按钮 */
+const handleAudit = (row) => {
+  push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.processInstance.id
+    }
+  })
+}
+
+const taskCCDialogForm = ref()
+/** 处理抄送按钮 */
+const handleCC = (row) => {
+  taskCCDialogForm.value.open(row)
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  await getTableData()
+})
+</script>

src/views/bpm/taskAssignRule/TaskAssignRuleForm.vue

@@ -0,0 +1,250 @@
+<template>
+  <Dialog v-model="dialogVisible" title="修改任务规则" width="600">
+    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
+      <el-form-item label="任务名称" prop="taskDefinitionName">
+        <el-input v-model="formData.taskDefinitionName" disabled placeholder="请输入流标标识" />
+      </el-form-item>
+      <el-form-item label="任务标识" prop="taskDefinitionKey">
+        <el-input v-model="formData.taskDefinitionKey" disabled placeholder="请输入任务标识" />
+      </el-form-item>
+      <el-form-item label="规则类型" prop="type">
+        <el-select v-model="formData.type" clearable style="width: 100%">
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="formData.type === 10" label="指定角色" prop="roleIds">
+        <el-select v-model="formData.roleIds" clearable multiple style="width: 100%">
+          <el-option
+            v-for="item in roleOptions"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        v-if="formData.type === 20 || formData.type === 21"
+        label="指定部门"
+        prop="deptIds"
+        span="24"
+      >
+        <el-tree-select
+          ref="treeRef"
+          v-model="formData.deptIds"
+          :data="deptTreeOptions"
+          :props="defaultProps"
+          empty-text="加载中，请稍后"
+          multiple
+          node-key="id"
+          show-checkbox
+        />
+      </el-form-item>
+      <el-form-item v-if="formData.type === 22" label="指定岗位" prop="postIds" span="24">
+        <el-select v-model="formData.postIds" clearable multiple style="width: 100%">
+          <el-option
+            v-for="item in postOptions"
+            :key="parseInt(item.id)"
+            :label="item.name"
+            :value="parseInt(item.id)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        v-if="formData.type === 30 || formData.type === 31 || formData.type === 32"
+        label="指定用户"
+        prop="userIds"
+        span="24"
+      >
+        <el-select v-model="formData.userIds" clearable multiple style="width: 100%">
+          <el-option
+            v-for="item in userOptions"
+            :key="parseInt(item.id)"
+            :label="item.nickname"
+            :value="parseInt(item.id)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="formData.type === 40" label="指定用户组" prop="userGroupIds">
+        <el-select v-model="formData.userGroupIds" clearable multiple style="width: 100%">
+          <el-option
+            v-for="item in userGroupOptions"
+            :key="parseInt(item.id)"
+            :label="item.name"
+            :value="parseInt(item.id)"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="formData.type === 50" label="指定脚本" prop="scripts">
+        <el-select v-model="formData.scripts" clearable multiple style="width: 100%">
+          <el-option
+            v-for="dict in taskAssignScriptDictDatas"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <!-- 操作按钮 -->
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as TaskAssignRuleApi from '@/api/bpm/taskAssignRule'
+import * as RoleApi from '@/api/system/role'
+import * as DeptApi from '@/api/system/dept'
+import * as PostApi from '@/api/system/post'
+import * as UserApi from '@/api/system/user'
+import * as UserGroupApi from '@/api/bpm/userGroup'
+
+defineOptions({ name: 'BpmTaskAssignRuleForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+  type: Number(undefined),
+  modelId: '',
+  options: [],
+  roleIds: [],
+  deptIds: [],
+  postIds: [],
+  userIds: [],
+  userGroupIds: [],
+  scripts: []
+})
+const formRules = reactive({
+  type: [{ required: true, message: '规则类型不能为空', trigger: 'change' }],
+  roleIds: [{ required: true, message: '指定角色不能为空', trigger: 'change' }],
+  deptIds: [{ required: true, message: '指定部门不能为空', trigger: 'change' }],
+  postIds: [{ required: true, message: '指定岗位不能为空', trigger: 'change' }],
+  userIds: [{ required: true, message: '指定用户不能为空', trigger: 'change' }],
+  userGroupIds: [{ required: true, message: '指定用户组不能为空', trigger: 'change' }],
+  scripts: [{ required: true, message: '指定脚本不能为空', trigger: 'change' }]
+})
+const formRef = ref() // 表单 Ref
+const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
+const deptOptions = ref<DeptApi.DeptVO[]>([]) // 部门列表
+const deptTreeOptions = ref() // 部门树
+const postOptions = ref<PostApi.PostVO[]>([]) // 岗位列表
+const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
+const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
+const taskAssignScriptDictDatas = getIntDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_SCRIPT)
+
+/** 打开弹窗 */
+const open = async (modelId: string, row: TaskAssignRuleApi.TaskAssignVO) => {
+  // 1. 先重置表单
+  resetForm()
+  // 2. 再设置表单
+  formData.value = {
+    ...row,
+    modelId: modelId,
+    options: [],
+    roleIds: [],
+    deptIds: [],
+    postIds: [],
+    userIds: [],
+    userGroupIds: [],
+    scripts: []
+  }
+  // 将 options 赋值到对应的 roleIds 等选项
+  if (row.type === 10) {
+    formData.value.roleIds.push(...row.options)
+  } else if (row.type === 20 || row.type === 21) {
+    formData.value.deptIds.push(...row.options)
+  } else if (row.type === 22) {
+    formData.value.postIds.push(...row.options)
+  } else if (row.type === 30 || row.type === 31 || row.type === 32) {
+    formData.value.userIds.push(...row.options)
+  } else if (row.type === 40) {
+    formData.value.userGroupIds.push(...row.options)
+  } else if (row.type === 50) {
+    formData.value.scripts.push(...row.options)
+  }
+  // 打开弹窗
+  dialogVisible.value = true
+
+  // 获得角色列表
+  roleOptions.value = await RoleApi.getSimpleRoleList()
+  // 获得部门列表
+  deptOptions.value = await DeptApi.getSimpleDeptList()
+  deptTreeOptions.value = handleTree(deptOptions.value, 'id')
+  // 获得岗位列表
+  postOptions.value = await PostApi.getSimplePostList()
+  // 获得用户列表
+  userOptions.value = await UserApi.getSimpleUserList()
+  // 获得用户组列表
+  userGroupOptions.value = await UserGroupApi.getSimpleUserGroupList()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+
+  // 构建表单
+  const form = {
+    ...formData.value,
+    taskDefinitionName: undefined
+  }
+  // 将 roleIds 等选项赋值到 options 中
+  if (form.type === 10) {
+    form.options = form.roleIds
+  } else if (form.type === 20 || form.type === 21) {
+    form.options = form.deptIds
+  } else if (form.type === 22) {
+    form.options = form.postIds
+  } else if (form.type === 30 || form.type === 31 || form.type === 32) {
+    form.options = form.userIds
+  } else if (form.type === 40) {
+    form.options = form.userGroupIds
+  } else if (form.type === 50) {
+    form.options = form.scripts
+  }
+  form.roleIds = undefined
+  form.deptIds = undefined
+  form.postIds = undefined
+  form.userIds = undefined
+  form.userGroupIds = undefined
+  form.scripts = undefined
+
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = form as unknown as TaskAssignRuleApi.TaskAssignVO
+    if (!data.id) {
+      await TaskAssignRuleApi.createTaskAssignRule(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await TaskAssignRuleApi.updateTaskAssignRule(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formRef.value?.resetFields()
+}
+</script>

src/views/bpm/taskAssignRule/index.vue

@@ -0,0 +1,278 @@
+<template>
+  <ContentWrap>
+    <avue-crud
+      ref="crudRef"
+      v-model="tableForm"
+      :data="tableData"
+      :permission="permission"
+      :option="tableOption"
+      :table-loading="loading"
+      @row-update="rowUpdate"
+      @refresh-change="getTableData"
+    >
+      <template #deptIds-form="{ column, disabled }">
+        <DeptSelect
+          v-model="tableForm.deptIds"
+          :column="column"
+          :disabled="disabled"
+          type="edit"
+          prop="deptIds"
+        ></DeptSelect>
+      </template>
+      <template #userIds-form="{ column, disabled }">
+        <UserSelect
+          v-model="tableForm.userIds"
+          :column="column"
+          :disabled="disabled"
+          type="edit"
+          prop="userIds"
+        ></UserSelect>
+      </template>
+    </avue-crud>
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import * as TaskAssignRuleApi from '@/api/bpm/taskAssignRule'
+import * as RoleApi from '@/api/system/role'
+import * as PostApi from '@/api/system/post'
+import * as UserGroupApi from '@/api/bpm/userGroup'
+import { setUserAndDeptName } from '@/components/LowDesign/src/utils/getName'
+import { useLowStoreWithOut } from '@/store/modules/low'
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const { getCurrPermi } = useCrudPermi()
+const lowStore = useLowStoreWithOut()
+
+defineOptions({ name: 'BpmTaskAssignRule' })
+
+const { query } = useRoute() // 查询参数
+
+const loading = ref(true)
+const getRules = (label) => {
+  return [
+    {
+      required: true,
+      message: '请选择' + label,
+      trigger: 'change'
+    }
+  ]
+}
+const getUserKey = (val) => {
+  let key = ''
+  if (val == 10) key = 'roleIds'
+  else if ([20, 21].includes(val)) key = 'deptIds'
+  else if (val == 22) key = 'postIds'
+  else if ([30, 31, 32].includes(val)) key = 'userIds'
+  else if (val == 40) key = 'userGroupIds'
+  else if (val == 50) key = 'scripts'
+  return key
+}
+const tableOption = reactive({
+  border: true,
+  align: 'center',
+  headerAlign: 'center',
+  labelSuffix: ' ',
+  span: 24,
+  labelWidth: 120,
+  dialogWidth: 500,
+  addBtn: false,
+  delBtn: false,
+  calcHeight: 20,
+  column: {
+    taskDefinitionName: { label: '任务名', disabled: true },
+    taskDefinitionKey: { label: '任务标识', disabled: true },
+    type: {
+      label: '规则类型',
+      type: 'select',
+      dicData: getIntDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_RULE_TYPE),
+      rules: getRules('规则类型'),
+      control: (val) => {
+        const columnObj = {
+          roleIds: { display: false },
+          deptIds: { display: false },
+          postIds: { display: false },
+          userIds: { display: false },
+          userGroupIds: { display: false },
+          scripts: { display: false }
+        }
+        const key = getUserKey(val)
+        if (key) columnObj[key].display = true
+        return columnObj
+      }
+    },
+    options: {
+      label: '规则范围',
+      display: false,
+      formatter: (row) => {
+        if (row.ruleModel == 'startEvent') return '-'
+        if (!row.type) return '未指定'
+        const key = getUserKey(row.type)
+        let arr = row.options.map((id) => {
+          if (key == 'deptIds') return lowStore.dicObj.deptSelect?.[id] || id
+          else if (key == 'userIds') return lowStore.dicObj.userSelect?.[id] || id
+          else return dicObj.value[key][id]
+        })
+
+        return `${row.$type}：${arr.join('、')}`
+      }
+    },
+
+    roleIds: {
+      label: '指定角色',
+      type: 'select',
+      dicData: [],
+      hide: true,
+      display: false,
+      rules: getRules('指定角色')
+    },
+    deptIds: {
+      label: '指定部门',
+      hide: true,
+      display: false,
+      findType: 'all',
+      multiple: true,
+      checkStrictly: true,
+      rules: getRules('指定部门')
+    },
+    postIds: {
+      label: '指定岗位',
+      type: 'select',
+      dicData: [],
+      hide: true,
+      display: false,
+      rules: getRules('指定岗位')
+    },
+    userIds: {
+      label: '指定用户',
+      hide: true,
+      display: false,
+      findType: 'all',
+      multiple: true,
+      columnKey: ['sex', 'post', 'deptName'],
+      rules: getRules('指定用户')
+    },
+    userGroupIds: {
+      label: '指定用户组',
+      type: 'select',
+      dicData: [],
+      hide: true,
+      display: false,
+      rules: getRules('指定用户组')
+    },
+    scripts: {
+      label: '指定脚本',
+      type: 'select',
+      dicData: [],
+      hide: true,
+      display: false,
+      rules: getRules('指定脚本')
+    }
+  }
+}) //表格配置
+const tableForm = ref<any>({})
+const tableData = ref<any[]>([])
+const dicObj = ref<any>({})
+
+const permission = getCurrPermi(['bpm:task-assign-rule'])
+const crudRef = ref()
+
+/** 查询列表 */
+const getTableData = async () => {
+  loading.value = true
+  try {
+    const data = await TaskAssignRuleApi.getTaskAssignRuleList({
+      modelId: query.modelId,
+      processDefinitionId: query.processDefinitionId
+    })
+    tableData.value = await formattingTableData(data)
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 编辑操作 */
+const rowUpdate = async (form, index, done, loading) => {
+  const key = getUserKey(form.type)
+  const delKey = ['roleIds', 'deptIds', 'postIds', 'userIds', 'userGroupIds', 'scripts']
+  if (key) {
+    if (typeof form[key] == 'number') form[key] = form[key] + ''
+    const value = form[key]
+    form.options = typeof value == 'string' ? value.split(',') : value
+  }
+  delKey.forEach((prop) => delete form[prop])
+  if (!form.modelId) form.modelId = query.modelId
+  const apiName = form.id ? 'updateTaskAssignRule' : 'createTaskAssignRule'
+  let bool = await TaskAssignRuleApi[apiName](form).catch(() => false)
+  if (bool) {
+    message.success(t('common.updateSuccess'))
+    getTableData()
+    done()
+  } else loading()
+}
+
+const getDicData = () => {
+  return new Promise(async (resolve) => {
+    const keyList = ['roleIds', 'postIds', 'userGroupIds']
+    const promiseArr = [
+      RoleApi.getSimpleRoleList(),
+      PostApi.getSimplePostList(),
+      UserGroupApi.getSimpleUserGroupList()
+    ]
+    const resData = await Promise.all(promiseArr)
+    resData.forEach((data, index) => {
+      const key = keyList[index]
+      dicObj.value[key] = {}
+      tableOption.column[key].dicData = data.map((item) => {
+        const id = item.id + ''
+        const name = item.name
+        dicObj.value[key][id] = name
+        return { label: name, value: id }
+      })
+    })
+    dicObj.value.scripts = {}
+    tableOption.column.scripts.dicData = getIntDictOptions(DICT_TYPE.BPM_TASK_ASSIGN_SCRIPT).map(
+      (item) => {
+        dicObj.value.scripts[item.value] = item.label
+        return { value: item.value + '', label: item.label }
+      }
+    ) as never[]
+    dicObj.value.type = {}
+    tableOption.column.type.dicData.forEach((item) => {
+      dicObj.value.type[item.value] = item.label
+    })
+    resolve(true)
+  })
+}
+const formattingTableData = (data): Promise<any[]> => {
+  return new Promise(async (resolve) => {
+    const deptIdList: any[] = []
+    const userIdList: any[] = []
+    data = data.map((item) => {
+      const key = getUserKey(item.type)
+      item.$type = dicObj.value['type'][item.type]
+      if (key) {
+        if (!item.options) item.options = []
+        item[key] = item.options.join(',')
+        if (['deptIds', 'userIds'].includes(key)) {
+          if (key == 'deptIds') deptIdList.push(...item.options)
+          else userIdList.push(...item.options)
+        }
+      }
+      return item
+    })
+    await setUserAndDeptName({ userIdList, deptIdList })
+    resolve(data)
+  })
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  loading.value = true
+  await getDicData()
+  await getTableData()
+})
+</script>
+
+<style lang="scss"></style>