住院费用美化

src/xt_pages/hospitalStation/components/settlePrescriptionTable.vue

@@ -1,54 +1,85 @@
 <template>
   <div class="prescriptionTable">
-    <el-table v-if="prescription.type == 1" :data="prescription.advices" border style="width: 99%;"
-              :row-style="{ color: '#303133' }"
-              :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
-      <el-table-column align="center" type="index" width="40" label="序号"></el-table-column>
+    <el-table
+      v-if="prescription.type == 1"
+      :data="prescription.advices"
+      border
+      style="width: 99%"
+      :row-style="changColor"
+      :header-cell-style="{
+        backgroundColor: 'rgb(245, 247, 250)',
+        color: '#606266',
+      }"
+      highlight-current-row
+    >
+      <el-table-column
+        align="center"
+        type="index"
+        width="40"
+        label="序号"
+      ></el-table-column>
       <el-table-column align="center" prop="name" label="名称">
-        <template slot-scope="scope"><span :title='scope.row.drug_name'>{{ scope.row.drug_name }}</span></template>
+        <template slot-scope="scope"
+          ><span :title="scope.row.drug_name">{{
+            scope.row.drug_name
+          }}</span></template
+        >
       </el-table-column>
 
       <el-table-column align="center" prop="name" width="90" label="单次用量">
         <template slot-scope="scope">
           <!--<el-input v-model="scope.row.single_dose" readonly style="width:65%;"></el-input>-->
-          <div>{{scope.row.single_dose}}&nbsp;&nbsp;{{scope.row.single_dose_unit}}</div>
+          <div>
+            {{ scope.row.single_dose }}&nbsp;&nbsp;{{
+              scope.row.single_dose_unit
+            }}
+          </div>
         </template>
       </el-table-column>
       <el-table-column align="center" prop="name" width="100" label="用法">
         <template slot-scope="scope">
           <!--<el-input v-model="scope.row.delivery_way" readonly></el-input>-->
-          <div> {{scope.row.delivery_way}}</div>
-
+          <div>{{ scope.row.delivery_way }}</div>
         </template>
       </el-table-column>
       <el-table-column align="center" prop="name" width="100" label="频率">
         <template slot-scope="scope">
-          <div> {{scope.row.execution_frequency}}</div>
+          <div>{{ scope.row.execution_frequency }}</div>
 
           <!--<el-input v-model="scope.row.execution_frequency" readonly></el-input>-->
         </template>
       </el-table-column>
 
       <el-table-column align="center" prop="day" width="50" label="天数">
-        <template slot-scope="scope">{{scope.row.day}}天</template>
+        <template slot-scope="scope">{{ scope.row.day }}天</template>
       </el-table-column>
 
       <el-table-column align="center" prop="name" width="100" label="总量">
         <template slot-scope="scope">
           <!--<el-input v-model="scope.row.prescribing_number" style="width:60%" readonly placeholder=""></el-input>-->
-          <div>{{scope.row.prescribing_number}}&nbsp;&nbsp;{{scope.row.prescribing_number_unit}}</div>
+          <div>
+            {{ scope.row.prescribing_number }}&nbsp;&nbsp;{{
+              scope.row.prescribing_number_unit
+            }}
+          </div>
         </template>
       </el-table-column>
       <el-table-column align="center" prop="name" width="60" label="单价">
         <template slot-scope="scope">
-          <div> {{scope.row.retail_price}}元</div>
+          <div>{{ scope.row.retail_price }}元</div>
 
           <!--<el-input v-model="scope.row.retail_price" placeholder="" readonly></el-input>-->
         </template>
       </el-table-column>
       <el-table-column align="center" prop="name" width="60" label="总价">
         <template slot-scope="scope">
-          <div> {{(scope.row.prescribing_number * scope.row.retail_price).toFixed(2)}}元</div>
+          <div>
+            {{
+              (scope.row.prescribing_number * scope.row.retail_price).toFixed(
+                2
+              )
+            }}元
+          </div>
 
           <!--<el-input v-model="scope.row.retail_price" placeholder="" readonly></el-input>-->
         </template>
@@ -56,98 +87,137 @@
 
       <el-table-column align="center" prop="name" width="60" label="全自费金额">
         <template slot-scope="scope">
-          <div> {{scope.row.fulamt_ownpay_amt}}元</div>
+          <div>{{ scope.row.fulamt_ownpay_amt }}元</div>
         </template>
       </el-table-column>
 
-
-
       <el-table-column align="center" prop="name" width="60" label="超限价金额">
         <template slot-scope="scope">
-          <div> {{scope.row.overlmt_amt}}元</div>
+          <div>{{ scope.row.overlmt_amt }}元</div>
         </template>
       </el-table-column>
 
-
-      <el-table-column align="center" prop="name" width="60" label="先行自付金额">
+      <el-table-column
+        align="center"
+        prop="name"
+        width="60"
+        label="先行自付金额"
+      >
         <template slot-scope="scope">
-          <div> {{scope.row.preselfpay_amt}}元</div>
+          <div>{{ scope.row.preselfpay_amt }}元</div>
         </template>
       </el-table-column>
 
-
-      <el-table-column align="center" prop="name" width="60" label="符合正常范围金额">
+      <el-table-column
+        align="center"
+        prop="name"
+        width="60"
+        label="符合正常范围金额"
+      >
         <template slot-scope="scope">
-          <div> {{scope.row.inscp_scp_amt}}元</div>
+          <div>{{ scope.row.inscp_scp_amt }}元</div>
         </template>
       </el-table-column>
 
-
-
-
       <el-table-column align="center" prop="name" width="50" label="备注">
         <template slot-scope="scope">
           <!--<el-input v-model="scope.row.remark" :title="scope.row.remark" placeholder="" readonly></el-input>-->
-          <div> {{scope.row.remark}}</div>
+          <div>{{ scope.row.remark }}</div>
         </template>
       </el-table-column>
     </el-table>
-    <el-table v-if="prescription.type == 2" :data="prescription.project" border style="width: 99%;"
-              :row-style="{ color: '#303133' }"
-              :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}" highlight-current-row>
-      <el-table-column align="center" type="index" width="40" label="序号"></el-table-column>
+    <el-table
+      v-if="prescription.type == 2"
+      :data="prescription.project"
+      border
+      style="width: 99%"
+      :row-style="changColor"
+      :header-cell-style="{
+        backgroundColor: 'rgb(245, 247, 250)',
+        color: '#606266',
+      }"
+      highlight-current-row
+    >
+      <el-table-column
+        align="center"
+        type="index"
+        width="40"
+        label="序号"
+      ></el-table-column>
       <el-table-column align="center" prop="project_name" label="名称">
         <template slot-scope="scope">{{ scope.row.project_name }}</template>
       </el-table-column>
-      <el-table-column align="center" prop="statistical_classification" width="100" label="组">
-        <template slot-scope="scope">{{getGroup(scope.row.statistical_classification)}}</template>
+      <el-table-column
+        align="center"
+        prop="statistical_classification"
+        width="100"
+        label="组"
+      >
+        <template slot-scope="scope">{{
+          getGroup(scope.row.statistical_classification)
+        }}</template>
       </el-table-column>
-      <el-table-column align="center" prop="single_dose" width="80" label="单次用量">
-        <template slot-scope="scope">{{scope.row.single_dose}}{{scope.row.unit}}</template>
-
+      <el-table-column
+        align="center"
+        prop="single_dose"
+        width="80"
+        label="单次用量"
+      >
+        <template slot-scope="scope"
+          >{{ scope.row.single_dose }}{{ scope.row.unit }}</template
+        >
       </el-table-column>
-      <el-table-column align="center" prop="delivery_way" width="80" label="用法">
+      <el-table-column
+        align="center"
+        prop="delivery_way"
+        width="80"
+        label="用法"
+      >
         <template slot-scope="scope">
           <!--<el-input v-model="scope.row.delivery_way" placeholder="" readonly></el-input>-->
-          {{scope.row.delivery_way}}
-
+          {{ scope.row.delivery_way }}
         </template>
       </el-table-column>
-      <el-table-column align="center" prop="execution_frequency" width="80" label="频率">
+      <el-table-column
+        align="center"
+        prop="execution_frequency"
+        width="80"
+        label="频率"
+      >
         <template slot-scope="scope">
           <!--<el-input v-model="scope.row.execution_frequency" placeholder="" readonly></el-input>-->
-          {{scope.row.execution_frequency}}
-
+          {{ scope.row.execution_frequency }}
         </template>
       </el-table-column>
-      <el-table-column align="center" prop="number_days" width="50" label="天数">
+      <el-table-column
+        align="center"
+        prop="number_days"
+        width="50"
+        label="天数"
+      >
         <template slot-scope="scope">
           <!--<el-input v-model="scope.row.number_days" placeholder="" readonly></el-input>-->
-          {{scope.row.number_days}}天
-
+          {{ scope.row.number_days }}天
         </template>
-
       </el-table-column>
       <el-table-column align="center" prop="total" width="50" label="总量">
         <template slot-scope="scope">
-          <div style="display:flex;">
+          <div style="display: flex">
             <!--<el-input v-model="scope.row.total" placeholder="" readonly></el-input>-->
-            {{scope.row.total}} {{scope.row.unit}}
-
+            {{ scope.row.total }} {{ scope.row.unit }}
           </div>
         </template>
       </el-table-column>
       <el-table-column align="center" prop="name" width="50" label="单价">
         <template slot-scope="scope">
           <!--<el-input v-model="scope.row.price" placeholder="" readonly></el-input>-->
-          {{scope.row.price}}元
-
+          {{ scope.row.price }}元
         </template>
       </el-table-column>
 
       <el-table-column align="center" prop="name" width="60" label="总价">
         <template slot-scope="scope">
-          <div> {{(scope.row.total * scope.row.price).toFixed(2)}}元</div>
+          <div>{{ (scope.row.total * scope.row.price).toFixed(2) }}元</div>
 
           <!--<el-input v-model="scope.row.retail_price" placeholder="" readonly></el-input>-->
         </template>
@@ -155,49 +225,66 @@
 
       <el-table-column align="center" prop="name" width="60" label="全自费金额">
         <template slot-scope="scope">
-          <div> {{scope.row.fulamt_ownpay_amt}}元</div>
+          <div>{{ scope.row.fulamt_ownpay_amt }}元</div>
         </template>
       </el-table-column>
 
-
-
       <el-table-column align="center" prop="name" width="60" label="超限价金额">
         <template slot-scope="scope">
-          <div> {{scope.row.overlmt_amt}}元</div>
+          <div>{{ scope.row.overlmt_amt }}元</div>
         </template>
       </el-table-column>
 
-
-      <el-table-column align="center" prop="name" width="60" label="先行自付金额">
+      <el-table-column
+        align="center"
+        prop="name"
+        width="60"
+        label="先行自付金额"
+      >
         <template slot-scope="scope">
-          <div> {{scope.row.preselfpay_amt}}元</div>
+          <div>{{ scope.row.preselfpay_amt }}元</div>
         </template>
       </el-table-column>
 
-
-      <el-table-column align="center" prop="name" width="60" label="符合正常范围金额">
+      <el-table-column
+        align="center"
+        prop="name"
+        width="60"
+        label="符合正常范围金额"
+      >
         <template slot-scope="scope">
-          <div> {{scope.row.inscp_scp_amt}}元</div>
+          <div>{{ scope.row.inscp_scp_amt }}元</div>
         </template>
       </el-table-column>
 
-
-
       <el-table-column align="center" prop="name" width="50" label="备注">
         <template slot-scope="scope">
           <!--<el-input v-model="scope.row.remark" readonly></el-input>-->
-          {{scope.row.remark}}
-
+          {{ scope.row.remark }}
         </template>
       </el-table-column>
     </el-table>
 
     <div class="additionalBox">
-      <div class="additionalOne" v-for="(item,index) in prescription.addition" :key="index">
-        <span :title="item.item_name">{{item.item_name}}</span>
-        <el-input v-model="item.price" placeholder="" style="width:50px;" readonly></el-input>
+      <div
+        class="additionalOne"
+        v-for="(item, index) in prescription.addition"
+        :key="index"
+      >
+        <span :title="item.item_name">{{ item.item_name }}</span>
+        <el-input
+          v-model="item.price"
+          placeholder=""
+          style="width: 50px"
+          readonly
+        ></el-input>
         共
-        <el-input v-model="item.count" placeholder="" style="width:50px;" readonly></el-input>
+        <el-input
+          v-model="item.count"
+          placeholder=""
+          style="width: 50px"
+          readonly
+        ></el-input>
         次
         <!--<i class="el-icon-delete deleteIcon" @click="delAddition(index,item)"></i>-->
       </div>
@@ -206,79 +293,96 @@
 </template>
 
 <script>
-import { getInitData } from '@/api/his/his'
-import { getDictionaryDataConfig} from "@/utils/data";
+import { getInitData } from "@/api/his/his";
+import { getDictionaryDataConfig } from "@/utils/data";
 
 export default {
   props: {
-    prescription: Object
+    prescription: Object,
   },
   data() {
     return {
       drugways: [],
-      efs: []
-    }
-  }, mounted() {
-    getInitData().then(response => {
+      efs: [],
+    };
+  },
+  mounted() {
+    getInitData().then((response) => {
       if (response.data.state == 0) {
         this.$message.error(response.data.msg);
-        return false
+        return false;
       } else {
         this.drugways = response.data.data.drugways;
-        this.efs = response.data.data.efs
+        this.efs = response.data.data.efs;
       }
-    })
-  }, methods:  {
-
+    });
+  },
+  methods: {
+    changColor({ row, rowIndex }) {
+      if (rowIndex % 2 == 1) {
+        // 变颜色的条件
+        return {
+          backgroundColor: "#C4E1FF",
+          color: "#303133", // 这个return的就是样式 可以是color 也可以是backgroundColor
+        };
+      } else {
+        return {
+          backgroundColor: "#ACD6FF",
+          color: "#303133",
+        };
+      }
+    },
 
-    getGroup(id){
+    getGroup(id) {
       var name = "";
-      var statistics_category =  getDictionaryDataConfig('system','statistics_category');
-      console.log("2235",statistics_category);
-      for(let i=0;i<statistics_category.length;i++){
-        if(id == statistics_category[i].id){
-          name = statistics_category[i].name
+      var statistics_category = getDictionaryDataConfig(
+        "system",
+        "statistics_category"
+      );
+      console.log("2235", statistics_category);
+      for (let i = 0; i < statistics_category.length; i++) {
+        if (id == statistics_category[i].id) {
+          name = statistics_category[i].name;
         }
       }
-      return name
+      return name;
     },
-
-
-  }
-}
+  },
+};
 </script>
 
 <style lang="scss">
-.prescriptionTable{
-.additionalBox{
-  margin-top: 20px;
-  display: flex;
-  flex-wrap: wrap;
-.additionalOne{
-  margin-right:20px;
-  margin-bottom:10px;
-  display: flex;
-  align-items: center;
->span{
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width:80px;
-  display: inline-block;
-  font-size: 14px;
-}
-}
-.deleteIcon{
-  color:red;
-  margin-left:5px;
-}
-}
-.el-table th .cell, .el-table td .cell{
-  padding: 0 2px;
-  white-space: pre-line;
-}
-.el-icon-delete{
-  color:red;
-}
+.prescriptionTable {
+  .additionalBox {
+    margin-top: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    .additionalOne {
+      margin-right: 20px;
+      margin-bottom: 10px;
+      display: flex;
+      align-items: center;
+      > span {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 80px;
+        display: inline-block;
+        font-size: 14px;
+      }
+    }
+    .deleteIcon {
+      color: red;
+      margin-left: 5px;
+    }
+  }
+  .el-table th .cell,
+  .el-table td .cell {
+    padding: 0 2px;
+    white-space: pre-line;
+  }
+  .el-icon-delete {
+    color: red;
+  }
 }
 </style>