手术安排样式优化

src/views/surgical-management/SurgeryArrangement.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="layout_container">
+  <div class="layout_container surgery-arrangement">
     <header>
       <el-date-picker
           v-model="dateRange"
@@ -38,7 +38,7 @@
           header-cell-class-name="cell-border" cell-class-name="cell-border">
         <el-table-column label="手术编号" prop="recordId" width="55">
           <template #default="scope">
-            <el-tag :type="scope.row.urgentClinicFlag === '1' ? 'danger' : 'info'" effect="dark">
+            <el-tag :type="scope.row.urgentClinicFlag === '1' ? 'danger' : 'primary'" effect="dark">
               {{ scope.row.recordId }}
             </el-tag>
           </template>
@@ -227,20 +227,33 @@
         <el-table-column label="手术结束时间" prop="opEndDate" width="118"></el-table-column>
         <el-table-column label="麻醉开始时间" prop="anstStartDate" width="118"></el-table-column>
         <el-table-column label="麻醉结束时间" prop="anstEndDate" width="118"></el-table-column>
-        <el-table-column fixed="right" label="操作" width="120">
+        <el-table-column fixed="right" label="操作" width="100">
           <template #default="scope">
-            <el-button v-if="scope.row.status === 'd'" link type="primary" icon="Refresh"
-                       @click.prevent="changeSurgeryStatus(scope.row, '1')">恢复
+            <el-button
+                v-if="scope.row.status === 'd'"
+                link
+                type="primary"
+                icon="Refresh"
+                @click.prevent="changeSurgeryStatus(scope.row, '1')"
+            >
+              恢复
             </el-button>
             <span v-else>
-              <el-button link :type="scope.row.arrangementExecuted === 0 ? 'info' : 'primary'"
-                         :icon="scope.row.arrangementExecuted === 0 ? 'Close' : 'Check'"
-                         @click.prevent="changeArrangementExecuted(scope.row)">
+              <el-button
+                  link
+                  :type="scope.row.arrangementExecuted === 0 ? 'info' : 'primary'"
+                  :icon="scope.row.arrangementExecuted === 0 ? 'Close' : 'Check'"
+                  @click.prevent="changeArrangementExecuted(scope.row)"
+              >
                 {{ scope.row.arrangementExecuted === 0 ? '未接' : '已接' }}
               </el-button>
-              <el-button v-if="scope.row.status !== '3' && scope.row.arrangementExecuted === 0"
-                         link type="danger" icon="Delete"
-                         @click.prevent="changeSurgeryStatus(scope.row, 'd')">
+              <el-button
+                  v-if="scope.row.status !== '3' && scope.row.arrangementExecuted === 0"
+                  link
+                  type="danger"
+                  icon="Delete"
+                  @click.prevent="changeSurgeryStatus(scope.row, 'd')"
+              >
                 取消
               </el-button>
             </span>
@@ -256,8 +269,14 @@
       ></el-pagination>
     </div>
   </div>
-  <search v-if="showSearch" :title="titleOfSearch" target="physician" show-emp-dept @close="showSearch = false"
-          @click-item="handleClickSearchResult"></search>
+  <search
+      v-if="showSearch"
+      :title="titleOfSearch"
+      target="physician"
+      show-emp-dept
+      @close="showSearch = false"
+      @click-item="handleClickSearchResult"
+  ></search>
   <div id="printArea" style="position: fixed; background: white; color: black; opacity: 0">
     <div
         style="width: 100%; margin-top: 12px; text-align: center; height: 36px; line-height: 36px; font-size: 22px; font-weight: bold">
@@ -319,7 +338,7 @@
       <el-button icon="Search" @click="executeQueryStatistics">查询</el-button>
     </div>
 
-    <div style="height: 500px">
+    <div style="height: 500px" class="surgery-arrangement">
       <div style="height: 460px; margin-top: 20px; padding: 8px 0; overflow-y: scroll; background-color: #e0e0e0">
         <div v-for="(val,key) in surgeryStatistics.surgeryMap">
           <div
@@ -727,75 +746,83 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
-:deep(.el-table tbody tr:hover > td) {
-  background-color: unset !important;
-}
-
-:deep(.el-table .el-table-fixed-column--right .cell) {
-  width: 100%;
-  background: white;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-}
-
-:deep(.el-table .charged-row) {
-  background: rgba(142, 252, 142, 0.8);
-}
-
-:deep(.el-table .canceled-row *) {
-  color: red;
-}
-
-:deep(.el-tag .el-tag__content) {
-  color: white;
-}
-
-:deep(.el-table .cell-border) {
-  border: 1px solid #555;
-  color: black;
-  padding: 0;
-}
+<style lang="scss">
+.surgery-arrangement {
 
-:deep(.el-input__inner) {
-  color: black !important;
-}
+  .el-input__inner {
+    color: black !important;
+  }
 
-:deep(.el-input--small .el-input__wrapper) {
-  padding: 1px 4px;
-  background-color: transparent;
-}
+  .el-input--small {
+    .el-input__wrapper {
+      padding: 1px 4px;
+      background-color: transparent;
+    }
+  }
 
-:deep(.el-table .el-input__suffix) {
-  display: none;
-}
+  .el-table {
+    .el-input__suffix {
+      display: none;
+    }
+    .cell {
+      line-height: 16px;
+      padding-left: 2px;
+      padding-right: 2px;
+    }
+    .cell-border {
+      border: 1px solid #555;
+      color: black;
+      padding: 0;
+    }
+    .el-table-fixed-column--right {
+      .cell {
+        width: 100%;
+        background: white;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        .el-button {
+          margin-left: 2px;
+          span {
+            margin-left: 0;
+          }
+        }
+      }
+    }
+    .charged-row {
+      background: rgba(142, 252, 142, 0.8);
+    }
+    .canceled-row * {
+      color: red;
+    }
+  }
 
-:deep(.el-table .cell) {
-  line-height: 16px;
-  padding-left: 2px;
-  padding-right: 2px;
-}
+  .el-tag {
+    .el-tag__content {
+      color: white;
+    }
+  }
 
-.show-detail-icon {
-  width: 24px;
-  height: 24px;
-  margin-top: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  background-color: white;
-  color: #737373;
-}
+  .show-detail-icon {
+    width: 24px;
+    height: 24px;
+    margin-top: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    background-color: white;
+    color: #737373;
+    &:hover {
+      cursor: pointer;
+      scale: 1.12;
+      background-color: #5b5d5d;
+      color: white;
+    }
+  }
 
-.show-detail-icon:hover {
-  cursor: pointer;
-  scale: 1.12;
-  background-color: #5b5d5d;
-  color: white;
 }
-
 </style>
+