Commit 607f6e4bb56e0d3f8602dfdd7e5ee145fb0ef8a6
1 parent
e16f8abc
feat: 部分bpm页面
Showing
8 changed files
with
516 additions
and
20 deletions
yudao-ui-admin-vue3/src/api/bpm/model/index.ts
| @@ -2,20 +2,20 @@ import { useAxios } from '@/hooks/web/useAxios' | @@ -2,20 +2,20 @@ import { useAxios } from '@/hooks/web/useAxios' | ||
| 2 | import { ModelVO } from './types' | 2 | import { ModelVO } from './types' |
| 3 | const request = useAxios() | 3 | const request = useAxios() |
| 4 | 4 | ||
| 5 | -export const getModelPage = async (params) => { | 5 | +export const getModelPageApi = async (params) => { |
| 6 | return await request.get({ url: '/bpm/model/page', params }) | 6 | return await request.get({ url: '/bpm/model/page', params }) |
| 7 | } | 7 | } |
| 8 | 8 | ||
| 9 | -export const getModel = async (id: number) => { | 9 | +export const getModelApi = async (id: number) => { |
| 10 | return await request.get({ url: '/bpm/model/get?id=' + id }) | 10 | return await request.get({ url: '/bpm/model/get?id=' + id }) |
| 11 | } | 11 | } |
| 12 | 12 | ||
| 13 | -export const updateModel = async (data: ModelVO) => { | 13 | +export const updateModelApi = async (data: ModelVO) => { |
| 14 | return await request.put({ url: '/bpm/model/update', data: data }) | 14 | return await request.put({ url: '/bpm/model/update', data: data }) |
| 15 | } | 15 | } |
| 16 | 16 | ||
| 17 | // 任务状态修改 | 17 | // 任务状态修改 |
| 18 | -export const updateModelState = async (id: number, state: string) => { | 18 | +export const updateModelStateApi = async (id: number, state: number) => { |
| 19 | const data = { | 19 | const data = { |
| 20 | id: id, | 20 | id: id, |
| 21 | state: state | 21 | state: state |
| @@ -23,14 +23,14 @@ export const updateModelState = async (id: number, state: string) => { | @@ -23,14 +23,14 @@ export const updateModelState = async (id: number, state: string) => { | ||
| 23 | return await request.put({ url: '/bpm/model/update-state', data: data }) | 23 | return await request.put({ url: '/bpm/model/update-state', data: data }) |
| 24 | } | 24 | } |
| 25 | 25 | ||
| 26 | -export const createModel = async (data: ModelVO) => { | 26 | +export const createModelApi = async (data: ModelVO) => { |
| 27 | return await request.post({ url: '/bpm/model/create', data: data }) | 27 | return await request.post({ url: '/bpm/model/create', data: data }) |
| 28 | } | 28 | } |
| 29 | 29 | ||
| 30 | -export const deleteModel = async (id: number) => { | 30 | +export const deleteModelApi = async (id: number) => { |
| 31 | return await request.delete({ url: '/bpm/model/delete?id=' + id }) | 31 | return await request.delete({ url: '/bpm/model/delete?id=' + id }) |
| 32 | } | 32 | } |
| 33 | 33 | ||
| 34 | -export const deployModel = async (id: number) => { | 34 | +export const deployModelApi = async (id: number) => { |
| 35 | return await request.post({ url: '/bpm/model/deploy?id=' + id }) | 35 | return await request.post({ url: '/bpm/model/deploy?id=' + id }) |
| 36 | } | 36 | } |
yudao-ui-admin-vue3/src/api/bpm/model/types.ts
| 1 | +export type ProcessDefinitionVO = { | ||
| 2 | + id: string | ||
| 3 | + version: number | ||
| 4 | + deploymentTIme: string | ||
| 5 | + suspensionState: number | ||
| 6 | +} | ||
| 7 | + | ||
| 1 | export type ModelVO = { | 8 | export type ModelVO = { |
| 2 | id: number | 9 | id: number |
| 3 | formName: string | 10 | formName: string |
| @@ -9,6 +16,7 @@ export type ModelVO = { | @@ -9,6 +16,7 @@ export type ModelVO = { | ||
| 9 | formId: number | 16 | formId: number |
| 10 | formCustomCreatePath: string | 17 | formCustomCreatePath: string |
| 11 | formCustomViewPath: string | 18 | formCustomViewPath: string |
| 19 | + processDefinition: ProcessDefinitionVO | ||
| 12 | status: number | 20 | status: number |
| 13 | remark: string | 21 | remark: string |
| 14 | createTime: string | 22 | createTime: string |
yudao-ui-admin-vue3/src/api/bpm/processInstance/index.ts
| @@ -2,15 +2,15 @@ import { useAxios } from '@/hooks/web/useAxios' | @@ -2,15 +2,15 @@ import { useAxios } from '@/hooks/web/useAxios' | ||
| 2 | import { ProcessInstanceVO } from './types' | 2 | import { ProcessInstanceVO } from './types' |
| 3 | const request = useAxios() | 3 | const request = useAxios() |
| 4 | 4 | ||
| 5 | -export const getMyProcessInstancePage = async (params) => { | 5 | +export const getMyProcessInstancePageApi = async (params) => { |
| 6 | return await request.get({ url: '/bpm/process-instance/my-page', params }) | 6 | return await request.get({ url: '/bpm/process-instance/my-page', params }) |
| 7 | } | 7 | } |
| 8 | 8 | ||
| 9 | -export const createProcessInstance = async (data: ProcessInstanceVO) => { | 9 | +export const createProcessInstanceApi = async (data: ProcessInstanceVO) => { |
| 10 | return await request.post({ url: '/bpm/process-instance/create', data: data }) | 10 | return await request.post({ url: '/bpm/process-instance/create', data: data }) |
| 11 | } | 11 | } |
| 12 | 12 | ||
| 13 | -export const cancelProcessInstance = async (id: number, reason: string) => { | 13 | +export const cancelProcessInstanceApi = async (id: number, reason: string) => { |
| 14 | const data = { | 14 | const data = { |
| 15 | id: id, | 15 | id: id, |
| 16 | reason: reason | 16 | reason: reason |
| @@ -18,6 +18,6 @@ export const cancelProcessInstance = async (id: number, reason: string) => { | @@ -18,6 +18,6 @@ export const cancelProcessInstance = async (id: number, reason: string) => { | ||
| 18 | return await request.delete({ url: '/bpm/process-instance/cancel', data: data }) | 18 | return await request.delete({ url: '/bpm/process-instance/cancel', data: data }) |
| 19 | } | 19 | } |
| 20 | 20 | ||
| 21 | -export const getProcessInstance = async (id: number) => { | 21 | +export const getProcessInstanceApi = async (id: number) => { |
| 22 | return await request.get({ url: '/bpm/process-instance/get?id=' + id }) | 22 | return await request.get({ url: '/bpm/process-instance/get?id=' + id }) |
| 23 | } | 23 | } |
yudao-ui-admin-vue3/src/router/modules/remaining.ts
| @@ -72,7 +72,7 @@ const remainingRouter: AppRouteRecordRaw[] = [ | @@ -72,7 +72,7 @@ const remainingRouter: AppRouteRecordRaw[] = [ | ||
| 72 | children: [ | 72 | children: [ |
| 73 | { | 73 | { |
| 74 | path: 'edit', | 74 | path: 'edit', |
| 75 | - component: () => import('@/views/infra/codegen/components/EditTable.vue'), | 75 | + component: () => import('@/views/infra/codegen/EditTable.vue'), |
| 76 | name: 'EditTable', | 76 | name: 'EditTable', |
| 77 | meta: { | 77 | meta: { |
| 78 | noCache: true, | 78 | noCache: true, |
yudao-ui-admin-vue3/src/views/bpm/model/index.vue
| 1 | -<script setup lang="ts"></script> | 1 | +<script setup lang="ts"> |
| 2 | +import { ref, unref } from 'vue' | ||
| 3 | +import dayjs from 'dayjs' | ||
| 4 | +import { ElTableColumn, ElTag, ElSwitch } from 'element-plus' | ||
| 5 | +import { DICT_TYPE } from '@/utils/dict' | ||
| 6 | +import { useTable } from '@/hooks/web/useTable' | ||
| 7 | +import { useI18n } from '@/hooks/web/useI18n' | ||
| 8 | +import { FormExpose } from '@/components/Form' | ||
| 9 | +import type { ModelVO } from '@/api/bpm/model/types' | ||
| 10 | +import { rules, allSchemas } from './model.data' | ||
| 11 | +import * as ModelApi from '@/api/bpm/model' | ||
| 12 | +import { useMessage } from '@/hooks/web/useMessage' | ||
| 13 | +const message = useMessage() | ||
| 14 | +const { t } = useI18n() // 国际化 | ||
| 15 | + | ||
| 16 | +// ========== 列表相关 ========== | ||
| 17 | +const { register, tableObject, methods } = useTable<ModelVO>({ | ||
| 18 | + getListApi: ModelApi.getModelPageApi, | ||
| 19 | + delListApi: ModelApi.deleteModelApi | ||
| 20 | +}) | ||
| 21 | +const { getList, setSearchParams, delList } = methods | ||
| 22 | + | ||
| 23 | +// ========== CRUD 相关 ========== | ||
| 24 | +const actionLoading = ref(false) // 遮罩层 | ||
| 25 | +const actionType = ref('') // 操作按钮的类型 | ||
| 26 | +const dialogVisible = ref(false) // 是否显示弹出层 | ||
| 27 | +const dialogTitle = ref('edit') // 弹出层标题 | ||
| 28 | +const formRef = ref<FormExpose>() // 表单 Ref | ||
| 29 | + | ||
| 30 | +// 设置标题 | ||
| 31 | +const setDialogTile = (type: string) => { | ||
| 32 | + dialogTitle.value = t('action.' + type) | ||
| 33 | + actionType.value = type | ||
| 34 | + dialogVisible.value = true | ||
| 35 | +} | ||
| 36 | + | ||
| 37 | +// 新增操作 | ||
| 38 | +const handleCreate = () => { | ||
| 39 | + setDialogTile('create') | ||
| 40 | + // 重置表单 | ||
| 41 | + unref(formRef)?.getElFormRef()?.resetFields() | ||
| 42 | +} | ||
| 43 | + | ||
| 44 | +// 修改操作 | ||
| 45 | +const handleUpdate = async (row: ModelVO) => { | ||
| 46 | + setDialogTile('update') | ||
| 47 | + // 设置数据 | ||
| 48 | + const res = await ModelApi.getModelApi(row.id) | ||
| 49 | + unref(formRef)?.setValues(res) | ||
| 50 | +} | ||
| 51 | + | ||
| 52 | +// 提交按钮 | ||
| 53 | +const submitForm = async () => { | ||
| 54 | + actionLoading.value = true | ||
| 55 | + // 提交请求 | ||
| 56 | + try { | ||
| 57 | + const data = unref(formRef)?.formModel as ModelVO | ||
| 58 | + if (actionType.value === 'create') { | ||
| 59 | + await ModelApi.createModelApi(data) | ||
| 60 | + message.success(t('common.createSuccess')) | ||
| 61 | + } else { | ||
| 62 | + await ModelApi.updateModelApi(data) | ||
| 63 | + message.success(t('common.updateSuccess')) | ||
| 64 | + } | ||
| 65 | + // 操作成功，重新加载列表 | ||
| 66 | + dialogVisible.value = false | ||
| 67 | + await getList() | ||
| 68 | + } finally { | ||
| 69 | + actionLoading.value = false | ||
| 70 | + } | ||
| 71 | +} | ||
| 72 | + | ||
| 73 | +/** 流程表单的详情按钮操作 */ | ||
| 74 | +const handleChangeState = async (row: ModelVO) => { | ||
| 75 | + const state = row.processDefinition.suspensionState | ||
| 76 | + const statusState = state === 1 ? '激活' : '挂起' | ||
| 77 | + message | ||
| 78 | + .confirm( | ||
| 79 | + '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?', | ||
| 80 | + t('common.reminder') | ||
| 81 | + ) | ||
| 82 | + .then(async () => { | ||
| 83 | + ModelApi.updateModelStateApi(row.id, state).then(() => { | ||
| 84 | + message.success(t('common.updateSuccess')) | ||
| 85 | + getList() | ||
| 86 | + }) | ||
| 87 | + }) | ||
| 88 | + .catch(() => {}) | ||
| 89 | +} | ||
| 90 | +// ========== 详情相关 ========== | ||
| 91 | +const detailRef = ref() // 详情 Ref | ||
| 92 | + | ||
| 93 | +// 详情操作 | ||
| 94 | +const handleDetail = async (row: ModelVO) => { | ||
| 95 | + // 设置数据 | ||
| 96 | + detailRef.value = row | ||
| 97 | + setDialogTile('detail') | ||
| 98 | +} | ||
| 99 | + | ||
| 100 | +// ========== 初始化 ========== | ||
| 101 | +getList() | ||
| 102 | +</script> | ||
| 2 | 103 | ||
| 3 | <template> | 104 | <template> |
| 4 | - <div>index</div> | ||
| 5 | -</template> | 105 | + <!-- 搜索工作区 --> |
| 106 | + <ContentWrap> | ||
| 107 | + <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" /> | ||
| 108 | + </ContentWrap> | ||
| 109 | + <ContentWrap> | ||
| 110 | + <!-- 操作工具栏 --> | ||
| 111 | + <div class="mb-10px"> | ||
| 112 | + <el-button type="primary" v-hasPermi="['bpm:model:create']" @click="handleCreate"> | ||
| 113 | + <Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }} | ||
| 114 | + </el-button> | ||
| 115 | + </div> | ||
| 116 | + <!-- 列表 --> | ||
| 117 | + <Table | ||
| 118 | + :columns="allSchemas.tableColumns" | ||
| 119 | + :selection="false" | ||
| 120 | + :data="tableObject.tableList" | ||
| 121 | + :loading="tableObject.loading" | ||
| 122 | + :pagination="{ | ||
| 123 | + total: tableObject.total | ||
| 124 | + }" | ||
| 125 | + v-model:pageSize="tableObject.pageSize" | ||
| 126 | + v-model:currentPage="tableObject.currentPage" | ||
| 127 | + @register="register" | ||
| 128 | + > | ||
| 129 | + <template #category="{ row }"> | ||
| 130 | + <DictTag :type="DICT_TYPE.BPM_MODEL_CATEGORY" :value="row.category" /> | ||
| 131 | + </template> | ||
| 132 | + <template #formId="{ row }"> | ||
| 133 | + <span>{{ row.formName }}</span> | ||
| 134 | + </template> | ||
| 135 | + <template #processDefinition> | ||
| 136 | + <el-table-column label="流程版本" prop="processDefinition.version"> | ||
| 137 | + <template #default="{ row }"> | ||
| 138 | + <el-tag v-if="row.processDefinition"> | ||
| 139 | + {{ 'v' + row.processDefinition.version }} | ||
| 140 | + </el-tag> | ||
| 141 | + <el-tag type="warning" v-else>未部署</el-tag> | ||
| 142 | + </template> | ||
| 143 | + </el-table-column> | ||
| 144 | + <el-table-column label="激活状态" prop="processDefinition.suspensionState"> | ||
| 145 | + <template #default="{ row }"> | ||
| 146 | + <el-switch | ||
| 147 | + v-if="row.processDefinition" | ||
| 148 | + v-model="row.processDefinition.suspensionState" | ||
| 149 | + :active-value="1" | ||
| 150 | + :inactive-value="2" | ||
| 151 | + @change="handleChangeState(row)" | ||
| 152 | + /> | ||
| 153 | + </template> | ||
| 154 | + </el-table-column> | ||
| 155 | + <el-table-column label="部署时间" prop="processDefinition.deploymentTime"> | ||
| 156 | + <template #default="{ row }"> | ||
| 157 | + <span> | ||
| 158 | + {{ dayjs(row.processDefinition.deploymentTime).format('YYYY-MM-DD HH:mm:ss') }} | ||
| 159 | + </span> | ||
| 160 | + </template> | ||
| 161 | + </el-table-column> | ||
| 162 | + </template> | ||
| 163 | + <template #createTime="{ row }"> | ||
| 164 | + <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span> | ||
| 165 | + </template> | ||
| 166 | + <template #action="{ row }"> | ||
| 167 | + <el-button link type="primary" v-hasPermi="['bpm:model:update']" @click="handleUpdate(row)"> | ||
| 168 | + <Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }} | ||
| 169 | + </el-button> | ||
| 170 | + <el-button link type="primary" v-hasPermi="['bpm:model:update']" @click="handleDetail(row)"> | ||
| 171 | + <Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }} | ||
| 172 | + </el-button> | ||
| 173 | + <el-button | ||
| 174 | + link | ||
| 175 | + type="primary" | ||
| 176 | + v-hasPermi="['bpm:model:delete']" | ||
| 177 | + @click="delList(row.id, false)" | ||
| 178 | + > | ||
| 179 | + <Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }} | ||
| 180 | + </el-button> | ||
| 181 | + </template> | ||
| 182 | + </Table> | ||
| 183 | + </ContentWrap> | ||
| 6 | 184 | ||
| 7 | -<style scoped></style> | 185 | + <Dialog v-model="dialogVisible" :title="dialogTitle"> |
| 186 | + <!-- 对话框(添加 / 修改) --> | ||
| 187 | + <Form | ||
| 188 | + v-if="['create', 'update'].includes(actionType)" | ||
| 189 | + :schema="allSchemas.formSchema" | ||
| 190 | + :rules="rules" | ||
| 191 | + ref="formRef" | ||
| 192 | + /> | ||
| 193 | + <!-- 对话框(详情) --> | ||
| 194 | + <Descriptions | ||
| 195 | + v-if="actionType === 'detail'" | ||
| 196 | + :schema="allSchemas.detailSchema" | ||
| 197 | + :data="detailRef" | ||
| 198 | + > | ||
| 199 | + <template #createTime="{ row }"> | ||
| 200 | + <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span> | ||
| 201 | + </template> | ||
| 202 | + </Descriptions> | ||
| 203 | + <!-- 操作按钮 --> | ||
| 204 | + <template #footer> | ||
| 205 | + <el-button | ||
| 206 | + v-if="['create', 'update'].includes(actionType)" | ||
| 207 | + type="primary" | ||
| 208 | + :loading="actionLoading" | ||
| 209 | + @click="submitForm" | ||
| 210 | + > | ||
| 211 | + {{ t('action.save') }} | ||
| 212 | + </el-button> | ||
| 213 | + <el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button> | ||
| 214 | + </template> | ||
| 215 | + </Dialog> | ||
| 216 | +</template> |
yudao-ui-admin-vue3/src/views/bpm/model/model.data.ts
0 → 100644
| 1 | +import { reactive } from 'vue' | ||
| 2 | +import { useI18n } from '@/hooks/web/useI18n' | ||
| 3 | +import { required } from '@/utils/formRules' | ||
| 4 | +import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas' | ||
| 5 | +import { DICT_TYPE } from '@/utils/dict' | ||
| 6 | +const { t } = useI18n() // 国际化 | ||
| 7 | + | ||
| 8 | +// 表单校验 | ||
| 9 | +export const rules = reactive({ | ||
| 10 | + name: [required] | ||
| 11 | +}) | ||
| 12 | + | ||
| 13 | +// CrudSchema | ||
| 14 | +const crudSchemas = reactive<CrudSchema[]>([ | ||
| 15 | + { | ||
| 16 | + label: t('common.index'), | ||
| 17 | + field: 'id', | ||
| 18 | + type: 'index', | ||
| 19 | + form: { | ||
| 20 | + show: false | ||
| 21 | + }, | ||
| 22 | + detail: { | ||
| 23 | + show: false | ||
| 24 | + } | ||
| 25 | + }, | ||
| 26 | + { | ||
| 27 | + label: '流程标识', | ||
| 28 | + field: 'key', | ||
| 29 | + search: { | ||
| 30 | + show: true | ||
| 31 | + } | ||
| 32 | + }, | ||
| 33 | + { | ||
| 34 | + label: '流程名称', | ||
| 35 | + field: 'name', | ||
| 36 | + search: { | ||
| 37 | + show: true | ||
| 38 | + } | ||
| 39 | + }, | ||
| 40 | + { | ||
| 41 | + label: '流程分类', | ||
| 42 | + field: 'category', | ||
| 43 | + dictType: DICT_TYPE.BPM_MODEL_CATEGORY, | ||
| 44 | + search: { | ||
| 45 | + show: true | ||
| 46 | + } | ||
| 47 | + }, | ||
| 48 | + { | ||
| 49 | + label: '表单信息', | ||
| 50 | + field: 'formId' | ||
| 51 | + }, | ||
| 52 | + { | ||
| 53 | + label: '最新部署的流程定义', | ||
| 54 | + field: 'processDefinition', | ||
| 55 | + form: { | ||
| 56 | + show: false | ||
| 57 | + }, | ||
| 58 | + detail: { | ||
| 59 | + show: false | ||
| 60 | + } | ||
| 61 | + }, | ||
| 62 | + { | ||
| 63 | + label: t('common.createTime'), | ||
| 64 | + field: 'createTime', | ||
| 65 | + form: { | ||
| 66 | + show: false | ||
| 67 | + } | ||
| 68 | + }, | ||
| 69 | + { | ||
| 70 | + label: t('table.action'), | ||
| 71 | + field: 'action', | ||
| 72 | + width: '240px', | ||
| 73 | + form: { | ||
| 74 | + show: false | ||
| 75 | + }, | ||
| 76 | + detail: { | ||
| 77 | + show: false | ||
| 78 | + } | ||
| 79 | + } | ||
| 80 | +]) | ||
| 81 | +export const { allSchemas } = useCrudSchemas(crudSchemas) |
yudao-ui-admin-vue3/src/views/bpm/processInstance/index.vue
| 1 | -<script setup lang="ts"></script> | 1 | +<script setup lang="ts"> |
| 2 | +import { ref } from 'vue' | ||
| 3 | +import dayjs from 'dayjs' | ||
| 4 | +import { DICT_TYPE } from '@/utils/dict' | ||
| 5 | +import { useTable } from '@/hooks/web/useTable' | ||
| 6 | +import { useI18n } from '@/hooks/web/useI18n' | ||
| 7 | +import type { ProcessInstanceVO } from '@/api/bpm/processInstance/types' | ||
| 8 | +import { allSchemas } from './process.data' | ||
| 9 | +import * as ProcessInstanceApi from '@/api/bpm/processInstance' | ||
| 10 | +import { ElMessage, ElMessageBox } from 'element-plus' | ||
| 11 | +const { t } = useI18n() // 国际化 | ||
| 12 | + | ||
| 13 | +// ========== 列表相关 ========== | ||
| 14 | +const { register, tableObject, methods } = useTable<ProcessInstanceVO>({ | ||
| 15 | + getListApi: ProcessInstanceApi.getMyProcessInstancePageApi | ||
| 16 | +}) | ||
| 17 | +const { getList, setSearchParams } = methods | ||
| 18 | + | ||
| 19 | +// ========== CRUD 相关 ========== | ||
| 20 | +const dialogVisible = ref(false) // 是否显示弹出层 | ||
| 21 | +// 发起流程 | ||
| 22 | +const handleAdd = () => { | ||
| 23 | + console.info('add') | ||
| 24 | +} | ||
| 25 | +// 取消操作 | ||
| 26 | +const handleCancel = (row: ProcessInstanceVO) => { | ||
| 27 | + ElMessageBox.prompt('请输入取消原因？', '取消流程', { | ||
| 28 | + confirmButtonText: t('common.ok'), | ||
| 29 | + cancelButtonText: t('common.cancel'), | ||
| 30 | + type: 'warning', | ||
| 31 | + inputPattern: /^[\s\S]*.*[^\s][\s\S]*$/, // 判断非空，且非空格 | ||
| 32 | + inputErrorMessage: '取消原因不能为空' | ||
| 33 | + }).then(async ({ value }) => { | ||
| 34 | + await ProcessInstanceApi.cancelProcessInstanceApi(row.id, value) | ||
| 35 | + ElMessage.success('取消成功') | ||
| 36 | + getList() | ||
| 37 | + }) | ||
| 38 | +} | ||
| 39 | + | ||
| 40 | +// ========== 详情相关 ========== | ||
| 41 | +const detailRef = ref() // 详情 Ref | ||
| 42 | + | ||
| 43 | +// 详情操作 | ||
| 44 | +const handleDetail = async (row: ProcessInstanceVO) => { | ||
| 45 | + // 设置数据 | ||
| 46 | + detailRef.value = row | ||
| 47 | + dialogVisible.value = true | ||
| 48 | +} | ||
| 49 | + | ||
| 50 | +// ========== 初始化 ========== | ||
| 51 | +getList() | ||
| 52 | +</script> | ||
| 2 | 53 | ||
| 3 | <template> | 54 | <template> |
| 4 | - <div>index</div> | ||
| 5 | -</template> | 55 | + <!-- 搜索工作区 --> |
| 56 | + <ContentWrap> | ||
| 57 | + <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" /> | ||
| 58 | + </ContentWrap> | ||
| 59 | + <ContentWrap> | ||
| 60 | + <!-- 操作工具栏 --> | ||
| 61 | + <div class="mb-10px"> | ||
| 62 | + <el-button type="primary" v-hasPermi="['bpm:process-instance:query']" @click="handleAdd"> | ||
| 63 | + <Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }} | ||
| 64 | + </el-button> | ||
| 65 | + </div> | ||
| 66 | + <!-- 列表 --> | ||
| 67 | + <Table | ||
| 68 | + :columns="allSchemas.tableColumns" | ||
| 69 | + :selection="false" | ||
| 70 | + :data="tableObject.tableList" | ||
| 71 | + :loading="tableObject.loading" | ||
| 72 | + :pagination="{ | ||
| 73 | + total: tableObject.total | ||
| 74 | + }" | ||
| 75 | + v-model:pageSize="tableObject.pageSize" | ||
| 76 | + v-model:currentPage="tableObject.currentPage" | ||
| 77 | + @register="register" | ||
| 78 | + > | ||
| 79 | + <template #status="{ row }"> | ||
| 80 | + <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" /> | ||
| 81 | + </template> | ||
| 82 | + <template #createTime="{ row }"> | ||
| 83 | + <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span> | ||
| 84 | + </template> | ||
| 85 | + <template #action="{ row }"> | ||
| 86 | + <el-button | ||
| 87 | + link | ||
| 88 | + type="primary" | ||
| 89 | + v-hasPermi="['bpm:process-instance:query']" | ||
| 90 | + @click="handleDetail(row)" | ||
| 91 | + > | ||
| 92 | + <Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }} | ||
| 93 | + </el-button> | ||
| 94 | + <el-button | ||
| 95 | + link | ||
| 96 | + type="primary" | ||
| 97 | + v-hasPermi="['bpm:process-instance:cancel']" | ||
| 98 | + @click="handleCancel(row)" | ||
| 99 | + > | ||
| 100 | + <Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }} | ||
| 101 | + </el-button> | ||
| 102 | + </template> | ||
| 103 | + </Table> | ||
| 104 | + </ContentWrap> | ||
| 6 | 105 | ||
| 7 | -<style scoped></style> | 106 | + <Dialog v-model="dialogVisible" :title="t('action.detail')"> |
| 107 | + <!-- 对话框(详情) --> | ||
| 108 | + <Descriptions :schema="allSchemas.detailSchema" :data="detailRef"> | ||
| 109 | + <template #status="{ row }"> | ||
| 110 | + <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" /> | ||
| 111 | + </template> | ||
| 112 | + <template #createTime="{ row }"> | ||
| 113 | + <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span> | ||
| 114 | + </template> | ||
| 115 | + </Descriptions> | ||
| 116 | + <!-- 操作按钮 --> | ||
| 117 | + <template #footer> | ||
| 118 | + <el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button> | ||
| 119 | + </template> | ||
| 120 | + </Dialog> | ||
| 121 | +</template> |
yudao-ui-admin-vue3/src/views/bpm/processInstance/process.data.ts
0 → 100644
| 1 | +import { reactive } from 'vue' | ||
| 2 | +import { useI18n } from '@/hooks/web/useI18n' | ||
| 3 | +import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas' | ||
| 4 | +import { DICT_TYPE } from '@/utils/dict' | ||
| 5 | +const { t } = useI18n() // 国际化 | ||
| 6 | + | ||
| 7 | +// CrudSchema | ||
| 8 | +const crudSchemas = reactive<CrudSchema[]>([ | ||
| 9 | + { | ||
| 10 | + label: t('common.index'), | ||
| 11 | + field: 'id', | ||
| 12 | + type: 'index', | ||
| 13 | + form: { | ||
| 14 | + show: false | ||
| 15 | + }, | ||
| 16 | + detail: { | ||
| 17 | + show: false | ||
| 18 | + } | ||
| 19 | + }, | ||
| 20 | + { | ||
| 21 | + label: '流程名', | ||
| 22 | + field: 'name', | ||
| 23 | + search: { | ||
| 24 | + show: true | ||
| 25 | + } | ||
| 26 | + }, | ||
| 27 | + { | ||
| 28 | + label: '流程分类', | ||
| 29 | + field: 'category', | ||
| 30 | + dictType: DICT_TYPE.BPM_MODEL_CATEGORY, | ||
| 31 | + search: { | ||
| 32 | + show: true | ||
| 33 | + } | ||
| 34 | + }, | ||
| 35 | + { | ||
| 36 | + label: '当前审批任务', | ||
| 37 | + field: 'tasks' | ||
| 38 | + }, | ||
| 39 | + { | ||
| 40 | + label: t('common.status'), | ||
| 41 | + field: 'status', | ||
| 42 | + dictType: DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS, | ||
| 43 | + search: { | ||
| 44 | + show: true | ||
| 45 | + } | ||
| 46 | + }, | ||
| 47 | + { | ||
| 48 | + label: '结果', | ||
| 49 | + field: 'result', | ||
| 50 | + dictType: DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT, | ||
| 51 | + search: { | ||
| 52 | + show: true | ||
| 53 | + } | ||
| 54 | + }, | ||
| 55 | + { | ||
| 56 | + label: '提交时间', | ||
| 57 | + field: 'createTime', | ||
| 58 | + form: { | ||
| 59 | + show: false | ||
| 60 | + }, | ||
| 61 | + search: { | ||
| 62 | + show: true | ||
| 63 | + } | ||
| 64 | + }, | ||
| 65 | + { | ||
| 66 | + label: '结束时间', | ||
| 67 | + field: 'endTime', | ||
| 68 | + form: { | ||
| 69 | + show: false | ||
| 70 | + } | ||
| 71 | + }, | ||
| 72 | + { | ||
| 73 | + label: t('table.action'), | ||
| 74 | + field: 'action', | ||
| 75 | + width: '240px', | ||
| 76 | + form: { | ||
| 77 | + show: false | ||
| 78 | + }, | ||
| 79 | + detail: { | ||
| 80 | + show: false | ||
| 81 | + } | ||
| 82 | + } | ||
| 83 | +]) | ||
| 84 | +export const { allSchemas } = useCrudSchemas(crudSchemas) |