优化详情病案首页

src/views/data/query/details.vue

@@ -10,80 +10,73 @@
     </div>
     <div class="cont_container">
       <div class="cont-left">
-        <!-- <div class="cont-title-description">{{data.ZA03}}</div> -->
+        <div class="contLeft-title-top">
+          <div class="title-top-f">
+            <div class="refachInput">
+              <span ref="ZA03" class="homeTitle-i-t">医疗机构名称:</span>
+              <span v-if="!ifFile" class="homeTitle-i-x">{{ data.ZA03 }}</span>
+              <!-- data.ZA03 -->
+              <el-input v-else class="width200" v-model="data.ZA03" placeholder="请输入内容"></el-input>
+            </div>
+          </div>
+          <div class="title-top-f">
+            <div class="refachInput">
+              <span ref="TYSHXYDM" class="homeTitle-i-t">统一社会信用代码:</span>
+              <span v-if="!ifFile" class="homeTitle-i-x">{{ data.TYSHXYDM }}</span>
+              <el-input v-else v-model="data.TYSHXYDM" class="width150" placeholder="请输入内容"></el-input>
+            </div>
+          </div>
+          <div class="title-top-r">
+            <div class="refachInput" style="display: flex">
+              <span ref="UNT_ID" v-if="!ifFile" class="homeTitle-i-t">
+                ( 组织机构代码：
+                <span class="homeTitle-i-x">
+                  <span>{{ data.UNT_ID}}</span>
+                </span>
+                {{ data.UNT_ID?'':'-'}})
+              </span>
+              <!-- data.AAA27 -->
+              <div v-else>
+                <el-input class="width170" v-model="data.UNT_ID" placeholder="请输入内容"></el-input>
+              </div>
+            </div>
+          </div>
+        </div>
         <div class="cont-title-description">住院病案首页</div>
         <!--  -->
         <!--  -->
-        <div class="cont-title">
-          <div></div>
-          <div class="refachInput">
-            <span ref="AAA28">病案号:</span>
-            <span v-if="!ifFile">{{ data.AAA28 }}</span>
-            <el-input v-else v-model="data.AAA28" class="width170" placeholder="请输入内容"></el-input>
+        <div class="cont-title contLeft-title-top">
+          <div class="title-top-300">
+            <div class="refachInput">
+              <span ref="AAA26C" class="homeTitle-i-t">医疗付费方式:</span>
+              <span v-if="!ifFile" class="homeTitle-i-x">{{ data.AAA26C }}</span>
+              <el-input v-else v-model="data.AAA26C" class="width150" placeholder="请输入内容"></el-input>
+            </div>
+          </div>
+          <div class="title-top-300">
+            <div class="refachInput">
+              <span ref="JKKH" class="homeTitle-i-t">健康卡号:</span>
+              <span v-if="!ifFile" class="homeTitle-i-x">{{ data.JKKH ? data.JKKH : ' —  ' }}</span>
+              <!-- data.AAA27 -->
+              <el-input v-else class="width170" v-model="data.JKKH" placeholder="请输入内容"></el-input>
+            </div>
+          </div>
+          <div class="title-top-f">
+            <div class="refachInput">
+              <span class="homeTitle-i-t">第</span>
+              <span v-if="!ifFile" class="homeTitle-i-x">{{ data.AAA29 }}</span>
+              <el-input v-else v-model="data.AAA29" class="width100" style="width: 80px" placeholder="请输入内容"></el-input>
+              <span class="homeTitle-i-t">次住院</span>
+            </div>
+          </div>
+          <div class="title-top-f">
+            <div class="refachInput">
+              <span ref="AAA28" class="homeTitle-i-t">病案号:</span>
+              <span v-if="!ifFile" class="homeTitle-i-x">{{ data.AAA28 }}</span>
+              <el-input v-else v-model="data.AAA28" class="width170" placeholder="请输入内容"></el-input>
+            </div>
+            
           </div>
-        </div>
-        <div>
-          <el-row type="flex" class="row-bg" justify="space-around">
-            <el-col :span="8">
-              <div class="refachInput">
-                <span ref="ZA03">医疗机构名称:</span>
-                <span v-if="!ifFile">{{ data.ZA03 }}</span>
-                <!-- data.ZA03 -->
-                <el-input v-else class="width200" v-model="data.ZA03" placeholder="请输入内容"></el-input>
-              </div>
-            </el-col>
-            <el-col :span="7">
-              <div class="refachInput">
-                <span ref="TYSHXYDM">统一社会信用代码:</span>
-                <span v-if="!ifFile">{{ data.TYSHXYDM }}</span>
-                <el-input v-else v-model="data.TYSHXYDM" class="width150" placeholder="请输入内容"></el-input>
-              </div>
-            </el-col>
-            <el-col :span="7">
-              <div class="refachInput" style="display: flex">
-                <span ref="UNT_ID" v-if="!ifFile">
-                  (组织机构代码：
-                  <span>
-                    <span v-if="data.UNT_ID">{{ data.UNT_ID }})</span>
-                    <span v-else>-)</span>
-                  </span>
-                </span>
-
-                <!-- data.AAA27 -->
-                <div v-else>
-                  <el-input class="width170" v-model="data.UNT_ID" placeholder="请输入内容"></el-input>
-                </div>
-              </div>
-            </el-col>
-            <!-- <el-col :span="6">
-  
-  </el-col> -->
-          </el-row>
-          <el-row type="flex" class="row-bg" justify="space-around">
-            <el-col :span="8">
-              <div class="refachInput">
-                <span ref="AAA26C">医疗付费方式:</span>
-                <span v-if="!ifFile">{{ data.AAA26C }}</span>
-                <el-input v-else v-model="data.AAA26C" class="width150" placeholder="请输入内容"></el-input>
-              </div>
-            </el-col>
-            <el-col :span="7">
-              <div class="refachInput">
-                <span ref="JKKH">健康卡号:</span>
-                <span v-if="!ifFile">{{ data.JKKH ? data.JKKH : ' —  ' }}</span>
-                <!-- data.AAA27 -->
-                <el-input v-else class="width170" v-model="data.JKKH" placeholder="请输入内容"></el-input>
-              </div>
-            </el-col>
-            <el-col :span="7">
-              <div class="refachInput">
-                <span>第</span>
-                <span v-if="!ifFile">{{ data.AAA29 }}</span>
-                <el-input v-else v-model="data.AAA29" class="width100" style="width: 80px" placeholder="请输入内容"></el-input>
-                <span>次住院</span>
-              </div>
-            </el-col>
-          </el-row>
         </div>
 
         <div class="cont-edit-dev"></div>
@@ -1292,7 +1285,7 @@
             <!-- 0优 1良 2中 3差 -->
             <div class="spaview" v-if="score>=97">优</div>
             <div class="spaview" v-else-if="score>=90&&score<=96">良</div>
-                <div class="spaview" v-else-if="score>=75&&score<=89">中</div>
+            <div class="spaview" v-else-if="score>=75&&score<=89">中</div>
             <div class="spaview" v-else>差</div>
           </div>
         </div>
@@ -1379,8 +1372,9 @@ export default {
     this.valData = this.storageGet('getData');
     console.log(this.storageGet('getData'));
     if(this.valData){
-    this.funQuery();
+      this.funQuery();
     }
+
     // 生命周期钩子：模板编译、挂载之后(此时不保证已在 document 中)
   },
   beforeUpate() {
@@ -1437,23 +1431,27 @@ export default {
     },
     // 之前的方法
     getBlankIndex(item) {
+      
       if(item.error_field=='AAA11'||item.error_field=='AAA10'||item.error_field=='AAA09'){
         item.error_field='AAA11'
       }
       if(item.error_field=='ICD10_ID1'||item.error_field=='ABC01C'){
         item.error_field='ICD10_ID1'
       }
-      let eleClass = document.querySelectorAll('.choose-twinkle');
+      let a = document.querySelectorAll('.choose-twinkle');
+      let b = document.querySelectorAll('.choose-twinkle-1');
+      let eleClass = [...a,...b];
       console.log(eleClass);
+
       for (let item = 0; item < eleClass.length; item++) {
         console.log(eleClass[item]);
         eleClass[item].className = 'table-label';
       }
       if (Array.isArray(this.$refs[item.error_field])) {
-        this.$refs[item.error_field][0].className = 'choose-twinkle';
+        this.$refs[item.error_field][0].className = item.category<=1 ? 'choose-twinkle':'choose-twinkle-1';
         this.$refs[item.error_field][0].scrollIntoView({ block: 'start', behavior: 'smooth' });
       } else {
-        this.$refs[item.error_field].className = 'choose-twinkle';
+        this.$refs[item.error_field].className = item.category<=1 ? 'choose-twinkle':'choose-twinkle-1';
         this.$refs[item.error_field].scrollIntoView({ block: 'start', behavior: 'smooth' });
       }
     },
@@ -1470,6 +1468,7 @@ export default {
         this.score = res.data.score;
         this.errorList = res.data.error;
         console.log(this.errorList, ' this.errorList');
+
         if (this.data.diagnosis.length < 22) {
           for (let i = 0; i < 22 - this.data.diagnosis.length; i++) {
             this.data.diagnosis.push({
@@ -1504,6 +1503,8 @@ export default {
           }
         }
         console.log(this.data.operation);
+
+       
       });
     },
   },
@@ -1539,7 +1540,7 @@ export default {
   overflow-y: scroll;
   background: #ffffff;
   border: 1px solid #e2e2e2;
-  padding: 10px;
+  padding: 16px 10px 10px 10px;
 }
 .cont-reight {
   width: 300px;
@@ -1837,10 +1838,53 @@ table {
   color: red;
   font-weight: 600;
   background: yellow;
+  border: 2px solid red;
+}
+.choose-twinkle-1{
+  font-size: 20px;
+  color: red;
+  font-weight: 600;
+  background: yellow;
+  border: 2px solid #e26e01;
 }
 .table-value-look{
   padding-left: 12px;
   color: #ff0000;
   cursor: pointer;
 }
+// ==============  新增文本样式  ==============
+
+.contLeft-title-top{
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.contLeft-title-top>div.title-top-f{
+  flex: 1;
+}
+.contLeft-title-top>div.title-top-r{
+  width: 200px;
+}
+.contLeft-title-top>div.title-top-300{
+  width: 300px;
+}
+.refachInput span{
+  height: auto;
+  line-height: 1;
+  padding: 0;
+}
+
+.refachInput >span{
+  height: 30px;
+  line-height: 30px;
+  font-weight: 100;
+}
+.refachInput .homeTitle-i-t{
+  font-weight: bold;
+}
+.refachInput  .homeTitle-i-x{
+  border-bottom: 1px solid #333;
+  padding-right: 12px;
+  margin-left: 2px;
+}
 </style>