feat :增加角色选择器

@@ -6,6 +6,8 @@ export * from './qx-tags-input';
 export * from './qx-user-selector';
 export * from './qx-org-selector';
 export * from './qx-form-select';
+export * from './qx-pos-selector';
+export * from './qx-role-selector';
 export * from './qx-app-selector';
 export * from './utils';
 export * from './qx-field';

+import QxRoleSelectorInput from './src/input';
+import QxRoleSelectorDialog from './src/dialog';
+import React from 'react';
+
+interface QxRoleSelectorType extends React.FC {
+  Dialog: typeof QxRoleSelectorDialog;
+}
+
+export const QxRoleSelector = QxRoleSelectorInput as QxRoleSelectorType;
+
+QxRoleSelector.Dialog = QxRoleSelectorDialog;

+import * as React from 'react';
+import { useCallback, useEffect, useImperativeHandle, useState } from 'react';
+import { Checkbox, Empty, Input, Radio, Spin } from 'antd';
+import Menu from 'antd/es/menu';
+import { SearchOutlined } from '@ant-design/icons';
+import { getRoles, getRolesByAppCode } from './service';
+import { cloneDeep } from "lodash-es";
+// import _ from 'lodash';
+
+type PosCoreProps = {
+  appId?: string;
+  cRef?: any;
+  multiple?: boolean;
+  placeholder?: string;
+  params?: any;
+  onSelect?: (selectedKeys: string[], selectedData: RoleModel[]) => void;
+  request: any;
+  isRole?: boolean; // 是否为设计时角色权限
+  appCode?: string;
+};
+
+export interface RoleModel {
+  id: string;
+  name: string;
+  appId?: string;
+  code: string;
+  visible?: boolean;
+  disabled?: boolean;
+  child: RoleModel[];
+}
+
+const RoleSelCore: React.FC<PosCoreProps> = ({
+  appId,
+  cRef,
+  multiple,
+  placeholder,
+  onSelect,
+  isRole,
+  appCode,
+  ...props
+}) => {
+  const [loading, setLoading] = useState<boolean>(true);
+
+  const [data, setData] = useState<RoleModel[]>([]);
+
+  const [selectedData, setSelectedData] = useState<RoleModel[]>([]);
+  const [selectedKeys, setSelectedKeys] = useState<string[]>();
+  const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
+  const [keywords, setKeywords] = useState<string>('');
+
+  const requestData = useCallback(() => {
+    setLoading(true);
+    let _getRole = getRoles;
+    if (isRole) {
+      _getRole = getRolesByAppCode;
+    }
+    // todo 当前为指定appCode，待接口修改为appId传入(不用appId了)
+    _getRole(props.request, appCode || '').then((res) => {
+      const roles: RoleModel[] = res.child || [];
+      if (roles) {
+        const _expandedKeys: string[] = [];
+        roles.forEach((item) => {
+          _expandedKeys.push(item.id);
+        });
+        setExpandedKeys(_expandedKeys);
+        setData(roles);
+        setLoading(false);
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    requestData();
+  }, [requestData]);
+
+  useEffect(() => {
+    const isOnSelect = onSelect ? onSelect : () => { };
+    if (selectedKeys) {
+      isOnSelect(selectedKeys, selectedData);
+    }
+  }, [onSelect, selectedKeys, selectedData]);
+
+  const handleSelect = (selectData: { selectedKeys: string[] }) => {
+    //单选走这里
+    if (!multiple) {
+      setSelectedKeys(selectData.selectedKeys);
+    }
+  };
+  useImperativeHandle(cRef, () => ({
+    // 暴露给父组件
+    remove: (index: number) => {
+      let _selectedKeys: string[] = [];
+      let _selectedData: RoleModel[] = [];
+      if (selectedKeys && selectedKeys.length > 0) {
+        _selectedKeys = [...selectedKeys];
+        _selectedData = [...selectedData];
+        _selectedKeys.splice(index, 1);
+        _selectedData.splice(index, 1);
+        setSelectedData(_selectedData);
+        setSelectedKeys(_selectedKeys);
+      }
+    },
+    emptySelect: () => {
+      setSelectedData([]);
+      setSelectedKeys([]);
+    },
+  }));
+  const handleMultiSelect = (checked: boolean, item: RoleModel) => {
+    let _selectedKeys: string[] = [];
+    let _selectedData: RoleModel[] = [];
+    if (selectedKeys) {
+      _selectedKeys = [...selectedKeys];
+      _selectedData = [...selectedData];
+    }
+    // console.log(checked, item.id, _selectedKeys);
+
+    if (checked) {
+      _selectedKeys.push(item.id);
+      _selectedData.push(item);
+    } else {
+      const index = _selectedKeys.indexOf(item.id);
+      if (index > -1) {
+        _selectedKeys.splice(index, 1);
+        _selectedData.splice(index, 1);
+      }
+    }
+
+    setSelectedData(_selectedData);
+    setSelectedKeys(_selectedKeys);
+  };
+
+  //多选走这里
+  const filter = (word: string) => {
+    setKeywords(word);
+    const traverse = function (node: any) {
+      const childNodes = node.child || [];
+
+      childNodes.forEach((child) => {
+        child.visible = child.name.indexOf(word) > -1;
+
+        traverse(child);
+      });
+
+      if (!node.visible && childNodes.length) {
+        node.visible = childNodes.some((child) => child.visible);
+      }
+    };
+
+    if (data) {
+      const _data = cloneDeep(data);
+      _data.forEach((item) => {
+        traverse(item);
+      });
+      setData(_data);
+    }
+  };
+
+  const handleSearch = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    e.stopPropagation();
+    // @ts-ignore
+    filter(e.target.value.trim());
+  };
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    // @ts-ignore
+    if (e.type === 'click' && e.target.value === '' && data) {
+      //如果是清空
+      filter('');
+    }
+  };
+
+  const renderText = (text: string) => {
+    let title = <> {text}</>;
+    if (keywords) {
+      const index = text.indexOf(keywords);
+      if (index > -1) {
+        title = (
+          <>
+            {text.substr(0, index)}
+            <span className={'qx-keywords-highlight'}>{keywords}</span>
+            {text.substr(index + keywords.length)}
+          </>
+        );
+      }
+    }
+    return title;
+  };
+
+  return (
+    <div className={'qx-search-menus__wrap'}>
+      <Input
+        // style={{ display: 'none' }}
+        className={'qx-selector-sub-search'}
+        placeholder={placeholder || '请输入角色名称，按回车键搜索'}
+        allowClear
+        prefix={<SearchOutlined />}
+        onChange={(e) => {
+          handleChange(e);
+        }}
+        onPressEnter={(e) => {
+          handleSearch(e);
+        }}
+      />
+      <div className="qx-search-menus">
+        {expandedKeys.length ? (
+          <Menu
+            mode={'inline'}
+            onSelect={handleSelect}
+            selectedKeys={multiple ? [] : selectedKeys}
+            multiple={!!multiple}
+            defaultOpenKeys={expandedKeys}
+          >
+            {data.map((item) => {
+              if (typeof item.visible === 'boolean' && !item.visible) {
+                return null;
+              }
+              if (item.child) {
+                return (
+                  <Menu.SubMenu key={item.id} title={item.name}>
+                    {item.child.map((child) => {
+                      return typeof child.visible === 'boolean' && !child.visible ? null : (
+                        <Menu.Item key={child.id} disabled={child.disabled}>
+                          {multiple ? (
+                            <Checkbox
+                              checked={selectedKeys && selectedKeys.indexOf(child.id) > -1}
+                              disabled={child.disabled}
+                              onChange={(e) => {
+                                handleMultiSelect(e.target.checked, child);
+                              }}
+                            >
+                              {renderText(child.name)}
+                            </Checkbox>
+                          ) : isRole ? (
+                            <Radio
+                              checked={
+                                selectedKeys?.length && selectedKeys[0].indexOf(child.id) > -1
+                              }
+                              disabled={child.disabled}
+                            >
+                              {renderText(child.name)}
+                            </Radio>
+                          ) : (
+                            renderText(child.name)
+                          )}
+                        </Menu.Item>
+                      );
+                    })}
+                  </Menu.SubMenu>
+                );
+              }
+              return null;
+            })}
+          </Menu>
+        ) : null}
+
+        <Spin
+          spinning={loading}
+          style={{ width: '100%', marginTop: '40px' }}
+        // indicator={<LoadingOutlined style={{ fontSize: 24, marginTop: '40px' }} spin />}
+        />
+        {!loading && data.length === 0 ? <Empty style={{ paddingTop: '30px' }} /> : null}
+      </div>
+    </div>
+  );
+};
+
+export default RoleSelCore;

+import * as React from 'react';
+import { useRef, useState } from 'react';
+import { Modal, Tag } from 'antd';
+import './style.less';
+import type { RoleModel } from './core';
+import RoleSelCore from './core';
+// import { RequestMethod } from 'umi-request';
+
+type RoleSelectorDialogProps = {
+  appId?: string;
+  title?: string;
+  visible: boolean;
+  onCancel: () => void;
+  data?: [];
+  multiple?: boolean;
+  onOk: (selectedKeys: string[], selectedData: RoleModel[]) => void;
+  request: AnalyserOptions;
+  isRole?: boolean; // 是否为设计时角色权限
+  appCode?: string;
+};
+
+const RoleSelectorDialog: React.FC<RoleSelectorDialogProps> = (props) => {
+  const [selectedData, setSelectedData] = useState<RoleModel[]>([]);
+  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+  const coreRef = useRef({
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    remove: (index: number) => {
+      // console.log(index)
+    },
+    emptySelect: () => {},
+  });
+
+  const handleOk = () => {
+    props.onOk(selectedKeys, selectedData);
+    coreRef.current.emptySelect();
+    setSelectedKeys([]);
+    setSelectedData([]);
+  };
+  const handleCancel = () => {
+    props.onCancel();
+    coreRef.current.emptySelect();
+    setSelectedKeys([]);
+    setSelectedData([]);
+  };
+
+  const handleSelectPos = (keys: string[], datas: RoleModel[]) => {
+    setSelectedKeys(keys);
+    setSelectedData(datas);
+  };
+
+  const handleRemove = (index: number) => {
+    coreRef.current.remove(index);
+  };
+
+  return (
+    <Modal
+      title={props.title || '选择角色'}
+      width={560}
+      visible={props.visible}
+      className={'qx-role-selector__dialog'}
+      onOk={handleOk}
+      onCancel={handleCancel}
+    >
+      {props.multiple ? (
+        <div className={'qx-role-selected__temp'}>
+          {(selectedData || []).map((item: RoleModel, index: number) => (
+            <Tag closable color={'blue'} key={item.id} onClose={() => handleRemove(index)}>
+              {item.name}
+            </Tag>
+          ))}
+        </div>
+      ) : null}
+      <div className={'qx-role-selector__content'}>
+        {props.visible ? (
+          <RoleSelCore
+            request={props.request}
+            cRef={coreRef}
+            // multiple
+            multiple={!props?.isRole}
+            onSelect={handleSelectPos}
+            appId={props.appId}
+            isRole={props?.isRole}
+            appCode={props?.appCode}
+          />
+        ) : null}
+      </div>
+    </Modal>
+  );
+};
+
+export default RoleSelectorDialog;

+import React, { useEffect, useState } from 'react';
+import { Checkbox, Input, Tag } from 'antd';
+import { ApartmentOutlined } from '@ant-design/icons';
+import PosSelectorDialog from './dialog';
+// import { RequestMethod } from 'umi-request';
+
+export type QxRoleSelectorProps = {
+  onChange?: (data: any) => void;
+  defaultValue?: any;
+  disabled?: boolean;
+  multiple?: boolean;
+  readOnly?: boolean;
+  name?: string;
+  data?: [];
+  request: any;
+};
+
+/**
+ * 表单设计器（XRender）
+ * @constructor
+ */
+const QxRoleSelector: React.FC<QxRoleSelectorProps> = (props) => {
+  const [selectOrgs, setSelectOrgs] = useState([]);
+  const [visible, setVisible] = useState(false);
+  const [value, setValue] = useState<string | string[]>();
+
+  useEffect(() => {
+    setValue(props.defaultValue);
+  }, []);
+
+  // getUserList()
+  const handleOk = (keys: [], data: []) => {
+    let _value: string[] | string = keys;
+    if (!props.multiple && keys && keys.length > 0) {
+      // @ts-ignore
+      _value = keys[0];
+    }
+    setValue(_value);
+    setSelectOrgs(data);
+    setVisible(false);
+    if (props.onChange) {
+      props.onChange(_value);
+    }
+  };
+
+  const handleCancel = () => {
+    setVisible(false);
+  };
+  const handleRemove = (index: number) => {
+    let _value: string | string[] = '';
+    let _selected: string[] = [];
+    if (props.multiple) {
+      _value = [...value];
+      _selected = [...selectOrgs];
+      _value.splice(index, 1);
+      _selected.splice(index, 1);
+    }
+
+    setValue(_value);
+    setSelectOrgs(_selected);
+
+    if (props.onChange) {
+      props.onChange(_value);
+    }
+  };
+
+  return (
+    <>
+      {props.name ? (
+        props.multiple && typeof value !== 'string' ? (
+          <Checkbox.Group name={props.name} value={value} style={{ display: 'none' }} />
+        ) : (
+          <Input style={{ display: 'none' }} value={value} />
+        )
+      ) : null}
+      <div
+        className={'qx-user-selector ant-input'}
+        style={{ minHeight: '33px' }}
+        onClick={() => setVisible(true)}
+      >
+        <ApartmentOutlined style={{ paddingRight: '5px', color: '#999' }} />
+        {selectOrgs.map((org: { title: string; key: string }, index) => (
+          <Tag closable color={'blue'} key={org.key} onClose={() => handleRemove(index)}>
+            {org.title}
+          </Tag>
+        ))}
+      </div>
+      {!props.readOnly && (
+        <PosSelectorDialog
+          visible={visible}
+          multiple={props.multiple}
+          data={props.data}
+          onOk={handleOk}
+          request={props.request}
+          onCancel={handleCancel}
+        />
+      )}
+    </>
+  );
+};
+
+export default QxRoleSelector;

+/**
+ * 获取选人组件中的角色
+ */
+export function getRoles(request: any, appCode: string) {
+  return request.get(`/qx-apaas-uc/role/authTree`);
+}
+
+/**
+ * 获取选人组件中的角色（设计时角色控制）
+ */
+export function getRolesByAppCode(request: any, appCode: string) {
+  return request.get(`/qx-apaas-lowcode/appRole/${appCode}/authTree`);
+}

+.qx-role-selector__dialog {
+  .ant-modal-body {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+
+    > .ant-row {
+      flex: 1;
+    }
+  }
+
+  .ant-checkbox-wrapper {
+    width: 100%;
+  }
+}
+
+.qx-role-selected__temp {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  height: 60px;
+  padding: 5px;
+  overflow: auto;
+  border-bottom: 1px solid #f0f0f0;
+
+  .ant-tag {
+    margin: 1px 2px;
+  }
+}
+
+.qx-role-selector__content {
+  height: 300px;
+  overflow: auto;
+}