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 | 3 | const { t } = useI18n() // 国际化 |
| 3 | 4 | |
| 4 | 5 | // 表单校验 |
| ... | ... | @@ -7,52 +8,33 @@ export const rules = reactive({ |
| 7 | 8 | }) |
| 8 | 9 | |
| 9 | 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 | 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 | 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 | 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 | 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 | 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> | ... | ... |