增加图片上传

src/api/mes/criticalComponent/index.ts

@@ -10,6 +10,7 @@ export interface CriticalComponentVO {
   remark?: string
   qrcodeUrl?: string
   createTime?: string
+  images?: string
 }
 
 export const CriticalComponentApi = {

src/api/mes/deviceledger/index.ts

@@ -42,6 +42,7 @@ export interface DeviceLedgerVO {
   createTime?: string | number | Date
   updateTime?: string | number | Date
   sort: number // 排序
+  images?: string // 图片
 }
 
 // 设备类型 API

src/locales/en.ts

@@ -1295,7 +1295,8 @@ export default {
       qrcodeLoadError: 'Failed to load QR code',
       qrcodeEmpty: 'No QR code',
       validatorCodeRequired: 'Code can not be empty',
-      validatorNameRequired: 'Name can not be empty'
+      validatorNameRequired: 'Name can not be empty',
+      images:'images'
     },
     // Maintenance Project (Project Maintenance)
     DvSubject: {

src/locales/zh-CN.ts

@@ -771,7 +771,7 @@ export default {
     save: '保存',
     detail: '详情',
     export: '导出',
-    import: '导入',
+    import: '',
     approve: '审批',
     unapprove: '反审批',
     generate: '生成',
@@ -972,7 +972,7 @@ export default {
       actions: '操作',
       password: '用户密码',
       role: '角色',
-      import: '用户导入',
+      import: '用户',
       importDragText: '将文件拖到此处，或',
       importClickText: '点击上传',
       importUpdateSupport: '是否更新已经存在的用户数据',
@@ -1291,7 +1291,8 @@ export default {
       qrcodeLoadError: '二维码加载失败',
       qrcodeEmpty: '暂无二维码',
       validatorCodeRequired: '编码不能为空',
-      validatorNameRequired: '名称不能为空'
+      validatorNameRequired: '名称不能为空',
+      images:'图片'
     },
     // 项目维护
     DvSubject: {

src/views/mes/criticalComponent/CriticalComponentForm.vue

@@ -52,6 +52,13 @@
           type="number"
         />
       </el-form-item>
+      <el-row :gutter="16">
+        <!-- <el-col :span="24">
+          <el-form-item label="资产编号" prop="id">
+            <el-input v-model="formData.id" placeholder="系统自动生成" disabled />
+          </el-form-item>
+        </el-col> -->
+        <el-col :span="12" >
       <el-form-item v-if="formType === 'update'" :label="t('EquipmentManagement.EquipmentKeyItems.qrcode')" prop="qrcodeUrl">
         <QrcodeActionCard
           :image-url="formData.qrcodeUrl"
@@ -68,6 +75,13 @@
           @refresh-success="handleQrcodeRefreshSuccess"
         />
       </el-form-item>
+          </el-col>
+        <el-col :span="12" >
+          <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.images')" prop="images">
+            <UploadImg style="height: 100px" v-model="formData.images" />
+          </el-form-item>
+        </el-col>
+        </el-row>
       <el-form-item :label="t('EquipmentManagement.EquipmentKeyItems.remark')" prop="remark">
         <el-input
           v-model="formData.remark"
@@ -87,6 +101,7 @@
 <script setup lang="ts">
 import { CriticalComponentApi, CriticalComponentVO } from '@/api/mes/criticalComponent'
 import QrcodeActionCard from '@/components/QrcodeActionCard/index.vue'
+import UploadImg from "@/components/UploadFile/src/UploadImg.vue";
 
 defineOptions({ name: 'CriticalComponentForm' })
 
@@ -107,7 +122,8 @@ const formData = ref<Partial<CriticalComponentVO>>({
   description: undefined,
   count: undefined,
   remark: undefined,
-  qrcodeUrl: undefined
+  qrcodeUrl: undefined,
+  images: undefined
 })
 
 const validateCode = (_rule, value, callback) => {
@@ -182,7 +198,8 @@ const open = async (type: 'create' | 'update', id?: number) => {
         description: detail?.description,
         count: detail?.count,
         remark: detail?.remark,
-        qrcodeUrl: detail?.qrcodeUrl
+        qrcodeUrl: detail?.qrcodeUrl,
+        images: detail?.images
       }
     } finally {
       formLoading.value = false

src/views/mes/deviceledger/index.vue

@@ -317,7 +317,7 @@
 
 
         </el-descriptions>
-            <div v-if="detailData?.qrcodeUrl" class="device-ledger-detail-qrcode">
+<!--            <div v-if="detailData?.qrcodeUrl" class="device-ledger-detail-qrcode">
               <QrcodeActionCard
                 :image-url="detailData.qrcodeUrl"
                 :print-id="detailData.id || detailData.deviceCode"
@@ -329,7 +329,29 @@
                 :error-text="t('EquipmentManagement.EquipmentLedger.qrcodeLoadError')"
                 :show-refresh="false"
               />
-            </div>
+              <UploadImg style="height: 100px" :v-model="detailData?.images" disabled="false" />
+            </div>-->
+
+        <div class="container">
+          <div v-if="detailData?.qrcodeUrl" >
+            <QrcodeActionCard
+              :image-url="detailData.qrcodeUrl"
+              :print-id="detailData.id || detailData.deviceCode"
+              :print-title="`${detailData.deviceName || '设备'}码打印预览`"
+              :print-paper-width="80"
+              :print-paper-height="80"
+              :print-max-width="220"
+              :empty-text="t('EquipmentManagement.EquipmentLedger.qrcodeLoadError')"
+              :error-text="t('EquipmentManagement.EquipmentLedger.qrcodeLoadError')"
+              :show-refresh="false"
+            />
+          </div>
+          <div v-if="detailData?.images">
+<!--            <UploadImg style="height: 100px" v-model="detailData?.images" :disabled="false" />-->
+            <img :src="detailData?.images" class="upload-image" />
+          </div>
+        </div>
+
         <el-tabs v-model="detailActiveTab" class="mt-12px">
           <el-tab-pane :label="t('EquipmentManagement.EquipmentLedger.checkHistory')" name="check">
             <div style="margin-bottom: 16px;">
@@ -1484,6 +1506,26 @@ onMounted(async () => {
 </script>
 
 <style lang="scss" scoped>
+
+.container {
+  margin-top: 10px;
+  display: flex;           /* 关键：开启弹性布局 */
+  gap: 20px;              /* 可选：两个div之间的间距 */
+}
+.left-div, .right-div {
+  //flex: 1;                /* 关键：让两个div等宽 */
+  /* 或者设置固定宽度，如 width: 300px; */
+
+  border: 1px solid #ccc;
+}
+
+.upload-image {
+  width: 150px;
+  height: 150px;
+  object-fit: contain;
+  border: 1px solid #ccc;
+}
+
 .device-ledger-layout {
   display: flex;
   gap: 12px;