@vue-ui-kit/ant 1.8.0 → 1.8.3

package/src/packages/components/PGrid.vue

@@ -14,29 +14,38 @@
   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>[] = [];
@@ -237,7 +242,6 @@
         queryFormData.value = obj;
       }
       emit('resetQuery');
-      refreshForm();
     }
 
     pagination.page = 1;
@@ -397,13 +401,6 @@
     resetPage();
   };
 
-  watch(
-    () => formConfig.value,
-    () => {
-      debounceRefreshForm();
-    },
-    { deep: true },
-  );
   watch(
     () => [columns.value, proxyConfig.value, toolbarConfig.value],
     () => {
@@ -423,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({
@@ -468,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,
   }))
@@ -495,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/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;
@@ -219,6 +249,27 @@
     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 {

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));
+}