cloud-web-corejs 1.1.0-dev.5 → 1.1.0-dev.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.1.0-dev.5",
+  "version": "1.1.0-dev.6",
   "scripts": {
     "dev": "vue-cli-service serve",
     "dev:micro": "vue-cli-service serve --port 17527",

package/src/components/VabUpload/index.vue

@@ -28,7 +28,7 @@
           </div>
           <ul class="el-upload-list el-upload-list--picture">
             <div class="nodata" v-if="pasteList.length == 0">
-              <img src="~@/resources/images/nodata2.png"/>
+              <img :src="$assetUrl(require('@/resources/images/nodata2.png'))" />
             </div>
             <li v-for="(pasteFile,index) in pasteList" :key="index" class="el-upload-list__item is-success">
               <div>

package/src/components/excelImport/index.vue

@@ -26,7 +26,7 @@
           </div>
         </el-upload>
         <div class="upload-finish" v-if="fileRaw">
-          <img :src="require('@/resources' + '/images/ico-excel.svg')" class="ico"/>
+          <img :src="$assetUrl(require('@/resources' + '/images/ico-excel.svg'))" class="ico"/>
           <p class="name">{{ fileRaw.name }}</p>
           <!-- <p>2022-1-17</p> -->
           <el-tooltip :enterable="false" class="item" effect="dark"

package/src/components/jsonImport/index.vue

@@ -21,7 +21,7 @@
           </div>
         </el-upload>
         <div class="upload-finish" v-if="fileRaw">
-          <img :src="require('@/resources' + '/images/ico-txt.svg')" class="ico"/>
+          <img :src="$assetUrl(require('@/resources' + '/images/ico-txt.svg'))" class="ico"/>
           <p class="name">{{ fileRaw.name }}</p>
           <!-- <p>2022-1-17</p> -->
           <el-tooltip :enterable="false" class="item" effect="dark"

package/src/components/langImport/index.vue

@@ -21,7 +21,7 @@
           </div>
         </el-upload>
         <div class="upload-finish" v-if="fileRaw">
-          <img :src="require('@/resources' + '/images/ico-txt.svg')" class="ico"/>
+          <img :src="$assetUrl(require('@/resources' + '/images/ico-txt.svg'))" class="ico"/>
           <p class="name">{{ fileRaw.name }}</p>
           <!-- <p>2022-1-17</p> -->
           <el-tooltip :enterable="false" class="item" effect="dark"

package/src/components/obsUpload/index.vue

@@ -20,7 +20,7 @@
           </div>
           <ul class="el-upload-list el-upload-list--picture">
             <div class="nodata" v-if="pasteList.length == 0">
-              <img src="~@/resources/images/nodata2.png"/>
+              <img :src="$assetUrl(require('@/resources/images/nodata2.png'))" />
             </div>
             <li v-for="(pasteFile,index) in pasteList" :key="index" class="el-upload-list__item is-success">
               <div>

package/src/components/xform/form-designer/form-widget/dialog/importDialog.vue

@@ -25,7 +25,7 @@
           </div>
         </el-upload>
         <div class="upload-finish" v-if="fileRaw">
-          <img :src="require('@/resources' + '/images/ico-excel.svg')" class="ico"/>
+          <img :src="$assetUrl(require('@/resources' + '/images/ico-excel.svg'))" class="ico"/>
           <p class="name">{{ fileRaw.name }}</p>
           <!-- <p>2022-1-17</p> -->
           <el-tooltip :enterable="false" class="item" effect="dark"

package/src/components/xform/form-designer/indexMixin.js

@@ -360,6 +360,11 @@ modules = {
         if (modifiedFlag) {
           this.designer.emitHistoryChange();
         }
+        /* 模板 JSON 里的 layoutType 此刻才写入；左侧面板 mounted 时仍是默认 PC，
+           必须再筛一次，否则进入 H5 模板时仍展示 PC 容器（data-table/detail 等） */
+        this.$nextTick(() => {
+          this.loadWidgets();
+        });
       } else {
         this.clearDesigner();
       }
@@ -826,7 +831,9 @@ modules = {
       });
     },
     loadWidgets() {
-      this.$refs.widgetPanelRef.loadWidgets();
+      if (this.$refs.widgetPanelRef) {
+        this.$refs.widgetPanelRef.loadWidgets();
+      }
     },
     getBdEnv() {
       getBdFlag({

package/src/components/xform/form-designer/toolbar-panel/index.vue

@@ -17,7 +17,7 @@
       >
         <svg-icon icon-class="redo" />
       </el-button>
-      <el-button-group v-if="$store.getters.loginAccount === 'dev_徐凯'">
+      <el-button-group>
         <el-button
           :type="layoutType === 'PC' ? 'info' : ''"
           @click="changeLayoutType('PC')"

package/src/components/xform/form-designer/toolbar-panel/indexMixin.js

@@ -354,6 +354,7 @@ modules = {
         let importObj = JSON.parse(this.importTemplate);
         this.designer.handleImportJson(importObj);
         this.designer.loadFormJson(importObj);
+        this.$emit("loadWidgets");
 
         this.showImportJsonDialogFlag = false;
         this.$message.success(this.i18nt("designer.hint.importJsonSuccess"));

package/src/components/xform/form-designer/widget-panel/indexMixin.js

@@ -115,6 +115,16 @@ modules = {
         ? !1
         : !!this.designerConfig.metadataLib;
     },
+    currentLayoutType() {
+      return (this.designer && this.designer.formConfig && this.designer.formConfig.layoutType) || "PC";
+    },
+  },
+  watch: {
+    /* 打开 H5 模板是 setFormJson 后才写入 layoutType；面板 mounted 时仍是默认 PC。
+       版式变化后必须按新 layoutType 重筛，否则左侧一直停在 PC 组件列表。 */
+    currentLayoutType() {
+      this.loadWidgets();
+    },
   },
   mounted() {
     this.designerConfig.chartLib && (this.firstTab = "chartLib"),
@@ -181,7 +191,8 @@ modules = {
 
       this.commonContainers = this.containers.filter(con => !!con.commonFlag && this.getIsShow(con));
 
-      this.basicFields = this.basicFields.map(fld => {
+      /* 每次从 widgetsConfig 原表筛，不能拿 this.xxx（已被上次 layoutType 滤过）再滤一遍 */
+      this.basicFields = basicFields.map(fld => {
         return {
           ...fld,
           displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
@@ -190,7 +201,7 @@ modules = {
         return !this.isBanned(fld.type) && this.getIsShow(fld);
       });
 
-      this.advancedFields = this.advancedFields.map(fld => {
+      this.advancedFields = advancedFields.map(fld => {
         return {
           ...fld,
           displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
@@ -209,7 +220,7 @@ modules = {
       );
       this.advancedFields = this.sortByPanelOrder(this.advancedFields, widgetPanelOrder.advancedFields);
 
-      this.businessFields = this.businessFields.map(fld => {
+      this.businessFields = businessFields.map(fld => {
         return {
           ...fld,
           displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
@@ -229,7 +240,7 @@ modules = {
           && moveTypes.indexOf(fld.type) === -1;
       }), widgetPanelOrder.advancedFields);
 
-      this.customFields = this.customFields.map(fld => {
+      this.customFields = customFields.map(fld => {
         return {
           ...fld,
           displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)

package/src/utils/assetUrl.js

@@ -0,0 +1,19 @@
+/**
+ * 取出 require(图片) 的真实 URL。
+ *
+ * webpack4(url-loader，vue-cli 设了 esModule:false) 下 require 直接返回 URL 字符串；
+ * webpack5(vue-cli5 的 asset modules) 下返回的是 ES Module 命名空间对象，且该对象
+ * 由 Object.create(null) 生成——没有原型链就没有 toString，直接绑到 :src 上时
+ * setAttribute 会抛 "Cannot convert object to primitive value" 整棵子树渲染失败
+ * （webpack5 的 asset modules 没有 esModule 开关，只能在取值处兜底）。
+ *
+ * 消费应用的构建配置不受本库控制，凡是把 require 结果往 DOM 属性上放的地方都要过这里。
+ */
+export function assetUrl(mod) {
+  if (mod && typeof mod === "object") {
+    return mod.default || "";
+  }
+  return mod || "";
+}
+
+export default assetUrl;

package/src/utils/vab.js

@@ -13,6 +13,7 @@ import XEUtils from "xe-utils";
 import prefixConfig from "@/prefixConfig.js";
 import moment from "moment";
 import { openView } from "./repeatOpen";
+import { assetUrl } from "./assetUrl";
 
 let imFun = {
   request,
@@ -28,7 +29,8 @@ let imFun = {
 };
 
 function reqImg(a) {
-  return require("@/resources/images/" + a);
+  /* webpack5 下 require 返回的是无原型的 Module 对象，直接当 src 用会崩，统一取真实 URL */
+  return assetUrl(require("@/resources/images/" + a));
 }
 
 const FILE_ICON_NAME_MAP = {
@@ -398,6 +400,8 @@ install = (Vue, opts = {}) => {
   Vue.prototype.$baseLodash = imFun.lodash;
   /* 全局事件总线 */
   Vue.prototype.$baseEventBus = new Vue();
+  /* 模板里 :src="$assetUrl(require(...))" 用，见 utils/assetUrl.js */
+  Vue.prototype.$assetUrl = assetUrl;
 
   Vue.prototype.$commonFileUtil = {
     // 文件类型获取与判断接口

package/src/views/user/wf/wf_obj_config/importItemDialog.vue

@@ -20,7 +20,7 @@
           </div>
         </el-upload>
         <div class="upload-finish" v-if="fileRaw">
-          <img :src="require('@/resources' + '/images/ico-txt.svg')" class="ico"/>
+          <img :src="$assetUrl(require('@/resources' + '/images/ico-txt.svg'))" class="ico"/>
           <p class="name">{{ fileRaw.name }}</p>
           <!-- <p>2022-1-17</p> -->
           <el-tooltip :enterable="false" class="item" effect="dark"