Skip to content

A
admin-ci-test
提交 37c8f93a 作者: ZhangLingKun
操作

功能：宣传中心联调

上级 ae13cac9
正在显示 包含 1269 行增加 和 7 行删除
src/api/interface/commonType.ts
import { InterFunction } from '~/api/interface'; import { InterFunction, InterListFunction } from '~/api/interface';
// 用户登录 // 用户登录
export type BackEndLoginType = InterFunction< export type BackEndLoginType = InterFunction<
{ accountNo: string; passWord: string; remember?: boolean }, { accountNo: string; passWord: string; remember?: boolean },
...@@ -17,3 +17,125 @@ export type BackEndLoginType = InterFunction< ...@@ -17,3 +17,125 @@ export type BackEndLoginType = InterFunction<
export type uploadOssType = InterFunction<any, { filePath: string }>; export type uploadOssType = InterFunction<any, { filePath: string }>;
// 断电上传 // 断电上传
export type uploadOssBPType = InterFunction<any, any>; export type uploadOssBPType = InterFunction<any, any>;
// V1.0.1-宣传模块管理-分页
export type listModuleInfoPage = InterListFunction<
{
keyword?: string;
moduleCode?: string;
moduleType?: number;
port?: number;
},
{
id: number;
moduleName: string;
moduleType: number;
remark: string;
deleted: number;
moduleCode: string;
createTime: string;
}
>;
// 修改宣传备注
export type updateModuleInfoRemark = InterFunction<
{
id: number;
remark: string;
},
NonNullable<unknown>
>;
// V1.0.1-删除宣传模块
export type removeModuleInfo = InterFunction<{ id: number }, NonNullable<unknown>>;
// V1.0.1-宣传模块-新增
export type insertModuleInfo = InterFunction<
{
id?: number;
moduleCode: string;
moduleName: string;
moduleType: number;
remark?: string;
},
NonNullable<unknown>
>;
// 宣传模块-修改
export type updateModuleInfo = InterFunction<
{
id: number;
moduleCode: string;
moduleName: string;
moduleType: number;
remark?: string;
},
NonNullable<unknown>
>;
// V1.0.1-banner管理-分页
export type listBannerInfoPage = InterListFunction<
{
keyword?: string;
moduleId?: number;
moduleType?: number;
},
{
bannerImg: string;
bannerName: string;
bannerPoster: string;
bannerType: number;
bannerUrl: string;
createTime: string;
deleted: number;
detailInfo: string;
endTime: string;
goodsId: number;
id: number;
moduleId: number;
sort: number;
startTime: string;
textContent: string;
using: number;
}
>;
// // V1.0.1-banner-新增
export type insertBannerInfo = InterFunction<
{
bannerImg?: string;
bannerName?: string;
bannerPoster?: string;
bannerType?: number;
bannerUrl?: string;
detailInfo?: string;
endTime?: string;
goodsId?: number;
id?: number;
moduleId?: number;
sort?: number;
startTime?: string;
textContent?: string;
using?: number;
},
NonNullable<unknown>
>;
// V1.0.1-banner-修改
export type updateBannerInfo = InterFunction<
{
bannerImg?: string;
bannerName?: string;
bannerPoster?: string;
bannerType?: number;
bannerUrl?: string;
detailInfo?: string;
endTime?: string;
goodsId?: number;
id?: number;
moduleId?: number;
sort?: number;
startTime?: string;
textContent?: string;
using?: number;
},
NonNullable<unknown>
>;
// V1.0.1-banner批量删除
export type batchRemoveBannerInfo = InterFunction<any, NonNullable<unknown>>;
// V1.0.1-删除banner
export type removeBannerInfo = InterFunction<{ id: number }, NonNullable<unknown>>;
// V1.0.1-banner-排序交换
export type exchangeBannerInfo = InterFunction<Array<any>, NonNullable<unknown>>;
src/api/modules/common.ts
import axios from '../request'; import axios from '../request';
import { BackEndLoginType, uploadOssBPType, uploadOssType } from '~/api/interface/commonType'; import {
BackEndLoginType,
batchRemoveBannerInfo,
exchangeBannerInfo,
insertBannerInfo,
insertModuleInfo,
listBannerInfoPage,
listModuleInfoPage,
removeBannerInfo,
removeModuleInfo,
updateBannerInfo,
updateModuleInfo,
updateModuleInfoRemark,
uploadOssBPType,
uploadOssType,
} from '~/api/interface/commonType';
export class CommonAPI { export class CommonAPI {
// 用户登录 // 用户登录
...@@ -7,8 +22,52 @@ export class CommonAPI { ...@@ -7,8 +22,52 @@ export class CommonAPI {
axios.post('/userapp/auth/backEndLogin', params); axios.post('/userapp/auth/backEndLogin', params);
// 上传图片 // 上传图片
static uploadOss: uploadOssType = (data) => axios.post('/pms/upload/oss', data); static uploadOss: uploadOssType = (params) => axios.post('/pms/upload/oss', params);
// 断点上传 // 断点上传
static uploadOssBP: uploadOssBPType = (data) => axios.post('/pms/upload/breakpoint', data); static uploadOssBP: uploadOssBPType = (params) => axios.post('/pms/upload/breakpoint', params);
// V1.0.1-宣传模块管理-分页
static listModuleInfoPage: listModuleInfoPage = (params) =>
axios.post('/release/module/listModuleInfoPage', params);
// 修改宣传备注
static updateModuleInfoRemark: updateModuleInfoRemark = (params) =>
axios.get('/release/module/updateModuleInfoRemark', { params });
// V1.0.1-删除宣传模块
static removeModuleInfo: removeModuleInfo = (params) =>
axios.get('/release/module/removeModuleInfo', { params });
// V1.0.1-宣传模块-新增
static insertModuleInfo: insertModuleInfo = (params) =>
axios.post('/release/module/insertModuleInfo', params);
// 宣传模块-修改
static updateModuleInfo: updateModuleInfo = (params) =>
axios.post('/release/module/updateModuleInfo', params);
// V1.0.1-banner管理-分页
static listBannerInfoPage: listBannerInfoPage = (params) =>
axios.post('/release/module/listBannerInfoPage', params);
// V1.0.1-banner-新增
static insertBannerInfo: insertBannerInfo = (params) =>
axios.post('/release/module/insertBannerInfo', params);
// V1.0.1-banner-修改
static updateBannerInfo: updateBannerInfo = (params) =>
axios.post('/release/module/updateBannerInfo', params);
// V1.0.1-banner批量删除
static batchRemoveBannerInfo: batchRemoveBannerInfo = (params) =>
axios.post('/release/module/batchRemoveBannerInfo', params);
// V1.0.1-删除banner
static removeBannerInfo: removeBannerInfo = (params) =>
axios.get('/release/module/removeBannerInfo', { params });
// V1.0.1-banner-排序交换
static exchangeBannerInfo: exchangeBannerInfo = (params) =>
axios.post('/release/module/exchangeBannerInfo', params);
} }
src/components/remarkChange/index.tsx 0 → 100644
import React, { useEffect } from 'react';
import { Form, Input, message, Modal } from 'antd';
// 传参类型
interface propType {
title?: string;
open: boolean;
closed: any;
change: any;
name?: string;
data: any;
}
const RemarkChange: React.FC<propType> = (props) => {
RemarkChange.defaultProps = {
title: '修改备注',
name: 'remark',
};
// 参数
const { title, open, closed, change, data, name } = props;
// 表单钩子
const [form] = Form.useForm<{ remark: string }>();
// 关闭弹窗
const handleCancel = () => {
form.resetFields();
closed();
};
// 确认事件
const handleOk = () => {
form
.validateFields()
.then(async (values) => {
await handleSubmit(values);
})
.catch((err) => {
message
.warning({
content: err.errorFields[0].errors[0],
})
.then();
});
};
// 提交事件
const handleSubmit = async (values: { remark: string }) => {
// console.log(values);
change({
id: data.id,
[name ? name : 'remark']: values.remark,
});
};
// componentDidMount
useEffect(() => {
if (!open) return;
if (!data) return;
form.setFieldValue('remark', data[name ? name : 'remark']);
// console.log(data);
}, [open]);
return (
<Modal
open={open}
title={title}
onCancel={handleCancel}
onOk={handleOk}
destroyOnClose
width={400}
>
<Form name='addForm' form={form} labelAlign='right'>
<Form.Item label='备注' name='remark' rules={[{ required: true, message: '请输入备注' }]}>
<Input.TextArea placeholder={'请输入备注'} maxLength={50} allowClear showCount rows={4} />
</Form.Item>
</Form>
</Modal>
);
};
export default RemarkChange;
src/components/uploader/index.tsx
...@@ -74,7 +74,7 @@ export const Uploader: React.FC<PropsType> = (props) => { ...@@ -74,7 +74,7 @@ export const Uploader: React.FC<PropsType> = (props) => {
// @ts-ignore // @ts-ignore
//(val: { result: { filePath: string } }) => { //(val: { result: { filePath: string } }) => {
({ result }) => { ({ result }) => {
console.log(result); // console.log(result);
setFileList([ setFileList([
...fileList, ...fileList,
{ {
......
src/pages/mallManage/courseManage/comp/addEditModal/index.tsx
...@@ -183,7 +183,7 @@ const AddEditModal: React.FC<propType> = (props) => { ...@@ -183,7 +183,7 @@ const AddEditModal: React.FC<propType> = (props) => {
fileUpload fileUpload
fileLength={1} fileLength={1}
fileType={['video/mp4', 'video/avi', 'video/wmv', 'video/rmvb']} fileType={['video/mp4', 'video/avi', 'video/wmv', 'video/rmvb']}
fileSize={1024} fileSize={512}
onChange={(e) => form.setFieldValue('videoUrl', e[0].url)} onChange={(e) => form.setFieldValue('videoUrl', e[0].url)}
defaultFileList={data?.videoUrl ? [{ url: data?.videoUrl }] : []} defaultFileList={data?.videoUrl ? [{ url: data?.videoUrl }] : []}
> >
......
src/pages/mallManage/courseManage/index.tsx
...@@ -233,7 +233,6 @@ const CourseManageView = () => { ...@@ -233,7 +233,6 @@ const CourseManageView = () => {
onChange: (page: number, pageSize: number) => paginationChange(page, pageSize), onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`, showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
}} }}
// rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
/> />
<AddEditModal <AddEditModal
open={isAddEditVisModal} open={isAddEditVisModal}
......
src/pages/resourceManage/materielManage/comp/addEditModal/index.tsx 0 → 100644
import React, { useEffect, useState } from 'react';
import { Form, Input, message, Modal, Select } from 'antd';
import { InterListType, InterReqType } from '~/api/interface';
import { insertBannerInfo, listBannerInfoPage } from '~/api/interface/commonType';
import { CommonAPI } from '~/api';
import { PlusOutlined } from '@ant-design/icons';
import { Uploader } from '~/components/uploader';
import RichText from '~/components/richText';
// 列表的类型
type TableType = InterListType<listBannerInfoPage>;
// 请求的表单类型
type ReqType = InterReqType<insertBannerInfo>;
// 传参类型
interface propType {
title: string;
open: boolean;
closed: any;
data?: TableType[0];
moduleId: number;
}
// 详情类型
const bannerType = [
{ label: '无', value: 0 },
{ label: '海报', value: 1 },
{ label: '路由', value: 2 },
{ label: '路由(需要授权)', value: 9 },
{ label: '路由(跳转Tab栏)', value: 10 },
{ label: '小程序', value: 3 },
// { label: '弹窗', value: 4 },
{ label: '纯文本', value: 5 },
// { label: '服务SKU', value: 6 },
// { label: '红包', value: 7 },
// { label: '推文', value: 8 },
{ label: '富文本', value: 11 },
];
const AddEditModal: React.FC<propType> = (props) => {
AddEditModal.defaultProps = {
data: undefined,
};
// 参数
const { title, open, closed, data, moduleId } = props;
// 表单钩子
const [form] = Form.useForm<ReqType>();
// 上传图片
const [bannerTypeValue, setBannerTypeValue] = useState(0);
// 关闭弹窗
const handleCancel = () => {
setBannerTypeValue(0);
form.resetFields();
closed();
};
// 确认事件
const handleOk = () => {
form
.validateFields()
.then(async (values) => {
await handleSubmit(values);
})
.catch((err) => {
message
.warning({
content: err.errorFields[0].errors[0],
})
.then();
});
};
// 提交事件
const handleSubmit = async (values: ReqType) => {
const res = await CommonAPI[data?.id ? 'updateBannerInfo' : 'insertBannerInfo']({
...values,
moduleId,
id: data?.id,
});
if (res && res.code === '200') {
message.success('操作成功');
handleCancel();
}
};
// componentDidMount
useEffect(() => {
if (!open) return;
if (!data) return;
form.setFieldsValue(data);
setBannerTypeValue(data?.bannerType);
// console.log('data --->', data);
}, [open]);
return (
<Modal open={open} title={title} onCancel={handleCancel} onOk={handleOk} destroyOnClose>
<Form
name='Form'
form={form}
labelAlign='right'
labelCol={{ span: 4 }}
wrapperCol={{ span: 10 }}
>
<Form.Item
label='名称'
name='bannerName'
rules={[{ required: true, message: '请输入名称' }]}
>
<Input placeholder={'请输入名称'} maxLength={20} allowClear />
</Form.Item>
<Form.Item label='状态' name='using' rules={[{ required: true, message: '请选择状态' }]}>
<Select
placeholder={'请选择状态'}
options={[
{ label: '上架', value: 1 },
{ label: '下架', value: 0 },
]}
allowClear
/>
</Form.Item>
<Form.Item
label='封面图'
name='bannerImg'
rules={[{ required: true, message: '请上传封面图' }]}
>
<Uploader
listType={'picture-card'}
fileUpload
fileLength={1}
fileSize={10}
fileType={['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/bmp']}
onChange={(e) => form.setFieldValue('bannerImg', e[0].url)}
defaultFileList={data?.bannerImg ? [{ url: data?.bannerImg }] : []}
>
<PlusOutlined />
</Uploader>
</Form.Item>
<Form.Item
label='详情类型'
name='bannerType'
rules={[{ required: true, message: '请选择详情类型' }]}
// initialValue={0}
>
<Select
placeholder={'请选择详情类型'}
options={bannerType}
allowClear
onChange={setBannerTypeValue}
value={bannerTypeValue}
/>
</Form.Item>
{[2, 9, 10].includes(bannerTypeValue) && (
<Form.Item
label='路由地址'
name='bannerUrl'
rules={[{ required: true, message: '请输入路由地址' }]}
>
<Input placeholder={'请输入路由地址'} maxLength={100} allowClear />
</Form.Item>
)}
{[3].includes(bannerTypeValue) && (
<Form.Item
label='小程序appid'
name='bannerUrl'
rules={[{ required: true, message: '请输入小程序appid' }]}
>
<Input placeholder={'请输入小程序appid'} maxLength={100} allowClear />
</Form.Item>
)}
{[5].includes(bannerTypeValue) && (
<Form.Item
label='纯文本'
name='bannerUrl'
rules={[{ required: true, message: '请输入纯文本' }]}
>
<Input placeholder={'请输入纯文本'} maxLength={100} allowClear />
</Form.Item>
)}
{[11].includes(bannerTypeValue) && (
<Form.Item
label='富文本'
name='textContent'
rules={[{ required: true, message: '请输入富文本' }]}
wrapperCol={{ span: 20 }}
>
<RichText
value={form.getFieldValue('textContent')}
onChange={(e) => form.setFieldValue('textContent', e)}
height={250}
/>
</Form.Item>
)}
{[1].includes(bannerTypeValue) && (
<Form.Item
label='详情海报'
name='bannerPoster'
rules={[{ required: true, message: '请上传详情海报' }]}
>
<Uploader
listType={'picture-card'}
fileUpload
fileLength={1}
fileSize={10}
fileType={['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/bmp']}
onChange={(e) => form.setFieldValue('bannerPoster', e[0].url)}
defaultFileList={data?.bannerPoster ? [{ url: data?.bannerPoster }] : []}
>
<PlusOutlined />
</Uploader>
</Form.Item>
)}
</Form>
</Modal>
);
};
export default AddEditModal;
src/pages/resourceManage/materielManage/comp/addModuleModal/index.tsx 0 → 100644
import React, { useEffect } from 'react';
import { Form, Input, message, Modal, Select } from 'antd';
import { InterListType, InterReqType } from '~/api/interface';
import { insertModuleInfo, listModuleInfoPage } from '~/api/interface/commonType';
import { CommonAPI } from '~/api';
// 列表的类型
type TableType = InterListType<listModuleInfoPage>;
// 请求的表单类型
type ReqType = InterReqType<insertModuleInfo>;
// 传参类型
interface propType {
title: string;
open: boolean;
closed: any;
data?: TableType[0];
}
// 所属产品
const moduleType = [
{ label: '云享飞', value: 0 },
{ label: '云飞手', value: 1 },
{ label: '云仓', value: 2 },
{ label: '无人机城', value: 3 },
];
const AddModuleModal: React.FC<propType> = (props) => {
AddModuleModal.defaultProps = {
data: undefined,
};
// 参数
const { title, open, closed, data } = props;
// 表单钩子
const [form] = Form.useForm<ReqType>();
// 关闭弹窗
const handleCancel = () => {
form.resetFields();
closed();
};
// 确认事件
const handleOk = () => {
form
.validateFields()
.then(async (values) => {
await handleSubmit(values);
})
.catch((err) => {
message
.warning({
content: err.errorFields[0].errors[0],
})
.then();
});
};
// 提交事件
const handleSubmit = async (values: ReqType) => {
const res = await CommonAPI.insertModuleInfo(values);
if (res && res.code === '200') {
message.success('操作成功');
handleCancel();
}
// console.log('提交事件 --->', values);
};
// componentDidMount
useEffect(() => {
if (!open) return;
if (!data) return;
form.setFieldsValue(data);
// console.log('data --->', data);
}, [open]);
return (
<Modal open={open} title={title} onCancel={handleCancel} onOk={handleOk} destroyOnClose>
<Form
name='addForm'
form={form}
labelAlign='right'
labelCol={{ span: 4 }}
wrapperCol={{ span: 10 }}
>
<Form.Item
label='模块名称'
name='moduleName'
rules={[{ required: true, message: '请输入模块名称' }]}
>
<Input placeholder={'请输入模块名称'} maxLength={20} allowClear />
</Form.Item>
<Form.Item
label='所属产品'
name='moduleType'
rules={[{ required: true, message: '请选择所属产品' }]}
>
<Select placeholder={'请选择所属产品'} options={moduleType} allowClear />
</Form.Item>
<Form.Item
label='模块代码'
name='moduleCode'
rules={[{ required: true, message: '请输入模块代码' }]}
>
<Input placeholder={'请输入模块代码'} maxLength={20} allowClear />
</Form.Item>
</Form>
</Modal>
);
};
export default AddModuleModal;
src/pages/resourceManage/materielManage/detail/index.tsx 0 → 100644
import React, { useEffect, useState } from 'react';
import { Button, Form, Input, Select, Table, Image, Modal, message } from 'antd';
import { listBannerInfoPage } from '~/api/interface/commonType';
import { InterListType, InterReqListType } from '~/api/interface';
import { useLocation, useNavigate } from 'react-router-dom';
import qs from 'query-string';
import { ArrowDownOutlined, ArrowUpOutlined, PlusOutlined } from '@ant-design/icons';
import { CommonAPI } from '~/api';
import { ColumnsType } from 'antd/es/table';
import AddEditModal from '../comp/addEditModal';
// 表格的类型
type TableType = InterListType<listBannerInfoPage>;
// 请求的参数
type ReqType = InterReqListType<listBannerInfoPage>;
// 搜索表单的数据
let query: ReqType = {};
// 所属产品
const moduleType = [
{ label: '云享飞', value: '0' },
{ label: '云飞手', value: '1' },
{ label: '云仓', value: '2' },
{ label: '无人机城', value: '3' },
];
// 详情类型
const bannerType = [
{ label: '无', value: 0 },
{ label: '海报', value: 1 },
{ label: '路由', value: 2 },
{ label: '路由(需要授权)', value: 9 },
{ label: '路由(跳转Tab栏)', value: 10 },
{ label: '小程序', value: 3 },
// { label: '弹窗', value: 4 },
{ label: '纯文本', value: 5 },
// { label: '服务SKU', value: 6 },
// { label: '红包', value: 7 },
// { label: '推文', value: 8 },
{ label: '富文本', value: 11 },
];
const MaterielManageDetail = () => {
const { confirm } = Modal;
// 表单钩子
const [form] = Form.useForm<ReqType>();
// 路由钩子
const location = useLocation();
const navigate = useNavigate();
// 返回上一页
const handleBack = () => {
navigate(-1);
};
// 当前选择的项目
const [selectedRows, setSelectedRows] = useState<TableType>([]);
// 排序按钮是否能操作
const [sortBtnDisabled, setSortBtnDisabled] = useState<boolean>(false);
// 新增修改弹窗是否开启
const [addModalVisible, setAddModalVisible] = useState(false);
// 需要编辑的数据
const [editData, setEditData] = useState<TableType[0]>();
// 表格数据
const [tableData, setTableData] = useState<TableType>([]);
// 全部表格数据
const [tableDataAll, setTableDataAll] = useState<TableType>([]);
// 表格分页配置
const [pagination, setPagination] = useState({
total: 0,
pageSize: 5,
current: 1,
totalPage: 0,
});
// 加载列表
const getTableList = async (value = {}) => {
// 只需要修改这个地方的接口即可
const res = await CommonAPI.listBannerInfoPage({
pageNo: pagination.current,
pageSize: pagination.pageSize,
...value,
...query,
moduleId: Number(qs.parse(location.search).id),
});
if (res && res.code === '200') {
const { list, pageNo, totalCount, pageSize, totalPage } = res.result; // 解构
setPagination({
total: totalCount,
current: pageNo,
pageSize,
totalPage,
});
setTableData(list || []);
}
};
// 翻页
const paginationChange = (pageNo: number, pageSize: number) => {
getTableList({ pageNo, pageSize }).then();
};
// 删除数据
const handleDelete = (record: TableType[0]) => {
confirm({
title: '提示',
content: '是否删除该模块？',
onOk: async () => {
const res = await CommonAPI.removeBannerInfo({ id: record.id });
if (res && res.code === '200') {
paginationChange(pagination.current, pagination.pageSize);
await message.success('删除成功');
}
},
});
};
// 获取全部数据
const getAllData = async () => {
const res = await CommonAPI.listBannerInfoPage({
pageNo: 1,
pageSize: 9999,
moduleId: Number(qs.parse(location.search).id),
});
if (res && res.code === '200') {
const { list } = res.result; // 解构
setTableDataAll(list || []);
}
};
// 切换排序
const handleSort = async (from: 'up' | 'down') => {
if (selectedRows.length === 0) {
message.warning('请选择需要排序的数据').then();
return;
}
// 当前选项
const item = selectedRows.at(-1);
// 当前索引
const index = tableDataAll.findIndex((i) => i.id === item?.id);
// 当前表格中的索引
const tableIndex = tableData.findIndex((i) => i.id === item?.id);
// 第一条数据不能上移
if (index === 0 && from === 'up') {
message.warning('已是第一条数据').then();
return;
}
// 最后一条数据不能下移
if (index === tableDataAll.length - 1 && from === 'down') {
message.warning('已是最后一条数据').then();
return;
}
setSortBtnDisabled(true);
// 转换位置
const res = await CommonAPI.exchangeBannerInfo(
from === 'up' ? [tableDataAll[index - 1], item] : [tableDataAll[index + 1], item],
);
if (res && res.code === '200') {
message.success('操作成功').then();
setSortBtnDisabled(false);
// setSelectedRows(from === 'up' ? [tableDataAll[index - 1]] : [tableDataAll[index + 1]]);
// 如果是当前页的第一条数据
if (tableIndex === 0 && from === 'up') {
paginationChange(pagination.current - 1, pagination.pageSize);
return;
}
// 如果是当前页的最后一条数据
if (tableIndex === tableData.length - 1 && from === 'down') {
paginationChange(pagination.current + 1, pagination.pageSize);
return;
}
paginationChange(pagination.current, pagination.pageSize);
getAllData().then();
}
};
// componentDidMount
useEffect(() => {
query = {};
form.setFieldsValue(qs.parse(location.search));
getTableList().then();
getAllData().then();
}, []);
// 表格结构
const columns: ColumnsType<TableType[0]> = [
{
title: '序号',
dataIndex: 'accountNo',
align: 'center',
width: '50px',
render: (_text, _record, index) => (pagination.current - 1) * pagination.pageSize + index + 1,
},
{
title: '名称',
dataIndex: 'bannerName',
align: 'center',
width: '100px',
ellipsis: true,
},
{
title: '封面图',
dataIndex: 'bannerImg',
align: 'center',
width: '100px',
render: (text) => (
<>
<Image src={text} alt={'封面图'} style={{ width: '32px', height: '32px' }} />
</>
),
},
{
title: '点击详情',
dataIndex: 'bannerType',
align: 'center',
width: '100px',
render: (text) => bannerType.find((i) => i.value === text)?.label || text,
},
{
title: '点击详情',
dataIndex: 'bannerPoster',
align: 'center',
width: '100px',
render: (text, record) => {
if ([1].includes(record.bannerType)) {
return <Image src={text} alt={'点击详情'} style={{ width: '32px', height: '32px' }} />;
} else {
return <>{record?.bannerUrl}</>;
}
},
},
{
title: '状态',
dataIndex: 'using',
align: 'center',
width: '100px',
render: (text) => (text === 1 ? '上架' : '下架'),
},
{
title: '操作',
dataIndex: 'action',
align: 'center',
width: '150px',
fixed: 'right',
render: (_text, record) => (
<>
<Button
type={'link'}
onClick={() => {
setEditData(JSON.parse(JSON.stringify(record)));
setAddModalVisible(true);
}}
>
编辑
</Button>
<Button type={'link'} danger onClick={() => handleDelete(record)}>
删除
</Button>
</>
),
},
];
return (
<>
<div
style={{
width: '100%',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<div>基本信息</div>
<div
style={{
marginTop: '10px',
width: '120px',
display: 'flex',
justifyContent: 'space-around',
}}
>
<Button type={'primary'}>修改</Button>
<Button type={'primary'} onClick={handleBack}>
返回
</Button>
</div>
</div>
<div style={{ width: '350px' }}>
<Form name='addForm' form={form} labelAlign='right'>
<Form.Item
label='模块名称'
name='moduleName'
rules={[{ required: true, message: '请输入模块名称' }]}
>
<Input placeholder={'请输入模块名称'} maxLength={20} allowClear />
</Form.Item>
<Form.Item
label='所属产品'
name='moduleType'
rules={[{ required: true, message: '所属产品' }]}
>
<Select placeholder={'所属产品'} options={moduleType} allowClear />
</Form.Item>
<Form.Item
label='模块代码'
name='moduleCode'
rules={[{ required: true, message: '请输入模块代码' }]}
>
<Input placeholder={'请输入模块代码'} maxLength={20} allowClear />
</Form.Item>
</Form>
</div>
<div>模块内容</div>
<div
style={{
marginTop: '20px',
width: '150px',
display: 'flex',
justifyContent: 'space-around',
marginBottom: '20px',
}}
>
<Button
type={'primary'}
icon={<ArrowUpOutlined />}
onClick={() => handleSort('up')}
disabled={sortBtnDisabled}
></Button>
<Button
type={'primary'}
icon={<ArrowDownOutlined />}
onClick={() => handleSort('down')}
disabled={sortBtnDisabled}
></Button>
<Button
type={'primary'}
icon={<PlusOutlined />}
onClick={() => {
setAddModalVisible(true);
}}
>
新增
</Button>
</div>
<Table
size='small'
dataSource={tableData}
columns={columns}
rowKey='id'
// scroll={{ x: 1500 }}
bordered
pagination={{
total: pagination.total,
pageSize: pagination.pageSize,
current: pagination.current,
showSizeChanger: true,
showQuickJumper: true,
onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
}}
rowSelection={{
type: 'radio',
// selectedRowKeys: selectedRows.map((i) => i.id),
onChange: (_selectedRowKeys: React.Key[], selectedRows: TableType) => {
setSelectedRows(selectedRows);
},
}}
/>
<AddEditModal
open={addModalVisible}
title={editData?.id ? '编辑' : '新增'}
data={editData}
closed={() => {
setAddModalVisible(false);
setEditData(undefined);
paginationChange(pagination.current, pagination.pageSize);
}}
moduleId={Number(qs.parse(location.search).id)}
/>
</>
);
};
export default MaterielManageDetail;
src/pages/resourceManage/materielManage/index.tsx 0 → 100644
import { useEffect, useState } from 'react';
import SearchBox from '~/components/search-box';
import { Button, message, Modal, Table } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { InterListType, InterReqListType } from '~/api/interface';
import { listModuleInfoPage } from '~/api/interface/commonType';
import { ColumnsType } from 'antd/es/table';
import { CommonAPI } from '~/api';
import RemarkChange from '~/components/remarkChange';
import AddModuleModal from '~/pages/resourceManage/materielManage/comp/addModuleModal';
import qs from 'query-string';
import { useNavigate } from 'react-router-dom';
// 列表类型
type TableType = InterListType<listModuleInfoPage>;
// 请求的参数
type ReqType = InterReqListType<listModuleInfoPage>;
// 搜索表单的数据
let query: ReqType = {};
// 所属产品
const moduleType = [
{ label: '云享飞', value: 0 },
{ label: '云飞手', value: 1 },
{ label: '云仓', value: 2 },
{ label: '无人机城', value: 3 },
];
const MaterielManageView = () => {
const { confirm } = Modal;
// 路由钩子
const navigate = useNavigate();
// 备注弹窗是否开启
const [remarkModalVisible, setRemarkModalVisible] = useState(false);
// 新增弹窗是否开启
const [addModalVisible, setAddModalVisible] = useState(false);
// 需要编辑的数据
const [editData, setEditData] = useState<TableType[0]>();
// 表格数据
const [tableData, setTableData] = useState<TableType>([]);
// 表格分页配置
const [pagination, setPagination] = useState({
total: 0,
pageSize: 10,
current: 1,
totalPage: 0,
});
// 加载列表
const getTableList = async (value = {}) => {
// 只需要修改这个地方的接口即可
const res = await CommonAPI.listModuleInfoPage({
pageNo: pagination.current,
pageSize: pagination.pageSize,
...value,
...query,
});
if (res && res.code === '200') {
const { list, pageNo, totalCount, pageSize, totalPage } = res.result; // 解构
setPagination({
total: totalCount,
current: pageNo,
pageSize,
totalPage,
});
setTableData(list);
}
};
// 翻页
const paginationChange = (pageNo: number, pageSize: number) => {
getTableList({ pageNo, pageSize }).then();
};
// 表单提交
const onFinish = (data: ReqType) => {
pagination.current = 1;
query = data;
getTableList(data).then();
};
// 打开修改备注弹窗
const handleRemark = (record: TableType[0]) => {
setEditData(record);
setRemarkModalVisible(true);
};
// 修改备注
const handleRemarkChange = async (data: TableType[0]) => {
const res = await CommonAPI.updateModuleInfoRemark({
id: data.id,
remark: data.remark,
});
if (res && res.code === '200') {
paginationChange(pagination.current, pagination.pageSize);
setEditData(undefined);
setRemarkModalVisible(false);
}
};
// 删除数据
const handleDelete = (record: TableType[0]) => {
confirm({
title: '提示',
content: '是否删除该模块？',
onOk: async () => {
const res = await CommonAPI.removeModuleInfo({ id: record.id });
if (res && res.code === '200') {
paginationChange(pagination.current, pagination.pageSize);
await message.success('删除成功');
}
},
});
};
// 跳转详情
const handleDetail = (record: TableType[0]) => {
const search = {
id: record.id,
moduleCode: record.moduleCode,
moduleName: record.moduleName,
moduleType: record.moduleType,
};
navigate(`/resourceManage/materielManage/detail?${qs.stringify(search)}`);
};
// componentDidMount
useEffect(() => {
query = {};
getTableList().then();
}, []);
// 表格结构
const columns: ColumnsType<TableType[0]> = [
{
title: '序号',
dataIndex: 'accountNo',
align: 'center',
width: '50px',
render: (_text, _record, index) => (pagination.current - 1) * pagination.pageSize + index + 1,
},
{
title: '模块名称',
dataIndex: 'moduleName',
align: 'center',
},
{
title: '所属产品',
dataIndex: 'moduleType',
align: 'center',
render: (text) => moduleType?.find((i) => i.value === text)?.label || text,
},
{
title: '模块代码',
dataIndex: 'moduleCode',
align: 'center',
},
{
title: '备注',
dataIndex: 'remark',
align: 'center',
width: '150px',
ellipsis: true,
render: (text, record) => (
<Button type={'link'} onClick={() => handleRemark(record)}>
{text ? text : '--'}
</Button>
),
},
{
title: '操作',
dataIndex: 'action',
align: 'center',
width: '150px',
fixed: 'right',
render: (_text, record) => (
<>
<Button type={'link'} onClick={() => handleDetail(record)}>
详情
</Button>
<Button type={'link'} danger onClick={() => handleDelete(record)}>
删除
</Button>
</>
),
},
];
return (
<>
<SearchBox
search={[
{
label: '模块名称',
name: 'keyword',
type: 'input',
placeholder: '请输入模块名称',
},
{
label: '所属产品',
name: 'moduleType',
type: 'Select',
placeholder: '请选择所属产品',
options: moduleType,
},
{
label: '模块代码',
name: 'keyword',
type: 'input',
placeholder: '请输入模块代码',
},
]}
child={
<>
<Button
type={'primary'}
icon={<PlusOutlined />}
onClick={() => {
setAddModalVisible(true);
}}
>
新建
</Button>
</>
}
searchData={onFinish}
/>
<Table
size='small'
dataSource={tableData}
columns={columns}
rowKey='id'
// scroll={{ x: 1500 }}
bordered
pagination={{
total: pagination.total,
pageSize: pagination.pageSize,
current: pagination.current,
showSizeChanger: true,
showQuickJumper: true,
onChange: (page: number, pageSize: number) => paginationChange(page, pageSize),
showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
}}
/>
<RemarkChange
open={remarkModalVisible}
data={editData}
closed={() => {
paginationChange(pagination.current, pagination.pageSize);
setEditData(undefined);
setRemarkModalVisible(false);
}}
change={handleRemarkChange}
/>
<AddModuleModal
open={addModalVisible}
title={editData?.id ? '编辑' : '新增'}
data={editData}
closed={() => {
paginationChange(pagination.current, pagination.pageSize);
setEditData(undefined);
setAddModalVisible(false);
}}
/>
</>
);
};
export default MaterielManageView;
src/pages/systemManage/accountManage/comp/addEditModal/index.tsx
...@@ -45,6 +45,8 @@ const AddEditModal: React.FC<propType> = (props) => { ...@@ -45,6 +45,8 @@ const AddEditModal: React.FC<propType> = (props) => {
}; };
// 提交事件 // 提交事件
const handleSubmit = async (values: ReqType) => { const handleSubmit = async (values: ReqType) => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const res = await SystemManageAPI[data?.id ? 'updateBAccount' : 'insertBAccount']({ const res = await SystemManageAPI[data?.id ? 'updateBAccount' : 'insertBAccount']({
...data, ...data,
...values, ...values,
......
src/router/router.tsx
...@@ -25,6 +25,8 @@ import { ...@@ -25,6 +25,8 @@ import {
CoffeeOutlined, CoffeeOutlined,
UnorderedListOutlined, UnorderedListOutlined,
BookOutlined, BookOutlined,
SketchOutlined,
DribbbleOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore // @ts-ignore
...@@ -46,6 +48,8 @@ import CustomMoneyView from '~/pages/customManage/customMoney'; ...@@ -46,6 +48,8 @@ import CustomMoneyView from '~/pages/customManage/customMoney';
import CustomMoneyDetail from '~/pages/customManage/customMoney/detail'; import CustomMoneyDetail from '~/pages/customManage/customMoney/detail';
import AccountManageView from '~/pages/systemManage/accountManage'; import AccountManageView from '~/pages/systemManage/accountManage';
import CourseManageView from '~/pages/mallManage/courseManage'; import CourseManageView from '~/pages/mallManage/courseManage';
import MaterielManageView from '~/pages/resourceManage/materielManage';
import MaterielManageDetail from '~/pages/resourceManage/materielManage/detail';
// 活动 // 活动
// const ActivityList = React.lazy(() => import('src/pages/activityManage/activityList')); //活动管理 // const ActivityList = React.lazy(() => import('src/pages/activityManage/activityList')); //活动管理
...@@ -677,6 +681,37 @@ export const routerList: Array<RouteObjectType> = [ ...@@ -677,6 +681,37 @@ export const routerList: Array<RouteObjectType> = [
// ], // ],
// }, // },
{ {
path: '/resourceManage',
element: <LayoutView />,
errorElement: <ErrorPage />,
meta: {
id: 30000,
icon: <DribbbleOutlined />,
title: '资源管理',
},
children: [
{
path: '/resourceManage/materielManage',
element: withLoadingComponent(<MaterielManageView />),
meta: {
id: 30100,
title: '物料管理',
icon: <SketchOutlined />,
},
},
{
path: '/resourceManage/materielManage/detail',
element: withLoadingComponent(<MaterielManageDetail />),
meta: {
id: 30100,
title: '物料详情',
icon: <SketchOutlined />,
hidden: true,
},
},
],
},
{
path: '/systemManage', path: '/systemManage',
element: <LayoutView />, element: <LayoutView />,
errorElement: <ErrorPage />, errorElement: <ErrorPage />,
......
src/store/index.ts
import { configureStore } from '@reduxjs/toolkit'; import { configureStore } from '@reduxjs/toolkit';
import { Menu } from './module/menu'; import { Menu } from './module/menu';
import { UserInfo } from './module/userInfo'; import { UserInfo } from './module/userInfo';
import { Page } from '~/store/module/page';
export const store = configureStore({ export const store = configureStore({
reducer: { reducer: {
Page,
Menu, Menu,
UserInfo, UserInfo,
}, },
......
src/store/module/page/index.ts 0 → 100644
import { createSlice } from '@reduxjs/toolkit';
const initialState = {
pageCurrent: JSON.parse(localStorage.getItem('SXTB-ADMIN-PAGE-CURRENT') as string) || [],
};
export const pageSlice = createSlice({
name: 'pageSlice',
initialState,
reducers: {
SET_PAGE_CURRENT(state, action) {
state.pageCurrent = action.payload;
localStorage.setItem('SXTB-ADMIN-PAGE-CURRENT', JSON.stringify(action.payload));
},
},
});
export const { SET_PAGE_CURRENT } = pageSlice.actions;
export const Page = pageSlice.reducer;
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论