react-ruoyi/new-react-admin-ui/src/pages/generations/LabelGenerationList.tsx

import React, { useMemo, useState, useEffect } from "react";
import { AgGridReact } from "ag-grid-react";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ModuleRegistry,
  ICellRendererParams,
  SelectEditorModule,
  CellStyleModule
} from "ag-grid-community";
import "ag-grid-community/styles/ag-theme-alpine.css";
import { DatePicker } from 'antd';
import dayjs, { Dayjs } from 'dayjs';
import { useDataProvider } from 'react-admin';
import { useParams } from 'react-router-dom';

// 注册AG Grid模块
ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  SelectEditorModule,
  CellStyleModule
]);

// 部名选项
const deptOptions = [
  { value: "", label: "選択しない" },
  { value: "営業部", label: "営業部" },
  { value: "物流部", label: "物流部" },
  { value: "管理部", label: "管理部" },
  { value: "技術部", label: "技術部" },
  { value: "人事部", label: "人事部" },
  { value: "販売第一部", label: "販売第一部" },
];

// 地区名选项
const areaOptions = [
  { value: "", label: "選択しない" },
  { value: "東　　部", label: "東　　部" },
  { value: "西　　部", label: "西　　部" },
  { value: "南　　部", label: "南　　部" },
  { value: "北　　部", label: "北　　部" },
  { value: "中　　部", label: "中　　部" }
];

// 時台选项
const hourOptions = [
  { value: "", label: "選択しない" },
  { value: "07", label: "07時台" }, 
  { value: "08", label: "08時台" }, 
  { value: "09", label: "09時台" },
  { value: "10", label: "10時台" },
  { value: "11", label: "11時台" },
  { value: "12", label: "12時台" },
  { value: "13", label: "13時台" }
];

export const LabelGenerationList = () => {
  const containerStyle = useMemo(() => ({ width: "100%", overflow: "hidden" }), []);
  const [rowData, setRowData] = useState<any[]>([]);
  const [, setLoading] = useState<boolean>(true);
  const [selectedDept, setSelectedDept] = useState("");
  const [selectedArea, setSelectedArea] = useState("");
  const [selectedHour, setSelectedHour] = useState("");
  const [baseCode, setBaseCode] = useState("");
  const [baseName, setBaseName] = useState("");
  const [creationDate, setCreationDate] = useState<Dayjs | null>(null);
  const [isEditMode, setIsEditMode] = useState(false);
  const [selectedRows, setSelectedRows] = useState<any[]>([]);
  
  // React Admin 核心工具
  const dataProvider = useDataProvider();
  const params = useParams();

  // 初始化样式
  useEffect(() => {
    const style = document.createElement('style');
    style.textContent = `
      .ag-theme-alpine .header-center .ag-header-cell-label {
        justify-content: left !important;
        text-align: center !important;
      }

      .ag-theme-alpine .header-center.ag-header-group-cell {
        text-align: center !important;
      }

      .ag-theme-alpine .header-center.ag-header-group-cell .ag-header-group-cell-label {
        justify-content: center !important;
        display: flex !important;
        width: 100% !important;
      }

      .ag-header-cell-resize:after {
        display: none;
      }
      
     .ag-theme-alpine .ag-cell {
       border-right: 1px solid #dcdcdc;
       text-align: center;
       justify-content: left !important;
     }
     
     .ag-theme-alpine .ag-header-cell {
       border-right: 1px solid #dcdcdc;
     }
     
     .line-group-header {
       border-right: 1px solid #dcdcdc;
     }
     
     .date-group-header {
       border-right: 1px solid #dcdcdc !important;
     }
     /* 搜索区域样式 */
     .search-section {
       margin-bottom: 10px;
     }
     .search-section h3 {
       font-weight: bold;
       font-size: 16px;
     }
     .search-form {
       display: flex;
       flex-direction: column;
     }
     .form-row {
       display: flex;
       align-items: center;
       margin-bottom: 5px;
     }
     .form-row label {
       width: 100px;
       text-align: left;
       margin-right: 10px;
     }
     /* 统一所有下拉列表和输入框样式 */
     .form-row input,
     .form-row select,
     .form-row.ant-picker {
       padding: 5px;
       flex: 1;
       max-width: 200px;
       border: 1px solid #ccc;
       border-radius: 4px;
       box-sizing: border-box;
     }
     .top-section {
       display: flex;
       align-items: center;
       margin-bottom: 5px;
     }
     .top-section span {
       margin-right: 10px;
       font-weight: bold; 
       font-size: 16px;
     }
     .correction-btn{
       background-color: #000;
       color: #fff;
       margin-left: auto;
       border: none;
       padding: 5px 20px;
       cursor: pointer;
     }
     .search-btn {
       background-color: #000;
       color: #fff;
       border: none;
       padding: 5px 40px;
       cursor: pointer;
       margin-left: 0;
     }
     .cancel-btn {
       background-color: #000;
       color: #fff;
       border: none;
       padding: 5px 20px;
       cursor: pointer;
     }
     .delete-btn {
       background-color: #000;
       color: #fff;
       border: none;
       padding: 5px 20px;
       cursor: pointer;
     }
     .loading-indicator {
       text-align: center;
       padding: 20px;
       font-size: 16px;
     }
    `;
    document.head.appendChild(style);

    return () => {
      document.head.removeChild(style);
    };
  }, []);

  // 从路由参数初始化查询条件
  useEffect(() => {
    if (params.baseCode) setBaseCode(params.baseCode);
    if (params.dateTm) setCreationDate(dayjs(params.dateTm));
  }, [params]);

  // 日期格式化
  const formatDateForBackend = () => {
    if (!creationDate) return '';
    const baseDate = creationDate.format('YYYY-MM-DD');
    const hour = selectedHour || '00';
    return `${baseDate} ${hour}:00:00`;
  };

  // 获取数据
  const fetchData = async () => {
    setLoading(true);
    try {
      const queryParams = {
        depName: selectedDept,
        regName: selectedArea,
        hour: selectedHour,
        baseCode,
        baseName,
        creationDate: formatDateForBackend() 
      };

      const response = await dataProvider.getList('label/generations', {
        filter: queryParams
      });

      const formattedData = (response.data || []).map((item: any) => ({
        checkboxCol: "",
        id: item.id || "",
        depName: item.depName || "",
        regName: item.regName || "",
        baseCode: item.baseCode || "",
        baseName: item.baseName || "",
        zipCode: item.zipCode || "",
        inNumber: item.inNumber || "",
        classNumber: item.classNumber || "",
        creationDate: item.creationDate || "",
        implementation: item.implementation || ""
      }));
      setRowData(formattedData);
    } catch (error) {
      console.error("数据获取失败:", error);
      alert("データの取得に失敗しました。再試行してください。");
    } finally {
      setLoading(false);
    }
  };

  // 初始加载数据
  useEffect(() => {
    fetchData();
  }, []);

  // 构建列定义
  const columnDefs: (ColDef | ColGroupDef)[] = useMemo(() => {
    const baseColumns: ColDef[] = [
      {
        field: "depName",
        headerClass: "header-center", 
        headerName: "部名",
        cellRenderer: (params: ICellRendererParams) => (
          <div style={{ textAlign: 'left'}}>{params.value || ''}</div>
        ),
        width: 120,
        minWidth: 100,
      },
      {
        field: "regName",
        headerClass: "header-center",
        headerName: "地区名",
        cellRenderer: (params: ICellRendererParams) => (
          <div style={{ textAlign: 'left'}}>{params.value || ''}</div>
        ),
        width: 130, 
        minWidth: 100,
      },
      {
        field: "baseCode",
        headerClass: "header-center",
        headerName: "拠点コード",
        cellRenderer: (params: ICellRendererParams) => (
          <div style={{ textAlign: 'left'}}>{params.value || ''}</div>
        ),
        flex: 1,
        minWidth: 110,
      },
      {
        field: "baseName",
        headerClass: "header-center",
        headerName: "拠点名", 
        cellRenderer: (params: ICellRendererParams) => (
          <div style={{ textAlign: 'left'}}>{params.value || ''}</div>
        ), 
        flex: 1,
        minWidth: 170,
      },
      {
        field: "zipCode",
        headerClass: "header-center",
        headerName: "郵便番号",
        cellRenderer: (params: ICellRendererParams) => (
          <div style={{ textAlign: 'left'}}>{params.value || ''}</div>
        ),  
        flex: 1,
        minWidth: 110,
      },
      {
        field: "inNumber",
        headerClass: "header-center",
        headerName: "送り状番号",
        cellRenderer: (params: ICellRendererParams) => (
          <div style={{ textAlign: 'left'}}>{params.value || ''}</div>
        ),  
        flex: 1.5,
        minWidth: 130,
      },
      {
        field: "classNumber",
        headerClass: "header-center",
        headerName: "仕分け番号(ヤマト運輸)",
        cellRenderer: (params: ICellRendererParams) => (
          <div style={{ textAlign: 'left'}}>{params.value || ''}</div>
        ),  
        flex: 1.5,
        minWidth: 130,
      },
      {
        field: "creationDate",
        headerClass: "header-center",
        headerName: "生成日時",
        cellRenderer: (params: ICellRendererParams) => (
          <div style={{ textAlign: 'left'}}>{params.value || ''}</div>
        ),
        flex: 1.5,
        minWidth: 140,
      },
      {
        field: "implementation",
        headerClass: "header-center",
        headerName: "実施者",
        cellRenderer: (params: ICellRendererParams) => (
          <div style={{ textAlign: 'left'}}>{params.value || ''}</div>
        ),
        flex: 1,
        minWidth: 100,
      }
    ];

    // 编辑模式添加复选框列
    if (isEditMode) {
      return [
        {
          field: "checkboxCol",
          headerName: "削除",
          width: 70,
          cellRenderer: (params: ICellRendererParams) => {
            const currentRow = params.data;
            const isChecked = selectedRows.includes(currentRow);
            
            const handleCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
              setSelectedRows(prev => 
                e.target.checked 
                  ? [...prev, currentRow] 
                  : prev.filter(row => row!== currentRow)
              );
            };

            return (
              <div style={{ textAlign: 'center' }}>
                <input 
                  type="checkbox" 
                  checked={isChecked} 
                  onChange={handleCheck} 
                />
              </div>
            );
          },
          headerClass: "header-center"
        },
        ...baseColumns
      ];
    }

    return baseColumns;
  }, [isEditMode, selectedRows]);

  // 取消编辑
  const handleCancel = () => {
    setIsEditMode(false);
    setSelectedRows([]);
  };

  // 批量删除
  const handleBatchDelete = async () => {
    if (selectedRows.length === 0) {
      alert("削除するデータを選択してください");
      return;
    }

    try {
      const ids = selectedRows.map(row => row.id);
      await dataProvider.deleteMany('label/generations', { ids });
      
      setRowData(prev => prev.filter(row =>!selectedRows.includes(row)));
      setSelectedRows([]);
      alert(`${selectedRows.length}件のデータを削除しました`);
    } catch (error) {
      console.error("删除失败:", error);
      alert("削除に失敗しました。再試行してください。");
    }
  };

  return (
    <div style={containerStyle}>
      {/* 检索区域 */}
      <div className="search-section">
        <h3>ラベル生成ログ検索</h3>
        <form className="search-form">
          <div className="form-row">
            <label>部名</label>
            <select 
              value={selectedDept} 
              onChange={(e) => setSelectedDept(e.target.value)}
            >
              {deptOptions.map(option => (
                <option key={option.value} value={option.value}>
                  {option.label}
                </option>
              ))}
            </select>
          </div>
          
          <div className="form-row">
            <label>地区名</label>
            <select 
              value={selectedArea} 
              onChange={(e) => setSelectedArea(e.target.value)}
            >
              {areaOptions.map(option => (
                <option key={option.value} value={option.value}>
                  {option.label}
                </option>
              ))}
            </select>
          </div>
          
          <div className="form-row">
            <label>拠点コード</label>
            <input 
              type="text" 
              value={baseCode}
              onChange={(e) => setBaseCode(e.target.value)}
            />
          </div>
          
          <div className="form-row">
            <label>拠点名</label>
            <input 
              type="text" 
              value={baseName}
              onChange={(e) => setBaseName(e.target.value)}
            />
          </div>
          
          <div className="form-row">
            <label>生成日</label>
            <DatePicker
              value={creationDate}
              onChange={(date) => setCreationDate(date)}
              format="YYYY-MM-DD"
              style={{ maxWidth: '200px', flex: 1 }}
            />
            <div style={{ marginLeft: '30px' }}>
              <select 
                value={selectedHour} 
                onChange={(e) => setSelectedHour(e.target.value)}
              >
                {hourOptions.map(option => (
                  <option key={option.value} value={option.value}>
                    {option.label}
                  </option>
                ))}
              </select>
              <span>時台</span>
            </div>
          </div>
          
          <div className="form-row">
            <button 
              type="button" 
              className="search-btn"
              onClick={fetchData}
            >
              検索
            </button>
          </div>
        </form>
      </div>
      
      {/* 表格标题区域 */}
      <div className="top-section">
        <span>ラベル生成ログ</span>
        <button 
          className="correction-btn" 
          onClick={() => setIsEditMode(true)}
          style={{ display: isEditMode? 'none' : 'block', marginLeft: 'auto' }}
        >
          実績値修正
        </button>
      </div>
      
      {/* 数据表格*/}
      <div className="ag-theme-alpine" style={{ width: '100%', minWidth: '900px' }}>
        <AgGridReact
          rowData={rowData}
          columnDefs={columnDefs}
          domLayout="autoHeight"
        />
      </div>
      
      {/* 编辑模式操作按钮*/}
      {isEditMode && (
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '10px' }}>
          <button 
            className="cancel-btn" 
            style={{ marginRight: '40px' }}
            onClick={handleCancel}
          >
            キャンセル
          </button>
          <button 
            className="delete-btn"
            onClick={handleBatchDelete}
          >
            一括削除
          </button>
        </div>
      )}
    </div>
  );
};

export default LabelGenerationList;