档案管理-书籍二维码生成，借阅-归还扫瞄

yaowanxin

2025-09-26 1021003321fe54f3f45d77457db86105d206551a

 src/views/fileManagement/document/index.vue

@@ -153,7 +153,39 @@
        </div>
      </template>
    </el-dialog>

<el-dialog
    v-model="qrCodeDialogVisible"
    title="文档二维码"
    width="400px"
    @close="closeQrCodeDialog"
  >
    <div class="qr-code-container">
      <div v-if="qrCodeUrl" class="qr-code-image">
        <img :src="qrCodeUrl" alt="文档二维码" class="qr-image" />
        <div class="qr-info">
          <p><strong>文档名称：</strong>{{ currentDocument.docName }}</p>
          <p><strong>文档编号：</strong>{{ currentDocument.docNumber }}</p>
        </div>
      </div>
      <div v-else class="qr-loading">
        <el-icon class="is-loading"><Loading /></el-icon>
        <p>正在生成二维码...</p>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeQrCodeDialog">关闭</el-button>
        <el-button 
          v-if="qrCodeUrl"
          type="primary" 
          @click="downloadQRCode"
          icon="Download"
        >
          下载二维码
        </el-button>
      </div>
    </template>
  </el-dialog>
    <!-- 文档新增/修改对话框 -->
    <el-dialog
      v-model="documentDia"
@@ -371,7 +403,9 @@
const { proxy } = getCurrentInstance();
const tree = ref(null);
const containerRef = ref(null);

// 导入qrcode库
import QRCode from 'qrcode'
import { Loading, Download } from '@element-plus/icons-vue'
// 使用字典数据
const { confidentiality_level, document_urgency, document_status, document_type, document_categories, retention_period } = useDict('confidentiality_level', 'document_urgency', 'document_status', 'document_type', 'document_categories', 'retention_period')

@@ -407,6 +441,10 @@
// 位置树数据
const locationTree = ref([]);

// 二维码相关变量
const qrCodeDialogVisible = ref(false)
const qrCodeUrl = ref('')
const currentDocument = ref({})
// 表格列配置
const tableColumns = ref([
  { label: '文档名称', prop: 'docName', width: '200' },
@@ -568,7 +606,7 @@
    label: "操作",
    align: "center",
    fixed: 'right',
    width: '150',
    width: '200',
    operation: [
      {
        name: "编辑",
@@ -584,10 +622,74 @@
          openAttachment(row)
        },
      },
      {
        name: "生成二维码",
        type: "text",
        clickFun: (row) => {
          generateQRCode(row)
        },
      },
    ],
  }
]);
// 生成二维码
const generateQRCode = async (row) => {
  try {
    // 检查必要字段
    if (!row.docName || !row.docNumber) {
      ElMessage.warning('文档信息不完整，无法生成二维码')
      return
    }

    currentDocument.value = row
    qrCodeUrl.value = ''
    qrCodeDialogVisible.value = true
    
    // 构建二维码内容
    // const qrContent = `${row.id}|${row.docName}|${row.docNumber}`
    const qrContent = `${row.id}`
    // 生成二维码
    qrCodeUrl.value = await QRCode.toDataURL(qrContent, {
      width: 256,
      margin: 2,
      color: {
        dark: '#000000',
        light: '#FFFFFF'
      },
      errorCorrectionLevel: 'M'
    })
    
    // ElMessage.success('二维码生成成功！')
    
  } catch (error) {
    console.error('生成二维码失败:', error)
    ElMessage.error('生成二维码失败：' + error.message)
    qrCodeDialogVisible.value = false
  }
}

// 下载二维码
const downloadQRCode = () => {
  if (!qrCodeUrl.value) {
    ElMessage.warning('请先生成二维码')
    return
  }
  
  const a = document.createElement('a')
  a.href = qrCodeUrl.value
  a.download = `${currentDocument.value.docName}_二维码_${new Date().getTime()}.png`
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  ElMessage.success('下载成功！')
}

// 关闭二维码弹窗
const closeQrCodeDialog = () => {
  qrCodeDialogVisible.value = false
  qrCodeUrl.value = ''
  currentDocument.value = {}
}
// 分类表单
const categoryForm = reactive({
  category: "",
@@ -1259,4 +1361,56 @@
  color: #606266;
  font-size: 14px;
}
/* 二维码预览样式 */
.qr-code-container {
  text-align: center;
  padding: 20px;
}

.qr-code-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.qr-image {
  max-width: 100%;
  height: auto;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.qr-info {
  text-align: left;
  background: #f8f9fa;
  padding: 15px;
  border-radius: 8px;
  min-width: 300px;
}

.qr-info p {
  margin: 8px 0;
  color: #666;
  font-size: 14px;
}

.qr-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 40px 0;
}

.qr-loading .el-icon {
  font-size: 32px;
  color: #409EFF;
}

.qr-loading p {
  color: #666;
  margin: 0;
}
</style>