plain-design 1.0.0-beta.147 → 1.0.0-beta.149

package/src/packages/components/AutoTable/setting/useTableOption.setting.config.tsx

@@ -1,260 +1,260 @@
-import {reactive} from "@peryl/react-compose";
-import {tPlc} from "../../Table/plc/utils/plc.utils";
-import {getPlcKey} from "../../Table/plc/use/usePlcPropsState";
-import {iTableOptionApplyCacheParam} from "../use/useTableOption.cache.utils";
-import {delay} from "@peryl/utils/delay";
-import {eTableOptionSettingView} from "./useTableOption.setting.utils";
-import {Button} from "../../Button";
-import {Table} from "../../Table";
-import {Plc} from "../../Plc";
-import {PlcSelect} from "../../Table/editor/PlcSelect";
-import {Checkbox} from "../../Checkbox";
-import {PlcIndex} from "../../Table/standard/PlcIndex";
-import {PlcDraggier} from "../../Table/standard/PlcDraggier/PlcDraggier";
-import {PlcInput} from "../../Table/editor/PlcInput";
-import {PlcNumber} from "../../Table/editor/PlcNumber";
-import {SelectOption} from "../../SelectOption";
-import '../utils/TableOption.space';
-import i18n from "../../i18n";
-import {AutoModule} from "../utils/AutoModule";
-import {insertSort} from "@peryl/utils/insertSort";
-import {iPlcConfigData, iPlcCustomData} from "../utils/AutoTable.utils";
-
-declare module '../utils/TableOption.space' {
-  namespace TableOptionSpace {
-    interface iTableOption {
-      settingConfig: ReturnType<typeof useTableOptionSettingConfig>;
-    }
-  }
-}
-
-export const useTableOptionSettingConfig = AutoModule.createRegistration((
-  {
-    setting,
-    cache,
-    hooks,
-    methods,
-  }
-) => {
-
-  const CACHE_KEY = 'table-config';
-
-  const state = reactive({
-    data: [] as iPlcConfigData[],
-    getSourceFlatPlcList: null as null | (() => tPlc[]),
-  });
-
-  const utils = {
-    resetData: async () => {
-      const sourceFlatPlcList = (await methods.getSourceFlatPlcList()).filter(i => !!i.props.field);
-      state.getSourceFlatPlcList = () => sourceFlatPlcList;
-      state.data = sourceFlatPlcList.map((plc, index): iPlcConfigData => ({
-        field: plc.props.field || "",
-        title: plc.props.title,
-        order: index,
-        align: plc.props.align || 'left',
-        width: plc.props.width,
-        fixed: plc.props.fixed,
-        hide: plc.props.hide,
-
-        plcRef: () => plc,
-        key: getPlcKey(plc),
-      }));
-      /*console.log(getSourceFlatPlcList().map(i => {
-          const {title, order, fixed, align, width, hide} = i.getState()
-          return {title, order, fixed, align, width, hide}
-      }))*/
-    },
-    applyConfigCache: (flatList: tPlc[], cacheData: iPlcConfigCacheData | undefined) => {
-      flatList.forEach(plc => {
-        const key = getPlcKey(plc);
-        const cacheItem = !cacheData ? undefined : cacheData[key];
-        const plcState = plc.getState();
-        Object.keys(plcState).forEach(key => {
-          if (!!cacheItem) {
-            if ((cacheItem as any)[key] !== undefined) {
-              (plcState as any)[key] = (cacheItem as any)[key];
-            }
-          } else {
-            (plcState as any)[key] = undefined;
-          }
-        });
-      });
-    },
-  };
-
-  hooks.onTableConfig.use(({ cacheData, flatList }) => {
-    const cacheDataItem = !cacheData.activeId ? null : cacheData.data.find(i => i.id === cacheData.activeId);
-    if (!cacheDataItem) {return;}
-    const cacheItem = cacheDataItem.data[CACHE_KEY];
-    if (!cacheItem) {return;}
-    utils.applyConfigCache(flatList, cacheItem);
-  });
-
-  hooks.onCollectPlcData.use(({ sourceFlatPlcList }) => {state.getSourceFlatPlcList = () => sourceFlatPlcList;});
-
-  cache.registry<iPlcConfigCacheData>({
-    cacheKey: CACHE_KEY,
-    applyCache: (() => {
-      let count = 1;
-      return async ({ cacheData }: iTableOptionApplyCacheParam<iPlcConfigCacheData>) => {
-        if (count > 0) {
-          //  第一次应用缓存，走table.props.config来应用列信息缓存
-          count--;
-          return;
-        }
-        utils.applyConfigCache(await methods.getSourceFlatPlcList(), cacheData);
-      };
-    })(),
-    getCache: () => {
-      return state.getSourceFlatPlcList!().reduce((prev, item) => {
-        const key = getPlcKey(item);
-        prev[key] = { ...item.getState(), key, };
-        return prev;
-      }, {} as iPlcConfigCacheData);
-    },
-  });
-
-  const handler = {
-    apply: () => {
-      handler.updateItemPlc({ plcConfigData: state.data });
-    },
-    updateItemPlc: async (data: {
-      /*自定义的配置数据，可以仅配置部分字段*/
-      customData?: iPlcCustomData[],
-      /*如果配置的数据有调整字段的顺序，那么会按照customData来对字段进行排序*/
-      customSort?: boolean,
-
-      /*按照个性配置面板中的数据对字段进行配置*/
-      plcConfigData?: iPlcConfigData[],
-    }) => {
-      if (!state.data.length) {
-        await utils.resetData();
-      }
-      /*
-      * 如果传递了plcConfigData，则使用这个数据来更新配置；
-      * 否则如果传递了自定义数据customData，则用customData来生成plcConfigData
-      */
-      const plcConfigData: iPlcConfigData[] = data.plcConfigData || (() => {
-        if (!data.customData) {return [];}
-        const field2custom = data.customData.reduce((prev, item) => {
-          prev[item.field] = item;
-          return prev;
-        }, {} as Record<string, undefined | iPlcCustomData>);
-        return state.data.map((stateDataItem): iPlcConfigData => {
-          const customItemData: iPlcCustomData | undefined = !stateDataItem.field ? undefined : field2custom[stateDataItem.field];
-          if (!customItemData) {
-            return stateDataItem;
-          } else {
-            return {
-              ...stateDataItem,
-              ...customItemData,
-            };
-          }
-        });
-      })();
-
-      console.log({ customData: data.customData, plcConfigData });
-
-      if (!!data.customSort && !!data.customData) {
-        const field2customIndex = data.customData.reduce((prev, item, index) => {
-          prev[item.field] = index;
-          return prev;
-        }, {} as Record<string, undefined | number>);
-        insertSort(plcConfigData, (a, b) => {
-          const aIndex = field2customIndex[a.field] || 0;
-          const bIndex = field2customIndex[b.field] || 0;
-          return aIndex > bIndex;
-        });
-      }
-
-      const hasOrderChange = plcConfigData.some((i, idx) => i.order !== idx);
-      plcConfigData.forEach((item, index) => {
-        const plcState = item.plcRef().getState();
-        const plcProps = item.plcRef().props;
-        if (hasOrderChange) {plcState.order = index;}
-        Object.entries(item).forEach(([key, value]) => {
-          switch (key) {
-            case 'order':
-              return;
-            case 'align':
-              if (plcProps.align === undefined) {
-                if (value !== 'left') {
-                  plcState.align = value as any;
-                }
-              } else {
-                if (plcProps.align != value) {
-                  plcState.align = value as any;
-                }
-              }
-              return;
-            default:
-              if ((plcProps as any)[key] !== value) {
-                (plcState as any)[key] = value;
-              }
-          }
-        });
-      });
-      setTimeout(() => utils.resetData());
-    },
-    reset: async () => {
-      (await methods.getSourceFlatPlcList()).forEach(plc => {
-        const state = plc.getState();
-        Object.keys(state).forEach(key => {
-          (state as any)[key] = undefined;
-        });
-      });
-      delay().then(() => {utils.resetData();});
-    },
-    onFixed: (row: iPlcConfigData) => {
-      const data = [...state.data];
-      const index = data.indexOf(row);
-      data.splice(index, 1);
-      const firstNotFixedIndex = data.findIndex((i) => i.fixed != 'left');
-      data.splice(firstNotFixedIndex, 0, row);
-      state.data = [...data];
-    }
-  };
-
-  setting.useTableOptionSettingInner({
-    key: eTableOptionSettingView.config,
-    title: i18n.$it('table.customSetting').d('个性设置'),
-    seq: 3,
-    beforeOpen: () => {
-      utils.resetData();
-    },
-    render: () => (
-      <div className="auto-table-setting-config">
-        <div className="auto-table-setting-config-button">
-          <Button label={i18n.$it('base.reset').d('重置')} onClick={handler.reset}/>
-          <Button label={i18n.$it('base.edit.apply').d('应用')} mode="fill" onClick={handler.apply}/>
-        </div>
-        <Table key="config" data={state.data} showRows={Math.max(5, state.data.length)} defaultEditable editSourceData>
-          <PlcIndex/>
-          <PlcDraggier v-model={state.data}/>
-          <PlcInput title={i18n.$it('table.title').d('标题')} field="title"/>
-          <PlcSelect title={i18n.$it('table.alignType').d('对齐方式')} field="align" width={100}>
-            <SelectOption label={i18n.$it('table.alignLeft').d('左对齐')} val="left"/>
-            <SelectOption label={i18n.$it('table.alignCenter').d('居中对齐')} val="center"/>
-            <SelectOption label={i18n.$it('table.alignRight').d('右对齐')} val="right"/>
-          </PlcSelect>
-          <PlcNumber title={i18n.$it('base.width').d('宽度')} field="width" width={130}/>
-          <Plc title={i18n.$it('base.fixed').d('固定')} width={60} align="center" field="fixed" addEditPadding v-slots={{
-            normal: ({ row }) => <Checkbox modelValue={row.fixed === 'left'} customReadonly onClick={() => (row.fixed = (row.fixed === 'left' ? undefined : 'left'), handler.onFixed(row as any))}/>
-          }}/>
-          <Plc title={i18n.$it('base.hide').d('隐藏')} width={60} align="center" field="hide" addEditPadding v-slots={{
-            normal: ({ row }) => <Checkbox modelValue={row.hide === true} customReadonly onClick={() => (row.hide = (row.hide === true ? undefined : true))}/>
-          }}/>
-          <Plc title={' '} fit width={10}/>
-        </Table>
-      </div>
-    )
-  });
-
-  return { methods: handler };
-});
-
-
-interface iPlcConfigCacheData {
-  [k: string]: Partial<Omit<iPlcConfigData, 'plcRef'>>;
-}
+import {reactive} from "@peryl/react-compose";
+import {tPlc} from "../../Table/plc/utils/plc.utils";
+import {getPlcKey} from "../../Table/plc/use/usePlcPropsState";
+import {iTableOptionApplyCacheParam} from "../use/useTableOption.cache.utils";
+import {delay} from "@peryl/utils/delay";
+import {eTableOptionSettingView} from "./useTableOption.setting.utils";
+import {Button} from "../../Button";
+import {Table} from "../../Table";
+import {Plc} from "../../Plc";
+import {PlcSelect} from "../../Table/editor/PlcSelect";
+import {Checkbox} from "../../Checkbox";
+import {PlcIndex} from "../../Table/standard/PlcIndex";
+import {PlcDraggier} from "../../Table/standard/PlcDraggier/PlcDraggier";
+import {PlcInput} from "../../Table/editor/PlcInput";
+import {PlcNumber} from "../../Table/editor/PlcNumber";
+import {SelectOption} from "../../SelectOption";
+import '../utils/TableOption.space';
+import i18n from "../../i18n";
+import {AutoModule} from "../utils/AutoModule";
+import {insertSort} from "@peryl/utils/insertSort";
+import {iPlcConfigData, iPlcCustomData} from "../utils/AutoTable.utils";
+
+declare module '../utils/TableOption.space' {
+  namespace TableOptionSpace {
+    interface iTableOption {
+      settingConfig: ReturnType<typeof useTableOptionSettingConfig>;
+    }
+  }
+}
+
+export const useTableOptionSettingConfig = AutoModule.createRegistration((
+  {
+    setting,
+    cache,
+    hooks,
+    methods,
+  }
+) => {
+
+  const CACHE_KEY = 'table-config';
+
+  const state = reactive({
+    data: [] as iPlcConfigData[],
+    getSourceFlatPlcList: null as null | (() => tPlc[]),
+  });
+
+  const utils = {
+    resetData: async () => {
+      const sourceFlatPlcList = (await methods.getSourceFlatPlcList()).filter(i => !!i.props.field);
+      state.getSourceFlatPlcList = () => sourceFlatPlcList;
+      state.data = sourceFlatPlcList.map((plc, index): iPlcConfigData => ({
+        field: plc.props.field || "",
+        title: plc.props.title,
+        order: index,
+        align: plc.props.align || 'left',
+        width: plc.props.width,
+        fixed: plc.props.fixed,
+        hide: plc.props.hide,
+
+        plcRef: () => plc,
+        key: getPlcKey(plc),
+      }));
+      /*console.log(getSourceFlatPlcList().map(i => {
+          const {title, order, fixed, align, width, hide} = i.getState()
+          return {title, order, fixed, align, width, hide}
+      }))*/
+    },
+    applyConfigCache: (flatList: tPlc[], cacheData: iPlcConfigCacheData | undefined) => {
+      flatList.forEach(plc => {
+        const key = getPlcKey(plc);
+        const cacheItem = !cacheData ? undefined : cacheData[key];
+        const plcState = plc.getState();
+        Object.keys(plcState).forEach(key => {
+          if (!!cacheItem) {
+            if ((cacheItem as any)[key] !== undefined) {
+              (plcState as any)[key] = (cacheItem as any)[key];
+            }
+          } else {
+            (plcState as any)[key] = undefined;
+          }
+        });
+      });
+    },
+  };
+
+  hooks.onTableConfig.use(({ cacheData, flatList }) => {
+    const cacheDataItem = !cacheData.activeId ? null : cacheData.data.find(i => i.id === cacheData.activeId);
+    if (!cacheDataItem) {return;}
+    const cacheItem = cacheDataItem.data[CACHE_KEY];
+    if (!cacheItem) {return;}
+    utils.applyConfigCache(flatList, cacheItem);
+  });
+
+  hooks.onCollectPlcData.use(({ sourceFlatPlcList }) => {state.getSourceFlatPlcList = () => sourceFlatPlcList;});
+
+  cache.registry<iPlcConfigCacheData>({
+    cacheKey: CACHE_KEY,
+    applyCache: (() => {
+      let count = 1;
+      return async ({ cacheData }: iTableOptionApplyCacheParam<iPlcConfigCacheData>) => {
+        if (count > 0) {
+          //  第一次应用缓存，走table.props.config来应用列信息缓存
+          count--;
+          return;
+        }
+        utils.applyConfigCache(await methods.getSourceFlatPlcList(), cacheData);
+      };
+    })(),
+    getCache: () => {
+      return state.getSourceFlatPlcList!().reduce((prev, item) => {
+        const key = getPlcKey(item);
+        prev[key] = { ...item.getState(), key, };
+        return prev;
+      }, {} as iPlcConfigCacheData);
+    },
+  });
+
+  const handler = {
+    apply: () => {
+      handler.updateItemPlc({ plcConfigData: state.data });
+    },
+    updateItemPlc: async (data: {
+      /*自定义的配置数据，可以仅配置部分字段*/
+      customData?: iPlcCustomData[],
+      /*如果配置的数据有调整字段的顺序，那么会按照customData来对字段进行排序*/
+      customSort?: boolean,
+
+      /*按照个性配置面板中的数据对字段进行配置*/
+      plcConfigData?: iPlcConfigData[],
+    }) => {
+      if (!state.data.length) {
+        await utils.resetData();
+      }
+      /*
+      * 如果传递了plcConfigData，则使用这个数据来更新配置；
+      * 否则如果传递了自定义数据customData，则用customData来生成plcConfigData
+      */
+      const plcConfigData: iPlcConfigData[] = data.plcConfigData || (() => {
+        if (!data.customData) {return [];}
+        const field2custom = data.customData.reduce((prev, item) => {
+          prev[item.field] = item;
+          return prev;
+        }, {} as Record<string, undefined | iPlcCustomData>);
+        return state.data.map((stateDataItem): iPlcConfigData => {
+          const customItemData: iPlcCustomData | undefined = !stateDataItem.field ? undefined : field2custom[stateDataItem.field];
+          if (!customItemData) {
+            return stateDataItem;
+          } else {
+            return {
+              ...stateDataItem,
+              ...customItemData,
+            };
+          }
+        });
+      })();
+
+      console.log({ customData: data.customData, plcConfigData });
+
+      if (!!data.customSort && !!data.customData) {
+        const field2customIndex = data.customData.reduce((prev, item, index) => {
+          prev[item.field] = index;
+          return prev;
+        }, {} as Record<string, undefined | number>);
+        insertSort(plcConfigData, (a, b) => {
+          const aIndex = field2customIndex[a.field] || 0;
+          const bIndex = field2customIndex[b.field] || 0;
+          return aIndex > bIndex;
+        });
+      }
+
+      const hasOrderChange = plcConfigData.some((i, idx) => i.order !== idx);
+      plcConfigData.forEach((item, index) => {
+        const plcState = item.plcRef().getState();
+        const plcProps = item.plcRef().props;
+        if (hasOrderChange) {plcState.order = index;}
+        Object.entries(item).forEach(([key, value]) => {
+          switch (key) {
+            case 'order':
+              return;
+            case 'align':
+              if (plcProps.align === undefined) {
+                if (value !== 'left') {
+                  plcState.align = value as any;
+                }
+              } else {
+                if (plcProps.align != value) {
+                  plcState.align = value as any;
+                }
+              }
+              return;
+            default:
+              if ((plcProps as any)[key] !== value) {
+                (plcState as any)[key] = value;
+              }
+          }
+        });
+      });
+      setTimeout(() => utils.resetData());
+    },
+    reset: async () => {
+      (await methods.getSourceFlatPlcList()).forEach(plc => {
+        const state = plc.getState();
+        Object.keys(state).forEach(key => {
+          (state as any)[key] = undefined;
+        });
+      });
+      delay().then(() => {utils.resetData();});
+    },
+    onFixed: (row: iPlcConfigData) => {
+      const data = [...state.data];
+      const index = data.indexOf(row);
+      data.splice(index, 1);
+      const firstNotFixedIndex = data.findIndex((i) => i.fixed != 'left');
+      data.splice(firstNotFixedIndex, 0, row);
+      state.data = [...data];
+    }
+  };
+
+  setting.useTableOptionSettingInner({
+    key: eTableOptionSettingView.config,
+    title: i18n.$it('table.customSetting').d('个性设置'),
+    seq: 3,
+    beforeOpen: () => {
+      utils.resetData();
+    },
+    render: () => (
+      <div className="auto-table-setting-config">
+        <div className="auto-table-setting-config-button">
+          <Button label={i18n.$it('base.reset').d('重置')} onClick={handler.reset}/>
+          <Button label={i18n.$it('base.edit.apply').d('应用')} mode="fill" onClick={handler.apply}/>
+        </div>
+        <Table key="config" data={state.data} showRows={Math.max(5, state.data.length)} defaultEditable editSourceData>
+          <PlcIndex/>
+          <PlcDraggier v-model={state.data}/>
+          <PlcInput title={i18n.$it('table.title').d('标题')} field="title"/>
+          <PlcSelect title={i18n.$it('table.alignType').d('对齐方式')} field="align" width={100}>
+            <SelectOption label={i18n.$it('table.alignLeft').d('左对齐')} val="left"/>
+            <SelectOption label={i18n.$it('table.alignCenter').d('居中对齐')} val="center"/>
+            <SelectOption label={i18n.$it('table.alignRight').d('右对齐')} val="right"/>
+          </PlcSelect>
+          <PlcNumber title={i18n.$it('base.width').d('宽度')} field="width" width={130}/>
+          <Plc title={i18n.$it('base.fixed').d('固定')} width={60} align="center" field="fixed" addEditPadding v-slots={{
+            normal: ({ row }) => <Checkbox modelValue={row.fixed === 'left'} customReadonly onClick={() => (row.fixed = (row.fixed === 'left' ? undefined : 'left'), handler.onFixed(row as any))}/>
+          }}/>
+          <Plc title={i18n.$it('base.hide').d('隐藏')} width={60} align="center" field="hide" addEditPadding v-slots={{
+            normal: ({ row }) => <Checkbox modelValue={row.hide === true} customReadonly onClick={() => (row.hide = (row.hide === true ? undefined : true))}/>
+          }}/>
+          <Plc title={' '} fit width={10}/>
+        </Table>
+      </div>
+    )
+  });
+
+  return { methods: handler };
+});
+
+
+interface iPlcConfigCacheData {
+  [k: string]: Partial<Omit<iPlcConfigData, 'plcRef'>>;
+}