前端：增加商品分类的列表。
YunaiV
parent
4812df2cda
commit
853d9fc2f6
|
|
@ -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',
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
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,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,269 @@
|
||||||
|
/* 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;
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
@import '~antd/lib/style/themes/default.less';
|
||||||
|
@import '~@/utils/utils.less';
|
||||||
|
|
||||||
|
.tableList {
|
||||||
|
.tableListOperator {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
button {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableDelete {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,350 @@
|
||||||
|
/* 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;
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
@import '~antd/lib/style/themes/default.less';
|
||||||
|
@import '~@/utils/utils.less';
|
||||||
|
|
||||||
|
.tableList {
|
||||||
|
.tableListOperator {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
button {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableDelete {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
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',
|
||||||
|
});
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue