Browse Source

一時保存

liuxf 2 months ago
parent
commit
0671304d35

+ 12 - 10
new-react-admin-ui/src/pages/estate/estateList/EstateExport.module.css

@@ -18,7 +18,7 @@
   font-size: 16px;
   font-size: 16px;
   font-weight: 500;
   font-weight: 500;
   color: #444;
   color: #444;
-  margin-bottom: 16px;
+  margin-bottom: 2px;
 }
 }
 
 
 .underline {
 .underline {
@@ -39,9 +39,9 @@
 .formGroup {
 .formGroup {
   display: grid;
   display: grid;
   grid-template-columns: auto 1fr; /* 第一列自适应标签宽度,第二列放控件 */
   grid-template-columns: auto 1fr; /* 第一列自适应标签宽度,第二列放控件 */
-  row-gap: 12px; /* 两行之间的间距 */
+  row-gap: 2px; /* 两行之间的间距 */
   column-gap: 24px; /* 标签与控件的间距 */
   column-gap: 24px; /* 标签与控件的间距 */
-  padding: 8px 0;
+  padding: 18px 0 18px 80px; /* 上、右、下、左 顺时针顺序 */
 }
 }
 
 
 /* 每行容器(基准日/出力内容) */
 /* 每行容器(基准日/出力内容) */
@@ -107,10 +107,11 @@
 
 
 /* 按钮区域:单独一行,右对齐 */
 /* 按钮区域:单独一行,右对齐 */
 .buttonRow {
 .buttonRow {
-  grid-column: 1 / -1; /* 跨两列 */
+  /*grid-column: 1 / -1; !* 跨两列 *!*/
+  grid-column: 2; /* 跨两列 */
   display: flex;
   display: flex;
-  justify-content: flex-end; /* 靠右对齐 */
-  margin-top: 16px; /* 与上方内容保持间距 */
+  /*justify-content: flex-end; !* 靠右对齐 *!*/
+  margin-top: 3px; /* 与上方内容保持间距 */
 }
 }
 
 
 .exportBtn {
 .exportBtn {
@@ -125,6 +126,7 @@
   transition: background-color 0.2s;
   transition: background-color 0.2s;
   height: 36px; /* 与输入框高度一致 */
   height: 36px; /* 与输入框高度一致 */
   box-sizing: border-box;
   box-sizing: border-box;
+  width:160px;
 }
 }
 
 
 .exportBtn:hover {
 .exportBtn:hover {
@@ -145,17 +147,16 @@
 }
 }
 
 
 .gridContainer {
 .gridContainer {
-  --ag-grid-size: 1px;
   --ag-border-color: #eee;
   --ag-border-color: #eee;
   --ag-header-background-color: #f5f5f5;
   --ag-header-background-color: #f5f5f5;
   --ag-header-text-color: #444;
   --ag-header-text-color: #444;
   --ag-header-font-size: 14px;
   --ag-header-font-size: 14px;
-  --ag-row-height: 40px;
-  --ag-cell-font-size: 14px;
-  --ag-cell-padding: 0 12px;
   --ag-header-height: 48px; /* 确保表头文字完整显示 */
   --ag-header-height: 48px; /* 确保表头文字完整显示 */
   --ag-header-cell-padding: 0 12px;
   --ag-header-cell-padding: 0 12px;
   --ag-header-line-height: 1.5;
   --ag-header-line-height: 1.5;
+  --ag-row-height: 43px;
+  --ag-cell-font-size: 14px;
+  --ag-cell-padding: 0 12px;
 }
 }
 
 
 /* 加载状态 */
 /* 加载状态 */
@@ -185,6 +186,7 @@
   .formGroup {
   .formGroup {
     grid-template-columns: 1fr; /* 移动端改为单列布局 */
     grid-template-columns: 1fr; /* 移动端改为单列布局 */
     column-gap: 0;
     column-gap: 0;
+    padding-left: 0; /* 移动端恢复默认 */
   }
   }
 
 
   .label, .control {
   .label, .control {

+ 19 - 17
new-react-admin-ui/src/pages/estate/estateList/index.tsx

@@ -72,19 +72,19 @@ const EstateExportHistory: React.FC = () => {
   const containerStyle = useMemo(() => ({
   const containerStyle = useMemo(() => ({
     width: '100%',
     width: '100%',
     height: '300px',
     height: '300px',
-    borderRadius: '4px',
-    overflow: 'hidden'
+    borderRadius: '4px'
   }), []);
   }), []);
-
+  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
   // AG Grid 配置
   // AG Grid 配置
   const defaultColDef = useMemo<ColDef>(() => ({
   const defaultColDef = useMemo<ColDef>(() => ({
     flex: 1,
     flex: 1,
     minWidth: 120,
     minWidth: 120,
-    sortable: true,
-    filter: true,
+    sortable: false,
+    filter: false,
     resizable: true,
     resizable: true,
-    menuTabs: ['filterMenuTab'],
-    cellStyle: { display: 'flex', alignItems: 'center' }
+    suppressSizeToFit: false,  // 允许自适应调整
+    // menuTabs: ['filterMenuTab'],
+    // cellStyle: { display: 'flex', alignItems: 'center' }
   }), []);
   }), []);
 
 
   const paginationPageSize = useMemo(() => 5, []);
   const paginationPageSize = useMemo(() => 5, []);
@@ -94,25 +94,31 @@ const EstateExportHistory: React.FC = () => {
     {
     {
       headerName: '出力日付',
       headerName: '出力日付',
       field: 'exportDate',
       field: 'exportDate',
-      flex: 1.2,
+      // width: 180,
+      minWidth: 120,
+      // flex: 1.2,
       valueFormatter: (params: ValueFormatterParams<IEstateExportHistory>) =>
       valueFormatter: (params: ValueFormatterParams<IEstateExportHistory>) =>
         formatDisplayDate(params.value),
         formatDisplayDate(params.value),
-      sort: 'desc'
+      // sort: 'desc'
     },
     },
     {
     {
       headerName: '担当者',
       headerName: '担当者',
       field: 'exporter',
       field: 'exporter',
-      flex: 1,
-      filter: 'agTextColumnFilter',
+      // width: 150,
+      minWidth: 120,
+      // flex: 1,
+      // filter: 'agTextColumnFilter',
       filterParams: { matchContains: true }
       filterParams: { matchContains: true }
     },
     },
     {
     {
       headerName: '出力内容',
       headerName: '出力内容',
       field: 'exportContent',
       field: 'exportContent',
-      flex: 1.5,
+      // flex: 1.5,
+      // width: 200,
+      minWidth: 120,
       valueFormatter: (params: ValueFormatterParams<IEstateExportHistory>) =>
       valueFormatter: (params: ValueFormatterParams<IEstateExportHistory>) =>
         EXPORT_CONTENT_MAP[params.value as ExportContentType] || '不明',
         EXPORT_CONTENT_MAP[params.value as ExportContentType] || '不明',
-      filter: 'agSetColumnFilter',
+      // filter: 'agSetColumnFilter',
       filterParams: {
       filterParams: {
         values: Object.values(ExportContentType).map(key =>
         values: Object.values(ExportContentType).map(key =>
           EXPORT_CONTENT_MAP[key as ExportContentType]
           EXPORT_CONTENT_MAP[key as ExportContentType]
@@ -283,10 +289,6 @@ const EstateExportHistory: React.FC = () => {
               <div className={styles.loading}>
               <div className={styles.loading}>
                 <span>履歴データを読み込んでいます...</span>
                 <span>履歴データを読み込んでいます...</span>
               </div>
               </div>
-          ) : historyList.length === 0 ? (
-              <div className={styles.emptyState}>
-                <span>出力履歴がありません</span>
-              </div>
           ) : (
           ) : (
               <div className={`ag-theme-alpine ${styles.gridContainer}`} style={containerStyle}>
               <div className={`ag-theme-alpine ${styles.gridContainer}`} style={containerStyle}>
                 <AgGridReact<IEstateExportHistory>
                 <AgGridReact<IEstateExportHistory>