xt_pad/src/pages/main/dialog/modify_order/ModifyAdviceGroup.vue

<template>
  <div v-if="visibility" v-loading="loading">
    <div class="Dialog" v-show="sub_dialog_key == 0">
      <div class="DialogTit">
        <div class="back" @click="backAction">
          <span class="iconfont">&#xe720;</span>返回
        </div>
        <h1 class="name">修改医嘱</h1>
        <span class="success" @click="backAction">完成</span>
      </div>
      <div class="DialogContent choose">
        <div class="content clearfix">
          <div class="yzNav newYzNav" style="width:100%;overflow-x:hidden">
            <span @click="newAdviceAction">新增内容</span>
            <span
              @click="modifyAction"
              :class="{ forbid: current_advice_index < 0 }"
              >修改内容</span
            >
          </div>
          <div class="newBox" style="overflow: hidden;">
            <div class="cell" style="margin-top: 0;">
              <label>医嘱类型</label>
              <el-input ref="advice_type" value="临时" disabled></el-input>
            </div>

            <div class="cell" style="margin-top: 0;">
              <label>开始时间</label>
              <el-input
                :value="start_time_str"
                readonly
                @focus="selectStartTimeAction"
              ></el-input>
            </div>
            <div class="cell" style="margin-top: 0;">
              <label>开嘱时间</label>
              <!-- <el-input readonly :value="record_date_str"></el-input> -->
              <span class="newSpan">{{ record_date_str }}</span>
            </div>
            <div class="cell" style="margin-top: 0;">
              <label>开嘱医生</label>
              <span class="newdoctorName">{{
                $store.getters.user.user.user_name
              }}</span>
            </div>
          </div>
          <div class="newModifyTable">
            <table class="table">
              <tr @click="cancelSelectAdvice">
                <th width="30%">医嘱内容</th>
                <th width="20%">药品规格</th>
                <th width="10%">开药数量</th>
                <th width="10%">单次用量</th>
                <th width="15%">给药途径</th>
                <th width="15%">执行频率</th>
              </tr>
              <tr
                v-for="(advice, index) in advices"
                :key="index"
                :class="{ 'row-class-active': index == current_advice_index }"
                @click="selectAdviceAction(index, advice)"
              >
                <td
                  :class="{
                    advice_name: advice.parent_id == 0,
                    subdrug_name: advice.parent_id > 0
                  }"
                >
                  {{ advice.advice_name }}
                </td>
                <td>{{ advice.advice_desc }}{{ advice.drug_spec_unit }}</td>
                <td>
                  {{ advice.prescribing_number
                  }}{{ advice.prescribing_number_unit }}
                </td>
                <td>{{ advice.single_dose }} {{ advice.single_dose_unit }}</td>
                <td>{{ advice.parent_id == 0 ? advice.delivery_way : "" }}</td>
                <td>
                  {{ advice.parent_id == 0 ? advice.execution_frequency : "" }}
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>

    <modify-advice-form
      ref="modify_advice_form"
      @back="sub_dialog_key = 0"
      @did-modify="didModifyAdvice"
      :delivery_way_options="delivery_way_options"
      :execution_frequency_options="execution_frequency_options"
      :single_dose_unit_options="single_dose_unit_options"
      :prescribing_number_unit_options="prescribing_number_unit_options"
      :drug_spec_unit_options="drug_spec_unit_options"
    ></modify-advice-form>

    <mt-datetime-picker
      ref="start_time_picker"
      type="datetime"
      @confirm="didSelectStartTime"
      v-model="start_time"
    ></mt-datetime-picker>

    <add-new-order-dialog
      v-show="sub_dialog_key == 2"
      @back-action="sub_dialog_key = 0"
      :patient_id="patient_id"
      :group_no="group_no"
      :drug_spec_unit_options="drug_spec_unit_options"
      :delivery_way_options="delivery_way_options"
      :execution_frequency_options="execution_frequency_options"
      :single_dose_unit_options="single_dose_unit_options"
      :prescribing_number_unit_options="prescribing_number_unit_options"
      :advice_templates="advice_templates"
      @did-create-advices="didCreateAdvices"
    ></add-new-order-dialog>
  </div>
</template>

<script>
import ModifyAdviceForm from "./modify_order_form";
import { parseTime } from "@/utils";
import { EditDoctorAdvice, modifyAdviceGroupStartTime } from "@/api/advice";
import { Toast } from "vant";
import AddNewOrderDialog from "../new_order/AddNewOrders";

export default {
  name: "ModifyAdviceGroup",
  components: {
    ModifyAdviceForm,
    AddNewOrderDialog
  },
  props: {
    patient_id: {
      type: Number,
      default: 0
    },
    advice_templates: {
      type: Array,
      default: function() {
        return [];
      }
    },
    drug_spec_unit_options: {
      type: Array,
      default: function() {
        return [];
      }
    },
    delivery_way_options: {
      type: Array,
      default: function() {
        return [];
      }
    },
    execution_frequency_options: {
      type: Array,
      default: function() {
        return [];
      }
    },
    single_dose_unit_options: {
      type: Array,
      default: function() {
        return [];
      }
    },
    prescribing_number_unit_options: {
      type: Array,
      default: function() {
        return [];
      }
    },
    advice_templates: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      visibility: false,
      loading: false,
      sub_dialog_key: 0,

      record_date: new Date(),
      start_time: new Date(),
      // start_time_str: "",

      group_no: 0,
      advices: [],

      current_advice_index: -1,
      current_advice: null
    };
  },
  computed: {
    start_time_str: function() {
      if (this.start_time != null) {
        return parseTime(this.start_time, "{y}-{m}-{d} {h}:{i}") + ":00";
      }
      return "";
    },
    record_date_str: function() {
      if (this.record_date != null) {
        return parseTime(this.record_date, "{y}-{m}-{d} {h}:{i}");
      }
      return "";
    }
  },
  methods: {
    show: function(group_no, advices) {
      this.visibility = true;
      this.sub_dialog_key = 0;
      this.group_no = group_no;
      this.advices = advices;
      if (this.advices.length > 0) {
        this.start_time = new Date(this.advices[0].start_time * 1000);
        this.record_date = new Date(this.advices[0].created_time * 1000);
      }
    },
    backAction: function() {
      this.visibility = false;
      this.sub_dialog_key = 0;
      this.group_no = 0;
      this.advices = [];
      this.start_time = new Date();
      this.record_date = new Date();
      this.$emit("back");
    },
    selectStartTimeAction: function() {
      this.$refs.start_time_picker.open();
    },
    selectAdviceAction: function(index, advice) {
      this.current_advice_index = index;
      this.current_advice = advice;
    },
    cancelSelectAdvice: function() {
      this.current_advice_index = -1;
      this.current_advice = null;
    },
    modifyAction: function() {
      if (this.current_advice_index < 0) {
        return;
      }
      this.sub_dialog_key = 1;
      this.$refs.modify_advice_form.showWithModify({
        id: this.current_advice.id,
        parent_id: this.current_advice.parent_id,
        title: this.current_advice.advice_name,
        advice_desc: this.current_advice.advice_desc,
        drug_spec: this.current_advice.drug_spec,
        drug_spec_unit: this.current_advice.drug_spec_unit,
        delivery_way: this.current_advice.delivery_way,
        execution_frequency: this.current_advice.execution_frequency,
        single_dose: this.current_advice.single_dose,
        single_dose_unit: this.current_advice.single_dose_unit,
        prescribing_number: this.current_advice.prescribing_number,
        prescribing_number_unit: this.current_advice.prescribing_number_unit
      });
    },
    newAdviceAction: function() {
      this.cancelSelectAdvice();
      this.sub_dialog_key = 2;
    },

    didSelectStartTime: function(time) {
      // Toast.loading({ forbidClick: true, duration: 0 });
      console.log(this.start_time);
      this.loading = true;
      modifyAdviceGroupStartTime(
        this.group_no,
        parseTime(this.start_time, "{y}-{m}-{d} {h}:{i}") + ":00"
      )
        .then(rs => {
          if (rs.data.state == 1) {
            var new_start_time = rs.data.data.start_time;
            for (let index = 0; index < this.advices.length; index++) {
              const advice = this.advices[index];
              advice.start_time = new_start_time;
            }
            this.start_time = new Date(new_start_time * 1000);
          } else {
            Toast.fail(rs.data.msg);
          }
          this.loading = false;
        })
        .catch(err => {
          Toast.fail(err);
          this.loading = false;
        });
    },
    didModifyAdvice: function(advice) {
      this.loading = true;
      EditDoctorAdvice(advice.id, {
        advice_name: advice.title,
        advice_desc: advice.advice_desc,
        remark: advice.remark,
        drug_spec_unit: advice.drug_spec_unit,
        delivery_way: advice.delivery_way,
        execution_frequency: advice.execution_frequency,
        single_dose: String(advice.single_dose),
        single_dose_unit: advice.single_dose_unit,
        prescribing_number: String(advice.prescribing_number),
        prescribing_number_unit: advice.prescribing_number_unit,
        drug_spec_unit: advice.drug_spec_unit
      })
        .then(rs => {
          if (rs.data.state == 1) {
            var resp_advice = rs.data.data.advice;

            this.current_advice;
            this.current_advice.advice_name = resp_advice.advice_name;
            this.current_advice.advice_desc = resp_advice.advice_desc;
            this.current_advice.drug_spec_unit = resp_advice.drug_spec_unit;
            this.current_advice.remark = resp_advice.remark;
            (this.current_advice.delivery_way = resp_advice.delivery_way),
              (this.current_advice.execution_frequency =
                resp_advice.execution_frequency),
              (this.current_advice.single_dose = resp_advice.single_dose),
              (this.current_advice.single_dose_unit =
                resp_advice.single_dose_unit),
              (this.current_advice.prescribing_number =
                resp_advice.prescribing_number),
              (this.current_advice.prescribing_number_unit =
                resp_advice.prescribing_number_unit);
            this.sub_dialog_key = 0;
            this.$refs.modify_advice_form.dismiss();
          } else {
            Toast.fail(rs.data.msg);
          }
          this.loading = false;
        })
        .catch(err => {
          Toast.fail(err);
          this.loading = false;
        });
    },
    didCreateAdvices: function(advices) {
      this.advices.push(...advices);
      this.sub_dialog_key = 0;
    }
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.newYzNav {
  position: fixed;
  top: 1.5rem;
}
.newBox {
  position: fixed;
  top: 3.2rem;
}
.newModifyTable {
  width: 100%;
  margin-top: 5.2rem;
  @media only screen and (max-width: 767px) {
    margin-top: 5.8rem;
  }
}
.newSpan {
  font-size: 0.45rem;
}
.table {
  width: 1000px;
  margin-top: 0.2rem;
  tr {
    th {
      background: $main-color;
      color: #fff;
      height: 1.2rem;
      line-height: 1.2rem;
    }
    td {
      line-height: 0.8rem;
    }

    .advice_name {
      text-align: left;
      padding-left: 10px;
      padding-right: 10px;
    }
    .subdrug_name {
      text-align: left;
      padding-left: 30px;
      padding-right: 10px;
    }
  }
}
.content {
  .cell {
    float: left;
    width: 5rem;
    margin: 0.35rem 0.3rem 0.2rem 0.4rem;
    label {
      display: block;
      height: 0.6rem;
      line-height: 0.6rem;
      color: $pgh-color;
      font-size: 0.45rem;
      margin-bottom: 0.2rem;
    }
    .newdoctorName {
      font-size: 0.45rem;
    }
    select {
      width: 100%;
      padding: 0.2rem 0;
      border: 1px $border-color solid;
      border-radius: 2px;
      padding-left: 5px;
    }

    .inputBox {
      border: 1px $border-color solid;
      border-radius: 2px;
      padding: 0.18rem 0;
      padding-left: 5px;
    }

    .textarea {
      width: 100%;
      height: 1.22rem;
      border: 1px $border-color solid;
      border-radius: 2px;
      padding-left: 5px;
    }
  }

  .doctor-name {
    line-height: 0.7rem;
    font-size: 0.35rem;
    margin-left: 0.4rem;
  }

  .row-class-active > td {
    background: #badcff;
    // color: #fff;
  }
}
</style>