fix: isv role page

src/components/Collapse/index.scss

@@ -21,6 +21,7 @@
   height: 0;
   opacity: 0;
   transition: all .3s ease;
+  pointer-events: none;
 }
 
 .isCheck {

src/portals/isv/pages/Roles/ModuleFeatures/index.jsx

@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+import _ from 'lodash';
+
+import styles from './index.scss';
+
+const sortModule = id => (a, b) => {
+  const numA = Number(_.last(a[id].split(id[0])));
+  const numB = Number(_.last(b[id].split(id[0])));
+  return numA - numB;
+};
+
+const getArray = (array, id) => {
+  if (!_.isArray(array)) return [];
+
+  return array.slice().sort(sortModule(id));
+};
+
+const isCheckAll = (module, feature) => {
+  if (module.is_check_all) {
+    return true;
+  }
+  const getUniqActions = () => _.flatMap(
+    _.uniqBy(feature.action_bundle, 'action_bundle_id'),
+    'action_bundle_id'
+  );
+
+  const total = getUniqActions(feature).length;
+  const selectedCount = _.uniq(feature.checked_action_id).length;
+  return selectedCount === total;
+};
+
+@observer
+export default class ModuleFeatures extends Component {
+  render() {
+    const { roleStore, roleId } = this.props;
+    const { moduleNames } = roleStore;
+    const modules = moduleNames[roleId];
+    if (!modules) return null;
+
+    return (
+      <div className={styles.container}>
+        {getArray(modules, 'module_id').map(module => (
+          <div key={module.module_id}>
+            <div className={classnames(styles.item, styles.moduleName)}>
+              {module.module_name}
+            </div>
+            {getArray(module.feature, 'feature_id').map(feature => (
+              <div
+                key={feature.feature_id}
+                className={classnames(styles.item, {
+                  [styles.gray]: !isCheckAll(module, feature),
+                  [styles.moduleName]: isCheckAll(module, feature)
+                })}
+              >
+                {feature.feature_name}
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
+    );
+  }
+}

src/portals/isv/pages/Roles/ModuleFeatures/index.scss

@@ -0,0 +1,26 @@
+@import '~scss/vars';
+
+.container {
+  display: flex;
+  flex-flow: row wrap;
+  @include normal-font;
+
+  > div {
+    width: 25%;
+    margin-bottom: 15px;
+  }
+}
+
+.moduleName {
+  color: $N500;
+  font-weight: 500;
+}
+.gray {
+  color: $N75;
+  font-weight: normal;
+}
+
+.item {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}

src/portals/isv/pages/Roles/index.jsx

@@ -1,32 +1,43 @@
 import React, { Component } from 'react';
-/* import PropTypes from 'prop-types';
- * import classnames from 'classnames'; */
+import { observer, inject } from 'mobx-react';
+import { translate } from 'react-i18next';
 import Layout from 'components/Layout';
 import Collapse from 'components/Collapse';
+import ModuleFeature from './ModuleFeatures';
 
 import styles from './index.scss';
 
+@translate()
+@inject(({ rootStore }) => ({
+  roleStore: rootStore.roleStore
+}))
+@observer
 export default class TeamRole extends Component {
-  renderTitle({ title, describtion }) {
+  async componentDidMount() {
+    const { roleStore } = this.props;
+
+    await roleStore.fetchAll();
+  }
+
+  renderTitle({ role_name, description }) {
     return (
       <div>
-        <h3 className={styles.title}>{title}</h3>
-        <div className={styles.describtion}>{describtion}</div>
+        <h3 className={styles.title}>{role_name}</h3>
+        <div className={styles.describtion}>{description}</div>
       </div>
     );
   }
 
+  onChange = (role, isCheck) => {
+    if (!isCheck) return null;
+
+    const { roleStore } = this.props;
+    roleStore.fetchRoleModuleName(role.role_id);
+  };
+
   render() {
-    const roles = [
-      {
-        title: '超级管理员',
-        describtion: '拥有所有功能的最高权限，不得编辑和删除。'
-      },
-      {
-        title: '开发人员',
-        describtion: '负责开发、测试、运维应用。'
-      }
-    ];
+    const { roleStore } = this.props;
+    const { roles } = roleStore;
     return (
       <Layout
         className={styles.container}
@@ -36,12 +47,13 @@ export default class TeamRole extends Component {
       >
         {roles.map(role => (
           <Collapse
-            key={role.title}
+            key={role.role_id}
             className={styles.roleContainer}
             header={this.renderTitle(role)}
+            onChange={isCheck => this.onChange(role, isCheck)}
             iconPosition="right"
           >
-            test
+            <ModuleFeature roleId={role.role_id} roleStore={roleStore} />
           </Collapse>
         ))}
       </Layout>

src/stores/user/role.js

@@ -33,6 +33,8 @@ export default class RoleStore extends Store {
 
   @observable modules = [];
 
+  @observable moduleNames = {};
+
   @observable features = [];
 
   @observable selectedRoleKeys = [];
@@ -75,6 +77,7 @@ export default class RoleStore extends Store {
     this.isLoading = false;
   }
 
+  @action
   async fetchRoleModule(roleId) {
     this.isLoading = true;
     const result = await this.request.get(`roles:module`, {
@@ -85,6 +88,16 @@ export default class RoleStore extends Store {
     this.isLoading = false;
   }
 
+  @action
+  async fetchRoleModuleName(roleId) {
+    this.isLoading = true;
+    const result = await this.request.get(`roles:module`, {
+      role_id: roleId
+    });
+    this.moduleNames[roleId] = _.get(result, 'role_module.module', []);
+    this.isLoading = false;
+  }
+
   @action
   getModuleTreeData = () => {
     const data = [

test/pages/__snapshots__/Home.test.js.snap

@@ -148,7 +148,7 @@ Array [
         class="section section-size-dev-9 section-offset-dev-0"
       >
         <div
-          class="apps"
+          class=""
         >
           <div
             class="appList fixNav"