🔱: [client] sync upgrade with 8 commits [trident-sync]

chore: 1.14.4 chore: 1.14.3 fix: export lib chore: 1.14.2 refactor: import refactor: import perf: 导入支持
2026-04-23 11:37:23 +08:00 · 2023-07-02 19:23:56 +00:00
parent a8edaf4dfa
commit 6fda0d6896
7 changed files with 232 additions and 5 deletions
@@ -579,6 +579,12 @@ export const crudResources = [
            path: "/crud/feature/local-v-model",
            component: "/crud/feature/local-v-model/index.vue"
          },
+          {
+            title: "导入",
+            name: "FeatureImport",
+            path: "/crud/feature/local-import",
+            component: "/crud/feature/local-import/index.vue"
+          },
          {
            title: "自定义删除",
            name: "FeatureRemove",
@@ -0,0 +1,90 @@
+import { CreateCrudOptionsProps, CreateCrudOptionsRet, importTable } from "@fast-crud/fast-crud";
+import { Modal, notification } from "ant-design-vue";
+
+export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+  const crudBinding = crudExpose.crudBinding;
+  return {
+    crudOptions: {
+      mode: {
+        name: "local",
+        isMergeWhenUpdate: true,
+        isAppendWhenAdd: true
+      },
+      //启用addRow按钮
+      actionbar: {
+        buttons: {
+          //禁用弹框添加
+          add: { show: false },
+          //启用添加行
+          addRow: { show: true },
+          //导入按钮
+          import: {
+            show: true,
+            text: "批量导入",
+            type: "primary",
+            click() {
+              const modal = Modal.info({
+                title: "批量导入",
+                okText: "关闭",
+                content() {
+                  async function onChange(e: any) {
+                    const file = e.target.files[0];
+                    await importTable(crudExpose, { file, append: true });
+                    modal.destroy();
+                    notification.success({
+                      message: "导入成功"
+                    });
+                  }
+                  return (
+                    <div>
+                      <p>
+                        1、<a href={"template-import.csv"}>下载导入模板</a>
+                      </p>
+                      <p>
+                        2、<span>模板填充数据</span>
+                      </p>
+                      <p>
+                        <span>3、导入：</span>
+                        <input type={"file"} onInput={onChange}></input>
+                      </p>
+                    </div>
+                  );
+                }
+              });
+            }
+          }
+        }
+      },
+      table: {
+        remove: {
+          //删除数据后不请求后台
+          refreshTable: false
+        },
+        editable: {
+          enabled: true,
+          mode: "row",
+          activeTrigger: false
+        }
+      },
+      search: {
+        show: false
+      },
+      toolbar: {
+        show: false
+      },
+      pagination: {
+        show: false
+      },
+      columns: {
+        name: {
+          type: "text",
+          title: "联系人姓名"
+        },
+        mobile: {
+          type: "text",
+          title: "联系人手机号码"
+        }
+      }
+    }
+  };
+}
@@ -0,0 +1,47 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">将本地crud当做v-model,编辑好之后一并提交，本示例演示import导入</div>
+    </template>
+    <div style="padding: 30px">
+      <a-form ref="formRef" :model="form" laba-width="120px">
+        <a-form-item label="姓名">
+          <a-input v-model:value="form.name"></a-input>
+        </a-form-item>
+        <a-form-item label="表格">
+          <div style="min-height: 300px">
+            <FeatureLocalImportValueInput v-model="form.data" />
+          </div>
+        </a-form-item>
+        <a-form-item>
+          <a-button @click="submit">提交</a-button>
+        </a-form-item>
+      </a-form>
+    </div>
+  </fs-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, reactive } from "vue";
+import { message } from "ant-design-vue";
+import FeatureLocalImportValueInput from "./local.vue";
+export default defineComponent({
+  name: "FeatureLocalImport",
+  components: { FeatureLocalImportValueInput },
+  setup() {
+    const form = reactive({
+      name: "test",
+      data: [{ name: "初始数据" }]
+    });
+
+    function submit() {
+      message.info("submit:" + JSON.stringify(form));
+      console.log("submit:", form);
+    }
+    return {
+      form,
+      submit
+    };
+  }
+});
+</script>
@@ -0,0 +1,57 @@
+<template>
+  <fs-crud ref="crudRef" v-bind="crudBinding" />
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, watch } from "vue";
+import createCrudOptions from "./crud";
+import { useFs } from "@fast-crud/fast-crud";
+
+export default defineComponent({
+  name: "FeatureLocalImportValueInput",
+  props: {
+    modelValue: {
+      default() {
+        return [];
+      }
+    }
+  },
+  setup(props) {
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+
+    onMounted(() => {
+      //启用行编辑模式
+      crudExpose.editable.enable({ mode: "row" });
+    });
+
+    //通过导出modelValue, 可以导出成为一个input组件
+    watch(
+      () => {
+        return props.modelValue;
+      },
+      (value = []) => {
+        crudBinding.value.data = value;
+      },
+      {
+        immediate: true
+      }
+    );
+
+    // 通过crudBinding.value.data 可以获取表格实时数据
+    function showData() {
+      console.log("data:", crudBinding.value.data);
+    }
+
+    return {
+      crudBinding,
+      crudRef,
+      showData
+    };
+  }
+});
+</script>
+<style lang="less">
+.fs-crud-container.compact .el-table--border {
+  border-left: 1px solid #eee;
+}
+</style>