@ftjs/antd 0.0.2

package/dist/index.js

@@ -0,0 +1,1211 @@
+import { computed, toValue, createVNode, mergeProps, unref, isVNode, ref, useId, Fragment, createTextVNode, watchEffect, onMounted, onUnmounted, nextTick, reactive, watch, h } from "vue";
+import { SwapOutlined, SettingOutlined } from "@ant-design/icons-vue";
+import { getField, defineFormComponent, useFormItem, unrefs, defineTfForm, useFormInject, set, defineTfTable, 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, Table, Spin, Pagination } from "ant-design-vue";
+import dayjs from "dayjs";
+import { VxeGrid } from "vxe-table";
+const useFormItemProps = (column) => {
+  return computed(() => {
+    const field = getField(column);
+    const name = field.split(".");
+    const label = toValue(column.title) ?? "";
+    return {
+      name,
+      label
+    };
+  });
+};
+const input = defineFormComponent((props) => {
+  const {
+    valueComputed,
+    isView
+  } = 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(Input, mergeProps({
+        "value": valueComputed.value,
+        "onUpdate:value": ($event) => valueComputed.value = $event,
+        "allowClear": true,
+        "placeholder": placeholder
+      }, _props), null)]
+    });
+  };
+});
+const select = defineFormComponent((props) => {
+  const {
+    valueComputed,
+    isView
+  } = useFormItem({
+    props
+  });
+  const formItemProps = useFormItemProps(props.column);
+  const placeholder = computed(() => {
+    return `请选择${formItemProps.value.label}`;
+  });
+  const isViewText = 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";
+    const arr = isMultiple ? valueComputed.value : [valueComputed.value];
+    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 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({
+        "value": valueComputed.value,
+        "onUpdate:value": ($event) => valueComputed.value = $event,
+        "placeholder": placeholder.value
+      }, _props), null)]
+    });
+  };
+});
+const datePicker = defineFormComponent((props) => {
+  const {
+    valueComputed,
+    isView
+  } = useFormItem({
+    props
+  });
+  const formItemProps = useFormItemProps(props.column);
+  return () => {
+    const _props = {
+      valueFormat: "YYYY-MM-DD",
+      ...unrefs(props.column.props)
+    };
+    return createVNode(FormItem, formItemProps.value, {
+      default: () => [toValue(isView.value) ? createVNode("div", null, [valueComputed.value]) : (
+        // @ts-expect-error 类型推断错误
+        createVNode(DatePicker, mergeProps({
+          "value": valueComputed.value,
+          "onUpdate:value": ($event) => valueComputed.value = $event
+        }, _props), null)
+      )]
+    });
+  };
+});
+const rangePicker = defineFormComponent((props) => {
+  const {
+    valueComputed,
+    isView
+  } = useFormItem({
+    props
+  });
+  const formItemProps = useFormItemProps(props.column);
+  return () => {
+    const unrefsProps = unrefs(props.column.props);
+    const _props = {
+      valueFormat: (unrefsProps == null ? void 0 : unrefsProps.showTime) ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD",
+      ...unrefsProps,
+      showTime: (unrefsProps == null ? void 0 : unrefsProps.showTime) ? {
+        defaultValue: [dayjs().startOf("day"), dayjs().endOf("day")],
+        ...typeof (unrefsProps == null ? void 0 : unrefsProps.showTime) === "object" ? unrefsProps.showTime : {}
+      } : false
+    };
+    return createVNode(FormItem, formItemProps.value, {
+      default: () => [toValue(isView.value) ? createVNode("div", null, [valueComputed.value]) : createVNode(RangePicker, mergeProps({
+        "value": valueComputed.value,
+        "onUpdate:value": ($event) => valueComputed.value = $event
+      }, _props), null)]
+    });
+  };
+});
+const radio = defineFormComponent((props) => {
+  const {
+    valueComputed,
+    isView
+  } = useFormItem({
+    props
+  });
+  const formItemProps = useFormItemProps(props.column);
+  const isViewText = computed(() => {
+    var _a;
+    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) || "";
+  });
+  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({
+        "value": valueComputed.value,
+        "onUpdate:value": ($event) => valueComputed.value = $event
+      }, _props), null)]
+    });
+  };
+});
+const textarea = defineFormComponent((props) => {
+  const {
+    valueComputed,
+    isView
+  } = 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(Textarea, mergeProps({
+        "value": valueComputed.value,
+        "onUpdate:value": ($event) => valueComputed.value = $event,
+        "allowClear": true,
+        "showCount": true,
+        "placeholder": placeholder
+      }, _props), null)]
+    });
+  };
+});
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const upload = defineFormComponent((props) => {
+  const {
+    valueComputed,
+    isView
+  } = useFormItem({
+    props
+  });
+  const formItemProps = useFormItemProps(props.column);
+  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({
+        "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]
+      })]
+    });
+  };
+});
+const cascader = defineFormComponent((props) => {
+  const {
+    valueComputed,
+    isView
+  } = 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(Cascader, mergeProps({
+        "value": valueComputed.value,
+        "onUpdate:value": ($event) => valueComputed.value = $event,
+        "placeholder": placeholder
+      }, _props), null)]
+    });
+  };
+});
+const autoComplete = defineFormComponent((props) => {
+  const {
+    valueComputed,
+    isView
+  } = 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({
+        "value": valueComputed.value,
+        "onUpdate:value": ($event) => valueComputed.value = $event,
+        "placeholder": placeholder,
+        "allowClear": true
+      }, _props), null)]
+    });
+  };
+});
+const checkbox = defineFormComponent((props) => {
+  const {
+    valueComputed,
+    isView
+  } = useFormItem({
+    props
+  });
+  const formItemProps = useFormItemProps(props.column);
+  return () => {
+    const _props = unrefs(props.column.props);
+    return createVNode(FormItem, formItemProps.value, {
+      default: () => [toValue(isView.value) ? createVNode("div", null, [valueComputed.value]) : createVNode(CheckboxGroup, mergeProps({
+        "value": valueComputed.value,
+        "onUpdate:value": ($event) => valueComputed.value = $event
+      }, _props), null)]
+    });
+  };
+});
+const inputNumber = defineFormComponent((props) => {
+  const {
+    valueComputed,
+    isView
+  } = useFormItem({
+    props
+  });
+  const formItemProps = useFormItemProps(props.column);
+  return () => {
+    const _props = unrefs(props.column.props);
+    return createVNode(FormItem, formItemProps.value, {
+      default: () => [toValue(isView.value) ? createVNode("div", null, [valueComputed.value]) : createVNode(InputNumber, mergeProps({
+        "value": valueComputed.value,
+        "onUpdate:value": ($event) => valueComputed.value = $event
+      }, _props), null)]
+    });
+  };
+});
+const mentions = defineFormComponent((props) => {
+  const {
+    valueComputed,
+    isView
+  } = useFormItem({
+    props
+  });
+  const formItemProps = useFormItemProps(props.column);
+  return () => {
+    const _props = unrefs(props.column.props);
+    return createVNode(FormItem, formItemProps.value, {
+      default: () => [toValue(isView.value) ? createVNode("div", null, [valueComputed.value]) : createVNode(Mentions, mergeProps({
+        "value": valueComputed.value,
+        "onUpdate:value": ($event) => valueComputed.value = $event
+      }, _props), null)]
+    });
+  };
+});
+const rate = defineFormComponent((props) => {
+  const {
+    valueComputed,
+    isView
+  } = useFormItem({
+    props
+  });
+  const formItemProps = useFormItemProps(props.column);
+  return () => {
+    const _props = unrefs(props.column.props);
+    return createVNode(FormItem, formItemProps.value, {
+      default: () => [createVNode(Rate, mergeProps({
+        "value": valueComputed.value,
+        "onUpdate:value": ($event) => valueComputed.value = $event,
+        "disabled": isView.value
+      }, _props), null)]
+    });
+  };
+});
+const slider = defineFormComponent((props) => {
+  const {
+    valueComputed,
+    isView
+  } = useFormItem({
+    props
+  });
+  const formItemProps = useFormItemProps(props.column);
+  return () => {
+    const _props = unrefs(props.column.props);
+    return createVNode(FormItem, formItemProps.value, {
+      default: () => [toValue(isView.value) ? createVNode("div", null, [valueComputed.value]) : createVNode(Slider, mergeProps({
+        "value": valueComputed.value,
+        "onUpdate:value": ($event) => valueComputed.value = $event
+      }, _props), null)]
+    });
+  };
+});
+const switchComponent = defineFormComponent((props) => {
+  const {
+    valueComputed,
+    isView
+  } = useFormItem({
+    props
+  });
+  const formItemProps = useFormItemProps(props.column);
+  return () => {
+    const _props = unrefs(props.column.props);
+    return createVNode(FormItem, formItemProps.value, {
+      default: () => [toValue(isView.value) ? createVNode("div", null, [valueComputed.value]) : createVNode(Switch, mergeProps({
+        "checked": valueComputed.value,
+        "onUpdate:checked": ($event) => valueComputed.value = $event
+      }, _props), null)]
+    });
+  };
+});
+const treeSelect = defineFormComponent((props) => {
+  const {
+    valueComputed,
+    isView
+  } = 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(TreeSelect, mergeProps({
+        "value": valueComputed.value,
+        "onUpdate:value": ($event) => valueComputed.value = $event,
+        "allowClear": true,
+        "placeholder": placeholder
+      }, _props), null)]
+    });
+  };
+});
+const formRenderMap = /* @__PURE__ */ new Map([["input", input], ["textarea", textarea], ["select", select], ["radio", radio], ["date-picker", datePicker], ["range-picker", rangePicker], ["upload", upload], ["cascader", cascader], ["auto-complete", autoComplete], ["checkbox", checkbox], ["input-number", inputNumber], ["mentions", mentions], ["rate", rate], ["slider", slider], ["switch", switchComponent], ["tree-select", treeSelect]]);
+function registerForm(type, Component) {
+  formRenderMap.set(type, Component);
+}
+const useRules = () => {
+  const {
+    columns
+  } = useFormInject();
+  const rules = computed(() => {
+    const rulesObj = {};
+    for (const column of columns.value) {
+      if (column.rules) {
+        const field = getField(column);
+        set(rulesObj, field, toValue(column.rules));
+      }
+    }
+    return rulesObj;
+  });
+  return {
+    rules
+  };
+};
+const useExposed = (formRef) => {
+  const {
+    "onUpdate:exposed": onUpdateExposed,
+    resetToDefault,
+    getFormData,
+    setAsDefault
+  } = useFormInject();
+  watchEffect(() => {
+    onUpdateExposed == null ? void 0 : onUpdateExposed({
+      getFormData,
+      resetToDefault,
+      setAsDefault,
+      formInstance: formRef.value
+    });
+  });
+};
+const TfForm = /* @__PURE__ */ defineTfForm((_, ctx) => {
+  const {
+    form,
+    width,
+    internalFormProps: _formProps,
+    hideFooter,
+    hideConfirm,
+    hideReset,
+    onSubmit,
+    getFormData,
+    resetToDefault
+  } = useFormInject();
+  const {
+    rules
+  } = useRules();
+  const formRef = ref();
+  useExposed(formRef);
+  const formProps = computed(() => {
+    return {
+      layout: "horizontal",
+      model: form.value,
+      onFinish: async () => {
+        await (onSubmit == null ? void 0 : onSubmit(getFormData()));
+      },
+      labelCol: {
+        style: {
+          width: "100px"
+        }
+      },
+      rules: rules.value,
+      ..._formProps.value
+    };
+  });
+  const id = useId();
+  return () => createVNode(Form, mergeProps({
+    "ref": formRef,
+    "name": id,
+    "style": {
+      width
+    }
+  }, ctx.attrs, formProps.value), {
+    default: () => [ctx.slots.formContent(), !hideFooter.value && createVNode(FormItem, {
+      "label": " ",
+      "colon": false
+    }, {
+      default: () => [!hideConfirm.value && createVNode(Button, {
+        "type": "primary",
+        "htmlType": "submit"
+      }, {
+        default: () => [createTextVNode("提交")]
+      }), !hideReset.value && createVNode(Button, {
+        "style": "margin-left: 10px;",
+        "type": "primary",
+        "danger": true,
+        "onClick": () => resetToDefault()
+      }, {
+        default: () => [createTextVNode("重置")]
+      })]
+    })]
+  });
+}, formRenderMap, ["exposed", "onUpdate:exposed", ["width", {
+  type: String,
+  default: "500px"
+}], ["hideFooter", {
+  type: Boolean
+}], ["hideConfirm", {
+  type: Boolean
+}], ["hideReset", {
+  type: Boolean
+}]]);
+const TfFormSearch = /* @__PURE__ */ defineTfForm((_, ctx) => {
+  const {
+    form,
+    columnsChecked,
+    columnsSort,
+    columns,
+    cache,
+    internalFormProps: _formProps,
+    onSubmit,
+    getFormData,
+    resetToDefault,
+    resetColumnsChecked,
+    resetColumnsSort
+  } = useFormInject();
+  const {
+    rules
+  } = useRules();
+  const formRef = ref();
+  useExposed(formRef);
+  const formProps = computed(() => {
+    return {
+      layout: "inline",
+      labelCol: {
+        style: {
+          width: "100px"
+        }
+      },
+      wrapperCol: {
+        style: {
+          // 这样定义宽度，可以方便后续修改
+          width: `var(--tf-form-control-width, 200px)`
+        }
+      },
+      ..._formProps.value,
+      model: form.value,
+      onFinish: async () => {
+        await (onSubmit == null ? void 0 : onSubmit(getFormData()));
+      },
+      rules: rules.value
+    };
+  });
+  const settingModal = ref(false);
+  let oldSortList = [];
+  const createColumnsTree = () => {
+    var _a;
+    const treeData = [{
+      title: "全选",
+      key: "__all",
+      children: []
+    }];
+    const children = [];
+    for (const column of columns.value) {
+      const key = column.field || ((_a = column.fields) == null ? void 0 : _a[0]);
+      children.push({
+        title: column.title,
+        key,
+        isLeaf: true
+      });
+    }
+    children.sort((a, b) => {
+      const aSort = columnsSort.value[a.key];
+      const bSort = columnsSort.value[b.key];
+      return aSort - bSort;
+    });
+    oldSortList = [...children];
+    treeData[0].children = children;
+    return {
+      treeData
+    };
+  };
+  const columnsTree = ref([]);
+  const columnsCheckedTree = ref([]);
+  const setting = () => {
+    const {
+      treeData
+    } = createColumnsTree();
+    columnsTree.value = treeData;
+    columnsCheckedTree.value = JSON.parse(JSON.stringify(columnsChecked.value));
+    settingModal.value = true;
+  };
+  const onSettingOk = () => {
+    settingModal.value = false;
+    columnsChecked.value = columnsCheckedTree.value;
+    const list = columnsTree.value[0].children;
+    const oldColumnsSort = {
+      ...columnsSort.value
+    };
+    const newColumnsSort = {};
+    list.forEach((e, idx) => {
+      const oldNode = oldSortList[idx];
+      const oldField = oldNode.key;
+      const oldSort = oldColumnsSort[oldField];
+      const curField = e.key;
+      newColumnsSort[curField] = oldSort;
+    });
+    columnsSort.value = newColumnsSort;
+  };
+  const onCancel = () => {
+    resetColumnsChecked();
+    resetColumnsSort();
+    settingModal.value = false;
+  };
+  const id = useId();
+  return () => createVNode(Fragment, null, [createVNode(Modal, {
+    "open": settingModal.value,
+    "onUpdate:open": ($event) => settingModal.value = $event,
+    "mask": false,
+    "width": 260,
+    "maskClosable": false,
+    "destroyOnClose": true
+  }, {
+    title: () => createVNode("span", null, [createTextVNode("配置筛选项"), createVNode("span", {
+      "style": {
+        fontSize: "12px",
+        color: "gray"
+      }
+    }, [createTextVNode("(可拖动排序)")])]),
+    footer: () => {
+      return createVNode("div", {
+        "style": "text-align: center;"
+      }, [createVNode(Button, {
+        "type": "primary",
+        "danger": true,
+        "onClick": onCancel
+      }, {
+        default: () => [createTextVNode("重置")]
+      }), createVNode(Button, {
+        "type": "primary",
+        "onClick": onSettingOk
+      }, {
+        default: () => [createTextVNode("保存")]
+      })]);
+    },
+    default: () => createVNode(Tree, {
+      "treeData": columnsTree.value,
+      "checkedKeys": columnsCheckedTree.value,
+      "onUpdate:checkedKeys": ($event) => columnsCheckedTree.value = $event,
+      "checkable": true,
+      "selectable": false,
+      "draggable": true,
+      "blockNode": true,
+      "expandedKeys": ["__all"],
+      "virtual": false,
+      "allowDrop": ({
+        dropNode,
+        dropPosition
+      }) => {
+        if (dropNode.isLeaf && dropPosition === 1) return true;
+        if (dropNode.key === "__all" && dropPosition === 0) return true;
+        return false;
+      },
+      "onDrop": (info) => {
+        const dragNode = info.dragNode;
+        const position = info.dropPosition;
+        const list = columnsTree.value[0].children;
+        const fromIndex = list.findIndex((e) => e.key === dragNode.key);
+        const toIndex = position > fromIndex ? position - 1 : position;
+        list.splice(fromIndex, 1);
+        list.splice(toIndex, 0, dragNode);
+      }
+    }, {
+      title: (node) => createVNode("div", {
+        "style": {
+          display: "flex"
+        }
+      }, [createVNode("span", null, [node.title]), node.key !== "__all" && createVNode(SwapOutlined, {
+        "rotate": 90,
+        "style": {
+          marginLeft: "auto",
+          color: "gray"
+        }
+      }, null)])
+    })
+  }), createVNode(Form, mergeProps({
+    "name": id,
+    "style": {
+      gap: "10px 0"
+    },
+    "ref": formRef
+  }, ctx.attrs, formProps.value), {
+    default: () => [ctx.slots.formContent(), createVNode(FormItem, {
+      "style": {
+        "--tf-form-control-width": "220px"
+      }
+    }, {
+      default: () => [createVNode("div", {
+        "style": "display: flex; gap: 10px;"
+      }, [cache.value && createVNode(Button, {
+        "icon": createVNode(SettingOutlined, null, null),
+        "onClick": setting
+      }, {
+        default: () => [createTextVNode("配置")]
+      }), createVNode(Button, {
+        "type": "primary",
+        "htmlType": "submit"
+      }, {
+        default: () => [createTextVNode("查询")]
+      }), createVNode(Button, {
+        "type": "primary",
+        "danger": true,
+        "htmlType": "reset",
+        "onClick": () => resetToDefault()
+      }, {
+        default: () => [createTextVNode("重置")]
+      })])]
+    })]
+  })]);
+}, formRenderMap, ["exposed", "onUpdate:exposed"]);
+const editMap = /* @__PURE__ */ new Map([
+  ["input", Input],
+  ["select", Select]
+]);
+const TfTable = defineTfTable((_p, ctx) => {
+  const {
+    formColumns,
+    tableColumns,
+    internalTableProps,
+    internalFormProps,
+    tableData,
+    loading,
+    total,
+    keyField,
+    defaultPageSize,
+    cache,
+    initSearch,
+    fitFlexHeight,
+    minHeight,
+    hideSearch,
+    hidePagination,
+    onSearch,
+    onChange,
+    onExpand,
+    onExpandedRowsChange,
+    onResizeColumn,
+    "onUpdate:exposed": onUpdateExposed
+  } = useTableInject();
+  const formExposed = ref();
+  const handleSearch = async (pagination) => {
+    var _a;
+    if (!onSearch) return;
+    const formData = (_a = formExposed.value) == null ? void 0 : _a.getFormData();
+    if (!pagination && !hidePagination.value) {
+      pagination = {
+        page: 1,
+        pageSize: defaultPageSize.value ?? 20
+      };
+    }
+    onSearch(formData, {
+      pagination
+    });
+  };
+  onMounted(() => {
+    if (initSearch.value ?? true) {
+      handleSearch();
+    }
+  });
+  const columns = computed(() => {
+    return tableColumns.value.map((column) => {
+      return {
+        width: 120,
+        align: "center",
+        ...column,
+        dataIndex: column.field
+      };
+    });
+  });
+  const currentPage = ref(1);
+  const props = computed(() => {
+    return {
+      bordered: true,
+      pagination: hidePagination.value ? false : {
+        total: total.value,
+        defaultPageSize: defaultPageSize.value ?? 20,
+        current: currentPage.value,
+        onChange: (page, pageSize) => {
+          currentPage.value = page;
+          handleSearch({
+            page,
+            pageSize
+          });
+        }
+      },
+      tableLayout: "fixed",
+      rowKey: keyField.value ?? "id",
+      ...internalTableProps.value
+    };
+  });
+  const _scrollY = ref(0);
+  const scrollY = computed(() => {
+    if (!tableData.value || tableData.value.length === 0) return;
+    return _scrollY.value;
+  });
+  const scroll = computed(() => {
+    return {
+      scrollToFirstRowOnChange: true,
+      x: "100%",
+      y: scrollY.value
+    };
+  });
+  let containerStyle = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "10px"
+  };
+  let tableStyle;
+  const containerRef = ref();
+  const calcTableHeight = () => {
+    const container = containerRef.value;
+    const table = container == null ? void 0 : container.querySelector(".ant-table-wrapper");
+    if (!table) return;
+    const header = container.querySelector(".ant-table-thead");
+    const footer = container.querySelector(".ant-table-footer");
+    if (!table) return;
+    let y = table.clientHeight - // pagination不是立即渲染的，其高度为64
+    // 多减去2px，避免出现小数
+    64 - 2 - ((header == null ? void 0 : header.clientHeight) ?? 0) - ((footer == null ? void 0 : footer.clientHeight) ?? 0);
+    const minHeightValue = minHeight.value ?? 210;
+    if (y < minHeightValue) y = minHeightValue;
+    _scrollY.value = y;
+  };
+  if (fitFlexHeight.value ?? true) {
+    containerStyle = {
+      ...containerStyle,
+      flex: "1",
+      minHeight: 0
+    };
+    tableStyle = {
+      flex: "1",
+      minHeight: 0
+    };
+    let resizeObserver;
+    let prevHeight;
+    let timer;
+    onMounted(() => {
+      resizeObserver = new ResizeObserver((entries) => {
+        const height = entries[0].contentRect.height;
+        if (prevHeight === height) return;
+        prevHeight = height;
+        if (timer) {
+          clearTimeout(timer);
+        }
+        timer = setTimeout(() => {
+          calcTableHeight();
+        }, 100);
+      });
+      resizeObserver.observe(containerRef.value);
+    });
+    onUnmounted(() => {
+      resizeObserver.disconnect();
+    });
+  }
+  const {
+    createBodyCell,
+    setEditRow,
+    cancelEditRow,
+    saveEditRow,
+    editRowMap
+  } = useEdit(tableData);
+  const scrollToIndex = (index) => {
+    var _a;
+    const row = (_a = containerRef.value) == null ? void 0 : _a.querySelectorAll(".ant-table-row")[index];
+    if (!row) return;
+    row.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest",
+      inline: "start"
+    });
+  };
+  const scrollToRow = (row) => {
+    const index = tableData.value.indexOf(row);
+    scrollToIndex(index);
+  };
+  watchEffect(() => {
+    onUpdateExposed == null ? void 0 : onUpdateExposed({
+      refresh: async () => {
+        var _a;
+        await ((_a = formExposed.value) == null ? void 0 : _a.resetToDefault());
+        handleSearch();
+      },
+      formExposed: formExposed.value,
+      editRowMap,
+      setEditRow: (row) => {
+        setEditRow(row);
+        nextTick().then(() => {
+          scrollToRow(row);
+        });
+      },
+      cancelEditRow,
+      saveEditRow,
+      scrollToIndex,
+      scrollToRow
+    });
+  });
+  return () => {
+    var _a, _b, _c, _d;
+    return createVNode("div", {
+      "ref": containerRef,
+      "style": containerStyle
+    }, [!hideSearch.value && createVNode(TfFormSearch, mergeProps({
+      "exposed": formExposed.value,
+      "onUpdate:exposed": ($event) => formExposed.value = $event,
+      "cache": cache.value,
+      "columns": formColumns.value,
+      "onSubmit": () => handleSearch()
+    }, internalFormProps.value), null), (ctx.slots.buttons || ctx.slots.tools) && createVNode("div", null, [(_b = (_a = ctx.slots).buttons) == null ? void 0 : _b.call(_a), (_d = (_c = ctx.slots).tools) == null ? void 0 : _d.call(_c)]), createVNode(Table, mergeProps({
+      "style": tableStyle,
+      "columns": columns.value,
+      "loading": loading.value,
+      "dataSource": tableData.value,
+      "scroll": scroll.value
+    }, ctx.attrs, props.value, {
+      "onChange": onChange,
+      "onExpand": onExpand,
+      "onExpandedRowsChange": onExpandedRowsChange,
+      "onResizeColumn": onResizeColumn
+    }), {
+      ...ctx.slots,
+      bodyCell: createBodyCell(ctx.slots.bodyCell)
+    })]);
+  };
+}, ["onChange", "onExpand", "onExpandedRowsChange", "onResizeColumn", "onSearch", ["initSearch", {
+  type: Boolean,
+  default: true
+}], "fitFlexHeight", "minHeight", ["hidePagination", {
+  type: Boolean
+}], "exposed", "onUpdate:exposed", ["hideSearch", {
+  type: Boolean
+}]]);
+function useEdit(tableData) {
+  const editRowMap = reactive(/* @__PURE__ */ new Map());
+  const createBodyCell = (bodyCellDefault) => {
+    if (editRowMap.size === 0) return bodyCellDefault;
+    return (scopeProps) => {
+      const column = scopeProps.column;
+      if (column.customRender) {
+        return column.customRender({
+          ...scopeProps,
+          record: scopeProps.record,
+          // todo:: 这个是啥？
+          renderIndex: -1
+        });
+      }
+      if (column.edit && editRowMap.has(scopeProps.record)) {
+        let edit;
+        if (typeof column.edit === "string") {
+          edit = {
+            type: column.edit
+          };
+        } else {
+          edit = column.edit;
+        }
+        const field = edit.field ?? column.field;
+        const component = editMap.get(edit.type);
+        if (component) {
+          return h(component, {
+            ...edit.props,
+            class: "tf-table-edit",
+            value: get(scopeProps.record, field),
+            "onUpdate:value": (value) => {
+              set(scopeProps.record, field, value);
+            }
+          });
+        }
+      }
+    };
+  };
+  const setEditRow = (row) => {
+    const oldRow = cloneDeep(row);
+    editRowMap.set(row, oldRow);
+  };
+  const cancelEditRow = (row) => {
+    const oldRow = editRowMap.get(row);
+    if (!oldRow) return;
+    const index = tableData.value.indexOf(row);
+    tableData.value[index] = oldRow;
+    delEditRow(row);
+  };
+  const saveEditRow = (row) => {
+    delEditRow(row);
+  };
+  const delEditRow = (row) => {
+    editRowMap.delete(row);
+  };
+  watch(tableData, (v) => {
+    editRowMap.forEach((_val, key) => {
+      if (!(v == null ? void 0 : v.includes(key))) {
+        editRowMap.delete(key);
+      }
+    });
+  });
+  return {
+    editRowMap,
+    setEditRow,
+    createBodyCell,
+    cancelEditRow,
+    saveEditRow
+  };
+}
+const TfVxeTable = defineTfTable((_, ctx) => {
+  const {
+    formColumns,
+    tableColumns,
+    internalTableProps,
+    internalFormProps,
+    tableData,
+    loading,
+    total,
+    keyField,
+    defaultPageSize,
+    cache,
+    initSearch,
+    fitFlexHeight,
+    minHeight,
+    hideSearch,
+    hidePagination,
+    rowConfig: _rowConfig,
+    customConfig: _customConfig,
+    toolbarConfig: _toolbarConfig,
+    columnConfig: _columnConfig,
+    treeConfig,
+    onSearch,
+    "onUpdate:exposed": onUpdateExposed
+  } = useTableInject();
+  const formExposed = ref();
+  const tableExposed = ref();
+  const handleSearch = async (pagination) => {
+    var _a;
+    if (!onSearch) return;
+    const formData = (_a = formExposed.value) == null ? void 0 : _a.getFormData();
+    if (!pagination && !hidePagination.value) {
+      pagination = {
+        page: 1,
+        pageSize: defaultPageSize.value ?? 20
+      };
+    }
+    await onSearch(formData, {
+      pagination
+    });
+  };
+  onMounted(() => {
+    if (initSearch.value) {
+      handleSearch();
+    }
+  });
+  const rowConfig = computed(() => {
+    return {
+      keyField: keyField.value,
+      ..._rowConfig.value
+    };
+  });
+  const enableEdit = computed(() => {
+    return tableColumns.value.some((column) => {
+      var _a;
+      return column.edit || ((_a = column.slots) == null ? void 0 : _a.edit);
+    });
+  });
+  const columns = computed(() => {
+    return tableColumns.value.map((column) => {
+      var _a;
+      let editObj = column.edit;
+      if (typeof editObj === "string") {
+        editObj = {
+          type: editObj,
+          props: {}
+        };
+      }
+      const slots = {
+        edit: editObj ? (params) => {
+          const {
+            row
+          } = params;
+          const type = editObj.type;
+          const field = editObj.field ?? column.field;
+          const component = editMap.get(type);
+          if (!component) {
+            console.warn(`[@ftjs/antd] 不支持的编辑类型: ${type}`);
+            return "";
+          }
+          return h(component, {
+            ...editObj.props,
+            value: row[field],
+            "onUpdate:value": (value) => {
+              row[field] = value;
+            }
+          });
+        } : null,
+        ...column.slots
+      };
+      if (slots.edit == null) {
+        delete slots.edit;
+      }
+      return {
+        minWidth: 120,
+        align: "center",
+        editRender: editObj || ((_a = column.slots) == null ? void 0 : _a.edit) ? {} : void 0,
+        ...column,
+        slots
+      };
+    });
+  });
+  const customConfig = computed(() => {
+    return {
+      storage: true,
+      enabled: cache.value != null,
+      ..._customConfig.value
+    };
+  });
+  const toolbarConfig = computed(() => {
+    return {
+      custom: true,
+      zoom: true,
+      ..._toolbarConfig.value
+    };
+  });
+  const editConfig = computed(() => {
+    if (!enableEdit.value) return void 0;
+    return {
+      mode: "row",
+      showStatus: true,
+      trigger: "manual",
+      autoClear: false,
+      autoPos: true
+    };
+  });
+  const columnConfig = computed(() => {
+    return {
+      resizable: true,
+      ..._columnConfig.value
+    };
+  });
+  let containerStyle = {
+    display: "flex",
+    flexDirection: "column",
+    gap: "10px",
+    width: "100%"
+  };
+  let tableStyle;
+  const containerRef = ref();
+  let height;
+  if (fitFlexHeight.value ?? true) {
+    containerStyle = {
+      ...containerStyle,
+      flex: "1",
+      minHeight: 0
+    };
+    tableStyle = {
+      flex: "1",
+      minHeight: 0
+    };
+    height = "100%";
+  }
+  const current = ref(1);
+  async function refresh() {
+    await handleSearch();
+  }
+  watchEffect(() => {
+    onUpdateExposed == null ? void 0 : onUpdateExposed({
+      refresh,
+      formExposed: formExposed.value,
+      tableExposed: tableExposed.value
+    });
+  });
+  return () => createVNode("div", {
+    "ref": containerRef,
+    "style": containerStyle
+  }, [!hideSearch.value && createVNode(TfFormSearch, mergeProps({
+    "exposed": formExposed.value,
+    "onUpdate:exposed": ($event) => formExposed.value = $event,
+    "cache": cache.value,
+    "columns": formColumns.value,
+    "onSubmit": () => handleSearch()
+  }, internalFormProps.value), null), createVNode("div", {
+    "style": tableStyle
+  }, [createVNode(VxeGrid, mergeProps({
+    "ref": (ref2) => tableExposed.value = ref2,
+    "border": true,
+    "showOverflow": true,
+    "height": height,
+    "columns": columns.value,
+    "loading": loading.value,
+    "data": tableData.value,
+    "minHeight": minHeight.value ?? 310,
+    "rowConfig": rowConfig.value,
+    "treeConfig": treeConfig.value,
+    "id": cache.value,
+    "toolbarConfig": toolbarConfig.value,
+    "customConfig": customConfig.value,
+    "columnConfig": columnConfig.value,
+    "keepSource": enableEdit.value,
+    "editConfig": editConfig.value
+  }, internalTableProps.value), {
+    pager() {
+      return hidePagination.value ? null : createVNode("div", {
+        "style": "text-align: right; padding: .5em 0;"
+      }, [createVNode(Pagination, {
+        "current": current.value,
+        "onUpdate:current": ($event) => current.value = $event,
+        "showQuickJumper": true,
+        "showSizeChanger": true,
+        "total": total.value,
+        "defaultPageSize": defaultPageSize.value ?? 20,
+        "showTotal": (total2) => {
+          if (total2 === 0) return null;
+          return `共 ${total2} 条数据`;
+        },
+        "onChange": (page, pageSize) => {
+          handleSearch({
+            page,
+            pageSize
+          });
+        }
+      }, null)]);
+    },
+    ...ctx.slots,
+    loading() {
+      return createVNode("div", {
+        "style": "height: 100%; width: 100%; display: flex; justify-content: center; align-items: center;"
+      }, [createVNode(Spin, null, null)]);
+    }
+  })])]);
+}, ["onSearch", ["initSearch", {
+  type: Boolean,
+  default: true
+}], "fitFlexHeight", "minHeight", ["hidePagination", {
+  type: Boolean
+}], "exposed", "onUpdate:exposed", ["hideSearch", {
+  type: Boolean
+}], "rowConfig", "treeConfig", "customConfig", "toolbarConfig", "columnConfig"]);
+export {
+  TfForm,
+  TfFormSearch,
+  TfTable,
+  TfVxeTable,
+  registerForm,
+  useRules
+};