doctor

src/components/doctorCheck/ButtonList.vue

@@ -1,10 +1,10 @@
 <template>
     <div>
         <div class="listBtn">
-            <el-button type="primary">人员列表</el-button>
+            <el-button type="primary" @click="prList">人员列表</el-button>
         </div>
         <div class="listBtn">
-            <el-button type="primary">保存结果</el-button>
+            <el-button type="primary" @click="save">保存结果</el-button>
         </div>
         <div class="listBtn">
             <el-button type="primary">修改结果</el-button>
@@ -12,6 +12,9 @@
         <div class="listBtn">
             <el-button type="primary">删除结果</el-button>
         </div>
+        <div class="listBtn">
+            <el-button type="primary">删除项目</el-button>
+        </div>
         <div class="listBtn">
             <el-button type="primary">历次结果</el-button>
         </div>
@@ -33,12 +36,210 @@
         <div class="listBtn">
             <el-button type="primary">排队</el-button>
         </div>
+        <div class="listBtn">
+            <el-button type="primary" @click="addSummary"> + 小结</el-button>
+        </div>
     </div>
 </template>
 <script>
+import { mapState, mapActions } from "vuex";
+import { getapi, postapi, putapi, deletapi } from "@/api/api";
+import { tcdate } from "../../utlis/proFunc";
+
+
+import PatientRegisterBase from "../../components/doctorCheck/PatientRegisterBase.vue";
+import ButtonList from "../../components/doctorCheck/ButtonList.vue";
+import RegisterCheckList from "../../components/doctorCheck/RegisterCheckList.vue";
+import CheckItemList from "../../components/doctorCheck/CheckItemList.vue";
+import CheckSumSug from "../../components/doctorCheck/CheckSumSug.vue";
+import RegisterCheckEdit from "../../components/doctorCheck/RegisterCheckEdit.vue";
+
+export default {
+    components: {
+        RegisterCheckList,
+        PatientRegisterBase,
+        ButtonList,
+        CheckItemList,
+        CheckSumSug,
+        RegisterCheckEdit
+    },
+    data() {
+        return {
+            tabChoosed: "1",
+        };
+    },
+
+    created() { },
+
+    //挂载完成
+    mounted() {
+        this.dictInit();
+    },
+
+    computed: {
+        ...mapState(["dict", "patientRegister", "doctorCheck"]),
+    },
+
+    methods: {
+        ...mapActions(["getCustomerOrgGroup"]),
+
+        //保存数据
+        save() {
+
+            if (!this.doctorCheck.RegisterCheckEdit.id) {
+                alert("请选择检查项目")
+                return
+            }
+            if (!this.doctorCheck.RegisterCheckEdit.checkDoctorId) {
+                alert("请选择检查医生")
+                return
+            }
+
+            //更新明细
+            this.updateCheckItemList();
+
+            //更新检查项目与医生
+            this.updateDoctorCheck();
+
+            //更新小结        
+            this.saveCheckSummary();
+
+            //更新建议      
+            this.saveCheckSuggestion();
+        },
+
+
+        //更新检查项目与医生
+        updateDoctorCheck() {
+            let body = {
+                registerCheckId: this.doctorCheck.RegisterCheckEdit.id,
+                checkDoctorId: this.doctorCheck.RegisterCheckEdit.checkDoctorId,
+                checkDate: this.doctorCheck.RegisterCheckEdit.checkDate
+            }
+            console.log(`/api/app/registercheck/updatecheckdoctor`, body)
+            postapi(`/api/app/registercheck/updatecheckdoctor`, body)
+                .then((res) => {
+                    console.log("updateCheckItemList", res.data);
+                    if (res.code != -1) {
+                        this.doctorCheck.RegisterCheckEdit.completeFlag = '1';
+                    }
+                })
+                .catch((err) => {
+                    this.$message({ type: "error", message: `项目明细保存失败，原因：${err}` });
+                });
+
+        },
+
+        //更新明细
+        updateCheckItemList() {
+            let body = []
+            for (let i = 0; i < this.doctorCheck.checkItemList.length; i++) {
+                body.push({
+                    registerCheckId: this.doctorCheck.checkItemList[i].registerCheckId,
+                    itemId: this.doctorCheck.checkItemList[i].itemId,
+                    result: this.doctorCheck.checkItemList[i].result,
+                    checkDoctorName: this.doctorCheck.RegisterCheckEdit.checkDoctorId,
+                    checkDate: this.doctorCheck.RegisterCheckEdit.checkDate,
+                })
+            }
+            console.log(`/api/app/registercheckitem/updateregistercheckitemmany`, body)
+            postapi(`/api/app/registercheckitem/updateregistercheckitemmany`, body)
+                .then((res) => {
+                    console.log("updateCheckItemList", res.data);
+                    if (res.code != -1) {
+                        this.doctorCheck.checkItemList = res.data;
+                    }
+                })
+                .catch((err) => {
+                    this.$message({ type: "error", message: `项目明细保存失败，原因：${err}` });
+                });
+        },
+
+        //更新小结        
+        saveCheckSummary() {
+            let body = []
+            this.doctorCheck.checkSummaryList.forEach(item => {
+                body.push({
+                    registerCheckId: item.registerCheckId,
+                    summary: item.summary,
+                    summaryFlag: item.summaryFlag,
+                })
+            });
+
+            console.log(`/api/app/registerchecksummary/createregisterchecksummarymany`, body)
+            postapi(`/api/app/registerchecksummary/createregisterchecksummarymany`, body)
+                .then((res) => {
+                    console.log("saveCheckSummary", res.data);
+                    if (res.code != -1) {
+                        //this.doctorCheck.RegisterCheckEdit.completeFlag = '1';
+                    }
+                })
+                .catch((err) => {
+                    this.$message({ type: "error", message: `项目明细保存失败，原因：${err}` });
+                });
+
+        },
+
+        //更新建议      
+        saveCheckSuggestion() {
+            let body = []
+            this.doctorCheck.checkSuggestionList.forEach(item => {
+                body.push({
+                    registerCheckId: item.registerCheckId,
+                    suggestion: item.suggestion
+                })
+            });
+
+            console.log(`/api/app/registerchecksuggestion/createregisterchecksuggestionmany`, body)
+            postapi(`/api/app/registerchecksuggestion/createregisterchecksuggestionmany`, body)
+                .then((res) => {
+                    console.log("saveCheckSuggestion", res.data);
+                    if (res.code != -1) {
+                        //this.doctorCheck.RegisterCheckEdit.completeFlag = '1';
+                    }
+                })
+                .catch((err) => {
+                    this.$message({ type: "error", message: `项目明细保存失败，原因：${err}` });
+                });
+
+        },
+
+        addSummary(){
+            if (!this.doctorCheck.RegisterCheckEdit.id) {
+                alert("请选择检查项目")
+                return
+            }
+            this.doctorCheck.checkSummaryList.push({
+                registerCheckId: this.doctorCheck.RegisterCheckEdit.id,
+                summary: '',
+                summaryFlag: 'N',
+            })
+            this.doctorCheck.checkSuggestionList.push({
+                registerCheckId: this.doctorCheck.RegisterCheckEdit.id,
+                suggestion: '',                
+            })
+        },
+    },
+
+    //监听事件()
+    watch: {
+        //1级单位值改变，分组改变
+        "patientRegister.query.CustomerOrgParentld"(newVal, oldVal) {
+            console.log(
+                "watch patientRegister.query.CustomerOrgParentld newVal：",
+                newVal,
+                " oldVal：",
+                oldVal
+            );
+            if (newVal != oldVal && newVal !== this.dict.personOrgId) {
+                this.getCustomerOrgGroup(newVal);
+            }
+        },
+    },
+};
 </script>
 <style scoped>
 .listBtn {
-  margin-top: 10px;
+    margin-top: 10px;
 }
 </style>

src/components/doctorCheck/CheckItemList.vue

@@ -74,15 +74,15 @@ export default {
     checkItemList(RegisterCheckId) {
       console.log(`/api/app/registercheckitem/getlistinregistercheckid?RegisterCheckId=${RegisterCheckId}`)
       getapi(`/api/app/registercheckitem/getlistinregistercheckid?RegisterCheckId=${RegisterCheckId}`)
-        .then((res) => {
-          console.log("checkItemList", res.data);
-          if (res.code == 1) {
-            this.doctorCheck.checkItemList = res.data;
-          }
-        })
-        .catch((err) => {
-          this.$message({ type: "error", message: `操作失败，原因：${err}` });
-        });
+      .then((res) => {
+        console.log("checkItemList", res.data);
+        if (res.code == 1) {
+          this.doctorCheck.checkItemList = res.data;
+        }
+      })
+      .catch((err) => {
+        this.$message({ type: "error", message: `操作失败，原因：${err}` });
+      });
     },
 
 

src/components/doctorCheck/CheckSumSug.vue

@@ -1,88 +1,108 @@
 <template>
-    <div style="display: flex;">
-      <div style="width:50%;">
-        <el-table :data="doctorCheck.checkSummaryList" width="100%" height="350" border
-            @row-click="rowClick">
-            <el-table-column prop="summary" label="小结" width="380" />
-            <el-table-column label="排序" width="80">
-              <template>
-                <el-tag class="move" style="cursor: move; margin-left: 15px" draggable="true" >
-                  <i class="el-icon-d-caret" style="width: 1rem; height: 1rem"></i>
-                </el-tag>
-              </template>
-            </el-table-column>
-        </el-table>
-      </div>
-      <div style="width:50%;">
-        <el-table :data="doctorCheck.checkSuggestionList" width="100%" height="350" border
-            @row-click="rowClick">
-            <el-table-column prop="suggestion" label="建议" width="380" />
-            <el-table-column label="排序" width="80">
-              <template>
-                <el-tag class="move" style="cursor: move; margin-left: 15px" draggable="true" >
-                  <i class="el-icon-d-caret" style="width: 1rem; height: 1rem"></i>
-                </el-tag>
-              </template>
-            </el-table-column>
-        </el-table>
-      </div>
+  <div style="display: flex;">
+    <div style="width:50%;">
+      <el-table :data="doctorCheck.checkSummaryList" width="100%" height="350" border @row-click="rowClick">
+        <el-table-column prop="summary" label="小结" width="380" >
+          <template slot-scope="scope">
+            <el-input type="textarea" v-model="doctorCheck.checkSummaryList[scope.$index].summary" placeholder="请输入小结"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="排序" width="80">
+          <template>
+            <el-tag class="move" style="cursor: move; margin-left: 15px" draggable="true">
+              <i class="el-icon-d-caret" style="width: 1rem; height: 1rem"></i>
+            </el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
     </div>
-  </template>
-  <script>
-  import { mapState } from 'vuex';
-  export default {
-    components: {},
-    data() {
-      return {
-
-      };
-    },
+    <div style="width:50%;">
+      <el-table :data="doctorCheck.checkSuggestionList" width="100%" height="350" border @row-click="rowClick">
+        <el-table-column prop="suggestion" label="建议" width="380" >
+          <template slot-scope="scope">
+            <el-input type="textarea" v-model="doctorCheck.checkSuggestionList[scope.$index].suggestion" placeholder="请输入建议"></el-input>
+          </template>
+        </el-table-column>
+        <el-table-column label="排序" width="80">
+          <template>
+            <el-tag class="move" style="cursor: move; margin-left: 15px" draggable="true">
+              <i class="el-icon-d-caret" style="width: 1rem; height: 1rem"></i>
+            </el-tag>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState } from 'vuex';
+import { getapi, postapi, putapi, deletapi } from "@/api/api";
+export default {
+  components: {},
+  data() {
+    return {
 
-    created() {},
+    };
+  },
 
-    //挂载完成
-    mounted() {},
+  created() { },
 
-    computed:{
-        ...mapState(['dict','doctorCheck']),
-    },
+  //挂载完成
+  mounted() { },
 
-    methods: {
-      tableRowClassName({row, rowIndex}) {
-        if (row.completeFlag === '0') {
-          return 'warning-row'; //未检
-        } else if (row.completeFlag === '2') {
-          return 'refuse-row'; //弃检
-        }
-        return '';
-      },
+  computed: {
+    ...mapState(['dict', 'doctorCheck']),
+  },
 
-      //选择组合项目
-      rowClick(row){
-        //registerCheckId
-        getapi(`/api/app/customer-org-group/in-customer-org-id/${customerOrgld}`)
+  methods: {
+    //获取小结
+    checkSummaryList(RegisterCheckId) {
+      console.log(`/api/app/registerchecksummary/getregisterchecksummarylist?RegisterCheckId=${RegisterCheckId}`)
+      getapi(`/api/app/registerchecksummary/getregisterchecksummarylist?RegisterCheckId=${RegisterCheckId}`)
         .then((res) => {
-            console.log("getCustomerOrgGroup", res.data);
-            if (res.code == 1) {
-                this.doctorCheck.checkItemList = res.data;
-            }
+          console.log("checkSummaryList", res.data);
+          if (res.code != -1) {
+            this.doctorCheck.checkSummaryList = res.data;
+          }
         })
         .catch((err) => {
-            this.$message({type: "error",message: `操作失败，原因：${err}`});
+          this.$message({ type: "error", message: `操作失败，原因：${err}` });
         });
+    },
 
-      },
+    //获取建议
+    checkSuggestionList(RegisterCheckId) {
+      console.log(`/api/app/registerchecksuggestion/getregisterchecksuggestionlist?RegisterCheckId=${RegisterCheckId}`)
+      getapi(`/api/app/registerchecksuggestion/getregisterchecksuggestionlist?RegisterCheckId=${RegisterCheckId}`)
+        .then((res) => {
+          console.log("checkSuggestionList", res.data);
+          if (res.code != -1) {
+            this.doctorCheck.checkSuggestionList = res.data;
+          }
+        })
+        .catch((err) => {
+          this.$message({ type: "error", message: `操作失败，原因：${err}` });
+        });
     },
-  };
-</script>
-<style scoped>
-  .el-table .warning-row {
-    background: rgb(240, 125, 125);
-  }
 
-  .el-table .refuse-row {
-    background: rgb(192, 192, 192);
-  }
+    //选择组合项目
+    rowClick(row) {
       
-</style>
+    },
+  },
+
+  //监听事件
+  watch: {
+    //检查项目切换
+    "doctorCheck.RegisterCheckId"(newVal, oldVal) {
+      console.log("watch doctorCheck.RegisterCheckId newVal：", newVal, " oldVal：", oldVal);
+      if (newVal != oldVal && newVal != '') {
+        this.checkSummaryList(newVal)
+        this.checkSuggestionList(newVal)
+      }
+    },
+  },
+};
+</script>
+<style></style>
   

src/components/doctorCheck/RegisterCheckList.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
-    <el-table :data="doctorCheck.RegisterCheckList" style="width: 100%" height="750" border
+    <el-table :data="doctorCheck.RegisterCheckList" style="width: 100%" height="750" 
+      border highlight-current-row
       :row-class-name="tableRowClassName" @row-click="rowClick">
       <el-table-column prop="asbitemName" label="组合项目" width="180" />    
     </el-table>

src/components/patientRegister/PatientRegisterList.vue

@@ -14,7 +14,9 @@
         ref="dataList"
         @selection-change="handleSelectionChange"
       >
-        <el-table-column type="selection" width="40" />
+        <el-table-column type="selection" width="40">
+          
+        </el-table-column>
         <el-table-column prop="completeFlag" label="体检进度">
           <template slot-scope="scope">
             <div>

src/views/doctorCheck/doctorCheck.vue

@@ -30,173 +30,173 @@
         </table>
     </div>
   </template>
-  <script>
-  import { mapState, mapActions } from "vuex";
-  import { getapi, postapi, putapi, deletapi } from "@/api/api";
-  import { tcdate } from "../../utlis/proFunc";
-  
-
-  import PatientRegisterBase from "../../components/doctorCheck/PatientRegisterBase.vue";
-  import ButtonList from "../../components/doctorCheck/ButtonList.vue";
-  import RegisterCheckList from "../../components/doctorCheck/RegisterCheckList.vue";
-  import CheckItemList from "../../components/doctorCheck/CheckItemList.vue";
-  import CheckSumSug from "../../components/doctorCheck/CheckSumSug.vue";
-  import RegisterCheckEdit from "../../components/doctorCheck/RegisterCheckEdit.vue";
-
-  export default {
-    components: {
-      RegisterCheckList,
-      PatientRegisterBase,
-      ButtonList,
-      CheckItemList,
-      CheckSumSug,
-      RegisterCheckEdit
-    },
-    data() {
-      return {
-        tabChoosed: "1",
-      };
-    },
-  
-    created() {},
-  
-    //挂载完成
-    mounted() {
-      this.dictInit();
-    },
-  
-    computed: {
-      ...mapState(["dict", "patientRegister", "customerOrg"]),
-    },
+<script>
+import { mapState, mapActions } from "vuex";
+import { getapi, postapi, putapi, deletapi } from "@/api/api";
+import { tcdate } from "../../utlis/proFunc";
+
+
+import PatientRegisterBase from "../../components/doctorCheck/PatientRegisterBase.vue";
+import ButtonList from "../../components/doctorCheck/ButtonList.vue";
+import RegisterCheckList from "../../components/doctorCheck/RegisterCheckList.vue";
+import CheckItemList from "../../components/doctorCheck/CheckItemList.vue";
+import CheckSumSug from "../../components/doctorCheck/CheckSumSug.vue";
+import RegisterCheckEdit from "../../components/doctorCheck/RegisterCheckEdit.vue";
+
+export default {
+  components: {
+    RegisterCheckList,
+    PatientRegisterBase,
+    ButtonList,
+    CheckItemList,
+    CheckSumSug,
+    RegisterCheckEdit
+  },
+  data() {
+    return {
+      tabChoosed: "1",
+    };
+  },
+
+  created() {},
+
+  //挂载完成
+  mounted() {
+    this.dictInit();
+  },
+
+  computed: {
+    ...mapState(["dict", "patientRegister", "customerOrg"]),
+  },
+
+  methods: {
+    ...mapActions(["getCustomerOrgGroup"]),
+    //数据初始化
+    dictInit() {
+      //性别
+      getapi("/api/app/sex").then((res) => {
+        if (res.code == 1) {
+          this.dict.sex = res.data;
+        }
+      });
 
-    methods: {
-      ...mapActions(["getCustomerOrgGroup"]),
-      //数据初始化
-      dictInit() {
-        //性别
-        getapi("/api/app/sex").then((res) => {
+      //体检中心
+      getapi("/api/app/organization-units/organization-unit-by-is-peis").then(
+        (res) => {
           if (res.code == 1) {
-            this.dict.sex = res.data;
-          }
-        });
-  
-        //体检中心
-        getapi("/api/app/organization-units/organization-unit-by-is-peis").then(
-          (res) => {
-            if (res.code == 1) {
-              this.dict.organization = res.data;
-            }
+            this.dict.organization = res.data;
           }
-        );
+        }
+      );
 
-        //体检单位
-        getapi("/api/app/customer-org/in-filter").then((res) => {
-          if (res.code == 1) {
-            this.dict.customerOrg = res.data.items;
-          }
-        });
+      //体检单位
+      getapi("/api/app/customer-org/in-filter").then((res) => {
+        if (res.code == 1) {
+          this.dict.customerOrg = res.data.items;
+        }
+      });
 
-        //体检类别
-        getapi("/api/app/medical-type/in-filter").then((res) => {
-          if (res.code == 1) {
-            this.dict.medicalType = res.data.items;
-          }
-        });
+      //体检类别
+      getapi("/api/app/medical-type/in-filter").then((res) => {
+        if (res.code == 1) {
+          this.dict.medicalType = res.data.items;
+        }
+      });
 
-        //人员类别
-        getapi("/api/app/personnel-type/in-filter").then((res) => {
-          if (res.code == 1) {
-            this.dict.personnelType = res.data.items;
-          }
-        });
+      //人员类别
+      getapi("/api/app/personnel-type/in-filter").then((res) => {
+        if (res.code == 1) {
+          this.dict.personnelType = res.data.items;
+        }
+      });
 
-        //婚姻状况
-        getapi("/api/app/marital-statuses").then((res) => {
-          if (res.code == 1) {
-            this.dict.maritalStatus = res.data.items;
-          }
-        });
+      //婚姻状况
+      getapi("/api/app/marital-statuses").then((res) => {
+        if (res.code == 1) {
+          this.dict.maritalStatus = res.data.items;
+        }
+      });
 
-        //性激素期
-        getapi("/api/app/sex-hormone-term/in-filter").then((res) => {
-          if (res.code == 1) {
-            this.dict.sexHormoneTerm = res.data.items;
-          }
-        });
+      //性激素期
+      getapi("/api/app/sex-hormone-term/in-filter").then((res) => {
+        if (res.code == 1) {
+          this.dict.sexHormoneTerm = res.data.items;
+        }
+      });
 
-        //民族
-        getapi("/api/app/nation/in-filter").then((res) => {
-          if (res.code == 1) {
-            this.dict.nation = res.data.items;
-          }
-        });
+      //民族
+      getapi("/api/app/nation/in-filter").then((res) => {
+        if (res.code == 1) {
+          this.dict.nation = res.data.items;
+        }
+      });
 
-        //籍惯 ，出生地
-        getapi("/api/app/birth-place/in-filter").then((res) => {
-          if (res.code == 1) {
-            this.dict.birthPlace = res.data.items;
-          }
-        });
+      //籍惯 ，出生地
+      getapi("/api/app/birth-place/in-filter").then((res) => {
+        if (res.code == 1) {
+          this.dict.birthPlace = res.data.items;
+        }
+      });
 
-        //套餐
-        getapi("/api/app/medical-package/in-filter").then((res) => {
-          if (res.code == 1) {
-            this.dict.medicalPackage = res.data.items;
-          }
-        });
+      //套餐
+      getapi("/api/app/medical-package/in-filter").then((res) => {
+        if (res.code == 1) {
+          this.dict.medicalPackage = res.data.items;
+        }
+      });
 
-        //分组，所有分组，不限单位，不限次数
-        getapi("/api/app/customer-org-group").then((res) => {
-          if (res.code == 1) {
-            this.dict.customerOrgGroupAll = res.data.items;
-          }
-        });
+      //分组，所有分组，不限单位，不限次数
+      getapi("/api/app/customer-org-group").then((res) => {
+        if (res.code == 1) {
+          this.dict.customerOrgGroupAll = res.data.items;
+        }
+      });
 
-        //支付方式
-        getapi("/api/app/pay-mode").then((res) => {
-          if (res.code == 1) {
-            this.dict.payMode = res.data;
-          }
-        });
+      //支付方式
+      getapi("/api/app/pay-mode").then((res) => {
+        if (res.code == 1) {
+          this.dict.payMode = res.data;
+        }
+      });
 
-        //体检类别 树结构
-        getapi("/api/app/item-type/by-code-all").then((res) => {
-          if (res.code == 1) {
-            this.dict.itemTypeTree = res.data;
-            tcdate(this.dict.itemTypeTree);
-          }
-        });
+      //体检类别 树结构
+      getapi("/api/app/item-type/by-code-all").then((res) => {
+        if (res.code == 1) {
+          this.dict.itemTypeTree = res.data;
+          tcdate(this.dict.itemTypeTree);
+        }
+      });
 
-        getapi("/api/app/asbitem/in-filter?Filter").then((res) => {
-          if (res.code == 1) {
-            this.dict.asbItemAll = res.data.items;
-          }
-        });
+      getapi("/api/app/asbitem/in-filter?Filter").then((res) => {
+        if (res.code == 1) {
+          this.dict.asbItemAll = res.data.items;
+        }
+      });
 
-        console.log("dict", this.dict);
-      },
+      console.log("dict", this.dict);
     },
-  
-    //监听事件()
-    watch: {
-      //1级单位值改变，分组改变
-      "patientRegister.query.CustomerOrgParentld"(newVal, oldVal) {
-        console.log(
-          "watch patientRegister.query.CustomerOrgParentld newVal：",
-          newVal,
-          " oldVal：",
-          oldVal
-        );
-        if (newVal != oldVal && newVal !== this.dict.personOrgId) {
-          this.getCustomerOrgGroup(newVal);
-        }
-      },
+  },
+
+  //监听事件()
+  watch: {
+    //1级单位值改变，分组改变
+    "patientRegister.query.CustomerOrgParentld"(newVal, oldVal) {
+      console.log(
+        "watch patientRegister.query.CustomerOrgParentld newVal：",
+        newVal,
+        " oldVal：",
+        oldVal
+      );
+      if (newVal != oldVal && newVal !== this.dict.personOrgId) {
+        this.getCustomerOrgGroup(newVal);
+      }
     },
-  };
-  </script>
-  <style scoped>
-  .box {
-    display: flex;
-  }
-  </style>
+  },
+};
+</script>
+<style scoped>
+.box {
+  display: flex;
+}
+</style>