@vue-ui-kit/ant 1.7.4 → 1.8.2

package/src/packages/components/PFormGroup.vue

@@ -1,9 +1,10 @@
 <script lang="ts" generic="F = Recordable" setup name="PFormGroup">
-  import { computed, nextTick, PropType, ref, watchEffect } from 'vue';
+  import { computed, nextTick, PropType, ref, watch, watchEffect } from 'vue';
   import { PFormGroupProps, PFormBlockInstance } from '#/antProxy';
   import { MoreOutlined } from '@ant-design/icons-vue';
+  import type { Tabs } from 'ant-design-vue'
   import { Form } from 'ant-design-vue'
-  import { cloneDeep, toString, isFunction, omit, maxBy, debounce } from 'lodash-es';
+  import { clone, toString, isFunction, omit, max, debounce } from 'xe-utils';
   import PGroupBlock from '@/components/PGroupBlock.vue';
   import {
     Card as ACard,
@@ -19,25 +20,28 @@
   import { $warning } from '@/hooks/useMessage';
   
   const useForm = Form.useForm
+  const tabsRef = ref<InstanceType<typeof Tabs>>()
   const props = defineProps<PFormGroupProps<F>>();
+  const rootRef = ref<InstanceType<typeof ACard>>()
   const model = defineModel({
     type: Array as PropType<Partial<F & { __index: number }>[]>,
     default: () => [],
   });
   const activeKey = ref(0);
+  const error_indexes = ref<number[]>([])
   const blockInstance = ref<PFormBlockInstance[]>([]);
   const setActiveKey = (key: number) => {
     activeKey.value = key;
   };
   const maxLen = computed(() => props.max ?? Infinity);
   const handleAddItem = (idx: number) => {
-    const creator = props.creatItem ?? (() => Promise.resolve({} as Partial<F>));
+    const creator = props.createItem ?? (() => Promise.resolve({} as Partial<F>));
     creator({ list: model.value }).then((item) => {
       model.value = [
         ...model.value,
         {
           ...item,
-          __index: (maxBy(model.value, (m) => m.__index ?? -1)?.__index ?? -1) + 1,
+          __index: (max(model.value, (m) => m.__index ?? -1)?.__index ?? -1) + 1,
         } as Partial<F & { __index: number }>,
       ];
       activeKey.value = idx;
@@ -47,26 +51,34 @@
     { content: '复制', code: 'copy' },
     { content: '删除', code: 'delete' },
   ];
+  const getPopupContainer = () => rootRef.value?.$el ?? document.body
   // 实际是否强制渲染
   const fr = computed(() => {
     return props.forceRender || model.value.length <= 5
   })
+  const handleBlockFocus = (idx: number) => {
+    const target_index = model.value.find((f, index) => index === idx)?.__index
+    if (valued(target_index)) {
+      error_indexes.value = error_indexes.value.filter(f => f !== target_index)
+    }
+  }
   const handleTabChange = () => {
     nextTick().then(() => {
+      handleBlockFocus(activeKey.value)
       blockInstance.value[activeKey.value]?.$form?.validate()
     })
   }
-  watchEffect(() => {
-    if (!props.keepSerial) {
-      const unSortItems = model.value.filter((f) => !valued(f.__index));
-      if (unSortItems.length > 0) {
-        unSortItems.forEach((item) => {
-          // @ts-ignore
-          item.__index = (maxBy(model.value, (m) => m.__index ?? -1)?.__index ?? -1) + 1;
-        });
-      }
+  watch(() => model.value, () => {
+  if (!props.keepSerial) {
+    const unSortItems = model.value.filter(f => !valued(f.__index))
+    if (unSortItems.length > 0) {
+      unSortItems.forEach((item) => {
+        // @ts-ignore
+        item.__index = (max(model.value, m => m.__index ?? -1)?.__index ?? -1) + 1
+      })
     }
-  });
+  }
+}, { immediate: true })
   const handleMenu = ({ key }: MenuInfo, item: Partial<F & { __index: number }>, idx: number) => {
     if (props.menuHandler && isFunction(props.menuHandler)) {
       props.menuHandler({ code: toString(key), data: item, index: idx });
@@ -88,9 +100,9 @@
           }
           model.value = [
             ...model.value,
-            cloneDeep({
+            clone({
               ...omit(item, ['id', '__index']),
-              __index: (maxBy(model.value, (m) => m.__index ?? -1)?.__index ?? -1) + 1,
+              __index: (max(model.value, (m) => m.__index ?? -1)?.__index ?? -1) + 1,
             }),
           ] as Partial<F & { __index: number }>[];
           break;
@@ -105,26 +117,74 @@
       activeKey.value = model.value.length - 1;
     }
   });
+
+  const debounceHandleBlockFocus = debounce(handleBlockFocus, 50)
+  watchEffect(() => {
+  const errorKeys = model.value.map((m, idx) => error_indexes.value.includes(m.__index!) ? idx : undefined).filter(valued)
+  const rootDom = tabsRef.value?.$el
+  if (rootDom) {
+    const tabPanel = rootDom.querySelectorAll(':scope >.ant-tabs-nav>.ant-tabs-nav-wrap>.ant-tabs-nav-list>.ant-tabs-tab>.ant-tabs-tab-btn')
+    tabPanel.forEach((tab, idx) => {
+      if (errorKeys.includes(idx)) {
+        tab.classList.add('p-error-group-tab')
+      }
+      else {
+        tab.classList.remove('p-error-group-tab')
+      }
+    })
+  }
+})
   defineExpose({
     activeKey: computed(() => activeKey.value),
     setActiveKey,
     validateAll: () => {
-      return Promise.all(blockInstance.value.map((block, idx) =>
-        fr.value ? (block.$form?.validate() ?? Promise.resolve()) : (useForm(model.value[idx], props.getFormSetting(model.value[idx]).rules)?.validate() ?? Promise.resolve()),
-      ))
-    },
-    validate: (__index: number) => {
-      const index = model.value.findIndex(f => f.__index === __index)
-      return fr.value
+    const promiseList = fr.value
+      ? blockInstance.value.map(block => block.$form?.validate())
+      : model.value.map(m => useForm(m, props.getFormSetting(m).rules)?.validate() ?? Promise.resolve())
+    return Promise.allSettled(promiseList).then((results) => {
+      // 更新 error_indexes
+      error_indexes.value = results
+        .map((res, idx) => (res.status === 'rejected' && typeof model.value[idx]?.__index === 'number' ? model.value[idx].__index as number : undefined))
+        .filter((v): v is number => typeof v === 'number')
+      if (!props.lazyErrorMark && error_indexes.value.length) {
+        // 跳到第一个出错的tab
+        const firstErrorIndex = error_indexes.value[0]
+        const firstErrorTab = model.value.findIndex(f => f.__index === firstErrorIndex)
+        if (firstErrorTab !== -1) {
+          activeKey.value = firstErrorTab
+        }
+      }
+      // 判断是否有错误
+      if (error_indexes.value.length) {
+        return Promise.reject({ error_indexes: error_indexes.value, results })
+      }
+      return Promise.resolve(results)
+    })
+  },
+  validate: async (__index: number) => {
+    const index = model.value.findIndex(f => f.__index === __index)
+    try {
+      await (fr.value
         ? (blockInstance.value[index]?.$form?.validate() ?? Promise.resolve())
-        : (useForm(model.value[index], props.getFormSetting(model.value[index]).rules)?.validate() ?? Promise.resolve())
-    },
+        : (useForm(model.value[index], props.getFormSetting(model.value[index]).rules)?.validate() ?? Promise.resolve()))
+      // 校验通过，移除error_indexes中的__index
+      error_indexes.value = error_indexes.value.filter(f => f !== __index)
+      return Promise.resolve()
+    }
+    catch (e) {
+      // 校验失败，加入error_indexes
+      if (!error_indexes.value.includes(__index)) {
+        error_indexes.value = [...error_indexes.value, __index]
+      }
+      return Promise.reject(e)
+    }
+  },
   });
 </script>
 <template>
-  <a-card :title="title" size="small">
+  <a-card ref="rootRef" :title="title" size="small">
     <a-spin v-if="loading" class="w-full" />
-    <a-tabs v-else type="editable-card" v-model:activeKey="activeKey" hide-add @change="handleTabChange">
+    <a-tabs v-else ref="tabsRef" type="editable-card" v-model:activeKey="activeKey" hide-add @change="handleTabChange">
       <template #rightExtra>
         <slot name="rightExtra">
           <a-button
@@ -143,7 +203,7 @@
         :force-render="fr"
       >
         <template #closeIcon>
-          <a-dropdown v-if="editAble && itemMenus?.length">
+          <a-dropdown v-if="editAble && itemMenus?.length" :get-popup-container="getPopupContainer">
             <MoreOutlined />
             <template #overlay>
               <a-menu @click="(e) => debounceHandleMenu(e, item, idx)">
@@ -173,6 +233,8 @@
           :key="idx"
           :source="item"
           :get-form-setting="getFormSetting"
+          @focus.capture="debounceHandleBlockFocus(idx)"
+          @click.capture="debounceHandleBlockFocus(idx)"
         />
       </a-tab-pane>
     </a-tabs>

package/src/packages/components/PGrid.vue

@@ -11,32 +11,41 @@
     toRefs,
     onBeforeUnmount,
   } from 'vue';
-  import { debounce, get, isArray, isBoolean, isFunction, isObject, isString, merge, omit, toNumber } from 'lodash-es';
+  import { debounce, get, isArray, isBoolean, isFunction, isObject, isString, merge, omit, toNumber } from 'xe-utils';
   import { eachTree } from '@/utils/treeHelper';
   import { message as $message } from 'ant-design-vue';
-  import RenderAntItem from '@/components/RenderAntItem';
   import RenderTitleSlots from '@/components/RenderTitleSlots';
   import RenderDefaultSlots from '@/components/RenderDefaultSlots';
   import { v4 as uuid_v4 } from 'uuid';
-  import { isGoodValue, valued } from '@/utils/is';
-  import RenderItemSlots from '@/components/RenderItemSlots';
-  import { cleanCol, defaultItemResponsive, defaultLabelCol } from '@/utils/core';
+  import { isGoodValue } from '@/utils/is';
+  import PFormCol from '@/components/PFormCol.vue';
+  import { cleanCol, defaultLabelCol } from '@/utils/core';
+  import { getGridDefaults } from '@/utils/config';
   import Icon from '@/renders/Icon';
   import { $confirm } from '@/hooks/useMessage';
   import {
     Table as ATable,
     Button as AButton,
     Form as AForm,
-    FormItem as AFormItem,
     Row as ARow,
-    Col as ACol,
     Spin as ASpin,
-    Tooltip as ATooltip,
   } from 'ant-design-vue';
   import { TablePaginationConfig } from 'ant-design-vue/es/table/interface';
-  import { InfoCircleOutlined, DownOutlined } from '@ant-design/icons-vue';
+  import { DownOutlined } from '@ant-design/icons-vue';
 
   const props = defineProps<PGridProps<D, F>>();
+  
+  // 应用默认值
+  const gridDefaults = getGridDefaults();
+  const propsWithDefaults = computed(() => ({
+    ...props,
+    rowKey: props.rowKey ?? 'id',
+    scrollMode: props.scrollMode ?? 'inner',
+    align: props.align ?? gridDefaults.align ?? 'left',
+    lazyReset: props.lazyReset ?? gridDefaults.lazyReset ?? false,
+    fitHeight: props.fitHeight ?? gridDefaults.fitHeight ?? 170,
+  }));
+  
   const {
     formConfig,
     pageConfig,
@@ -63,7 +72,6 @@
       loading.toolbar = value;
     }
   };
-  const submitOnReset = true;
   const boxEl = ref<HTMLDivElement>();
   const pFormWrapper = ref<HTMLDivElement>();
   const renderHeight = ref(500);
@@ -118,9 +126,7 @@
   const tableEl = ref();
   const renderFormKey = ref(uuid_v4());
   const renderTableKey = ref(uuid_v4());
-  const refreshForm = () => {
-    renderFormKey.value = uuid_v4();
-  };
+ 
   const codeLoadings = reactive<Record<string, boolean>>(
     [
       ...(props.toolbarConfig?.buttons?.map((m) => m.code) ?? []).filter((f) => f),
@@ -139,7 +145,6 @@
   const refreshTable = () => {
     renderTableKey.value = uuid_v4();
   };
-  const debounceRefreshForm = debounce(refreshForm, 100);
   const debounceRefreshTable = debounce(refreshTable, 100);
   const slotDefaultColumns = computed(() => {
     const cols: ColumnProps<D>[] = [];
@@ -225,11 +230,18 @@
               obj[item.field] = undefined;
             }
           }
+          else if (item.field && item.slots) {
+            if (isGoodValue(item.slots.defaultValue)) {
+              obj[item.field] = item.slots.defaultValue
+            }
+            else {
+              obj[item.field] = undefined
+            }
+          }
         });
         queryFormData.value = obj;
       }
       emit('resetQuery');
-      refreshForm();
     }
 
     pagination.page = 1;
@@ -266,6 +278,8 @@
         };
   const enoughSpacing = ref(true);
   const reload = () => {
+    selectedCaches.value = []
+    selectedRowKeys.value = []
     return resetQueryFormData();
   };
   const resetPage = () => {
@@ -387,13 +401,6 @@
     resetPage();
   };
 
-  watch(
-    () => formConfig.value,
-    () => {
-      debounceRefreshForm();
-    },
-    { deep: true },
-  );
   watch(
     () => [columns.value, proxyConfig.value, toolbarConfig.value],
     () => {
@@ -413,7 +420,7 @@
     const showCountHeight = selectConfig.value?.showCount ? 22 : 0
     renderHeight.value =
       props.renderY ??
-      toNumber(ph.replace('px', '')) -(props.fitHeight ?? 170) -(!!props.toolbarConfig ? 30 : 0) -formHeight- showCountHeight;
+      toNumber(ph.replace('px', '')) -propsWithDefaults.value.fitHeight -(props.toolbarConfig ? 30 : 0) -formHeight- showCountHeight;
     enoughSpacing.value = toNumber(ph.replace('px', '')) > 600;
   };
   defineExpose({
@@ -428,6 +435,7 @@
     setBtnLoading,
     selectedRecords,
     $form: computed(() => formEl.value),
+    getFormData: () => queryFormData.value,
     setLoadings,
     resizeTable,
   });
@@ -457,7 +465,7 @@
   const passFields = ['align']
   const passDefaultColumnProps = (columns: ColumnProps<D>[]) => columns.map(c => ({
     ...passFields.reduce((prev, cur) => ({
-      [cur]: props[cur],
+      [cur]: propsWithDefaults.value[cur],
     }), {} as ColumnProps<D>),
     ...c,
   }))
@@ -484,64 +492,13 @@
             @submit="handleFormSubmit"
           >
             <a-row :gutter="[6, 12]">
-              <a-col
+              <p-form-col
                 v-for="(item, idx) in formConfig!.items"
-                :key="'_col_' + idx"
-                v-bind="item.col ?? (item.span ? { span: item.span } : defaultItemResponsive)"
-              >
-                <a-form-item
-                  :key="'_item_' + idx"
-                  :class="`p-content-align-${item.align ?? 'left'} ${item.forceRequired ? 'p-required' : ''}`"
-                  :label="item.title"
-                  :name="item.field"
-                  v-bind="
-                    omit(item, [
-                      'field',
-                      'title',
-                      'span',
-                      'col',
-                      'itemRender',
-                      'forceRequired',
-                      'tooltip',
-                    ])
-                  "
-                >
-                  <render-item-slots
-                    v-if="item.slots?.default"
-                    :key="'_sl_' + (item.field ?? '_') + '_' + idx"
-                    :form-data="queryFormData"
-                    :item="item"
-                    :pass-trigger="() => {}"
-                    :pass-delay-trigger="() => {}"
-                  />
-                  <render-ant-item
-                    v-else-if="item.itemRender?.name"
-                    :key="'_re_' + (item.field ?? '_') + '_' + idx"
-                    :default-handler="{
-                      reset: () => {
-                        resetQueryFormData(!submitOnReset);
-                      },
-                    }"
-                    :item-render="item.itemRender"
-                    :render-form-params="{ data: queryFormData, field: item.field }"
-                  />
-                  <span v-else></span>
-                  <template #tooltip v-if="item.tooltipConfig">
-                    <a-tooltip
-                      v-if="isFunction(item.tooltipConfig.title)"
-                      v-bind="omit(item.tooltipConfig, ['title'])"
-                    >
-                      <InfoCircleOutlined class="cursor-pointer py-4x px-2x" />
-                      <template #title>
-                        <div v-html="item.tooltipConfig.title()"></div>
-                      </template>
-                    </a-tooltip>
-                    <a-tooltip v-else v-bind="item.tooltipConfig">
-                      <InfoCircleOutlined class="cursor-pointer py-4x px-2x" />
-                    </a-tooltip>
-                  </template>
-                </a-form-item>
-              </a-col>
+                :key="`_col_${idx}`"
+                :form-data="queryFormData"
+                :item="item as PFormItemProps<Partial<F>>"
+                @reset="resetQueryFormData(propsWithDefaults.lazyReset)"
+              />
             </a-row>
           </a-form>
         </a-spin>

package/src/packages/renders/TableInput.vue

@@ -4,7 +4,7 @@
   import { ColumnProps } from '#/antProxy';
   import { cleanCol } from '@/utils/core';
   import RenderDefaultSlots from '@/components/RenderDefaultSlots';
-  import { merge } from 'lodash-es';
+  import { merge } from 'xe-utils';
 
   const props = defineProps({
     modelValue: {

package/src/packages/store/renderStore.tsx

@@ -21,7 +21,7 @@ import {
   TimePicker,
   TreeSelect,
 } from 'ant-design-vue';
-import { set, isFunction, merge, omit } from 'lodash-es';
+import { set, isFunction, merge, omit } from 'xe-utils';
 import { ButtonProps } from 'ant-design-vue/lib/button';
 import { isBadValue, isGoodValue, noValue, valued } from '@/utils/is';
 import TableInput from '@/renders/TableInput.vue';

package/src/packages/styles/index.scss

@@ -99,7 +99,37 @@
   .p-form-wrapper {
     z-index: 4;
   }
-
+  .p-error-hang-out {
+    .ant-input-affix-wrapper-status-error:not(
+        .ant-input-affix-wrapper-disabled
+      ):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper {
+      border-color: #d9d9d9 !important;
+
+      &:focus {
+        border-color: #4096ff !important;
+      }
+    }
+    .ant-form-item-explain-error {
+      opacity: 0 !important;
+      transform: translateY(-10px) !important;
+      max-height: 0 !important;
+      overflow: hidden !important;
+      transition: none !important;
+    }
+  }
+  .ant-form-item-explain-error {
+    opacity: 0;
+    transform: translateY(-10px);
+    max-height: 0;
+    overflow: hidden;
+    transition: opacity 0.3s ease-out 0.3s, transform 0.3s ease-out 0.3s,
+      max-height 0.3s ease-out 0.3s;
+  }
+  .ant-form-item-has-error .ant-form-item-explain-error {
+    opacity: 1;
+    transform: translateY(0);
+    max-height: 100px;
+  }
   .p-toolbar-wrapper {
     box-shadow: 0 8px #fff;
     border-radius: 0.5em 0.5em 0 0;
@@ -204,7 +234,42 @@
     }
   }
 }
+.p-error-group-tab{
+  position:relative;
+  overflow: visible;
+  color:#f5222d!important;
+  &:after{
+    content:'🏷️';
+    position:absolute;
+    top:-1em;
+    right:0;
+    width:1em;
+    height:1em;
+    font-size:0.8em;
+    animation: heartbeat 2s infinite;
+  }
+}
+.p-error-hang-out {
+  .ant-input-affix-wrapper-status-error:not(
+      .ant-input-affix-wrapper-disabled
+    ):not(.ant-input-affix-wrapper-borderless).ant-input-affix-wrapper {
+    border-color: #d9d9d9 !important;
+
+    &:focus {
+      border-color: #4096ff !important;
+    }
+  }
+  .ant-form-item-explain-error {
+    display: none;
+  }
+}
+.no-error-border {
+  border-color: #d9d9d9 !important;
 
+  &:focus {
+    border-color: #4096ff !important;
+  }
+}
 //endregion
 
 @each $align in right center {
@@ -220,3 +285,17 @@
     text-align: #{$align};
   }
 }
+
+@keyframes heartbeat {
+  0%   { transform: scale(1); }
+  6%   { transform: scale(1.22); }
+  12%  { transform: scale(1); }
+  18%  { transform: scale(1.18); }
+  24%  { transform: scale(1); }
+  48%  { transform: scale(1); }   // 长停顿
+  54%  { transform: scale(1.22); }
+  60%  { transform: scale(1); }
+  66%  { transform: scale(1.18); }
+  72%  { transform: scale(1); }
+  100% { transform: scale(1); }   // 长停顿
+}

package/src/packages/utils/AFormatters.ts

@@ -1,4 +1,4 @@
-import { isArray, isFunction, isString, toNumber } from 'lodash-es';
+import { isArray, isFunction, isString, toNumber } from 'xe-utils';
 import { valued } from '@/utils/is';
 import { CellFuncArg, ColumnProps } from '#/antProxy';
 

package/src/packages/utils/config.ts

@@ -0,0 +1,72 @@
+import { PFormProps, PGridProps } from '#/antProxy';
+import { clone } from 'xe-utils';
+
+// 全局配置接口
+export interface UIKitConfig {
+  form?: {
+    labelCol?: any;
+    wrapperCol?: any;
+  };
+  grid?: {
+    align?: 'left' | 'right' | 'center';
+    lazyReset?: boolean;
+    fitHeight?: number;
+  };
+}
+
+// 默认配置
+const defaultConfig: UIKitConfig = {
+  form: {
+    labelCol: { span: 6 },
+    wrapperCol: { span: 16 },
+  },
+  grid: {
+    align: 'left',
+    lazyReset: false,
+    fitHeight: 170,
+  },
+};
+
+// 当前配置（可被修改）
+let currentConfig: UIKitConfig = clone(defaultConfig);
+
+// 设置配置
+export function setUIKitConfig(config: Partial<UIKitConfig>): void {
+  currentConfig = {
+    form: {
+      ...currentConfig.form,
+      ...config.form,
+    },
+    grid: {
+      ...currentConfig.grid,
+      ...config.grid,
+    },
+  };
+}
+
+// 获取配置
+export function getUIKitConfig(): UIKitConfig {
+  return currentConfig;
+}
+
+// 获取表单默认配置
+export function getFormDefaults(): Partial<PFormProps> {
+  return {
+    labelCol: currentConfig.form?.labelCol,
+    wrapperCol: currentConfig.form?.wrapperCol,
+  };
+}
+
+// 获取Grid默认配置
+export function getGridDefaults(): Partial<PGridProps> {
+  return {
+    align: currentConfig.grid?.align,
+    lazyReset: currentConfig.grid?.lazyReset,
+    fitHeight: currentConfig.grid?.fitHeight,
+  };
+}
+
+// 重置为默认配置
+export function resetUIKitConfig(): void {
+  currentConfig = JSON.parse(JSON.stringify(defaultConfig));
+} 

package/src/packages/utils/core.ts

@@ -1,6 +1,6 @@
 import { ColumnProps, Responsive } from '#/antProxy';
 import { TableColumnGroupType, TableColumnType } from 'ant-design-vue';
-import { isArray, isNumber, omit, zipObject } from 'lodash-es';
+import { isArray, isNumber, omit, zipObject } from 'xe-utils';
 import { valued } from '@/utils/is';
 
 export const cleanCol = (col: ColumnProps): TableColumnType | TableColumnGroupType<Recordable> => {