Commit c4b50366 authored by 前端-钟卫鹏's avatar 前端-钟卫鹏

fix

parent 4a38f03d
export default {
'/api': {
'target': 'http://10.0.0.25:8100/',
'target': 'http://10.0.0.25:8900/',
'changeOrigin': true,
'pathRewrite': { '^/api' : '' },
}
......
import { GetProductGoodsGetGoodsListResponseDetail } from '@/services';
interface InnerAttributeValueList {
customerAttributeValueId: number;
value: string;
}
export interface IProductSelectAttribute {
attributeName: string;
customerAttributeId: number;
customerAttributeValueList: InnerAttributeValueList[]
isPrice: boolean;
}
export interface IProductModule {
attributeLists: any[];
productName: string;
productSelectAttribute: any[];
selectedGoods: any[];
productSelectAttribute: IProductSelectAttribute[];
selectedGoods: GetProductGoodsGetGoodsListResponseDetail[];
tableDataSource: any[];
priceAttributeParams: any[]; // 价格设置的传输数据
setProductName(name: string):void;
setProductSelectAttribute(list: any[]):void;
setSelectedGoods(lists: any[]):void;
setTableDataSource(datas: any[]):void;
clearData(data: any[]):void;
setAttributeLists(lists: any[]): void;
setProductName(name: string): void;
setProductSelectAttribute(list: IProductSelectAttribute[]): void;
setSelectedGoods(lists: GetProductGoodsGetGoodsListResponseDetail[]): void;
setTableDataSource<T>(datas: T[]): void;
clearData(data: any[]): void;
setPriceAttributeParams<T>(datas: T[]): void;
}
......@@ -127,8 +127,10 @@ const BasicInfoForm: React.FC<Iprops> = (props) => {
let seletCategoryId = value[1] || value[0]
if (value.length > 0) {
PublicApi.getProductCustomerGetCustomerCategoryById({ id: seletCategoryId }).then(res => {
onChangeAttributeList(res.data?.customerAttributeList)
setShowCategory(res.data.name)
const { data } = res
onChangeAttributeList(data?.customerAttributeList)
setShowCategory(data.name)
ProductStore.setAttributeLists(data?.customerAttributeList)
})
}
else
......
.colBox{
background-color: #FAFBFC;
position: relative;
ul{
margin-bottom: 42px;
margin-top: 12px;
list-style: none;
padding: 0;
li{
padding-left: 24px;
height: 32px;
line-height: 32px;
color: #172B4D;
display: flex;
justify-content: space-between;
margin: 8px 0;
cursor: pointer;
// span{
// padding-top: 12px;
// padding-bottom: 12px;
// }
a{
color: #97A0AF;
float: right;
padding-right: 24px;
}
}
.actived-li{
box-sizing: border-box;
font-weight: bold;
border-left: 2px solid #00B37A;
}
.tipTitle{
height:20px;
font-size:12px;
font-weight:400;
color:rgba(151,160,175,0.8);
line-height:20px;
margin: 25px 0 20px 0;
padding-left: 24px;
}
}
.addBtn{
margin-top: 30px;
background-color: #F4F5F7;
width: 100%;
position: absolute;
bottom: 0;
}
}
\ No newline at end of file
......@@ -49,6 +49,7 @@ const LogisticsForm: React.FC<Iprops> = (props) => {
name="logistic-form"
labelAlign="left"
ref={logisticsFormRef}
colon={false}
>
<Form.Item
name="deliveryType"
......
......@@ -40,6 +40,7 @@ const OtherForm: React.FC<Iprops> = (props) => {
name="other-form"
labelAlign="left"
ref={otherFormRef}
colon={false}
>
<Form.Item
name="isInvoice"
......
......@@ -11,8 +11,6 @@ import { inject, observer } from 'mobx-react'
// import { IProductModule } from '@/module/productModule'
// import { IStore } from '@/store';
import { store } from '@/store'
import ProductDescForm from './productDescForm'
import { Effects } from 'bizcharts'
const layout = {
labelCol: {
......@@ -54,7 +52,7 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
const [colums, setColumns] = useState<ColumnType<any>[]>()
const { ProductStore } = store
const { productName, selectedGoods, productSelectAttribute, tableDataSource, setTableDataSource, clearData } = ProductStore
const { productName, selectedGoods, productSelectAttribute, tableDataSource, setTableDataSource, clearData, setPriceAttributeParams } = ProductStore
_tableDataSource = useMemo(() =>tableDataSource, [tableDataSource]) // 保持最新值
......@@ -174,9 +172,9 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
combineArray.map((_rowArr: any[], i: any) => { // _rowArr 属性值数组
let _tempObj: any = { 索引: i ,商品名称: productName }
console.log(_rowArr,'_rowArr')
Array.isArray(_rowArr) && _rowArr.map((__rowArr, index) => {
Array.isArray(_rowArr) ? _rowArr.map((__rowArr, index) => {
_tempObj[_attributeNameArr[index]] = __rowArr
})
}) : _tempObj[_attributeNameArr[i]] = _rowArr
_tempObj['对应货品'] = selectedGoods.length > 0 && selectedGoods[0].id
_tempObj['单价'] = {}
_tableData.push(_tempObj)
......@@ -200,16 +198,22 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
console.log('生成传输数据', combineAttributeArray, attributeObjArr, attributeValObjArr)
Array.isArray(combineAttributeArray) && combineAttributeArray.map((item, index)=>{ // 当属性减少的时候 这个combine数组还是之前的
let _tempArr: any = [], _tempObj: any = {}
Array.isArray(item) && item.map((_item, _index)=>{
Array.isArray(item) ? item.map((_item, _index)=>{
let _tempObject: any = {};
_tempObject.customerAttributeId = attributeObjArr[_index].customerAttributeId
_tempObject.customerAttributeName = attributeObjArr[_index].attributeName
_tempObject.customerAttributeValueId = attributeValObjArr[_index].find(__item=>__item.value===item[_index]).customerAttributeValueId
_tempObject.value = item[_index]
_tempArr.push(_tempObject)
}) : _tempArr.push({
customerAttributeId: attributeObjArr[0].customerAttributeId,
customerAttributeName: attributeObjArr[0].attributeName,
customerAttributeValueId: attributeValObjArr[0][0].customerAttributeValueId,
value: item.toString()
})
_paramsArray.push({goodsId: _tableDataSource[index] && _tableDataSource[index]['对应货品'], goodsCustomerAttributeList: _tempArr, unitPrice: _tableDataSource[index]&&_tableDataSource[index]['单价']}) /*带上货品id 带上单价*/
})
setPriceAttributeParams(_paramsArray)
console.log(_paramsArray,'params')
}
......@@ -324,6 +328,7 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
name="price-form"
labelAlign="left"
ref={priceFormRef}
colon={false}
>
<Form.Item
name="unitId"
......
......@@ -85,12 +85,17 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
})
}
paramsArray.push(params)
console.log(paramsArray,'paramsArray')
let resultParams = Object.values(paramsArray.reduce((item, next)=>{
let _resultParams = Object.values(paramsArray.reduce((item, next)=>{
item[next.customerAttributeId] = next;
return item
},{}))
console.log(resultParams,'result', paramsArray) // 最终传输数据
//遍历 排空
let resultParams = _resultParams.filter((_item: any)=>_item.customerAttributeValueList.length!=0)
console.log(resultParams,'resultParams') // 最终传输数据
ProductStore.setProductSelectAttribute(resultParams)
}
......@@ -164,6 +169,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
labelAlign="left"
onFinish={onFinish}
ref={productAttributeFormRef}
colon={false}
>
<Tabs defaultActiveKey="1" tabPosition="left">
{
......
import React, { useState, useEffect } from 'react'
import {history} from 'umi'
import { Button, Form, Select, Checkbox, Tooltip, Radio, Input, Table, Modal, Row, Col, Alert, Upload } from 'antd'
import styles from '../index.less'
import { PublicApi } from '@/services/api'
import { StandardTable } from 'god'
import { ColumnType } from 'antd/lib/table/interface'
import { EyeOutlined, QuestionCircleOutlined, SettingOutlined, PlusOutlined, MinusOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons'
import { Button, Form, Select, Checkbox, Tooltip, message, Input, Table, Modal, Row, Col, Alert, Upload } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import CustomTabs, { ItemPane } from '@/components/CustomTabs'
import ImageCrop from '@/components/ImageCrop'
import CustomMediaLibrary from '@/components/MediaLibrary'
import styles from './index.less'
import { UploadFile, UploadChangeParam } from 'antd/lib/upload/interface';
import { inject, observer } from 'mobx-react'
// import { IProductModule } from '@/module/productModule'
// import { IStore } from '@/store';
import { store } from '@/store'
export interface Iprops {
......@@ -32,116 +33,52 @@ const _fileList = [
// status: 'done',
// url: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
// },
// {
// uid: '-3',
// name: 'image.png',
// status: 'done',
// url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
// },
// {
// uid: '-4',
// name: 'image.png',
// status: 'done',
// url: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
// },
]
const _panes = [
{ title: '所有属性共用', content: '默认内容 商品图片 1', key: '1', isDelete: false },
// { title: '皓月银', content: '默认内容 商品图片 2', key: '2', isDelete: true },
// { title: '星空灰', content: '默认内容 商品图片 3', key: '3', isDelete: true },
]
let newTabIndex = 0;
const ProductImageForm: React.FC<Iprops> = (props) => {
const [addTabsForm] = Form.useForm()
const [defaultChecked, setDefaultChecked] = useState(0)
const [panes, setPanes] = useState<ItemPane[]>(_panes)
const [visibleAddTabs, setVisibleAddTabs] = useState(false)
const [visibleMedias, setVisibleMedias] = useState(false)
const [defaultChecked, setDefaultChecked] = useState(-1)
const [fileList, setFileList] = useState<any[]>(_fileList)
const [visibleCrop, setVisibleCrop] = useState(false)
const [imgCropUrl, setImgCropUrl] = useState("")
const [imgCropCurrent, setImgCropCurrent] = useState({})
const [imgCropView, setImgCropView] = useState("")
const [fileArray, setFileArray] = useState<any[]>(_fileList)
const [priceAttributeParamsByRender, setPriceAttributeParamsByRender] = useState<any[]>([])
const [imageUrl, setImageUrl] = useState<any>([
{
uid: '-1',
name: 'image.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
},
{
uid: '-2',
name: 'image.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
},
])
const [previewVisible, setPreviewVisible] = useState(false)
const [previewImage, setPreviewImage] = useState('')
const [previewTitle, setPreviewTitle] = useState('')
useEffect(() => {
let newPane = [...panes]
newPane[0].content = pictureCrads()
setPanes(newPane)
}, [fileList])
const add = (v: any) => {
const activeKey = `newTab${newTabIndex++}`;
let newArray = [...panes]
newArray.push({
key: activeKey,
title: v.tagsName,
// content: `新添加标签页 固定内容${newTabIndex++}`,
content: pictureCrads(),
isDelete: true
});
setPanes(newArray);
}
const handleEdit = (file: any) => {
console.log(file, '点击edit图片')
setVisibleCrop(true)
setImgCropUrl(file.url)
setImgCropCurrent(file)
}
const handleDelete = (file: any) => {
let fList = [...fileList]
const _indx = fList.indexOf(file)
fList.splice(_indx, 1)
setFileList(fList)
}
const handleCropOk = (url: string) => {
setVisibleCrop(false);
setImgCropView(url);
let obj = { ...imgCropCurrent, url }
let fList = [...fileList]
//@ts-ignore
let _indx = fList.indexOf(imgCropCurrent)
//@ts-ignore
fList.splice(_indx, 1, obj)
setFileList(fList)
console.log("裁剪OK,返回url", _indx, obj, fList);
}
const handleCropCancel = () => {
setVisibleCrop(false);
console.log("裁剪不OK");
}
const handleUpload = () => {
console.log('点击上传,添加媒体')
setVisibleMedias(true)
}
const clickAddButton = () => {
setVisibleAddTabs(true);
}
const { ProductStore } = store
const { priceAttributeParams, attributeLists } = ProductStore
// 给数据添加图片字段
useEffect(()=>{
console.log(attributeLists, priceAttributeParams,'p')
let _priceAttributeParams = priceAttributeParams.map(_item=>{
let _obj = {..._item}
_obj.commodityPic=[]
return _obj
})
setPriceAttributeParamsByRender(_priceAttributeParams)
console.log(_priceAttributeParams, '_p')
},[priceAttributeParams])
const clickItemTab = (_index: number) => {
console.log(_index, '点击项')
setDefaultChecked(_index)
}
const clickDeleteItemTab = (_index: number) => {
console.log(_index, '点击删除项')
let paneArray = [...panes]
paneArray.splice(_index, 1)
setPanes(paneArray)
console.log(priceAttributeParams, 'params')
}
const uploadButton = (
......@@ -160,6 +97,18 @@ const ProductImageForm: React.FC<Iprops> = (props) => {
});
}
const beforeUpload = (file: UploadFile) => {
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 / 1024 < 2;
if (!isLt2M) {
message.error('上传图片不超过2MB!');
}
return isJpgOrPng && isLt2M;
}
const handlePreview = async file => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
......@@ -168,136 +117,110 @@ const ProductImageForm: React.FC<Iprops> = (props) => {
setPreviewImage(file.url || file.preview)
setPreviewVisible(true)
setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1))
};
const handleChange = ({ fileList }) => setFileList(fileList);
const pictureCrads = () => (
<>
<div className={styles.pictureCardBox}>
{/* {
fileList && fileList.length > 0 && fileList.map((item, index) =>
<div className={styles.cardBox} key={item.uid}>
<div className={styles.contentBox}>
<img src={item.url} alt="" />
<p>
<Button type="text" icon={<FormOutlined />} title="编辑" onClick={() => handleEdit(item)} />
<Button type="text" icon={<DeleteOutlined />} title="删除" onClick={() => handleDelete(item)} />
</p>
</div>
</div>
)
} */}
<div className="clearfix">
<Upload
action="/api/file/file/upload"
listType="picture-card"
fileList={fileList}
onPreview={handlePreview}
onChange={handleChange}
data={{fileType: 2}}
>
{fileList.length >= 6 ? null : uploadButton}
</Upload>
</div>
{/* <div className={styles.cardAddBox} onClick={handleUpload}>
<p><PlusOutlined /><br />点击上传</p>
</div> */}
</div>
<Alert
banner
showIcon={false}
message=""
description={<>1. 一次可以选择 6 张图片<br />2. 图片尺寸为 800*800,单张大小不超过 600K,仅支持JPEG/JPG/PNG格式<br />3. 图片质量要清晰,不要虚化,建议主图为白色背景正面图</>}
type="info"
closable
style={{ backgroundColor: '#F0F8FF', color: '#1B9AEE' }}
/>
{/* <div>
<i>图片预览(供调试)</i>
{imgCropView ? <img src={imgCropView} alt="预览" /> : <p>暂空</p>}
</div> */}
</>
)
const handleOkAddTabs = () => {
console.log('操作了OK')
addTabsForm.validateFields().then(values => {
console.log(values, 'validate')
add(values)
setVisibleAddTabs(false)
}).catch(err => console.error(err, 'error'))
}
const handleCancelAddTabs = () => {
setVisibleAddTabs(false)
}
const handleOkAddMedias = (selectedData: any) => {
console.log('操作了OK添加媒体,选择的图片数据为:', selectedData)
setVisibleMedias(false)
}
const handleCancelAddMedias = () => {
console.log('操作了取消添加媒体')
setVisibleMedias(false)
const handleChange = ({ fileList }, index) => {
console.log(priceAttributeParamsByRender, fileList, index, 'files change')
setImageUrl(fileList)
}
return (<>
<CustomTabs
renderTabs={panes}
defaultChecked={defaultChecked}
isShowAddButton={true}
clickAddButton={clickAddButton}
clickItemTab={clickItemTab}
clickDeleteItemTab={clickDeleteItemTab}
/>
<Modal
title="添加标签页"
visible={visibleAddTabs}
onOk={handleOkAddTabs}
onCancel={handleCancelAddTabs}
okText="确定"
cancelText="取消"
>
<Form
{...layoutAdd}
name="tags-form"
form={addTabsForm}
>
<Form.Item
label="标签名称"
name="tagsName"
rules={[{ required: true, message: '请输入标签名称!' }]}
>
<Input />
</Form.Item>
</Form>
</Modal>
<ImageCrop
visible={visibleCrop}
imgUrl={imgCropUrl}
handleConfirm={handleCropOk}
handleWithDraw={handleCropCancel}
/>
{/* 媒体库组件,暂不使用,先直接上传图片 */}
<CustomMediaLibrary
visibleMedias={visibleMedias}
clickOkAddMedias={handleOkAddMedias}
clickCancelAddMedias={handleCancelAddMedias}
/>
<div>
<Row>
<Col span={4} className={styles.colBox}>
<ul>
<li className={defaultChecked == -1 ? styles.activedLi : ""} onClick={()=>clickItemTab(-1)}>
<span>所有属性共用</span>
</li>
{priceAttributeParamsByRender && priceAttributeParamsByRender.length>0 && <span className={styles.tipTitle}>按特定属性添加图片</span>}
{
priceAttributeParamsByRender && priceAttributeParamsByRender.length>0 && priceAttributeParamsByRender.map(
(item, index) => {
return Array.isArray(item.goodsCustomerAttributeList) && <>
<li key={item.goodsId} className={defaultChecked == index ? styles.activedLi : ""} onClick={()=>clickItemTab(index)}>
<span>
{
item.goodsCustomerAttributeList.map((_item, _index)=>_item.value).join('/')
}
</span>
</li>
</>
}
)
}
</ul>
</Col>
<Col span={20} style={{ padding: 24 }}>
<div style={defaultChecked == -1 ? {display: 'block'} : {display: 'none'}}>
<div className={styles.pictureCardBox}>
<div className="clearfix">
<Upload
name="file"
action="/api/file/file/upload"
listType="picture-card"
fileList={imageUrl}
beforeUpload={beforeUpload}
onPreview={handlePreview}
onChange={(files)=>handleChange(files, -1)}
data={{fileType: 2}}
>
{fileList.length >= 6 ? null : uploadButton}
</Upload>
</div>
</div>
<Alert
banner
showIcon={false}
message=""
description={<>1. 一次可以选择 6 张图片<br />2. 图片尺寸为 800*800,单张大小不超过 600K,仅支持JPEG/JPG/PNG格式<br />3. 图片质量要清晰,不要虚化,建议主图为白色背景正面图</>}
type="info"
closable
style={{ backgroundColor: '#F0F8FF', color: '#1B9AEE' }}
/>
</div>
{
priceAttributeParamsByRender && priceAttributeParamsByRender.length>0 && priceAttributeParamsByRender.map((item, index) =>
<div key={index} style={defaultChecked == index ? {display: 'block'} : {display: 'none'}}>
<div className={styles.pictureCardBox}>
<div className="clearfix">
<Upload
name="file"
action="/api/file/file/upload"
listType="picture-card"
fileList={item.commodityPic}
beforeUpload={beforeUpload}
onPreview={handlePreview}
onChange={(files)=>handleChange(files, index)}
data={{fileType: 2}}
>
{item.commodityPic.length >= 6 ? null : uploadButton}
</Upload>
</div>
</div>
<Alert
banner
showIcon={false}
message=""
description={<>1. 一次可以选择 6 张图片<br />2. 图片尺寸为 800*800,单张大小不超过 600K,仅支持JPEG/JPG/PNG格式<br />3. 图片质量要清晰,不要虚化,建议主图为白色背景正面图</>}
type="info"
closable
style={{ backgroundColor: '#F0F8FF', color: '#1B9AEE' }}
/>
</div>
)
}
</Col>
</Row>
<Modal
visible={previewVisible}
title={previewTitle}
footer={null}
onCancel={()=>setPreviewVisible(false)}
>
<img alt="商品图片" style={{ width: '100%' }} src={previewImage} />
<img alt="example" style={{ width: '100%' }} src={previewImage} />
</Modal>
</div>
</>)
}
export default ProductImageForm
\ No newline at end of file
export default observer(ProductImageForm)
\ No newline at end of file
......@@ -6,7 +6,7 @@ import { PublicApi } from '@/services/api'
import { StandardTable } from 'god'
import { ColumnType } from 'antd/lib/table/interface'
import { EyeOutlined } from '@ant-design/icons'
import { GetProductGoodsGetGoodsListResponseDetail } from '@/services';
import { inject, observer } from 'mobx-react'
// import { IProductModule } from '@/module/productModule'
// import { IStore } from '@/store';
......@@ -28,7 +28,7 @@ export interface Iprops {
const SelectGoodsForm: React.FC<Iprops> = (props) => {
const [selectGoodsForm] = Form.useForm()
const [showSelectGoods, setIsSelectGoods] = useState(false)
const [selectGoodsRow, setSelectGoodsRow] = useState<any[]>([]) // 模态框选择的行数据
const [selectGoodsRow, setSelectGoodsRow] = useState<GetProductGoodsGetGoodsListResponseDetail[]>([]) // 模态框选择的行数据
const [selectedGoodsRowKeys, setSelectedGoodsRowKeys] = useState<Array<number>>([])
const { ProductStore } = store
......@@ -104,6 +104,7 @@ const SelectGoodsForm: React.FC<Iprops> = (props) => {
form={selectGoodsForm}
name="select-goods"
labelAlign="left"
colon={false}
>
<Form.Item
label="是否选择货品"
......
This source diff could not be displayed because it is too large. You can view the blob instead.
import {action, computed, observable, runInAction} from 'mobx'
import { IProductModule } from '@/module/productModule'; // mobx要用到的数据类型
import { IProductModule, IProductSelectAttribute } from '@/module/productModule'; // mobx要用到的数据类型
import { GetProductGoodsGetGoodsListResponseDetail } from '@/services';
class ProductStore implements IProductModule {
@observable public attributeLists: any[] = [];
@observable public productName: string = "";
@observable public productSelectAttribute: any[] = [];
@observable public selectedGoods: any[] = [];
@observable public productSelectAttribute: IProductSelectAttribute[] = [];
@observable public selectedGoods: GetProductGoodsGetGoodsListResponseDetail[] = [];
@observable public tableDataSource: any[] = [];
@observable public priceAttributeParams: any[] = [];
/** 定义动作区块,外部调用,改变对应的状态 **/
// 可以改变存的testText值
@action.bound
public setAttributeLists(lists: any[]) {
this.attributeLists = lists;
}
@action.bound
public setProductName(name: string) {
this.productName = name;
}
......@@ -20,12 +28,12 @@ class ProductStore implements IProductModule {
}
@action.bound
public setSelectedGoods(list: any[]) {
public setSelectedGoods(list: GetProductGoodsGetGoodsListResponseDetail[]) {
this.selectedGoods = list;
}
@action.bound
public setTableDataSource(datas: any[]) {
public setTableDataSource<T>(datas: T[]) {
console.log(datas, 'innerBox')
this.tableDataSource = datas;
}
......@@ -34,6 +42,11 @@ class ProductStore implements IProductModule {
public clearData(data: any[]) {
this.tableDataSource = data;
}
@action.bound
public setPriceAttributeParams<T>(datas: T[]) {
this.priceAttributeParams = datas
}
}
......
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