@jzt-packages/components 1.0.0

package/src/JztProductInfo/hooks/useParams.ts

@@ -0,0 +1,143 @@
+import { ref, nextTick, computed } from 'vue'
+import { getProductByProductCode, getMEProductByProductCode, getConfigByModuleAndKey } from '@jzt-spd/utils/commonApi'
+const dialogVisible = ref(false)
+const previewFileRef = ref()
+const tabActive = ref('records')
+const openFold = ref(false)
+interface ProductInfoProps {
+  productCode: string
+  productClassName: string
+}
+const productInfo = ref<ProductInfoProps>({
+  productCode: '',
+  productClassName: ''
+}) // 产品信息
+const tabsList = ref([
+  {
+    name: 'records',
+    label: 'SPD产品档案',
+    isShow: true
+  },
+  {
+    name: 'qxUnique',
+    label: '医疗器械唯一标识数据库档案',
+    isShow: computed(() => productInfo.value?.productClassName && productInfo.value?.productClassName.includes('高值'))
+  },
+  {
+    name: 'instruction',
+    label: '产品说明书',
+    isShow: true
+  }
+])
+
+const productSpecList = ref<string[]>([]) // 产品说明书
+const productPictureList = ref<string[]>([]) // 产品图片
+const loading = ref(false)
+
+export const useParams = () => {
+  return {
+    dialogVisible,
+    tabActive,
+    tabsList,
+    previewFileRef,
+    productInfo,
+    loading,
+    productPictureList,
+    openFold,
+    medicalType
+  }
+}
+// 获取产品信息的接口
+const GetProductFn = {
+  medical: getMEProductByProductCode // 医共体环境
+}
+// 当前的类型
+const medicalType = ref<string>('')
+export const useEvents = () => {
+  /**
+   * @description 打开预览弹框
+   * @param requestApi 查询接口
+   * */
+  //
+  const getDetailByCode = async (params: object, type?: string) => {
+    dialogVisible.value = true
+    if (!params) return
+    openFold.value = true
+    medicalType.value = type || ''
+    if (medicalType.value !== 'medical') {
+      // 医共体不需要查询配置
+      getShowImgApi()
+    }
+    try {
+      loading.value = true
+      // 医共体地址不一样
+      const getProductFn = type ? GetProductFn[type] : getProductByProductCode
+      // let params = {}
+      // if (typeof paramsValue === 'string') {
+      //   params = { productCode: paramsValue }
+      // } else {
+      //   params = paramsValue
+      // }
+      const res = await getProductFn(params)
+      if (res && res.result) {
+        getInformation(res.result)
+      }
+    } finally {
+      loading.value = false
+    }
+  }
+  // 处理接口内部的数据
+  const getInformation = async result => {
+    if (!result) return
+    try {
+      productInfo.value = result
+      const { productSpecification, productPicture } = result
+      if (productSpecification) {
+        // 产品说明书
+        productSpecList.value = JSON.parse(productSpecification) || []
+      }
+      if (productPicture) {
+        //   产品图片
+        productPictureList.value = JSON.parse(productPicture) || []
+      }
+    } catch (error) {
+      productInfo.value = { productCode: '', productClassName: '' }
+      productPictureList.value = []
+      productSpecList.value = []
+    }
+  }
+
+  // 获取配置项，是都默认展开图片
+  const getShowImgApi = async () => {
+    openFold.value = false
+    if (!getConfigByModuleAndKey) {
+      return
+    }
+    const { result } = await getConfigByModuleAndKey({
+      module: '产品信息管理',
+      key: 'IsShowImg'
+    })
+    if (result && result.configValue) {
+      openFold.value = JSON.parse(result.configValue) || false
+    }
+  }
+  // 关闭弹框
+  const closeDialog = () => {
+    dialogVisible.value = false
+    tabActive.value = 'records'
+    productInfo.value = { productCode: '', productClassName: '' }
+    productSpecList.value = []
+    productPictureList.value = []
+  }
+  //切换tab
+  const handleTabChange = val => {
+    if (val == 'instruction') {
+      nextTick(() => {
+        // previewFileRef.value.setFileInfo(list);
+        previewFileRef.value.setFileInfo(productSpecList.value)
+      })
+    }
+  }
+
+  return { getDetailByCode, closeDialog, handleTabChange }
+}

package/src/JztProductInfo/hooks/useQxUnique.tsx

@@ -0,0 +1,466 @@
+import { watchEffect, ref, reactive } from "vue";
+import type { FormItemsProps } from "../../JztFormGrid/interface";
+const colSpan = 8;
+
+// 产品标识基本信息
+const baseSignFrom = reactive<FormItemsProps[]>([
+  {
+    groupTitle: "产品标识基本信息",
+    prop: "group",
+    collapse: false,
+    children: [
+      {
+        label: "最小销售单元产品标识",
+        prop: "",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "产品编码体系名称",
+        prop: "",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "产品标识发布日期",
+        prop: "",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "最小销售单元中使用单元的数量",
+        prop: "",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "使用单元产品标识",
+        prop: "",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "是否有本体标识",
+        prop: "",
+        el: "el-input",
+        span: colSpan,
+      },
+    ],
+  },
+]);
+// 产品基本信息
+const basicInfoFrom = reactive<FormItemsProps[]>([
+  {
+    groupTitle: "产品基本信息",
+    prop: "group",
+    collapse: false,
+    children: [
+      {
+        label: "产品名称/通用名称",
+        prop: "otherName",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "商品名称",
+        prop: "productName",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "型号规格/包装规格",
+        prop: "specification",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "是否为包类/组装类产品",
+        prop: "",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "产品描述",
+        prop: "",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "产品货号或编号",
+        prop: "",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "原器械目录代码",
+        prop: "",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "器械类别",
+        prop: "",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "分类编码",
+        prop: "",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "医疗器械注册人/备案人名称",
+        prop: "grade",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "医疗器械注册人/备案人英文名称",
+        prop: "grade",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "统一社会信用代码",
+        prop: "grade",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "注册证编号或者备案凭证编号",
+        prop: "grade",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "医保耗材分类编码",
+        prop: "grade",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "产品类别",
+        prop: "grade",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "磁共振(MR)安全相关信息",
+        prop: "grade",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "是否标记为一次性使用",
+        prop: "grade",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "最大重复使用次数",
+        prop: "grade",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "是否为无菌包装",
+        prop: "grade",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "使用前是否需要进行灭菌",
+        prop: "grade",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "灭菌方式",
+        prop: "grade",
+        el: "el-input",
+        span: colSpan,
+      },
+      {
+        label: "其他信息的网址链接",
+        prop: "grade",
+        el: "el-input",
+        span: 24,
+      },
+    ],
+  },
+]);
+// 生产标识信息
+const productSignInfo = reactive<FormItemsProps[]>([
+  {
+    groupTitle: "生产标识信息",
+    prop: "group",
+    collapse: true,
+    children: [
+      {
+        label: "最小销售单元中使用单元的数量",
+        prop: "name",
+        el: "el-input",
+        span: 12,
+      },
+      {
+        label: "使用单元产品标识",
+        prop: "age",
+        el: "el-input",
+        span: 12,
+      },
+    ],
+  },
+]);
+// 包装标识信息
+const packageInfo = reactive<FormItemsProps[]>([
+  {
+    groupTitle: "包装标识信息",
+    prop: "group",
+    collapse: true,
+    children: [
+      {
+        // label: "",
+        prop: "packageTable",
+        span: 24,
+        el: "JztTable",
+        props: {
+          tableConfig: {
+            columns: [
+              {
+                label: "包装产品标识",
+                prop: "packageId",
+                minWidth: 160,
+              },
+              {
+                label: "产品包装级别",
+                prop: "packageId",
+                minWidth: 160,
+              },
+              {
+                label: "本级包装内含小一级相同产品标识的包装数量",
+                prop: "packageId",
+                minWidth: 220,
+              },
+              {
+                label: "包含内含小一级包装产品标识",
+                prop: "packageId",
+                minWidth: 160,
+              },
+            ],
+          },
+        },
+      },
+    ],
+  },
+]);
+// 存储或操作信息
+const storeOrManipulate = reactive<FormItemsProps[]>([
+  {
+    groupTitle: "存储或操作信息",
+    prop: "group",
+    collapse: true,
+    children: [
+      {
+        // label: "",
+        prop: "packageTable",
+        span: 24,
+        el: "JztTable",
+        props: {
+          tableConfig: {
+            columns: [
+              {
+                label: "存储或操作条件",
+                prop: "packageId",
+                minWidth: 200,
+              },
+              {
+                label: "最低值",
+                prop: "packageId",
+                minWidth: 140,
+              },
+              {
+                label: "最高值",
+                prop: "packageId",
+                minWidth: 140,
+              },
+              {
+                label: "计量单位",
+                prop: "packageId",
+                minWidth: 200,
+              },
+            ],
+          },
+        },
+      },
+      {
+        label: "特殊存储或操作条件",
+        prop: "name",
+        el: "el-input",
+        span: 24,
+      },
+    ],
+  },
+]);
+// 床使用尺寸信息
+const sizeInfo = reactive<FormItemsProps[]>([
+  {
+    groupTitle: "临床使用尺寸信息",
+    prop: "group",
+    collapse: true,
+    children: [
+      {
+        // label: "",
+        prop: "packageTable",
+        span: 24,
+        el: "JztTable",
+        props: {
+          tableConfig: {
+            columns: [
+              {
+                label: "临床使用尺寸类型",
+                prop: "packageId",
+                minWidth: 200,
+              },
+              {
+                label: "尺寸值",
+                prop: "packageId",
+                minWidth: 200,
+              },
+              {
+                label: "尺寸单位",
+                prop: "packageId",
+                minWidth: 200,
+              },
+            ],
+          },
+        },
+      },
+    ],
+  },
+]);
+// 版本信息
+const versionInfo = reactive<FormItemsProps[]>([
+  {
+    groupTitle: "版本信息",
+    prop: "group",
+    collapse: true,
+    children: [
+      {
+        label: "主键编号",
+        prop: "name",
+        el: "el-input",
+        span: 8,
+      },
+      {
+        label: "公开版本号",
+        prop: "age",
+        el: "el-input",
+        span: 8,
+      },
+      {
+        label: "版本的发布日期",
+        prop: "age",
+        el: "el-input",
+        span: 8,
+      },
+      {
+        label: "版本状态",
+        prop: "age",
+        el: "el-input",
+        span: 8,
+      },
+      {
+        label: "变更备注",
+        prop: "age",
+        el: "el-input",
+        span: 8,
+      },
+      {
+        label: "退市日期",
+        prop: "age",
+        el: "el-input",
+        span: 8,
+      },
+    ],
+  },
+]);
+// 纠错信息
+const errorInfo = reactive<FormItemsProps[]>([
+  {
+    groupTitle: "纠错信息",
+    prop: "group",
+    collapse: true,
+    children: [
+      {
+        label: "最小销售单元中使用单元的数量",
+        prop: "name",
+        el: "el-input",
+        span: 12,
+      },
+      {
+        label: "使用单元产品标识",
+        prop: "age",
+        el: "el-input",
+        span: 12,
+      },
+    ],
+  },
+]);
+// 企业联系信息
+const enterpriseInfo = reactive<FormItemsProps[]>([
+  {
+    groupTitle: "企业联系信息",
+    prop: "group",
+    collapse: true,
+    children: [
+     {
+        // label: "",
+        prop: "packageTable",
+        span: 24,
+        el: "JztTable",
+        props: {
+          tableConfig: {
+            columns: [
+              {
+                label: "联系人邮箱",
+                prop: "packageId",
+                minWidth: 200,
+              },
+              {
+                label: "联系人电话",
+                prop: "packageId",
+                minWidth: 200,
+              },
+              {
+                label: "联系人传真",
+                prop: "packageId",
+                minWidth: 200,
+              },
+            ],
+          },
+        },
+      },
+    ],
+  },
+]);
+
+const uniqueForm = reactive([
+  baseSignFrom,
+  basicInfoFrom,
+  productSignInfo,
+  packageInfo,
+  storeOrManipulate,
+  sizeInfo,
+  versionInfo,
+  errorInfo,
+  enterpriseInfo,
+]);
+export const useParams = () => {
+  return {
+    uniqueForm,
+  };
+};
+export const useEvents = () => {
+  return {};
+};

package/src/JztProductInfo/index.ts

@@ -0,0 +1,116 @@
+import { Component, createApp, h, nextTick, ref, Ref, Teleport, VNodeProps } from 'vue'
+import JztProductInfo from './index.vue'
+import type { ProductInfoRef } from './interface'
+
+/**
+ * 以命令式方式调用 JztProductInfo 弹窗
+ * @param props 透传至组件的 props
+ */
+export const useJztProductInfo = (props?: Record<string, any>) => {
+  // 创建通用挂载逻辑
+  const { state, cleanup, mount } = createFunctional<ProductInfoRef>(JztProductInfo, 'onClosed', 'jzt-product-info')
+
+  // 缓存用户传入的 props
+  state.props = props
+
+  /**
+   * 显示弹窗
+   * @param value 要展示的商品编码
+   */
+  const show = async (value: string) => {
+    // 若未挂载，则先挂载
+    if (!state.isMounted) {
+      mount()
+      await nextTick()
+    }
+
+    try {
+      // 调用组件实例方法打开弹窗
+      state.instanceRef.value?.openDialog(value)
+    } catch (error) {
+      console.error('JztProductInfo 打开弹窗失败：', error)
+      cleanup()
+    }
+  }
+
+  return { show, cleanup }
+}
+
+/** 通用状态结构 */
+type BaseState<T> = {
+  app: ReturnType<typeof createApp> | null
+  instanceRef: Ref<T | null>
+  mountNode: HTMLDivElement | null
+  isMounted: boolean
+  props?: Record<string, any>
+}
+
+/**
+ * 创建可复用的“挂载-卸载”逻辑
+ * @param Component 待挂载的 Vue 组件
+ * @param closeEvent 组件关闭时触发的事件名
+ * @param componentName 组件唯一标识，用于日志与 data-attribute
+ */
+export function createFunctional<T>(
+  Component: Component,
+  closeEvent: string = 'onClosed',
+  componentName: string = 'anonymous-component'
+) {
+  const state: BaseState<T> = {
+    app: null,
+    instanceRef: ref<T | null>(null) as Ref<T | null>,
+    mountNode: null,
+    isMounted: false,
+    props: undefined
+  }
+
+  /** 卸载组件并清理 DOM */
+  const cleanup = () => {
+    if (state.app) {
+      state.app.unmount()
+      state.app = null
+    }
+    if (state.mountNode?.parentElement) {
+      state.mountNode.parentElement.removeChild(state.mountNode)
+      state.mountNode = null
+    }
+    state.instanceRef.value = null
+    state.isMounted = false
+    state.props = undefined
+  }
+
+  /** 挂载组件到 body */
+  const mount = () => {
+    if (state.isMounted || state.app) return
+
+    try {
+      // 创建挂载节点
+      state.mountNode = document.createElement('div')
+      state.mountNode.dataset.component = componentName
+
+      // 合并 props：透传 + 关闭回调 + ref 绑定
+      const mergedProps: VNodeProps = {
+        ...state.props,
+        ref: (el: any) => (state.instanceRef.value = el as T),
+        [closeEvent]: cleanup
+      }
+
+      // 通过 Teleport 渲染到 body 下
+      state.app = createApp({
+        render: () => h(Teleport, { to: 'body' }, h(Component, mergedProps))
+      })
+      state.app.mount(state.mountNode)
+      state.isMounted = true
+    } catch (error) {
+      console.error(`${componentName} 挂载失败：`, error)
+      cleanup()
+    }
+  }
+
+  return {
+    state,
+    cleanup,
+    mount,
+    nextTick
+  }
+}