🔱: [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: 导入支持

packages/ui/certd-client/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.14.4](https://github.com/fast-crud/fast-crud/compare/v1.14.3...v1.14.4) (2023-07-02)
+
+**Note:** Version bump only for package @fast-crud/fs-admin-antdv
+
+## [1.14.3](https://github.com/fast-crud/fast-crud/compare/v1.14.2...v1.14.3) (2023-07-02)
+
+**Note:** Version bump only for package @fast-crud/fs-admin-antdv
+
+## [1.14.2](https://github.com/fast-crud/fast-crud/compare/v1.14.1...v1.14.2) (2023-07-02)
+
+### Bug Fixes
+
+* 修复多选导出csv，导致表格错位的bug ([4e0bf5b](https://github.com/fast-crud/fast-crud/commit/4e0bf5bae3bd39fd1654c5cf10991039eacf1acc))
+* 修复某些情况下fs-icon spin失效的bug ([2499a33](https://github.com/fast-crud/fast-crud/commit/2499a338def7436356c91a9b547e570c4204286d))
+* 修复行编辑模式下，render、conditionalRender无效的bug ([403fedc](https://github.com/fast-crud/fast-crud/commit/403fedc6e22817e33a1f4ac316a016e570127aa8))
+
+### Performance Improvements
+
+* 导出重构 ([e99dc7b](https://github.com/fast-crud/fast-crud/commit/e99dc7bb6b24d4456fc524a04e8787e16b07511e))
+* export 功能 ([2accdba](https://github.com/fast-crud/fast-crud/commit/2accdba5d087c01a87c6fd20b98c6510d0038f9d))
+
 ## [1.14.1](https://github.com/fast-crud/fast-crud/compare/v1.14.0...v1.14.1) (2023-06-16)
 
 **Note:** Version bump only for package @fast-crud/fs-admin-antdv

packages/ui/certd-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fast-crud/fs-admin-antdv",
-  "version": "1.14.1",
+  "version": "1.14.4",
   "private": true,
   "scripts": {
     "dev": "vite",
@@ -25,10 +25,10 @@
     "@ant-design/icons-vue": "^6.1.0",
     "@aws-sdk/client-s3": "^3.292.0",
     "@aws-sdk/s3-request-presigner": "^3.292.0",
-    "@fast-crud/fast-crud": "^1.14.1",
+    "@fast-crud/fast-crud": "^1.14.4",
-    "@fast-crud/fast-extends": "^1.14.1",
+    "@fast-crud/fast-extends": "^1.14.4",
-    "@fast-crud/ui-antdv": "^1.14.1",
+    "@fast-crud/ui-antdv": "^1.14.4",
-    "@fast-crud/ui-interface": "^1.14.1",
+    "@fast-crud/ui-interface": "^1.14.4",
     "@iconify/iconify": "^3.1.0",
     "@iconify/json": "^2.2.35",
     "@purge-icons/generated": "^0.9.0",

packages/ui/certd-client/public/template-import.csv

@@ -0,0 +1,6 @@
+name,mobile
+张三,18603040102
+李四,18603040103
+王五,18603040104
+赵六,18603040105
+田七,18603040106

packages/ui/certd-client/src/router/source/modules/crud.ts

@@ -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",

packages/ui/certd-client/src/views/crud/feature/local-import/crud.tsx

@@ -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: "联系人手机号码"
+        }
+      }
+    }
+  };
+}

packages/ui/certd-client/src/views/crud/feature/local-import/index.vue

@@ -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>

packages/ui/certd-client/src/views/crud/feature/local-import/local.vue

@@ -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>