采购管理添加生成二维码功能

gaoluyang

2025-08-13 a44462fe0bad76ddfd180e54c41b79519cbfbcee

采购管理添加生成二维码功能

 src/views/procurementManagement/procurementLedger/index.vue

@@ -145,7 +145,7 @@
        <el-table-column
          fixed="right"
          label="操作"
          min-width="60"
          min-width="150"
          align="center"
        >
          <template #default="scope">
@@ -156,6 +156,13 @@
              @click="openForm('edit', scope.row)"
                            :disabled="scope.row.receiptPaymentAmount>0 || scope.row.recorderName !== userStore.nickName"
              >编辑</el-button
            >
            <el-button
              link
              type="success"
              size="small"
              @click="showQRCode(scope.row)"
              >生成二维码</el-button
            >
          </template>
        </el-table-column>
@@ -539,13 +546,28 @@
        </div>
      </template>
    </el-dialog>
    
    <!-- 二维码显示对话框 -->
    <el-dialog
      v-model="qrCodeDialogVisible"
      title="采购合同号二维码"
      width="400px"
      center
    >
      <div style="text-align: center;">
        <img :src="qrCodeUrl" alt="二维码" style="width:200px;height:200px;" />
        <div style="margin: 20px;">
          <el-button type="primary" @click="downloadQRCode">下载二维码图片</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { getToken } from "@/utils/auth";
import pagination from "@/components/PIMTable/Pagination.vue";
import { ref, onMounted } from "vue";
import { ref, onMounted, reactive, toRefs, getCurrentInstance, nextTick } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ElMessageBox } from "element-plus";
import { userListNoPage } from "@/api/system/user.js";
@@ -567,6 +589,7 @@
  createPurchaseNo,
} from "@/api/procurementManagement/procurementLedger.js";
import useFormData from "@/hooks/useFormData.js";
import QRCode from "qrcode";
const { proxy } = getCurrentInstance();
const tableData = ref([]);
const productData = ref([]);
@@ -589,6 +612,10 @@
import dayjs from "dayjs";

const userStore = useUserStore();

// 二维码相关变量
const qrCodeDialogVisible = ref(false);
const qrCodeUrl = ref("");

// 用户信息表单弹框数据
const operationType = ref("");
@@ -1152,6 +1179,47 @@
  }
};

// 显示二维码
const showQRCode = async (row) => {
  try {
    // 构建二维码内容，只包含采购合同号（纯文本）
    const qrContent = row.purchaseContractNumber || '';
    // 检查内容是否为空
    if (!qrContent || qrContent.trim() === '') {
      proxy.$modal.msgWarning("该行没有采购合同号，无法生成二维码");
      return;
    }
    qrCodeUrl.value = await QRCode.toDataURL(qrContent, {
      width: 200,
      margin: 2,
      color: {
        dark: '#000000',
        light: '#FFFFFF'
      }
    });
    qrCodeDialogVisible.value = true;
  } catch (error) {
    console.error('生成二维码失败:', error);
    proxy.$modal.msgError("生成二维码失败：" + error.message);
  }
};

// 下载二维码
const downloadQRCode = () => {
  if (!qrCodeUrl.value) {
    proxy.$modal.msgWarning("二维码未生成");
    return;
  }
  
  const a = document.createElement('a');
  a.href = qrCodeUrl.value;
  a.download = `采购合同号二维码_${new Date().getTime()}.png`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  proxy.$modal.msgSuccess("下载成功");
};

onMounted(() => {
  getList();
});