@qmlight/web-platform-components 1.0.0

package/AsyncExe/index.tsx

@@ -0,0 +1,9 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2024-03-07 13:43:18
+ * @Last Modified by:   焦质晔
+ * @Last Modified time: 2024-03-07 13:43:18
+ */
+import AsyncExe from './src/index';
+
+export default AsyncExe;

package/AsyncExe/src/index.tsx

@@ -0,0 +1,118 @@
+import React, { useRef, useImperativeHandle, forwardRef, useState, useEffect } from 'react';
+import dayjs from 'dayjs';
+import {
+  Message,
+  Notification,
+  createUidKey,
+  setGlobalContext,
+  removeGlobalContext,
+} from '@/utils';
+import { getUserInfo } from '@/utils/cookies';
+import { DcpModal, Progress } from 'dcp-design-react';
+import { useTool } from '@/hooks';
+import { t } from './lang';
+
+type AsyncExeProps = {
+  asyncId: string;
+  asyncName: string;
+  operationName: string;
+  fetch: any;
+  onFinish: (data: any) => void;
+  children?: React.ReactNode;
+};
+
+export interface AsyncExeRef {
+  handleAsync: () => void;
+}
+
+const AsyncExe = forwardRef<AsyncExeRef, AsyncExeProps>((props, ref) => {
+  const { asyncId, asyncName, operationName, fetch, onFinish } = props;
+  const asyncexeRef = useRef<AsyncExeRef>({ handleAsync: () => {} });
+  const [showProgressModal, setShowProgressModal] = useState<boolean>(false);
+  const [progress, setProgress] = useState<number>(0);
+  const { attachWsEvent, removeWsEvent } = useTool();
+  const wsCodeIdRef = useRef<string>(createUidKey());
+  const [progressStatus, setProgressStatus] = useState<
+    'normal' | 'success' | 'exception' | 'active' | undefined
+  >('normal');
+
+  // 实现异步处理逻辑
+  const handleAsync = async () => {
+    wsCodeIdRef.current = createUidKey();
+    setProgress(0);
+    setProgressStatus('normal');
+    try {
+      const currentTime = dayjs().format('HH:mm:ss');
+      const asyncNameAddTime = `${asyncName}_${currentTime}`;
+      setGlobalContext({
+        wsCodeId: wsCodeIdRef.current,
+        asyncId,
+        asyncName: asyncNameAddTime,
+        loginName: getUserInfo().loginName,
+      });
+      const res = await fetch.api(fetch.params);
+      if (res.code === 200) {
+        Message(t('asyncExe.asyncMessage'), 'success', 2);
+        setShowProgressModal(true);
+        removeGlobalContext(['wsCodeId', 'asyncId', 'asyncName', 'loginName']);
+      }
+    } catch (error) {
+      // ...
+    }
+  };
+
+  asyncexeRef.current.handleAsync = handleAsync;
+
+  const closeModal = () => {
+    setShowProgressModal(false);
+  };
+
+  const handleWebSocketData = (data: any) => {
+    const jdtWithoutPercent = data.jdt.replace('%', '');
+    const wsCodeId = wsCodeIdRef.current;
+    if (data.jdid === wsCodeId && data.jdt) {
+      setProgress(jdtWithoutPercent);
+      if (data.jdt === '100%') {
+        onFinish(data.res);
+        setShowProgressModal(false);
+      }
+      if (jdtWithoutPercent < 0) {
+        setProgress(100);
+        setProgressStatus('exception');
+        onFinish(data.res);
+        Notification(data.res.msg, 'error', 0);
+      }
+    }
+  };
+
+  useEffect(() => {
+    attachWsEvent(asyncId, handleWebSocketData);
+    return () => {
+      removeWsEvent(asyncId, handleWebSocketData);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useImperativeHandle(ref, () => asyncexeRef.current);
+
+  return (
+    <>
+      {props.children}
+      <DcpModal
+        visible={showProgressModal}
+        title={operationName}
+        width="30%"
+        height="20%"
+        showFullScreen={false}
+        destroyOnClose
+        onClose={() => closeModal()}
+      >
+        <Progress percent={progress} size="small" status={progressStatus} />
+      </DcpModal>
+    </>
+  );
+});
+
+AsyncExe.displayName = 'AsyncExe';
+
+export default AsyncExe;

package/AsyncExe/src/lang/en.tsx

@@ -0,0 +1,11 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2020-05-02 09:16:35
+ * @Last Modified by: 张馨元
+ * @Last Modified time: 2024-04-24 10:48:15
+ */
+export default {
+  asyncExe: {
+    asyncMessage: 'The operation succeeded. Please wait...',
+  },
+};

package/AsyncExe/src/lang/index.tsx

@@ -0,0 +1,21 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2020-05-14 19:27:24
+ * @Last Modified by: 张馨元
+ * @Last Modified time: 2024-04-24 11:06:13
+ */
+import { t, mergeTranslations } from '@/locale';
+
+import enLocale from './en';
+import zhLocale from './zh-cn';
+
+const messages = {
+  en: enLocale,
+  [`zh-cn`]: zhLocale,
+};
+
+for (const key in messages) {
+  mergeTranslations(key, messages[key]);
+}
+
+export { t };

package/AsyncExe/src/lang/zh-cn.tsx

@@ -0,0 +1,11 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2020-05-02 09:16:35
+ * @Last Modified by: 张馨元
+ * @Last Modified time: 2024-04-25 14:39:46
+ */
+export default {
+  asyncExe: {
+    asyncMessage: '操作成功，请稍候',
+  },
+};

package/Demo/index.module.less

@@ -0,0 +1,11 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2024-03-07 12:15:55
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2024-03-07 12:16:22
+ */
+.box {
+  width: 200px;
+  height: 100px;
+  background-color: @primaryColor;
+}

package/Demo/index.tsx

@@ -0,0 +1,32 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2024-03-07 10:58:14
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2024-03-07 12:18:21
+ */
+import React from "react";
+import { useLocale } from "@/hooks";
+import { createUidKey } from "@/utils";
+
+// import { Test } from '@/components';
+
+import css from "./index.module.less";
+
+type IProps = {
+  name: string;
+};
+
+const Demo: React.FC<IProps> = (props) => {
+  const { t } = useLocale();
+
+  return (
+    <>
+      <div className={css.box}>
+        demo 组件示例 {createUidKey()} - {props.name} - {t("app.global.title")}
+      </div>
+      {/* <Test /> */}
+    </>
+  );
+};
+
+export default Demo;

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 QM-Design
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,9 @@
+## 说明
+
+- 匹配平台框架使用的业务组件库。
+
+### 使用
+
+1. 必须使用在平台前端框架中
+2. 使用 `yarn` 安装依赖包
+3. 组件使用方式，查看平台组件库文档

package/SearchAssistanceSelect/index.tsx

@@ -0,0 +1,3 @@
+import SearchAssistanceSelect from './src';
+
+export default SearchAssistanceSelect;

package/SearchAssistanceSelect/src/SearchAssistanceComponent/AdvancedSearch/api/index.js

@@ -0,0 +1,6 @@
+import axios from '@/api/fetch';
+import SERVER from './server';
+
+export const getOrgTypeList = (params) => {
+  return axios.post(`${SERVER.QFC_BASE}/orgtype/page`, params);
+};

package/SearchAssistanceSelect/src/SearchAssistanceComponent/AdvancedSearch/api/server.js

@@ -0,0 +1,14 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2021-07-20 16:37:14
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2022-12-10 22:37:39
+ */
+import env from '@/config/envMaps';
+const { prefix } = env;
+
+export default {
+  QFC_BASE: `${prefix}/dcp-base-user`,
+  QFC_PUBLIC: `${prefix}/dcp-base-public`,
+  QFC_AUTH: `${prefix}/dcp-base-auth`,
+};

package/SearchAssistanceSelect/src/SearchAssistanceComponent/AdvancedSearch/index.less

@@ -0,0 +1,23 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2021-07-20 15:07:47
+ * @Last Modified by: 谭冬洋
+ * @Last Modified time: 2024-08-Th 09:28:47
+ */
+.tdy_row {
+  // .ant-popover {
+  //   width: 100%;
+  //   left: 0 !important;
+  //   z-index: 10;
+  //   .ant-popover-inner-content:has(> .tdy_popover) {
+  //     width: 100%;
+  //   }
+  // }
+  .ant-btn:has(> .tdy_popover_btn) {
+    background: transparent;
+    color: @primaryColor;
+    border-color: #d9d9d9;
+    text-shadow: none;
+    box-shadow: none;
+  }
+}

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

@@ -0,0 +1,115 @@
+/*
+ * @Author: 谭冬洋
+ * @Date: 2024-08-13 16:25:44
+ * @LastEditors: 谭冬洋
+ * @LastEditTime: 2024-08-26 13:40:02
+ * @FilePath: \faw-component\src\modules\AdvancedSearch\index.tsx
+ */
+import React, { useRef, useState, memo, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Input, Row, Col } from 'dcp-design-react';
+import SearchBoard from './searchboard';
+import { SearchOutlined } from '@/icons';
+import FixedPopover from './popover';
+import './index.less';
+const { Search } = Input;
+
+const AdvancedSearch: React.FC<any> = ({
+  type = 'default', // 高级搜索的类型
+  span = 24, // 宽度
+  offset = 0, // 偏移量
+  fetchHandle = () => {}, // 更改参数
+}) => {
+  const childRef = useRef<any>();
+
+  const [value, setValue] = useState<string | number | readonly string[] | undefined>(undefined); // 搜索框内容
+
+  const [open, setOpen] = useState(false); // Popover显示隐藏状态
+
+  // 显示隐藏Popover
+  const togglePopover = () => setOpen(!open);
+
+  // 关闭Popover
+  const onClose = () => setOpen(false);
+
+  // 筛选 发接口 返回数据
+  const onSearch = () => {
+    // if (!data && !value) return false;
+    if (childRef.current) {
+      fetchHandle({ type, params: childRef.current.getFormValue()! });
+      onClose(); // 关闭Popover
+    }
+  };
+
+  // 修改筛选框值
+  const changeValue = (value) => setValue(value);
+
+  return (
+    <>
+      <Row className={'tdy_row'}>
+        <Col span={span} offset={offset}>
+          <Search
+            // suffix={<SearchOutlined onClick={onSearch} />}
+            // enterButton={
+            //   // <Popover
+            //   //   placement="bottom"
+            //   //   className="tdy_popover_btn"
+            //   //   content={
+            //   //     <SearchBoard
+            //   //       size={size}
+            //   //       type={type}
+            //   //       value={value}
+            //   //       onSearch={onSearch}
+            //   //       changeValue={changeValue}
+            //   //       onClose={onClose}
+            //   //     />
+            //   //   }
+            //   //   open={open}
+            //   //   arrowPointAtCenter
+            //   //   getPopupContainer={() => {
+            //   //     return document.getElementsByClassName('tdy_popover_wrap')[0];
+            //   //   }}
+
+            //   //   // getPopupContainer={() => ref?.current ?? document.body}
+            //   // >
+            //   <span className="tdy_popover_btn" onClick={togglePopover}>
+            //     高级检索
+            //   </span>
+            //   // </Popover>
+            // }
+            onSearch={onSearch}
+            allowClear
+            value={value}
+            onChange={(e) => {
+              setValue(e.target.value);
+            }}
+          />
+        </Col>
+      </Row>
+      <FixedPopover onClose={onClose} open={open}>
+        <SearchBoard
+          type={type}
+          value={value}
+          onSearch={onSearch}
+          changeValue={changeValue}
+          onClose={onClose}
+          ref={childRef}
+        />
+      </FixedPopover>
+    </>
+  );
+};
+
+AdvancedSearch.propTypes = {
+  type: PropTypes.string,
+  span: PropTypes.number,
+  offset: PropTypes.number,
+  fetchHandle: PropTypes.func.isRequired,
+};
+
+export default memo(AdvancedSearch, (oldProps, newProps) => {
+  if (oldProps.type !== newProps.type) {
+    return false;
+  }
+  return true;
+});

package/SearchAssistanceSelect/src/SearchAssistanceComponent/AdvancedSearch/popover.tsx

@@ -0,0 +1,42 @@
+/*
+ * @Author: 谭冬洋
+ * @Date: 2024-08-26 10:07:12
+ * @LastEditors: 谭冬洋
+ * @LastEditTime: 2024-08-26 11:17:22
+ * @FilePath: \faw-component\src\modules\AdvancedSearch\popover.tsx
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const FixedPopover = ({ children, onClose = () => {}, open = false }) => {
+  return (
+    <div
+      className="hight-search"
+      style={{
+        position: 'absolute',
+        width: '100%',
+        height: open ? 'auto' : 0,
+        boxSizing: 'border-box',
+        overflow: 'hidden',
+        top: 47,
+        left: 0,
+        padding: open ? '30px 10px' : 0,
+        backgroundColor: 'white',
+        border: '1px solid rgb(238, 238, 238)',
+        borderWidth: open ? 1 : 0,
+        zIndex: 10,
+        transition: '.1s',
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+FixedPopover.propTypes = {
+  children: PropTypes.node,
+  onClose: PropTypes.func,
+  open: PropTypes.bool,
+};
+
+export default FixedPopover;