iot-device-management-frontend/apps/web-antd/src/views/bpm/form/editor.vue

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';

import { Page, useVbenModal } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';

import FcDesigner from '@form-create/antd-designer';
import { Button, message } from 'ant-design-vue';

import { getFormDetail } from '#/api/bpm/form';
import { useFormCreateDesigner } from '#/components/form-create';
import { router } from '#/router';
import { setConfAndFields } from '#/utils';

import Form from './modules/form.vue';

defineOptions({ name: 'BpmFormEditor' });

const props = defineProps<Props>();

interface Props {
  copyId?: number;
  id?: number;
  type: 'copy' | 'create' | 'edit';
}

// 流程表单详情
const flowFormConfig = ref();

const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: Form,
  destroyOnClose: true,
});

const designerRef = ref<InstanceType<typeof FcDesigner>>();

// 表单设计器配置
const designerConfig = ref({
  switchType: [], // 是否可以切换组件类型,或者可以相互切换的字段
  autoActive: true, // 是否自动选中拖入的组件
  useTemplate: false, // 是否生成vue2语法的模板组件
  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) {
  try {
    const formDetail = await getFormDetail(id);
    flowFormConfig.value = formDetail;
    if (designerRef.value) {
      setConfAndFields(designerRef, formDetail.conf, formDetail.fields);
    }
  } catch {
    message.error('加载表单配置失败');
  }
}

// 初始化设计器
async function initializeDesigner() {
  const id = currentFormId.value;

  if (props.type === 'copy' && !id) {
    message.error('复制ID不能为空');
    return;
  }

  if (id) {
    await loadFormConfig(id);
  }
}

function handleSave() {
  formModalApi
    .setData({
      designer: designerRef.value,
      formConfig: flowFormConfig.value,
      action: props.type,
    })
    .open();
}

function onBack() {
  router.push({
    path: '/bpm/manager/form',
    query: {
      refresh: '1',
    },
  });
}

onMounted(() => {
  initializeDesigner();
});
</script>

<template>
  <Page auto-content-height>
    <FormModal @success="onBack" />

    <FcDesigner class="my-designer" ref="designerRef" :config="designerConfig">
      <template #handle>
        <Button size="small" type="primary" @click="handleSave">
          <IconifyIcon icon="mdi:content-save" />
          保存
        </Button>
      </template>
    </FcDesigner>
  </Page>
</template>

<style scoped>
.my-designer {
  height: 100%;
  min-height: 500px;
}
</style>