@qmlight/web-platform-components 1.0.0

package/UploadFileMenu/src/index.tsx

@@ -0,0 +1,256 @@
+import React, { useState, useRef, useEffect } from "react";
+import {
+  QmUploadFile,
+  QmButton,
+  QmModal,
+  QmSearchTree,
+} from "dcp-design-react";
+import {
+  getFileTreeData,
+  multiUpload,
+  rename,
+  multiSecurityDown,
+  filePreview,
+} from "./api/index";
+import {
+  AppstoreOutlined,
+  FolderOutlined,
+  FileTextOutlined,
+  ShareAltOutlined,
+} from "@/icons";
+import { Message } from "@/utils";
+import { download } from "../download";
+
+const UploadFileMenu = ({
+  menuFlag = true,
+  menuValue,
+  value,
+  onChange,
+  option,
+  $$form,
+}) => {
+  const [visible, setVisible] = useState(false);
+  const [categoryCode, setCategoryCode] = useState<any>();
+  const [fetchParams] = useState<any>({});
+  const [fileList, setFileList] = useState<any[]>([]);
+  const [viewVisible, setViewVisible] = useState(false);
+  const [viewInfo, setViewInfo] = useState({
+    title: "",
+    url: "",
+  });
+  const menuHandle = () => {
+    setVisible(true);
+  };
+  useEffect(() => {
+    if (menuValue) {
+      setCategoryCode(menuValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [menuValue]);
+  useEffect(() => {
+    if (value) {
+      setFileList(value);
+    }
+  }, [value]);
+  const onDataChange = (data) => {
+    onChange && onChange(data);
+    option?.onChagne && option?.onChange(data);
+  };
+  // useEffect(() => {
+
+  //   // eslint-disable-next-line react-hooks/exhaustive-deps
+  // }, [fileList]);
+  const renameChange = async (file) => {
+    if (file.status !== "done" || !file?.status) {
+      return;
+    }
+    rename({ name: file.name, id: file.uid })
+      .then((res) => {
+        if (res.code === 200) {
+          Message(`${file.name} 修改成功`, "success");
+        } else {
+          Message(`${file.name} 修改失败`, "error");
+          setFileList(fileList);
+        }
+      })
+      .catch(() => {
+        setFileList(fileList);
+      });
+  };
+  const filePreviewChange = async (info) => {
+    const res = await filePreview({ id: info.uid });
+    if (res.code === 200) {
+      setViewInfo({ title: info.name, url: res.data });
+      setViewVisible(true);
+    }
+  };
+  return (
+    <>
+      {menuFlag && (
+        <QmButton
+          onClick={() => menuHandle()}
+          disabled={
+            option?.readOnly ||
+            option?.disabled ||
+            $$form?.props?.formType === "onlyShow"
+          }
+        >
+          <FolderOutlined />
+        </QmButton>
+      )}
+
+      <QmUploadFile
+        fileSize={option?.fileSize || 100}
+        fileTypes={option?.fileTypes || []}
+        maxCount={option?.maxCount || 5}
+        action={`/dcp-base-cms/cms/articleFile/uploadAndSave`}
+        beforeUpload={() => {
+          if (!categoryCode) {
+            return false;
+          }
+          return true;
+        }}
+        customRequest={(info: any) => {
+          const formData = new FormData();
+          formData.append("file", info.file);
+          formData.append("categoryCode", categoryCode);
+          multiUpload(formData)
+            .then((res) => {
+              if (res.code === 200) {
+                Message(`${info.file.name} 文件上传成功`, "success");
+                info?.onSuccess && info?.onSuccess(res.data);
+              } else {
+                Message(`${info.file.name} 文件上传失败`, "error");
+                info?.onError && info.onError();
+              }
+            })
+            .catch(() => {
+              Message(`${info.file.name} 文件上传失败`, "error");
+              info?.onError && info.onError();
+            });
+        }}
+        disabled={
+          (!categoryCode && fileList.length === 0) ||
+          option?.readOnly ||
+          option?.disabled ||
+          $$form?.props?.formType === "onlyShow"
+        }
+        fileList={fileList}
+        onPreview={(info) => {
+          if (info.status === "done") {
+            filePreviewChange(info);
+          }
+        }}
+        batchDownload={async (fileList) => {
+          console.log(fileList);
+          const data = fileList
+            .filter((item) => item.status === "done")
+            .map((item: any) => {
+              return {
+                name: item.name,
+                path: item.path,
+              };
+            });
+          multiSecurityDown({ articleFileList: data })
+            // .then((response: any) => new Blob([response], { type: 'application/zip' }))
+            .then((res: any) => {
+              if (res.data) {
+                download(res.data, "files.zip");
+              }
+            });
+          // console.log(res);
+        }}
+        onChange={(value: any) => {
+          const { fileList: newFileList } = value;
+          if (!categoryCode) {
+            Message("文档目录不能为空", "error");
+            return;
+          }
+          const list = newFileList.map((item) => {
+            if (item.status === "done") {
+              return {
+                ...item,
+                url: item.url || item?.response?.securityUrl,
+                uid: item?.response?.id || item.uid,
+                path: item?.response?.dummyName || item?.path,
+              };
+            }
+            return item;
+          });
+          setFileList(list);
+          onDataChange(list);
+        }}
+        onEditChange={renameChange}
+        draggable
+        editable
+      />
+
+      <QmModal
+        width={400}
+        height={300}
+        title={"选择上传目录"}
+        visible={visible}
+        onClose={() => setVisible(false)}
+      >
+        <QmSearchTree
+          fetch={{
+            api: getFileTreeData,
+            params: fetchParams,
+            dataKey: "records",
+          }}
+          showSearchBar={false}
+          filterable={false}
+          showCollapse={false}
+          defaultExpandAll={false}
+          fieldsDefine={{
+            valueKey: "categoryCode",
+            textKey: "name",
+          }}
+          asyncLoad={false}
+          value={[categoryCode]}
+          onSelectChange={(node: any) => {
+            if (node?.moduleType === "2") {
+              setVisible(false);
+              setCategoryCode(node.categoryCode);
+            }
+          }}
+          titleRender={(node) => {
+            return node.moduleType === "0" ? (
+              <span>
+                <FileTextOutlined /> {node.name}
+              </span>
+            ) : node.moduleType === "1" ? (
+              <span>
+                <ShareAltOutlined /> {node.name}
+              </span>
+            ) : node.moduleType === "2" ? (
+              <span>
+                <FolderOutlined /> {node.name}
+              </span>
+            ) : (
+              <span>
+                <AppstoreOutlined /> {node.name}
+              </span>
+            );
+          }}
+        />
+      </QmModal>
+      <QmModal
+        title={viewInfo.title}
+        bodyStyle={{ height: "calc(80vh - 48px)", overflow: "auto" }}
+        visible={viewVisible}
+        onClose={() => {
+          setViewVisible(false);
+        }}
+      >
+        <iframe
+          src={viewInfo.url}
+          name={"aaa"}
+          style={{ width: "100%", height: "98%" }}
+        ></iframe>
+      </QmModal>
+    </>
+  );
+};
+UploadFileMenu.displayName = "UploadFileMenu";
+export default UploadFileMenu;

package/index.js

@@ -0,0 +1,10 @@
+/*
+ * @Author: 焦质晔
+ * @Date: 2024-03-07 12:27:01
+ * @Last Modified by: 焦质晔
+ * @Last Modified time: 2024-04-26 10:47:13
+ */
+export { default as Demo } from "./Demo";
+export { default as AsyncExe } from "./AsyncExe";
+export { default as UploadFileMenu } from "./UploadFileMenu";
+export { default as SearchAssistanceSelect } from "./SearchAssistanceSelect";

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@qmlight/web-platform-components",
+  "version": "1.0.0",
+  "description": "A platform components for React",
+  "keywords": [
+    "React",
+    "components",
+    "typescript"
+  ],
+  "author": "jiaozhiye",
+  "license": "MIT",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "main": "index.js",
+  "dependencies": {},
+  "devDependencies": {}
+}