plain-design 0.0.97 → 1.0.0-beta.2

package/src/packages/components/Table/plc/use/usePlc.tsx

@@ -0,0 +1,136 @@
+import {ExtractPropTypes} from "plain-design-composition";
+import {createProxyProps, iPlcEventType, iPlcPropsProxyConfig, PlcPropsOptions, tPlc, tPlcType} from "../utils/plc.utils";
+import {PlcScopeSlotsOptions, tPlcScopeSlots, tPlcSlots} from "../utils/plc.scope-slots";
+import {useBasePlc} from "./useBasePlc";
+import {iTableCellRenderScope} from "../../table/utils/table.utils";
+
+type tPlcDefaultScopeSlotsOptions = Partial<typeof PlcScopeSlotsOptions>
+
+export function usePlc<iExternalRefer extends Record<string, any>>({ props: _props, slots, scopeSlots, event, defaultScopeSlots, externalRefer, proxyPropsConfig }: {
+  event: iPlcEventType,
+  slots: tPlcSlots,
+  props: ExtractPropTypes<typeof PlcPropsOptions>,
+  scopeSlots: tPlcScopeSlots,
+  defaultScopeSlots?: tPlcDefaultScopeSlotsOptions,
+  externalRefer?: iExternalRefer,
+  proxyPropsConfig?: iPlcPropsProxyConfig,
+}) {
+  const props = createProxyProps(_props, proxyPropsConfig);
+
+  const formatScopeSlots: tPlcScopeSlots = {
+    ...scopeSlots,
+    head: Object.assign((scope: { plc: tPlcType }) => {
+      if (scopeSlots.head.isExist()) {
+        return scopeSlots.head(scope);
+      }
+      if (!!defaultScopeSlots && defaultScopeSlots.head) {
+        return defaultScopeSlots.head(scope);
+      }
+      return scope.plc.props.title;
+    }, {
+      isExist: () => {
+        if (scopeSlots.head.isExist()) {
+          return true;
+        }
+        if (!!defaultScopeSlots && !!defaultScopeSlots.head) {
+          return true;
+        }
+        return false;
+      },
+    }),
+    normal: Object.assign((scope: iTableCellRenderScope) => {
+      if (scopeSlots.normal.isExist()) {
+        return scopeSlots.normal(scope);
+      }
+      if (!!defaultScopeSlots && defaultScopeSlots.normal) {
+        return defaultScopeSlots.normal(scope);
+      }
+      return !scope.plc.props.field ? '' : scope.row[scope.plc.props.field];
+    }, {
+      isExist: () => {
+        if (scopeSlots.normal.isExist()) {
+          return true;
+        }
+        if (!!defaultScopeSlots && !!defaultScopeSlots.normal) {
+          return true;
+        }
+        return false;
+      },
+    }),
+    edit: Object.assign((scope: iTableCellRenderScope) => {
+      if (scopeSlots.edit.isExist()) {
+        return scopeSlots.edit(scope);
+      }
+      if (!!defaultScopeSlots && defaultScopeSlots.edit) {
+        return defaultScopeSlots.edit(scope);
+      }
+      return formatScopeSlots.normal(scope);
+    }, {
+      isExist: () => {
+        if (scopeSlots.edit.isExist()) {
+          return true;
+        }
+        if (!!defaultScopeSlots && !!defaultScopeSlots.edit) {
+          return true;
+        }
+        return false;
+      },
+    }),
+    form: Object.assign((scope: iTableCellRenderScope) => {
+      if (scopeSlots.form.isExist()) {
+        return scopeSlots.form(scope);
+      }
+      if (!!defaultScopeSlots && defaultScopeSlots.form) {
+        return defaultScopeSlots.form(scope);
+      }
+      return formatScopeSlots.edit(scope);
+    }, {
+      isExist: () => {
+        if (scopeSlots.form.isExist() || scopeSlots.edit.isExist()) {
+          return true;
+        }
+        if (!!defaultScopeSlots && (!!defaultScopeSlots.form || !!defaultScopeSlots.edit)) {
+          return true;
+        }
+        return false;
+      },
+    }),
+    summary: Object.assign((scope: iTableCellRenderScope) => {
+      if (scopeSlots.summary.isExist()) {
+        return scopeSlots.summary(scope);
+      }
+      if (!!defaultScopeSlots && defaultScopeSlots.summary) {
+        return defaultScopeSlots.summary(scope);
+      }
+      return formatScopeSlots.normal(scope);
+    }, {
+      isExist: () => {
+        if (scopeSlots.summary.isExist()) {
+          return true;
+        }
+        if (!!defaultScopeSlots && !!defaultScopeSlots.summary) {
+          return true;
+        }
+        return false;
+      },
+    }),
+  };
+
+  const { render, refer } = useBasePlc({
+    props, event, slots,
+    scopeSlots: formatScopeSlots,
+  });
+
+  if (!!externalRefer) {
+    const plcKeys = Object.keys(refer);
+    const externalKeys = Object.keys(externalRefer);
+    const conflictKey = externalKeys.find(i => plcKeys.indexOf(i) > -1);
+    if (!!conflictKey) {
+      throw new Error(`usePlc externalRefer错误，出现冲突的key:${conflictKey}`);
+    }
+  }
+
+  return { render, refer: Object.assign(refer, externalRefer) as iExternalRefer & tPlc };
+}
+
+export type iPlcRefer = ReturnType<typeof usePlc>['refer']

package/src/packages/components/Table/plc/use/usePlcPropsState.tsx

@@ -0,0 +1,112 @@
+import {computed, reactive, watch} from "plain-design-composition";
+import {deepcopy} from "plain-utils/object/deepcopy";
+import {iPlcGroupPropsType, iPlcPropsType, tPlcType} from "../utils/plc.utils";
+
+/**
+ * 获取可以修改的plc props state
+ * @author  韦胜健
+ * @date    2022.10.29 19:10
+ */
+export function usePlcPropsState<Props extends Record<string, any>>(propsRef: { value: Props }): { state: Props, propsState: Props } {
+
+  /**
+   * 初始化可以修改的state
+   * @author  韦胜健
+   * @date    2022.10.29 19:10
+   */
+  const state = reactive(Object.keys(propsRef.value).reduce((prev, propKey) => {
+    prev[propKey] = undefined;
+    return prev;
+  }, {} as any));
+
+  /**
+   * 代理以及监听props变化
+   * @author  韦胜健
+   * @date    2022.10.29 19:11
+   */
+  const propsState = reactive(Object.keys(propsRef.value).reduce((prev, propKey) => {
+
+    /*当props对应的属性值变化时，清理掉内部临时修改的值，以props变化的值为准*/
+    watch(() => propsRef.value[propKey], () => {(propsState as any)[propKey] = undefined;})
+
+    ;(prev as any)[propKey] = computed({
+      get() {
+        if (state[propKey] !== undefined) {return state[propKey];}
+        return propsRef.value[propKey];
+      },
+      set(val: any) {
+        if (state[propKey] !== val) {
+          state[propKey] = val;
+        }
+      },
+    });
+    return prev;
+  }, {} as Props));
+
+  return {
+    state,
+    propsState: propsState as any,
+  };
+}
+
+/**
+ * 缓存的plc状态
+ * @author  韦胜健
+ * @date    2022.10.29 19:11
+ */
+export type tPlcCacheState = {
+  state: iPlcGroupPropsType | iPlcPropsType,
+  children?: tPlcCacheStateData,
+  key: string,
+}
+
+/**
+ * plc缓存类型
+ * @author  韦胜健
+ * @date    2022.10.29 19:11
+ */
+export type tPlcCacheStateData = Record<string, tPlcCacheState>
+
+/**
+ * 根据plc的信息计算一个唯一的标识
+ * @author  韦胜健
+ * @date    2022.10.29 19:11
+ */
+export function getPlcKey(i: tPlcType) {return i.group ? ('G' + i.props.title || 'GT') : `${i.props.title || 'PT'}:${i.props.field || 'PF'}`;}
+
+/**
+ * 获取多级表头的state（只要state）
+ * @author  韦胜健
+ * @date    2021/6/2 14:58
+ */
+export function getPlcPropsState(sourceList: tPlcType[]): tPlcCacheStateData {
+  const stateList = [] as tPlcCacheState[];
+  sourceList.forEach(i => {
+    stateList.push({
+      state: deepcopy(i.getState()),
+      children: !i.group ? undefined : getPlcPropsState(i.children),
+      key: getPlcKey(i),
+    });
+  });
+  return stateList.reduce((prev, item) => {
+    prev[item.key] = item;
+    return prev;
+  }, {} as Record<string, tPlcCacheState>);
+}
+
+/**
+ * 应用多级表头的state
+ * @author  韦胜健
+ * @date    2021/6/2 15:04
+ */
+export function applyPlcPropsState(stateData: tPlcCacheStateData, plcList: tPlcType[]) {
+  plcList.forEach(plcType => {
+    const key = getPlcKey(plcType);
+    if (!!stateData[key]) {
+      Object.assign(plcType.getState(), stateData[key].state);
+      if (plcType.group && !!stateData[key].children) {
+        applyPlcPropsState(stateData[key].children!, plcType.children);
+      }
+    }
+  });
+}

package/src/packages/components/Table/plc/useTablePlc.tsx

@@ -0,0 +1,226 @@
+import {iTablePropsType, iTableSlotsType} from "../table/utils/table.utils";
+import {iTableHooks} from "../table/utils/createTableHooks";
+import {computed, nextTick, onBeforeUnmount, reactive, useRefs, watch} from "plain-design-composition";
+import {PlcGroup} from "../../PlcGroup";
+import {TablePlcFixedType, tPlc, tPlcType} from "./utils/plc.utils";
+import {runOnce} from "../../../utils/runOnce";
+import {formatPlcList, tPlcData} from "./formatPlcList";
+import {OpenController} from "../../../utils/OpenController";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {throttle} from "plain-utils/utils/throttle";
+
+export function useTablePlc(
+  {
+    props,
+    slots,
+    hooks,
+    onCollectPlcData,
+  }: {
+    props: iTablePropsType,
+    slots: iTableSlotsType,
+    hooks: iTableHooks,
+    onCollectPlcData: (data: tPlcData) => void,
+  }
+) {
+
+  const { refs, onRef } = useRefs({ group: PlcGroup });
+
+  hooks.onRenderColumns.use({
+    /*不隔断渲染，因为是渲染插槽内容，无法检测响应式变化*/
+    separate: false,
+    processor: ({ list, render }) => {list.push({ key: 'defaultSlot', seq: 1, render });},
+    render: () => slots.default(),
+  });
+
+  hooks.onRender.use({
+    /*因为onRenderColumns不隔断，所以这里也不隔断*/
+    separate: false,
+    processor: ({ list, render }) => {list.push({ seq: 5, key: 'plc_collector', render });},
+    render: () => <PlcGroup ref={onRef.group}>{hooks.onRenderColumns.exec()}</PlcGroup>
+  });
+
+  /*---------------------------------------state-------------------------------------------*/
+
+  const state = reactive({
+    tableWidth: null as null | number,
+    getTableEl: null as null | (() => HTMLDivElement),
+    getPlcTypeArr: null as null | (() => tPlcType[]),
+  });
+
+  hooks.onPlcTypes.use(list => {state.getPlcTypeArr = () => list;});
+
+  (() => {
+    const updateWidth = () => {
+      const el = state.getTableEl?.();
+      if (!el) {return;}
+      const { offsetWidth } = el;
+      if (state.tableWidth !== offsetWidth) {
+        state.tableWidth = offsetWidth;
+      }
+    };
+    const { effects } = createEffects();
+    /*table 挂载的时候保存table的宽度*/
+    effects.push(
+      hooks.onTableMounted.use(el => {
+        state.getTableEl = () => el;
+        updateWidth();
+      })
+    );
+
+    window.addEventListener('resize', updateWidth);
+    effects.push(() => {window.removeEventListener('resize', updateWidth);});
+
+    effects.push(
+      watch(() => !refs.group ? null : refs.group.children, list => {hooks.onPlcTypes.exec(list || []);})
+    );
+
+    const isOpen = OpenController.inject();
+    if (!!isOpen) {
+      effects.push(
+        watch(() => isOpen(), async flag => {
+          if (!flag) {return;}
+          await nextTick();
+          updateWidth();
+        })
+      );
+    }
+
+    onBeforeUnmount(() => {effects.clear();});
+  })();
+
+  /*---------------------------------------computed-------------------------------------------*/
+
+  const runConfig = runOnce((plcList: tPlcType[], flatList: tPlc[]) => {!!props.config && props.config(plcList, flatList);});
+
+  const plcData = computed(() => {
+    if (!state.tableWidth || !state.getPlcTypeArr) {return null;}
+    const plcData = formatPlcList({
+      plcList: state.getPlcTypeArr(),
+      tableWidth: state.tableWidth,
+      plcConfigProcessor: runConfig,
+    });
+    // console.warn('onCollectPlcData');
+    onCollectPlcData(plcData);
+    return plcData;
+  });
+
+  const virtualFlatPlcList = (() => {
+    const state = reactive({ scrollLeft: 0 });
+    const setScrollLeft = throttle((scrollLeft: number) => {state.scrollLeft !== scrollLeft && (state.scrollLeft = scrollLeft);}, 50);
+    hooks.onScroll.use((e) => {setScrollLeft(e.target.scrollLeft);});
+    return computed((): tPlc[] => {
+      if (!plcData.value) {return [];}
+      const { targetTableWidth, tableWidth, flatPlcList } = plcData.value;
+      if (targetTableWidth == null || targetTableWidth - tableWidth < 400) {return flatPlcList;}
+
+      /*需要合并隐藏的左部分的列*/
+      let virtualLeftPlcList: tPlc[] = [];
+      /*需要合并隐藏的右部分的列*/
+      let virtualRightPlcRight: tPlc[] = [];
+      /*最后一个左固定列的index*/
+      let lastFixedLeftIndex = null as null | number;
+      /*第一个有固定的列的index*/
+      let firstFixedRightIndex = null as null | number;
+
+      const plcList = [...plcData.value?.flatPlcList || []];
+
+      /*左固定列总宽度，右固定列总宽度*/
+      const { left: fixedLeftWidth, right: fixedRightWidth } = plcList.reduce((prev, item) => {
+        if (!!item.props.fixed) {prev[item.props.fixed as 'left' | 'right'] += item.props.width;}
+        return prev;
+      }, { left: 0, right: 0 });
+
+      /*累计计算每个列距离表格左侧的距离*/
+      let left = 0;
+      plcList.forEach((plc, index) => {
+        if (plc.props.fixed === TablePlcFixedType.left) {
+          lastFixedLeftIndex = index;
+          left += plc.props.width;
+          return;
+        }
+        if (plc.props.fixed === TablePlcFixedType.right) {
+          if (firstFixedRightIndex == null) {firstFixedRightIndex = index;}
+          left += plc.props.width;
+          return;
+        }
+        /*列在当前滚动下距离左侧的值*/
+        const plcLeftValue = left - state.scrollLeft;
+        /*列在当前滚动下，右边界剧烈左侧的值*/
+        const plcRightValue = plcLeftValue + plc.props.width;
+
+        /*列的右边界小于左固定列的右边界*/
+        if (plcRightValue < fixedLeftWidth - 500) {
+          virtualLeftPlcList.push(plc);
+        }
+        /*列的左边界大于右固定列的左边界*/
+        if (plcLeftValue > tableWidth - fixedRightWidth + 500) {
+          virtualRightPlcRight.push(plc);
+        }
+        left += plc.props.width;
+      });
+
+      if (virtualLeftPlcList.length > 0) {
+        plcList.splice(plcList.findIndex(i => i == virtualLeftPlcList[0]), virtualLeftPlcList.length, buildVirtualPlc(virtualLeftPlcList.reduce((prev, item) => prev + item.props.width, 0), 'prev'));
+      }
+      if (virtualRightPlcRight.length > 0) {
+        plcList.splice(plcList.findIndex(i => i == virtualRightPlcRight[0]), virtualRightPlcRight.length, buildVirtualPlc(virtualRightPlcRight.reduce((prev, item) => prev + item.props.width, 0), 'next'));
+      }
+      return plcList;
+    });
+  })();
+
+  const bodyPlcList = computed(() => props.virtualColumn ? virtualFlatPlcList.value : plcData.value?.flatPlcList);
+
+  return {
+    plcData,
+    bodyPlcList,
+    plcDataState: state,
+  };
+}
+
+
+function buildVirtualPlc(width: number, plcKey: string): tPlc {
+  return {
+    plcKey,
+    level: 0,
+    rowspan: 0,
+    colspan: 0,
+    isLastFixedLeft: false,
+    isFirstFixedRight: false,
+    fixedPosition: {
+      left: 0,
+      right: 0,
+    },
+    styles: {
+      head: {},
+      body: {},
+    },
+    classes: {
+      head: {},
+      body: {},
+    },
+    group: false,
+    props: {
+      width,
+    } as any,
+    sourceProps: {
+      width,
+    } as any,
+    slots: {},
+    scopeSlots: {
+      head: Object.assign(() => {return null;}, { isExist: () => true }),
+      normal: Object.assign(() => {return null;}, { isExist: () => true }),
+      summary: Object.assign(() => {return null;}, { isExist: () => true }),
+      edit: Object.assign(() => {return null;}, { isExist: () => true }),
+      form: Object.assign(() => {return null;}, { isExist: () => true }),
+    },
+    event: {} as any,
+    refer: () => ({}) as any,
+    setDurWidth: () => {},
+    setPropsState: () => {},
+    getState: () => ({}) as any,
+    isRequired: () => false,
+    getWidth: () => 0,
+    isExclude: () => false,
+  };
+}

package/src/packages/components/Table/plc/utils/iteratePlcList.tsx

@@ -0,0 +1,48 @@
+import {tPlc, tPlcGroup, tPlcType} from "./plc.utils";
+
+export enum IteratePlcHandleType {
+  remove = 'remove',                      // 移除当前节点
+  nothing = 'nothing'                     // 什么事也不做
+}
+
+/**
+ * 在遍历plc的时候，操作类型，remove意思是遍历完这一次之删除这个plc或者plc组
+ * @author  韦胜健
+ * @date    2020/8/14 17:26
+ */
+export function iteratePlcList(
+  {
+    plcList,
+    onPlc,
+    onGroup,
+  }: {
+    plcList: tPlcType[],
+    onPlc: (plc: tPlc) => IteratePlcHandleType,
+    onGroup: (group: tPlcGroup) => IteratePlcHandleType,
+  }
+) {
+
+  for (let i = 0; i < plcList.length; i++) {
+    const plc = plcList[i];
+    if (!plc.group) {
+      const handleType = onPlc(plc);
+      if (handleType === IteratePlcHandleType.remove) {
+        plcList.splice(i, 1);
+        i--;
+      }
+    } else {
+      const handleType = onGroup(plc);
+      if (handleType === IteratePlcHandleType.remove) {
+        plcList.splice(i, 1);
+        i--;
+      } else {
+        iteratePlcList({ plcList: plc.children, onPlc, onGroup, });
+        // 当这个分组没有列的时候（可能都隐藏了），自动删除这个分组
+        if (plc.children.length === 0) {
+          plcList.splice(i, 1);
+          i--;
+        }
+      }
+    }
+  }
+}

package/src/packages/components/Table/plc/utils/plc.render.ts

@@ -0,0 +1,122 @@
+import {RenderNode} from "plain-design-composition";
+import {tPlc, tPlcType} from "./plc.utils";
+import {iTableCellRenderScope, iTableNode} from "../../table/utils/table.utils";
+
+/**
+ * 渲染表头单元格
+ * @author  韦胜健
+ * @date    2022/11/7 10:42
+ */
+export function renderHeadCell(plc: tPlcType) {
+  // 如果存在 props.head 渲染函数，则渲染 props.head
+  if (!plc.group && plc.scopeSlots.head.isExist()) {
+    return plc.scopeSlots.head({ plc });
+  }
+  return plc.props.title;
+}
+
+/**
+ * 渲染表体单元格
+ * @author  韦胜健
+ * @date    2022/11/7 10:42
+ */
+export function renderBodyCell(
+  {
+    node,
+    plc,
+    formEdit,
+    targetValue,
+  }: {
+    node: iTableNode,
+    plc: tPlc,
+    formEdit: boolean,
+    targetValue: any,
+  }
+) {
+  const editable = getEditable(plc, node, formEdit);
+  const body = getBodyCell({ node, plc, editable, formEdit, targetValue });
+  return {
+    editable,
+    body,
+  };
+}
+
+/**
+ * 判断当前是否可编辑
+ * 1. 如果当前行非编辑状态，则不可编辑
+ * 2. 如果列没有edit作用域插槽以及渲染函数，则不可编辑
+ * 3. 如果列的editable属性为函数，则计算这个函数的值来定性是否可编辑
+ *
+ * 这个【是否可编辑】值用来设置 body-cell 的样式，以便body-cell清楚地知道当前是否处于可编辑状态，并且设置padding
+ *
+ * @author  韦胜健
+ * @date    2020/7/21 21:16
+ */
+function getEditable(plc: tPlc, node: iTableNode, formEdit: boolean) {
+  // 行非编辑状态下，定性为不可编辑
+  if (!node.state.edit) {
+    return false;
+  }
+  if (formEdit) {
+    if (!plc.scopeSlots.form.isExist() && !plc.scopeSlots.edit.isExist()) {
+      return false;
+    }
+  }
+  // 如果没有edit渲染函数以及作用域插槽，那么直接定性为不可编辑
+  if (!plc.scopeSlots.edit.isExist()) {
+    return false;
+  }
+  return typeof plc.props.editable === "function" ? plc.props.editable(node) : (plc.props.editable !== false);
+}
+
+function getBodyCell(
+  {
+    node,
+    plc,
+    editable,
+    formEdit,
+    targetValue,
+  }: {
+    node: iTableNode,
+    plc: tPlc,
+    editable: boolean,
+    formEdit: boolean,
+    targetValue: any,
+  }
+): RenderNode {
+  let renderScope: iTableCellRenderScope;
+  if (node.isSummary) {
+    // 合计行中的row一直是原始的row对象
+    renderScope = { node, plc, row: node.data };
+    // 合计行，使用作用域插槽 summary渲染，没有则使用渲染函数summary渲染，么有则使用 default作用域插槽渲染，没有
+    // 则使用渲染函数default渲染，没有则直接渲染field对应的值
+    if (plc.scopeSlots.summary.isExist()) {
+      return plc.scopeSlots.summary(renderScope);
+    }
+    if (plc.scopeSlots.normal.isExist()) {
+      return plc.scopeSlots.normal(renderScope);
+    }
+    return targetValue;
+  } else {
+    // 如果当前行处于可编辑状态，则渲染的行数据对象为 rowData.editRow，否则为 rowData.data
+    let row = node.state.edit ? node.state.editRow : node.data;
+    renderScope = { node, plc, row };
+
+    if (editable) {
+      if (formEdit && plc.scopeSlots.form.isExist()) {
+        return plc.scopeSlots.form(renderScope);
+      }
+      // 当前一定存在 plc.scopedSlots.edit 或者 plc.props.edit，否则 editable不可能为true
+      if (plc.scopeSlots.edit.isExist()) {
+        return plc.scopeSlots.edit(renderScope);
+      }
+    } else {
+      // 当前单元格不可编辑，如果当前行处于编辑状态，则渲染的行数据为 tableNode.editRow，否则为 tableNode.data
+      // 使用作用域插槽default渲染，没有则使用渲染函数default渲染，没有则直接显示field对应的值
+      if (plc.scopeSlots.normal.isExist()) {
+        return plc.scopeSlots.normal(renderScope);
+      }
+      return targetValue;
+    }
+  }
+}

package/src/packages/components/Table/plc/utils/plc.scope-slots.ts

@@ -0,0 +1,63 @@
+import {iTableCellRenderScope} from "../../table/utils/table.utils";
+import {RenderNode, tScopeSlotsType, tSlotsType} from "plain-design-composition";
+import {tPlcType} from "./plc.utils";
+
+export type PlcRenderFunction = (scope: iTableCellRenderScope) => RenderNode
+
+/*渲染列标题单元格*/
+export type PlcPropsHead = (scope: { plc: tPlcType }) => RenderNode
+/*非编辑单元格*/
+export type PlcPropsDefault = PlcRenderFunction
+/*合计行单元格*/
+export type PlcPropsSummary = PlcRenderFunction
+/*编辑单元格*/
+export type PlcPropsEdit = PlcRenderFunction
+/*表单内容*/
+export type PlcPropsForm = PlcRenderFunction
+
+/**
+ * plc插槽类型
+ * @author  韦胜健
+ * @date    2022.10.29 19:02
+ */
+export type tPlcSlots = Record<string, ((defaultSlot?: RenderNode) => RenderNode) & { isExist: () => boolean }>
+
+/**
+ * plc标准作用域插槽配置选项
+ * @author  韦胜健
+ * @date    2022.10.29 19:02
+ */
+export const PlcScopeSlotsOptions = {
+  head: {} as PlcPropsHead,                       // 列标题渲染函数
+  normal: {} as PlcPropsDefault,                  // 列内容默认渲染函数
+  summary: {} as PlcPropsSummary,                 // 列内容在合计行上的渲染函数
+  edit: {} as PlcPropsEdit,                       // 列内容在编辑状态下的渲染函数
+  form: {} as PlcPropsForm,                       // 表单编辑时渲染的内容
+};
+
+/**
+ * plc标准作用域插槽类型
+ * @author  韦胜健
+ * @date    2022.10.29 19:02
+ */
+export type tPlcScopeSlots = tScopeSlotsType<typeof PlcScopeSlotsOptions>
+
+/**
+ * 列分组作用域插槽配置
+ * @author  韦胜健
+ * @date    2022.10.29 19:19
+ */
+export const PlcGroupScopeSlotsOptions = {
+  head: {} as PlcPropsHead,                       // 列标题渲染函数
+};
+
+export type tPlcGroupScopeSlots = tScopeSlotsType<typeof PlcGroupScopeSlotsOptions>
+
+/**
+ * PlcGroup插槽配置
+ * @author  韦胜健
+ * @date    2022.10.29 19:21
+ */
+export const PlcGroupSlotsOptions = ['default'] as const;
+
+export type tPlcSlotsType = tSlotsType<typeof PlcGroupSlotsOptions>