feat: 添加商品属性

config/env.config.js

@@ -2,19 +2,19 @@ const isProduction = process.env.NODE_ENV === 'production';
 const isPre = process.env.PRE_ENV === 'pre';
 
 const envAPi = {
-  api: 'https://security-xyqb.liangkebang.net', //'https://security-xyqb.liangkebang.net',
-  kdspOpApi: 'https://sc-merchant-api-xyqb.liangkebang.net',
-  kdspApi: 'https://sc-merchant-api-xyqb.liangkebang.net',
-  goodsApi: 'https://sc-merchant-api-xyqb.liangkebang.net',
-  // kdspOpApi: 'https://kdsp-operation-xyqb.liangkebang.net',
-  // kdspApi: 'https://sc-op-api-xyqb.liangkebang.net',
-  // goodsApi: 'https://sc-op-api-xyqb.liangkebang.net',
-  querysApi: 'https://sc-merchant-api-sc.liangkebang.net',
+  api: 'https://security-ds.liangkebang.net', //'https://security-ds.liangkebang.net',
+  kdspOpApi: 'https://sc-merchant-api-ds.liangkebang.net',
+  kdspApi: 'https://sc-merchant-api-ds.liangkebang.net',
+  goodsApi: 'https://sc-merchant-api-ds.liangkebang.net',
+  // kdspOpApi: 'https://kdsp-operation-ds.liangkebang.net',
+  // kdspApi: 'https://sc-op-api-ds.liangkebang.net',
+  // goodsApi: 'https://sc-op-api-ds.liangkebang.net',
+  querysApi: 'https://sc-merchant-api-ds.liangkebang.net',
   // goodsApi: '//192.168.188.111:7000',
-  prologueDomain: 'https://mall-sc.liangkebang.net',
+  prologueDomain: 'https://mall-ds.liangkebang.net',
   // qiniuHost: 'https://appsync.lkbang.net',
   qiniuHost: 'https://kdspstatic.q-gp.com/',
-  opapiHost: 'https://opapi-sc.liangkebang.net',
+  opapiHost: 'https://opapi-ds.liangkebang.net',
 };
 
 const prodApi = {

src/pages/GoodsManage/createModal/index.jsx

@@ -69,16 +69,25 @@ class goodsManage extends Component {
     productType: 1,
     confirmLoading: false,
     afterAddressList: {},
+    categoryAttrs: [], // 获取类目下属性
   };
 
   componentDidMount() {
     this.getSpecData();
     this.getBrandData();
     this.getAfterAddressData();
-    this.getAttribute();
   }
 
-  componentWillReceiveProps() {
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.visible && this.state.categoryAttrs.length < 1) {
+      const { initData = {} } = this.props;
+      const isEdit = Object.keys(initData).length !== 0;
+      if (isEdit) {
+        this.getAttribute(
+          initData.thirdCategoryId || initData.secondCategoryId || initData.firstCategoryId,
+        );
+      }
+    }
     this.setState({ isCancel: false });
   }
 
@@ -209,14 +218,20 @@ class goodsManage extends Component {
   // 获取属性
   getAttribute = async categoryId => {
     console.log('categoryId :>> ', categoryId);
-    const res = await apiGetAttribute({
-      categoryId,
-    });
+    const res = await apiGetAttribute(categoryId);
     console.log('res :>> ', res);
+    let categoryAttrs = [];
+    if (res && res.data && res.data.length) {
+      categoryAttrs = res.data;
+    }
+    this.setState({
+      categoryAttrs,
+    });
   };
 
   treeChange = value => {
     const cid = value[value.length - 1];
+    console.log('cid :>> ', cid);
     this.setState({ categoryId: cid, initCascader: value });
     this.getAttribute(cid);
   };
@@ -372,6 +387,7 @@ class goodsManage extends Component {
     } = this.props;
     const { editData, productType } = this.state;
     validateFields(async (errors, values) => {
+      console.log('values :>> ', values);
       if (!values.afterAddressId) {
         notification.error({
           message: '请选择售后地址',
@@ -403,6 +419,30 @@ class goodsManage extends Component {
             });
           }
         });
+        const attributeApplyList = [];
+        values.attributeApplyList.forEach(item => {
+          const key = Object.keys(item)[0];
+          let attrs = item[key];
+          if (Array.isArray(item[key])) {
+            attrs = item[key].map(attr => {
+              try {
+                return JSON.parse(attr);
+              } catch {
+                return { attributeValueName: attr };
+              }
+            });
+          } else {
+            try {
+              attrs = [JSON.parse(item[key])];
+            } catch {
+              attrs = [{ attributeValueName: item[key] }];
+            }
+          }
+          attributeApplyList.push({
+            attributeId: key.replace('attr', ''),
+            attributeApplyValueList: attrs,
+          });
+        });
         await this.setState(prev => ({
           confirmLoading: true,
           createData: {
@@ -419,8 +459,10 @@ class goodsManage extends Component {
             specs,
             character: values.character,
             afterAddressId: values.afterAddressId,
+            attributeApplyList,
           },
         }));
+        console.log('this.state.createData :>> ', this.state.createData);
         const data = initData.id
           ? await editGoods(this.state.createData)
           : await addGoods(this.state.createData);
@@ -488,6 +530,57 @@ class goodsManage extends Component {
     this.BatchSetting.formRef.current.resetFields();
   };
 
+  /**
+   * 获取下拉框类型
+   * supportCustomValue：是否支持自定义：1 是 0 否
+   * optionType：选项类型：1 单选 2 多选
+   */
+  getMode = (supportCustomValue, optionType) => {
+    if (+supportCustomValue.code === 1) {
+      return 'tags';
+    }
+    if (+optionType.code === 2) {
+      return 'multiple';
+    }
+    return 'default';
+  };
+
+  getInitAttrValue = (id, supportCustomValue, optionType) => {
+    console.log('id :>> ', id, supportCustomValue.code, optionType.code);
+    const skuAttr = this.props.initData.productAttributeApplyList?.productAttributeApplyList || [];
+    const v = skuAttr.filter(item => id === item.productAttributeId);
+    if (v.length) {
+      const values = v[0].productAttributeApplyValueList.map(attr => {
+        if (+attr.attributeValueId) {
+          return JSON.stringify({
+            attributeValueId: attr.attributeValueId,
+            attributeValueName: attr.attributeValueName,
+          });
+        }
+        return attr.attributeValueName;
+      });
+      if (+supportCustomValue.code === 1 || +optionType.code === 2) {
+        return values;
+      }
+      if (v[0].productAttributeApplyValueList.length) {
+        const atvalue = v[0].productAttributeApplyValueList[0];
+        return JSON.stringify({
+          attributeValueId: atvalue.attributeValueId,
+          attributeValueName: atvalue.attributeValueName,
+        });
+      }
+      return '';
+    }
+    if (+supportCustomValue.code === 1) {
+      return [];
+    }
+    if (+optionType.code === 2) {
+      return [];
+    }
+    console.log('111 :>> ', 111);
+    return '';
+  };
+
   validateToInputName = (rule, value, callback) => {
     if (value.trim().length < 2) {
       callback(new Error('商品名称不可小于2个字符'));
@@ -528,6 +621,10 @@ class goodsManage extends Component {
       labelCol: { span: 2 },
       wrapperCol: { span: 22 },
     };
+    const formItemAttr = {
+      labelCol: { span: 6 },
+      wrapperCol: { span: 16 },
+    };
     const {
       colorImg,
       productType,
@@ -538,7 +635,6 @@ class goodsManage extends Component {
     } = this.state;
     const skuSpeFirstKeys = initData.firstSpecList || [];
     const skuSpeSecondKeys = initData.secondSpecList || [];
-    const skuAttr = initData.productAttributeApplyList?.productAttributeApplyList || [];
     const skuOldAttr = initData.productAttributeApplyList?.oldProductAttributeApplyList || [];
     const treeDataArray = productType === 2 ? virtualTreeData : treeData;
     const brandListArray = productType === 2 ? brandList : normalBrandList;
@@ -549,11 +645,6 @@ class goodsManage extends Component {
     if (isEdit && !initData.editData[0]?.firstSpec && !initData.editData[0]?.secondSpec) {
       colorKeys = colorKeys.length > 1 ? colorKeys.filter(item => item !== 'null') : colorKeys;
     }
-    const optionsWithDisabled = [
-      { label: 'Apple', value: 'Apple' },
-      { label: 'Pear', value: 'Pear' },
-      { label: 'Orange', value: 'Orange', disabled: false },
-    ];
 
     return (
       <Modal
@@ -741,25 +832,49 @@ class goodsManage extends Component {
             <Card className={styles.card} bordered={false}>
               <div className={styles.cardTitle}>商品属性</div>
               <Row>
-                {skuAttr.length > 0 &&
-                  skuAttr.map(k => (
-                    <FormItem label={k.name} required={false} key={k}>
-                      {getFieldDecorator(`specs[${k}]`, {
-                        initialValue: this.state.initForm.second[k] || '',
-                        validateTrigger: ['onChange', 'onBlur'],
-                        rules: +k.required === 1 ? { required: true, message: '请选择' } : [],
-                      })(
-                        <Select mode={this.getMode(k.supportCustomValue, k.optionType)}>
-                          {k.valueList &&
-                            k.valueList.length &&
-                            k.valueList.map(a => (
-                              <Option key={a.id} value={a}>
-                                {a.name}
-                              </Option>
-                            ))}
-                        </Select>,
-                      )}
-                    </FormItem>
+                {this.state.categoryAttrs.length > 0 &&
+                  this.state.categoryAttrs.map((k, i) => (
+                    <Col span={12} key={k.id}>
+                      <FormItem label={k.name} {...formItemAttr} key={k.id}>
+                        {getFieldDecorator(`attributeApplyList[${i}]['attr${k.id}']`, {
+                          initialValue:
+                            +k.supportCustomValue.code === 1 || +k.optionType.code === 2 ? [] : '', // this.getInitAttrValue(k.id, k.supportCustomValue, k.optionType), //
+                          validateTrigger: ['onChange'],
+                          rules:
+                            +k.required.code === 1
+                              ? [
+                                  {
+                                    required: true,
+                                    type:
+                                      +k.supportCustomValue.code === 1 || +k.optionType.code === 2
+                                        ? 'array'
+                                        : 'string',
+                                    message: '请选择',
+                                  },
+                                ]
+                              : [],
+                        })(
+                          <Select
+                            mode={this.getMode(k.supportCustomValue, k.optionType)}
+                            allowClear
+                          >
+                            {k.valueList &&
+                              k.valueList.length &&
+                              k.valueList.map(a => (
+                                <Option
+                                  key={a.id}
+                                  value={JSON.stringify({
+                                    attributeValueId: a.id,
+                                    attributeValueName: a.name,
+                                  })}
+                                >
+                                  {a.name}
+                                </Option>
+                              ))}
+                          </Select>,
+                        )}
+                      </FormItem>
+                    </Col>
                   ))}
               </Row>
               <Row>

src/pages/GoodsManage/createModal/infoAudit.jsx

@@ -3,16 +3,18 @@ import { Modal, Button } from 'antd';
 import { apiQueryLastAuditRecord } from '../service';
 
 const InfoAudit = props => {
+  const [audit, setAudit] = useState({});
+
   const getRecord = async () => {
-    console.log('333 :>> ', props.skuInfo.skuId);
-    // const res = await apiQueryLastAuditRecord(props.skuInfo.skuId);
-    // console.log('res :>> ', res);
+    const res = await apiQueryLastAuditRecord(props.skuInfo.skuId);
+    if (res && res.data) {
+      console.log('res :>> ', res);
+      setAudit(res.data);
+    }
   };
 
   useEffect(() => {
-    console.log('1111 :>> ', 1111);
     if (props.visible) {
-      console.log('222 :>> ', 222);
       getRecord();
     }
   }, [props.visible]);
@@ -30,9 +32,9 @@ const InfoAudit = props => {
         </Button>,
       ]}
     >
-      <p>审核状态：审核拒绝</p>
-      <p>申请时间：</p>
-      <p>审核结果：</p>
+      <p>审核状态：{audit.statusDesc}</p>
+      <p>申请时间：{audit.createdAt}</p>
+      <p>审核结果：{audit.rejectReason}</p>
     </Modal>
   );
 };

src/pages/GoodsManage/service.js

@@ -43,14 +43,15 @@ export async function getBrandList() {
 }
 
 // 获取类目关联属性
-export async function apiGetAttribute(params) {
-  const data = await request.get('/api/kdsp/category/template/ref/attribute', {
-    prefix: goodsApi,
-    params,
-  });
+export async function apiGetAttribute(categoryId) {
+  const data = await request.get(
+    `/api/kdsp/category/template/ref/attribute/detail?categoryId=${categoryId}`,
+    {
+      prefix: goodsApi,
+    },
+  );
   return data;
 }
-
 // 编辑--获取详情
 export async function spuDetail(params) {
   return request.post('/product/api/merchant/detail', {

src/pages/GoodsManage/staticdata.js

@@ -3,7 +3,7 @@ import { Button, Badge, Switch, Modal } from 'antd';
 import { ExclamationCircleOutlined } from '@ant-design/icons';
 import styles from './style.less';
 import { resetTime } from '../../utils/utils';
-import { apiChangeStateGoods } from './service';
+import { apiChangeStateGoods, apiQueryLastAuditRecord } from './service';
 
 const { confirm } = Modal;
 
@@ -189,9 +189,14 @@ export function column() {
       render: (_, row) => (
         <div>
           <p>{row.state >= 5 ? '审核通过' : _}</p>
-          <div onClick={() => onShowAudit(row)}>
-            {' '}
-            {row.updateStateDesc ? <span>{row.updateStateDesc}</span> : '--'}
+          <div>
+            {row.updateStateDesc ? (
+              <span onClick={() => onShowAudit(row)} className={styles.stateAuditTxt}>
+                {row.updateStateDesc}
+              </span>
+            ) : (
+              '--'
+            )}
           </div>
         </div>
       ),

src/pages/GoodsManage/style.less

@@ -115,3 +115,7 @@
   font-weight: bold;
   font-size: 18px;
 }
+.stateAuditTxt {
+  color: #1890ff;
+  cursor: pointer;
+}