aldehyde 0.2.410 → 0.2.413

package/src/aldehyde/lowcode-components/lowcode-view/component/font/FontGlobal.css

@@ -1,27 +1,27 @@
 @font-face {
     font-family: "DingTalk JinBuTi";
-    src: url('./DingTalk JinBuTi.ttf');
+    src: url('./DingTalk-JinBuTi.woff2');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
     font-family: "DouyinSansBold";
-    src: url('./DouyinSansBold.ttf');
+    src: url('./DouyinSansBold.woff');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
     font-family: "优设标题黑";
-    src: url('./优设标题黑.ttf');
+    src: url('./YouSheBiaoTiHei.woff2');
     font-weight: normal;
     font-style: normal;
 }
 
 @font-face {
     font-family: "庞门正道标题体免费版";
-    src: url('./庞门正道标题体免费版.ttf');
+    src: url('./PangMenZhengDaoBiaoTiTiMianFeiBan.woff2');
     font-weight: normal;
     font-style: normal;
 }

package/src/aldehyde/module/dtmpl-view-modal.tsx

@@ -1,15 +1,16 @@
-import React, {ReactNode} from 'react'
-import { Modal} from 'antd'
+import React, { ReactNode } from 'react'
 import DtmplViewCard from "./dtmpl-view-card";
-import {DtmplBaseProps} from "../tmpl/interface";
+import { DtmplBaseProps } from "../tmpl/interface";
 import Scrollbars from 'react-custom-scrollbars';
 import DraggableModal from "./draggable-modal";
-interface DtmplViewModalProps extends DtmplBaseProps{
-    title?:ReactNode,
+import "./index.less";
+
+interface DtmplViewModalProps extends DtmplBaseProps {
+    title?: ReactNode,
     open: boolean,
     onClose: () => void,
-    width?:string|number,
-    height?:string|number,
+    width?: string | number,
+    height?: string | number,
 }
 
 interface DtmplViewModalState {
@@ -18,16 +19,16 @@ interface DtmplViewModalState {
 
 
 class DtmplViewModal extends React.PureComponent<DtmplViewModalProps, DtmplViewModalState> {
-    state={
+    state = {
 
     }
 
     static defaultProps = {
         height: "82vh",
-        width:"82vw",
+        width: "82vw",
         forceRender: true,
-        style: {maxWidth: 'calc(100vw - 60px)', maxHeight: 'calc(100vh - 50px)'},
-        open:false,
+        style: { maxWidth: 'calc(100vw - 60px)', maxHeight: 'calc(100vh - 50px)' },
+        open: false,
     }
 
     async componentDidMount() {
@@ -35,20 +36,21 @@ class DtmplViewModal extends React.PureComponent<DtmplViewModalProps, DtmplViewM
     }
 
     render() {
-        const {title,sourceId,code,open,onClose,width,height,serverKey,codeSource}=this.props;
+        const { title, sourceId, code, open, onClose, width, height, serverKey, codeSource } = this.props;
         return <DraggableModal
-                    open={open}
-                    width={width}
-                    title={title}
-                    styles={{body:{height: height, overflow: 'auto'}}}
-                    destroyOnHidden={true}
-                    centered
-                    onCancel={onClose}
-                >
-            <Scrollbars  autoHide autoHideTimeout={1000}>
-            <DtmplViewCard  codeSource={codeSource} serverKey={serverKey} sourceId={sourceId} code={code}></DtmplViewCard>
-        </Scrollbars>
-      </DraggableModal>
+            open={open}
+            width={width}
+            title={title}
+            styles={{ body: { height: height, overflow: 'auto' }, header: { minHeight: "24px" } }}
+            destroyOnHidden={true}
+            centered
+            onCancel={onClose}
+            className='dtmpl-view-modal'
+        >
+            <Scrollbars autoHide autoHideTimeout={1000}>
+                <DtmplViewCard codeSource={codeSource} serverKey={serverKey} sourceId={sourceId} code={code}></DtmplViewCard>
+            </Scrollbars>
+        </DraggableModal>
     }
 }
 

package/src/aldehyde/module/index.less

@@ -0,0 +1,5 @@
+.dtmpl-view-modal {
+    .detailPage {
+        margin-top: 0 !important;
+    }
+}

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

@@ -34,6 +34,8 @@ import ColumnBuilder from "./column/column-builder";
 import ReportTable from "./report-table";
 import EntryControl from "../controls/entry-control";
 import DraggableModal from "../module/draggable-modal";
+import Icon from "../icon/aliIcon";
+
 const { Content, Sider } = Layout;
 type Level = "l1" | "l2";
 
@@ -1321,6 +1323,37 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
     this.setState({ tabActiveKey: val });
   }
 
+  renderAggregates() { // 统计数据渲染
+    const { aggregateVO } = this.state;
+    const { ltmplConfig } = this.props;
+    const aggregates = aggregateVO?.aggregates || [];
+    const columns = ltmplConfig?.columns || [];
+    return aggregates?.length ? <div className="aggregates">{aggregates.map(item => {
+      const column = columns.find(r => r.id === item.fieldId);
+      if (!column) {
+        return "";
+      }
+      const { dataUnit, themeColor, themeIcon } = column;
+      return <Card className="aggregate-card" hoverable styles={{ body: { padding: 20 } }}>
+        <div style={{ display: "flex", alignItems: "start", justifyContent: "space-between" }}>
+          <div style={{ width: "calc(100% - 40px)" }}>
+            <p className="title">{item.fieldTitle}</p>
+            <div className="value">
+              <span className="number">{item.value}</span>
+              {dataUnit ? <span className="unit">{dataUnit}</span> : ""}
+            </div>
+          </div>
+          {themeIcon ?
+            <div className="icon" style={{ color: themeColor, background: `${themeColor}26` }}>
+              <Icon type={themeIcon} />
+            </div> :
+            ""}
+        </div>
+      </Card>
+    }).filter(Boolean)
+    }</div > : "";
+  }
+
   renderContent = () => {
     let {
       queryKey, loading, selectedRows, hiddenRowCodes, viewModels, sortedColConfigs, hiddenColIds, showL2ActTable,
@@ -1402,8 +1435,6 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
         onChangePage={onChangePage}
         viewModels={viewModels}
         primaryColumn={ltmplConfig.primaryColumn}
-        defaultShowTotalCols={ltmplConfig.defaultShowTotalCols}
-        rowTotalCols={ltmplConfig.rowTotalCols}
         columnConfigs={columnConfigs} summaryConfigs={ltmplConfig.totalColumnConfigs}
         maxSelectedRows={this.props?.tableType === "select" || this.checkBoxUseful() ? 10000 : -1}
         selectedRows={selectedRows} columns={tableColumns}
@@ -1424,6 +1455,7 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
         ltmplConfig={ltmplConfig}
         showView={showView}
         showPagination={showPagination}
+        onChangeAggregateVO={(val) => this.setState({ aggregateVO: val })}
       />);
 
     return (
@@ -1488,6 +1520,7 @@ class ActTable extends React.PureComponent<ActTableProps, ActTableStat> {
             </Sider>
             <Layout style={{ backgroundColor: "#fff" }}>
               <Content style={{ overflow: "initial" }}>
+                {this.renderAggregates()}
                 {displayCriteriaCard ? this.renderCriteriaForm() : null}
                 {buttons.includes("rowEdit") ? <AntdForm ref={this.formRef} component={false} onValuesChange={this.doRowEditFormChange}>{renderActTable}</AntdForm> : renderActTable}
               </Content>

package/src/aldehyde/table/column/column-builder.tsx

@@ -78,7 +78,7 @@ export default {
             sortedColConfigs, unHiden,
             onHide, translate,
             sortColumns, serverKey,
-            editings, mainCode, criteriaData, actTableDoSearch
+            editings, mainCode, criteriaData, actTableDoSearch, showView
         } = props;
 
         const { primaryColumn, primaryColumnLabel } = ltmplConfig
@@ -158,6 +158,21 @@ export default {
                         : false;
                 }
                 column["render"] = (text, record) => {
+                    let detailParams = undefined;
+                    if (showView && primaryColumn?.id === item.id) { // 首字段增加主题色显示/查看详情功能
+                        if (buttons.includes("detail")) {
+                            const classView = ltmplConfig.classViewConfigs.find(r => ActionUtils.isShow(r.preposes, [record], undefined));
+                            if (classView) {
+                                detailParams = { code: record.code, dtmplSourceId: classView.id };
+                            } else {
+                                const isdetail = ActionUtils.isShow(ltmplConfig.buttonViewAction?.preposes, [record], undefined);
+                                detailParams = isdetail ? { code: record.code } : undefined;
+                            }
+                        } else if (buttons.includes("customDetail")) {
+                            detailParams = { code: record.code, toCustomPage: true };
+                        }
+                    }
+
                     return (editings.includes(record.code) || buttons.includes("multiRowEdit") ?
                         <FormItem style={{ margin: 0 }}
                             name={record.code + "_" + item.id}
@@ -171,23 +186,26 @@ export default {
                             />
                         </FormItem> :
                         <div className={record['dataType'] ? record['dataType'] === "小计" ? "xiaoji" : 'heji' : ""}>
-                            {primaryColumn?.id === item.id && primaryColumnLabel?.id ?
+                            {primaryColumn?.id === item.id ?
                                 <div className="column-table-primary">
-                                    <div className="primary-column">
+                                    <div className="primary-column" onClick={() => detailParams && showView(detailParams)}>
                                         <ViewControl
                                             serverKey={serverKey}
                                             fieldConfig={item}
                                             value={record[item.id]}
                                             holderType="table"
-                                        /> </div>
-                                    <div className="primary-column-label" >
-                                        <ViewControl
-                                            serverKey={serverKey}
-                                            fieldConfig={primaryColumnLabel}
-                                            value={record[primaryColumnLabel.id]}
-                                            holderType="table"
                                         />
                                     </div>
+                                    {primaryColumnLabel?.id ?
+                                        <div className="primary-column-label" >
+                                            <ViewControl
+                                                serverKey={serverKey}
+                                                fieldConfig={primaryColumnLabel}
+                                                value={record[primaryColumnLabel.id]}
+                                                holderType="table"
+                                            />
+                                        </div> :
+                                        ""}
                                 </div>
                                 : <ViewControl
                                     serverKey={serverKey}

package/src/aldehyde/table/column/index.less

@@ -20,15 +20,17 @@
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
+        color: var(--ant-color-primary-active);
+        cursor: pointer;
     }
 
     .primary-column-label {
-        transform: translate(4px, -50%);
+        margin-left: 8px;
 
-        .ant-tag {
-            font-size: 8px;
-            line-height: 14px;
-            padding: 0 4px;
+        .tag {
+            font-size: 12px !important;
+            padding: 2px 6px !important;
+            white-space: nowrap;
         }
     }
 }

package/src/aldehyde/table/index.css

@@ -102,4 +102,61 @@
 
 .actTable .ant-tabs-nav::before {
   display: none;
+}
+
+.aggregates {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 16px;
+
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  @media (min-width: 1024px) {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+}
+
+.aggregate-card .title {
+  margin-bottom: 16px;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--ant-color-text-secondary);
+}
+
+.aggregate-card .value {
+  display: flex;
+  gap: 4px;
+  align-items: baseline;
+}
+
+.aggregate-card .value .number {
+  font-size: 28px;
+  line-height: 32px;
+  font-weight: 700;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.aggregate-card .value .unit {
+  font-size: 16px;
+  line-height: 20px;
+}
+
+.aggregate-card .icon {
+  padding: 8px;
+  border-radius: 8px;
+  background-color: var(--ant-layout-body-bg);
+  font-size: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+
+.aggregate-card:hover .icon {
+  transform: scale(1.1);
 }

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

@@ -42,7 +42,6 @@ interface QueryTableStat {
   touchEnd?: boolean;
   aggregateVO?: AggregateVO;
   beforeSelectedRows?: number;
-  aggregateShowSize?: number;
   errorText?: string;
 }
 
@@ -62,8 +61,6 @@ class QueryTable extends React.PureComponent<QueryTableProps, QueryTableStat> {
     selectedRows: [],
     viewModels: ["table"],
     summaryConfigs: [],
-    rowTotalCols: 4,
-    defaultShowTotalCols: 7,
     cardListConfig: {},
     ltmplConfig: {},
     showPagination: true,
@@ -79,7 +76,6 @@ class QueryTable extends React.PureComponent<QueryTableProps, QueryTableStat> {
     touchEnd: undefined,
     aggregateVO: undefined,
     beforeSelectedRows: undefined,
-    aggregateShowSize: undefined,
     errorText: undefined
   };
 
@@ -87,12 +83,9 @@ class QueryTable extends React.PureComponent<QueryTableProps, QueryTableStat> {
   context: React.ContextType<typeof LocaleContext>;
 
   async componentDidMount() {
-    const { queryKey, pageInfo, defaultShowTotalCols, rowTotalCols } = this.props;
+    const { queryKey, pageInfo } = this.props;
     if (queryKey) {
       await this.loadData(queryKey.key, pageInfo);
-      this.setState({
-        aggregateShowSize: defaultShowTotalCols,
-      });
     }
   }
 
@@ -244,7 +237,7 @@ class QueryTable extends React.PureComponent<QueryTableProps, QueryTableStat> {
   };
 
   queryTotal = async () => {
-    const { queryKey, serverKey, queryTotal } = this.props;
+    const { queryKey, serverKey, queryTotal, onChangeAggregateVO } = this.props;
     const { aggregateVO: stateAggregateVO } = this.state;
     let aggregateVO;
     if (stateAggregateVO && stateAggregateVO.queryKey == queryKey.key) {
@@ -255,9 +248,8 @@ class QueryTable extends React.PureComponent<QueryTableProps, QueryTableStat> {
       } else {
         aggregateVO = await HcserviceV3.requestQueryAggregates(serverKey, queryKey.key);
       }
-      this.setState({
-        aggregateVO,
-      });
+      onChangeAggregateVO(aggregateVO)
+      this.setState({ aggregateVO });
     }
   };
 
@@ -437,14 +429,14 @@ class QueryTable extends React.PureComponent<QueryTableProps, QueryTableStat> {
       groupIColumns,
       hiddenRowCodes,
       columnConfigs,
-      serverKey, rowTotalCols,
+      serverKey,
       cardListConfig,
       ltmplConfig,
       showView,
       showPagination
     } = this.props;
     //debugger
-    const { touchEnd, aggregateVO, loading, virtualEndPageNo, dataSource, aggregateShowSize, errorText } = this.state;
+    const { touchEnd, aggregateVO, loading, virtualEndPageNo, dataSource, errorText } = this.state;
     const isProSumarryTable = Boolean(subtotalXColumn);
     // 是否是树形表格(存在甘特图视图展示且存在展开关系)
     const isTreeTable = viewModels.includes("ganttChart") && ltmplConfig.gttSubOpenRatmplId;
@@ -531,58 +523,9 @@ class QueryTable extends React.PureComponent<QueryTableProps, QueryTableStat> {
           this.mergeRowInCol(_, rowIdx, colIdx, mergeMp, current_cols.length))
       );
     }
-    let aggregateItems = [];
-    if (aggregateVO && aggregateVO.aggregates) {
-      if (aggregateShowSize < aggregateVO.aggregates.length) {
-        aggregateVO.aggregates.forEach(av => {
-          if (aggregateItems.length == aggregateShowSize) {
-            aggregateItems.push({
-              key: "opt",
-              label: <Button icon={<DownOutlined />} type={'link'} onClick={() => {
-                this.setState({ aggregateShowSize: aggregateVO.aggregates.length })
-              }}>{translate("${展开}")}</Button>,
-              children: null
-              // <div style={{fontSize:24}}>{av.value}</div>
-            })
-          } else if (aggregateItems.length < aggregateShowSize) {
-            aggregateItems.push({
-              key: av.fieldId,
-              label: <div style={{ fontSize: 14 }}>{translate("${" + av.fieldTitle + "}")}</div>,
-              children: <Statistic valueStyle={{ fontSize: 16 }} value={av.value ? av.value : 0} />
-              // <div style={{fontSize:24}}>{av.value}</div>
-            })
-          }
-        })
-      } else {
-        aggregateVO.aggregates.forEach(av => {
-          aggregateItems.push({
-            key: av.fieldId,
-            label: <div style={{ fontSize: 14 }}>{translate("${" + av.fieldTitle + "}")}</div>,
-            children: <Statistic valueStyle={{ fontSize: 16 }} value={av.value ? av.value : 0} />
-          })
-        });
-        if (this.defaultAggregateShowSize < aggregateVO.aggregates.length) {
-          aggregateItems.push({
-            key: "opt",
-            label: <Button icon={<UpOutlined />} type={'link'} onClick={() => {
-              this.setState({ aggregateShowSize: this.defaultAggregateShowSize })
-            }}>{translate("${收起}")}</Button>,
-            children: null
-            // <div style={{fontSize:24}}>{av.value}</div>
-          })
-        }
-      }
-    }
 
     return (
       <>
-        {aggregateVO?.aggregates?.length > 0 ?
-          <Card variant="borderless" styles={{ body: { paddingLeft: 10, paddingTop: 4, paddingBottom: 4, paddingRight: 10 } }}>
-            <Descriptions
-              column={rowTotalCols} colon={false}
-              items={aggregateItems}
-            />
-          </Card> : null}
         {/*{viewModels.includes("table") ? (*/}
         {/*  <Table*/}
         {/*    size={tableProps.size ? tableProps.size : undefined}*/}