1.设备台帐二维码上加上设备名称

gaoluyang

2025-11-18 e611254efd3cea20853ceca9c445cdb332e1bf63

 src/views/equipmentManagement/ledger/index.vue

@@ -41,6 +41,10 @@
            @change="getTableData"
        />
      </el-form-item>
      <el-form-item label="录入日期:">
        <el-date-picker v-model="filters.entryDate" value-format="YYYY-MM-DD" format="YYYY-MM-DD" type="daterange"
                        placeholder="请选择" clearable @change="changeDaterange" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getTableData">搜索</el-button>
        <el-button @click="resetFilters">重置</el-button>
@@ -75,22 +79,18 @@
        @selection-change="handleSelectionChange"
        @pagination="changePage"
      >
        <template #operation="{ row }">
          <el-button type="primary" text @click="edit(row.id)" icon="editPen">
            编辑
          </el-button>
          <el-button
            type="danger"
            text
            icon="delete"
            @click="deleteRow(row.id)"
          >
            删除
          </el-button>
        </template>
      </PIMTable>
    </div>
    <Modal ref="modalRef" @success="getTableData"></Modal>
      <el-dialog v-model="qrDialogVisible" title="二维码" width="300px">
         <div style="text-align:center;">
            <img :src="qrCodeUrl" alt="二维码" style="width:200px;height:200px;" />
            <div style="margin-top:6px;font-size:14px;color:#333;">{{ qrRowData?.deviceName }}</div>
            <div style="margin:10px 0;">
               <el-button type="primary" @click="downloadQRCode">下载二维码图片</el-button>
            </div>
         </div>
      </el-dialog>
  </div>
</template>

@@ -101,6 +101,9 @@
import { onMounted, getCurrentInstance } from "vue";
import Modal from "./Modal.vue";
import { ElMessageBox, ElMessage } from "element-plus";
import dayjs from "dayjs";
import QRCode from "qrcode";
import { ref } from "vue";

defineOptions({
  name: "设备台账",
@@ -110,6 +113,10 @@
const multipleList = ref([]);
const { proxy } = getCurrentInstance();
const modalRef = ref();
const qrDialogVisible = ref(false);
const qrCodeUrl = ref("");
const qrRowData = ref(null);

const {
  filters,
  columns,
@@ -121,7 +128,12 @@
} = usePaginationApi(
  getLedgerPage,
  {
    searchText: undefined,
    deviceName: undefined,
    deviceModel: undefined,
    supplierName: undefined,
    unit: undefined,
    entryDateStart: undefined,
    entryDateEnd: undefined,
  },
  [
    {
@@ -135,6 +147,11 @@
      prop: "deviceModel",
    },
    {
      label: "设备品牌",
      align: "center",
      prop: "deviceBrand",
    },
    {
      label: "供应商",
      align: "center",
      prop: "supplierName",
@@ -143,6 +160,11 @@
      label: "单位",
      align: "center",
      prop: "unit",
    },
    {
      label: "存放位置",
      align: "center",
      prop: "storageLocation",
    },
    {
      label: "数量",
@@ -170,6 +192,12 @@
      prop: "unTaxIncludingPriceTotal",
    },
    {
      label: "启用折旧",
      align: "center",
      prop: "enableDepreciation",
      formatData: (v) => (v ? "是" : "否"),
    },
    {
      label: "录入人",
      align: "center",
      prop: "createUser",
@@ -179,14 +207,29 @@
      align: "center",
      prop: "createTime",
    },
    {
      fixed: "right",
      label: "操作",
      dataType: "slot",
      slot: "operation",
      align: "center",
      width: "200px",
    },
      {
         dataType: "action",
         label: "操作",
         align: "center",
         fixed: 'right',
         width: 150,
         operation: [
            {
               name: "编辑",
               type: "text",
               clickFun: (row) => {
                  edit(row.id)
               },
            },
            {
               name: "生成二维码",
               type: "text",
               clickFun: (row) => {
                  showQRCode(row)
               },
            },
         ],
      },
  ]
);

@@ -223,6 +266,17 @@
  });
};

const changeDaterange = (value) => {
  if (value) {
    filters.entryDateStart = dayjs(value[0]).format("YYYY-MM-DD");
    filters.entryDateEnd = dayjs(value[1]).format("YYYY-MM-DD");
  } else {
    filters.entryDateStart = undefined;
    filters.entryDateEnd = undefined;
  }
  getTableData();
};

const handleOut = () => {
  ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
    confirmButtonText: "确认",
@@ -237,6 +291,55 @@
    });
};

const showQRCode = async (row) => {
  // 直接使用URL，不要用JSON.stringify包装
  const qrContent = proxy.javaApi + '/device-info?deviceId=' + row.id;
  qrCodeUrl.value = await QRCode.toDataURL(qrContent);
  qrRowData.value = row;
  qrDialogVisible.value = true;
};

const downloadQRCode = () => {
   const name = qrRowData.value?.deviceName || "二维码";
   const img = new Image();
   img.src = qrCodeUrl.value;
   img.onload = () => {
      const padding = 10;
      const qrSize = 200;
      const textHeight = 24; // space for text
      const width = qrSize + padding * 2;
      const height = qrSize + padding * 2 + textHeight;
      const canvas = document.createElement("canvas");
      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext("2d");
      // background
      ctx.fillStyle = "#ffffff";
      ctx.fillRect(0, 0, width, height);
      // draw QR centered
      ctx.drawImage(img, padding, padding, qrSize, qrSize);
      // draw name centered below
      ctx.fillStyle = "#333";
      ctx.font = "14px Arial";
      ctx.textAlign = "center";
      ctx.textBaseline = "middle";
      const maxTextWidth = width - padding * 2;
      let displayName = name;
      // ellipsis if too long
      while (ctx.measureText(displayName).width > maxTextWidth && displayName.length > 0) {
         displayName = displayName.slice(0, -1);
      }
      if (displayName !== name) displayName = displayName + "…";
      ctx.fillText(displayName, width / 2, qrSize + padding + textHeight / 2);
		
      const dataUrl = canvas.toDataURL("image/png");
      const a = document.createElement("a");
      a.href = dataUrl;
      a.download = `${name}.png`;
      a.click();
   };
};

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