|
@@ -1,92 +1,138 @@
|
|
|
<template>
|
|
|
<ContentWrap>
|
|
|
- <!-- 列表 -->
|
|
|
- <XTable @register="registerTable">
|
|
|
- <!-- 流程名称 -->
|
|
|
- <template #name_default="{ row }">
|
|
|
- <XTextButton :title="row.name" @click="handleBpmnDetail(row.id)" />
|
|
|
- </template>
|
|
|
- <!-- 流程分类 -->
|
|
|
- <template #category_default="{ row }">
|
|
|
- <DictTag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="Number(row?.category)" />
|
|
|
- </template>
|
|
|
- <!-- 表单信息 -->
|
|
|
- <template #formId_default="{ row }">
|
|
|
- <XTextButton
|
|
|
- v-if="row.formType === 10"
|
|
|
- :title="row.formName"
|
|
|
- @click="handleFormDetail(row)"
|
|
|
- />
|
|
|
- <XTextButton v-else :title="row.formCustomCreatePath" @click="handleFormDetail(row)" />
|
|
|
- </template>
|
|
|
- <!-- 流程版本 -->
|
|
|
- <template #version_default="{ row }">
|
|
|
- <el-tag>v{{ row.version }}</el-tag>
|
|
|
- </template>
|
|
|
- <!-- 激活状态 -->
|
|
|
- <template #suspensionState_default="{ row }">
|
|
|
- <el-tag type="success" v-if="row.suspensionState === 1">激活</el-tag>
|
|
|
- <el-tag type="warning" v-if="row.suspensionState === 2">挂起</el-tag>
|
|
|
- </template>
|
|
|
- <!-- 操作 -->
|
|
|
- <template #actionbtns_default="{ row }">
|
|
|
- <XTextButton
|
|
|
- preIcon="ep:user"
|
|
|
- title="分配规则"
|
|
|
- v-hasPermi="['bpm:task-assign-rule:query']"
|
|
|
- @click="handleAssignRule(row)"
|
|
|
- />
|
|
|
- </template>
|
|
|
- </XTable>
|
|
|
-
|
|
|
- <!-- 表单详情的弹窗 -->
|
|
|
- <XModal v-model="formDetailVisible" width="800" title="表单详情" :show-footer="false">
|
|
|
- <form-create
|
|
|
- :rule="formDetailPreview.rule"
|
|
|
- :option="formDetailPreview.option"
|
|
|
- v-if="formDetailVisible"
|
|
|
+ <el-table v-loading="loading" :data="list">
|
|
|
+ <el-table-column label="定义编号" align="center" prop="id" width="400" />
|
|
|
+ <el-table-column label="流程名称" align="center" prop="name" width="200">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button type="text" @click="handleBpmnDetail(scope.row)">
|
|
|
+ <span>{{ scope.row.name }}</span>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="定义分类" align="center" prop="category" width="100">
|
|
|
+ <template #default="scope">
|
|
|
+ <dict-tag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="scope.row.category" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="表单信息" align="center" prop="formType" width="200">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button
|
|
|
+ v-if="scope.row.formType === 10"
|
|
|
+ type="text"
|
|
|
+ @click="handleFormDetail(scope.row)"
|
|
|
+ >
|
|
|
+ <span>{{ scope.row.formName }}</span>
|
|
|
+ </el-button>
|
|
|
+ <el-button v-else type="text" @click="handleFormDetail(scope.row)">
|
|
|
+ <span>{{ scope.row.formCustomCreatePath }}</span>
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="流程版本" align="center" prop="processDefinition.version" width="80">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag v-if="scope.row">v{{ scope.row.version }}</el-tag>
|
|
|
+ <el-tag type="warning" v-else>未部署</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="状态" align="center" prop="version" width="80">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-tag type="success" v-if="scope.row.suspensionState === 1">激活</el-tag>
|
|
|
+ <el-tag type="warning" v-if="scope.row.suspensionState === 2">挂起</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="部署时间"
|
|
|
+ align="center"
|
|
|
+ prop="deploymentTime"
|
|
|
+ width="180"
|
|
|
+ :formatter="dateFormatter"
|
|
|
/>
|
|
|
- </XModal>
|
|
|
- <!-- 流程模型图的预览 -->
|
|
|
- <XModal title="流程图" v-model="showBpmnOpen" width="80%" height="90%">
|
|
|
- <my-process-viewer
|
|
|
- key="designer"
|
|
|
- v-model="bpmnXML"
|
|
|
- :value="bpmnXML"
|
|
|
- v-bind="bpmnControlForm"
|
|
|
- :prefix="bpmnControlForm.prefix"
|
|
|
+ <el-table-column
|
|
|
+ label="定义描述"
|
|
|
+ align="center"
|
|
|
+ prop="description"
|
|
|
+ width="300"
|
|
|
+ show-overflow-tooltip
|
|
|
/>
|
|
|
- </XModal>
|
|
|
+ <el-table-column label="操作" align="center" width="150" fixed="right">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button
|
|
|
+ link
|
|
|
+ type="primary"
|
|
|
+ @click="handleAssignRule(scope.row)"
|
|
|
+ v-hasPermi="['bpm:task-assign-rule:query']"
|
|
|
+ >
|
|
|
+ 分配规则
|
|
|
+ </el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 分页 -->
|
|
|
+ <Pagination
|
|
|
+ :total="total"
|
|
|
+ v-model:page="queryParams.pageNo"
|
|
|
+ v-model:limit="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
</ContentWrap>
|
|
|
+
|
|
|
+ <!-- 弹窗:表单详情 -->
|
|
|
+ <Dialog title="表单详情" v-model="formDetailVisible" width="800">
|
|
|
+ <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
|
|
|
+ </Dialog>
|
|
|
+
|
|
|
+ <!-- 弹窗:流程模型图的预览 -->
|
|
|
+ <Dialog title="流程图" v-model="bpmnDetailVisible" width="800">
|
|
|
+ <my-process-viewer
|
|
|
+ key="designer"
|
|
|
+ v-model="bpmnXML"
|
|
|
+ :value="bpmnXML"
|
|
|
+ v-bind="bpmnControlForm"
|
|
|
+ :prefix="bpmnControlForm.prefix"
|
|
|
+ />
|
|
|
+ </Dialog>
|
|
|
</template>
|
|
|
-<script setup lang="ts">
|
|
|
-// 业务相关的 import
|
|
|
+
|
|
|
+<script setup lang="ts" name="Form">
|
|
|
+import { DICT_TYPE } from '@/utils/dict'
|
|
|
+import { dateFormatter } from '@/utils/formatTime'
|
|
|
import * as DefinitionApi from '@/api/bpm/definition'
|
|
|
-// import * as ModelApi from '@/api/bpm/model'
|
|
|
-import { allSchemas } from './definition.data'
|
|
|
import { setConfAndFields2 } from '@/utils/formCreate'
|
|
|
-import { DICT_TYPE } from '@/utils/dict'
|
|
|
-
|
|
|
-const bpmnXML = ref(null)
|
|
|
-const showBpmnOpen = ref(false)
|
|
|
-const bpmnControlForm = ref({
|
|
|
- prefix: 'flowable'
|
|
|
-})
|
|
|
-// const message = useMessage() // 消息弹窗
|
|
|
-const router = useRouter() // 路由
|
|
|
+const { push } = useRouter() // 路由
|
|
|
const { query } = useRoute() // 查询参数
|
|
|
|
|
|
-// ========== 列表相关 ==========
|
|
|
+const loading = ref(true) // 列表的加载中
|
|
|
+const total = ref(0) // 列表的总页数
|
|
|
+const list = ref([]) // 列表的数据
|
|
|
const queryParams = reactive({
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10,
|
|
|
key: query.key
|
|
|
})
|
|
|
-const [registerTable] = useXTable({
|
|
|
- allSchemas: allSchemas,
|
|
|
- getListApi: DefinitionApi.getProcessDefinitionPageApi,
|
|
|
- params: queryParams
|
|
|
-})
|
|
|
|
|
|
-// 流程表单的详情按钮操作
|
|
|
+/** 查询参数列表 */
|
|
|
+const getList = async () => {
|
|
|
+ loading.value = true
|
|
|
+ try {
|
|
|
+ const data = await DefinitionApi.getProcessDefinitionPage(queryParams)
|
|
|
+ list.value = data.list
|
|
|
+ total.value = data.total
|
|
|
+ } finally {
|
|
|
+ loading.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/** 点击任务分配按钮 */
|
|
|
+const handleAssignRule = (row) => {
|
|
|
+ push({
|
|
|
+ name: 'BpmTaskAssignRuleList',
|
|
|
+ query: {
|
|
|
+ modelId: row.id
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+/** 流程表单的详情按钮操作 */
|
|
|
const formDetailVisible = ref(false)
|
|
|
const formDetailPreview = ref({
|
|
|
rule: [],
|
|
@@ -99,32 +145,25 @@ const handleFormDetail = async (row) => {
|
|
|
// 弹窗打开
|
|
|
formDetailVisible.value = true
|
|
|
} else {
|
|
|
- await router.push({
|
|
|
+ await push({
|
|
|
path: row.formCustomCreatePath
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// 流程图的详情按钮操作
|
|
|
-const handleBpmnDetail = (row) => {
|
|
|
- // TODO 芋艿:流程组件开发中
|
|
|
- console.log(row)
|
|
|
- DefinitionApi.getProcessDefinitionBpmnXMLApi(row).then((response) => {
|
|
|
- console.log(response, 'response')
|
|
|
- bpmnXML.value = response
|
|
|
- // 弹窗打开
|
|
|
- showBpmnOpen.value = true
|
|
|
- })
|
|
|
- // message.success('流程组件开发中,预计 2 月底完成')
|
|
|
+/** 流程图的详情按钮操作 */
|
|
|
+const bpmnDetailVisible = ref(false)
|
|
|
+const bpmnXML = ref(null)
|
|
|
+const bpmnControlForm = ref({
|
|
|
+ prefix: 'flowable'
|
|
|
+})
|
|
|
+const handleBpmnDetail = async (row) => {
|
|
|
+ bpmnXML.value = await DefinitionApi.getProcessDefinitionBpmnXML(row.id)
|
|
|
+ bpmnDetailVisible.value = true
|
|
|
}
|
|
|
|
|
|
-// 点击任务分配按钮
|
|
|
-const handleAssignRule = (row) => {
|
|
|
- router.push({
|
|
|
- name: 'BpmTaskAssignRuleList',
|
|
|
- query: {
|
|
|
- processDefinitionId: row.id
|
|
|
- }
|
|
|
- })
|
|
|
-}
|
|
|
+/** 初始化 **/
|
|
|
+onMounted(() => {
|
|
|
+ getList()
|
|
|
+})
|
|
|
</script>
|