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

perf: 完善文档，完善部分types
perf: 优化d.ts类型
perf: 日期增加week、month、year、quarter类型
feat: resetCrudOptions 示例
feat: tabs快捷查询组件
fix: 行编辑支持多级表头

https://github.com/fast-crud/fast-crud/issues/143
perf: antdv 增加自定义表头示例

https://github.com/fast-crud/fast-crud/issues/141
perf: 表单下方按钮支持context

https://github.com/fast-crud/fast-crud/issues/142

packages/ui/certd-client/src/plugin/fast-crud/index.tsx

@@ -1,20 +1,21 @@
 import { request, requestForMock } from "/src/api/service";
 import "/src/mock";
-import { FastCrud, UseCrudProps, useTypes, setLogger, useColumns, ColumnCompositionProps, MergeColumnPlugin, CrudOptions } from "@fast-crud/fast-crud";
+import { FastCrud, UseCrudProps, useTypes, setLogger, useColumns, ColumnCompositionProps, MergeColumnPlugin, CrudOptions, TransformQuery, PageQuery, UserPageQuery, UserPageRes, PageRes } from "@fast-crud/fast-crud";
 import "@fast-crud/fast-crud/dist/style.css";
 import { FsExtendsUploader, FsExtendsEditor, FsExtendsJson, FsExtendsCopyable, FsExtendsTime } from "@fast-crud/fast-extends";
 import "@fast-crud/fast-extends/dist/style.css";
 import UiAntdv from "@fast-crud/ui-antdv";
 import _ from "lodash-es";
 import { useCrudPermission } from "../permission";
+import { TransformResProps } from "@fast-crud/fast-crud/src";
 
-function install(app, options: any = {}) {
+function install(app: any, options: any = {}) {
   app.use(UiAntdv);
   //设置日志级别
   setLogger({ level: "debug" });
   app.use(FastCrud, {
     i18n: options.i18n,
-    async dictRequest({ url }) {
+    async dictRequest({ url }: any) {
       if (url && url.startsWith("/mock")) {
         //如果是crud开头的dict请求视为mock
         return await requestForMock({ url, method: "post" });
@@ -25,14 +26,16 @@ function install(app, options: any = {}) {
      * useCrud时会被执行
      * @param context，useCrud的参数
      */
-    commonOptions(context: UseCrudProps) {
-      const crudBinding = context.expose?.crudBinding;
+    commonOptions(context: UseCrudProps): CrudOptions {
+      const crudBinding = context.crudExpose?.crudBinding;
       const opts: CrudOptions = {
         table: {
           size: "small",
           pagination: false,
-          onResizeColumn: (w, col) => {
-            crudBinding.value.table.columnsMap[col.key].width = w;
+          onResizeColumn: (w: number, col: any) => {
+            if (crudBinding.value?.table?.columnsMap && crudBinding.value?.table?.columnsMap[col.key]) {
+              crudBinding.value.table.columnsMap[col.key].width = w;
+            }
           }
         },
         rowHandle: {
@@ -48,7 +51,7 @@ function install(app, options: any = {}) {
           }
         },
         request: {
-          transformQuery: ({ page, form, sort }) => {
+          transformQuery: ({ page, form, sort }: PageQuery): UserPageQuery => {
             const limit = page.pageSize;
             const currentPage = page.currentPage ?? 1;
             const offset = limit * (currentPage - 1);
@@ -64,7 +67,7 @@ function install(app, options: any = {}) {
               sort
             };
           },
-          transformRes: ({ res }) => {
+          transformRes: ({ res }: TransformResProps): PageRes => {
             const pageSize = res.limit;
             let currentPage = res.offset / pageSize;
             if (res.offset % pageSize === 0) {
@@ -104,23 +107,22 @@ function install(app, options: any = {}) {
       region: "ap-guangzhou",
       secretId: "", //
       secretKey: "", // 传了secretKey 和secretId 代表使用本地签名模式（不安全，生产环境不推荐）
-      getAuthorization(custom) {
+      async getAuthorization(custom: any) {
         // 不传secretKey代表使用临时签名模式,此时此参数必传（安全，生产环境推荐）
-        return request({
+        const ret = request({
           url: "http://www.docmirror.cn:7070/api/upload/cos/getAuthorization",
           method: "get"
-        }).then((ret) => {
-          // 返回结构如下
-          // ret.data:{
-          //   TmpSecretId,
-          //   TmpSecretKey,
-          //   XCosSecurityToken,
-          //   ExpiredTime, // SDK 在 ExpiredTime 时间前，不会再次调用 getAuthorization
-          // }
-          return ret;
         });
+        // 返回结构要求如下
+        // ret.data:{
+        //   TmpSecretId,
+        //   TmpSecretKey,
+        //   XCosSecurityToken,
+        //   ExpiredTime, // SDK 在 ExpiredTime 时间前，不会再次调用 getAuthorization
+        // }
+        return ret;
       },
-      successHandle(ret) {
+      successHandle(ret: any) {
         // 上传完成后可以在此处处理结果，修改url什么的
         console.log("success handle:", ret);
         return ret;
@@ -132,7 +134,7 @@ function install(app, options: any = {}) {
       region: "oss-cn-shenzhen",
       accessKeyId: "",
       accessKeySecret: "",
-      async getAuthorization(custom, context) {
+      async getAuthorization(custom: any, context: any) {
         // 不传accessKeySecret代表使用临时签名模式,此时此参数必传（安全，生产环境推荐）
         const ret = await request({
           url: "http://www.docmirror.cn:7070/api/upload/alioss/getAuthorization",
@@ -145,7 +147,7 @@ function install(app, options: any = {}) {
         // sdk配置
         secure: true // 默认为非https上传,为了安全，设置为true
       },
-      successHandle(ret) {
+      successHandle(ret: any) {
         // 上传完成后可以在此处处理结果，修改url什么的
         console.log("success handle:", ret);
         return ret;
@@ -153,14 +155,14 @@ function install(app, options: any = {}) {
     },
     qiniu: {
       bucket: "d2p-demo",
-      async getToken(options) {
+      async getToken(options: any) {
         const ret = await request({
           url: "http://www.docmirror.cn:7070/api/upload/qiniu/getToken",
           method: "get"
         });
         return ret; // {token:xxx,expires:xxx}
       },
-      successHandle(ret) {
+      successHandle(ret: any) {
         // 上传完成后可以在此处处理结果，修改url什么的
         console.log("success handle:", ret);
         return ret;
@@ -171,7 +173,7 @@ function install(app, options: any = {}) {
       action: "http://www.docmirror.cn:7070/api/upload/form/upload",
       name: "file",
       withCredentials: false,
-      uploadRequest: async ({ action, file, onProgress }) => {
+      uploadRequest: async ({ action, file, onProgress }: any) => {
         // @ts-ignore
         const data = new FormData();
         data.append("file", file);
@@ -183,12 +185,12 @@ function install(app, options: any = {}) {
           },
           timeout: 60000,
           data,
-          onUploadProgress: (p) => {
+          onUploadProgress: (p: any) => {
             onProgress({ percent: Math.round((p.loaded / p.total) * 100) });
           }
         });
       },
-      successHandle(ret) {
+      successHandle(ret: any) {
         // 上传完成后的结果处理， 此处应返回格式为{url:xxx}
         return {
           url: "http://www.docmirror.cn:7070" + ret,
@@ -214,7 +216,7 @@ function install(app, options: any = {}) {
       //如果与官方字段类型同名，将会覆盖官方的字段类型
       form: { component: { name: "a-date-picker" } },
       column: { component: { name: "fs-date-format", format: "YYYY-MM-DD" } },
-      valueBuilder(context) {
+      valueBuilder(context: any) {
         console.log("time2,valueBuilder", context);
       }
     }

packages/ui/certd-client/src/plugin/iconfont/index.ts

@@ -1 +1 @@
-import "./iconfont.js"
+import "./iconfont.js";

packages/ui/certd-client/src/plugin/index.ts

@@ -2,7 +2,7 @@ import "./iconify";
 import "./iconfont";
 import FastCrud from "./fast-crud";
 import permission from "./permission";
-function install(app, options: any = {}) {
+function install(app: any, options: any = {}) {
   app.use(FastCrud, options);
   app.use(permission);
 }

packages/ui/certd-client/src/plugin/permission/directive/index.ts

@@ -1,9 +1,11 @@
-import permission from "./permission";
+import permission from "./permission.js";
 import permissionUtil from "../util.permission";
-const install = function (app) {
+const install = function (app: any) {
   app.directive("permission", permission);
   app.config.globalProperties.$hasPermissions = permissionUtil.hasPermissions;
 };
 
-permission.install = install;
-export default permission;
+export default {
+  install,
+  ...permission
+};

packages/ui/certd-client/src/plugin/permission/directive/permission.ts

@@ -1,6 +1,6 @@
 import permissionUtil from "../util.permission";
 export default {
-  mounted(el, binding, vnode) {
+  mounted(el: any, binding: any, vnode: any) {
     const { value } = binding;
     const hasPermission = permissionUtil.hasPermissions(value);
 

packages/ui/certd-client/src/plugin/permission/index.ts

@@ -1,4 +1,4 @@
-import permissionDirective from "./directive/index";
+import permissionDirective from "./directive/index.js";
 import { registerRouterHook } from "./hook";
 import util from "./util.permission";
 export * from "./use-crud-permission";
@@ -11,7 +11,7 @@ export function usePermission() {
 }
 
 export default {
-  install(app) {
+  install(app: any) {
     // 开启权限模块
     // 注册v-permission指令, 用于控制按钮权限
     app.use(permissionDirective);

packages/ui/certd-client/src/plugin/permission/store.permission.ts

@@ -21,7 +21,7 @@ interface PermissionState {
  * @param permissionList
  * @returns {*}
  */
-function formatPermissions(menuTree: Array<any>, permissionList = []) {
+function formatPermissions(menuTree: Array<any>, permissionList: any[] = []) {
   if (menuTree == null) {
     menuTree = [];
   }
@@ -44,17 +44,19 @@ export const usePermissionStore = defineStore({
     inited: false
   }),
   getters: {
+    // @ts-ignore
     getPermissions() {
       // @ts-ignore
       return this.permissions;
     },
+    // @ts-ignore
     isInited() {
       // @ts-ignore
       return this.inited;
     }
   },
   actions: {
-    init({ permissions }) {
+    init({ permissions }: any) {
       this.permissions = permissions;
       this.inited = true;
     },
@@ -62,7 +64,7 @@ export const usePermissionStore = defineStore({
       this.permissions = [];
       this.inited = false;
     },
-    resolve(resourceTree) {
+    resolve(resourceTree: any) {
       const permissions = formatPermissions(resourceTree);
       this.init({ permissions });
 

packages/ui/certd-client/src/plugin/permission/use-crud-permission.ts

@@ -1,17 +1,25 @@
 import { usePermission } from "/@/plugin/permission";
 import _ from "lodash-es";
 
+export type UseCrudPermissionProps = {
+  permission:
+    | string
+    | {
+        prefix: string;
+        [key: string]: any;
+      };
+};
 /**
  * 设置按钮动作权限
  * @param permission {prefix,extra}
  */
-export function useCrudPermission({ permission }) {
+export function useCrudPermission({ permission }: UseCrudPermissionProps) {
   const { hasPermissions } = usePermission();
 
   const prefix = permission instanceof Object ? permission.prefix : permission;
 
   //根据权限显示按钮
-  function hasActionPermission(action) {
+  function hasActionPermission(action: string) {
     if (!prefix) {
       return true;
     }
@@ -50,7 +58,7 @@ export function useCrudPermission({ permission }) {
     );
   }
 
-  function merge(userOptions) {
+  function merge(userOptions: any) {
     const permissionOptions = buildCrudPermission();
     _.merge(permissionOptions, userOptions);
     return permissionOptions;

packages/ui/certd-client/src/plugin/permission/util.permission.ts

@@ -14,11 +14,11 @@ const util = {
     }
     const permissionStore = usePermissionStore();
     const userPermissionList = permissionStore.getPermissions;
-    return userPermissionList.some((permission) => {
+    return userPermissionList.some((permission: any) => {
       return need.includes(permission);
     });
   },
-  requirePermissions: (value) => {
+  requirePermissions: (value: any) => {
     if (!util.hasPermissions(value)) {
       message.error("对不起，您没有权限执行此操作");
       throw new NoPermissionError();