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 { Tag } from 'antd';
import { Tag, Input } from 'antd';
import { HolderOutlined, FormOutlined, CloseCircleOutlined } from '@ant-design/icons';
import styles from '../../style.less';
const ItemTypes = {
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 [, drop] = useDrop({
......@@ -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
className={styles['groupBox-body--tag']}
ref={drag(drop(ref))}
style={{
opacity: isDragging ? 0.3 : 1,
display: isEdit ? 'none' : 'inline-block',
}}
>
<HolderOutlined className={styles['groupBox-body--tag__move']} />
<span>{text}</span>
<FormOutlined className={styles['groupBox-body--tag__edit']} />
<CloseCircleOutlined className={styles['groupBox-body--tag__close']} />
<span>
<FormOutlined className={styles['groupBox-body--tag__edit']} onClick={handleEdit} />
</span>
<CloseCircleOutlined className={styles['groupBox-body--tag__close']} onClick={handleClose} />
</Tag>
);
return (
<>
{isEdit && inputRender()}
{groupEditRender()}
</>
);
};
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 { PlusOutlined } from '@ant-design/icons';
import styles from '../../style.less';
......@@ -6,12 +6,18 @@ import styles from '../../style.less';
const InsertTag = options => {
const [inputVisible, setInputVisible] = useState(false);
const [inputValue, setInputValue] = useState('');
const refInput = useRef();
const showInput = () => {
setInputVisible(true);
const timer = setTimeout(() => {
if (refInput.current) {
refInput.current.focus();
}
clearTimeout(timer);
}, 1);
};
const handleInputChange = e => {
setInputValue(e.target.value);
setInputValue(e.target.value || '');
};
const handleInputConfirm = () => {
setInputVisible(false);
......@@ -19,11 +25,12 @@ const InsertTag = options => {
};
return (
<span>
<>
{inputVisible && (
<Input
type="text"
size="small"
ref={refInput}
className={styles['groupBox-body--tag-input']}
value={inputValue}
onChange={handleInputChange}
......@@ -39,7 +46,7 @@ const InsertTag = options => {
<PlusOutlined /> 添加
</Tag>
)}
</span>
</>
);
};
......
src/pages/GoodsManage/Takeaway/index.jsx
View file @ 44956568
......@@ -8,6 +8,9 @@ import DragTag from './components/DragTag';
import InsertTag from './components/InsertTag';
const Takeaway = options => {
const [groupEdit, setGroupEdit] = useState(false);
const [selected, setSelected] = useState(0);
const [tags, setTags] = useState([
{
id: 0,
......@@ -33,17 +36,43 @@ const Takeaway = options => {
<div className={styles.groupBox}>
<div className={styles['groupBox-title']}>
<div>商品分组</div>
<Button className={styles['groupBox-btn']}>编辑分组</Button>
<Button className={styles['groupBox-btn']} onClick={() => setGroupEdit(!groupEdit)}>
{groupEdit ? '完成' : '编辑分组'}
</Button>
</div>
<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']}>
{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 />
</div>
</DndProvider>
)}
</div>
</div>
</div>
......
src/pages/GoodsManage/index.jsx
View file @ 44956568
......@@ -61,6 +61,7 @@ class goodsManage extends Component {
auditRow: {}, // 查看审核信息使用
isVisibleDraft: false, // 显示隐藏草稿箱
isEditDraft: false, // 是否编辑草稿
productType: 5, // 商品类型
};
currentLog = null;
......@@ -279,6 +280,9 @@ class goodsManage extends Component {
};
changeProductType = e => {
this.setState({
productType: e || 1,
});
this.categoryList(e);
};
......@@ -415,93 +419,97 @@ class goodsManage extends Component {
setArea={(isALL, type) => this.setArea(isALL, type)}
/>
</Card>
<Takeaway />
<Spin spinning={this.state.loading}>
<Table
dataSource={tableData?.records}
bordered
columns={column.call(this)}
rowKey={record => record.skuId}
pagination={false}
className={styles.tabletop}
scroll={{ x: '100%', y: 500 }}
rowSelection={rowSelection}
/>
</Spin>
<br />
{tableData && (
<Pagination
style={{ marginBottom: 10 }}
onChange={this.onPageChange}
total={tableData.total}
showTotal={total => `共${total}条`}
current={pageNo}
pageSize={pageSize}
showSizeChanger
onShowSizeChange={this.onPageSizeChange}
/>
)}
<LogModal
visible={this.state.logVisible}
spuId={this.currentLog?.spuId}
id={this.currentLog?.skuId}
onCancel={() => {
this.currentLog = null;
this.setState({ logVisible: false });
}}
/>
<Drawer
visible={this.state.previewVisible}
width="450"
onClose={() => {
this.setState({ previewVisible: false });
}}
title="商品预览"
bodyStyle={{ height: '90%' }}
>
<iframe
src={this.state.src}
frameBorder="0"
height="100%"
width="375"
title="商品预览"
></iframe>
</Drawer>
<UpdateStock
visible={this.state.updateStockVisible}
skuIds={this.state.stockSkuIds}
info={this.state.priceInfo}
onCancel={this.cancel}
/>
<TempleatModal
visible={this.state.templeatModalVisible}
selectedRowKeys={this.state.selectedRowKeys}
total={tableData.total || 0}
onCancel={() => {
this.setState({ templeatModalVisible: false, selectedRowKeys: [] });
this.handleSearch();
}}
isALL={this.state.isAll}
isType={this.state.isType}
templateList={this.state.templateList}
/>
{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.productType === 5 ? (
<Takeaway />
) : (
<>
<Spin spinning={this.state.loading}>
<Table
dataSource={tableData?.records}
bordered
columns={column.call(this)}
rowKey={record => record.skuId}
pagination={false}
className={styles.tabletop}
scroll={{ x: '100%', y: 500 }}
rowSelection={rowSelection}
/>
</Spin>
<br />
{tableData && (
<Pagination
style={{ marginBottom: 10 }}
onChange={this.onPageChange}
total={tableData.total}
showTotal={total => `共${total}条`}
current={pageNo}
pageSize={pageSize}
showSizeChanger
onShowSizeChange={this.onPageSizeChange}
/>
)}
<LogModal
visible={this.state.logVisible}
spuId={this.currentLog?.spuId}
id={this.currentLog?.skuId}
onCancel={() => {
this.currentLog = null;
this.setState({ logVisible: false });
}}
/>
<Drawer
visible={this.state.previewVisible}
width="450"
onClose={() => {
this.setState({ previewVisible: false });
}}
title="商品预览"
bodyStyle={{ height: '90%' }}
>
<iframe
src={this.state.src}
frameBorder="0"
height="100%"
width="375"
title="商品预览"
></iframe>
</Drawer>
<UpdateStock
visible={this.state.updateStockVisible}
skuIds={this.state.stockSkuIds}
info={this.state.priceInfo}
onCancel={this.cancel}
/>
<TempleatModal
visible={this.state.templeatModalVisible}
selectedRowKeys={this.state.selectedRowKeys}
total={tableData.total || 0}
onCancel={() => {
this.setState({ templeatModalVisible: false, selectedRowKeys: [] });
this.handleSearch();
}}
isALL={this.state.isAll}
isType={this.state.isType}
templateList={this.state.templateList}
/>
</>
)}
</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 && (
<InfoAudit
visible={this.state.visibleAuditModal}
......
src/pages/GoodsManage/style.less
View file @ 44956568
......@@ -150,9 +150,12 @@
padding: 5px 15px;
&--tag {
position: relative;
box-sizing: border-box;
height: 28px;
margin-right: 20px;
padding: 3px 10px;
padding: 0 15px 0 10px;
font-size: 14px;
line-height: 26px;
&__move {
cursor: move;
}
......@@ -171,8 +174,23 @@
cursor: pointer;
}
}
&--tag-normal {
position: relative;
height: 28px;
padding: 0 10px;
font-size: 14px;
line-height: 26px;
cursor: pointer;
}
&--tag-input {
width: 80px;
height: 26px;
margin-right: 20px;
}
&--tag__cur {
color: #fff;
background-color: #1890ff;
border: 1px solid #1890ff;
}
&--new {
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