@vue-ui-kit/ant 1.0.0

package/src/declarations/antProxy.ts

@@ -0,0 +1,255 @@
+import type { Rule } from 'ant-design-vue/lib/form';
+import { ButtonProps } from 'ant-design-vue/lib/button';
+import { ColProps } from 'ant-design-vue/lib/grid/Col';
+import { FormProps } from 'ant-design-vue/lib/form/Form';
+import { TableColumnType, TableProps } from 'ant-design-vue';
+import { ButtonType } from 'ant-design-vue/lib/button/buttonTypes';
+
+export interface CellFuncArg<D = Recordable> {
+  row: D;
+  column: ColumnProps<D>;
+  rowIndex: number;
+  cellValue: any;
+}
+
+export interface ItemFuncArg<F = Recordable> {
+  data: F;
+  field?: string;
+}
+
+export interface ItemRender {
+  name: string;
+  defaultValue?: any;
+  props?: Recordable;
+  options?: IOption[];
+  children?: Recordable[];
+  events?: { [key: string]: (...args: any[]) => any };
+}
+
+export interface CellRender {
+  name: string;
+  props?: Recordable;
+  children?: Recordable[];
+}
+
+export interface Responsive {
+  xxs?: number;
+  xs?: number;
+  sm?: number;
+  md?: number;
+  lg?: number;
+  xl?: number;
+  xxl?: number;
+}
+
+export interface PFormItemProps<F = Recordable> {
+  field?: string;
+  title?: string;
+  span?: number;
+  align?: 'left' | 'right' | 'center';
+  col?: ColProps;
+  rule?: Rule[];
+  itemRender?: ItemRender;
+  slots?: {
+    default?: (
+      { data, field }: ItemFuncArg<F>,
+      passTrigger?: (cusFields?: string | string[]) => void,
+    ) => any;
+  };
+}
+
+export interface PFormProps<F = Recordable> extends FormProps {
+  items: PFormItemProps<F>[];
+  customReset?: () => void;
+}
+
+export interface PBlockProps<F = Recordable> {
+  getFormSetting: (data: Partial<F>) => PFormProps<Partial<F>>;
+  source: Partial<F>;
+}
+
+export interface PromisePickerProps<D = Recordable, F = Recordable> {
+  gridSetting: PGridProps<D, F>;
+  title?: string;
+  width?: string | number;
+}
+
+export type GroupMenuItemHandler<F = Recordable> = ({
+  index,
+  data,
+  code,
+}: {
+  index: number;
+  code: string;
+  data: Partial<F>;
+}) => void;
+
+export interface GroupMenuItem<F = Recordable> {
+  content: string;
+  icon?: string;
+  code: string;
+  visibleMethod?: ({ data, index }: { data: Partial<F>; index: number }) => boolean;
+}
+
+export interface PFormGroupProps<F = Recordable> {
+  getFormSetting: (data: Partial<F>) => PFormProps<Partial<F>>;
+  title?: string;
+  tabLabel?: string;
+  editAble?: boolean;
+  showAdd?: boolean;
+  itemMenus?: Array<GroupMenuItem<F>>;
+  creatItem?: ({ list }: { list?: Partial<F>[] }) => Promise<Partial<F>>;
+  max?: number;
+  menuHandler?: GroupMenuItemHandler<F>;
+}
+
+export interface ColumnProps<D = Recordable> extends Omit<TableColumnType, 'slots'> {
+  field?: string;
+  children?: ColumnProps<D>[];
+  formatter?:
+    | string
+    | [string, ...Array<any>]
+    | ((arg: PartialByKeys<CellFuncArg<D>, 'cellValue'>) => any);
+  slots?: {
+    default?: ({ row, column, rowIndex }: PartialByKeys<CellFuncArg<D>, 'cellValue'>) => any;
+    title?: ({ column }: { column: ColumnProps<D> }) => any;
+  };
+  cellRender?: CellRender;
+}
+
+export interface PButtonProps extends ButtonProps {
+  content?: string;
+  icon?: string;
+  type?: ButtonType;
+}
+
+export interface ToolbarButtonProps extends PButtonProps {
+  code: string;
+}
+
+export interface ToolbarConfig {
+  buttons?: Array<ToolbarButtonProps>;
+  tools?: Array<{ code: string; icon: string; type?: ButtonType }>;
+}
+
+export interface ResponsePathConfig<D = Recordable> {
+  /*非分页取值路径*/
+  list?: string | ((res: Recordable) => D[]);
+  /*分页取值路径*/
+  result?: string | ((res: Recordable) => D[]);
+  total?: string | ((res: Recordable) => D[]);
+  /*提示信息取值路径*/
+  message?:
+    | string
+    | ((res: Recordable) => string | { status: string; content: string; icon?: string });
+}
+
+declare type HandlerMulti = (ids: string[] | number[]) => any;
+
+export interface AjaxConfig<F = Recordable> {
+  query: (Q: { page?: IPage; form: Partial<F> }) => Promise<Recordable>;
+  multiDelete?: HandlerMulti;
+}
+
+export interface ProxyConfig<D = Recordable, F = Recordable> {
+  // 结果集 取值路径
+  response?: ResponsePathConfig<D>;
+  ajax: AjaxConfig<F>;
+}
+
+export interface PageConfig {
+  pageSizes?: number[];
+  pageSize?: number;
+}
+
+export interface SelectConfig {
+  multiple?: boolean;
+}
+
+export type PGridProps<D = Recordable, F = Recordable> = {
+  selectConfig?: SelectConfig;
+  rowKey?: string;
+  manualFetch?: boolean;
+  formConfig?: PFormProps<F>;
+  columns: ColumnProps<D>[];
+  toolbarConfig?: ToolbarConfig;
+  pageConfig?: PageConfig;
+  proxyConfig?: ProxyConfig<D, F>;
+  tableConfig?: TableProps<D>;
+  scrollMode?: 'outer' | 'inner';
+};
+
+export interface RenderOptions {
+  /**
+   * 渲染器名称
+   */
+  name?: string;
+  /**
+   * 目标组件渲染的参数
+   */
+  props?: { [key: string]: any };
+  /**
+   * 目标组件渲染的属性
+   */
+  attrs?: { [key: string]: any };
+  /**
+   * 目标组件渲染的事件
+   */
+  events?: { [key: string]: (...args: any[]) => any };
+  /**
+   * 多目标渲染
+   */
+  children?: any[];
+  /**
+   * 选项
+   */
+  options?: IOption[];
+  /**
+   * 默认值
+   */
+  defaultValue?: any;
+  /**
+   * 校验触发器
+   * @param cusFields field或者field数组
+   */
+  handleTrigger?: (cusFields?: string | string[]) => void;
+}
+
+export interface RenderFormParams<F = Recordable> {
+  data: F;
+  field?: string;
+}
+
+export interface RenderTableParams<D = Recordable> {
+  data?: D[];
+  row: D;
+  rowIndex?: number;
+  field?: string;
+  title?: string;
+}
+
+export interface PGridInstance<D = Recordable, F = Recordable> {
+  commitProxy: {
+    query: () => Promise<D[]>;
+    reload: () => Promise<D[]>;
+    reloadPage: () => Promise<D[]>;
+    passQuery: (query: Partial<F>) => Promise<D[]>;
+  };
+  selectedRowKeys: string[] | number[];
+  $table: Recordable;
+  $form: Recordable;
+}
+
+export interface PFormInstance {
+  reset: () => void;
+  $form: Recordable;
+}
+
+export interface PromisePickerInstance<D = Recordable> {
+  pick: () => Promise<{ row: D; field?: string }>;
+}
+
+export interface PFormGroupInstance<F = Recordable> {
+  activeKey: number;
+  setActiveKey: (activeKey: number) => void;
+}

package/src/declarations/global.d.ts

@@ -0,0 +1,133 @@
+//<editor-fold desc="👇全局类型补丁，不需要引用👇">
+declare type Recordable<T = any> = Record<string, T>;
+type PartialByKeys<T, K extends keyof T = keyof T> = Omit<T, K & keyof T> &
+  Partial<Pick<T, K & keyof T>> extends infer U
+  ? { [K in keyof U]: U[K] }
+  : never;
+type DeepPick<T extends Record<string, any>, U extends string> = (
+  U extends string
+    ? U extends `${infer F}.${infer R}`
+      ? (arg: {
+        [K in F]: DeepPick<T[F], R>;
+      }) => void
+      : U extends keyof T
+        ? (arg: Pick<T, U>) => void
+        : (arg: unknown) => void
+    : never
+  ) extends (arg: infer Z) => void
+  ? Z
+  : never;
+
+//选项类型
+interface IOption<T = any> {
+  value: T;
+  label: string;
+  color?: string;
+}
+
+interface OptionGroup<T> {
+  label?: string;
+  options: IOption<T>[];
+}
+
+//树形结构类型
+type ITreeAble<T, U = void> = U extends void
+  ? T & { children?: ITreeAble<T>[] }
+  : U extends string
+    ? T & { [key in U]?: ITreeAble<T, U>[] }
+    : T;
+
+declare type WrapID<T extends Recordable> = {
+  readonly id: string | number;
+} & { [K in keyof T]: T[K] };
+
+declare type TimeoutHandle = ReturnType<typeof window.setTimeout>;
+declare type IntervalHandle = ReturnType<typeof window.setInterval>;
+
+declare type GrowToSize<T, N extends number, A extends T[]> = A['length'] extends N
+  ? A
+  : GrowToSize<T, N, [...A, T]>;
+
+declare type FixedArray<T, N extends number> = GrowToSize<T, N, []>;
+
+interface IPage {
+  /**
+   * 第几页
+   */
+  page: number;
+  /**
+   * 一页显示的数量
+   */
+  size: number;
+}
+
+interface WrapList<T> {
+  /**
+   * 列表
+   */
+  list: T[];
+}
+
+interface WrapPage<T> {
+  /**
+   * 列表
+   */
+  list: T[];
+  /**
+   * 当前页码
+   */
+  page: number;
+  /**
+   * 总页数
+   */
+  pages?: string[];
+  /**
+   * 每页数量
+   */
+  size: number;
+  /**
+   * 总数量
+   */
+  total: number;
+}
+
+interface ISchema {
+  id: number;
+  /**
+   * 操作人
+   */
+  operator?: string;
+  /**
+   * 创建人
+   */
+  create_by?: string;
+  /**
+   * 更新人
+   */
+  update_by?: string;
+  /**
+   * 更新时间
+   */
+  update_time?: number;
+  /**
+   * 创建时间
+   */
+  create_time?: number;
+  /**
+   * 创建人
+   */
+  creator?: string;
+}
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  
+  // biome-ignore lint/complexity/noBannedTypes: reason
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+declare module '*.png';
+declare module '*.svg';
+declare module '*.jpeg';
+declare module '*.jpg';
+//</editor-fold>

package/src/declarations/type.ts

@@ -0,0 +1 @@
+export type Recordable<T = any> = Record<string, T>;

package/src/index.ts

@@ -0,0 +1,25 @@
+import { App } from 'vue';
+import PForm from '@/components/PForm.vue';
+import PGrid from '@/components/PGrid.vue';
+import PFormGroup from '@/components/PFormGroup.vue';
+import PGroupBlock from '@/components/PGroupBlock.vue';
+import PromisePicker from '@/components/PromisePicker.vue';
+import { addFormatter } from '@/utils/AFormatters';
+import { addRender } from '@/store/renderStore';
+import * as utils from '@/utils/core';
+
+export default {
+  install(app: App) {
+    app.component('PForm', PForm);
+    app.component('PGrid', PGrid);
+    // @ts-ignore
+    app.component('PFormGroup', PFormGroup);
+    app.component('PGroupBlock', PGroupBlock);
+    app.component('PromisePicker', PromisePicker);
+  },
+  addFormatter,
+  addRender,
+};
+
+export * from '#/antProxy';
+export * from '@/utils/core';

package/src/packages/components/PForm.vue

@@ -0,0 +1,108 @@
+<script generic="F = Recordable" lang="ts" name="PForm" setup>
+  import { PFormItemProps, PFormProps } from '#/antProxy';
+  import { computed, onMounted, ref, toRefs, watch } from 'vue';
+  import { debounce, omit } from 'lodash-es';
+  import { v4 as uuid_v4 } from 'uuid';
+  import RenderAntItem from '@/components/RenderAntItem';
+  import RenderItemSlots from '@/components/RenderItemSlots';
+  import { valued } from '@/utils/is';
+  import { eachTree } from '@/utils/treeHelper';
+  import { defaultItemResponsive } from '@/utils/core';
+  import { Form as AForm, Row as ARow, Col as ACol, FormItem as AFormItem } from 'ant-design-vue';
+
+  const props = defineProps<PFormProps<F> & { data: F }>();
+  const emit = defineEmits(['apply', 'reset']);
+  const { items, data: formData } = toRefs(props);
+
+  function handleSubmit() {
+    emit('apply', formData.value);
+  }
+
+  const formEl = ref();
+  const renderFormKey = ref(uuid_v4());
+  const resetForm = () => {
+    renderFormKey.value = uuid_v4();
+  };
+  const debounceResetForm = debounce(resetForm, 100);
+  watch(() => items.value, debounceResetForm, { deep: true });
+  const resetFormData = () => {
+    if (props.customReset) {
+      props.customReset();
+    } else {
+      const obj: Partial<F> = {};
+      eachTree(items.value, (item) => {
+        if (item.field && item.itemRender) {
+          if (valued(item.itemRender.defaultValue)) {
+            obj[item.field] = item.itemRender.defaultValue;
+          } else {
+            obj[item.field] = undefined;
+          }
+        }
+      });
+      Object.assign(formData.value, obj);
+    }
+  };
+  // omit({labelCol:defaultLabelCol,...props},['items','data','model'])
+  const fc = computed(() => ({
+    ...omit(props, ['items', 'data', 'model', 'labelCol', 'wrapperCol']),
+    labelCol: props.labelCol ?? { span: 6 },
+    wrapperCol: props.wrapperCol ?? { span: 16 },
+  }));
+  const validateField = (fields?: string | string[]) => {
+    if (fields) {
+      formEl.value?.validateFields(fields);
+    }
+  };
+  const handleTrigger = (cusFields?: string | string[]) => {
+    validateField(cusFields);
+  };
+  defineExpose({
+    reset: resetForm,
+    $form: computed(() => formEl.value),
+  });
+  onMounted(() => {
+    resetForm();
+  });
+</script>
+<template>
+  <div
+    v-if="items.some((s: PFormItemProps<F>) => s.field && s.itemRender)"
+    class="p-pane p-wrapper"
+  >
+    <a-form :key="renderFormKey" ref="formEl" :model="formData" v-bind="fc" @submit="handleSubmit">
+      <a-row :gutter="[6, 12]">
+        <a-col
+          v-for="(item, idx) in items"
+          :key="'_col_' + idx"
+          v-bind="item.col ?? (item.span ? { span: item.span } : defaultItemResponsive)"
+        >
+          <a-form-item
+            :key="'_item_' + idx"
+            :label="item.title"
+            :name="item.field"
+            :wrapper-col="item.wrapperCol ?? (item.title ? undefined : { span: 24 })"
+            colon
+            :class="`p-content-align-${item.align ?? 'left'}`"
+            v-bind="omit(item, ['field', 'title', 'span', 'col', 'wrapperCol', 'itemRender'])"
+          >
+            <render-item-slots
+              v-if="item.slots?.default"
+              :form-data="formData"
+              :item="item"
+              :pass-trigger="handleTrigger"
+            />
+            <render-ant-item
+              v-else-if="item.itemRender?.name"
+              :key="'_re_' + idx"
+              :default-handler="{ reset: resetFormData }"
+              :item-render="item.itemRender"
+              @trigger="handleTrigger"
+              :render-form-params="{ data: formData, field: item.field }"
+            />
+            <span v-else></span>
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </div>
+</template>

package/src/packages/components/PFormGroup.vue

@@ -0,0 +1,90 @@
+<script lang="ts" generic="F = Recordable" setup name="PFormGroup">
+  import { computed, PropType, ref } from 'vue';
+  import { PFormGroupProps } from '#/antProxy';
+  import { MoreOutlined } from '@ant-design/icons-vue';
+  import { cloneDeep, toString, isFunction, omit } from 'lodash-es';
+  import PGroupBlock from '@/components/PGroupBlock.vue';
+  import {
+    Card as ACard,
+    Tabs as ATabs,
+    TabPane as ATabPane,
+    Button as AButton,
+    Dropdown as ADropdown,
+    Menu as AMenu,
+    MenuItem as AMenuItem,
+  } from 'ant-design-vue';
+
+  const props = defineProps<PFormGroupProps<F>>();
+  const model = defineModel({
+    type: Array as PropType<Partial<F>[]>,
+    default: () => [],
+  });
+  const activeKey = ref(0);
+  const setActiveKey = (key: number) => {
+    activeKey.value = key;
+  };
+  const maxLen = props.max ?? Infinity;
+  const handleAddItem = (idx: number) => {
+    const creator = props.creatItem ?? (() => Promise.resolve({} as Partial<F>));
+    creator({ list: model.value }).then((item) => {
+      model.value = [...model.value, item];
+      activeKey.value = idx;
+    });
+  };
+  const itemMenus = props.itemMenus ?? [{ content: '删除', code: 'delete' }];
+  const handleMenu = (key: string, item: Partial<F>, idx: number) => {
+    if (props.menuHandler && isFunction(props.menuHandler)) {
+      props.menuHandler({ code: key, data: item, index: idx });
+    } else {
+      switch (key) {
+        case 'delete':
+          model.value = model.value.filter((_, i) => i !== idx);
+          break;
+        case 'copy':
+          model.value = [...model.value, cloneDeep(omit(item, ['id']))];
+          break;
+      }
+    }
+  };
+  defineExpose({
+    activeKey: computed(() => activeKey.value),
+    setActiveKey,
+  });
+</script>
+<template>
+  <a-card :title="title" size="small">
+    <a-tabs type="editable-card" v-model:activeKey="activeKey" hide-add>
+      <template #rightExtra>
+        <slot name="rightExtra">
+          <a-button
+            type="link"
+            @click="handleAddItem(model.length)"
+            v-if="showAdd && model.length < maxLen"
+          >
+            + 新增
+          </a-button>
+        </slot>
+      </template>
+      <a-tab-pane v-for="(item, idx) in model" :key="idx" :tab="`${tabLabel} ${idx + 1}`">
+        <template #closeIcon>
+          <a-dropdown v-if="editAble && itemMenus?.length">
+            <MoreOutlined />
+            <template #overlay>
+              <a-menu @click="(e) => handleMenu(toString(e.key), item, idx)">
+                <a-menu-item
+                  v-for="menu in itemMenus.filter(
+                    (f) => f.visibleMethod?.({ data: item, index: idx }) ?? true,
+                  )"
+                  :key="menu.code"
+                >
+                  <div>{{ menu.content }}</div>
+                </a-menu-item>
+              </a-menu>
+            </template>
+          </a-dropdown>
+        </template>
+        <p-group-block :key="idx" :source="item" :get-form-setting="getFormSetting" />
+      </a-tab-pane>
+    </a-tabs>
+  </a-card>
+</template>