前端:管理后台增加 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

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