@ticatec/uniface-flexi-module 0.2.5 → 0.2.8

package/dist/criteria-panel/components/InputOptionSelectSearchField.svelte

@@ -6,4 +6,4 @@ export let variant;
 export let events = null;
 </script>
 
-<InputOptionSelect {...props} {...events} {variant} bind:value={criteria[keyField]} {...events}/>
+<InputOptionSelect {...props} {...events} {variant} bind:value={criteria[keyField]}/>

package/dist/criteria-panel/lib/CriteriaFieldBuilder.js

@@ -84,8 +84,8 @@ const buildCascadeField = (schema, dictLoader) => {
     const props = schema.props;
     return {
         component: CascadeSelectSearchField,
-        keyFields: { keyField: schema.keys.valueField, textField: schema.keys.textField },
-        props: utils.propsFilter(props, ['value', "disabled", "readonly", "mandatory", "displayMode"])
+        keyFields: { keyField: schema.keys.valueField },
+        props: { ...utils.propsFilter(props, ['value', "disabled", "readonly", "mandatory", "displayMode"]), nodes: [dictLoader(schema.dictName)] }
     };
 };
 const buildInputOptionsField = (schema, dictLoader) => {

package/dist/criteria-panel/lib/FlexiCriteriaField.d.ts

@@ -17,6 +17,8 @@ export interface FlexiCriteriaFieldSchema {
     label: string;
     /** 事件 */
     events?: Record<string, string>;
+    /** 事件 */
+    methods?: Record<string, string>;
     /** 在卡片/Block中所在单元格的属性，flex布局和grid布局对应的属性也不一样*/
     size?: 'x15' | 'x20' | 'x25' | 'x30' | 'x35' | 'x40';
     /** 字段的属性 */

package/dist/criteria-panel/lib/FlexiCriteriaField.js

@@ -29,6 +29,12 @@ export default class FlexiCriteriaField {
                 this.#props[key] = utils.getScopeVariable(cellField.props[key]);
             }
         }
+        if (schema.methods) {
+            for (let key in schema.methods) {
+                let method = schema.methods[key];
+                this.#props[key] = (...args) => set[method]?.(...args);
+            }
+        }
         this.keys = cellField.keyFields;
     }
     get props() {

package/dist/criteria-panel/lib/FlexiCriteriaSet.js

@@ -14,18 +14,15 @@ export default class FlexiCriteriaSet {
         this._arrangement = schema.arrangement ?? 'vertical';
         this._label$style = schema.label$style;
         this._variant = schema.variant ?? 'outlined';
-        const dicts = [];
+        const dicts = schema.fields.filter(item => item.dictName != null).map(item => item.dictName);
+        this.#dictionaries = dicts.length > 0 ? await FlexiContext.getInstance().loadDictionaries(dicts) : {};
         for (const fieldSchema of schema.fields) {
-            if (fieldSchema.dictName && !dicts.includes(fieldSchema.dictName)) {
-                dicts.push(fieldSchema.dictName);
-            }
             const field = new FlexiCriteriaField(this, fieldSchema);
             this.#fields.push(field);
             if (fieldSchema.name) {
                 this.field[fieldSchema.name] = field;
             }
         }
-        this.#dictionaries = await FlexiContext.getInstance().loadDictionaries(dicts);
     }
     setInvalidateHandler(value) {
         this.#onInvalidate = value;

package/dist/flexi-form/components/CascadeOptionSelectField.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">import CascadeOptionSelect from "@ticatec/uniface-element/CascadeOptionsSelect";
 import FlexiField from "../flexi_field/FlexiField";
+import utils from "../../utils";
 export let field;
 export let readonly;
 export let disabled;
@@ -7,7 +8,8 @@ export let variant;
 $: props = field.props;
 $: data = field.data;
 $: events = field.events;
+$: text = field.dataFields['textField'] ? utils.extractFieldValue(field.rawData, field.dataFields['textField']) ?? '' : '';
 </script>
 
-<CascadeOptionSelect bind:value={data[field.keyField]} variant={variant??field.variant} readonly={readonly || field.isReadonly}
+<CascadeOptionSelect bind:value={data[field.keyField]} variant={variant??field.variant} readonly={readonly || field.isReadonly} {text}
                      disabled={disabled || field.disabled} {...props} {...events}/>

package/dist/flexi-form/components/CellFieldBuilder.js

@@ -106,7 +106,7 @@ const buildUnitNumberField = (schema, dictLoader) => {
 const buildCascadeOptionSelect = (schema, dictLoader) => {
     const props = schema.props;
     if (schema.dictName) {
-        props.options = dictLoader(schema.dictName);
+        props.nodes = [dictLoader(schema.dictName)];
     }
     return {
         component: CascadeOptionSelectField,

package/dist/flexi-form/flexi_field/FlexiField.d.ts

@@ -22,6 +22,8 @@ export interface FlexiFieldSchema {
     type: string;
     /** 字段的名称 */
     keyField: string;
+    /** 其他的数据字段 */
+    dataFields: Record<string, string>;
     /** 字段的名称 */
     name: string;
     /** 关联的数据字典项目 */
@@ -49,8 +51,10 @@ export interface FlexiFieldSchema {
 }
 export default class FlexiField {
     #private;
+    readonly rawData: any;
     readonly data: any;
     readonly keyField: string;
+    readonly dataFields: Record<string, string>;
     readonly component: typeof SvelteComponent;
     readonly variant?: "" | "outlined" | "filled";
     visibility: Visibility;

package/dist/flexi-form/flexi_field/FlexiField.js

@@ -6,8 +6,10 @@ import i18nRes from "../../i18n-res";
 import { i18nUtils } from "@ticatec/i18n";
 export default class FlexiField {
     #parent;
+    rawData;
     data;
     keyField;
+    dataFields;
     component;
     variant;
     visibility = Visibility.View;
@@ -29,6 +31,7 @@ export default class FlexiField {
         this.isReadonly = schema.readonly == true;
         this.disabled = schema.disabled == true;
         this.required = schema.required == true;
+        this.dataFields = schema.dataFields;
         this.#cell = schema.cell;
         const card = parent instanceof FlexiCard ? parent : parent.card;
         if (schema.events) {
@@ -52,6 +55,7 @@ export default class FlexiField {
                 this.#props[key] = (...args) => card[classMethod]?.(...args);
             }
         }
+        this.rawData = data;
         const result = utils.getParentAndKey(data, schema.keyField);
         this.keyField = result?.key;
         this.data = result?.parent;

package/dist/flexi-form/flexi_form/FlexiForm.d.ts

@@ -66,6 +66,17 @@ export default abstract class FlexiForm {
      * @private
      */
     private isProxy;
+    /**
+     * 将响应式数据转换为纯对象（用于序列化）
+     * @param obj 响应式数据对象
+     * @returns 纯对象
+     */
+    private toRawObject;
+    /**
+     * 获取可序列化的表单数据（不包含Proxy）
+     * @returns 纯对象数据
+     */
+    getRawData(): any;
     /**
      * 构造表单
      */

package/dist/flexi-form/flexi_form/FlexiForm.js

@@ -29,6 +29,17 @@ export default class FlexiForm {
     createReactiveData(data) {
         const self = this;
         const createProxy = (target, path = '') => {
+            // 添加toJSON方法到目标对象，用于JSON序列化
+            if (!target.toJSON) {
+                Object.defineProperty(target, 'toJSON', {
+                    enumerable: false,
+                    configurable: true,
+                    writable: false,
+                    value: function () {
+                        return self.toRawObject(this);
+                    }
+                });
+            }
             return new Proxy(target, {
                 set(obj, prop, value) {
                     if (typeof prop === 'symbol') {
@@ -75,6 +86,33 @@ export default class FlexiForm {
             return false;
         }
     }
+    /**
+     * 将响应式数据转换为纯对象（用于序列化）
+     * @param obj 响应式数据对象
+     * @returns 纯对象
+     */
+    toRawObject(obj) {
+        if (obj === null || typeof obj !== 'object') {
+            return obj;
+        }
+        if (Array.isArray(obj)) {
+            return obj.map(item => this.toRawObject(item));
+        }
+        const result = {};
+        for (const key in obj) {
+            if (obj.hasOwnProperty(key)) {
+                result[key] = this.toRawObject(obj[key]);
+            }
+        }
+        return result;
+    }
+    /**
+     * 获取可序列化的表单数据（不包含Proxy）
+     * @returns 纯对象数据
+     */
+    getRawData() {
+        return this.toRawObject(this.#data);
+    }
     /**
      * 构造表单
      */

package/dist/utils.d.ts

@@ -8,5 +8,6 @@ declare const _default: {
     formatText: (s: string, obj: any) => string;
     propsFilter: (attrs: any, excludes?: Array<string>) => any;
     getScopeVariable: (key: string) => any;
+    extractFieldValue: (data: any, keyPath: string) => any;
 };
 export default _default;

package/dist/utils.js

@@ -62,10 +62,19 @@ const getParentAndKey = (data, keyPath) => {
         return { parent: data, key: keyPath };
     }
 };
+/**
+ * 萃取字段值
+ * @param data
+ * @param keyPath
+ */
+const extractFieldValue = (data, keyPath) => {
+    let nestObj = getParentAndKey(data, keyPath);
+    return nestObj.parent[nestObj.key];
+};
 const formatText = (s, obj) => {
     return s.replace(/\{\{(.*?)\}\}/g, (_, key) => {
         key = key.trim();
         return obj.hasOwnProperty(key) ? String(obj[key]) : `{{${key}}}`;
     });
 };
-export default { copyAttrs, extractExpression, getParentAndKey, formatText, propsFilter, getScopeVariable };
+export default { copyAttrs, extractExpression, getParentAndKey, formatText, propsFilter, getScopeVariable, extractFieldValue };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ticatec/uniface-flexi-module",
-  "version": "0.2.5",
+  "version": "0.2.8",
   "description": "A flexible form framework for Svelte applications with dynamic field types, criteria panels, and modular components",
   "keywords": [
     "svelte",