新疆_马铃薯 1.角色管理页面角色编号不展示

gaoluyang

2026-08-04 760433983d2ab722774bc3384a789f3ddf2c4dd8

 src/views/equipmentManagement/inspectionManagement/components/qrCodeDia.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,132 @@
<template>
  <div>
    <el-dialog :title="operationType === 'add' ? '新增二维码' : '编辑二维码'"
               v-model="dialogVisitable" width="500px" @close="cancel">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="设备名称" prop="deviceName">
              <el-input v-model="form.deviceName" placeholder="请输入设备名称" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="所在位置描述" prop="location">
              <el-input v-model="form.location" placeholder="请输入所在位置描述" maxlength="30"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div>
        <el-button type="primary" @click="submitForm">生成并打印二维码</el-button>
      </div>
      <div v-if="isShowQrCode" class="print-section" ref="qrCodeContainer" id="qrCodeContainer">
        <vue-qrcode :value="qrCodeValue" :width="qrCodeSize"></vue-qrcode>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import useUserStore from "@/store/modules/user.js";
import {reactive, ref} from "vue";
import printJS from 'print-js';
import {addOrEditQrCode} from "@/api/inspectionUpload/index.js";

const { proxy } = getCurrentInstance()
const emit = defineEmits()
const userStore = useUserStore()
const dialogVisitable = ref(false);
const isShowQrCode = ref(false);
const operationType = ref('add');

const qrCodeValue = ref('');
const qrCodeSize = ref(100);
const data = reactive({
  form: {
    deviceName: '',
    location: '',
    qrCodeId: '',
    id: ''
  },
  rules: {
    deviceName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
    location: [{ required: true, message: '请输入地点', trigger: 'blur' }]
  }
})
const { form, rules } = toRefs(data)


// æ‰“开弹框
const openDialog = async (type, row) => {
  dialogVisitable.value = true
  qrCodeValue.value = ''
  isShowQrCode.value = false;
  if (type === 'edit') {
    form.value.id = row.id
    form.value.qrCodeId = row.id
    form.value.deviceName = row.deviceName
    form.value.location = row.location
    // å°†è¡¨å•æ•°æ®è½¬ä¸º JSON å­—符串作为二维码内容
    qrCodeValue.value = JSON.stringify(form.value);
    isShowQrCode.value = true;
  }
}
// æäº¤åˆå¹¶è¡¨å•
const submitForm = () => {
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
      addOrEditQrCode(form.value).then((res) => {
        form.value.qrCodeId = res.data
      })
      // å°†è¡¨å•æ•°æ®è½¬ä¸º JSON å­—符串作为二维码内容
      qrCodeValue.value = JSON.stringify(form.value);
      isShowQrCode.value = true;
      showQrCode()
    }
  })
}
const showQrCode = () => {
  // å»¶è¿Ÿæ‰§è¡Œæ‰“印，避免 DOM æ›´æ–°å‰å°±è°ƒç”¨æ‰“印
  setTimeout(() => {
    printJS({
      printable: 'qrCodeContainer',//页面
      type: "html",//文档类型
      maxWidth: 360,
      style: `@page {
                margin:0;
                size: 400px 75px collapse;
                margin-top:3px;
                &:first-of-type{
                  margin-top:0 !important;
                }
              }
              html{
                zoom:100%;
              }
              @media print{
                width: 400px;
                height: 75px;
                margin:0;
              }`,
      targetStyles: ["*"], // ä½¿ç”¨dom的所有样式，很重要
      font_size: '0.20cm',
    });
  }, 300);
}
// å…³é—­åˆå¹¶è¡¨å•
const cancel = () => {
  proxy.resetForm("formRef")
  dialogVisitable.value = false
  emit('closeDia')
}
defineExpose({ openDialog })
</script>

<style scoped>
.print-section {
  text-align: center;
  margin-top: 30px;
}
</style>