@ftjs/antd 0.1.3 → 0.2.0

package/dist/antd-table/column-edit.d.ts

@@ -1,14 +1,23 @@
+import { Refs } from '@ftjs/core';
 import { InputProps, SelectProps, SwitchProps } from 'ant-design-vue';
 import { Component } from 'vue';
 export interface Edit<Type, Props> {
     type: Type;
     field?: string;
     props?: Props;
+    /**
+     * 获取值转化
+     */
+    valueGetter?: (value: any) => any;
+    /**
+     * 设置值转化
+     */
+    valueSetter?: (value: any) => any;
 }
 export interface EditMap<_TableData extends Record<string, any>> {
-    input: Edit<"input", InputProps>;
-    select: Edit<"select", SelectProps>;
-    switch: Edit<"switch", SwitchProps>;
+    input: Edit<"input", Refs<InputProps>>;
+    select: Edit<"select", Refs<SelectProps>>;
+    switch: Edit<"switch", Refs<SwitchProps>>;
 }
 export interface ComponentInfo {
     model?: string;

package/dist/form/style.d.ts

@@ -0,0 +1 @@
+export declare const isViewOptionsStyle = "display: flex; gap: 4px;";

package/dist/form/utils.d.ts

@@ -0,0 +1,2 @@
+import { CheckboxOptionType } from 'ant-design-vue';
+export declare function isSimpleOption(option: string | number | CheckboxOptionType): option is string | number;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { computed, toValue, createVNode, mergeProps, unref, isVNode, ref, useId, Fragment, createTextVNode, watchEffect, onMounted, onUnmounted, nextTick, reactive, watch, h } from "vue";
+import { computed, toValue, createVNode, mergeProps, unref, createTextVNode, ref, useId, Fragment, watchEffect, onMounted, onUnmounted, nextTick, reactive, watch, h } from "vue";
 import { SwapOutlined, SettingOutlined } from "@ant-design/icons-vue";
 import { getField, defineFormComponent, useFormItem, unrefs, defineFtForm, useFormInject, set, defineFtTable, useTableInject, get, cloneDeep } from "@ftjs/core";
 import { FormItem, Input, Select, DatePicker, RangePicker, Radio, Textarea, Upload, Cascader, AutoComplete, CheckboxGroup, InputNumber, Mentions, Rate, Slider, Switch, TreeSelect, Modal, Tree, Button, Form, Divider, Table, Spin, Pagination } from "ant-design-vue";
@@ -17,8 +17,7 @@ const useFormItemProps = (column) => {
 };
 const input = defineFormComponent((props) => {
   const {
-    valueComputed,
-    isView
+    valueComputed
   } = useFormItem({
     props
   });
@@ -27,7 +26,7 @@ const input = defineFormComponent((props) => {
     const _props = unrefs(props.column.props);
     const placeholder = `请输入${formItemProps.value.label}`;
     return createVNode(FormItem, formItemProps.value, {
-      default: () => [toValue(isView.value) ? createVNode("div", null, [valueComputed.value]) : createVNode(Input, mergeProps({
+      default: () => [props.isView ? createVNode("div", null, [valueComputed.value]) : createVNode(Input, mergeProps({
         "value": valueComputed.value,
         "onUpdate:value": ($event) => valueComputed.value = $event,
         "allowClear": true,
@@ -36,10 +35,10 @@ const input = defineFormComponent((props) => {
     });
   };
 });
+const isViewOptionsStyle = "display: flex; gap: 4px;";
 const select = defineFormComponent((props) => {
   const {
-    valueComputed,
-    isView
+    valueComputed
   } = useFormItem({
     props
   });
@@ -47,7 +46,7 @@ const select = defineFormComponent((props) => {
   const placeholder = computed(() => {
     return `请选择${formItemProps.value.label}`;
   });
-  const isViewText = computed(() => {
+  const isViewTextVNode = computed(() => {
     var _a, _b;
     const options = unref((_a = props.column.props) == null ? void 0 : _a.options);
     const isMultiple = ((_b = props.column.props) == null ? void 0 : _b.mode) === "multiple";
@@ -55,15 +54,17 @@ const select = defineFormComponent((props) => {
     if (options) {
       return arr.map((e) => {
         const option = options.find((o) => o.value === e);
-        return option == null ? void 0 : option.label;
-      }).filter(Boolean).join(", ");
+        return createVNode("span", null, [option == null ? void 0 : option.label]);
+      }).filter(Boolean);
     }
     return valueComputed.value;
   });
   return () => {
     const _props = unrefs(props.column.props);
     return createVNode(FormItem, formItemProps.value, {
-      default: () => [toValue(isView.value) ? createVNode("div", null, [isViewText.value]) : createVNode(Select, mergeProps({
+      default: () => [props.isView ? createVNode("div", {
+        "style": isViewOptionsStyle
+      }, [isViewTextVNode.value]) : createVNode(Select, mergeProps({
         "value": valueComputed.value,
         "onUpdate:value": ($event) => valueComputed.value = $event,
         "placeholder": placeholder.value
@@ -73,8 +74,7 @@ const select = defineFormComponent((props) => {
 });
 const datePicker = defineFormComponent((props) => {
   const {
-    valueComputed,
-    isView
+    valueComputed
   } = useFormItem({
     props
   });
@@ -85,7 +85,7 @@ const datePicker = defineFormComponent((props) => {
       ...unrefs(props.column.props)
     };
     return createVNode(FormItem, formItemProps.value, {
-      default: () => [toValue(isView.value) ? createVNode("div", null, [valueComputed.value]) : (
+      default: () => [props.isView ? createVNode("div", null, [valueComputed.value]) : (
         // @ts-expect-error 类型推断错误
         createVNode(DatePicker, mergeProps({
           "value": valueComputed.value,
@@ -97,12 +97,17 @@ const datePicker = defineFormComponent((props) => {
 });
 const rangePicker = defineFormComponent((props) => {
   const {
-    valueComputed,
-    isView
+    valueComputed
   } = useFormItem({
     props
   });
   const formItemProps = useFormItemProps(props.column);
+  const viewText = computed(() => {
+    if (props.isView) {
+      return valueComputed.value.join(" ~ ");
+    }
+    return "";
+  });
   return () => {
     const unrefsProps = unrefs(props.column.props);
     const _props = {
@@ -114,31 +119,46 @@ const rangePicker = defineFormComponent((props) => {
       } : false
     };
     return createVNode(FormItem, formItemProps.value, {
-      default: () => [toValue(isView.value) ? createVNode("div", null, [valueComputed.value]) : createVNode(RangePicker, mergeProps({
+      default: () => [props.isView ? createVNode("div", null, [viewText.value]) : createVNode(RangePicker, mergeProps({
         "value": valueComputed.value,
         "onUpdate:value": ($event) => valueComputed.value = $event
       }, _props), null)]
     });
   };
 });
+function isSimpleOption(option) {
+  return typeof option === "string" || typeof option === "number";
+}
 const radio = defineFormComponent((props) => {
   const {
-    valueComputed,
-    isView
+    valueComputed
   } = useFormItem({
     props
   });
   const formItemProps = useFormItemProps(props.column);
-  const isViewText = computed(() => {
-    var _a;
+  const isViewTextVNode = computed(() => {
     const options = unref(props.column.props.options);
     if (!options) return valueComputed.value;
-    return ((_a = options.find((option) => option.value === valueComputed.value)) == null ? void 0 : _a.label) || "";
+    let vNode;
+    options.some((option) => {
+      if (isSimpleOption(option)) {
+        if (option === valueComputed.value) {
+          vNode = option;
+          return true;
+        }
+      } else {
+        if (option.value === valueComputed.value) {
+          vNode = option.label;
+          return true;
+        }
+      }
+    });
+    return vNode;
   });
   return () => {
     const _props = unrefs(props.column.props);
     return createVNode(FormItem, formItemProps.value, {
-      default: () => [toValue(isView.value) ? createVNode("div", null, [isViewText.value]) : createVNode(Radio.Group, mergeProps({
+      default: () => [props.isView ? createVNode("div", null, [isViewTextVNode.value]) : createVNode(Radio.Group, mergeProps({
         "value": valueComputed.value,
         "onUpdate:value": ($event) => valueComputed.value = $event
       }, _props), null)]
@@ -147,8 +167,7 @@ const radio = defineFormComponent((props) => {
 });
 const textarea = defineFormComponent((props) => {
   const {
-    valueComputed,
-    isView
+    valueComputed
   } = useFormItem({
     props
   });
@@ -157,7 +176,7 @@ const textarea = defineFormComponent((props) => {
     const _props = unrefs(props.column.props);
     const placeholder = `请输入${formItemProps.value.label}`;
     return createVNode(FormItem, formItemProps.value, {
-      default: () => [toValue(isView.value) ? createVNode("div", null, [valueComputed.value]) : createVNode(Textarea, mergeProps({
+      default: () => [props.isView ? createVNode("div", null, [valueComputed.value]) : createVNode(Textarea, mergeProps({
         "value": valueComputed.value,
         "onUpdate:value": ($event) => valueComputed.value = $event,
         "allowClear": true,
@@ -167,37 +186,37 @@ const textarea = defineFormComponent((props) => {
     });
   };
 });
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
 const upload = defineFormComponent((props) => {
   const {
-    valueComputed,
-    isView
+    valueComputed
   } = useFormItem({
     props
   });
   const formItemProps = useFormItemProps(props.column);
+  const disabled = computed(() => {
+    var _a;
+    return props.isView || toValue((_a = props.column.props) == null ? void 0 : _a.disabled);
+  });
   return () => {
-    let _slot;
     const _props = unrefs(props.column.props);
     return createVNode(FormItem, formItemProps.value, {
-      default: () => [toValue(isView.value) ? createVNode("div", null, [valueComputed.value]) : createVNode(Upload, mergeProps({
+      default: () => [createVNode(Upload, mergeProps({
         "file-list": valueComputed.value,
         "onUpdate:file-list": ($event) => valueComputed.value = $event
-      }, _props), _isSlot(_slot = props.column.slots.default({
-        value: valueComputed.value,
-        isView: isView.value
-      })) ? _slot : {
-        default: () => [_slot]
+      }, _props, {
+        "disabled": disabled.value
+      }), {
+        default: () => [props.isView ? !valueComputed.value || valueComputed.value.length === 0 ? createVNode("div", null, [createTextVNode("-")]) : null : props.column.slots.default({
+          value: valueComputed.value,
+          isView: props.isView
+        })]
       })]
     });
   };
 });
 const cascader = defineFormComponent((props) => {
   const {
-    valueComputed,
-    isView
+    valueComputed
   } = useFormItem({
     props
   });
@@ -205,8 +224,31 @@ const cascader = defineFormComponent((props) => {
   return () => {
     const _props = unrefs(props.column.props);
     const placeholder = `请选择${formItemProps.value.label}`;
+    const getTextFromOptions = (options, value, level = 0) => {
+      if (!options || !value || level >= value.length) return void 0;
+      const currentValue = value[level];
+      const currentOption = options.find((option) => option.value === currentValue);
+      if (!currentOption) return void 0;
+      if (level === value.length - 1) {
+        return currentOption.label;
+      }
+      if (currentOption.children && currentOption.children.length > 0) {
+        const childText = getTextFromOptions(currentOption.children, value, level + 1);
+        if (childText) {
+          return `${currentOption.label} / ${childText}`;
+        }
+      }
+      return currentOption.label;
+    };
+    const isViewText = computed(() => {
+      if (props.isView && valueComputed.value) {
+        const options = (_props == null ? void 0 : _props.options) || [];
+        return getTextFromOptions(options, valueComputed.value);
+      }
+      return "-";
+    });
     return createVNode(FormItem, formItemProps.value, {
-      default: () => [toValue(isView.value) ? createVNode("div", null, [valueComputed.value]) : createVNode(Cascader, mergeProps({
+      default: () => [props.isView ? createVNode("div", null, [isViewText.value]) : createVNode(Cascader, mergeProps({
         "value": valueComputed.value,
         "onUpdate:value": ($event) => valueComputed.value = $event,
         "placeholder": placeholder
@@ -216,20 +258,18 @@ const cascader = defineFormComponent((props) => {
 });
 const autoComplete = defineFormComponent((props) => {
   const {
-    valueComputed,
-    isView
+    valueComputed
   } = useFormItem({
     props
   });
   const formItemProps = useFormItemProps(props.column);
   return () => {
     const _props = unrefs(props.column.props);
-    const placeholder = `请输入${formItemProps.value.label}`;
     return createVNode(FormItem, formItemProps.value, {
-      default: () => [toValue(isView.value) ? createVNode("div", null, [valueComputed.value]) : createVNode(AutoComplete, mergeProps({
+      default: () => [props.isView ? createVNode("div", null, [valueComputed.value || "-"]) : createVNode(AutoComplete, mergeProps({
         "value": valueComputed.value,
         "onUpdate:value": ($event) => valueComputed.value = $event,
-        "placeholder": placeholder,
+        "placeholder": `请输入${formItemProps.value.label}`,
         "allowClear": true
       }, _props), null)]
     });
@@ -237,16 +277,48 @@ const autoComplete = defineFormComponent((props) => {
 });
 const checkbox = defineFormComponent((props) => {
   const {
-    valueComputed,
-    isView
+    valueComputed
   } = useFormItem({
     props
   });
   const formItemProps = useFormItemProps(props.column);
+  const options = computed(() => {
+    var _a;
+    if (!((_a = props.column.props) == null ? void 0 : _a.options)) {
+      console.warn("checkbox 组件的 options 属性不能为空");
+      return [];
+    }
+    return toValue(props.column.props.options) ?? [];
+  });
   return () => {
     const _props = unrefs(props.column.props);
+    const isViewTextVNodeMap = computed(() => {
+      let result = [];
+      if (props.isView && valueComputed.value) {
+        result = valueComputed.value.map((v) => {
+          let text = "";
+          options.value.some((item) => {
+            if (isSimpleOption(item)) {
+              if (item === v) {
+                text = item;
+                return true;
+              }
+            } else {
+              if (item.value === v) {
+                text = item.label;
+                return true;
+              }
+            }
+          });
+          return text;
+        });
+      }
+      return result.length > 0 ? result : ["-"];
+    });
     return createVNode(FormItem, formItemProps.value, {
-      default: () => [toValue(isView.value) ? createVNode("div", null, [valueComputed.value]) : createVNode(CheckboxGroup, mergeProps({
+      default: () => [props.isView ? createVNode("div", {
+        "style": isViewOptionsStyle
+      }, [isViewTextVNodeMap.value.map((v) => createVNode("span", null, [v]))]) : createVNode(CheckboxGroup, mergeProps({
         "value": valueComputed.value,
         "onUpdate:value": ($event) => valueComputed.value = $event
       }, _props), null)]
@@ -255,8 +327,7 @@ const checkbox = defineFormComponent((props) => {
 });
 const inputNumber = defineFormComponent((props) => {
   const {
-    valueComputed,
-    isView
+    valueComputed
   } = useFormItem({
     props
   });
@@ -264,7 +335,7 @@ const inputNumber = defineFormComponent((props) => {
   return () => {
     const _props = unrefs(props.column.props);
     return createVNode(FormItem, formItemProps.value, {
-      default: () => [toValue(isView.value) ? createVNode("div", null, [valueComputed.value]) : createVNode(InputNumber, mergeProps({
+      default: () => [props.isView ? createVNode("div", null, [valueComputed.value]) : createVNode(InputNumber, mergeProps({
         "value": valueComputed.value,
         "onUpdate:value": ($event) => valueComputed.value = $event,
         "placeholder": `请输入${formItemProps.value.label}`
@@ -274,8 +345,7 @@ const inputNumber = defineFormComponent((props) => {
 });
 const mentions = defineFormComponent((props) => {
   const {
-    valueComputed,
-    isView
+    valueComputed
   } = useFormItem({
     props
   });
@@ -283,7 +353,7 @@ const mentions = defineFormComponent((props) => {
   return () => {
     const _props = unrefs(props.column.props);
     return createVNode(FormItem, formItemProps.value, {
-      default: () => [toValue(isView.value) ? createVNode("div", null, [valueComputed.value]) : createVNode(Mentions, mergeProps({
+      default: () => [props.isView ? createVNode("div", null, [valueComputed.value]) : createVNode(Mentions, mergeProps({
         "value": valueComputed.value,
         "onUpdate:value": ($event) => valueComputed.value = $event
       }, _props), null)]
@@ -292,8 +362,7 @@ const mentions = defineFormComponent((props) => {
 });
 const rate = defineFormComponent((props) => {
   const {
-    valueComputed,
-    isView
+    valueComputed
   } = useFormItem({
     props
   });
@@ -304,15 +373,14 @@ const rate = defineFormComponent((props) => {
       default: () => [createVNode(Rate, mergeProps({
         "value": valueComputed.value,
         "onUpdate:value": ($event) => valueComputed.value = $event,
-        "disabled": isView.value
+        "disabled": props.isView
       }, _props), null)]
     });
   };
 });
 const slider = defineFormComponent((props) => {
   const {
-    valueComputed,
-    isView
+    valueComputed
   } = useFormItem({
     props
   });
@@ -320,7 +388,7 @@ const slider = defineFormComponent((props) => {
   return () => {
     const _props = unrefs(props.column.props);
     return createVNode(FormItem, formItemProps.value, {
-      default: () => [toValue(isView.value) ? createVNode("div", null, [valueComputed.value]) : createVNode(Slider, mergeProps({
+      default: () => [props.isView ? createVNode("div", null, [valueComputed.value]) : createVNode(Slider, mergeProps({
         "value": valueComputed.value,
         "onUpdate:value": ($event) => valueComputed.value = $event
       }, _props), null)]
@@ -329,16 +397,22 @@ const slider = defineFormComponent((props) => {
 });
 const switchComponent = defineFormComponent((props) => {
   const {
-    valueComputed,
-    isView
+    valueComputed
   } = useFormItem({
     props
   });
   const formItemProps = useFormItemProps(props.column);
+  const isViewText = computed(() => {
+    var _a, _b;
+    if (props.isView) {
+      return valueComputed.value ? ((_a = props.column.props) == null ? void 0 : _a.checkedChildren) || "是" : ((_b = props.column.props) == null ? void 0 : _b.unCheckedChildren) || "否";
+    }
+    return "-";
+  });
   return () => {
     const _props = unrefs(props.column.props);
     return createVNode(FormItem, formItemProps.value, {
-      default: () => [toValue(isView.value) ? createVNode("div", null, [valueComputed.value]) : createVNode(Switch, mergeProps({
+      default: () => [props.isView ? createVNode("div", null, [isViewText.value]) : createVNode(Switch, mergeProps({
         "checked": valueComputed.value,
         "onUpdate:checked": ($event) => valueComputed.value = $event
       }, _props), null)]
@@ -347,17 +421,42 @@ const switchComponent = defineFormComponent((props) => {
 });
 const treeSelect = defineFormComponent((props) => {
   const {
-    valueComputed,
-    isView
+    valueComputed
   } = useFormItem({
     props
   });
   const formItemProps = useFormItemProps(props.column);
+  const isViewText = computed(() => {
+    var _a, _b;
+    if (props.isView && valueComputed.value) {
+      const vNodes = [];
+      const isMultiple = toValue((_a = props.column.props) == null ? void 0 : _a.multiple);
+      const options = toValue((_b = props.column.props) == null ? void 0 : _b.treeData) || [];
+      const traverse = (options2, values) => {
+        if (vNodes.length === values.length) {
+          return;
+        }
+        for (const option of options2) {
+          if (values.includes(option.value)) {
+            vNodes.push(createVNode("span", null, [option.label]));
+          }
+          if (option.children) {
+            traverse(option.children, values);
+          }
+        }
+      };
+      traverse(options, isMultiple ? valueComputed.value : [valueComputed.value]);
+      return vNodes;
+    }
+    return ["-"];
+  });
   return () => {
     const _props = unrefs(props.column.props);
     const placeholder = `请输入${formItemProps.value.label}`;
     return createVNode(FormItem, formItemProps.value, {
-      default: () => [toValue(isView.value) ? createVNode("div", null, [valueComputed.value]) : createVNode(TreeSelect, mergeProps({
+      default: () => [props.isView ? createVNode("div", {
+        "style": isViewOptionsStyle
+      }, [isViewText.value]) : createVNode(TreeSelect, mergeProps({
         "value": valueComputed.value,
         "onUpdate:value": ($event) => valueComputed.value = $event,
         "allowClear": true,
@@ -960,14 +1059,26 @@ function useEdit(tableData) {
           } else {
             component = componentOrTuple;
           }
-          return h(component, {
-            ...edit.props,
+          const {
+            valueGetter,
+            valueSetter
+          } = edit;
+          let value = get(scopeProps.record, field);
+          if (valueGetter) {
+            value = valueGetter(value);
+          }
+          const props = {
+            ...unrefs(edit.props),
             class: "ft-table-edit",
-            [model]: get(scopeProps.record, field),
-            [`onUpdate:${model}`]: (value) => {
-              set(scopeProps.record, field, value);
+            [model]: value,
+            [`onUpdate:${model}`]: (value2) => {
+              if (valueSetter) {
+                value2 = valueSetter(value2);
+              }
+              set(scopeProps.record, field, value2);
             }
-          });
+          };
+          return h(component, props);
         }
       }
     };
@@ -1095,11 +1206,22 @@ const FtVxeTable = defineFtTable((_, ctx) => {
             component = componentOrTuple;
           }
           const modelEvent = `onUpdate:${model}`;
+          const {
+            valueGetter,
+            valueSetter
+          } = editObj ?? {};
+          let value = get(row, field);
+          if (valueGetter) {
+            value = valueGetter(value);
+          }
           const props = {
-            ...editObj.props,
-            [model]: row[field],
-            [modelEvent]: (value) => {
-              row[field] = value;
+            ...unrefs(editObj.props),
+            [model]: value,
+            [modelEvent]: (value2) => {
+              if (valueSetter) {
+                value2 = valueSetter(value2);
+              }
+              set(row, field, value2);
             }
           };
           return h(component, props);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ftjs/antd",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "keywords": [],
   "author": "",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "vite": "^6.1.0",
     "vite-plugin-dts": "^4.5.0",
     "vue-tsc": "2.2.0",
-    "@ftjs/core": "0.1.3"
+    "@ftjs/core": "0.2.0"
   },
   "peerDependencies": {
     "@ant-design/icons-vue": ">=7.0.0",