plain-design 0.0.97 → 1.0.0-beta.10

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

@@ -0,0 +1,299 @@
+import {ComponentEvent, ExtractPropTypes, iMouseEvent, MultipleClass, PropType, StyleProperties} from "plain-design-composition";
+import {createEnum} from "plain-utils/utils/createEnum";
+import {PlcPropsHead, tPlcScopeSlots, tPlcSlots} from "./plc.scope-slots";
+import {FormItemValidatePropsOption} from "../../../Form/validate/validate.utils";
+import {iTableCellRenderScope, iTableNode} from "../../table/utils/table.utils";
+import {deepcopy} from "plain-utils/object/deepcopy";
+import {PlainObject} from "plain-utils/utils/event";
+import {omit} from "../../../../utils/omit";
+import {createCounter} from "plain-utils/utils/createCounter";
+import {iFilterOption} from "../../../FilterService/utils/filter.service.utils";
+import {AsyncFormatter} from "../../../AsyncFormatter";
+import {Formatter} from "../../../Formatter";
+
+/**
+ * 列对其方式
+ * @author  韦胜健
+ * @date    2022.10.29 18:15
+ */
+export const ePlcAlign = createEnum(['left', 'center', 'right'] as const);
+
+/**
+ * 列冻结位置
+ * @author  韦胜健
+ * @date    2022.10.29 18:15
+ */
+export const TablePlcFixedType = createEnum(['left', 'center', 'right'] as const);
+
+/**
+ * 列分组属性配置
+ * @author  韦胜健
+ * @date    2022.10.29 18:16
+ */
+export const PlcGroupPropsOptions = {
+  title: { type: String },                                                  // 列标题
+  align: { type: String as PropType<typeof ePlcAlign.TYPE> },               // 非编辑状态下文本对其方式
+  noPadding: { type: Boolean },                                             // 是否不兼容表格的虚拟滚动功能
+  colDraggable: { type: Boolean, default: null },                           // 列是否可以拖拽排序
+  link: { type: Boolean },                                                  // 超链接样式
+
+  hide: { type: Boolean },                                                  // 是否隐藏
+  order: { type: [String, Number] },                                        // 列排序
+  fixed: { type: String as PropType<typeof TablePlcFixedType.TYPE>, default: TablePlcFixedType.center },// 冻结列位置：left、right、undefined
+  autoFixedLeft: { type: Boolean },                                         // 当出现左固定列的时候，是否自动设置为左固定列
+  autoFixedRight: { type: Boolean },                                        // 当出现右固定列的时候，是否自动设置为右固定列
+
+  headCls: {},                                                              // 给表头添加的class
+  bodyCls: {},                                                              // 给表体添加的class
+  disableAutoEmitClickTitle: { type: Boolean },                             // 禁用自动派发点击列标题的动作
+};
+
+export type iPlcGroupPropsType = Omit<ExtractPropTypes<typeof PlcGroupPropsOptions>, 'order'> & { order?: number | undefined }
+
+export const PlcValidatePropsOption = omit(FormItemValidatePropsOption, ['field', 'label']);
+
+/**
+ * 列属性配置
+ * @author  韦胜健
+ * @date    2022.10.29 18:16
+ */
+export const PlcPropsOptions = {
+  ...PlcGroupPropsOptions,
+  field: { type: String },                                                  // 列绑定字段
+  width: { type: [String, Number], default: 120 },                          // 列宽度
+  fit: { type: Boolean },                                                   // 列宽自适应(只有一个列能够自适应)
+  formatter: { type: [Function, String] as PropType<string | ((value: any, cellRenderScope: Omit<iTableCellRenderScope, 'node'>) => string | number | null | undefined)> }, // 值格式化函数
+  asyncFormatter: { type: [Function, String] as PropType<string | ((value: any, cellRenderScope: Omit<iTableCellRenderScope, 'node'>) => Promise<string | number | null | undefined>)> }, // 异步格式化函数
+  formatterOptions: { type: Object as PropType<PlainObject> },              // 格式化的时候的参数
+  bindId: { type: String },                                                 // 绑定的id，仅用于父子列的情况下有用，当出现父子列时，子列跟随父列的fixed，hidden以及order顺序
+  parentBindId: { type: String },                                           // 当前列为子列，这里为父列的bindId
+  excludeCode: { type: String },                                            // 配合PlcExclusion使用的标识
+  hideInForm: { type: Boolean },                                            // 是否再表单编辑中显示
+  formLabel: { type: String },                                              // 在表单编辑中的label文本
+  overflowTooltip: { type: Boolean },                                       // 是否在内容文本溢出之后使用tooltip显示
+
+  // 编辑相关
+  ...PlcValidatePropsOption,                                                // 校验属性
+  editable: { type: [Boolean, Function] as PropType<PlcPropsEditable>, default: true },// 是否可编辑
+  addEditPadding: { type: Boolean },                                        // 处于编辑状态的时候，是否添加内编辑，只有当行状态为编辑状态，并且列有edit渲染函数或者作用域插槽时，才符合“处于编辑状态”的条件
+  editColSpan: { type: [Number, Function] as PropType<number | ((node: iTableNode) => number)> }, // 编辑时colspan
+
+  /*---------------------------------------筛选-------------------------------------------*/
+  // 基础
+  noFilter: { type: Boolean },                                              // 该字段不参与搜索
+  noSort: { type: Boolean },                                                // 该字段不参与排序
+  searchField: { type: String },                                            // 搜索的字段，没有则沿用field
+  filterType: { type: String, default: 'text' },                            // 筛选类型
+  filterHandler: { type: String, default: 'like' },                         // 筛选的子类型
+  filterConfig: { type: Object as PropType<PlainObject> },                  // 筛选配置
+  // 搜索栏
+  defaultSearch: { type: Boolean },                                         // 设置为搜索栏的默认搜索字段
+  defaultSearchValue: {},                                                   // 默认的搜索值
+  createSearchFilterOption: { type: Function as PropType<() => Partial<iFilterOption>> }, // 自定义创建 search filter option
+  // 搜索表单
+  createFormFilterOption: { type: Function as PropType<() => Partial<iFilterOption>> }, // 自定义创建 form filter option
+  // 列搜索
+  createColumnFilterOption: { type: Function as PropType<() => Partial<iFilterOption>> }, // 自定义创建 column filter option
+  // 列去重查询
+  createDistinctFilterOption: { type: Function as PropType<() => Partial<iFilterOption>> }, // 自定义创建 column filter option
+  // 高级查询
+  createSeniorFilterOption: { type: Function as PropType<() => Partial<iFilterOption>> }, // 自定义创建 column filter option
+};
+
+export type PlcPropsEditable = boolean | ((node: iTableNode) => boolean)
+export type iPlcPropsSourceType = ExtractPropTypes<typeof PlcPropsOptions>
+export type iPlcPropsType = Omit<iPlcPropsSourceType, 'width' | 'order'> & { width: number, order?: number | undefined }
+
+type _iPlcPropsProxyConfig<T, K extends keyof T = keyof T> = { [k in K]: () => T[k] }
+export type iPlcPropsProxyConfig = Partial<_iPlcPropsProxyConfig<iPlcPropsSourceType>>
+
+/**
+ * 列派发事件配置
+ * @author  韦胜健
+ * @date    2022.10.29 18:18
+ */
+export const PlcEmitsOptions = {
+  onClick: (data: { e: iMouseEvent, scope: iTableCellRenderScope }) => true,
+} as const;
+
+export type iPlcEventType = ComponentEvent<typeof PlcEmitsOptions>
+
+/**
+ * Plc与PlcGroup公共属性
+ * @author  韦胜健
+ * @date    2022.10.29 18:57
+ */
+export type tPlcPublicAttrsType = {
+  level: number,                      // 分组表头层级
+  rowspan: number,                    // 表头td的rowspan
+  colspan: number,                    // 表头td的colspan
+  isLastFixedLeft: boolean,           // 是否为最后一个左固定列
+  isFirstFixedRight: boolean,         // 是否为第一个右固定列
+  fixedPosition: {                    // 固定列的sticky位置
+    left: number,                     // 固定时距离左侧距离
+    right: number,                    // 固定时距离右侧距离
+  },
+  // 列style公共内联样式
+  styles: {
+    head: StyleProperties,
+    body: StyleProperties,
+  },
+  // 列公共class样式
+  classes: {
+    head: MultipleClass,
+    body: MultipleClass,
+  },
+  isExclude: () => boolean,
+}
+
+/**
+ * Plc以及PlcGroup公共的一些属性
+ * @author  韦胜健
+ * @date    2020/12/18 14:41
+ */
+export const PlcPublicAttrs: tPlcPublicAttrsType = {
+  level: 0,                         // 分组表头当前的层级
+  rowspan: 1,                       // 渲染表头时，当前占用的行数
+  colspan: 1,                       // 渲染表头时，当前占用的列数
+  isLastFixedLeft: false,           // 是否为最后一个左固定列
+  isFirstFixedRight: false,         // 是否为第一个右固定列
+  fixedPosition: {                  // 固定列时的距离
+    left: 0,                        // 左固定时距离左侧距离
+    right: 0,                       // 右固定时距离右侧距离
+  },
+  // 列style公共内联样式
+  styles: {
+    head: {},
+    body: {},
+  },
+  // 列公共class样式
+  classes: {
+    head: [],
+    body: [],
+  },
+  isExclude: () => false,
+};
+
+/**
+ * 收集得到的plc group引用类型
+ * @author  韦胜健
+ * @date    2022.10.29 18:59
+ */
+export type tPlcGroup = tPlcPublicAttrsType & {
+  plcKey: string,                                               // 列标识
+  group: true,                                                  // 标记当前tPlcType为分组
+  children: tPlcType[],                                         // 子列信息
+  props: iPlcGroupPropsType,                                    // plc group属性
+  refer: () => tPlcGroup,                                       // 自身引用
+  slots: { head: PlcPropsHead & { isExist: () => boolean } },   // 插槽类型
+  setDurWidth: (width: number) => void,                         // 设置宽度
+  setPropsState: (data: Partial<iPlcGroupPropsType>) => void,   // 设置props内部状态
+  getState: () => iPlcPropsType,                                // 获取状态
+  getWidth: () => number,                                       // 获取宽度
+}
+
+/**
+ * 手机得到的plc引用类型
+ * @author  韦胜健
+ * @date    2022.10.29 19:05
+ */
+export type tPlc = tPlcPublicAttrsType & {
+  plcKey: string,                                               // 列标识
+  group: false,                                                 // 标记当前tPlcType不为分组，为列信息
+  props: iPlcPropsType,                                         // plc 列属性（非原始，可能是修改过的）
+  sourceProps: ExtractPropTypes<typeof PlcPropsOptions> & PlainObject, // 原始的列属性
+  slots: tPlcSlots,                                             // 插槽类型
+  scopeSlots: tPlcScopeSlots,                                   // 作用域插槽类型
+  event: iPlcEventType,                                         // 列事件
+  refer: () => tPlc,                                            // 自身引用
+  setDurWidth: (width: number) => void,                         // 设置宽度
+  setPropsState: (data: Partial<iPlcPropsType>) => void,        // 设置内部props状态
+  getState: () => iPlcPropsType,                                // 获取状态
+  isRequired: (data: PlainObject) => boolean,                   // 字段是否为必填
+  getWidth: () => number,                                       // 获取宽度
+}
+
+export type tPlcType = tPlcGroup | tPlc
+
+/**
+ * 创建默认的plc属性
+ * @author  韦胜健
+ * @date    2022/11/7 18:42
+ */
+export function createPlcPropOptions(defaultProps: Partial<ExtractPropTypes<typeof PlcPropsOptions>>) {
+  const options = deepcopy(PlcPropsOptions);
+  Object.entries(defaultProps).forEach(([propName, defaultValue]) => {
+    (options as any)[propName].default = defaultValue;
+  });
+  return options;
+}
+
+/**
+ * 获取一个新的plc bindId
+ * @author  韦胜健
+ * @date    2022.12.4 21:57
+ */
+export const nextPlcBindId = createCounter('plc_bind');
+
+/**
+ * 获取一个新的plc key
+ * @author  韦胜健
+ * @date    2023/1/19 15:55
+ */
+export const nextPlcKey = createCounter('plc_key');
+
+/**
+ * 获取plc对应的显示文本值
+ * @author  韦胜健
+ * @date    2023.1.14 23:24
+ */
+export async function getPlcDisplayValue({ plc, formData }: { plc: tPlc, formData: PlainObject }) {
+  const { formatter, asyncFormatter, formatterOptions, field } = plc.props;
+  if (!field) {return;}
+  const value = formData[field];
+
+  if (!!asyncFormatter) {
+    const asyncFormatterFunc = typeof asyncFormatter === "function" ? asyncFormatter : AsyncFormatter[asyncFormatter];
+    if (!asyncFormatterFunc) {
+      console.error(`无法识别格式化函数名称：${asyncFormatter}`);
+      return;
+    }
+    return asyncFormatterFunc(value, { ...formatterOptions, plc, row: formData });
+  } else if (!!formatter) {
+    const formatterFunc = typeof formatter === "function" ? formatter : Formatter[formatter];
+    if (!formatterFunc) {
+      console.error(`无法识别格式化函数名称：${formatterFunc}`);
+      return;
+    }
+    return formatterFunc(value, { ...formatterOptions, plc, row: formData });
+  } else {
+    return formData[field];
+  }
+}
+
+/**
+ * 获取比较纯净的plc属性
+ * @author  韦胜健
+ * @date    2023.1.16 22:52
+ */
+export function getPurePlcProps(props: any) {
+  return !props ? {} : Object.entries(props).reduce((prev, [key, val]) => {
+    if (key === 'link' || key.indexOf('on') === 0) {return prev;}
+    prev[key] = val;
+    return prev;
+  }, {} as PlainObject);
+}
+
+export function createProxyProps(props: iPlcPropsSourceType, proxyConfig: iPlcPropsProxyConfig | null | undefined) {
+  if (!proxyConfig) {
+    return props;
+  }
+  return new Proxy(props, {
+    get(target: any, key) {
+      if (!!(proxyConfig as any)[key] && target[key] == null) {
+        return (proxyConfig as any)[key]();
+      }
+      return target[key];
+    },
+  });
+}

package/src/packages/components/Table/standard/PlcCheck/PlcCheck.hooks.tsx

@@ -0,0 +1,16 @@
+import {createHooks, createSyncHooks, RenderNode} from "plain-design-composition";
+import {iTableCellRenderScope, iTableRowRenderScope} from "../../table/utils/table.utils";
+
+export function createPlcCheckHooks() {
+  return {
+    onRenderNormal: createSyncHooks<(data: { scope: iTableCellRenderScope, content: RenderNode }) => void>(),
+    onRenderHead: createSyncHooks<(renderNode: RenderNode) => void>(),
+    onClickRow: createHooks<(data: { rowRenderScope: iTableRowRenderScope }) => void>(),
+
+    onTriggerCheckAll: createHooks(),
+    onTriggerUncheckAll: createHooks(),
+    onGetSelected: createSyncHooks<(data: any) => void>(),
+  };
+}
+
+export type iPlcCheckHooks = ReturnType<typeof createPlcCheckHooks>

package/src/packages/components/Table/standard/PlcCheck/PlcCheck.multiple.tsx

@@ -0,0 +1,281 @@
+import {iPlcCheckEventType, iPlcCheckPropsType} from "./PlcCheck.utils";
+import {computed, reactive, toRaw, useModel} from "plain-design-composition";
+import {toArray} from "plain-utils/utils/toArray";
+import {PlainObject} from "plain-utils/utils/event";
+import {iTableRowRenderScope} from "../../table/utils/table.utils";
+import {CheckboxStatus} from "../../../../utils/constant";
+import {Checkbox} from "../../../Checkbox";
+import {iPlcCheckHooks} from "./PlcCheck.hooks";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {iTableRefer} from "../../table/Table";
+import {Badge} from "../../../Badge";
+import {Dropdown} from "../../../Dropdown";
+import {DropdownOption} from "../../../DropdownOption";
+import {$dialog} from "../../../$dialog";
+import {Table} from "../../index";
+import {PlcCheck} from "./PlcCheck";
+import {findReactElement} from "../../../../utils/findReactElement";
+import {$message} from "../../../$message";
+import {deepcopy} from "plain-utils/object/deepcopy";
+import {tPlc} from "../../plc/utils/plc.utils";
+import {deepCloneRenderNode} from "../../../../utils/deepCloneRenderNode";
+import {nextPlcExcludeCode, PlcExclusion} from "../PlcExclusion";
+import {PlcIndex} from "../PlcIndex";
+import i18n from "../../../i18n";
+
+export function usePlcCheckMultiple(
+  {
+    props,
+    event,
+    hooks,
+    table,
+  }: {
+    props: iPlcCheckPropsType,
+    event: iPlcCheckEventType,
+    hooks: iPlcCheckHooks,
+    table: iTableRefer,
+  }
+) {
+
+  const { effects } = createEffects();
+
+  /**
+   * 双向绑定值
+   * @author  韦胜健
+   * @date    2022.11.27 16:36
+   */
+  const model = useModel(() => props.modelValue as PlainObject[] | null | undefined, event.emit.onUpdateModelValue as any);
+
+  /**
+   * 已经选中的keys
+   * @author  韦胜健
+   * @date    2022.11.27 16:36
+   */
+  const checkKeys = computed(() => {
+    if (!model.value) {return {};}
+    return toArray(model.value).reduce((prev, item) => {
+      prev[item[props.field]] = true;
+      return prev;
+    }, {} as Record<string, boolean>);
+  });
+
+  const utils = {
+    /**
+     * 判断数据是否已经选中
+     * @author  韦胜健
+     * @date    2022.11.27 16:58
+     */
+    isChecked: (row: PlainObject): boolean => checkKeys.value[row[props.field]],
+  };
+
+  const methods = {
+    /**
+     * 选中数据，如果已经选中则更新选中数据
+     * @author  韦胜健
+     * @date    2022.11.27 17:07
+     */
+    check: (row: PlainObject) => {
+      const value = [...(model.value as any[] | undefined | null || [])];
+      const index = value.findIndex(i => i[props.field] === row[props.field]);
+      if (index > -1) {
+        if (toRaw(value[index]) !== toRaw(row)) {
+          /*更新选中的数据*/
+          value[index] = row;
+          model.value = value;
+        }
+      } else {
+        /*选中该数据*/
+        value.push(row);
+        model.value = value;
+      }
+    },
+    /**
+     * 取消选中数据
+     * @author  韦胜健
+     * @date    2022.11.27 17:07
+     */
+    uncheck: (row: PlainObject) => {
+      const value = [...(model.value as any[] | undefined | null || [])];
+      const index = value.findIndex(i => i[props.field] === row[props.field]);
+      if (index > -1) {
+        /*取消选中数据*/
+        value.splice(index, 1);
+        model.value = value;
+      }
+    },
+    /**
+     * 切换选中状态
+     * @author  韦胜健
+     * @date    2022.11.27 16:58
+     */
+    toggleCheck: (row: PlainObject) => {
+      if (utils.isChecked(row)) {
+        methods.uncheck(row);
+      } else {
+        methods.check(row);
+      }
+    },
+    checkAll: () => {
+      table.bodyNodes.value.forEach(i => {
+        methods.check(i.data);
+      });
+    },
+    uncheckAll: () => {
+      table.bodyNodes.value.forEach(i => {
+        methods.uncheck(i.data);
+      });
+    },
+    reverse: () => {
+      table.bodyNodes.value.forEach(i => {
+        methods.toggleCheck(i.data);
+      });
+    },
+    showAll: () => {
+
+      const data = deepcopy([...(model.value as PlainObject[] | null | undefined || [])]);
+      const state = reactive({
+        checked: [...data] as any
+      });
+
+      const getTableSlots = () => table.slots.default();
+
+      const tableWidth = table.plcData.value?.tableWidth || 800;
+      /*当弹框以及开始关闭的时候，就不要提示插槽解析错误的消息*/
+      let isHide = false;
+
+      $dialog({
+        size: table.styleComputed.value.size,
+        width: 'auto',
+        minWidth: 'auto',
+        maxWidth: 'auto',
+        onHide: () => {isHide = true;},
+        render: () => {
+
+          const tableSlots = deepCloneRenderNode(getTableSlots());
+
+          /*渲染的所有source plc*/
+          const checkNodes = findReactElement(tableSlots, (node: any) => node.type?.use?.name === PlcCheck.use.name) || [];
+
+          /*plc check的属性*/
+          const plcCheckProps: null | { field: string } & PlainObject = (() => {
+            const plcCheckNodeIndex: any = checkNodes.findIndex((i: any) => i.type?.use?.name === PlcCheck.use.name);
+            if (plcCheckNodeIndex == null || plcCheckNodeIndex == -1) {
+              !isHide && $message(`解析插槽内容错误，无法解析多选列信息！`);
+              return null;
+            }
+            /*继承原来的plc check列属性*/
+            const plcCheckNode: any = checkNodes[plcCheckNodeIndex];
+            const plcCheckProps = { ...plcCheckNode?.props };
+            delete plcCheckProps.modelValue;
+            delete plcCheckProps.ref;
+            delete plcCheckProps.key;
+            delete plcCheckProps['onUpdate:modelValue'];
+            delete plcCheckProps['onUpdateModelValue'];
+            return plcCheckProps;
+          })();
+
+          const excludeCode = nextPlcExcludeCode();
+
+          const isExclude = (i: tPlc): boolean => {
+            if (i.props.excludeCode === excludeCode) {
+              return false;
+            }
+            if (!!plcCheckProps && i.props.field === plcCheckProps.field && !i.props.title) {
+              return true;
+            }
+            return !i.props.field;
+          };
+
+          return (
+            <div style={{ width: `${Math.min(tableWidth, 800)}px` }}>
+              <PlcExclusion isExclude={isExclude}>
+                <Table data={data} showRows={10} size={table.styleComputed.value.size}>
+                  {!!plcCheckProps?.field && (
+                    <PlcCheck {...{
+                      ...plcCheckProps,
+                      key: '@@check-all',
+                      modelValue: state.checked,
+                      onUpdateModelValue: val => state.checked = val,
+                      hideShowAllButton: true,
+                      excludeCode: excludeCode,
+                    }}/>
+                  )}
+                  <PlcIndex excludeCode={excludeCode}/>
+                  {tableSlots}
+                </Table>
+              </PlcExclusion>
+            </div>
+          );
+        },
+        confirmButton: true,
+        cancelButton: true,
+        onConfirm: () => {
+          const value = [...model.value || []] as PlainObject[];
+          model.value = (state.checked as PlainObject[]).map(i => value.find(j => j[props.field] === i[props.field])!);
+        },
+      });
+    },
+  };
+
+  const handler = {
+    onClickCheckbox: (rowRenderScope: iTableRowRenderScope) => {
+      // /*并且判断为不可选中的话，如果已经选中则取消选中，未选中则不处理任何动作???todo*/
+      if (!!props.isCheckAble && !props.isCheckAble(rowRenderScope) && !utils.isChecked(rowRenderScope.row)) {
+        return;
+      }
+      methods.toggleCheck(rowRenderScope.row);
+    },
+  };
+
+  effects.push(hooks.onTriggerCheckAll.use(() => {methods.checkAll();}));
+
+  effects.push(hooks.onTriggerUncheckAll.use(() => {methods.uncheckAll();}));
+
+  effects.push(hooks.onGetSelected.use(() => model.value));
+
+  effects.push(hooks.onClickRow.use(({ rowRenderScope }) => {handler.onClickCheckbox(rowRenderScope);}));
+
+  effects.push(hooks.onRenderHead.use(() => (
+    <Dropdown
+      arrowSize={0}
+      trigger="hover"
+      v-slots={{
+        reference: () => (
+          <Badge data={model.value?.length} status="primary">
+            <Checkbox
+              customReadonly
+              onClick={methods.checkAll}
+            />
+          </Badge>
+        ),
+        popper: () => <>
+          <DropdownOption label={i18n('base.select.all').d('全选')} icon="pi-select-all" onClick={methods.checkAll}/>
+          <DropdownOption label={i18n('base.clear').d('清空')} icon="pi-menu" onClick={methods.uncheckAll}/>
+          {!!model.value?.length && <>
+            <DropdownOption label={i18n('base.select.reverse').d('反选')} icon="pi-unordered-list" onClick={methods.reverse}/>
+            {!props.hideShowAllButton && <DropdownOption label={i18n('base.lookUp').d('查看')} icon="pi-ordered-list" onClick={methods.showAll}/>}
+          </>}
+        </>
+      }}
+    />
+  )));
+
+  effects.push(hooks.onRenderNormal.use(({ scope }) => ({
+    scope,
+    content: (
+      <Checkbox
+        checkStatus={utils.isChecked(scope.row) ? CheckboxStatus.check : CheckboxStatus.uncheck}
+        disabled={props.isCheckAble ? props.isCheckAble(scope) : false}
+        onClick={() => !props.toggleOnClickRow && handler.onClickCheckbox(scope)}
+      />
+    )
+  })));
+
+  effects.push(table.hooks.onRowClass.use(({ classList, node }) => {
+    if (utils.isChecked(node.data)) {
+      classList.push('plt-row-checked');
+    }
+  }));
+
+  return effects.clear;
+}

package/src/packages/components/Table/standard/PlcCheck/PlcCheck.single.tsx

@@ -0,0 +1,90 @@
+import {iPlcCheckEventType, iPlcCheckPropsType} from "./PlcCheck.utils";
+import {useModel} from "plain-design-composition";
+import {PlainObject} from "plain-utils/utils/event";
+import {iTableRowRenderScope} from "../../table/utils/table.utils";
+import {Radio} from "../../../Radio";
+import {CheckboxStatus} from "../../../../utils/constant";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {iPlcCheckHooks} from "./PlcCheck.hooks";
+import {iTableRefer} from "../../table/Table";
+
+export function usePlcCheckSingle(
+  {
+    props,
+    event,
+    hooks,
+    table,
+  }: {
+    props: iPlcCheckPropsType,
+    event: iPlcCheckEventType,
+    hooks: iPlcCheckHooks,
+    table: iTableRefer,
+  }
+) {
+
+  const { effects } = createEffects();
+
+  /**
+   * 双向绑定值
+   * @author  韦胜健
+   * @date    2022.11.27 16:36
+   */
+  const model = useModel(() => props.modelValue as PlainObject | null | undefined, event.emit.onUpdateModelValue as any);
+
+  const utils = {
+    /**
+     * 判断节点是否选中
+     * @author  韦胜健
+     * @date    2022.11.27 17:14
+     */
+    isChecked: (row: PlainObject) => {
+      return model.value?.[props.field] === row[props.field];
+    },
+  };
+
+  const methods = {
+    check: (row: PlainObject) => {
+      model.value = row;
+    },
+    toggleCheck: (row: PlainObject) => {
+      methods.check(row);
+    },
+  };
+
+  const handler = {
+    onClickCheckbox: (rowRenderScope: iTableRowRenderScope) => {
+      // /*并且判断为不可选中的话，如果已经选中则取消选中，未选中则不处理任何动作???todo*/
+      if (!!props.isCheckAble && !props.isCheckAble(rowRenderScope) && !utils.isChecked(rowRenderScope.row)) {
+        return;
+      }
+      methods.toggleCheck(rowRenderScope.row);
+    },
+  };
+
+  effects.push(hooks.onGetSelected.use(() => model.value));
+
+  effects.push(hooks.onClickRow.use(({ rowRenderScope }) => {
+    handler.onClickCheckbox(rowRenderScope);
+  }));
+
+  effects.push(hooks.onRenderHead.use(() => ('')));
+
+  effects.push(hooks.onRenderNormal.use(({ scope }) => ({
+    scope,
+    content: (
+      <Radio
+        checkStatus={utils.isChecked(scope.row) ? CheckboxStatus.check : CheckboxStatus.uncheck}
+        customReadonly
+        onClick={() => !props.toggleOnClickRow && handler.onClickCheckbox(scope)}
+      />
+    )
+  })));
+
+  effects.push(table.hooks.onRowClass.use(({ classList, node }) => {
+    if (utils.isChecked(node.data)) {
+      classList.push('plt-row-checked');
+    }
+  }));
+
+  return effects.clear;
+}