Skip to content

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

feat: 分组添加编辑功能

parent 82e3118f
Hide whitespace changes
Inline Side-by-side
Showing with 212 additions and 101 deletions
src/pages/GoodsManage/Takeaway/components/DragTag.jsx
View file @ 44956568
import React, { useRef } from 'react'; import React, { useRef, useState } from 'react';
import { useDrag, useDrop } from 'react-dnd'; import { useDrag, useDrop } from 'react-dnd';
import { Tag } from 'antd'; import { Tag, Input } from 'antd';
import { HolderOutlined, FormOutlined, CloseCircleOutlined } from '@ant-design/icons'; import { HolderOutlined, FormOutlined, CloseCircleOutlined } from '@ant-design/icons';
import styles from '../../style.less'; import styles from '../../style.less';
const ItemTypes = { const ItemTypes = {
CARD: 'card', CARD: 'card',
}; };
const DragTag = ({ text, id, index, changePosition }) => { const DragTag = ({ text, id, index, changePosition, selected, groupEdit, changeGroup }) => {
const [isEdit, setIsEdit] = useState(false);
const [inputValue, setInputValue] = useState('');
const refInput = useRef();
const handleEdit = () => {
setIsEdit(true);
setInputValue(text || '');
const timer = setTimeout(() => {
if (refInput.current) {
refInput.current.focus();
}
clearTimeout(timer);
}, 1);
};
const handleInputChange = e => {
setInputValue(e.target.value);
};
const handleInputConfirm = () => {
setIsEdit(false);
setInputValue('');
};
const handleClose = () => {
console.log('111 :>> ', 111);
};
const ref = useRef(null); const ref = useRef(null);
// 因为没有定义收集函数，所以返回值数组第一项不要 // 因为没有定义收集函数，所以返回值数组第一项不要
const [, drop] = useDrop({ const [, drop] = useDrop({
...@@ -33,19 +59,42 @@ const DragTag = ({ text, id, index, changePosition }) => { ...@@ -33,19 +59,42 @@ const DragTag = ({ text, id, index, changePosition }) => {
}), }),
}); });
return ( const inputRender = () => (
<Input
type="text"
size="small"
ref={refInput}
className={styles['groupBox-body--tag-input']}
value={inputValue}
onChange={handleInputChange}
onBlur={handleInputConfirm}
onPressEnter={handleInputConfirm}
/>
);
const groupEditRender = () => (
<Tag <Tag
className={styles['groupBox-body--tag']} className={styles['groupBox-body--tag']}
ref={drag(drop(ref))} ref={drag(drop(ref))}
style={{ style={{
opacity: isDragging ? 0.3 : 1, opacity: isDragging ? 0.3 : 1,
display: isEdit ? 'none' : 'inline-block',
}} }}
> >
<HolderOutlined className={styles['groupBox-body--tag__move']} /> <HolderOutlined className={styles['groupBox-body--tag__move']} />
<span>{text}</span> <span>{text}</span>
<FormOutlined className={styles['groupBox-body--tag__edit']} /> <span>
<CloseCircleOutlined className={styles['groupBox-body--tag__close']} /> <FormOutlined className={styles['groupBox-body--tag__edit']} onClick={handleEdit} />
</span>
<CloseCircleOutlined className={styles['groupBox-body--tag__close']} onClick={handleClose} />
</Tag> </Tag>
); );
return (
<>
{isEdit && inputRender()}
{groupEditRender()}
</>
);
}; };
export default DragTag; export default DragTag;
src/pages/GoodsManage/Takeaway/components/InsertTag.jsx
View file @ 44956568
import React, { useState } from 'react'; import React, { useState, useRef } from 'react';
import { Input, Tag } from 'antd'; import { Input, Tag } from 'antd';
import { PlusOutlined } from '@ant-design/icons'; import { PlusOutlined } from '@ant-design/icons';
import styles from '../../style.less'; import styles from '../../style.less';
...@@ -6,12 +6,18 @@ import styles from '../../style.less'; ...@@ -6,12 +6,18 @@ import styles from '../../style.less';
const InsertTag = options => { const InsertTag = options => {
const [inputVisible, setInputVisible] = useState(false); const [inputVisible, setInputVisible] = useState(false);
const [inputValue, setInputValue] = useState(''); const [inputValue, setInputValue] = useState('');
const refInput = useRef();
const showInput = () => { const showInput = () => {
setInputVisible(true); setInputVisible(true);
const timer = setTimeout(() => {
if (refInput.current) {
refInput.current.focus();
}
clearTimeout(timer);
}, 1);
}; };
const handleInputChange = e => { const handleInputChange = e => {
setInputValue(e.target.value); setInputValue(e.target.value || '');
}; };
const handleInputConfirm = () => { const handleInputConfirm = () => {
setInputVisible(false); setInputVisible(false);
...@@ -19,11 +25,12 @@ const InsertTag = options => { ...@@ -19,11 +25,12 @@ const InsertTag = options => {
}; };
return ( return (
<span> <>
{inputVisible && ( {inputVisible && (
<Input <Input
type="text" type="text"
size="small" size="small"
ref={refInput}
className={styles['groupBox-body--tag-input']} className={styles['groupBox-body--tag-input']}
value={inputValue} value={inputValue}
onChange={handleInputChange} onChange={handleInputChange}
...@@ -39,7 +46,7 @@ const InsertTag = options => { ...@@ -39,7 +46,7 @@ const InsertTag = options => {
<PlusOutlined /> 添加 <PlusOutlined /> 添加
</Tag> </Tag>
)} )}
</span> </>
); );
}; };
......
src/pages/GoodsManage/Takeaway/index.jsx
View file @ 44956568
...@@ -8,6 +8,9 @@ import DragTag from './components/DragTag'; ...@@ -8,6 +8,9 @@ import DragTag from './components/DragTag';
import InsertTag from './components/InsertTag'; import InsertTag from './components/InsertTag';
const Takeaway = options => { const Takeaway = options => {
const [groupEdit, setGroupEdit] = useState(false);
const [selected, setSelected] = useState(0);
const [tags, setTags] = useState([ const [tags, setTags] = useState([
{ {
id: 0, id: 0,
...@@ -33,17 +36,43 @@ const Takeaway = options => { ...@@ -33,17 +36,43 @@ const Takeaway = options => {
<div className={styles.groupBox}> <div className={styles.groupBox}>
<div className={styles['groupBox-title']}> <div className={styles['groupBox-title']}>
<div>商品分组</div> <div>商品分组</div>
<Button className={styles['groupBox-btn']}>编辑分组</Button> <Button className={styles['groupBox-btn']} onClick={() => setGroupEdit(!groupEdit)}>
{groupEdit ? '完成' : '编辑分组'}
</Button>
</div> </div>
<div className={styles['groupBox-body']}> <div className={styles['groupBox-body']}>
<DndProvider backend={HTML5Backend}> {groupEdit ? (
<DndProvider backend={HTML5Backend}>
<div className={styles['groupBox-body--dragbox']}>
{tags.map((item, index) => (
<DragTag
changePosition={changePosition}
index={index}
{...item}
selected={selected}
changeGroup={e => setSelected(e)}
key={item.id}
/>
))}
<InsertTag />
</div>
</DndProvider>
) : (
<div className={styles['groupBox-body--dragbox']}> <div className={styles['groupBox-body--dragbox']}>
{tags.map((item, index) => ( {tags.map((item, index) => (
<DragTag changePosition={changePosition} index={index} {...item} key={item.id} /> <Tag
onClick={() => setSelected(index)}
className={[
styles['groupBox-body--tag-normal'],
selected === index ? styles['groupBox-body--tag__cur'] : '',
]}
>
<span>{item.text}</span>
</Tag>
))} ))}
<InsertTag /> <InsertTag />
</div> </div>
</DndProvider> )}
</div> </div>
</div> </div>
</div> </div>
......
src/pages/GoodsManage/index.jsx
View file @ 44956568
...@@ -61,6 +61,7 @@ class goodsManage extends Component { ...@@ -61,6 +61,7 @@ class goodsManage extends Component {
auditRow: {}, // 查看审核信息使用 auditRow: {}, // 查看审核信息使用
isVisibleDraft: false, // 显示隐藏草稿箱 isVisibleDraft: false, // 显示隐藏草稿箱
isEditDraft: false, // 是否编辑草稿 isEditDraft: false, // 是否编辑草稿
productType: 5, // 商品类型
}; };
currentLog = null; currentLog = null;
...@@ -279,6 +280,9 @@ class goodsManage extends Component { ...@@ -279,6 +280,9 @@ class goodsManage extends Component {
}; };
changeProductType = e => { changeProductType = e => {
this.setState({
productType: e || 1,
});
this.categoryList(e); this.categoryList(e);
}; };
...@@ -415,93 +419,97 @@ class goodsManage extends Component { ...@@ -415,93 +419,97 @@ class goodsManage extends Component {
setArea={(isALL, type) => this.setArea(isALL, type)} setArea={(isALL, type) => this.setArea(isALL, type)}
/> />
</Card> </Card>
<Takeaway /> {this.state.productType === 5 ? (
<Takeaway />
<Spin spinning={this.state.loading}> ) : (
<Table <>
dataSource={tableData?.records} <Spin spinning={this.state.loading}>
bordered <Table
columns={column.call(this)} dataSource={tableData?.records}
rowKey={record => record.skuId} bordered
pagination={false} columns={column.call(this)}
className={styles.tabletop} rowKey={record => record.skuId}
scroll={{ x: '100%', y: 500 }} pagination={false}
rowSelection={rowSelection} className={styles.tabletop}
/> scroll={{ x: '100%', y: 500 }}
</Spin> rowSelection={rowSelection}
<br /> />
{tableData && ( </Spin>
<Pagination <br />
style={{ marginBottom: 10 }} {tableData && (
onChange={this.onPageChange} <Pagination
total={tableData.total} style={{ marginBottom: 10 }}
showTotal={total => `共${total}条`} onChange={this.onPageChange}
current={pageNo} total={tableData.total}
pageSize={pageSize} showTotal={total => `共${total}条`}
showSizeChanger current={pageNo}
onShowSizeChange={this.onPageSizeChange} pageSize={pageSize}
/> showSizeChanger
)} onShowSizeChange={this.onPageSizeChange}
/>
<LogModal )}
visible={this.state.logVisible}
spuId={this.currentLog?.spuId} <LogModal
id={this.currentLog?.skuId} visible={this.state.logVisible}
onCancel={() => { spuId={this.currentLog?.spuId}
this.currentLog = null; id={this.currentLog?.skuId}
this.setState({ logVisible: false }); onCancel={() => {
}} this.currentLog = null;
/> this.setState({ logVisible: false });
<Drawer }}
visible={this.state.previewVisible} />
width="450" <Drawer
onClose={() => { visible={this.state.previewVisible}
this.setState({ previewVisible: false }); width="450"
}} onClose={() => {
title="商品预览" this.setState({ previewVisible: false });
bodyStyle={{ height: '90%' }} }}
> title="商品预览"
<iframe bodyStyle={{ height: '90%' }}
src={this.state.src} >
frameBorder="0" <iframe
height="100%" src={this.state.src}
width="375" frameBorder="0"
title="商品预览" height="100%"
></iframe> width="375"
</Drawer> title="商品预览"
></iframe>
<UpdateStock </Drawer>
visible={this.state.updateStockVisible}
skuIds={this.state.stockSkuIds} <UpdateStock
info={this.state.priceInfo} visible={this.state.updateStockVisible}
onCancel={this.cancel} skuIds={this.state.stockSkuIds}
/> info={this.state.priceInfo}
<TempleatModal onCancel={this.cancel}
visible={this.state.templeatModalVisible} />
selectedRowKeys={this.state.selectedRowKeys} <TempleatModal
total={tableData.total || 0} visible={this.state.templeatModalVisible}
onCancel={() => { selectedRowKeys={this.state.selectedRowKeys}
this.setState({ templeatModalVisible: false, selectedRowKeys: [] }); total={tableData.total || 0}
this.handleSearch(); onCancel={() => {
}} this.setState({ templeatModalVisible: false, selectedRowKeys: [] });
isALL={this.state.isAll} this.handleSearch();
isType={this.state.isType} }}
templateList={this.state.templateList} isALL={this.state.isAll}
/> isType={this.state.isType}
{this.state.serviceVisble && ( templateList={this.state.templateList}
<ServiceGoods />
visible={this.state.serviceVisble} </>
onChange={this.serviceVisbleClose}
SourceData={this.state.serviceData}
shopList={this.shopList}
categoryList={this.state.treeData}
virtualCategoryList={this.state.virtualTreeData}
specListData={this.state.specListData}
permissions={permissions}
isDraft={this.state.isEditDraft}
/>
)} )}
</Spin> </Spin>
{this.state.serviceVisble && (
<ServiceGoods
visible={this.state.serviceVisble}
onChange={this.serviceVisbleClose}
SourceData={this.state.serviceData}
shopList={this.shopList}
categoryList={this.state.treeData}
virtualCategoryList={this.state.virtualTreeData}
specListData={this.state.specListData}
permissions={permissions}
isDraft={this.state.isEditDraft}
/>
)}
{this.state.visibleAuditModal && ( {this.state.visibleAuditModal && (
<InfoAudit <InfoAudit
visible={this.state.visibleAuditModal} visible={this.state.visibleAuditModal}
......
src/pages/GoodsManage/style.less
View file @ 44956568
...@@ -150,9 +150,12 @@ ...@@ -150,9 +150,12 @@
padding: 5px 15px; padding: 5px 15px;
&--tag { &--tag {
position: relative; position: relative;
box-sizing: border-box;
height: 28px;
margin-right: 20px; margin-right: 20px;
padding: 3px 10px; padding: 0 15px 0 10px;
font-size: 14px; font-size: 14px;
line-height: 26px;
&__move { &__move {
cursor: move; cursor: move;
} }
...@@ -171,8 +174,23 @@ ...@@ -171,8 +174,23 @@
cursor: pointer; cursor: pointer;
} }
} }
&--tag-normal {
position: relative;
height: 28px;
padding: 0 10px;
font-size: 14px;
line-height: 26px;
cursor: pointer;
}
&--tag-input { &--tag-input {
width: 80px; width: 80px;
height: 26px;
margin-right: 20px;
}
&--tag__cur {
color: #fff;
background-color: #1890ff;
border: 1px solid #1890ff;
} }
&--new { &--new {
cursor: pointer; cursor: pointer;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment