补版颜色选择

chenxt
1 parent 9b2947cf
Showing 5 changed files with 274 additions and 14 deletions
src/components/Common/CommonComponent/index.js
src/components/Common/CommonTable/index.js
src/default.less
src/mes/common/commonModelComponent/index.js
src/mes/common/commonModelComponent/index.less
@@ -744,7 +744,7 @@ export default class CommonComponent extends Component {
   };
   getSelectTableOption = () => {
     const { selectTableData } = this.state;
-    const { showConfig , app} = this.props;
+    const { showConfig, app } = this.props;
     const { userinfo } = app;
     let { sTableTitleSql } = showConfig;
     /* 根据用户配置语言 设置表格标题 */
@@ -1235,7 +1235,7 @@ export default class CommonComponent extends Component {
       }
     }
     /*   返回值   */
-    
+
     return options;
   };
  
@@ -1953,7 +1953,7 @@ export default class CommonComponent extends Component {
       const sFontColor = this.props.showConfig.sFontColor;
       obj.labelCol.style = { color: sFontColor, fontWeight: 'bold', backgroundColor: '#BFEFFF' };
     }
-    
+
     /*   返回值   */
     return obj;
   };
@@ -2669,6 +2669,10 @@ export default class CommonComponent extends Component {
     this.props.onPreviewImage(e, dataUrl);
   }
   handleViewChoose = () => {
+    if (this.props?.formId === '172117190122117645759356840' && this.props?.showConfig?.sName.includes('Color')) {
+      this.props.onViewChoose(this.props.name, this.props.showConfig.sName, this.props.record, null, true);
+      return
+    }
     this.props.onViewChoose(this.props.name, this.props.showConfig.sName, this.props.record);
   }
   handleMemoShow = () => {
@@ -3053,10 +3057,10 @@ export default class CommonComponent extends Component {
     /*   页面输出   */
     const className = iColValue === 24 ? 'input24' : iColValue === 18 ? 'input18' : iColValue === 12 ? 'input12' : 'changeClassName';
     const mesInputBlue = enabled && !this.props.bNoMesBlue && this.firstDataIndex !== 'b';
-      const {bManual = false} = this.props?.app?.userinfo || {}
+    const { bManual = false } = this.props?.app?.userinfo || {}
     return (
       <div ref={this.myRef} className={`${className} ${mesInputBlue ? "mesInputBlue" : ""}`} style={componentStyle}>
-        {mesInputBlue ? <div  className={`mesInputBlueBg  ${bManual ? 'manualOverride' : ''}`} /> : ''}
+        {mesInputBlue ? <div className={`mesInputBlueBg  ${bManual ? 'manualOverride' : ''}`} /> : ''}
         <div className={`${this.props.className} ${readonlyStyle} ${costomStyle}`}>
           {oPreDot}
           {commonAssembly}
@@ -211,7 +211,9 @@ class CommonTableRc extends React.Component {
       commonFileDownloadList: [], // 多文件列表
       pdfFileVisible: false, // pdf文件弹窗
       pdfFileUrl: "",
-      currentHoverSid: ""
+      currentHoverSid: "",
+      positiveColorModel: false, // 颜色预览弹窗
+      tableRecord: null, // 当前行数据
     };
     this.rowKey = commonUtils.isNotEmptyObject(props.tableProps) && !commonUtils.isEmpty(props.tableProps.rowKey) ? props.tableProps.rowKey : 'sId'; /*   表格主键  */
     this.config = {}; /*   配置信息(基础)(数据格式:对象)   */
@@ -7363,8 +7365,8 @@ class CommonTableRc extends React.Component {
       this.setState({ sCurrMemoProps });
     }
   };
-  handleViewChoose = (name, sName, record, index) => {
-    this.props.onViewChoose(name, sName, record, index);
+  handleViewChoose = (name, sName, record, index, isColor) => {
+    this.props.onViewChoose(name, sName, record, index, isColor);
   };
   /* 弹出通用窗体 */
   handlePopupModal = (showConfig, name) => {
@@ -10720,6 +10722,7 @@ class CommonTableRc extends React.Component {
       this.props.onMoveRow(dragIndex, hoverIndex, dragKey, hoverKey);
     }
   };
+
   /**   渲染   */
   render() {
     /*   获取upload的props  */
@@ -348,11 +348,12 @@
  
       .viewChooseSpan {
         display: block;
-        top: 14px;
+        // top: 14px;
         white-space: nowrap;
         word-break: break-all;
         text-overflow: ellipsis;
         overflow: hidden;
+        font-size: 16px !important;
       }
     }
  
@@ -409,6 +410,7 @@
  
     .sActiveIdStyle {
       background: #ffcc4e !important;
+      font-size: 16px;
     }
  
     .ant-select-selector {
@@ -2,7 +2,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import moment from "moment";
 import { cloneDeep } from "lodash";
-import { Tabs, Modal, Space, Button, DatePicker, Radio, message, Avatar } from "antd";
+import { Tabs, Modal, Space, Button, DatePicker, Radio, message, Avatar, Row, Col, Table } from "antd";
 import * as commonUtils from "@/utils/utils";
 import * as commonConfig from "@/utils/config";
 import * as commonServices from "@/services/services";
@@ -1650,7 +1650,7 @@ const CommonModelComponent = props =&gt; {
       tableBtnsConfig,
       children = []
     } = config;
-    
+
     if (showType === "none") {
       if (!children.length) return "";
       const footerComponent = useFooterComponent({ ...props, sTabName });
@@ -1864,7 +1864,7 @@ const CommonModelComponent = props =&gt; {
                           <>
                             {/* 第一个单独一行 */}
                             {first && (
-                              <div style={{ width: '100%', marginBottom: '8px', minHeight:' 20%', }}>
+                              <div style={{ width: '100%', marginBottom: '8px', minHeight: ' 20%', }}>
                                 {renderConfig(first, 0)}
                               </div>
                             )}
@@ -1877,7 +1877,7 @@ const CommonModelComponent = props =&gt; {
                                   gap: '8px',
                                   marginBottom: '8px',
                                   width: '100%',
-                                  minHeight:' 79%',
+                                  minHeight: ' 79%',
                                 }}
                               >
                                 {secondAndThird.map((config, idx) => {
@@ -2105,7 +2105,7 @@ const CommonViewTableComponent = props =&gt; {
           viewProps.enabledNew = false;
         }
         console.log(viewProps, 'viewProps');
-        
+
         return (
           <>
             <TabTitleComponent {...props} sTabName={groupList[index]} />
@@ -2325,9 +2325,39 @@ const CommonTableComponent = props =&gt; {
           config
         });
       }
+    },
+    onViewChoose: (tableName, sFieldName, record, index, isColor) => {
+      handleViewChoose(tableName, sFieldName, record, index, isColor);
+
     }
   };
+  const handleViewChoose = (tableName, sFieldName, record, index, isColor) => {
+    if (isColor) {
+      const { sId } = record; /* 控制表主键 */
+      const { enabled, processSelectedRowKeys } = props;
+      const NoProcessParameters = commonFunc.showLocalMessage(props, 'NoProcessParameters', '无工艺参数！');
+      const sisColorSelectedRowKeys = [];
+      let jsonData = [];
+      const { [`${tableName}Data`]: tableData } = props;
+      const iIndex = tableData?.findIndex(item => item.sId === sId);
+      if (iIndex > -1) {
+        const sPositiveColor = tableData[iIndex][sFieldName];
+        const sPositiveColorList = (sPositiveColor && sPositiveColor !== 'undefined' && sPositiveColor !== 'null')
+          ? JSON.parse(sPositiveColor)
+          : [];
+        props.onSaveState({
+          sisColorChooseVisible: true,
+          controlSelectedRowId: sId, /* 控制表选中行sId */
+          processSelectedRowId: '', /* 工序表选中行sId */
+          sisColorSelectedRowKeys,
+          sisColorSelectedData: sPositiveColorList,
+          sisColorField: sFieldName,
+          sisTableName: tableName,
+        });
  
+      }
+    }
+  }
   const stepName = sTabName?.split("_")[1] || "";
   if (stepName.startsWith("第") && stepName.endsWith("转")) {
     tableProps.data = tableProps.data.filter(item => item.sRev === stepName);
@@ -2357,6 +2387,8 @@ const CommonTableComponent = props =&gt; {
       }
     }
   }, [props.masterData])
+  console.log('tableProps', tableProps);
+
   return (
     <>
       <TabTitleComponent {...props} sTabName={sTabName} />
@@ -2374,6 +2406,7 @@ const CommonTableComponent = props =&gt; {
         itemClickRef={itemClickRef}
         onTableBtnClick={handleTableBtnClick}
       />
+      <SisColorChooseComponent   {...props} />
     </>
   );
 };
@@ -3106,4 +3139,206 @@ const TaskConfirmModal = props =&gt; {
   );
 };
  
+const SisColorChooseComponent = props => {
+  const { sisColorChooseVisible, sisColorField, sisTableName, controlSelectedRowId } = props;
+
+  const [rightData, setRightData] = useState([]);
+
+  if (!sisColorChooseVisible) return "";
+
+  const handleClose = () => {
+
+    props.onSaveState({
+      sisColorChooseVisible: false,
+      sisColorSelectedData: []
+    });
+
+    setRightData([]);
+  };
+
+  const handelSubmit = () => {
+    const { [`${sisTableName}Data`]: tableData } = props;
+    const iIndex = tableData?.findIndex(item => item.sId === controlSelectedRowId);
+    // iPositiveColor sPositiveColor sOppositeColor
+    const colorList = JSON.parse(tableData[iIndex][sisColorField]).map(item => {
+      const i = rightData.findIndex(rightItem => rightItem.sId === item.sId);
+      let newItem = {
+        ...item
+      }
+      if (i > -1) {
+        newItem = {
+          ...newItem,
+          bSelected: true
+        }
+      }
+      return newItem
+    });
+    const totalDColor = rightData.reduce((total, item) => total + item.dColor, 0);
+    tableData[iIndex] = {
+      ...tableData[iIndex],
+      [sisColorField]: JSON.stringify(colorList),
+      iOutsideQty: totalDColor
+    }
+    console.log("🚀 ~ handelSubmit ~ tableData[iIndex]:", totalDColor);
+
+    props.onSaveState({
+      [`${sisTableName}Data`]: [...tableData],
+      sisColorChooseVisible: false,
+      sisColorSelectedData: []
+    });
+
+  }
+
+  const handleLeftSelectChange = (selectedRowKeys, selectedRows) => {
+    setRightData(selectedRows);
+  };
+
+  const handleDeleteRight = (record) => {
+    const newData = rightData.filter(item => item.sId !== record.sId);
+    setRightData(newData);
+  };
+
+  const leftRowSelection = {
+    type: 'checkbox',
+    selectedRowKeys: rightData.map(item => item.sId),
+    onChange: handleLeftSelectChange,
+  };
+
+
+  const rowCellStyleLeft = {
+    fontSize: '16px',
+  };
+
+  const rowCellStyleRight = {
+    fontSize: '16px',
+  };
+
+  const headerCellStyle = {
+    fontSize: '20px',
+    fontWeight: 'bold',
+  };
+
+  const CustomCellLeft = (cellProps) => (
+    <td {...cellProps} style={{ ...cellProps.style, ...rowCellStyleLeft }} />
+  );
+
+  const CustomCellRight = (cellProps) => (
+    <td {...cellProps} style={{ ...cellProps.style, ...rowCellStyleRight }} />
+  );
+
+  const baseColumns = [
+    {
+      title: '序号',
+      dataIndex: 'index',
+      key: 'index',
+      width: 60,
+      align: 'center',
+      render: (_, record, index) => index + 1,
+      customHeaderCell: () => ({ style: headerCellStyle }),
+    },
+    {
+      title: '名称',
+      dataIndex: 'sName',
+      customHeaderCell: () => ({ style: headerCellStyle }),
+    },
+    {
+      title: '板数',
+      dataIndex: 'dColor',
+      customHeaderCell: () => ({ style: headerCellStyle }),
+    },
+  ];
+
+  const rightColumns = [
+    ...baseColumns.map(col => ({ ...col })),
+    {
+      title: '操作',
+      key: 'action',
+      width: 80,
+      align: 'center',
+      customHeaderCell: () => ({ style: headerCellStyle }),
+      render: (_, record) => (
+        <a
+          onClick={(e) => { e.stopPropagation(); handleDeleteRight(record); }}
+          style={{ color: '#ff4d4f', cursor: 'pointer' }}
+        >
+          删除
+        </a>
+      ),
+    },
+  ];
+
+  // --- 组件映射 ---
+
+  const tableComponentsLeft = {
+    body: {
+      cell: CustomCellLeft,
+    },
+  };
+
+  const tableComponentsRight = {
+    body: {
+      cell: CustomCellRight,
+    },
+  };
+
+  return (
+    <Modal
+      title='颜色选择'
+      open={sisColorChooseVisible}
+      width={1000}
+      height={400}
+
+      footer={
+        <Space>
+          <Button
+            size="large"
+            type="primary"
+            onClick={handelSubmit}
+          >
+            确认
+          </Button>
+          <Button
+            size="large"
+            type="primary"
+            onClick={handleClose}
+          >
+            取消
+          </Button>
+        </Space>
+      }
+      onCancel={handleClose}
+    >
+      <Row gutter={[8, 0]}>
+        {/* 左侧表格 */}
+        <Col span={8} className="commonColorModal">
+          <Table
+            rowSelection={leftRowSelection}
+            rowKey="sId"
+            columns={baseColumns}
+            dataSource={props.sisColorSelectedData || []}
+            pagination={false}
+            scroll={{ y: 350 }}
+            components={tableComponentsLeft}
+          />
+        </Col>
+
+        {/* 右侧表格 */}
+        <Col span={16} className="commonColorModal">
+          <Table
+            rowSelection={null}
+            rowKey="sId"
+            columns={rightColumns}
+            dataSource={rightData}
+            pagination={false}
+            scroll={{ y: 350 }}
+            components={tableComponentsRight}
+          />
+        </Col>
+      </Row>
+    </Modal>
+  );
+};
+
+
+
 export default CommonModel;
@@ -43,6 +43,22 @@
     }
   }
 }
+/* 全局 CSS */
+.custom-table-header-large {
+  font-size: 20px !important;
+  font-weight: bold !important;
+}
+
+
+  :global {
+   .commonColorModal {
+    :global {
+      .ant-table-thead > tr > th {
+        font-size: 14px !important;
+        }
+    }
+   }
+  }
  
 .commonRepairModal {
   .size();