aldehyde 0.2.98 → 0.2.100

package/src/aldehyde/table/query-table.tsx

@@ -1,349 +1,400 @@
-import React from 'react'
-import {Card, Collapse, Descriptions, List, Table} from 'antd';
-import "./index.css"
+import React from "react";
+import { Card, Collapse, Descriptions, List } from "antd";
+import { Table } from "./control-table-x-axis-wrapper";
+import "./index.css";
 import {
-    ActTableViewModel, ColumnConfig,
-    DtmplData,
-    FieldConfig,
-    PageInfo,
-    QueryData,
-    QueryKey,
-    SelectedRow,
+  ActTableViewModel,
+  ColumnConfig,
+  DtmplData,
+  FieldConfig,
+  PageInfo,
+  QueryData,
+  QueryKey,
+  SelectedRow,
 } from "../tmpl/interface";
 import HcserviceV3 from "../tmpl/hcservice-v3";
-import Pagination from './pagination';
-import {TableRowSelection} from "antd/lib/table/interface";
-import {SortableContainer, SortableElement} from "react-sortable-hoc";
-import {arrayMoveImmutable} from 'array-move';
+import Pagination from "./pagination";
+import { TableRowSelection } from "antd/lib/table/interface";
+import { SortableContainer, SortableElement } from "react-sortable-hoc";
+import { arrayMoveImmutable } from "array-move";
 import ViewControl from "../controls/view-control";
-import Scrollbars from 'react-custom-scrollbars';
-const {Panel} = Collapse;
-const SortableItem = SortableElement(props => <tr {...props} />);
-const SortableBody = SortableContainer(props => <tbody {...props} />);
-
+import Scrollbars from "react-custom-scrollbars";
+import { LocaleContext } from "../locale/LocaleProvider";
+const { Panel } = Collapse;
+const SortableItem = SortableElement((props) => <tr {...props} />);
+const SortableBody = SortableContainer((props) => <tbody {...props} />);
 
 interface CacheData {
-    dataSource: object[];
-    pageInfo: PageInfo;
+  dataSource: object[];
+  pageInfo: PageInfo;
 }
 
 interface QueryTableProps {
-    viewModels?: ActTableViewModel[];
-    // defaultPageSize?: number;
-    pageInfo: {
-        pageNo: number,
-        pageSize: number
-    },
-    primaryColumn?:ColumnConfig,
-    columns: any[];
-    serverKey?:string,
-    queryKey: QueryKey;
-    onChangePage: (pageNo: number, pageSize: number) => void,
-    onChangeRowSelection?: (selectedRows: SelectedRow[], selectedDatas: DtmplData[], allRowKeys: string[]) => void;
-    maxSelectedRows?: number;
-    selectedRows?: SelectedRow[];
-    hiddenRowCodes?: string[],
-    viewModel?: string;
-    columnConfigs?: FieldConfig[];
-};
-
+  viewModels?: ActTableViewModel[];
+  // defaultPageSize?: number;
+  pageInfo: {
+    pageNo: number;
+    pageSize: number;
+  };
+  primaryColumn?: ColumnConfig;
+  columns: any[];
+  serverKey?: string;
+  queryKey: QueryKey;
+  onChangePage: (pageNo: number, pageSize: number) => void;
+  onChangeRowSelection?: (
+    selectedRows: SelectedRow[],
+    selectedDatas: DtmplData[],
+    allRowKeys: string[]
+  ) => void;
+  maxSelectedRows?: number;
+  selectedRows?: SelectedRow[];
+  hiddenRowCodes?: string[];
+  viewModel?: string;
+  columnConfigs?: FieldConfig[];
+}
 
 interface QueryTableStat {
-    queryDataCache?: Map<string, CacheData>;
-    virtualEndPageNo?: number;
-    dataSource?: object[];
-    loading?: boolean;
-    touchEnd?: boolean;
-    total?: number;
-};
+  queryDataCache?: Map<string, CacheData>;
+  virtualEndPageNo?: number;
+  dataSource?: object[];
+  loading?: boolean;
+  touchEnd?: boolean;
+  total?: number;
+}
 
 class QueryTable extends React.PureComponent<QueryTableProps, QueryTableStat> {
+  static defaultProps = {
+    pageInfo: {
+      pageNo: 1,
+      pageSize: 10,
+      virtualEndPageNo: undefined,
+    },
+    hiddenRowCodes: [],
+    selectedRows: [],
+    viewModels: ["table"],
+  };
 
-    static defaultProps = {
-        pageInfo: {
-            pageNo: 1,
-            pageSize: 10,
-            virtualEndPageNo: undefined
-        },
-        hiddenRowCodes: [],
-        selectedRows: [],
-        viewModels: ['table']
-    }
+  state = {
+    queryDataCache: undefined,
+    virtualEndPageNo: undefined,
+    dataSource: undefined,
+    loading: true,
+    touchEnd: undefined,
+    total: undefined,
+  };
 
-    state = {
-        queryDataCache: undefined,
-        virtualEndPageNo: undefined,
-        dataSource: undefined,
-        loading: true,
-        touchEnd: undefined,
-        total: undefined,
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
+
+  async componentDidMount() {
+    const { queryKey, pageInfo } = this.props;
+    // let pageInfo = {
+    //     pageNo: 1,
+    //     pageSize: defaultPageSize ? defaultPageSize : 10,
+    //     virtualEndPageNo: undefined,
+    // }
+    if (queryKey) {
+      await this.loadData(queryKey.key, pageInfo);
     }
+  }
 
-    async componentDidMount() {
-        const { queryKey, pageInfo} = this.props;
-        // let pageInfo = {
-        //     pageNo: 1,
-        //     pageSize: defaultPageSize ? defaultPageSize : 10,
-        //     virtualEndPageNo: undefined,
-        // }
-        if (queryKey) {
-            await this.loadData(queryKey.key, pageInfo);
-        }
+  componentWillUnmount() {
+    this.setState = () => false;
+  }
+
+  async componentDidUpdate(prevProps) {
+    const { queryKey: preQueryKey, pageInfo: prePageInfo } = prevProps;
+    const { queryKey, pageInfo } = this.props;
+    const { total } = this.state;
+    if (queryKey) {
+      if (preQueryKey?.key != queryKey.key) {
+        await this.loadData(queryKey.key, pageInfo, true);
+      } else if (
+        prePageInfo?.pageNo != pageInfo.pageNo ||
+        prePageInfo?.pageSize != pageInfo.pageSize
+      ) {
+        await this.loadData(queryKey.key, pageInfo, false);
+      }
     }
+  }
+
+  DraggableContainer = (props) => (
+    <SortableBody
+      useDragHandle
+      disableAutoscroll
+      helperClass="row-dragging"
+      onSortEnd={this.onSortEnd}
+      {...props}
+    />
+  );
 
-    componentWillUnmount() {
-        this.setState = () => false;
+  DraggableBodyRow = ({ className, style, ...restProps }) => {
+    const { dataSource } = this.state;
+    if (dataSource) {
+      const index = dataSource.findIndex(
+        (x) => x.key === restProps["data-row-key"]
+      );
+      return <SortableItem key={index} index={index} {...restProps} />;
+    } else {
+      return <></>;
     }
+  };
 
-    async componentDidUpdate(prevProps) {
-        const {queryKey: preQueryKey, pageInfo: prePageInfo} = prevProps;
-        const {queryKey, pageInfo} = this.props;
-        const {total}=this.state;
-        if (queryKey) {
-            if (preQueryKey?.key != queryKey.key) {
-                await this.loadData(queryKey.key, pageInfo, true);
-            } else if (prePageInfo?.pageNo != pageInfo.pageNo || prePageInfo?.pageSize != pageInfo.pageSize) {
-                await this.loadData(queryKey.key, pageInfo, false);
-            }
-        }
+  onSortEnd = ({ oldIndex, newIndex }) => {
+    const { dataSource } = this.state;
+    if (oldIndex !== newIndex) {
+      const newData = arrayMoveImmutable(
+        [].concat(dataSource),
+        oldIndex,
+        newIndex
+      ).filter((el) => !!el);
+      //console.log('Sorted items: ', newData);
+      this.setState({ dataSource: newData });
     }
+  };
 
-    DraggableContainer = props => (
-        <SortableBody
-            useDragHandle
-            disableAutoscroll
-            helperClass="row-dragging"
-            onSortEnd={this.onSortEnd}
-            {...props}
-        />
-    );
+  loadData = async (
+    queryKey: string,
+    pageInfo: PageInfo,
+    cleanCache?: boolean
+  ) => {
+    this.setState({
+      loading: true,
+    });
+    let { queryDataCache } = this.state;
 
-    DraggableBodyRow = ({className, style, ...restProps}) => {
-        const {dataSource} = this.state;
-        if (dataSource) {
-            const index = dataSource.findIndex(x => x.key === restProps['data-row-key']);
-            return <SortableItem key={index} index={index} {...restProps} />;
-        } else {
-            return <></>
-        }
+    let { serverKey } = this.props;
+    let queryCache: Map<string, CacheData>;
+    if (cleanCache || !queryDataCache) {
+      queryCache = new Map<string, CacheData>();
+      this.setState({ total: undefined });
+    } else {
+      queryCache = queryDataCache;
+    }
+    if (queryCache.has(pageInfo.pageNo + "_" + pageInfo.pageSize)) {
+      let cacheData = queryCache.get(pageInfo.pageNo + "_" + pageInfo.pageSize);
+      this.setState({
+        dataSource: cacheData.dataSource,
+        virtualEndPageNo: cacheData.pageInfo.virtualEndPageNo,
+        loading: false,
+      });
+    } else {
+      let queryData: QueryData = await HcserviceV3.requestQueryData(
+        serverKey,
+        queryKey,
+        pageInfo
+      );
+      let dataSource: object[] = [];
+      pageInfo = queryData.pageInfo;
+      queryData.entities.forEach((item, index) => {
+        let row = {
+          key: item.code,
+          code: item.code, //增加code,为了删除操作
+          ...item.fieldMap,
+          index,
+        };
+        dataSource.push(row);
+      });
+      let touchEnd = queryData.touchEnd;
+      //缓存数据
+      queryCache.set(pageInfo.pageNo + "_" + pageInfo.pageSize, {
+        dataSource,
+        pageInfo,
+      });
+      this.setState({
+        dataSource,
+        virtualEndPageNo: pageInfo.virtualEndPageNo,
+        queryDataCache: queryCache,
+        touchEnd,
+        loading: false,
+      });
+    }
+  };
 
+  pageTo = async (pageNo: number, pageSize: number) => {
+    const { onChangePage } = this.props;
+    const { virtualEndPageNo } = this.state;
+    let pageInfo = {
+      pageNo,
+      pageSize: pageSize ? pageSize : 10,
+      virtualEndPageNo,
     };
+    const { queryKey } = this.props;
+    await this.loadData(queryKey.key, pageInfo);
+    onChangePage(pageNo, pageSize);
+  };
 
-    onSortEnd = ({oldIndex, newIndex}) => {
-        const {dataSource} = this.state;
-        if (oldIndex !== newIndex) {
-            const newData = arrayMoveImmutable([].concat(dataSource), oldIndex, newIndex).filter(
-                el => !!el,
-            );
-            //console.log('Sorted items: ', newData);
-            this.setState({dataSource: newData});
-        }
-    };
+  queryTotal = async () => {
+    const { queryKey, serverKey } = this.props;
+    let total = await HcserviceV3.requestQueryCount(serverKey, queryKey.key);
+    this.setState({
+      total,
+    });
+  };
 
-    loadData = async (queryKey: string, pageInfo: PageInfo, cleanCache?: boolean) => {
-        this.setState({
-            loading: true,
-        })
-        let {queryDataCache} = this.state;
+  getRowSelection = () => {
+    const {
+      columns,
+      onChangeRowSelection,
+      selectedRows,
+      maxSelectedRows,
+      primaryColumn,
+    } = this.props;
+    let { dataSource } = this.state;
+    let selectedRowKeys = [];
 
-        let {serverKey}=this.props;
-        let queryCache: Map<string, CacheData>;
-        if (cleanCache || !queryDataCache) {
-            queryCache = new Map<string, CacheData>();
-            this.setState({total: undefined,})
-        } else {
-            queryCache = queryDataCache;
-        }
-        if (queryCache.has(pageInfo.pageNo + "_" + pageInfo.pageSize)) {
-            let cacheData = queryCache.get(pageInfo.pageNo + "_" + pageInfo.pageSize);
-            this.setState({
-                dataSource: cacheData.dataSource,
-                virtualEndPageNo: cacheData.pageInfo.virtualEndPageNo,
-                loading: false,
-            })
-        } else {
-            let queryData: QueryData = await HcserviceV3.requestQueryData(serverKey,queryKey, pageInfo);
-            let dataSource: object[] = [];
-            pageInfo = queryData.pageInfo;
-            queryData.entities.forEach((item, index) => {
-                let row = {
-                    key: item.code,
-                    code: item.code,//增加code,为了删除操作
-                    ...item.fieldMap,
-                    index,
-                };
-                dataSource.push(row);
-            })
-            let touchEnd = queryData.touchEnd;
-            //缓存数据
-            queryCache.set(pageInfo.pageNo + "_" + pageInfo.pageSize, {dataSource, pageInfo});
-            this.setState({
-                dataSource,
-                virtualEndPageNo: pageInfo.virtualEndPageNo,
-                queryDataCache: queryCache,
-                touchEnd,
-                loading: false,
-            })
-        }
+    for (let row of selectedRows) {
+      selectedRowKeys.push(row.code);
     }
-
-    pageTo = async (pageNo: number, pageSize: number) => {
-        const {onChangePage}=this.props
-        const {virtualEndPageNo} = this.state;
-        let pageInfo = {
-            pageNo,
-            pageSize: pageSize ? pageSize : 10,
-            virtualEndPageNo,
-        }
-        const {queryKey} = this.props;
-        await this.loadData(queryKey.key, pageInfo);
-        onChangePage(pageNo,pageSize);
+    const allRowKeys: string[] = [];
+    if (dataSource) {
+      for (let d of dataSource) {
+        allRowKeys.push(d.code);
+      }
     }
-
-    queryTotal = async () => {
-        const {queryKey,serverKey} = this.props;
-        let total = await HcserviceV3.requestQueryCount(serverKey,queryKey.key);
-        this.setState({
-            total
-        });
+    if (maxSelectedRows == -1) {
+      return null;
     }
-
-    getRowSelection = () => {
-
-        const {columns, onChangeRowSelection, selectedRows, maxSelectedRows,primaryColumn} = this.props;
-        let {dataSource} = this.state;
-        let selectedRowKeys = [];
-
-        for (let row of selectedRows) {
-            selectedRowKeys.push(row.code);
-        }
-        const allRowKeys: string[] = [];
-        if (dataSource) {
-            for (let d of dataSource) {
-                allRowKeys.push(d.code);
+    const rowSelection: TableRowSelection<any> = {
+      fixed: true,
+      type: maxSelectedRows == 1 ? "radio" : "checkbox",
+      selectedRowKeys,
+      onChange: (selectedRowKeys, selectedRows) => {
+        //console.log('selectedRowKeys:', selectedRowKeys);
+        // console.log('selectedRows:', selectedRows);
+        let selectedRows_: SelectedRow[] = [];
+        let selectedDatas: DtmplData[] = [];
+        let titleColId = primaryColumn?.id;
+        if (!titleColId) {
+          columns.forEach((col) => {
+            if (col.title != "序号" && titleColId == null) {
+              titleColId = col.dataIndex;
+              return;
             }
+          });
         }
-        if (maxSelectedRows == -1) {
-            return null;
-        }
-        const rowSelection: TableRowSelection<any> = {
-            fixed: true,
-            type: maxSelectedRows == 1 ? 'radio' : 'checkbox',
-            selectedRowKeys,
-            onChange: (selectedRowKeys, selectedRows) => {
-                //console.log('selectedRowKeys:', selectedRowKeys);
-                // console.log('selectedRows:', selectedRows);
-                let selectedRows_: SelectedRow[] = [];
-                let selectedDatas: DtmplData[] = [];
-                let titleColId =primaryColumn?.id;
-                if(!titleColId){
-                    columns.forEach((col) => {
-                        if (col.title != '序号' && titleColId == null) {
-                            titleColId = col.dataIndex;
-                            return;
-                        }
-                    })
-                }
-                selectedRows.forEach((item) => {
-                    selectedRows_.push({code: item['code'], title: item[titleColId]});
-                    selectedDatas.push(item);
-                })
-                if (onChangeRowSelection) {
-                    onChangeRowSelection(selectedRows_, selectedDatas, allRowKeys);
-                }
-            }
+        selectedRows.forEach((item) => {
+          selectedRows_.push({ code: item["code"], title: item[titleColId] });
+          selectedDatas.push(item);
+        });
+        if (onChangeRowSelection) {
+          onChangeRowSelection(selectedRows_, selectedDatas, allRowKeys);
         }
-        return rowSelection;
-
-    }
+      },
+    };
+    return rowSelection;
+  };
 
-    getUnHidenDataSource = () => {
-        const {dataSource} = this.state;
-        const {hiddenRowCodes} = this.props;
-        let ds: object[] = [];
-        if (dataSource) {
-            for (let d of dataSource) {
-                if (!hiddenRowCodes.includes(d.code)) {
-                    ds.push(d);
-                }
-            }
+  getUnHidenDataSource = () => {
+    const { dataSource } = this.state;
+    const { hiddenRowCodes } = this.props;
+    let ds: object[] = [];
+    if (dataSource) {
+      for (let d of dataSource) {
+        if (!hiddenRowCodes.includes(d.code)) {
+          ds.push(d);
         }
-        return ds;
+      }
     }
+    return ds;
+  };
 
-    initViewList = (data) => {
-        //console.log("data:",data);
-        const {columns, columnConfigs,serverKey} = this.props
-        const formItemList = [];
-        if (columnConfigs.length > 0) {
-            columnConfigs.forEach((item, index) => {
-                if (item.id != '10000' && item.title != '操作' && item.id != '20000') {
-                    const title = item.title;
-                    let fieldValue = data ? data[item.id] : undefined;
-                    if (title == '序号') {
-                        fieldValue = data.index;
-                    }
-                    //fieldValue 没有值时不能为null 要为 undefined。antd input所限制
-                    fieldValue = fieldValue ? fieldValue : item.defaultValue ? item.defaultValue : undefined;
-                    const fieldKey = item.id + Math.random() * 100;
+  initViewList = (data) => {
+    //console.log("data:",data);
+    const { translate } = this.context;
+    const { columns, columnConfigs, serverKey } = this.props;
+    const formItemList = [];
+    if (columnConfigs.length > 0) {
+      columnConfigs.forEach((item, index) => {
+        if (item.id != "10000" && item.title != "操作" && item.id != "20000") {
+          const title = item.title;
+          let fieldValue = data ? data[item.id] : undefined;
+          if (title == "序号") {
+            fieldValue = data.index;
+          }
+          //fieldValue 没有值时不能为null 要为 undefined。antd input所限制
+          fieldValue = fieldValue
+            ? fieldValue
+            : item.defaultValue
+            ? item.defaultValue
+            : undefined;
+          const fieldKey = item.id + Math.random() * 100;
 
-                    const formItem = <Descriptions.Item label={item.title} key={index}
-                                                        className='labelcss'
-                    >
-                        <ViewControl serverKey={serverKey} holderType={'table'} value={fieldValue} fieldConfig={item}/>
-                    </Descriptions.Item>
-                    formItemList.push(formItem);
-                }
-            });
+          const formItem = (
+            <Descriptions.Item
+              label={translate("${" + item.title + "}")}
+              key={index}
+              className="labelcss"
+            >
+              <ViewControl
+                serverKey={serverKey}
+                holderType={"table"}
+                value={fieldValue}
+                fieldConfig={item}
+              />
+            </Descriptions.Item>
+          );
+          formItemList.push(formItem);
         }
-        return formItemList;
-
+      });
     }
+    return formItemList;
+  };
 
-    render() {
-        const {pageInfo, columns, viewModels} = this.props;
-        const {touchEnd, total, loading, virtualEndPageNo} = this.state;
-        return (
-            <>
-                {viewModels.includes('table') ?
-                    <Table size={'middle'}
-                           rowSelection={this.getRowSelection()}
-                           columns={columns ? columns : []}
-                           dataSource={this.getUnHidenDataSource()}
-                           bordered
-                           pagination={false}
-                           style={{display: columns ? "block" : "none" }}
-                           loading={loading}
-                           components={{
-                               body: {
-                                   wrapper: this.DraggableContainer,
-                                   row: this.DraggableBodyRow,
-                               },
-                           }}
-                    >
-                    </Table>
-                    : ""}
-                <Pagination touchEnd={touchEnd} pageInfo={{...pageInfo, virtualEndPageNo}} pageTo={this.pageTo}
-                            queryTotal={this.queryTotal}
-                            total={total}/>
-                {viewModels.includes('verticalList') ?
-                    <Card style={{marginTop: '10px'}}>
-                        <List
-                            dataSource={this.getUnHidenDataSource()}
-                            renderItem={item => (
-                                <List.Item key={item['id']}>
-                                    <Card size={'small'} bodyStyle={{padding: '4px'}}><Descriptions column={4}>
-                                        {this.initViewList(item)}
-                                    </Descriptions></Card>
-                                </List.Item>
-                            )}
-                        />
-                    </Card> : ""
-                }
-            </>
-        );
-    }
+  render() {
+    const { pageInfo, columns, viewModels } = this.props;
+    const { touchEnd, total, loading, virtualEndPageNo } = this.state;
 
+    return (
+      <>
+        {viewModels.includes("table") ? (
+          <Table
+            size={"middle"}
+            rowSelection={this.getRowSelection()}
+            columns={columns ? columns : []}
+            dataSource={this.getUnHidenDataSource()}
+            bordered
+            pagination={false}
+            style={{ display: columns ? "block" : "none" }}
+            loading={loading}
+            components={{
+              body: {
+                wrapper: this.DraggableContainer,
+                row: this.DraggableBodyRow,
+              },
+            }}
+          ></Table>
+        ) : (
+          ""
+        )}
+        <Pagination
+          touchEnd={touchEnd}
+          pageInfo={{ ...pageInfo, virtualEndPageNo }}
+          pageTo={this.pageTo}
+          queryTotal={this.queryTotal}
+          total={total}
+        />
+        {viewModels.includes("verticalList") ? (
+          <Card style={{ marginTop: "10px" }}>
+            <List
+              dataSource={this.getUnHidenDataSource()}
+              renderItem={(item) => (
+                <List.Item key={item["id"]}>
+                  <Card size={"small"} bodyStyle={{ padding: "4px" }}>
+                    <Descriptions column={4}>
+                      {this.initViewList(item)}
+                    </Descriptions>
+                  </Card>
+                </List.Item>
+              )}
+            />
+          </Card>
+        ) : (
+          ""
+        )}
+      </>
+    );
+  }
 }
 
-export default QueryTable;
+export default QueryTable;