表格字段增加自定义渲染。

src/resource/dictionary/FieldUtil.js

@@ -324,6 +324,21 @@ export default {
     return false;
   },
 
+  /**
+   * 是否是自定义渲染
+   */
+  isCustomerRender: function (field) {
+    if (field.displayType == undefined) {
+      return false;
+    }
+    if (field.displayType == 'CustomerRender') {
+      return true;
+    }
+    return false;
+  },
+
+
+
   /**
    * 格式化数据
    * @param  {[type]} value      [description]

src/window1/tabGridView/CellTextItem.vue

@@ -9,25 +9,26 @@
         && !fieldUtil.isEnumMultiType(gridFieldItem)
         && !fieldUtil.isEnumListType(gridFieldItem)
         && !fieldUtil.isTextAreaType(gridFieldItem)
-        && !fieldUtil.isRichTextAreaEditor(gridFieldItem)"
+        && !fieldUtil.isRichTextAreaEditor(gridFieldItem)
+        && !fieldUtil.isCustomerRender(gridFieldItem)"
     >
       {{ displayValue(modelData) }}
     </div>
 
     <p
-      v-if="fieldUtil.isRichTextAreaEditor(gridFieldItem)"
+      v-else-if="fieldUtil.isRichTextAreaEditor(gridFieldItem)"
     >
       {{ displayValue(modelData) }}
     </p>
 
     <div
-      v-if="fieldUtil.isTextAreaType(gridFieldItem)"
+      v-else-if="fieldUtil.isTextAreaType(gridFieldItem)"
       class="table-cell-text-line"
     >
       {{ displayValue(modelData) }}
     </div>
 
-    <div v-if="fieldUtil.isEnumListType(gridFieldItem)">
+    <div v-else-if="fieldUtil.isEnumListType(gridFieldItem)">
       {{ getEnmuValue() === "编辑中" ? $t("lang.TabFormFieldView.editing"):
         getEnmuValue() === "审批中" ? $t("lang.TabFormFieldView.pendingApproval"):
         getEnmuValue() === "审批通过" ? $t("lang.TabFormFieldView.approved"):
@@ -40,11 +41,11 @@
       }}
     </div>
 
-    <div v-if="fieldUtil.isEnumMultiType(gridFieldItem)">
+    <div v-else-if="fieldUtil.isEnumMultiType(gridFieldItem)">
       {{ getMultiEnmuValue() }}
     </div>
 
-    <div v-if="fieldUtil.isManyToManySetType(gridFieldItem)">
+    <div v-else-if="fieldUtil.isManyToManySetType(gridFieldItem)">
       <span
         v-for="item, index in getManyToManyValues()"
         :key="index"
@@ -55,12 +56,12 @@
     </div>
 
     <AuthImage
-      v-if="fieldUtil.isImageType(gridFieldItem)"
+      v-else-if="fieldUtil.isImageType(gridFieldItem)"
       :auth-src="imageUrl"
       class="cell-image"
     />
 
-    <span v-if="fieldUtil.isImageListType(gridFieldItem)">
+    <span v-else-if="fieldUtil.isImageListType(gridFieldItem)">
       <AuthImage
         v-for="singleImageName in imageUrls"
         :key="singleImageName"
@@ -70,7 +71,7 @@
     </span>
 
     <VideoListCell
-      v-if="fieldUtil.isVideoType(gridFieldItem)"
+      v-else-if="fieldUtil.isVideoType(gridFieldItem)"
       :field="gridFieldItem"
       :field-value="fieldValue"
       :class-name="className"
@@ -78,7 +79,7 @@
     />
 
     <ButtonCell
-      v-if="fieldUtil.isButtonType(gridFieldItem)"
+      v-else-if="fieldUtil.isButtonType(gridFieldItem)"
       :field="gridFieldItem"
       :field-value="fieldValue"
       :readonly="readOnly"
@@ -86,7 +87,7 @@
     />
 
     <div
-      v-if="fieldUtil.isFileType(gridFieldItem)"
+      v-else-if="fieldUtil.isFileType(gridFieldItem)"
       style="padding: 0px 10px"
     >
       <FileListWidget
@@ -96,6 +97,15 @@
         :readonly="true"
       />
     </div>
+
+    
+    <component 
+      :is="customerComponentName"
+      v-else-if="fieldUtil.isCustomerRender(gridFieldItem)"
+      :field="gridFieldItem"
+      :field-value="fieldValue"
+      :class-name="className"
+    />
   </div>
 </template>
 
@@ -107,6 +117,9 @@ import VideoListCell from '../tabGridWidget/VideoListCell.vue';
 import FileListWidget from '../tabFormWidget/FileListWidget.vue';
 import ButtonCell from '../tabGridWidget/ButtonCell.vue';
 import AuthImage from '../../widget/AuthImage.vue';
+import { Spin as ASpin, Empty as AEmpty } from 'ant-design-vue';
+import { CssUtil } from 'pc-component-v3';
+import { defineAsyncComponent } from 'vue';
 
 export default {
 
@@ -141,6 +154,7 @@ export default {
     this.Common = Common;
     return {
       fieldUtil: FieldUtil,
+      customerComponentName: null,
     };
   },
 
@@ -307,6 +321,53 @@ export default {
         return modelData.data[this.gridFieldItem.fieldName].displayValue;
       }
     },
+
+    
+    /**
+     * 远程加载ES VUE组件模块。
+     * @param jsUrl js路径
+     * @param cssUrl css路径
+     */
+    renderRemoteComponentModule: async function () {
+      const _self = this;
+      let jsUrl = this.gridFieldItem.remoteComponentModuleJsUrl;
+      let cssUrl = this.gridFieldItem.remoteComponentModuleCssUrl;
+
+      // 显示模态框
+      // 异步的加载js组件
+      //let jsUrl = './static/client-eam-module-v3/dist/AssetCheckCreate.js';
+      //let cssUrl = './static/client-eam-module-v3/dist/AssetCheckCreate.css';
+
+      if (cssUrl != null && cssUrl.length > 0) {
+        let cssUrlHash = _self.getHash(cssUrl);
+        CssUtil.dynamicLoadCss(cssUrl, cssUrlHash);
+      }
+      // webpackIgnore：设置为 true 时，禁用动态导入解析。
+      // const testAsyncRemoteComponent  = await import(/* webpackIgnore: true */ jsUrl);
+
+      // console.log(testAsyncRemoteComponent);
+      if (jsUrl != null && jsUrl.length > 0) {
+        const testAsyncRemoteComponent = defineAsyncComponent({
+          // 加载函数
+          loader: () => {
+            return import(/* webpackIgnore: true */ jsUrl);
+          },
+          // 加载异步组件时使用的组件
+          loadingComponent: ASpin,
+          // 展示加载组件前的延迟时间，默认为 200ms
+          delay: 200,
+          // 加载失败后展示的组件
+          errorComponent: AEmpty,
+          // 如果提供了一个 timeout 时间限制，并超时了
+          // 也会显示这里配置的报错组件，默认值是：Infinity
+          timeout: 10000,
+        });
+
+        _self.customerComponentName = testAsyncRemoteComponent;
+        console.log(_self.customerComponentName);
+      }
+    },
+    
   },
 };