hy-dispatch-ui-v3 0.2.32 → 0.2.34

package/es/components/hyTableForm/batchTableForm.vue.mjs

@@ -0,0 +1,478 @@
+import { defineComponent, useTemplateRef, ref, openBlock, createElementBlock, createElementVNode, createVNode, unref as unref$1, withCtx, Fragment, renderList, createCommentVNode, toDisplayString, renderSlot, createBlock, createTextVNode, createSlots, normalizeProps, guardReactiveProps, normalizeStyle, nextTick } from 'vue';
+import { ElUpload, ElMessage } from 'element-plus';
+import _sfc_main$1 from './tableForm.vue.mjs';
+import { downloadTemplateHandler, doReadExcel } from './js/index.mjs';
+import { useApi } from '../../hooks/useApi.mjs';
+import { useLocale } from '../../hooks/useLocale.mjs';
+import { HyIcon } from '../hyIcon/index.mjs';
+import { HyButton } from '../hyButton/index.mjs';
+import { HyConfirmDialog } from '../hyConfirmDialog/index.mjs';
+
+import "./style/batchTableForm.scss";
+
+const __default__ = defineComponent({
+  name: "HyBatchTableForm"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: {
+    // 表格配置项
+    tableColumns: {
+      // 表格的列
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    formColumns: {
+      type: Array,
+      default: () => []
+    },
+    rules: {
+      type: Object,
+      default: () => ({})
+    },
+    emptyText: {
+      // 空数据时显示的文本内容
+      type: String
+    },
+    fontSize: {
+      // 字体大小
+      type: Number,
+      default: 14
+    },
+    rowClickExpand: {
+      // 点击行展开
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    // 表单配置项
+    columnNum: {
+      type: Number,
+      default: 2
+    },
+    size: {
+      type: String,
+      default: "default"
+      // 'large' | 'default' | 'small'
+    },
+    // 其他配置项
+    beforeDataHandle: {
+      type: Function
+    },
+    templateConfig: {
+      type: Object,
+      default: () => ({
+        title: "\u4E0B\u8F7D\u6A21\u677F",
+        url: "",
+        fileName: ""
+      })
+    },
+    url: {
+      type: String
+    },
+    submitParams: {
+      type: Object
+    },
+    submitHandler: {
+      type: Function
+    }
+  },
+  emits: ["submitting", "submit"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { api } = useApi();
+    const { t } = useLocale();
+    const containerRef = useTemplateRef("containerRef");
+    const tableRef = useTemplateRef("tableRef");
+    const active = ref(1);
+    const stepList = [
+      {
+        title: "\u4E0A\u4F20\u5BFC\u5165\u6587\u4EF6",
+        description: "\u4E0A\u4F20\u5DF2\u586B\u5199\u5B8C\u6210\u7684<br/>\u6DFB\u52A0\u6A21\u677F\u6587\u4EF6"
+      },
+      {
+        title: "\u81EA\u52A8\u89E3\u6790\u4E0E\u6821\u9A8C",
+        description: "\u7CFB\u7EDF\u5C06\u81EA\u52A8\u89E3\u6790\u60A8<br/>\u4E0A\u4F20\u540E\u7684\u6587\u4EF6\u8FDB\u884C\u663E\u793A"
+      },
+      {
+        title: "\u652F\u6301\u4FEE\u6B63\u5F02\u5E38",
+        description: "\u5F02\u5E38\u6570\u636E\u5C06\u6807\u8BB0\u63D0\u793A<br/>\u652F\u6301\u4FEE\u6539\u5E76\u5373\u65F6\u6821\u9A8C"
+      },
+      {
+        title: "\u786E\u8BA4\u5BFC\u5165\u6570\u636E",
+        description: "\u4EE5\u5F53\u524D\u6570\u636E\u4E3A\u51C6<br/>\u6267\u884C\u6279\u91CF\u5BFC\u5165\u6DFB\u52A0\u6570\u636E"
+      }
+    ];
+    const templateFileName = ref("");
+    const submitNumber = ref(0);
+    const submitting = ref(false);
+    const submitProgress = ref(0);
+    function setData(data = []) {
+      if (!tableRef.value) return;
+      tableRef.value.setData(data);
+    }
+    function deleteData(data = []) {
+      if (!tableRef.value) return;
+      tableRef.value.deleteData(data);
+    }
+    function getTableDataSource() {
+      if (!tableRef.value) return [];
+      return tableRef.value.getTableDataSource();
+    }
+    function validate() {
+      if (!tableRef.value) return {};
+      return tableRef.value.validate();
+    }
+    async function onUploadChange(file) {
+      const type = file.raw.type;
+      if (file.raw.size > 1024 * 1024 * 10) {
+        ElMessage.error(`\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC710M\uFF01`);
+        return false;
+      } else {
+        if (type.indexOf("application") !== -1) {
+          const files = { 0: file.raw };
+          try {
+            const data = await doReadExcel(files, props);
+            if (!data) {
+              ElMessage.warning("\u8BFB\u53D6\u6587\u4EF6\u5931\u8D25");
+              return;
+            }
+            active.value++;
+            await nextTick();
+            setData(data);
+            templateFileName.value = file.name;
+          } catch (err) {
+            console.error(err);
+            return;
+          }
+        } else {
+          ElMessage.error("\u6587\u4EF6\u683C\u5F0F\u6709\u8BEF");
+        }
+      }
+    }
+    async function onResetUpload() {
+      if (tableRef.value) {
+        const { total } = tableRef.value.getStatistics();
+        if (total) {
+          try {
+            await new Promise((resolve, reject) => {
+              HyConfirmDialog.confirm({
+                content: submitNumber.value ? `\u672C\u6B21\u5DF2\u6210\u529F\u5BFC\u5165 ${submitNumber.value} \u6761\u6570\u636E\uFF0C\u91CD\u65B0\u4E0A\u4F20\u5C06\u4E0D\u4F1A\u64A4\u9500\u8FD9\u4E9B\u6570\u636E\u3002\u5269\u4F59\u672A\u5BFC\u5165\u6570\u636E\u5C06\u4F1A\u88AB\u6E05\u7A7A` : `\u91CD\u65B0\u4E0A\u4F20\u5C06\u6E05\u7A7A\u5F53\u524D ${total} \u6761\u6570\u636E, <br />\u662F\u5426\u786E\u8BA4\u91CD\u65B0\u4E0A\u4F20`,
+                onClose: reject,
+                onCancel: reject,
+                onSubmit: resolve
+              });
+            });
+          } catch {
+            return;
+          }
+        }
+      }
+      templateFileName.value = "";
+      active.value = 1;
+      submitNumber.value = 0;
+    }
+    async function submitDataSource() {
+      if (!props.url && !props.submitHandler) {
+        ElMessage.warning("\u8BF7\u914D\u7F6E\u63D0\u4EA4\u8868\u5355\u5730\u5740");
+        return Promise.reject();
+      }
+      if (submitting.value) {
+        HyConfirmDialog.tip({
+          content: `\u6570\u636E\u6B63\u5728\u5904\u7406\u4E2D\uFF0C<br/>\u8BF7\u7B49\u5F85\u6570\u636E\u5904\u7406\u5B8C\u6210\u540E\u518D\u5173\u95ED\u5F39\u7A97`
+        });
+        return Promise.reject();
+      }
+      const res = validate();
+      let { dataSource, total, success, failed } = res;
+      if (!total) {
+        ElMessage.warning("\u8BF7\u6DFB\u52A0\u6570\u636E");
+        return;
+      }
+      if (!success) {
+        ElMessage.warning("\u8BF7\u586B\u5199\u6709\u6548\u4E0A\u4F20\u6570\u636E");
+        return;
+      }
+      if (failed) {
+        try {
+          await new Promise((resolve, reject) => {
+            HyConfirmDialog.confirm({
+              content: `\u5F53\u524D\u5B58\u5728<span class="text-danger-2"> ${failed} \u6761\u6570\u636E\u5F02\u5E38</span>\uFF0C\u672C\u6B21\u5C06\u4EC5\u5BFC\u5165 ${success} \u6761\u5BFC\u5165\u5C31\u7EEA\u6570\u636E\uFF0C\u5F02\u5E38\u6570\u636E\u5C06\u88AB\u5FFD\u7565`,
+              onClose: reject,
+              onCancel: reject,
+              onSubmit: resolve
+            });
+          });
+        } catch {
+          return Promise.reject();
+        }
+      }
+      const submitList = [];
+      submitProgress.value = 0;
+      submitting.value = true;
+      emits("submitting");
+      for (let i = 0; i <= dataSource.length - 1; i++) {
+        const target = dataSource[i];
+        const { onlyId, errorMsg, errorMap, children, ...data } = target;
+        submitProgress.value = Math.floor((i + 1) / total * 100);
+        if (errorMsg) {
+          continue;
+        }
+        let res2;
+        try {
+          if (props.submitHandler) {
+            res2 = await props.submitHandler(data);
+          } else {
+            res2 = await unref(api).post(props.url, props.submitParams);
+          }
+          if (res2.code === 200) {
+            submitNumber.value++;
+            submitList.push(target);
+          } else {
+            target.errorMsg = {
+              prop: null,
+              message: res2.msg
+            };
+          }
+        } catch (err) {
+          target.errorMsg = {
+            prop: null,
+            message: err?.msg ? err.msg : err
+          };
+          console.error(err);
+        }
+      }
+      deleteData(submitList);
+      submitting.value = false;
+      const submitResult = {
+        total,
+        success: submitList.length,
+        failed: total - submitList.length,
+        result: submitList.length === total
+      };
+      if (submitResult.result) {
+        ElMessage.success(`${submitResult.total} \u6761\u6570\u636E\u5BFC\u5165\u5B8C\u6210\uFF0C\u5DF2\u66F4\u65B0`);
+        emits("submit", submitResult);
+        onResetUpload();
+      } else {
+        ElMessage.warning(
+          `${submitResult.success} \u6761\u6570\u636E\u5BFC\u5165\u6210\u529F\uFF0C ${submitResult.failed} \u6761\u6570\u636E\u5F02\u5E38\uFF0C\u8BF7\u8C03\u6574`
+        );
+        emits("submit", submitResult);
+      }
+    }
+    __expose({
+      setData,
+      deleteData,
+      getTableDataSource,
+      validate,
+      submitDataSource
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          ref_key: "containerRef",
+          ref: containerRef,
+          class: "hy-batch-table-form"
+        },
+        [
+          active.value === 1 ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: "max-h-full overflow-y-auto scroll-body"
+          }, [
+            createElementVNode("div", { class: "hy-batch-table-form-upload-box" }, [
+              createVNode(unref$1(ElUpload), {
+                accept: ".xls,.xlsx",
+                drag: "",
+                multiple: false,
+                "auto-upload": false,
+                "show-file-list": false,
+                class: "w-full h-full",
+                "on-change": onUploadChange
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref$1(HyIcon), {
+                    "svg-name": "analytics-echarts-sos",
+                    "class-name": "!w-[58px] !h-[66px] mb-4"
+                  }),
+                  createElementVNode("div", { class: "mb-1.5 text-main" }, [
+                    createElementVNode("span", null, "\u70B9\u51FB\u6216\u5C06 \u6587\u4EF6 \u62D6\u62FD\u5230\u6B64\u5904\u4E0A\u4F20")
+                  ]),
+                  createElementVNode("div", { class: "text-auxiliary text-xs" }, "\u4E00\u6B21\u4EC5\u652F\u6301\u4E0A\u4F20\u4E00\u4E2A\u6587\u4EF6"),
+                  createElementVNode("div", { class: "w-full text-main absolute left-1/2 bottom-4 transform -translate-x-1/2" }, [
+                    createElementVNode("div", { class: "flex items-center justify-center text-xs text-auxiliary gap-2" }, [
+                      createElementVNode("span", null, "\u6587\u4EF6\u652F\u6301\uFF1A"),
+                      createElementVNode("div", { class: "border border-border rounded py-1 px-2.5 bg-background-4" }, " .xls "),
+                      createElementVNode("div", { class: "border border-border rounded py-1 px-2.5 bg-background-4" }, " .xlsx "),
+                      createElementVNode("span", null, "\u5355\u6587\u4EF6\u4E0D\u8D85\u8FC7 10 MB")
+                    ])
+                  ])
+                ]),
+                _: 1
+                /* STABLE */
+              })
+            ]),
+            createElementVNode("div", { class: "hy-batch-table-form-step-box" }, [
+              createElementVNode("div", { class: "text-auxiliary text-center mb-[30px]" }, [
+                createElementVNode("span", null, "\u6279\u91CF\u6DFB\u52A0\u5BFC\u5165\u6D41\u7A0B\u8BF4\u660E")
+              ]),
+              createElementVNode("div", { class: "w-full flex" }, [
+                (openBlock(), createElementBlock(
+                  Fragment,
+                  null,
+                  renderList(stepList, (item, index) => {
+                    return createElementVNode("div", {
+                      key: index,
+                      class: "w-0 flex-1 flex flex-col items-center relative"
+                    }, [
+                      index < stepList.length - 1 ? (openBlock(), createElementBlock("div", {
+                        key: 0,
+                        class: "w-3/4 absolute top-[19px] left-full transform -translate-x-1/2",
+                        style: { "border-top": "2px dashed rgba(var(--hy-border))" }
+                      })) : createCommentVNode("v-if", true),
+                      createElementVNode("div", { class: "w-[38px] h-[38px] flex items-center justify-center border border-solid border-border rounded-full bg-background box-border" }, [
+                        createElementVNode(
+                          "span",
+                          { class: "text-base text-main" },
+                          toDisplayString(index + 1),
+                          1
+                          /* TEXT */
+                        )
+                      ]),
+                      createElementVNode(
+                        "span",
+                        { class: "text-main font-bold text-sm mt-3 mb-2" },
+                        toDisplayString(item.title),
+                        1
+                        /* TEXT */
+                      ),
+                      createElementVNode("div", {
+                        innerHTML: item.description,
+                        class: "text-auxiliary text-center mb-3 whitespace-nowrap"
+                      }, null, 8, ["innerHTML"]),
+                      renderSlot(_ctx.$slots, "template-down", {}, () => [
+                        index === 0 ? (openBlock(), createBlock(unref$1(HyButton), {
+                          key: 0,
+                          type: "primary",
+                          link: "",
+                          onClick: () => unref$1(downloadTemplateHandler)(props)
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(
+                              toDisplayString(__props.templateConfig ? __props.templateConfig.title : "\u4E0B\u8F7D\u6A21\u677F"),
+                              1
+                              /* TEXT */
+                            )
+                          ]),
+                          _: 1
+                          /* STABLE */
+                        }, 8, ["onClick"])) : createCommentVNode("v-if", true)
+                      ])
+                    ]);
+                  }),
+                  64
+                  /* STABLE_FRAGMENT */
+                ))
+              ])
+            ])
+          ])) : active.value === 2 ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: "h-full flex flex-col"
+          }, [
+            createElementVNode("div", { class: "hy-batch-table-form-template-box" }, [
+              createElementVNode("div", { class: "flex items-center gap-2" }, [
+                createVNode(unref$1(HyIcon), {
+                  "svg-name": "analytics-echarts-sos",
+                  "class-name": "!w-[18px] !h-[22px]"
+                }),
+                createElementVNode(
+                  "span",
+                  { class: "text-theme" },
+                  toDisplayString(templateFileName.value),
+                  1
+                  /* TEXT */
+                ),
+                createElementVNode("span", { class: "text-auxiliary" }, "\u89E3\u6790\u5B8C\u6210")
+              ]),
+              createVNode(unref$1(HyButton), {
+                type: "primary",
+                link: "",
+                size: "small",
+                onClick: onResetUpload
+              }, {
+                default: withCtx(() => [
+                  createTextVNode("\u91CD\u65B0\u4E0A\u4F20\u6587\u4EF6")
+                ]),
+                _: 1
+                /* STABLE */
+              })
+            ]),
+            createVNode(_sfc_main$1, {
+              ref_key: "tableRef",
+              ref: tableRef,
+              tableColumns: __props.tableColumns,
+              formColumns: __props.formColumns,
+              rules: __props.rules,
+              rowClickExpand: __props.rowClickExpand,
+              columnNum: __props.columnNum,
+              size: __props.size,
+              class: "h-0 flex-1"
+            }, createSlots({
+              _: 2
+              /* DYNAMIC */
+            }, [
+              renderList(_ctx.$slots, (_, slotName) => {
+                return {
+                  name: slotName,
+                  fn: withCtx((scope) => [
+                    renderSlot(_ctx.$slots, slotName, normalizeProps(guardReactiveProps(scope)))
+                  ])
+                };
+              })
+            ]), 1032, ["tableColumns", "formColumns", "rules", "rowClickExpand", "columnNum", "size"])
+          ])) : createCommentVNode("v-if", true),
+          submitting.value ? (openBlock(), createElementBlock("div", {
+            key: 2,
+            class: "absolute top-0 right-0 bottom-0 left-0 z-10 flex items-center justify-center"
+          }, [
+            createElementVNode("div", { class: "w-full h-full absolute bg-[rgba(var(--hy-background-4),0.9)] backdrop-blur-sm" }),
+            createElementVNode("div", { class: "flex flex-col items-center text-theme text-xs relative" }, [
+              createVNode(unref$1(HyIcon), {
+                "svg-name": "analytics-echarts-sos",
+                "class-name": "!w-[58px] !h-[66px] mb-[18px]"
+              }),
+              createElementVNode("div", { class: "flex items-center" }, [
+                createElementVNode("span", null, "\u6570\u636E\u6B63\u5728\u5BFC\u5165\u4E2D"),
+                createElementVNode(
+                  "span",
+                  { class: "ml-1 mr-3" },
+                  toDisplayString(submitProgress.value) + "%",
+                  1
+                  /* TEXT */
+                ),
+                createElementVNode("div", { class: "w-[68px] h-0.5 bg-auxiliary rounded-full" }, [
+                  createElementVNode(
+                    "div",
+                    {
+                      class: "h-full bg-theme rounded-full",
+                      style: normalizeStyle({ width: `${submitProgress.value}%` })
+                    },
+                    null,
+                    4
+                    /* STYLE */
+                  )
+                ])
+              ])
+            ])
+          ])) : createCommentVNode("v-if", true)
+        ],
+        512
+        /* NEED_PATCH */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/components/hyTableForm/index.mjs

@@ -1,6 +1,9 @@
 import _sfc_main from './tableForm.vue.mjs';
+import _sfc_main$1 from './batchTableForm.vue.mjs';
+export { useAppTableForm } from './js/useAppTableForm.mjs';
 import { withInstall } from '../../utils/handler.mjs';
 
 const HyTableForm = withInstall(_sfc_main);
+const HyBatchTableForm = withInstall(_sfc_main$1);
 
-export { HyTableForm, HyTableForm as default };
+export { HyBatchTableForm, HyTableForm, HyTableForm as default };

package/es/components/hyTableForm/js/index.mjs

@@ -0,0 +1,123 @@
+import XLSX from 'xlsx';
+import dayjs from 'dayjs';
+import { unref } from 'vue';
+import AsyncValidator from 'async-validator';
+import { ElMessage } from 'element-plus';
+import { columnShowHandler } from '../../hyForm/js/index.mjs';
+import { useApi } from '../../../hooks/useApi.mjs';
+import { setValueByProp, getValueByProp } from '../../../utils/form.mjs';
+import { isArray } from '../../../utils/is.mjs';
+
+const doValidate = async (target = {}, columns = [], ruleList = {}) => {
+  const data = {};
+  let rules = {};
+  const columnMap = (columns || []).reduce((columnMap2, column) => {
+    if (columnShowHandler({ model: data }, column)) {
+      columnMap2[column.prop] = column;
+      rules[column.prop] = column.rules || [];
+      setValueByProp(data, column.prop, getValueByProp(target, column.prop));
+    }
+    return columnMap2;
+  }, {});
+  Object.entries(ruleList || {}).forEach(([key, citem]) => {
+    if (columnMap[key]) {
+      rules[key] = [
+        ...isArray(citem) ? citem : [citem],
+        ...rules[key]
+      ].filter(Boolean);
+    }
+  });
+  const validator = new AsyncValidator(rules);
+  return validator.validate(data, { firstFields: true }).then((res) => {
+    return true;
+  }).catch((error) => {
+    const { errors, fields } = error;
+    if (!errors || !fields) {
+      console.error(error);
+    }
+    return Promise.reject(errors || []);
+  });
+};
+const doReadExcel = (files, props) => {
+  return new Promise((resolve2, reject) => {
+    const { formColumns, beforeDataHandle } = props;
+    const fileReader = new FileReader();
+    fileReader.onload = (ev) => {
+      try {
+        const data = ev.target.result;
+        const workbook = XLSX.read(data, {
+          type: "binary"
+        });
+        const wsname1 = workbook.SheetNames[0];
+        const ws1 = XLSX.utils.sheet_to_json(workbook.Sheets[wsname1]);
+        let content = formColumns.reduce((content2, column) => {
+          const title = column.import ? column.import.title : column.label;
+          return content2.replace(
+            new RegExp(`"${title}":`, "g"),
+            `"${column.prop}":`
+          );
+        }, JSON.stringify(ws1));
+        let dataSource = JSON.parse(content);
+        if (beforeDataHandle) {
+          dataSource = dataSource.map((item) => beforeDataHandle(item));
+        }
+        resolve2(dataSource);
+      } catch (err) {
+        reject(err);
+      }
+    };
+    fileReader.readAsBinaryString(files[0]);
+  });
+};
+const downloadTemplateHandler = async (props) => {
+  const { templateConfig } = props;
+  const { url, fileName } = templateConfig;
+  if (!url) {
+    ElMessage.warning("\u8BF7\u914D\u7F6E\u4E0B\u8F7D\u6A21\u677F\u5730\u5740");
+    return;
+  }
+  const { api } = useApi();
+  try {
+    const blob = await unref(api).get(url, {
+      responseType: "blob"
+    });
+    blobDownloadFn(blob, fileName).then(() => {
+      resolve();
+    });
+  } catch (err) {
+    console.error(err);
+  }
+};
+function blobDownloadFn(blob, name) {
+  return new Promise((resolve2, reject) => {
+    ElMessage.warning("\u5F00\u59CB\u4E0B\u8F7D");
+    const today = dayjs().format("YYYY-MM-DD HH:mm:ss");
+    const reader = new FileReader();
+    reader.readAsDataURL(blob);
+    reader.onload = function(ev) {
+      let url = null;
+      try {
+        if (window.navigator.msSaveOrOpenBlob) {
+          const blobObject = new Blob([blob]);
+          window.navigator.msSaveOrOpenBlob(blobObject, `${name}_${today}.xls`);
+        } else {
+          url = URL.createObjectURL(new Blob([blob]));
+          const a = document.createElement("a");
+          document.body.appendChild(a);
+          a.href = url;
+          a.download = `${name}_${today}.xls`;
+          a.target = "_blank";
+          a.click();
+          a.remove();
+        }
+        resolve2();
+      } catch (error) {
+        reject(error);
+      } finally {
+        if (url) URL.revokeObjectURL(url);
+      }
+    };
+  });
+}
+
+export { doReadExcel, doValidate, downloadTemplateHandler };

package/es/components/hyTableForm/js/useAppTableForm.mjs

@@ -0,0 +1,47 @@
+import { useAppTable } from '../../hyTable/js/useAppTable.mjs';
+import { useAppForm } from '../../hyForm/js/useAppForm.mjs';
+import { isString, isObject } from '../../../utils/is.mjs';
+
+const useAppTableForm = (config = {}) => {
+  let { columns } = config || {};
+  columns = [
+    {
+      type: "expand",
+      slot: "expand",
+      expandType: "expand",
+      width: 48
+    },
+    ...columns.filter(
+      (column) => !["expand", "operator"].includes(column.type)
+    ),
+    {
+      label: "\u5BFC\u5165\u72B6\u6001",
+      prop: "validateStatus",
+      slot: "validateStatus"
+    }
+  ];
+  const { tableColumns } = useAppTable({ columns });
+  const { formModel, formColumns } = useAppForm(
+    config.formColumns,
+    config.formModel
+  );
+  formColumns.value.forEach((item) => {
+    if (isString(item.import)) {
+      item.import = {
+        title: item.import
+      };
+    } else {
+      item.import = {
+        title: item.label,
+        ...isObject(item.import) ? item.import : {}
+      };
+    }
+  });
+  return {
+    tableColumns,
+    formModel,
+    formColumns
+  };
+};
+
+export { useAppTableForm };