| 提交 | 用户 | 时间 | ||
| 820397 | 1 | <template> |
| 3e359e | 2 | <ContentWrap :body-style="{ padding: '0px' }" class="!mb-0"> |
| 820397 | 3 | <!-- 表单设计器 --> |
| 3e359e | 4 | <div |
| H | 5 | class="h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-content-padding)-var(--app-content-padding)-2px)]" |
| 6 | > | |
| 7 | <fc-designer class="my-designer" ref="designer" :config="designerConfig"> | |
| 8 | <template #handle> | |
| 9 | <el-button size="small" type="success" plain @click="handleSave"> | |
| 10 | <Icon class="mr-5px" icon="ep:plus" /> | |
| 11 | 保存 | |
| 12 | </el-button> | |
| 13 | </template> | |
| 14 | </fc-designer> | |
| 15 | </div> | |
| 820397 | 16 | </ContentWrap> |
| H | 17 | |
| 18 | <!-- 表单保存的弹窗 --> | |
| 19 | <Dialog v-model="dialogVisible" title="保存表单" width="600"> | |
| 20 | <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px"> | |
| 21 | <el-form-item label="表单名" prop="name"> | |
| 22 | <el-input v-model="formData.name" placeholder="请输入表单名" /> | |
| 23 | </el-form-item> | |
| 24 | <el-form-item label="状态" prop="status"> | |
| 25 | <el-radio-group v-model="formData.status"> | |
| 26 | <el-radio | |
| 27 | v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)" | |
| 28 | :key="dict.value" | |
| 3e359e | 29 | :value="dict.value" |
| 820397 | 30 | > |
| H | 31 | {{ dict.label }} |
| 32 | </el-radio> | |
| 33 | </el-radio-group> | |
| 34 | </el-form-item> | |
| 35 | <el-form-item label="备注" prop="remark"> | |
| 36 | <el-input v-model="formData.remark" placeholder="请输入备注" type="textarea" /> | |
| 37 | </el-form-item> | |
| 38 | </el-form> | |
| 39 | <template #footer> | |
| 40 | <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button> | |
| 41 | <el-button @click="dialogVisible = false">取 消</el-button> | |
| 42 | </template> | |
| 43 | </Dialog> | |
| 44 | </template> | |
| 45 | <script lang="ts" setup> | |
| 46 | import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' | |
| 47 | import { CommonStatusEnum } from '@/utils/constants' | |
| 48 | import * as FormApi from '@/api/bpm/form' | |
| 49 | import FcDesigner from '@form-create/designer' | |
| 50 | import { encodeConf, encodeFields, setConfAndFields } from '@/utils/formCreate' | |
| 51 | import { useTagsViewStore } from '@/store/modules/tagsView' | |
| 52 | import { useFormCreateDesigner } from '@/components/FormCreate' | |
| 53 | ||
| 54 | defineOptions({ name: 'BpmFormEditor' }) | |
| 55 | ||
| 56 | const { t } = useI18n() // 国际化 | |
| 57 | const message = useMessage() // 消息 | |
| 58 | const { push, currentRoute } = useRouter() // 路由 | |
| 59 | const { query } = useRoute() // 路由信息 | |
| 60 | const { delView } = useTagsViewStore() // 视图操作 | |
| 61 | ||
| 3e359e | 62 | // 表单设计器配置 |
| H | 63 | const designerConfig = ref({ |
| 64 | switchType: [], // 是否可以切换组件类型,或者可以相互切换的字段 | |
| 65 | autoActive: true, // 是否自动选中拖入的组件 | |
| 66 | useTemplate: false, // 是否生成vue2语法的模板组件 | |
| 67 | formOptions: { | |
| 68 | form: { | |
| 69 | labelWidth: '100px' // 设置默认的 label 宽度为 100px | |
| 70 | } | |
| 71 | }, // 定义表单配置默认值 | |
| 72 | fieldReadonly: false, // 配置field是否可以编辑 | |
| 73 | hiddenDragMenu: false, // 隐藏拖拽操作按钮 | |
| 74 | hiddenDragBtn: false, // 隐藏拖拽按钮 | |
| 75 | hiddenMenu: [], // 隐藏部分菜单 | |
| 76 | hiddenItem: [], // 隐藏部分组件 | |
| 77 | hiddenItemConfig: {}, // 隐藏组件的部分配置项 | |
| 78 | disabledItemConfig: {}, // 禁用组件的部分配置项 | |
| 79 | showSaveBtn: false, // 是否显示保存按钮 | |
| 80 | showConfig: true, // 是否显示右侧的配置界面 | |
| 81 | showBaseForm: true, // 是否显示组件的基础配置表单 | |
| 82 | showControl: true, // 是否显示组件联动 | |
| 83 | showPropsForm: true, // 是否显示组件的属性配置表单 | |
| 84 | showEventForm: true, // 是否显示组件的事件配置表单 | |
| 85 | showValidateForm: true, // 是否显示组件的验证配置表单 | |
| 86 | showFormConfig: true, // 是否显示表单配置 | |
| 87 | showInputData: true, // 是否显示录入按钮 | |
| 88 | showDevice: true, // 是否显示多端适配选项 | |
| 89 | appendConfigData: [] // 定义渲染规则所需的formData | |
| 90 | }) | |
| 820397 | 91 | const designer = ref() // 表单设计器 |
| H | 92 | useFormCreateDesigner(designer) // 表单设计器增强 |
| 93 | const dialogVisible = ref(false) // 弹窗是否展示 | |
| 94 | const formLoading = ref(false) // 表单的加载中：提交的按钮禁用 | |
| 95 | const formData = ref({ | |
| 96 | name: '', | |
| 97 | status: CommonStatusEnum.ENABLE, | |
| 98 | remark: '' | |
| 99 | }) | |
| 100 | const formRules = reactive({ | |
| 101 | name: [{ required: true, message: '表单名不能为空', trigger: 'blur' }], | |
| 102 | status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }] | |
| 103 | }) | |
| 104 | const formRef = ref() // 表单 Ref | |
| 105 | ||
| 106 | /** 处理保存按钮 */ | |
| 107 | const handleSave = () => { | |
| 108 | dialogVisible.value = true | |
| 109 | } | |
| 110 | ||
| 111 | /** 提交表单 */ | |
| 112 | const submitForm = async () => { | |
| 113 | // 校验表单 | |
| 114 | if (!formRef) return | |
| 115 | const valid = await formRef.value.validate() | |
| 116 | if (!valid) return | |
| 117 | // 提交请求 | |
| 118 | formLoading.value = true | |
| 119 | try { | |
| 120 | const data = formData.value as FormApi.FormVO | |
| 121 | data.conf = encodeConf(designer) // 表单配置 | |
| 122 | data.fields = encodeFields(designer) // 表单字段 | |
| 123 | if (!data.id) { | |
| 124 | await FormApi.createForm(data) | |
| 125 | message.success(t('common.createSuccess')) | |
| 126 | } else { | |
| 127 | await FormApi.updateForm(data) | |
| 128 | message.success(t('common.updateSuccess')) | |
| 129 | } | |
| 130 | dialogVisible.value = false | |
| 131 | close() | |
| 132 | } finally { | |
| 133 | formLoading.value = false | |
| 134 | } | |
| 135 | } | |
| 136 | /** 关闭按钮 */ | |
| 137 | const close = () => { | |
| 138 | delView(unref(currentRoute)) | |
| 139 | push('/bpm/manager/form') | |
| 140 | } | |
| 141 | ||
| 142 | /** 初始化 **/ | |
| 143 | onMounted(async () => { | |
| 144 | // 场景一：新增表单 | |
| 145 | const id = query.id as unknown as number | |
| 146 | if (!id) { | |
| 147 | return | |
| 148 | } | |
| 149 | // 场景二：修改表单 | |
| 150 | const data = await FormApi.getForm(id) | |
| 151 | formData.value = data | |
| 152 | setConfAndFields(designer, data.conf, data.fields) | |
| 153 | }) | |
| 154 | </script> | |
| 3e359e | 155 | |
| H | 156 | <style> |
| 157 | .my-designer { | |
| 158 | ._fc-l, | |
| 159 | ._fc-m, | |
| 160 | ._fc-r { | |
| 161 | border-top: none; | |
| 162 | } | |
| 163 | } | |
| 164 | </style> | |
