@vue-ui-kit/ant 1.7.1 → 1.7.3

package/src/packages/store/renderStore.tsx

@@ -34,6 +34,7 @@ interface BtnOptions extends ButtonProps {
   dynamicClassName?: (p: RenderTableParams) => string;
   dropdowns?: BtnOptions[];
   clickEvt?: (p: RenderTableParams) => any;
+  hiddenIf?: (p: RenderTableParams) => boolean;
 }
 
 const antDefaultProps = {
@@ -220,121 +221,213 @@ const renderBtn = (btnOpt: BtnOptions, params: RenderTableParams) =>
   );
 const renders = {
   ...Object.fromEntries(Object.keys(componentsMap).map((name) => [name, renderBasic(name)])),
-  //简单按钮
+  // 简单按钮
   $button: {
-    renderItemContent(
-      { props = {}, events = {} }: RenderOptions,
-      { data, field }: RenderFormParams,
-      defaultHandler: {
-        [key: string]: (...args: any[]) => any;
-      },
-    ) {
+    renderItemContent({ props = {}, events = {} }: RenderOptions, {
+      data,
+      field,
+    }: RenderFormParams, defaultHandler: {
+      [key: string]: (...args: any[]) => any
+    }) {
       return (
         <Button
           {...omit(props, ['content'])}
           icon={props.icon ? <Icon icon={props.icon} /> : null}
           onClick={() => {
-            events.click?.({ data, field });
+            events.click?.({ data, field })
             if (props.htmlType === 'reset' && defaultHandler?.reset) {
-              defaultHandler.reset({ data, field });
+              if (props.beforeClick && isFunction(props.beforeClick)) {
+                props.beforeClick({ data, field }).then((res: void | Recordable) => {
+                  defaultHandler.reset(res ? { data: res, field } : { data, field })
+                })
+              }
+              else {
+                defaultHandler.reset({ data, field })
+              }
             }
           }}
         >
           {props.content}
+          {
+            props.suffix?.({ data, field }) ?? null
+          }
         </Button>
-      );
+      )
     },
-    renderDefault(
-      { props = {}, events = {} }: RenderOptions,
-      { row, field }: RenderTableParams,
-      defaultHandler: {
-        [key: string]: (...args: any[]) => any;
-      },
-    ) {
+    renderDefault({ props = {}, events = {} }: RenderOptions, {
+      row,
+      field,
+    }: RenderTableParams, defaultHandler: {
+      [key: string]: (...args: any[]) => any
+    }) {
       return (
         <Button
           {...omit(props, ['content'])}
           icon={props.icon ? <Icon icon={props.icon} /> : null}
           onClick={() => {
-            events.click?.({ row, field });
+            events.click?.({ row, field })
             if (props.htmlType === 'reset' && defaultHandler?.reset) {
-              defaultHandler.reset({ row, field });
+              if (props.beforeClick && isFunction(props.beforeClick)) {
+                defaultHandler?.setLoadings?.(true)
+                props.beforeClick({ row, field }).then((res: void | Recordable) => {
+                  defaultHandler.reset(res ? { row: res, field } : { row, field })
+                }).finally(() => {
+                  defaultHandler?.setLoadings?.(false)
+                })
+              }
+              else {
+                defaultHandler.reset({ row, field })
+              }
             }
             if (props.htmlType === 'pick' && defaultHandler?.pick) {
-              defaultHandler.pick({ row, field });
+              if (props.beforeClick && isFunction(props.beforeClick)) {
+                defaultHandler?.setLoadings?.(true)
+                props.beforeClick({ row, field }).then((res: void | Recordable) => {
+                  defaultHandler.pick(res ? { row: res, field } : { row, field })
+                }).finally(() => {
+                  defaultHandler?.setLoadings?.(false)
+                })
+              }
+              else {
+                defaultHandler.pick({ row, field })
+              }
             }
           }}
         >
           {props.content}
         </Button>
-      );
+      )
     },
   },
   // 简单按钮组
   $buttons: {
-    renderItemContent(
-      { props = {}, children = [] }: RenderOptions,
-      { data, field }: RenderFormParams,
-      defaultHandler: {
-        [key: string]: (...args: any[]) => any;
-      },
-    ) {
+    renderItemContent({ props = {}, children = [] }: RenderOptions, {
+      data,
+      field,
+    }: RenderFormParams, defaultHandler: {
+      [key: string]: (...args: any[]) => any
+    }) {
       return (
         <span class="align-gap-box w-fit">
-          {children.map((m) => (
-            <Button
-              {...omit(Object.assign(props, m.props), ['content'])}
-              icon={m.props.icon ? <Icon icon={m.props.icon} /> : null}
-              onClick={() => {
-                m.events?.click?.({ data, field });
-                if (m.props.htmlType === 'reset' && defaultHandler?.reset) {
-                  defaultHandler.reset({ data, field });
-                }
-              }}
-            >
-              {m.props.content}
-            </Button>
-          ))}
+          {
+            children.map((m) => {
+              return (
+                <Button
+                  {...omit(Object.assign({}, props, m.props), ['content'])}
+                  icon={m.props.icon ? <Icon icon={m.props.icon} /> : null}
+                  onClick={() => {
+                    m.events?.click?.({ data, field })
+                    if (m.props.htmlType === 'reset' && defaultHandler?.reset) {
+                      if (props.beforeClick && isFunction(props.beforeClick)) {
+                        props.beforeClick({ data, field }).then((res: void | Recordable) => {
+                          defaultHandler.reset(res ? { data: res, field } : { data, field })
+                        })
+                      }
+                      else {
+                        defaultHandler.reset({ data, field })
+                      }
+                    }
+                    if (m.props.htmlType === 'pick' && defaultHandler?.pick) {
+                      if (props.beforeClick && isFunction(props.beforeClick)) {
+                        props.beforeClick({ data, field }).then((res: void | Recordable) => {
+                          defaultHandler.pick(res ? { data: res, field } : { data, field })
+                        })
+                      }
+                      else {
+                        defaultHandler.pick({ data, field })
+                      }
+                    }
+                  }}
+                >
+                  {m.props.content}
+                </Button>
+              )
+            })
+          }
         </span>
-      );
+      )
     },
-    renderDefault(
-      { props = {}, children = [] }: RenderOptions,
-      { data, row, field }: RenderTableParams,
-    ) {
+    renderDefault({ props = {}, children = [] }: RenderOptions, {
+      data,
+      row,
+      field,
+    }: RenderTableParams, defaultHandler: {
+      [key: string]: (...args: any[]) => any
+    }) {
       return (
         <span class="align-gap-box w-fit">
-          {children.map((m) => (
-            <Button
-              {...omit(Object.assign(props, m.props), ['content'])}
-              icon={m.props.icon ? <Icon icon={m.props.icon} /> : null}
-              onClick={() => {
-                m.events?.click?.({ data, row, field });
-              }}
-            >
-              {m.props.content}
-            </Button>
-          ))}
+          {
+            children.filter(f => !f?.props?.hiddenIf?.({
+              data,
+              row,
+              field,
+            })).map(m => (
+              <Button
+                {...omit(Object.assign({}, props, m.props), ['content', 'hiddenIf'])}
+                icon={m.props.icon ? <Icon icon={m.props.icon} /> : null}
+                onClick={() => {
+                  m.events?.click?.({ data, row, field })
+                  if (m.props.htmlType === 'reset' && defaultHandler?.reset) {
+                    if (props.beforeClick && isFunction(props.beforeClick)) {
+                      defaultHandler?.setLoadings?.(true)
+                      props.beforeClick({ row, field }).then((res: void | Recordable) => {
+                        defaultHandler.reset(res ? { row: res, field } : { row, field })
+                      }).finally(() => {
+                        defaultHandler?.setLoadings?.(false)
+                      })
+                    }
+                    else {
+                      defaultHandler.reset({ row, field })
+                    }
+                  }
+                  if (m.props.htmlType === 'pick' && defaultHandler?.pick) {
+                    if (props.beforeClick && isFunction(props.beforeClick)) {
+                      defaultHandler?.setLoadings?.(true)
+                      props.beforeClick({ row, field }).then((res: void | Recordable) => {
+                        defaultHandler.pick(res ? { row: res, field } : { row, field })
+                      }).finally(() => {
+                        defaultHandler?.setLoadings?.(false)
+                      })
+                    }
+                    else {
+                      defaultHandler.pick({ row, field })
+                    }
+                  }
+                }}
+              >
+                {m.props.content}
+              </Button>
+            ))
+          }
         </span>
-      );
+      )
     },
   },
   ButtonTree: {
     renderDefault({ children = [], props = {} as Recordable }, params: RenderTableParams) {
       return (
         <span class={props.noGap ? 'align-no-gap-box' : 'align-gap-box'}>
-          {(children as BtnOptions[]).map((item) => renderBtn(item, params)) ?? []}
+          {(children as BtnOptions[])
+            .filter((f) => !f.hiddenIf?.(params))
+            .map((item) => renderBtn(item, params)) ?? []}
         </span>
       );
     },
   },
   $radio: {
-    renderItemContent({ props = {}, options }: RenderOptions, { data, field }: RenderFormParams) {
+    renderItemContent(
+      { props = {}, events = {}, options }: RenderOptions,
+      { data, field }: RenderFormParams,
+    ) {
       return valued(field) ? (
         <RadioGroup
           v-model:value={data[field!]}
           {...props}
           options={props.options ?? options ?? []}
+          disabled={!!props.disabled}
+          onChange={(...arg) => {
+            events.change?.({ data, field }, ...arg);
+          }}
         />
       ) : null;
     },
@@ -356,7 +449,7 @@ const renders = {
       return valued(field) ? (
         <AutoComplete
           v-model:value={data[field!]}
-          {...props}
+          {...Object.assign({}, { filterOption: defaultProps.autoComplete.filterOption }, props)}
           onChange={(...arg) => {
             events.change?.({ data, field }, ...arg);
           }}

package/src/packages/styles/index.scss

@@ -24,6 +24,12 @@
   padding-left: 2px;
   padding-right: 2px;
 }
+.pl-4x {
+  padding-left: 1em;
+}
+.pl-8 {
+  padding-left: 2em;
+}
 
 .h-0 {
   height: 0;