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

package/src/packages/components/Table/standard/PlcOperation/PlcOperation.tsx

@@ -1,385 +1,385 @@
-import {computed, designComponent, onBeforeUnmount, PropType, reactive, watch, watchEffect} from "plain-design-composition";
-import {eTableOperationPosition, iTableInnerOperation, iTableInnerOperationConfig, iTableOperation, iTableOperationPermitConfig, nextOperationKey, TableOperationDefaultTypeSeq} from "./PlcOperation.utils";
-import {iTableCellRenderScope, iTableNode, iTableRowRenderScope} from "../../table/utils/table.utils";
-import {createPlcPropOptions, PlcPropsOptions} from "../../plc/utils/plc.utils";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {injectPlainTable} from "../../table/Table";
-import {delay} from "plain-utils/utils/delay";
-import {removeUnit} from "plain-utils/string/removeUnit";
-import {Plc} from "../../plc/plc/Plc";
-import {Button} from "../../../Button";
-import {Dropdown} from "../../../Dropdown";
-import {Icon} from "../../../Icon";
-import {DropdownOption} from "../../../DropdownOption";
-import {PlcScopeSlotsOptions} from "../../plc/utils/plc.scope-slots";
-import {iOperationPermission, useOperationPermission} from "./useOperationPermission";
-import i18n from "../../../i18n";
-import {pick} from "plain-utils/object/pick";
-
-export const PlcOperation = designComponent({
-  name: 'plc-operation',
-  props: {
-    ...createPlcPropOptions({
-      fixed: 'right',
-      order: 9995,
-      width: null as any,
-      align: 'left',
-      hideInForm: true,
-      title: (() => i18n.$it('base.operation').d('操作')) as any,
-      noFilter: true,
-      noSort: true,
-    }),
-    permit: { type: [Object, Function] as PropType<iTableOperationPermitConfig | (() => iOperationPermission)> },    // 权限控制
-    operations: { type: Array as PropType<iTableOperation[]> },           // 外部按钮以及操作列按钮
-    collapseLength: { type: Number, default: 4 },                         // 最多显示按钮的数量，超过会折叠下拉显示
-    autoSwitchInlineSaveOperation: { type: Boolean },                     // 自动根据行的编辑状态显示行的保存按钮
-  },
-  scopeSlots: {
-    summary: PlcScopeSlotsOptions.summary,
-  },
-  emits: {
-    onClickNodeSaveOperation: (node: iTableNode) => true,
-    onClickNodeCancelOperation: (node: iTableNode) => true,
-  },
-  setup({ props, event, scopeSlots }) {
-
-    const table = injectPlainTable();
-
-    const { effects } = createEffects();
-
-    /**
-     * 每个列有个唯一标识，以便读取宽度
-     * @author  韦胜健
-     * @date    2022.11.25 19:16
-     */
-    const key = nextOperationKey();
-
-    const passPlcPropKeys = Object.keys(createPlcPropOptions({})) as (keyof typeof PlcPropsOptions)[];
-
-    /**
-     * 内部按钮配置
-     * @author  韦胜健
-     * @date    2022.11.23 23:15
-     */
-    const innerOperationConfigs = computed((): iTableInnerOperationConfig[] => {
-      const propsInnerOperations: iTableInnerOperationConfig[] = [];
-      props.operations?.forEach(i => {i.position === eTableOperationPosition.inner && propsInnerOperations.push(i);});
-      return propsInnerOperations;
-    });
-
-    /**
-     * 内部按钮类型
-     * @author  韦胜健
-     * @date    2022.11.23 23:21
-     * @return  null没有按钮，dynamic全是动态按钮，static全是静态按钮，complex动态静态都有
-     */
-    const innerOperationType = computed((): null | 'dynamic' | 'static' | 'complex' => {
-      const list = innerOperationConfigs.value;
-      if (list.length === 0) {return null;}
-      const dynamics: iTableInnerOperationConfig[] = [];
-      const statics: iTableInnerOperationConfig[] = [];
-      list.forEach(item => {
-        if (typeof item.label === "function" || typeof item.show === "function") {
-          dynamics.push(item);
-        } else {
-          statics.push(item);
-        }
-      });
-      if (statics.length > 0 && dynamics.length === 0) {
-        return 'static';
-      } else if (statics.length === 0 && dynamics.length > 0) {
-        return 'dynamic';
-      } else {
-        return 'complex';
-      }
-    });
-
-    const permission = (() => {
-      const { permit } = props;
-      if (!!permit && typeof permit === "function") {
-        return permit();
-      } else {
-        return useOperationPermission(() => props.permit as iTableOperationPermitConfig);
-      }
-    })();
-
-    /**
-     * 计算内部按钮
-     * @author  韦胜健
-     * @date    2022/11/23 17:40
-     */
-    const innerOperationsList = computed((): iTableInnerOperation[][] => {
-      /*是否有配置内部按钮*/
-      if (innerOperationConfigs.value.length === 0) {return [];}
-      /*计算每一行的内部按钮*/
-      const operationsList: iTableInnerOperation[][] = [];
-      table.bodyNodes.value.forEach((node) => {
-        const rowRenderScope: iTableRowRenderScope = { node, row: node.data };
-        const operations: iTableInnerOperation[] = [];
-        innerOperationConfigs.value.forEach(i => {
-          const { position, handler, render } = i;
-          const type = typeof i.type === "function" ? i.type(rowRenderScope) : i.type || 'other';
-          const operation: iTableInnerOperation = {
-            label: typeof i.label === "function" ? i.label(rowRenderScope) : i.label,
-            show: typeof i.show === "function" ? i.show(rowRenderScope) : i.show !== false,
-            seq: typeof i.seq === "function" ? i.seq(rowRenderScope) : i.seq || TableOperationDefaultTypeSeq[type],
-            code: typeof i.code === "function" ? i.code(rowRenderScope) : i.code || `${position}-${type}`,
-            buttonAttrs: typeof i.buttonAttrs === "function" ? i.buttonAttrs(rowRenderScope) : i.buttonAttrs || undefined,
-            type,
-            disabled: typeof i.disabled === "function" ? i.disabled(rowRenderScope) : !!i.disabled,
-            position,
-            handler,
-            mode: typeof i.mode === "function" ? i.mode(rowRenderScope) : i.mode,
-            status: typeof i.status === "function" ? i.status(rowRenderScope) : i.status,
-            icon: typeof i.icon === "function" ? i.icon(rowRenderScope) : i.icon,
-            render,
-          };
-          if (
-            permission.permit.value.disabled[operation.type] ||
-            permission.permit.value.disabled.codes[operation.code]
-          ) {
-            operation.disabled = true;
-          }
-          if (
-            !permission.permit.value.show[operation.type] ||
-            permission.permit.value.show.codes[operation.code] === false
-          ) {
-            operation.show = false;
-          }
-          operations.push(operation);
-        });
-        operationsList.push(operations.filter(i => i.show));
-      });
-      return operationsList;
-    });
-
-    /**
-     * 是否渲染操作列
-     * @author  韦胜健
-     * @date    2022.11.23 23:24
-     */
-    const isShowPlcOperation = computed((): boolean => {
-      if (
-        !permission.permit.value.show.insert &&
-        !permission.permit.value.show.update &&
-        !permission.permit.value.show.delete &&
-        (!permission.permit.value.show.other || !innerOperationConfigs.value.find(i => i.type === 'other'))
-      ) {return false;}
-      if (innerOperationConfigs.value.length === 0) {return false;}
-      if (innerOperationType.value === 'static') {
-        /*纯静态按钮，只要某个静态按钮显示则显示操作列*/
-        return !!innerOperationConfigs.value.find(i => i.show !== false && !!i.label);
-      } else {
-        /*动态静态都有，需要存在某行有一个显示的按钮*/
-        return !!innerOperationsList.value.find(i => i.find(i => i.show !== false));
-      }
-    });
-
-    /**
-     * 预估操作列宽度
-     * @author  韦胜健
-     * @date    2022.11.24 16:25
-     */
-    const predicateWidth = computed((): number => {
-      if (innerOperationConfigs.value.length === 0) {return 0;}
-      return innerOperationConfigs.value.reduce((prev) => {
-        return prev + 2 * 14 + 13;
-      }, 0) + 24;
-    });
-
-    const state = reactive({
-      /*操作列宽度*/
-      plcOperationWidth: undefined as undefined | number,
-      /*虚拟滚动时的渲染行第一个索引值*/
-      virtualRowStart: 0,
-      /*单元格横向内边距*/
-      cellPaddingX: 0,
-    });
-
-    const utils = {
-      /**
-       * 查询最大的操作列单元格宽度
-       * @author  韦胜健
-       * @date    2022.11.24 16:36
-       */
-      queryWidth: async () => {
-        await delay();
-        let cells = Array.from(table.refs.el!.querySelectorAll(`.plc-operation-cell[data-key=${key}]`)) as HTMLDivElement[];
-        if (cells.length === 0) {return;}
-        if (!state.cellPaddingX) {
-          state.cellPaddingX = Number(removeUnit(getComputedStyle(cells[0].parentElement as HTMLElement).paddingLeft));
-        }
-        if (innerOperationType.value === 'static') {
-          /*纯静态的按钮的话，就只读取一个单元格宽度就够了*/
-          cells = [cells[0]];
-        }
-        let maxWidth = (state.plcOperationWidth || 0) - state.cellPaddingX * 2;
-        cells.forEach(cell => {
-          const { offsetWidth } = cell;
-          if (offsetWidth > maxWidth) {
-            maxWidth = offsetWidth;
-          }
-        });
-        const width = maxWidth + state.cellPaddingX * 2;
-        if (!state.plcOperationWidth || width > state.plcOperationWidth) {
-          if (width + 4 > plcOperationWidth.value) {
-            state.plcOperationWidth = width + 4;
-          }
-          // console.log('width', state.plcOperationWidth);
-        }
-      },
-    };
-
-    /**
-     * 目标操作列宽度
-     * @author  韦胜健
-     * @date    2022.11.24 16:36
-     */
-    const plcOperationWidth = computed(() => {
-      let width = state.plcOperationWidth || predicateWidth.value;
-      return Math.max(120, width);
-    });
-
-    /**
-     * 监听按钮props.operations、表格数据bodyNodes以及虚拟分页的起始行索引的变化，重新读取列宽
-     * @author  韦胜健
-     * @date    2022.11.25 19:19
-     */
-    effects.push(watchEffect(() => {
-      if (!isShowPlcOperation.value) {
-        return;
-      }
-      if (innerOperationType.value === 'static' && !!state.plcOperationWidth) {
-        /*如果是纯静态按钮，并且已经读取过宽度，则不做任何处理*/
-        return;
-      }
-      const ret = [
-        /*table.props.operations变化的时候重新读取宽度*/
-        props.operations,
-        /*节点数据变化的时候重新读取宽度*/
-        table.bodyNodes.value,
-        /*虚拟滚动页数发生变化*/
-        state.virtualRowStart,
-      ];
-      utils.queryWidth();
-      return ret;
-    }));
-
-    /**
-     * 当尺寸变化时重新读取宽度
-     * @author  韦胜健
-     * @date    2022.11.25 19:19
-     */
-    effects.push(watch(() => table.styleComputed.value.size, () => {
-      state.plcOperationWidth = undefined;
-      /*之所以等待300ms是因为按钮大小变化有过度时间*/
-      delay(300).then(() => {utils.queryWidth();});
-    }));
-
-    /**
-     * 监听虚拟列表滚动时起始行索引的变化值
-     * @author  韦胜健
-     * @date    2022.11.25 19:20
-     */
-    effects.push(table.hooks.onVirtualPageIndexChange.use(({ startIndex }) => {state.virtualRowStart = startIndex;}));
-
-    onBeforeUnmount(() => effects.clear());
-
-    return {
-      render: () => {
-        if (!props.operations || !isShowPlcOperation.value) {return;}
-        if (!innerOperationsList.value.every(i => i.length > 0 && i.some(j => j.show))) {return;}
-
-        return <Plc
-          {...{
-            ...pick(props, passPlcPropKeys),
-            width: plcOperationWidth.value,
-          }}
-        >
-          {{
-            normal: ({ node }: iTableCellRenderScope) => (
-              <div className="plc-operation-cell" data-key={key}>
-                {(() => {
-                  if (props.autoSwitchInlineSaveOperation && node.state.edit) {
-                    return <>
-                      <Button
-                        mode="text"
-                        key="save"
-                        label={i18n.$it('base.edit.save').d('保存')}
-                        onClick={() => event.emit.onClickNodeSaveOperation(node)}
-                      />
-                      <Button
-                        mode="text"
-                        key="cancel"
-                        label={i18n.$it('base.cancel').d('取消')}
-                        onClick={() => event.emit.onClickNodeCancelOperation(node)}
-                      />
-                    </>;
-                  }
-
-                  const innerOperations = innerOperationsList.value[node.state.index]?.filter(i => i.show) || [];
-                  const notCollapseList = innerOperations.filter((_, index) => (index <= props.collapseLength - 1));
-                  const collapseList = innerOperations.filter((_, index) => (index > props.collapseLength - 1));
-                  if (collapseList.length > 0) {
-                    collapseList.push(notCollapseList.pop()!);
-                  }
-                  return <>
-                    {notCollapseList.map(operation => (
-                      !!operation.render ? operation.render({ node, row: node.data }, false) : (
-                        <Button
-                          mode="text"
-                          key={operation.label}
-                          label={operation.label}
-                          onClick={() => operation.handler?.({ node, row: node.data })}
-                          data-code={operation.code}
-                          data-type={operation.type}
-                          disabled={operation.disabled}
-                        />
-                      )
-                    ))}
-                    {collapseList.length > 0 && (
-                      <Dropdown
-                        arrowSize={0}
-                        offset={8}
-                        placement="bottom-end"
-                        trigger="hover"
-                        v-slots={{
-                          reference: () => (
-                            <Button
-                              mode="text"
-                              key="more"
-                            >
-                              <span>{i18n.$it('base.more').d('更多')}</span>
-                              <Icon icon="pi-down"/>
-                            </Button>
-                          ),
-                          popper: () => <>
-                            {collapseList.map(operation => (
-                              !!operation.render ? operation.render({ node, row: node.data }, true) : (
-                                <DropdownOption
-                                  key={operation.label}
-                                  label={operation.label}
-                                  onClick={() => operation.handler?.({ node, row: node.data })}
-                                  data-code={operation.code}
-                                  data-type={operation.type}
-                                  disabled={operation.disabled}
-                                />
-                              )
-                            ))}
-                          </>
-                        }}
-                      />
-                    )}
-                  </>;
-                })()}
-              </div>
-            ),
-            summary: scopeSlots.summary,
-          }}
-        </Plc>;
-      }
-    };
-  },
-});
-
-export default PlcOperation;
+import {computed, designComponent, onBeforeUnmount, PropType, reactive, watch, watchEffect} from "plain-design-composition";
+import {eTableOperationPosition, iTableInnerOperation, iTableInnerOperationConfig, iTableOperation, iTableOperationPermitConfig, nextOperationKey, TableOperationDefaultTypeSeq} from "./PlcOperation.utils";
+import {iTableCellRenderScope, iTableNode, iTableRowRenderScope} from "../../table/utils/table.utils";
+import {createPlcPropOptions, PlcPropsOptions} from "../../plc/utils/plc.utils";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {injectPlainTable} from "../../table/Table";
+import {delay} from "plain-utils/utils/delay";
+import {removeUnit} from "plain-utils/string/removeUnit";
+import {Plc} from "../../plc/plc/Plc";
+import {Button} from "../../../Button";
+import {Dropdown} from "../../../Dropdown";
+import {Icon} from "../../../Icon";
+import {DropdownOption} from "../../../DropdownOption";
+import {PlcScopeSlotsOptions} from "../../plc/utils/plc.scope-slots";
+import {iOperationPermission, useOperationPermission} from "./useOperationPermission";
+import i18n from "../../../i18n";
+import {pick} from "plain-utils/object/pick";
+
+export const PlcOperation = designComponent({
+  name: 'plc-operation',
+  props: {
+    ...createPlcPropOptions({
+      fixed: 'right',
+      order: 9995,
+      width: null as any,
+      align: 'left',
+      hideInForm: true,
+      title: (() => i18n.$it('base.operation').d('操作')) as any,
+      noFilter: true,
+      noSort: true,
+    }),
+    permit: { type: [Object, Function] as PropType<iTableOperationPermitConfig | (() => iOperationPermission)> },    // 权限控制
+    operations: { type: Array as PropType<iTableOperation[]> },           // 外部按钮以及操作列按钮
+    collapseLength: { type: Number, default: 4 },                         // 最多显示按钮的数量，超过会折叠下拉显示
+    autoSwitchInlineSaveOperation: { type: Boolean },                     // 自动根据行的编辑状态显示行的保存按钮
+  },
+  scopeSlots: {
+    summary: PlcScopeSlotsOptions.summary,
+  },
+  emits: {
+    onClickNodeSaveOperation: (node: iTableNode) => true,
+    onClickNodeCancelOperation: (node: iTableNode) => true,
+  },
+  setup({ props, event, scopeSlots }) {
+
+    const table = injectPlainTable();
+
+    const { effects } = createEffects();
+
+    /**
+     * 每个列有个唯一标识，以便读取宽度
+     * @author  韦胜健
+     * @date    2022.11.25 19:16
+     */
+    const key = nextOperationKey();
+
+    const passPlcPropKeys = Object.keys(createPlcPropOptions({})) as (keyof typeof PlcPropsOptions)[];
+
+    /**
+     * 内部按钮配置
+     * @author  韦胜健
+     * @date    2022.11.23 23:15
+     */
+    const innerOperationConfigs = computed((): iTableInnerOperationConfig[] => {
+      const propsInnerOperations: iTableInnerOperationConfig[] = [];
+      props.operations?.forEach(i => {i.position === eTableOperationPosition.inner && propsInnerOperations.push(i);});
+      return propsInnerOperations;
+    });
+
+    /**
+     * 内部按钮类型
+     * @author  韦胜健
+     * @date    2022.11.23 23:21
+     * @return  null没有按钮，dynamic全是动态按钮，static全是静态按钮，complex动态静态都有
+     */
+    const innerOperationType = computed((): null | 'dynamic' | 'static' | 'complex' => {
+      const list = innerOperationConfigs.value;
+      if (list.length === 0) {return null;}
+      const dynamics: iTableInnerOperationConfig[] = [];
+      const statics: iTableInnerOperationConfig[] = [];
+      list.forEach(item => {
+        if (typeof item.label === "function" || typeof item.show === "function") {
+          dynamics.push(item);
+        } else {
+          statics.push(item);
+        }
+      });
+      if (statics.length > 0 && dynamics.length === 0) {
+        return 'static';
+      } else if (statics.length === 0 && dynamics.length > 0) {
+        return 'dynamic';
+      } else {
+        return 'complex';
+      }
+    });
+
+    const permission = (() => {
+      const { permit } = props;
+      if (!!permit && typeof permit === "function") {
+        return permit();
+      } else {
+        return useOperationPermission(() => props.permit as iTableOperationPermitConfig);
+      }
+    })();
+
+    /**
+     * 计算内部按钮
+     * @author  韦胜健
+     * @date    2022/11/23 17:40
+     */
+    const innerOperationsList = computed((): iTableInnerOperation[][] => {
+      /*是否有配置内部按钮*/
+      if (innerOperationConfigs.value.length === 0) {return [];}
+      /*计算每一行的内部按钮*/
+      const operationsList: iTableInnerOperation[][] = [];
+      table.bodyNodes.value.forEach((node) => {
+        const rowRenderScope: iTableRowRenderScope = { node, row: node.data };
+        const operations: iTableInnerOperation[] = [];
+        innerOperationConfigs.value.forEach(i => {
+          const { position, handler, render } = i;
+          const type = typeof i.type === "function" ? i.type(rowRenderScope) : i.type || 'other';
+          const operation: iTableInnerOperation = {
+            label: typeof i.label === "function" ? i.label(rowRenderScope) : i.label,
+            show: typeof i.show === "function" ? i.show(rowRenderScope) : i.show !== false,
+            seq: typeof i.seq === "function" ? i.seq(rowRenderScope) : i.seq || TableOperationDefaultTypeSeq[type],
+            code: typeof i.code === "function" ? i.code(rowRenderScope) : i.code || `${position}-${type}`,
+            buttonAttrs: typeof i.buttonAttrs === "function" ? i.buttonAttrs(rowRenderScope) : i.buttonAttrs || undefined,
+            type,
+            disabled: typeof i.disabled === "function" ? i.disabled(rowRenderScope) : !!i.disabled,
+            position,
+            handler,
+            mode: typeof i.mode === "function" ? i.mode(rowRenderScope) : i.mode,
+            status: typeof i.status === "function" ? i.status(rowRenderScope) : i.status,
+            icon: typeof i.icon === "function" ? i.icon(rowRenderScope) : i.icon,
+            render,
+          };
+          if (
+            permission.permit.value.disabled[operation.type] ||
+            permission.permit.value.disabled.codes[operation.code]
+          ) {
+            operation.disabled = true;
+          }
+          if (
+            !permission.permit.value.show[operation.type] ||
+            permission.permit.value.show.codes[operation.code] === false
+          ) {
+            operation.show = false;
+          }
+          operations.push(operation);
+        });
+        operationsList.push(operations.filter(i => i.show));
+      });
+      return operationsList;
+    });
+
+    /**
+     * 是否渲染操作列
+     * @author  韦胜健
+     * @date    2022.11.23 23:24
+     */
+    const isShowPlcOperation = computed((): boolean => {
+      if (
+        !permission.permit.value.show.insert &&
+        !permission.permit.value.show.update &&
+        !permission.permit.value.show.delete &&
+        (!permission.permit.value.show.other || !innerOperationConfigs.value.find(i => i.type === 'other'))
+      ) {return false;}
+      if (innerOperationConfigs.value.length === 0) {return false;}
+      if (innerOperationType.value === 'static') {
+        /*纯静态按钮，只要某个静态按钮显示则显示操作列*/
+        return !!innerOperationConfigs.value.find(i => i.show !== false && !!i.label);
+      } else {
+        /*动态静态都有，需要存在某行有一个显示的按钮*/
+        return !!innerOperationsList.value.find(i => i.find(i => i.show !== false));
+      }
+    });
+
+    /**
+     * 预估操作列宽度
+     * @author  韦胜健
+     * @date    2022.11.24 16:25
+     */
+    const predicateWidth = computed((): number => {
+      if (innerOperationConfigs.value.length === 0) {return 0;}
+      return innerOperationConfigs.value.reduce((prev) => {
+        return prev + 2 * 14 + 13;
+      }, 0) + 24;
+    });
+
+    const state = reactive({
+      /*操作列宽度*/
+      plcOperationWidth: undefined as undefined | number,
+      /*虚拟滚动时的渲染行第一个索引值*/
+      virtualRowStart: 0,
+      /*单元格横向内边距*/
+      cellPaddingX: 0,
+    });
+
+    const utils = {
+      /**
+       * 查询最大的操作列单元格宽度
+       * @author  韦胜健
+       * @date    2022.11.24 16:36
+       */
+      queryWidth: async () => {
+        await delay();
+        let cells = Array.from(table.refs.el!.querySelectorAll(`.plc-operation-cell[data-key=${key}]`)) as HTMLDivElement[];
+        if (cells.length === 0) {return;}
+        if (!state.cellPaddingX) {
+          state.cellPaddingX = Number(removeUnit(getComputedStyle(cells[0].parentElement as HTMLElement).paddingLeft));
+        }
+        if (innerOperationType.value === 'static') {
+          /*纯静态的按钮的话，就只读取一个单元格宽度就够了*/
+          cells = [cells[0]];
+        }
+        let maxWidth = (state.plcOperationWidth || 0) - state.cellPaddingX * 2;
+        cells.forEach(cell => {
+          const { offsetWidth } = cell;
+          if (offsetWidth > maxWidth) {
+            maxWidth = offsetWidth;
+          }
+        });
+        const width = maxWidth + state.cellPaddingX * 2;
+        if (!state.plcOperationWidth || width > state.plcOperationWidth) {
+          if (width + 4 > plcOperationWidth.value) {
+            state.plcOperationWidth = width + 4;
+          }
+          // console.log('width', state.plcOperationWidth);
+        }
+      },
+    };
+
+    /**
+     * 目标操作列宽度
+     * @author  韦胜健
+     * @date    2022.11.24 16:36
+     */
+    const plcOperationWidth = computed(() => {
+      let width = state.plcOperationWidth || predicateWidth.value;
+      return Math.max(120, width);
+    });
+
+    /**
+     * 监听按钮props.operations、表格数据bodyNodes以及虚拟分页的起始行索引的变化，重新读取列宽
+     * @author  韦胜健
+     * @date    2022.11.25 19:19
+     */
+    effects.push(watchEffect(() => {
+      if (!isShowPlcOperation.value) {
+        return;
+      }
+      if (innerOperationType.value === 'static' && !!state.plcOperationWidth) {
+        /*如果是纯静态按钮，并且已经读取过宽度，则不做任何处理*/
+        return;
+      }
+      const ret = [
+        /*table.props.operations变化的时候重新读取宽度*/
+        props.operations,
+        /*节点数据变化的时候重新读取宽度*/
+        table.bodyNodes.value,
+        /*虚拟滚动页数发生变化*/
+        state.virtualRowStart,
+      ];
+      utils.queryWidth();
+      return ret;
+    }));
+
+    /**
+     * 当尺寸变化时重新读取宽度
+     * @author  韦胜健
+     * @date    2022.11.25 19:19
+     */
+    effects.push(watch(() => table.styleComputed.value.size, () => {
+      state.plcOperationWidth = undefined;
+      /*之所以等待300ms是因为按钮大小变化有过度时间*/
+      delay(300).then(() => {utils.queryWidth();});
+    }));
+
+    /**
+     * 监听虚拟列表滚动时起始行索引的变化值
+     * @author  韦胜健
+     * @date    2022.11.25 19:20
+     */
+    effects.push(table.hooks.onVirtualPageIndexChange.use(({ startIndex }) => {state.virtualRowStart = startIndex;}));
+
+    onBeforeUnmount(() => effects.clear());
+
+    return {
+      render: () => {
+        if (!props.operations || !isShowPlcOperation.value) {return;}
+        if (!innerOperationsList.value.every(i => i.length > 0 && i.some(j => j.show))) {return;}
+
+        return <Plc
+          {...{
+            ...pick(props, passPlcPropKeys),
+            width: plcOperationWidth.value,
+          }}
+        >
+          {{
+            normal: ({ node }: iTableCellRenderScope) => (
+              <div className="plc-operation-cell" data-key={key}>
+                {(() => {
+                  if (props.autoSwitchInlineSaveOperation && node.state.edit) {
+                    return <>
+                      <Button
+                        mode="text"
+                        key="save"
+                        label={i18n.$it('base.edit.save').d('保存')}
+                        onClick={() => event.emit.onClickNodeSaveOperation(node)}
+                      />
+                      <Button
+                        mode="text"
+                        key="cancel"
+                        label={i18n.$it('base.cancel').d('取消')}
+                        onClick={() => event.emit.onClickNodeCancelOperation(node)}
+                      />
+                    </>;
+                  }
+
+                  const innerOperations = innerOperationsList.value[node.state.index]?.filter(i => i.show) || [];
+                  const notCollapseList = innerOperations.filter((_, index) => (index <= props.collapseLength - 1));
+                  const collapseList = innerOperations.filter((_, index) => (index > props.collapseLength - 1));
+                  if (collapseList.length > 0) {
+                    collapseList.push(notCollapseList.pop()!);
+                  }
+                  return <>
+                    {notCollapseList.map(operation => (
+                      !!operation.render ? operation.render({ node, row: node.data }, false) : (
+                        <Button
+                          mode="text"
+                          key={operation.label}
+                          label={operation.label}
+                          onClick={() => operation.handler?.({ node, row: node.data })}
+                          data-code={operation.code}
+                          data-type={operation.type}
+                          disabled={operation.disabled}
+                        />
+                      )
+                    ))}
+                    {collapseList.length > 0 && (
+                      <Dropdown
+                        arrowSize={0}
+                        offset={8}
+                        placement="bottom-end"
+                        trigger="hover"
+                        v-slots={{
+                          reference: () => (
+                            <Button
+                              mode="text"
+                              key="more"
+                            >
+                              <span>{i18n.$it('base.more').d('更多')}</span>
+                              <Icon icon="pi-down"/>
+                            </Button>
+                          ),
+                          popper: () => <>
+                            {collapseList.map(operation => (
+                              !!operation.render ? operation.render({ node, row: node.data }, true) : (
+                                <DropdownOption
+                                  key={operation.label}
+                                  label={operation.label}
+                                  onClick={() => operation.handler?.({ node, row: node.data })}
+                                  data-code={operation.code}
+                                  data-type={operation.type}
+                                  disabled={operation.disabled}
+                                />
+                              )
+                            ))}
+                          </>
+                        }}
+                      />
+                    )}
+                  </>;
+                })()}
+              </div>
+            ),
+            summary: scopeSlots.summary,
+          }}
+        </Plc>;
+      }
+    };
+  },
+});
+
+export default PlcOperation;