前端:管理后台增加 Banner CRUD 功能

This commit is contained in:
YunaiV 2019-03-31 00:12:15 +08:00
parent 4595db1d4c
commit 23acc40d8d
15 changed files with 806 additions and 18 deletions

View File

@ -2,7 +2,8 @@
export default {
'/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,
pathRewrite: {},
},
@ -11,4 +12,9 @@ export default {
changeOrigin: true,
pathRewrite: {},
},
'/promotion-api/': {
target: 'http://127.0.0.1:18085/',
changeOrigin: true,
pathRewrite: {},
},
};

View File

@ -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',
name: 'dashboard',

View File

@ -49,10 +49,10 @@ function getDictionaryTree(req, res) {
}
export default {
'GET /admin-api/admins/admin/menu_resource_tree': getAdminMenuAll,
'GET /admin-api/admins/admin/url_resource_list': getAdminUrls,
'GET /admin-api/admins/resource/tree': getResourceTree,
'GET /admin-api/admins/role/page': getQueryRole,
// 'GET /admin-api/admins/admin/menu_resource_tree': getAdminMenuAll,
// 'GET /admin-api/admins/admin/url_resource_list': getAdminUrls,
// 'GET /admin-api/admins/resource/tree': getResourceTree,
// 'GET /admin-api/admins/role/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,
};

View File

@ -52,4 +52,6 @@ export default {
// 订单
'menu.order': '订单管理',
'menu.order.order-list': '订单管理',
// 营销相关
'menu.promotion.promotion-banner-list': 'Banner 管理'
};

View 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,
};
}
},
};

View File

@ -209,7 +209,6 @@ class ProductCategoryList extends PureComponent {
{
title: '排序值',
dataIndex: 'sort',
render: sort => <span>{sort}</span>,
},
{
title: '创建时间',

View 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;

View 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;
}
}

View 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',
});
}

View File

@ -66,14 +66,14 @@ public class ResourceController {
@ApiImplicitParam(name = "sort", value = "排序", required = true, example = "1"),
@ApiImplicitParam(name = "displayName", value = "菜单展示名", required = true, example = "商品管理"),
@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,
@RequestParam("type") Integer type,
@RequestParam("sort") Integer sort,
@RequestParam("displayName") String displayName,
@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)
.setDisplayName(displayName).setPid(pid).setHandler(handler);
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 = "displayName", value = "菜单展示名", required = true, example = "商品管理"),
@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,
@RequestParam("name") String name,
@RequestParam("sort") Integer sort,
@RequestParam("displayName") String displayName,
@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);
return resourceService.updateResource(AdminSecurityContextHolder.getContext().getAdminId(), resourceUpdateDTO);
}

View File

@ -14,7 +14,7 @@ public class BannerVO {
private String title;
@ApiModelProperty(value = "跳转链接", required = true, example = "http://www.baidu.com")
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;
@ApiModelProperty(value = "排序", required = true, example = "10")
private Integer sort;

View File

@ -12,13 +12,15 @@ import javax.validation.constraints.NotNull;
public class BannerAddDTO {
@NotEmpty(message = "标题不能为空")
@Length(min = 6, max = 32, message = "标题长度为 6-32 位")
@Length(min = 2, max = 32, message = "标题长度为 2-32 位")
private String title;
@NotEmpty(message = "跳转链接不能为空")
@URL(message = "跳转链接格式不正确")
@Length(max = 255, message = "跳转链接最大长度为 255 位")
private String url;
@NotEmpty(message = "图片链接不能为空")
@URL(message = "图片链接格式不正确")
@Length(max = 255, message = "图片链接最大长度为 255 位")
private String picUrl;
@NotNull(message = "排序不能为空")
private Integer sort;

View File

@ -14,12 +14,15 @@ public class BannerUpdateDTO {
@NotNull(message = "编号不能为空")
private Integer id;
@NotEmpty(message = "标题不能为空")
@Length(min = 6, max = 32, message = "标题长度为 6-32 位")
@Length(min = 2, max = 32, message = "标题长度为 2-32 位")
private String title;
@NotEmpty(message = "跳转链接不能为空")
@URL(message = "跳转链接格式不正确")
@Length(max = 255, message = "跳转链接最大长度为 255 位")
private String url;
@NotEmpty(message = "图片链接不能为空")
@URL(message = "图片链接格式不正确")
@Length(max = 255, message = "图片链接最大长度为 255 位")
private String picUrl;
@NotNull(message = "排序不能为空")
private Integer sort;

View File

@ -42,7 +42,7 @@ public class BannerServiceImpl implements BannerService {
@Override
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());
bannerMapper.insert(banner);
// 返回成功

View File

@ -76,7 +76,7 @@
<if test="url != null">
url = #{url},
</if>
<if test="pic_url != null">
<if test="picUrl != null">
pic_url = #{picUrl} ,
</if>
<if test="sort != null">
@ -85,8 +85,8 @@
<if test="status != null">
status = #{status},
</if>
<if test="VALUES != null">
VALUES = #{VALUES},
<if test="memo != null">
memo = #{memo},
</if>
<if test="deleted != null">
deleted = #{deleted}