修改自定义表单

康鲁杰

22 小时以前 6f10d1a4ba4df1565927ced7d70e77fe21f487e1

 ruoyi-ui/apps/web-antd/src/views/tool/page-designer/page-drawer.vue

@@ -40,6 +40,7 @@
const modalVisible = ref(false);
const modalLoading = ref(false);
const currentEditId = ref<string | number>(''); // 当前编辑的ID
const fullMenuTree = ref([]);

// 打开弹窗
const open = async (params: ModalProps = { update: false }) => {
@@ -51,16 +52,16 @@
    await setupPageSelect();
    
    if (params.id) {
      await formApi.setFieldValue('menuId', params.id);
      await formApi.setFieldValue('menuParentId', params.id);
      if (params.update) {
        // 获取详情数据
        const record = await pageInfo(params.id);
        console.log('编辑数据:', record);
        
        // 设置基础表单数据
        const menuParentId = String(record.menuParentId || record.parentId || '');
        await formApi.setValues({
          name: record.name,
          menuId: record.menuId || record.parentId || params.id,  // 优先使用menuId，其次parentId
          menuParentId: menuParentId,  // 用 menuParentId 字段
          status: record.status,
          remark: record.remark,
          actionsFunc: record.actionsFunc ? JSON.parse(record.actionsFunc) : ['add', 'edit', 'delete', 'query']
@@ -80,7 +81,6 @@
            // 恢复选中的字段
            if (record.showColumn) {
              selectedFields.value = JSON.parse(record.showColumn);
              console.log('恢复选中字段:', selectedFields.value);
            }
          } catch (e) {
            console.error('加载表单设计数据失败:', e);
@@ -116,36 +116,46 @@
  filteredList.forEach(item => { item.menuName = $t(item.menuName); });
  // 转为树结构
  const menuTree = listToTree(filteredList, { id: 'menuId', pid: 'parentId' });
  // 加根节点
  const fullMenuTree = [
  // 递归映射 menuId -> menuParentId
  function mapMenuIdToParentId(list) {
    return list.map(item => {
      const newItem = { ...item, menuParentId: item.menuId };
      if (item.children) {
        newItem.children = mapMenuIdToParentId(item.children);
      }
      return newItem;
    });
  }
  fullMenuTree.value = [
    {
      menuId: 0,
      menuParentId: 0,
      menuName: $t('menu.root'),
      children: menuTree,
      children: mapMenuIdToParentId(menuTree),
    },
  ];
  // 生成全路径名
  addFullName(fullMenuTree, 'menuName', ' / ');
  addFullName(fullMenuTree.value, 'menuName', ' / ');

  formApi.updateSchema([
    {
      componentProps: {
        fieldNames: {
          label: 'menuName',
          value: 'menuId',
          value: 'menuId', // 用 menuId
          children: 'children'
        },
        getPopupContainer,
        listHeight: 300,
        showSearch: true,
        treeData: fullMenuTree,
        treeData: fullMenuTree.value,
        treeDefaultExpandAll: false,
        treeDefaultExpandedKeys: [0],
        treeLine: { showLeafIcon: false },
        treeNodeFilterProp: 'menuName',
        treeNodeLabelProp: 'fullName',
      },
      fieldName: 'menuId',
      fieldName: 'menuParentId', // 用 menuParentId
    },
  ]);
}
@@ -155,7 +165,6 @@
const syncAllFields = () => {
  // 获取表单组件的规则描述
  const formDesc = designer.value?.getFormDescription?.();
  console.log('表单组件描述:', formDesc);
  
  if (!formDesc || !Array.isArray(formDesc)) {
    message.warning('暂无设计数据');
@@ -170,7 +179,6 @@
      field: item.field
    }));
  
  console.log('提取的字段:', allFields);
  
  if (allFields.length === 0) {
    message.warning('未找到可用字段');
@@ -190,7 +198,6 @@

// 处理设计器变化
const handleDesignerChange = () => {
  console.log('设计器内容变化');
  nextTick(() => {
    updateFieldOptions();
  });
@@ -198,9 +205,6 @@

// 当设计器内容变化时更新字段选项
const updateFieldOptions = () => {
  console.log('updateFieldOptions');
  console.log('designer.value', designer.value);
  
  // 获取表单组件的规则描述
  const formDesc = designer.value?.getFormDescription?.();
  if (!formDesc || !Array.isArray(formDesc)) return;
@@ -216,8 +220,6 @@
    label: item.title,
    value: item.field
  }));
  
  console.log('更新后的字段选项:', fieldOptions.value);
};

// 监听设计器内容变化