elizebeth/src/xt_pages/outpatientCharges/components/prescriptionTable.vue

<template>
  <div class="prescriptionTable">
    <el-table
      v-if="prescription.type == 1"
      :data="prescription.advices"
      border
      height="370"
      style="width: 99%"
      :row-style="changColor"
      :header-cell-style="{
        color: '#606266',
      }"
      highlight-current-row
      
    >
      <el-table-column
        fixed
        align="center"
        type="index"
        width="50"
        label="序号"
      ></el-table-column>
      <el-table-column
        fixed
        align="center"
        prop="name"
        width="300"
        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="80" label="单次用量">
        <template slot-scope="scope">
          <!--<el-input v-model="scope.row.delivery_way" readonly></el-input>-->
          <div>{{ scope.row.single_dose }}{{ scope.row.single_dose_unit }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name" width="80" 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="80" 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="80" label="天数">
        <template slot-scope="scope">{{ scope.row.day }}天</template>
      </el-table-column>
      <el-table-column align="center" prop="name" width="80" label="总量">
        <template slot-scope="scope">{{ scope.row.prescribing_number }}{{scope.row.prescribing_number_unit}}</template>
      </el-table-column>
      <el-table-column align="center" prop="name" width="80" 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="80" label="执行状态">
        <template slot-scope="scope">
          <div>{{ scope.row.execution_state == 1 ? "已执行" : "未执行" }}</div>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="name" width="220" label="医保编码">
        <template slot-scope="scope">
          <div>{{ scope.row.code }}</div>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="name" width="80" label="规格/型号">
        <template slot-scope="scope">
          <div>{{ scope.row.spec }}</div>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="name" width="60" label="金额">
        <template slot-scope="scope">
          <div>{{ scope.row.det_item_fee_sumamt }}</div>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="name" width="120" label="生产厂家">
        <template slot-scope="scope">
          <div>{{ getName(scope.row.name_id) }}</div>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="name" width="90" label="全自费金额">
        <template slot-scope="scope">
          <div>{{ scope.row.fulamt_ownpay_amt }}元</div>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="name" width="90" label="超限价金额">
        <template slot-scope="scope">
          <div>{{ scope.row.overlmt_amt }}元</div>
        </template>
      </el-table-column>

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

      <el-table-column
        align="center"
        prop="name"
        width="130"
        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
      height="370"
      style="width: 99%"
      :row-style="changColor"
      :header-cell-style="{
        backgroundColor: 'rgb(245, 247, 250)',
        color: '#606266',
      }"
      highlight-current-row
    >
      <el-table-column
        fixed
        align="center"
        type="index"
        width="50"
        label="序号"
      ></el-table-column>
      <el-table-column
        fixed
        align="center"
        prop="project_name"
        width="280"
        label="名称"
      >
        <template slot-scope="scope">{{ scope.row.project_name }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="statistical_classification"
        width="80"
        label="组"
      >
        <template slot-scope="scope">{{
          scope.row.type == 2
            ? 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">{{ scope.row.delivery_way }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="execution_frequency"
        width="80"
        label="频率"
      >
        <template slot-scope="scope">{{
          scope.row.execution_frequency
        }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="number_days"
        width="50"
        label="天数"
      >
        <template slot-scope="scope">{{ scope.row.number_days }}天</template>
      </el-table-column>
      <el-table-column align="center" prop="total" width="50" label="总量">
        <template slot-scope="scope">
          <div>{{ 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">{{ scope.row.price }}元</template>
      </el-table-column>

      <el-table-column align="center" prop="name" width="80" label="执行状态">
        <template slot-scope="scope">
          <div>{{ scope.row.execution_state == 1 ? "已执行" : "未执行" }}</div>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="name" width="220" label="医保编码">
        <template slot-scope="scope">
          <div>{{ scope.row.medical_code }}</div>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="name" width="80" label="规格/型号">
        <template slot-scope="scope">
          <div>{{ scope.row.spec }}</div>
        </template>
      </el-table-column>

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

      <el-table-column align="center" prop="name" width="120" label="生产厂家">
        <template slot-scope="scope">
          <div>{{ getName(scope.row.name_id) }}</div>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="name" width="90" label="全自费金额">
        <template slot-scope="scope">
          <div>{{ scope.row.fulamt_ownpay_amt }}元</div>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="name" width="90" label="超限价金额">
        <template slot-scope="scope">
          <div>{{ scope.row.overlmt_amt }}元</div>
        </template>
      </el-table-column>

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

      <el-table-column
        align="center"
        prop="name"
        width="130"
        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">{{ 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,
    manufacturers: Array,
  },
  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",
        };
      }
    },

    getName(id) {
      let name = "";
      for (let i = 0; i < this.manufacturers.length; i++) {
        if (id == this.manufacturers[i].id) {
          name = this.manufacturers[i].manufacturer_name;
        }
      }
      return name;
    },
    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>