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