Skip to content

M
merchant-manage-ui
Commit 8b54f485 authored by 武广's avatar 武广
Browse files
Options

feat: 添加商品属性

parent 0a13076e
Show whitespace changes
Inline Side-by-side
Showing with 185 additions and 58 deletions
config/env.config.js
View file @ 8b54f485
......@@ -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
View file @ 8b54f485
......@@ -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: '请选择' } : [],
{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)}>
<Select
mode={this.getMode(k.supportCustomValue, k.optionType)}
allowClear
>
{k.valueList &&
k.valueList.length &&
k.valueList.map(a => (
<Option key={a.id} value={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
View file @ 8b54f485
......@@ -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
View file @ 8b54f485
......@@ -43,14 +43,15 @@ export async function getBrandList() {
}
// 获取类目关联属性
export async function apiGetAttribute(params) {
const data = await request.get('/api/kdsp/category/template/ref/attribute', {
export async function apiGetAttribute(categoryId) {
const data = await request.get(
`/api/kdsp/category/template/ref/attribute/detail?categoryId=${categoryId}`,
{
prefix: goodsApi,
params,
});
},
);
return data;
}
// 编辑--获取详情
export async function spuDetail(params) {
return request.post('/product/api/merchant/detail', {
......
src/pages/GoodsManage/staticdata.js
View file @ 8b54f485
......@@ -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
View file @ 8b54f485
......@@ -115,3 +115,7 @@
font-weight: bold;
font-size: 18px;
}
.stateAuditTxt {
color: #1890ff;
cursor: pointer;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment