Skip to content

J
jinfa-platform
Commit db2371d2 authored by 前端-钟卫鹏's avatar 前端-钟卫鹏
Browse files
Options

fix: 商品

parent bcd90b9f
Show whitespace changes
Inline Side-by-side
Showing with 328 additions and 147 deletions
src/components/NiceForm/components/CustomInputSearch.tsx
View file @ db2371d2
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import { Input, Space, Select, Button } from 'antd';
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';
import { useFieldState, FormPath, FormEffectHooks } from '@formily/antd';
import { useFieldState, FormPath, FormEffectHooks, useFormEffects } from '@formily/antd';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { PublicApi } from '@/services/api';
/**
* 筛选项 搜索和远程数据结合的select
* search的值暂存至schema的props下的searchValue
* option数据暂存至schema的props下的dataOption
*/
const { Option } = Select
// export interface SearchProps {
......@@ -14,35 +20,32 @@ const { Option } = Select
// }
const CustomInputSearch = props => {
console.log(props);
const justifyAlign = props.props['x-component-props'].align || 'flex-end';
const [brandData, setBrandData] = useState<any>([])
const [brandValue, setBrandValue] = useState(undefined)
const handleBrandSearch = (value: any) => { // end value
console.log(value, '搜索值')
if (value) {
PublicApi.getProductSelectGetSelectBrand({ name: value }).then(res => {
if (res.code === 1000)
setBrandData(res.data)
console.log(props, 'props')
const { form } = props
const justifyAlign = props.props['x-component-props'].align || 'flex-end'
const option = props.props['x-component-props'].dataOption
const [dataOption, setDataOption] = useState<any>([])
useEffect(() => {
setDataOption(option)
}, [option])
const handleValueSearch = (value: any) => {
form.setFieldState(props.props.key, state => {
state.props["x-component-props"].searchValue = value // search的值暂存至schema的props下的searchValue
})
} else {
setBrandData([])
}
}
// 只能在组件中获取对应的值
return (
<Space size={20} style={{ justifyContent: justifyAlign, width: '100%' }}>
<Select
// value={brandValue}
onSearch={value => handleBrandSearch(value)}
onSearch={value => handleValueSearch(value)}
onChange={v => props.mutators.change(v)}
value={props.value}
{...props.props['x-component-props']}
>
{brandData.map(d => <Option value={d.id} key={d.id}>{d.name}</Option>)}
{dataOption.map(d => <Option value={d.id} key={d.id}>{d.name}</Option>)}
</Select>
</Space>
);
......
src/pages/classAndProperty/categoryAttributes/index.tsx
View file @ db2371d2
......@@ -148,26 +148,7 @@ const CategoryAttributes: React.FC<{}> = () => {
align: 'center',
dataIndex: 'isEnable',
key: 'isEnable',
render: (text: any, record: any) => {
let component: ReactNode = null
component = (
<Popconfirm
title="确定要执行这个操作?"
onConfirm={() => confirm(record)}
onCancel={cancel}
okText="是"
cancelText="否"
>
<Button
type="link"
style={text ? { color: '#00B37A' } : { color: 'red' }}
>
{text ? <>有效 <PlayCircleOutlined /></> : <>无效 <PauseCircleOutlined /></>}
</Button>
</Popconfirm>
)
return component
}
render: (text: any, record: any) => text ? '有效' : '无效'
},
{
title: '操作',
......@@ -261,7 +242,8 @@ const CategoryAttributes: React.FC<{}> = () => {
linkTableRowData.forEach((item, index) => {
linkArray.push(item.id)
})
console.log(linkArray)
// console.log(linkArray, goodsRowCtl)
goodsRowCtl.setSelectedRowKeys(linkArray)
setSelectedTableRowKeys(linkArray)
}
......
src/pages/commodity/products/addProducts.tsx
View file @ db2371d2
......@@ -36,7 +36,8 @@ const AddProducts: React.FC<{}> = (props) => {
setProductName,
setAttributeLists,
clearData,
setProductInfoByEdit
setProductInfoByEdit,
isAllAttributePic
} = ProductStore
useEffect(()=>{
......@@ -69,7 +70,6 @@ const AddProducts: React.FC<{}> = (props) => {
await __.current.validateFields()
)
})
// console.log(data,'data')
Promise.all(data).then((values) => {
// 提交的数据进行处理
// console.log(values, productSelectAttribute, productAttributeAndImageParams, '所有数据')
......@@ -77,7 +77,9 @@ const AddProducts: React.FC<{}> = (props) => {
delete _itme.attributeName
delete _itme.isPrice
})
try{
if(productAttributeAndImageParams.length>0){
console.log(productAttributeAndImageParams,'____')
productAttributeAndImageParams.map(_item => {
if(_item.goodsCustomerAttributeList.length>0){
_item.goodsCustomerAttributeList.map(__item => {
......@@ -90,12 +92,15 @@ const AddProducts: React.FC<{}> = (props) => {
return __item?.response?.data || __item?.url // 编辑情况下兼顾手动添加图片列表属性
})
}else{
return message.error("每项请至少上传一张商品图片！")
throw new Error('每项请至少上传一张商品图片！')
}
})
}
else{
return message.error("每项请至少上传一张商品图片！")
throw new Error('每项请至少上传一张商品图片！')
}
}catch(e){
return e
}
let _bacsicForm = {...values[0]}
_bacsicForm.customerCategoryId = _bacsicForm.customerCategoryId[_bacsicForm.customerCategoryId.length-1]
......@@ -106,26 +111,30 @@ const AddProducts: React.FC<{}> = (props) => {
...values[4],
commodityAttributeList: productSelectAttribute,
unitPriceAndPicList: productAttributeAndImageParams,
commodityRemark: productDescription
commodityRemark: productDescription,
isAllAttributePic: isAllAttributePic,
}
_params.minOrder = Number(_params.minOrder)
_params.logistics.weight = Number(_params.logistics.weight)
// 处理地址
let _commodityAreaList:any = []
// console.log(_params, '_params')
_params.commodityAreaList.length > 0 && _params.commodityAreaList.map(_itme => {
if(_itme){
let _temp: any = {}
let pobj = areaOption.filter(_=>_.code===_itme[0])[0]
let cobj = pobj.areaResponses.filter(__=>__.code===_itme[1])[0]
_temp.provinceCode = pobj.code
_temp.provinceName = pobj.name,
_temp.cityCode = cobj.code,
_temp.cityName = cobj.name,
_temp.provinceCode = pobj?.code || null
_temp.provinceName = pobj?.name || null
_temp.cityCode = cobj?.code || null
_temp.cityName = cobj?.name || null
// 增加不限市区字段
cobj?.code ? _temp.isAllCity = false : _temp.isAllCity = true
_commodityAreaList.push(_temp)
// console.log(_itme, _temp, '地址的每一项')
}
})
// 增加不限区域字段
_commodityAreaList.length > 0 ? _params.isAllArea = false : _params.isAllArea = true
_params.commodityAreaList = _commodityAreaList
const { id } = history.location.query
_params.id = id ? id : null
......@@ -133,17 +142,20 @@ const AddProducts: React.FC<{}> = (props) => {
PublicApi.postProductCommoditySaveOrUpdateCommodity(_params).then(res => {
if(res.code === 1000){
setIsEnableCheck(false)
//@ts-ignore
setReponseId(res.data)
history.goBack()
}
})
}).then( e => {
console.log(e, 'e')
if(e)
message.error(e.message)
}).catch(error => {
message.error("请完善表单必填项！")
console.log(error, '_error')
message.error(error.message)
})
}catch(e){
message.error(e.message)
console.log(e,'error')
}
}
......@@ -189,7 +201,7 @@ const AddProducts: React.FC<{}> = (props) => {
onRef={(refs)=>setFormRefs([...formRefs, refs])}
/>
</TabPane>
<TabPane tab="商品图片" key="5" style={{ border: '1px solid rgba(223,225,230,1)' }}>
<TabPane tab="商品图片" key="5">
<ProductImageForm />
</TabPane>
<TabPane tab="商品描述" key="6">
......
src/pages/commodity/products/addProductsItem/logisticsForm.tsx
View file @ db2371d2
import React, { useState, useEffect, useRef } from 'react'
import { history } from 'umi'
import { Form, Select, Radio, Input, Checkbox } from 'antd'
import { Form, Select, Radio, Input, Checkbox, InputNumber } from 'antd'
import { PublicApi } from '@/services/api'
import { GetLogisticsSelectListCompanyResponse, GetLogisticsSelectListShipperAddressResponse, GetLogisticsSelectListFreightTemplateResponse } from '@/services'
import { store } from '@/store'
......@@ -112,19 +112,22 @@ const LogisticsForm: React.FC<Iprops> = (props) => {
</Radio.Group>
</Form.Item>
<Form.Item
name="weight"
label="重量"
style={{position: 'relative'}}
>
<Form.Item
name="weight"
rules={[
{
required: true,
type: 'number',
message: '请填入重量',
min: 0,
transform: (value) => Number(value)
},
message: '请正确输入重量',
}
]}
noStyle
>
<Input suffix="KG" placeholder="请输入重量" />
<InputNumber min={0} style={{width:'100%'}} placeholder="请输入重量" />
</Form.Item>
<span style={{position:'absolute', right:5, top:5, opacity: 0.6}}>KG</span>
</Form.Item></>
}
{
......
src/pages/commodity/products/addProductsItem/priceAttributeForm.tsx
View file @ db2371d2
......@@ -43,12 +43,12 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
const [setPriceModal, setSetPriceModal] = useState(false)
const [ladderPrice, setLadderPrice] = useState(false)
const [curretSetPriceRow, setCurrentSetPriceRow] = useState<any>()
const [stateTableData, setStateTableData] = useState<any[]>()
// const [stateTableData, setStateTableData] = useState<any[]>()
const [combineAttributeArray, setCombineAttributeArray] = useState<any[]>([])
const [attributeObjArr, setAttributeObjArr] = useState<any[]>([])
const [attributeValObjArr, setAttributeValObjArr] = useState<any[]>([])
const [minOrderNumber, setMinOrderNumber] = useState<number>()
const [isBatchSetting, setIsBatchSetting] = useState<boolean>(false) //是否点击批量设置
const [colums, setColumns] = useState<ColumnType<any>[]>()
const { ProductStore } = store
......@@ -66,9 +66,10 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
_tableDataSource = useMemo(() => tableDataSource, [tableDataSource]) // 保持最新值
useEffect(()=>{
useEffect(() => {
onRef(priceFormRef)
if(history.location.qurey?.id){
if(history.location.query?.id){ // 编辑情况下 用于判断价格类型和显示单位
setPlanPrice(productInfoByEdit?.priceType)
handleUnitSearch(getPriceAttributeFormParamsByEdit.unitName)
}
return ()=>{
......@@ -143,7 +144,7 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
width: 200,
render: (text, record) => {
let _priceRange = _tableDataSource[record['索引']]["单价"]
if (JSON.stringify(_priceRange)==='{}') return null
if (!_priceRange || JSON.stringify(_priceRange)==='{}') return null
return Object.keys(_priceRange).map((v, i) => {
return <><span key={i}>{v==='0-0'?'':`${v}:`} <span style={{color:'red'}}>￥{_priceRange[v]}</span></span><br /></>
})
......@@ -151,7 +152,7 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
})
_col.push({
title: <>操作<a style={{ color: '#868f9e' }}> <SettingOutlined /></a></>,
title: '操作',
dataIndex: 'option',
width: 100,
render: (text: any, record: any) => {
......@@ -177,13 +178,14 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
let _tempObj: any = { 索引: i ,商品名称: productName }
Array.isArray(_rowArr) ? _rowArr.map((__rowArr, index) => {
_tempObj[_attributeNameArr[index]] = __rowArr
}) : _tempObj[_attributeNameArr[i]] = _rowArr
}) : _tempObj[_attributeNameArr[i]||_attributeNameArr[0]] = _rowArr // 当一项变动的时候 找_attributeNameArr可能会找不到 找不到的情况下置为索引0的那项
// _tempObj['对应货品'] = selectedGoods.length > 0 ? selectedGoods[0].id : 0 // 编辑情况下 对应货品id和单价 特殊处理
// _tempObj['单价'] = {}
if(productInfoByEdit?.id){
_tempObj['对应货品'] = productInfoByEdit.unitPriceAndPicList[i]?.goods?.id
_tempObj['单价'] = productInfoByEdit.unitPriceAndPicList[i]?.unitPrice
// 编辑的时候，先指定数据中的货品id，如果是重新组合的不存在id就使用选择的货品中的第一个，如果没有置为0；同理，不存在单价就置为{}
_tempObj['对应货品'] = productInfoByEdit.unitPriceAndPicList[i]?.goods?.id || selectedGoods[0].id || 0
_tempObj['单价'] = productInfoByEdit.unitPriceAndPicList[i]?.unitPrice || {}
}else{
_tempObj['对应货品'] = selectedGoods.length > 0 ? selectedGoods[0].id : 0
_tempObj['单价'] = {}
......@@ -198,7 +200,7 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
_tempObj['单价'] = {}
_tableData.push(_tempObj)
}
console.log(_tableData, '_tableData')
console.log(_tableData, '_tableData') // 只有一项 变动情况下表格数据的key获取不到
_tableDataSource = _tableData
setTableDataSource(_tableDataSource)
......@@ -326,11 +328,20 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
setLadderPrice(true)
let numberArray = Object.keys(record['单价']).map(item => item.split('-').map(_ => Number(_)))
let priceArray = Object.values(record['单价'])
// 截取范围数组中第一个和最小起订 做对比，变动则重置阶梯数量
let minOrder = priceForm.getFieldValue('minOrder')
if(numberArray[0][0] === minOrder){
let tempArr = [];
numberArray.map((_item, _index) => {
tempArr.push({ numberPrice: priceArray[_index], numberRange: { numberMin: _item[0], numberMax: _item[1] } })
})
setPriceForm.setFieldsValue({ladderPrice: true, ladderRange: tempArr})
}else{
let tempArr = [];
tempArr.push({ numberPrice: null, numberRange: { numberMin: minOrder, numberMax: null } })
setPriceForm.setFieldsValue({ladderPrice: true, ladderRange: tempArr})
}
}
}
......@@ -342,7 +353,6 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
}
const handleUnitSearch = (value:any) => {
console.log(value, 'handleClassSearch')
if (value) {
PublicApi.getProductSelectGetSelectCnUnit({name: value}).then(res=>{
if(res.code === 1000)
......@@ -361,10 +371,8 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
// 校验阶梯范围
const validatorNumberRange = (rule, value, callback) => {
console.log(value, 'value')
try {
if(Array.isArray(value)){
console.log(value, 'array')
let range = value.map(item => {
if(item)
return Object.values(item.numberRange)
......@@ -374,7 +382,7 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
},
[]
)
let result = range.reduce((a, b) => { console.log(a, b); if(a<b) return b })
let result = range.reduce((a, b) => { if(a<b) return b })
console.log(result, 'result')
if(!result) throw new Error('请正确输入阶梯数量范围');
callback()
......@@ -384,6 +392,12 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
}
}
const clickBatchSetPrice = () => {
console.log('批量设置价格')
setIsBatchSetting(!isBatchSetting)
setSetPriceModal(true)
}
return (<>
<Form
{...layout}
......@@ -447,9 +461,8 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
rules={[{
required: true,
type: 'number',
message: '请输入最小起订数',
message: '最小起订数不能小于0',
min: 0,
transform: (value) => Number(value)
}]}
>
<InputNumber style={{width: '100%'}} min={0} placeholder="请输入最小起订数" onChange={(e: number) => setMinOrderNumber(e)} />
......@@ -486,19 +499,25 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
</Tooltip>
</span>
}
// rules={[{
// required: true,
// message: '请选择会员折扣'
// }]}
valuePropName="checked"
>
<Checkbox>允许使用会员折扣价购买</Checkbox>
</Form.Item>
</Form>
<Table rowKey="索引" dataSource={tableDataSource} columns={planPrice === 2 ? colums.slice(0, colums.length-2) : colums} pagination={false} />
{/* 批量设置按钮 */}
{
planPrice != 2 && <Button type="text" style={{float: 'right'}} onClick={clickBatchSetPrice}><SettingOutlined />{planPrice === 3 ? '批量设置积分' : '批量设置价格'}</Button>
}
<Table
rowKey="索引"
dataSource={tableDataSource}
columns={planPrice === 2 ? colums.slice(0, colums.length-2) : colums}
pagination={false}
style={{clear: 'both'}}
/>
{/* 设置价格 */}
<Modal
title={planPrice===3 ? '设置积分' : '设置价格'}
title={planPrice===3 ? (isBatchSetting ? '批量设置积分' : '设置积分') : (isBatchSetting? '批量设置价格' : '设置价格')}
visible={setPriceModal}
onOk={setPriceOk}
onCancel={setPriceCancel}
......@@ -553,12 +572,6 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
fieldKey={[field.fieldKey, 'numberRange']}
key={'_' + field.fieldKey}
noStyle
// rules={[
// {
// required: true,
// message: '阶梯价格为必填项'
// },
// ]}
>
<Input.Group compact>
<Form.Item
......@@ -648,15 +661,16 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
rules={[
{
required: true,
type: 'number',
message: planPrice===3?'请输入积分！':'请输入价格！'
},
{
pattern: planPrice!==3 && /^\d+(\.\d{1,4})?$/,
message: planPrice!==3 && '小数点后仅限四位',
pattern: planPrice!==3 ? /^\d+(\.\d{1,4})?$/ : /^[1-9]\d*$/,
message: planPrice!==3 ? '小数点后仅限四位' : '请正确输入积分',
}
]}
>
<InputNumber style={{width: '100%'}} placeholder={planPrice===3?"请输入积分":"请输入价格"} />
<InputNumber min={0} style={{width: '100%'}} placeholder={planPrice===3?"请输入积分":"请输入价格"} />
</Form.Item>
}
</Form>
......
src/pages/commodity/products/addProductsItem/productAttributeForm.tsx
View file @ db2371d2
......@@ -56,7 +56,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
* @param {Number, Array, e} value type为1：数字id，type为2：数组id，type为3：事件对象
* @param {Object} attrItem 属性数据对象
*/
const onChange = (value, attrItem) => { // 编辑情况下 这里只生成一个 关联表格会有问题
const onChange = (value, attrItem) => {
let params = { customerAttributeId: attrItem.id, attributeName: attrItem.name, isPrice: attrItem.isPrice, customerAttributeValueList: [] }
console.log(params, 'params')
if(attrItem.type!==3){
......@@ -103,12 +103,12 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
/* 编辑情况下，利用商品信息中的属性值转换为结果参数，用于后续表格生成 */
const constructProductSelectAttribute = () => {
let _selectAttributeByEdit = productInfoByEdit.commodityAttributeList.map((item, index) => {
// console.log(item,'__edit__',attributeLists[index])
console.log(item,'__edit__',attributeLists[index])
return {
attributeName: item.customerAttribute.name,
customerAttributeId: item.customerAttribute.id,
customerAttributeValueList: item.customerAttributeValueList,
isPrice: attributeLists.filter(_item => _item.name === item.customerAttribute.name)[0].isPrice
isPrice: attributeLists.filter(_item => _item.name === item.customerAttribute.name)[0]?.isPrice
}
})
console.log(_selectAttributeByEdit, '__selectAttributeByEdit__', attributeLists)
......@@ -130,7 +130,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
}]}
>
<Select
placeholder="请选择面料"
placeholder="请选择"
allowClear
onChange={(v)=>onChange(v, attrItem)}
>
......
src/pages/commodity/products/addProductsItem/productImageForm.tsx
View file @ db2371d2
import React, { useState, useEffect } from 'react'
import {history} from 'umi'
import { Button, Form, Select, Checkbox, message, Input, Table, Modal, Row, Col, Alert, Upload } from 'antd'
import { Button, Form, Select, Checkbox, message, Input, Table, Modal, Row, Col, Alert, Upload, Radio } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import CustomTabs, { ItemPane } from '@/components/CustomTabs'
import styles from './index.less'
......@@ -43,23 +43,19 @@ const ProductImageForm: React.FC<Iprops> = (props) => {
const [previewVisible, setPreviewVisible] = useState(false)
const [previewImage, setPreviewImage] = useState('')
const [previewTitle, setPreviewTitle] = useState('')
const [setImageType, setSetImageType] = useState<boolean>(true)
const { ProductStore } = store
const { priceAttributeParams, productInfoByEdit, setProductAttributeAndImageParams } = ProductStore
const { priceAttributeParams, productInfoByEdit, setProductAttributeAndImageParams, setIsAllAttributePic } = ProductStore
/* 给数据添加图片字段 */
useEffect(()=>{
// console.log('!!!', priceAttributeParams)
// let _priceAttributeParams = priceAttributeParams.map(_item=>{
// let _obj = {..._item}
// _obj.commodityPic = [] // 编辑情况下 经行处理
// return _obj
// })
let _priceAttributeParams: any = []
if(productInfoByEdit?.id){ // id判断是否新增还是编辑
setSetImageType(productInfoByEdit.isAllAttributePic || true)
let _commodityPicList = productInfoByEdit.unitPriceAndPicList.map(_ => _.commodityPic)
_priceAttributeParams = priceAttributeParams.map((_item, _index) => {
// console.log(_commodityPicList[_index]) // 为图片字符串数组手动添加 uid 和 status
// 为图片字符串数组手动添加 uid 和 status
let _commodityPicItem = Array.isArray(_commodityPicList[_index]) ? _commodityPicList[_index].map((__ele, __i) => {
return {
uid: __i * -1,
......@@ -81,14 +77,22 @@ const ProductImageForm: React.FC<Iprops> = (props) => {
// console.log('???', _priceAttributeParams)
if(_priceAttributeParams?.length>0 && _priceAttributeParams[0]?.goodsCustomerAttributeList?.length!=0){
setDefaultChecked(0)
}else{
setDefaultChecked(-1)
}
clickItemTab(-1)
setPriceAttributeParamsByRender(_priceAttributeParams)
setProductAttributeAndImageParams(_priceAttributeParams)
console.log(_priceAttributeParams, '_p')
// 初始化若是按所有属性共用做显示处理
if(setImageType){
setCommonImageList(_priceAttributeParams[0].commodityPic)
}
},[priceAttributeParams])
const clickItemTab = (_index: number) => {
// console.log(_index, '点击项')
console.log(_index, '点击项')
setDefaultChecked(_index)
// console.log(priceAttributeParams, 'params')
}
......@@ -110,16 +114,15 @@ const ProductImageForm: React.FC<Iprops> = (props) => {
}
const beforeUpload = (file: UploadFile) => {
console.log(file,'file')
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
if (!isJpgOrPng) {
message.error('仅支持上传JPEG/JPG/PNG文件!')
}
const isLt2M = file.size / 1024 < 600;
if (!isLt2M) {
message.error('上传图片不超过2MB!');
const isLimit = file.size / 1024 < 600;
if (!isLimit) {
message.error('上传图片不超过600K!');
}
return isJpgOrPng && isLt2M && isSize(file, 800, 800);
return isJpgOrPng && isLimit && isSize(file, 800, 800);
}
//检测尺寸
const isSize = (file, w, h) => {
......@@ -153,31 +156,66 @@ const ProductImageForm: React.FC<Iprops> = (props) => {
setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1))
}
const handleChange = ({ fileList }, index) => {
// console.log(priceAttributeParamsByRender, fileList, index, 'files change')
const handleChange = ({ file, fileList }, index) => {
let _priceAttributeParams = [...priceAttributeParamsByRender]
if(index===-1){ // -1表示所有属性共用 也表示表格只有默认的一行
console.log(_priceAttributeParams, '图片更改初始数据')
// if(index===-1){ // -1表示所有属性共用 也表示表格只有默认的一行 // 无需判断 不管是共用还是不共用都需要逐条写入fileList
setCommonImageList(fileList)
_priceAttributeParams[0].commodityPic = fileList
}else{
// _priceAttributeParams[0].commodityPic = fileList
// }else{
_priceAttributeParams[index].commodityPic = fileList
// }
if(!file?.status && file?.status !== 'done'){
// 不符合要求的 移除没有'done'状态的图片
if(index === -1){
let ttt = _priceAttributeParams[0].commodityPic.filter(_ => _.status === 'done')
setCommonImageList(ttt)
_priceAttributeParams[0].commodityPic = ttt
}else{
let ttt = _priceAttributeParams[index].commodityPic.filter(_ => _.status === 'done')
_priceAttributeParams[index].commodityPic = ttt
}
}
console.log(_priceAttributeParams, '图片更改之后数据')
setPriceAttributeParamsByRender(_priceAttributeParams)
setProductAttributeAndImageParams(_priceAttributeParams)
// console.log(_priceAttributeParams, '_priceAttributeParams')
}
return (<>
<div>
const onChangeSetImageType = (e) => {
setSetImageType(e.target.value)
setIsAllAttributePic(e.target.value)
if(e.target.value)
clickItemTab(-1)
else
clickItemTab(0)
// 切换 清空图片数组
let _priceAttributeParams = [...priceAttributeParamsByRender]
_priceAttributeParams.map(item => {
item.commodityPic = []
})
setPriceAttributeParamsByRender(_priceAttributeParams)
setProductAttributeAndImageParams(_priceAttributeParams)
setCommonImageList([])
}
return (<div>
<div style={{marginBottom:15}}>设置方式&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<Radio.Group onChange={onChangeSetImageType} value={setImageType}>
<Radio value={true}>所有属性共用商品图片（默认）</Radio>
<Radio value={false}>按属性设置商品图片</Radio>
</Radio.Group>
</div>
<div style={{ border: '1px solid rgba(223,225,230,1)' }}>
<Row>
<Col span={4} className={styles.colBox}>
<ul>
{priceAttributeParamsByRender?.length>0 && priceAttributeParamsByRender[0]?.goodsCustomerAttributeList?.length!=0 ? <span className={styles.tipTitle}>按特定属性添加图片</span>
{
!setImageType ? <span className={styles.tipTitle}>按特定属性添加图片</span>
: <li className={defaultChecked == -1 ? styles.activedLi : ""} onClick={()=>clickItemTab(-1)}>
<span>所有属性共用</span>
</li>
}
{
{ !setImageType &&
priceAttributeParamsByRender?.length>0 && priceAttributeParamsByRender.map(
(item, index) => {
return Array.isArray(item.goodsCustomerAttributeList) &&
......@@ -195,6 +233,7 @@ const ProductImageForm: React.FC<Iprops> = (props) => {
</Col>
<Col span={20} style={{ padding: 24 }}>
{
!setImageType &&
priceAttributeParamsByRender?.length>0 && priceAttributeParamsByRender[0]?.goodsCustomerAttributeList?.length!=0 ? priceAttributeParamsByRender.map((item, index) =>
<div key={index+100} style={defaultChecked == index ? {display: 'block'} : {display: 'none'}}>
<div className={styles.pictureCardBox}>
......@@ -263,7 +302,7 @@ const ProductImageForm: React.FC<Iprops> = (props) => {
<img alt="example" style={{ width: '100%' }} src={previewImage} />
</Modal>
</div>
</>)
</div>)
}
export default observer(ProductImageForm)
\ No newline at end of file
src/pages/commodity/products/addProductsItem/selectGoodsForm.tsx
View file @ db2371d2
......@@ -37,7 +37,7 @@ const SelectGoodsForm: React.FC<Iprops> = (props) => {
const { id } = history.location.query
if(id){
let _goodsArr: any = productInfoByEdit?.unitPriceAndPicList.map(_ => _.goods)
let goodsArr: any = _goodsArr.length>0 && Object.values(_goodsArr.reduce((item, next)=>{
let goodsArr: any = _goodsArr.toString() && _goodsArr.length>0 && Object.values(_goodsArr.reduce((item, next)=>{
item[next.id] = next;
return item
},{}))
......
src/pages/commodity/products/directChannel.tsx
View file @ db2371d2
......@@ -21,6 +21,9 @@ import { FORM_FILTER_PATH } from '@/formSchema/const'
import { createFormActions, FormEffectHooks } from '@formily/antd'
import { channelSchema } from './schema/channelSchema'
import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect'
import { PublicApi } from '@/services/api'
import { useAsyncSelect } from '@/formSchema/effects/useAsyncSelect'
import { searchBrandOptionEffect, searchCustomerCategoryOptionEffect } from './effect'
// 定义选择的行数据的类型
interface Item {
......@@ -267,6 +270,12 @@ const DirectChannel: React.FC<{}> = () => {
}
}
// const fetchSelectBrand = async (params) => {
// const { data } = await PublicApi.getProductSelectGetSelectBrand({ name: params })
// console.log(params, data)
// return data
// }
const menuMore = (
<Menu onClick={(param) => handleMenuClick(param)}>
<Menu.Item key="2" icon={<VerticalAlignTopOutlined />}>
......@@ -320,13 +329,12 @@ const DirectChannel: React.FC<{}> = () => {
'name',
FORM_FILTER_PATH,
)
FormEffectHooks.onFieldInputChange$('brandId').subscribe(state => {
console.log(state, 'state')
FormEffectHooks.onFieldChange$('brandId').subscribe(state => {
searchBrandOptionEffect(actions, 'brandId')
})
FormEffectHooks.onFieldChange$('customerCategoryId').subscribe(state => {
searchCustomerCategoryOptionEffect(actions, 'customerCategoryId')
})
// useAsyncInitSelect(
// ['memberType', 'roleId', 'level', 'source'],
// fetchSearchItems,
// );
}}
schema={channelSchema}
/>
......
src/pages/commodity/products/effect/index.tsx 0 → 100644
View file @ db2371d2
import React, { useEffect } from 'react'
import { ISchemaFormActions, FormEffectHooks, IFormActions } from '@formily/antd';
import { PublicApi } from '@/services/api';
import { useAsyncSelect } from '@/formSchema/effects/useAsyncSelect';
const { onFieldValueChange$ } = FormEffectHooks
// 高级筛选schema中用于输入搜索品牌的Effect
export const searchBrandOptionEffect = (context: any, fieldName: string) => {
context.getFieldState(fieldName, state => {
// console.log(state.props['x-component-props'].searchValue, 'pagesearchvalue') // 此处可以实时获取到输入并暂存在schema props的值
PublicApi.getProductSelectGetSelectBrand({ name: state.props['x-component-props'].searchValue }).then(res => {
context.setFieldState(fieldName, state => {
state.props['x-component-props'].dataOption = res.data
})
})
})
}
// 高级筛选schema中用于输入搜索商品品类的Effect
export const searchCustomerCategoryOptionEffect = (context: any, fieldName: string) => {
context.getFieldState(fieldName, state => {
PublicApi.getProductSelectGetSelectCustomerCategory({ name: state.props['x-component-props'].searchValue }).then(res => {
context.setFieldState(fieldName, state => {
state.props['x-component-props'].dataOption = res.data
})
})
})
}
\ No newline at end of file
src/pages/commodity/products/index.tsx
View file @ db2371d2
import React, { useState, useEffect, useRef, ReactNode } from 'react'
import { history } from 'umi'
import { Button, Form, Card, Modal, Result, Progress, Select, Tooltip, Checkbox, Row, Col, Dropdown, Input, Menu, Popconfirm } from 'antd'
import { Button, Form, Card, Modal, Result, Progress, Select, Tooltip, Checkbox, Row, Col, Dropdown, Input, Menu, Popconfirm, message } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import {
PlusOutlined,
......@@ -222,7 +222,7 @@ const Products: React.FC<{}> = () => {
</Menu.Item>
{(record.status === 4 || record.status === 6) ? <Menu.Item><Button type='link' onClick={() => clickUp(1, record.id)}>上架</Button></Menu.Item> : ''}
{record.status === 5 ? <Menu.Item><Button type='link' onClick={() => clickUp(0, record.id)}>下架</Button></Menu.Item> : ''}
{record.status === 3 ? <Menu.Item><Button type='link' onClick={() => clickModify(record.id)}>修改</Button></Menu.Item> : ''}
{record.status === 3 || record.status === 1 ? <Menu.Item><Button type='link' onClick={() => clickModify(record.id)}>修改</Button></Menu.Item> : ''}
<Menu.Item>
<Button type='link' onClick={()=>clickCopy(record)}>复制</Button>
</Menu.Item>
......@@ -412,7 +412,14 @@ const Products: React.FC<{}> = () => {
}
const onChangeUpShop = (values) => {
// 判断上架之前是否有店铺 有即可以上下架
PublicApi.getTemplateShopFindShop().then(res => {
if(res.data.logo){
setCheckedValues(values)
}else{
message.error('您还没有开通店铺，无法上下架商品！')
}
})
}
const clickUp = (param: any, id: any) => { // param: 0 下架 1上架
......
src/pages/commodity/products/schema/channelSchema.tsx
View file @ db2371d2
......@@ -61,28 +61,89 @@ export const channelSchema: ISchema = {
filterOption: false,
notFoundContent: null,
style: { width: '174px', lineHeight: '32px' },
value: null,
searchValue: null,
dataOption: [],
},
},
customerCategoryId: {
type: 'string',
enum: [],
'x-component': 'CustomInputSearch',
'x-component-props': {
placeholder: '商品品类',
showSearch: true,
showArrow: true,
defaultActiveFirstOption: false,
filterOption: false,
notFoundContent: null,
style: { width: '174px', lineHeight: '32px' },
searchValue: null,
dataOption: []
},
},
status: {
type: 'string',
enum: [],
enum: [
{
label: '待提交审核',
value: 1,
},
{
label: '待审核',
value: 2,
}
],
'x-component-props': {
placeholder: '商品状态'
placeholder: '商品状态',
style: { width: '174px' },
},
},
price: {
type: 'string',
// price: {
// type: 'string',
// 'x-component-props': {
// placeholder: '商品价格'
// },
// },
'NO_NAME_FIELD_$2': {
type: 'object',
'x-component': 'layout',
'x-component-props': {
placeholder: '商品价格'
style: { width: '174px', display: 'flex', justifyContent: 'flex-start' },
},
properties: {
min: {
type: 'string',
"x-component-props": {
placeholder: '最低价',
type: 'number',
min: 0,
style: { width: '70px', textAlign: 'center', borderRight: 0 }
}
},
"gap": {
type: 'string',
"x-component-props": {
style: {
width: '34px',
borderLeft: 0,
borderRight: 0,
pointerEvents: 'none',
backgroundColor: '#fff',
textAlign: 'center'
},
placeholder: "~",
disabled: true,
}
},
max: {
type: 'string',
"x-component-props": {
placeholder: '最高价',
type: 'number',
min: 0,
style: { width: '70px', textAlign: 'center', borderLeft: 0 }
}
},
}
},
submit: {
'x-component': 'Submit',
......
src/pages/commodity/products/viewProducts.tsx
View file @ db2371d2
......@@ -212,14 +212,23 @@ const viewProducts: React.FC<{}> = () => {
</Descriptions>
</>
/* 定价类型 */
//1-现货价格,2-价格需要询价,3-积分兑换商品
const renderPriceType = (type: number) => {
if(type === 1 ) return '现货价格'
if(type === 2 ) return '价格需要询价'
if(type === 3 ) return '积分兑换商品'
}
const renderDeliveryType = (type: number) => {
if(type === 1) return '物流（默认）'
if(type === 2) return '自提'
if(type === 3) return '无需配送'
}
const renderCarriageType = (type: number) => {
if(type === 1) return '卖家承担运费（默认）'
if(type === 2) return '买家承担运费'
}
/* 构建表格数据 */
const constructTableData = (productName: string, unitPriceAndPicList: GetProductCommodityGetCommodityResponse["unitPriceAndPicList"]) => {
// 构建列
......@@ -365,15 +374,15 @@ const viewProducts: React.FC<{}> = () => {
<p>配送方式：</p>
</Col>
<Col span={20}>
<p>物流（默认）</p>
<p>{renderDeliveryType(productDetail?.logistics?.deliveryType)}</p>
</Col>
</Row>
<Row>
<Col span={4}>
<p>运费方式：</p>
<p>运送方式：</p>
</Col>
<Col span={20}>
<p>买家承担运费</p>
<p>{renderCarriageType(productDetail?.logistics?.carriageType)}</p>
</Col>
</Row>
<Row>
......
src/store/product/index.ts
View file @ db2371d2
......@@ -13,6 +13,7 @@ class ProductStore implements IProductModule {
@observable public areaOption: any[] = [];
@observable public productInfoByEdit: GetProductCommodityGetCommodityResponse;
@observable public productDescription: IDecsParams;
@observable public isAllAttributePic: boolean = null; // 是否所有属性共用
/** 计算操作 **/
// 加工接口返回的数据，用户编辑回显数据
......@@ -37,10 +38,15 @@ class ProductStore implements IProductModule {
let attributeIdArr = attributeArr.map(item => item.id)
let attributeValueIdArr = attributeValueArr.map(item => item.map(_item => _item.id))
let tempObj = {}
console.log(attributeArr, attributeValueArr, this.attributeLists, this.productSelectAttribute,'store Item')
attributeIdArr.map((item, index) => {
if(attributeValueIdArr[index].length>1){
tempObj[item] = attributeValueIdArr[index]
}else{
// 类型为2如果是一个的话 为配合checkbox Group也要生成数组
if(this.attributeLists.filter(_item => _item.id === item)[0]?.type === 2) // 多选
tempObj[item] = attributeValueIdArr[index]
else
tempObj[item] = attributeValueIdArr[index][0]
}
})
......@@ -126,6 +132,11 @@ class ProductStore implements IProductModule {
this.productDescription = data
}
@action.bound
public setIsAllAttributePic(data: boolean) {
this.isAllAttributePic = data
}
}
export default ProductStore
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