From 9787d21eaca47dbdaaeb510b0b531d9f103a1865 Mon Sep 17 00:00:00 2001
From: shidongli <shidongli>
Date: Wed, 19 Jun 2024 16:33:42 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=B1=E8=AF=8A=E8=AE=B0=E5=BD=95=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../index.vue                                 | 739 ++++++++++--------
 1 file changed, 412 insertions(+), 327 deletions(-)

diff --git a/src/views/unitconfig/PatientConfigurationVisitRecords/index.vue b/src/views/unitconfig/PatientConfigurationVisitRecords/index.vue
index 6945b3e..2735cb8 100644
--- a/src/views/unitconfig/PatientConfigurationVisitRecords/index.vue
+++ b/src/views/unitconfig/PatientConfigurationVisitRecords/index.vue
@@ -1,346 +1,431 @@
 <template>
-    <div class="header">
-        <div class="header-app">
-            <div class="addbtn">
-                <el-button type="primary" @click="add" size="small">添加就诊记录</el-button>
-            </div>
-            <el-descriptions title="患者信息">
-                <el-descriptions-item label="患者姓名">{{ $route.query.patientName }}</el-descriptions-item>
-                <el-descriptions-item label="性别">{{ $route.query.sex == 'MALE' ? '男' : "" }}
-                    {{ $route.query.sex == 'FEMALE' ? '女' : "" }}
-                </el-descriptions-item>
-                <el-descriptions-item label="年龄">{{ $route.query.age }}</el-descriptions-item>
-                <el-descriptions-item label="电话">{{ $route.query.patientPhone }}</el-descriptions-item>
-                <el-descriptions-item label="pat_id">{{ $route.query.patientId }}</el-descriptions-item>
-                <el-descriptions-item label="身份证号">{{ $route.query.cardNo }}</el-descriptions-item>
-            </el-descriptions>
-        </div>
-        <div class="header-app" style="margin-top: 16px;padding:0">
-            <div class="left">
-                <div class="list">
-                    <div class="item" v-for="(item, index) in recodelist" :key="item.id"
-                        @click="clickrecord(item, index)" :class="index == recodeindex ? 'tapitem' : ''">
-                        <div class="text">入院时间：{{ item.admissionTime }}
-                        </div>
-                        <div class="text">出院时间：{{ item.dischargeTime }}
-                        </div>
-                        <div class="text">就诊类型：{{ item.visitMethod == 'OUTPATIENT_SERVICE' ? '门诊' : "" }}
-                            {{ item.visitMethod == 'BE_IN_HOSPITAL' ? '住院' : "" }}
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="right" v-if="recodeindex >= 0">
-                <el-descriptions :title="form.id ? '就诊信息' : '新增就诊信息'">
-                </el-descriptions>
-                <div class="btns">
-                    <el-button type="primary" @click="submitForm" size="small">保 存</el-button>
-                    <el-button @click="cancel" size="small">取 消</el-button>
-                </div>
-                <el-form ref="form" :model="form" label-width="120px" :rules="rules">
-                    <el-form-item label="就诊方式" prop="visitMethod">
-                        <el-radio-group v-model="form.visitMethod">
-                            <el-radio label="BE_IN_HOSPITAL">住院</el-radio>
-                            <el-radio label="OUTPATIENT_SERVICE">门诊</el-radio>
-                        </el-radio-group>
-                    </el-form-item>
-                </el-form>
-                <el-form ref="form" :model="form" :rules="rules" label-width="130px" :inline="true">
-                    <el-form-item label="主要诊断" prop="mainDiagnosis">
-                        <el-input v-model="form.mainDiagnosis" style="width:300px" placeholder="请输入主要诊断"></el-input>
-                    </el-form-item>
-                    <el-form-item label="就诊流水号" prop="visitSerialNumber">
-                        <el-input v-model="form.visitSerialNumber" style="width:300px"
-                            placeholder="请输入就诊流水号"></el-input>
-                    </el-form-item>
-                    <el-form-item label="科室名称" prop="departmentId">
-                        <el-select v-model="form.departmentId" filterable placeholder="请选择科室" style="width:300px"
-                            clearable>
-                            <el-option v-for="item in departmentlist" :key="item.id" :label="item.departmentName"
-                                :value="item.id">
-                            </el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="主治医生" prop="attendingPhysicianId">
-                        <el-select v-model="form.attendingPhysicianId" filterable placeholder="请选择主治医生"
-                            style="width:300px" clearable>
-                            <el-option v-for="item in attendingPhysicianlist" :key="item.userId" :label="item.nickName"
-                                :value="item.userId">
-                            </el-option>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="门诊/住院编号" prop="inHospitalNumber">
-                        <el-input v-model="form.inHospitalNumber" style="width:300px"
-                            placeholder="请输入门诊/住院编号"></el-input>
-                    </el-form-item>
-                    <el-form-item label="入院时间" prop="admissionTime">
-                        <el-date-picker style="width:300px" v-model="form.admissionTime" type="datetime"
-                            value-format="yyyy-MM-dd HH:mm" format='yyyy-MM-dd HH:mm' :picker-options="pickerOptions"
-                            placeholder="选择日期时间">
-                        </el-date-picker>
-                    </el-form-item>
-                    <el-form-item label="出院时间" prop="dischargeTime">
-                        <el-date-picker style="width:300px" v-model="form.dischargeTime" type="datetime"
-                            :picker-options="pickerOptionstwo" value-format="yyyy-MM-dd HH:mm" format='yyyy-MM-dd HH:mm'
-                            placeholder="选择日期时间">
-                        </el-date-picker>
-                    </el-form-item>
-                    <el-form-item label="手术记录" prop="surgicalRecord" v-if="form.visitMethod == 'BE_IN_HOSPITAL'">
-                        <editor v-model="form.surgicalRecord" :min-height="192" />
-                    </el-form-item>
-                    <el-form-item label="入院病历" prop="inHospitalInfo" v-if="form.visitMethod == 'BE_IN_HOSPITAL'">
-                        <editor v-model="form.inHospitalInfo" :min-height="192" />
-                    </el-form-item>
-                    <el-form-item label="门诊病历" prop="inHospitalInfo" v-if="form.visitMethod == 'OUTPATIENT_SERVICE'">
-                        <editor v-model="form.inHospitalInfo" :min-height="192" />
-                    </el-form-item>
-                    <el-form-item label="出院病历" prop="outHospitalInfo" v-if="form.visitMethod == 'BE_IN_HOSPITAL'">
-                        <editor v-model="form.outHospitalInfo" :min-height="192" />
-                    </el-form-item>
-                </el-form>
-            </div>
-        </div>
+  <div class="header">
+    <div class="header-app">
+      <div class="addbtn">
+        <el-button type="primary" @click="add" size="small"
+          >添加就诊记录</el-button
+        >
+      </div>
+      <el-descriptions title="患者信息">
+        <el-descriptions-item label="患者姓名">{{
+          $route.query.patientName
+        }}</el-descriptions-item>
+        <el-descriptions-item label="性别"
+          >{{ $route.query.sex == "MALE" ? "男" : "" }}
+          {{ $route.query.sex == "FEMALE" ? "女" : "" }}
+        </el-descriptions-item>
+        <el-descriptions-item label="年龄">{{
+          $route.query.age
+        }}</el-descriptions-item>
+        <el-descriptions-item label="电话">{{
+          $route.query.patientPhone
+        }}</el-descriptions-item>
+        <el-descriptions-item label="pat_id">{{
+          $route.query.patientId
+        }}</el-descriptions-item>
+        <el-descriptions-item label="身份证号">{{
+          $route.query.cardNo
+        }}</el-descriptions-item>
+      </el-descriptions>
     </div>
+    <div class="header-app" style="margin-top: 16px; padding: 0">
+      <div class="left">
+        <div class="list">
+          <div
+            class="item"
+            v-for="(item, index) in recodelist"
+            :key="item.id"
+            @click="clickrecord(item, index)"
+            :class="index == recodeindex ? 'tapitem' : ''"
+          >
+            <div class="text">入院时间：{{ item.admissionTime }}</div>
+            <div class="text">出院时间：{{ item.dischargeTime }}</div>
+            <div class="text">
+              就诊类型：{{
+                item.visitMethod == "OUTPATIENT_SERVICE" ? "门诊" : ""
+              }}
+              {{ item.visitMethod == "BE_IN_HOSPITAL" ? "住院" : "" }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right" v-if="recodeindex >= 0">
+        <el-descriptions :title="form.id ? '就诊信息' : '新增就诊信息'">
+        </el-descriptions>
+        <div class="btns">
+          <el-button type="primary" @click="submitForm" size="small"
+            >保 存</el-button
+          >
+          <el-button @click="cancel" size="small">取 消</el-button>
+        </div>
+        <el-form ref="form" :model="form" label-width="120px" :rules="rules">
+          <el-form-item label="就诊方式" prop="visitMethod">
+            <el-radio-group v-model="form.visitMethod">
+              <el-radio label="BE_IN_HOSPITAL">住院</el-radio>
+              <el-radio label="OUTPATIENT_SERVICE">门诊</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-form>
+        <el-form
+          ref="form"
+          :model="form"
+          :rules="rules"
+          label-width="130px"
+          :inline="true"
+        >
+          <el-form-item label="主要诊断" prop="mainDiagnosis">
+            <el-input
+              v-model="form.mainDiagnosis"
+              style="width: 300px"
+              placeholder="请输入主要诊断"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="就诊流水号" prop="visitSerialNumber">
+            <el-input
+              v-model="form.visitSerialNumber"
+              style="width: 300px"
+              placeholder="请输入就诊流水号"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="科室名称" prop="departmentId">
+            <el-select
+              v-model="form.departmentId"
+              filterable
+              placeholder="请选择科室"
+              style="width: 300px"
+              clearable
+            >
+              <el-option
+                v-for="item in departmentlist"
+                :key="item.id"
+                :label="item.departmentName"
+                :value="item.id"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="主治医生" prop="attendingPhysicianId">
+            <el-select
+              v-model="form.attendingPhysicianId"
+              filterable
+              placeholder="请选择主治医生"
+              style="width: 300px"
+              clearable
+            >
+              <el-option
+                v-for="item in attendingPhysicianlist"
+                :key="item.userId"
+                :label="item.nickName"
+                :value="item.userId"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="门诊/住院编号" prop="inHospitalNumber">
+            <el-input
+              v-model="form.inHospitalNumber"
+              style="width: 300px"
+              placeholder="请输入门诊/住院编号"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="入院时间" prop="admissionTime">
+            <el-date-picker
+              style="width: 300px"
+              v-model="form.admissionTime"
+              type="datetime"
+              value-format="yyyy-MM-dd HH:mm"
+              format="yyyy-MM-dd HH:mm"
+              :picker-options="pickerOptions"
+              placeholder="选择日期时间"
+            >
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item label="出院时间" prop="dischargeTime">
+            <el-date-picker
+              style="width: 300px"
+              v-model="form.dischargeTime"
+              type="datetime"
+              :picker-options="pickerOptionstwo"
+              value-format="yyyy-MM-dd HH:mm"
+              format="yyyy-MM-dd HH:mm"
+              placeholder="选择日期时间"
+            >
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item
+            label="手术记录"
+            prop="surgicalRecord"
+            v-if="form.visitMethod == 'BE_IN_HOSPITAL'"
+          >
+            <editor v-model="form.surgicalRecord" :min-height="192" />
+          </el-form-item>
+          <el-form-item
+            label="入院病历"
+            prop="inHospitalInfo"
+            v-if="form.visitMethod == 'BE_IN_HOSPITAL'"
+          >
+            <editor v-model="form.inHospitalInfo" :min-height="192" />
+          </el-form-item>
+          <el-form-item
+            label="门诊病历"
+            prop="inHospitalInfo"
+            v-if="form.visitMethod == 'OUTPATIENT_SERVICE'"
+          >
+            <editor v-model="form.inHospitalInfo" :min-height="192" />
+          </el-form-item>
+          <el-form-item
+            label="出院病历"
+            prop="outHospitalInfo"
+            v-if="form.visitMethod == 'BE_IN_HOSPITAL'"
+          >
+            <editor v-model="form.outHospitalInfo" :min-height="192" />
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 import { getList, usergetList, updateRecord, saveRecord } from "@/api/unitconfig/patientConfiguration";
 import { getDepartmentList } from "@/api/manage/selectAgencyList";
 export default {
-    name: "PatientConfigurationVisitRecords",
-    data() {
-        return {
-            pickerOptions: {
-                disabledDate: (time) => {
-                    if (this.form.dischargeTime) {
-                        return time.getTime() > new Date(this.form.dischargeTime).getTime();
-                    }
-                },
-            },
-            pickerOptionstwo: {
-                disabledDate: (time) => {
-                    if (this.form.admissionTime) {
-                        return time.getTime() < new Date(this.form.admissionTime).getTime();
-                    }
-                },
-            },
-            departmentlist: [],
-            attendingPhysicianlist: [],
-            form: {},
-            rules: {
-                visitMethod: [
-                    { required: true, message: "就诊方式不能为空", trigger: "blur" }
-                ],
-                mainDiagnosis: [
-                    { required: true, message: "主要诊断不能为空", trigger: "blur" }
-                ],
-                visitSerialNumber: [
-                    { required: true, message: "就诊流水号不能为空", trigger: "blur" }
-                ],
-                attendingPhysicianId: [
-                    { required: true, message: "主治医生不能为空", trigger: "blur" }
-                ],
-                inHospitalNumber: [
-                    { required: true, message: "门诊/住院编号不能为空", trigger: "blur" }
-                ],
-                departmentId: [
-                    { required: true, message: "科室名称不能为空", trigger: "blur" }
-                ],
-                admissionTime: [
-                    { required: true, message: "入院时间不能为空", trigger: "blur" }
-                ],
-                dischargeTime: [
-                    { required: true, message: "出院时间不能为空", trigger: "blur" }
-                ],
-                surgicalRecord: [
-                    { required: true, message: "手术记录不能为空", trigger: "blur" }
-                ],
-                inHospitalInfo: [
-                    { required: true, message: "病历不能为空", trigger: "blur" }
-                ],
-                outHospitalInfo: [
-                    { required: true, message: "病历不能为空", trigger: "blur" }
-                ],
-            },
-            recodelist: [],
-            recodeindex: undefined,
-            todaytime: '',
-        };
+  name: "PatientConfigurationVisitRecords",
+  data() {
+    return {
+      pickerOptions: {
+        disabledDate: (time) => {
+          if (this.form.dischargeTime) {
+            return time.getTime() > new Date(this.form.dischargeTime).getTime();
+          }
+        },
+      },
+      pickerOptionstwo: {
+        disabledDate: (time) => {
+          if (this.form.admissionTime) {
+            return time.getTime() < new Date(this.form.admissionTime).getTime();
+          }
+        },
+      },
+      departmentlist: [],
+      attendingPhysicianlist: [],
+      form: {},
+      rules: {
+        visitMethod: [
+          { required: true, message: "就诊方式不能为空", trigger: "blur" }
+        ],
+        mainDiagnosis: [
+          { required: true, message: "主要诊断不能为空", trigger: "blur" }
+        ],
+        visitSerialNumber: [
+          { required: true, message: "就诊流水号不能为空", trigger: "blur" }
+        ],
+        attendingPhysicianId: [
+          { required: true, message: "主治医生不能为空", trigger: "blur" }
+        ],
+        inHospitalNumber: [
+          { required: true, message: "门诊/住院编号不能为空", trigger: "blur" }
+        ],
+        departmentId: [
+          { required: true, message: "科室名称不能为空", trigger: "blur" }
+        ],
+        admissionTime: [
+          { required: true, message: "入院时间不能为空", trigger: "blur" }
+        ],
+        dischargeTime: [
+          { required: true, message: "出院时间不能为空", trigger: "blur" }
+        ],
+        surgicalRecord: [
+          { required: true, message: "手术记录不能为空", trigger: "blur" }
+        ],
+        inHospitalInfo: [
+          { required: true, message: "病历不能为空", trigger: "blur" }
+        ],
+        outHospitalInfo: [
+          { required: true, message: "病历不能为空", trigger: "blur" }
+        ],
+      },
+      recodelist: [],
+      recodeindex: undefined,
+      todaytime: '',
+    };
+  },
+  created() {
+    this.dateFormat();
+    this.info();
+    this.changecampusAgency();
+    this.usergetListinfo();
+  },
+  methods: {
+    add() {
+      let item = {
+        visitMethod: '',
+        mainDiagnosis: '',
+        visitSerialNumber: '',
+        departmentId: '',
+        departmentName: '',
+        attendingPhysicianId: '',
+        inHospitalNumber: '',
+        attendingPhysicianName: '',
+        admissionTime: this.todaytime,
+        dischargeTime: '',
+        inHospitalInfo: '',
+        surgicalRecord: '',
+        outHospitalInfo: '',
+      }
+      this.recodelist.unshift(item)
+      this.recodeindex = 0
+      this.form = item
     },
-    created() {
-        this.dateFormat();
-        this.info();
-        this.changecampusAgency();
-        this.usergetListinfo();
+    //取消
+    cancel() {
+      this.recodeindex = undefined
+      this.form = {}
     },
-    methods: {
-        add() {
-            let item = {
-                visitMethod: '',
-                mainDiagnosis: '',
-                visitSerialNumber: '',
-                departmentId: '',
-                departmentName: '',
-                attendingPhysicianId: '',
-                inHospitalNumber: '',
-                attendingPhysicianName: '',
-                admissionTime: this.todaytime,
-                dischargeTime: '',
-                inHospitalInfo: '',
-                surgicalRecord: '',
-                outHospitalInfo: '',
-            }
-            this.recodelist.unshift(item)
-            this.recodeindex = 0
-            this.form = item
-        },
-        //取消
-        cancel() {
-            this.recodeindex = undefined
-            this.form = {}
-        },
-        // 保存新增
-        submitForm() {
-            if (this.form.departmentId && this.departmentlist?.length > 0) {
-                this.form.departmentName = this.departmentlist.find(e => e.id == this.form.departmentId)?.departmentName
-            }
-            if (this.form.attendingPhysicianId && this.attendingPhysicianlist?.length > 0) {
-                this.form.attendingPhysicianName = this.attendingPhysicianlist.find(e => e.userId == this.form.attendingPhysicianId)?.nickName
-            }
-            if (this.form.id) {
-                updateRecord(this.form).then(res => {
-                    this.$modal.msgSuccess("保存就诊记录成功");
-                    this.info();
-                })
-            } else {
-                this.form = { ...this.form, ...this.$route.query }
-                saveRecord(this.form).then(res => {
-                    this.$modal.msgSuccess("新增就诊记录成功");
-                    this.info();
-                })
-            }
-        },
-        //主治医生
-        usergetListinfo() {
-            usergetList({
-                hospitalAgencyId: this.$route.query.hospitalAgencyId,
-                postName: 'DOCTOR'
-            }).then(res => {
-                this.attendingPhysicianlist = res.data
-            })
-        },
-        //科室
-        changecampusAgency() {
-            let query = {
-                nodeType: 'DEPARTMENT',
-                hospitalAgencyId: this.$route.query.hospitalAgencyId,
-            }
-            getDepartmentList(query).then(res => {
-                this.departmentlist = res.data
-            })
-        },
-        //点击左侧
-        clickrecord(item, index) {
-            if (this.recodeindex == index) {
-                this.recodeindex = undefined
-            } else {
-                this.recodeindex = index
-            }
-            this.form = item
-        },
-        //左侧记录列表
-        info() {
-            getList({
-                patientId: this.$route.query.patientId
-            }).then(res => {
-                this.recodeindex = undefined
-                this.recodelist = res.data
-            })
-        },
-        dateFormat() {
-            const daterc = new Date();
-            var date = new Date(daterc);
-            var year = date.getFullYear();
-            /* 在日期格式中，月份是从0开始，11结束，因此要加0
-             * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
-             * */
-            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
-            var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
-            var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
-            var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
-            var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
-            // 拼接
-            this.todaytime = year + "-" + month + "-" + day + " " + hours + ":" + minutes
-        },
-    }
+    // 保存新增
+    submitForm() {
+      if (this.form.departmentId && this.departmentlist?.length > 0) {
+        this.form.departmentName = this.departmentlist.find(e => e.id == this.form.departmentId)?.departmentName
+      }
+      if (this.form.attendingPhysicianId && this.attendingPhysicianlist?.length > 0) {
+        this.form.attendingPhysicianName = this.attendingPhysicianlist.find(e => e.userId == this.form.attendingPhysicianId)?.nickName
+      }
+      if (this.form.id) {
+        updateRecord(this.form).then(res => {
+          this.$modal.msgSuccess("保存就诊记录成功");
+          this.info();
+        })
+      } else {
+        this.form = { ...this.form, ...this.$route.query }
+        saveRecord(this.form).then(res => {
+          this.$modal.msgSuccess("新增就诊记录成功");
+          this.info();
+        })
+      }
+    },
+    //主治医生
+    usergetListinfo() {
+      usergetList({
+        hospitalAgencyId: this.$route.query.hospitalAgencyId,
+        postName: 'DOCTOR'
+      }).then(res => {
+        this.attendingPhysicianlist = res.data
+      })
+    },
+    //科室
+    changecampusAgency() {
+      let query = {
+        nodeType: 'DEPARTMENT',
+        hospitalAgencyId: this.$route.query.hospitalAgencyId,
+      }
+      getDepartmentList(query).then(res => {
+        this.departmentlist = res.data
+      })
+    },
+    //点击左侧
+    clickrecord(item, index) {
+      if (this.recodeindex == index) {
+        this.recodeindex = undefined
+      } else {
+        this.recodeindex = index
+      }
+      this.form = item
+    },
+    //左侧记录列表
+    info() {
+      getList({
+        patientId: this.$route.query.patientId
+      }).then(res => {
+        this.recodeindex = undefined
+        this.recodelist = res.data
+      })
+    },
+    dateFormat() {
+      const daterc = new Date();
+      var date = new Date(daterc);
+      var year = date.getFullYear();
+      /* 在日期格式中，月份是从0开始，11结束，因此要加0
+       * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
+       * */
+      var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
+      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
+      var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
+      var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
+      var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+      // 拼接
+      this.todaytime = year + "-" + month + "-" + day + " " + hours + ":" + minutes
+    },
+  }
 };
 </script>
 <style lang="scss" scoped>
 .header {
-    background-color: #F1F3F5;
-    padding-top: 16px;
+  background-color: #f1f3f5;
+  padding-top: 16px;
 
-    .header-app {
-        width: 98%;
-        padding: 40px;
-        margin: 0 auto;
-        background-color: #fff;
-        display: flex;
-        position: relative;
+  .header-app {
+    width: 98%;
+    padding: 40px;
+    margin: 0 auto;
+    background-color: #fff;
+    display: flex;
+    position: relative;
 
-        .addbtn {
-            position: absolute;
-            right: 40px;
-            top: 40px;
-        }
-
-        .left {
-            width: 25%;
-
-            .list {
-                height: 450px;
-                overflow: scroll;
-                // 隐藏表头的滚动条
-                overflow-x: hidden !important;
-                width: 96%;
-
-                .tapitem {
-                    background-color: #D2E9FC;
-                    border-left: 2px solid #1890ff !important;
-                    border-bottom: 1px solid #fff !important;
-                }
-
-                .item {
-                    height: 130px;
-                    padding: 10px 10px;
-                    position: relative;
-                    border-left: 2px solid #D2E9FC;
-                    border-bottom: 1px solid #E7E7E7;
-
-                    .text {
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
-                        height: 38px;
-                        line-height: 38px;
-                        font-size: 15px;
-                        font-weight: 600;
-                    }
-                }
-            }
-        }
-
-        .right {
-            width: 75%;
-            margin-top: 15px;
-            position: relative;
-
-            .btns {
-                position: absolute;
-                right: 20px;
-                top: 0px;
-            }
-        }
+    .addbtn {
+      position: absolute;
+      right: 40px;
+      top: 40px;
     }
+
+    .left {
+      width: 25%;
+
+      .list {
+        height: 450px;
+        overflow: scroll;
+        // 隐藏表头的滚动条
+        overflow-x: hidden !important;
+        width: 96%;
+
+        .tapitem {
+          background-color: #d2e9fc;
+          border-left: 2px solid #1890ff !important;
+          border-bottom: 1px solid #fff !important;
+        }
+
+        .item {
+          height: 130px;
+          padding: 10px 10px;
+          position: relative;
+          border-left: 2px solid #d2e9fc;
+          border-bottom: 1px solid #e7e7e7;
+
+          .text {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            height: 38px;
+            line-height: 38px;
+            font-size: 15px;
+            font-weight: 600;
+          }
+        }
+      }
+    }
+
+    .right {
+      overflow: auto;
+      width: 75%;
+      margin-top: 15px;
+      position: relative;
+      height: 63vh;
+
+      .btns {
+        position: absolute;
+        right: 20px;
+        top: 0px;
+      }
+    }
+  }
 }
 </style>
\ No newline at end of file