前端:管理后台增加 Banner CRUD 功能
This commit is contained in:
parent
4595db1d4c
commit
23acc40d8d
@ -2,7 +2,8 @@
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
'/admin-api/': {
|
'/admin-api/': {
|
||||||
target: 'http://180.167.213.26:18083/',
|
// target: 'http://180.167.213.26:18083/',
|
||||||
|
target: 'http://127.0.0.1:18083/',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
pathRewrite: {},
|
pathRewrite: {},
|
||||||
},
|
},
|
||||||
@ -11,4 +12,9 @@ export default {
|
|||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
pathRewrite: {},
|
pathRewrite: {},
|
||||||
},
|
},
|
||||||
|
'/promotion-api/': {
|
||||||
|
target: 'http://127.0.0.1:18085/',
|
||||||
|
changeOrigin: true,
|
||||||
|
pathRewrite: {},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
@ -94,6 +94,29 @@ export default [
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
// promotion
|
||||||
|
{
|
||||||
|
path: '/promotion',
|
||||||
|
name: 'promotion',
|
||||||
|
icon: 'user',
|
||||||
|
routes: [
|
||||||
|
{
|
||||||
|
path: '/promotion/banner-list',
|
||||||
|
name: 'promotion-banner-list',
|
||||||
|
component: './Promotion/BannerList',
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// path: '/product/product-spu-add',
|
||||||
|
// name: 'product-spu-add',
|
||||||
|
// component: './Product/ProductSpuAddOrUpdate',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// path: '/product/product-category-list',
|
||||||
|
// name: 'product-category-list',
|
||||||
|
// component: './Product/ProductCategoryList',
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/dashboard',
|
path: '/dashboard',
|
||||||
name: 'dashboard',
|
name: 'dashboard',
|
||||||
|
@ -49,10 +49,10 @@ function getDictionaryTree(req, res) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
'GET /admin-api/admins/admin/menu_resource_tree': getAdminMenuAll,
|
// 'GET /admin-api/admins/admin/menu_resource_tree': getAdminMenuAll,
|
||||||
'GET /admin-api/admins/admin/url_resource_list': getAdminUrls,
|
// 'GET /admin-api/admins/admin/url_resource_list': getAdminUrls,
|
||||||
'GET /admin-api/admins/resource/tree': getResourceTree,
|
// 'GET /admin-api/admins/resource/tree': getResourceTree,
|
||||||
'GET /admin-api/admins/role/page': getQueryRole,
|
// 'GET /admin-api/admins/role/page': getQueryRole,
|
||||||
// 'GET /admin-api/admins/admin/page': getQueryRole,
|
// 'GET /admin-api/admins/admin/page': getQueryRole,
|
||||||
'GET /admin-api/admins/data_dict/tree': getDictionaryTree,
|
// 'GET /admin-api/admins/data_dict/tree': getDictionaryTree,
|
||||||
};
|
};
|
||||||
|
@ -52,4 +52,6 @@ export default {
|
|||||||
// 订单
|
// 订单
|
||||||
'menu.order': '订单管理',
|
'menu.order': '订单管理',
|
||||||
'menu.order.order-list': '订单管理',
|
'menu.order.order-list': '订单管理',
|
||||||
|
// 营销相关
|
||||||
|
'menu.promotion.promotion-banner-list': 'Banner 管理'
|
||||||
};
|
};
|
||||||
|
256
admin-web/src/models/promotion/bannerList.js
Normal file
256
admin-web/src/models/promotion/bannerList.js
Normal file
@ -0,0 +1,256 @@
|
|||||||
|
import {message} from 'antd';
|
||||||
|
import {buildTreeNode, findCheckedKeys} from '../../utils/tree.utils';
|
||||||
|
import {
|
||||||
|
addBanner,
|
||||||
|
adminRoleAssign,
|
||||||
|
deleteBanner,
|
||||||
|
queryBanner,
|
||||||
|
queryBannerRoleList,
|
||||||
|
updateBanner,
|
||||||
|
updateBannerStatus,
|
||||||
|
} from '../../services/promotion';
|
||||||
|
import {arrayToStringParams} from '../../utils/request.qs';
|
||||||
|
import PaginationHelper from '../../../helpers/PaginationHelper';
|
||||||
|
|
||||||
|
const SEARCH_PARAMS_DEFAULT = {
|
||||||
|
title: '',
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
namespace: 'bannerList',
|
||||||
|
|
||||||
|
state: {
|
||||||
|
// 分页列表相关
|
||||||
|
list: [],
|
||||||
|
listLoading: false,
|
||||||
|
pagination: PaginationHelper.defaultPaginationConfig,
|
||||||
|
searchParams: SEARCH_PARAMS_DEFAULT,
|
||||||
|
|
||||||
|
// 添加 or 修改表单相关
|
||||||
|
modalVisible: false,
|
||||||
|
modalType: undefined, // 'add' or 'update' 表单
|
||||||
|
formVals: {}, // 当前表单值
|
||||||
|
modalLoading: false,
|
||||||
|
|
||||||
|
// 分配角色表单相关
|
||||||
|
roleList: [],
|
||||||
|
roleModalVisible: false,
|
||||||
|
roleCheckedKeys: [], // 此处的 Key ,就是角色编号
|
||||||
|
roleAssignLoading: false,
|
||||||
|
},
|
||||||
|
|
||||||
|
effects: {
|
||||||
|
// 查询列表
|
||||||
|
* query({ payload }, { call, put }) {
|
||||||
|
// 显示加载中
|
||||||
|
yield put({
|
||||||
|
type: 'changeListLoading',
|
||||||
|
payload: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 请求
|
||||||
|
const response = yield call(queryBanner, payload);
|
||||||
|
// 响应
|
||||||
|
yield put({
|
||||||
|
type: 'setAll',
|
||||||
|
payload: {
|
||||||
|
list: response.data.list,
|
||||||
|
pagination: PaginationHelper.formatPagination(response.data, payload),
|
||||||
|
searchParams: {
|
||||||
|
title: payload.title || ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// 隐藏加载中
|
||||||
|
yield put({
|
||||||
|
type: 'changeListLoading',
|
||||||
|
payload: false,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
* add({ payload }, { call, put }) {
|
||||||
|
const { callback, body } = payload;
|
||||||
|
// 显示加载中
|
||||||
|
yield put({
|
||||||
|
type: 'changeModalLoading',
|
||||||
|
payload: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 请求
|
||||||
|
const response = yield call(addBanner, body);
|
||||||
|
// 响应
|
||||||
|
if (response.code === 0) {
|
||||||
|
if (callback) {
|
||||||
|
callback(response);
|
||||||
|
}
|
||||||
|
// 刷新列表
|
||||||
|
yield put({
|
||||||
|
type: 'query',
|
||||||
|
payload: {
|
||||||
|
...PaginationHelper.defaultPayload
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 隐藏加载中
|
||||||
|
yield put({
|
||||||
|
type: 'changeModalLoading',
|
||||||
|
payload: false,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
* update({ payload }, { call, put }) {
|
||||||
|
const { callback, body } = payload;
|
||||||
|
// 显示加载中
|
||||||
|
yield put({
|
||||||
|
type: 'changeModalLoading',
|
||||||
|
payload: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 请求
|
||||||
|
const response = yield call(updateBanner, body);
|
||||||
|
// 响应
|
||||||
|
if (response.code === 0) {
|
||||||
|
if (callback) {
|
||||||
|
callback(response);
|
||||||
|
}
|
||||||
|
// 刷新列表
|
||||||
|
yield put({
|
||||||
|
type: 'query',
|
||||||
|
payload: {
|
||||||
|
...PaginationHelper.defaultPayload
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 隐藏加载中
|
||||||
|
yield put({
|
||||||
|
type: 'changeModalLoading',
|
||||||
|
payload: false,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
* updateStatus({ payload }, { call, put }) {
|
||||||
|
// 请求
|
||||||
|
const response = yield call(updateBannerStatus, payload);
|
||||||
|
// 响应
|
||||||
|
if (response.code === 0) {
|
||||||
|
message.info('更新状态成功!');
|
||||||
|
// 刷新列表
|
||||||
|
yield put({
|
||||||
|
type: 'query',
|
||||||
|
payload: {
|
||||||
|
...PaginationHelper.defaultPayload
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
* delete({ payload }, { call, put }) {
|
||||||
|
// 请求
|
||||||
|
const response = yield call(deleteBanner, payload);
|
||||||
|
// 响应
|
||||||
|
if (response.code === 0) {
|
||||||
|
message.info('删除成功!');
|
||||||
|
// 刷新列表
|
||||||
|
yield put({
|
||||||
|
type: 'query',
|
||||||
|
payload: {
|
||||||
|
...PaginationHelper.defaultPayload
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
* queryRoleList({ payload }, { call, put }) {
|
||||||
|
// 显示加载中
|
||||||
|
yield put({
|
||||||
|
type: 'changeRoleAssignLoading',
|
||||||
|
payload: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 请求
|
||||||
|
const response = yield call(queryBannerRoleList, payload);
|
||||||
|
// 响应
|
||||||
|
if (response.code === 0) {
|
||||||
|
const roleList = response.data;
|
||||||
|
const roleTreeData = buildTreeNode(roleList, 'name', 'id');
|
||||||
|
const roleCheckedKeys = findCheckedKeys(roleList);
|
||||||
|
yield put({
|
||||||
|
type: 'setAll',
|
||||||
|
payload: {
|
||||||
|
roleList: roleTreeData,
|
||||||
|
roleCheckedKeys,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 隐藏加载中
|
||||||
|
yield put({
|
||||||
|
type: 'changeRoleAssignLoading',
|
||||||
|
payload: false,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
* roleAssign({ payload }, { call, put }) {
|
||||||
|
const { callback, body } = payload;
|
||||||
|
// 显示加载中
|
||||||
|
yield put({
|
||||||
|
type: 'changeRoleAssignLoading',
|
||||||
|
payload: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 请求
|
||||||
|
const response = yield call(adminRoleAssign, {
|
||||||
|
id: body.id,
|
||||||
|
roleIds: arrayToStringParams(body.roleIds),
|
||||||
|
});
|
||||||
|
// 响应
|
||||||
|
if (response.code === 0) {
|
||||||
|
if (callback) {
|
||||||
|
callback(response);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 隐藏加载中
|
||||||
|
yield put({
|
||||||
|
type: 'changeRoleAssignLoading',
|
||||||
|
payload: false,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
reducers: {
|
||||||
|
changeRoleCheckedKeys(state, { payload }) {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
roleCheckedKeys: payload,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
// 修改加载中的状态
|
||||||
|
changeRoleAssignLoading(state, { payload }) {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
roleAssignLoading: payload,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
changeModalLoading(state, { payload }) {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
modalLoading: payload,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
changeListLoading(state, { payload }) {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
listLoading: payload,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
// 设置所有属性
|
||||||
|
setAll(state, { payload }) {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
...payload,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
@ -209,7 +209,6 @@ class ProductCategoryList extends PureComponent {
|
|||||||
{
|
{
|
||||||
title: '排序值',
|
title: '排序值',
|
||||||
dataIndex: 'sort',
|
dataIndex: 'sort',
|
||||||
render: sort => <span>{sort}</span>,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '创建时间',
|
title: '创建时间',
|
||||||
|
416
admin-web/src/pages/Promotion/BannerList.js
Normal file
416
admin-web/src/pages/Promotion/BannerList.js
Normal file
@ -0,0 +1,416 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
|
||||||
|
import React, { PureComponent, Fragment } from 'react';
|
||||||
|
import { connect } from 'dva';
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
Form,
|
||||||
|
Input,
|
||||||
|
Button,
|
||||||
|
Modal,
|
||||||
|
message,
|
||||||
|
Table,
|
||||||
|
Divider,
|
||||||
|
Tree,
|
||||||
|
Spin,
|
||||||
|
Row,
|
||||||
|
Col,
|
||||||
|
Select,
|
||||||
|
Icon,
|
||||||
|
InputNumber
|
||||||
|
} from 'antd';
|
||||||
|
import { checkTypeWithEnglishAndNumbers } from '../../../helpers/validator'
|
||||||
|
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
|
||||||
|
|
||||||
|
import styles from './BannerList.less';
|
||||||
|
import moment from "moment";
|
||||||
|
import PaginationHelper from "../../../helpers/PaginationHelper";
|
||||||
|
|
||||||
|
const FormItem = Form.Item;
|
||||||
|
const { TreeNode } = Tree;
|
||||||
|
const status = ['未知', '正常', '禁用'];
|
||||||
|
|
||||||
|
// 列表
|
||||||
|
function List ({ dataSource, loading, pagination, searchParams, dispatch,
|
||||||
|
handleModalVisible}) {
|
||||||
|
|
||||||
|
function handleStatus(record) {
|
||||||
|
Modal.confirm({
|
||||||
|
title: record.status === 1 ? '确认禁用' : '取消禁用',
|
||||||
|
content: `${record.username}`,
|
||||||
|
onOk() {
|
||||||
|
dispatch({
|
||||||
|
type: 'bannerList/updateStatus',
|
||||||
|
payload: {
|
||||||
|
id: record.id,
|
||||||
|
status: record.status === 1 ? 2 : 1,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onCancel() {},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDelete(record) {
|
||||||
|
Modal.confirm({
|
||||||
|
title: `确认删除?`,
|
||||||
|
content: `${record.title}`,
|
||||||
|
onOk() {
|
||||||
|
dispatch({
|
||||||
|
type: 'bannerList/delete',
|
||||||
|
payload: {
|
||||||
|
id: record.id,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onCancel() {},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '标题',
|
||||||
|
dataIndex: 'title'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '跳转链接',
|
||||||
|
dataIndex: 'url',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '图片',
|
||||||
|
dataIndex: 'picUrl',
|
||||||
|
render(val) {
|
||||||
|
return <img width={120} src={val} />;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '排序值',
|
||||||
|
dataIndex: 'sort',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
dataIndex: 'status',
|
||||||
|
render(val) {
|
||||||
|
return <span>{status[val]}</span>; // TODO 芋艿,此处要改
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '备注',
|
||||||
|
dataIndex: 'memo',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
dataIndex: 'createTime',
|
||||||
|
render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm')}</span>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
width: 360,
|
||||||
|
render: (text, record) => {
|
||||||
|
const statusText = record.status === 1 ? '禁用' : '开启'; // TODO 芋艿,此处要改
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<a onClick={() => handleModalVisible(true, 'update', record)}>编辑</a>
|
||||||
|
<Divider type="vertical" />
|
||||||
|
<a className={styles.tableDelete} onClick={() => handleStatus(record)}>
|
||||||
|
{statusText}
|
||||||
|
</a>
|
||||||
|
{
|
||||||
|
record.status === 2 ?
|
||||||
|
<span>
|
||||||
|
<Divider type="vertical" />
|
||||||
|
<a className={styles.tableDelete} onClick={() => handleDelete(record)}>
|
||||||
|
删除
|
||||||
|
</a>
|
||||||
|
</span> : null
|
||||||
|
}
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
function onPageChange(page) { // 翻页
|
||||||
|
dispatch({
|
||||||
|
type: 'bannerList/query',
|
||||||
|
payload: {
|
||||||
|
pageNo: page.current,
|
||||||
|
pageSize: page.pageSize,
|
||||||
|
...searchParams
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Table
|
||||||
|
columns={columns}
|
||||||
|
dataSource={dataSource}
|
||||||
|
loading={loading}
|
||||||
|
rowKey="id"
|
||||||
|
pagination={pagination}
|
||||||
|
onChange={onPageChange}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 搜索表单
|
||||||
|
// TODO 芋艿,有没办法换成上面那种写法
|
||||||
|
const SearchForm = Form.create()(props => {
|
||||||
|
const {
|
||||||
|
form,
|
||||||
|
form: { getFieldDecorator },
|
||||||
|
dispatch
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
function search() {
|
||||||
|
dispatch({
|
||||||
|
type: 'bannerList/query',
|
||||||
|
payload: {
|
||||||
|
...PaginationHelper.defaultPayload,
|
||||||
|
...form.getFieldsValue()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提交搜索
|
||||||
|
function handleSubmit(e) {
|
||||||
|
// 阻止默认事件
|
||||||
|
e.preventDefault();
|
||||||
|
// 提交搜索
|
||||||
|
search();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置搜索
|
||||||
|
function handleReset() {
|
||||||
|
// 重置表单
|
||||||
|
form.resetFields();
|
||||||
|
// 执行搜索
|
||||||
|
search();
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form onSubmit={handleSubmit} layout="inline">
|
||||||
|
<Row gutter={{ md: 8, lg: 24, xl: 48 }}>
|
||||||
|
<Col md={8} sm={24}>
|
||||||
|
<FormItem label="标题">
|
||||||
|
{getFieldDecorator('title')(<Input placeholder="请输入" />)}
|
||||||
|
</FormItem>
|
||||||
|
</Col>
|
||||||
|
<Col md={8} sm={24}>
|
||||||
|
<span className={styles.submitButtons}>
|
||||||
|
<Button type="primary" htmlType="submit">
|
||||||
|
查询
|
||||||
|
</Button>
|
||||||
|
<Button style={{ marginLeft: 8 }} onClick={handleReset}>
|
||||||
|
重置
|
||||||
|
</Button>
|
||||||
|
</span>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 添加 or 修改 Form 表单
|
||||||
|
const AddOrUpdateForm = Form.create()(props => {
|
||||||
|
const { dispatch, modalVisible, form, handleModalVisible, modalType, formVals } = props;
|
||||||
|
|
||||||
|
const okHandle = () => {
|
||||||
|
form.validateFields((err, fields) => {
|
||||||
|
if (err) return;
|
||||||
|
// 添加表单
|
||||||
|
if (modalType === 'add') {
|
||||||
|
dispatch({
|
||||||
|
type: 'bannerList/add',
|
||||||
|
payload: {
|
||||||
|
body: {
|
||||||
|
...fields,
|
||||||
|
},
|
||||||
|
callback: () => {
|
||||||
|
// 清空表单
|
||||||
|
form.resetFields();
|
||||||
|
// 提示
|
||||||
|
message.success('添加成功');
|
||||||
|
// 关闭弹窗
|
||||||
|
handleModalVisible();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// 修改表单
|
||||||
|
} else {
|
||||||
|
dispatch({
|
||||||
|
type: 'bannerList/update',
|
||||||
|
payload: {
|
||||||
|
body: {
|
||||||
|
id: formVals.id,
|
||||||
|
...fields,
|
||||||
|
},
|
||||||
|
callback: () => {
|
||||||
|
// 清空表单
|
||||||
|
form.resetFields();
|
||||||
|
// 提示
|
||||||
|
message.success('更新成功');
|
||||||
|
// 关闭弹窗
|
||||||
|
handleModalVisible();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const title = modalType === 'add' ? '新建 Banner' : '更新 Banner';
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
destroyOnClose
|
||||||
|
title={title}
|
||||||
|
visible={modalVisible}
|
||||||
|
onOk={okHandle}
|
||||||
|
okText='保存'
|
||||||
|
onCancel={() => handleModalVisible()}
|
||||||
|
>
|
||||||
|
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="标题">
|
||||||
|
{form.getFieldDecorator('title', {
|
||||||
|
rules: [{ required: true, message: '请输入标题!'},
|
||||||
|
{max: 32, min:2, message: '长度为 2-32 位'},
|
||||||
|
],
|
||||||
|
initialValue: formVals.title,
|
||||||
|
})(<Input placeholder="请输入" />)}
|
||||||
|
</FormItem>
|
||||||
|
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="跳转链接">
|
||||||
|
{form.getFieldDecorator('url', {
|
||||||
|
rules: [{ required: true, message: '请输入跳转链接!'},
|
||||||
|
{ type: 'url', message: '必须是 URL!'},
|
||||||
|
{max: 255, message: '最大长度为 255 位'},
|
||||||
|
],
|
||||||
|
initialValue: formVals.picUrl,
|
||||||
|
})(<Input placeholder="请输入" />)}
|
||||||
|
</FormItem>
|
||||||
|
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="图片">
|
||||||
|
{form.getFieldDecorator('picUrl', {
|
||||||
|
rules: [{ required: true, message: '请输入跳转链接!'},],
|
||||||
|
initialValue: formVals.picUrl,
|
||||||
|
})(<Input placeholder="请输入" />)}
|
||||||
|
</FormItem>
|
||||||
|
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="排序值">
|
||||||
|
{form.getFieldDecorator('sort', {
|
||||||
|
rules: [{ required: true, message: '请输入排序值!' }],
|
||||||
|
initialValue: formVals.sort,
|
||||||
|
})(<InputNumber placeholder="请输入" />)}
|
||||||
|
</FormItem>
|
||||||
|
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="备注">
|
||||||
|
{form.getFieldDecorator('memo', {
|
||||||
|
rules: [{ required: false, message: '请输入备注!' },
|
||||||
|
{max: 255, message: '最大长度为 255 位'},
|
||||||
|
],
|
||||||
|
initialValue: formVals.memo,
|
||||||
|
})(<Input.TextArea placeholder="请输入" />)}
|
||||||
|
</FormItem>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
@connect(({ bannerList }) => ({
|
||||||
|
// list: bannerList.list,
|
||||||
|
// pagination: bannerList.pagination,
|
||||||
|
...bannerList,
|
||||||
|
}))
|
||||||
|
|
||||||
|
// 主界面
|
||||||
|
@Form.create()
|
||||||
|
class BannerList extends PureComponent {
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
const { dispatch } = this.props;
|
||||||
|
dispatch({
|
||||||
|
type: 'bannerList/query',
|
||||||
|
payload: {
|
||||||
|
...PaginationHelper.defaultPayload
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
handleModalVisible = (modalVisible, modalType, record) => {
|
||||||
|
const { dispatch } = this.props;
|
||||||
|
dispatch({
|
||||||
|
type: 'bannerList/setAll',
|
||||||
|
payload: {
|
||||||
|
modalVisible,
|
||||||
|
modalType,
|
||||||
|
formVals: record || {}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
handleRoleAssignModalVisible = (roleModalVisible, record) => {
|
||||||
|
const { dispatch } = this.props;
|
||||||
|
dispatch({
|
||||||
|
type: 'bannerList/setAll',
|
||||||
|
payload: {
|
||||||
|
roleModalVisible: roleModalVisible,
|
||||||
|
formVals: record || {}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
// let that = this;
|
||||||
|
const { dispatch,
|
||||||
|
list, listLoading, searchParams, pagination,
|
||||||
|
modalVisible, modalType, formVals,
|
||||||
|
confirmLoading,
|
||||||
|
roleList, roleModalVisible, roleAssignLoading, roleCheckedKeys } = this.props;
|
||||||
|
|
||||||
|
// 列表属性
|
||||||
|
const listProps = {
|
||||||
|
dataSource: list,
|
||||||
|
pagination,
|
||||||
|
searchParams,
|
||||||
|
dispatch,
|
||||||
|
loading: listLoading,
|
||||||
|
confirmLoading,
|
||||||
|
handleModalVisible: this.handleModalVisible, // Function
|
||||||
|
};
|
||||||
|
|
||||||
|
// 搜索表单属性
|
||||||
|
const searchFormProps = {
|
||||||
|
dispatch,
|
||||||
|
};
|
||||||
|
|
||||||
|
// 添加 or 更新表单属性
|
||||||
|
const addOrUpdateFormProps = {
|
||||||
|
modalVisible,
|
||||||
|
modalType,
|
||||||
|
formVals,
|
||||||
|
dispatch,
|
||||||
|
handleModalVisible: this.handleModalVisible, // Function
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PageHeaderWrapper>
|
||||||
|
<Card bordered={false}>
|
||||||
|
<div className={styles.tableList}>
|
||||||
|
<div className={styles.tableListForm}>
|
||||||
|
<SearchForm {...searchFormProps} />
|
||||||
|
</div>
|
||||||
|
<div className={styles.tableListOperator}>
|
||||||
|
<Button
|
||||||
|
icon="plus"
|
||||||
|
type="primary"
|
||||||
|
onClick={() => this.handleModalVisible(true, 'add', {})}
|
||||||
|
>
|
||||||
|
新建 Banner
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<List {...listProps} />
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<AddOrUpdateForm {...addOrUpdateFormProps} />
|
||||||
|
|
||||||
|
</PageHeaderWrapper>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BannerList;
|
47
admin-web/src/pages/Promotion/BannerList.less
Normal file
47
admin-web/src/pages/Promotion/BannerList.less
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
@import '~antd/lib/style/themes/default.less';
|
||||||
|
@import '~@/utils/utils.less';
|
||||||
|
|
||||||
|
.tableList {
|
||||||
|
.tableListOperator {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
button {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableDelete {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableListForm {
|
||||||
|
:global {
|
||||||
|
.ant-form-item {
|
||||||
|
display: flex;
|
||||||
|
margin-right: 0;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
> .ant-form-item-label {
|
||||||
|
width: auto;
|
||||||
|
padding-right: 8px;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
.ant-form-item-control {
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.ant-form-item-control-wrapper {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.submitButtons {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: @screen-lg) {
|
||||||
|
.tableListForm :global(.ant-form-item) {
|
||||||
|
margin-right: 24px;
|
||||||
|
}
|
||||||
|
}
|
34
admin-web/src/services/promotion.js
Normal file
34
admin-web/src/services/promotion.js
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import { stringify } from '@/utils/request.qs';
|
||||||
|
import request from '@/utils/request';
|
||||||
|
|
||||||
|
// banner
|
||||||
|
|
||||||
|
export async function queryBanner(params) {
|
||||||
|
return request(`/promotion-api/admins/banner/page?${stringify(params)}`, {
|
||||||
|
method: 'GET',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function addBanner(params) {
|
||||||
|
return request(`/promotion-api/admins/banner/add?${stringify(params)}`, {
|
||||||
|
method: 'POST',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function updateBanner(params) {
|
||||||
|
return request(`/promotion-api/admins/banner/update?${stringify(params)}`, {
|
||||||
|
method: 'POST',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function updateBannerStatus(params) {
|
||||||
|
return request(`/promotion-api/admins/banner/update_status?${stringify(params)}`, {
|
||||||
|
method: 'POST',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function deleteBanner(params) {
|
||||||
|
return request(`/promotion-api/admins/banner/delete?${stringify(params)}`, {
|
||||||
|
method: 'POST',
|
||||||
|
});
|
||||||
|
}
|
@ -66,14 +66,14 @@ public class ResourceController {
|
|||||||
@ApiImplicitParam(name = "sort", value = "排序", required = true, example = "1"),
|
@ApiImplicitParam(name = "sort", value = "排序", required = true, example = "1"),
|
||||||
@ApiImplicitParam(name = "displayName", value = "菜单展示名", required = true, example = "商品管理"),
|
@ApiImplicitParam(name = "displayName", value = "菜单展示名", required = true, example = "商品管理"),
|
||||||
@ApiImplicitParam(name = "pid", value = "父级资源编号", required = true, example = "1"),
|
@ApiImplicitParam(name = "pid", value = "父级资源编号", required = true, example = "1"),
|
||||||
@ApiImplicitParam(name = "handler", value = "操作", required = true, example = "/order/list"),
|
@ApiImplicitParam(name = "handler", value = "操作", example = "/order/list"),
|
||||||
})
|
})
|
||||||
public CommonResult<ResourceVO> add(@RequestParam("name") String name,
|
public CommonResult<ResourceVO> add(@RequestParam("name") String name,
|
||||||
@RequestParam("type") Integer type,
|
@RequestParam("type") Integer type,
|
||||||
@RequestParam("sort") Integer sort,
|
@RequestParam("sort") Integer sort,
|
||||||
@RequestParam("displayName") String displayName,
|
@RequestParam("displayName") String displayName,
|
||||||
@RequestParam("pid") Integer pid,
|
@RequestParam("pid") Integer pid,
|
||||||
@RequestParam("handler") String handler) {
|
@RequestParam(value = "handler", required = false) String handler) {
|
||||||
ResourceAddDTO resourceAddDTO = new ResourceAddDTO().setName(name).setType(type).setSort(sort)
|
ResourceAddDTO resourceAddDTO = new ResourceAddDTO().setName(name).setType(type).setSort(sort)
|
||||||
.setDisplayName(displayName).setPid(pid).setHandler(handler);
|
.setDisplayName(displayName).setPid(pid).setHandler(handler);
|
||||||
return ResourceConvert.INSTANCE.convert3(resourceService.addResource(AdminSecurityContextHolder.getContext().getAdminId(), resourceAddDTO));
|
return ResourceConvert.INSTANCE.convert3(resourceService.addResource(AdminSecurityContextHolder.getContext().getAdminId(), resourceAddDTO));
|
||||||
@ -87,14 +87,14 @@ public class ResourceController {
|
|||||||
@ApiImplicitParam(name = "sort", value = "排序", required = true, example = "1"),
|
@ApiImplicitParam(name = "sort", value = "排序", required = true, example = "1"),
|
||||||
@ApiImplicitParam(name = "displayName", value = "菜单展示名", required = true, example = "商品管理"),
|
@ApiImplicitParam(name = "displayName", value = "菜单展示名", required = true, example = "商品管理"),
|
||||||
@ApiImplicitParam(name = "pid", value = "父级资源编号", required = true, example = "1"),
|
@ApiImplicitParam(name = "pid", value = "父级资源编号", required = true, example = "1"),
|
||||||
@ApiImplicitParam(name = "handler", value = "操作", required = true, example = "/order/list"),
|
@ApiImplicitParam(name = "handler", value = "操作", example = "/order/list"),
|
||||||
})
|
})
|
||||||
public CommonResult<Boolean> update(@RequestParam("id") Integer id,
|
public CommonResult<Boolean> update(@RequestParam("id") Integer id,
|
||||||
@RequestParam("name") String name,
|
@RequestParam("name") String name,
|
||||||
@RequestParam("sort") Integer sort,
|
@RequestParam("sort") Integer sort,
|
||||||
@RequestParam("displayName") String displayName,
|
@RequestParam("displayName") String displayName,
|
||||||
@RequestParam("pid") Integer pid,
|
@RequestParam("pid") Integer pid,
|
||||||
@RequestParam("handler") String handler) {
|
@RequestParam(value = "handler", required = false) String handler) {
|
||||||
ResourceUpdateDTO resourceUpdateDTO = new ResourceUpdateDTO().setId(id).setName(name).setSort(sort).setDisplayName(displayName).setPid(pid).setHandler(handler);
|
ResourceUpdateDTO resourceUpdateDTO = new ResourceUpdateDTO().setId(id).setName(name).setSort(sort).setDisplayName(displayName).setPid(pid).setHandler(handler);
|
||||||
return resourceService.updateResource(AdminSecurityContextHolder.getContext().getAdminId(), resourceUpdateDTO);
|
return resourceService.updateResource(AdminSecurityContextHolder.getContext().getAdminId(), resourceUpdateDTO);
|
||||||
}
|
}
|
||||||
|
@ -14,7 +14,7 @@ public class BannerVO {
|
|||||||
private String title;
|
private String title;
|
||||||
@ApiModelProperty(value = "跳转链接", required = true, example = "http://www.baidu.com")
|
@ApiModelProperty(value = "跳转链接", required = true, example = "http://www.baidu.com")
|
||||||
private String url;
|
private String url;
|
||||||
@ApiModelProperty(value = "突脸链接", required = true, example = "http://www.iocoder.cn/01.jpg")
|
@ApiModelProperty(value = "图片链接", required = true, example = "http://www.iocoder.cn/01.jpg")
|
||||||
private String picUrl;
|
private String picUrl;
|
||||||
@ApiModelProperty(value = "排序", required = true, example = "10")
|
@ApiModelProperty(value = "排序", required = true, example = "10")
|
||||||
private Integer sort;
|
private Integer sort;
|
||||||
|
@ -12,13 +12,15 @@ import javax.validation.constraints.NotNull;
|
|||||||
public class BannerAddDTO {
|
public class BannerAddDTO {
|
||||||
|
|
||||||
@NotEmpty(message = "标题不能为空")
|
@NotEmpty(message = "标题不能为空")
|
||||||
@Length(min = 6, max = 32, message = "标题长度为 6-32 位")
|
@Length(min = 2, max = 32, message = "标题长度为 2-32 位")
|
||||||
private String title;
|
private String title;
|
||||||
@NotEmpty(message = "跳转链接不能为空")
|
@NotEmpty(message = "跳转链接不能为空")
|
||||||
@URL(message = "跳转链接格式不正确")
|
@URL(message = "跳转链接格式不正确")
|
||||||
|
@Length(max = 255, message = "跳转链接最大长度为 255 位")
|
||||||
private String url;
|
private String url;
|
||||||
@NotEmpty(message = "图片链接不能为空")
|
@NotEmpty(message = "图片链接不能为空")
|
||||||
@URL(message = "图片链接格式不正确")
|
@URL(message = "图片链接格式不正确")
|
||||||
|
@Length(max = 255, message = "图片链接最大长度为 255 位")
|
||||||
private String picUrl;
|
private String picUrl;
|
||||||
@NotNull(message = "排序不能为空")
|
@NotNull(message = "排序不能为空")
|
||||||
private Integer sort;
|
private Integer sort;
|
||||||
|
@ -14,12 +14,15 @@ public class BannerUpdateDTO {
|
|||||||
@NotNull(message = "编号不能为空")
|
@NotNull(message = "编号不能为空")
|
||||||
private Integer id;
|
private Integer id;
|
||||||
@NotEmpty(message = "标题不能为空")
|
@NotEmpty(message = "标题不能为空")
|
||||||
@Length(min = 6, max = 32, message = "标题长度为 6-32 位")
|
@Length(min = 2, max = 32, message = "标题长度为 2-32 位")
|
||||||
private String title;
|
private String title;
|
||||||
@NotEmpty(message = "跳转链接不能为空")
|
@NotEmpty(message = "跳转链接不能为空")
|
||||||
@URL(message = "跳转链接格式不正确")
|
@URL(message = "跳转链接格式不正确")
|
||||||
|
@Length(max = 255, message = "跳转链接最大长度为 255 位")
|
||||||
private String url;
|
private String url;
|
||||||
|
@NotEmpty(message = "图片链接不能为空")
|
||||||
@URL(message = "图片链接格式不正确")
|
@URL(message = "图片链接格式不正确")
|
||||||
|
@Length(max = 255, message = "图片链接最大长度为 255 位")
|
||||||
private String picUrl;
|
private String picUrl;
|
||||||
@NotNull(message = "排序不能为空")
|
@NotNull(message = "排序不能为空")
|
||||||
private Integer sort;
|
private Integer sort;
|
||||||
|
@ -42,7 +42,7 @@ public class BannerServiceImpl implements BannerService {
|
|||||||
@Override
|
@Override
|
||||||
public CommonResult<BannerBO> addBanner(Integer adminId, BannerAddDTO bannerAddDTO) {
|
public CommonResult<BannerBO> addBanner(Integer adminId, BannerAddDTO bannerAddDTO) {
|
||||||
// 保存到数据库
|
// 保存到数据库
|
||||||
BannerDO banner = BannerConvert.INSTANCE.convert(bannerAddDTO);
|
BannerDO banner = BannerConvert.INSTANCE.convert(bannerAddDTO).setStatus(CommonStatusEnum.ENABLE.getValue());
|
||||||
banner.setDeleted(DeletedStatusEnum.DELETED_NO.getValue()).setCreateTime(new Date());
|
banner.setDeleted(DeletedStatusEnum.DELETED_NO.getValue()).setCreateTime(new Date());
|
||||||
bannerMapper.insert(banner);
|
bannerMapper.insert(banner);
|
||||||
// 返回成功
|
// 返回成功
|
||||||
|
@ -76,7 +76,7 @@
|
|||||||
<if test="url != null">
|
<if test="url != null">
|
||||||
url = #{url},
|
url = #{url},
|
||||||
</if>
|
</if>
|
||||||
<if test="pic_url != null">
|
<if test="picUrl != null">
|
||||||
pic_url = #{picUrl} ,
|
pic_url = #{picUrl} ,
|
||||||
</if>
|
</if>
|
||||||
<if test="sort != null">
|
<if test="sort != null">
|
||||||
@ -85,8 +85,8 @@
|
|||||||
<if test="status != null">
|
<if test="status != null">
|
||||||
status = #{status},
|
status = #{status},
|
||||||
</if>
|
</if>
|
||||||
<if test="VALUES != null">
|
<if test="memo != null">
|
||||||
VALUES = #{VALUES},
|
memo = #{memo},
|
||||||
</if>
|
</if>
|
||||||
<if test="deleted != null">
|
<if test="deleted != null">
|
||||||
deleted = #{deleted}
|
deleted = #{deleted}
|
||||||
|
Loading…
Reference in New Issue
Block a user