v1.9 优化设备中的设备台账相关页面，打印不好看问题等

wuxw
1 parent 7caa1e00
Showing 5 changed files with 91 additions and 77 deletions
src/views/community/locationManageList.vue
src/views/inspection/maintainanceItemList.vue
src/views/machine/equipmentAccountDetailList.vue
src/views/machine/equipmentAccountLang.js
src/views/resource/printEquipmentAccountLabelList.vue
@@ -15,13 +15,13 @@
               <el-input v-model="locationManageInfo.conditions.locationName"
                 :placeholder="$t('locationManage.enterLocationName')" clearable />
             </el-col>
-            <el-col :span="6">
+            <!-- <el-col :span="6">
               <el-select v-model="locationManageInfo.conditions.locationType"
                 :placeholder="$t('locationManage.selectLocationType')" style="width:100%" clearable>
                 <el-option v-for="item in locationTypeOptions" :key="item.value" :label="item.label"
                   :value="item.value" />
               </el-select>
-            </el-col>
+            </el-col> -->
             <el-col :span="4">
               <el-button type="primary" @click="_queryLocationMethod">
                 <i class="el-icon-search"></i>
@@ -35,9 +35,9 @@
           <el-button type="primary" size="small" @click="handleGoBack">
             {{ $t('common.back') }}
           </el-button>
-          <el-button type="primary" size="small" @click="handleShowDocument">
+          <!-- <el-button type="primary" size="small" @click="handleShowDocument">
             {{ $t('common.document') }}
-          </el-button>
+          </el-button> -->
           <el-button type="primary" size="small" @click="handleAdd">
             <i class="el-icon-plus" /> {{ $t('common.add') }}
           </el-button>
@@ -244,7 +244,7 @@ export default {
       this.$refs.viewImage.open(photo.url)
     },
     _printEquipmentDetail() {
-      window.open(`/#/pages/property/printEquipmentAccountLabel?machineId=${this.equipmentAccountDetail.machineId}`)
+      window.open(`/#/views/resource/printEquipmentAccountLabel?machineId=${this.equipmentAccountDetail.machineId}`)
     }
   }
 }
@@ -48,7 +48,9 @@ export const messages = {
       useUserName: 'User',
       chargeOrgName: 'Responsible Department',
       chargeUseName: 'Responsible Person',
-      remark: 'Remark'
+      remark: 'Remark',
+      printEquipmentAccount: 'Print Equipment Account',
+      selectEquipmentFirst: 'Please select equipment first'
     }
   },
   zh: {
@@ -100,7 +102,9 @@ export const messages = {
       useUserName: '使用人',
       chargeOrgName: '责任部门',
       chargeUseName: '责任人',
-      remark: '备注'
+      remark: '备注',
+      printEquipmentAccount: '打印设备资产标签',
+      selectEquipmentFirst: '请先选择设备'
     }
   }
 }
 \ No newline at end of file
 <template>
   <div class="print-equipment-account-label-container">
-    <el-card>
-      <div slot="header" class="flex justify-between">
-        <span>{{ $t('printEquipmentAccount.machineId') }}：{{ printEquipmentAccountInfo.machineId }}</span>
-
-        <span>{{ $t('printEquipmentAccount.printTime') }}：{{ nowTime }}</span>
+    <div>
+      <div class="row">
+        <div class="col-sm-4">
+          <span>{{ $t('printEquipmentAccount.machineId') }}：{{ printEquipmentAccountInfo.machineId }}</span>
+        </div>
+        <div class="col-sm-6">
+          <span></span>
+        </div>
+        <div class="col-sm-2">
+          <span>{{ $t('printEquipmentAccount.printTime') }}：{{ nowTime }}</span>
+        </div>
       </div>
-      <el-table :data="[printEquipmentAccountInfo]" border style="width: 100%; margin-top: 20px; margin-bottom: 0;">
-        <el-table-column prop="header" label="" colspan="6" align="center">
-          <template>
-            <span style="font-size: 40px;">{{ $t('printEquipmentAccount.equipmentLabel') }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="content" label="" colspan="2">
-          <template slot-scope="scope">
-            <el-row :gutter="20" style="font-size: 28px;">
-              <el-col :span="12">
-                <div>{{ $t('printEquipmentAccount.project') }}：{{ scope.row.yqName }}</div>
-              </el-col>
-              <el-col :span="12">
-                <div>{{ $t('printEquipmentAccount.locationName') }}：{{ scope.row.locationDetail }}</div>
-              </el-col>
-            </el-row>
-            <el-row :gutter="20" style="font-size: 28px;">
-              <el-col :span="12">
-                <div>{{ $t('printEquipmentAccount.machineName') }}：{{ scope.row.machineName }}</div>
-              </el-col>
-              <el-col :span="12">
-                <div>{{ $t('printEquipmentAccount.importanceLevel') }}：{{ scope.row.levelName }}</div>
-              </el-col>
-            </el-row>
-            <el-row :gutter="20" style="font-size: 28px;">
-              <el-col :span="12">
-                <div>{{ $t('printEquipmentAccount.systemName') }}：{{ scope.row.sysName }}</div>
-              </el-col>
-              <el-col :span="12">
-                <div>{{ $t('printEquipmentAccount.enableDate') }}：{{ scope.row.firstEnableTime }}</div>
-              </el-col>
-            </el-row>
-            <el-row :gutter="20" style="font-size: 28px;">
-              <el-col :span="12">
-                <div>{{ $t('printEquipmentAccount.machineBrand') }}：{{ scope.row.brand }}</div>
-              </el-col>
-              <el-col :span="12" rowspan="4">
-                <div id="qrcode" style="width:200px; height:200px;"></div>
-              </el-col>
-            </el-row>
-            <el-row :gutter="20" style="font-size: 28px;">
-              <el-col :span="12">
-                <div>{{ $t('printEquipmentAccount.specificationModel') }}：{{ scope.row.model }}</div>
-              </el-col>
-            </el-row>
-            <el-row :gutter="20" style="font-size: 28px;">
-              <el-col :span="12">
-                <div>{{ $t('printEquipmentAccount.code') }}：{{ scope.row.machineCode }}</div>
-              </el-col>
-            </el-row>
-            <el-row :gutter="20" style="font-size: 28px;">
-              <el-col :span="12">
-                <div>{{ $t('printEquipmentAccount.responsiblePerson') }}：{{ scope.row.chargeUseName }}</div>
-              </el-col>
-            </el-row>
-            <el-row :gutter="20" style="font-size: 28px;">
-              <el-col :span="24" align="center">
-                <div>设备标志 严禁损坏</div>
-              </el-col>
-            </el-row>
-          </template>
-        </el-table-column>
-      </el-table>
+      <table class="table table-bordered margin-top" style="margin-bottom: 0;">
+        <thead>
+          <tr>
+            <th scope="col" colspan="6" class="text-center">
+              <span style="font-size: 40px;">{{ $t('printEquipmentAccount.equipmentLabel') }}</span>
+            </th>
+          </tr>
+        </thead>
+        <tbody style="font-size: 28px;">
+          <tr>
+            <td>{{ $t('printEquipmentAccount.project') }}：{{ printEquipmentAccountInfo.yqName }}</td>
+            <td>{{ $t('printEquipmentAccount.locationName') }}：{{ printEquipmentAccountInfo.locationDetail }}</td>
+          </tr>
+          <tr>
+            <td>{{ $t('printEquipmentAccount.machineName') }}：{{ printEquipmentAccountInfo.machineName }}</td>
+            <td>{{ $t('printEquipmentAccount.importanceLevel') }}：{{ printEquipmentAccountInfo.levelName }}</td>
+          </tr>
+          <tr>
+            <td>{{ $t('printEquipmentAccount.systemName') }}：{{ printEquipmentAccountInfo.sysName }}</td>
+            <td>{{ $t('printEquipmentAccount.enableDate') }}：{{ printEquipmentAccountInfo.firstEnableTime }}</td>
+          </tr>
+          <tr>
+            <td>{{ $t('printEquipmentAccount.machineBrand') }}：{{ printEquipmentAccountInfo.brand }}</td>
+            <td rowspan="4">
+              <div id="qrcode" style="width:200px; height:200px;"></div>
+            </td>
+          </tr>
+          <tr>
+            <td>{{ $t('printEquipmentAccount.specificationModel') }}：{{ printEquipmentAccountInfo.model }}</td>
+          </tr>
+          <tr>
+            <td>{{ $t('printEquipmentAccount.code') }}：{{ printEquipmentAccountInfo.machineCode }}</td>
+          </tr>
+          <tr>
+            <td>{{ $t('printEquipmentAccount.responsiblePerson') }}：{{ printEquipmentAccountInfo.chargeUseName }}</td>
+          </tr>
+          <tr>
+            <td colspan="2" class="text-center">设备标志 严禁损坏</td>
+          </tr>
+        </tbody>
+      </table>
-      <div id="print-btn" style="margin-top: 20px;">
+      <div id="print-btn" class="btn-row">
         <el-button type="primary" class="float-right" @click="_printPurchaseApplyDiv">
           <i class="el-icon-check"></i>&nbsp;{{ $t('common.print') }}
         </el-button>
@@ -79,7 +63,7 @@
           {{ $t('common.cancel') }}
         </el-button>
       </div>
-    </el-card>
+    </div>
   </div>
 </template>
@@ -179,6 +163,30 @@ export default {
   padding: 20px;
 }
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+}
+.col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
+.col-sm-6 { flex: 0 0 50%; max-width: 50%; }
+.col-sm-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.table-bordered {
+  border: 1px solid #ebeef5;
+}
+.table-bordered th,
+.table-bordered td {
+  border: 1px solid #ebeef5;
+  padding: 12px 10px;
+}
+.text-center { text-align: center; }
+.margin-top { margin-top: 20px; }
+
 .float-right {
   float: right;
 }
@@ -187,6 +195,8 @@ export default {
   margin-top: 20px;
 }
+.btn-row { margin-top: 20px; }
+
 @media print {
   #print-btn {
     display: none !important;