plain-design 1.0.0-beta.7 → 1.0.0-beta.71

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

@@ -1,281 +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;
-}
+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.$it('base.select.all').d('全选')} icon="pi-select-all" onClick={methods.checkAll}/>
+          <DropdownOption label={i18n.$it('base.clear').d('清空')} icon="pi-menu" onClick={methods.uncheckAll}/>
+          {!!model.value?.length && <>
+            <DropdownOption label={i18n.$it('base.select.reverse').d('反选')} icon="pi-unordered-list" onClick={methods.reverse}/>
+            {!props.hideShowAllButton && <DropdownOption label={i18n.$it('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;
+}