重要备注

不要升级依赖，除非你想处理一些奇奇怪怪的错误

"ace-builds": "1.4.12" 版本固定，其余版本会出现打包成组件后 basePath 不正确的问题

defineAsyncComponent 引入组件时可能会导致打包 lib 失败,根据提示修改对应文件引入方式即可

打包

执行 npm run lib

测试

npm link 后测试存在问题，具体原因待分析。

直接发布 npm 进行测试，然后删除错误版本 npm unpublish [email protected] --force, 0.0.9 需要移除的版本名称。

安装

执行 npm i lz-resource-center-form

import lzResourceCenter from "lz-resource-center-form";
import "lz-resource-center-form/style.css";

// 注册插件
const opts = {
    APP_BASE_URL: __iWorkConfig.backEndServerUrl,
};
app.use(lzResourceCenter, opts);

render 体积更小

包含 ResourceCenterFormAdd、ResourceCenterFormDesignView、ResourceCenterFormView 组件

import lzResourceCenterForm from "lz-resource-center-form/render/render.umd";
import "lz-resource-center-form/render/render.style.css";

export default (app) => {
    app.use(lzResourceCenterForm, {
        APP_BASE_URL: window.__iWorkConfig.backEndServerUrl,
        APP_MAP_CENTER: window.__iWorkConfig.VUE_AMAP_CENTER,
    });
};

vite 需额外配置 vite.config.js

export default defineConfig({
    // ...省略其他配置
    optimizeDeps: {
        include: ['lz-resource-center-form'],  //此处路径必须跟main.js中import路径完全一致！
    },
    build: {
        /* 其他build生产打包配置省略 */
        commonjsOptions: {
            include: /node_modules|lz-resource-center-form/   //这里记得把lib目录加进来，否则生产打包会报错！！
        }
    },
})

组件，向外提供三个组件

pageConfig props 参数

const pageConfig = {
    formId: '', // 表单id
    formName: '', // 表单名称
    pageType: '', // 页面类型
    indexName: '', // es 表名
    formDataId: '', // 是表单填报数据的id
    resourceTypeId: '', // 资源类型id
    resourceTypeCode: '', // 资源类型 code
    isCurrentForm: false, // 是否继承上级表单
    dataSourceCode: '', // 数据来源
}

ResourceCenterFormDesign

表单设计

<ResourceCenterFormDesign :page-config="pageConfig"></ResourceCenterFormDesign>

ResourceCenterFormAdd

表单新增、编辑、查看

<ResourceCenterFormAdd :page-config="pageConfig"></ResourceCenterFormAdd>

ResourceCenterFormView

查看组件不可进入编辑

const pageConfig = {
    formId: '',
    token: '',
    formDataId: ''
}

<ResourceCenterFormView :page-config="pageConfig"></ResourceCenterFormView>