xt_pad/src/pages/main/dialog/modify_order/modify_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" v-show="order.parent_id == 0">
              <label>开始时间</label>
              <el-input
                style="width:96%"
                :value="start_time_str"
                readonly
                @focus="selectStartTimeAction"
              ></el-input>
            </div>

            <div class="cell">
              <label>医嘱名称</label>
              <el-input style="width:96%" v-model="order.title"></el-input>
            </div>
            <div class="cell">
              <label>药品规格</label>
              <input
                onclick="this.select()"
                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%"
                onclick="this.select()"
                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"
                onclick="this.select()"
                class="inputBox"
                style="width:60%"
                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> -->

            <div class="cell" v-show="order.parent_id == 0">
              <label>执行频率</label>
              <el-input
                placeholder="选择执行频率"
                readonly
                style="width:100%"
                :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>
    </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>

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

<script>
import SingleOptionDialog from "../new_order/single_option_dialog";
import { Toast } from "vant";
import { parseTime } from "@/utils";

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,
      start_time_str: "",
      start_time: new Date(),
      mode: 1,
      order: {
        id: 0,
        parent_id: 0,
        // start_time: "",
        // record_time: "",
        title: "",
        advice_desc: "",
        drug_spec: "",
        drug_spec_unit: "",
        remark: "",
        delivery_way: "",
        execution_frequency: "",
        single_dose: "",
        single_dose_unit: "",
        prescribing_number: "",
        prescribing_number_unit: ""
      }
    };
  },
  computed: {
    dialog_title: function() {
      if (this.mode == 1) {
        return "修改子药";
      }
    }
  },
  methods: {
    didSelectStartTime: function(time) {
      this.start_time_str = parseTime(time, "{y}-{m}-{d} {h}:{i}") + ":00";
    },
    selectStartTimeAction: function() {
      this.$refs.start_time_picker.open();
    },
    showWithModify: function(order) {
      console.log(order);

      this.mode = 1;
      this.visibility = true;

      this.order.id = order.id;
      this.order.parent_id = order.parent_id;
      this.order.title = order.title;
      this.order.advice_desc = order.advice_desc;
      this.order.remark = order.remark;

      this.start_time_str =
        parseTime(order.start_time, "{y}-{m}-{d} {h}:{i}") + ":00";

      this.order.drug_spec = order.drug_spec;
      this.order.drug_spec_unit = order.drug_spec_unit;
      this.order.delivery_way =
        order.delivery_way == undefined || order.delivery_way == null
          ? ""
          : order.delivery_way;
      this.order.execution_frequency =
        order.execution_frequency == undefined ||
        order.execution_frequency == null
          ? ""
          : 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;
    },
    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-modify", {
          id: this.order.id,
          parent_id: this.order.parent_id,
          title: this.order.title,
          advice_desc: this.order.advice_desc,
          remark: this.order.remark,
          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,
          start_time: this.start_time_str,
          drug_spec: this.order.drug_spec,
          drug_spec_unit: this.order.drug_spec_unit
        });
      }
    },

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

      this.didCloseSingleOptionDialog();
    },
    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) {
      if (index == -1) {
        this.order.prescribing_number_unit = "";
      } else {
        this.order.prescribing_number_unit = this.prescribing_number_unit_options[
          index
        ].name;
      }

      this.didCloseSingleOptionDialog();
    },
    selectDeliveryWayAction: function() {
      this.sub_dialog_key = 3;
    },
    didSelectDeliveryWay: function(index) {
      this.didCloseSingleOptionDialog();
      this.order.delivery_way = this.delivery_way_options[index].name;
    },
    selectExecFrequencyAction: function() {
      this.sub_dialog_key = 4;
    },
    didSelectExecFrequency: function(index) {
      this.didCloseSingleOptionDialog();
      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 {
    float: left;
    width: 4.5rem;
    margin: 0.35rem 0.3rem 0.1rem 0.4rem;
    padding-bottom: 3px;
    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: 2px;
      padding: 0.14rem 0;
      padding-left: 5px;
      @media only screen and (max-width: 767px) {
        padding: 0.08rem 0;
      }
    }

    .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 {
    .cell {
      .inputBox {
        @media only screen and (max-width: 767px) {
          padding: 10.6px 0 !important;
          padding-left: 5px !important;
          font-size: 0.42rem !important;
        }
      }
      .el-input__inner {
        font-size: 0.42rem;
      }
      .is-disabled {
        .el-input__inner {
          color: #999;
        }
      }
    }
  }
}
</style>