feat: 修改规格

.eslintignore

@@ -2,5 +2,4 @@
 /scripts
 /config
 .history
-/src/utils/qiniu.min.js
-/src/pages/GoodsManage-new
\ No newline at end of file
+/src/utils/qiniu.min.js
\ No newline at end of file

config/config.js

@@ -156,6 +156,11 @@ export default {
               icon: 'smile',
               component: './GoodsManage',
             },
+            {
+              path: '/GoodsManage-new',
+              name: 'GoodsManageNew',
+              component: './GoodsManage-new',
+            },
             {
               component: './404',
             },

src/pages/GoodsManage-new/Goodscolumns.js

@@ -15,7 +15,13 @@ export const toolBarList = () => [
   </Button>,
 ];
 
-export const Goodscolumns = ({ categoryData, supplyPrice, setSupplyPrice, supplyPriceRef }) => [
+export const Goodscolumns = ({
+  categoryData,
+  supplyPrice,
+  setSupplyPrice,
+  supplyPriceRef,
+  onModifyForm,
+}) => [
   {
     title: 'SKU编码',
     dataIndex: 'skuId',
@@ -134,9 +140,9 @@ export const Goodscolumns = ({ categoryData, supplyPrice, setSupplyPrice, supply
     valueType: 'option',
     fixed: 'right',
     modalHide: true,
-    render: () => (
+    render: (value, row) => (
       <>
-        <Button key="update" type="link" onClick={() => {}}>
+        <Button key="update" type="link" onClick={() => onModifyForm(row)}>
           修改
         </Button>
         <Button key="preview" type="link" onClick={() => {}}>

src/pages/GoodsManage-new/OperationModal/SelectSpecifications.jsx

+import React, { useState } from 'react';
+import { Form, notification, Col, Input, Icon, Row, Button, Select } from 'antd';
+import { filterSpecId } from './utils';
+
+export const SelectSpecifications = ({ form, keys, formKey, labelName, specList, arrkey }) => {
+  const { getFieldValue, getFieldDecorator, setFieldsValue } = form;
+  const [countNumber, setCountNumber] = useState(0); // 添加计数器
+
+  getFieldDecorator(keys, { initialValue: [] });
+  const remove = k => {
+    const valueKey = getFieldValue(keys);
+    setFieldsValue({
+      [keys]: valueKey.filter(i => i !== k),
+    });
+  };
+
+  const add = () => {
+    const specValue = getFieldValue(formKey);
+    if (!specValue) {
+      notification.warning({ message: `请先选择${labelName}数据` });
+      return;
+    }
+    const valueKey = getFieldValue(keys);
+    const nextKeys = [...valueKey, countNumber];
+    setCountNumber(countNumber + 1);
+    setFieldsValue({
+      [keys]: nextKeys,
+    });
+  };
+
+  const formItemList = getFieldValue(keys);
+  const formItems = formItemList.map((k, index) => (
+    <Col style={{ marginRight: 20 }} key={k}>
+      <Form.Item style={{ width: 200 }} required={false} key={k}>
+        {getFieldDecorator(`${arrkey}[${k}]`, {
+          validateTrigger: ['onChange', 'onBlur'],
+          rules: [{ required: true, whitespace: true, message: 'Please input passenger' }],
+        })(<Input placeholder="passenger name" style={{ width: 150, marginRight: 8 }} />)}
+        <Icon className="dynamic-delete-button" type="minus-circle-o" onClick={() => remove(k)} />
+      </Form.Item>
+    </Col>
+  ));
+
+  return (
+    <>
+      <Form.Item label={labelName}>
+        {getFieldDecorator(formKey)(
+          <Select allowClear showSearch onChange={(val, option) => {}} filterOption={filterSpecId}>
+            {specList.map(item => (
+              <Select.Option key={item.specId} value={item.specId}>
+                {item.specName}
+              </Select.Option>
+            ))}
+          </Select>,
+        )}
+      </Form.Item>
+      <Row type="flex">
+        {formItems}
+        <Col>
+          <Button type="dashed" style={{ marginTop: 5 }} onClick={() => add()}>
+            <Icon type="plus" />
+          </Button>
+        </Col>
+      </Row>
+    </>
+  );
+};

src/pages/GoodsManage-new/OperationModal/index.jsx

+import React, { useEffect } from 'react';
+import SuperSelect from 'antd-virtual-select';
+import {
+  Form,
+  Modal,
+  Card,
+  Cascader,
+  Select,
+  Radio,
+  Popover,
+  Input,
+  Icon,
+  Button,
+  Row,
+  Col,
+  notification,
+} from 'antd';
+import { productTypeList } from '../staticdata';
+import { useModalTitle, useSpecList, formItemLayout, filterSpecId } from './utils';
+import { RadioComponent, CascaderComponent } from './libs';
+import { productTypeRules, categoryIdRules, brandIdRules } from './rules';
+import { SelectSpecifications } from './SelectSpecifications';
+
+const { Option } = Select;
+
+const filterOption = (input, op) => op.props.children.includes(input);
+
+const OperationForm = props => {
+  const {
+    isEdit,
+    operationVisible,
+    setOperationVisible,
+    categoryData,
+    // virtualTreeData,
+    shopList,
+    barndList,
+    // virtualBarndList,
+    form,
+  } = props;
+  const {
+    getFieldDecorator,
+    setFieldsValue,
+    getFieldsValue,
+    validateFields,
+    resetFields,
+    getFieldValue,
+  } = form;
+  const [title] = useModalTitle(isEdit);
+
+  const [specList] = useSpecList();
+
+  useEffect(() => {
+    console.log(isEdit);
+    if (isEdit) {
+      setFieldsValue({
+        productType: 2,
+      });
+    } else {
+      setFieldsValue({
+        productType: 1,
+      });
+    }
+  }, [isEdit, operationVisible]);
+
+  const onSubmitGoodsForm = () => {
+    validateFields(async (errors, values) => {
+      if (!errors) {
+        const { first = [], firstKeys = [] } = values;
+        console.log(values);
+        console.log(firstKeys.map(key => first[key]));
+      }
+    });
+  };
+  const onCancelModalForm = () => {
+    setOperationVisible(false);
+    resetFields();
+  };
+
+  const { name } = getFieldsValue();
+
+  return (
+    <Modal
+      title={title}
+      width="1050px"
+      visible={operationVisible}
+      onCancel={onCancelModalForm}
+      onOk={() => onSubmitGoodsForm()}
+    >
+      <Form {...formItemLayout}>
+        <Card>
+          <Form.Item label="商品类型：">
+            {getFieldDecorator('productType', productTypeRules())(
+              RadioComponent({ productTypeList }),
+            )}
+          </Form.Item>
+          <Form.Item label="类目：">
+            {getFieldDecorator('categoryId', categoryIdRules())(
+              CascaderComponent({ categoryData }),
+            )}
+          </Form.Item>
+          <Form.Item label="商品品牌">
+            {getFieldDecorator('brandId', brandIdRules())(
+              <SuperSelect allowClear showSearch filterOption={filterOption}>
+                {barndList.map(item => (
+                  <Option key={item.id} value={item.id}>
+                    {item.name}
+                  </Option>
+                ))}
+              </SuperSelect>,
+            )}
+          </Form.Item>
+          <Form.Item label="商品名称">
+            <Popover content={name} trigger="hover">
+              {getFieldDecorator('name', {
+                rules: [{ required: true, message: '请输入商品名称' }],
+              })(<Input allowClear />)}
+            </Popover>
+          </Form.Item>
+        </Card>
+        <Card>
+          <SelectSpecifications
+            form={form}
+            keys="firstKeys"
+            arrkey="first"
+            formKey="firstSpecId"
+            labelName="一级规格"
+            specList={specList}
+          />
+          <SelectSpecifications
+            form={form}
+            keys="secondKeys"
+            arrkey="tow"
+            formKey="secondSpecId"
+            labelName="二级规格"
+            specList={specList}
+          />
+        </Card>
+      </Form>
+    </Modal>
+  );
+};
+export default Form.create()(OperationForm);

src/pages/GoodsManage-new/OperationModal/libs.jsx

+import React from 'react';
+
+import { Radio, Cascader } from 'antd';
+
+export const RadioComponent = ({ productTypeList }) => (
+  <Radio.Group>
+    {productTypeList.map(item => (
+      <Radio key={item.value} value={item.value} disabled={item.disabled}>
+        {item.label}
+      </Radio>
+    ))}
+  </Radio.Group>
+);
+
+export const CascaderComponent = ({ categoryData }) => (
+  <Cascader
+    changeOnSelect
+    showSearch
+    fieldNames={{ label: 'name', value: 'id', children: 'children' }}
+    options={categoryData}
+  />
+);

src/pages/GoodsManage-new/OperationModal/rules.js

+export const productTypeRules = () => ({
+  rules: [{ required: true, message: '请选择商品类型' }],
+});
+
+export const categoryIdRules = () => ({
+  rules: [{ required: true, message: '请选择类目' }],
+});
+
+export const brandIdRules = () => ({
+  rules: [{ required: true, message: '请选择商品品牌' }],
+});

src/pages/GoodsManage-new/OperationModal/utils.js

+import React, { useEffect, useState } from 'react';
+import { getSpecList } from '../service';
+
+export const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 2 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 22 },
+  },
+};
+
+export const useModalTitle = isEdit => {
+  const titleText = isEdit ? '修改商品' : '新增商品';
+  return [titleText];
+};
+
+export const useSpecList = () => {
+  const [specList, setSpecList] = useState([]);
+  useEffect(() => {
+    const featchData = async () => {
+      const { data = [] } = await getSpecList();
+      setSpecList(data);
+    };
+    featchData();
+  }, []);
+  return [specList];
+};
+
+export const filterSpecId = (input, option) =>
+  option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;

src/pages/GoodsManage-new/components/operationModal.jsx

-import React from 'react';
-import SuperSelect from 'antd-virtual-select';
-import { Form, Modal, Card, Cascader, Select, Radio } from 'antd';
-import { productTypeList } from '../staticdata';
-
-const { Option } = Select;
-
-const filterOption = (input, op) => op.props.children.includes(input);
-
-const OperationForm = props => {
-  const {
-    operationVisible,
-    setOperationVisible,
-    categoryData,
-    // virtualTreeData,
-    shopList,
-    barndList,
-    // virtualBarndList,
-    form,
-  } = props;
-  const { getFieldDecorator } = form;
-  return (
-    <Modal
-      width="1050px"
-      visible={operationVisible}
-      onCancel={() => {
-        setOperationVisible(false);
-      }}
-    >
-      <Form layout="inline">
-        <Card bordered={false}>
-          <Form.Item label="商品类型：">
-            {getFieldDecorator('productType', {
-              initialValue: 1,
-              rules: [{ required: true, message: '请选择商品类型' }],
-            })(
-              <Radio.Group>
-                {productTypeList.map(item => (
-                  <Radio key={item.value} value={item.value} disabled={item.disabled}>
-                    {item.label}
-                  </Radio>
-                ))}
-              </Radio.Group>,
-            )}
-          </Form.Item>
-          <Form.Item label="类目：">
-            {getFieldDecorator('categoryId', {
-              rules: [{ required: true, message: '请选择类目' }],
-            })(
-              <Cascader
-                style={{ width: 690 }}
-                changeOnSelect
-                showSearch
-                fieldNames={{ label: 'name', value: 'id', children: 'children' }}
-                options={categoryData}
-              />,
-            )}
-          </Form.Item>
-          <Form.Item label="供货商">
-            {getFieldDecorator('supplierId', {
-              rules: [{ required: true, message: '请选择供货商' }],
-            })(
-              <Select allowClear showSearch style={{ width: 190 }} filterOption={filterOption}>
-                {shopList.map(item => (
-                  <Option key={item.id} value={item.id}>
-                    {item.name}
-                  </Option>
-                ))}
-              </Select>,
-            )}
-          </Form.Item>
-          <Form.Item label="商品品牌">
-            {getFieldDecorator('brandId', {
-              rules: [{ required: true, message: '请选择商品品牌' }],
-            })(
-              <SuperSelect allowClear showSearch style={{ width: 190 }} filterOption={filterOption}>
-                {barndList.map(item => (
-                  <Option key={item.id} value={item.id}>
-                    {item.name}
-                  </Option>
-                ))}
-              </SuperSelect>,
-            )}
-          </Form.Item>
-        </Card>
-      </Form>
-    </Modal>
-  );
-};
-export default Form.create()(OperationForm);

src/pages/GoodsManage-new/index.jsx

@@ -5,7 +5,8 @@ import { Button } from 'antd';
 import { categoryList, query, getVirtualCategory, getSupplierList, getBrandList } from './service';
 import { Goodscolumns } from './Goodscolumns';
 import styled from './style.less';
-import OperationModal from './components/operationModal';
+// eslint-disable-next-line import/extensions
+import OperationModal from './OperationModal/index.jsx';
 
 export default () => {
   /**
@@ -13,6 +14,7 @@ export default () => {
    * @type boolean
    * @desc 整个页面的加载状态
    */
+  const [isEdit, setIsEdit] = useState(false);
   const [categoryData, setCategoryData] = useState([]);
   const [operationVisible, setOperationVisible] = useState(false);
   const actionRef = useRef();
@@ -39,8 +41,18 @@ export default () => {
     featchData();
   }, []);
 
+  const onAddGoodsForm = () => {
+    setIsEdit(false);
+    setOperationVisible(true);
+  };
+
+  const onModifyForm = () => {
+    // 修改form表单事件
+    setIsEdit(true);
+    setOperationVisible(true);
+  };
   const toolBarList = [
-    <Button key="getOffGoodsShelf" type="primary" onClick={() => setOperationVisible(true)}>
+    <Button key="getOffGoodsShelf" type="primary" onClick={() => onAddGoodsForm()}>
       新增商品
     </Button>,
     <Button key="putGoodsShelf">模版</Button>,
@@ -48,13 +60,19 @@ export default () => {
       批量修改库存
     </Button>,
   ];
-  console.log(operationVisible);
+
   return (
     <PageHeaderWrapper>
       <ProTable
         className={styled.protable}
         actionRef={actionRef}
-        columns={Goodscolumns({ categoryData, supplyPrice, setSupplyPrice, supplyPriceRef })}
+        columns={Goodscolumns({
+          categoryData,
+          supplyPrice,
+          setSupplyPrice,
+          supplyPriceRef,
+          onModifyForm,
+        })}
         params={{ ...supplyPrice }}
         request={params => {
           // 表单搜索项会从 params 传入，传递给后端接口。
@@ -86,6 +104,7 @@ export default () => {
         }}
       />
       <OperationModal
+        isEdit={isEdit}
         operationVisible={operationVisible}
         setOperationVisible={setOperationVisible}
         categoryData={categoryData} // 实体商品类目

src/pages/GoodsManage-new/model.js

 import * as api from './service';
 
 const Model = {
-  namespace: 'goodsManage',
+  namespace: 'GoodsManage-new',
   state: {
     tableData: {},
     shopList: [],