xt_pad/src/pages/main/dialog/ComputerDialog.vue

<template>
  <div>
    <div class="Dialog" v-show="!selecting">
      <div class="DialogTit">
        <span @click="close()" class="iconfont">&#xe6e9;</span>
        <h1 class="name">透析上机</h1>
        <span
          class="success"
          v-if="
            this.record.id == 0 ||
              this.$store.getters.user.user.id != this.creator
          "
        ></span>
        <span
          class="success"
          @click="modify()"
          v-if="
            isPremission || this.$store.getters.user.user.id == this.creator
          "
          >修改</span
        >
      </div>

      <div class="DialogContent">
        <div class="item" @click="select_bed">
          <h2 class="name">上机床位</h2>
          <div class="content">
            <span class="text" style="width: 100px">{{
              device_number_map[bed_id].number
            }}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>
        <div class="item" @click="select_nurse">
          <h2 class="name">上机护士</h2>
          <div class="content">
            <span class="text" style="width: 100px">{{
              admin_map[nurse_id].name
            }}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>

        <div class="item" @click="select_puncture_nurse">
          <h2 class="name">穿刺者</h2>
          <div class="content">
            <span
              class="text"
              style="width: 100px"
              v-if="admin_map[puncture_nurse_id]"
              >{{ admin_map[puncture_nurse_id].name }}</span
            >
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>

        <div class="item" v-if="template_id == 6">
          <label class="name" for="xll">引血(ml/min)</label>
          <div class="content">
            <input
              type="tel"
              @focus="inputFocus"
              id="xll"
              v-model="blood_drawing"
            />
          </div>
        </div>

        <div class="item">
          <h2 class="name">上机时间</h2>
          <div class="content">
            <span
              class="text"
              style="width: 100px"
              @click="selectStartTimeAction"
              >{{ start_time_str }}</span
            >
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>
        <div class="perform">
          <button @click="commitInfo" v-if="record == null || record.id == ''">
            执行上机
          </button>
          <button :disabled="true" style="background-color:lightgray;" v-else>
            已上机
          </button>
        </div>
      </div>
    </div>

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

<script>
import { startDialysis, PostModifyStartDialysis } from "@/api/dialysis";
import { Toast } from "vant";
import { parseTime } from "@/utils";

import TwoMenu from "./TwoMenu";

export default {
  name: "ComputerDialog",
  components: {
    TwoMenu
  },
  data() {
    return {
      start_time: new Date(),
      selecting: false,
      start_time_str: "",
      bed_id: 0,
      nurse_id: 0,
      puncture_nurse_id: 0,
      isPremission: false,
      zone_beds: [], // 该排班的区里的床位
      creator: 0,
      template_id: 0,
      blood_drawing: 100
    };
  },
  props: {
    schedule: {
      type: Object
    },
    patient_prop: {
      type: Object
    },
    record: {
      type: Object
    },
    admins: {
      type: Array
    },
    device_numbers: {
      type: Array
    },
    admin_map: {
      type: Object
    },
    device_number_map: {
      type: Object
    },
    special_premission: {
      type: Array
    }
  },
  mounted() {
    if (this.record.id == 0) {
      this.start_time_str =
        parseTime(this.start_time, "{y}-{m}-{d} {h}:{i}") + ":00";
    } else {
      if (this.record.start_time == 0) {
        this.start_time_str =
          parseTime(this.start_time, "{y}-{m}-{d} {h}:{i}") + ":00";
      } else {
        this.start_time_str =
          parseTime(this.record.start_time, "{y}-{m}-{d} {h}:{i}") + ":00";
      }
    }
  },
  created() {
    this.template_id = this.$store.getters.user.template_info.template_id;
    var date = this.$route.query && this.$route.query.date;
    date *= 1000;
    var newDate = new Date(date);
    var y = newDate.getFullYear();
    var m = newDate.getMonth() + 1;
    var d = newDate.getDate();
    if (isNaN(y) || isNaN(m) || isNaN(d)) {
      newDate = new Date();
      y = newDate.getFullYear();
      m = newDate.getMonth() + 1;
      d = newDate.getDate();
    }
    this.record_date =
      y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);

    this.bed_id =
      this.record == null || this.record.id == ""
        ? this.schedule.bed_id
        : this.record.bed_id;
    this.nurse_id =
      this.record == null || this.record.id == ""
        ? this.$store.getters.user.user.id
        : this.record.start_nurse;
    this.puncture_nurse_id =
      this.record == null || this.record.id == ""
        ? this.$store.getters.user.user.id
        : this.record.puncture_nurse;

    if (this.puncture_nurse_id == 0) {
      this.puncture_nurse_id = this.$store.getters.user.user.id;
    }

    // var beds = []
    // for (let index = 0; index < this.device_numbers.length; index++) {
    //   const device_number = this.device_numbers[index]
    //   if (device_number.zone_id == this.schedule.partition_id) {
    //     beds.push(device_number)
    //   }
    // }
    // this.zone_beds = beds

    for (let index = 0; index < this.device_numbers.length; index++) {
      const device_number = this.device_numbers[index];
      this.device_numbers[index]["number"] =
        device_number["zone_name"] + "-" + device_number["number"];
    }
    this.zone_beds = this.device_numbers;

    if (this.record.id > 0) {
      for (let i = 0; i < this.special_premission.length; i++) {
        if (
          this.$store.getters.user.user.id ==
          this.special_premission[i].admin_user_id
        ) {
          this.isPremission = true;
        }
      }
    }

    if (this.record.id > 0) {
      if (this.record.creator == 0) {
        this.creator = this.record.start_nurse;
      } else {
        this.creator = this.record.creator;
      }
    }
  },
  methods: {
    inputFocus: function(event) {
      var input = event.target;
      setTimeout(function() {
        input.scrollIntoView();
      }, 0);

      if (input.setSelectionRange) {
        setTimeout(function() {
          input.setSelectionRange(0, input.value.length);
        }, 0);
      } else if (input.createTextRange) {
        var rng = input.createTextRange();
        rng.move("character", input.value.length);
        rng.select();
      }
    },
    modify() {
      let ParamsQuery = {};
      ParamsQuery["id"] = this.record.id;
      ParamsQuery["nurse"] = this.nurse_id;
      ParamsQuery["bed"] = this.bed_id;
      ParamsQuery["start_time"] = this.start_time_str;
      ParamsQuery["puncture_nurse"] = this.puncture_nurse_id;
      PostModifyStartDialysis(ParamsQuery).then(response => {
        if (response.data.state == 0) {
          Toast.fail(response.data.msg);
          return false;
        } else {
          Toast.success("修改成功");
          this.$emit('did_add_monitor', monitor)
          this.$emit("did_start", response.data.data.dialysis_order);
          var record = this.record;
          for (const key in response.data.data.dialysis_order) {
            this.$set(record, key, response.data.data.dialysis_order[key]);
          }
        }
      });
    },
    didSelectStartTime: function(time) {
      this.start_time_str = parseTime(time, "{y}-{m}-{d} {h}:{i}") + ":00";
    },
    selectStartTimeAction: function() {
      if (this.record.id != 0) {
        var creator = 0;
        if (this.record.creator == 0) {
          creator = this.record.start_nurse;
        } else {
          creator = this.record.creator;
        }

        if (this.$store.getters.user.user.id == creator || this.isPremission) {
          this.$refs.start_time_picker.open();
        } else {
          return;
        }
      }
      this.$refs.start_time_picker.open();
    },
    commitInfo: function() {
      Toast.loading({ forbidClick: true, duration: 0 });
      let ParamsQuery = {};
      ParamsQuery["patient_id"] = this.patient_prop.id;
      ParamsQuery["record_date"] = this.record_date;
      ParamsQuery["nurse"] = this.nurse_id;
      ParamsQuery["bed"] = this.bed_id;
      ParamsQuery["start_time"] = this.start_time_str;
      ParamsQuery["puncture_nurse"] = this.puncture_nurse_id;
      ParamsQuery["blood_drawing"] = this.blood_drawing;

      startDialysis(ParamsQuery).then(response => {
        if (response.data.state == 0) {
          Toast.fail(response.data.msg);
          return false;
        } else {
          Toast.success("上机成功");
          var monitor = response.data.data.monitor;
          // this.$emit('did_add_monitor', monitor)
          this.$emit("did_start", response.data.data.dialysis_order);
          var record = this.record;
          for (const key in response.data.data.dialysis_order) {
            this.$set(record, key, response.data.data.dialysis_order[key]);
            // this.record[key] = response.data.data.dialysis_order[key]
          }
        }
      });
    },
    close: function() {
      this.$emit("close");
    },
    select_bed: function() {
      if (this.record.id != 0) {
        var creator = 0;
        if (this.record.creator == 0) {
          creator = this.record.start_nurse;
        } else {
          creator = this.record.creator;
        }

        if (this.$store.getters.user.user.id == creator || this.isPremission) {
          this.selecting = true;
          var t = this;
          this.$refs.selector.showSingleSelect(
            this.zone_beds,
            this.bed_id,
            "选择床位号",
            "number",
            "id",
            function(select_id) {
              t.bed_id = select_id;
            },
            function() {
              t.selecting = false;
            }
          );
        } else {
          return;
        }
      }

      this.selecting = true;
      var t = this;
      this.$refs.selector.showSingleSelect(
        this.zone_beds,
        this.bed_id,
        "选择床位号",
        "number",
        "id",
        function(select_id) {
          t.bed_id = select_id;
        },
        function() {
          t.selecting = false;
        }
      );
    },
    select_nurse: function() {
      if (this.record.id != 0) {
        var creator = 0;
        if (this.record.creator == 0) {
          creator = this.record.start_nurse;
        } else {
          creator = this.record.creator;
        }
        if (this.$store.getters.user.user.id == creator || this.isPremission) {
          this.selecting = true;
          var t = this;
          this.$refs.selector.showSingleSelect(
            this.admins,
            this.nurse_id,
            "选择上机护士",
            "name",
            "id",
            function(select_id) {
              t.nurse_id = select_id;
            },
            function() {
              t.selecting = false;
            }
          );
        } else {
          return;
        }
      }
      this.selecting = true;
      var t = this;
      this.$refs.selector.showSingleSelect(
        this.admins,
        this.nurse_id,
        "选择上机护士",
        "name",
        "id",
        function(select_id) {
          t.nurse_id = select_id;
        },
        function() {
          t.selecting = false;
        }
      );
    },
    select_puncture_nurse: function() {
      if (this.record.id != 0) {
        var creator = 0;
        if (this.record.creator == 0) {
          creator = this.record.start_nurse;
        } else {
          creator = this.record.creator;
        }
        if (this.$store.getters.user.user.id == creator || this.isPremission) {
          this.selecting = true;
          var t = this;
          this.$refs.selector.showSingleSelect(
            this.admins,
            this.puncture_nurse_id,
            "选择穿刺护士",
            "name",
            "id",
            function(select_id) {
              t.puncture_nurse_id = select_id;
            },
            function() {
              t.selecting = false;
            }
          );
        } else {
          return;
        }
      }
      this.selecting = true;
      var t = this;
      this.$refs.selector.showSingleSelect(
        this.admins,
        this.puncture_nurse_id,
        "选择穿刺护士",
        "name",
        "id",
        function(select_id) {
          t.puncture_nurse_id = select_id;
        },
        function() {
          t.selecting = false;
        }
      );
    },
    open: function() {
      this.selecting = false;
      this.$refs.selector.hide();
    }
  },
  watch: {
    "record.id": function(val) {
      if (val > 0) {
        for (let i = 0; i < this.special_premission.length; i++) {
          if (
            this.$store.getters.user.user.id ==
            this.special_premission[i].admin_user_id
          ) {
            this.isPremission = true;
          }
        }
        if (this.record.creator == 0) {
          this.creator = this.record.start_nurse;
        } else {
          this.creator = this.record.creator;
        }
      }
    }
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.perform {
  text-align: center;
  font-size: 0.3rem;
  padding-top: 2rem;
  .crew {
    color: $pgh-color;
  }
  button {
    background: $main-color;
    color: #fff;
    font-size: 0.45rem;
    text-align: center;
    width: 3rem;
    height: 1.2rem;
    line-height: 1.2rem;
    border-radius: 4px;
    margin-top: 10px;
  }
}
</style>