更新二维码

package.json

@@ -38,6 +38,7 @@
     "mitt": "^3.0.1",
     "nprogress": "0.2.0",
     "pinia": "3.0.2",
+    "qrcode-vue3": "^1.7.1",
     "screenfull": "6.0.2",
     "vue": "3.5.13",
     "vue-cropper": "1.1.1",

src/views/equipmentManagement/devices/index.vue

@@ -129,6 +129,9 @@
               placement="top">
               <el-button link type="primary" icon="Refresh" @click="handleUnbind(scope.row)"></el-button>
             </el-tooltip>
+            <el-tooltip v-if="scope.row.deviceImei" content="查看二维码" placement="top">
+              <el-button link type="primary" icon="Postcard" @click="showQrCode(scope.row)"></el-button>
+            </el-tooltip>
           </template>
         </el-table-column>
       </el-table>
@@ -271,10 +274,23 @@
         </div>
       </template>
     </el-dialog>
+    <!-- IMEI 二维码弹窗 -->
+    <el-dialog v-model="qrCodeDialogVisible" title="设备IMEI二维码" width="300px" append-to-body>
+      <div style="text-align: center;">
+        <QRCodeVue3 :value="qrCodeValue" :size="200" />
+        <p style="margin-top: 10px;">{{ qrCodeValue }}</p>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="qrCodeDialogVisible = false">关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup name="User" lang="ts">
+import QRCodeVue3 from 'qrcode-vue3';
 import api from '@/api/equipmentManagement/device/index';
 import { deviceForm, deviceQuery, deviceVO, deviceTypeOption } from '@/api/equipmentManagement/device/types';
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -305,6 +321,8 @@ const loadingIng = ref(false)
 const assignCustomerId = ref(); //分配客户id
 const batchAssignCustomerId = ref() //批量分配客户id
 const customerList = ref()
+const qrCodeDialogVisible = ref(false);
+const qrCodeValue = ref('');
 const dialog = reactive<DialogOption>({
   visible: false,
   title: ''
@@ -371,7 +389,7 @@ const handleDelete = async (row?: deviceVO) => {
   // 批量删除逻辑
   let arrey = ids.value.map((item) => item.id);
   if (!row) {
-    const [err] = await to(proxy?.$modal.confirm(`是否确认删除选中的 ${ids.value.length} 条数据？`));
+    const [err] = await to(proxy?.$modal.confirm(`是否确认删除选中的 ${ids.value.length} 条数据？`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }));
     if (!err) {
       await api.deleteDevice(arrey);
       await getList();
@@ -380,7 +398,7 @@ const handleDelete = async (row?: deviceVO) => {
     return;
   }
   // 单行删除逻辑
-  const [err] = await to(proxy?.$modal.confirm('是否确认删除"' + row.deviceName + '"的数据项？'));
+  const [err] = await to(proxy?.$modal.confirm('是否确认删除"' + row.deviceName + '"的数据项？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }));
   if (!err) {
     await api.deleteDevice([row.id]);
     await getList();
@@ -657,6 +675,13 @@ const closeDialog = () => {
   resetForm();
 };
 
+const showQrCode = (row: any) => {
+  if (row.deviceImei) {
+    qrCodeValue.value = row.deviceImei;
+    qrCodeDialogVisible.value = true;
+  }
+};
+
 /**
  * 重置表单
  */