feat: 表格列支持脚本代码模式

app_Web/src/components/widgets/grid-control/grid-field-column/grid-field-column.tsx

@@ -3,7 +3,7 @@ import {
   GridFieldColumnController,
   GridRowController,
 } from '@ibiz-template/controller';
-import { computed, defineComponent } from 'vue';
+import { computed, defineComponent, ref, Ref, watch } from 'vue';
 import { useNamespace } from '@ibiz-template/vue-util';
 import '@ibiz-template/theme/style/components/widgets/grid/grid-field-column.scss';
 
@@ -70,18 +70,40 @@ export const GridFieldColumn = defineComponent({
       return ns.cssVarBlock({ 'justify-content': justContent });
     });
 
-    return { ns, alignStyle, codeList, onCellClick, enableGridRowBreak };
+    const CustomHtml: Ref<string | undefined> = ref('');
+
+    if (c.isCustomCode) {
+      watch(
+        () => props.row.data,
+        async () => {
+          CustomHtml.value = await props.controller.getCustomHtml(
+            props.row.data,
+          );
+        },
+        {
+          deep: true,
+          immediate: true,
+        },
+      );
+    }
+
+    return {
+      ns,
+      alignStyle,
+      codeList,
+      CustomHtml,
+      onCellClick,
+      enableGridRowBreak,
+    };
   },
   render() {
     const c = this.controller;
     const fieldValue = this.row.data[this.controller.model.codeName];
-    return (
-      <div
-        class={[this.ns.b(), c.clickable && this.ns.m('clickable')]}
-        style={this.alignStyle}
-        onClick={this.onCellClick}
-      >
-        {this.codeList ? (
+    let content = null;
+    if (c.isCustomCode) {
+      content = <span class={this.ns.e('script')}>{this.CustomHtml}</span>;
+    } else if (this.codeList) {
+      content = (
         <code-list
           class={[
             this.ns.e('text'),
@@ -92,7 +114,9 @@ export const GridFieldColumn = defineComponent({
           value={fieldValue}
           textSeparator={c.model.source?.textSeparator}
         ></code-list>
-        ) : (
+      );
+    } else {
+      content = (
         <span
           class={[
             this.ns.e('text'),
@@ -102,7 +126,15 @@ export const GridFieldColumn = defineComponent({
           {fieldValue}
           {fieldValue != null && c.model.unitName}
         </span>
-        )}
+      );
+    }
+    return (
+      <div
+        class={[this.ns.b(), c.clickable && this.ns.m('clickable')]}
+        style={this.alignStyle}
+        onClick={this.onCellClick}
+      >
+        {content}
       </div>
     );
   },