Vue_New/src/xt_pages/hospitalStation/components/settlePrescriptionTable.vue

<template>
  <div class="prescriptionTable">
    <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
        >
      </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>
        </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>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name" width="100" label="频率">
        <template slot-scope="scope">
          <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>
      </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>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name" width="60" label="单价">
        <template slot-scope="scope">
          <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>

          <!--<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.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>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        prop="name"
        width="60"
        label="先行自付金额"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.preselfpay_amt }}元</div>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        prop="name"
        width="60"
        label="符合正常范围金额"
      >
        <template slot-scope="scope">
          <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>
        </template>
      </el-table-column>
    </el-table>
    <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>
      <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="用法"
      >
        <template slot-scope="scope">
          <!--<el-input v-model="scope.row.delivery_way" placeholder="" readonly></el-input>-->
          {{ scope.row.delivery_way }}
        </template>
      </el-table-column>
      <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 }}
        </template>
      </el-table-column>
      <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 }}天
        </template>
      </el-table-column>
      <el-table-column align="center" prop="total" width="50" label="总量">
        <template slot-scope="scope">
          <div style="display: flex">
            <!--<el-input v-model="scope.row.total" placeholder="" readonly></el-input>-->
            {{ 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 }}元
        </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>

          <!--<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.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>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        prop="name"
        width="60"
        label="先行自付金额"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.preselfpay_amt }}元</div>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        prop="name"
        width="60"
        label="符合正常范围金额"
      >
        <template slot-scope="scope">
          <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 }}
        </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>
        共
        <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>
    </div>
  </div>
</template>

<script>
import { getInitData } from "@/api/his/his";
import { getDictionaryDataConfig } from "@/utils/data";

export default {
  props: {
    prescription: Object,
  },
  data() {
    return {
      drugways: [],
      efs: [],
    };
  },
  mounted() {
    getInitData().then((response) => {
      if (response.data.state == 0) {
        this.$message.error(response.data.msg);
        return false;
      } else {
        this.drugways = response.data.data.drugways;
        this.efs = response.data.data.efs;
      }
    });
  },
  methods: {
    changColor({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        // 变颜色的条件
        return {
          backgroundColor: "#C4E1FF",
          color: "#303133", // 这个return的就是样式 可以是color 也可以是backgroundColor
        };
      } else {
        return {
          backgroundColor: "#ACD6FF",
          color: "#303133",
        };
      }
    },

    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;
        }
      }
      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;
  }
}
</style>