一站式应用授权 树形 列表

Services.js

@@ -116,6 +116,13 @@ export const getAppTypeList = () => {
   });
 };
 
+/**
+ *
+ * 用于一站式 应用树形列表 tree
+ */
+export const getListByTreeList = (params = {}) => {
+  return uaaRequest('/UnifiedAppApi/getListByTree', params);
+};
 
 export function getOnestopKey(key = '', formKey = 'key_list', formValue = 'value_list') {
   return fetchTableData({

zyd_private/OneStopAppManage/AppTypeTree.js

@@ -7,9 +7,10 @@
 import { Tree } from 'antd';
 import React, { Component, Fragment } from 'react';
 import Shell from '@/baseComponent/Shell';
-import { getAppTypeList } from '@/webPublic/Services';
+import { getAppTypeList, getListByTreeList } from '@/webPublic/Services';
 import { getPermInfo } from '@/highOrderComponent/Service';
 import { connect } from 'dva';
+import { deepCopy } from '@/webPublic/zyd_public/utils/utils';
 
 const { TreeNode } = Tree;
 
@@ -29,10 +30,56 @@ export default class AppTypeTree extends Component {
     this.props.changeSearch(newSearch);
   };
 
+  pushChildrenData = (treeListData, data, parentId) => {
+    for (let item of treeListData) {
+      if (item.id === parentId) {
+        item.children = data;
+        this.setState({
+          treeListData: deepCopy(treeListData),
+        });
+        break;
+      } else if (item.children && item.children.length) {
+        this.pushChildrenData(item.children, data, parentId);
+      }
+    }
+  };
+
+  getLeafData = (parentId) => {
+    const { groupId } = this.props;
+    if (!groupId) {
+      return null;
+    }
+    getListByTreeList(
+      {
+        parentId,
+        groupId,
+        cacheKey: Math.random(),
+      },
+    ).then((res) => {
+      for (let item of res) {
+        if (!item.isLeaf) {
+          this.getLeafData(item.id);
+        }
+      }
+      if (res.length) {
+        this.pushChildrenData(this.state.treeListData, res, parentId);
+      }
+    });
+  };
+
   getList = () => {
-    getPermInfo({
-      sysCode: this.props.sysCode,
-    },'/PermApi/getRoleList').then((treeListData) => {
+    const { groupId } = this.props;
+    const { parentId } = this.state;
+    if (!groupId) {
+      return null;
+    }
+    getListByTreeList(
+      {
+        parentId,
+        groupId,
+        cacheKey: Math.random(),
+      },
+    ).then((treeListData) => {
       if (!treeListData || !treeListData.length) {
         this.setState({
           treeListData: [],
@@ -42,6 +89,11 @@ export default class AppTypeTree extends Component {
           selectKey: '',
         });
       } else {
+        for (let item of treeListData) {
+          if (!item.isLeaf) {
+            this.getLeafData(item.id);
+          }
+        }
         this.handleChange({
           selectKey: treeListData[0].id + '',
         });
@@ -54,10 +106,6 @@ export default class AppTypeTree extends Component {
         });
       }
     });
-	};
-
-	componentDidMount() {
-		this.getList();
     setTimeout(() => {
       if (document.getElementById('list-table-dom')) {
         let tableDom = document.getElementById('list-table-dom');
@@ -69,6 +117,17 @@ export default class AppTypeTree extends Component {
         });
       }
     }, 1000);
+  };
+
+  componentDidMount() {
+    this.getList();
+
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.groupId !== this.props.groupId) {
+      this.getList();
+    }
   }
 
   onSelect = (selectedKeys, info) => {
@@ -82,7 +141,9 @@ export default class AppTypeTree extends Component {
     let dom = data.map((item) => {
 			return (
 				<TreeNode title={item.title}
+                  isLeaf={item.isLeaf}
                   key={item.id}>
+          {item.children && this.treeNodeList(item.children)}
 				</TreeNode>
 			);
 		});

zyd_private/OneStopAppManage/index.js

@@ -23,11 +23,21 @@ const Index = (WrappedComponent) =>
         search: {
           selectKey: '',
         },
+        formValues: {
+          selectType: 'getAllRole',
+          sysCode: 'xg',
+        },
         typeList: [],
         authorizedApp: [],
       };
     }
 
+    changeFormValues = (formValues) => {
+      this.setState({
+        formValues,
+      });
+    };
+
     getAuthorizedApp = () => {
       const { selectKey } = this.state.search;
       if (selectKey) {
@@ -44,7 +54,7 @@ const Index = (WrappedComponent) =>
             });
           }
         });
-				this.instanceComponent.getPage();
+        // this.instanceComponent.getPage();
       }
 		};
 
@@ -54,38 +64,53 @@ const Index = (WrappedComponent) =>
 					search,
 				},
 				() => {
-					this.getAuthorizedApp();
+          // this.getAuthorizedApp();
         },
 			);
 		};
 
 		componentDidMount() {
+      const { formValues } = this.state;
       getAppTypeList().then((treeListData) => {
         if (!treeListData) {
           return false;
         }
-				this.setState({
-					typeList: treeListData.map((x) => {
+        const data = treeListData.filter((y) => {
+          return y.appNum > 0;
+        }).map((x) => {
           return {
             key: x.id,
             name: x.name + `(${x.appNum})`,
           };
-					}),
+        });
+        this.setState({
+          typeList: data,
+        }, () => {
+          this.setState({
+            formValues: {
+              ...formValues,
+              groupId: this.state.typeList[0].key,
+            },
+          });
         });
       });
 			return true;
 		}
 
 		render() {
-			const { search, typeList, authorizedApp } = this.state;
-			if (!typeList.length) {
+      const { search, typeList, authorizedApp, formValues } = this.state;
+      if (!typeList.length || !formValues.groupId) {
         return null;
       }
-			const pageS = pageSearch({ typeList, authorizedApp });
+      const pageS = pageSearch({
+        typeList,
+        authorizedApp,
+        changeFormValues: this.changeFormValues,
+      });
       const pageB = pageButton({
         roleId: search.selectKey,
         authorizedApp,
-				getAuthorizedApp: this.getAuthorizedApp,
+        //	getAuthorizedApp: this.getAuthorizedApp,
       });
       return (
         <PageHeaderWrapper title="">
@@ -95,6 +120,7 @@ const Index = (WrappedComponent) =>
                 changeSearch={this.changeSearch}
                 selectKey={search.selectKey}
                 year={search.year}
+                groupId={formValues.groupId}
 							/>
 						</Col>
 						<Col xl={19} xxl={20}>

zyd_private/OneStopAppManage/pageButton.js

@@ -41,7 +41,7 @@ const handleButton = (props) => {
       component: 'Normal',
       handleClick: (selectRows, formValues, getPage, search) => {
         submitData(selectRows, props.roleId).then((x) => {
-          props.getAuthorizedApp();
+      //    props.getAuthorizedApp();
         });
       },
     },
@@ -64,7 +64,7 @@ const handleButton = (props) => {
           }
         }
         deleteData(deleteIds, props.roleId).then((x) => {
-          props.getAuthorizedApp();
+          // props.getAuthorizedApp();
         });
       },
     },

zyd_private/OneStopAppManage/pageSearch.js

@@ -4,6 +4,7 @@ import React, { Fragment } from 'react';
 import { getAppList } from '@/webPublic/Services';
 import { redText } from '@/pages/zydxg/CheckManage/PiciSetting/publicFunc';
 
+
 const width = 110;
 const handlePageSearch = (props) => {
   const pageSearch = {
@@ -14,27 +15,72 @@ const handlePageSearch = (props) => {
           required: true,
           defaultValue: props.typeList[0].key,
         },
+        sysCode: {
+          required: true,
+          defaultValue: 'xg',
+        },
+        selectType: {
+          required: true,
+          defaultValue: 'getAllRole',
+        },
       },
       getInfo: (data, url) => {
-        return getAppList(data);
+        return getAppList(data, props.formValues);
       },
       giveFieldsToFormValues: true,
       afterFormValuesChange: (key, oldValue, getPage) => {
-        getPage();
+        props.changeFormValues(oldValue);
       },
       responseCallBack: (response) => {
         return response;
       },
       condition: [
+        {
+          key: 'sysCode',
+          type: 'select',
+          required: true,
+          options: [
+            { key: 'xg', name: '学工' },
+            { key: 'sg', name: '宿管' },
+            { key: 'jy', name: '就业' },
+            { key: 'yx', name: '迎新' },
+            { key: 'zs', name: '招生' },
+            { key: 'xljk', name: '心理健康' },
+            { key: 'uaa', name: '认证系统' },
+            { key: 'lx', name: '离校' },
+            { key: 'tw', name: '团委' },
+            { key: 'szxf', name: '素质学分' },
+          ],
+          name: '系统',
+        },
+
+        { // /PermApi/getAllRole
+          key: 'selectType',
+          type: 'radioGroup',
+          required: true,
+          name: '权限分类',
+          options: [
+            {
+              key: 'getAllRole',
+              name: '角色',
+            },
+            {
+              key: 'getUserGroupList',
+              name: '分组',
+            },
+          ],
+        },
         {
           key: 'groupId',
           name: '类别',
-          type: 'radioGroup',
+          type: 'select',
           options: props.typeList,
+          required: true,
         },
       ],
-      nameSpan: { big: 2, small: 4 },
-      fileSpan: { big: 2, small: 2 },
+      nameSpan: { big: 6, small: 7 },
+      fileSpan: { big: 4, small: 4 },
+      noNeedReset: true, // 不需要重置按钮
     },
     tableRowKey: 'id',
     columns: [

zyd_private/OneStopAppManageOld/AppTypeTree.js

+/**
+ * 钟是志
+ * 2019年3月29日
+ * 一个年份加上校区-学院-专业的树
+ * */
+
+import { Tree } from 'antd';
+import React, { Component, Fragment } from 'react';
+import Shell from '@/baseComponent/Shell';
+import { getAppTypeList } from '@/webPublic/Services';
+import { getPermInfo } from '@/highOrderComponent/Service';
+import { connect } from 'dva';
+
+const { TreeNode } = Tree;
+
+@connect(({ global }) => ({
+  sysCode: global.system.sysCode,
+}))
+export default class AppTypeTree extends Component {
+  constructor() {
+    super();
+    this.state = {
+      treeListData: [],
+      initYear: 0,
+    };
+  }
+
+  handleChange = (newSearch) => {
+    this.props.changeSearch(newSearch);
+  };
+
+  getList = () => {
+    getPermInfo({
+      sysCode: this.props.sysCode,
+    }, '/PermApi/getRoleList').then((treeListData) => {
+      if (!treeListData || !treeListData.length) {
+        this.setState({
+          treeListData: [],
+          loading: false,
+        });
+        this.handleChange({
+          selectKey: '',
+        });
+      } else {
+        this.handleChange({
+          selectKey: treeListData[0].id + '',
+        });
+        this.handleChange({
+          selectKey: treeListData[0].id + '',
+        });
+        this.setState({
+          treeListData,
+          loading: false,
+        });
+      }
+    });
+  };
+
+  componentDidMount() {
+    this.getList();
+    setTimeout(() => {
+      if (document.getElementById('list-table-dom')) {
+        let tableDom = document.getElementById('list-table-dom');
+        this.setState({
+          heightSet:
+            document.body.clientHeight - 150 > tableDom.offsetHeight + 164
+              ? document.body.clientHeight - 150
+              : tableDom.offsetHeight + 164,
+        });
+      }
+    }, 1000);
+  }
+
+  onSelect = (selectedKeys, info) => {
+    this.handleChange({
+      year: this.props.year,
+      selectKey: selectedKeys[0],
+    });
+  };
+
+  treeNodeList = (data) => {
+    let dom = data.map((item) => {
+      return (
+        <TreeNode title={item.title}
+                  key={item.id}>
+        </TreeNode>
+      );
+    });
+    return dom;
+  };
+
+  render() {
+    const { treeListData, loading, heightSet } = this.state;
+    const { selectKey } = this.props;
+    return (
+      <Fragment>
+        <Shell
+          styleShell={{
+            borderRight: '1px solid rgba(210,210,210,1)',
+            minHeight: heightSet || document.body.clientHeight - 150,
+            backgroundColor: '#fff',
+            overflowX: 'auto',
+            marginTop: 0,
+          }}>
+          <Tree
+            onSelect={this.onSelect}
+            selectedKeys={[selectKey]}
+            style={{ minHeight: '400px,' }}
+            disabled={loading}>
+            {this.treeNodeList(treeListData)}
+          </Tree>
+        </Shell>
+      </Fragment>
+    );
+  }
+}

zyd_private/OneStopAppManageOld/index.js

+/**
+ * 钟是志
+ * 2020年5月13日 17:38:51
+ * 一站式应用 学工角色授权
+ * */
+
+import pageSetting from './pageSetting';
+import pageSearch from './pageSearch';
+import pageButton from './pageButton';
+import PageHeaderWrapper from '@/components/PageHeaderWrapper';
+import { Row, Col } from 'antd';
+import React from 'react';
+import List from '@/highOrderComponent/List';
+import AppTypeTree from './AppTypeTree';
+import { getAppTypeList } from '@/webPublic/Services';
+import { getInfo } from '@/highOrderComponent/Service';
+
+const Index = (WrappedComponent) =>
+  class extends WrappedComponent {
+    constructor(props) {
+      super(props);
+      this.state = {
+        search: {
+          selectKey: '',
+        },
+        typeList: [],
+        authorizedApp: [],
+      };
+    }
+
+    getAuthorizedApp = () => {
+      const { selectKey } = this.state.search;
+      if (selectKey) {
+        getInfo(
+          {
+            roleId: selectKey,
+            cacheKey: Math.random(),
+          },
+          '/CommonApi/queryRoleApply',
+        ).then((x) => {
+          if (x) {
+            this.setState({
+              authorizedApp: x,
+            });
+          }
+        });
+        this.instanceComponent.getPage();
+      }
+    };
+
+    changeSearch = (search) => {
+      this.setState(
+        {
+          search,
+        },
+        () => {
+          this.getAuthorizedApp();
+        },
+      );
+    };
+
+    componentDidMount() {
+      getAppTypeList().then((treeListData) => {
+        if (!treeListData) {
+          return false;
+        }
+        this.setState({
+          typeList: treeListData.map((x) => {
+            return {
+              key: x.id,
+              name: x.name + `(${x.appNum})`,
+            };
+          }),
+        });
+      });
+      return true;
+    }
+
+    render() {
+      const { search, typeList, authorizedApp } = this.state;
+      if (!typeList.length) {
+        return null;
+      }
+      const pageS = pageSearch({ typeList, authorizedApp });
+      const pageB = pageButton({
+        roleId: search.selectKey,
+        authorizedApp,
+        getAuthorizedApp: this.getAuthorizedApp,
+      });
+      return (
+        <PageHeaderWrapper title="">
+          <Row>
+            <Col xl={5} xxl={4}>
+              <AppTypeTree
+                changeSearch={this.changeSearch}
+                selectKey={search.selectKey}
+                year={search.year}
+              />
+            </Col>
+            <Col xl={19} xxl={20}>
+              <WrappedComponent
+                listConfig={pageSetting.listConfig}
+                pageButton={pageB}
+                ref={(instanceComponent) => (this.instanceComponent = instanceComponent)}
+                pageSearch={pageS}
+              />
+            </Col>
+          </Row>
+        </PageHeaderWrapper>
+      );
+    }
+  };
+
+export default Index(List); // 高阶组件

zyd_private/OneStopAppManageOld/pageButton.js

+import React from 'react';
+import { message } from 'antd';
+import { getInfo } from '@/highOrderComponent/Service';
+
+const submitData = (selectRows, roleId) => {
+  if (!selectRows.length) {
+    message.warning('请先选择一个应用');
+    return false;
+  } else {
+    let content = selectRows.map((x) => {
+      return {
+        appId: x.id,
+        roleId,
+      };
+    });
+    content = JSON.stringify(content);
+    const data = {
+      roleId,
+      op: 'add',
+      content,
+    };
+    return getInfo(data, '/CommonApi/configRoleApply');
+  }
+};
+
+
+const deleteData = (ids, roleId) => {
+  const data = {
+    ids,
+    roleId,
+    op: 'delete',
+  };
+  return getInfo(data, '/CommonApi/configRoleApply');
+};
+
+const handleButton = (props) => {
+  const buttonConfig = [
+    {
+      name: '批量授权',
+      type: 'Normal',
+      component: 'Normal',
+      handleClick: (selectRows, formValues, getPage, search) => {
+        submitData(selectRows, props.roleId).then((x) => {
+          props.getAuthorizedApp();
+        });
+      },
+    },
+    {
+      name: '批量取消授权',
+      type: 'Normal222',
+      component: 'Normal',
+      handleClick: (selectRows, formValues, getPage, search) => {
+        if (!selectRows.length) {
+          message.warning('请先选择一个应用');
+          return false;
+        }
+
+        const deleteIds = [];
+        for (let item of selectRows) {
+          for (let x of props.authorizedApp) {
+            if (x.appId === item.id) {
+              deleteIds.push(x.id);
+            }
+          }
+        }
+        deleteData(deleteIds, props.roleId).then((x) => {
+          props.getAuthorizedApp();
+        });
+      },
+    },
+  ];
+  return buttonConfig;
+};
+
+
+export default handleButton;

zyd_private/OneStopAppManageOld/pageSearch.js

+import moment from 'moment';
+import { Link } from 'react-router-dom';
+import React, { Fragment } from 'react';
+import { getAppList } from '@/webPublic/Services';
+import { redText } from '@/pages/zydxg/CheckManage/PiciSetting/publicFunc';
+
+const width = 110;
+const handlePageSearch = (props) => {
+  const pageSearch = {
+    search: {
+      url: '/asdasd/asdgggki',
+      field: {
+        groupId: { //
+          required: true,
+          defaultValue: props.typeList[0].key,
+        },
+      },
+      getInfo: (data, url) => {
+        return getAppList(data);
+      },
+      giveFieldsToFormValues: true,
+      afterFormValuesChange: (key, oldValue, getPage) => {
+        getPage();
+      },
+      responseCallBack: (response) => {
+        return response;
+      },
+      condition: [
+        {
+          key: 'groupId',
+          name: '类别',
+          type: 'radioGroup',
+          options: props.typeList,
+        },
+      ],
+      nameSpan: { big: 2, small: 4 },
+      fileSpan: { big: 2, small: 2 },
+    },
+    tableRowKey: 'id',
+    columns: [
+      {
+        dataIndex: 'groupName',
+        title: '类别',
+        width,
+      },
+      {
+        dataIndex: 'name',
+        title: '应用名',
+        width: width + 150,
+      },
+      {
+        dataIndex: 'isAuthorized',
+        title: '是否已授权',
+        render: (text, record) => {
+          //  return '未授权';
+          const includesIds = props.authorizedApp.map((x) => {
+            return x.appId;
+          });
+          if (record && record.id && includesIds.includes(record.id)) {
+            return redText('已授权');
+          } else {
+            return '未授权';
+          }
+        },
+      },
+    ],
+  };
+  return pageSearch;
+};
+
+
+export default handlePageSearch;

zyd_private/OneStopAppManageOld/pageSetting.js

+const pageSetting = {
+  type: 'list',  // 页面类型 list列表 可能包含有其他类型的 比如 detail 详情  add 新增 update 更新 等等 ....
+  listConfig: {
+    selectRows: true, // 是否可以行选择,
+    paging: false, // 是否可以分页,
+    searchArea: true, // 是否拥有 搜索区dom,
+    buttonArea: true, // 是否拥有 按钮区,
+  },
+};
+
+export default pageSetting;