@jzt-packages/components 1.0.0

package/src/SvgIcon/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg :style="iconStyle" aria-hidden="true">
+    <use :xlink:href="symbolId" />
+  </svg>
+</template>
+
+<script setup lang="ts" name="SvgIcon">
+import { computed, CSSProperties } from 'vue'
+
+interface SvgProps {
+  name: string // 图标的名称 ==> 必传
+  prefix?: string // 图标的前缀 ==> 非必传（默认为"icon"）
+  iconStyle?: CSSProperties // 图标的样式 ==> 非必传
+}
+
+const props = withDefaults(defineProps<SvgProps>(), {
+  prefix: 'icon',
+  iconStyle: () => ({ width: '20px', height: '20px' })
+})
+
+const symbolId = computed(() => `#${props.prefix}-${props.name}`)
+</script>

package/src/hooks/useAuthButtons.ts

@@ -0,0 +1,58 @@
+import { computed, ref } from 'vue'
+// import { useAuthStore } from '@/stores/modules/auth'
+import { localGet, isEmpty } from '@jzt-spd/utils'
+const { authButtonList } = localGet('SPD-auth') || {}
+const authList = ref<any[]>([])
+authList.value = authButtonList
+
+/**
+ * 从当前页面 URL 的 hash 中提取 menuId
+ * */
+const getMenuIdFromUrl = (): string | null => {
+  try {
+    const hash = window.location.hash || ''
+    const searchPart = hash.includes('?') ? hash.split('?')[1] : ''
+    const params = new URLSearchParams(searchPart)
+    return params.get('menuId')
+  } catch {
+    return null
+  }
+}
+
+/**
+ * @description 页面按钮权限
+ * */
+export const useAuthButtons = () => {
+  let authButtons = authList.value || []
+  const authData = localGet('SPD-auth') || {}
+  const authButtonList = authData.authButtonList
+  const activeAllMenu = authData.activeAllMenu
+
+  // 优先从 activeAllMenu 中按 URL 上的 menuId 查找当前页面的权限
+  const currentMenuId = getMenuIdFromUrl()
+  console.log('优先从 activeAllMenu 中按 URL 上的 menuId 查找当前页面的权限',currentMenuId,activeAllMenu);
+  
+  if (currentMenuId && activeAllMenu && !isEmpty(activeAllMenu[currentMenuId]?.authBtns)) {
+    authButtons = activeAllMenu[currentMenuId].authBtns
+    console.log('存在！！！');
+  } else if (!isEmpty(authButtonList)) {
+    // 兼容：activeAllMenu 中没有数据时，走原来的逻辑
+    authButtons = authButtonList
+  }
+  const BUTTONS = computed(() => {
+    let currentPageAuthButton: { [key: string]: boolean } = {}
+    authButtons?.forEach(item => (currentPageAuthButton[item.operate] = true))
+    return currentPageAuthButton
+  })
+
+  return {
+    BUTTONS
+  }
+}
+
+// 判断按钮是否有权限
+export const hasPermission = (hasPerm: string | undefined) => {
+  const { BUTTONS } = useAuthButtons()
+  if (!hasPerm) return true
+  return !!BUTTONS.value[hasPerm]
+}

package/src/hooks/useFormByUserType.ts

@@ -0,0 +1,90 @@
+import { computed, unref, ref } from 'vue'
+// import { useUserStore } from '@/stores/modules/user'
+// const userStore = useUserStore()
+// 用户类型 0平台  1 供应商  2医院
+const userType = ref(0); //computed(() => userStore.UserType)
+/**
+ * @description 用户状态判断是否选中第一条
+ * */
+export const useFormSetByUserType = (isSetFirstValue, prop) => {
+  // const isSetFirst = isSetFirstValue; // 设置第一个 // 为什么 且 非供应商呢 //&& prop !== 'supplierId'
+  // const isSetSupplierId = userType.value === 1 && prop === "supplierId"; // 供应商 且 供应商
+  // const isAgencyIdd = prop === "agencyId"; // 医疗机构（永远选择第一个）
+  // return isSetFirst || isSetSupplierId || isAgencyIdd;
+  // console.log(prop,isSetFirstValue);
+  
+  return  isSetFirstValue
+};
+
+/*  获取枚举字典集合
+ *  queryItem queryItem配置项
+ *  enumMap  枚举字典集合
+ *  searchParam 查询表单结合
+ *  callBack 回调
+ */
+export const useSetEnumMap = async params => {
+  const { queryItem, enumMap, callBack, queryFrom, parentItem } = params
+  const { prop, isAwait, enum: enumValue, isSetFirstValue, fieldNames,isOnlySetValue } = queryItem
+  if (!enumValue) return
+  // 是否接口等待
+
+  if (isAwait && parentItem?.prop) {
+    setTimeout(() => {
+      useSetCascaderEnumMap({
+        prevProp: parentItem.prop,
+        queryItem: queryItem,
+        enumMap: enumMap,
+        searchParam: queryFrom
+      })
+    },500)
+  }
+
+  if (isAwait) return
+
+  // 如果当前 enumMap 存在相同的值 return
+  if (enumMap.value.has(prop!) && (typeof enumValue === 'function' || enumMap.value.get(prop!) === enumValue)) return
+  // 当前 enum 为静态数据，则直接存储到 enumMap
+  let list = []
+  if (typeof enumValue !== 'function') {
+    enumMap.value.set(prop!, unref(enumValue!))
+    list =unref(enumValue!) || []
+  } else {
+    // 为了防止接口执行慢，而存储慢，导致重复请求，所以预先存储为[]，接口返回后再二次存储
+    enumMap.value.set(prop!, [])
+    // 当前 enum 为后台数据需要请求数据，则调用该请求接口，并存储到 enumMap
+    const res = await enumValue()
+    list = res?.result || []
+    enumMap.value.set(prop!, list)
+  }
+  if (useFormSetByUserType(isSetFirstValue, prop) || (isOnlySetValue && list?.length == 1)) {
+    callBack && callBack(prop, list[0], fieldNames, queryItem)
+  }
+};
+/*  cascade change 获取接口数据
+ *  prevProp 联级上一层的prop
+ *  queryItem queryItem配置项
+ *  enumMap  枚举字典集合
+ *  searchParam 查询表单结合
+ *  callBack 回调
+ */
+export const useSetCascaderEnumMap = async (params) => {
+  const { prevProp, queryItem, enumMap, searchParam, callBack } = params;
+  const { prop, enum: enumValue, isSetFirstValue, fieldNames, isOnlySetValue } = queryItem;
+  if (!enumValue) return;
+  let list = []
+  // 如果当前 enumMap 存在相同的值  也不return  根据change实时获取
+  // 为了防止接口执行慢，而存储慢，导致重复请求，所以预先存储为[]，接口返回后再二次存储
+  if (typeof enumValue !== "function") {
+    enumMap.value.set(prop!, unref(enumValue!));
+    list = unref(enumValue!) || []
+  } else {
+    enumMap.value.set(prop!, [])
+    // 当前 enum 为后台数据需要请求数据，则调用该请求接口，并存储到 enumMap
+    const res = await enumValue(searchParam[prevProp], searchParam);
+    list = res?.result || []
+    enumMap.value.set(prop!, list)
+  }  
+  if (useFormSetByUserType(isSetFirstValue, prop) || (isOnlySetValue && list?.length == 1)) {
+    callBack && callBack(prop, list[0], fieldNames, queryItem)
+  }
+};

package/src/hooks/useTableEvents.ts

@@ -0,0 +1,30 @@
+import { ElMessageBox } from 'element-plus'
+const useButtonClickFn = (item: any, row: any) => {
+  let secondConfirm = ''
+  if (item.secondConfirm) {
+    secondConfirm = item.secondConfirm
+  } else if (item.id === 'delete') {
+    secondConfirm = `确定${item.text || '删除'}该条数据吗?`
+  }
+  if (secondConfirm) {
+    ElMessageBox.confirm(secondConfirm, '警告', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+      .then(() => {
+        item.fun(row)
+      })
+      .catch(error => {
+        console.log(error)
+      })
+  } else {
+    item.fun(row)
+  }
+}
+
+export const useTableEvents = () => {
+  return {
+    useButtonClickFn
+  }
+}

package/src/hooks/useUploadFileHook.ts

@@ -0,0 +1,262 @@
+import type { UploadUserFile, UploadRequestOptions } from "element-plus";
+import { debounce } from "lodash-es";
+import { pdfCover } from "@jzt-spd/styles/assets";
+import { isFullUrl, isPdfSuffix, localGetServer, getFileServiceDomains } from "@jzt-spd/utils";
+import { ElNotification } from "element-plus";
+
+interface UploadUserFileTypes extends UploadUserFile {
+  halfUrl: string;
+  isPdf: boolean;
+}
+// const serverObj = localGetServer();
+// const baseDomain = serverObj.fileShowUrl;
+// const baseDomain = getFileServiceDomains()
+// 传入地址，处理成可显示的图片地址
+const getFileShowList = (fileList: UploadUserFileTypes[]) => {
+  const baseDomain = getFileServiceDomains() as string
+  const _fileList = [] as UploadUserFileTypes[];
+  fileList.forEach((item) => {
+    if (typeof item === "string") {
+      const isPdf = isPdfSuffix(item);
+      const url = isFullUrl(item) ? item : baseDomain + item;
+      // 如果是pdf，使用pdf封面
+      _fileList.push({
+        isPdf: isPdf,
+        url: isPdf ? pdfCover : url,
+        halfUrl: item,
+        name: item,
+      });
+    } else {
+      const isPdf = isPdfSuffix(item.url);
+      const url = isFullUrl(item.url as string) ? item.url : baseDomain + item;
+      const items = getFileLists({
+        ...item,
+        isPdf: isPdf,
+        url: isPdf ? pdfCover : url,
+      });
+      _fileList.push(items);
+    }
+  });
+  return _fileList;
+};
+// 获取图片地址
+const getFileLists = (item) => {
+  return {
+    ...item,
+    url: getFullUrl(item.url),
+    halfUrl: item.url,
+  };
+};
+
+// 是否是全地址及
+const getFullUrl = (url) => {
+  const baseDomain = getFileServiceDomains()
+  return isFullUrl(url) ? url : baseDomain + url;
+};
+
+// 获取原始的半地址
+const getHalfFileUrlList = (fileList: UploadUserFileTypes[]) => {
+  let halfUrls = fileList.map((item) => item.halfUrl);
+  return halfUrls;
+};
+
+/**
+ * @description 文件上传之前判断
+ * @param rawFile 选择的文件
+ * @param fileSize 选择的文件大小
+ * @param fileType 选择的类型后缀
+ * */
+interface useUploadBeforeUpload {
+  rawFile: File;
+  fileSize: number;
+  fileType: File.FilePostfixType[];
+}
+const useBeforeUpload = (params: useUploadBeforeUpload) => {
+  const { rawFile, fileSize, fileType } = params;
+  const isImgSize = rawFile.size / 1024 / 1024 < fileSize;
+  //比对后缀
+  const postfix = rawFile.name.split(".");
+  const filePostfix = ("." +
+    postfix[postfix.length - 1]) as File.ImagePostfixType;
+  const newfilePostfix = filePostfix.toLowerCase() as File.FilePostfixType;
+  const isFileType = fileType.includes(newfilePostfix);
+  if (!isFileType) {
+    ElNotification({
+      title: "温馨提示",
+      message: `请上传${fileType.join(",")}格式的文件！`,
+      type: "warning",
+    });
+  }
+  if (!isImgSize)
+    setTimeout(() => {
+      ElNotification({
+        title: "温馨提示",
+        message: `上传的文件大小不能超过 ${fileSize}M！`,
+        type: "warning",
+      });
+    }, 0);
+  return isFileType && isImgSize;
+};
+
+/**
+ * @description 图片上传成功
+ * @param response 上传响应结果
+ * @param uploadFile 上传的文件
+ * */
+interface UploadSuccessParams {
+  response: { fileUrl: string } | undefined;
+  uploadFile: UploadUserFileTypes;
+  _fileList: UploadUserFileTypes[];
+  callback?: any;
+  formItemContext;
+  formContext;
+}
+
+const useUploadSuccess = (params: UploadSuccessParams) => {
+  const { response, uploadFile } = params;
+  if (!response) return;
+  uploadFile.halfUrl = response.fileUrl;
+  uploadFile.url = getFullUrl(response.fileUrl);
+  const isPdf = isPdfSuffix(response.fileUrl)
+  uploadFile.isPdf = isPdf
+  uploadFile.url = isPdf ? pdfCover : getFullUrl(response.fileUrl)
+  debounceToast(params);
+};
+
+const debounceToast = debounce((params: UploadSuccessParams) => {
+  const { formItemContext, formContext, callback, _fileList } = params;
+  const halfUrls = getHalfFileUrlList(_fileList);
+  callback && callback(halfUrls);
+  formItemContext?.prop &&
+    formContext?.validateField([formItemContext.prop as string]);
+  ElNotification({
+    title: "温馨提示",
+    message: "文件上传成功！",
+    type: "success",
+  });
+}, 1000);
+
+/**
+ * @description 删除图片
+ * @param _fileList 所以的文件列表
+ * @param file 删除的文件
+ * */
+interface RemoveParams {
+  _fileList: UploadUserFileTypes[];
+  file: UploadUserFileTypes;
+}
+const useRemoveFilterList = (params: RemoveParams) => {
+  const { _fileList, file } = params;
+  const list = _fileList.filter((item) => item.halfUrl !== file.halfUrl);
+  // 获取原始的半地址
+  const halfUrls = getHalfFileUrlList(list);
+  return halfUrls;
+};
+
+interface UploadParams {
+  isMergeUpload?: boolean // 是都合并请求，处理同时选择多张图片同时上传调多次接口的问题
+  fileName: string;
+  options: UploadRequestOptions;
+  api: any;
+}
+function createSyncThrottle(fn, delay = 1000) {
+  let isRunning = false // 是否正在执行任务
+  let timer = null // 节流定时器
+  let argsQueue = [] // 收集每一次调用的参数
+
+  // 串行执行任务
+  async function runTask() {
+    if (isRunning || argsQueue.length === 0) return
+
+    isRunning = true
+    // 拷贝当前收集的参数，避免执行中被新数据干扰
+    const currentArgsList = [...argsQueue]
+    // 清空，准备接收下一轮参数
+    argsQueue = []
+
+    try {
+      // 把收集到的所有参数数组传给 funcA
+      await fn(currentArgsList)
+    } catch (err) {
+      console.error('funcA 执行异常：', err)
+    } finally {
+      isRunning = false
+      // 如果这期间又有新参数进来，自动触发下一轮
+      if (argsQueue.length > 0) {
+        timer = setTimeout(runTask, delay)
+      }
+    }
+  }
+
+  return function (...args) {
+    // 收集当前这一次调用的所有参数
+    argsQueue.push(args)
+
+    // 重置节流计时
+    if (timer) clearTimeout(timer)
+    timer = setTimeout(runTask, delay)
+  }
+}
+async function funcA(argsList) {
+  console.log('开始执行，本次收集到的所有调用参数：', argsList)
+  if (argsList.length === 0) return
+  const uploadApi = argsList[0][2]
+  const fileName = argsList[0][0]
+  try {
+    let formData = new FormData()
+    argsList.forEach((item, index) => {
+      const { file } = item[1]
+      formData.append(fileName, file)
+    })
+    if (!uploadApi) return
+    const { result } = await uploadApi(formData)
+    const url = result
+    if (url) {
+      const urls = url.split(',')
+      urls.forEach((item, index) => {
+        const options = argsList[index][1]
+        options.onSuccess({ fileUrl: item })
+      })
+    }
+  } catch (error) {
+    const options = argsList[0][1]
+    console.log(error)
+    options.onError(error as any)
+  }
+}
+const safeFuncA = createSyncThrottle(funcA, 1000)
+/**
+ * @description 图片上传
+ * @param params upload所有配置项
+ * */
+const useHttpUploadHook = async (params: UploadParams) => {
+  const { fileName, options, api } = params;
+  if (params.isMergeUpload) {
+    safeFuncA(fileName, options, api)
+    return
+  }
+  let formData = new FormData();
+  formData.append(fileName, options.file);
+  try {
+    const uploadApi = api;
+    if (!uploadApi) return;
+    const { result } = await uploadApi(formData);
+    const url = result;
+    options.onSuccess({ fileUrl: url });
+  } catch (error) {
+    console.log(error);
+    options.onError(error as any);
+  }
+};
+
+export const useUploadFileHook = () => {
+  return {
+    useBeforeUpload,
+    getHalfFileUrlList,
+    useRemoveFilterList,
+    useUploadSuccess,
+    useHttpUploadHook,
+    getFileShowList,
+    getFullUrl,
+  };
+};

package/src/index.ts

@@ -0,0 +1,91 @@
+import JztBackTop from './JztBackTop/index.vue'
+import JztButtonList from './JztButtonList/index.vue'
+import JztChart from './JztChart/index.vue'
+import JztCharts from './JztCharts/index.vue'
+import JztClassTabs from './JztClassTabs/index.vue'
+import JztDialog from './JztDialog/index.vue'
+import JztEllipsisTooltip from './JztEllipsisTooltip/index.vue'
+import JztEmpty from './JztEmpty/index.vue'
+import JztErrorPage from './JztErrorPage/index.vue'
+import JztFilePreview from './JztFilePreview/index.vue'
+import JztFormGrid from './JztFormGrid/index.vue'
+import JztGridItem from './JztGrid/components/GridItem.vue'
+import JztGrid from './JztGrid/index.vue'
+import JztImportExcel from './JztImportExcel/index.vue'
+import JztLabelTitle from './JztLabelTitle/index.vue'
+import JztRightMode from './JztLeftRightMode/components/RightLayout.vue'
+import JztLeftRightMode from './JztLeftRightMode/index.vue'
+import JztLogin from './JztLogin/index.vue'
+import JztNumericalRange from './JztNumericalRange/index.vue'
+import JztPageCard from './JztPageCard/index.vue'
+import JztProductInfo from './JztProductInfo/index.vue'
+import JztQueryDetailTable from './JztQueryDetailTable/index.vue'
+import JztQueryTable from './JztQueryTable/index.vue'
+import JztRegionSelect from './JztRegionSelect/index.vue'
+import JztSearchFormItem from './JztSearchForm/components/SearchFormItem.vue'
+import JztSearchForm from './JztSearchForm/index.vue'
+import JztSelectFilter from './JztSelectFilter/index.vue'
+import JztSelectTable from './JztSelectTable/index.vue'
+import JztTable from './JztTable/index.vue'
+import JztTime from './JztTime/index.vue'
+import JztTreeFilter from './JztTreeFilter/index.vue'
+import JztUploadMultipleFiles from './JztUploadFile/multiple.vue'
+import JztUploadSingleFile from './JztUploadFile/single.vue'
+import JztUploadImg from './JztUploadImg/Img.vue'
+import JztUploadMultipleImgs from './JztUploadImg/Imgs.vue'
+import JztSvgIcon from './SvgIcon/index.vue'
+
+import { showFullScreenLoading, tryHideFullScreenLoading } from './JztLoading/fullScreen'
+
+export type {
+  ColorType,
+  LeftLayoutInstance,
+  LeftLayoutProps,
+  LeftRightModeInstance,
+  Props as LeftRightModeProps,
+  RightLayoutInstance,
+  RightLayoutProps,
+  SearchProps
+} from './JztLeftRightMode/types'
+export { useJztProductInfo } from './JztProductInfo'
+export type { ProTableProps as JztQueryTableProps } from './JztQueryTable/index.vue'
+export {
+  JztBackTop,
+  JztButtonList,
+  JztChart,
+  JztCharts,
+  JztClassTabs,
+  JztDialog,
+  JztEllipsisTooltip,
+  JztEmpty,
+  JztErrorPage,
+  JztFilePreview,
+  JztFormGrid,
+  JztGrid,
+  JztGridItem,
+  JztImportExcel,
+  JztLabelTitle,
+  JztLeftRightMode,
+  JztLogin,
+  JztNumericalRange,
+  JztPageCard,
+  JztProductInfo,
+  JztQueryDetailTable,
+  JztQueryTable,
+  JztRegionSelect,
+  JztRightMode,
+  JztSearchForm,
+  JztSearchFormItem,
+  JztSelectFilter,
+  JztSelectTable,
+  JztSvgIcon,
+  JztTable,
+  JztTime,
+  JztTreeFilter,
+  JztUploadImg,
+  JztUploadMultipleFiles,
+  JztUploadMultipleImgs,
+  JztUploadSingleFile,
+  showFullScreenLoading,
+  tryHideFullScreenLoading
+}

package/src/typings/global.d.ts

@@ -0,0 +1,101 @@
+/* Menu */
+declare namespace Menu {
+  interface MenuOptions {
+    path: string;
+    name: string;
+    component?: string | (() => Promise<unknown>);
+    redirect?: string;
+    meta: MetaProps;
+    children?: MenuOptions[];
+    id?: string;
+    level?: number;
+    menuType?: number;
+    parentId?: string;
+    parentName?: string;
+    sort?: number;
+  }
+  interface MetaProps {
+    icon: string;
+    title: string;
+    activeMenu?: string;
+    isLink?: string;
+    isHide: boolean;
+    isFull: boolean;
+    isAffix: boolean;
+    isKeepAlive: boolean;
+  }
+  interface authButtonOptions {
+    id: string;
+    menuCod: string;
+    menuId: string;
+    menuName: string;
+    operate: string;
+    operateNam: string;
+  }
+}
+
+// 分页响应参数
+
+/* FileType */
+declare namespace File {
+  type ImageMimeType =
+    | "image/apng"
+    | "image/bmp"
+    | "image/gif"
+    | "image/jpeg"
+    | "image/pjpeg"
+    | "image/png"
+    | "image/svg+xml"
+    | "image/tiff"
+    | "image/webp"
+    | "image/x-icon";
+
+  type ExcelMimeType =
+    | "application/vnd.ms-excel"
+    | "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+  type FileMimeType =
+    | "image/jpeg"
+    | "image/pjpeg"
+    | "image/png"
+    | "image/webp"
+    | "image/x-icon"
+    | "application/pdf";
+
+  type FilePostfixType = ".jpeg" | ".png" | ".jpg" | ".pdf";
+  type ImagePostfixType = ".jpeg" | ".png" | ".jpg";
+}
+
+/* Vite */
+declare type Recordable<T = any> = Record<string, T>;
+
+declare interface ViteEnv {
+  VITE_USER_NODE_ENV: "development" | "production" | "test";
+  VITE_GLOB_APP_TITLE: string;
+  VITE_PORT: number;
+  VITE_OPEN: boolean;
+  VITE_REPORT: boolean;
+  VITE_ROUTER_MODE: "hash" | "history";
+  VITE_BUILD_COMPRESS: "gzip" | "brotli" | "gzip,brotli" | "none";
+  VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: boolean;
+  VITE_DROP_CONSOLE: boolean;
+  VITE_DEVTOOLS: boolean;
+  VITE_PUBLIC_PATH: string;
+  VITE_API_URL: string;
+  VITE_PROXY: [string, string][];
+  VITE_CODEINSPECTOR: boolean;
+}
+
+interface ImportMetaEnv extends ViteEnv {
+  __: unknown;
+}
+
+/* __APP_INFO__ */
+declare const __APP_INFO__: {
+  pkg: {
+    name: string;
+    version: string;
+    dependencies: Recordable<string>;
+    devDependencies: Recordable<string>;
+  };
+  lastBuildTime: string;
+};