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

chore: 1.16.11 chore: 1.16.10 chore: chore: chore: build: publish success perf: 组件独立使用示例 https://github.com/fast-crud/fast-crud/issues/226 perf: 导出增加 onlyShow 和 columnFilter配置 https://github.com/fast-crud/fast-crud/issues/229 Merge remote-tracking branch 'origin/main' perf: 表单labelWidth演示 https://github.com/fast-crud/fast-crud/issues/230 perf: 翻页后自动滚动到顶部 https://github.com/fast-crud/fast-crud/issues/232
2026-04-24 04:17:25 +08:00 · 2023-09-03 19:24:05 +00:00
parent ed08ef1604
commit 9788aefcc1
10 changed files with 194 additions and 19 deletions
@@ -1,7 +1,7 @@
 import { request, requestForMock } from "/src/api/service";
 import { ColumnCompositionProps, CrudOptions, FastCrud, PageQuery, PageRes, setLogger, TransformResProps, useColumns, UseCrudProps, UserPageQuery, useTypes, useUi } from "@fast-crud/fast-crud";
 import "@fast-crud/fast-crud/dist/style.css";
-import { FsExtendsCopyable, FsExtendsEditor, FsExtendsJson, FsExtendsTime, FsExtendsUploader } from "@fast-crud/fast-extends";
+import { FsExtendsCopyable, FsExtendsEditor, FsExtendsJson, FsExtendsTime, FsExtendsUploader, FsUploaderS3SignedUrlType } from "@fast-crud/fast-extends";
 import "@fast-crud/fast-extends/dist/style.css";
 import UiAntdv from "@fast-crud/ui-antdv";
 import _ from "lodash-es";
@@ -209,8 +209,8 @@ function install(app: any, options: any = {}) {
        }
      },
      //预签名配置，向后端获取上传的预签名连接
-      async getSignedUrl(bucket: string, key: string, options: any) {
-        return await GetSignedUrl(bucket, key, "put");
+      async getSignedUrl(bucket: string, key: string, options: any, type: FsUploaderS3SignedUrlType) {
+        return await GetSignedUrl(bucket, key, type);
      },
      successHandle(ret: any) {
        // 上传完成后可以在此处处理结果，修改url什么的
@@ -293,6 +293,12 @@ export const crudResources = [
            name: "ComponentJson",
            path: "/crud/component/json",
            component: "/crud/component/json/index.vue"
+          },
+          {
+            title: "组件独立使用",
+            name: "ComponentIndependent",
+            path: "/crud/component/independent",
+            component: "/crud/component/independent/index.vue"
          }
        ]
      },
@@ -0,0 +1,109 @@
+<template>
+  <fs-page>
+    <template #header>
+      <div class="title">独立使用组件</div>
+      <div class="more"></div>
+    </template>
+    <div style="padding: 20px; width: 50%">
+      <a-form ref="formRef" :model="form" :label-col="{ style: { width: '150px' } }">
+        <a-form-item label="上传">
+          <fs-file-uploader v-model="form.upload" :uploader="uploader" />
+        </a-form-item>
+        <a-form-item label="裁剪">
+          <fs-cropper-uploader v-model="form.avatar" v-bind="cropperUploader" />
+        </a-form-item>
+        <a-form-item label="可复制">
+          <fs-copyable v-model="form.copyable" />
+        </a-form-item>
+        <a-form-item label="人性化时间">
+          <fs-time-humanize v-model="form.humanizeTime" />
+          = {{ form.humanizeTime.format("YYYY-MM-DD HH:mm:ss") }}
+        </a-form-item>
+        <a-form-item label="dict-select">
+          <fs-dict-select v-model="form.select" :dict="dictRef" />
+        </a-form-item>
+        <a-form-item label="使用上传方法">
+          <input type="file" @change="fileUploaderChange" />
+          <a v-if="signedUrl" :href="signedUrl" target="_blank">下载</a>
+        </a-form-item>
+        <a-form-item>
+          <a-button @click="submit">提交</a-button>
+        </a-form-item>
+      </a-form>
+    </div>
+  </fs-page>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from "vue";
+import { message } from "ant-design-vue";
+import { dict, useUi } from "@fast-crud/fast-crud";
+import dayjs from "dayjs";
+import { FsUploaderS3, loadUploader, useUploader } from "@fast-crud/fast-extends";
+
+defineOptions({
+  name: "ComponentIndependent"
+});
+const form = reactive({
+  upload: [],
+  avatar: undefined,
+  copyable: "可复制的内容",
+  select: 1,
+  humanizeTime: dayjs(new Date().getTime() - 100000)
+});
+
+const uploader = ref({
+  type: "cos",
+  keepName: true
+});
+
+const cropperUploader = ref({
+  uploader: {
+    type: "cos",
+    keepName: true
+  },
+  cropper: {
+    viewMode: 1
+  },
+  async onReady(context: any) {
+    console.log("onReady", context);
+    context.zoom(-0.1);
+    context.zoom(-0.1);
+    context.zoom(-0.1);
+  }
+});
+
+const dictRef = dict({
+  data: [
+    { label: "选项1", value: 1 },
+    { label: "选项2", value: 2 },
+    { label: "选项3", value: 3 }
+  ]
+});
+
+const signedUrl = ref();
+async function fileUploaderChange(event: any) {
+  const file = event.target.files[0];
+  //异步加载上传组件
+  const s3Uploader = await loadUploader<FsUploaderS3>("s3");
+  const res = await s3Uploader.upload({
+    file,
+    fileName: file.name,
+    onProgress(progress: any) {
+      console.log("progress:" + progress.percent + "%");
+    }
+  });
+  const { ui } = useUi();
+  ui.message.info("upload success；" + JSON.stringify(res));
+  //构建下载地址
+  const { getConfig } = useUploader();
+  const s3Config = getConfig("s3");
+  const url = await s3Uploader.buildSignedUrl(s3Config, res.key, "get");
+  signedUrl.value = url;
+}
+
+function submit() {
+  message.info("submit:" + JSON.stringify(form));
+  console.log("submit:", form);
+}
+</script>
@@ -1,7 +1,7 @@
 import * as api from "./api";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-import { Modal } from "ant-design-vue";
 import dayjs from "dayjs";
+
 export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
    return await api.GetList(query);
@@ -44,6 +44,8 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
          },
          fileType: context.fileType, //导出类型为excel
          dataFrom: context.dataFrom, //search查询获取， local 当前页数据
+          //仅导出显示的列
+          onlyShow: true,
          searchParams: {
            //查询条件
            page: {
@@ -1,7 +1,9 @@
 import * as api from "./api";
 import { message } from "ant-design-vue";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, FormWrapperContext, ScopeContext, UserPageQuery, UserPageRes, utils } from "@fast-crud/fast-crud";
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+import { computed } from "vue";
+
+export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
    return await api.GetList(query);
  };
@@ -16,6 +18,7 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
  const addRequest = async ({ form }: AddReq) => {
    return await api.AddObj(form);
  };
+
  return {
    crudOptions: {
      request: {
@@ -25,6 +28,22 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
        delRequest
      },
      form: {
+        labelCol: {
+          //固定label宽度
+          span: null,
+          style: {
+            width: computed(() => {
+              return context.labelWidthRef.value + "px";
+            })
+          }
+        },
+        afterSubmit(context) {
+          // context.res 是add或update请求返回结果
+          if (context.form.id === 1) {
+            message.error("模拟保存失败，阻止弹窗关闭");
+            throw new Error("模拟失败，阻止弹窗关闭");
+          }
+        },
        wrapper: {
          buttons: {
            ok: {
@@ -34,9 +53,16 @@ export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOpti
              text: "自定义按钮",
              click: async (context: FormWrapperContext) => {
                utils.logger.info("btn context", context);
-                message.info({ content: "通过自定义按钮，触发保存" });
+                message.info("通过自定义按钮，触发保存");
                await context.submit();
-                message.info({ content: "保存成功" });
+                message.info("保存成功");
+              }
+            },
+            customClose: {
+              text: "自定义关闭",
+              color: "red",
+              click: async (context: FormWrapperContext) => {
+                context.close();
              }
            }
          }
@@ -1,21 +1,32 @@
 <template>
  <fs-page>
+    <template #header>
+      <div class="title">基本表单</div>
+    </template>
    <fs-crud ref="crudRef" v-bind="crudBinding">
-      <template #actionbar-right>
-        <a-alert class="ml-1" type="info" message="基本表单" />
+      <template #form-body-top>
+        <div style="display: flex">
+          <span>label宽度设置:</span>
+          <a-slider v-model:value="labelWidthRef" style="width: 200px" :min="40" :max="300"></a-slider>
+        </div>
      </template>
    </fs-crud>
  </fs-page>
 </template>

 <script lang="ts">
-import { defineComponent, ref, onMounted, nextTick } from "vue";
-import { useFs, UseFsProps } from "@fast-crud/fast-crud";
+import { defineComponent, onMounted, ref } from "vue";
+import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud.jsx";
+
 export default defineComponent({
  name: "FormBase",
  setup() {
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
+    const labelWidthRef = ref(100);
+    const context = {
+      labelWidthRef
+    };
+    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context });

    // 页面打开后获取列表数据
    onMounted(async () => {
@@ -24,7 +35,8 @@ export default defineComponent({

    return {
      crudBinding,
-      crudRef
+      crudRef,
+      labelWidthRef
    };
  }
 });
@@ -10,7 +10,8 @@ const list = [
    age: 15,
    password: "",
    status: "2",
-    url: "https://baidu.com"
+    url: "https://baidu.com",
+    renderLabel: "第一行编辑演示阻止表单提交"
  },
  {
    name: "张三",