Skip to content

Y
yudao-cloud
提交 853d9fc2 authored 作者: YunaiV's avatar YunaiV
浏览文件
操作

前端：增加商品分类的列表。

上级 4812df2c
隐藏空白字符变更
内嵌 并排
正在显示 包含 789 行增加 和 0 行删除
admin-web/config/router.config.js
浏览文件 @ 853d9fc2
...@@ -58,6 +58,24 @@ export default [ ...@@ -58,6 +58,24 @@ export default [
}, },
], ],
}, },
// product
{
path: '/product',
name: 'product',
icon: 'product',
routes: [
{
path: '/product/product-spu-list',
name: 'product-spu-list',
component: './Product/ProductSpuList',
},
{
path: '/product/product-category-list',
name: 'product-category-list',
component: './Product/ProductCategoryList',
},
]
},
{ {
path: '/dashboard', path: '/dashboard',
name: 'dashboard', name: 'dashboard',
......
admin-web/mock/geographic/admin-menu.json
浏览文件 @ 853d9fc2
...@@ -2,6 +2,31 @@ ...@@ -2,6 +2,31 @@
"code": 0, "code": 0,
"message": "", "message": "",
"data": [ "data": [
{
"id": 20,
"handler": null,
"pid": 0,
"sort": 0,
"displayName": "商品管理",
"children": [
{
"id": 21,
"handler": "/product/product-spu-list",
"pid": 20,
"sort": 1,
"displayName": "商品管理",
"children": null
},
{
"id": 22,
"handler": "/product/product-category-list",
"pid": 20,
"sort": 2,
"displayName": "商品分类",
"children": null
}
]
},
{ {
"id": 13, "id": 13,
"handler": null, "handler": null,
......
admin-web/src/models/product/productCategoryList.js 0 → 100644
浏览文件 @ 853d9fc2
import { message } from 'antd';
import { addResource, updateResource, deleteResource, resourceTree } from '../../services/admin';
import { productCategoryTree } from '../../services/product';
export default {
namespace: 'productCategoryList',
state: {
list: [],
},
effects: {
*add({ payload }, { call, put }) {
const { callback, body } = payload;
const response = yield call(addResource, body);
if (callback) {
callback(response);
}
yield put({
type: 'tree',
payload: {},
});
},
*update({ payload }, { call, put }) {
const { callback, body } = payload;
const response = yield call(updateResource, body);
if (callback) {
callback(response);
}
yield put({
type: 'tree',
payload: {},
});
},
*delete({ payload }, { call, put }) {
const response = yield call(deleteResource, payload);
message.info('删除成功!');
yield put({
type: 'treeSuccess',
payload: {
list: response.data,
},
});
},
*tree({ payload }, { call, put }) {
const { queryParams } = payload;
const response = yield call(productCategoryTree, queryParams);
message.info('查询成功!');
yield put({
type: 'treeSuccess',
payload: {
list: response.data,
},
});
},
},
reducers: {
treeSuccess(state, { payload }) {
return {
...state,
...payload,
};
},
},
};
admin-web/src/pages/Product/ProductCategoryList.js 0 → 100644
浏览文件 @ 853d9fc2
/* eslint-disable */
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { Card, Form, Input, Select, Button, Modal, message, Table, Divider } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './ProductCategoryList.less';
const FormItem = Form.Item;
const { Option } = Select;
const status = ['未知', '开启', '禁用'];
// 添加 form 表单
const CreateForm = Form.create()(props => {
const { modalVisible, form, handleAdd, handleModalVisible, modalType, initValues } = props;
const okHandle = () => {
form.validateFields((err, fieldsValue) => {
if (err) return;
form.resetFields();
handleAdd({
fields: fieldsValue,
modalType,
initValues,
});
});
};
const selectStyle = {
width: 200,
};
const title = modalType === 'add' ? '添加一个 Resource' : '更新一个 Resource';
const okText = modalType === 'add' ? '添加' : '更新';
return (
<Modal
destroyOnClose
title={title}
visible={modalVisible}
onOk={okHandle}
okText={okText}
onCancel={() => handleModalVisible()}
>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="菜单展示名">
{form.getFieldDecorator('displayName', {
rules: [{ required: true, message: '请输入菜单展示名字！', min: 2 }],
initialValue: initValues.displayName,
})(<Input placeholder="请输入" />)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="操作">
{form.getFieldDecorator('handler', {
initialValue: initValues.handler,
})(<Input placeholder="请输入" />)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="资源名字">
{form.getFieldDecorator('name', {
rules: [{ required: true, message: '请输入资源名字！' }],
initialValue: initValues.name,
})(<Input placeholder="请输入" />)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="父级资源编号">
{form.getFieldDecorator('pid', {
rules: [{ required: true, message: '请输入父级编号！' }],
initialValue: initValues.pid,
})(<Input placeholder="请输入" />)}
<span>根节点为 0</span>
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="排序">
{form.getFieldDecorator('sort', {
rules: [{ required: true, message: '请输入菜单排序！' }],
initialValue: initValues.sort,
})(<Input placeholder="请输入" />)}
</FormItem>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="资源类型">
{form.getFieldDecorator('type', {
rules: [{ required: true, message: '请选择资源类型！' }],
initialValue: 1,
})(
<Select showSearch style={selectStyle} placeholder="请选择">
<Option value={1}>菜单</Option>
<Option value={2}>Url</Option>
</Select>
)}
</FormItem>
</Modal>
);
});
@connect(({ productCategoryList, loading }) => ({
productCategoryList,
list: productCategoryList.list,
loading: loading.models.productCategoryList,
}))
@Form.create()
class ProductCategoryList extends PureComponent {
state = {
modalVisible: false,
modalType: 'add', //add update
initValues: {},
};
componentDidMount() {
const { dispatch } = this.props;
dispatch({
type: 'productCategoryList/tree',
payload: {},
});
}
handleModalVisible = (flag, modalType, initValues) => {
this.setState({
modalVisible: !!flag,
initValues: initValues || {},
modalType: modalType || 'add',
});
};
handleAdd = ({ fields, modalType, initValues }) => {
const { dispatch } = this.props;
if (modalType === 'add') {
dispatch({
type: 'productCategoryList/add',
payload: {
body: {
...fields,
},
callback: () => {
message.success('添加成功');
this.handleModalVisible();
},
},
});
} else {
dispatch({
type: 'productCategoryList/update',
payload: {
body: {
...initValues,
...fields,
},
callback: () => {
message.success('更新成功');
this.handleModalVisible();
},
},
});
}
};
handleDelete(row) {
const { dispatch } = this.props;
Modal.confirm({
title: `确认删除?`,
content: `${row.displayName}`,
onOk() {
dispatch({
type: 'productCategoryList/delete',
payload: {
id: row.id,
},
});
},
onCancel() {},
});
}
render() {
const { list } = this.props;
const { modalVisible, modalType, initValues } = this.state;
const parentMethods = {
handleAdd: this.handleAdd,
handleModalVisible: this.handleModalVisible,
modalType,
initValues,
};
const that = this;
const columns = [
{
title: 'id',
dataIndex: 'id',
render: text => <strong>{text}</strong>,
},
{
title: '分类名',
dataIndex: 'name',
},
{
title: '分类图片',
dataIndex: 'picUrl',
render(val) {
return <img width={120} src={val} />;
},
},
{
title: '排序值',
dataIndex: 'sort',
render: sort => <span>{sort}</span>,
},
{
title: '创建时间',
dataIndex: 'createTime',
render: val => <span>{moment(val).format('YYYY-MM-DD')}</span>,
},
{
title: '状态',
dataIndex: 'status',
render(val) {
return <span>{status[val]}</span>;
},
},
{
title: '描述',
dataIndex: 'description',
},
{
title: '操作',
render: (text, record) => {
const statusText = record.status === 1 ? '禁用' : '开启';
return (
<Fragment>
<a onClick={() => this.handleModalVisible(true, 'update', record)}>更新</a>
<Divider type="vertical"/>
<Divider type="vertical"/>
<a className={styles.tableDelete} onClick={() => this.handleStatus(record)}>
{statusText}
</a>
{
record.status === 2 ? (
<span>
<Divider type="vertical"/>
<a className={styles.tableDelete} onClick={() => this.handleDelete(record)}>
删除
</a>
</span>
) : ''
}
</Fragment>
);
}
},
];
return (
<PageHeaderWrapper>
<Card bordered={false}>
<div className={styles.tableList}>
<div className={styles.tableListOperator}>
<Button
icon="plus"
type="primary"
onClick={() => this.handleModalVisible(true, 'add', {})}
>
新建商品分类
</Button>
</div>
</div>
<Table defaultExpandAllRows={true} columns={columns} dataSource={list} rowKey="id" />
</Card>
<CreateForm {...parentMethods} modalVisible={modalVisible} />
</PageHeaderWrapper>
);
}
}
export default ProductCategoryList;
admin-web/src/pages/Product/ProductCategoryList.less 0 → 100644
浏览文件 @ 853d9fc2
@import '~antd/lib/style/themes/default.less';
@import '~@/utils/utils.less';
.tableList {
.tableListOperator {
margin-bottom: 16px;
button {
margin-right: 8px;
}
}
}
.tableDelete {
color: red;
}
admin-web/src/pages/Product/ProductSpuList.js 0 → 100644
浏览文件 @ 853d9fc2
/* eslint-disable */
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import { Card, Form, Input, Spin, Button, Modal, message, Table, Divider, Tree } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './ProductSpuList.less';
const FormItem = Form.Item;
const { TreeNode } = Tree;
// 添加 form 表单
const CreateForm = Form.create()(props => {
const { modalVisible, form, handleAdd, handleModalVisible, modalType, initValues } = props;
const okHandle = () => {
form.validateFields((err, fieldsValue) => {
if (err) return;
form.resetFields();
handleAdd({
fields: fieldsValue,
modalType,
initValues,
});
});
};
const title = modalType === 'add' ? '添加一个 Role' : '更新一个 Role';
const okText = modalType === 'add' ? '添加' : '更新';
return (
<Modal
destroyOnClose
title={title}
visible={modalVisible}
onOk={okHandle}
okText={okText}
onCancel={() => handleModalVisible()}
>
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="角色名">
{form.getFieldDecorator('name', {
rules: [{ required: true, message: '请输入角色名！', min: 2 }],
initialValue: initValues.name,
})(<Input placeholder="请输入" />)}
</FormItem>
</Modal>
);
});
// 角色分配
const AssignModal = Form.create()(props => {
const {
modalVisible,
form,
handleOk,
handleModalVisible,
treeData,
checkedKeys,
loading,
handleCheckBoxClick,
} = props;
const renderTreeNodes = data => {
return data.map(item => {
if (item.children) {
return (
<TreeNode title={item.title} key={item.key} dataRef={item}>
{renderTreeNodes(item.children)}
</TreeNode>
);
}
return <TreeNode title={item.title} key={item.key} dataRef={item} />;
});
};
const renderModalContent = treeData => {
const RenderTreeNodes = renderTreeNodes(treeData);
if (RenderTreeNodes) {
return (
<FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 15 }} label="角色名">
{form.getFieldDecorator('name', {})(
<Tree
defaultExpandAll={true}
checkable={true}
multiple={true}
checkedKeys={checkedKeys}
onCheck={handleCheckBoxClick}
>
{renderTreeNodes(treeData)}
</Tree>
)}
</FormItem>
);
} else {
return null;
}
};
const okHandle = () => {
form.validateFields((err, fieldsValue) => {
if (err) return;
form.resetFields();
handleOk({
fields: fieldsValue,
});
});
};
return (
<Modal
destroyOnClose
title="更新权限"
visible={modalVisible}
onOk={okHandle}
onCancel={() => handleModalVisible()}
>
<Spin spinning={loading}>{renderModalContent(treeData)}</Spin>
</Modal>
);
});
// roleList
@connect(({ roleList, loading }) => ({
roleList,
list: roleList.list,
data: roleList,
loading: loading.models.resourceList,
}))
@Form.create()
class RoleList extends PureComponent {
state = {
modalVisible: false,
modalType: 'add', //add update
initValues: {},
roleAssignVisible: false,
roleAssignRecord: {},
};
componentDidMount() {
const { dispatch } = this.props;
dispatch({
type: 'roleList/query',
payload: {
name: '',
pageNo: 0,
pageSize: 10,
},
});
}
handleModalVisible = (flag, modalType, initValues) => {
this.setState({
modalVisible: !!flag,
initValues: initValues || {},
modalType: modalType || 'add',
});
};
handleAssignModalVisible = (flag, record) => {
const { dispatch } = this.props;
dispatch({
type: 'roleList/queryRoleAssign',
payload: {
id: record.id,
},
});
this.setState({
roleAssignVisible: !!flag,
roleAssignRecord: record,
});
};
handleAssignModalVisibleClose(flag) {
this.setState({
roleAssignVisible: !!flag,
});
}
handleAssignCheckBoxClick = checkedKeys => {
const { dispatch } = this.props;
const newCheckedKeys = checkedKeys.map(item => {
return parseInt(item);
});
dispatch({
type: 'roleList/changeCheckedKeys',
payload: newCheckedKeys,
});
};
handleAssignOK = () => {
const { dispatch, data } = this.props;
const { roleAssignRecord } = this.state;
dispatch({
type: 'roleList/roleAssignResource',
payload: {
id: roleAssignRecord.id,
resourceIds: data.checkedKeys,
roleTreeData: data.roleTreeData,
},
});
this.handleAssignModalVisibleClose(false);
};
handleAdd = ({ fields, modalType, initValues }) => {
const { dispatch, data } = this.props;
const queryParams = {
pageNo: data.pageNo,
pageSize: data.pageSize,
};
if (modalType === 'add') {
dispatch({
type: 'roleList/add',
payload: {
body: {
...fields,
},
queryParams,
callback: () => {
message.success('添加成功');
this.handleModalVisible();
},
},
});
} else {
dispatch({
type: 'roleList/update',
payload: {
body: {
...initValues,
...fields,
},
queryParams,
callback: () => {
message.success('更新成功');
this.handleModalVisible();
},
},
});
}
};
handleDelete(row) {
const { dispatch, data } = this.props;
const queryParams = {
pageNo: data.pageNo,
pageSize: data.pageSize,
};
Modal.confirm({
title: `确认删除?`,
content: `${row.name}`,
onOk() {
dispatch({
type: 'roleList/delete',
payload: {
body: {
id: row.id,
},
queryParams,
},
});
},
onCancel() {},
});
}
render() {
const { list, data } = this.props;
const { pageNo, pageSize, count, roleTreeData, checkedKeys, assignModalLoading } = data;
const { modalVisible, modalType, initValues, roleAssignVisible } = this.state;
const parentMethods = {
handleAdd: this.handleAdd,
handleModalVisible: this.handleModalVisible,
modalType,
initValues,
};
const columns = [
{
title: 'id',
dataIndex: 'id',
render: text => <strong>{text}</strong>,
},
{
title: '名称',
dataIndex: 'name',
},
{
title: '创建时间',
dataIndex: 'createTime',
sorter: true,
render: val => <span>{moment(val).format('YYYY-MM-DD')}</span>,
},
{
title: '操作',
width: 200,
render: (text, record) => (
<Fragment>
<a onClick={() => this.handleModalVisible(true, 'update', record)}>更新</a>
<Divider type="vertical" />
<a onClick={() => this.handleAssignModalVisible(true, record)}>分配权限</a>
<Divider type="vertical" />
<a className={styles.tableDelete} onClick={() => this.handleDelete(record)}>
删除
</a>
</Fragment>
),
},
];
const paginationProps = {
current: pageNo,
pageSize: pageSize,
total: count,
};
return (
<PageHeaderWrapper title="查询表格">
<Card bordered={false}>
<div className={styles.tableList}>
<div className={styles.tableListOperator}>
<Button
icon="plus"
type="primary"
onClick={() => this.handleModalVisible(true, 'add', {})}
>
新建
</Button>
</div>
</div>
<Table columns={columns} dataSource={list} rowKey="id" />
</Card>
<CreateForm {...parentMethods} modalVisible={modalVisible} />
<AssignModal
loading={assignModalLoading}
treeData={roleTreeData}
checkedKeys={checkedKeys}
handleOk={this.handleAssignOK}
modalVisible={roleAssignVisible}
handleCheckBoxClick={this.handleAssignCheckBoxClick}
handleModalVisible={() => this.handleAssignModalVisibleClose(false)}
/>
</PageHeaderWrapper>
);
}
}
export default RoleList;
admin-web/src/pages/Product/ProductSpuList.less 0 → 100644
浏览文件 @ 853d9fc2
@import '~antd/lib/style/themes/default.less';
@import '~@/utils/utils.less';
.tableList {
.tableListOperator {
margin-bottom: 16px;
button {
margin-right: 8px;
}
}
}
.tableDelete {
color: red;
}
admin-web/src/services/product.js 0 → 100644
浏览文件 @ 853d9fc2
import { stringify } from '@/utils/request.qs';
import request from '@/utils/request';
// dictionary
export async function productCategoryTree(params) {
return request(`/product-api/admins/category/tree?${stringify(params)}`, {
method: 'GET',
});
}
export async function dictionaryAdd(params) {
return request(`/admin-api/admins/data_dict/add?${stringify(params)}`, {
method: 'POST',
body: {},
});
}
export async function dictionaryUpdate(params) {
return request(`/admin-api/admins/data_dict/update?${stringify(params)}`, {
method: 'POST',
body: {},
});
}
export async function dictionaryDelete(params) {
return request(`/admin-api/admins/data_dict/delete?${stringify(params)}`, {
method: 'POST',
});
}
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论