xt_pad/src/pages/main/dialysis/LongTable.vue

<template>
  <div>
    <div class="blueBorder"></div>
    <div class="scrollBox">
      <div class="scrollTable">
        <div class="tableTit">
          <ul>
            <li
              v-for="(item,index) in ['序号','透析模式','透析时长','医生','更新日期','操作']"
              :key="index"
              :value="item.value"
            >{{item}}</li>
          </ul>
        </div>
        <div class="tableDate">
          <van-list v-model="loading" :finished="finished" @load="onLoad">
            <ul>
              <li v-for="(item,index) in tableDate" :key="index" :value="item.value">
                <span>{{item.no}}</span>
                <span>{{item.mode_name}}</span>
                <span>{{item.dialysis_duration_hour}}h {{item.dialysis_duration_minute}}min</span>
                <span>{{tranDoctor(item.registrars_id)}}</span>
                <span>{{item.edate}}</span>
                <span @click="openEdit(index, item)">
                  <i class="iconfont">&#xe6f7;</i>修改
                </span>
              </li>
            </ul>
          </van-list>
          <div class="NoData" v-show="tableDate.length == 0">
            <img style="margin-top: 50px; margin-bottom: 50px" src="@/assets/login/data.jpg" alt />
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="newTable">
      <el-table :data="tableDate" border style="width: 100%">
        <el-table-column fixed prop="date" label="序号" width="100" align="center">
            <template slot-scope="scope">
               {{scope.row.no}}
            </template>
        </el-table-column>
        <el-table-column prop="name" label="透析模式" width="100" align="center">
          <template slot-scope="scope">
               {{scope.row.mode_name}}
          </template>
        </el-table-column>
        <el-table-column prop="province" label="透析时长" width="120" align="center">
          <template slot-scope="scope">
             {{scope.row.dialysis_duration_hour}}h {{scope.row.dialysis_duration_minute}}min
          </template>
        </el-table-column>
        <el-table-column prop="city" label="医生" width="120" align="center">
            <template slot-scope="scope">
                 {{tranDoctor(scope.row.registrars_id)}}
            </template>
        </el-table-column>
        <el-table-column prop="address" label="更新日期" width="100" align="center">
          <template slot-scope="scope">
            {{scope.row.edate}}
          </template>
        </el-table-column>
      </el-table>
    </div>-->
    <van-popup
      title="透析处方"
      v-model="showObj.showPopup"
      :overlay="true"
      @click-overlay="popupDidHide()"
    >
      <div v-if="showObj.showForm" class="Dialog">
        <div class="DialogTit">
          <span @click="popupDidHide()" class="iconfont">&#xe6e9;</span>
          <h1 class="name">透析处方</h1>
          <span @click="commitInfo" class="success">完成</span>
        </div>

        <div class="DialogContent" id="dialogTop">
          <div @click="showSubMenu('mode')" class="item" ref="mode">
            <label class="name" for="txms">透析模式</label>
            <div class="content">
              <span class="text" id="txms">{{GetModeByModeId(dialysisSolution.mode_id)}}</span>
              <span class="iconfont">&#xe6f9;</span>
            </div>
          </div>
          <div class="item" @click="openPicker">
            <label class="name" for="txsc">透析时长</label>
            <div class="content">
              <span class="text" style="width: 100px">{{timeValue}}</span>
              <span class="iconfont">&#xe6f9;</span>
            </div>
          </div>

          <div class="item">
            <label class="name" for="xll">血流量(ml/min)</label>
            <div class="content">
              <input
                type="tel"
                @focus="inputFocus"
                id="xll"
                v-model="dialysisSolution.blood_flow_volume"
              />
            </div>
          </div>

          <div class="item">
            <label class="name" for="mbcll">目标超滤量(ml)</label>
            <div class="content">
              <input
                type="tel"
                @focus="inputFocus"
                id="mbcll"
                v-model="dialysisSolution.target_ultrafiltration"
              />
            </div>
          </div>
          <div
            @click="showSubMenu('dialysate_formulation')"
            class="item"
            ref="dialysate_formulation"
          >
            <label class="name" for="txypf">透析液配方</label>
            <div class="content">
              <span
                class="text"
                id="txypf"
              >{{GetDialysateFormulationById(dialysisSolution.dialysate_formulation)}}</span>
              <span class="iconfont">&#xe6f9;</span>
            </div>
          </div>

          <div @click="showSubMenu('anticoagulant')" class="item" ref="anticoagulant">
            <label class="name" for="knj">抗疑剂</label>
            <div class="content">
              <span class="text" id="knj">{{GetAnticoagulantById(dialysisSolution.anticoagulant)}}</span>
              <span class="iconfont">&#xe6f9;</span>
            </div>
          </div>

          <div class="item" v-if="anticoagulant.shouji != -1">
            <label class="name" for="sj">首剂({{anticoagulant.shouji_unit}})</label>
            <div class="content">
              <input
                type="tel"
                @focus="inputFocus"
                id="sj"
                v-model="dialysisSolution.anticoagulant_shouji"
                :disabled="anticoagulant.shouji==1?false:true"
              />
            </div>
          </div>
          <div class="item" v-if="anticoagulant.weichi != -1">
            <label class="name" for="wz">维持({{anticoagulant.weichi_unit}})</label>
            <div class="content">
              <input
                type="tel"
                @focus="inputFocus"
                id="wz"
                class="inputBox"
                v-model="dialysisSolution.anticoagulant_weichi"
                :disabled="anticoagulant.weichi==1?false:true"
              />
            </div>
          </div>
          <div class="item" v-if="anticoagulant.zongliang != -1">
            <label class="name" for="zl">总量(mg)</label>
            <div class="content">
              <input
                type="tel"
                @focus="inputFocus"
                id="zl"
                class="inputBox"
                v-model="dialysisSolution.anticoagulant_zongliang"
                :disabled="anticoagulant.zongliang==1?false:true"
              />
            </div>
          </div>

          <div class="item" v-if="anticoagulant.gaimingcheng != -1">
            <label class="name" for="g">钙名称({{anticoagulant.gaimingcheng_unit}})</label>
            <div class="content">
              <input
                type="text"
                id="g"
                class="inputBox"
                v-model="dialysisSolution.anticoagulant_gaimingcheng"
                :disabled="anticoagulant.gaimingcheng==1?false:true"
              />
            </div>
          </div>

          <div class="item" v-if="anticoagulant.gaijiliang != -1">
            <label class="name" for="gjl">钙剂量</label>
            <div class="content">
              <input
                type="text"
                id="gjl"
                class="inputBox"
                v-model="dialysisSolution.anticoagulant_gaimingcheng"
                :disabled="anticoagulant.gaimingcheng==1?false:true"
              />
            </div>
          </div>

          <div class="line"></div>
          <div class="item">
            <label class="name" for="zhy">置换量(L)</label>
            <div class="content">
              <input
                type="tel"
                @focus="inputFocus"
                id="zhy"
                v-model="dialysisSolution.replacement_total"
              />
            </div>
          </div>

          <div class="item">
            <label class="name" for="j">钾(mmol/L)</label>
            <div class="content">
              <input type="tel" @focus="inputFocus" id="j" v-model="dialysisSolution.kalium" />
            </div>
          </div>
          <div class="item">
            <label class="name" for="n">钠(mmol/L):</label>
            <div class="content">
              <input type="tel" @focus="inputFocus" id="n" v-model="dialysisSolution.sodium" />
            </div>
          </div>
          <div class="item">
            <label class="name" for="gg">钙(mmol/L)</label>
            <div class="content">
              <input type="tel" @focus="inputFocus" id="gg" v-model="dialysisSolution.calcium" />
            </div>
          </div>
          <div class="item">
            <label class="name" for="tsqy">碳酸氢盐(mmol/L)</label>
            <div class="content">
              <input
                type="tel"
                @focus="inputFocus"
                id="tsqy"
                v-model="dialysisSolution.bicarbonate"
              />
            </div>
          </div>
          <div class="item">
            <label class="name" for="ptt">葡萄糖(mmol/L)</label>
            <div class="content">
              <input type="tel" @focus="inputFocus" id="ptt" v-model="dialysisSolution.glucose" />
            </div>
          </div>

          <div class="line"></div>

          <div class="item">
            <label class="name" for="txyll">透析液流量(ml/min)</label>
            <div class="content">
              <input
                type="tel"
                @focus="inputFocus"
                id="txyll"
                v-model="dialysisSolution.dialysate_flow"
              />
            </div>
          </div>
          <div class="item">
            <label class="name" for="txywd">透析液温度(℃)</label>
            <div class="content">
              <!--<span class="text">HD</span>-->
              <!--<span class="iconfont">&#xe6f9;</span>-->
              <input
                type="tel"
                @focus="inputFocus"
                id="txywd"
                v-model="dialysisSolution.dialysate_temperature"
              />
            </div>
          </div>
          <div class="item">
            <label class="name" for="dtl">电导率(mS/cm)</label>
            <div class="content">
              <!--<span class="text">HD</span>-->
              <!--<span class="iconfont">&#xe6f9;</span>-->
              <input
                type="tel"
                @focus="inputFocus"
                id="dtl"
                v-model="dialysisSolution.conductivity"
              />
            </div>
          </div>

          <div class="line"></div>
          <div>
            <div class="item">
              <label class="name" for="bz">备注</label>
              <div class="content">
                <span class="text"></span>
              </div>
            </div>
            <textarea
              class="textarea"
              id="bz"
              placeholder="请输入内容"
              v-model="dialysisSolution.remark"
              @focus="lastInputFocus"
              @blur="lastInputBlur"
            ></textarea>
          </div>

          <!--<div class="footer">-->
          <!--处方医生：刘小军 医生-->
          <!--</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>

      <mt-datetime-picker
        ref="picker"
        type="time"
        hourFormat="{value}小时"
        minuteFormat="{value}分钟"
        @confirm="handleTimeConfirm"
        v-model="time"
      ></mt-datetime-picker>
    </van-popup>
  </div>
</template>

<script>
import {
  GetPatientDialysisSolutionList,
  EditDialysisSolution
} from "@/api/patient";
import { parseTime } from "@/utils";
import { fetchAllAdminUsers } from "@/api/doctor";
import { getDataConfig } from "@/utils/data";
import CheckBoxSubMenu from "../dialog/subMenu/checkBoxSubMenu";
import { Toast } from "vant";

let allno = 1;

export default {
  name: "LongTable",
  data() {
    return {
      visibility: false,
      loading: false,
      finished: false,

      queryParams: {
        page: 0,
        id: 0,
        limit: 10
      },

      tableDate: [],
      adminUserOptions: {},
      currentIndex: -1,
      showObj: {
        showPopup: false,
        showForm: true
      },
      dialysisSolution: {
        id: 0,
        mode: "",
        mode_id: "",
        mode_name: "",
        dialysis_duration: "",
        dialysis_duration_hour: "",
        dialysis_duration_minute: "",
        hemodialysis_machine: "",
        perfusion_apparatus: "",
        perfusion_apparatus_name: "",
        blood_flow_volume: "",
        dewater: "",
        displace_liqui: 0,
        replacement_way: "",
        replacement_way_name: "",
        anticoagulant: "",
        anticoagulant_name: "",
        anticoagulant_shouji: "",
        anticoagulant_weichi: "",
        anticoagulant_zongliang: "",
        anticoagulant_gaimingcheng: "",
        anticoagulant_gaijiliang: "",
        target_ultrafiltration: "",
        dialysate_formulation: "",
        replacement_total: "",
        kalium: "",
        sodium: "",
        calcium: "",
        bicarbonate: "",
        glucose: "",
        dry_weight: "",
        dialysate_flow: "",
        dialysate_temperature: "",
        conductivity: "",
        doctor: "",
        remark: ""
      },
      anticoagulant: {
        id: 0,
        name: "",
        type: 1,
        shouji: 1,
        weichi: 1,
        zongliang: 1,
        gaimingcheng: -1,
        gaijiliang: -1,
        shouji_unit: "mg",
        weichi_unit: "mg/h",
        zongliang_unit: "mg",
        gaimingcheng_unit: "",
        gaijiliang_unit: ""
      },
      propForm: {
        title: "",
        list: [],
        optionList: [],
        isMultiple: 2,
        result: [], // 选中的值
        type: 1, // 用来区分不同子菜单，方便对返回值进行赋值
        selectId: 0
      },
      modeOption: [],
      dialysateFormulationOptions: [],
      anticoagulantsConfit: {},
      timeValue: "",
      time: "03:00",
      record_date: ""
    };
  },
  methods: {
    commitInfo: function() {
      Toast.loading({ forbidClick: true, duration: 0 });
      this.dialysisSolution.mode = this.dialysisSolution.mode_id;
      EditDialysisSolution(
        this.dialysisSolution.id,
        this.dialysisSolution
      ).then(response => {
        if (response.data.state == 0) {
          Toast.fail(response.data.msg);
          return false;
        } else {
          Toast.success("修改成功");
          for (const key in response.data.data.solution) {
            this.tableDate[this.currentIndex][key] =
              response.data.data.solution[key];
          }
          this.popupDidHide();
        }
      });
    },
    openEdit(index, item) {
      this.currentIndex = index;
      for (var key in item) {
        this.dialysisSolution[key] = item[key];
      }

      this.timeValue =
        this.dialysisSolution.dialysis_duration_hour +
        "小时" +
        this.dialysisSolution.dialysis_duration_minute +
        "分钟";

      this.time =
        (this.dialysisSolution.dialysis_duration_hour >= 10
          ? this.dialysisSolution.dialysis_duration_hour
          : "0" + this.dialysisSolution.dialysis_duration_hour) +
        ":" +
        (this.dialysisSolution.dialysis_duration_minute >= 10
          ? this.dialysisSolution.dialysis_duration_minute
          : "0" + this.dialysisSolution.dialysis_duration_minute);

      this.showObj.showPopup = true;

      // document.getElementById('dialogTop').scrollTop = 200;
      var dialogTop = document.querySelector("#dialogTop");
      if (dialogTop != null) {
        this.$nextTick(() => {
          dialogTop.scrollTop = 0;
        });
      }
    },
    popupDidHide() {
      this.showObj.showPopup = false;
      this.visibility = false;
      this.showObj.showForm = true;
    },
    openPicker: function() {
      this.$refs.picker.open();
    },
    showSubMenu: function(val) {
      switch (val) {
        case "mode":
          this.propForm.type = 1;
          this.showObj.showForm = false;
          this.propForm.title = "透析模式";
          this.visibility = true;
          this.propForm.list = [];
          this.propForm.optionList = this.modeOption;
          this.propForm.isMultiple = 1;
          this.propForm.selectId = this.dialysisSolution.mode_id;
          this.propForm.click_ref = "mode";

          break;

        case "anticoagulant":
          this.propForm.type = 5;
          this.showObj.showForm = false;
          this.propForm.title = "抗疑剂";
          this.visibility = true;
          this.propForm.list = [];
          this.propForm.optionList = this.anticoagulantsConfit;
          this.propForm.isMultiple = 1;
          this.propForm.selectId = this.dialysisSolution.anticoagulant;
          this.propForm.click_ref = "anticoagulant";
          break;
        case "dialysate_formulation":
          this.propForm.type = 6;
          this.showObj.showForm = false;
          this.propForm.title = "透析液配方";
          this.visibility = true;
          this.propForm.list = [];
          this.propForm.optionList = this.dialysateFormulationOptions;
          this.propForm.isMultiple = 1;
          this.propForm.selectId = this.dialysisSolution.dialysate_formulation;
          this.propForm.click_ref = "dialysate_formulation";
          break;
      }
    },
    menuCancle: function() {
      this.visibility = false;
      this.showObj.showForm = true;
      this.$nextTick(() => {
        if (
          this.$refs[this.propForm.click_ref] != undefined &&
          this.$refs[this.propForm.click_ref] != null
        ) {
          this.$refs[this.propForm.click_ref].scrollIntoView();
        }
      });
    },
    menuComfirm: function(val) {
      this.visibility = false;
      this.showObj.showForm = true;
      this.$nextTick(() => {
        if (
          this.$refs[this.propForm.click_ref] != undefined &&
          this.$refs[this.propForm.click_ref] != null
        ) {
          this.$refs[this.propForm.click_ref].scrollIntoView();
        }
      });
      switch (val.type) {
        case 1:
          this.dialysisSolution.mode_id = val.selectId;
          this.dialysisSolution.mode_name = this.GetModeByModeId(
            this.dialysisSolution.mode_id
          );
          break;

        case 5:
          this.dialysisSolution.anticoagulant = val.selectId;

          if (
            typeof this.anticoagulantsConfit[val.selectId] === "undefined" ||
            this.anticoagulantsConfit[val.selectId] == null
          ) {
            return;
          }
          this.anticoagulant = this.anticoagulantsConfit[val.selectId];

          break;

        case 6:
          this.dialysisSolution.dialysate_formulation = val.selectId;

          break;
      }
    },
    handleTimeConfirm: function(val) {
      val = val.replace("小时");
      val = val.replace("分钟");
      let timeArray = val.split(":");
      if (parseInt(timeArray[0].substring(0, 1)) == 0) {
        this.dialysisSolution.dialysis_duration_hour = timeArray[0].charAt(
          timeArray[0].length - 1
        );
      } else {
        this.dialysisSolution.dialysis_duration_hour = timeArray[0];
      }

      if (parseInt(timeArray[1].substring(0, 1)) == 0) {
        this.dialysisSolution.dialysis_duration_minute = timeArray[1].charAt(
          timeArray[1].length - 1
        );
      } else {
        this.dialysisSolution.dialysis_duration_minute = timeArray[1];
      }
      this.timeValue =
        this.dialysisSolution.dialysis_duration_hour +
        "小时" +
        this.dialysisSolution.dialysis_duration_minute +
        "分钟";
      this.dialysisSolution.dialysis_duration =
        this.dialysisSolution.dialysis_duration_hour +
        "." +
        this.dialysisSolution.dialysis_duration_minute;
    },
    GetModeByModeId: function(val) {
      let treatment_mode_name = "";
      let treatment_mode = this.modeOption;
      for (let keys in treatment_mode) {
        if (treatment_mode[keys].id == val) {
          treatment_mode_name = treatment_mode[keys].name;
        }
      }

      return treatment_mode_name;
    },
    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();
      }
    },
    lastInputBlur: function(event) {
      var input = event.target;
      setTimeout(function() {
        input.style.marginBottom = "";
      }, 0);
    },
    lastInputFocus: function(event) {
      var input = event.target;
      setTimeout(function() {
        input.style.marginBottom = "2rem";
        input.parentNode.scrollIntoView();
      }, 0);
    },
    GetDialysateFormulationById: function(val) {
      let name = "";
      let dfl = this.dialysateFormulationOptions.length;
      for (let index = 0; index < dfl; index++) {
        if (this.dialysateFormulationOptions[index].id == val) {
          name = this.dialysateFormulationOptions[index].name;
          break;
        }
      }
      return name;
    },
    GetAnticoagulantById: function(val) {
      let anticoagulan_name = "";
      let anticoagulant = this.anticoagulantsConfit;
      for (let keys in anticoagulant) {
        if (anticoagulant[keys].id == val) {
          anticoagulan_name = anticoagulant[keys].name;
        }
      }
      return anticoagulan_name;
    },
    tranDoctor(id) {
      if (id in this.adminUserOptions) {
        return this.adminUserOptions[id].name;
      } else {
        return "未知";
      }
    },
    fetchAllAdminUsers() {
      fetchAllAdminUsers().then(response => {
        if (response.data.state == 1) {
          var ul = response.data.data.users.length;
          for (let index = 0; index < ul; index++) {
            this.adminUserOptions[response.data.data.users[index].id] =
              response.data.data.users[index];
          }
        }
      });
    },
    onLoad() {
      // 异步更新数据
      this.queryParams.page++;
      GetPatientDialysisSolutionList(this.queryParams).then(response => {
        if (response.data.state == 1) {
          var sl = response.data.data.solutions.length;
          if (sl == 0) {
            this.finished = true;
          } else {
            for (let index = 0; index < sl; index++) {
              var solution = response.data.data.solutions[index];
              solution.no = allno;
              solution.edate = parseTime(
                solution.updated_time,
                "{y}-{m}-{d} {h}:{i}"
              );
              allno++;
              this.tableDate.push(solution);
            }
          }
          this.loading = false;
        }
      });
    }
  },
  created() {
    allno = 1;
    this.fetchAllAdminUsers();
    this.queryParams.id = this.$route.query.patient_id;
    this.onLoad();

    this.modeOption = this.$store.getters.treatment_mode;
    this.dialysateFormulationOptions = getDataConfig(
      "hemodialysis",
      "dialysate_formulation"
    );
    this.anticoagulantsConfit = this.$store.getters.anticoagulants_confit;

    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);
  },
  components: {
    CheckBoxSubMenu
  }
};
</script>

<style style="stylesheet/scss" lang="scss"  scoped>
.textarea {
  width: 100%;
  height: 2.4rem;
  line-height: 0.6rem;
  color: $pgh-color;
  font-size: 0.28rem;
  padding-left: 0.36rem;
  border: none;
  border-bottom: 1px #e5e5e5 solid;
}
.tableTit {
  background: $main-color;
  color: $text-color;
  @include box-sizing;
  ul {
    @include display-flex;
    @include align-items-center;
    @include text-align;
    @include justify-content-center;
    li {
      @include flex;
      border-right: 2px #fff solid;
      font-size: 0.45rem;
      height: 1.2rem;
      line-height: 1.2rem;
    }
    &:last-child {
      border-right: none;
    }
  }
}
.tableDate {
  background: $text-color;
  color: $pgh-color;
  @include box-sizing;
  ul {
    li {
      font-size: 0.45rem;
      height: 1.2rem;
      line-height: 1.2rem;
      @include display-flex;
      @include align-items-center;
      @include text-align;
      @include justify-content-center;
      span {
        @include flex;
        border-right: 2px #fff solid;
        border-bottom: 2px #fff solid;
        background: #ecf5ff;
        display: inline-block;
        height: 1.2rem;
        line-height: 1.2rem;
        &:last-child {
          color: $main-color;
        }
        .iconfont {
          color: $main-color;
          font-size: 0.3rem;
          margin-right: 0.1rem;
        }
      }
    }
    &:last-child {
      border-right: none;
    }
  }
}
.scrollBox {
  width: 100%;
  overflow: auto;
  .scrollTable {
    width: 768px;
  }
}
</style>
<style lang="scss">
.newTable {
  .el-table td {
    padding: 0;
  }
  .el-table th {
    padding: 6px 0;
  }
}
</style>