xt_pad/src/pages/main/dialog/new_order/order_form.vue

<template>
  <div v-if="visibility">
    <div v-if="sub_dialog_key == 0" class="Dialog">
      <div class="DialogTit">
        <div class="back" @click="backAction">
          <span class="iconfont">&#xe720;</span>返回
        </div>
        <h1 class="name">{{ dialog_title }}</h1>
        <span class="success" @click="comfirmAction">保存</span>
      </div>
      <div class="DialogContent choose advice-top">
        <div class="content clearfix">
          <div class="newContent">
            <div class="cell">
              <label>医嘱名称</label>
              <input class="inputBox" style="width:96%" v-model="order.title" />
              <!-- <el-input v-model="order.title"></el-input> -->
            </div>
            <div class="cell">
              <label>药品规格</label>
              <!--<input class="inputBox" style="width:62.5%" v-model="order.advice_desc">-->

              <input
                class="inputBox"
                style="width:60%"
                v-model="order.advice_desc"
              />
              <input
                type="text"
                placeholder="单位"
                readonly
                class="inputBox"
                style="width:35%"
                v-model="order.drug_spec_unit"
                @focus="selectDrugSpecUnitAction"
              />
            </div>

            <div class="cell">
              <label>开药数量</label>
              <input
                type="number"
                class="inputBox"
                style="width:60%"
                v-model="order.prescribing_number"
              />
              <input
                type="text"
                placeholder="单位"
                readonly
                class="inputBox"
                style="width:35%"
                v-model="order.prescribing_number_unit"
                @focus="selectPrescribingNumUnitAction"
              />
            </div>

            <div class="cell">
              <label>单次用量</label>
              <input
                type="number"
                class="inputBox"
                style="width:62.5%"
                v-model="order.single_dose"
              />
              <input
                type="text"
                placeholder="单位"
                readonly
                class="inputBox"
                style="width:35%"
                v-model="order.single_dose_unit"
                @focus="selectSingleDoseAction"
              />
            </div>

            <div class="cell" v-show="order.parent_id == 0">
              <label>给药途径</label>
              <el-input
                placeholder="选择给药途径"
                readonly
                :disabled="mode == 3"
                v-model="order.delivery_way"
                @focus="selectDeliveryWayAction"
              ></el-input>
            </div>

            <div class="cell" v-show="order.parent_id == 0">
              <label>执行频率</label>
              <el-input
                placeholder="选择执行频率"
                readonly
                :disabled="mode == 3"
                v-model="order.execution_frequency"
                @focus="selectExecFrequencyAction"
              ></el-input>
            </div>

            <div class="cell" v-show="order.parent_id == 0">
              <label>医嘱嘱托</label>
              <input
                class="inputBox"
                style="width:100%"
                v-model="order.remark"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <single-option-dialog
      :visibility="sub_dialog_key == 1"
      title="用量单位"
      @did-selected="didSelectSingleDoseUnit"
      @back="didCloseSingleOptionDialog"
      :options="single_dose_unit_options"
      option_key="id"
      option_label_key="name"
    ></single-option-dialog>

    <single-option-dialog
      :visibility="sub_dialog_key == 5"
      title="药品规格"
      @did-selected="didSelectDrugSpecUnit"
      @back="didCloseSingleOptionDialog"
      :options="drug_spec_unit_options"
      option_key="id"
      option_label_key="name"
    ></single-option-dialog>

    <single-option-dialog
      :visibility="sub_dialog_key == 2"
      title="开药数量单位"
      @did-selected="didSelectPrescribingNumUnit"
      @back="didCloseSingleOptionDialog"
      :options="prescribing_number_unit_options"
      option_key="id"
      option_label_key="name"
    ></single-option-dialog>

    <single-option-dialog
      :visibility="sub_dialog_key == 3"
      title="给药途径"
      @did-selected="didSelectDeliveryWay"
      @back="didCloseSingleOptionDialog"
      :options="delivery_way_options"
      option_key="id"
      option_label_key="name"
    ></single-option-dialog>

    <single-option-dialog
      :visibility="sub_dialog_key == 4"
      title="执行频率"
      @did-selected="didSelectExecFrequency"
      @back="didCloseSingleOptionDialog"
      :options="execution_frequency_options"
      option_key="id"
      option_label_key="name"
    ></single-option-dialog>
  </div>
</template>

<script>
import SingleOptionDialog from "./single_option_dialog";
import { Toast } from "vant";

export default {
  name: "OrderForm",
  components: {
    SingleOptionDialog
  },
  props: {
    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 [];
      }
    }
  },
  data() {
    return {
      visibility: false,
      sub_dialog_key: 0,

      mode: 1,
      order: {
        title: "",
        advice_desc: "",
        drug_spec: "",
        drug_spec_unit: "",
        delivery_way: "",
        execution_frequency: "",
        single_dose: "",
        single_dose_unit: "",
        prescribing_number: "",
        prescribing_number_unit: "",
        remark: "",

        // 在新增子药才用到的字段
        parent_id: 0, // 父医嘱ID
        start_time: "",
        record_time: ""
      }
    };
  },
  computed: {
    dialog_title: function() {
      if (this.mode == 1) {
        return "新增医嘱内容";
      } else if (this.mode == 2) {
        return "修改医嘱内容";
      } else {
        return "新增子药";
      }
    }
  },
  methods: {
    showWithNew: function() {
      this.mode = 1;
      this.visibility = true;

      this.order.title = "";
      this.order.advice_desc = "";
      this.order.drug_spec = "";
      this.order.drug_spec_unit = "";
      this.order.delivery_way = "";
      this.order.execution_frequency = "";
      this.order.single_dose = "";
      this.order.single_dose_unit = "";
      this.order.prescribing_number = "";
      this.order.prescribing_number_unit = "";
      this.order.remark = "";
    },
    showWithEdit: function(order) {
      this.mode = 2;
      this.visibility = true;

      this.order.title = order.title;
      this.order.advice_desc = order.advice_desc;
      this.order.drug_spec = order.drug_spec;
      this.order.drug_spec_unit = order.drug_spec_unit;
      this.order.delivery_way = order.delivery_way;
      this.order.execution_frequency = order.execution_frequency;
      this.order.single_dose = order.single_dose;
      this.order.single_dose_unit = order.single_dose_unit;
      this.order.prescribing_number = order.prescribing_number;
      this.order.prescribing_number_unit = order.prescribing_number_unit;
      this.order.remark = order.remark;
    },
    showWithNewSubDrug: function(
      parent_id,
      parent_record_time,
      parent_start_time,
      parent_delivery_way,
      parent_execution_frequency
    ) {
      this.mode = 3;
      this.visibility = true;

      this.order.parent_id = parent_id;
      this.order.record_time = parent_record_time;
      this.order.start_time = parent_start_time;
      this.order.title = "";
      this.order.advice_desc = "";
      this.order.remark = "";

      this.order.drug_spec = "";
      this.order.drug_spec_unit = "";
      this.order.delivery_way =
        parent_delivery_way == undefined || parent_delivery_way == null
          ? ""
          : parent_delivery_way;
      this.order.execution_frequency =
        parent_execution_frequency == undefined ||
        parent_execution_frequency == null
          ? ""
          : parent_execution_frequency;
      this.order.single_dose = "";
      this.order.single_dose_unit = "";
      this.order.prescribing_number = "";
      this.order.prescribing_number_unit = "";
    },
    dismiss: function() {
      this.visibility = false;
      this.sub_dialog_key = 0;
    },
    backAction: function() {
      this.visibility = false;
      this.sub_dialog_key = 0;
      this.$emit("back");
    },
    comfirmAction: function() {
      if (this.order.title.length == 0) {
        Toast.fail("请填写医嘱名称");
        return;
      }

      if (this.mode == 1) {
        this.$emit("did-create-new", {
          title: this.order.title,
          advice_desc: this.order.advice_desc,
          delivery_way: this.order.delivery_way,
          execution_frequency: this.order.execution_frequency,
          single_dose: this.order.single_dose,
          single_dose_unit: this.order.single_dose_unit,
          prescribing_number: this.order.prescribing_number,
          prescribing_number_unit: this.order.prescribing_number_unit,
          remark: this.order.remark,
          drug_spec: this.order.drug_spec,

          drug_spec_unit: this.order.drug_spec_unit
        });
      } else if (this.mode == 2) {
        this.$emit("did-modify", {
          title: this.order.title,
          advice_desc: this.order.advice_desc,
          drug_spec: this.order.drug_spec,
          drug_spec_unit: this.order.drug_spec_unit,
          delivery_way: this.order.delivery_way,
          execution_frequency: this.order.execution_frequency,
          single_dose: this.order.single_dose,
          single_dose_unit: this.order.single_dose_unit,
          prescribing_number: this.order.prescribing_number,
          prescribing_number_unit: this.order.prescribing_number_unit,
          remark: this.order.remark
        });
      } else if (this.mode == 3) {
        this.$emit("did-create-subdrug", {
          parent_id: this.order.parent_id,
          record_time: this.order.record_time,
          start_time: this.order.start_time,
          title: this.order.title,
          advice_desc: this.order.advice_desc,
          drug_spec: this.order.drug_spec,
          drug_spec_unit: this.order.drug_spec_unit,
          delivery_way: this.order.delivery_way,
          execution_frequency: this.order.execution_frequency,
          single_dose: this.order.single_dose,
          single_dose_unit: this.order.single_dose_unit,
          prescribing_number: this.order.prescribing_number,
          prescribing_number_unit: this.order.prescribing_number_unit
        });
      }
    },

    selectSingleDoseAction: function() {
      this.sub_dialog_key = 1;
    },
    didSelectSingleDoseUnit: function(index) {
      this.didCloseSingleOptionDialog();
      if (index == -1) {
        this.order.single_dose_unit = "";
      } else {
        this.order.single_dose_unit = this.single_dose_unit_options[index].name;
      }
    },
    selectDrugSpecUnitAction: function() {
      this.sub_dialog_key = 5;
    },
    didSelectDrugSpecUnit: function(index) {
      if (index == -1) {
        this.order.drug_spec_unit = "";
      } else {
        this.order.drug_spec_unit = this.drug_spec_unit_options[index].name;
      }

      this.didCloseSingleOptionDialog();
    },
    selectPrescribingNumUnitAction: function() {
      this.sub_dialog_key = 2;
    },
    didSelectPrescribingNumUnit: function(index) {
      this.didCloseSingleOptionDialog();

      if (index == -1) {
        this.order.prescribing_number_unit = "";
      } else {
        this.order.prescribing_number_unit = this.prescribing_number_unit_options[
          index
        ].name;
      }
    },
    selectDeliveryWayAction: function() {
      this.sub_dialog_key = 3;
    },
    didSelectDeliveryWay: function(index) {
      this.didCloseSingleOptionDialog();
      if (index == -1) {
        this.order.delivery_way = "";
        return;
      }
      this.order.delivery_way = this.delivery_way_options[index].name;
    },
    selectExecFrequencyAction: function() {
      this.sub_dialog_key = 4;
    },
    didSelectExecFrequency: function(index) {
      this.didCloseSingleOptionDialog();
      if (index == -1) {
        this.order.execution_frequency = "";
        return;
      }
      this.order.execution_frequency = this.execution_frequency_options[
        index
      ].name;
    },

    didCloseSingleOptionDialog: function() {
      this.sub_dialog_key = 0;
    }
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.content {
  .cell {
    @media only screen and (max-width: 415px) {
      height: 2.4rem;
    }
    float: left;
    width: 4.5rem;
    margin: 0.35rem 0.3rem 0.1rem 0.4rem;
    label {
      display: block;
      height: 0.9rem;
      line-height: 0.9rem;
      color: $title-color;
      font-size: 0.45rem;
    }
    .el-input__inner {
      font-size: 0.32rem;
    }
    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: 4px;
      padding: 0.14rem 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;
  }
}
</style>
<style lang="scss">
.content {
  .newContent {
    overflow: hidden;
  }
  .cell {
    .inputBox {
      @media only screen and (max-width: 767px) {
        padding: 0.34rem 0 !important;
        padding-left: 5px !important;
        font-size: 0.42rem !important;
      }
    }
    .el-input__inner {
      font-size: 0.45rem;
    }
  }
}
</style>