Fixed user and role

Author: LyricTian

src/models/role.js

@@ -97,6 +97,24 @@ export default {
     },
     *fetchForm({ payload }, { call, put }) {
       const response = yield call(roleService.get, payload);
+
+      const { role_menus: roleMenus } = response;
+      if (roleMenus) {
+        const mRoleMenus = {};
+        const nRoleMenus = [];
+        roleMenus.forEach(item => {
+          if (mRoleMenus[item.menu_id]) {
+            mRoleMenus[item.menu_id] = [...mRoleMenus[item.menu_id], item.action_id];
+          } else {
+            mRoleMenus[item.menu_id] = [item.action_id];
+          }
+        });
+        Object.keys(mRoleMenus).forEach(key => {
+          nRoleMenus.push({ menu_id: key, actions: mRoleMenus[key] });
+        });
+        response.role_menus = nRoleMenus;
+      }
+
       yield [
         put({
           type: 'saveFormData',
@@ -157,6 +175,37 @@ export default {
         payload: response.list || [],
       });
     },
+    *changeStatus({ payload }, { call, put, select }) {
+      let response;
+      if (payload.status === 1) {
+        response = yield call(roleService.enable, payload);
+      } else {
+        response = yield call(roleService.disable, payload);
+      }
+
+      if (response.status === 'OK') {
+        let msg = '启用成功';
+        if (payload.status === 2) {
+          msg = '停用成功';
+        }
+        message.success(msg);
+        const data = yield select(state => state.role.data);
+        const newData = { list: [], pagination: data.pagination };
+
+        for (let i = 0; i < data.list.length; i += 1) {
+          const item = data.list[i];
+          if (item.record_id === payload.record_id) {
+            item.status = payload.status;
+          }
+          newData.list.push(item);
+        }
+
+        yield put({
+          type: 'saveData',
+          payload: newData,
+        });
+      }
+    },
   },
   reducers: {
     saveData(state, { payload }) {

src/pages/Role/RoleCard.js

@@ -20,10 +20,24 @@ class RoleCard extends PureComponent {
       }
       const formData = { ...values };
       formData.sequence = parseInt(formData.sequence, 10);
-      if (!formData.menus || formData.menus.length === 0) {
+      formData.status = 1;
+      if (!formData.role_menus || formData.role_menus.length === 0) {
         message.warning('请选择菜单权限！');
         return;
       }
+
+      const roleMenus = [];
+      formData.role_menus.forEach(item => {
+        if (item.actions && item.actions.length > 0) {
+          item.actions.forEach(v => {
+            roleMenus.push({ menu_id: item.menu_id, action_id: v });
+          });
+        } else {
+          roleMenus.push({ menu_id: item.menu_id });
+        }
+      });
+      formData.role_menus = roleMenus;
+
       onSubmit(formData);
     });
   };
@@ -42,13 +56,22 @@ class RoleCard extends PureComponent {
 
     const formItemLayout = {
       labelCol: {
-        span: 4,
+        span: 6,
       },
       wrapperCol: {
         span: 18,
       },
     };
 
+    const formItemLayout2 = {
+      labelCol: {
+        span: 3,
+      },
+      wrapperCol: {
+        span: 21,
+      },
+    };
+
     return (
       <Modal
         title={formTitle}
@@ -64,7 +87,7 @@ class RoleCard extends PureComponent {
       >
         <Form>
           <Row>
-            <Col>
+            <Col span={12}>
               <Form.Item {...formItemLayout} label="角色名称">
                 {getFieldDecorator('name', {
                   initialValue: formData.name,
@@ -77,7 +100,7 @@ class RoleCard extends PureComponent {
                 })(<Input placeholder="请输入角色名称" />)}
               </Form.Item>
             </Col>
-            <Col>
+            <Col span={12}>
               <Form.Item {...formItemLayout} label="排序值">
                 {getFieldDecorator('sequence', {
                   initialValue: formData.sequence ? formData.sequence.toString() : '1000000',
@@ -90,23 +113,19 @@ class RoleCard extends PureComponent {
                 })(<InputNumber min={1} style={{ width: '100%' }} />)}
               </Form.Item>
             </Col>
-            <Col>
-              <Form.Item {...formItemLayout} label="备注">
-                {getFieldDecorator('memo', {
-                  initialValue: formData.memo,
-                })(<Input.TextArea rows={2} placeholder="请输入备注" />)}
-              </Form.Item>
-            </Col>
-          </Row>
-          <Row>
-            <Col span={24}>
-              <Card title="选择菜单权限" bordered={false}>
-                {getFieldDecorator('menus', {
-                  initialValue: formData.menus,
-                })(<RoleMenu />)}
-              </Card>
-            </Col>
           </Row>
+          <Form.Item {...formItemLayout2} label="备注">
+            {getFieldDecorator('memo', {
+              initialValue: formData.memo,
+            })(<Input.TextArea rows={2} placeholder="请输入备注" />)}
+          </Form.Item>
+          <Form.Item>
+            <Card title="选择菜单权限" bordered={false}>
+              {getFieldDecorator('role_menus', {
+                initialValue: formData.role_menus,
+              })(<RoleMenu />)}
+            </Card>
+          </Form.Item>
         </Form>
       </Modal>
     );

src/pages/Role/RoleList.js

@@ -2,9 +2,10 @@ import React, { PureComponent } from 'react';
 import { connect } from 'dva';
 import { Form } from '@ant-design/compatible';
 import '@ant-design/compatible/assets/index.css';
-import { Row, Col, Card, Input, Button, Table, Modal } from 'antd';
+import { Row, Col, Card, Input, Button, Table, Modal, Badge } from 'antd';
 import PageHeaderLayout from '@/layouts/PageHeaderLayout';
 import PButton from '@/components/PermButton';
+import { formatDate } from '@/utils/utils';
 import RoleCard from './RoleCard';
 
 import styles from './RoleList.less';
@@ -28,6 +29,20 @@ class RoleList extends PureComponent {
     });
   }
 
+  onItemDisableClick = item => {
+    this.dispatch({
+      type: 'role/changeStatus',
+      payload: { record_id: item.record_id, status: 2 },
+    });
+  };
+
+  onItemEnableClick = item => {
+    this.dispatch({
+      type: 'role/changeStatus',
+      payload: { record_id: item.record_id, status: 1 },
+    });
+  };
+
   clearSelectRows = () => {
     const { selectedRowKeys } = this.state;
     if (selectedRowKeys.length === 0) {
@@ -94,7 +109,7 @@ class RoleList extends PureComponent {
     this.clearSelectRows();
   };
 
-  handleResetFormClick = () => {
+  onResetFormClick = () => {
     const { form } = this.props;
     form.resetFields();
 
@@ -157,23 +172,21 @@ class RoleList extends PureComponent {
     } = this.props;
 
     return (
-      <Form onSubmit={this.handleSearchFormSubmit} layout="inline">
+      <Form onSubmit={this.handleSearchFormSubmit}>
         <Row gutter={16}>
-          <Col md={8} sm={24}>
-            <Form.Item label="角色名称">
-              {getFieldDecorator('name')(<Input placeholder="请输入" />)}
+          <Col span={8}>
+            <Form.Item>
+              {getFieldDecorator('queryValue')(<Input placeholder="请输入需要查询的内容" />)}
             </Form.Item>
           </Col>
-          <Col md={8} sm={24}>
-            <div style={{ overflow: 'hidden' }}>
-              <span style={{ marginBottom: 24 }}>
-                <Button type="primary" htmlType="submit">
-                  查询
-                </Button>
-                <Button style={{ marginLeft: 8 }} onClick={this.handleResetFormClick}>
-                  重置
-                </Button>
-              </span>
+          <Col span={8}>
+            <div style={{ overflow: 'hidden', paddingTop: 4 }}>
+              <Button type="primary" htmlType="submit">
+                查询
+              </Button>
+              <Button style={{ marginLeft: 8 }} onClick={this.onResetFormClick}>
+                重置
+              </Button>
             </div>
           </Col>
         </Row>
@@ -203,7 +216,24 @@ class RoleList extends PureComponent {
         width: 100,
       },
       {
-        title: '角色备注',
+        title: '状态',
+        dataIndex: 'status',
+        width: 80,
+        render: val => {
+          if (val === 1) {
+            return <Badge status="success" text="启用" />;
+          }
+          return <Badge status="error" text="停用" />;
+        },
+      },
+      {
+        title: '创建时间',
+        width: 100,
+        dataIndex: 'created_at',
+        render: val => <span>{formatDate(val, 'YYYY-MM-DD')}</span>,
+      },
+      {
+        title: '备注',
         dataIndex: 'memo',
       },
     ];
@@ -223,27 +253,44 @@ class RoleList extends PureComponent {
           <div className={styles.tableList}>
             <div className={styles.tableListForm}>{this.renderSearchForm()}</div>
             <div className={styles.tableListOperator}>
-              <PButton code="add" icon="plus" type="primary" onClick={() => this.handleAddClick()}>
+              <PButton code="add" type="primary" onClick={() => this.handleAddClick()}>
                 新建
               </PButton>
               {selectedRows.length === 1 && [
                 <PButton
                   key="edit"
                   code="edit"
-                  icon="edit"
                   onClick={() => this.handleEditClick(selectedRows[0])}
                 >
                   编辑
                 </PButton>,
                 <PButton
                   key="del"
                   code="del"
-                  icon="delete"
                   type="danger"
                   onClick={() => this.handleDelClick(selectedRows[0])}
                 >
                   删除
                 </PButton>,
+                selectedRows[0].status === 2 && (
+                  <PButton
+                    key="enable"
+                    code="enable"
+                    onClick={() => this.onItemEnableClick(selectedRows[0])}
+                  >
+                    启用
+                  </PButton>
+                ),
+                selectedRows[0].status === 1 && (
+                  <PButton
+                    key="disable"
+                    code="disable"
+                    type="danger"
+                    onClick={() => this.onItemDisableClick(selectedRows[0])}
+                  >
+                    禁用
+                  </PButton>
+                ),
               ]}
             </div>
             <div>

src/pages/Role/RoleMenu/EditableCell.js

@@ -32,32 +32,8 @@ export default class EditableCell extends PureComponent {
       >
         <Row>
           {record.actions.map(v => (
-            <Col key={v.code}>
-              <Checkbox value={v.code}>{v.name}</Checkbox>
-            </Col>
-          ))}
-        </Row>
-      </Checkbox.Group>
-    );
-  };
-
-  renderResource = () => {
-    const { record } = this.props;
-    if (!record.resources || record.resources.length === 0) {
-      return null;
-    }
-
-    const item = this.findItem();
-    return (
-      <Checkbox.Group
-        disabled={!item}
-        value={item ? item.resources : []}
-        onChange={this.handleChange}
-      >
-        <Row>
-          {record.resources.map(v => (
-            <Col key={v.code}>
-              <Checkbox value={v.code}>{v.name}</Checkbox>
+            <Col key={v.record_id}>
+              <Checkbox value={v.record_id}>{v.name}</Checkbox>
             </Col>
           ))}
         </Row>
@@ -70,8 +46,7 @@ export default class EditableCell extends PureComponent {
     return (
       <td {...restProps}>
         {dataIndex === 'actions' && this.renderAction()}
-        {dataIndex === 'resources' && this.renderResource()}
-        {!(dataIndex === 'actions' || dataIndex === 'resources') && restProps.children}
+        {!(dataIndex === 'actions') && restProps.children}
       </td>
     );
   }