样式优化

src/views/settings/DeptPhones.vue

@@ -1,12 +1,12 @@
 <template>
-  <el-container>
-    <el-header height="36px" style="margin-top: 8px">
+  <div class="layout_container">
+    <header class="round-header">
       <span>快速查询：</span>
       <el-input v-model="search" placeholder="科室编码、名称、内线电话、外线电话" style="width: 260px"
                 clearable></el-input>
-    </el-header>
-    <el-main>
-      <el-table :data="cptData" :height="tableHeight" stripe highlight-current-row>
+    </header>
+    <div class="layout_main layout_el-table">
+      <el-table :data="cptData" stripe highlight-current-row>
         <el-table-column prop="code" label="科室编码"></el-table-column>
         <el-table-column prop="name" label="科室名称"></el-table-column>
         <el-table-column prop="inPhone" label="内线电话"></el-table-column>
@@ -17,8 +17,7 @@
           </template>
         </el-table-column>
       </el-table>
-    </el-main>
-
+    </div>
     <el-dialog v-model="dialogVisible" title="编辑" width="300px">
       <div class="medit">科室编码：
         <el-input v-model="selectedRow.code" style="width: 130px" disabled></el-input>
@@ -36,72 +35,55 @@
         <el-button type="primary" size="small" icon="Check" style="width: 200px" @click="submit">确定</el-button>
       </div>
     </el-dialog>
-  </el-container>
+  </div>
 </template>
 
-<script>
+<script setup>
 import {computed, onMounted, ref} from 'vue'
 import {getDeptPhones, saveDeptPhone} from '@/api/settings/dept-phones'
 import {ElMessage} from 'element-plus'
 
-export default {
-  setup() {
-    const tableHeight = window.innerHeight - 45
-    const search = ref('')
-    const data = ref([])
-    const cptData = computed(() => {
-      return data.value.filter((item) => {
-        return (
-            item.code.indexOf(search.value) !== -1 ||
-            item.name.indexOf(search.value) !== -1 ||
-            item.inPhone.indexOf(search.value) !== -1 ||
-            item.outPhone.indexOf(search.value) !== -1
-        )
-      })
-    })
-
-    const inPhoneRef = ref(null)
-    const selectedRow = ref({})
-    const dialogVisible = ref(false)
-    const edit = (row) => {
-      selectedRow.value = row
-      dialogVisible.value = true
-      setTimeout(() => {
-        inPhoneRef.value.focus()
-      }, 100)
-    }
+const search = ref('')
+const data = ref([])
+const cptData = computed(() => {
+  return data.value.filter((item) => {
+    return (
+        item.code.indexOf(search.value) !== -1 ||
+        item.name.indexOf(search.value) !== -1 ||
+        item.inPhone.indexOf(search.value) !== -1 ||
+        item.outPhone.indexOf(search.value) !== -1
+    )
+  })
+})
 
-    const submit = () => {
-      saveDeptPhone(selectedRow.value).then(() => {
-        ElMessage({
-          message: '保存成功。',
-          type: 'success',
-          duration: 2500,
-          showClose: true,
-        })
-        dialogVisible.value = false
-      })
-    }
+const inPhoneRef = ref(null)
+const selectedRow = ref({})
+const dialogVisible = ref(false)
+const edit = (row) => {
+  selectedRow.value = row
+  dialogVisible.value = true
+  setTimeout(() => {
+    inPhoneRef.value.focus()
+  }, 100)
+}
 
-    onMounted(() => {
-      getDeptPhones().then((res) => {
-        data.value = res
-      })
+const submit = () => {
+  saveDeptPhone(selectedRow.value).then(() => {
+    ElMessage({
+      message: '保存成功。',
+      type: 'success',
+      duration: 2500,
+      showClose: true,
     })
-
-    return {
-      tableHeight,
-      search,
-      data,
-      cptData,
-      inPhoneRef,
-      selectedRow,
-      dialogVisible,
-      edit,
-      submit,
-    }
-  },
+    dialogVisible.value = false
+  })
 }
+
+onMounted(() => {
+  getDeptPhones().then((res) => {
+    data.value = res
+  })
+})
 </script>
 
 <style scoped>