feat: 添加竞价修改功能

src/pages/GoodsManage/SupplyPriceUpdate/components/UpdatePriceStock.jsx

-import React, { useState, createContext } from 'react';
+import React, { useState, createContext, useEffect } from 'react';
 import { Modal, Table, Form } from 'antd';
 import { column } from '../staticdata';
 import styles from '../style.less';
+import { apiProductBiddingUpdate } from '../../service';
 
 /**
  * 更新供货价
  * * */
 const UpdatePriceStock = options => {
+  const { visible, skuData, productId } = options;
   const [loading, setLoading] = useState(false);
+  const [specArr, setSpecArr] = useState([]); // 规格列
   const [form] = Form.useForm();
 
   const onSubmit = async () => {
     const value = await form.validateFields();
-    console.log('value :>> ', value);
+    if (!value?.data?.length) return;
+    const params = {
+      productId,
+      skus: value.data,
+    };
     setLoading(true);
+    await apiProductBiddingUpdate(params);
     setLoading(false);
     options.refresh();
     options.onCancel();
@@ -21,14 +29,47 @@ const UpdatePriceStock = options => {
 
   const EditableContext = createContext(null);
 
+  useEffect(() => {
+    if (options.visible) {
+      let firstSpecTitle = '';
+      let secondSpecTitle = '';
+      const arr = [];
+      skuData.forEach(item => {
+        if (item.firstSpec && item.firstSpecValue) {
+          firstSpecTitle = item.firstSpec;
+        }
+        if (item.secondSpec && item.secondSpecValue) {
+          secondSpecTitle = item.secondSpec;
+        }
+      });
+      if (firstSpecTitle) {
+        arr.push({
+          title: firstSpecTitle,
+          width: 135,
+          align: 'center',
+          dataIndex: 'firstSpecValue',
+        });
+      }
+      if (secondSpecTitle) {
+        arr.push({
+          title: secondSpecTitle,
+          width: 135,
+          align: 'center',
+          dataIndex: 'secondSpecValue',
+        });
+      }
+      setSpecArr(arr);
+    }
+  }, [visible]);
+
   return (
     <Modal
       title="修改供货价"
-      open={options.visible}
+      open={visible}
       onCancel={options.onCancel}
       onOk={onSubmit}
       confirmLoading={loading}
-      width={900}
+      width={1000}
       className={styles.priceStockTable}
       destroyOnClose
     >
@@ -36,9 +77,10 @@ const UpdatePriceStock = options => {
         <EditableContext.Provider value={form}>
           <Table
             className={styles.priceStockTable}
-            rowKey="key"
-            columns={column.call(this)}
-            dataSource={options.data}
+            rowKey="id"
+            columns={column.call(this, specArr)}
+            dataSource={skuData}
+            pagination={false}
           />
         </EditableContext.Provider>
       </Form>

src/pages/GoodsManage/SupplyPriceUpdate/index.jsx

@@ -16,6 +16,7 @@ import {
   queryAllAfterAddress,
   apiEnableUpdataStock,
   apiQueryLastChangeLog,
+  apiProductBiddingInfo,
 } from '../service';
 import LogModal from '../LogModal';
 import { column, JDSHOPID } from '../staticdata';
@@ -30,11 +31,11 @@ import { GOOD_MANAGE } from '@/../config/permission.config';
 import LocalStroage from '@/utils/localStorage';
 import configApi from '@/../config/env.config';
 
-@connect(({ goodsManage, menu }) => ({
-  goodsManage,
+@connect(({ SupplyPrice, menu }) => ({
+  SupplyPrice,
   permissions: menu.permissions,
 }))
-class goodsManage extends Component {
+class supplyPriceUpdate extends Component {
   state = {
     pageNo: 1,
     loading: false,
@@ -65,7 +66,8 @@ class goodsManage extends Component {
     searchValue: {}, // 搜索条件
     refresh: '', // 外卖刷新
     visibleUpdatePrice: false, // 修改价格弹窗
-    skuPriceStockList: [{ key: 1 }, { key: 2 }], // 修改价格弹窗数据
+    skuPriceStockList: [], // 修改价格弹窗数据
+    spuId: '',
   };
 
   currentLog = null;
@@ -77,7 +79,7 @@ class goodsManage extends Component {
   canEditable = false;
 
   componentDidMount() {
-    this.props.goodsManage.tableData = {};
+    this.props.SupplyPrice.tableData = {};
     this.categoryList(this.state.productType);
     this.categoryListByType(this.state.productType);
     this.getVirtualCategory();
@@ -100,7 +102,7 @@ class goodsManage extends Component {
           const { dispatch } = this.props;
           const { pageSize, pageNo } = this.state;
           dispatch({
-            type: 'goodsManage/getList',
+            type: 'SupplyPrice/getList',
             payload: {
               pageNo,
               pageSize,
@@ -336,10 +338,21 @@ class goodsManage extends Component {
     });
   };
 
+  // 显示更新供货价弹窗
   serviceVisbleChange = async row => {
-    this.setState({
-      visibleUpdatePrice: true,
-    });
+    try {
+      const { data } = await apiProductBiddingInfo({
+        productId: row.spuId,
+      });
+      if (!data) return;
+      this.setState({
+        spuId: row.spuId,
+        skuPriceStockList: data,
+        visibleUpdatePrice: true,
+      });
+    } catch (e) {
+      console.log(e);
+    }
   };
 
   // 显示新增商品弹窗
@@ -370,7 +383,7 @@ class goodsManage extends Component {
 
   render() {
     const {
-      goodsManage: { tableData = {} },
+      SupplyPrice: { tableData = {} },
       permissions,
     } = this.props;
     const rowSelection = {
@@ -514,7 +527,8 @@ class goodsManage extends Component {
             onCancel={() => {
               this.setState({ visibleUpdatePrice: false });
             }}
-            data={this.state.skuPriceStockList}
+            skuData={this.state.skuPriceStockList}
+            productId={this.state.spuId}
             refresh={this.handleSearch}
           />
         )}
@@ -523,4 +537,4 @@ class goodsManage extends Component {
   }
 }
 
-export default Form.create()(goodsManage);
+export default Form.create()(supplyPriceUpdate);

src/pages/GoodsManage/SupplyPriceUpdate/model.js

+import * as api from '../service';
+
+const Model = {
+  namespace: 'SupplyPrice',
+  state: {
+    tableData: {},
+    shopList: [],
+    statusList: [],
+    cid1List: [],
+    cid2List: [],
+    cid3List: [],
+    treeData: [],
+  },
+  effects: {
+    *getList({ payload }, { call, put }) {
+      const params = payload;
+      const productCategoryId = payload?.productCategoryId || [];
+      params.productCategoryId =
+        (productCategoryId.length && productCategoryId[productCategoryId.length - 1]) || '';
+      const res = yield call(api.apiBiddingList, params);
+      if (res && !res.data) return;
+      yield put({
+        type: 'saveData',
+        payload: {
+          tableData: res.data,
+        },
+      });
+    },
+    *categoryList({ payload }, { call, put }) {
+      const [data] = yield call(api.categoryList, payload.value);
+      if (!data) return;
+      yield put({
+        type: 'saveCategory',
+        payload: {
+          [payload.categoryNum]: data,
+        },
+      });
+    },
+  },
+  reducers: {
+    saveData(state, action) {
+      const data = action.payload;
+      return { ...state, ...data };
+    },
+    dataList(state, action) {
+      const data = action.payload;
+      return { ...state, ...data };
+    },
+    saveCategory(state, action) {
+      const data = action.payload;
+      return { ...state, ...data };
+    },
+  },
+};
+export default Model;

src/pages/GoodsManage/SupplyPriceUpdate/staticdata.js

 import React from 'react';
-import { Input, Form } from 'antd';
-import styles from '../style.less';
-import { isNumberSection, isCheckPriceTwoDecimal } from '@/utils/validator';
+import { Input, Form, InputNumber } from 'antd';
+import { isIntegerNotMust, isCheckPriceTwoDecimal } from '@/utils/validator';
+import styles from './style.less';
 
-export function column() {
+export function column(specArr = []) {
   return [
+    ...specArr,
     {
       title: '供货价',
       dataIndex: 'supplyPrice',
       width: 150,
       align: 'center',
       render: (_, row, index) => (
-        <div className={styles.price}>
+        <div>
           <Form.Item
             label=""
             key="supplyPrice"
@@ -32,6 +33,16 @@ export function column() {
       width: 135,
       align: 'center',
       dataIndex: 'marketPrice',
+      render: (_, row, index) => (
+        <div>
+          <span>{row.marketPrice}</span>
+          <div className={styles.hidden}>
+            <Form.Item label="" key="id" name={['data', index, 'skuId']} initialValue={row.id}>
+              <input />
+            </Form.Item>
+          </div>
+        </div>
+      ),
     },
     {
       title: '重量(kg)',
@@ -51,12 +62,9 @@ export function column() {
             key="productStock"
             name={['data', index, 'productStock']}
             initialValue={row.productStock}
-            rules={[
-              { required: true, message: '请输入库存！' },
-              { validator: isNumberSection, min: 1, max: 500, message: '请输入1-500的整数' },
-            ]}
+            rules={[{ required: true, message: '请输入库存！' }, { validator: isIntegerNotMust }]}
           >
-            <Input allowClear />
+            <InputNumber min={1} max={500} />
           </Form.Item>
         </div>
       ),
@@ -66,22 +74,6 @@ export function column() {
       width: 120,
       dataIndex: 'productStockWarning',
       align: 'center',
-      render: (_, row, index) => (
-        <div>
-          <Form.Item
-            label=""
-            key="productStockWarning"
-            name={['data', index, 'productStockWarning']}
-            rules={[
-              { required: true, message: '请输入库存！' },
-              { validator: isNumberSection, min: 1, max: 500, message: '请输入1-500的整数' },
-            ]}
-            initialValue={row.productStockWarning}
-          >
-            <Input allowClear />
-          </Form.Item>
-        </div>
-      ),
     },
     {
       title: '商品自编码',

src/pages/GoodsManage/SupplyPriceUpdate/style.less

 .priceStockTable {
   :global(.ant-table-cell) {
     padding: 5px 0 0 0 !important;
+    line-height: 32px !important;
+    vertical-align: top !important;
   }
 }
+.hidden {
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}

src/pages/GoodsManage/service.js

@@ -387,3 +387,39 @@ export async function apiProductStock(data) {
     params: data,
   });
 }
+
+/**
+ * 获取竞价详情
+ * yApi: http://yapi.quantgroups.com/project/389/interface/api/67169
+ * * */
+export async function apiProductBiddingInfo(params) {
+  return request.get('/api/merchants/products/bidding/detail', {
+    prefix: goodsApi,
+    params,
+  });
+}
+
+/**
+ * 供应商更新商品供货价库存
+ * yApi: http://yapi.quantgroups.com/project/389/interface/api/67139
+ * * */
+export async function apiProductBiddingUpdate(params) {
+  return request.post('/api/merchants/products/bidding/edit', {
+    prefix: goodsApi,
+    data: stringify(params),
+    headers,
+  });
+}
+
+/**
+ * 可竞价sku列表
+ * yApi: http://yapi.quantgroups.com/project/389/interface/api/67164
+ * * */
+export async function apiBiddingList(params) {
+  const [data] = await request.post('/api/merchants/products/bidding/page', {
+    prefix: goodsApi,
+    data: stringify(params),
+    headers,
+  });
+  return data;
+}

src/utils/validator.js

@@ -193,21 +193,17 @@ export const isNumberSection = (rule, value, callback) => {
 //  验证是否整数,非必填
 export function isIntegerNotMust(rule, value, callback) {
   if (!value) {
-    callback();
+    return Promise.resolve();
   }
-  setTimeout(() => {
-    if (!Number(value)) {
-      callback(new Error('请输入正整数'));
-    } else {
-      const re = /^[0-9]*[1-9][0-9]*$/;
-      const rsCheck = re.test(value);
-      if (!rsCheck) {
-        callback(new Error('请输入正整数'));
-      } else {
-        callback();
-      }
-    }
-  }, 1000);
+  if (!Number(value)) {
+    return Promise.reject(new Error('请输入正整数'));
+  }
+  const re = /^[0-9]*[1-9][0-9]*$/;
+  const rsCheck = re.test(value);
+  if (!rsCheck) {
+    return Promise.reject(new Error('请输入正整数'));
+  }
+  return Promise.resolve();
 }
 
 //  验证是否是[0-1]的小数