Skip to content

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

'fix:添加商品'

parent fccb1898
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1436 additions and 0 deletions
config/base.config.json
View file @ cd02c77d
This diff is collapsed.
src/pages/commodity/products/addProductsItem/basicInfoForm.tsx 0 → 100644
View file @ cd02c77d
import React, { useState, useEffect } from 'react'
import { Button, Form, Select, Tabs, Input, Tooltip, Cascader, Tag, Spin } from 'antd'
import {
QuestionCircleOutlined,
PlusOutlined,
MinusOutlined,
} from '@ant-design/icons'
import styles from './index.less'
import { PublicApi } from '@/services/api';
import {
GetProductCustomerGetCustomerCategoryTreeResponse,
GetWarehouseAreaAllResponse
} from '@/services';
const { Option } = Select
const layout = {
labelCol: {
span: 2,
},
wrapperCol: {
span: 12,
},
}
const layoutFormList = {
labelCol: {
span: 2,
},
wrapperCol: {
span: 14,
push: 2
},
}
const tailLayout = {
wrapperCol: {
offset: 2,
span: 12,
},
}
interface Iprops {
onChangeAttributeList: (attributeLists:any)=> void;
}
interface AreaParams {
provinceCode: any;
provinceName: any;
cityCode: any;
cityName: any;
}
const BasicInfoForm: React.FC<Iprops> = (props) => {
const { onChangeAttributeList } = props
const [basicForm] = Form.useForm()
const [brandData, setBrandData] = useState<any>([])
const [brandValue, setBrandValue] = useState(undefined)
const [customerCategoryTree, setCustomerCategoryTree] = useState<GetProductCustomerGetCustomerCategoryTreeResponse>()
const [proviceOptions, setProviceOptions] = useState<GetWarehouseAreaAllResponse>()
const [showCategory, setShowCategory] = useState(null)
const [areaParams, setAreaParams] = useState<AreaParams>()
useEffect(() => {
// 获取品类树
PublicApi.getProductCustomerGetCustomerCategoryTree().then(res => {
if (res.code === 1000)
setCustomerCategoryTree(res.data)
})
//获取省市区
PublicApi.getWarehouseAreaAll().then(res => {
if (res.code === 1000) {
let arr = [...res.data] //裁去最后一级别
for (let index in arr) {
for (let _index in arr[index].areaResponses) {
let o = arr[index].areaResponses
//@ts-ignore
o[_index].areaResponses = null
}
}
setProviceOptions(arr)
}
})
}, [])
const onFinish = (values: any) => {
let params = {...values, commodityAreaList: areaParams, customerCategoryId: values?.customerCategoryId.pop()}
console.log('子保单值，', params)
}
const handleBrandSearch = (value: any) => { // end value
console.log(value, 'handleBrandSearch')
if (value) {
PublicApi.getProductSelectGetSelectBrand({ name: value }).then(res => {
if (res.code === 1000)
setBrandData(res.data)
})
} else {
setBrandData([])
}
}
const handleBrandChange = (value: any) => {
setBrandValue(value)
}
const tagRender = (props) => {
const { label, value, closable, onClose } = props;
if (value?.length < 8)
return (
<Tag closable={closable} onClose={onClose} style={{ marginRight: 4, border: '1px solid #f0f0f0' }}>
{label}
</Tag>
)
}
const onCustomerCategoryChange = (value: any) => {
let seletCategoryId = value[1] || value[0]
if (value.length > 0) {
PublicApi.getProductCustomerGetCustomerCategoryById({ id: seletCategoryId }).then(res => {
onChangeAttributeList(res.data?.customerAttributeList)
setShowCategory(res.data.name)
})
}
else
setShowCategory(null)
}
const onCommodityAreaChange = (value: any, selected: any) => {
let areaParams: AreaParams = {
provinceCode: null,
provinceName: null,
cityCode: null,
cityName: null,
}
if (selected.length === 2) {
areaParams.provinceName = selected[0].name
areaParams.provinceCode = selected[0].code
areaParams.cityName = selected[1].name
areaParams.cityCode = selected[1].code
}
setAreaParams(areaParams)
console.log(areaParams, 'area')
}
return (<>
<Form
{...layout}
form={basicForm}
name="basic-form"
labelAlign="left"
onFinish={onFinish}
colon={false}
>
<Form.Item
name="customerCategoryId"
label="商品品类"
rules={[
{
required: true,
message: '请选择商品品类'
},
]}
>
<Cascader
options={customerCategoryTree}
fieldNames={{ label: 'title', value: 'id', children: 'children' }}
onChange={onCustomerCategoryChange}
placeholder="请选择品类"
notFoundContent={<Spin size="small" />}
/>
</Form.Item>
<Form.Item
name="brandId"
label="商品品牌"
>
<Select
showSearch
placeholder="请选择品牌"
allowClear
value={brandValue}
defaultActiveFirstOption={false}
showArrow={false}
filterOption={false}
onSearch={handleBrandSearch}
onChange={handleBrandChange}
style={{ width: '100%' }}
>
{brandData.map(d => <Option value={d.id} key={d.id}>{d.name}</Option>)}
</Select>
</Form.Item>
<Form.Item
name="name"
label={
<span>
商品名称&nbsp;
<Tooltip title="商品名称规范：品牌名（中文|英文）+产品名称（款式|系列）+附加产品特点+货号，最多输入45字">
<QuestionCircleOutlined />
</Tooltip>
</span>
}
rules={[
{
required: true,
message: '商品名称'
},
]}
>
<Input placeholder="商品名称" maxLength={45} />
</Form.Item>
<Form.Item
name="slogan"
label={
<span>
商品标语&nbsp;
<Tooltip title="商品的宣传用语，最多输入45字">
<QuestionCircleOutlined />
</Tooltip>
</span>
}
rules={[
{
required: true,
message: '请填入商品标语'
},
]}
>
<Input placeholder="请输入商品标语" maxLength={45} />
</Form.Item>
<Form.Item
name="sellingPoint"
label={
<span>
商品卖点&nbsp;
<Tooltip title="商品的卖点，展示在商品名称与商品标语之后，最多每个卖点输入8字">
<QuestionCircleOutlined />
</Tooltip>
</span>
}
rules={[
{
required: true,
message: '请添加卖点标签',
},
]}
>
<Select
mode="tags"
placeholder="请选择或输入商品卖点"
maxTagCount={3}
tagRender={tagRender}
/>
</Form.Item>
<Form.List name="commodityAreaList">
{(fields: any[], { add, remove }: any) => {
if (!fields.length) {
add()
}
return (
<div>
{fields.map((field, index) => (
<Form.Item
{...(index === 0 ? layout : layoutFormList)}
label={
field.key === 0 && <span>
<i style={{ color: 'red' }}>* </i>
归属地市&nbsp;
<Tooltip title="设置了归属地市后，此商品可根据地市进行筛选，未设置时默认为所有地市">
<QuestionCircleOutlined />
</Tooltip>
</span>
}
rules={[
{
required: true,
message: '请选择地区'
}
]}
key={field.key}
>
<Form.Item
{...field}
rules={[
{
required: true,
message: "请选择地区",
},
]}
noStyle
>
<Cascader
options={proviceOptions}
onChange={onCommodityAreaChange}
placeholder="请选择地区"
fieldNames={{ label: 'name', value: 'code', children: 'areaResponses' }}
style={index === 0 ? { width: '90%' } : { width: '80%' }}
notFoundContent={<Spin size="small" />}
/>
</Form.Item>
<Button size='small' onClick={() => add()} icon={<PlusOutlined />} style={{ margin: '0 12px' }} />
{field.key > 0 && (<Button size='small' onClick={() => remove(field.name)} icon={<MinusOutlined />} />)}
</Form.Item>
))}
</div>
)
}}
</Form.List>
<Form.Item
label='品类类型'
>
{showCategory && <><span className="commonStatusValid"></span>{showCategory}</>}
</Form.Item>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
保存
</Button>
<Button className={styles.ml20}>
取消
</Button>
</Form.Item>
</Form>
</>)
}
export default BasicInfoForm
\ No newline at end of file
src/pages/commodity/products/addProductsItem/logisticsForm.tsx 0 → 100644
View file @ cd02c77d
import React, { useState, useEffect } 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'
const layout = {
labelCol: {
span: 2,
},
wrapperCol: {
span: 12,
},
}
export interface Iprops {
}
const { Option } = Select
const LogisticsForm: React.FC<Iprops> = (props) => {
const [logisticsForm] = Form.useForm()
return (<>
<Form
{...layout}
form={logisticsForm}
name="add-products-transport"
labelAlign="left"
>
<Form.Item
name="transportType"
label="配送方式"
rules={[
{
required: true,
message: '请选择配送方式'
},
]}
initialValue={1}
>
<Radio.Group>
<Radio value={1}>物流（默认）</Radio>
<Radio value={2}>自提</Radio>
<Radio value={3}>无需配送</Radio>
</Radio.Group>
</Form.Item>
<Form.Item
name="chargeType"
label="运费方式"
rules={[
{
required: true,
message: '请选择运费方式'
},
]}
initialValue={1}
>
<Radio.Group>
<Radio value={1}>卖家承担运费（默认）</Radio>
<Radio value={2}>买家承担运费</Radio>
</Radio.Group>
</Form.Item>
<Form.Item
name="weight"
label="重量"
rules={[
{
required: true,
message: '请填入重量'
},
]}
>
<Input suffix="KG" placeholder="请输入重量" />
<Checkbox>使用运费模板（只有买家承担运费才能选择）</Checkbox>
</Form.Item>
<Form.Item
name="chargeTemplate"
label="运费模板"
>
<Select
placeholder="请选择运费模板"
allowClear
>
<Option value="SF">顺丰模板</Option>
<Option value="EMS">EMS模板</Option>
<Option value="COM">一般快递模板</Option>
</Select>
</Form.Item>
<Form.Item
name="address"
label="发货地址"
>
<Select
placeholder="请选择发货地址"
allowClear
>
<Option value="1">1</Option>
<Option value="2">2</Option>
<Option value="3">3</Option>
</Select>
</Form.Item>
<Form.Item
name="express"
label="物流公司"
>
<Select
placeholder="请选择物流公司"
allowClear
>
<Option value="EMS">EMS</Option>
<Option value="SF">顺丰</Option>
<Option value="CN">菜鸟果果</Option>
</Select>
</Form.Item>
</Form>
</>)
}
export default LogisticsForm
\ No newline at end of file
src/pages/commodity/products/addProductsItem/otherForm.tsx 0 → 100644
View file @ cd02c77d
import React, { useState, useEffect } 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'
const layout = {
labelCol: {
span: 2,
},
wrapperCol: {
span: 12,
},
}
export interface Iprops {
}
const { Option } = Select
const { TextArea } = Input
const OtherForm: React.FC<Iprops> = (props) => {
const [otherForm] = Form.useForm()
return (<>
<Form
{...layout}
form={otherForm}
name="add-products-other"
labelAlign="left"
>
<Form.Item
name="bill"
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.Group>
</Form.Item>
<Form.Item
name="maitou"
label="唛头"
>
<Input maxLength={25} placeholder="请输入唛头（最长25个字符）" />
</Form.Item>
<Form.Item
name="statement"
label="包装清单"
>
<TextArea maxLength={120} rows={4} placeholder="最长120个字符" />
</Form.Item>
<Form.Item
name="saleService"
label="售后服务"
>
<TextArea maxLength={300} rows={4} placeholder="最长300个字符" />
</Form.Item>
</Form>
</>)
}
export default OtherForm
\ No newline at end of file
src/pages/commodity/products/addProductsItem/productAttributeForm.tsx 0 → 100644
View file @ cd02c77d
import React, { useState, useEffect } 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'
const layout = {
labelCol: {
span: 2,
},
wrapperCol: {
span: 12,
},
}
const tailLayout = {
wrapperCol: {
offset: 2,
span: 12,
},
}
export interface Iprops {
attributesData: any[];
}
const { TabPane } = Tabs
const { Option } = Select
const { TextArea } = Input
const ProductAttributeForm: React.FC<Iprops> = (props) => {
const { attributesData } = props
const [attributeForm] = Form.useForm()
let paramsArray = [];
const onFinish = (values) => {
console.log(values)
}
/**
* @description 表单项改变转换数据格式，仅限“select单选、checkbox多选、输入”三类控件的改变
* @param {Number, Array, e} value type为1：数字id，type为2：数组id，type为3：事件对象
* @param {Object} attrItem 属性数据对象
*/
const onChange = (value, attrItem) => {
let params = { customerAttributeId: attrItem.id, customerAttributeValueList: [] }
if(attrItem.type!==3){
for(let item of attrItem?.customerAttributeValueList){
if(value?.length){
for(let i of value){
if(item.id===i){
params.customerAttributeValueList.push({
customerAttributeValueId: i,
value: item.value
})
}
}
}else{
if(item.id===value){
params.customerAttributeValueList.push({
customerAttributeValueId: value,
value: item.value
})
}
}
}
}else{
params.customerAttributeValueList.push({
customerAttributeValueId: null,
value: value.target.value
})
}
paramsArray.push(params)
let resultParams = Object.values(paramsArray.reduce((item, next)=>{
item[next.customerAttributeId] = next;
return item
},{}))
console.log(resultParams) // 最终转换的数据格式
}
const renderTabPanchildren = (attrItem: any) => {
return (
<>
{
attrItem.type === 1 &&
<Form.Item
name={attrItem.id}
label={attrItem.name}
rules={attrItem.isEmpty && [{
required: true,
message: '此项为必填项'
}]}
>
<Select
placeholder="请选择面料"
allowClear
onChange={(v)=>onChange(v, attrItem)}
>
{
attrItem?.customerAttributeValueList.length > 0 && attrItem.customerAttributeValueList.map((item: any) => (
<Option key={item.id} value={item.id}>{item.value}</Option>
))
}
</Select>
</Form.Item>
}
{
attrItem.type === 2 &&
<Form.Item
label={attrItem.name}
name={attrItem.id}
rules={attrItem.isEmpty && [{
required: true,
message: '此项为必填项'
}]}
>
<Checkbox.Group onChange={(v)=>onChange(v, attrItem)}>
{
attrItem?.customerAttributeValueList.length > 0 && attrItem.customerAttributeValueList.map((item: any, index: string) => (
<Checkbox key={item.id} value={item.id}>{item.value}</Checkbox>
))
}
</Checkbox.Group>
</Form.Item>
}
{
attrItem.type === 3 &&
<Form.Item
name={attrItem.id}
label={attrItem.name}
rules={attrItem.isEmpty && [{
required: true,
message: '此项为必填项'
}]}
>
<TextArea onChange={(v)=>onChange(v, attrItem)} maxLength={50} placeholder="最多输入50个字符" rows={4} />
</Form.Item>
}
</>
)
}
return (<>
<Form
{...layout}
form={attributeForm}
name="attribute-form"
labelAlign="left"
onFinish={onFinish}
>
<Tabs defaultActiveKey="1" tabPosition="left">
{
attributesData?.length > 0 && attributesData.map(attributeItem => <>
<TabPane tab={attributeItem.name} key={attributeItem.id}>
{
renderTabPanchildren(attributeItem)
}
</TabPane>
</>
)
}
</Tabs>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
保存
</Button>
<Button className={styles.ml20}>
取消
</Button>
</Form.Item>
</Form>
{attributesData?.length === 0 && "请先选择基本信息中商品品类项！"}
</>)
}
export default ProductAttributeForm
\ No newline at end of file
src/pages/commodity/products/addProductsItem/productDescForm.tsx 0 → 100644
View file @ cd02c77d
import React, { useState, useEffect } 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 { PlusOutlined, DeleteOutlined } from '@ant-design/icons'
export interface Iprops {
}
const ProductDescForm: React.FC<Iprops> = (props) => {
return (<>
<div className={styles.descriptBox}>
<p>文字区域</p>
<div className={styles.bottomBtn}>
<Button icon={<PlusOutlined />}>添加文字</Button>
</div>
</div>
<div className={styles.descriptBox}>
<p>视频区域</p>
<div className={styles.bottomBtn}>
<Button icon={<DeleteOutlined />}>删除</Button>
<Button icon={<PlusOutlined />}>添加素材</Button>
</div>
</div>
<div className={styles.descriptBox}>
<p>图片区域</p>
<div className={styles.bottomBtn}>
<Button icon={<DeleteOutlined />}>删除</Button>
<Button icon={<PlusOutlined />}>添加素材</Button>
</div>
</div>
</>)
}
export default ProductDescForm
\ No newline at end of file
src/pages/commodity/products/addProductsItem/productImageForm.tsx 0 → 100644
View file @ cd02c77d
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 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 CustomTabs, { ItemPane } from '@/components/CustomTabs'
import ImageCrop from '@/components/ImageCrop'
import CustomMediaLibrary from '@/components/MediaLibrary'
export interface Iprops {
}
const layoutAdd = {
labelCol: { span: 4 },
wrapperCol: { span: 20 },
}
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',
},
]
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 [fileList, setFileList] = useState(_fileList)
const [visibleCrop, setVisibleCrop] = useState(false)
const [imgCropUrl, setImgCropUrl] = useState("")
const [imgCropCurrent, setImgCropCurrent] = useState({})
const [imgCropView, setImgCropView] = 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 clickItemTab = (_index: number) => {
console.log(_index, '点击项')
setDefaultChecked(_index)
}
const clickDeleteItemTab = (_index: number) => {
console.log(_index, '点击删除项')
let paneArray = [...panes]
paneArray.splice(_index, 1)
setPanes(paneArray)
}
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={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)
}
return (<>
<CustomTabs
renderTabs={panes}
defaultChecked={defaultChecked}
isShowAddButton={true}
clickAddButton={clickAddButton}
clickItemTab={clickItemTab}
clickDeleteItemTab={clickDeleteItemTab}
/>
<Modal
title="添加标签页"
visible={visibleAddTabs}
onOk={handleOkAddTabs}
onCancel={handleCancelAddTabs}
>
<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}
/>
</>)
}
export default ProductImageForm
\ No newline at end of file
src/pages/commodity/products/addProductsItem/selectGoodsForm.tsx 0 → 100644
View file @ cd02c77d
import React, { useState, useEffect } from 'react'
import {history} from 'umi'
import { Button, Form, Select, Checkbox } 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'
const layout = {
labelCol: {
span: 2,
},
wrapperCol: {
span: 12,
},
}
export interface Iprops {
}
const SelectGoodsForm: React.FC<Iprops> = (props) => {
const [selectGoodsForm] = Form.useForm()
const [showSelectGoods, setSelectGoods] = useState(false)
const [selectGoodsRow, setSelectGoodsRow] = useState<any[]>([]) // 模态框选择的行数据
const [selectedGoodsRowKeys, setSelectedGoodsRowKeys] = useState<Array<number>>([])
const fetchData = (params: any) => {
console.log(params)
return new Promise((resolve, reject) => {
let obj = { ...params }
PublicApi.getProductGoodsGetGoodsList(obj).then(res => {
resolve(res.data)
})
})
}
const goodsColumns: ColumnType<any>[] = [
{
title: '货号',
dataIndex: 'code',
key: 'code',
},
{
title: '货品名称',
dataIndex: 'name',
key: 'name',
className: 'commonPickColor',
render: (text: any, record: any) => <span
className="commonPickColor"
onClick={() => history.push(`/memberCenter/commodityAbility/commodity/goods/addGoods?id=${record.id}&isSee=true`)}
>
{text}&nbsp;<EyeOutlined />
</span>
},
{
title: '规格型号',
dataIndex: 'type',
key: 'type',
},
{
title: '品类',
dataIndex: ['customerCategory', 'name'],
key: 'customerCategory',
},
{
title: '品牌',
dataIndex: ['brand', 'name'],
key: 'brand',
},
{
title: '成单价',
dataIndex: 'costPrice',
key: 'costPrice',
},
]
const onSelectGoodsChange = (value: any) => {
setSelectedGoodsRowKeys([])
setSelectGoods(value.target.checked)
}
const rowSelection = {
selectedRowKeys: selectedGoodsRowKeys,
onChange: (selectedRowKeys: any, selectedRows: any) => {
setSelectGoodsRow(selectedRows);
setSelectedGoodsRowKeys(selectedRowKeys);
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
}
}
return (<>
<Form
{...layout}
form={selectGoodsForm}
name="select-goods"
labelAlign="left"
>
<Form.Item
label="是否选择货品"
>
<Checkbox onChange={onSelectGoodsChange}>选择货品</Checkbox>
</Form.Item>
</Form>
{showSelectGoods && <StandardTable
columns={goodsColumns}
rowSelection={rowSelection}
tableProps={{ rowKey: "id" }}
fetchTableData={(params: any) => fetchData(params)}
/>}
</>)
}
export default SelectGoodsForm
\ No newline at end of file
src/services/index.ts
View file @ cd02c77d
This source diff could not be displayed because it is too large. You can view the blob instead.
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