Vue3 + veaury集成AmisEditor，CRUD组件在配置按钮后，显示表格渲染错误

citynook commented 1 year ago

描述问题：

Vite + Vue3的项目，使用了 veaury 对 AmisEditor 组件进行转换，编辑器能正常显示。在添加CRUD组件时，如果选择了启动按钮例如“新增”，确认后编辑窗口会报这个CRUD组件渲染错误。

截图或视频：

在CRUD配置界面选择一个按钮。

回到编辑窗口，再次选择CRUD组件，就会报错。

如何复现（请务必完整填写下面内容）：

你是如何使用 amis 的？ pnpm
amis 版本是什么？请先在最新 beta 版本测试问题是否存在 amis: 2.8.0 amis-editor: 5.2.5 veaury: 2.3.12

粘贴有问题的完整 amis schema 代码：


<!-- eslint-disable vue/v-on-event-hyphenation -->
<template>
<div class="amis">
<amisEditor
  className="is-fixed"
  :isMobile="isMobile"
  :preview="isPreview"
  :theme="theme"
  :amisEnv="env"
  :value="value"
  :onChange="onChange"
  :onSave="onSave"
  :actionOptions="actionOptions"
/>
</div>
</template>
<script>
import { Editor } from 'amis-editor';
//import '@fortawesome/fontawesome-free/css/all.css';
import '@fortawesome/fontawesome-free/css/v4-shims.css';
import '../../../../node_modules/amis-editor-core/lib/style.css';
//import 'amis/sdk/sdk.css';
//import 'amis/lib/helper.css';
//import 'amis/sdk/iconfont.css';
//import 'amis/lib/themes/default.css';
//import 'amis/lib/themes/ang.css';
//import 'amis/lib/themes/antd.css';
import 'amis/lib/themes/cxd.css';
//import 'amis/lib/themes/dark.css';
//import './style.scss';
import { applyPureReactInVue } from 'veaury';
//import 'amis/sdk/sdk.js';

export default {
// eslint-disable-next-line vue/multi-word-component-names
name: 'Editor',
components: {
  amisEditor: applyPureReactInVue(Editor),
},
props: {
  isPreview: {
    type: Boolean,
    default: false,
  },
  isMobile: {
    type: Boolean,
    default: false,
  },
  theme: {
    type: String,
    default: 'cxd',
  },
  value: {
    type: Object,
    default: function () {
      return {
        message: 'hello',
      };
    },
  },
},
data() {
  return {
    refreshKey: Math.random() * (3 - 1),
    schema: {},
    env: {
      /*
      fetcher(config) {
        return new Promise((resolve) => {
          const reqId = nextReqId++;
          const timerId = setTimeout(() => {
            onComplete({
              status: 500,
              data: {
                ok: false,
                status: 500,
                msg: '调用超时',
              },
            });
          }, 5000);
          function onComplete(data) {
            window.clearTimeout(timerId);
            delete runningRequests[reqId];
            resolve(data);
          }
          runningRequests[reqId] = { onComplete, timerId };
        });
      },
      notify: (type, msg, conf) => {
        if (msg.startsWith('_')) return;
        conf = { closeButton: true, ...conf }(toast)[type] ? toast[type](msg, conf) : console.warn('[notify]', type, msg);
      },
      confirm,
      alert,
      copy: (contents, options = {}) => {
        const ret = copy(contents, options);
        ret && (!options || options.shutup !== true) && toast.info('内容已拷贝到剪切板');
        return ret;
      },*/
    },
    actionOptions: {
      showOldEntry: false,
    },
  };
},
mounted() {
  //this.initEnv();
  this.schema = this.value;
},
methods: {
  setSchema(obj) {
    console.log(obj);
    this.schema = obj;
  },
  getSchema() {
    console.log('233');
    return this.schema;
  },

  onChange(e) {
    console.log(JSON.stringify(e));
    this.$emit('onChange', e);
  },
  onSave() {},
},
};
</script>

操作步骤 vue代码可以直接显示，我不清楚用这种方法将AmisEditor集成到Vue3项目中是否正确！如果有更佳的方法，还请提供一下示例代码。

github-actions[bot] commented 1 year ago

👍 Thanks for this! 🏷 I have applied any labels matching special text in your issue.

Please review the labels and make any necessary changes.

citynook commented 1 year ago

在原始项目上重新安装Amis及相关的包后，问题消失，不清楚是什么原因。

citynook commented 1 year ago

在原始项目上重新安装Amis及相关的包后，问题消失，不清楚是什么原因。

baidu / amis