@tddc/assign-modal 3.0.9 → 3.1.0

package/src/AssignModal/AssignApp/View.js

@@ -0,0 +1,315 @@
+import { Input, Empty, Icon, Tooltip, Ellipsis } from 'tntd';
+import { useEffect, useState, useCallback, useRef, useMemo } from 'react';
+
+import { debounce } from 'lodash';
+import './index.less';
+import { findSameCodePath, preorder } from './utils';
+import { getText } from '../../locale';
+
+let path = []; // 上级机构到当前机构的路径
+
+const AssignModal = (props) => {
+  const {
+    orgList = [],
+    dataItem = {},
+    appList,
+    orgTitle,
+    appTitle,
+    userTitle,
+    userList = [],
+    showUser,
+    locale,
+  } = props;
+
+  // 封装 getText，自动传入 locale
+  const t = (key, ...params) => getText(key, props?.lang, locale, ...params);
+  let { appCodes = [], orgCodes = [], orgCode, appCode, accounts, account } = dataItem;
+
+  const orgMapRef = useRef({});
+  const appMapRef = useRef({});
+  const userMapRef = useRef({});
+
+  const rootNode = orgList[0];
+
+  const [allOrg, allApp, allUser] = useMemo(() => {
+    let org = preorder(
+      rootNode,
+      (key, obj) => {
+        orgMapRef.current[key] = obj;
+      },
+      true,
+    );
+    let app = appList.map((item) => {
+      appMapRef.current[item.value] = item;
+      return item.value;
+    });
+    let user =
+      userList?.map((item) => {
+        userMapRef.current[item.account] = item;
+        return item.account;
+      }) || [];
+
+    return [org, app, user];
+  }, [rootNode, appList, userList]);
+
+  const [checkedKeys, setCheckedKeys] = useState([]);
+  const [appKeys, setAppKeys] = useState(appCodes || []);
+  const [userKeys, setUserKeys] = useState(accounts || []);
+
+  const [filterOrg, setFilterOrg] = useState();
+  const [filterUser, setFilterUser] = useState();
+  const [filterApp, setFilterApp] = useState();
+
+  useEffect(() => {
+    // path 和 allOrgList 赋值
+    path = findSameCodePath(rootNode, orgCode);
+
+    let initOrgs = [];
+    let initApps = [];
+    let initAccounts = [];
+    if (orgCodes.includes('all')) {
+      initOrgs = allOrg;
+    } else {
+      initOrgs = Array.from(new Set([...(orgCodes || []), ...path]));
+    }
+    if (appCodes.includes('all')) {
+      initApps = allApp;
+    } else {
+      initApps = Array.from(new Set([...(appCodes || []), appCode]));
+    }
+
+    if (showUser) {
+      if (accounts.includes('all')) {
+        initAccounts = allUser;
+      } else {
+        initAccounts = Array.from(new Set([...(accounts || []), account]));
+      }
+    }
+    setCheckedKeys(initOrgs);
+    setAppKeys(initApps || []);
+    setUserKeys(initAccounts || []);
+  }, [dataItem]);
+
+  const debouncedOrgSearch = useCallback(
+    debounce((nextValue) => {
+      setFilterOrg(nextValue);
+    }, 200),
+    [],
+  );
+  const debouncedUserSearch = useCallback(
+    debounce((nextValue) => {
+      setFilterUser(nextValue);
+    }, 200),
+    [],
+  );
+  const debouncedAppSearch = useCallback(
+    debounce((nextValue) => {
+      setFilterApp(nextValue);
+    }, 200),
+    [],
+  );
+  // 获取机构路径的中文显示名并拼接
+  const getOrgPathDisplayName = (path = []) => {
+    let displayName = '';
+    if (path.length > 0) {
+      displayName = path.map((item) => orgMapRef.current[item].name).join(' / ');
+    }
+
+    return displayName;
+  };
+
+  // 渲染Org列表
+  let orgListDomRender = useMemo(() => {
+    const renderOrgItem = (item, lang) => {
+      console.log(item, 'item');
+
+      const mapResult = {
+        1: {
+          cn: '职能部门',
+          en: 'Func. Dept.',
+          icon: 'crowd',
+        },
+        2: {
+          icon: 'corporation',
+        },
+      };
+
+      const result = mapResult[item?.orgAttribute] || {};
+
+      return (
+        <div className="org-item-wrapper" style={{ width: '100%' }}>
+          <Ellipsis
+            title={item.name}
+            widthLimit={String(item.orgAttribute) === '1' ? 'calc(100% - 90px}' : '100%'}
+          />
+          {String(item.orgAttribute) === '1' && (
+            <span className="org-functional-departemt-marker">{result[lang] || '职能部门'}</span>
+          )}
+        </div>
+      );
+    };
+
+    return (
+      checkedKeys
+        .filter((i) => {
+          let node = orgMapRef.current[i] || {};
+          let { path, name } = node;
+          if (!path && !name) return false;
+          let pathDisplayName = getOrgPathDisplayName(path);
+
+          if (filterOrg) {
+            return (
+              pathDisplayName?.toLocaleLowerCase().includes(filterOrg?.toLocaleLowerCase()) ||
+              name?.toLocaleLowerCase().includes(filterOrg?.toLocaleLowerCase())
+            );
+          }
+          return i;
+        })
+        .map((item, index) => {
+          let node = orgMapRef.current[item] || {};
+          let { path, name } = node;
+
+          let pathDisplayName = getOrgPathDisplayName(path);
+          if (!path && !name) return null;
+          return (
+            <li key={item.value + index} className="select-menu-list-item">
+              <span className="org-name">
+                <Ellipsis title={renderOrgItem(node, props?.lang)} />
+              </span>
+              <span className="path-name">
+                <Ellipsis title={pathDisplayName} />
+              </span>
+            </li>
+          );
+        }) || <Empty />
+    );
+  }, [userList, checkedKeys, filterOrg]);
+  // 渲染App列表
+  let appListDomRender = useMemo(() => {
+    return (
+      appKeys
+        .filter((i) => {
+          let node = appMapRef.current[i] || {};
+          const { label, value } = node;
+          if (!value && !label) return false;
+
+          if (filterApp) {
+            return (
+              label?.toLocaleLowerCase().includes(filterApp?.toLocaleLowerCase()) ||
+              value?.toLocaleLowerCase().includes(filterApp?.toLocaleLowerCase())
+            );
+          }
+          return i;
+        })
+        .map((item, index) => {
+          let node = appMapRef.current[item] || {};
+          let { value, label } = node;
+
+          return (
+            <li key={value + index} className="select-menu-list-item">
+              <Tooltip title={label} key={label + index}>
+                <span className="app-name">{label}</span>
+              </Tooltip>
+            </li>
+          );
+        }) || <Empty />
+    );
+  }, [appList, appKeys, filterApp]);
+
+  // 渲染User列表
+  let userListDomRender = useMemo(() => {
+    return (
+      userKeys
+        ?.filter((item) => {
+          let node = userMapRef.current[item] || {};
+          const { account, userName } = node;
+          if (!userName && !node.account) return false;
+          if (filterUser) {
+            return (
+              account?.toLocaleLowerCase().includes(filterUser?.toLocaleLowerCase()) ||
+              userName?.toLocaleLowerCase().includes(filterUser?.toLocaleLowerCase())
+            );
+          }
+          return item;
+        })
+        .map((item, index) => {
+          let node = userMapRef.current[item] || {};
+          let { userName } = node;
+          return (
+            <li key={userName + index} className="select-menu-list-item">
+              <Tooltip title={userName} key={userName + index}>
+                <span className="user-name">{userName}</span>
+              </Tooltip>
+            </li>
+          );
+        }) || <Empty />
+    );
+  }, [userList, userKeys, filterUser]);
+
+  return (
+    <>
+      <div className="assign-box-container view-mode">
+        <div className="org-panel panel">
+          <div className="menu-header">
+            {/* 授权可用机构列表 */}
+            <span className="title">{orgTitle || t('authorizesOrgList')}</span>
+          </div>
+          <div className="panel-menu-body">
+            <ul className="select-menu-list">
+              <Input
+                size="small"
+                placeholder={t('search')}
+                onChange={(e) => {
+                  debouncedOrgSearch(e.target.value);
+                }}
+                suffix={<Icon type="zoom" />}
+                style={{ marginBottom: 16 }}
+              />
+              {orgListDomRender}
+            </ul>
+          </div>
+        </div>
+        <div className="app-panel panel">
+          <div className="menu-header">
+            {/* 授权可用渠道列表 */}
+            <span className="title">{appTitle || t('authorizesAppList')}</span>
+          </div>
+          <div className="panel-menu-body">
+            <Input
+              onChange={(e) => {
+                debouncedAppSearch(e.target.value);
+              }}
+              placeholder={t('enterAppName')}
+              size="small"
+              suffix={<Icon type="zoom" />}
+              style={{ marginBottom: 16 }}
+            />
+            <ul className="select-menu-list">{appListDomRender}</ul>
+          </div>
+        </div>
+        {!!showUser && (
+          <div className="user-panel panel">
+            <div className="menu-header">
+              {/* 授权可用用户列表 */}
+              <span className="title">{userTitle || t('authorizesUserList')}</span>
+            </div>
+            <div className="panel-menu-body">
+              <Input
+                size="small"
+                placeholder={t('enterUserName')}
+                onChange={(e) => {
+                  debouncedUserSearch(e.target.value);
+                }}
+                suffix={<Icon type="zoom" />}
+                style={{ marginBottom: 16 }}
+              />
+              <ul className="select-menu-list">{userListDomRender}</ul>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default AssignModal;

package/src/AssignModal/AssignApp/index.js

@@ -0,0 +1,7 @@
+import View from './View';
+import Edit from './Edit';
+const AssignModal = (props) => {
+  return props.disabled ? <View {...props} /> : <Edit {...props} />;
+};
+
+export default AssignModal;

package/src/AssignModal/AssignApp/index.less

@@ -0,0 +1,328 @@
+.assign-box-container {
+  & {
+    height: calc(100% - 24px);
+    overflow: hidden;
+  }
+
+  .slider {
+    display: flex;
+    height: calc(100% - 24px);
+    margin-top: 16px;
+    // transition 已移至 inline style，支持动态面板数量
+
+    .panel {
+      flex: 1 0 0; // flex-grow: 1, flex-shrink: 0, flex-basis: 0
+      // 每个面板平分 slider 宽度，不压缩，从 0 基准开始计算
+      height: 100%;
+      padding: 16px;
+      overflow: hidden;
+      background-color: #fff;
+      border-radius: @border-radius-base * 2;
+    }
+
+    .panel-menu-body {
+      & {
+        display: flex;
+        width: 100%;
+        height: calc(100% - 36px);
+        padding: 16px 0 16px 16px;
+        background: @fill-color-quaternary;
+        border-radius: @border-radius-base;
+      }
+
+      > div {
+        width: 50%;
+      }
+
+      .panel-left {
+        height: 100%;
+        // overflow: auto;
+
+        > .ant-input-affix-wrapper {
+          position: sticky;
+          top: 0px;
+          z-index: 1;
+          // background: #f8f9fb;
+        }
+
+        > .ant-checkbox-wrapper {
+          margin-left: 8px;
+        }
+      }
+
+      .panel-right {
+        overflow: hidden;
+
+        & {
+          padding: 0 0px 16px 16px;
+          border-left: 1px solid @border-color-secondary;
+        }
+
+        .select-menu-header {
+          display: flex;
+          align-items: flex-start;
+          justify-content: space-between;
+          margin-right: 16px;
+          margin-bottom: 16px;
+        }
+
+        .select-menu-list {
+          position: relative;
+          height: calc(100% - 16px);
+          margin: 0px;
+          padding: 0px;
+          overflow: auto;
+
+          > .ant-input-affix-wrapper {
+            position: sticky;
+            top: 0px;
+            z-index: 1;
+            background: #f8f9fb;
+          }
+
+          .select-menu-list-item {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            height: 50px;
+            margin-right: 8px;
+            margin-bottom: 4px;
+            padding: 4px 16px 4px 8px;
+            border-radius: @border-radius-base;
+
+            .org-name {
+              display: inline-block;
+              color: @bg-color-spotilight;
+              font-weight: 400;
+              font-size: 14px;
+              font-family: 'PingFang SC';
+              line-height: 22px;
+            }
+
+            .path-name {
+              display: inline-block;
+              color: tint(@bg-color-spotilight, 50%);
+              font-weight: 400;
+              font-size: 12px;
+              font-family: 'PingFang SC';
+              line-height: 20px;
+            }
+
+            .close-icon {
+              position: absolute;
+              top: calc(50% - 6px);
+              right: 8px;
+              font-size: 12px;
+              cursor: pointer;
+            }
+          }
+
+          .select-menu-list-item:hover {
+            background-color: #fff;
+          }
+        }
+      }
+    }
+
+    .app-panel,
+    .user-panel {
+      .panel-menu-body {
+        .panel-left {
+          position: relative;
+          display: flex;
+          flex-direction: column;
+
+          > .ant-input-affix-wrapper {
+            position: sticky;
+            top: 0px;
+            z-index: 1;
+            background: #f8f9fb;
+          }
+
+          > label {
+            margin-bottom: 8px;
+          }
+
+          > label:last-child {
+            margin-bottom: 0px;
+          }
+        }
+
+        .panel-right {
+          .select-menu-list {
+            .select-menu-list-item {
+              height: 30px;
+              padding: 4px 8px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .menu-header {
+    & {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      margin-bottom: 16px;
+    }
+
+    .title {
+      position: relative;
+      margin-left: 12px;
+      color: @text-color;
+      font-weight: 600;
+      font-style: normal;
+      line-height: 22px;
+
+      .sum {
+        display: inline-block;
+        margin: 0 4px;
+        color: @blue-6;
+      }
+
+      .text-grey {
+        color: tint(@text-color, 50%);
+      }
+    }
+
+    .title::after {
+      position: absolute;
+      top: 5px;
+      left: -12px;
+      display: inline-block;
+      width: 4px;
+      height: 12px;
+      background: @blue-6;
+      border-radius: 4px;
+      content: '';
+    }
+  }
+
+  .disabeld {
+    color: rgba(0, 0, 0, 0.25);
+    cursor: not-allowed;
+  }
+}
+
+.assign-box-container.view-mode {
+  & {
+    display: flex;
+    gap: 16px;
+    height: 100%;
+  }
+
+  .panel.org-panel,
+  .panel.app-panel,
+  .panel.user-panel {
+    flex: 1;
+    height: 100%;
+    padding: 16px;
+    overflow: hidden;
+    background-color: #fff;
+    border-radius: @border-radius-base * 2;
+
+    .panel-menu-body {
+      & {
+        width: 100%;
+        height: calc(100% - 36px);
+        padding: 16px;
+        background: @fill-color-quaternary;
+        border-radius: @border-radius-base;
+      }
+
+      .select-menu-header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        margin-bottom: 16px;
+      }
+
+      .select-menu-list {
+        position: relative;
+        height: 100%;
+        margin: 0px;
+        padding: 0px;
+        overflow: auto;
+
+        > .ant-input-affix-wrapper {
+          position: sticky;
+          top: 0px;
+          z-index: 1;
+          background: #f8f9fb;
+        }
+
+        .select-menu-list-item {
+          &:last-child {
+            margin-bottom: 0px;
+          }
+
+          margin-bottom: 8px;
+        }
+      }
+    }
+  }
+
+  .org-panel {
+    flex: 1;
+
+    .panel-menu-body {
+      padding: 16px;
+      background: #f8f9fb;
+      border-radius: 8px;
+      // overflow: auto;
+    }
+
+    .select-menu-list {
+      position: relative;
+      height: calc(100% - 16px);
+      margin: 0px;
+      padding: 16px;
+
+      > .ant-input-affix-wrapper {
+        position: sticky;
+        top: 0px;
+        z-index: 1;
+        background: #f8f9fb;
+      }
+
+      .select-menu-list-item {
+        & {
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          height: 50px;
+          margin-right: 16px;
+          margin-bottom: 4px !important;
+          padding: 0px;
+          border-radius: @border-radius-base;
+        }
+
+        &:last-child {
+          margin-bottom: 0px;
+        }
+
+        .org-name {
+          display: inline-block;
+          height: 22px;
+          color: @bg-color-spotilight;
+          font-weight: 400;
+          font-size: 14px;
+          font-family: 'PingFang SC';
+          line-height: 22px;
+        }
+
+        .path-name {
+          display: inline-block;
+          height: 22px;
+          color: tint(@bg-color-spotilight, 50%);
+          font-weight: 400;
+          font-size: 12px;
+          font-family: 'PingFang SC';
+          line-height: 22px;
+        }
+      }
+    }
+  }
+}