Skip to content

A
admin
提交 a6e6f059 作者: 龚洪江
操作

功能：富文本修改，商品，产品类型，目录字段修改

上级 d5a039ef
正在显示 包含 186 行增加 和 192 行删除
package.json
...@@ -16,6 +16,8 @@ ...@@ -16,6 +16,8 @@
"dependencies": { "dependencies": {
"@ant-design/icons": "^5.0.1", "@ant-design/icons": "^5.0.1",
"@reduxjs/toolkit": "^1.9.2", "@reduxjs/toolkit": "^1.9.2",
"@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-react": "^1.0.6",
"antd": "^5.4.2", "antd": "^5.4.2",
"axios": "^1.4.0", "axios": "^1.4.0",
"dayjs": "^1.11.7", "dayjs": "^1.11.7",
......
src/components/goods/commonAddOrEdit/addOrEditSkuModal/index.tsx
...@@ -464,26 +464,26 @@ const AddOrEditSkuModal: React.FC<ModalProps & selfProps> = ({ ...@@ -464,26 +464,26 @@ const AddOrEditSkuModal: React.FC<ModalProps & selfProps> = ({
{currentDesc != 2 ? ( {currentDesc != 2 ? (
<> <>
<Form.Item {/*<Form.Item*/}
name='categoryId' {/* name='categoryId'*/}
label='产品类型' {/* label='产品类型'*/}
rules={[{ required: true, message: '请选择产品类型' }]} {/* rules={[{ required: true, message: '请选择产品类型' }]}*/}
> {/*>*/}
<Select {/* <Select*/}
placeholder='请选择产品类型' {/* placeholder='请选择产品类型'*/}
onSelect={handleProdTypeSelect} {/* onSelect={handleProdTypeSelect}*/}
showSearch {/* showSearch*/}
filterOption={(input, option: any) => {/* filterOption={(input, option: any) =>*/}
(option?.label ?? '').toLowerCase().includes(input.toLowerCase()) {/* (option?.label ?? '').toLowerCase().includes(input.toLowerCase())*/}
} {/* }*/}
> {/* >*/}
{categoryList.map((item) => ( {/* {categoryList.map((item) => (*/}
<Select.Option value={item.id} key={item.id}> {/* <Select.Option value={item.id} key={item.id}>*/}
{item.classifyName} {/* {item.classifyName}*/}
</Select.Option> {/* </Select.Option>*/}
))} {/* ))}*/}
</Select> {/* </Select>*/}
</Form.Item> {/*</Form.Item>*/}
{!isCustomProd ? ( {!isCustomProd ? (
<Form.Item <Form.Item
name='skuId' name='skuId'
......
src/components/goods/commonAddOrEdit/baseInfo/index.tsx
...@@ -288,7 +288,6 @@ const BaseInfo: React.FC<selfProps> = forwardRef( ...@@ -288,7 +288,6 @@ const BaseInfo: React.FC<selfProps> = forwardRef(
placeholder='请选择所属目录' placeholder='请选择所属目录'
style={{ width: '400px' }} style={{ width: '400px' }}
onChange={directorySelectChange} onChange={directorySelectChange}
disabled={!!goodsDetail}
> >
{directoryList.map((v) => ( {directoryList.map((v) => (
<Select.Option value={v.id} key={v.id}> <Select.Option value={v.id} key={v.id}>
......
src/components/richText/index.tsx
import React, { useEffect } from 'react'; import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import E from 'wangeditor'; import React, { useState, useEffect } from 'react';
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import { IDomEditor, IEditorConfig, IToolbarConfig, InsertFnType } from '@wangeditor/editor';
import { message } from 'antd'; import { message } from 'antd';
import { CommonAPI } from '~/api'; import { CommonAPI } from '~/api';
let editor: any = null;
interface PropsType { interface PropsType {
onChange?: (html?: string) => void; onChange?: (html?: string) => void;
value: string | undefined; value: string | undefined;
// eslint-disable-next-line react/require-default-props // eslint-disable-next-line react/require-default-props
isDetail?: boolean; isDetail?: boolean; //是否禁用
height?: number; height?: number;
imgSize?: number;
videoSize?: number;
} }
const RichText: React.FC<PropsType> = ({ onChange, value, isDetail, height }) => { const RichText: React.FC<PropsType> = ({
RichText.defaultProps = { onChange,
// eslint-disable-next-line @typescript-eslint/no-empty-function value,
onChange: () => {}, isDetail,
}; height,
useEffect(() => { imgSize,
// 注：class写法需要在componentDidMount 创建编辑器 videoSize,
editor = new E('.edit'); }) => {
editor.config.uploadImgShowBase64 = false; // editor 实例
editor.config.zIndex = 1; const [editor, setEditor] = useState<IDomEditor | null>(null);
editor.config.height = height ? height : 550;
editor.config.uploadImgMaxLength = 5; // 编辑器内容
editor.config.uploadImgMaxSize = 1024 * 1024 * 3; // 2M const [html, setHtml] = useState<string>('');
editor.config.customUploadImg = async (resultFiles: any, insertImgFn: any) => {
// resultFiles 是 input 中选中的文件列表 // 工具栏配置
// insertImgFn 是获取图片 url 后，插入到编辑器的方法 const toolbarConfig: Partial<IToolbarConfig> = {};
// 编辑器配置
const editorConfig: Partial<IEditorConfig> = {
// TS 语法
placeholder: '请输入内容...',
MENU_CONF: {
uploadImage: {
// 自定义上传
async customUpload(file: File, insertFn: InsertFnType) {
if (file.size / 1024 / 1024 > (imgSize || 5)) {
return message.warning(`上传文件大小最大${imgSize || 5}M`);
}
if (!file.type.includes('image/')) {
return message.warning('文件格式错误');
}
const formData = new FormData(); const formData = new FormData();
resultFiles.map(async (item: any) => { formData.append('uploadFile', file);
formData.append('uploadFile', item); CommonAPI.uploadOss(formData).then(({ result }) => {
insertFn(result.filePath);
}); });
const { code, result } = await CommonAPI.uploadOss(formData); },
if (code === '200') { },
insertImgFn(result.filePath); uploadVideo: {
message.success('上传成功'); // 自定义上传
} else { async customUpload(file: File, insertFn: InsertFnType) {
message.error('上传失败'); if (file.size / 1024 / 1024 > (videoSize || 5)) {
return message.warning(`上传文件大小最大${videoSize || 5}M`);
} }
if (!file.type.includes('video/')) {
return message.warning('文件格式错误');
}
const formData = new FormData();
formData.append('uploadFile', file);
CommonAPI.uploadOss(formData).then(({ result }) => {
insertFn(result.filePath);
});
},
},
},
}; };
editor.config.onchange = (newHtml: string) => { //富文本修改
if (newHtml) { const richTextChange = (editor: IDomEditor) => {
onChange?.(newHtml); setHtml(editor.getHtml());
} else { if (onChange) {
onChange?.(undefined); onChange(editor.getHtml() || '');
} }
}; };
// 及时销毁 editor ，重要！
// 需要展示的菜单 useEffect(() => {
editor.config.menus = [
'head',
'bold',
'fontSize',
'fontName',
'italic',
'underline',
'strikeThrough',
'indent',
'lineHeight',
'foreColor',
'backColor',
'link',
'list',
'todo',
'justify',
'quote',
'table',
'splitLine',
'undo',
'redo',
'image',
];
/** 一定要创建 */
editor.create();
// events.addListener('clearEdit', () => {
// editor.txt.html('');
// });
return () => { return () => {
// 组件销毁时销毁编辑器 注：class写法需要在componentWillUnmount中调用 if (editor == null) return;
editor.destroy(); editor.destroy();
setEditor(null);
}; };
}, [editor]);
// 这里一定要加上下面的这个注释
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
useEffect(() => { useEffect(() => {
if (editor) { setHtml(value || '');
editor.txt.html(value || ''); }, [value]);
}
if (isDetail) { useEffect(() => {
if (editor && isDetail) {
editor.disable(); editor.disable();
} }
}, [value]); }, [isDetail]);
return <div className='edit' />; return (
<>
<div style={{ border: '1px solid #ccc', zIndex: 100 }}>
<Toolbar
editor={editor}
defaultConfig={toolbarConfig}
mode='default'
style={{ borderBottom: '1px solid #ccc' }}
/>
<Editor
defaultConfig={editorConfig}
value={html}
onCreated={setEditor}
onChange={richTextChange}
mode='default'
style={{ height: height || 500 + 'px', overflowY: 'hidden' }}
/>
</div>
</>
);
}; };
export default RichText; export default RichText;
src/pages/mallManage/mallGoods/goodsList/index.tsx
...@@ -288,6 +288,12 @@ const GoodsList = () => { ...@@ -288,6 +288,12 @@ const GoodsList = () => {
/> />
<Card tabList={tabList} activeTabKey={activeTabKey} onTabChange={onTabChange}> <Card tabList={tabList} activeTabKey={activeTabKey} onTabChange={onTabChange}>
<div className='header-operate' style={{ marginBottom: '10px' }}> <div className='header-operate' style={{ marginBottom: '10px' }}>
<Button type='primary' style={{ marginRight: '10px' }} icon={<ArrowUpOutlined />}>
上移
</Button>
<Button type='primary' style={{ marginRight: '10px' }} icon={<ArrowDownOutlined />}>
下移
</Button>
{activeTabKey !== '2' && ( {activeTabKey !== '2' && (
<Button <Button
type='primary' type='primary'
......
src/pages/mallManage/produceManage/produceList/components/addOrEditProduceModal/index.tsx
import React, { FC, useEffect, useState } from 'react'; import React, { FC, useEffect } from 'react';
import { Form, Input, Modal, message, Select, ModalProps } from 'antd'; import { Form, Input, Modal, message, Select, ModalProps } from 'antd';
import { CategoryManageAPI, ProduceManageAPI } from '~/api'; import { ProduceManageAPI } from '~/api';
import { InterDataType, InterReqType } from '~/api/interface'; import { InterDataType, InterReqType } from '~/api/interface';
import { categoryListType, directoryListType } from '~/api/interface/categoryManage';
import { MakeListType } from '~/api/interface/makeManage'; import { MakeListType } from '~/api/interface/makeManage';
import { addProductType } from '~/api/interface/produceManageType'; import { addProductType } from '~/api/interface/produceManageType';
import { filterObjAttr } from '~/utils'; import { filterObjAttr } from '~/utils';
//目录返回类型
type directoryType = InterDataType<directoryListType>;
//分类返回类型
type categoryType = InterDataType<categoryListType>['list'];
//品牌返回类型 //品牌返回类型
type makeListType = InterDataType<MakeListType>['list']; type makeListType = InterDataType<MakeListType>['list'];
//表单类型 //表单类型
...@@ -19,23 +14,19 @@ type addMakeParameterType = InterReqType<addProductType>; ...@@ -19,23 +14,19 @@ type addMakeParameterType = InterReqType<addProductType>;
interface PropsType { interface PropsType {
closed: () => void; closed: () => void;
data: (addMakeParameterType & { id: number; categoriesId: number }) | undefined; data: (addMakeParameterType & { id: number; categoriesId: number }) | undefined;
decList: directoryType;
makeList: makeListType; makeList: makeListType;
onOk: () => void; onOk: () => void;
} }
const { Option } = Select;
const AddOrEditProduceModal: FC<ModalProps & PropsType> = ({ const AddOrEditProduceModal: FC<ModalProps & PropsType> = ({
open, open,
closed, closed,
data, data,
decList,
makeList, makeList,
onOk, onOk,
}) => { }) => {
// 产品类型下拉列表 // 产品类型下拉列表
const [productTypeSelectList, setProductTypeSelectList] = useState<categoryType>([]); // const [productTypeSelectList, setProductTypeSelectList] = useState<categoryType>([]);
// 表格事件 // 表格事件
const [form] = Form.useForm<addMakeParameterType>(); const [form] = Form.useForm<addMakeParameterType>();
// 关闭弹窗 // 关闭弹窗
...@@ -64,22 +55,17 @@ const AddOrEditProduceModal: FC<ModalProps & PropsType> = ({ ...@@ -64,22 +55,17 @@ const AddOrEditProduceModal: FC<ModalProps & PropsType> = ({
}); });
}; };
//根据目录获取分类 //根据目录获取分类
const getCategoryListByDirectory = (directoryId: number) => { // const getCategoryListByDirectory = (directoryId: number) => {
CategoryManageAPI.getCategoryList({ pageNo: 1, pageSize: 99999, directoryId, type: 4 }).then( // CategoryManageAPI.getCategoryList({ pageNo: 1, pageSize: 99999, directoryId, type: 4 }).then(
({ result }) => { // ({ result }) => {
setProductTypeSelectList(result.list || []); // setProductTypeSelectList(result.list || []);
}, // },
); // );
}; // };
// 目录修改
const decSelectChange = (value: number) => {
form.setFieldValue('categoryId', undefined);
getCategoryListByDirectory(value);
};
// componentsDidMounted // componentsDidMounted
useEffect(() => { useEffect(() => {
if (data) { if (data) {
getCategoryListByDirectory(data.directoryId); // getCategoryListByDirectory(data.directoryId);
form.setFieldsValue({ form.setFieldsValue({
...data, ...data,
}); });
...@@ -108,39 +94,43 @@ const AddOrEditProduceModal: FC<ModalProps & PropsType> = ({ ...@@ -108,39 +94,43 @@ const AddOrEditProduceModal: FC<ModalProps & PropsType> = ({
> >
<Input placeholder='请输入产品名称' allowClear maxLength={30} /> <Input placeholder='请输入产品名称' allowClear maxLength={30} />
</Form.Item> </Form.Item>
<Form.Item <Form.Item label='归属商品'>
label='产品目录' <Select.Option value={1}>商城商品</Select.Option>
name='directoryId' <Select.Option value={2}>租赁商品</Select.Option>
rules={[{ required: true, message: '请选择产品目录' }]}
>
<Select placeholder='请选择产品目录' onChange={decSelectChange}>
{decList.map((v: any, index: number) => (
<Select.Option value={v.id} key={index}>
{v.directoryName}
</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item
name='categoryId'
label='产品类型'
rules={[{ required: true, message: '请选择产品类型' }]}
>
<Select
placeholder='请选择产品类型'
allowClear
showSearch
filterOption={(input, option) =>
(option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
}
>
{productTypeSelectList.map((i, j) => (
<Option value={i.id} key={j}>
{i.classifyName}
</Option>
))}
</Select>
</Form.Item> </Form.Item>
{/*<Form.Item*/}
{/* label='产品目录'*/}
{/* name='directoryId'*/}
{/* rules={[{ required: true, message: '请选择产品目录' }]}*/}
{/*>*/}
{/* <Select placeholder='请选择产品目录' onChange={decSelectChange}>*/}
{/* {decList.map((v: any, index: number) => (*/}
{/* <Select.Option value={v.id} key={index}>*/}
{/* {v.directoryName}*/}
{/* </Select.Option>*/}
{/* ))}*/}
{/* </Select>*/}
{/*</Form.Item>*/}
{/*<Form.Item*/}
{/* name='categoryId'*/}
{/* label='产品类型'*/}
{/* rules={[{ required: true, message: '请选择产品类型' }]}*/}
{/*>*/}
{/* <Select*/}
{/* placeholder='请选择产品类型'*/}
{/* allowClear*/}
{/* showSearch*/}
{/* filterOption={(input, option) =>*/}
{/* (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())*/}
{/* }*/}
{/* >*/}
{/* {productTypeSelectList.map((i, j) => (*/}
{/* <Option value={i.id} key={j}>*/}
{/* {i.classifyName}*/}
{/* </Option>*/}
{/* ))}*/}
{/* </Select>*/}
{/*</Form.Item>*/}
<Form.Item <Form.Item
name='model' name='model'
label='产品型号' label='产品型号'
......
src/pages/mallManage/produceManage/produceList/index.tsx
...@@ -3,11 +3,11 @@ import './index.scss'; ...@@ -3,11 +3,11 @@ import './index.scss';
import { Button, Form, Input, message, Modal, Select, Table } from 'antd'; import { Button, Form, Input, message, Modal, Select, Table } from 'antd';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { ColumnsType } from 'antd/es/table'; import { ColumnsType } from 'antd/es/table';
import { CategoryManageAPI, MakeManageAPI, ProduceManageAPI } from '~/api'; import { MakeManageAPI, ProduceManageAPI } from '~/api';
import AddOrEditProduce from './components/addOrEditProduceModal'; import AddOrEditProduce from './components/addOrEditProduceModal';
import { InterDataType, InterReqType, PaginationProps } from '~/api/interface'; import { InterDataType, InterReqType, PaginationProps } from '~/api/interface';
import { addProductType, productListType } from '~/api/interface/produceManageType'; import { addProductType, productListType } from '~/api/interface/produceManageType';
import { categoryListType, directoryListType } from '~/api/interface/categoryManage'; import { categoryListType } from '~/api/interface/categoryManage';
import { MakeListType } from '~/api/interface/makeManage'; import { MakeListType } from '~/api/interface/makeManage';
import { PlusOutlined } from '@ant-design/icons'; import { PlusOutlined } from '@ant-design/icons';
...@@ -17,8 +17,6 @@ type produceListType = InterDataType<productListType>['list']; ...@@ -17,8 +17,6 @@ type produceListType = InterDataType<productListType>['list'];
type produceParametersType = Omit<InterReqType<productListType>, 'pageSize' | 'pageNo'>; type produceParametersType = Omit<InterReqType<productListType>, 'pageSize' | 'pageNo'>;
//分类返回类型 //分类返回类型
type categoryType = InterDataType<categoryListType>['list']; type categoryType = InterDataType<categoryListType>['list'];
//目录返回类型
type directoryType = InterDataType<directoryListType>;
//品牌返回类型 //品牌返回类型
type makeListType = InterDataType<MakeListType>['list']; type makeListType = InterDataType<MakeListType>['list'];
//新增编辑表单类型 //新增编辑表单类型
...@@ -46,8 +44,6 @@ function ProduceManage() { ...@@ -46,8 +44,6 @@ function ProduceManage() {
>(); >();
// 品牌列表 // 品牌列表
const [makeList, setMakeList] = useState<makeListType>([]); const [makeList, setMakeList] = useState<makeListType>([]);
// 目录列表
const [decList, setDecList] = useState<directoryType>([]);
// 表格结构 // 表格结构
const columns: ColumnsType<produceListType[0]> = [ const columns: ColumnsType<produceListType[0]> = [
{ {
...@@ -57,7 +53,7 @@ function ProduceManage() { ...@@ -57,7 +53,7 @@ function ProduceManage() {
fixed: 'left', fixed: 'left',
}, },
{ {
title: '产品目录', title: '归属产品',
dataIndex: 'directoryName', dataIndex: 'directoryName',
align: 'center', align: 'center',
}, },
...@@ -188,30 +184,9 @@ function ProduceManage() { ...@@ -188,30 +184,9 @@ function ProduceManage() {
setMakeList(result.list || []); setMakeList(result.list || []);
}); });
}; };
// 目录列表
const getDirectoryList = () => {
ProduceManageAPI.getProductDirectoryList().then(({ result }) => {
setDecList(result || []);
});
};
//根据目录获取分类
const getCategoryListByDirectory = (directoryId: number) => {
CategoryManageAPI.getCategoryList({ pageNo: 1, pageSize: 99999, directoryId, type: 4 }).then(
({ result }) => {
setProductTypeSelectList(result.list || []);
},
);
};
// 目录修改
const decSelectChange = (value: number) => {
if (value) {
getCategoryListByDirectory(value);
}
};
// componentDidMount // componentDidMount
useEffect(() => { useEffect(() => {
getProduceList(query); getProduceList(query);
getDirectoryList();
}, []); }, []);
return ( return (
...@@ -226,15 +201,6 @@ function ProduceManage() { ...@@ -226,15 +201,6 @@ function ProduceManage() {
<Form.Item name='productName' label='产品名称'> <Form.Item name='productName' label='产品名称'>
<Input placeholder='请输入产品名称' allowClear /> <Input placeholder='请输入产品名称' allowClear />
</Form.Item> </Form.Item>
<Form.Item name='directoryId' label='产品目录'>
<Select placeholder='请选择产品目录' onChange={decSelectChange} allowClear>
{decList.map((v, index: number) => (
<Select.Option value={v.id} key={index}>
{v.directoryName}
</Select.Option>
))}
</Select>
</Form.Item>
<Form.Item name='goodsTypeId' label='产品类型'> <Form.Item name='goodsTypeId' label='产品类型'>
<Select placeholder='请选择产品类型' allowClear> <Select placeholder='请选择产品类型' allowClear>
{productTypeSelectList.map((i, j) => ( {productTypeSelectList.map((i, j) => (
...@@ -274,7 +240,6 @@ function ProduceManage() { ...@@ -274,7 +240,6 @@ function ProduceManage() {
closed={handleAddEditClosed} closed={handleAddEditClosed}
data={addEditData} data={addEditData}
makeList={makeList} makeList={makeList}
decList={decList}
onOk={addOrEditProduceOk} onOk={addOrEditProduceOk}
/> />
</div> </div>
......
src/pages/mallManage/rentGoods/rentList/index.tsx
...@@ -285,6 +285,12 @@ const RentList = () => { ...@@ -285,6 +285,12 @@ const RentList = () => {
/> />
<Card tabList={tabList} activeTabKey={activeTabKey} onTabChange={onTabChange}> <Card tabList={tabList} activeTabKey={activeTabKey} onTabChange={onTabChange}>
<div className='header-operate' style={{ marginBottom: '10px' }}> <div className='header-operate' style={{ marginBottom: '10px' }}>
<Button type='primary' style={{ marginRight: '10px' }} icon={<ArrowUpOutlined />}>
上移
</Button>
<Button type='primary' style={{ marginRight: '10px' }} icon={<ArrowDownOutlined />}>
下移
</Button>
{activeTabKey !== '2' && ( {activeTabKey !== '2' && (
<Button <Button
type='primary' type='primary'
......
src/pages/mallManage/serviceManage/serviceList/index.tsx
...@@ -367,6 +367,12 @@ const ServiceList: FC<any> = () => { ...@@ -367,6 +367,12 @@ const ServiceList: FC<any> = () => {
/> />
<Card tabList={tabList} activeTabKey={activeTabKey} onTabChange={onTabChange}> <Card tabList={tabList} activeTabKey={activeTabKey} onTabChange={onTabChange}>
<div className='header-operate' style={{ marginBottom: '10px' }}> <div className='header-operate' style={{ marginBottom: '10px' }}>
<Button type='primary' style={{ marginRight: '10px' }} icon={<ArrowUpOutlined />}>
上移
</Button>
<Button type='primary' style={{ marginRight: '10px' }} icon={<ArrowDownOutlined />}>
下移
</Button>
{activeTabKey !== '2' ? ( {activeTabKey !== '2' ? (
<Button <Button
type='primary' type='primary'
......
src/style/reset.scss
...@@ -88,7 +88,7 @@ video { ...@@ -88,7 +88,7 @@ video {
padding: 0; padding: 0;
border: 0; border: 0;
font-size: 100%; font-size: 100%;
font: inherit; //font: inherit;
vertical-align: baseline; vertical-align: baseline;
} }
/* HTML5 display-role reset for older browsers */ /* HTML5 display-role reset for older browsers */
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论