plain-design 1.0.0-beta.11 → 1.0.0-beta.110

package/src/packages/components/VirtualTable/index.tsx

@@ -1,11 +1,11 @@
-import {computed, designComponent, getComponentCls, PropType, useClasses, useRefs, useStyles} from "plain-design-composition";
-import {PlainObject} from "plain-utils/utils/event";
+import {computed, designComponent, getComponentCls, PropType, useClasses, useModel, useRefs, useStyles} from "@peryl/react-compose";
+import {PlainObject} from "@peryl/utils/event";
 import {Scroll} from "../Scroll";
 import {useVirtualList} from "../VirtualList/useVirtualList";
-import {unit} from "plain-utils/string/unit";
+import {unit} from "@peryl/utils/unit";
 import './virtual-table.scss';
 import i18n from "../i18n";
-import {doNothing} from "../../utils/doNothing";
+import {doNothing} from "@peryl/utils/doNothing";
 import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
 
 export const VirtualTable = designComponent({
@@ -25,14 +25,18 @@ export const VirtualTable = designComponent({
   inheritPropsType: HTMLDivElement,
   emits: {
     onScroll: (e: Event) => true,
-    onPageIndexChange: (data: { pageIndex: number, start: number }) => true,
+    onPageIndexChange: (data: { pageIndex: number, startIndex: number }) => true,
+    onUpdateData: (data: any[]) => true,
   },
   slots: ['colgroup', 'head', 'headColgroup'],
   scopeSlots: {
-    default: (scope: { item: any, index: number, virtualIndex: number }) => {},
+    default: (scope: { item: any, index: number, vIndex: number, vid: string }) => {
+    },
   },
   setup({ props, slots, scopeSlots, event: { emit } }) {
 
+    const dataModel = useModel(() => props.data, emit.onUpdateData);
+
     const { refs, onRef } = useRefs({
       scroll: Scroll,
       content: HTMLDivElement,
@@ -42,12 +46,14 @@ export const VirtualTable = designComponent({
     });
 
     const headHeight = computed(() => {
-      if (!props.headData || props.headData.length === 0) {return null;}
+      if (!props.headData || props.headData.length === 0) {
+        return null;
+      }
       return props.headData.length * props.headSize;
     });
 
     /*虚拟滚动时让出顶部距离显示表头*/
-    const { virtual } = useVirtualList({ props, refs: refs as any, emit, transform: false });
+    const { virtual } = useVirtualList({ dataModel, props, refs: refs as any, emit, transform: false });
 
     /*---------------------------------------computed-------------------------------------------*/
     const styles = useStyles(style => {
@@ -70,12 +76,14 @@ export const VirtualTable = designComponent({
     const strutStyles = useStyles(style => {
       Object.assign(style, virtual.strutStyles.value);
       !!props.width && (style.width = unit(props.width));
-      style.minHeight = bodyTableWrapperStyles.value.minHeight
+      style.minHeight = bodyTableWrapperStyles.value.minHeight;
     });
 
     const contentStyles = useStyles(style => {
       Object.assign(style, virtual.contentStyles.value);
-      if (!props.disabled) {style.paddingBottom = (summaryTableStyles.value as any).height;}
+      if (!props.disabled) {
+        style.paddingBottom = (summaryTableStyles.value as any).height;
+      }
     });
 
     const bodyTableWrapperStyles = useStyles(style => {
@@ -124,20 +132,25 @@ export const VirtualTable = designComponent({
     };
 
     useWatchAutoClear(() => !!refs.head, flag => {
-      if (!flag) {return doNothing;}
+      if (!flag) {
+        return doNothing;
+      }
       refs.head?.addEventListener('wheel', handler.onWheelHead);
       return () => refs.head?.removeEventListener('wheel', handler.onWheelHead);
     });
 
     useWatchAutoClear(() => !!refs.body, flag => {
-      if (!flag) {return doNothing;}
+      if (!flag) {
+        return doNothing;
+      }
       refs.body?.addEventListener('wheel', handler.onWheelBody);
       return () => refs.head?.removeEventListener('wheel', handler.onWheelBody);
     });
 
     return {
       refer: {
-        refs
+        refs,
+        virtual,
       },
       render: () => {
         const { list } = virtual.offsetData.value;
@@ -149,7 +162,7 @@ export const VirtualTable = designComponent({
               onScroll={handler.onScroll}
               scrollX
               className={virtual.classes.value}
-              horizontalScrollbarTooltip={i18n('table.tableScrollTips').d('推荐【表头使用鼠标滚轮】，或者【表体Alt键+鼠标滚轮】横向滚动')}
+              horizontalScrollbarTooltip={i18n.$it('table.tableScrollTips').d('推荐【表头使用鼠标滚轮】，或者【表体Alt键+鼠标滚轮】横向滚动')}
               disableTransitionWhenScroll={!props.disabled}
             >
               {{
@@ -157,7 +170,7 @@ export const VirtualTable = designComponent({
                   <>
                     {!!headHeight.value && (
                       <div className="virtual-table-head-table-wrapper" ref={onRef.head}>
-                        <table className="virtual-table-head-table" style={headTableStyles.value} {...PublicTableAttrs}>
+                        <table className="virtual-table-head-table" style={headTableStyles.value} {...PublicTableAttrs} data-virtual-head>
                           {slots.headColgroup()}
                           <thead>{slots.head()}</thead>
                         </table>
@@ -168,16 +181,16 @@ export const VirtualTable = designComponent({
                         <div className="virtual-table-body-table-wrapper" ref={onRef.body} style={bodyTableWrapperStyles.value}>
                           <table className="virtual-table-body-table" {...{ ...PublicTableAttrs, style: tableStyles.value }}>
                             {slots.colgroup()}
-                            <tbody>{list.map((node, virtualIndex) => scopeSlots.default({ ...node, virtualIndex }))}</tbody>
+                            <tbody>{list.map((item, vIndex) => scopeSlots.default({ ...item, vIndex, vid: item.id }))}</tbody>
                           </table>
                         </div>
                       </div>
                     </div>
                     {!!props.summaryData?.length && (
                       <div className="virtual-table-summary-table-wrapper" ref={onRef.summary}>
-                        <table className="virtual-table-summary-table" style={summaryTableStyles.value}{...PublicTableAttrs}>
+                        <table className="virtual-table-summary-table" style={summaryTableStyles.value}{...PublicTableAttrs} data-virtual-foot>
                           {slots.colgroup()}
-                          <tbody>{!props.summaryData ? null : props.summaryData.map((item, index) => scopeSlots.default({ item, index, virtualIndex: index }))}</tbody>
+                          <tbody>{!props.summaryData ? null : props.summaryData.map((item, index) => scopeSlots.default({ item, index, vIndex: index, vid: `__smy__${index}` }))}</tbody>
                         </table>
                       </div>
                     )}

package/src/packages/components/VirtualTable/virtual-table.scss

@@ -93,10 +93,9 @@ $scrollbarSize: 12px;
       }
 
       &.plt-row-checked {
-        border-bottom-color: plv(primary-light-2);
-
         td {
           background-color: plv(primary-light-1);
+          border-bottom-color: plv(primary-light-2);
         }
       }
     }
@@ -155,7 +154,7 @@ $scrollbarSize: 12px;
 
         box-sizing: border-box;
         position: relative;
-        padding: 1px plv(input-padding-x);
+        padding: 1px 11px;
 
         .cell-fit-height {
           height: 100%;

package/src/packages/components/createAutoScrollManager/index.tsx

@@ -0,0 +1,41 @@
+import {PlainScroll} from "../Scroll";
+
+export function createAutoScrollManager(getScroll: () => PlainScroll | null | undefined) {
+  const _state = { value: null as null | 'top' | 'bottom' | 'left' | 'right' };
+
+  const handler = {
+    top: () => {
+      getScroll()?.methods.autoScrollTop();
+    },
+    bottom: () => {
+      getScroll()?.methods.autoScrollBottom();
+    },
+    left: () => {
+      getScroll()?.methods.autoScrollLeft();
+    },
+    right: () => {
+      getScroll()?.methods.autoScrollRight();
+    },
+    stop: () => {
+      getScroll()?.methods.stopAutoScroll();
+    },
+  };
+
+  const set = (val: null | 'top' | 'bottom' | 'left' | 'right') => {
+    const newVal = val;
+    const oldVal = _state.value;
+    if (newVal == oldVal) {
+      return;
+    }
+    _state.value = val;
+
+    if (!oldVal && !!newVal) {
+      handler[newVal]();
+    } else {
+      handler.stop();
+    }
+  };
+  const get = () => _state.value;
+  const stop = () => getScroll()?.methods.stopAutoScroll();
+  return { get, set, stop };
+}

package/src/packages/components/createHttp/index.tsx

@@ -1,12 +1,15 @@
 import Axios from "axios";
 import {iHttpRequestConfig, iPlainResponseDataType} from "./http.utils";
+import {AutoLoadingObserver} from "../AutoLoadingObserver";
 
 export function createHttp(defaultRequestConfig: iHttpRequestConfig<iPlainResponseDataType>) {
 
   const axios = Axios.create(defaultRequestConfig);
 
   async function request<T>(requestConfig: iHttpRequestConfig<iPlainResponseDataType & T>): Promise<iPlainResponseDataType & T> {
-    return await axios.request(requestConfig);
+    let promise = axios.request(requestConfig);
+    AutoLoadingObserver.subject(promise);
+    return promise as any;
   }
 
   return {

package/src/packages/components/createPlainAddressService/index.tsx

@@ -1,16 +1,22 @@
 import {createAddressService} from "../$address/createAddressService";
 import {eAddressTypeEnum, iAddressSyncMeta} from "../$address/address.utils";
 import {iHttp} from "../createHttp";
-import {delay} from "plain-utils/utils/delay";
-import {toArray} from "plain-utils/utils/toArray";
+import {delay} from "@peryl/utils/delay";
+import {toArray} from "@peryl/utils/toArray";
 
 export function createPlainAddressService(
   {
     http,
     getAddress,
+    getAddressByCodes,
+    getAddressByParentCodes,
+    getAddressByLabel,
   }: {
     http: iHttp,
     getAddress: () => Promise<iAddressSyncMeta[]>,
+    getAddressByCodes?: (codes: string[]) => Promise<iAddressSyncMeta[]>
+    getAddressByParentCodes?: (codes: string[]) => Promise<iAddressSyncMeta[]>
+    getAddressByLabel?: (label: string, type?: typeof eAddressTypeEnum.TYPE) => Promise<iAddressSyncMeta[]>
   }
 ) {
   return createAddressService({
@@ -32,7 +38,7 @@ export function createPlainAddressService(
       return findAddressList(0);
     },*/
     getAddress,
-    getAddressByCodes: async (codes) => {
+    getAddressByCodes: getAddressByCodes || (async (codes) => {
       const data = await http.post<{ list: iPlainAddressData[] }>('/address/list', {
         all: true,
         orders: { field: 'code', desc: false },
@@ -44,8 +50,8 @@ export function createPlainAddressService(
         type: (Deep2Type)[i.deep as 1],
         parentCode: i.parentCode,
       }));
-    },
-    getAddressByParentCodes: async (codes) => {
+    }),
+    getAddressByParentCodes: getAddressByParentCodes || (async (codes) => {
       const nowTime = Date.now();
       const data = await http.post<{ list: iPlainAddressData[] }>('/address/list', {
         all: true,
@@ -62,8 +68,8 @@ export function createPlainAddressService(
         type: (Deep2Type)[i.deep as 1],
         parentCode: i.parentCode,
       }));
-    },
-    getAddressByLabel: async (label: string, type?: typeof eAddressTypeEnum.TYPE) => {
+    }),
+    getAddressByLabel: getAddressByLabel || (async (label: string, type?: typeof eAddressTypeEnum.TYPE) => {
       const data = await http.post<{ list: iPlainAddressData[] }>('/address/list', {
         all: true,
         orders: { field: 'code', desc: false },
@@ -78,7 +84,7 @@ export function createPlainAddressService(
         type: (Deep2Type)[i.deep as 1],
         parentCode: i.parentCode,
       }));
-    },
+    }),
   });
 }
 

package/src/packages/components/createRequestInterceptor/index.ts

@@ -0,0 +1,139 @@
+import {pathJoin} from "@peryl/utils/pathJoin";
+import {PlainObject} from "@peryl/utils/event";
+import qs from "qs";
+
+/**
+ * 拦截ajax请求，模拟数据mock
+ * @author  韦胜健
+ * @date    2024/5/6 14:34
+ */
+export function createRequestInterceptor({ baseURL }: { baseURL?: string }) {
+
+  baseURL = pathJoin(baseURL, '/');
+
+  const requestInterceptors: iRequestInterceptor[] = [];
+
+  /*拦截send方法，如果检测到url需要mock，则返回mock结果*/
+  const _send = XMLHttpRequest.prototype.send;
+  /*在调用xhr.open的时候保存url，因为在send的时候xhr.responseURL是空的*/
+  const _open = XMLHttpRequest.prototype.open;
+
+  // @ts-ignore
+  XMLHttpRequest.prototype.open = function (method, url, async, username, password) {
+    // @ts-ignore
+    this._openData = { method, url, async, username, password };
+    return _open.apply(this, [method, url, async, username, password]);
+  };
+
+  XMLHttpRequest.prototype.send = function (data: any) {
+    // @ts-ignore
+    const responseURL: string = this._openData.url;
+    // console.log('xhr send interceptor -> ', this, `(${responseURL})`, data);
+
+    /*计算请求url以及url参数，此时url为完整的可能带baseURL的完整路径*/
+    let { url: _url, param } = ((): { url: string, param: PlainObject | undefined } => {
+      const separatorIndex = responseURL.indexOf('?');
+      if (separatorIndex === -1) {
+        return {
+          url: responseURL,
+          param: undefined
+        };
+      } else {
+        return {
+          url: responseURL.slice(0, separatorIndex),
+          param: qs.parse(responseURL.slice(separatorIndex + 1))
+        };
+      }
+    })();
+
+    // console.log({ _url, param });
+
+    _url = pathJoin(_url, '/');
+
+    // console.log({ _url, param });
+
+    /*计算url相对于baseURL的相对路径，以及标识isMatchBaseURL，是否匹配baseURL*/
+    const { url, isMatchBaseURL } = ((): { url: string, isMatchBaseURL: boolean } => {
+      if (!baseURL) {
+        return { url: _url, isMatchBaseURL: false };
+      } else {
+        if (_url == baseURL) {
+          return { url: '/', isMatchBaseURL: true };
+        } else {
+          if (_url.indexOf(baseURL) === 0) {
+            return {
+              url: _url.slice(baseURL.length),
+              isMatchBaseURL: true,
+            };
+          } else {
+            return {
+              url: _url,
+              isMatchBaseURL: false,
+            };
+          }
+        }
+      }
+    })();
+
+    // console.log({ url, isMatchBaseURL });
+
+    /*判断本次请求是否需要mock*/
+    const requestInterceptor = requestInterceptors.find(i => {return typeof i.url === "string" ? i.url == url : i.url.test(url);});
+
+    if (!!requestInterceptor) {
+      if (typeof data === "string") {
+        try {
+          data = JSON.parse(data);
+        } catch (e) {
+          try {
+            data = qs.parse(data);
+          } catch (e) {
+            data = undefined;
+          }
+        }
+      }
+      Promise.resolve(requestInterceptor.handler({ url, isMatchBaseURL, param, data })).then((respData: any) => {
+        // @ts-ignore
+        // this.readyState = 4;
+        // @ts-ignore
+        // this.responseText = JSON.stringify(respData);
+        // @ts-ignore
+        Object.defineProperty(this, 'responseText', {
+          get(): any {
+            return respData;
+          }
+        });
+        // @ts-ignore
+        this.onloadend();
+      });
+    } else {
+      return _send.apply(this, [data]);
+    }
+  };
+
+  function intercept(url: iRequestInterceptor['url'], handler: iRequestInterceptor['handler']): () => void
+  function intercept(config: iRequestInterceptor): () => void
+  function intercept(config: iRequestInterceptor | iRequestInterceptor['url'], handler?: iRequestInterceptor["handler"]) {
+    const _config: iRequestInterceptor = typeof config === "string" || config instanceof RegExp ?
+      { url: config, handler: handler! } :
+      config;
+    requestInterceptors.push(_config);
+    return () => {
+      const index = requestInterceptors.indexOf(_config);
+      index > -1 && requestInterceptors.splice(index, 1);
+    };
+  };
+
+  return {
+    intercept,
+  }
+}
+
+export interface iRequestInterceptor {
+  /*要拦截的url，可以是字符串，也可以是正则表达式*/
+  url: string | RegExp,
+  /*自定义处理请求并且返回请求结果，支持异步*/
+  handler: (requestConfig: { url: string, isMatchBaseURL: boolean, param: PlainObject | undefined, data: PlainObject | undefined }) => PlainObject | Promise<PlainObject>
+}
+
+export default createRequestInterceptor;