@jzt-packages/components 1.0.0

package/src/JztProductInfo/components/imagePreview.vue

@@ -0,0 +1,275 @@
+<template>
+  <div class="imagePreview column-top-center">
+    <div v-if="imgSrcList.length" class="preview">
+      <el-image
+        style="width: 100%; height: 100%"
+        :src="imgSrcList[activeIndex]"
+        :preview-src-list="imgSrcList"
+        show-progress
+        :initial-index="activeIndex"
+        fit="scale-down"
+      />
+      <!-- PDF 文件：显示封面，点击打开 PDF -->
+      <div v-if="isCurrentPdf" class="pdf-overlay flx-center" @click="openPdf">
+        <el-icon :size="40" color="#fff"><View /></el-icon>
+        <span class="pdf-hint">点击查看 PDF</span>
+      </div>
+
+      <div
+        v-if="imgSrcList.length > 1"
+        class="circle flx-center previous"
+        title="上一张"
+        @click="onPrevious(activeIndex)"
+      >
+        <el-icon :size="18"><ArrowLeftBold /></el-icon>
+      </div>
+      <div v-if="imgSrcList.length > 1" class="circle flx-center next" title="下一张" @click="onNext(activeIndex)">
+        <el-icon :size="18"><ArrowRightBold /></el-icon>
+      </div>
+    </div>
+    <div v-else class="empty-box">
+      <el-image :src="defaultProduct" class="defaultProduct" fit="scale-down" />
+      <span class="empty">暂无图片</span>
+      <span class="empty2">No Picture</span>
+    </div>
+    <div v-if="imgSrcList && imgSrcList.length" class="scroll-thumbnail flx-left-center" ref="scrollBox">
+      <div
+        v-for="(itemSrc, index) in imgSrcList"
+        class="thumbnail-item"
+        :id="`thumbnail_${index}`"
+        :key="`thumbnail_${index}`"
+        :ref="el => setItemRef(el, index + 1)"
+        :class="{ active: index === activeIndex }"
+        @click="activeIndex = index"
+      >
+        <el-image style="width: 100%; height: 100%" :src="itemSrc" fit="scale-down" />
+      </div>
+    </div>
+    <div v-if="imgSrcList && imgSrcList.length" class="paging">{{ activeIndex + 1 }} / {{ imgSrcList.length }}</div>
+  </div>
+</template>
+
+<script setup lang="tsx" name="JztFilePreview">
+import pdfCover from '../../../../spd-common-lib/styles//src/assets/images/pdfCover.png'
+import { isPdfSuffix } from '../../../../spd-common-lib/utils/src/utils/is'
+import { ref, onMounted, computed } from 'vue'
+import { View } from '@element-plus/icons-vue'
+import { useUploadFileHook } from '../../hooks/useUploadFileHook'
+import defaultProduct from '../images/defaultProduct.png'
+
+const { getFullUrl, getFileShowList } = useUploadFileHook()
+
+const props = withDefaults(defineProps<ProductInfo>(), {
+  srcList: () => []
+})
+
+const activeIndex = ref(0)
+
+// const srcList = ref<string[]>([
+//   'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+//   'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+//   'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+//   'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+//   'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+//   'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+//   'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf'
+// ])
+
+// 当前项是否为 PDF
+const isCurrentPdf = computed(() => isPdfSuffix(originalSrcList.value[activeIndex.value]))
+
+// 打开当前 PDF
+const openPdf = () => {
+  const url = originalSrcList.value[activeIndex.value]
+  if (url) window.open(url, '_blank')
+}
+
+const scrollBox = ref<HTMLDivElement | null>(null)
+const itemRefs = ref<(HTMLDivElement | null)[]>([])
+
+function setItemRef(el: HTMLDivElement | null, index: number) {
+  itemRefs.value[index] = el
+}
+
+export interface ProductInfo {
+  srcList: string[]
+}
+
+// 原始完整 URL 列表
+const originalSrcList = computed(() => props.srcList.map(url => getFullUrl(url)))
+
+// 图片 URL 列表 已经替换了PDF 方便预览
+const imgSrcList = computed(() => {
+  return props.srcList.map(url => {
+    const fullUrl = getFullUrl(url)
+    return isPdfSuffix(fullUrl) ? pdfCover : fullUrl
+  })
+})
+
+const onScrollTo = (index: number) => {
+  const container = scrollBox.value
+  const target = itemRefs.value[index]
+  if (!container || !target) return
+  container.scrollTo({
+    left: target.offsetLeft + 20,
+    behavior: 'smooth'
+  })
+}
+
+const onScrollToBoth = (inline, index = 1) => {
+  const target = itemRefs.value[index]
+  if (target) {
+    target.scrollIntoView({
+      behavior: 'smooth', // 平滑滚动
+      inline: inline, // ⬅️ 滚动到容器最左边
+      block: 'nearest' // 垂直方向不动
+    })
+  }
+}
+
+// 切换上一张图片
+const onPrevious = (index: number) => {
+  const len = imgSrcList.value?.length || 0
+  if (len <= 0) return
+  if (index > 0) {
+    activeIndex.value--
+    onScrollTo(activeIndex.value)
+  } else {
+    activeIndex.value = len - 1
+    onScrollToBoth('end', len)
+  }
+}
+// 切换下一张图片
+const onNext = (index: number) => {
+  const len = imgSrcList.value?.length || 0
+  if (len <= 0) return
+  if (index >= len - 1) {
+    activeIndex.value = 0
+    onScrollToBoth('start', 1)
+  } else {
+    activeIndex.value++
+    onScrollTo(activeIndex.value)
+  }
+}
+</script>
+<style lang="scss" scoped>
+.imagePreview {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  flex-shrink: 0;
+  .empty-box {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    max-height: 350px;
+    color: #d1d2d2;
+    background: #f6f7f9;
+    border-radius: 8px;
+    .defaultProduct {
+      width: 120px;
+      height: 120px;
+    }
+    .empty {
+      font-size: 28px;
+    }
+    .empty2 {
+      font-size: 16px;
+    }
+  }
+}
+.preview {
+  flex: 1;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 6px;
+  background: #f6f7f9;
+  padding: 8px;
+  overflow: hidden;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: scale-down;
+  }
+  .circle {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    opacity: 0.8;
+    border: 1px solid #bbbfc2;
+    background: #ffffffcc;
+  }
+  .previous {
+    position: absolute;
+    left: 24px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 10;
+    cursor: pointer;
+  }
+  .next {
+    position: absolute;
+    right: 24px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 10;
+    cursor: pointer;
+  }
+  &:hover .pdf-overlay {
+    opacity: 1;
+  }
+  .pdf-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.45);
+    opacity: 0;
+    transition: opacity 0.2s;
+    flex-direction: column;
+    gap: 8px;
+    .pdf-hint {
+      color: #fff;
+      font-size: 14px;
+    }
+  }
+}
+.scroll-thumbnail {
+  width: 100%;
+  height: 120px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-behavior: smooth; /* 平滑滚动 */
+  white-space: nowrap; /* 禁止换行 */
+  flex-wrap: nowrap;
+  .thumbnail-item {
+    flex-shrink: 0;
+    width: 150px;
+    height: 92px;
+    margin-right: 15px;
+    border-radius: 4px;
+    border: 2px solid #dee2e6;
+    user-select: none;
+    &.active {
+      border: 2px solid var(--el-color-primary);
+    }
+  }
+}
+.paging {
+  color: #333333;
+  font-size: 14px;
+  font-weight: 500;
+  width: 100%;
+  height: 35px;
+  text-align: center;
+  line-height: 35px;
+}
+</style>
+
+<style>
+::-webkit-scrollbar {
+  height: 8px; /* 设置滚动条高度 */
+}
+</style>

package/src/JztProductInfo/components/qxUnique.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="qxUnique-container">
+    <!-- 产品标识基本信息 -->
+    <JztFormGrid
+      v-for="(item, index) in uniqueForm"
+      ref="ruleFormRef"
+      :key="'JztFormGrid' + index"
+      :query-items="item"
+      :rule-form="productInfo"
+      :is-show="true"
+      border
+    />
+    <!-- 产品标识基本信息 -->
+    <!-- <JztFormGrid
+      ref="ruleFormRef"
+      :query-items="baseSignFrom"
+      :rule-form="productInfo"
+      :is-show="true"
+      border
+    /> -->
+    <!-- 产品基本信息 -->
+    <!-- <JztFormGrid
+      ref="ruleFormRef"
+      :query-items="basicInfoFrom"
+      :rule-form="productInfo"
+      :is-show="true"
+      border
+    /> -->
+    <!-- 生产标识信息 -->
+    <!-- <JztFormGrid
+      ref="ruleFormRef"
+      :query-items="productSignInfo"
+      :rule-form="productInfo"
+      :is-show="true"
+      border
+    /> -->
+    <!-- 包装标识信息 -->
+    <!-- <JztFormGrid
+      ref="ruleFormRef"
+      :query-items="packageInfo"
+      :rule-form="productInfo"
+      :is-show="true"
+      border
+    >
+    </JztFormGrid> -->
+    <!-- 存储或操作信息 -->
+    <!-- 临床使用尺寸信息 -->
+    <!-- 版本信息 -->
+    <!-- <JztFormGrid
+      ref="ruleFormRef"
+      :query-items="versionInfo"
+      :rule-form="productInfo"
+      :is-show="true"
+      border
+    /> -->
+    <!-- 纠错信息 -->
+    <!-- <JztFormGrid
+      ref="ruleFormRef"
+      :query-items="errorInfo"
+      :rule-form="productInfo"
+      :is-show="true"
+      border
+    /> -->
+    <!-- 企业联系信息 -->
+  </div>
+</template>
+
+<script setup lang="tsx" name="JztFilePreview">
+import { watchEffect, ref, onMounted } from "vue";
+import JztFormGrid from "../../JztFormGrid/index.vue";
+import type { JztFormInstance } from "../../JztFormGrid/interface";
+import { useParams } from "../hooks/useQxUnique.tsx";
+
+export interface ProductInfo {
+  productInfo: Object;
+}
+const props = withDefaults(defineProps<ProductInfo>(), {
+  productInfo: {},
+});
+const { uniqueForm } = useParams();
+
+const ruleFormRef = ref<JztFormInstance>();
+onMounted(() => {
+  console.log("qxUnique");
+  // getShowImgApi();
+});
+</script>
+<style lang="scss" scoped>
+.qxUnique-container {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-top: 10px;
+}
+
+:deep(.is-fullHeight) {
+  .qxUnique-container {
+    height: calc(100vh - 95px);
+  }
+}
+</style>

package/src/JztProductInfo/components/records.vue

@@ -0,0 +1,265 @@
+<template>
+  <div class="records flx-left-top">
+    <div class="left" :class="{ open: openFold }">
+      <div class="title" :class="{ 'flx-between-center': openFold }" @click="changeFold">
+        <div v-if="openFold" class="title-text flx-left-center">
+          <span class="label"></span>
+          <span class="text">产品图片</span>
+        </div>
+        <el-icon class="collapse-icon" :size="16">
+          <component :is="!openFold ? 'ArrowRightBold' : 'ArrowLeftBold'"></component>
+        </el-icon>
+        <div v-if="!openFold" class="title-text">产品图片</div>
+      </div>
+      <div class="preview-content">
+        <imagePreview :srcList="srcList" v-if="openFold" />
+      </div>
+    </div>
+    <div class="right">
+      <JztFormGrid
+        ref="ruleFormRef"
+        :query-items="queryItems"
+        :rule-form="productInfo"
+        :is-show="true"
+        border
+        :showCollapsed="false"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="tsx" name="JztFilePreview">
+import { computed, ref, reactive, onBeforeMount } from 'vue'
+import JztFormGrid from '../../JztFormGrid/index.vue'
+import type { JztFormInstance, FormItemsProps } from '../../JztFormGrid/interface'
+import imagePreview from './imagePreview.vue'
+import { CommFn } from '../../../../spd-common-lib/hooks/src/index'
+const { getAppendixInfo } = CommFn()
+export interface ProductInfo {
+  productInfo: any
+  srcList: string[]
+  openFold: boolean
+  medicalType: string //是否医共体环境
+}
+const props = withDefaults(defineProps<ProductInfo>(), {
+  productInfo: () => {},
+  srcList: () => [],
+  openFold: false,
+  medicalType: ''
+})
+const ruleFormRef = ref<JztFormInstance>()
+const colSpan = 12
+const appendixInfo = ref({})
+// 是否医共体环境
+const isMedical = computed(() => props.medicalType === 'medical')
+const queryItems = reactive<FormItemsProps[]>([
+  {
+    groupTitle: '产品信息',
+    prop: 'group',
+    children: [
+      {
+        label: '产品编码',
+        prop: 'productCode',
+        el: 'el-input',
+        span: colSpan
+      },
+      {
+        label: '产品大类',
+        prop: 'productClassName',
+        el: 'el-input',
+        span: colSpan
+      },
+      {
+        label: '产品外码',
+        prop: 'productOutCode',
+        hideFun: () => isMedical.value, // 医共体不展示
+        el: 'el-input',
+        span: colSpan
+      },
+      {
+        label: '产品小类',
+        prop: 'productMinClassName',
+        hideFun: () => isMedical.value, // 医共体不展示
+        el: 'el-input',
+        span: colSpan
+      },
+      {
+        label: '产品名称',
+        prop: 'productName',
+        el: 'el-input',
+        span: colSpan
+      },
+      {
+        label: '产品通用名',
+        prop: 'otherName',
+        el: 'el-input',
+        span: colSpan
+      },
+      {
+        label: '规格',
+        prop: 'specification',
+        el: 'el-input',
+        span: colSpan
+      },
+      {
+        label: '存储方式',
+        prop: 'savingMode',
+        el: 'el-select',
+        enum: computed(() => appendixInfo.value['15']),
+        fieldNames: { value: 'key', label: 'value' },
+        span: colSpan
+      },
+      {
+        label: '注册证号',
+        prop: 'registeredCardCode',
+        el: 'el-input',
+        span: colSpan
+      },
+      {
+        label: '生产厂商',
+        prop: 'manufactureName',
+        el: 'el-input',
+        span: colSpan
+      },
+      {
+        label: '采购单价',
+        prop: 'purcPrice',
+        el: 'el-input',
+        span: colSpan
+      },
+      {
+        label: '销售单价',
+        prop: 'sellPrice',
+        el: 'el-input',
+        span: colSpan
+      },
+      {
+        label: '计量单位',
+        prop: 'minPackUnit', // useUnit
+        el: 'el-input',
+        span: colSpan
+      },
+      {
+        label: '是否计费',
+        prop: 'isCharging',
+        el: 'el-select',
+        span: colSpan,
+        enum: [
+          {
+            label: '是',
+            value: 1
+          },
+          {
+            label: '否',
+            value: 0
+          }
+        ]
+      },
+      {
+        label: '默认供应商名称',
+        prop: 'supplierName',
+        el: 'el-input',
+        span: colSpan * 2
+      },
+      {
+        label: '经销商',
+        prop: 'agentName',
+        el: 'el-input',
+        span: colSpan * 2
+      }
+    ]
+  }
+])
+const getAppendixInfoFn = async () => {
+  //  获取附录信息
+  const res = await getAppendixInfo(['15'])
+  appendixInfo.value = res || {}
+}
+onBeforeMount(() => {
+  getAppendixInfoFn()
+})
+
+// 定义 emit 事件
+const emit = defineEmits<{
+  'update:openFold': [boolean]
+}>()
+const isOpenFold = computed({
+  get() {
+    return props.openFold
+  },
+  set(val: boolean) {
+    emit('update:openFold', val)
+  }
+})
+const changeFold = () => {
+  isOpenFold.value = !isOpenFold.value
+}
+</script>
+<style lang="scss" scoped>
+.records {
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.left {
+  width: 40px;
+  // flex: 1;
+  height: 100%;
+  margin-right: 20px;
+  &.open {
+    width: 40%;
+    min-width: 250px;
+    max-width: 400px;
+  }
+  :deep(.is-fullscreen) {
+    .preview-content {
+      height: 100vh;
+    }
+  }
+  .preview-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    overflow: hidden;
+    // height: calc(100% - 20px);
+    height: calc(75vh - 100px);
+  }
+
+  .title {
+    padding: 10px 12px 10px 0;
+    height: 42px;
+    line-height: 22px;
+  }
+  .title-text {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--el-text-color-primary);
+    .label {
+      display: inline-block;
+      width: 4px;
+      height: 16px;
+      background: var(--el-color-primary);
+      margin-right: 8px;
+      border-radius: 4px;
+    }
+  }
+}
+
+.right {
+  flex: 1;
+  height: 100%;
+  min-width: 400px;
+  overflow-y: auto;
+  padding-top: 10px;
+
+  .el-scrollbar {
+    width: 100%;
+  }
+}
+</style>
+
+<style>
+::-webkit-scrollbar {
+  height: 8px; /* 设置滚动条高度 */
+}
+</style>