fix: 批量修改表格

src/pages/ServiceGoods/components/CommonTemplate.tsx

 import React from 'react';
-import { Select, Form, InputNumber, Input, Button } from 'antd';
+import { Select, Form, InputNumber, Input, Button, Popover } from 'antd';
 import commonStyle from '../common.less';
 
 export const WrapperContainer = props => (
@@ -37,7 +37,11 @@ export const SelectTemplate = props => {
   }
   const selectTemp = (
     <Select allowClear {...resetProps}>
-      {defaultOptionName ? <Select.Option value={0}>{defaultOptionName}</Select.Option> : null}
+      {defaultOptionName ? (
+        <Select.Option key="default" value={0}>
+          {defaultOptionName}
+        </Select.Option>
+      ) : null}
       {dataList.map((item, index) => {
         const val = fieldNames ? item[fieldNames.value] : item;
         const lab = fieldNames ? item[fieldNames.label] : item;
@@ -64,6 +68,15 @@ export const CreateFormInput = props => {
   if (type === 'input') {
     return <Input placeholder={title} {...options} />;
   }
+
+  if (type === 'btnText') {
+    return (
+      <Popover content={record.name} trigger="hover">
+        <Button type="text">查看名称</Button>
+      </Popover>
+    );
+  }
+
   if (type === 'option') {
     return (
       <>

src/pages/ServiceGoods/components/EditFormTable.jsx

-import { InputNumber, Button, Form, Table } from 'antd';
+import { InputNumber, Input, Modal, Button, Form, Table } from 'antd';
 import React, {
   useContext,
   createContext,
@@ -10,8 +10,40 @@ import React, {
 import { ServiceContext } from '../context';
 import { CreateFormInput } from './CommonTemplate';
 
-const EditableContext = createContext(null);
+const UpdateSkuName = ({ skuVisble, value, confirmEvent, cancelEvent }) => {
+  const [skuForm] = Form.useForm();
 
+  const handleCancel = () => {
+    skuForm.resetFields();
+    cancelEvent();
+  };
+  const handleSaveEvent = async () => {
+    try {
+      const result = await skuForm.validateFields();
+      confirmEvent({ skuName: result.skuName, rowIndex: value.rowIndex });
+      handleCancel();
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  return (
+    <Modal title="修改SKU名称" visible={skuVisble} onOk={handleSaveEvent} onCancel={handleCancel}>
+      <Form form={skuForm} name="skuRegister">
+        <Form.Item
+          label="sku名称"
+          key="skuName"
+          name="skuName"
+          initialValue={value.skuName}
+          rules={[{ required: true, message: '请输入sku名称！' }]}
+        >
+          <Input.TextArea autoSize={{ minRows: 2, maxRows: 6 }} allowClear />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+const EditableContext = createContext(null);
 const EditableRow = ({ index, ...props }) => <tr {...props} />;
 const EditableCell = props => {
   const {
@@ -23,11 +55,15 @@ const EditableCell = props => {
     record,
     roleProps,
     handleSave,
+    roleHidden,
+    rowOnClickEvent,
+    roleRules = {},
     ...restProps
   } = props;
 
   // console.log('==============>', props);
   const form = useContext(EditableContext);
+  const customer = useContext(ServiceContext);
   const save = async () => {
     try {
       const tableList = form.getFieldValue('tableList');
@@ -36,13 +72,27 @@ const EditableCell = props => {
       console.log('Save failed:', errInfo);
     }
   };
-  const onClickEvent = () => {};
+  const onClickEvent = (type, row) => {
+    // 点击拉取京东图片功能
+    if (type === 'cloneImg') {
+      customer.onEventBus(type, row);
+      return;
+    }
+
+    // 修改sku名称
+    if (type === 'updateName') {
+      rowOnClickEvent(row);
+    }
+
+    // console.log(type, row);
+  };
 
   const childNode = (
     <Form.Item
       style={{ margin: 0 }}
+      hidden={roleHidden}
       name={['tableList', rowIndex, dataIndex]}
-      rules={[{ required: true, message: `${title} is required.` }]}
+      rules={[{ required: roleRules.required, message: `${title} is required.` }]}
     >
       {editable ? (
         <CreateFormInput
@@ -68,6 +118,11 @@ const EditFormTable = forwardRef((props, ref) => {
   const { initData, defaultColumns, setTableData, mergeTable } = props;
   const customer = useContext(ServiceContext);
   const [dataSource, setDataSource] = useState([]);
+  const [skuVisble, setSkuVisble] = useState(false);
+  const [skuNameItem, setSkuNameItem] = useState({
+    skuName: '',
+    rowIndex: null,
+  });
   const [form] = Form.useForm();
   useEffect(() => {
     console.log('==============>坚听initData', initData);
@@ -99,6 +154,27 @@ const EditFormTable = forwardRef((props, ref) => {
     }
   };
 
+  const rowOnClickEvent = row => {
+    setSkuVisble(true);
+    setSkuNameItem({
+      skuName: row.name,
+      rowIndex: row.rowIndex,
+    });
+  };
+
+  const cancelEvent = () => {
+    setSkuVisble(false);
+  };
+
+  const confirmEvent = skuItem => {
+    const newDataSource = [...dataSource];
+    newDataSource[skuItem.rowIndex].name = skuItem.skuName;
+    setDataSource(newDataSource);
+    form.setFieldsValue({
+      tableList: newDataSource,
+    });
+  };
+
   useImperativeHandle(ref, () => ({
     onCheck,
     form,
@@ -119,6 +195,7 @@ const EditFormTable = forwardRef((props, ref) => {
           rowSpan,
           record,
           rowIndex,
+          roleRules: col.roleRules || {},
           editable: col.editable,
           dataIndex: col.dataIndex,
           disabled: col.disabled,
@@ -126,6 +203,7 @@ const EditFormTable = forwardRef((props, ref) => {
           roleProps: col.roleProps || {},
           title: col.title,
           handleSave,
+          rowOnClickEvent,
         };
       },
     }));
@@ -153,6 +231,14 @@ const EditFormTable = forwardRef((props, ref) => {
           Add a row
         </Button>
       </Form>
+      <Button onClick={() => {}}></Button>
+      <UpdateSkuName
+        skuVisble={skuVisble}
+        form={form}
+        value={skuNameItem}
+        confirmEvent={confirmEvent}
+        cancelEvent={cancelEvent}
+      />
     </div>
   );
 });

src/pages/ServiceGoods/components/FormPriceOrStock.jsx

@@ -10,7 +10,7 @@ import React, {
 } from 'react';
 import { formItemLayout, StaticColumns } from '../config';
 import EditFormTable from './EditFormTable';
-import { createProductData, cleanArray } from '../utils';
+import { createProductData, cleanArray, batchTableSourceData } from '../utils';
 import { ServiceContext } from '../context';
 import { SelectTemplate } from './CommonTemplate';
 
@@ -53,14 +53,12 @@ const SpecificationTemplate = (props, _) => {
   };
 
   const inputOnblurEvent = event => {
-    console.log(event.target.value);
     if (event.target.value) {
       onChange();
     }
   };
 
   const bundlePlusAddSpecEvent = addCallback => {
-    console.log(formName);
     const specId = form.getFieldValue(formName);
     if (!specId) {
       Modal.warning({
@@ -75,7 +73,10 @@ const SpecificationTemplate = (props, _) => {
 
   const bundlePlusRemoveSpecEvent = (removeCallback, fieldName) => {
     removeCallback(fieldName);
-    onChange();
+    const timer = setTimeout(() => {
+      onChange();
+      clearTimeout(timer);
+    }, 500);
   };
 
   return (
@@ -114,7 +115,12 @@ const SpecificationTemplate = (props, _) => {
                           message: '规格名不能重复！',
                           validator(rule, value, callback) {
                             const checkList = form.getFieldValue(specName);
-                            const check = validatorSpecValue(value, checkList, index, specName);
+                            const check = validatorSpecValue(
+                              value,
+                              cleanArray(checkList),
+                              index,
+                              specName,
+                            );
                             return check ? callback('规格名不能重复！') : callback();
                           },
                         },
@@ -160,28 +166,6 @@ const originItems = {
   secondDuplicate: [],
 };
 
-// 编辑回显示时只获取用到的数据
-const filterItem = skuItem => {
-  const { serviceItem, ...argsItem } = skuItem;
-  argsItem.disabled = true;
-  return argsItem;
-};
-
-const filterSpecData = skuList =>
-  skuList.reduce((orgin, skuItem) => {
-    const item = filterItem(skuItem);
-    const { firstSpecValue, secondSpecValue } = item;
-    if (firstSpecValue && !orgin.firstDuplicate.includes(firstSpecValue)) {
-      orgin.firstSpecValue.push(item);
-      orgin.firstDuplicate.push(firstSpecValue);
-    }
-    if (secondSpecValue && !orgin.secondDuplicate.includes(secondSpecValue)) {
-      orgin.secondSpecValue.push(item);
-      orgin.secondDuplicate.push(secondSpecValue);
-    }
-    return orgin;
-  }, originItems);
-
 const CreateBatchFormItems = ({ specInitValue, batchChange, editRef, defaultColumns }) => {
   const customer = useContext(ServiceContext);
   const formItems = defaultColumns
@@ -289,33 +273,51 @@ const FormPriceOrStock = forwardRef((props, ref) => {
     }
   };
 
-  const firstOnChangeEvent = () => {
-    const firstSpecValue = form.getFieldValue('firstSpecValue');
-    const firstSpecValueList = cleanArray(firstSpecValue).map(item => item.firstSpecValue);
-    onSpecChange(firstSpecValueList);
-  };
-
   const batchChange = () => {
     const batchItem = form.getFieldValue('batchItem');
-    const batchItemKey = Object.keys(batchItem);
-    const resetObject = tableData.map((item, index) => {
-      console.log(item);
-      batchItemKey.forEach(key => {
-        item[key] = batchItem[key] || null;
-        // reset[`tableList[${index}]['${key}']`] = batchItem[key] || null;
-      });
-      return item;
-    });
+    const bacthFirst = form.getFieldValue('bacthFirst');
+    const bacthSecon = form.getFieldValue('bacthSecon');
+    const resetObject = batchTableSourceData({ batchItem, tableData, bacthSecon, bacthFirst });
     setTableData(resetObject);
-    console.log(resetObject);
-    // editRef.current.form.setFieldsValue(resetObject);
-    // form.setFieldsValue(resetObject);
+  };
+
+  const onSpecificationEvent = async () => {
+    try {
+      const values = await form.validateFields();
+      const cleanValues = {
+        firstSpec: values.firstSpec,
+        firstSpecId: values.firstSpecId,
+        firstSpecValue: cleanArray(values.firstSpecValue),
+        secondSpec: values.secondSpec,
+        secondSpecId: values.secondSpecId,
+        secondSpecValue: cleanArray(values.secondSpecValue),
+      };
+      setSpecInitValue(cleanValues);
+      CreateColumnsEvent(cleanValues);
+      return cleanValues;
+    } catch (error) {
+      console.log(error);
+    }
+    return null;
+  };
+
+  const firstOnChangeEvent = async () => {
+    const cleanValues = await onSpecificationEvent();
+    if (cleanValues) {
+      const firstSpecValueList = cleanArray(cleanValues.firstSpecValue).map(
+        item => item.firstSpecValue,
+      );
+      onSpecChange(firstSpecValueList);
+    }
+  };
+
+  const seconOnChangeEvent = async () => {
+    await onSpecificationEvent();
   };
 
   useImperativeHandle(ref, () => ({
     onCheck,
     reset: () => {
-      console.log('============>cleaarn', initSpecReced());
       form.resetFields();
       setDefaultColumns([]);
       setTableData([]);
@@ -339,7 +341,6 @@ const FormPriceOrStock = forwardRef((props, ref) => {
       //   secondSpecId: oneItem.secondSpecId,
       //   secondSpecValue,
       // };
-      console.log('=============>editDataeditDataeditData', editData);
 
       form.setFieldsValue(editData); // 设置规格数据
       setSpecInitValue(editData); // 缓存规格数据
@@ -369,6 +370,7 @@ const FormPriceOrStock = forwardRef((props, ref) => {
       <SpecificationTemplate
         form={form}
         label="二级规格"
+        onChange={seconOnChangeEvent}
         formName="secondSpecId"
         selectName="secondSpec"
         specName="secondSpecValue"

src/pages/ServiceGoods/components/FormRuleVPictures.jsx

@@ -67,6 +67,8 @@ const FormRuleVPictures = forwardRef((props, ref) => {
 
   useImperativeHandle(ref, () => ({
     onCheck,
+    setFieldsValue: form.setFieldsValue,
+    getFieldsValue: form.getFieldsValue,
     reset: () => {
       form.resetFields();
       setImageList({});

src/pages/ServiceGoods/config.js

@@ -75,6 +75,7 @@ export const StaticColumns = customer => [
       precision: 2,
       min: 0,
     },
+    roleRules: { required: true },
     disabled: customer.isJDGoods || customer.isService,
   },
   {
@@ -82,6 +83,7 @@ export const StaticColumns = customer => [
     dataIndex: 'commissionRate',
     editable: true,
     role: [3],
+    roleRules: { required: true },
   },
   {
     title: '市场价',
@@ -92,6 +94,7 @@ export const StaticColumns = customer => [
       precision: 2,
       min: 0,
     },
+    roleRules: { required: true },
     disabled: customer.isService,
   },
   {
@@ -103,6 +106,7 @@ export const StaticColumns = customer => [
       precision: 3,
       max: 999999.999,
     },
+    roleRules: { required: true },
     disabled: customer.isService,
   },
   {
@@ -110,13 +114,14 @@ export const StaticColumns = customer => [
     dataIndex: 'salePrice',
     editable: true,
     role: [],
+    roleRules: { required: true },
   },
   {
     title: '库存',
     dataIndex: 'stock',
     editable: true,
     role: [3],
-
+    roleRules: { required: true },
     // disabled: customer.isService,
   },
   {
@@ -135,6 +140,7 @@ export const StaticColumns = customer => [
       precision: 2,
       min: 0,
     },
+    roleRules: { required: true },
     disabled: customer.isService,
   },
   {
@@ -143,6 +149,7 @@ export const StaticColumns = customer => [
     editable: true,
     batchRole: [1],
     role: [1],
+    roleRules: { required: true },
     disabled: customer.isService,
   },
   {
@@ -152,6 +159,7 @@ export const StaticColumns = customer => [
     role: [1, 2],
     inputType: 'input',
     disabled: customer.isService,
+    roleRules: { required: true },
   },
   {
     title: '京东链接',
@@ -160,6 +168,15 @@ export const StaticColumns = customer => [
     role: [1, 2],
     inputType: 'input',
     disabled: customer.isService,
+    roleRules: { required: false },
+  },
+  {
+    title: 'sku名称',
+    dataIndex: 'name',
+    editable: true,
+    role: customer.isEdit && customer.isJDGoods ? [1, 2] : [],
+    inputType: 'btnText',
+    roleRules: { required: false },
   },
   {
     title: '操作',
@@ -171,6 +188,7 @@ export const StaticColumns = customer => [
       isJDGoods: customer.isJDGoods,
       min: 0,
     },
+    roleRules: { required: false },
     disabled: customer.isService,
   },
 ];

src/pages/ServiceGoods/index.jsx

 import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { Spin, Button, Modal } from 'antd';
+import { Spin, Button, Modal, notification } from 'antd';
+import { ConsoleSqlOutlined } from '@ant-design/icons';
 import { Title, WrapperContainer } from './components/CommonTemplate';
 import { TaskTypeSelect } from './components/TaskTypeSelect';
 import FormInformationBasic from './components/FormInformationBasic';
@@ -13,9 +14,10 @@ import {
   merchantBrandList,
   merchantSpecList,
   afterSalesAddrsPage,
+  merchantgetJdPicList,
 } from './service';
+import { isUrl } from './utils';
 import { ServiceContext } from './context';
-import { ConsoleSqlOutlined } from '@ant-design/icons';
 
 /**
  * 服务商品改造-商品模块
@@ -119,6 +121,24 @@ const ServiceGoods = options => {
     }
   };
 
+  const getMerchantgetJdPicList = async params => {
+    const result = await merchantgetJdPicList(params);
+    if (result) {
+      const { detailImageList, imageList } = picturesRef.current.getFieldsValue();
+      const detailList = result.detailList || [];
+      const newImageList = imageList[result.firstSpecValue];
+      const carouseList = result.carouseList || [];
+      imageList[result.firstSpecValue] = newImageList
+        ? [...newImageList, ...carouseList]
+        : carouseList;
+      picturesRef.current.setFieldsValue({
+        // [`imageList[${data.firstSpecValue}]`]: this.state.colorImg[data.firstSpecValue],
+        imageList,
+        detailImageList: [...detailImageList, ...detailList],
+      });
+    }
+  };
+
   useEffect(() => {
     (async () => {
       if (!options.visible) {
@@ -170,6 +190,28 @@ const ServiceGoods = options => {
     [specKeyList],
   );
 
+  const onEventBus = (event, params) => {
+    if (event === 'cloneImg') {
+      if (!isUrl(params.skuLink)) {
+        notification.open({
+          message: '提示',
+          description: '请输入正确的URL！',
+        });
+        return;
+      }
+      getMerchantgetJdPicList({
+        firstSpecId: params.firstSpecId,
+        firstSpecValue: params.firstSpecValue,
+        secondSpecId: params.secondSpecId,
+        secondSpecValue: params.secondSpecValue,
+        skuLink: params.skuLink,
+        jdSkuInfoUrl: params.skuLink,
+      });
+    }
+
+    console.log(event, params);
+  };
+
   const providerValue = {
     pageId,
     isEdit,
@@ -177,6 +219,7 @@ const ServiceGoods = options => {
     isCard: productType === 3,
     isService: SourceData.state && SourceData.state !== 4,
     isJDGoods: isEdit && SourceData.pageProductType && +SourceData.pageProductType !== 1,
+    onEventBus,
   };
 
   return (

src/pages/ServiceGoods/service.js

@@ -57,3 +57,12 @@ export const afterSalesAddrsPage = () => {
   });
   return data;
 };
+
+export const merchantgetJdPicList = async params => {
+  const { data } = await request.post('/product/api/merchant/item/getJdPicList', {
+    data: stringify(params),
+    prefix: goodsApi,
+    headers,
+  });
+  return data;
+};

src/pages/ServiceGoods/utils.js

@@ -23,6 +23,7 @@ const createInitProduct = (skuItem, isCreate) => {
     stock: null,
     thirdSkuNo: null,
     skuLink: null,
+    name: null,
   };
 };
 
@@ -34,6 +35,7 @@ const initData = {
   stock: null,
   thirdSkuNo: null,
   skuLink: null,
+  name: null,
 };
 
 const createSecondProduct = (secondSpecList, initItem, secondSpec, dataSource, callback) => {
@@ -85,3 +87,42 @@ export const createProductData = ({ firstValues, secondValues, firstSpecId, seco
   console.log('dataSource===========>', dataSource);
   return dataSource;
 };
+
+export const isUrl = path => {
+  // eslint-disable-next-line no-useless-escape
+  const reg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
+  return reg.test(path);
+};
+
+export const batchTableSourceData = ({ batchItem, tableData, bacthSecon, bacthFirst }) => {
+  const batchItemKey = Object.keys(batchItem);
+  return tableData.map((item, index) => {
+    if (!bacthFirst && !bacthSecon) {
+      batchItemKey.forEach(key => {
+        item[key] = batchItem[key] || null;
+      });
+    }
+    if (bacthFirst && !bacthSecon) {
+      batchItemKey.forEach(key => {
+        if (item.firstSpecValue === bacthFirst) {
+          item[key] = batchItem[key] || null;
+        }
+      });
+    }
+    if (!bacthFirst && bacthSecon) {
+      batchItemKey.forEach(key => {
+        if (item.secondSpecValue === bacthSecon) {
+          item[key] = batchItem[key] || null;
+        }
+      });
+    }
+    if (bacthFirst && bacthSecon) {
+      batchItemKey.forEach(key => {
+        if (item.firstSpecValue === bacthFirst && item.secondSpecValue === bacthSecon) {
+          item[key] = batchItem[key] || null;
+        }
+      });
+    }
+    return item;
+  });
+};