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

<template>
  <div>
    <div class="Dialog" v-show="isShowDialog">
      <div class="DialogTit">
        <span @click="close()" class="iconfont">&#xe6e9;</span>
        <h1 class="name">治疗小结</h1>
        <span @click="commitInfo" class="success">保存</span>
      </div>

      <div class="DialogContent choose" id="dialogTop">
        <el-form :model="dialysisSummary" label-width="120px">
          <el-form-item label="透后宣教 : ">
            <!-- <el-select @change="dialysisAfterTeachSelectChange" v-model="dialysisSummary.text1" placeholder="请选择">
                  <el-option v-for="(s, index) in teach" :label="s.text" :value="s.value" :key="index"></el-option>
            </el-select>-->
            <el-input
              class="treatmentInput"
              readonly
              v-model="dialysisSummary.propagandaAndEducationContentSelect"
              placeholder="请选择"
              @focus="showSubMenu('education')"
            ></el-input>
          </el-form-item>
          <el-form-item label-width="0">
            <el-input
              class="newTextarea treatmentInput"
              type="textarea"
              v-model="dialysisSummary.propagandaAndEducationContent"
              :rows="5"
            ></el-input>
          </el-form-item>
          <el-form-item label="透析小结 : ">
            <el-input
              readonly
              class="treatmentInput"
              v-model="dialysisSummary.summaryContentSelect"
              placeholder="请选择"
              @focus="showSubMenu('summary')"
            ></el-input>
          </el-form-item>

          <el-form-item label-width="0">
            <el-input
              class="newTextarea treatmentInput"
              @focus="lastInputFocus"
              @blur="lastInputBlur"
              type="textarea"
              v-model="dialysisSummary.summaryContent"
              :rows="5"
            ></el-input>
          </el-form-item>
        </el-form>
        <!-- <div class="button">
              <button @click="commitInfo" class="submitButton">提交</button>
        </div>-->
      </div>
    </div>

    <check-box-sub-menu
      :visibility="visibility"
      v-on:menu-cancle="menuCancle"
      v-on:menu-comfirm="menuComfirm"
      :propsForm="propForm"
    ></check-box-sub-menu>
  </div>
</template>

<script>
import { commitTreatmentSummary } from "@/api/dialysis";
import { Toast } from "vant";
import CheckBoxSubMenu from "./subMenu/checkBoxSubMenu";
import { getDataConfig } from "@/utils/data";

export default {
  name: "TreatmentDialog",
  data() {
    return {
      isShowDialog: true,

      visibility: false,
      propForm: {
        title: "",
        list: [],
        optionList: [],
        isMultiple: 2,
        result: [], //选中的值
        type: 1, //用来区分不同子菜单，方便对返回值进行赋值
        selectId: 0
      },

      dialysisSummary: {
        text: "",
        propagandaAndEducationContent: "",
        propagandaAndEducationContentSelect: "",
        text2: "",
        summaryContent: "",
        summaryContentSelect: "",
        changeMedicalNurse: "",
        treatNurse: "",
        checkStaff: "",
        deboardNurse: "",
        treatDoctor: ""
      },
      summary: [],
      summaryObj: {},
      teach: [],
      teachObj: {},
      title: "治疗小结 ",
      record_date: "",
      patient: {
        id: 0
      }
    };
  },
  props: {
    record: {
      type: Object
    },
    patient_prop: {
      type: Object
    }
  },
  created() {
    // this.summary = this.$store.getters.summary;
    this.summary = getDataConfig("summary", "summary");
    // console.log("this.summary",this.summary)
    // this.teach = this.$store.getters.teach;
    this.teach = getDataConfig("education", "education");

    if (this.teach.length > 0) {
      var tlen = this.teach.length;
      for (let index = 0; index < tlen; index++) {
        this.teach[index].name = this.teach[index].text;
        this.teachObj[this.teach[index].id] = this.teach[index];
      }
    }
    if (this.summary.length > 0) {
      var tlen = this.summary.length;
      for (let index = 0; index < tlen; index++) {
        this.summary[index].name = this.summary[index].text;
        this.summaryObj[this.summary[index].id] = this.summary[index];
      }
    }

    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.patient.id = this.patient_prop.id

    if (this.record != null && this.record.id != "") {
      for (const key in this.record) {
        this.dialysisSummary[key] = this.record[key];
      }
      if (this.record.mission != "undefined") {
        this.dialysisSummary.propagandaAndEducationContent = this.record.mission;
      }
      if (this.record.dialysis_summary != "undefined") {
        this.dialysisSummary.summaryContent = this.record.dialysis_summary;
      }
    }
  },
  methods: {
    lastInputFocus: function(event) {
      var input = event.target;
      setTimeout(function() {
        input.style.marginBottom = "2rem";
        input.parentNode.scrollIntoView();
      }, 0);
    },
    lastInputBlur: function(event) {
      var input = event.target;
      setTimeout(function() {
        input.style.marginBottom = "";
      }, 0);
    },
    showSubMenu: function(val) {
      switch (val) {
        case "education":
          this.propForm.type = 1;
          this.isShowDialog = false;
          this.propForm.title = "透后宣教";
          this.visibility = true;
          this.propForm.list = [];
          this.propForm.optionList = this.teach;
          this.propForm.isMultiple = 1;
          this.propForm.selectId = this.dialysisSummary.xjid;
          break;
        case "summary":
          this.propForm.type = 2;
          this.isShowDialog = false;
          this.propForm.title = "透析小结";
          this.visibility = true;
          this.propForm.list = [];
          this.propForm.optionList = this.summary;
          this.propForm.isMultiple = 1;
          this.propForm.selectId = this.dialysisSummary.xxjid;
          break;
      }
    },
    menuCancle: function() {
      this.visibility = false;
      this.isShowDialog = true;
    },
    menuComfirm: function(val) {
      this.visibility = false;
      this.isShowDialog = true;
      switch (val.type) {
        case 1:
          if (val.selectId in this.teachObj) {
            var theValue = this.teachObj[val.selectId].value;
            this.dialysisAfterTeachSelectChange(theValue);
            this.dialysisSummary.xjid = val.selectId;
            this.dialysisSummary.propagandaAndEducationContentSelect = this.teachObj[
              val.selectId
            ].name;
          }
          break;
        case 2:
          if (val.selectId in this.summaryObj) {
            var theValue = this.summaryObj[val.selectId].value;
            this.dialysisSummarySelectChange(theValue);
            this.dialysisSummary.xxjid = val.selectId;
            this.dialysisSummary.summaryContentSelect = this.summaryObj[
              val.selectId
            ].name;
          }
          break;
      }
    },

    dialysisSummarySelectChange: function(values) {
      if(this.dialysisSummary.summaryContent == null){
        this.dialysisSummary.summaryContent == ""
      }

      if (this.dialysisSummary.summaryContent == "") {
        this.dialysisSummary.summaryContent = values;
      } else {
        if (this.dialysisSummary.summaryContent.indexOf(values) == -1) {
          if (
            this.dialysisSummary.summaryContent
              .charAt(this.dialysisSummary.summaryContent.length - 1)
              .indexOf("。") == -1
          ) {
            this.dialysisSummary.summaryContent =
              this.dialysisSummary.summaryContent + "," + values;
          } else {
            this.dialysisSummary.summaryContent =
              this.dialysisSummary.summaryContent  + values;
          }
        }
      }
    },
    dialysisAfterTeachSelectChange: function(values) {
      if(this.dialysisSummary.propagandaAndEducationContent == null){
        this.dialysisSummary.propagandaAndEducationContent == ""
      }
      if (this.dialysisSummary.propagandaAndEducationContent == "") {
        this.dialysisSummary.propagandaAndEducationContent = values;
      } else {
        if (this.dialysisSummary.propagandaAndEducationContent.indexOf(values) == -1) {
          if (
            this.dialysisSummary.propagandaAndEducationContent.charAt(this.dialysisSummary.propagandaAndEducationContent.length - 1).indexOf("。") == -1) {
            this.dialysisSummary.propagandaAndEducationContent =
              this.dialysisSummary.propagandaAndEducationContent + "," + values;
          } else {
            this.dialysisSummary.propagandaAndEducationContent =
              this.dialysisSummary.propagandaAndEducationContent + values;
          }
        }
      }
    },
    commitInfo: function() {
      Toast.loading({ forbidClick: true, duration: 0 });
      let ParamsQuery = this.dialysisSummary;
      ParamsQuery["patient"] = this.$route.query.patient_id;
      ParamsQuery["record_date"] = this.record_date;
      commitTreatmentSummary(ParamsQuery).then(response => {
        if (response.data.state == 0) {
          Toast.fail(response.data.msg);
          return false;
        } else {
          Toast.success("提交成功");

          this.$emit("did_update", response.data.data.summary);
          for (const key in response.data.data.summary) {
            this.record[key] = response.data.data.summary[key];
          }
        }
      });
    },
    close: function() {
      this.$emit("close");
    },
    open: function() {
      this.isShowDialog = true;
      this.visibility = false;
      var dialogTop = document.querySelector("#dialogTop");
      if (dialogTop != null) {
        this.$nextTick(() => {
          dialogTop.scrollTop = 0;
        });
      }
    }
  },

  components: {
    CheckBoxSubMenu
  }
};
</script>

<style style="stylesheet/scss" lang="scss" scoped>
.choose {
  padding: 0.6rem 0.6rem 0 0.6rem;
  .button {
    text-align: center;
    .submitButton {
      width: 3rem;
      height: 0.8rem;
      line-height: 0.8rem;
      background: $main-color;
      color: #fff;
      font-size: 0.3rem;
      text-align: center;
      border-radius: 6px;
    }
  }
}
</style>
<style lang="scss">
.newTextarea {
  font-size: 0.45rem;
}
.treatmentInput {
  .el-input__inner {
    font-size: 0.45rem;
  }
  .el-textarea__inner {
    font-size: 0.45rem;
  }
}
</style>