@qmlight/web-platform-components 1.0.0

package/SearchAssistanceSelect/src/SearchAssistanceComponent/treeData/index.tsx

@@ -0,0 +1,407 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { message, QmSearchTree } from 'dcp-design-react';
+import { getTreeDataList, getOrgPerson, getDeptTreeNode } from '../api/treeData';
+import DropDownList from '../component/dropdownList';
+import isEmpty from 'lodash-es/isEmpty';
+import { ApartmentOutlined, UserOutlined, BankOutlined, FolderOutlined } from '@/icons';
+import './style.less';
+
+const TreeData = (props) => {
+  const {
+    mode,
+    onDataChange,
+    selectedKeys = [],
+    targetKeys = [],
+    onItemSelectAll,
+    onTypeChange,
+    onValueChange,
+    type = 'default',
+    onDoubleClickChange,
+  } = props;
+  const [fetchParams, setFetchParams] = useState<any>({ orgTypeCode: 'def' });
+  const treeData = useRef<any[]>([]);
+  const searchTreeRef = useRef<any>();
+  const [itemKeys, setItemKeys] = useState<any[]>([]);
+  const timer = useRef<any>(null);
+  useEffect(() => {
+    setItemKeys(selectedKeys || []);
+  }, [selectedKeys]);
+  const updateTreeData = (list, key, children) =>
+    list.map((node) => {
+      if (node.id === key) {
+        return {
+          ...node,
+          children,
+        };
+      }
+      if (node.children) {
+        return {
+          ...node,
+          children: updateTreeData(node.children, key, children),
+        };
+      }
+      return node;
+    });
+  const getNodeData = (data, id, field) => {
+    for (let i = 0; i < data.length; i++) {
+      if (data[i].id === id) {
+        return data[i];
+      }
+      if (!isEmpty(data[i].children)) {
+        return getNodeData(data[i].children, id, field);
+      }
+    }
+    return field;
+  };
+  const getIsLeft = (a1, a2) => {
+    if (type === 'default' || type === 'customOrg') {
+      return !a1;
+    }
+    return !a2;
+  };
+  const getCheckAble = (item) => {
+    if (type === 'default' || type === 'org') {
+      return !(targetKeys.includes(item.id) || targetKeys.includes(item.parentId));
+    }
+    if (type === 'customOrg') {
+      return (
+        !item.orgtype &&
+        item.orgtype !== 0 &&
+        !(targetKeys.includes(item.id) || targetKeys.includes(item.parentId))
+      );
+    }
+    if (type === 'doc') {
+      return !(targetKeys.includes(item.id) || targetKeys.includes(item.parentId));
+    }
+    return (
+      item.orgtype === 2 &&
+      !(
+        targetKeys.includes(item.id) ||
+        targetKeys.includes(item.parentId) ||
+        targetKeys.includes(`${item.parentId}_${item.id}`)
+      )
+    );
+  };
+
+  const getData = async (params) => {
+    params.id = params.newId;
+    const treeList = getTreeList(treeData.current, []);
+    const field = treeList.find((item) => item.id === params['id']) || {
+      hasChildren: true,
+    };
+    const { newId, ...newParams } = params;
+    console.log(newParams);
+    const res = await (field.hasChildren
+      ? getTreeDataList({ ...fetchParams, ...newParams })
+      : getOrgPerson({ id: params.id }));
+
+    if (res.code === 200) {
+      if (!params['id']) {
+        // const list = getNodeData(res.data, !hasChildren);
+        const list = res.data.map((item) => {
+          return {
+            ...item,
+            checkable: getCheckAble(item),
+            parentId: params.id,
+            newId: item.id,
+            isLeaf: getIsLeft(field.hasChildren, item.hasChildren),
+          };
+        });
+
+        treeData.current = list;
+        const treeList = getTreeList(list, []);
+        onDataChange &&
+          onDataChange(
+            treeList.map((item) => {
+              return {
+                ...item,
+                key: item.id,
+                title: item.name,
+              };
+            })
+          );
+        return {
+          ...res,
+          data: list,
+        };
+      } else {
+        const resPer: any = await (type === 'default'
+          ? getOrgPerson({ id: params.id })
+          : new Promise((resolve) => {
+              resolve({
+                code: 200,
+                data: [],
+                message: '',
+              });
+            }));
+        const person = resPer?.data?.map((item) => {
+          return {
+            ...item,
+            isLeaf: true,
+            parentId: params.id,
+            newId: `${params.id}_${item.id}`,
+            checkable: getCheckAble(item),
+          };
+        });
+
+        const list = res.data.map((item) => {
+          return {
+            ...item,
+            isLeaf: getIsLeft(field.hasChildren, item.hasChildren),
+            parentId: params.id,
+            newId: field.hasChildren ? item.id : `${params.id}_${item.id}`,
+            checkable: getCheckAble(item),
+          };
+        });
+
+        treeData.current = updateTreeData(treeData.current, params.id, list.concat(person));
+        const treeList = getTreeList(treeData.current, []);
+        onDataChange &&
+          onDataChange(
+            treeList.map((item) => {
+              return {
+                ...item,
+                key: item.id,
+                title: item.name,
+              };
+            })
+          );
+        console.log(list.concat(person));
+        return {
+          ...res,
+          data: list.concat(person),
+        };
+      }
+    }
+
+    return res;
+  };
+  const getTreeList = (treeData, list) => {
+    treeData.forEach((item) => {
+      list.push(item);
+      if (item.children) {
+        getTreeList(item.children, list);
+      }
+    });
+    return list;
+  };
+  const onDropDataChange = (value) => {
+    treeData.current = [
+      // {
+      //   id: value.key,
+      //   newId: value.key,
+      //   name: value.label,
+      //   orgtype: 0,
+      //   checkable: false,
+      //   hasChildren: true,
+      // },
+    ];
+    onTypeChange && onTypeChange(value);
+
+    setFetchParams({ orgTypeCode: value.key });
+  };
+  const onItemChange = async (node) => {
+    if (node.length > 0) {
+      onItemSelectAll(
+        node.map((item) => item.id),
+        true
+      );
+      if (selectedKeys.length) {
+        return;
+      }
+    } else {
+      onItemSelectAll(selectedKeys, false);
+    }
+  };
+  useEffect(() => {
+    if (searchTreeRef.current) {
+      console.log(targetKeys);
+      const treeList = getTreeList(treeData.current, []);
+      console.log(treeList);
+      treeList.forEach((item) => {
+        if (item.orgtype === 0) {
+          searchTreeRef.current.UPDATE_RECORD(item.id, {
+            checkable: false,
+          });
+        } else {
+          searchTreeRef.current.UPDATE_RECORD(item.newId, {
+            checkable: getCheckAble(item),
+          });
+        }
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [targetKeys]);
+
+  const getDocData = async (params) => {
+    const res: any = await getDeptTreeNode({ ...params, orgTypeCode: '' });
+    if (res.code === '200') {
+      if (params.id) {
+        const list = res.data.map((item) => {
+          return {
+            ...item,
+            oldId: item.id,
+            id: item.code,
+            checkable: getCheckAble({ id: item.code, parentId: item.parentId }),
+            isLeaf: item.treeLevel === 3,
+            orgtype: item.orgType || null,
+          };
+        });
+        treeData.current = updateTreeData(treeData.current, params.id, list);
+        const treeList = getTreeList(treeData.current, []);
+        onDataChange &&
+          onDataChange(
+            treeList.map((item) => {
+              return {
+                ...item,
+                key: item.id,
+                title: item.name,
+              };
+            })
+          );
+        return {
+          code: 200,
+          data: list,
+          message: res.message,
+        };
+      } else {
+        const list = res.data.map((item) => {
+          return {
+            ...item,
+            oldId: item.id,
+            id: item.code,
+            checkable: getCheckAble({ id: item.code, parentId: item.parentId }),
+            isLeaf: item.treeLevel === 3,
+            orgtype: item.orgType || null,
+          };
+        });
+        treeData.current = list;
+        const treeList = getTreeList(list, []);
+        onDataChange &&
+          onDataChange(
+            treeList.map((item) => {
+              return {
+                ...item,
+                key: item.id,
+                title: item.name,
+              };
+            })
+          );
+        return {
+          code: 200,
+          data: list,
+          message: res.message,
+        };
+      }
+    }
+    return res;
+  };
+
+  return (
+    <div className="search-tree-page">
+      {/* {type !== 'doc' && <DropDownList onDataChange={onDropDataChange} />} */}
+
+      <div className="search-tree-page-content">
+        <QmSearchTree
+          ref={searchTreeRef}
+          filterable={false}
+          showCollapse={false}
+          asyncLoad={true}
+          multiple={mode === 'multiple'}
+          fetch={{
+            api: type === 'doc' ? getDocData : getData,
+            params: fetchParams,
+          }}
+          // checkStrictly={true}
+          value={itemKeys}
+          checkStrategy={'SHOW_PARENT'}
+          onCheckChange={(node: any) => {
+            clearTimeout(timer.current);
+            timer.current = setTimeout(async () => {
+              await onItemSelectAll(selectedKeys, false);
+              onItemChange(node);
+            }, 300);
+          }}
+          onSelectChange={(node: any) => {
+            if (!mode) {
+              if (
+                (!node?.orgtype && node.orgtype !== 0) ||
+                (type === 'org' && node.orgtype !== 0)
+              ) {
+                setItemKeys([node.id]);
+                onValueChange && onValueChange({ ...node, value: node.id, title: node.name });
+              }
+            }
+          }}
+          titleRender={(node) => {
+            return node.orgtype === 0 ? (
+              <span
+                onDoubleClick={(e) => {
+                  if (!node?.checkable) {
+                    return;
+                  }
+                  clearTimeout(timer.current);
+                  if (!targetKeys?.includes(node.id)) {
+                    onDoubleClickChange(node.id);
+                  }
+                }}
+              >
+                <ApartmentOutlined /> {node.name}
+              </span>
+            ) : node.orgtype === 1 ? (
+              <span
+                onDoubleClick={(e) => {
+                  if (!node?.checkable) {
+                    return;
+                  }
+                  clearTimeout(timer.current);
+                  if (!targetKeys?.includes(node.id)) {
+                    onDoubleClickChange(node.id);
+                  }
+                }}
+              >
+                <BankOutlined /> {node.name}
+              </span>
+            ) : node.orgtype === 2 ? (
+              <span
+                onDoubleClick={(e) => {
+                  if (!node?.checkable) {
+                    return;
+                  }
+                  clearTimeout(timer.current);
+                  if (!targetKeys?.includes(node.id)) {
+                    onDoubleClickChange(node.id);
+                  }
+                }}
+              >
+                <FolderOutlined /> {node.name}
+              </span>
+            ) : (
+              <span
+                onDoubleClick={(e) => {
+                  if (!node?.checkable) {
+                    return;
+                  }
+                  clearTimeout(timer.current);
+                  if (!targetKeys?.includes(node.id)) {
+                    onDoubleClickChange(node.id);
+                  }
+                }}
+              >
+                <UserOutlined /> {node.name}
+              </span>
+            );
+          }}
+          fieldsDefine={{
+            valueKey: 'newId',
+            textKey: 'name',
+          }}
+          showSearchBar={false}
+          // dataSource={treeData}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default TreeData;

package/SearchAssistanceSelect/src/SearchAssistanceComponent/treeData/style.less

@@ -0,0 +1,9 @@
+.search-tree-page{
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  &-content{
+    flex: 1;
+    overflow-y: auto;
+  }
+}

package/SearchAssistanceSelect/src/index.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import SearchAssistanceSelectSelect from './SearchAssistanceComponent';
+import {
+  getUsersByConditions,
+  getOrgsByConditions,
+} from '../../SearchAssistanceSelect/src/SearchAssistanceComponent/api/tabList';
+const SearchAssistanceSelect = (props) => {
+  const { value, onChange, option, $$form, modalVisible, type, mode, items, title, customData } =
+    props;
+  const getTypeCondtions = (type) => {
+    switch (type) {
+      case 'org':
+        return getOrgsByConditions;
+      case 'doc':
+        return async () => {};
+      default:
+        return getUsersByConditions;
+    }
+  };
+  const getTypeItems = (type) => {
+    switch (type) {
+      case 'org':
+        return [
+          {
+            label: '组织结构',
+            key: '4',
+            type: 'org',
+          },
+          {
+            label: '按列表',
+            key: '5',
+            type: 'org',
+          },
+        ];
+      case 'doc':
+        return [
+          {
+            label: '组织结构',
+            key: '4',
+            type: 'doc',
+          },
+        ];
+      case 'customNode':
+        return [
+          {
+            label: '组织结构',
+            key: '8',
+            type: 'customNode',
+          },
+        ];
+      default:
+        return items;
+    }
+  };
+
+  return (
+    <SearchAssistanceSelectSelect
+      mode={mode}
+      value={value}
+      type={type}
+      title={title}
+      fetchOptions={getTypeCondtions(type)}
+      params={type === 'org' ? { currentPage: 1, pageSize: 20 } : {}}
+      onChange={onChange}
+      option={option}
+      $$form={$$form}
+      modalVisible={modalVisible}
+      items={getTypeItems(type)}
+      customData={customData}
+    />
+  );
+};
+export default SearchAssistanceSelect;

package/SearchAssistanceSelect/src/style.less

@@ -0,0 +1,29 @@
+.search-select-page{
+  display: flex;
+  flex: 1 auto;
+  .ant-select{
+    width: 100%;
+
+  }
+  .ant-select-selector{
+    padding-right: 32px;
+  }
+  .ant-select:hover  .search-clear{
+    opacity: 1;
+  }
+  .search-clear{
+    opacity: 0;
+  }
+  .active-search-clear{
+    opacity:1 !important;
+  }
+  .ant-select .ant-select-arrow{
+    right: 5px;
+  }
+  &-search-button {
+    width: 32px;
+    border-radius: 0 2px 2px 0;
+    padding: 2.4px 0;
+    left: -1px;
+  }
+}

package/UploadFileMenu/download.ts

@@ -0,0 +1,15 @@
+import { Nullable } from '@/utils/types';
+
+export const download = (blob: Blob, fileName: string) => {
+  // ie10+
+  if (navigator.msSaveBlob) {
+    navigator.msSaveBlob(blob, decodeURI(fileName));
+  } else {
+    const downloadUrl: string = window.URL.createObjectURL(blob);
+    let a: Nullable<HTMLAnchorElement> = document.createElement('a');
+    a.href = downloadUrl;
+    a.download = decodeURI(fileName);
+    a.click();
+    a = null;
+  }
+};

package/UploadFileMenu/index.tsx

@@ -0,0 +1,3 @@
+import UploadFileMenu from "./src/index";
+
+export default UploadFileMenu;

package/UploadFileMenu/src/api/index.js

@@ -0,0 +1,44 @@
+import axios from '@/api/fetch';
+import SERVER from './server';
+
+export const getFileTreeData = (params) => {
+  return axios.post(
+    `${SERVER.QFC_FILE}/cms/category/fileTreeData
+`,
+    params
+  );
+};
+export const multiSecurityDown = (params) => {
+  return axios.post(
+    `${SERVER.QFC_CMS}/cms/articleFile/multiSecurityDown
+`,
+    params,
+    {
+      responseType: 'blob',
+    }
+  );
+};
+
+export const multiUpload = (params) => {
+  return axios.post(
+    `${SERVER.QFC_CMS}/cms/articleFile/uploadAndSave
+`,
+    params,
+    {
+      header: {
+        'content-type': 'multipart/form-data',
+      },
+    }
+  );
+};
+
+export const rename = (params) => {
+  return axios.post(
+    `${SERVER.QFC_FILE}/cms/articleFile/rename
+`,
+    params
+  );
+};
+export const filePreview = (params) => {
+  return axios.post(`${SERVER.QFC_FILE}/cms/articleFile/filePreview`, params);
+};

package/UploadFileMenu/src/api/server.js

@@ -0,0 +1,9 @@
+import env from '@/config/envMaps';
+const { prefix } = env;
+
+export default {
+  QFC_BASE: `${prefix}/dcp-base-user`,
+  QFC_PUBLIC: `${prefix}/dcp-base-public`,
+  QFC_FILE: `${prefix}/dcp-base-cms-file`,
+  QFC_CMS: `${prefix}/dcp-base-cms`,
+};