From 5711798e5618511eced42557cfc9f63d40e64336 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期五, 21 三月 2025 16:30:10 +0800
Subject: [PATCH] 设备页面-样式优化

---
 src/views/CNAS/resourceDemand/device/component/equipmentCalibrationPlan.vue      |   67 ++++--
 src/views/CNAS/resourceDemand/device/component/quantityValueTraceabilityPlan.vue |    4 
 src/views/CNAS/resourceDemand/device/component/deviceOverview.vue                |  273 +++++++++++-------------
 src/views/CNAS/resourceDemand/device/component/files.vue                         |    7 
 src/views/CNAS/resourceDemand/device/component/management.vue                    |   92 +++----
 src/views/CNAS/resourceDemand/device/component/record.vue                        |  103 ++------
 src/views/CNAS/resourceDemand/device/component/usingExternalInstruments.vue      |   27 +-
 src/views/CNAS/resourceDemand/device/component/equipmentVerificationPlan.vue     |   67 ++++--
 src/views/CNAS/resourceDemand/device/component/equipmentMaintenancePlan.vue      |    4 
 9 files changed, 296 insertions(+), 348 deletions(-)

diff --git a/src/views/CNAS/resourceDemand/device/component/deviceOverview.vue b/src/views/CNAS/resourceDemand/device/component/deviceOverview.vue
index bb5ae55..1bdd8e4 100644
--- a/src/views/CNAS/resourceDemand/device/component/deviceOverview.vue
+++ b/src/views/CNAS/resourceDemand/device/component/deviceOverview.vue
@@ -1,158 +1,8 @@
 <!-- 璁惧鎬昏 -->
-<style scoped>
-.title {
-  height: 60px;
-  line-height: 60px;
-}
-
-.search {
-  background-color: #fff;
-  height: 50px;
-  display: flex;
-  align-items: center;
-}
-
-.search_thing {
-  width: 350px;
-  display: flex;
-  align-items: center;
-}
-
-.search_label {
-  width: 110px;
-  font-size: 14px;
-  text-align: left;
-}
-
-.search_input {
-  width: calc(100% - 110px);
-}
-
-.table {
-  background-color: #fff;
-  height: calc(100vh - 17em);
-  /* padding: 10px; */
-  overflow-y: auto;
-}
-
-.card {
-  list-style-type: none;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, 330px);
-  justify-content: start;
-  grid-gap: 16px;
-  min-height: 300px;
-  padding-left: 0;
-}
-
-.card li {
-  width: 330px;
-  height: 165px;
-  border-radius: 8px 8px 8px 8px;
-  border: 1px solid #EEEEEE;
-  margin: 0 !important;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 16px;
-  font-size: 14px;
-  color: #666666;
-  position: relative;
-  overflow: hidden;
-}
-
-.card li .img {
-  width: 90px;
-  height: 90px;
-  border-radius: 16px;
-  margin-right: 10px;
-}
-
-.list-left .list-left-info {
-  line-height: 36px;
-  display: flex;
-}
-
-.text-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap
-}
-
-.circles {
-  position: absolute;
-  width: 70px;
-  height: 70px;
-  right: 0;
-  top: 0;
-  z-index: 0;
-}
-
-.circles .circle {
-  border-radius: 50%;
-  opacity: 0.2;
-}
-
-.circle0,
-.circle1,
-.circle2 {
-  width: 60px;
-  height: 60px;
-  position: absolute;
-}
-
-.circle3 {
-  width: 16px;
-  height: 16px;
-  position: absolute;
-}
-
-.circle0 {
-  bottom: 6px;
-  left: 0;
-}
-
-.circle1 {
-  bottom: 0;
-  right: -30px;
-}
-
-.circle2 {
-  left: 0;
-  top: -30px;
-}
-
-.circle3 {
-  top: 0;
-  right: 0;
-}
-
-.success .circle {
-  background: #34BD66;
-}
-
-.danger .circle {
-  background: #FF3838;
-}
-
-.warning .circle {
-  background: #FBB247;
-}
-
-.info .circle {
-  background: #909399;
-}
-
-.el-form-item {
-  margin-top: 11px;
-  margin-bottom: 11px;
-}
-</style>
-
 <template>
   <div class="role_manage">
     <div>
-      <el-form :model="entity" inline label-position="right" label-width="80px">
+      <el-form :model="entity" inline label-position="right">
         <el-form-item label="鐘舵��:">
           <el-select v-model="entity.deviceStatus" placeholder="鍏ㄩ儴" size="small" clearable>
             <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
@@ -387,3 +237,124 @@
   }
 }
 </script>
+<style scoped>
+.table {
+  background-color: #fff;
+  height: calc(100vh - 17em);
+  /* padding: 10px; */
+  overflow-y: auto;
+}
+
+.card {
+  list-style-type: none;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 330px);
+  justify-content: start;
+  grid-gap: 16px;
+  min-height: 300px;
+  padding-left: 0;
+}
+
+.card li {
+  width: 330px;
+  height: 165px;
+  border-radius: 8px 8px 8px 8px;
+  border: 1px solid #EEEEEE;
+  margin: 0 !important;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 16px;
+  font-size: 14px;
+  color: #666666;
+  position: relative;
+  overflow: hidden;
+}
+
+.card li .img {
+  width: 90px;
+  height: 90px;
+  border-radius: 16px;
+  margin-right: 10px;
+}
+
+.list-left .list-left-info {
+  line-height: 36px;
+  display: flex;
+}
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap
+}
+
+.circles {
+  position: absolute;
+  width: 70px;
+  height: 70px;
+  right: 0;
+  top: 0;
+  z-index: 0;
+}
+
+.circles .circle {
+  border-radius: 50%;
+  opacity: 0.2;
+}
+
+.circle0,
+.circle1,
+.circle2 {
+  width: 60px;
+  height: 60px;
+  position: absolute;
+}
+
+.circle3 {
+  width: 16px;
+  height: 16px;
+  position: absolute;
+}
+
+.circle0 {
+  bottom: 6px;
+  left: 0;
+}
+
+.circle1 {
+  bottom: 0;
+  right: -30px;
+}
+
+.circle2 {
+  left: 0;
+  top: -30px;
+}
+
+.circle3 {
+  top: 0;
+  right: 0;
+}
+
+.success .circle {
+  background: #34BD66;
+}
+
+.danger .circle {
+  background: #FF3838;
+}
+
+.warning .circle {
+  background: #FBB247;
+}
+
+.info .circle {
+  background: #909399;
+}
+
+.el-form-item {
+  margin-top: 11px;
+  margin-bottom: 11px;
+}
+</style>
diff --git a/src/views/CNAS/resourceDemand/device/component/equipmentCalibrationPlan.vue b/src/views/CNAS/resourceDemand/device/component/equipmentCalibrationPlan.vue
index 4e44623..4ac34e9 100644
--- a/src/views/CNAS/resourceDemand/device/component/equipmentCalibrationPlan.vue
+++ b/src/views/CNAS/resourceDemand/device/component/equipmentCalibrationPlan.vue
@@ -3,10 +3,12 @@
   <div>
     <div>
       <div style="margin: 10px 0;display: flex;align-items: center;justify-content: space-between;">
-        <span>骞村害璁″垝琛�</span>
+        <div class="title">
+          <span style="font-weight: bold">骞村害璁″垝琛�</span>
+        </div>
         <div>
           <el-button size="small" type="primary" @click="getYearTableData">鍒锋柊</el-button>
-          <el-button style="margin-right: 10px" size="small" type="primary" @click="addYearPlan('add')">鏂板</el-button>
+          <el-button size="small" type="primary" @click="addYearPlan('add')">鏂板</el-button>
           <!--          <el-button size="small" type="primary" @click="record">瀵煎叆</el-button>-->
         </div>
       </div>
@@ -20,7 +22,7 @@
           <el-table-column label="骞翠唤" min-width="80" prop="planYear"></el-table-column>
           <el-table-column label="璁″垝鍚嶇О" min-width="180" prop="planName"></el-table-column>
           <el-table-column label="缂栧埗浜�" min-width="100" prop="writeName"></el-table-column>
-          <el-table-column label="缂栧埗鏃ユ湡" min-width="150" prop="writeTime"></el-table-column>
+          <el-table-column label="缂栧埗鏃ユ湡" min-width="160" prop="writeTime"></el-table-column>
           <el-table-column label="鎵瑰噯鐘舵��" min-width="100" prop="ratifyStatus">
             <template slot-scope="scope">
               <el-tag v-if="scope.row.ratifyStatus === 1" type="success">鎵瑰噯</el-tag>
@@ -46,23 +48,29 @@
           </el-table-column>
         </el-table>
         <el-pagination :current-page="1" :page-size="pagination.size" :page-sizes="[10, 20, 30, 50, 100]"
-          :total="pagination.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
-          @current-change="handleCurrentChange">
+                       background :total="pagination.total" layout="->,total, sizes, prev, pager, next, jumper"
+                       @size-change="handleSizeChange" @current-change="handleCurrentChange">
         </el-pagination>
       </div>
     </div>
     <div>
-      <span>骞村害璁″垝鏄庣粏琛�</span>
       <div class="title">
-        <div class="title-search">
-          <span style="width: 120px;font-size: 14px">璁惧鍚嶇О鍙婂瀷鍙凤細</span>
-          <el-input v-model="searchForm.deviceName" clearable size="small"
-            style="margin-right: 10px;width: 220px"></el-input>
-          <span style="width: 80px;font-size: 14px">浠櫒缂栧彿锛�</span>
-          <el-input v-model="searchForm.deviceNumber" clearable size="small"
-            style="margin-right: 10px;width: 220px"></el-input>
-          <el-button size="mini" type="primary" @click="getYearTableDetailData(currentRow)">鏌ヨ</el-button>
-          <el-button size="mini" @click="reset">閲嶇疆</el-button>
+        <span style="font-weight: bold">骞村害璁″垝鏄庣粏琛�</span>
+      </div>
+      <div class="search">
+        <div>
+          <el-form :model="searchForm" ref="searchForm" size="small" :inline="true">
+            <el-form-item label="璁惧鍚嶇О鍙婂瀷鍙�" prop="deviceName">
+              <el-input v-model="searchForm.deviceName" clearable size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="浠櫒缂栧彿" prop="deviceNumber">
+              <el-input v-model="searchForm.deviceNumber" clearable size="small"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" size="mini" @click="getYearTableDetailData(currentRow)">鏌ヨ</el-button>
+              <el-button size="mini" @click="reset">閲嶇疆</el-button>
+            </el-form-item>
+          </el-form>
         </div>
         <div>
           <el-button size="small" type="primary" @click="handleForm('add')">鏂板</el-button>
@@ -94,8 +102,8 @@
           </el-table-column>
         </el-table>
         <el-pagination :current-page="1" :page-size="pagination1.size" :page-sizes="[10, 20, 30, 50, 100]"
-          :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper"
-          @size-change="handleSizeChange1" @current-change="handleCurrentChange1">
+                       background :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper"
+                       @size-change="handleSizeChange1" @current-change="handleCurrentChange1">
         </el-pagination>
       </div>
     </div>
@@ -597,14 +605,27 @@
 
 <style scoped>
 .title {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  position: relative;
+  font-size: 16px;
+  color: #333;
+  font-weight: 400;
+  padding-left: 10px;
+  margin-bottom: 10px;
 }
 
-.title-search {
+.title::before {
+  position: absolute;
+  left: 0;
+  top: 4px;
+  content: '';
+  width: 4px;
+  height: 16px;
+  background-color: #3A7BFA;
+  border-radius: 2px;
+}
+.search {
+  height: 46px;
   display: flex;
-  align-items: center;
-  margin: 10px 0;
+  justify-content: space-between;
 }
 </style>
diff --git a/src/views/CNAS/resourceDemand/device/component/equipmentMaintenancePlan.vue b/src/views/CNAS/resourceDemand/device/component/equipmentMaintenancePlan.vue
index 7726223..424bfe6 100644
--- a/src/views/CNAS/resourceDemand/device/component/equipmentMaintenancePlan.vue
+++ b/src/views/CNAS/resourceDemand/device/component/equipmentMaintenancePlan.vue
@@ -14,7 +14,7 @@
             width="70"></el-table-column>
           <el-table-column label="骞翠唤" min-width="80" prop="planYear"></el-table-column>
           <el-table-column label="缂栧埗浜�" min-width="120" prop="compiler"></el-table-column>
-          <el-table-column label="缂栧埗鏃堕棿" min-width="150" prop="datePreparation"></el-table-column>
+          <el-table-column label="缂栧埗鏃堕棿" min-width="160" prop="datePreparation"></el-table-column>
           <el-table-column label="瀹℃牳浜�" min-width="150" prop="audit"></el-table-column>
           <el-table-column label="瀹℃牳鏃堕棿" min-width="180" prop="auditDate"></el-table-column>
           <el-table-column label="瀹℃牳鐘舵��" min-width="180" prop="status">
@@ -39,7 +39,7 @@
           </el-table-column>
         </el-table>
         <el-pagination :current-page="1" :page-size="pagination1.size" :page-sizes="[10, 20, 30, 50, 100]"
-          :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper"
+          :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper" background
           @size-change="handleSizeChange1" @current-change="handleCurrentChange1">
         </el-pagination>
       </div>
diff --git a/src/views/CNAS/resourceDemand/device/component/equipmentVerificationPlan.vue b/src/views/CNAS/resourceDemand/device/component/equipmentVerificationPlan.vue
index 09150de..6cb7975 100644
--- a/src/views/CNAS/resourceDemand/device/component/equipmentVerificationPlan.vue
+++ b/src/views/CNAS/resourceDemand/device/component/equipmentVerificationPlan.vue
@@ -3,10 +3,12 @@
   <div>
     <div>
       <div style="margin: 10px 0;display: flex;align-items: center;justify-content: space-between;">
-        <span>骞村害璁″垝琛�</span>
+        <div class="title">
+          <span style="font-weight: bold">骞村害璁″垝琛�</span>
+        </div>
         <div style="display: flex;align-items: center;">
-          <el-button style="margin-right: 10px" size="small" type="primary" @click="getYearTableData">鍒锋柊</el-button>
-          <el-button style="margin-right: 10px" size="small" type="primary" @click="addYearPlan('add')">鏂板</el-button>
+          <el-button size="small" type="primary" @click="getYearTableData">鍒锋柊</el-button>
+          <el-button size="small" type="primary" @click="addYearPlan('add')">鏂板</el-button>
           <!--          <el-upload ref="upload" :action="action"-->
           <!--                     :before-upload="beforeUpload" :headers="uploadHeader" :on-error="onError"-->
           <!--                     :on-success="handleSuccessUp" :show-file-list="false" accept='.xls,.xlsx'>-->
@@ -24,7 +26,7 @@
           <el-table-column label="骞翠唤" min-width="80" prop="planYear"></el-table-column>
           <el-table-column label="璁″垝鍚嶇О" min-width="180" prop="planName"></el-table-column>
           <el-table-column label="缂栧埗浜�" min-width="100" prop="writeName"></el-table-column>
-          <el-table-column label="缂栧埗鏃ユ湡" min-width="150" prop="writeTime"></el-table-column>
+          <el-table-column label="缂栧埗鏃ユ湡" min-width="160" prop="writeTime"></el-table-column>
           <el-table-column label="鎵瑰噯鐘舵��" min-width="100" prop="ratifyStatus">
             <template slot-scope="scope">
               <el-tag v-if="scope.row.ratifyStatus === 1" type="success">鎵瑰噯</el-tag>
@@ -50,23 +52,29 @@
           </el-table-column>
         </el-table>
         <el-pagination :current-page="1" :page-size="pagination.size" :page-sizes="[10, 20, 30, 50, 100]"
-          :total="pagination.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
-          @current-change="handleCurrentChange">
+                       background :total="pagination.total" layout="->,total, sizes, prev, pager, next, jumper"
+                       @size-change="handleSizeChange" @current-change="handleCurrentChange">
         </el-pagination>
       </div>
     </div>
     <div>
-      <span>骞村害璁″垝鏄庣粏琛�</span>
       <div class="title">
-        <div class="title-search">
-          <span style="width: 120px;font-size: 14px">璁惧缂栧彿锛�</span>
-          <el-input v-model="searchForm.deviceNumber" clearable size="small"
-            style="margin-right: 10px;width: 220px"></el-input>
-          <span style="width: 80px;font-size: 14px">璁惧鍚嶇О锛�</span>
-          <el-input v-model="searchForm.deviceName" clearable size="small"
-            style="margin-right: 10px;width: 220px"></el-input>
-          <el-button size="mini" type="primary" @click="getYearTableDetailData(currentRow)">鏌ヨ</el-button>
-          <el-button size="mini" @click="reset">閲嶇疆</el-button>
+        <span style="font-weight: bold">骞村害璁″垝鏄庣粏琛�</span>
+      </div>
+      <div class="search">
+        <div>
+          <el-form :model="searchForm" ref="searchForm" size="small" :inline="true">
+            <el-form-item label="璁惧缂栧彿" prop="deviceNumber">
+              <el-input v-model="searchForm.deviceNumber" clearable size="small"></el-input>
+            </el-form-item>
+            <el-form-item label="璁惧鍚嶇О" prop="deviceName">
+              <el-input v-model="searchForm.deviceName" clearable size="small"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" size="mini" @click="getYearTableDetailData(currentRow)">鏌ヨ</el-button>
+              <el-button size="mini" @click="reset">閲嶇疆</el-button>
+            </el-form-item>
+          </el-form>
         </div>
         <div>
           <el-button size="small" type="primary" @click="handleForm('add')">鏂板</el-button>
@@ -101,7 +109,7 @@
           </el-table-column>
         </el-table>
         <el-pagination :current-page="1" :page-size="pagination1.size" :page-sizes="[10, 20, 30, 50, 100]"
-          :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper"
+          :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper" background
           @size-change="handleSizeChange1" @current-change="handleCurrentChange1">
         </el-pagination>
       </div>
@@ -642,15 +650,28 @@
 </script>
 
 <style scoped>
-.title {
+.search {
+  height: 46px;
   display: flex;
   justify-content: space-between;
-  align-items: center;
+}
+.title {
+  position: relative;
+  font-size: 16px;
+  color: #333;
+  font-weight: 400;
+  padding-left: 10px;
+  margin-bottom: 10px;
 }
 
-.title-search {
-  display: flex;
-  align-items: center;
-  margin: 10px 0;
+.title::before {
+  position: absolute;
+  left: 0;
+  top: 4px;
+  content: '';
+  width: 4px;
+  height: 16px;
+  background-color: #3A7BFA;
+  border-radius: 2px;
 }
 </style>
diff --git a/src/views/CNAS/resourceDemand/device/component/files.vue b/src/views/CNAS/resourceDemand/device/component/files.vue
index de19de7..3a96e5a 100644
--- a/src/views/CNAS/resourceDemand/device/component/files.vue
+++ b/src/views/CNAS/resourceDemand/device/component/files.vue
@@ -25,7 +25,7 @@
         <el-col :span="8">
           <div class="form-item">
             <label>璁惧鍚嶇О</label>
-            <!-- <p>{{ Mdata.deviceName }}</p> -->
+<!--             <p>{{ Mdata.deviceName }}</p> -->
             <el-tooltip class="item" :content="Mdata.deviceName">
               <span class="text-ellipsis">{{ Mdata.deviceName }}</span>
             </el-tooltip>
@@ -170,9 +170,9 @@
         <el-table-column prop="quantity" label="浠芥暟" min-width="80" />
         <el-table-column prop="pageCount" label="椤电爜" min-width="80" />
         <el-table-column prop="provider" label="鎻愪緵鑰�" min-width="150" />
-        <el-table-column prop="provideDate" label="褰掓。鏃ユ湡" min-width="150" />
+        <el-table-column prop="provideDate" label="褰掓。鏃ユ湡" min-width="170" />
         <el-table-column prop="comments" label="澶囨敞" min-width="150" />
-        <el-table-column fixed="right" label="鎿嶄綔" min-width="180">
+        <el-table-column fixed="right" label="鎿嶄綔" min-width="180" align="center">
           <template slot-scope="scope">
             <el-button type="text" size="small" @click="handleAttachmentClick(scope.row)">涓嬭浇闄勪欢</el-button>
             <el-button type="text" size="small" @click="handleViewClick(scope.row)">缂栬緫</el-button>
@@ -914,7 +914,6 @@
 .page-header {
   display: flex;
   justify-content: space-between;
-  margin-top: 10px;
 }
 
 h4 {
diff --git a/src/views/CNAS/resourceDemand/device/component/management.vue b/src/views/CNAS/resourceDemand/device/component/management.vue
index 51a4a27..b5b83c1 100644
--- a/src/views/CNAS/resourceDemand/device/component/management.vue
+++ b/src/views/CNAS/resourceDemand/device/component/management.vue
@@ -1,37 +1,37 @@
 <!-- 璁惧宸ュ叿鏄庣粏 -->
 <template>
 	<div class="role_manage">
-		<div class="search" v-show="!showData">
-			<div class="search_thing">
-				<div class="search_label">鐘舵�侊細</div>
-				<el-select v-model="queryParams.deviceStatus" placeholder="鍏ㄩ儴" size="small">
-					<el-option v-for="item in deviceStatusList" :key="item.value" :label="item.label" :value="item.value">
-					</el-option>
-				</el-select>
-			</div>
-			<div class="search_thing">
-				<div class="search_label">璁惧鍚嶇О锛�</div>
-				<div class="search_input">
-					<el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="queryParams.deviceName"
-						@keyup.enter.native="refreshTable()">
-					</el-input>
-				</div>
-			</div>
-			<div class="search_thing">
-				<div class="search_label">瑙勬牸鍨嬪彿锛�</div>
-				<div class="search_input"><el-input size="small" placeholder="璇疯緭鍏�" clearable
-						v-model="queryParams.specificationModel" @keyup.enter.native="refreshTable()"></el-input>
-				</div>
-			</div>
-			<div style="padding-left: 30px;">
-				<el-button size="mini" type="primary" @click="refreshTable()">鏌ヨ</el-button>
-				<el-button size="mini" @click="refresh()">閲嶇疆</el-button>
-				<el-button size="small" type="primary" @click="dialogVisible2 = true">鏂板</el-button>
-				<el-button size="small" type="primary" @click="handleDownOne">瀵煎嚭</el-button>
-			</div>
-		</div>
+    <div class="search">
+      <div>
+        <el-form :model="queryParams" ref="queryParams" size="small" :inline="true">
+          <el-form-item label="鐘舵��" prop="deviceStatus" class="form-item">
+            <el-select v-model="queryParams.deviceStatus" placeholder="鍏ㄩ儴" size="small">
+              <el-option v-for="item in deviceStatusList" :key="item.value" :label="item.label" :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="璁惧鍚嶇О" prop="deviceName">
+            <el-input size="small" placeholder="璇疯緭鍏�" clearable v-model="queryParams.deviceName"
+                      @keyup.enter.native="refreshTable()">
+            </el-input>
+          </el-form-item>
+          <el-form-item label="瑙勬牸鍨嬪彿" prop="specificationModel">
+            <el-input size="small" placeholder="璇疯緭鍏�" clearable
+                      v-model="queryParams.specificationModel" @keyup.enter.native="refreshTable()"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" size="mini" @click="refreshTable">鏌ヨ</el-button>
+            <el-button size="mini" @click="refresh">閲嶇疆</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div>
+        <el-button size="small" type="primary" @click="dialogVisible2 = true">鏂板</el-button>
+        <el-button size="small" type="primary" @click="handleDownOne">瀵煎嚭</el-button>
+      </div>
+    </div>
 		<div class="table" v-show="!showData">
-			<lims-table :tableData="tableData" :column="column" :tableLoading="tableLoading" :height="'calc(100vh - 320px)'"
+			<lims-table :tableData="tableData" :column="column" :tableLoading="tableLoading" :height="'calc(100vh - 300px)'"
 				:page="page" @pagination="pagination"></lims-table>
 		</div>
 		<el-dialog :title="isUp ? '璁惧璇︽儏' : '妗f淇'" :visible.sync="dialogVisible" width="70%" top="5vh"
@@ -990,20 +990,11 @@
 </script>
 
 <style scoped>
-.role_manage {
-	width: 100%;
-	height: 100%;
-}
-
-.title {
-	line-height: 15px;
-}
-
 .search {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	margin-top: 10px;
+  height: 46px;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
 }
 
 .search_thing {
@@ -1018,20 +1009,10 @@
 	text-align: right;
 }
 
-.search_input {
-	width: calc(100% - 80px);
-}
-
 .table {
-	margin-top: 12px;
 	background-color: #fff;
-	height: calc(100vh - 17em);
+	height: calc(100vh - 16em);
 }
-
-.el-form-item {
-	margin-bottom: 16px;
-}
-
 .picName {
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -1039,4 +1020,7 @@
 	word-break: break-all;
 	width: 120px;
 }
+.form-item >>>.el-form-item__content {
+  width: 120px;
+}
 </style>
diff --git a/src/views/CNAS/resourceDemand/device/component/quantityValueTraceabilityPlan.vue b/src/views/CNAS/resourceDemand/device/component/quantityValueTraceabilityPlan.vue
index f94c759..9d2fc26 100644
--- a/src/views/CNAS/resourceDemand/device/component/quantityValueTraceabilityPlan.vue
+++ b/src/views/CNAS/resourceDemand/device/component/quantityValueTraceabilityPlan.vue
@@ -15,7 +15,7 @@
           <el-table-column label="骞翠唤" min-width="80" prop="planYear"></el-table-column>
           <el-table-column label="鏂囦欢鍚嶇О" min-width="120" prop="compiler"></el-table-column>
           <el-table-column label="缂栧埗浜�" min-width="150" prop="compiler"></el-table-column>
-          <el-table-column label="缂栧埗鏃堕棿" min-width="150" prop="datePreparation"></el-table-column>
+          <el-table-column label="缂栧埗鏃堕棿" min-width="160" prop="datePreparation"></el-table-column>
           <el-table-column label="鎵瑰噯浜�" min-width="180" prop="audit"></el-table-column>
           <el-table-column label="鎵瑰噯鐘舵��" min-width="180" prop="status">
             <template slot-scope="scope">
@@ -41,7 +41,7 @@
           </el-table-column>
         </el-table>
         <el-pagination :current-page="1" :page-size="pagination1.size" :page-sizes="[10, 20, 30, 50, 100]"
-          :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper"
+          :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper" background
           @size-change="handleSizeChange1" @current-change="handleCurrentChange1">
         </el-pagination>
       </div>
diff --git a/src/views/CNAS/resourceDemand/device/component/record.vue b/src/views/CNAS/resourceDemand/device/component/record.vue
index 4998f25..869410d 100644
--- a/src/views/CNAS/resourceDemand/device/component/record.vue
+++ b/src/views/CNAS/resourceDemand/device/component/record.vue
@@ -2,28 +2,31 @@
 <template>
   <div>
     <div class="search">
-      <div class="search_thing">
-        <div class="search_label">鏍峰搧缂栧彿锛�</div>
-        <el-input v-model="search.sampleCode" clearable placeholder="璇疯緭鍏�" size="small" style="width: 60%;"
-          @keyup.enter.native="getTableList(clickNodeVal.value)"></el-input>
-        <div class="search_label">绠$悊缂栧彿锛�</div>
-        <el-input v-model="search.managementNumber" clearable placeholder="璇疯緭鍏�" size="small" style="width: 60%;"
-          @keyup.enter.native="getTableList(clickNodeVal.value)"></el-input>
-      </div>
-      <div class="search_thing" style="padding-left: 30px;">
-        <el-button size="mini" type="primary" @click="getTableList(clickNodeVal.value)">鏌ヨ</el-button>
-        <el-button size="mini" @click="resetSearch">閲嶇疆</el-button>
-      </div>
-      <div class="btns" v-if="isMenuList != 1">
+      <el-form :model="search" ref="search" size="small" :inline="true">
+        <el-form-item label="鏍峰搧缂栧彿">
+          <el-input v-model="search.sampleCode" clearable placeholder="璇疯緭鍏�" size="small"
+                    @keyup.enter.native="getTableList(clickNodeVal.value)"></el-input>
+        </el-form-item>
+        <el-form-item label="绠$悊缂栧彿">
+          <el-input v-model="search.managementNumber" clearable placeholder="璇疯緭鍏�" size="small"
+                    @keyup.enter.native="getTableList(clickNodeVal.value)"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button size="mini" type="primary" @click="getTableList(clickNodeVal.value)">鏌ヨ</el-button>
+          <el-button size="mini" @click="resetSearch">閲嶇疆</el-button>
+        </el-form-item>
+      </el-form>
+      <div>
         <el-button size="small" type="primary" @click="dialogVisible = true, openAdd()">鏂� 寤�</el-button>
         <el-button :loading="outLoading" size="small" type="primary" @click="openHandleOut">瀵� 鍑�</el-button>
       </div>
     </div>
-    <div class="tables" style="margin-top: 10px;">
+    <div>
       <el-table ref="Recordtable" :data="formParamList" height="calc(100vh - 20em)"
+                v-loading="tableLoading"
                 :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }" border>
         <!-- 琛ㄦ牸鍒� -->
-        <el-table-column label="搴忓彿" type="index" width="120">
+        <el-table-column label="搴忓彿" type="index" width="70" align="center">
           <template v-slot="scope">
             <span>{{ (search.current - 1) * search.size + scope.$index + 1 }}</span>
           </template>
@@ -42,8 +45,8 @@
           </template>
         </el-table-column>
         <!--        <el-table-column label="寮傚父鎯呭喌" min-width="120" prop="abnormal" />-->
-        <el-table-column label="浣跨敤寮�濮嬫棩鏈�" min-width="150" prop="useStartDate" />
-        <el-table-column label="浣跨敤缁撴潫鏃ユ湡" min-width="150" prop="useEndDate" />
+        <el-table-column label="浣跨敤寮�濮嬫棩鏈�" min-width="170" prop="useStartDate" />
+        <el-table-column label="浣跨敤缁撴潫鏃ユ湡" min-width="170" prop="useEndDate" />
         <el-table-column label="浣跨敤浜�" min-width="120" prop="usePerson" />
         <el-table-column label="澶囨敞" min-width="120" prop="remark" />
         <!-- 鎿嶄綔鎸夐挳 -->
@@ -57,7 +60,7 @@
       </el-table>
       <el-pagination :current-page="1" :page-size="search.size" :page-sizes="[10, 20, 30, 50, 100]"
         :total="search.total" layout="->,total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
-        @current-change="handleCurrentChange">
+        @current-change="handleCurrentChange" background>
       </el-pagination>
     </div>
     <el-dialog :visible.sync="dialogVisible" title="浠櫒璁惧浣跨敤璁板綍琛�" top="5vh" width="55%">
@@ -210,6 +213,7 @@
       dialogVisible: false,
       operationType: '',
       formParamList: [],
+      tableLoading: false
     }
   },
   mounted() {
@@ -238,14 +242,18 @@
       if (deviceId === undefined) {
         deviceId = ''
       }
+      this.tableLoading = true
       await deviceRecordPage({
         deviceId: deviceId,
         ...this.search
       }).then(res => {
+        this.tableLoading = false
         if (res.code == 200) {
           this.formParamList = res.data.records
           this.search.total = res.data.total
         }
+      }).catch(err => {
+        this.tableLoading = false
       })
     },
     // 鎵撳紑瀵煎嚭寮规閫夋嫨缂栧埗浜恒�佹壒鍑嗕汉
@@ -394,65 +402,10 @@
 </script>
 
 <style scoped>
-.tables {
-  width: 100%;
-  height: calc(100vh - 15em);
-}
-
-.el-from {
-  max-width: 400px;
-  margin: 0 auto;
-}
-
-.form-row {
+.search {
+  height: 46px;
   display: flex;
   justify-content: space-between;
-}
-
-.el-input {
-  width: calc(100% - 120px);
-  /* 纭繚杈撳叆妗嗗搴︿竴鑷� */
-}
-
-.form-row .el-form-item {
-  flex: 1;
-  /* 姣忎釜琛ㄥ崟椤瑰崰鎹浉鍚屾瘮渚嬬殑绌洪棿 */
-  margin-right: 100px;
-  /* 鍙�夛細涓哄彸渚у厓绱犳坊鍔犻棿璺� */
-}
-
-/* 绉婚櫎鏈�鍚庝竴涓厓绱犵殑鍙宠竟璺� */
-.form-row .el-form-item:last-child {
-  margin-right: 0;
-
-}
-
-.search {
-  background-color: #fff;
   margin-top: 10px;
-  display: flex;
-  align-items: center;
-  position: relative;
-}
-
-.search_thing {
-  display: flex;
-  align-items: center;
-  height: 40px;
-
-}
-
-.search_label {
-  width: 140px;
-  font-size: 14px;
-  text-align: right;
-  margin-right: 10px;
-}
-
-.btns {
-  position: absolute;
-  right: 0px;
-  top: 50%;
-  transform: translate(0, -50%);
 }
 </style>
diff --git a/src/views/CNAS/resourceDemand/device/component/usingExternalInstruments.vue b/src/views/CNAS/resourceDemand/device/component/usingExternalInstruments.vue
index c2d11b8..d1bb7b2 100644
--- a/src/views/CNAS/resourceDemand/device/component/usingExternalInstruments.vue
+++ b/src/views/CNAS/resourceDemand/device/component/usingExternalInstruments.vue
@@ -2,12 +2,16 @@
   <div>
     <div>
       <div class="title">
-        <div class="title-search">
-          <span style="width: 80px;font-size: 14px">鍗曚綅鍚嶇О锛�</span>
-          <el-input v-model="searchForm.unitName" clearable size="small"
-            style="margin-right: 10px;width: 220px"></el-input>
-          <el-button size="mini" type="primary" @click="getYearTableDetailData">鏌ヨ</el-button>
-          <el-button size="mini" @click="reset">閲嶇疆</el-button>
+        <div>
+          <el-form :model="searchForm" ref="searchForm" size="small" :inline="true">
+            <el-form-item label="鍗曚綅鍚嶇О" prop="unitName">
+              <el-input v-model="searchForm.unitName" clearable size="small"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" size="mini" @click="getYearTableDetailData">鏌ヨ</el-button>
+              <el-button size="mini" @click="reset">閲嶇疆</el-button>
+            </el-form-item>
+          </el-form>
         </div>
         <div>
           <el-button size="small" type="primary" @click="handleForm('')">鏂板</el-button>
@@ -41,7 +45,7 @@
           </el-table-column>
         </el-table>
         <el-pagination :current-page="1" :page-size="pagination1.size" :page-sizes="[10, 20, 30, 50, 100]"
-          :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper"
+          :total="pagination1.total" layout="->,total, sizes, prev, pager, next, jumper" background
           @size-change="handleSizeChange1" @current-change="handleCurrentChange1">
         </el-pagination>
       </div>
@@ -159,14 +163,9 @@
 
 <style scoped>
 .title {
+  height: 46px;
   display: flex;
   justify-content: space-between;
-  align-items: center;
-}
-
-.title-search {
-  display: flex;
-  align-items: center;
-  margin: 10px 0;
+  margin-top: 10px;
 }
 </style>

--
Gitblit v1.9.3