Skip to content

A
admin-ci-test
提交 4c27b645 作者: ZhangLingKun
操作

功能：eslint --fix prettier:fix

上级 f2e8dae7
正在显示 包含 335 行增加 和 449 行删除
env/.env.development
#请求接口地址 #请求接口地址
#VITE_REQUEST_BASE_URL='https://www.iuav.shop' #VITE_REQUEST_BASE_URL='https://www.iuav.shop'
#VITE_REQUEST_BASE_URL='https://test.iuav.shop'
VITE_REQUEST_BASE_URL='/api' VITE_REQUEST_BASE_URL='/api'
#旧版接口地址 #旧版接口地址
#VITE_REQUEST_BASE_URL='https://iuav.mmcuav.cn' #VITE_REQUEST_BASE_URL='https://iuav.mmcuav.cn'
......
src/api/index.ts
...@@ -15,5 +15,5 @@ export { ...@@ -15,5 +15,5 @@ export {
CommonAPI, CommonAPI,
CouponManageAPI, CouponManageAPI,
MakeManageAPI, MakeManageAPI,
CategoryManageAPI CategoryManageAPI,
}; };
src/api/modules/categoryManage.ts
import axios from "../request"; import axios from '../request';
import { PaginationEntity } from '~/common/interface/PaginationEntity'; import { PaginationEntity } from '~/common/interface/PaginationEntity';
export class CategoryManageAPI { export class CategoryManageAPI {
// 分类管理 // 分类管理
// 分类目录 // 分类目录
static directoryList = () => { static directoryList = () => {
return axios.get("uavgoods/directory/directoryList"); return axios.get('uavgoods/directory/directoryList');
}; };
// 新增或编辑目录 // 新增或编辑目录
static addOrEditDirectory = ( static addOrEditDirectory = (data: { id?: number; directoryName: string }[]) => {
data: { id?: number; directoryName: string }[] return axios.post('uavgoods/directory/addOrEditDirectory', data);
) => {
return axios.post("uavgoods/directory/addOrEditDirectory", data);
}; };
// 删除目录 // 删除目录
static removeDirectory = (id: number) => { static removeDirectory = (id: number) => {
return axios.get("uavgoods/directory/removeDirectory", { params: { id } }); return axios.get('uavgoods/directory/removeDirectory', { params: { id } });
}; };
// 分类新增 // 分类新增
static addClassification = (data: object): any => { static addClassification = (data: object): any => {
return axios.post("uavgoods/mgoods/addClassification", data); return axios.post('uavgoods/mgoods/addClassification', data);
}; };
// 分类列表 // 分类列表
...@@ -32,71 +30,69 @@ export class CategoryManageAPI { ...@@ -32,71 +30,69 @@ export class CategoryManageAPI {
// PC端-根据分类信息新增自定义规格-下拉选项 （只查产品类型） // PC端-根据分类信息新增自定义规格-下拉选项 （只查产品类型）
static getProductTypeInfoList = (): any => { static getProductTypeInfoList = (): any => {
return axios.get("uavgoods/mgoods/getGoodsTypeInfoList"); return axios.get('uavgoods/mgoods/getGoodsTypeInfoList');
}; };
// 所有分类信息 // 所有分类信息
static getGoodsTypeListByOneLevel = (): any => { static getGoodsTypeListByOneLevel = (): any => {
return axios.get("uavgoods/mgoods/listGoodsTypeListByOneLevel"); return axios.get('uavgoods/mgoods/listGoodsTypeListByOneLevel');
}; };
// 分类修改 // 分类修改
static updateClassification = (data: object): any => { static updateClassification = (data: object): any => {
return axios.post("uavgoods/mgoods/updateClassification", data); return axios.post('uavgoods/mgoods/updateClassification', data);
}; };
// 删除分类 // 删除分类
static deleteGoodsTypeByOneLevel = (params: object): any => { static deleteGoodsTypeByOneLevel = (params: object): any => {
return axios.get("uavgoods/mgoods/deleteGoodsTypeByOneLevel", { params }); return axios.get('uavgoods/mgoods/deleteGoodsTypeByOneLevel', { params });
}; };
// 删除子分类 // 删除子分类
static deleteGoodsTypeByChildren = (params: object): any => { static deleteGoodsTypeByChildren = (params: object): any => {
return axios.get("uavgoods/mgoods/deleteGoodsTypeByChildren", { params }); return axios.get('uavgoods/mgoods/deleteGoodsTypeByChildren', { params });
}; };
// 查询二级分类 // 查询二级分类
static listGoodsTypeListByTwoLevel = (params: object): any => { static listGoodsTypeListByTwoLevel = (params: object): any => {
return axios.get("uavgoods/mgoods/listGoodsTypeListByTwoLevel", { params }); return axios.get('uavgoods/mgoods/listGoodsTypeListByTwoLevel', { params });
}; };
// 查询其它服务 // 查询其它服务
static listOtherService = (): any => { static listOtherService = (): any => {
return axios.get("uavgoods/mgoods/listOtherService"); return axios.get('uavgoods/mgoods/listOtherService');
}; };
// 分类上下移动 // 分类上下移动
static exchangeSortType = (params: object): any => { static exchangeSortType = (params: object): any => {
return axios.get("uavgoods/mgoods/exchangeSortType", { params }); return axios.get('uavgoods/mgoods/exchangeSortType', { params });
}; };
// 分类详情 // 分类详情
static getGoodsTypeDetail = ( static getGoodsTypeDetail = (
obj: { id: number } & Pick<PaginationEntity, "pageNo" | "pageSize"> obj: { id: number } & Pick<PaginationEntity, 'pageNo' | 'pageSize'>,
) => { ) => {
return axios.get("uavgoods/mgoods/getGoodsTypeDetail", { params: obj }); return axios.get('uavgoods/mgoods/getGoodsTypeDetail', { params: obj });
}; };
// 分类详情-安全编码开发修改 // 分类详情-安全编码开发修改
static updateIsShowCode = ( static updateIsShowCode = (params: Pick<GoodsInfo, 'goodsId' | 'showCode'>) => {
params: Pick<GoodsInfo, "goodsId" | "showCode"> return axios.get('uavgoods/appgoods/updateIsShowCode', { params });
) => {
return axios.get("uavgoods/appgoods/updateIsShowCode", { params });
}; };
// 分类详情-商品排序 // 分类详情-商品排序
static exchangeGoodsInfo = (firstId: number, secondId: number) => { static exchangeGoodsInfo = (firstId: number, secondId: number) => {
return axios.get("uavgoods/mgoods/exchangeGoodsInfo", { return axios.get('uavgoods/mgoods/exchangeGoodsInfo', {
params: { firstId, secondId }, params: { firstId, secondId },
}); });
}; };
// 分类详情-图片上传 // 分类详情-图片上传
static cateGoryDetailUpload = (data: FormData) => { static cateGoryDetailUpload = (data: FormData) => {
return axios.post("ossservlet/upload/imgOss", data); return axios.post('ossservlet/upload/imgOss', data);
}; };
// 行业分享码 // 行业分享码
static getAppletQRCode(params: { page: string; scene: string }) { static getAppletQRCode(params: { page: string; scene: string }) {
return axios.get("malluser/wechat/getAppletQRCode", { params }); return axios.get('malluser/wechat/getAppletQRCode', { params });
} }
} }
src/components/viewer/index.tsx
import Viewer from "react-viewer"; import Viewer from 'react-viewer';
import React from "react"; import React from 'react';
interface propsType { interface propsType {
visible: boolean; visible: boolean;
...@@ -8,12 +8,7 @@ interface propsType { ...@@ -8,12 +8,7 @@ interface propsType {
setVisible: Function; setVisible: Function;
} }
const Index: React.FC<propsType> = ({ const Index: React.FC<propsType> = ({ visible, currentImgList, activeViewerIndex, setVisible }) => {
visible,
currentImgList,
activeViewerIndex,
setVisible,
}) => {
return ( return (
<Viewer <Viewer
visible={visible} visible={visible}
......
src/events/index.ts
import { EventEmitter } from "events"; import { EventEmitter } from 'events';
class QcEventEmitter extends EventEmitter {} class QcEventEmitter extends EventEmitter {}
......
src/pages/categoryManage/components/EditableCell/index.tsx
import { Form, Input, InputNumber } from "antd"; import { Form, Input, InputNumber } from 'antd';
interface Item { interface Item {
key: string; key: string;
...@@ -10,7 +10,7 @@ interface EditableCellProps extends React.HTMLAttributes<HTMLElement> { ...@@ -10,7 +10,7 @@ interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
editing: boolean; editing: boolean;
dataIndex: string; dataIndex: string;
title: any; title: any;
inputType: "textarea" | "text"; inputType: 'textarea' | 'text';
record: Item; record: Item;
index: number; index: number;
children: React.ReactNode; children: React.ReactNode;
...@@ -26,13 +26,8 @@ const EditableCell: React.FC<EditableCellProps> = ({ ...@@ -26,13 +26,8 @@ const EditableCell: React.FC<EditableCellProps> = ({
...restProps ...restProps
}) => { }) => {
const inputNode = const inputNode =
dataIndex === "desc" ? ( dataIndex === 'desc' ? (
<Input.TextArea <Input.TextArea maxLength={70} showCount rows={5} placeholder={`请输入${title}`} />
maxLength={70}
showCount
rows={5}
placeholder={`请输入${title}`}
/>
) : ( ) : (
<Input placeholder={`请输入${title}`} maxLength={15} /> <Input placeholder={`请输入${title}`} maxLength={15} />
); );
...@@ -44,7 +39,7 @@ const EditableCell: React.FC<EditableCellProps> = ({ ...@@ -44,7 +39,7 @@ const EditableCell: React.FC<EditableCellProps> = ({
style={{ margin: 0 }} style={{ margin: 0 }}
rules={[ rules={[
{ {
required: dataIndex !== "desc", required: dataIndex !== 'desc',
message: `请输入${title}`, message: `请输入${title}`,
}, },
]} ]}
......
src/pages/categoryManage/components/addCgyDailog/index.scss
.img-wrap{ .img-wrap {
.img-content{ .img-content {
width: 50%; width: 50%;
height: 50%; height: 50%;
position: relative; position: relative;
.img{ .img {
width: 100%; width: 100%;
width: 100%; width: 100%;
}
.delete-img{
position: absolute;
top: 0;
right: 0;
transform: translate(25%,-25%);
width: 20px;
height: 20px;
}
} }
.delete-img {
} position: absolute;
\ No newline at end of file top: 0;
right: 0;
transform: translate(25%, -25%);
width: 20px;
height: 20px;
}
}
}
src/pages/categoryManage/components/addCgyDailog/index.tsx
import React, { useEffect, useImperativeHandle, useState } from "react"; import React, { useEffect, useImperativeHandle, useState } from 'react';
import { Modal, Form, Input, Row, Col, Upload, message, Button } from "antd"; import { Modal, Form, Input, Row, Col, Upload, message, Button } from 'antd';
import { import { LoadingOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
LoadingOutlined, import Cookies from 'js-cookie';
PlusOutlined, import { uploadImgURL } from '~/api/request';
UploadOutlined, import events from '~/events';
} from "@ant-design/icons"; import deletePng from '~/assets/image/delete.png';
import Cookies from "js-cookie"; import './index.scss';
import { uploadImgURL } from "~/api/request";
import events from "~/events";
import deletePng from "~/assets/image/delete.png";
import "./index.scss";
function Index(props: any) { function Index(props: any) {
const headers: any = { const headers: any = {
token: Cookies.get("SXTB-TOKEN"), token: Cookies.get('SXTB-TOKEN'),
}; };
const [form] = Form.useForm(); const [form] = Form.useForm();
const [imageUrl, setImageUrl] = useState(""); const [imageUrl, setImageUrl] = useState('');
const [fileList, setFileList]: any = useState([]); const [fileList, setFileList]: any = useState([]);
useEffect(() => { useEffect(() => {
events.addListener("removeFileList", () => { events.addListener('removeFileList', () => {
// console.log("执行了"); // console.log("执行了");
setFileList([]); setFileList([]);
setImageUrl(""); setImageUrl('');
}); });
events.addListener("setImgFile", (str) => { events.addListener('setImgFile', (str) => {
setImageUrl(str); setImageUrl(str);
form.setFieldsValue({ icon: str }); form.setFieldsValue({ icon: str });
}); });
...@@ -38,34 +34,34 @@ function Index(props: any) { ...@@ -38,34 +34,34 @@ function Index(props: any) {
function onFinishFailed() {} function onFinishFailed() {}
function getBase64(img: any, callback: Function) { function getBase64(img: any, callback: Function) {
const reader = new FileReader(); const reader = new FileReader();
reader.addEventListener("load", () => callback(reader.result)); reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(img); reader.readAsDataURL(img);
} }
function handleChange(val: any) { function handleChange(val: any) {
// console.log("上传图片-->", val); // console.log("上传图片-->", val);
if (!["image/jpg", "image/jpeg", "image/png"].includes(val.file.type)) { if (!['image/jpg', 'image/jpeg', 'image/png'].includes(val.file.type)) {
message.error("请上传图片格式为jpg，jpeg，png的图片"); message.error('请上传图片格式为jpg，jpeg，png的图片');
form.setFieldsValue({ icon: "" }); form.setFieldsValue({ icon: '' });
setFileList([]); setFileList([]);
return; return;
} }
const limitM = 2; const limitM = 2;
const isLimit = val.file.size / 1024 / 1024 <= limitM; const isLimit = val.file.size / 1024 / 1024 <= limitM;
if (!isLimit) { if (!isLimit) {
message.error("图片最大上传2M"); message.error('图片最大上传2M');
form.setFieldsValue({ icon: "" }); form.setFieldsValue({ icon: '' });
setFileList([]); setFileList([]);
return; return;
} }
if (val.file.status == "error") { if (val.file.status == 'error') {
message.error("服务器异常"); message.error('服务器异常');
setFileList([]); setFileList([]);
form.setFieldsValue({ icon: "" }); form.setFieldsValue({ icon: '' });
} else if (val.file.response && val.file.response.code != "200") { } else if (val.file.response && val.file.response.code != '200') {
message.error(val.file.response.message); message.error(val.file.response.message);
setFileList([]); setFileList([]);
form.setFieldsValue({ icon: "" }); form.setFieldsValue({ icon: '' });
} else if (val.file.status === "done") { } else if (val.file.status === 'done') {
setImageUrl(val.file.response.result[0]); setImageUrl(val.file.response.result[0]);
setFileList(val.fileList); setFileList(val.fileList);
form.setFieldsValue({ icon: val.file.response.result[0] }); form.setFieldsValue({ icon: val.file.response.result[0] });
...@@ -82,7 +78,7 @@ function Index(props: any) { ...@@ -82,7 +78,7 @@ function Index(props: any) {
}; };
// 图片删除 // 图片删除
const deleteImg = () => { const deleteImg = () => {
setImageUrl(""); setImageUrl('');
form.setFieldsValue({ icon: undefined }); form.setFieldsValue({ icon: undefined });
setFileList([]); setFileList([]);
}; };
...@@ -94,29 +90,29 @@ function Index(props: any) { ...@@ -94,29 +90,29 @@ function Index(props: any) {
onCancel={() => props.handleCancel()} onCancel={() => props.handleCancel()}
> >
<Form <Form
name="basic" name='basic'
labelCol={{ span: 4 }} labelCol={{ span: 4 }}
wrapperCol={{ span: 16 }} wrapperCol={{ span: 16 }}
initialValues={{ remember: true }} initialValues={{ remember: true }}
onFinish={onFinish} onFinish={onFinish}
onFinishFailed={onFinishFailed} onFinishFailed={onFinishFailed}
autoComplete="off" autoComplete='off'
form={form} form={form}
> >
<Form.Item <Form.Item
label="分类名称" label='分类名称'
name="groupName" name='groupName'
rules={[{ required: true, message: "请输入分类名称" }]} rules={[{ required: true, message: '请输入分类名称' }]}
> >
<Input placeholder="请输入分类名称" maxLength={15} allowClear /> <Input placeholder='请输入分类名称' maxLength={15} allowClear />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="分类描述" label='分类描述'
name="description" name='description'
rules={[{ required: false, message: "请输入分类描述" }]} rules={[{ required: false, message: '请输入分类描述' }]}
> >
<Input.TextArea <Input.TextArea
placeholder="请输入分类描述" placeholder='请输入分类描述'
showCount showCount
rows={3} rows={3}
maxLength={70} maxLength={70}
...@@ -124,51 +120,34 @@ function Index(props: any) { ...@@ -124,51 +120,34 @@ function Index(props: any) {
/> />
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="分类图标" label='分类图标'
name="icon" name='icon'
rules={[{ required: true, message: "请上传分类图标" }]} rules={[{ required: true, message: '请上传分类图标' }]}
> >
{imageUrl ? ( {imageUrl ? (
<div className="img-wrap"> <div className='img-wrap'>
<div className="img-content"> <div className='img-content'>
<img <img src={imageUrl} className='img' onClick={() => props.imgClick(imageUrl)} />
src={imageUrl} <img src={deletePng} alt='' className='delete-img' onClick={deleteImg} />
className="img"
onClick={() => props.imgClick(imageUrl)}
/>
<img
src={deletePng}
alt=""
className="delete-img"
onClick={deleteImg}
/>
</div> </div>
</div> </div>
) : ( ) : (
<Upload <Upload
// className="avatar-uploader" // className="avatar-uploader"
name="uploadFile" name='uploadFile'
fileList={fileList} fileList={fileList}
action={uploadImgURL} action={uploadImgURL}
maxCount={1} maxCount={1}
beforeUpload={beforeUpload} beforeUpload={beforeUpload}
onChange={handleChange} onChange={handleChange}
headers={headers} headers={headers}
accept="image/*" accept='image/*'
> >
{fileList.length >= 1 ? ( {fileList.length >= 1 ? '' : <Button icon={<UploadOutlined />}>上传</Button>}
""
) : (
<Button icon={<UploadOutlined />}>上传</Button>
)}
</Upload> </Upload>
)} )}
</Form.Item> </Form.Item>
<Form.Item <Form.Item label='备注' name='remark' rules={[{ required: false, message: '请输入备注' }]}>
label="备注"
name="remark"
rules={[{ required: false, message: "请输入备注" }]}
>
<Input.TextArea rows={5} maxLength={150} showCount /> <Input.TextArea rows={5} maxLength={150} showCount />
</Form.Item> </Form.Item>
</Form> </Form>
......
src/pages/categoryManage/components/addOrEditDec copy/index.tsx
import { Modal, Form, Input, Button, Row, Col, message } from "antd"; import { Modal, Form, Input, Button, Row, Col, message } from 'antd';
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react';
import { PlusOutlined, MinusOutlined } from "@ant-design/icons"; import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
import { PropsType } from "~/common/interface/modal"; import { PropsType } from '~/common/interface/modal';
import { categoryDec } from "~/api/modules/goods"; import { categoryDec } from '~/api/modules/goods';
import { CategoryManageAPI } from "~/api"; import { CategoryManageAPI } from '~/api';
interface selfPropsType { interface selfPropsType {
directoryList: categoryDec[]; directoryList: categoryDec[];
...@@ -20,54 +20,45 @@ const AddOrEditDec: React.FC<PropsType & selfPropsType> = ({ ...@@ -20,54 +20,45 @@ const AddOrEditDec: React.FC<PropsType & selfPropsType> = ({
}) => { }) => {
const [form] = Form.useForm<any>(); const [form] = Form.useForm<any>();
// 表单目录标题列表 // 表单目录标题列表
const [addOrEditDirectoryList, setAddOrEditDirectoryList] = useState< const [addOrEditDirectoryList, setAddOrEditDirectoryList] = useState<categoryDec[]>([]);
categoryDec[]
>([]);
// 是否点击删除按钮 // 是否点击删除按钮
const [isClickDle, setIsClickDle] = useState<boolean>(false); const [isClickDle, setIsClickDle] = useState<boolean>(false);
useEffect(() => { useEffect(() => {
if (directoryList.length != 0 && !isClickDle) { if (directoryList.length != 0 && !isClickDle) {
setAddOrEditDirectoryList(directoryList); setAddOrEditDirectoryList(directoryList);
const defaultFormValue = directoryList.reduce( const defaultFormValue = directoryList.reduce((pre: any, cur: categoryDec) => {
(pre: any, cur: categoryDec) => { Object.keys(cur).map((item: string) => {
Object.keys(cur).map((item: string) => { if (item === 'id') {
if (item === "id") { pre[cur[item]] = cur.sortName;
pre[cur[item]] = cur.sortName; }
} });
}); return pre;
return pre; }, {});
},
{}
);
form.setFieldsValue(defaultFormValue); form.setFieldsValue(defaultFormValue);
} }
}, [directoryList]); }, [directoryList]);
// 新增或修改目录 // 新增或修改目录
const addDirectoryTitle = () => { const addDirectoryTitle = () => {
const decList: categoryDec[] = [...addOrEditDirectoryList].sort( const decList: categoryDec[] = [...addOrEditDirectoryList].sort(
(a: categoryDec, b: categoryDec) => a.id - b.id (a: categoryDec, b: categoryDec) => a.id - b.id,
); );
setAddOrEditDirectoryList([ setAddOrEditDirectoryList([
...addOrEditDirectoryList, ...addOrEditDirectoryList,
{ {
id: decList[decList.length - 1].id + 1, id: decList[decList.length - 1].id + 1,
defaultType: 1, defaultType: 1,
sortName: "", sortName: '',
}, },
]); ]);
}; };
// 删除目录 // 删除目录
const deleteDirectory = async (id: number) => { const deleteDirectory = async (id: number) => {
const bol: boolean = directoryList.some( const bol: boolean = directoryList.some((item: categoryDec) => item.id === id);
(item: categoryDec) => item.id === id const index = addOrEditDirectoryList.findIndex((item: categoryDec) => item.id === id);
);
const index = addOrEditDirectoryList.findIndex(
(item: categoryDec) => item.id === id
);
if (bol) { if (bol) {
const res: any = await CategoryManageAPI.removeDirectory(id); const res: any = await CategoryManageAPI.removeDirectory(id);
if (res.code === "200") { if (res.code === '200') {
message.success("删除成功"); message.success('删除成功');
setIsClickDle(true); setIsClickDle(true);
refreshDec(id); refreshDec(id);
} else { } else {
...@@ -83,9 +74,7 @@ const AddOrEditDec: React.FC<PropsType & selfPropsType> = ({ ...@@ -83,9 +74,7 @@ const AddOrEditDec: React.FC<PropsType & selfPropsType> = ({
const directorySureEvent = () => { const directorySureEvent = () => {
form.validateFields().then(async (value: any) => { form.validateFields().then(async (value: any) => {
const requestList = Object.keys(value).reduce((pre: any, cur: string) => { const requestList = Object.keys(value).reduce((pre: any, cur: string) => {
const bol: boolean = directoryList.some( const bol: boolean = directoryList.some((item: any) => item.id === Number(cur));
(item: any) => item.id === Number(cur)
);
if (bol) { if (bol) {
pre.push({ pre.push({
id: Number(cur), id: Number(cur),
...@@ -99,8 +88,8 @@ const AddOrEditDec: React.FC<PropsType & selfPropsType> = ({ ...@@ -99,8 +88,8 @@ const AddOrEditDec: React.FC<PropsType & selfPropsType> = ({
return pre; return pre;
}, []); }, []);
const res: any = await CategoryManageAPI.addOrEditDirectory(requestList); const res: any = await CategoryManageAPI.addOrEditDirectory(requestList);
if (res.code === "200") { if (res.code === '200') {
message.success("操作成功"); message.success('操作成功');
form.resetFields(); form.resetFields();
setIsClickDle(false); setIsClickDle(false);
handleOk(); handleOk();
...@@ -116,39 +105,35 @@ const AddOrEditDec: React.FC<PropsType & selfPropsType> = ({ ...@@ -116,39 +105,35 @@ const AddOrEditDec: React.FC<PropsType & selfPropsType> = ({
}; };
return ( return (
<Modal <Modal
title="目录管理" title='目录管理'
visible={isModalVisible} visible={isModalVisible}
onOk={directorySureEvent} onOk={directorySureEvent}
onCancel={directoryCancel} onCancel={directoryCancel}
> >
<Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}> <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
<Form.Item <Form.Item label='添加目录' labelCol={{ span: 4 }} wrapperCol={{ span: 16 }}>
label="添加目录"
labelCol={{ span: 4 }}
wrapperCol={{ span: 16 }}
>
<Button icon={<PlusOutlined />} onClick={addDirectoryTitle} /> <Button icon={<PlusOutlined />} onClick={addDirectoryTitle} />
</Form.Item> </Form.Item>
{addOrEditDirectoryList.map((item: categoryDec) => ( {addOrEditDirectoryList.map((item: categoryDec) => (
<Row key={item.id} gutter={{ xs: 8, sm: 16, md: 24 }}> <Row key={item.id} gutter={{ xs: 8, sm: 16, md: 24 }}>
<Col span={16}> <Col span={16}>
<Form.Item <Form.Item
label="目录名称" label='目录名称'
name={item.id} name={item.id}
rules={[{ required: true, message: "请输入目录名称" }]} rules={[{ required: true, message: '请输入目录名称' }]}
> >
<Input placeholder="请输入目录名称" maxLength={30} /> <Input placeholder='请输入目录名称' maxLength={30} />
</Form.Item> </Form.Item>
</Col> </Col>
<Col> <Col>
{item.defaultType ? ( {item.defaultType ? (
<Button <Button
icon={<MinusOutlined />} icon={<MinusOutlined />}
type="primary" type='primary'
onClick={() => deleteDirectory(item.id)} onClick={() => deleteDirectory(item.id)}
/> />
) : ( ) : (
"" ''
)} )}
</Col> </Col>
</Row> </Row>
......
src/pages/categoryManage/components/addOrEditDec/index.tsx
import { Modal, Form, Input, Button, Row, Col, message } from "antd"; import { Modal, Form, Input, Button, Row, Col, message } from 'antd';
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from 'react';
import { PlusOutlined, MinusOutlined } from "@ant-design/icons"; import { PlusOutlined, MinusOutlined } from '@ant-design/icons';
import { PropsType } from "~/common/interface/modal"; import { PropsType } from '~/common/interface/modal';
import { categoryDec } from "~/api/modules/goods"; import { categoryDec } from '~/api/modules/goods';
import { CategoryManageAPI } from "~/api"; import { CategoryManageAPI } from '~/api';
interface selfPropsType { interface selfPropsType {
directoryList: categoryDec[]; directoryList: categoryDec[];
...@@ -20,54 +20,45 @@ const AddOrEditDec: React.FC<PropsType & selfPropsType> = ({ ...@@ -20,54 +20,45 @@ const AddOrEditDec: React.FC<PropsType & selfPropsType> = ({
}) => { }) => {
const [form] = Form.useForm<any>(); const [form] = Form.useForm<any>();
// 表单目录标题列表 // 表单目录标题列表
const [addOrEditDirectoryList, setAddOrEditDirectoryList] = useState< const [addOrEditDirectoryList, setAddOrEditDirectoryList] = useState<categoryDec[]>([]);
categoryDec[]
>([]);
// 是否点击删除按钮 // 是否点击删除按钮
const [isClickDle, setIsClickDle] = useState<boolean>(false); const [isClickDle, setIsClickDle] = useState<boolean>(false);
useEffect(() => { useEffect(() => {
if (directoryList.length != 0 && !isClickDle) { if (directoryList.length != 0 && !isClickDle) {
setAddOrEditDirectoryList(directoryList); setAddOrEditDirectoryList(directoryList);
const defaultFormValue = directoryList.reduce( const defaultFormValue = directoryList.reduce((pre: any, cur: categoryDec) => {
(pre: any, cur: categoryDec) => { Object.keys(cur).map((item: string) => {
Object.keys(cur).map((item: string) => { if (item === 'id') {
if (item === "id") { pre[cur[item]] = cur.sortName;
pre[cur[item]] = cur.sortName; }
} });
}); return pre;
return pre; }, {});
},
{}
);
form.setFieldsValue(defaultFormValue); form.setFieldsValue(defaultFormValue);
} }
}, [directoryList]); }, [directoryList]);
// 新增或修改目录 // 新增或修改目录
const addDirectoryTitle = () => { const addDirectoryTitle = () => {
const decList: categoryDec[] = [...addOrEditDirectoryList].sort( const decList: categoryDec[] = [...addOrEditDirectoryList].sort(
(a: categoryDec, b: categoryDec) => a.id - b.id (a: categoryDec, b: categoryDec) => a.id - b.id,
); );
setAddOrEditDirectoryList([ setAddOrEditDirectoryList([
...addOrEditDirectoryList, ...addOrEditDirectoryList,
{ {
id: decList[decList.length - 1].id + 1, id: decList[decList.length - 1].id + 1,
defaultType: 1, defaultType: 1,
sortName: "", sortName: '',
}, },
]); ]);
}; };
// 删除目录 // 删除目录
const deleteDirectory = async (id: number) => { const deleteDirectory = async (id: number) => {
const bol: boolean = directoryList.some( const bol: boolean = directoryList.some((item: categoryDec) => item.id === id);
(item: categoryDec) => item.id === id const index = addOrEditDirectoryList.findIndex((item: categoryDec) => item.id === id);
);
const index = addOrEditDirectoryList.findIndex(
(item: categoryDec) => item.id === id
);
if (bol) { if (bol) {
const res: any = await CategoryManageAPI.removeDirectory(id); const res: any = await CategoryManageAPI.removeDirectory(id);
if (res.code === "200") { if (res.code === '200') {
message.success("删除成功"); message.success('删除成功');
setIsClickDle(true); setIsClickDle(true);
refreshDec(id); refreshDec(id);
} else { } else {
...@@ -83,9 +74,7 @@ const AddOrEditDec: React.FC<PropsType & selfPropsType> = ({ ...@@ -83,9 +74,7 @@ const AddOrEditDec: React.FC<PropsType & selfPropsType> = ({
const directorySureEvent = () => { const directorySureEvent = () => {
form.validateFields().then(async (value: any) => { form.validateFields().then(async (value: any) => {
const requestList = Object.keys(value).reduce((pre: any, cur: string) => { const requestList = Object.keys(value).reduce((pre: any, cur: string) => {
const bol: boolean = directoryList.some( const bol: boolean = directoryList.some((item: any) => item.id === Number(cur));
(item: any) => item.id === Number(cur)
);
if (bol) { if (bol) {
pre.push({ pre.push({
id: Number(cur), id: Number(cur),
...@@ -99,8 +88,8 @@ const AddOrEditDec: React.FC<PropsType & selfPropsType> = ({ ...@@ -99,8 +88,8 @@ const AddOrEditDec: React.FC<PropsType & selfPropsType> = ({
return pre; return pre;
}, []); }, []);
const res: any = await CategoryManageAPI.addOrEditDirectory(requestList); const res: any = await CategoryManageAPI.addOrEditDirectory(requestList);
if (res.code === "200") { if (res.code === '200') {
message.success("操作成功"); message.success('操作成功');
form.resetFields(); form.resetFields();
setIsClickDle(false); setIsClickDle(false);
handleOk(); handleOk();
...@@ -116,39 +105,35 @@ const AddOrEditDec: React.FC<PropsType & selfPropsType> = ({ ...@@ -116,39 +105,35 @@ const AddOrEditDec: React.FC<PropsType & selfPropsType> = ({
}; };
return ( return (
<Modal <Modal
title="目录管理" title='目录管理'
visible={isModalVisible} visible={isModalVisible}
onOk={directorySureEvent} onOk={directorySureEvent}
onCancel={directoryCancel} onCancel={directoryCancel}
> >
<Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}> <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }}>
<Form.Item <Form.Item label='添加目录' labelCol={{ span: 4 }} wrapperCol={{ span: 16 }}>
label="添加目录"
labelCol={{ span: 4 }}
wrapperCol={{ span: 16 }}
>
<Button icon={<PlusOutlined />} onClick={addDirectoryTitle} /> <Button icon={<PlusOutlined />} onClick={addDirectoryTitle} />
</Form.Item> </Form.Item>
{addOrEditDirectoryList.map((item: categoryDec) => ( {addOrEditDirectoryList.map((item: categoryDec) => (
<Row key={item.id} gutter={{ xs: 8, sm: 16, md: 24 }}> <Row key={item.id} gutter={{ xs: 8, sm: 16, md: 24 }}>
<Col span={16}> <Col span={16}>
<Form.Item <Form.Item
label="目录名称" label='目录名称'
name={item.id} name={item.id}
rules={[{ required: true, message: "请输入目录名称" }]} rules={[{ required: true, message: '请输入目录名称' }]}
> >
<Input placeholder="请输入目录名称" maxLength={30} /> <Input placeholder='请输入目录名称' maxLength={30} />
</Form.Item> </Form.Item>
</Col> </Col>
<Col> <Col>
{item.defaultType ? ( {item.defaultType ? (
<Button <Button
icon={<MinusOutlined />} icon={<MinusOutlined />}
type="primary" type='primary'
onClick={() => deleteDirectory(item.id)} onClick={() => deleteDirectory(item.id)}
/> />
) : ( ) : (
"" ''
)} )}
</Col> </Col>
</Row> </Row>
......
src/pages/categoryManage/components/deleteCgyDailog/index.tsx
import { Modal } from "antd"; import { Modal } from 'antd';
function Index(props: any) { function Index(props: any) {
return ( return (
<Modal <Modal
title="分类删除" title='分类删除'
visible={props.isDeleteVisable} visible={props.isDeleteVisable}
onOk={() => props.deleteHandleOk()} onOk={() => props.deleteHandleOk()}
onCancel={() => props.deleteHandleCancel()} onCancel={() => props.deleteHandleCancel()}
......
src/pages/categoryManage/detail/index.scss
.category-detail{ .category-detail {
min-height: 100vh; min-height: 100vh;
background-color: #fff; background-color: #fff;
padding: 40px; padding: 40px;
box-sizing: border-box; box-sizing: border-box;
&-head{ &-head {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
}
} &-title {
&-title{ font-size: 17px;
font-size: 17px; font-weight: bold;
font-weight: bold; }
&-form,
&-option,
&-table {
margin-top: 20px;
}
}
.add-goods {
&-select {
margin-top: 10px;
&-value {
display: flex;
} }
&-form,&-option,&-table{ &-list {
margin-top: 20px; height: 300px;
overflow-y: auto;
border: 1px solid #ccc;
margin-top: 10px;
} }
}
} }
.add-goods{ .goods-img {
&-select{ width: 40px;
margin-top: 10px; height: 40px;
&-value{
display: flex;
}
&-list{
height: 300px;
overflow-y: auto;
border: 1px solid #ccc;
margin-top: 10px;
}
}
} }
.goods-img{
width: 40px;
height: 40px;
}
\ No newline at end of file
src/pages/categoryManage/detail/index.tsx
...@@ -8,32 +8,19 @@ ...@@ -8,32 +8,19 @@
* *
* Copyright (c) 2022 by 龚洪江 2238959530~qq.com, All Rights Reserved. * Copyright (c) 2022 by 龚洪江 2238959530~qq.com, All Rights Reserved.
*/ */
import { FC, useState, useEffect } from "react"; import { FC, useState, useEffect } from 'react';
import { import { Form, Upload, Button, Table, Modal, Input, Switch, message } from 'antd';
Form, import type { UploadFile } from 'antd/es/upload/interface';
Upload, import type { ColumnsType, ColumnType } from 'antd/es/table';
Button, import type { TableRowSelection } from 'antd/es/table/interface';
Table, import { ArrowUpOutlined, ArrowDownOutlined, SearchOutlined } from '@ant-design/icons';
Modal, import qs from 'query-string';
Input, import Viewer from '~/components/viewer';
Switch, import { PaginationEntity } from '~/common/interface/PaginationEntity';
message, import { categoryDetailEntity, GoodsInfo } from '~/api/modules/goods';
} from "antd"; import { CategoryManageAPI } from '~/api';
import type { UploadFile } from "antd/es/upload/interface"; import useOption from '~/common/hook/optionHook';
import type { ColumnsType, ColumnType } from "antd/es/table"; import './index.scss';
import type { TableRowSelection } from "antd/es/table/interface";
import {
ArrowUpOutlined,
ArrowDownOutlined,
SearchOutlined,
} from "@ant-design/icons";
import qs from "query-string";
import Viewer from "~/components/viewer";
import { PaginationEntity } from "~/common/interface/PaginationEntity";
import { categoryDetailEntity, GoodsInfo } from "~/api/modules/goods";
import { CategoryManageAPI } from "~/api";
import useOption from "~/common/hook/optionHook";
import "./index.scss";
const CategoryDetail: FC = (props: any) => { const CategoryDetail: FC = (props: any) => {
const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]); const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
...@@ -45,15 +32,11 @@ const CategoryDetail: FC = (props: any) => { ...@@ -45,15 +32,11 @@ const CategoryDetail: FC = (props: any) => {
const [categoryId, setCategoryId] = useState<number>(0); const [categoryId, setCategoryId] = useState<number>(0);
const [isEdit, setIsEdit] = useState<boolean>(false); const [isEdit, setIsEdit] = useState<boolean>(false);
const [detailForm] = const [detailForm] =
Form.useForm< Form.useForm<Pick<categoryDetailEntity, 'description' | 'groupName' | 'icon'>>();
Pick<categoryDetailEntity, "description" | "groupName" | "icon">
>();
const [fileList, setFileList] = useState<any>([]); const [fileList, setFileList] = useState<any>([]);
const [goodsInfo, setGoodsInfo] = useState<GoodsInfo[]>([]); const [goodsInfo, setGoodsInfo] = useState<GoodsInfo[]>([]);
const [viewerVisible, setViewerVisible] = useState<boolean>(false); const [viewerVisible, setViewerVisible] = useState<boolean>(false);
const [pagination, setPagination] = useState< const [pagination, setPagination] = useState<Pick<PaginationEntity, 'pageNo' | 'pageSize'>>({
Pick<PaginationEntity, "pageNo" | "pageSize">
>({
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
}); });
...@@ -64,24 +47,24 @@ const CategoryDetail: FC = (props: any) => { ...@@ -64,24 +47,24 @@ const CategoryDetail: FC = (props: any) => {
const [pid, setPid] = useState<number>(-1); const [pid, setPid] = useState<number>(-1);
const columns: ColumnsType<GoodsInfo> = [ const columns: ColumnsType<GoodsInfo> = [
{ {
title: "序号", title: '序号',
align: "center", align: 'center',
render: (text: string, record: GoodsInfo, index: number) => { render: (text: string, record: GoodsInfo, index: number) => {
return (pagination.pageNo - 1) * pagination.pageSize + index + 1; return (pagination.pageNo - 1) * pagination.pageSize + index + 1;
}, },
}, },
{ {
title: "商品名称", title: '商品名称',
dataIndex: "goodsName", dataIndex: 'goodsName',
align: "center", align: 'center',
}, },
{ {
title: "商品图片", title: '商品图片',
align: "center", align: 'center',
render: (text: string, record: GoodsInfo, index: number) => { render: (text: string, record: GoodsInfo, index: number) => {
return ( return (
<img <img
className="goods-img" className='goods-img'
src={record.goodsImg} src={record.goodsImg}
onClick={() => showViewerEvent(record.goodsImg)} onClick={() => showViewerEvent(record.goodsImg)}
/> />
...@@ -89,23 +72,21 @@ const CategoryDetail: FC = (props: any) => { ...@@ -89,23 +72,21 @@ const CategoryDetail: FC = (props: any) => {
}, },
}, },
{ {
title: "状态", title: '状态',
align: "center", align: 'center',
render: (text: string, record: GoodsInfo, index: number) => { render: (text: string, record: GoodsInfo, index: number) => {
return <div>{record.shelfStatus ? "上架" : "下架"}</div>; return <div>{record.shelfStatus ? '上架' : '下架'}</div>;
}, },
}, },
{ {
title: "安全编码开关", title: '安全编码开关',
align: "center", align: 'center',
render: (text: string, record: GoodsInfo, index: number) => { render: (text: string, record: GoodsInfo, index: number) => {
return ( return (
btnCode && ( btnCode && (
<Switch <Switch
checked={!!record.showCode} checked={!!record.showCode}
onChange={(checked, e) => onChange={(checked, e) => switchChangeEvent(checked, e, record, index)}
switchChangeEvent(checked, e, record, index)
}
/> />
) )
); );
...@@ -160,13 +141,13 @@ const CategoryDetail: FC = (props: any) => { ...@@ -160,13 +141,13 @@ const CategoryDetail: FC = (props: any) => {
detailForm.setFieldsValue({ detailForm.setFieldsValue({
groupName: res.result.groupName ? res.result.groupName : undefined, groupName: res.result.groupName ? res.result.groupName : undefined,
description: res.result.description ? res.result.description : undefined, description: res.result.description ? res.result.description : undefined,
icon: res.result.icon ? res.result.icon : "", icon: res.result.icon ? res.result.icon : '',
}); });
if (res.result.icon) { if (res.result.icon) {
setFileList([ setFileList([
{ {
id: new Date().getTime(), id: new Date().getTime(),
status: "done", status: 'done',
url: res.result.icon, url: res.result.icon,
}, },
]); ]);
...@@ -187,13 +168,13 @@ const CategoryDetail: FC = (props: any) => { ...@@ -187,13 +168,13 @@ const CategoryDetail: FC = (props: any) => {
// 自定义上传 // 自定义上传
const selfUploadRequest = async (val: any) => { const selfUploadRequest = async (val: any) => {
const formData: FormData = new FormData(); const formData: FormData = new FormData();
formData.append("uploadFile", val.file); formData.append('uploadFile', val.file);
const res: any = await CategoryManageAPI.cateGoryDetailUpload(formData); const res: any = await CategoryManageAPI.cateGoryDetailUpload(formData);
if (res.code === "200") { if (res.code === '200') {
setFileList([ setFileList([
{ {
id: new Date().getTime(), id: new Date().getTime(),
status: "done", status: 'done',
url: res.result[0], url: res.result[0],
}, },
]); ]);
...@@ -208,19 +189,19 @@ const CategoryDetail: FC = (props: any) => { ...@@ -208,19 +189,19 @@ const CategoryDetail: FC = (props: any) => {
} }
setFileList([]); setFileList([]);
detailForm.setFieldsValue({ detailForm.setFieldsValue({
icon: "", icon: '',
}); });
}; };
const beforeUpload = (val: any) => { const beforeUpload = (val: any) => {
if (!["image/jpg", "image/jpeg", "image/png"].includes(val.type)) { if (!['image/jpg', 'image/jpeg', 'image/png'].includes(val.type)) {
message.error("请上传图片格式为jpg，jpeg，png的图片"); message.error('请上传图片格式为jpg，jpeg，png的图片');
return false; return false;
} }
const limitM = 2; const limitM = 2;
const isLimit: boolean = val.size / 1024 / 1024 <= limitM; const isLimit: boolean = val.size / 1024 / 1024 <= limitM;
if (!isLimit) { if (!isLimit) {
message.error("图片最大上传2M"); message.error('图片最大上传2M');
return false; return false;
} }
return true; return true;
...@@ -239,7 +220,7 @@ const CategoryDetail: FC = (props: any) => { ...@@ -239,7 +220,7 @@ const CategoryDetail: FC = (props: any) => {
checked: boolean, checked: boolean,
e: React.MouseEvent<HTMLButtonElement>, e: React.MouseEvent<HTMLButtonElement>,
record: GoodsInfo, record: GoodsInfo,
index: number index: number,
) => { ) => {
record.showCode = checked ? 1 : 0; record.showCode = checked ? 1 : 0;
// goodsInfo.splice(index, 1, record); // goodsInfo.splice(index, 1, record);
...@@ -249,8 +230,8 @@ const CategoryDetail: FC = (props: any) => { ...@@ -249,8 +230,8 @@ const CategoryDetail: FC = (props: any) => {
goodsId: record.goodsId, goodsId: record.goodsId,
showCode: record.showCode, showCode: record.showCode,
}); });
if (res.code === "200") { if (res.code === '200') {
message.success("修改成功"); message.success('修改成功');
getGoodsTypeDetail(props.match.params.id); getGoodsTypeDetail(props.match.params.id);
} }
}; };
...@@ -265,53 +246,46 @@ const CategoryDetail: FC = (props: any) => { ...@@ -265,53 +246,46 @@ const CategoryDetail: FC = (props: any) => {
const sureChangeDetailInfo = () => { const sureChangeDetailInfo = () => {
detailForm detailForm
.validateFields() .validateFields()
.then( .then(async (value: Pick<categoryDetailEntity, 'description' | 'groupName' | 'icon'>) => {
async ( // console.log("数据--->", value);
value: Pick< const res = await CategoryManageAPI.updateClassification({
categoryDetailEntity, // description:value.description,
"description" | "groupName" | "icon" // groupName:value.groupName,
> // icon:fileList.length?fileList[0].url:'',
) => { ...value,
// console.log("数据--->", value); sortTypeId,
const res = await CategoryManageAPI.updateClassification({ pid,
// description:value.description, id: categoryId,
// groupName:value.groupName, });
// icon:fileList.length?fileList[0].url:'', if (res.code === '200') {
...value, message.success('修改成功');
sortTypeId, getGoodsTypeDetail(categoryId);
pid, setIsEdit(false);
id: categoryId, } else {
}); message.error(res.message);
if (res.code === "200") {
message.success("修改成功");
getGoodsTypeDetail(categoryId);
setIsEdit(false);
} else {
message.error(res.message);
}
} }
); });
}; };
// 上移 // 上移
const shiftGoods = async () => { const shiftGoods = async () => {
if (selectedRowKeys.length === 0) { if (selectedRowKeys.length === 0) {
message.warning("请先选择商品"); message.warning('请先选择商品');
} else { } else {
const allIndex: number = allGoodsInfo.findIndex( const allIndex: number = allGoodsInfo.findIndex(
(item: GoodsInfo) => item.goodsId === selectedRowKeys[0] (item: GoodsInfo) => item.goodsId === selectedRowKeys[0],
); );
const index: number = goodsInfo.findIndex( const index: number = goodsInfo.findIndex(
(item: GoodsInfo) => item.goodsId === selectedRowKeys[0] (item: GoodsInfo) => item.goodsId === selectedRowKeys[0],
); );
if (index === 0 && pagination.pageNo === 1) { if (index === 0 && pagination.pageNo === 1) {
message.warning("已经到最上面了!"); message.warning('已经到最上面了!');
} else { } else {
const res: any = await CategoryManageAPI.exchangeGoodsInfo( const res: any = await CategoryManageAPI.exchangeGoodsInfo(
allGoodsInfo[allIndex].goodsId, allGoodsInfo[allIndex].goodsId,
allGoodsInfo[allIndex - 1].goodsId allGoodsInfo[allIndex - 1].goodsId,
); );
if (res.code === "200") { if (res.code === '200') {
message.success("上移成功"); message.success('上移成功');
if (index === 0) { if (index === 0) {
pagination.pageNo--; pagination.pageNo--;
} }
...@@ -328,23 +302,23 @@ const CategoryDetail: FC = (props: any) => { ...@@ -328,23 +302,23 @@ const CategoryDetail: FC = (props: any) => {
// 下移 // 下移
const downGoods = async () => { const downGoods = async () => {
if (selectedRowKeys.length === 0) { if (selectedRowKeys.length === 0) {
message.warning("请先选择商品"); message.warning('请先选择商品');
} else { } else {
const allIndex: number = allGoodsInfo.findIndex( const allIndex: number = allGoodsInfo.findIndex(
(item: GoodsInfo) => item.goodsId === selectedRowKeys[0] (item: GoodsInfo) => item.goodsId === selectedRowKeys[0],
); );
const index: number = goodsInfo.findIndex( const index: number = goodsInfo.findIndex(
(item: GoodsInfo) => item.goodsId === selectedRowKeys[0] (item: GoodsInfo) => item.goodsId === selectedRowKeys[0],
); );
if (allIndex === allGoodsInfo.length - 1) { if (allIndex === allGoodsInfo.length - 1) {
message.warning("已经到最下面了!"); message.warning('已经到最下面了!');
} else { } else {
const res: any = await CategoryManageAPI.exchangeGoodsInfo( const res: any = await CategoryManageAPI.exchangeGoodsInfo(
allGoodsInfo[index].goodsId, allGoodsInfo[index].goodsId,
allGoodsInfo[index + 1].goodsId allGoodsInfo[index + 1].goodsId,
); );
if (res.code === "200") { if (res.code === '200') {
message.success("下移成功"); message.success('下移成功');
if (index === goodsInfo.length - 1) { if (index === goodsInfo.length - 1) {
pagination.pageNo++; pagination.pageNo++;
} }
...@@ -375,129 +349,111 @@ const CategoryDetail: FC = (props: any) => { ...@@ -375,129 +349,111 @@ const CategoryDetail: FC = (props: any) => {
const rowSelection: TableRowSelection<GoodsInfo> = { const rowSelection: TableRowSelection<GoodsInfo> = {
selectedRowKeys, selectedRowKeys,
onChange: onSelectChange, onChange: onSelectChange,
type: "radio", type: 'radio',
}; };
return ( return (
<div className="category-detail"> <div className='category-detail'>
<div className="category-detail-head"> <div className='category-detail-head'>
<div className="category-detail-title">一、基本信息</div> <div className='category-detail-title'>一、基本信息</div>
<div className="category-detail-head-option"> <div className='category-detail-head-option'>
{isEdit ? ( {isEdit ? (
<Button <Button type='primary' style={{ marginRight: '10px' }} onClick={sureChangeDetailInfo}>
type="primary"
style={{ marginRight: "10px" }}
onClick={sureChangeDetailInfo}
>
保存 保存
</Button> </Button>
) : btnChange ? ( ) : btnChange ? (
<Button <Button type='primary' style={{ marginRight: '10px' }} onClick={changeDetailInfo}>
type="primary"
style={{ marginRight: "10px" }}
onClick={changeDetailInfo}
>
修改 修改
</Button> </Button>
) : ( ) : (
"" ''
)} )}
<Button type="primary" onClick={backRoute}> <Button type='primary' onClick={backRoute}>
返回 返回
</Button> </Button>
</div> </div>
</div> </div>
<div className="category-detail-form"> <div className='category-detail-form'>
<Form form={detailForm} labelCol={{ span: 2 }} wrapperCol={{ span: 5 }}> <Form form={detailForm} labelCol={{ span: 2 }} wrapperCol={{ span: 5 }}>
<Form.Item <Form.Item
label="行业名称" label='行业名称'
name="groupName" name='groupName'
rules={[{ required: true, message: "请输入行业名称" }]} rules={[{ required: true, message: '请输入行业名称' }]}
> >
{isEdit ? ( {isEdit ? (
<Input <Input placeholder='请输入行业名称' disabled={!isEdit} maxLength={15} />
placeholder="请输入行业名称"
disabled={!isEdit}
maxLength={15}
/>
) : ( ) : (
<span>{detailData?.groupName}</span> <span>{detailData?.groupName}</span>
)} )}
</Form.Item> </Form.Item>
<Form.Item label="分类描述" name="description"> <Form.Item label='分类描述' name='description'>
{isEdit ? ( {isEdit ? (
<Input <Input placeholder='请输入分类描述' disabled={!isEdit} maxLength={70} />
placeholder="请输入分类描述"
disabled={!isEdit}
maxLength={70}
/>
) : ( ) : (
<span>{detailData?.description}</span> <span>{detailData?.description}</span>
)} )}
</Form.Item> </Form.Item>
{detailData?.icon ? ( {detailData?.icon ? (
<Form.Item <Form.Item
label="分类图标" label='分类图标'
name="icon" name='icon'
rules={[{ required: true, message: "请上传分类图标" }]} rules={[{ required: true, message: '请上传分类图标' }]}
> >
{/* 外层嵌套解决错乱问题和影响form数据问题 */} {/* 外层嵌套解决错乱问题和影响form数据问题 */}
<div key={Math.random()}> <div key={Math.random()}>
<Upload <Upload
listType="picture-card" listType='picture-card'
fileList={fileList} fileList={fileList}
customRequest={selfUploadRequest} customRequest={selfUploadRequest}
onRemove={onRemove} onRemove={onRemove}
onPreview={onPreview} onPreview={onPreview}
maxCount={1} maxCount={1}
accept="image/*" accept='image/*'
beforeUpload={beforeUpload} beforeUpload={beforeUpload}
> >
{fileList.length < 1 ? <div>上传</div> : ""} {fileList.length < 1 ? <div>上传</div> : ''}
</Upload> </Upload>
</div> </div>
</Form.Item> </Form.Item>
) : ( ) : (
"" ''
)} )}
</Form> </Form>
</div> </div>
<div className="category-detail-title" style={{ marginTop: "20px" }}> <div className='category-detail-title' style={{ marginTop: '20px' }}>
二、关联商品 二、关联商品
</div> </div>
<div className="category-detail-option"> <div className='category-detail-option'>
{btnUpperDown ? ( {btnUpperDown ? (
<> <>
<Button <Button
icon={<ArrowUpOutlined />} icon={<ArrowUpOutlined />}
type="primary" type='primary'
style={{ marginRight: "10px" }} style={{ marginRight: '10px' }}
onClick={shiftGoods} onClick={shiftGoods}
/> />
<Button <Button
icon={<ArrowDownOutlined />} icon={<ArrowDownOutlined />}
type="primary" type='primary'
style={{ marginRight: "10px" }} style={{ marginRight: '10px' }}
onClick={downGoods} onClick={downGoods}
/> />
</> </>
) : ( ) : (
"" ''
)} )}
{/* <Button type="primary" onClick={addModalShowEvent}> {/* <Button type="primary" onClick={addModalShowEvent}>
添加 添加
</Button> */} </Button> */}
</div> </div>
<div className="category-detail-table"> <div className='category-detail-table'>
<Table <Table
size="small" size='small'
columns={ columns={
Number(qs.parse(props.location.search).sortTypeId) === 1 Number(qs.parse(props.location.search).sortTypeId) === 1
? columns.filter( ? columns.filter((item: ColumnType<GoodsInfo>) => item.title != '安全编码开关')
(item: ColumnType<GoodsInfo>) => item.title != "安全编码开关"
)
: columns : columns
} }
dataSource={goodsInfo} dataSource={goodsInfo}
...@@ -507,17 +463,16 @@ const CategoryDetail: FC = (props: any) => { ...@@ -507,17 +463,16 @@ const CategoryDetail: FC = (props: any) => {
current: pagination.pageNo, current: pagination.pageNo,
showSizeChanger: true, showSizeChanger: true,
onChange: (page, pageSize) => paginationChange(page, pageSize), onChange: (page, pageSize) => paginationChange(page, pageSize),
showTotal: (total, range) => showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
`当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
}} }}
bordered bordered
rowKey="goodsId" rowKey='goodsId'
rowSelection={rowSelection} rowSelection={rowSelection}
/> />
</div> </div>
<Modal <Modal
visible={addModalVisible} visible={addModalVisible}
title="关联商品新增" title='关联商品新增'
onOk={addConnectGoods} onOk={addConnectGoods}
onCancel={cancelHandle} onCancel={cancelHandle}
> >
...@@ -530,16 +485,16 @@ const CategoryDetail: FC = (props: any) => { ...@@ -530,16 +485,16 @@ const CategoryDetail: FC = (props: any) => {
</Form.Item> </Form.Item>
</Form> */} </Form> */}
<div className="add-goods"> <div className='add-goods'>
<div> <div>
<Input suffix={<SearchOutlined />} placeholder="请输入商品名称" /> <Input suffix={<SearchOutlined />} placeholder='请输入商品名称' />
</div> </div>
<div className="add-goods-select"> <div className='add-goods-select'>
<div className="add-goods-select-value"> <div className='add-goods-select-value'>
<div className="label">您选择的商品是：</div> <div className='label'>您选择的商品是：</div>
<div className="select-value" /> <div className='select-value' />
</div> </div>
<div className="add-goods-select-list" /> <div className='add-goods-select-list' />
</div> </div>
</div> </div>
</Modal> </Modal>
......
src/pages/categoryManage/index.scss
...@@ -23,14 +23,14 @@ ...@@ -23,14 +23,14 @@
justify-content: flex-end; justify-content: flex-end;
flex-wrap: wrap; flex-wrap: wrap;
} }
.share-code{ .share-code {
text-align: center; text-align: center;
img { img {
width: 50%; width: 50%;
height: 50%; height: 50%;
margin-bottom: 10px; margin-bottom: 10px;
} }
.ant-btn span{ .ant-btn span {
text-decoration: underline; text-decoration: underline;
} }
} }
src/pages/categoryManage/index.tsx
import { FC, useEffect, useState, useRef } from 'react'; import { FC, useEffect, useState, useRef } from 'react';
import { Button, Table, Form, message, Tooltip, Checkbox, Card, Modal } from 'antd'; import { Button, Table, Form, message, Tooltip, Checkbox, Card, Modal } from 'antd';
import { CardTabListType } from 'antd/lib/card/Card'; import { CardTabListType } from 'antd/lib/card/Card';
import {Router} from 'react-router-dom'; import { Router } from 'react-router-dom';
import FileSaver from 'file-saver'; import FileSaver from 'file-saver';
import qs from 'query-string'; import qs from 'query-string';
import { import {
...@@ -21,13 +21,12 @@ import DeleteCgyDailog from './components/deleteCgyDailog'; ...@@ -21,13 +21,12 @@ import DeleteCgyDailog from './components/deleteCgyDailog';
import EditableCell from './components/EditableCell'; import EditableCell from './components/EditableCell';
import AddOrEditDec from './components/addOrEditDec'; import AddOrEditDec from './components/addOrEditDec';
import { CategoryManageAPI } from '~/api'; import { CategoryManageAPI } from '~/api';
import { categoryEntity, categoryDec } from '~/api/interface/categoryManage' import { categoryEntity, categoryDec } from '~/api/interface/categoryManage';
import Viewer from '~/components/viewer'; import Viewer from '~/components/viewer';
import useOption from '~/common/hook/optionHook'; import useOption from '~/common/hook/optionHook';
import './index.scss'; import './index.scss';
import events from '~/events'; import events from '~/events';
const Category: FC = (props: any) => { const Category: FC = (props: any) => {
const baseRef: any = useRef(); const baseRef: any = useRef();
// 分类目录 // 分类目录
......
src/pages/customManage/customMoney/index.scss
.from-table-wrap{ .from-table-wrap {
position: relative; position: relative;
//padding: 15px 0 0 0; //padding: 15px 0 0 0;
.header-view{ .header-view {
position: relative; position: relative;
width: 100%; width: 100%;
min-height: 60px; min-height: 60px;
...@@ -14,18 +14,18 @@ ...@@ -14,18 +14,18 @@
flex-wrap: wrap; flex-wrap: wrap;
padding: 15px 20px 5px 20px; padding: 15px 20px 5px 20px;
margin: 0 0 10px 0; margin: 0 0 10px 0;
.ant-select-selector{ .ant-select-selector {
min-width: 200px; min-width: 200px;
} }
.ant-row{ .ant-row {
margin-bottom:10px; margin-bottom: 10px;
} }
.add-button{ .add-button {
margin-right: 15px; margin-right: 15px;
} }
} }
} }
.detail-wrap{ .detail-wrap {
position: relative; position: relative;
width: 100%; width: 100%;
min-height: 60px; min-height: 60px;
...@@ -33,31 +33,31 @@ ...@@ -33,31 +33,31 @@
background: #fff; background: #fff;
border-radius: 8px; border-radius: 8px;
padding: 20px 25px; padding: 20px 25px;
.ant-descriptions:nth-child(1){ .ant-descriptions:nth-child(1) {
.ant-descriptions-view{ .ant-descriptions-view {
max-width: 600px; max-width: 600px;
} }
} }
} }
.custom-class{ .custom-class {
margin-top: 10vh; margin-top: 10vh;
.ant-message-notice-content{ .ant-message-notice-content {
padding: 15px 30px; padding: 15px 30px;
position: relative; position: relative;
pointer-events:none; pointer-events: none;
span[role="img"]{ span[role='img'] {
display: none; display: none;
} }
} }
.ant-message-notice-content:after{ .ant-message-notice-content:after {
position: absolute; position: absolute;
pointer-events:auto; pointer-events: auto;
left: 100%; left: 100%;
top: 0px; top: 0px;
content: "X"; content: 'X';
border: 1px solid rgba(128,129,133,0.25); border: 1px solid rgba(128, 129, 133, 0.25);
width: 15px; width: 15px;
height: 15px; height: 15px;
display: flex; display: flex;
...@@ -65,9 +65,8 @@ ...@@ -65,9 +65,8 @@
align-items: center; align-items: center;
border-radius: 50%; border-radius: 50%;
font-weight: 900; font-weight: 900;
transform: scale(1.3,1.1) translateX(-2px); transform: scale(1.3, 1.1) translateX(-2px);
color: rgba(128,129,133,0.6); color: rgba(128, 129, 133, 0.6);
cursor: pointer; cursor: pointer;
} }
} }
src/router/router.tsx
...@@ -75,7 +75,7 @@ const SplitCouponOperate = React.lazy( ...@@ -75,7 +75,7 @@ const SplitCouponOperate = React.lazy(
const CouponDetailed = React.lazy(() => import('src/pages/couponManage/couponDetailed')); //优惠券明细 const CouponDetailed = React.lazy(() => import('src/pages/couponManage/couponDetailed')); //优惠券明细
// 分类管理 // 分类管理
const CategoryList = React.lazy(() => import('src/pages/categoryManage/index')) const CategoryList = React.lazy(() => import('src/pages/categoryManage/index'));
export interface RouteObjectType { export interface RouteObjectType {
path: AgnosticIndexRouteObject['path']; path: AgnosticIndexRouteObject['path'];
element: any; element: any;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论