@ebiz/designer-components 0.1.36 → 0.1.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebiz/designer-components",
-  "version": "0.1.36",
+  "version": "0.1.37",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -19,6 +19,7 @@
   "dependencies": {
     "axios": "^1.8.1",
     "echarts": "^5.6.0",
+    "pdfjs-dist": "^3.11.174",
     "vxe-table": "^4.13.31",
     "tdesign-vue-next": "^1.12.0",
     "unplugin-auto-import": "^19.0.0",

package/src/components/EbizEmployeeSelector.vue

@@ -385,7 +385,7 @@ const fetchOrganizationData = async () => {
       }, "/process/deptList"
     );
     organizationData.value = response;
-    handleActive(response[0].id, 'organization')
+    handleActive(null, 'organization')
     // organizationData.value = processOrgData(response.data || []);
   } catch (error) {
     MessagePlugin.error({
@@ -589,6 +589,7 @@ const fetchEmployeesByIds = async (ids) => {
 
 // 处理节点激活
 const handleActive = (value, context) => {
+  console.log("value", value)
   currentActive.value = [value];
   currentNodeName.value = context.node?.label || '';
 
@@ -604,14 +605,26 @@ const selectDepartment = (department) => {
 
 // 处理全选
 const handleSelectAll = (checked) => {
-  employeeList.value.forEach(item => {
+  if (!checked) {
+    // 移除当前页的选择
+    employeeList.value.forEach(item => {
+      console.log("item", item, (tempSelectedEmployees.value.indexOf(item.id) !== -1))
+      if (tempSelectedEmployeeIds.value.indexOf(item.id) !== -1) {
+        tempSelectedEmployeeIds.value.splice(tempSelectedEmployeeIds.value.indexOf(item.id), 1);
+      }
+    });
+    handleCheckChange()
+  } else {
+    employeeList.value.forEach(item => {
+
+      // 如果选中，确保添加到临时选中列表
+      if (!tempSelectedEmployees.value.some(emp => emp.id === item.id)) {
+        tempSelectedEmployees.value.push(item);
+        tempSelectedEmployeeIds.value.push(item.id);
+      }
+    });
+  }
 
-    // 如果选中，确保添加到临时选中列表
-    if (!tempSelectedEmployees.value.some(emp => emp.id === item.id)) {
-      tempSelectedEmployees.value.push(item);
-      tempSelectedEmployeeIds.value.push(item.id);
-    }
-  });
 };
 
 // 处理选中状态变更

package/src/components/EbizPdfViewer.vue

@@ -0,0 +1,541 @@
+<template>
+  <div class="ebiz-pdf-viewer" :style="{ width: width, height: height }">
+    <!-- 工具栏 -->
+    <div v-if="showToolbar" class="pdf-toolbar">
+      <div class="toolbar-left">
+        <button 
+          @click="previousPage" 
+          :disabled="currentPage <= 1"
+          class="toolbar-btn"
+          title="上一页"
+        >
+          ⬅
+        </button>
+        <span class="page-info">
+          {{ currentPage }} / {{ totalPages }}
+        </span>
+        <button 
+          @click="nextPage" 
+          :disabled="currentPage >= totalPages"
+          class="toolbar-btn"
+          title="下一页"
+        >
+          ➡
+        </button>
+      </div>
+      <div class="toolbar-center">
+        <button @click="zoomOut" class="toolbar-btn" title="缩小">-</button>
+        <span class="zoom-info">{{ Math.round(scale * 100) }}%</span>
+        <button @click="zoomIn" class="toolbar-btn" title="放大">+</button>
+        <button @click="resetZoom" class="toolbar-btn" title="重置缩放">⟲</button>
+      </div>
+      <div class="toolbar-right">
+        <button @click="rotatePage" class="toolbar-btn" title="旋转">↻</button>
+        <button @click="downloadPdf" class="toolbar-btn" title="下载">⬇</button>
+      </div>
+    </div>
+
+    <!-- PDF 内容区域 -->
+    <div class="pdf-container" ref="containerRef">
+      <div v-if="loading" class="pdf-loading">
+        <div class="loading-spinner"></div>
+        <span>加载中...</span>
+      </div>
+      <div v-else-if="error" class="pdf-error">
+        <span>{{ error }}</span>
+      </div>
+      <div v-else class="pdf-content">
+        <canvas 
+          ref="canvasRef" 
+          :style="{ 
+            transform: `rotate(${rotation}deg)`,
+            transformOrigin: 'center center'
+          }"
+        ></canvas>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "EbizPdfViewer"
+}
+</script>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
+
+const props = defineProps({
+  // PDF文件URL或base64数据
+  src: {
+    type: String,
+    required: true
+  },
+  // 组件宽度
+  width: {
+    type: String,
+    default: '100%'
+  },
+  // 组件高度
+  height: {
+    type: String,
+    default: '600px'
+  },
+  // 是否显示工具栏
+  showToolbar: {
+    type: Boolean,
+    default: true
+  },
+  // 初始页码
+  page: {
+    type: Number,
+    default: 1
+  },
+  // 初始缩放比例
+  zoom: {
+    type: Number,
+    default: 1
+  },
+  // 是否允许下载
+  downloadable: {
+    type: Boolean,
+    default: true
+  },
+  // PDF密码
+  password: {
+    type: String,
+    default: ''
+  }
+});
+
+const emit = defineEmits([
+  'load', 
+  'error', 
+  'page-change', 
+  'zoom-change',
+  'download'
+]);
+
+// 响应式状态
+const loading = ref(false);
+const error = ref('');
+const currentPage = ref(props.page);
+const totalPages = ref(0);
+const scale = ref(props.zoom);
+const rotation = ref(0);
+
+// DOM引用
+const containerRef = ref(null);
+const canvasRef = ref(null);
+
+// PDF相关变量
+let pdfDoc = null;
+let pdfLib = null;
+let renderRetryCount = 0;
+const MAX_RETRY_COUNT = 3;
+let resizeObserver = null;
+
+// 初始化PDF.js
+const initPdfJs = async () => {
+  try {
+    // 动态导入pdfjs-dist
+    pdfLib = await import('pdfjs-dist');
+    
+    // 设置worker路径
+    pdfLib.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js`;
+    
+    return true;
+  } catch (err) {
+    console.error('Failed to initialize PDF.js:', err);
+    error.value = '初始化PDF.js失败';
+    return false;
+  }
+};
+
+// 加载PDF文档
+const loadPdf = async () => {
+  if (!props.src) return;
+  
+  loading.value = true;
+  error.value = '';
+  
+  try {
+    if (!pdfLib) {
+      const success = await initPdfJs();
+      if (!success) return;
+    }
+
+    const loadingTask = pdfLib.getDocument({
+      url: props.src,
+      password: props.password
+    });
+    
+    pdfDoc = await loadingTask.promise;
+    totalPages.value = pdfDoc.numPages;
+    
+    // 确保当前页在有效范围内
+    if (currentPage.value > totalPages.value) {
+      currentPage.value = totalPages.value;
+    }
+    if (currentPage.value < 1) {
+      currentPage.value = 1;
+    }
+    
+    // 延迟渲染确保DOM完全准备
+    await nextTick();
+    setTimeout(async () => {
+      await renderPage();
+    }, 50);
+    
+    emit('load', {
+      totalPages: totalPages.value,
+      currentPage: currentPage.value
+    });
+    
+  } catch (err) {
+    console.error('PDF loading error:', err);
+    error.value = err.message || 'PDF加载失败';
+    emit('error', err);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 渲染当前页面
+const renderPage = async () => {
+  if (!pdfDoc || !canvasRef.value) return;
+  
+  try {
+    // 确保canvas元素已经完全渲染到DOM中
+    await nextTick();
+    
+    const page = await pdfDoc.getPage(currentPage.value);
+    const canvas = canvasRef.value;
+    
+    // 再次检查canvas是否存在
+    if (!canvas) {
+      if (renderRetryCount < MAX_RETRY_COUNT) {
+        renderRetryCount++;
+        console.warn(`Canvas element not found, retrying... (${renderRetryCount}/${MAX_RETRY_COUNT})`);
+        setTimeout(renderPage, 100);
+        return;
+      } else {
+        console.error('Canvas element not found after multiple retries');
+        error.value = 'Canvas元素未找到';
+        return;
+      }
+    }
+    
+    // 重置重试计数
+    renderRetryCount = 0;
+    
+    const context = canvas.getContext('2d');
+    
+    // 获取页面尺寸
+    const viewport = page.getViewport({ scale: scale.value });
+    
+    // 获取容器可用宽度
+    const containerWidth = containerRef.value?.clientWidth || 800;
+    const maxWidth = containerWidth - 40; // 减去padding
+    
+    // 如果PDF宽度超过容器宽度，自动缩放
+    let finalScale = scale.value;
+    if (viewport.width > maxWidth) {
+      finalScale = (maxWidth / viewport.width) * scale.value;
+      const adjustedViewport = page.getViewport({ scale: finalScale });
+      canvas.height = adjustedViewport.height;
+      canvas.width = adjustedViewport.width;
+    } else {
+      canvas.height = viewport.height;
+      canvas.width = viewport.width;
+    }
+    
+    // 清空canvas
+    context.clearRect(0, 0, canvas.width, canvas.height);
+    
+    // 渲染页面 - 使用最终的viewport
+    const finalViewport = finalScale !== scale.value ? 
+      page.getViewport({ scale: finalScale }) : viewport;
+      
+    const renderContext = {
+      canvasContext: context,
+      viewport: finalViewport
+    };
+    
+    await page.render(renderContext).promise;
+    
+  } catch (err) {
+    console.error('Page rendering error:', err);
+    error.value = '页面渲染失败';
+  }
+};
+
+// 翻页方法
+const previousPage = () => {
+  if (currentPage.value > 1) {
+    currentPage.value--;
+    renderPage();
+    emit('page-change', currentPage.value);
+  }
+};
+
+const nextPage = () => {
+  if (currentPage.value < totalPages.value) {
+    currentPage.value++;
+    renderPage();
+    emit('page-change', currentPage.value);
+  }
+};
+
+// 缩放方法
+const zoomIn = () => {
+  scale.value = Math.min(scale.value * 1.2, 3);
+  renderPage();
+  emit('zoom-change', scale.value);
+};
+
+const zoomOut = () => {
+  scale.value = Math.max(scale.value / 1.2, 0.1);
+  renderPage();
+  emit('zoom-change', scale.value);
+};
+
+const resetZoom = () => {
+  scale.value = 1;
+  renderPage();
+  emit('zoom-change', scale.value);
+};
+
+// 旋转页面
+const rotatePage = () => {
+  rotation.value = (rotation.value + 90) % 360;
+};
+
+// 下载PDF
+const downloadPdf = () => {
+  if (!props.downloadable) return;
+  
+  try {
+    const link = document.createElement('a');
+    link.href = props.src;
+    link.download = 'document.pdf';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    
+    emit('download', props.src);
+  } catch (err) {
+    console.error('Download error:', err);
+  }
+};
+
+// 监听属性变化
+watch(() => props.src, () => {
+  loadPdf();
+});
+
+watch(() => props.page, (newPage) => {
+  if (newPage !== currentPage.value && newPage >= 1 && newPage <= totalPages.value) {
+    currentPage.value = newPage;
+    renderPage();
+  }
+});
+
+watch(() => props.zoom, (newZoom) => {
+  if (newZoom !== scale.value) {
+    scale.value = newZoom;
+    renderPage();
+  }
+});
+
+// 强制刷新渲染
+const forceRender = async () => {
+  if (pdfDoc && canvasRef.value) {
+    await nextTick();
+    await renderPage();
+  }
+};
+
+// 组件挂载时加载PDF
+onMounted(() => {
+  nextTick(() => {
+    loadPdf();
+    
+    // 监听容器大小变化
+    if (containerRef.value && window.ResizeObserver) {
+      resizeObserver = new ResizeObserver(() => {
+        if (pdfDoc && canvasRef.value) {
+          // 延迟渲染以避免频繁触发
+          setTimeout(() => {
+            renderPage();
+          }, 100);
+        }
+      });
+      resizeObserver.observe(containerRef.value);
+    }
+  });
+});
+
+// 组件卸载时清理
+onUnmounted(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect();
+    resizeObserver = null;
+  }
+});
+
+// 暴露强制刷新方法
+defineExpose({
+  forceRender
+});
+</script>
+
+<style lang="less" scoped>
+.ebiz-pdf-viewer {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #e1e1e1;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #f5f5f5;
+}
+
+.pdf-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+  background: #fff;
+  border-bottom: 1px solid #e1e1e1;
+  
+  .toolbar-left,
+  .toolbar-center,
+  .toolbar-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .toolbar-btn {
+    padding: 4px 8px;
+    border: 1px solid #d1d1d1;
+    background: #fff;
+    border-radius: 2px;
+    cursor: pointer;
+    font-size: 12px;
+    
+    &:hover:not(:disabled) {
+      background: #f0f0f0;
+    }
+    
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+  
+  .page-info,
+  .zoom-info {
+    font-size: 12px;
+    color: #666;
+    min-width: 60px;
+    text-align: center;
+  }
+}
+
+.pdf-container {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  overflow: auto;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.pdf-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: #666;
+  min-height: 200px;
+  width: 100%;
+  
+  .loading-spinner {
+    width: 24px;
+    height: 24px;
+    border: 2px solid #f3f3f3;
+    border-top: 2px solid #0052d9;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+}
+
+.pdf-error {
+  color: #e34d59;
+  text-align: center;
+  padding: 20px;
+  min-height: 200px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pdf-content {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  min-height: 100%;
+  width: 100%;
+  padding-top: 10px;
+  
+  canvas {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    background: white;
+    transition: transform 0.3s ease;
+    display: block;
+    max-width: calc(100% - 20px);
+    height: auto;
+    margin: 0 auto;
+  }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* 响应式适配 */
+@media (max-width: 768px) {
+  .pdf-container {
+    padding: 5px;
+  }
+  
+  .pdf-content {
+    padding-top: 5px;
+    
+    canvas {
+      max-width: calc(100% - 10px);
+    }
+  }
+  
+  .pdf-toolbar {
+    padding: 6px 8px;
+    
+    .toolbar-btn {
+      padding: 3px 6px;
+      font-size: 11px;
+    }
+    
+    .page-info,
+    .zoom-info {
+      font-size: 11px;
+      min-width: 50px;
+    }
+  }
+}
+</style> 

package/src/index.js

@@ -99,6 +99,7 @@ import EbizDropdownItem from './components/EbizDropdownItem.vue'
 import EbizFileList from './components/EbizFileList.vue'
 import EbizDetailView from './components/EbizDetailView.vue'
 import EbizDetailItem from './components/EbizDetailItem.vue'
+import EbizPdfViewer from './components/EbizPdfViewer.vue'
 
 // 导出组件
 export {
@@ -239,5 +240,7 @@ export {
   EbizSApprovalProcess,
   // 详情页组件
   EbizDetailView,
-  EbizDetailItem
+  EbizDetailItem,
+  // PDF预览组件
+  EbizPdfViewer
 }

package/src/router/index.js

@@ -394,6 +394,12 @@ const routes = [
     name: 'DetailViewDemo',
     component: () => import('../views/EbizDetailViewDemo.vue'),
     meta: { title: 'Ebiz详情页组件示例' }
+  },
+  {
+    path: '/pdf-viewer-demo',
+    name: 'PdfViewerDemo',
+    component: () => import('../views/PdfViewerDemo.vue'),
+    meta: { title: 'EbizPdfViewer PDF预览器示例' }
   }
 ]
 

package/src/views/Home.vue

@@ -97,7 +97,8 @@ export default {
       { path: '/meeting-room-selector', title: 'Ebiz会议室选择器组件示例' },
       { path: '/mobile-meeting-room-selector', title: 'Ebiz移动端会议室选择器组件示例' },
       { path: '/file-list-demo', title: '文件列表demo' },
-      { path: '/detail-view-demo', title: 'Ebiz详情页组件示例' }
+      { path: '/detail-view-demo', title: 'Ebiz详情页组件示例' },
+      { path: '/pdf-viewer-demo', title: 'EbizPdfViewer PDF预览器示例' }
     ]
 
     return {