commonList新增ctrl+alt+M让表格宽度根据内容撑开；

zhangzzzz
1 parent a27b1111
Showing 3 changed files with 43 additions and 6 deletions
src/components/Common/CommonTable/index.js
src/components/IndexCenter/IndexCenter.js
src/default.less
@@ -1943,7 +1943,7 @@ class CommonTableRc extends React.Component {
     //   }
     // }
  
-    if (!noVlistTable) {
+    if (!noVlistTable && !this.props.xlyTableMax) {
       if (this.props.slaveInfo || this.useVListNew) {
         if (!this.uniqueId || window.vlistNewSearh) {
           this.uniqueId = this.props.formId ? `${this.props.formId}_${lodash.uniqueId()}` : lodash.uniqueId();
@@ -7166,7 +7166,7 @@ class CommonTableRc extends React.Component {
               : null}
         </div>
         <div
-          className={`xlyCommonTable ${tableClassName} ${this.hasSpanBgColor ? 'tableNoPadding' : ''} ${this.props.enabled ? 'tableEnabled' : ''}`}
+          className={`xlyCommonTable ${tableClassName} ${this.hasSpanBgColor ? 'tableNoPadding' : ''} ${this.props.enabled ? 'tableEnabled' : ''} ${this.props.xlyTableMax ? 'xlyTableMax' : ''}`}
           style={{ height: isSmall ? 'calc(100% - 44px)' : '' }} ref={(ref) => {
             this.mydiv = ref;
             if (this.mydiv) {
@@ -7189,12 +7189,12 @@ class CommonTableRc extends React.Component {
                   pagination={!hasColorInfo && tableProps.pagination}
                   addRow={addProps}
                   delProps={delProps}
-                  tableLayout="fixed"
+                  tableLayout={this.props.xlyTableMax ? "auto" : "fixed"}
                   expandable={{
                     expandedRowRender: this.props.setExpandedRowRender === 'Y' ? expandedRow : null,
                     defaultExpandAllRows: this.props.defaultExpandAllRows || null,
                   }}
-                  scroll={{ x: this.scrollX, y: commonUtils.isNotEmptyNumber(autoHeight) ? autoHeight : 544 }}
+                  scroll={{ x: this.props.xlyTableMax ? 'max-content' : this.scrollX, y: commonUtils.isNotEmptyNumber(autoHeight) ? autoHeight : 544 }}
                   summary={this.genFooter}
                   size="small"
                   sticky={this.sticky}
@@ -7207,12 +7207,12 @@ class CommonTableRc extends React.Component {
                   pagination={!hasColorInfo && tableProps.pagination}
                   addRow={addProps}
                   delProps={delProps}
-                  tableLayout="fixed"
+                  tableLayout={this.props.xlyTableMax ? "auto" : "fixed"}
                   expandable={{
                     expandedRowRender: this.props.setExpandedRowRender === 'Y' ? expandedRow : null,
                     defaultExpandAllRows: this.props.defaultExpandAllRows || null,
                   }}
-                  scroll={{ x: this.scrollX, y: !layoutScrollY ? this.scrollY : layoutScrollY }}
+                  scroll={{ x: this.props.xlyTableMax ? 'max-content' : this.scrollX, y: !layoutScrollY ? this.scrollY : layoutScrollY }}
                   summary={this.genFooter}
                   size="small"
                   sticky={this.sticky}
@@ -7528,6 +7528,8 @@ const CommonTable = (props) =&gt; {
     setUpdateRowNumTime(pre => pre + 1);
   }
   const uniqueTableId = `table_${props.formId}_${props.config?.sId}`;
+  
+  addState.xlyTableMax = props.app?.currentPane?.route === "/indexPage/commonList" && localStorage.getItem(`${commonConfig.prefix}TableMax`);
  
   return (
     <Tooltip title={props.name} placement='topLeft' visible={props.showTableName}>
@@ -441,6 +441,9 @@ class IndexCenter extends Component {
     if (this.tableTree) {
       this.tableTree.addEventListener('scroll', this.scrollTreeLoading);
     }
+
+    // 监听全局ctrl+alt+M事件
+    document.addEventListener('keydown', this.handleGlobalCtrlAltM);
   }
  
   componentWillUnmount() {
@@ -451,6 +454,22 @@ class IndexCenter extends Component {
     if (this.tableTree) {
       this.tableTree.removeEventListener('scroll', this.scrollTreeLoading);
     }
+
+    // 卸载全局ctrl+alt+M事件
+    document.removeEventListener('keydown', this.handleGlobalCtrlAltM);
+  }
+
+  handleGlobalCtrlAltM = (e) => {
+    if (e.ctrlKey && (e.altKey || e.metaKey) && e.keyCode === 77) {
+      const itemName = `${commonConfig.prefix}TableMax`;
+      const xlyTableMax = localStorage.getItem(itemName);
+      if (!xlyTableMax) {
+        localStorage.setItem(itemName, 'max');
+      } else {
+        localStorage.removeItem(itemName);
+      }
+      this.props.dispatch({ type: "app/refreshPage" });
+    }
   }
  
   scrollLoading = () => {
@@ -303,6 +303,10 @@ tbody {
       td {
         background: #fff7e6 !important;
         font-weight: bold;
+        div[class*="xlyTableMax"] & {
+          font-weight: normal;
+          text-decoration: underline;
+        }
       }
  
       .sActiveIdStyle {
@@ -564,14 +568,26 @@ tbody {
 .selected-record-row {
   background-color: #e6f7ff !important;
   font-weight: bold;
+  div[class*="xlyTableMax"] & {
+    font-weight: normal;
+    text-decoration: underline;
+  }
  
   input {
     font-weight: bold;
+    div[class*="xlyTableMax"] & {
+      font-weight: normal;
+      text-decoration: underline;
+    }
   }
  
   td {
     background: #e6f7ff !important;
     font-weight: bold;
+    div[class*="xlyTableMax"] & {
+      font-weight: normal;
+      text-decoration: underline;
+    }
   }
  
   .ant-input-number-disabled {