155 lines
4.0 KiB
Vue
155 lines
4.0 KiB
Vue
<script lang="ts" setup>
|
|
import { computed, onMounted, ref } from 'vue';
|
|
|
|
import { Page, useVbenModal } from '@vben/common-ui';
|
|
import { useTabs } from '@vben/hooks';
|
|
import { IconifyIcon } from '@vben/icons';
|
|
|
|
import FcDesigner from '@form-create/designer';
|
|
import { ElButton, ElMessage } from 'element-plus';
|
|
|
|
import { getForm } from '#/api/bpm/form';
|
|
import {
|
|
setConfAndFields,
|
|
useFormCreateDesigner,
|
|
} from '#/components/form-create';
|
|
import { router } from '#/router';
|
|
|
|
import Form from './modules/form.vue';
|
|
|
|
defineOptions({ name: 'BpmFormEditor' });
|
|
|
|
const props = defineProps<{
|
|
copyId?: number | string;
|
|
id?: number | string;
|
|
type: 'copy' | 'create' | 'edit';
|
|
}>();
|
|
|
|
const loading = ref(false);
|
|
const tabs = useTabs();
|
|
const flowFormConfig = ref();
|
|
const designerRef = ref<InstanceType<typeof FcDesigner>>();
|
|
|
|
const [FormModal, formModalApi] = useVbenModal({
|
|
connectedComponent: Form,
|
|
destroyOnClose: true,
|
|
});
|
|
|
|
const designerConfig = ref({
|
|
switchType: [], // 是否可以切换组件类型,或者可以相互切换的字段
|
|
autoActive: true, // 是否自动选中拖入的组件
|
|
useTemplate: false, // 是否生成 Vue 语法的模板组件
|
|
formOptions: {
|
|
form: {
|
|
labelWidth: '100px', // 设置默认的 label 宽度为 100px
|
|
},
|
|
}, // 定义表单配置默认值
|
|
fieldReadonly: false, // 配置field是否可以编辑
|
|
hiddenDragMenu: false, // 隐藏拖拽操作按钮
|
|
hiddenDragBtn: false, // 隐藏拖拽按钮
|
|
hiddenMenu: [], // 隐藏部分菜单
|
|
hiddenItem: [], // 隐藏部分组件
|
|
hiddenItemConfig: {}, // 隐藏组件的部分配置项
|
|
disabledItemConfig: {}, // 禁用组件的部分配置项
|
|
showSaveBtn: false, // 是否显示保存按钮
|
|
showConfig: true, // 是否显示右侧的配置界面
|
|
showBaseForm: true, // 是否显示组件的基础配置表单
|
|
showControl: true, // 是否显示组件联动
|
|
showPropsForm: true, // 是否显示组件的属性配置表单
|
|
showEventForm: true, // 是否显示组件的事件配置表单
|
|
showValidateForm: true, // 是否显示组件的验证配置表单
|
|
showFormConfig: true, // 是否显示表单配置
|
|
showInputData: true, // 是否显示录入按钮
|
|
showDevice: true, // 是否显示多端适配选项
|
|
appendConfigData: [], // 定义渲染规则所需的formData
|
|
}); // 表单设计器配置
|
|
|
|
useFormCreateDesigner(designerRef); // 表单设计器增强
|
|
|
|
/** 计算属性：获取当前需要加载的表单 ID */
|
|
const currentFormId = computed(() => {
|
|
switch (props.type) {
|
|
case 'copy': {
|
|
return props.copyId;
|
|
}
|
|
case 'create':
|
|
case 'edit': {
|
|
return props.id;
|
|
}
|
|
default: {
|
|
return undefined;
|
|
}
|
|
}
|
|
});
|
|
|
|
/** 加载表单配置 */
|
|
async function loadFormConfig(id: number) {
|
|
loading.value = true;
|
|
try {
|
|
const formDetail = await getForm(id);
|
|
flowFormConfig.value = formDetail;
|
|
if (designerRef.value) {
|
|
setConfAndFields(designerRef, formDetail.conf, formDetail.fields);
|
|
}
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
/** 初始化设计器 */
|
|
async function initializeDesigner() {
|
|
const id = currentFormId.value;
|
|
if (props.type === 'copy' && !id) {
|
|
ElMessage.error('复制 ID 不能为空');
|
|
return;
|
|
}
|
|
if (id) {
|
|
await loadFormConfig(Number(id));
|
|
}
|
|
}
|
|
|
|
/** 保存表单 */
|
|
function handleSave() {
|
|
formModalApi
|
|
.setData({
|
|
designer: designerRef.value,
|
|
formConfig: flowFormConfig.value,
|
|
action: props.type,
|
|
})
|
|
.open();
|
|
}
|
|
|
|
/** 返回列表页 */
|
|
function handleBack() {
|
|
tabs.closeCurrentTab();
|
|
router.push({
|
|
name: 'BpmForm',
|
|
});
|
|
}
|
|
|
|
/** 初始化 */
|
|
onMounted(() => {
|
|
initializeDesigner();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Page auto-content-height>
|
|
<FormModal @success="handleBack" />
|
|
|
|
<FcDesigner
|
|
ref="designerRef"
|
|
height="90vh"
|
|
v-loading="loading"
|
|
:config="designerConfig"
|
|
>
|
|
<template #handle>
|
|
<ElButton size="small" type="primary" @click="handleSave">
|
|
<IconifyIcon icon="mdi:content-save" />
|
|
保存
|
|
</ElButton>
|
|
</template>
|
|
</FcDesigner>
|
|
</Page>
|
|
</template>
|