Commit 2d85f11f82a27c4ef09780565e06e6ad3e73538e
1 parent
b90b297e
bpm：流程列表 100%
Showing
2 changed files
with
148 additions
and
191 deletions
yudao-ui-admin-vue3/src/views/bpm/form/form.data.ts
| 1 | -import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas' | 1 | +import { VxeCrudSchema } from '@/hooks/web/useVxeCrudSchemas' |
| 2 | + | ||
| 2 | const { t } = useI18n() // 国际化 | 3 | const { t } = useI18n() // 国际化 |
| 3 | 4 | ||
| 4 | // 表单校验 | 5 | // 表单校验 |
| @@ -7,52 +8,33 @@ export const rules = reactive({ | @@ -7,52 +8,33 @@ export const rules = reactive({ | ||
| 7 | }) | 8 | }) |
| 8 | 9 | ||
| 9 | // CrudSchema | 10 | // CrudSchema |
| 10 | -const crudSchemas = reactive<CrudSchema[]>([ | ||
| 11 | - { | ||
| 12 | - label: t('common.index'), | ||
| 13 | - field: 'id', | ||
| 14 | - type: 'index', | ||
| 15 | - form: { | ||
| 16 | - show: false | 11 | +const crudSchemas = reactive<VxeCrudSchema>({ |
| 12 | + primaryKey: 'id', | ||
| 13 | + primaryType: 'seq', | ||
| 14 | + primaryTitle: '表单编号', | ||
| 15 | + action: true, | ||
| 16 | + columns: [ | ||
| 17 | + { | ||
| 18 | + title: '表单名', | ||
| 19 | + field: 'name', | ||
| 20 | + isSearch: true | ||
| 17 | }, | 21 | }, |
| 18 | - detail: { | ||
| 19 | - show: false | ||
| 20 | - } | ||
| 21 | - }, | ||
| 22 | - { | ||
| 23 | - label: '表单名', | ||
| 24 | - field: 'name', | ||
| 25 | - search: { | ||
| 26 | - show: true | ||
| 27 | - } | ||
| 28 | - }, | ||
| 29 | - { | ||
| 30 | - label: t('common.status'), | ||
| 31 | - field: 'status', | ||
| 32 | - dictType: DICT_TYPE.COMMON_STATUS, | ||
| 33 | - dictClass: 'number' | ||
| 34 | - }, | ||
| 35 | - { | ||
| 36 | - label: '备注', | ||
| 37 | - field: 'remark' | ||
| 38 | - }, | ||
| 39 | - { | ||
| 40 | - label: t('common.createTime'), | ||
| 41 | - field: 'createTime', | ||
| 42 | - form: { | ||
| 43 | - show: false | ||
| 44 | - } | ||
| 45 | - }, | ||
| 46 | - { | ||
| 47 | - label: t('table.action'), | ||
| 48 | - field: 'action', | ||
| 49 | - width: '240px', | ||
| 50 | - form: { | ||
| 51 | - show: false | 22 | + { |
| 23 | + title: t('common.status'), | ||
| 24 | + field: 'status', | ||
| 25 | + dictType: DICT_TYPE.COMMON_STATUS, | ||
| 26 | + dictClass: 'number' | ||
| 27 | + }, | ||
| 28 | + { | ||
| 29 | + title: '备注', | ||
| 30 | + field: 'remark' | ||
| 52 | }, | 31 | }, |
| 53 | - detail: { | ||
| 54 | - show: false | 32 | + { |
| 33 | + title: t('common.createTime'), | ||
| 34 | + field: 'createTime', | ||
| 35 | + formatter: 'formatDate', | ||
| 36 | + isForm: false | ||
| 55 | } | 37 | } |
| 56 | - } | ||
| 57 | -]) | ||
| 58 | -export const { allSchemas } = useCrudSchemas(crudSchemas) | 38 | + ] |
| 39 | +}) | ||
| 40 | +export const { allSchemas } = useVxeCrudSchemas(crudSchemas) |
yudao-ui-admin-vue3/src/views/bpm/form/index.vue
| 1 | -<script setup lang="ts" name="Form"> | ||
| 2 | -import dayjs from 'dayjs' | ||
| 3 | -import { DICT_TYPE } from '@/utils/dict' | ||
| 4 | -import type { FormExpose } from '@/components/Form' | ||
| 5 | -import type { FormVO } from '@/api/bpm/form/types' | ||
| 6 | -import { rules, allSchemas } from './form.data' | 1 | +<template> |
| 2 | + <ContentWrap> | ||
| 3 | + <!-- 列表 --> | ||
| 4 | + <div> | ||
| 5 | + <XTable @register="registerTable"> | ||
| 6 | + <!-- 操作：新增 --> | ||
| 7 | + <template #toolbar_buttons> | ||
| 8 | + <XButton | ||
| 9 | + type="primary" | ||
| 10 | + preIcon="ep:zoom-in" | ||
| 11 | + :title="t('action.add')" | ||
| 12 | + v-hasPermi="['system:post:create']" | ||
| 13 | + @click="handleCreate()" | ||
| 14 | + /> | ||
| 15 | + </template> | ||
| 16 | + <template #actionbtns_default="{ row }"> | ||
| 17 | + <!-- 操作：修改 --> | ||
| 18 | + <XTextButton | ||
| 19 | + preIcon="ep:edit" | ||
| 20 | + :title="t('action.edit')" | ||
| 21 | + v-hasPermi="['bpm:form:update']" | ||
| 22 | + @click="handleUpdate(row.id)" | ||
| 23 | + /> | ||
| 24 | + <!-- 操作：详情 --> | ||
| 25 | + <XTextButton | ||
| 26 | + preIcon="ep:view" | ||
| 27 | + :title="t('action.detail')" | ||
| 28 | + v-hasPermi="['bpm:form:query']" | ||
| 29 | + @click="handleDetail(row.id)" | ||
| 30 | + /> | ||
| 31 | + <!-- 操作：删除 --> | ||
| 32 | + <XTextButton | ||
| 33 | + preIcon="ep:delete" | ||
| 34 | + :title="t('action.del')" | ||
| 35 | + v-hasPermi="['bpm:form:delete']" | ||
| 36 | + @click="deleteData(row.id)" | ||
| 37 | + /> | ||
| 38 | + </template> | ||
| 39 | + </XTable> | ||
| 40 | + <!-- TODO 芋艿：待完善 --> | ||
| 41 | + <XModal v-model="detailOpen" width="400" title="表单详情"> | ||
| 42 | + <!-- <div class="test-form"> | ||
| 43 | + <parser :key="new Date().getTime()" :form-conf="detailForm" /> | ||
| 44 | + </div> --> | ||
| 45 | + 表单详情 | ||
| 46 | + </XModal> | ||
| 47 | + </div> | ||
| 48 | + </ContentWrap> | ||
| 49 | +</template> | ||
| 50 | + | ||
| 51 | +<script setup lang="ts" name="BpmForm"> | ||
| 52 | +// 全局相关的 import | ||
| 53 | +// import { ref } from 'vue' | ||
| 54 | +import { useI18n } from '@/hooks/web/useI18n' | ||
| 55 | +import { useMessage } from '@/hooks/web/useMessage' | ||
| 56 | +import { useXTable } from '@/hooks/web/useXTable' | ||
| 57 | +// import { FormExpose } from '@/components/Form' | ||
| 58 | +// 业务相关的 import | ||
| 7 | import * as FormApi from '@/api/bpm/form' | 59 | import * as FormApi from '@/api/bpm/form' |
| 8 | -import { useTable } from '@/hooks/web/useTable' | 60 | +import { allSchemas } from './form.data' |
| 61 | +import { useRouter } from 'vue-router' | ||
| 62 | +// import { decodeFields } from '@/utils/formGenerator' // TODO 芋艿：可能要清理下 | ||
| 63 | + | ||
| 9 | const { t } = useI18n() // 国际化 | 64 | const { t } = useI18n() // 国际化 |
| 10 | -const message = useMessage() | 65 | +const message = useMessage() // 消息弹窗 |
| 66 | +const router = useRouter() // 路由 | ||
| 11 | 67 | ||
| 12 | -// ========== 列表相关 ========== | ||
| 13 | -const { register, tableObject, methods } = useTable<FormVO>({ | 68 | +// 列表相关的变量 |
| 69 | +const [registerTable, { deleteData }] = useXTable({ | ||
| 70 | + allSchemas: allSchemas, | ||
| 14 | getListApi: FormApi.getFormPageApi, | 71 | getListApi: FormApi.getFormPageApi, |
| 15 | - delListApi: FormApi.deleteFormApi | 72 | + deleteApi: FormApi.deleteFormApi |
| 16 | }) | 73 | }) |
| 17 | -const { getList, setSearchParams, delList } = methods | ||
| 18 | 74 | ||
| 19 | -// ========== CRUD 相关 ========== | ||
| 20 | -const actionLoading = ref(false) // 遮罩层 | ||
| 21 | -const actionType = ref('') // 操作按钮的类型 | ||
| 22 | -const dialogVisible = ref(false) // 是否显示弹出层 | ||
| 23 | -const dialogTitle = ref('edit') // 弹出层标题 | ||
| 24 | -const formRef = ref<FormExpose>() // 表单 Ref | 75 | +// 弹窗相关的变量 |
| 76 | +// const modelVisible = ref(false) // 是否显示弹出层 | ||
| 77 | +// const modelTitle = ref('edit') // 弹出层标题 | ||
| 78 | +// const modelLoading = ref(false) // 弹出层loading | ||
| 79 | +// const actionType = ref('') // 操作按钮的类型 | ||
| 80 | +// const actionLoading = ref(false) // 按钮 Loading | ||
| 81 | +// const formRef = ref<FormExpose>() // 表单 Ref | ||
| 82 | +// const detailData = ref() // 详情 Ref | ||
| 25 | 83 | ||
| 26 | // 设置标题 | 84 | // 设置标题 |
| 27 | -const setDialogTile = (type: string) => { | ||
| 28 | - dialogTitle.value = t('action.' + type) | ||
| 29 | - actionType.value = type | ||
| 30 | - dialogVisible.value = true | ||
| 31 | -} | 85 | +// const setDialogTile = (type: string) => { |
| 86 | +// modelLoading.value = true | ||
| 87 | +// modelTitle.value = t('action.' + type) | ||
| 88 | +// actionType.value = type | ||
| 89 | +// modelVisible.value = true | ||
| 90 | +// } | ||
| 32 | 91 | ||
| 33 | // 新增操作 | 92 | // 新增操作 |
| 34 | const handleCreate = () => { | 93 | const handleCreate = () => { |
| 35 | - setDialogTile('create') | 94 | + console.log('新增') |
| 95 | + if (true) { | ||
| 96 | + message.success('动态表单开发中，预计 2 月底完成') | ||
| 97 | + return | ||
| 98 | + } | ||
| 99 | + router.push({ | ||
| 100 | + path: '/manager/form/edit' | ||
| 101 | + }) | ||
| 36 | } | 102 | } |
| 37 | 103 | ||
| 38 | // 修改操作 | 104 | // 修改操作 |
| 39 | -const handleUpdate = async (row: FormVO) => { | ||
| 40 | - setDialogTile('update') | ||
| 41 | - // 设置数据 | ||
| 42 | - const res = await FormApi.getFormApi(row.id) | ||
| 43 | - unref(formRef)?.setValues(res) | ||
| 44 | -} | ||
| 45 | - | ||
| 46 | -// 提交按钮 | ||
| 47 | -const submitForm = async () => { | ||
| 48 | - const elForm = unref(formRef)?.getElFormRef() | ||
| 49 | - if (!elForm) return | ||
| 50 | - elForm.validate(async (valid) => { | ||
| 51 | - if (valid) { | ||
| 52 | - actionLoading.value = true | ||
| 53 | - // 提交请求 | ||
| 54 | - try { | ||
| 55 | - const data = unref(formRef)?.formModel as FormVO | ||
| 56 | - if (actionType.value === 'create') { | ||
| 57 | - await FormApi.createFormApi(data) | ||
| 58 | - message.success(t('common.createSuccess')) | ||
| 59 | - } else { | ||
| 60 | - await FormApi.updateFormApi(data) | ||
| 61 | - message.success(t('common.updateSuccess')) | ||
| 62 | - } | ||
| 63 | - // 操作成功，重新加载列表 | ||
| 64 | - dialogVisible.value = false | ||
| 65 | - await getList() | ||
| 66 | - } finally { | ||
| 67 | - actionLoading.value = false | ||
| 68 | - } | 105 | +const handleUpdate = async (rowId: number) => { |
| 106 | + console.log(rowId, '修改') | ||
| 107 | + if (true) { | ||
| 108 | + message.success('动态表单开发中，预计 2 月底完成') | ||
| 109 | + return | ||
| 110 | + } | ||
| 111 | + await router.push({ | ||
| 112 | + path: '/bpm/manager/form/edit', | ||
| 113 | + query: { | ||
| 114 | + formId: rowId | ||
| 69 | } | 115 | } |
| 70 | }) | 116 | }) |
| 71 | } | 117 | } |
| 72 | 118 | ||
| 73 | -// ========== 详情相关 ========== | ||
| 74 | -const detailData = ref() // 详情 Ref | 119 | +// 详情操作 // TODO 芋艿：详情的实现 |
| 120 | +// const detailForm = ref({ | ||
| 121 | +// fields: [] | ||
| 122 | +// }) | ||
| 123 | +// 表单详情弹出窗显示隐藏 | ||
| 124 | +// const detailOpen = ref(false) | ||
| 75 | 125 | ||
| 76 | -// 详情操作 | ||
| 77 | -const handleDetail = async (row: FormVO) => { | ||
| 78 | - // 设置数据 | ||
| 79 | - detailData.value = row | ||
| 80 | - setDialogTile('detail') | 126 | +const handleDetail = async (rowId: number) => { |
| 127 | + console.log(rowId, '详情') | ||
| 128 | + message.success('动态表单开发中，预计 2 月底完成') | ||
| 129 | + // FormApi.getFormApi(row.id).then((response) => { | ||
| 130 | + // // 设置值 | ||
| 131 | + // const data = response.data | ||
| 132 | + // detailForm.value = { | ||
| 133 | + // ...JSON.parse(data.conf), | ||
| 134 | + // fields: decodeFields([], data.fields) | ||
| 135 | + // } | ||
| 136 | + // // 弹窗打开 | ||
| 137 | + // detailOpen.value = true | ||
| 138 | + // }) | ||
| 81 | } | 139 | } |
| 82 | - | ||
| 83 | -// ========== 初始化 ========== | ||
| 84 | -getList() | ||
| 85 | </script> | 140 | </script> |
| 86 | - | ||
| 87 | -<template> | ||
| 88 | - <!-- 搜索工作区 --> | ||
| 89 | - <ContentWrap> | ||
| 90 | - <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" /> | ||
| 91 | - </ContentWrap> | ||
| 92 | - <ContentWrap> | ||
| 93 | - <!-- 操作工具栏 --> | ||
| 94 | - <div class="mb-10px"> | ||
| 95 | - <el-button type="primary" v-hasPermi="['bpm:form:create']" @click="handleCreate()"> | ||
| 96 | - <Icon icon="ep:zoom-in" class="mr-5px" /> {{ t('action.add') }} | ||
| 97 | - </el-button> | ||
| 98 | - </div> | ||
| 99 | - <!-- 列表 --> | ||
| 100 | - <Table | ||
| 101 | - :columns="allSchemas.tableColumns" | ||
| 102 | - :selection="false" | ||
| 103 | - :data="tableObject.tableList" | ||
| 104 | - :loading="tableObject.loading" | ||
| 105 | - :pagination="{ | ||
| 106 | - total: tableObject.total | ||
| 107 | - }" | ||
| 108 | - v-model:pageSize="tableObject.pageSize" | ||
| 109 | - v-model:currentPage="tableObject.currentPage" | ||
| 110 | - @register="register" | ||
| 111 | - > | ||
| 112 | - <template #status="{ row }"> | ||
| 113 | - <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" /> | ||
| 114 | - </template> | ||
| 115 | - <template #createTime="{ row }"> | ||
| 116 | - <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span> | ||
| 117 | - </template> | ||
| 118 | - <template #action="{ row }"> | ||
| 119 | - <el-button link type="primary" v-hasPermi="['bpm:form:update']" @click="handleUpdate(row)"> | ||
| 120 | - <Icon icon="ep:edit" class="mr-1px" /> {{ t('action.edit') }} | ||
| 121 | - </el-button> | ||
| 122 | - <el-button link type="primary" v-hasPermi="['bpm:form:update']" @click="handleDetail(row)"> | ||
| 123 | - <Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }} | ||
| 124 | - </el-button> | ||
| 125 | - <el-button | ||
| 126 | - link | ||
| 127 | - type="primary" | ||
| 128 | - v-hasPermi="['bpm:form:delete']" | ||
| 129 | - @click="delList(row.id, false)" | ||
| 130 | - > | ||
| 131 | - <Icon icon="ep:delete" class="mr-1px" /> {{ t('action.del') }} | ||
| 132 | - </el-button> | ||
| 133 | - </template> | ||
| 134 | - </Table> | ||
| 135 | - </ContentWrap> | ||
| 136 | - | ||
| 137 | - <XModal v-model="dialogVisible" :title="dialogTitle"> | ||
| 138 | - <!-- 对话框(添加 / 修改) --> | ||
| 139 | - <Form | ||
| 140 | - v-if="['create', 'update'].includes(actionType)" | ||
| 141 | - :schema="allSchemas.formSchema" | ||
| 142 | - :rules="rules" | ||
| 143 | - ref="formRef" | ||
| 144 | - /> | ||
| 145 | - <!-- 对话框(详情) --> | ||
| 146 | - <Descriptions | ||
| 147 | - v-if="actionType === 'detail'" | ||
| 148 | - :schema="allSchemas.detailSchema" | ||
| 149 | - :data="detailData" | ||
| 150 | - /> | ||
| 151 | - <!-- 操作按钮 --> | ||
| 152 | - <template #footer> | ||
| 153 | - <!-- 按钮：保存 --> | ||
| 154 | - <XButton | ||
| 155 | - v-if="['create', 'update'].includes(actionType)" | ||
| 156 | - type="primary" | ||
| 157 | - :title="t('action.save')" | ||
| 158 | - :loading="actionLoading" | ||
| 159 | - @click="submitForm()" | ||
| 160 | - /> | ||
| 161 | - <!-- 按钮：关闭 --> | ||
| 162 | - <XButton :loading="actionLoading" :title="t('dialog.close')" @click="dialogVisible = false" /> | ||
| 163 | - </template> | ||
| 164 | - </XModal> | ||
| 165 | -</template> |