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,39 +70,71 @@ 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];
+    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'),
+            this.ns.is('enablebreak', this.enableGridRowBreak),
+          ]}
+          codeListItems={c.codeListItems}
+          codeList={this.codeList}
+          value={fieldValue}
+          textSeparator={c.model.source?.textSeparator}
+        ></code-list>
+      );
+    } else {
+      content = (
+        <span
+          class={[
+            this.ns.e('text'),
+            this.ns.is('enablebreak', this.enableGridRowBreak),
+          ]}
+        >
+          {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}
       >
-        {this.codeList ? (
-          <code-list
-            class={[
-              this.ns.e('text'),
-              this.ns.is('enablebreak', this.enableGridRowBreak),
-            ]}
-            codeListItems={c.codeListItems}
-            codeList={this.codeList}
-            value={fieldValue}
-            textSeparator={c.model.source?.textSeparator}
-          ></code-list>
-        ) : (
-          <span
-            class={[
-              this.ns.e('text'),
-              this.ns.is('enablebreak', this.enableGridRowBreak),
-            ]}
-          >
-            {fieldValue}
-            {fieldValue != null && c.model.unitName}
-          </span>
-        )}
+        {content}
       </div>
     );
   },