订单编辑增加颜色选配

src/components/CartListComp/index.js

@@ -285,7 +285,7 @@ class CartListComp extends Component {
       const html = cartGroupItem.cartlist.map((item, index) => (
         <div
           className={styles.goodsChildList}
-          key={`${cartGroupItem.saleOrgId}${item.goodsId}`}
+          key={`${cartGroupItem.saleOrgId}${item.goodsId}-${index}`}
         >
           <div className={styles.goodsNameBox}>
             <div className={styles.goodsCheck}>
@@ -309,11 +309,11 @@ class CartListComp extends Component {
             </div>
             <div className={styles.goodsInfo}>
               <p className={styles.goodsTitleName}>{item.goodsDisplayName.length > 20 ? `${item.goodsDisplayName.substr(0, 20)}...` : item.goodsDisplayName}</p>
-              <p style={{ color: '#999','font-size': '12px', margin: '0px'}}>
+              <p style={{ color: '#999','fontSize': '12px', margin: '0px'}}>
                 <span>编码：{item.goodsCode}</span>
-                <span style={{'margin-left': '20px'}}>型号：{item.model}</span>
+                <span style={{'marginLeft': '20px'}}>型号：{item.model}</span>
               </p>
-              <p style={{ color: '#999','font-size': '12px', margin: '0px'}}>
+              <p style={{ color: '#999','fontSize': '12px', margin: '0px'}}>
                 <span>规格：{item.specification}{item.specification.indexOf("/") >= 0 ? "" : item.mainNumUnitName}</span>
               </p>
             </div>

src/components/OrderGoodsList/index.js

@@ -46,6 +46,9 @@ class OrderGoodsList extends PureComponent {
         width: "280px",
         render: (text, record, index) => (
           <div className={styles.goodsNameBox}>
+            <div style={{"float": 'left', "fontSize": "1.5rem", "paddingRight": "1rem"}}>
+              {Number(index) + 1}
+            </div>
             <div className={styles.imgBox}>
               <img src={record.goodsImg} alt="" />
             </div>
@@ -152,7 +155,7 @@ class OrderGoodsList extends PureComponent {
               <div className={styles.numIptBox} style={{ marginLeft: "20px" }}>
                 <div style={{ width: "100px", display: "inline-block" }}>
                   <GoodsBuyIpt
-                    key={record.goodsId}
+                    key={record.goodsId + "-"+ index}
                     num={record.orderNum}
                     onChange={this.buyNumChange.bind(this, index)}
                   />
@@ -507,7 +510,7 @@ class OrderGoodsList extends PureComponent {
             <div className={styles.numIptBox} style={{ marginLeft: "20px" }}>
               <div style={{ width: "100px", display: "inline-block" }}>
                 <GoodsBuyIpt
-                  key={`${record.id}${record.activityId}`}
+                  key={`${record.id}${record.activityId}${index}`}
                   disabled={disabled}
                   num={record.orderNum}
                   step={step}
@@ -641,20 +644,21 @@ class OrderGoodsList extends PureComponent {
     }
   }
   onGoodsOptionalHandle(goods, index) {
-    const goodsOptsParam =  {
-      rowData: goods,
-      goodsId: goods.goodsId,
-      baseGoodsOptId: goods.baseGoodsOptId,
-      rowIndex: index
-    };
-    this.setState({
-      goodsOptsParam: goodsOptsParam
-    }, () => {
-      this.props.dispatch({
-        type: "global/goodsOptsVisible",
-        payload: true
-      });
-    });
+    // const goodsOptsParam =  {
+    //   rowData: goods,
+    //   goodsId: goods.goodsId,
+    //   baseGoodsOptId: goods.baseGoodsOptId,
+    //   rowIndex: index
+    // };
+    // this.setState({
+    //   goodsOptsParam: goodsOptsParam
+    // }, () => {
+    //   this.props.dispatch({
+    //     type: "global/goodsOptsVisible",
+    //     payload: true
+    //   });
+    // });
+    this.props.optClick && this.props.optClick(goods, index)
   }
   // 选择促销方式
   onRadioChangeHandle(e) {

src/models/commodityDetails.js

@@ -2,6 +2,7 @@ import {
   getGoodsDetailAPI,
   getGoodsInfoAPI,
   getGoodsPriceAPI,
+  getGoodAndPalettePriceConAPI,
   getGoodsSpecsAPI,
   getGoodsStockAPI,
   getGoodsDetailNewAPI,
@@ -58,6 +59,14 @@ export default {
         goodsInfo: response.data
       });
     },
+    //选配价格
+    *getGoodAndPalettePriceCon({ payload }, { call, put }) {
+      const response = yield call(getGoodAndPalettePriceConAPI, payload);
+      yield put({
+        type: "goodsPrice",
+        goodsPrice: response.data
+      });
+    },
     // 获取商品价格
     *getGoodsPrice({ payload }, { call, put }) {
       const response = yield call(getGoodsPriceAPI, payload);
@@ -81,7 +90,14 @@ export default {
         type: "goodsStock",
         goodsStock: response.data
       });
+    },
+    *updateGoodsDetail({ payload }, { call, put }) {
+      yield put({
+        type: "goodsDetailNew",
+        goodsDetailNew: payload
+      });
     }
+
   },
   reducers: {
     goodsDetail(state, payload) {

src/pages/Buyer/goods/goodsDetail/index.js

@@ -5,6 +5,7 @@ import styles from "./index.less";
 import AmountFun from "@/components/AmountFun/index.js";
 import { SpecificationMethod, _isContained, _isArrEqual, amountPrecision } from '@/utils/utils';
 import { getCustomer } from "@/utils/request";
+import { getGoodAndPalettePriceConAPI,saveGoodsOptsResultAPI } from "../../../../services/api";
 
 import erroImg  from "@/assets/imgError.png";
 
@@ -46,7 +47,8 @@ class GoodsDetails extends PureComponent {
                 ext05: "",
                 ext04: "",
                 price: ""
-            }
+            },
+            originPrice: 0
         };
     }
     componentWillMount() {
@@ -125,6 +127,7 @@ class GoodsDetails extends PureComponent {
             }
         }).finally((res) => {
             const { goodsDetail } = this.props;
+            this.setState({originPrice:goodsDetail.basePrice})
             // 获取商品详情规格
             dispatch({
                 type: "commodityDetails/getGoodsDetailProductAttr",
@@ -175,6 +178,16 @@ class GoodsDetails extends PureComponent {
         this.setState({
             optVal: {}
         });
+        const price = this.state.originPrice
+        const { goodsDetail, dispatch } = this.props;
+        const goodsDetailNew = Object.assign({}, goodsDetail, {
+            baseGoodsOptId: "",
+            baseGoodsOptValue: "",
+            ext04: "",
+            ext05:"",
+            // isOptional: "",
+            baseDiscountPrice: price, basePrice: price, insideAllotPrice: price,insideCostPrice: price,nationalUniformPrice: price})
+        dispatch({type: "commodityDetails/updateGoodsDetail", payload: goodsDetailNew})
     }
 
     // 显示颜色选择窗口
@@ -221,6 +234,45 @@ class GoodsDetails extends PureComponent {
         //     payload: postData
         // });
     }
+
+    async confirmColor(color) {
+        console.log(color)
+        const { goodsDetail, dispatch } = this.props;
+        const params = {
+            organizationId: goodsDetail.saleOrgId,
+            customerId: getCustomer().id,
+            goodsId: goodsDetail.id,
+            orderTypeId: '01',
+            paletteId: color.attrValId,
+            shopId: ''
+        }
+        const result = await getGoodAndPalettePriceConAPI(params)
+        if (result.length) {
+            const optParams = [{
+                goodsOptDtos: [{
+                    goodsId: goodsDetail.id,
+                    goodsOptVals: [color],
+                    optResult: color.custDocGroupName+ ":" + color.attrValName,
+                    uniqueKey: goodsDetail.id
+                }]
+            }]
+            const opt = await saveGoodsOptsResultAPI(optParams);
+            const price = result[0].price
+            const goodsDetailNew = Object.assign({}, goodsDetail, {
+                baseGoodsOptId: opt[0].goodsOptDtos[0].id,
+                baseGoodsOptValue: color.custDocGroupName+ ":" + color.attrValName,
+                ext04: "1",
+                ext05: color.attrValId,
+                // isOptional: "1",
+                baseDiscountPrice: price, 
+                basePrice: price, 
+                insideAllotPrice: price,
+                insideCostPrice: price,
+                nationalUniformPrice: price})
+            dispatch({type: "commodityDetails/updateGoodsDetail", payload: goodsDetailNew})
+        }
+    }
+
     // 关注
     followBtn(e) {
         const { goodsDetail, dispatch } = this.props;
@@ -569,13 +621,15 @@ class GoodsDetails extends PureComponent {
                     onCancel={() => {
                         this.setState({optValShow: false})
                     }}
-                    onOk={() => {
+                    onOk={async () => {
                         if (this.state.optValSelectId) {
                             const colorSelc = goodsDetail ? goodsDetail.goodsAttrVals.find(item => item.attrValId == this.state.optValSelectId) : null
+                            const optVal = Object.assign({},this.state.optVal,colorSelc,{baseGoodsOptValue: `${colorSelc.custDocGroupName}->${colorSelc.attrValName}`})
                             this.setState({
-                                optVal: Object.assign({},this.state.optVal,{baseGoodsOptValue: `${colorSelc.custDocGroupName}->${colorSelc.attrValName}`}),
+                                optVal ,
                                 optValShow: false
                             })
+                            this.confirmColor(optVal)
                         } else {
                             message.warning("请选择颜色")
                         }
@@ -600,7 +654,7 @@ class GoodsDetails extends PureComponent {
                         {
                             goodsDetail ? goodsDetail.goodsAttrVals.filter(item => !this.state.optSearchVal || item.attrValName.indexOf(this.state.optSearchVal) >= 0).map((item,index) => {
                                 // return <Tag  color={this.state.optValSelectId == item.attrValName ? "red" : ""} className={styles.colorItem} onClick={this.selectColor.bind(this)}>{item.attrValName}</Tag>
-                                return <Tag  color={this.state.optValSelectId == item.attrValId ? "red" : ""} className={styles.colorItem} onClick={() => {this.selectColor(item.attrValId)}}>{item.attrValName}</Tag>
+                                return <Tag key={item.attrValId} color={this.state.optValSelectId == item.attrValId ? "red" : ""} className={styles.colorItem} onClick={() => {this.selectColor(item.attrValId)}}>{item.attrValName}</Tag>
                             }) : ""
                         }
                     </div>

src/pages/Buyer/orderEdit/index.js

@@ -17,6 +17,7 @@ import {
   Affix,
   Popconfirm,
   Spin,
+  Tag,
   Modal
 } from "antd";
 import moment from "moment";
@@ -33,6 +34,7 @@ import {
   ifSupplierIsOrg,
   translateItemBomFromItem
 } from "./orderTools";
+import { getGoodAndPalettePriceConAPI,saveGoodsOptsResultAPI, getOptByIdAPI } from "../../../services/api";
 
 const { Header, Content } = Layout;
 // 获取默认币种
@@ -96,7 +98,19 @@ class OrderEidt extends PureComponent {
       ifSubmit: false,
       isSubBut: false,
       actionType: "",
-      isDisabled: false
+      isDisabled: false,
+      optValShow: false,
+      optSearchVal: "",
+      optValSelectId: "",
+      optVal: {
+          baseGoodsOptValue: "",
+          baseGoodsOptId: "",
+          ext05: "",
+          ext04: "",
+          price: ""
+      } ,
+      currRow: -1,
+      goodsAttrVals: []
     };
   }
 
@@ -498,7 +512,8 @@ class OrderEidt extends PureComponent {
         payload: {
           saleOrgId: supplierId, // 销售组织
           customerId: this.customerId, // 客户
-          isPrimaryChannel: ifOneSupplier ? 1 : 0, // 是否一级渠道商
+          // isPrimaryChannel: ifOneSupplier ? 1 : 0, // 是否一级渠道商
+          orderType: "reqOrder",
           reqOrderItems: orderCartData // 商品行信息
         }
       })
@@ -722,6 +737,70 @@ class OrderEidt extends PureComponent {
     }
   }
 
+  async onOptClick(goods, index) {
+    const attrs = await getOptByIdAPI({id: goods.goodsId, groupId: "", colourCode:""});
+    this.setState({
+      currRow: index,
+      optValShow: true,
+      goodsAttrVals: attrs[0].goodsAttrVals
+    })
+  }
+
+  selectColor(optValSelectId) {
+    this.setState({
+        optValSelectId
+    });
+  }
+
+  async confirmColor(color) {
+    const { dispatch, orderCartData, supplierData } = this.props;
+    let goodsDetail = {...orderCartData[this.state.currRow]}
+    let existRow = orderCartData.findIndex((item,index) => item.ext05 == color.attrValId && item.goodsId == color.goodsId && index != this.state.currRow)
+    if (existRow >= 0) {
+      message.info("所选颜色商品已存在，请重新选择!");
+      return
+    }
+    const params = {
+        organizationId: supplierData[0].id,
+        customerId: getCustomer().id,
+        goodsId: goodsDetail.goodsId,
+        orderTypeId: '01',
+        paletteId: color.attrValId,
+        shopId: ''
+    }
+    const result = await getGoodAndPalettePriceConAPI(params)
+    if (result.length) {
+        const optParams = [{
+            goodsOptDtos: [{
+                goodsId: goodsDetail.goodsId,
+                goodsOptVals: [color],
+                optResult: color.custDocGroupName+ ":" + color.attrValName,
+                uniqueKey: goodsDetail.goodsId
+            }]
+        }]
+        const opt = await saveGoodsOptsResultAPI(optParams);
+        const price = result[0].price
+        const priceAndMny = {
+          promPrice : price,
+          basePrice : price,
+          dealPrice : price,
+          salePrice : price,
+          amount : price * goodsDetail.orderNum,
+          dealAmount : goodsDetail.amount,
+          baseGoodsOptId : opt[0].goodsOptDtos[0].id,
+          baseGoodsOptValue : color.custDocGroupName+ ":" + color.attrValName,
+          ext05 : color.attrValId
+        }
+        let newItem = Object.assign({},goodsDetail,priceAndMny)
+        orderCartData.splice(this.state.currRow,1,newItem)
+        dispatch({      
+          type: "orderEdit/orderCartData",
+          orderCartData: [...orderCartData]
+        })
+
+    }
+  }
+
   // 备注改变
   remarkChange(e) {
     this.setState({
@@ -1240,7 +1319,7 @@ class OrderEidt extends PureComponent {
       const conversionRate = parseFloat(addRow.conversionRate || "1");
       newOrderCartData.forEach(item => {
         // 重复，则累加订货数量、主数量
-        if (item.goodsId == addRow.id) {
+        if (item.goodsId == addRow.id && item.ext05 == addRow.ext05) {
           item.orderNum += 1;
           item.mainNum += conversionRate;
           repeat = true;
@@ -1661,6 +1740,7 @@ class OrderEidt extends PureComponent {
               onChange={this.goodsInfoChange.bind(this)}
               offsetAmount={this.state.offsetAmount}
               promotionChange={this.promotionChangeHandle.bind(this)}
+              optClick={this.onOptClick.bind(this)}
               ifOptional={ifOptional}
               ifPromotion={value => {
                 this.ifPromotion = value;
@@ -1861,6 +1941,51 @@ class OrderEidt extends PureComponent {
           orderPayBillSet={this.props.orderPayBillSet}
           backToWho="orderList"
         />
+
+        <Modal title="颜色选择" visible={this.state.optValShow}
+          onCancel={() => {
+              this.setState({optValShow: false})
+          }}
+          onOk={async () => {
+              if (this.state.optValSelectId) {
+                  const colorSelc = this.state.goodsAttrVals ? this.state.goodsAttrVals.find(item => item.attrValId == this.state.optValSelectId) : null
+                  const optVal = Object.assign({},this.state.optVal,colorSelc,{baseGoodsOptValue: `${colorSelc.custDocGroupName}->${colorSelc.attrValName}`})
+                  this.setState({
+                      optVal ,
+                      optValShow: false,
+                      goodsAttrVals: []
+                  })
+                  this.confirmColor(optVal)
+              } else {
+                  message.warning("请选择颜色")
+              }
+          }}
+          width="1000px" maskClosable={false}
+      >
+          <div>
+              <Input.Search placeholder="请输入颜色编码" 
+                  // defaultValue={this.state.optSearchVal}
+                  onBlur={(e) => {
+                      this.setState({optSearchVal: e.target.value})
+                  }}
+                  onSearch={(e) => {
+                      this.setState({optSearchVal: e})
+                  }}
+                  onPressEnter={(e) => {
+                      this.setState({optSearchVal: e.target.value})
+                  }}
+              />
+          </div>
+          <div style={{height: "500px",width: "950px",overflow: "auto", marginTop: "10px"}}>
+              {
+                  this.state.goodsAttrVals ? this.state.goodsAttrVals.filter(item => !this.state.optSearchVal || item.attrValName.indexOf(this.state.optSearchVal) >= 0).map((item,index) => {
+                      // return <Tag  color={this.state.optValSelectId == item.attrValName ? "red" : ""} className={styles.colorItem} onClick={this.selectColor.bind(this)}>{item.attrValName}</Tag>
+                      return <Tag key={item.attrValId} color={this.state.optValSelectId == item.attrValId ? "red" : ""} className={styles.colorItem} onClick={() => {this.selectColor(item.attrValId)}}>{item.attrValName}</Tag>
+                  }) : ""
+              }
+          </div>
+      </Modal>
+
       </div>
     );
   }

src/pages/Buyer/orderEdit/index.less

@@ -390,4 +390,7 @@
 }
 .returnmodal {
   & .ant-modal-footer{text-align: center;}
-}
+}
+.colorItem {
+	margin: 0px 30px 15px 0px;
+  }

src/services/api.js

@@ -422,6 +422,15 @@ export async function getGoodsDetailProductAttrsAPI(params) {
   });
 }
 
+// 获取商品详情规则
+export async function getOptByIdAPI(params) {
+  return request("/occ-base/base/goods/get-opt-byIdAndGroupId", {
+    method: "GET",
+    body: params,
+    description: "获取商品详情规则"
+  });
+}
+
 // 获取商品详情-图片
 export async function getGoodsDetailImageAPI(params) {
   return request("/occ-b2b-order/b2b/goods/find-goodspicture-by-goodsid", {
@@ -449,6 +458,15 @@ export async function getGoodsSpecsAPI(params) {
   });
 }
 
+// 添获取选配商品价格
+export async function getGoodAndPalettePriceConAPI(params) {
+  return request("/occ-price/price/price-inquires/inquireGoodAndPalettePriceCon", {
+    method: "GET",
+    body: params,
+    description: "添获取选配商品价格"
+  });
+}
+
 // 添获取商品库存
 export async function getGoodsStockAPI(params) {
   return request("/buyer/goods/goods-stock", {