Skip to content

J
jinfa-platform
Commit 9c677677 authored by LeeJiancong's avatar LeeJiancong
Browse files
Options

对接待提交

parents f87949ab 4a38f03d
Show whitespace changes
Inline Side-by-side
Showing with 377 additions and 178 deletions
src/module/productModule/index.ts
View file @ 9c677677
......@@ -8,4 +8,5 @@ export interface IProductModule {
setProductSelectAttribute(list: any[]):void;
setSelectedGoods(lists: any[]):void;
setTableDataSource(datas: any[]):void;
clearData(data: any[]):void;
}
src/pages/commodity/products/addProducts.tsx
View file @ 9c677677
......@@ -27,11 +27,22 @@ const AddProducts: React.FC<{}> = (props) => {
const onSave = () => {
console.log('点击保存')
console.log(formRefs, 'formrefs')
if(formRefs.length > 0){
try{
let data = formRefs.map(async __ => {
return ( await __.current.validateFields())
})
console.log(data)
// let vaild = data.every(__ => Boolean(__))
// return vaild ? data :vaild
}catch(e){
console.log(e,'error')
}
}
}
const callback = (key: any) => {
console.log(key)
console.log(attributeList)
}
return (<PageHeaderWrapper
......
src/pages/commodity/products/addProductsItem/logisticsForm.tsx
View file @ 9c677677
import React, { useState, useEffect, useRef } from 'react'
import {history} from 'umi'
import { Button, Form, Select, Checkbox, Tooltip, Radio, Input, Table, Modal, Row, Col } 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 } from '@ant-design/icons'
import { GetLogisticsSelectListCompanyResponse, GetLogisticsSelectListShipperAddressResponse } from '@/services'
const layout = {
labelCol: {
......@@ -27,10 +24,22 @@ const LogisticsForm: React.FC<Iprops> = (props) => {
const logisticsFormRef = useRef()
const [logisticsForm] = Form.useForm()
const [logisticsCompanyLists, setLogisticsCompanyLists] = useState<GetLogisticsSelectListCompanyResponse>()
const [logisticsAddressList, setLogisticsAddressList] = useState<GetLogisticsSelectListShipperAddressResponse>()
useEffect(()=>{
//传入ref给父级
onRef(logisticsFormRef)
// 获取发货地址 物流公司
PublicApi.getLogisticsSelectListShipperAddress().then(res=>{
setLogisticsAddressList(res.data)
})
PublicApi.getLogisticsSelectListCompany().then(res=>{
setLogisticsCompanyLists(res.data)
})
}, [])
return (<>
......@@ -42,7 +51,7 @@ const LogisticsForm: React.FC<Iprops> = (props) => {
ref={logisticsFormRef}
>
<Form.Item
name="transportType"
name="deliveryType"
label="配送方式"
rules={[
{
......@@ -59,7 +68,7 @@ const LogisticsForm: React.FC<Iprops> = (props) => {
</Radio.Group>
</Form.Item>
<Form.Item
name="chargeType"
name="carriageType"
label="运费方式"
rules={[
{
......@@ -85,9 +94,9 @@ const LogisticsForm: React.FC<Iprops> = (props) => {
]}
>
<Input suffix="KG" placeholder="请输入重量" />
<Checkbox>使用运费模板（只有买家承担运费才能选择）</Checkbox>
{/* <Checkbox>使用运费模板（只有买家承担运费才能选择）</Checkbox> */}
</Form.Item>
<Form.Item
{/* <Form.Item
name="chargeTemplate"
label="运费模板"
>
......@@ -99,31 +108,31 @@ const LogisticsForm: React.FC<Iprops> = (props) => {
<Option value="EMS">EMS模板</Option>
<Option value="COM">一般快递模板</Option>
</Select>
</Form.Item>
</Form.Item> */}
<Form.Item
name="address"
name="sendAddressId"
label="发货地址"
>
<Select
placeholder="请选择发货地址"
allowClear
>
<Option value="1">1</Option>
<Option value="2">2</Option>
<Option value="3">3</Option>
{
logisticsAddressList?.length > 0 && logisticsAddressList.map(_=><Option key={_.id} value={_.id}>{_.fullAddress}</Option>)
}
</Select>
</Form.Item>
<Form.Item
name="express"
name="companyId"
label="物流公司"
>
<Select
placeholder="请选择物流公司"
allowClear
>
<Option value="EMS">EMS</Option>
<Option value="SF">顺丰</Option>
<Option value="CN">菜鸟果果</Option>
{
logisticsCompanyLists?.length > 0 && logisticsCompanyLists.map(_=><Option key={_.id} value={_.id}>{_.name}</Option>)
}
</Select>
</Form.Item>
</Form>
......
src/pages/commodity/products/addProductsItem/otherForm.tsx
View file @ 9c677677
......@@ -42,28 +42,28 @@ const OtherForm: React.FC<Iprops> = (props) => {
ref={otherFormRef}
>
<Form.Item
name="bill"
name="isInvoice"
label="提供发票"
>
<Radio.Group size="small">
<Radio.Button value="1" style={{ width: 100, textAlign: 'center' }}>是</Radio.Button>
<Radio.Button value="0" style={{ width: 100, textAlign: 'center' }}>否</Radio.Button>
<Radio.Button value={true} style={{ width: 100, textAlign: 'center' }}>是</Radio.Button>
<Radio.Button value={false} style={{ width: 100, textAlign: 'center' }}>否</Radio.Button>
</Radio.Group>
</Form.Item>
<Form.Item
name="maitou"
name="marks"
label="唛头"
>
<Input maxLength={25} placeholder="请输入唛头（最长25个字符）" />
</Form.Item>
<Form.Item
name="statement"
name="packing"
label="包装清单"
>
<TextArea maxLength={120} rows={4} placeholder="最长120个字符" />
</Form.Item>
<Form.Item
name="saleService"
name="afterService"
label="售后服务"
>
<TextArea maxLength={300} rows={4} placeholder="最长300个字符" />
......
src/pages/commodity/products/addProductsItem/priceAttributeForm.tsx
View file @ 9c677677
import React, { useState, useEffect, useRef, useContext, useCallback } from 'react'
import React, { useState, useEffect, useRef, useContext, useCallback, useMemo } from 'react'
import {history} from 'umi'
import { Button, Form, Select, Checkbox, Tooltip, Radio, Input, Table, Modal, Row, Col } 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 } from '@ant-design/icons'
import { EyeOutlined, QuestionCircleOutlined, SettingOutlined, PlusOutlined, MinusOutlined, ContactsFilled, CodeSandboxCircleFilled } from '@ant-design/icons'
import { inject, observer } from 'mobx-react'
// import { IProductModule } from '@/module/productModule'
......@@ -41,41 +41,72 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
const priceFormRef = useRef()
const [priceForm] = Form.useForm()
const [setPriceForm] = Form.useForm()
const [planPrice, setPlanPrice] = useState(1)
const [planPrice, setPlanPrice] = useState(1) //商品定价类型
const [unitData, setUnitData] = useState<any>([])
const [unitValue, setUnitValue] = useState(undefined)
const [setPriceModal, setSetPriceModal] = useState(false)
const [ladderPrice, setLadderPrice] = useState(false)
const [curretSetPriceRow, setCurrentSetPriceRow] = useState<any>()
// const [attribtueNameArray, setAttributeNameArray] = useState<any>()
// const [tableDataSource, setTableDataSource] = useState<any[]>()
const [stateTableData, setStateTableData] = useState<any[]>()
const [combineAttributeArray, setCombineAttributeArray] = useState<any[]>([])
const [attributeObjArr, setAttributeObjArr] = useState<any[]>([])
const [attributeValObjArr, setAttributeValObjArr] = useState<any[]>([])
const [colums, setColumns] = useState<ColumnType<any>[]>()
const { ProductStore } = store
const { productName, selectedGoods, productSelectAttribute, tableDataSource, setTableDataSource } = ProductStore
const { productName, selectedGoods, productSelectAttribute, tableDataSource, setTableDataSource, clearData } = ProductStore
_tableDataSource = useMemo(() =>tableDataSource, [tableDataSource]) // 保持最新值
useEffect(()=>{
console.log('000')
//传入ref给父级
onRef(priceFormRef)
// 采用mobx数据 生成表格的column
onRef(priceFormRef) //初始化或组件卸载先置空_tableDataSource和tableDataSource
// clearData([])
// _tableDataSource = []
return () => {
console.log(111)
// clearData([])
// _tableDataSource = []
console.log(_tableDataSource, tableDataSource, '组件卸载清空data')
}
},[])
useEffect(()=>{
console.log(222)
constructedCallback()
},[productName, selectedGoods, productSelectAttribute, planPrice])
// 构建表格列和data
const constructedCallback = () => {
console.log(productName,'name')
console.log(333)
let _col = [];
let col_productName = { title: '商品名称', dataIndex: '商品名称', key: '商品名称' }
_col.push(col_productName)
let _priceAttribute = productSelectAttribute.filter(_item=>_item.isPrice)
let len = _priceAttribute.length
let _attributeNameArr = [];
let _attributeValueArr = [];
let _temp_attributeObjArr = [] // 取id备用
let _temp_attributeValObjArr = [] // 取id备用
let _attributeNameArr = []
let _attributeValueArr = []
if(len){ // 提取价格属性 属性名数组 属性值SKU数组
_priceAttribute.map(_item=>{
_attributeNameArr.push(_item.attributeName) // 用于列header
_temp_attributeObjArr.push({attributeName: _item.attributeName, customerAttributeId: _item.customerAttributeId})
let _tempArr = []
_item.customerAttributeValueList.map(__item => _tempArr.push(__item.value))
let _tempObjArr = [] // 取id备用
_item.customerAttributeValueList.map(__item => {
_tempArr.push(__item.value)
_tempObjArr.push({customerAttributeValueId: __item.customerAttributeValueId, value: __item.value})
})
_attributeValueArr.push(_tempArr) // 价格属性的属性值数组 用于SKU组合
_temp_attributeValObjArr.push(_tempObjArr)
})
}
let combineArray = SKUCombine(_attributeValueArr)
if(selectedGoods.length>0){ // 把货品放入表格列中
console.log(_priceAttribute, _attributeNameArr, _attributeValueArr, _temp_attributeObjArr, _temp_attributeValObjArr, '>>>>>') // ...................................
if(selectedGoods.length>0){
_col.push({
title: '对应货品',
dataIndex: '对应货品',
......@@ -93,7 +124,7 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
})
}
if(_attributeNameArr.length>0){ // 把属性名称放入表格列中
if(_attributeNameArr.length>0){
_attributeNameArr.map( _attr => {
_col.push({
title: _attr,
......@@ -102,55 +133,85 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
})
})
}
_col.push({ // 放入单价列
title: '单价（元）',
dataIndex: '单价（元）',
key: '单价（元）',
_col.push({
title: planPrice===3?'所需积分':'单价（元）',
dataIndex: '单价',
key: '单价',
width: 200,
render: (text: any, record: any) => {
if(JSON.stringify(text)!='{}'){
for(let _i of text){
}
}
render: (text, record) => {
console.log(444)
let _priceRange = _tableDataSource[record['索引']]["单价"]
if (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 /></>
})
}
})
_col.push({ // 放入操作列
_col.push({
title: <>操作<a style={{ color: '#868f9e' }}> <SettingOutlined /></a></>,
dataIndex: 'option',
width: 100,
render: (text: any, record: any) => {
return (
<>
<Button type='link' onClick={()=>clickSetPrice(record)}>设置价格</Button>
<Button type='link' onClick={()=>clickSetPrice(record)}>{planPrice===3?'设置积分':'设置价格'}</Button>
</>
)
}
})
setColumns(_col)
// data处理
// 生成表格data
let combineArray = SKUCombine(_attributeValueArr)
setCombineAttributeArray(combineArray)
setAttributeObjArr(_temp_attributeObjArr)
setAttributeValObjArr(_temp_attributeValObjArr)
console.log(combineArray,'combine')
let _tableData: any[] = []
if(combineArray?.length>0){ // length存在 表示其表格的行数
combineArray.map((_rowArr: any[], i: any) => {
if(combineArray?.length>0){ // length存在 表示表格的行数
combineArray.map((_rowArr: any[], i: any) => { // _rowArr 属性值数组
let _tempObj: any = { 索引: i ,商品名称: productName }
_rowArr.map((__rowArr, index) => {
console.log(_rowArr,'_rowArr')
Array.isArray(_rowArr) && _rowArr.map((__rowArr, index) => {
_tempObj[_attributeNameArr[index]] = __rowArr
})
_tempObj['对应货品'] = selectedGoods[0].id
_tempObj['对应货品'] = selectedGoods.length > 0 && selectedGoods[0].id
_tempObj['单价'] = {}
_tableData.push(_tempObj)
console.log(_rowArr,'_tempObj')
})
}
console.log(_tableData, '_tableData')
_tableDataSource = _tableData
setTableDataSource(_tableDataSource)
console.log(_tableData, '_tableData')
}, [productName, selectedGoods, productSelectAttribute])
constructedPrarams()
}
useEffect(()=>{
constructedPrarams()
},[combineAttributeArray, attributeObjArr, attributeValObjArr, setPriceModal, tableDataSource])
// 生成传输数据
const constructedPrarams = () => {
let _paramsArray: any[] = [];
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)=>{
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)
})
_paramsArray.push({goodsId: _tableDataSource[index] && _tableDataSource[index]['对应货品'], goodsCustomerAttributeList: _tempArr, unitPrice: _tableDataSource[index]&&_tableDataSource[index]['单价']}) /*带上货品id 带上单价*/
})
console.log(_paramsArray,'params')
}
/**
* @description table选择货品改变对应的data数据
......@@ -165,6 +226,7 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
_tableDataSource = newTabeData
console.log(_tableDataSource,'_tableDataSource', newTabeData)
setTableDataSource(_tableDataSource)
constructedPrarams()
}
/**
......@@ -172,6 +234,7 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
* @param {[[],[]..]} chunks 传入不同的属性值数组进行组合
*/
const SKUCombine = (arr: any[]) => {
console.log(arr, 'arr')
if(arr.length){
if (arr[0].children)
arr = arr.map((item: any) => {
......@@ -188,13 +251,14 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
})
arr[0] = arrySon
arr.splice(1, 1)
// 递归
return SKUCombine(arr)
}
}
}
const handlePlanPriceChange = (v: any) => {
setPriceForm.resetFields()
setLadderPrice(false)
setPlanPrice(v.target.value)
console.log(v.target.value, 'v')
}
......@@ -217,7 +281,6 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
newTabeData[curretSetPriceRow['索引']] = _row
_tableDataSource = newTabeData
setTableDataSource(_tableDataSource)
console.log(_tableDataSource, curretSetPriceRow, v,'setPriceOk')
})
}
......@@ -228,49 +291,74 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
}
const clickSetPrice = (record: any) => {
console.log(record)
setCurrentSetPriceRow(record)
setSetPriceModal(true)
setPriceForm.resetFields()
setLadderPrice(false)
}
const changeLadderPrice = (e: any) => {
setLadderPrice(e.target.checked)
}
const handleUnitSearch = (value:any) => {
console.log(value, 'handleClassSearch')
if (value) {
PublicApi.getProductSelectGetSelectCnUnit({name: value}).then(res=>{
if(res.code === 1000)
setUnitData(res.data)
})
} else {
setUnitData([])
}
}
const handleUnitChange = (value:any) => {
setUnitValue(value)
}
return (<>
<Form
{...layout}
form={priceForm}
name="add-products-price"
name="price-form"
labelAlign="left"
ref={priceFormRef}
>
<Form.Item
name="unit"
name="unitId"
label={
<span>
计量单位&nbsp;
单位&nbsp;
<Tooltip title="这是一段描述?">
<QuestionCircleOutlined />
</Tooltip>
</span>
}
rules={[{
rules={[
{
required: true,
message: '请选择计量单位'
}]}
message: '请输入单位'
},
]}
>
<Select
placeholder="请选择计量单位"
allowClear
showSearch
placeholder="请输入单位"
value={unitValue}
defaultActiveFirstOption={false}
showArrow={false}
filterOption={false}
onSearch={handleUnitSearch}
onChange={handleUnitChange}
notFoundContent={null}
style={{width:'100%'}}
>
<Option value="t">吨</Option>
<Option value="kg">千克</Option>
<Option value="g">克</Option>
{unitData.map(d => <Option value={d.id} key={d.id}>{d.name}</Option>)}
</Select>
</Form.Item>
<Form.Item
name="minNumber"
name="minOrder"
label={
<span>
最小起订&nbsp;
......@@ -287,7 +375,7 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
<Input placeholder="请输入最小起订数" />
</Form.Item>
<Form.Item
name="planPrice"
name="priceType"
label={
<span>
产品定价&nbsp;
......@@ -309,7 +397,7 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
</Radio.Group>
</Form.Item>
<Form.Item
name="memberDiscount"
name="isMemberPrice"
label={
<span>
会员折扣&nbsp;
......@@ -327,13 +415,15 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
<Checkbox>允许使用会员折扣价购买</Checkbox>
</Form.Item>
</Form>
<Table rowKey="索引" dataSource={tableDataSource} columns={planPrice === 1 ? colums : colums.slice(0, colums.length-2)} pagination={false} />
<Table rowKey="索引" dataSource={tableDataSource} columns={planPrice === 2 ? colums.slice(0, colums.length-2) : colums} pagination={false} />
{/* 设置价格 */}
<Modal
title="设置价格"
title={planPrice===3 ? '设置积分' : '设置价格'}
visible={setPriceModal}
onOk={setPriceOk}
onCancel={setPriceCancel}
okText="确定"
cancelText="取消"
forceRender={true}
>
<Form
......@@ -342,6 +432,8 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
form={setPriceForm}
initialValues={{ladderPrice: false}}
>
{
planPrice!==3 &&
<Form.Item
label=""
name="ladderPrice"
......@@ -349,6 +441,7 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
>
<Checkbox onChange={changeLadderPrice}>阶梯价格</Checkbox>
</Form.Item>
}
{
ladderPrice ? <Form.Item
name="ladderRange"
......@@ -419,11 +512,11 @@ const PriceAttributeForm: React.FC<Iprops> = (props) => {
}}
</Form.List>
</Form.Item> : <Form.Item
label="单价"
label={planPrice===3?"所需积分":"单价"}
name="uniquePrice"
rules={[{ required: true, message: '请输入单价!' }]}
rules={[{ required: true, message: planPrice===3?'请输入积分！':'请输入价格！' }]}
>
<Input placeholder="请输入单价" />
<Input placeholder={planPrice===3?"请输入积分":"请输入价格"} />
</Form.Item>
}
</Form>
......
src/pages/commodity/products/addProductsItem/productAttributeForm.tsx
View file @ 9c677677
......@@ -2,10 +2,6 @@ import React, { useState, useEffect, useRef, useContext } from 'react'
import {history} from 'umi'
import { Button, Form, Select, Checkbox, Tabs, Input } 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 } from '@ant-design/icons'
import { inject, observer } from 'mobx-react'
// import { IProductModule } from '@/module/productModule'
......@@ -36,19 +32,20 @@ const { TabPane } = Tabs
const { Option } = Select
const { TextArea } = Input
let paramsArray = [];
const ProductAttributeForm: React.FC<Iprops> = (props) => {
const { attributesData, onRef } = props
const productAttributeFormRef = useRef()
const [attributeForm] = Form.useForm()
const { ProductStore } = store
const [paramsData, setParamsData] = useState<any>()
useEffect(()=>{
//传入ref给父级
onRef(productAttributeFormRef)
}, [])
let paramsArray = [];
const onFinish = (values) => {
console.log(values)
......@@ -93,8 +90,8 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
item[next.customerAttributeId] = next;
return item
},{}))
console.log(resultParams, 'resultParams') // 最终转换数据
ProductStore.setProductSelectAttribute(resultParams) //注入mobx
console.log(resultParams,'result', paramsArray) // 最终传输数据
ProductStore.setProductSelectAttribute(resultParams)
}
const renderTabPanchildren = (attrItem: any) => {
......@@ -136,7 +133,7 @@ const ProductAttributeForm: React.FC<Iprops> = (props) => {
<Checkbox.Group onChange={(v)=>onChange(v, attrItem)}>
{
attrItem?.customerAttributeValueList.length > 0 && attrItem.customerAttributeValueList.map((item: any, index: string) => (
<Checkbox key={item.id + index} value={item.id}>{item.value}</Checkbox>
<Checkbox key={item.id} value={item.id}>{item.value}</Checkbox>
))
}
</Checkbox.Group>
......
src/pages/commodity/products/addProductsItem/productImageForm.tsx
View file @ 9c677677
import React, { useState, useEffect } from 'react'
import {history} from 'umi'
import { Button, Form, Select, Checkbox, Tooltip, Radio, Input, Table, Modal, Row, Col, Alert } from 'antd'
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'
......@@ -20,30 +20,30 @@ const layoutAdd = {
}
const _fileList = [
{
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',
},
{
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',
},
// {
// 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',
// },
// {
// 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 = [
......@@ -61,13 +61,17 @@ const ProductImageForm: React.FC<Iprops> = (props) => {
const [visibleAddTabs, setVisibleAddTabs] = useState(false)
const [visibleMedias, setVisibleMedias] = useState(false)
const [fileList, setFileList] = useState(_fileList)
const [fileList, setFileList] = useState<any[]>(_fileList)
const [visibleCrop, setVisibleCrop] = useState(false)
const [imgCropUrl, setImgCropUrl] = useState("")
const [imgCropCurrent, setImgCropCurrent] = useState({})
const [imgCropView, setImgCropView] = useState("")
const [previewVisible, setPreviewVisible] = useState(false)
const [previewImage, setPreviewImage] = useState('')
const [previewTitle, setPreviewTitle] = useState('')
useEffect(() => {
let newPane = [...panes]
newPane[0].content = pictureCrads()
......@@ -140,10 +144,38 @@ const ProductImageForm: React.FC<Iprops> = (props) => {
setPanes(paneArray)
}
const uploadButton = (
<div>
<PlusOutlined />
<div className="ant-upload-text">点击上传</div>
</div>
);
const getBase64 = (file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
const handlePreview = async file => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
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}>
......@@ -155,10 +187,24 @@ const ProductImageForm: React.FC<Iprops> = (props) => {
</div>
</div>
)
}
<div className={styles.cardAddBox} onClick={handleUpload}>
<p><PlusOutlined /><br />点击上传</p>
} */}
<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
......@@ -169,10 +215,10 @@ const ProductImageForm: React.FC<Iprops> = (props) => {
closable
style={{ backgroundColor: '#F0F8FF', color: '#1B9AEE' }}
/>
<div>
{/* <div>
<i>图片预览(供调试)</i>
{imgCropView ? <img src={imgCropView} alt="预览" /> : <p>暂空</p>}
</div>
</div> */}
</>
)
......@@ -213,6 +259,8 @@ const ProductImageForm: React.FC<Iprops> = (props) => {
visible={visibleAddTabs}
onOk={handleOkAddTabs}
onCancel={handleCancelAddTabs}
okText="确定"
cancelText="取消"
>
<Form
{...layoutAdd}
......@@ -240,6 +288,15 @@ const ProductImageForm: React.FC<Iprops> = (props) => {
clickOkAddMedias={handleOkAddMedias}
clickCancelAddMedias={handleCancelAddMedias}
/>
<Modal
visible={previewVisible}
title={previewTitle}
footer={null}
onCancel={()=>setPreviewVisible(false)}
>
<img alt="商品图片" style={{ width: '100%' }} src={previewImage} />
</Modal>
</>)
}
......
src/pages/commodity/products/addProductsItem/selectGoodsForm.tsx
View file @ 9c677677
......@@ -84,6 +84,7 @@ const SelectGoodsForm: React.FC<Iprops> = (props) => {
const onSelectGoodsChange = (value: any) => {
setSelectedGoodsRowKeys([])
ProductStore.setSelectedGoods([])
setIsSelectGoods(value.target.checked)
}
......
src/pages/commodity/products/index.less
View file @ 9c677677
......@@ -29,7 +29,7 @@
//图片画廊
.picture-card-box{
margin-bottom: 30px;
display: flex;
// display: flex;
.card-add-box{
width: 196px;
height: 196px;
......
src/pages/member/memberMaintain/index.tsx
View file @ 9c677677
......@@ -291,11 +291,7 @@ const memberMaintain: React.FC<[]> = () => {
useEffect(() => {
if (!isFirst) return;
let timeRanges = timeRange(searchForm.timeRange);
if (searchForm.timeRange == 0) {
setIsFirst(false);
} else {
setIsFirst(false);
}
setSearchForm({
...searchForm,
startDate: timeRanges.st,
......
src/services/index.ts
View file @ 9c677677
This source diff could not be displayed because it is too large. You can view the blob instead.
src/store/product/index.ts
View file @ 9c677677
......@@ -30,6 +30,11 @@ class ProductStore implements IProductModule {
this.tableDataSource = datas;
}
@action.bound
public clearData(data: any[]) {
this.tableDataSource = data;
}
}
export default ProductStore
src/utils/index.ts
View file @ 9c677677
......@@ -9,68 +9,97 @@ function isObject(obj: any) {
}
export function timeRange(val: number) {
let st = '', et = '';
let st, et;
switch (val) {
case 0:
st = et = ''
break
st = et = '';
break;
case 1:
st = et = moment()
st = moment(
moment()
.startOf('days')
.format('YYYY-MM-DD');
break
.format('YYYY-MM-DD HH:mm:ss'),
).unix();
et = moment(
moment()
.endOf('days')
.format('YYYY-MM-DD HH:mm:ss'),
).unix();
break;
case 2:
st = moment()
.subtract(6, 'days')
.format('YYYY-MM-DD');
et = moment()
.startOf('days')
.format('YYYY-MM-DD');
break
st = moment(
moment()
.subtract(7, 'days')
.format('YYYY-MM-DD') + ' 00:00:00',
).unix();
et = moment(
moment()
.endOf('days')
.format('YYYY-MM-DD HH:mm:ss'),
).unix();
break;
case 3:
st = moment()
.startOf('month')
.format('YYYY-MM-DD');
et = moment()
.startOf('days')
.format('YYYY-MM-DD');
break
st = moment(
moment()
.subtract(29, 'days')
.format('YYYY-MM-DD') + ' 00:00:00',
).unix();
et = moment(
moment()
.endOf('days')
.format('YYYY-MM-DD HH:mm:ss'),
).unix();
break;
case 4:
st =
st = moment(
moment()
.subtract(2, 'month')
.format('YYYY-MM') + '-01';
et = moment()
.startOf('days')
.format('YYYY-MM-DD');
break
.subtract(89, 'days')
.format('YYYY-MM-DD') + ' 00:00:00',
).unix();
et = moment(
moment()
.endOf('days')
.format('YYYY-MM-DD HH:mm:ss'),
).unix();
break;
case 5:
st =
st = moment(
moment()
.subtract(5, 'month')
.format('YYYY-MM') + '-01';
et = moment()
.startOf('days')
.format('YYYY-MM-DD');
break
.subtract(179, 'days')
.format('YYYY-MM-DD') + ' 00:00:00',
).unix();
et = moment(
moment()
.endOf('days')
.format('YYYY-MM-DD HH:mm:ss'),
).unix();
break;
case 6:
st = moment()
.startOf('year')
.format('YYYY-MM-DD');
et = moment()
.startOf('days')
.format('YYYY-MM-DD');
break
st = moment(
moment()
.subtract(364, 'days')
.format('YYYY-MM-DD') + ' 00:00:00',
).unix();
et = moment(
moment()
.endOf('days')
.format('YYYY-MM-DD HH:mm:ss'),
).unix();
break;
case 7:
st = moment()
.years(moment().years() - 1)
st = moment(
moment()
.year(moment().year() - 1)
.startOf('year')
.format('YYYY-MM-DD');
et = moment()
.years(moment().years() - 1)
.format('YYYY-MM-DD HH:mm:ss'),
).unix();
et = moment(
moment()
.year(moment().year() - 1)
.endOf('year')
.format('YYYY-MM-DD');
break
.format('YYYY-MM-DD HH:mm:ss'),
).unix();
break;
}
return { st, et }
}
......
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