aldehyde 0.2.97 → 0.2.99

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

@@ -1,865 +1,1297 @@
-import React, {ReactNode} from 'react'
-import {Button, Card, Checkbox, Col, Collapse, Divider, Popconfirm, Popover, Row, Space, Table, Tooltip} from 'antd';
+import React, { ReactNode } from "react";
 import {
-    AlignCenterOutlined,
-    AlignLeftOutlined,
-    CopyOutlined,
-    DeleteOutlined,
-    DownloadOutlined,
-    EditOutlined,
-    EyeInvisibleOutlined,
-    EyeOutlined,
-    FormOutlined,
-    FundOutlined,
-    LineChartOutlined,
-    MenuOutlined,
-    PlusCircleOutlined,
-    PlusOutlined,
-    ReloadOutlined,
-    RetweetOutlined,
-    SearchOutlined,
-    TableOutlined,
-    UploadOutlined
-} from '@ant-design/icons';
-import "./index.css"
+  Button,
+  Card,
+  Checkbox,
+  Col,
+  Collapse,
+  Divider,
+  Popconfirm,
+  Popover,
+  Row,
+  Space,
+  Tooltip,
+} from "antd";
+import { Table } from "./control-table-x-axis-wrapper";
 import {
-    ActTableMode,
-    ActTableViewModel,
-    AddOrUpdate, ClassifiedAddConfig,
-    ColumnConfig,
-    DtmplData, JumpConfig,
-    LtmplConfig,
-    QueryKey,
-    SelectedRow,
-    TmplBaseProps,
+  AlignCenterOutlined,
+  AlignLeftOutlined,
+  CopyOutlined,
+  DeleteOutlined,
+  DownloadOutlined,
+  EditOutlined,
+  EyeInvisibleOutlined,
+  EyeOutlined,
+  FormOutlined,
+  FundOutlined,
+  LineChartOutlined,
+  MenuOutlined,
+  PlusCircleOutlined,
+  PlusOutlined,
+  ReloadOutlined,
+  RetweetOutlined,
+  SearchOutlined,
+  TableOutlined,
+  UploadOutlined,
+} from "@ant-design/icons";
+import "./index.css";
+import {
+  ActTableMode,
+  ActTableViewModel,
+  AddOrUpdate,
+  ClassifiedAddConfig,
+  ColumnConfig,
+  DtmplData,
+  JumpConfig,
+  LtmplConfig,
+  QueryKey,
+  SelectedRow,
+  TmplBaseProps,
 } from "../tmpl/interface";
 import TableUnits from "./table-util";
-import SupportInputTypes from '../tmpl/control-type-supportor';
+import SupportInputTypes from "../tmpl/control-type-supportor";
 import HcserviceV3 from "../tmpl/hcservice-v3";
-import QueryTable from './query-table';
+import QueryTable from "./query-table";
 import CriteriaForm from "./../form/criteria-form";
 import ViewControl from "../controls/view-control";
 import Units from "../units";
-import ColumnSelector from './column/column-selector';
-import ExportFrame from '../exportor/export-frame';
-import {SortableHandle} from 'react-sortable-hoc';
+import ColumnSelector from "./column/column-selector";
+import ExportFrame from "../exportor/export-frame";
+import { SortableHandle } from "react-sortable-hoc";
 import L2ActTable from "./l2-act-table";
 
-import Action from '../controls/action'
-import Restat from "./stat/restat"
-import ActionUtils from '../controls/action/utils'
+import Action from "../controls/action";
+import Restat from "./stat/restat";
+import ActionUtils from "../controls/action/utils";
 import CquickButton from "../controls/cquery/cquick-button";
 import CollapseCard from "../controls/collapse-card";
 import ToolTipBar from "../detail/tooltipbar";
+import { LocaleContext } from "../locale/LocaleProvider";
 
-const DragHandle = SortableHandle(() => <MenuOutlined style={{cursor: 'grab', color: '#999'}}/>);
-const {Panel} = Collapse;
-
-type Level = 'l1' | 'l2';
+const DragHandle = SortableHandle(() => (
+  <MenuOutlined style={{ cursor: "grab", color: "#999" }} />
+));
+const { Panel } = Collapse;
 
+type Level = "l1" | "l2";
 
-const defaultDisabledColIds: string[] = ['20000', '10000']
+const defaultDisabledColIds: string[] = ["20000", "10000"];
 
 interface ActTableProps extends TmplBaseProps {
-    criteriaData: object,
-    pageNo:number,
-    pageSize:number,
-    onChangePage:(pageNo:number,pageSize:number)=>void,
-    ltmplConfig: LtmplConfig,
-    menuId?: string,
-    showView?: (code: string, toCustomPage?: boolean) => void,
-    doCreate?: (addtmplId:string,toCustomPage: boolean) => void,
-    customCreatable?:boolean,
-    doEdit?: (code: string, mode: AddOrUpdate, toCustomPage?: boolean) => void,
-    customEditable?:boolean,
-    doDelete?: (code: string) => void,
-    doSearch?: (params: object) => void,
-    doRAction?: (ractionId: string, mainCode: string) => void,
-    level?: Level,
-    funcMode?: ActTableMode,
-    title?: ReactNode,
-    tip?:any,
-    collapsible?: boolean,
-    initCollapse?:boolean,
-    readOnly?:boolean,
-};
+  criteriaData: object;
+  pageNo: number;
+  pageSize: number;
+  onChangePage: (pageNo: number, pageSize: number) => void;
+  ltmplConfig: LtmplConfig;
+  menuId?: string;
+  showView?: (code: string, toCustomPage?: boolean) => void;
+  doCreate?: (addtmplId: string, toCustomPage: boolean) => void;
+  customCreatable?: boolean;
+  doEdit?: (code: string, mode: AddOrUpdate, toCustomPage?: boolean) => void;
+  customEditable?: boolean;
+  doDelete?: (code: string) => void;
+  doSearch?: (params: object) => void;
+  doRAction?: (ractionId: string, mainCode: string) => void;
+  level?: Level;
+  funcMode?: ActTableMode;
+  title?: ReactNode;
+  tip?: any;
+  collapsible?: boolean;
+  initCollapse?: boolean;
+  readOnly?: boolean;
+}
 
 interface ActTableStat {
-    //tableColumns?: object[];
-    sortedColConfigs?: ColumnConfig[];
-    queryKey?: QueryKey;
-    loading?: boolean;
-    selectedRows?: SelectedRow[];
-    selectedDatas?: DtmplData[];
-    hiddenColIds?: string[];
-    drillingColIds?: string[];
-    disabledColIds?: string[];
-    hiddenRowCodes?: string[];
-    viewModels?: ActTableViewModel[];
-    showL2ActTable?: boolean;
-    showL2Chart?: boolean;
-};
+  //tableColumns?: object[];
+  sortedColConfigs?: ColumnConfig[];
+  queryKey?: QueryKey;
+  loading?: boolean;
+  selectedRows?: SelectedRow[];
+  selectedDatas?: DtmplData[];
+  hiddenColIds?: string[];
+  drillingColIds?: string[];
+  disabledColIds?: string[];
+  hiddenRowCodes?: string[];
+  viewModels?: ActTableViewModel[];
+  showL2ActTable?: boolean;
+  showL2Chart?: boolean;
+}
 
 class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
-    state = {
-        //tableColumns: undefined,
-        sortedColConfigs: undefined,
-        queryKey: undefined,
-        loading: true,
-        disableCols: undefined,
-        hiddenColIds: defaultDisabledColIds,
-        selectedRows: [],
-        selectedDatas: [],
-        hiddenRowCodes: [],
-        viewModels: [],
-        drillingColIds: undefined,
-        disabledColIds: undefined,
-        showL2ActTable: false,
-        showL2Chart: false,
+  state = {
+    //tableColumns: undefined,
+    sortedColConfigs: undefined,
+    queryKey: undefined,
+    loading: true,
+    disableCols: undefined,
+    hiddenColIds: defaultDisabledColIds,
+    selectedRows: [],
+    selectedDatas: [],
+    hiddenRowCodes: [],
+    viewModels: [],
+    drillingColIds: undefined,
+    disabledColIds: undefined,
+    showL2ActTable: false,
+    showL2Chart: false,
+  };
+
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
+
+  static defaultProps = {
+    criteriaData: {},
+    funcMode: "complete",
+    collapsible: false,
+    initCollapse: false,
+    readOnly: false,
+  };
+
+  loadData = async (
+    hiddenColIds: string[],
+    hiddenRowCodes: string[],
+    sortedColConfigs: ColumnConfig[]
+  ) => {
+    const {
+      sourceId,
+      criteriaData,
+      ltmplConfig,
+      mainCode,
+      level,
+      pageNo,
+      pageSize,
+      serverKey,
+    } = this.props;
+    if (!ltmplConfig) {
+      return;
     }
 
-    static defaultProps = {
-        criteriaData: {},
-        funcMode: 'complete',
-        collapsible: false,
-        initCollapse:false,
-        readOnly:false,
-    }
-
-    loadData = async (hiddenColIds: string[], hiddenRowCodes: string[], sortedColConfigs: ColumnConfig[]) => {
-        const {sourceId, criteriaData, ltmplConfig, mainCode, level,pageNo,pageSize,serverKey} = this.props;
-        if (!ltmplConfig) {
-            return;
+    this.setState({
+      loading: true,
+    });
+    let disabledColIds: string[] = [];
+    let hiddenColIds_ = [...hiddenColIds];
+    if (criteriaData && criteriaData["drillingColIds"]) {
+      let dColIds = [...criteriaData["drillingColIds"]];
+      ltmplConfig.columns.forEach((item) => {
+        if (
+          item.statColType == "dimension" &&
+          !dColIds.includes(item.id) &&
+          !hiddenColIds_.includes(item.id)
+        ) {
+          hiddenColIds_.push(item.id);
+          disabledColIds.push(item.id);
         }
-
-        this.setState({
-            loading: true,
-        })
-        let disabledColIds: string[] = [];
-        let hiddenColIds_ = [...hiddenColIds];
-        if (criteriaData && criteriaData['drillingColIds']) {
-            let dColIds = [...criteriaData['drillingColIds']];
-            ltmplConfig.columns.forEach((item) => {
-                if (item.statColType == 'dimension' && !dColIds.includes(item.id) && !hiddenColIds_.includes(item.id)) {
-                    hiddenColIds_.push(item.id);
-                    disabledColIds.push(item.id);
-                }
-                if (item.statColType == 'dimension' && !dColIds.includes(item.id) && !disabledColIds.includes(item.id)) {
-                    disabledColIds.push(item.id);
-                }
-            });
-            hiddenColIds_ = hiddenColIds_.filter((id) => {
-                return !dColIds.includes(id)
-            });
+        if (
+          item.statColType == "dimension" &&
+          !dColIds.includes(item.id) &&
+          !disabledColIds.includes(item.id)
+        ) {
+          disabledColIds.push(item.id);
         }
-        ltmplConfig.columns.forEach((item) => {
-            if (item.hidden) {
-                hiddenColIds_.push(item.id);
-            }
-        })
-        /** 构建column **/
-       // let tableColumns = this.buildTableColumns(ltmplConfig, hiddenColIds_, hiddenRowCodes, sortedColConfigs);
-
-        const {defaultPageSize} = ltmplConfig;
-
-        let pageInfo = {
-            pageNo:pageNo?pageNo:1,
-            pageSize:pageSize?pageSize:defaultPageSize ? defaultPageSize : 10,
-            virtualEndPageNo: undefined,
-        }
-
-        /** 构建 dataSource **/
-            //构建过滤条件
-        let queryKey: QueryKey
-        if (level && level == 'l2') {
-            queryKey = await HcserviceV3.requestL2LtmplQueryKey(serverKey,sourceId, {
-                ...criteriaData, ...pageInfo,
-                mainCode
-            });
-        } else {
-            queryKey = await HcserviceV3.requestLtmplQueryKey(serverKey,sourceId, {
-                ...criteriaData, ...pageInfo,
-                mainCode
-            });
-        }
-
-
-        this.setState({
-            disabledColIds,
-            hiddenColIds: hiddenColIds_,
-            hiddenRowCodes,
-            sortedColConfigs,
-            queryKey,
-            loading: false,
-            showL2Chart: false,
-            selectedRows: [],
-            selectedDatas: [],
-            viewModels: (this.state.viewModels.length > 0 ? this.state.viewModels : ['table']),
-        })
+      });
+      hiddenColIds_ = hiddenColIds_.filter((id) => {
+        return !dColIds.includes(id);
+      });
     }
-
-    buildTableColumns = (ltmplConfig: LtmplConfig, hiddenColIds: string[], hiddenRowCodes: string[], sortedColConfigs: ColumnConfig[]) => {
-        const { showView, doEdit, doRAction,customEditable,serverKey,readOnly,sourceId} = this.props
-        const {buttons} = ltmplConfig;
-        let tableColumns = [];
-        let s = 0;
-        let colConfigs = sortedColConfigs ? sortedColConfigs : ltmplConfig.columns;
-
-        colConfigs.forEach((item) => {
-            let column = {};
-            if (!hiddenColIds || !hiddenColIds.includes(item.id)) {
-                tableColumns.push(column);
-            }
-            column['title'] = item.title;
-            column['dataIndex'] = item.id;
-            // column['ellipsis']= true;
-            s++;
-            let itemType = SupportInputTypes.getSupportControlType(item);
-            if (s < 10 && item.title != '操作' && item.title != '序号') {
-                if (hiddenColIds.includes('10000')) {
-                    TableUnits.sort(column, itemType);
-                }
-            }
-            //特殊列处理
-            //序号
-            if (item.title === "序号") {
-                //item.fixed='left';
-                column['render'] = (text, record, index) => (
-                    <label>{index + 1}</label>
-                )
-                item['sorter'] = undefined;
-            } else if (item.id == '10000') {
-                column['title'] = <Tooltip title={'拖拽排序'}>{item.title}</Tooltip>;
-                column['width'] = 30;
-                column['dataIndex'] = item.id;
-                column['className'] = 'drag-visible';
-                column['render'] = () => <DragHandle/>;
-            } else if (item.id == '20000') {//隐藏
-                column['align'] = 'center';
-                column['width'] = 14;
-                column['title'] = <>{hiddenRowCodes.length > 0 ?
-                    <Tooltip title={'取消隐藏'}><Button style={{marginRight: '0px'}}
-                                                    size="small" shape={'circle'}
-                                                    icon={<EyeOutlined/>} type={'text'}
-                                                    onClick={() => this.unHiden()}>
-                    </Button></Tooltip> : ''}</>;
-                column['render'] = (text, record) => (<Tooltip title={'隐藏'}> <Button style={{marginRight: '0px'}}
-                                                                                     icon={<EyeInvisibleOutlined/>}
-                                                                                     type="dashed"
-                                                                                     size="small"
-                                                                                     onClick={() => this.onHide(record.code)}>
-                </Button></Tooltip>);
-            } else if (item.title === "操作") {
-                column['fixed'] = 'right';
-                column['align'] = 'center';
-                column['className'] = 'opsColumn';
-                column['title'] = <>操 作</>
-                column['render'] = (text, record) => (
-                    <Space size={[0, 4]} wrap>
-                        {buttons.includes('detail') && showView ?
-                            <Button
-                                size="small"
-                                type="primary"
-                                icon={<AlignLeftOutlined/>}
-                                onClick={() => showView(record.code)}>
-                            </Button>
-                            : ""}
-                        {buttons.includes('customDetail') && showView ?
-                            <Button
-                                size="small"
-                                type="primary"
-                                icon={<AlignCenterOutlined/>}
-                                onClick={() => showView(record.code, true)}>
-                            </Button>
-                            : ""}
-                        {buttons.includes('dtmplEdit') && doEdit && !readOnly
-                        && (!ltmplConfig.editAction || ActionUtils.isShow(ltmplConfig.editAction, [record], undefined)) ?
-                            < Button
-                                size="small"
-                                type="dashed"
-                                icon={<EditOutlined/>}
-                                onClick={() => doEdit(record.code, 'update')}>
-                            </Button> : ""}
-                        {(buttons.includes('dtmplCustomEdit') || customEditable) && doEdit && !readOnly
-                        && (!ltmplConfig.editAction || ActionUtils.isShow(ltmplConfig.editAction, [record], undefined)) ?
-                            < Button
-                                size="small"
-                                type="dashed"
-                                icon={<FormOutlined/>}
-                                onClick={() => doEdit(record.code, 'update', true)}>
-                            </Button> : ""}
-                        {buttons.includes('copy') && doEdit && !readOnly
-                            ?
-                            <Tooltip title={'复制'}>< Button
-                                size="small"
-                                type="dashed"
-                                icon={<CopyOutlined/>}
-                                onClick={ async () => {
-                                    //先复制
-                                    let toCustomPage=false;
-                                    if(buttons.includes('dtmplCustomEdit') || customEditable){
-                                        toCustomPage=true;
-                                    }
-                                    let code = await HcserviceV3.doCopy(serverKey,sourceId,record.code);
-                                    if(code){
-                                        doEdit(code, 'update',toCustomPage);
-                                    }
-                                }}>
-                            </Button></Tooltip> : ""}
-                        {ltmplConfig.ractions && !readOnly ? ltmplConfig.ractions.map((raction) => {
-                            return <Button
-                                key={raction.id}
-                                size="small"
-                                type="dashed"
-                                onClick={() => doRAction(raction.id, record.code)}
-                            >
-                                {raction.title}
-                            </Button>
-                        }) : ""}
-                        {ltmplConfig.rowActions && !readOnly && ltmplConfig.rowActions.length > 0 ?
-                            ltmplConfig.rowActions.map((action) => {
-
-                                return <Action serverKey={serverKey} iconType={'icon'} key={action.id} data={[record]} actionConfig={action}
-                                               doAction={this.doRowAction} buttonSize={'small'} serial={1}></Action>
-                            }) : ""}
-                        {ltmplConfig.rowJumps && ltmplConfig.rowJumps.length > 0 && !readOnly ?
-                            ltmplConfig.rowJumps.map((jump) => {
-                                return <Button key={jump.id} size="small" type="dashed"
-                                               onClick={() => this.doRowJump(jump, record)}
-                                >{jump.title}</Button>;
-                            }) : ""}
-                        {ltmplConfig.rowCQuerys && ltmplConfig.rowCQuerys.length > 0 && !readOnly?
-                            ltmplConfig.rowCQuerys.map((cquery) => {
-                                // console.log("record record", record);
-                                return <CquickButton serverKey={serverKey} key={cquery.id} size={"small"} pageType={'drawer'}
-                                    // onClick={() => doCQuery(cquery.id)}
-                                                     cQueryConfig={cquery}
-                                                     mainCode={cquery.mainCodeColId ? record[cquery.mainCodeColId] : record.code}/>
-                            }) : ""}
-                        {buttons.includes('singleDelete') && !readOnly && (!ltmplConfig.deleteAction || ActionUtils.isShow(ltmplConfig.deleteAction, [record], undefined)) ?
-                            <Popconfirm
-                                placement="rightBottom"
-                                title={'确定要【删除】此数据吗？'}
-                                onConfirm={() => {
-                                    this.doDeleteByCode(record.code)
-                                }}
-                                okText="确定"
-                                cancelText="取消"
-                                okType={"danger"}
-                            >
-                                <Button size="small" type="dashed" danger><DeleteOutlined/></Button>
-                            </Popconfirm>
-                            : ""}
-                    </Space>);
-            } else {
-                column['className'] = 'opsColumn';
-                column['render'] = (text, record) => {
-                    return <ViewControl serverKey={serverKey} fieldConfig={item} value={record[item.id]} holderType={'table'}/>
-
-                }
-            }
-        });
-        return tableColumns
+    ltmplConfig.columns.forEach((item) => {
+      if (item.hidden) {
+        hiddenColIds_.push(item.id);
+      }
+    });
+    /** 构建column **/
+    // let tableColumns = this.buildTableColumns(ltmplConfig, hiddenColIds_, hiddenRowCodes, sortedColConfigs);
+
+    const { defaultPageSize } = ltmplConfig;
+
+    let pageInfo = {
+      pageNo: pageNo ? pageNo : 1,
+      pageSize: pageSize ? pageSize : defaultPageSize ? defaultPageSize : 10,
+      virtualEndPageNo: undefined,
+    };
+
+    /** 构建 dataSource **/
+    //构建过滤条件
+    let queryKey: QueryKey;
+    if (level && level == "l2") {
+      queryKey = await HcserviceV3.requestL2LtmplQueryKey(serverKey, sourceId, {
+        ...criteriaData,
+        ...pageInfo,
+        mainCode,
+      });
+    } else {
+      queryKey = await HcserviceV3.requestLtmplQueryKey(serverKey, sourceId, {
+        ...criteriaData,
+        ...pageInfo,
+        mainCode,
+      });
     }
 
-
-    async componentDidMount() {
-        const {ltmplConfig} = this.props;
-        let sortedColConfigs = undefined;
-        if (ltmplConfig) {
-            sortedColConfigs = [{id: '10000', title: '排序'}, ...ltmplConfig.columns, {id: '20000', title: '隐藏'}]
+    this.setState({
+      disabledColIds,
+      hiddenColIds: hiddenColIds_,
+      hiddenRowCodes,
+      sortedColConfigs,
+      queryKey,
+      loading: false,
+      showL2Chart: false,
+      selectedRows: [],
+      selectedDatas: [],
+      viewModels:
+        this.state.viewModels.length > 0 ? this.state.viewModels : ["table"],
+    });
+  };
+
+  buildTableColumns = (
+    ltmplConfig: LtmplConfig,
+    hiddenColIds: string[],
+    hiddenRowCodes: string[],
+    sortedColConfigs: ColumnConfig[]
+  ) => {
+    const {
+      showView,
+      doEdit,
+      doRAction,
+      customEditable,
+      serverKey,
+      readOnly,
+      sourceId,
+    } = this.props;
+    const { translate } = this.context;
+    const { buttons } = ltmplConfig;
+    let tableColumns = [];
+    let s = 0;
+    let colConfigs = sortedColConfigs ? sortedColConfigs : ltmplConfig.columns;
+
+    colConfigs.forEach((item) => {
+      let column = {};
+      if (!hiddenColIds || !hiddenColIds.includes(item.id)) {
+        tableColumns.push(column);
+      }
+      column["title"] = item.title;
+      column["dataIndex"] = item.id;
+      // column['ellipsis']= true;
+      s++;
+      let itemType = SupportInputTypes.getSupportControlType(item);
+      if (s < 10 && item.title != "操作" && item.title != "序号") {
+        if (hiddenColIds.includes("10000")) {
+          TableUnits.sort(column, itemType);
         }
-        this.loadData(defaultDisabledColIds, [], sortedColConfigs);
-    }
-
-    async componentDidUpdate(prevProps) {
-        const {sourceId,criteriaData, ltmplConfig} = this.props;
-        let {ltmplConfig: preLtmplConfig, criteriaData: preCriteriaData,sourceId:preSourceId} = prevProps;
-
-        let {hiddenColIds, sortedColConfigs} = this.state;
-        if ((sourceId && preSourceId != sourceId) ||
-            (ltmplConfig && (!preLtmplConfig || ltmplConfig.id != preLtmplConfig.id)) ||
-            (Units.transQueryParamsToStr(criteriaData,false,['pageSize','pageNo']) != Units.transQueryParamsToStr(preCriteriaData,false,['pageSize','pageNo']))) {
-            if (ltmplConfig.id == preLtmplConfig.id) {
-                this.loadData(hiddenColIds, [], sortedColConfigs);
-            } else {
-                let sColConfigs = undefined;
-                if (ltmplConfig) {
-                    sColConfigs = [{id: '10000', title: '排序'}, ...ltmplConfig.columns, {id: '20000', title: '隐藏'}]
-                }
-                this.setState({
-                    viewModels: ['table'],
+      }
+      //特殊列处理
+      //序号
+      if (item.title === "序号") {
+        //item.fixed='left';
+        column["render"] = (text, record, index) => <label>{index + 1}</label>;
+        item["sorter"] = undefined;
+      } else if (item.id == "10000") {
+        column["title"] = <Tooltip title={"拖拽排序"}>{item.title}</Tooltip>;
+        column["width"] = 30;
+        column["dataIndex"] = item.id;
+        column["className"] = "drag-visible";
+        column["render"] = () => <DragHandle />;
+      } else if (item.id == "20000") {
+        //隐藏
+        column["align"] = "center";
+        column["width"] = 14;
+        column["title"] = (
+          <>
+            {hiddenRowCodes.length > 0 ? (
+              <Tooltip title={translate("${取消隐藏}")}>
+                <Button
+                  style={{ marginRight: "0px" }}
+                  size="small"
+                  shape={"circle"}
+                  icon={<EyeOutlined />}
+                  type={"text"}
+                  onClick={() => this.unHiden()}
+                ></Button>
+              </Tooltip>
+            ) : (
+              ""
+            )}
+          </>
+        );
+        column["render"] = (text, record) => (
+          <Tooltip title={translate("${隐藏}")}>
+            {" "}
+            <Button
+              style={{ marginRight: "0px" }}
+              icon={<EyeInvisibleOutlined />}
+              type="dashed"
+              size="small"
+              onClick={() => this.onHide(record.code)}
+            ></Button>
+          </Tooltip>
+        );
+      } else if (item.title === "操作") {
+        column["fixed"] = "right";
+        column["align"] = "center";
+        column["className"] = "opsColumn";
+        column["title"] = <>{translate("${操作}")}</>;
+        column["render"] = (text, record) => (
+          <Space size={[0, 4]} wrap>
+            {buttons.includes("detail") && showView ? (
+              <Button
+                size="small"
+                type="primary"
+                icon={<AlignLeftOutlined />}
+                onClick={() => showView(record.code)}
+              ></Button>
+            ) : (
+              ""
+            )}
+            {buttons.includes("customDetail") && showView ? (
+              <Button
+                size="small"
+                type="primary"
+                icon={<AlignCenterOutlined />}
+                onClick={() => showView(record.code, true)}
+              ></Button>
+            ) : (
+              ""
+            )}
+            {buttons.includes("dtmplEdit") &&
+            doEdit &&
+            !readOnly &&
+            (!ltmplConfig.editAction ||
+              ActionUtils.isShow(
+                ltmplConfig.editAction,
+                [record],
+                undefined
+              )) ? (
+              <Button
+                size="small"
+                type="dashed"
+                icon={<EditOutlined />}
+                onClick={() => doEdit(record.code, "update")}
+              ></Button>
+            ) : (
+              ""
+            )}
+            {(buttons.includes("dtmplCustomEdit") || customEditable) &&
+            doEdit &&
+            !readOnly &&
+            (!ltmplConfig.editAction ||
+              ActionUtils.isShow(
+                ltmplConfig.editAction,
+                [record],
+                undefined
+              )) ? (
+              <Button
+                size="small"
+                type="dashed"
+                icon={<FormOutlined />}
+                onClick={() => doEdit(record.code, "update", true)}
+              ></Button>
+            ) : (
+              ""
+            )}
+            {buttons.includes("copy") && doEdit && !readOnly ? (
+              <Tooltip title={translate("${复制}")}>
+                <Button
+                  size="small"
+                  type="dashed"
+                  icon={<CopyOutlined />}
+                  onClick={async () => {
+                    //先复制
+                    let toCustomPage = false;
+                    if (buttons.includes("dtmplCustomEdit") || customEditable) {
+                      toCustomPage = true;
+                    }
+                    let code = await HcserviceV3.doCopy(
+                      serverKey,
+                      sourceId,
+                      record.code
+                    );
+                    if (code) {
+                      doEdit(code, "update", toCustomPage);
+                    }
+                  }}
+                ></Button>
+              </Tooltip>
+            ) : (
+              ""
+            )}
+            {ltmplConfig.ractions && !readOnly
+              ? ltmplConfig.ractions.map((raction) => {
+                  return (
+                    <Button
+                      key={raction.id}
+                      size="small"
+                      type="dashed"
+                      onClick={() => doRAction(raction.id, record.code)}
+                    >
+                      {raction.title}
+                    </Button>
+                  );
                 })
-                this.loadData(defaultDisabledColIds, [], sColConfigs);
-            }
-        }
+              : ""}
+            {ltmplConfig.rowActions &&
+            !readOnly &&
+            ltmplConfig.rowActions.length > 0
+              ? ltmplConfig.rowActions.map((action) => {
+                  return (
+                    <Action
+                      serverKey={serverKey}
+                      iconType={"icon"}
+                      key={action.id}
+                      data={[record]}
+                      actionConfig={action}
+                      doAction={this.doRowAction}
+                      buttonSize={"small"}
+                      serial={1}
+                    ></Action>
+                  );
+                })
+              : ""}
+            {ltmplConfig.rowJumps &&
+            ltmplConfig.rowJumps.length > 0 &&
+            !readOnly
+              ? ltmplConfig.rowJumps.map((jump) => {
+                  return (
+                    <Button
+                      key={jump.id}
+                      size="small"
+                      type="dashed"
+                      onClick={() => this.doRowJump(jump, record)}
+                    >
+                      {jump.title}
+                    </Button>
+                  );
+                })
+              : ""}
+            {ltmplConfig.rowCQuerys &&
+            ltmplConfig.rowCQuerys.length > 0 &&
+            !readOnly
+              ? ltmplConfig.rowCQuerys.map((cquery) => {
+                  // console.log("record record", record);
+                  return (
+                    <CquickButton
+                      serverKey={serverKey}
+                      key={cquery.id}
+                      size={"small"}
+                      pageType={"drawer"}
+                      // onClick={() => doCQuery(cquery.id)}
+                      cQueryConfig={cquery}
+                      mainCode={
+                        cquery.mainCodeColId
+                          ? record[cquery.mainCodeColId]
+                          : record.code
+                      }
+                    />
+                  );
+                })
+              : ""}
+            {buttons.includes("singleDelete") &&
+            !readOnly &&
+            (!ltmplConfig.deleteAction ||
+              ActionUtils.isShow(
+                ltmplConfig.deleteAction,
+                [record],
+                undefined
+              )) ? (
+              <Popconfirm
+                placement="rightBottom"
+                title={translate("${确定要[删除]此数据吗}?")}
+                onConfirm={() => {
+                  this.doDeleteByCode(record.code);
+                }}
+                okText={translate("${确定}")}
+                cancelText={translate("${取消}")}
+                okType={"danger"}
+              >
+                <Button size="small" type="dashed" danger>
+                  <DeleteOutlined />
+                </Button>
+              </Popconfirm>
+            ) : (
+              ""
+            )}
+          </Space>
+        );
+      } else {
+        column["className"] = "opsColumn";
+        column["render"] = (text, record) => {
+          return (
+            <ViewControl
+              serverKey={serverKey}
+              fieldConfig={item}
+              value={record[item.id]}
+              holderType={"table"}
+            />
+          );
+        };
+      }
+    });
+    return tableColumns;
+  };
+
+  async componentDidMount() {
+    const { ltmplConfig } = this.props;
+    const { translate } = this.context;
+    let sortedColConfigs = undefined;
+    if (ltmplConfig) {
+      sortedColConfigs = [
+        { id: "10000", title: translate("${排序}") },
+        ...ltmplConfig.columns,
+        { id: "20000", title: translate("${隐藏}") },
+      ];
     }
-
-
-    handleShowChart = () => {
+    this.loadData(defaultDisabledColIds, [], sortedColConfigs);
+  }
+
+  async componentDidUpdate(prevProps) {
+    const { sourceId, criteriaData, ltmplConfig } = this.props;
+    const { translate } = this.context;
+    let {
+      ltmplConfig: preLtmplConfig,
+      criteriaData: preCriteriaData,
+      sourceId: preSourceId,
+    } = prevProps;
+
+    let { hiddenColIds, sortedColConfigs } = this.state;
+    if (
+      (sourceId && preSourceId != sourceId) ||
+      (ltmplConfig &&
+        (!preLtmplConfig || ltmplConfig.id != preLtmplConfig.id)) ||
+      Units.transQueryParamsToStr(criteriaData, false, [
+        "pageSize",
+        "pageNo",
+      ]) !=
+        Units.transQueryParamsToStr(preCriteriaData, false, [
+          "pageSize",
+          "pageNo",
+        ])
+    ) {
+      if (ltmplConfig.id == preLtmplConfig.id) {
+        this.loadData(hiddenColIds, [], sortedColConfigs);
+      } else {
+        let sColConfigs = undefined;
+        if (ltmplConfig) {
+          sColConfigs = [
+            { id: "10000", title: translate("${排序}") },
+            ...ltmplConfig.columns,
+            { id: "20000", title: translate("${隐藏}") },
+          ];
+        }
         this.setState({
-            showL2Chart: !this.state.showL2Chart
-        })
+          viewModels: ["table"],
+        });
+        this.loadData(defaultDisabledColIds, [], sColConfigs);
+      }
     }
-
-    handleDataAnalysis = () => {
-
-        this.setState({
-            showL2ActTable: !this.state.showL2ActTable,
-        })
+  }
+
+  handleShowChart = () => {
+    this.setState({
+      showL2Chart: !this.state.showL2Chart,
+    });
+  };
+
+  handleDataAnalysis = () => {
+    this.setState({
+      showL2ActTable: !this.state.showL2ActTable,
+    });
+  };
+
+  unHiden = () => {
+    const { ltmplConfig } = this.props;
+    const { hiddenColIds, sortedColConfigs } = this.state;
+    this.setState({
+      hiddenRowCodes: [],
+      // tableColumns: this.buildTableColumns(ltmplConfig, hiddenColIds, [], sortedColConfigs),
+    });
+  };
+
+  onHide = (code: string) => {
+    const { ltmplConfig } = this.props;
+    const { hiddenRowCodes, hiddenColIds, sortedColConfigs } = this.state;
+    let hiddenCodes = [...hiddenRowCodes, code];
+    this.setState({
+      hiddenRowCodes: hiddenCodes,
+      // tableColumns: this.buildTableColumns(ltmplConfig, hiddenColIds, hiddenCodes, sortedColConfigs),
+    });
+  };
+
+  changeViewModel = (viewModels) => {
+    this.setState({
+      viewModels,
+    });
+  };
+
+  changeHiddenColumns = (hiddenColIds: string[]) => {
+    const {} = this.props;
+    const {} = this.state;
+    this.setState({
+      showL2Chart: false,
+      hiddenColIds,
+      // tableColumns: this.buildTableColumns(ltmplConfig, hiddenColIds, hiddenRowCodes, sortedColConfigs),
+    });
+  };
+
+  doSelectedAction = async (actionId: string, codes, params: object) => {
+    const { selectedRows } = this.state;
+    this.doAction(actionId, selectedRows, params);
+  };
+
+  doAction = async (actionId: string, selectedRows: SelectedRow[], params) => {
+    const { serverKey } = this.props;
+    const { hiddenColIds, hiddenRowCodes, sortedColConfigs } = this.state;
+    this.setState({
+      loading: true,
+    });
+    let result: boolean = await HcserviceV3.postActions(
+      serverKey,
+      actionId,
+      selectedRows,
+      params
+    );
+    if (result) {
+      //重新加载数据
+      this.loadData(hiddenColIds, hiddenRowCodes, sortedColConfigs);
+    } else {
+      this.setState({
+        loading: false,
+      });
     }
-
-    unHiden = () => {
-        const {ltmplConfig,} = this.props
-        const {hiddenColIds, sortedColConfigs} = this.state;
-        this.setState({
-            hiddenRowCodes: [],
-           // tableColumns: this.buildTableColumns(ltmplConfig, hiddenColIds, [], sortedColConfigs),
-        })
-    }
-
-    onHide = (code: string) => {
-        const {ltmplConfig,} = this.props
-        const {hiddenRowCodes, hiddenColIds, sortedColConfigs} = this.state;
-        let hiddenCodes = [...hiddenRowCodes, code];
-        this.setState({
-            hiddenRowCodes: hiddenCodes,
-           // tableColumns: this.buildTableColumns(ltmplConfig, hiddenColIds, hiddenCodes, sortedColConfigs),
-        })
+  };
+
+  doRowAction = async (actionId: string, codes: string[], params: object) => {
+    this.doAction(actionId, [{ title: undefined, code: codes[0] }], params);
+  };
+
+  doDelete = async () => {
+    const { sourceId, serverKey } = this.props;
+    const {
+      selectedRows,
+      hiddenColIds,
+      hiddenRowCodes,
+      sortedColConfigs,
+    } = this.state;
+    this.setState({
+      loading: true,
+    });
+    let result: boolean = await HcserviceV3.deleteData(
+      serverKey,
+      sourceId,
+      selectedRows
+    );
+    if (result) {
+      //重新加载数据
+      this.loadData(hiddenColIds, hiddenRowCodes, sortedColConfigs);
+    } else {
+      this.setState({
+        loading: false,
+      });
     }
-
-    changeViewModel = (viewModels) => {
-        this.setState({
-            viewModels
-        })
+  };
+
+  doDeleteByCode = async (code: string) => {
+    const { sourceId, serverKey } = this.props;
+    const { hiddenColIds, hiddenRowCodes, sortedColConfigs } = this.state;
+    this.setState({
+      loading: true,
+    });
+    let result: boolean = await HcserviceV3.deleteByCode(serverKey, sourceId, [
+      code,
+    ]);
+    if (result) {
+      //重新加载数据
+      this.loadData(hiddenColIds, hiddenRowCodes, sortedColConfigs);
+    } else {
+      this.setState({
+        loading: false,
+      });
     }
+  };
 
-    changeHiddenColumns = (hiddenColIds: string[]) => {
-        const {} = this.props
-        const {} = this.state;
-        this.setState({
-            showL2Chart: false,
-            hiddenColIds,
-           // tableColumns: this.buildTableColumns(ltmplConfig, hiddenColIds, hiddenRowCodes, sortedColConfigs),
-        })
-    }
+  doSelectedCQuery = async (cqueryId: string) => {};
 
-    doSelectedAction = async (actionId: string, codes, params: object) => {
-        const {selectedRows} = this.state;
-        this.doAction(actionId, selectedRows, params);
-    }
+  doJump = async (jump: JumpConfig, record_: DtmplData) => {
+    let record = record_.fieldMap ? record_.fieldMap : record_;
 
-    doAction = async (actionId: string, selectedRows: SelectedRow[], params) => {
-        const {serverKey} = this.props;
-        const {hiddenColIds, hiddenRowCodes, sortedColConfigs} = this.state;
-        this.setState({
-            loading: true,
-        })
-        let result: boolean = await HcserviceV3.postActions(serverKey,actionId, selectedRows, params);
-        if (result) {//重新加载数据
-            this.loadData(hiddenColIds, hiddenRowCodes, sortedColConfigs);
-        } else {
-            this.setState({
-                loading: false,
-            })
-        }
-    }
+    let url = null;
 
-    doRowAction = async (actionId: string, codes: string[], params: object) => {
-        this.doAction(actionId, [{title: undefined, code: codes[0]}], params);
+    let path = jump.path;
+    if (!path) {
+      path = "/";
     }
-
-    doDelete = async () => {
-        const {sourceId,serverKey} = this.props;
-        const {selectedRows, hiddenColIds, hiddenRowCodes, sortedColConfigs} = this.state;
-        this.setState({
-            loading: true,
-        })
-        let result: boolean = await HcserviceV3.deleteData(serverKey,sourceId, selectedRows);
-        if (result) {//重新加载数据
-            this.loadData(hiddenColIds, hiddenRowCodes, sortedColConfigs);
-        } else {
-            this.setState({
-                loading: false,
-            })
-        }
+    //是否以http开头
+    if (path.indexOf("#") == 0 || url.indexOf("/#") == 0) {
+      url = "";
+    } else if (
+      path.indexOf("http://") == 0 ||
+      path.indexOf("HTTP://") == 0 ||
+      path.indexOf("https://") == 0 ||
+      path.indexOf("HTTPS://") == 0
+    ) {
+      url = path.split("//")[0] + "//";
+      path = path.split("//")[1];
+    } else {
+      url = new URL(window.location.href).pathname;
     }
-
-    doDeleteByCode = async (code: string) => {
-        const {sourceId,serverKey} = this.props;
-        const {hiddenColIds, hiddenRowCodes, sortedColConfigs} = this.state;
-        this.setState({
-            loading: true,
-        })
-        let result: boolean = await HcserviceV3.deleteByCode(serverKey,sourceId, [code]);
-        if (result) {//重新加载数据
-            this.loadData(hiddenColIds, hiddenRowCodes, sortedColConfigs);
-        } else {
-            this.setState({
-                loading: false,
-            })
+    //处理路由参数
+    let paths = path.split("/");
+
+    let routeParamConfigs = jump.routeParams;
+    if (routeParamConfigs) {
+      for (let i = 0; i < paths.length; i++) {
+        if (paths[i].indexOf(":") == 0) {
+          let pa = paths[i].substring(1);
+          //根据参数名匹配参数
+          for (let p of routeParamConfigs) {
+            if (p && pa == p.title) {
+              //赋值替换
+              let v = record[p.id] ? record[p.id] : p.defaultValue;
+              paths[i] = v;
+              break;
+            }
+          }
         }
+      }
+      url = Units.joinPath(url, paths.join("/"));
+    } else {
+      url = Units.joinPath(url, path);
     }
 
-    doSelectedCQuery = async (cqueryId: string) => {
+    //处理search 参数
+    let searchParamConfigs = jump.searchParams;
+    let searchs = [];
+    //放入token
+    if (jump.tokenName) {
+      searchs[0] = jump.tokenName + "=" + Units.hydrocarbonToken();
     }
 
-    doJump = async (jump: JumpConfig, record_: DtmplData) => {
-
-        let record=record_.fieldMap?record_.fieldMap:record_
-
-        let url=null;
-
-        let path=jump.path;
-        if(!path){
-            path="/"
-        }
-        //是否以http开头
-        if(path.indexOf('#')==0 || url.indexOf('/#')==0){
-            url= "";
-        } else if( (path.indexOf('http://')==0 || path.indexOf('HTTP://')==0) || (path.indexOf('https://')==0 || path.indexOf('HTTPS://')==0)){
-            url= path.split("//")[0]+"//";
-            path=path.split("//")[1];
-        }else{
-            url=new URL(window.location.href).pathname;
-        }
-        //处理路由参数
-        let paths=path.split("/");
-
-        let routeParamConfigs=jump.routeParams;
-        if(routeParamConfigs){
-            for (let i=0;i<paths.length;i++) {
-                if(paths[i].indexOf(":")==0){
-                    let pa=paths[i].substring(1);
-                    //根据参数名匹配参数
-                    for(let p of routeParamConfigs){
-                        if(p && pa == p.title){//赋值替换
-                            let v=record[p.id]?record[p.id]:p.defaultValue;
-                            paths[i]=v
-                            break;
-                        }
-                    }
-                }
-            }
-            url=Units.joinPath(url,paths.join("/"));
-        }else{
-            url=Units.joinPath(url,path);
-        }
-
-        //处理search 参数
-        let searchParamConfigs=jump.searchParams;
-        let searchs=[];
-        //放入token
-        if(jump.tokenName){
-            searchs[0]=jump.tokenName+"="+Units.hydrocarbonToken();
-        }
-
-        if(searchParamConfigs){
-            let initSearchLength=searchs.length
-            for(let i=0;i<searchParamConfigs.length;i++){
-               let p= searchParamConfigs[i];
-                let v=record[p.id]?record[p.id]:p.defaultValue;
-                if(!v && p.title=='code'){
-                    v=record_.code;
-                }
-                searchs[initSearchLength+i]=p.title+"="+ v;
-            }
-        }
-        if(searchs.length>0){
-            if( url.indexOf("?")!=url.length-1){
-                url=url+"?";
-            }
-            url=url+searchs.join("&");
-        }
-        if(url.indexOf('#')==0 || url.indexOf('/#')==0 || url.indexOf('//#')==0){
-            window.location.hash = url.substring(url.indexOf('#')+1);
-        }else{
-            window.open(url);
+    if (searchParamConfigs) {
+      let initSearchLength = searchs.length;
+      for (let i = 0; i < searchParamConfigs.length; i++) {
+        let p = searchParamConfigs[i];
+        let v = record[p.id] ? record[p.id] : p.defaultValue;
+        if (!v && p.title == "code") {
+          v = record_.code;
         }
+        searchs[initSearchLength + i] = p.title + "=" + v;
+      }
     }
-
-    doRowJump = async (jump: JumpConfig, record: DtmplData) => {
-        this.doJump(jump, record);
+    if (searchs.length > 0) {
+      if (url.indexOf("?") != url.length - 1) {
+        url = url + "?";
+      }
+      url = url + searchs.join("&");
     }
-
-    doSelectedJump = async (jump: JumpConfig) => {
-        const {selectedDatas} = this.state;
-        if (selectedDatas.length == 1) {
-            this.doJump(jump, selectedDatas[0])
-        }
+    if (
+      url.indexOf("#") == 0 ||
+      url.indexOf("/#") == 0 ||
+      url.indexOf("//#") == 0
+    ) {
+      window.location.hash = url.substring(url.indexOf("#") + 1);
+    } else {
+      window.open(url);
     }
+  };
 
-    changeRowSelection = (selectedRows: SelectedRow[], selectedDatas: DtmplData[]) => {
-        this.setState({
-            selectedRows,
-            selectedDatas,
-        })
-    }
+  doRowJump = async (jump: JumpConfig, record: DtmplData) => {
+    this.doJump(jump, record);
+  };
 
-    onChangeColSort = (sortedColConfigs: ColumnConfig[]) => {
-        const {ltmplConfig} = this.props
-        const {hiddenRowCodes, hiddenColIds} = this.state;
-        this.setState({
-            sortedColConfigs,
-           // tableColumns: this.buildTableColumns(ltmplConfig, hiddenColIds, hiddenRowCodes, sortedColConfigs),
-        })
+  doSelectedJump = async (jump: JumpConfig) => {
+    const { selectedDatas } = this.state;
+    if (selectedDatas.length == 1) {
+      this.doJump(jump, selectedDatas[0]);
     }
-
-    getAddTmplButton= (classifiedAddConfigs: ClassifiedAddConfig[]) => {
-        if(classifiedAddConfigs && classifiedAddConfigs.length<1){
-            return "没有分类添加按钮";
-        }
-        return classifiedAddConfigs.map((config)=>{
-            return <p><Button size={'small'} type={'text'}
-                onClick={() => this.props.doCreate(config.id,false)}>
-                {config.title}
-            </Button></p>
-        })
+  };
+
+  changeRowSelection = (
+    selectedRows: SelectedRow[],
+    selectedDatas: DtmplData[]
+  ) => {
+    this.setState({
+      selectedRows,
+      selectedDatas,
+    });
+  };
+
+  onChangeColSort = (sortedColConfigs: ColumnConfig[]) => {
+    const { ltmplConfig } = this.props;
+    const { hiddenRowCodes, hiddenColIds } = this.state;
+    this.setState({
+      sortedColConfigs,
+      // tableColumns: this.buildTableColumns(ltmplConfig, hiddenColIds, hiddenRowCodes, sortedColConfigs),
+    });
+  };
+
+  getAddTmplButton = (classifiedAddConfigs: ClassifiedAddConfig[]) => {
+    const { translate } = this.context;
+    if (classifiedAddConfigs && classifiedAddConfigs.length < 1) {
+      return translate("${没有分类添加按钮}");
     }
-
-
-    renderHeaderButtons = () => {
-        let {hiddenColIds, queryKey, viewModels, sortedColConfigs, disabledColIds, showL2Chart, showL2ActTable} = this.state;
-        const {ltmplConfig, sourceId, doCreate, doSearch, menuId, funcMode,customCreatable,serverKey,readOnly} = this.props;
-        let {buttons} = ltmplConfig;
-
-        return <><Space>
-            {funcMode == "common" && this.criteriaFormUseful() ?
-                <Popover trigger="click" content={this.renderCriteriaForm()}>
-                    <Button><SearchOutlined/></Button>
-                </Popover>
-                : null
-            }
-            {buttons.includes("dtmplAdd") && doCreate && !readOnly ?
-                ltmplConfig.classifiedAddConfigs && ltmplConfig.classifiedAddConfigs.length>0 ?
-                    <Popover arrow={false}  content={this.getAddTmplButton(ltmplConfig.classifiedAddConfigs)}
-                             placement="bottomRight"
-                             >
-                        <Tooltip >
-                            <Button><PlusOutlined/></Button>
-                        </Tooltip>
-                    </Popover>
-                    :<Tooltip title={'创建'}>
-                    <Button
-                        onClick={() => doCreate(null,false)}>
-                        <PlusOutlined/>
-                    </Button> </Tooltip> : ''}
-            {(buttons.includes("dtmplCustomAdd") || customCreatable) && doCreate && !readOnly?
-                <Tooltip title={'创建'}>
-                    <Button
-                        onClick={() => doCreate(null,true)}><PlusCircleOutlined/></Button></Tooltip> : ''}
-            {buttons.includes("importLtmplExcel")  && !readOnly ? <Tooltip title={'导入'}> <Button
-                href={`#/${sourceId}/importer?menuId=${menuId}`} target={'_blank'}>
-                <UploadOutlined/>
-            </Button></Tooltip> : ''}
-            {buttons.includes("exportLtmplExcel") && !readOnly?<Popover
-                content={<ExportFrame //导出组件
-                    serverKey={serverKey}
-                    queryKey={queryKey}
-                    title={ltmplConfig.title}
-                />}
-                title={"导出"}
-                placement="bottomRight"
-                trigger="click">
-                <Tooltip title={'导出'}><Button
-                    style={{
-                        display: buttons.includes("exportLtmplExcel") && !readOnly ? "inline" : "none",
-                        marginLeft: '5px'
-                    }} //为了点击到没有导出模块，使组件不致销毁，丢失导出数据
-                >
-                    <DownloadOutlined/>
-                </Button></Tooltip>
-            </Popover>:""}
-            {buttons.includes("showChart") ? <Tooltip title={showL2Chart ? '隐藏图表' : '展示图表'}><Button
-                onClick={this.handleShowChart}>
-                <LineChartOutlined/></Button></Tooltip> : ""
-            }
-            {buttons.includes("analysis") ? <Tooltip title={showL2ActTable ? '隐藏数据分析' : '展示数据分析'}><Button
-                onClick={this.handleDataAnalysis}>
-                <FundOutlined/>
-            </Button></Tooltip> : ""}
-            {buttons.includes("reStat") && !readOnly ? <Restat serverKey={serverKey} fields={ltmplConfig.reStatParams} sourceId={sourceId}
-                                                  onfinish={() => doSearch(null)}></Restat> : ""}
-            <Popover content={<Checkbox.Group value={viewModels} onChange={this.changeViewModel}>
-                <Row style={{width: '120px'}}>
-                    <Col span={24}><Checkbox value={'table'}>表格</Checkbox></Col>
-                    <Col span={24}><Checkbox value={'verticalList'}>纵向列表</Checkbox></Col>
-                    {/*<Col span={24}><Checkbox value={'horizontalList'}>横向列表</Checkbox></Col>*/}
-                </Row>
-            </Checkbox.Group>} title="视图" placement="bottomRight"
-                     trigger="click">
-                <Tooltip title={'选择视图'}>
-                    <Button><RetweetOutlined/></Button>
-                </Tooltip>
+    return classifiedAddConfigs.map((config) => {
+      return (
+        <p>
+          <Button
+            size={"small"}
+            type={"text"}
+            onClick={() => this.props.doCreate(config.id, false)}
+          >
+            {config.title}
+          </Button>
+        </p>
+      );
+    });
+  };
+
+  renderHeaderButtons = () => {
+    let {
+      hiddenColIds,
+      queryKey,
+      viewModels,
+      sortedColConfigs,
+      disabledColIds,
+      showL2Chart,
+      showL2ActTable,
+    } = this.state;
+    const {
+      ltmplConfig,
+      sourceId,
+      doCreate,
+      doSearch,
+      menuId,
+      funcMode,
+      customCreatable,
+      serverKey,
+      readOnly,
+    } = this.props;
+    const { translate } = this.context;
+    let { buttons } = ltmplConfig;
+
+    return (
+      <>
+        <Space>
+          {funcMode == "common" && this.criteriaFormUseful() ? (
+            <Popover trigger="click" content={this.renderCriteriaForm()}>
+              <Button>
+                <SearchOutlined />
+              </Button>
             </Popover>
-            <Popover content={<ColumnSelector columns={sortedColConfigs}
-                                              disabledColIds={disabledColIds}
-                                              hiddenColIds={hiddenColIds}
-                                              onChangeColSort={this.onChangeColSort}
-                                              onChangeHiddenCols={this.changeHiddenColumns}/>}
-                     title={'排序和选择列'}
-                     placement="bottomRight"
-                     trigger="click">
-                <Tooltip title={'点击排序和选择列'}>
-                    <Button><TableOutlined/></Button>
+          ) : null}
+          {buttons.includes("dtmplAdd") && doCreate && !readOnly ? (
+            ltmplConfig.classifiedAddConfigs &&
+            ltmplConfig.classifiedAddConfigs.length > 0 ? (
+              <Popover
+                arrow={false}
+                content={this.getAddTmplButton(
+                  ltmplConfig.classifiedAddConfigs
+                )}
+                placement="bottomRight"
+              >
+                <Tooltip>
+                  <Button>
+                    <PlusOutlined />
+                  </Button>
                 </Tooltip>
-            </Popover>
-            {doSearch ?
+              </Popover>
+            ) : (
+              <Tooltip title={translate("${创建}")}>
+                <Button onClick={() => doCreate(null, false)}>
+                  <PlusOutlined />
+                </Button>{" "}
+              </Tooltip>
+            )
+          ) : (
+            ""
+          )}
+          {(buttons.includes("dtmplCustomAdd") || customCreatable) &&
+          doCreate &&
+          !readOnly ? (
+            <Tooltip title={translate("${创建}")}>
+              <Button onClick={() => doCreate(null, true)}>
+                <PlusCircleOutlined />
+              </Button>
+            </Tooltip>
+          ) : (
+            ""
+          )}
+          {buttons.includes("importLtmplExcel") && !readOnly ? (
+            <Tooltip title={translate("${导入}")}>
+              {" "}
+              <Button
+                href={`#/${sourceId}/importer?menuId=${menuId}`}
+                target={"_blank"}
+              >
+                <UploadOutlined />
+              </Button>
+            </Tooltip>
+          ) : (
+            ""
+          )}
+          {buttons.includes("exportLtmplExcel") && !readOnly ? (
+            <Popover
+              content={
+                <ExportFrame //导出组件
+                  serverKey={serverKey}
+                  queryKey={queryKey}
+                  title={ltmplConfig.title}
+                />
+              }
+              title={translate("${导出}")}
+              placement="bottomRight"
+              trigger="click"
+            >
+              <Tooltip title={translate("${导出}")}>
                 <Button
-                    className="hoverbig"
-                    title="刷新"
-                    onClick={() => {
-                        doSearch(null)
-                    }}>
-                    <ReloadOutlined/>
-                </Button> : ""
-            }</Space>
-        </>
+                  style={{
+                    display:
+                      buttons.includes("exportLtmplExcel") && !readOnly
+                        ? "inline"
+                        : "none",
+                    marginLeft: "5px",
+                  }} //为了点击到没有导出模块，使组件不致销毁，丢失导出数据
+                >
+                  <DownloadOutlined />
+                </Button>
+              </Tooltip>
+            </Popover>
+          ) : (
+            ""
+          )}
+          {buttons.includes("showChart") ? (
+            <Tooltip
+              title={
+                showL2Chart
+                  ? translate("${隐藏}${图表}")
+                  : translate("${展示}${图表}")
+              }
+            >
+              <Button onClick={this.handleShowChart}>
+                <LineChartOutlined />
+              </Button>
+            </Tooltip>
+          ) : (
+            ""
+          )}
+          {buttons.includes("analysis") ? (
+            <Tooltip
+              title={
+                showL2ActTable
+                  ? translate("${隐藏}${数据分析}")
+                  : translate("${展示}${数据分析}")
+              }
+            >
+              <Button onClick={this.handleDataAnalysis}>
+                <FundOutlined />
+              </Button>
+            </Tooltip>
+          ) : (
+            ""
+          )}
+          {buttons.includes("reStat") && !readOnly ? (
+            <Restat
+              serverKey={serverKey}
+              fields={ltmplConfig.reStatParams}
+              sourceId={sourceId}
+              onfinish={() => doSearch(null)}
+            ></Restat>
+          ) : (
+            ""
+          )}
+          <Popover
+            content={
+              <Checkbox.Group
+                value={viewModels}
+                onChange={this.changeViewModel}
+              >
+                <Row style={{ width: "120px" }}>
+                  <Col span={24}>
+                    <Checkbox value={"table"}>{translate("${表格}")}</Checkbox>
+                  </Col>
+                  <Col span={24}>
+                    <Checkbox value={"verticalList"}>
+                      {translate("纵向列表")}
+                    </Checkbox>
+                  </Col>
+                  {/*<Col span={24}><Checkbox value={'horizontalList'}>横向列表</Checkbox></Col>*/}
+                </Row>
+              </Checkbox.Group>
+            }
+            title={translate("${视图}")}
+            placement="bottomRight"
+            trigger="click"
+          >
+            <Tooltip title={translate("${选择视图}")}>
+              <Button>
+                <RetweetOutlined />
+              </Button>
+            </Tooltip>
+          </Popover>
+          <Popover
+            content={
+              <ColumnSelector
+                columns={sortedColConfigs}
+                disabledColIds={disabledColIds}
+                hiddenColIds={hiddenColIds}
+                onChangeColSort={this.onChangeColSort}
+                onChangeHiddenCols={this.changeHiddenColumns}
+              />
+            }
+            title={translate("${排序和选择列}")}
+            placement="bottomRight"
+            trigger="click"
+          >
+            <Tooltip title={translate("${点击排序和选择列}")}>
+              <Button>
+                <TableOutlined />
+              </Button>
+            </Tooltip>
+          </Popover>
+          {doSearch ? (
+            <Button
+              className="hoverbig"
+              title={translate("${刷新}")}
+              onClick={() => {
+                doSearch(null);
+              }}
+            >
+              <ReloadOutlined />
+            </Button>
+          ) : (
+            ""
+          )}
+        </Space>
+      </>
+    );
+  };
+
+  criteriaFormUseful = () => {
+    const { ltmplConfig } = this.props;
+    let { buttons, criterias } = ltmplConfig;
+    if (
+      (buttons.includes("query") &&
+        ((criterias && criterias.length > 0) ||
+          buttons.includes("drilling"))) ||
+      this.checkBoxUseful()
+    ) {
+      return true;
+    } else {
+      return false;
     }
-
-    criteriaFormUseful = () => {
-        const {ltmplConfig} = this.props;
-        let {buttons, criterias, } = ltmplConfig;
-        if ((buttons.includes('query') && ((criterias && criterias.length > 0) || buttons.includes('drilling'))) ||
-            this.checkBoxUseful()) {
-            return true;
-        } else {
-            return false;
-        }
+  };
+
+  checkBoxUseful = () => {
+    const { ltmplConfig } = this.props;
+    let { buttons, jumps, actions } = ltmplConfig;
+    if (
+      buttons.includes("batchDelete") ||
+      (actions && actions.length > 0) ||
+      (jumps && jumps.length > 0)
+    ) {
+      return true;
+    } else {
+      return false;
     }
-
-    checkBoxUseful = () => {
-        const {ltmplConfig} = this.props;
-        let {buttons, jumps, actions} = ltmplConfig;
-        if (buttons.includes('batchDelete') ||
-            (actions && actions.length > 0) || (jumps && jumps.length > 0)) {
-            return true;
-        } else {
-            return false;
-        }
+  };
+
+  renderCriteriaForm = () => {
+    let { loading, selectedRows, selectedDatas } = this.state;
+    let { ltmplConfig, doSearch, criteriaData, serverKey } = this.props;
+    return (
+      <CriteriaForm
+        serverKey={serverKey}
+        loading={loading}
+        selectedDatas={selectedDatas}
+        selectedRows={selectedRows}
+        ltmplConfig={ltmplConfig}
+        data={criteriaData}
+        doCQuery={this.doSelectedCQuery}
+        doAction={this.doSelectedAction}
+        doDelete={this.doDelete}
+        doJump={this.doSelectedJump}
+        doSearch={doSearch}
+      />
+    );
+  };
+
+  renderContent = () => {
+    let {
+      queryKey,
+      loading,
+      selectedRows,
+      hiddenRowCodes,
+      viewModels,
+      sortedColConfigs,
+      hiddenColIds,
+      showL2ActTable,
+    } = this.state;
+    let {
+      sourceId,
+      ltmplConfig,
+      funcMode,
+      title,
+      collapsible,
+      pageSize,
+      pageNo,
+      onChangePage,
+      serverKey,
+    } = this.props;
+
+    if (!ltmplConfig || !sourceId) {
+      return (
+        <>
+          <Card loading={loading}></Card>
+          <Table loading={loading}></Table>
+        </>
+      );
     }
 
-    renderCriteriaForm = () => {
-        let { loading, selectedRows, selectedDatas} = this.state;
-        let {ltmplConfig, doSearch,criteriaData,serverKey} = this.props;
-        return <CriteriaForm serverKey={serverKey} loading={loading} selectedDatas={selectedDatas} selectedRows={selectedRows}
-                             ltmplConfig={ltmplConfig} data={criteriaData}
-                             doCQuery={this.doSelectedCQuery}
-                             doAction={this.doSelectedAction}
-                             doDelete={this.doDelete}
-                             doJump={this.doSelectedJump}
-                             doSearch={doSearch}/>
+    let tableColumns = this.buildTableColumns(
+      ltmplConfig,
+      hiddenColIds,
+      hiddenRowCodes,
+      sortedColConfigs
+    );
+
+    let { buttons } = ltmplConfig;
+    let displayCriteriaCard: boolean = false;
+    if (funcMode == "simple" || funcMode == "common") {
+      displayCriteriaCard = false;
+    } else if (this.criteriaFormUseful()) {
+      displayCriteriaCard = true;
     }
 
-    renderContent=()=> {
-        let {queryKey, loading, selectedRows, hiddenRowCodes, viewModels, sortedColConfigs, hiddenColIds, showL2ActTable} = this.state;
-        let {sourceId, ltmplConfig, funcMode, title, collapsible,pageSize,pageNo,onChangePage,serverKey} = this.props;
-
-        if (!ltmplConfig || !sourceId) {
-            return <>
-                <Card loading={loading}>
-                </Card>
-                <Table loading={loading}>
-                </Table>
-            </>
+    let columnConfigs = [];
+    if (sortedColConfigs) {
+      for (let colConfig of sortedColConfigs) {
+        if (!hiddenColIds.includes(colConfig.id)) {
+          columnConfigs.push(colConfig);
         }
-
-        let tableColumns = this.buildTableColumns(ltmplConfig,hiddenColIds, hiddenRowCodes, sortedColConfigs);
-
-        let {buttons} = ltmplConfig
-        let displayCriteriaCard: boolean = false;
-        if (funcMode == 'simple' || funcMode == 'common') {
-            displayCriteriaCard = false;
-        } else if (this.criteriaFormUseful()) {
-            displayCriteriaCard = true;
-        }
-
-        let columnConfigs = [];
-        if (sortedColConfigs) {
-            for (let colConfig of sortedColConfigs) {
-                if (!hiddenColIds.includes(colConfig.id)) {
-                    columnConfigs.push(colConfig);
-                }
-            }
-        }
-        return (
-            <>
-                {/*暂时不支持L2chart 后续用echart*/}
-                {/*{buttons.includes("showChart") && showL2Chart ? <div>*/}
-                {/*    <StatViewL2Chart queryKey={queryKey.key} ltmplConfig={ltmplConfig} hiddenColIds={hiddenColIds}*/}
-                {/*                     hiddenRowCodes={hiddenRowCodes}/>*/}
-                {/*    /!*<Divider dashed style={{borderTopColor: "#40a9ff",}} plain></Divider>*!/*/}
-                {/*</div> : ""*/}
-                {/*}*/}
-                {buttons.includes("analysis") && showL2ActTable ? <div>
-                    <L2ActTable  serverKey={serverKey} innerQueryKey={queryKey.key} sourceId={sourceId}/>
-                    <Divider dashed style={{borderTopColor: "#40a9ff",}} plain></Divider>
-                </div> : ""
-                }
-                <div className="actTable">
-                    {funcMode == 'complete' || funcMode == 'common' ?
-                        collapsible?null:
-                            <span>
-                                {ltmplConfig.header?<div style={{padding:'6px'}} dangerouslySetInnerHTML={{__html:ltmplConfig.header}} ></div>:null}
-                               <h3>  {title ? title : ltmplConfig.title}
-                                 <p className="fr">
-                                {this.renderHeaderButtons()}
-                            </p></h3>
-                            </span> : null
-                    }
-                    {displayCriteriaCard ?
-                        this.renderCriteriaForm() : null
-                    }
-                    {loading?"":<QueryTable serverKey={serverKey}  onChangePage={onChangePage} viewModels={viewModels} primaryColumn={ltmplConfig.primaryColumn} columnConfigs={columnConfigs}
-                                        maxSelectedRows={this.checkBoxUseful() ? 10000 : -1}
-                                        selectedRows={selectedRows}
-                                        columns={tableColumns}
-                                        hiddenRowCodes={hiddenRowCodes}
-                                        pageInfo={{pageNo:pageNo?pageNo:1,pageSize:pageSize?pageSize:ltmplConfig.defaultPageSize}}
-                                        queryKey={queryKey}
-                                        onChangeRowSelection={this.changeRowSelection}/>}
-                    {/*此处放页脚*/}
-                    {ltmplConfig.footer?<div style={{padding:'6px'}} dangerouslySetInnerHTML={{__html:ltmplConfig.footer}} ></div>:null}
-                </div>
-            </>
-        );
+      }
     }
-
-    render() {
-        let {queryKey, loading} = this.state;
-        let {sourceId, ltmplConfig, title, collapsible,initCollapse,tip} = this.props;
-
-        if (!ltmplConfig || !sourceId) {
-            return <>
-                <Card loading={loading}>
-                </Card>
-                <Table loading={loading}>
-                </Table>
-            </>
-        }
-
-        return <> {
-            collapsible ?
-                <CollapseCard
-                    initCollapse={initCollapse}
-                    title={<>{title ? title : ltmplConfig.title}<ToolTipBar content={tip?tip:ltmplConfig?ltmplConfig.tip:null}/></>}
-                    id={queryKey + ltmplConfig.id}
-                    className={`hoverable`}
-                    headStyle={{background: "#f2f4f5"}}
-                    loading={loading}
-                    bodyStyle={{padding: '6px'}}
-                    //暂时注释掉，后续要支持配置。
-                    extra={this.renderHeaderButtons()}
-                >
-                    {this.renderContent()}
-                </CollapseCard> :
-                <>
-                    {this.renderContent()}
-                </>
-        }
+    return (
+      <>
+        {/*暂时不支持L2chart 后续用echart*/}
+        {/*{buttons.includes("showChart") && showL2Chart ? <div>*/}
+        {/*    <StatViewL2Chart queryKey={queryKey.key} ltmplConfig={ltmplConfig} hiddenColIds={hiddenColIds}*/}
+        {/*                     hiddenRowCodes={hiddenRowCodes}/>*/}
+        {/*    /!*<Divider dashed style={{borderTopColor: "#40a9ff",}} plain></Divider>*!/*/}
+        {/*</div> : ""*/}
+        {/*}*/}
+        {buttons.includes("analysis") && showL2ActTable ? (
+          <div>
+            <L2ActTable
+              serverKey={serverKey}
+              innerQueryKey={queryKey.key}
+              sourceId={sourceId}
+            />
+            <Divider
+              dashed
+              style={{ borderTopColor: "#40a9ff" }}
+              plain
+            ></Divider>
+          </div>
+        ) : (
+          ""
+        )}
+        <div className="actTable">
+          {funcMode == "complete" || funcMode == "common" ? (
+            collapsible ? null : (
+              <span>
+                {ltmplConfig.header ? (
+                  <div
+                    style={{ padding: "6px" }}
+                    dangerouslySetInnerHTML={{ __html: ltmplConfig.header }}
+                  ></div>
+                ) : null}
+                <h3>
+                  {" "}
+                  {title ? title : ltmplConfig.title}
+                  <p className="fr">{this.renderHeaderButtons()}</p>
+                </h3>
+              </span>
+            )
+          ) : null}
+          {displayCriteriaCard ? this.renderCriteriaForm() : null}
+          {loading ? (
+            ""
+          ) : (
+            <QueryTable
+              serverKey={serverKey}
+              onChangePage={onChangePage}
+              viewModels={viewModels}
+              primaryColumn={ltmplConfig.primaryColumn}
+              columnConfigs={columnConfigs}
+              maxSelectedRows={this.checkBoxUseful() ? 10000 : -1}
+              selectedRows={selectedRows}
+              columns={tableColumns}
+              hiddenRowCodes={hiddenRowCodes}
+              pageInfo={{
+                pageNo: pageNo ? pageNo : 1,
+                pageSize: pageSize ? pageSize : ltmplConfig.defaultPageSize,
+              }}
+              queryKey={queryKey}
+              onChangeRowSelection={this.changeRowSelection}
+            />
+          )}
+          {/*此处放页脚*/}
+          {ltmplConfig.footer ? (
+            <div
+              style={{ padding: "6px" }}
+              dangerouslySetInnerHTML={{ __html: ltmplConfig.footer }}
+            ></div>
+          ) : null}
+        </div>
+      </>
+    );
+  };
+
+  render() {
+    let { queryKey, loading } = this.state;
+    let {
+      sourceId,
+      ltmplConfig,
+      title,
+      collapsible,
+      initCollapse,
+      tip,
+    } = this.props;
+
+    if (!ltmplConfig || !sourceId) {
+      return (
+        <>
+          <Card loading={loading}></Card>
+          <Table loading={loading}></Table>
         </>
-
+      );
     }
+
+    return (
+      <>
+        {" "}
+        {collapsible ? (
+          <CollapseCard
+            initCollapse={initCollapse}
+            title={
+              <>
+                {title ? title : ltmplConfig.title}
+                <ToolTipBar
+                  content={tip ? tip : ltmplConfig ? ltmplConfig.tip : null}
+                />
+              </>
+            }
+            id={queryKey + ltmplConfig.id}
+            className={`hoverable`}
+            headStyle={{ background: "#f2f4f5" }}
+            loading={loading}
+            bodyStyle={{ padding: "6px" }}
+            //暂时注释掉，后续要支持配置。
+            extra={this.renderHeaderButtons()}
+          >
+            {this.renderContent()}
+          </CollapseCard>
+        ) : (
+          <>{this.renderContent()}</>
+        )}
+      </>
+    );
+  }
 }
 
-export default ActTable;
+export default ActTable;