20250901——実績詳細-hn

src/pages/Base/Order/index.tsx

@@ -45,6 +45,24 @@ const reasonOptions = [
     "その他"
 ];
 
+const orderInfo = {
+    deliveryPartner: {
+        id: "0311111111",
+        name: "AAA株式会社"
+    },
+    status: {
+        companyCode: "R000001",
+        status: "全承諾",
+        version: 1,
+        instructionDate: "2025/6/25",
+        approvalDate: "2025/6/25"
+    },
+    monthlyInstruction: {
+        versionOptions: ["ver-1", "ver-2", "ver-3", "ver-4", "ver-5"],
+        selectedVersion: "ver-1"
+    }
+};
+
 const historyData = [
     {
         type: '履歴',
@@ -66,30 +84,13 @@ const historyData = [
 const weekTexts = ["火", "水", "木", "金", "土", "日", "月"];
 
 const GridExample = () => {
-     const [orderInfo, setOrderInfo] = useState({
-        deliveryPartner: {
-            id: "0311111111",
-            corpName: "AAA株式会社"
-        },
-        status: {
-            corpCode: "R000001",
-            orderStatus: "全承諾",
-            version: 1,
-            instructionDeliveryDate: "2025/6/25",
-            commitDate: "2025/6/25"
-        },
-        monthlyInstruction: {
-            versionOptions: ["ver-1", "ver-2", "ver-3", "ver-4", "ver-5"],
-            selectedVersion: "ver-1"
-        }
-    });
     const containerStyle = useMemo(() => ({ width: "100%" }), []);
     const gridStyle = useMemo(() => ({ width: "100%" }), []);
     const [rowData, setRowData] = useState(initializeRowData());
     const [showDialog, setShowDialog] = useState(false);
     const [modifiedCells, setModifiedCells] = useState<Set<string>>(new Set());
     const [selectedCell, setSelectedCell] = useState<{rowIndex: number | null, colId: string, currentValue: string} | null>(null);
-    const [cellReasons, setCellReasons] = useState<Record<string, string>>({});
+    const [cellReasons, setCellReasons] = useState<Record<string, string>>({}) ;
     const [showChat, setShowChat] = useState(false); // 控制聊天侧边栏显示的状态
 
     // 初始化样式
@@ -341,14 +342,14 @@ const GridExample = () => {
     function initializeRowData() {
         return [
             {
-                "amFlag": "",
-                "departureCode": "032990",
-                "arrivalCode": "025990",
-                "systemCode": "02",
-                "lineName": "大賀10t①",
-                "wareHouseLocation": "羽田CGB",
-                "wareHouseTime": "21:00",
-                "vehicleTon": "13",
+                "AM": "",
+                "発": "032990",
+                "着": "025990",
+                "系統": "02",
+                "線便名": "大賀10t①",
+                "入庫場所": "羽田CGB",
+                "入庫時間": "21:00",
+                "使用車両(トン)": "13",
                 "checkboxCol": "",
                 "tokyoBranchCol": "東京支店",
                 "approveStatus": "approved",
@@ -357,14 +358,14 @@ const GridExample = () => {
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
             },
             {
-                "amFlag": "",
-                "departureCode": "032990",
-                "arrivalCode": "027990",
-                "systemCode": "23",
-                "lineName": "大賀10t②",
-                "wareHouseLocation": "桜丘",
-                "wareHouseTime": "19:00",
-                "vehicleTon": "13",
+                "AM": "",
+                "発": "032990",
+                "着": "027990",
+                "系統": "23",
+                "線便名": "大賀10t②",
+                "入庫場所": "桜丘",
+                "入庫時間": "19:00",
+                "使用車両(トン)": "13",
                 "checkboxCol": "",
                 "tokyoBranchCol": "神奈川支店",
                 "approveStatus": "unapproved",
@@ -373,14 +374,14 @@ const GridExample = () => {
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
             },
             {
-                "amFlag": "＊",
-                "departureCode": "032990",
-                "arrivalCode": "027990",
-                "systemCode": "G8",
-                "lineName": "大賀10t③",
-                "wareHouseLocation": "目黒",
-                "wareHouseTime": "18:00",
-                "vehicleTon": "13",
+                "AM": "＊",
+                "発": "032990",
+                "着": "027990",
+                "系統": "G8",
+                "線便名": "大賀10t③",
+                "入庫場所": "目黒",
+                "入庫時間": "18:00",
+                "使用車両(トン)": "13",
                 "checkboxCol": "",
                 "tokyoBranchCol": "品川営業所",
                 "approveStatus": "approved",
@@ -389,14 +390,14 @@ const GridExample = () => {
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
             },
             {
-                "amFlag": "",
-                "departureCode": "032990",
-                "arrivalCode": "027990",
-                "systemCode": "G9",
-                "lineName": "西大阪交表",
-                "wareHouseLocation": "羽田CGB",
-                "wareHouseTime": "21:00",
-                "vehicleTon": "13",
+                "AM": "",
+                "発": "032990",
+                "着": "027990",
+                "系統": "G9",
+                "線便名": "西大阪交表",
+                "入庫場所": "羽田CGB",
+                "入庫時間": "21:00",
+                "使用車両(トン)": "13",
                 "checkboxCol": "",
                 "tokyoBranchCol": "札幌支店",
                 "approveStatus": "unapproved",
@@ -405,14 +406,14 @@ const GridExample = () => {
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
             },
             {
-                "amFlag": "",
-                "departureCode": "061990",
-                "arrivalCode": "032990",
-                "systemCode": "06",
-                "lineName": "羽田CG交裏",
-                "wareHouseLocation": "西大阪B",
-                "wareHouseTime": "19:00",
-                "vehicleTon": "10",
+                "AM": "",
+                "発": "061990",
+                "着": "032990",
+                "系統": "06",
+                "線便名": "羽田CG交裏",
+                "入庫場所": "西大阪B",
+                "入庫時間": "19:00",
+                "使用車両(トン)": "10",
                 "checkboxCol": "",
                 "tokyoBranchCol": "福岡支店",
                 "approveStatus": "approved",
@@ -421,14 +422,14 @@ const GridExample = () => {
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
             },
             {
-                "amFlag": "",
-                "departureCode": "032990",
-                "arrivalCode": "032990",
-                "systemCode": "M8",
-                "lineName": "大賀10t⑥",
-                "wareHouseLocation": "羽田CGB",
-                "wareHouseTime": "21:00",
-                "vehicleTon": "13",
+                "AM": "",
+                "発": "032990",
+                "着": "032990",
+                "系統": "M8",
+                "線便名": "大賀10t⑥",
+                "入庫場所": "羽田CGB",
+                "入庫時間": "21:00",
+                "使用車両(トン)": "13",
                 "checkboxCol": "",
                 "tokyoBranchCol": "東京支店",
                 "approveStatus": "approved",
@@ -437,14 +438,14 @@ const GridExample = () => {
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
             },
             {
-                "amFlag": "",
-                "departureCode": "032990",
-                "arrivalCode": "053990",
-                "systemCode": "06",
-                "lineName": "中部日祝",
-                "wareHouseLocation": "成城",
-                "wareHouseTime": "19:00",
-                "vehicleTon": "13",
+                "AM": "",
+                "発": "032990",
+                "着": "053990",
+                "系統": "06",
+                "線便名": "中部日祝",
+                "入庫場所": "成城",
+                "入庫時間": "19:00",
+                "使用車両(トン)": "13",
                 "checkboxCol": "",
                 "tokyoBranchCol": "神奈川支店",
                 "approveStatus": "unapproved",
@@ -453,14 +454,14 @@ const GridExample = () => {
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
             },
             {
-                "amFlag": "＊",
-                "departureCode": "032990",
-                "arrivalCode": "027990",
-                "systemCode": "G8",
-                "lineName": "大賀10t③",
-                "wareHouseLocation": "目黒",
-                "wareHouseTime": "18:00",
-                "vehicleTon": "13",
+                "AM": "＊",
+                "発": "032990",
+                "着": "027990",
+                "系統": "G8",
+                "線便名": "大賀10t③",
+                "入庫場所": "目黒",
+                "入庫時間": "18:00",
+                "使用車両(トン)": "13",
                 "checkboxCol": "",
                 "tokyoBranchCol": "品川営業所",
                 "approveStatus": "approved",
@@ -469,14 +470,14 @@ const GridExample = () => {
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
             },
             {
-                "amFlag": "",
-                "departureCode": "032990",
-                "arrivalCode": "132990",
-                "systemCode": "02",
-                "lineName": "大賀7t",
-                "wareHouseLocation": "八幡山",
-                "wareHouseTime": "19:00",
-                "vehicleTon": "2",
+                "AM": "",
+                "発": "032990",
+                "着": "132990",
+                "系統": "02",
+                "線便名": "大賀7t",
+                "入庫場所": "八幡山",
+                "入庫時間": "19:00",
+                "使用車両(トン)": "2",
                 "checkboxCol": "",
                 "tokyoBranchCol": "札幌支店",
                 "approveStatus": "unapproved",
@@ -485,14 +486,14 @@ const GridExample = () => {
                 })).reduce((acc, curr) => ({...acc,...curr }), {})
             },
             {
-                "amFlag": "",
-                "departureCode": "061990",
-                "arrivalCode": "032990",
-                "systemCode": "06",
-                "lineName": "羽田CG交裏",
-                "wareHouseLocation": "西大阪B",
-                "wareHouseTime": "19:00",
-                "vehicleTon": "10",
+                "AM": "",
+                "発": "061990",
+                "着": "032990",
+                "系統": "06",
+                "線便名": "羽田CG交裏",
+                "入庫場所": "西大阪B",
+                "入庫時間": "19:00",
+                "使用車両(トン)": "10",
                 "checkboxCol": "",
                 "tokyoBranchCol": "福岡支店",
                 "approveStatus": "approved",
@@ -541,31 +542,17 @@ const GridExample = () => {
                 const status = params.data?.approveStatus;
                 const content = status === "approved"? (
                     <span>
-  承認済
-  <a
-    href="#"
-    style={{
-      marginLeft: "5px",
-      color: "#3a8aca",
-      cursor: "pointer",
-      textDecoration: "underline"
-    }}
-    onClick={(e) => {
-      e.preventDefault();
-      const rowIndex = params.node.rowIndex;
-      if (rowIndex!== null) {
-        const newRowData = [...rowData];
-        newRowData[rowIndex] = {
-         ...newRowData[rowIndex],
-          approveStatus: "unapproved"
-        };
-        setRowData(newRowData);
-      }
-    }}
-  >
-    差戻し
-  </a>
-</span>
+        承認済
+        <a
+            href="#"
+            style={{
+                marginLeft: "5px",
+                color: "#3a8aca"
+            }}
+        >
+          差戻し
+        </a>
+      </span>
                 ) : status === "unapproved"? (
                     <span>未承認</span>
                 ) : (
@@ -580,9 +567,8 @@ const GridExample = () => {
             headerClass: "header-center"
         },
         {
-            field: "amFlag",
+            field: "AM",
             headerClass: "header-center",
-            headerName: "AM",
             width: 60,
         },
         {
@@ -590,37 +576,32 @@ const GridExample = () => {
             headerClass: "header-center line-group-header",
             children: [
                 {
-                    field: "departureCode",
+                    field: "発",
                     headerClass: "header-center",
-                    headerName: "発",
                     width: 85,
                 },
                 {
-                    field: "arrivalCode",
+                    field: "着",
                     headerClass: "header-center",
-                    headerName: "着",
                     width: 85,
                 },
                 {
-                    field: "systemCode",
+                    field: "系統",
                     headerClass: "header-center",
-                    headerName: "系統",
                     width: 65,
                 },
                 {
-                    field: "lineName",
+                    field: "線便名",
                     headerClass: "header-center",
-                    headerName: "線便名",
                     width: 120,
                 },
             ],
         },
-        { field: "wareHouseLocation", headerClass: "header-center",headerName: "入庫場所", width: 110 },
-        { field: "wareHouseTime", headerClass: "header-center",headerName: "入庫時間", width: 90 },
+        { field: "入庫場所", headerClass: "header-center", width: 110 },
+        { field: "入庫時間", headerClass: "header-center", width: 90 },
         {
-            field: "vehicleTon",
+            field: "使用車両(トン)",
             headerClass: "header-center",
-            headerName: "使用車両(トン)",
             width: 125,
             cellRenderer: (params: ICellRendererParams) => {
                 return (
@@ -682,14 +663,14 @@ const GridExample = () => {
 
     const handleAddRow = () => {
         const newRow: any = {
-            "amFlag": "",
-            "departureCode": "",
-            "arrivalCode": "",
-            "systemCode": "",
-            "lineName": "",
-            "wareHouseLocation": "",
-            "wareHouseTime": "",
-            "vehicleTon": "",
+            "AM": "",
+            "発": "",
+            "着": "",
+            "系統": "",
+            "線便名": "",
+            "入庫場所": "",
+            "入庫時間": "",
+            "使用車両(トン)": "",
             "checkboxCol": "",
             "tokyoBranchCol": "",
             "approveStatus": ""
@@ -722,7 +703,7 @@ const GridExample = () => {
                         輸送パートナーID：{orderInfo.deliveryPartner.id}
                     </div>
                     <div className="order-info-row">
-                        輸送パートナー名：{orderInfo.deliveryPartner.corpName}
+                        輸送パートナー名：{orderInfo.deliveryPartner.name}
                     </div>
                 </div>
 
@@ -740,11 +721,11 @@ const GridExample = () => {
                         </thead>
                         <tbody>
                         <tr>
-                            <td>{orderInfo.status.corpCode}</td>
-                            <td>{orderInfo.status.orderStatus}</td>
+                            <td>{orderInfo.status.companyCode}</td>
+                            <td>{orderInfo.status.status}</td>
                             <td>{orderInfo.status.version}</td>
-                            <td>{orderInfo.status.instructionDeliveryDate}</td>
-                            <td>{orderInfo.status.commitDate}</td>
+                            <td>{orderInfo.status.instructionDate}</td>
+                            <td>{orderInfo.status.approvalDate}</td>
                         </tr>
                         </tbody>
                     </table>
@@ -754,18 +735,7 @@ const GridExample = () => {
                     <h3>月間運行指示書</h3>
                     <div className="version-select-container">
                         <label>version選択</label>
-                         <select 
-                            value={orderInfo.monthlyInstruction.selectedVersion}
-                            onChange={(e) => {
-                                setOrderInfo(prev => ({
-                                   ...prev,
-                                    monthlyInstruction: {
-                                       ...prev.monthlyInstruction,
-                                        selectedVersion: e.target.value
-                                    }
-                                }));
-                            }}
-                        >
+                        <select value={orderInfo.monthlyInstruction.selectedVersion}>
                             {orderInfo.monthlyInstruction.versionOptions.map(version => (
                                 <option key={version} value={version}>{version}</option>
                             ))}

src/pages/Base/Record/styles.css

@@ -0,0 +1,275 @@
+.example-wrapper {
+    display: flex;
+    height: 100%;
+}
+
+.inner-col {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.inner-col.vertical-toolbar {
+    display: flex;
+    flex: none;
+    width: 100px;
+    align-items: center;
+    justify-content: center;
+}
+
+.toolbar {
+    white-space: nowrap;
+}
+
+.vertical-toolbar > span {
+    padding: 10px;
+    margin: 10px;
+    cursor: default;
+    user-select: none;
+    -ms-user-select: none;
+    -moz-user-select: none;
+    -webkit-user-modify: none;
+}
+
+button.factory {
+    height: 25px;
+    border-radius: 5px;
+    border: none;
+    color: white;
+    outline: none;
+    cursor: pointer;
+    margin-right: 5px;
+}
+
+button i {
+    margin-right: 10px;
+}
+
+.bin i {
+    transform: scale(1);
+    transition: transform 500ms;
+}
+
+.version-select-container {
+   display: flex;
+   align-items: center;
+   margin: 20px 0;
+}
+.version-select-container label {
+  margin: 0 3%;
+  white-space: nowrap;
+  font-size: 14px;
+}
+.version-select-container select {
+  padding: 5px 35px;
+  font-size: 14px;
+  margin-left: 20px;
+  padding-left: 10px;
+}
+.edit-btn {
+  margin-left: auto;
+  padding: 7px 4%;
+  background-color: #000;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  float: right;
+}
+.action-btn {
+  background-color: #000;
+  color: #fff;
+  border: none;
+  padding: 7px 20px;
+  cursor: pointer;
+  font-size: 14px;
+}
+.history-title-custom {
+    font-size: 14px;
+    font-weight: bold;
+    margin-bottom: 8px;
+    display: block;
+}
+.history-table-custom {
+  width: 100%;
+  border-collapse: collapse;
+}
+.type-td {
+  padding: 5px 20px;
+}
+.date-td {
+  padding: 5px 20px;
+}
+.action-td {
+  padding: 5px 20px;
+}
+.history-title-custom {
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 8px;
+  display: block;
+}
+.order-info-section {
+  margin-bottom: 35px;
+}
+.order-info-section h3 {
+  margin: 0 0 5px 0;
+  font-size: 14px;
+  font-weight: bold;
+}
+.message-btn {
+  float: right;
+  padding: 7px 50px;
+  background-color: #000;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  top: -17px;
+}
+.order-info-row {
+  margin: 10px 0 10px 20px;
+  font-size: 14px;
+}
+.status-section {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 8px;
+  margin-left: 10px;
+}
+.status-section th,
+.status-section td {
+  padding: 5px 10px;
+  text-align: left;
+  font-size: 14px;
+}
+.status-section th {
+  font-weight: normal;
+}
+.custom-tab-list {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  position: relative;
+  margin: 30px 0;
+}
+
+.custom-tab {
+  padding: 10px 20px;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  font-weight: bold;
+  transition: all 0.3s ease;
+  position: relative;
+  background: none;
+  margin: 0 0.5%;
+}
+
+/* 未选中状态 - 確定後样式 */
+.custom-tab:not(.react-tabs__tab--selected) {
+  color: #fff;
+  background-color: #A6A6A6;
+}
+
+/* 选中状态 - 確定前样式 */
+.custom-tab.react-tabs__tab--selected {
+  color: #fff;
+  background-color: #000;
+}
+
+/* 底部指示线 */
+.custom-tab-list::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: #ddd;
+  z-index: 1;
+}
+
+/* 移除默认焦点样式 */
+.custom-tab:focus {
+  box-shadow: none;
+}
+  .horizontal-header {
+    text-align: center;
+    white-space: normal;
+    padding: 10px 5px;
+    font-weight: bold;
+    height: 100px;
+    border-right: 1px solid #dde2eb;
+    border-left: 1px solid #dde2eb;
+    border-bottom: 1px solid #dde2eb;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  /* 移除列宽调整手柄 */
+  .ag-header-cell-resize {
+    display: none !important;
+  }
+  .ag-pinned-left-header .ag-header-cell,
+  .ag-pinned-left-cols-container .ag-cell {
+    font-weight: bold;
+  }
+  /* .ag-theme-alpine {
+    --ag-border-color: #dde2eb;
+    --ag-cell-horizontal-border: solid 1px #dde2eb;
+    --ag-header-horizontal-border: solid 1px #dde2eb;
+    --ag-header-vertical-border: solid 1px #dde2eb;
+    --ag-cell-vertical-border: solid 1px #dde2eb;
+    --ag-grid-size: 1px;  } */
+  .ag-header {
+    border-bottom: 2px solid #c1c8d4;
+  }
+  .ag-theme-alpine .ag-row-odd {
+    background-color: #fafbfc;
+  }
+  .toolbar {
+    padding: 12px 16px;
+    background: #fff;
+    border: 1px solid #dde2eb;
+    border-radius: 6px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  }
+  .version-select-container {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin: 16px 0;
+  }
+  .edit-btn {
+    padding: 6px 12px;
+    background-color: #1890ff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  .edit-btn:hover {
+    background-color: #40a9ff;
+  }
+  .custom-dropdown {
+    padding: 4px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    width: 80px;
+  }
+  .custom-checkbox {
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+  }
+  .ag-cell {
+    border-right: 1px solid #dde2eb !important;
+    border-left: 1px solid #dde2eb !important;
+  }
+  .ag-header-cell {
+    border-right: 1px solid #dde2eb !important;
+    border-left: 1px solid #dde2eb !important;
+  }