xt_pad/src/pages/main/dialog/subMenu/multipleSubMenu.vue

<template>
  <div>
    <div v-if="visibility" class="Dialog">
      <div class="DialogTit">
        <span class="iconfont" @click="closeDialog()">&#xe720; 返回</span>
        <h1 class="name">透析耗材</h1>
        <span class="success" @click="success()">完成</span>
      </div>
      <div class="DialogContent" id="dialogTop">
        <div
          class="item"
          value="item"
          @click="itemClick(1, 'niprocart')"
          ref="niprocart"
          v-if="isShow('血液透析干粉')"
        >
          <label class="name">血液透析干粉</label>
          <div class="content">
            <span class="text" id="knjaa">{{
              getValue(this.dialysisPrescription.niprocart)
            }}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>
        <div
          class="item"
          value="item"
          @click="itemClick(2, 'jms')"
          ref="jms"
          v-if="isShow('一次性使用动静脉穿刺针')"
        >
          <label class="name">一次性使用动静脉穿刺针</label>
          <div class="content">
            <span class="text" id="knjaa">{{
              getValue(this.dialysisPrescription.jms)
            }}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>
        <div
          class="item"
          value="item"
          @click="itemClick(3, 'fistula_needle_set')"
          ref="fistula_needle_set"
          v-if="isShow('内瘘管翼状针')"
        >
          <label class="name">内瘘管翼状针</label>
          <div class="content">
            <span class="text" id="knjaa">{{
              getValue(this.dialysisPrescription.fistula_needle_set)
            }}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>
        <div
          class="item"
          value="item"
          @click="itemClick(4, 'fistula_needle_set_16')"
          ref="fistula_needle_set_16"
          v-if="isShow('内瘘管翼状针16G')"
        >
          <label class="name">内瘘管翼状针16G</label>
          <div class="content">
            <span class="text" id="knjaa">{{
              getValue(this.dialysisPrescription.fistula_needle_set_16)
            }}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>
        <div
          class="item"
          value="item"
          @click="itemClick(5, 'hemoperfusion')"
          ref="hemoperfusion"
          v-if="isShow('一次性使用血液灌流器')"
        >
          <label class="name">一次性使用血液灌流器</label>
          <div class="content">
            <span class="text" id="knjaa">{{
              getValue(this.dialysisPrescription.hemoperfusion)
            }}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>
        <div
          class="item"
          value="item"
          @click="itemClick(6, 'dialyser_sterilised')"
          ref="dialyser_sterilised"
          v-if="isShow('空心纤维血液透析器')"
        >
          <label class="name">空心纤维血液透析器</label>
          <div class="content">
            <span class="text" id="knjaa">{{
              getValue(this.dialysisPrescription.dialyser_sterilised)
            }}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>
        <div
          class="item"
          value="item"
          @click="itemClick(7, 'filtryzer')"
          ref="filtryzer"
          v-if="isShow('中空纤维透析器')"
        >
          <label class="name">中空纤维透析器</label>
          <div class="content">
            <span class="text" id="knjaa">{{
              getValue(this.dialysisPrescription.filtryzer)
            }}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>

        <div
          class="item"
          value="item"
          @click="itemClick(8, 'dialyzers')"
          ref="dialyzers"
          v-if="isShow('透析器')"
        >
          <label class="name">透析器</label>
          <div class="content">
            <span class="text" id="knjaa">{{
              getValue(this.dialysisPrescription.dialyzers)
            }}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>

        <div
          class="item"
          value="item"
          @click="itemClick(9, 'injector')"
          ref="injector"
          v-if="isShow('注射器')"
        >
          <label class="name">注射器</label>
          <div class="content">
            <span class="text" id="knjaa">{{
              getValue(this.dialysisPrescription.injector)
            }}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>

        <div
          class="item"
          value="item"
          @click="itemClick(10, 'bloodlines')"
          ref="bloodlines"
          v-if="isShow('体外循环血路管')"
        >
          <label class="name">体外循环血路管</label>
          <div class="content">
            <span class="text" id="knjaa">{{
              getValue(this.dialysisPrescription.bloodlines)
            }}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>

        <div
          class="item"
          value="item"
          @click="itemClick(11, 'tubing_hemodialysis')"
          ref="tubing_hemodialysis"
          v-if="isShow('血液净化补液管路(置换管)')"
        >
          <label class="name">血液净化补液管路(置换管)</label>
          <div class="content">
            <span class="text" id="knjaa">{{
              getValue(this.dialysisPrescription.tubing_hemodialysis)
            }}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>

        <div
          class="item"
          value="item"
          @click="itemClick(12, 'package')"
          ref="package"
          v-if="isShow('护理包')"
        >
          <label class="name">护理包</label>
          <div class="content">
            <span class="text" id="knjaa">{{
              getValue(this.dialysisPrescription.package)
            }}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>

        <div
          class="item"
          value="item"
          @click="itemClick(13, 'a_liquid')"
          ref="a_liquid"
          v-if="isShow('A液')"
        >
          <label class="name">A液</label>
          <div class="content">
            <span class="text" id="knjaa">{{
              getValue(this.dialysisPrescription.a_liquid)
            }}</span>
            <span class="iconfont">&#xe6f9;</span>
          </div>
        </div>
      </div>
    </div>
    <new-check-box-sub-menu
      :show="is_show"
      v-on:menu-cancle="menuCancle"
      v-on:menu-comfirm="menuComfirm"
      v-on:menu-empty="menuEmpty"
      :propsForm="propForm"
    ></new-check-box-sub-menu>
  </div>
</template>

<script>
import { getWarehouseGoodInfo } from "@/api/stock";

import NewCheckBoxSubMenu from "./newCheckBoxSubMenu";

export default {
  name: "multipleSubMenu",
  components: { NewCheckBoxSubMenu },
  data() {
    return {
      is_show: false,
      propForm: {
        title: "",
        list: [],
        optionList: [],
        isMultiple: 2,
        result: [], //选中的值
        type: 1, //用来区分不同子菜单，方便对返回值进行赋值
        selectId: 0
      }
    };
  },

  props: {
    dialysisPrescription: {
      type: Object
    },
    info: {
      type: Array,
      default: function() {
        return new Array();
      }
    },
    visibility: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    success: function() {
      this.$emit("menu-comfirm-two", this.dialysisPrescription);
    },
    closeDialog() {
      this.$emit("menu-cancel-two");
    },
    itemClick(type, name) {
      getWarehouseGoodInfo(type).then(response => {
        if (response.data.state == 0) {
          Toast.fail(response.data.msg);
          return false;
        } else {
          var goodInfoArray = [];
          for (let i = 0; i < response.data.data.list.length; i++) {
            let obj = {};
            obj["id"] = response.data.data.list[i].GoodInfo.id;
            obj["name"] =
              response.data.data.list[i].GoodInfo.specification_name;
            goodInfoArray.push(obj);
          }
          const obj = {};
          // 去重复
          goodInfoArray = goodInfoArray.reduce((cur, next) => {
            obj[next.id] ? "" : (obj[next.id] = true && cur.push(next));
            return cur;
          }, []);

          switch (name) {
            case "niprocart":
              this.propForm.type = 1;
              this.propForm.title = "血液透析干粉";
              this.propForm.list = [];
              this.propForm.optionList = [];
              this.propForm.optionList = goodInfoArray;
              this.propForm.isMultiple = 1;
              this.propForm.selectId = this.dialysisPrescription.niprocart;
              this.propForm.click_ref = "niprocart";
              this.is_show = true;
              this.visibility = false;

              break;
            case "jms":
              this.propForm.type = 2;
              this.propForm.title = "一次性使用动静脉穿刺针";
              this.propForm.list = [];
              this.propForm.optionList = [];
              this.propForm.optionList = goodInfoArray;
              this.propForm.isMultiple = 1;
              this.propForm.selectId = this.dialysisPrescription.jms;
              this.propForm.click_ref = "jms";
              this.is_show = true;
              this.visibility = false;

              break;

            case "fistula_needle_set":
              this.propForm.type = 3;
              this.is_show = true;
              this.visibility = false;
              this.propForm.title = "内瘘管翼状针";

              this.propForm.list = [];
              this.propForm.optionList = [];
              this.propForm.optionList = goodInfoArray;
              this.propForm.isMultiple = 1;
              this.propForm.selectId = this.dialysisPrescription.fistula_needle_set;
              this.propForm.click_ref = "perfusion_apparatus";

              break;
            case "fistula_needle_set_16":
              this.propForm.type = 4;
              this.is_show = true;
              this.visibility = false;
              this.propForm.title = "内瘘管翼状针16G";

              this.propForm.list = [];
              this.propForm.optionList = [];
              this.propForm.optionList = goodInfoArray;
              this.propForm.isMultiple = 1;
              this.propForm.selectId = this.dialysisPrescription.fistula_needle_set_16;
              this.propForm.click_ref = "fistula_needle_set_16";

              break;

            case "hemoperfusion":
              this.propForm.type = 5;

              this.propForm.title = "一次性使用血液灌流器";
              this.is_show = true;
              this.visibility = false;
              this.propForm.list = [];
              this.propForm.optionList = [];
              this.propForm.optionList = goodInfoArray;
              this.propForm.isMultiple = 1;
              this.propForm.selectId = this.dialysisPrescription.hemoperfusion;
              this.propForm.click_ref = "hemoperfusion";
              break;
            case "dialyser_sterilised":
              this.propForm.type = 6;

              this.propForm.title = "空心纤维血液透析器";
              this.is_show = true;
              this.visibility = false;
              this.propForm.list = [];
              this.propForm.optionList = [];
              this.propForm.optionList = goodInfoArray;
              this.propForm.isMultiple = 1;
              this.propForm.selectId = this.dialysisPrescription.dialyser_sterilised;
              this.propForm.click_ref = "dialyser_sterilised";
              break;
            case "filtryzer":
              this.propForm.type = 7;
              this.is_show = true;
              this.visibility = false;
              this.propForm.title = "中空纤维透析器";
              this.propForm.list = [];
              this.propForm.optionList = [];
              this.propForm.optionList = goodInfoArray;
              this.propForm.isMultiple = 1;
              this.propForm.selectId = this.dialysisPrescription.filtryzer;
              this.propForm.click_ref = "filtryzer";
              break;

            case "dialyzers":
              this.propForm.type = 8;
              this.is_show = true;
              this.visibility = false;
              this.propForm.title = "透析器";
              this.propForm.list = [];
              this.propForm.optionList = [];
              this.propForm.optionList = goodInfoArray;
              this.propForm.isMultiple = 1;
              this.propForm.selectId = this.dialysisPrescription.dialyzers;
              this.propForm.click_ref = "dialyzers";
              break;

            case "injector":
              this.propForm.type = 9;
              this.is_show = true;
              this.visibility = false;
              this.propForm.title = "注射器";
              this.propForm.list = [];
              this.propForm.optionList = [];
              this.propForm.optionList = goodInfoArray;
              this.propForm.isMultiple = 1;
              this.propForm.selectId = this.dialysisPrescription.injector;
              this.propForm.click_ref = "injector";
              break;

            case "bloodlines":
              this.propForm.type = 10;
              this.is_show = true;
              this.visibility = false;
              this.propForm.title = "体外循环血路管";
              this.propForm.list = [];
              this.propForm.optionList = [];
              this.propForm.optionList = goodInfoArray;
              this.propForm.isMultiple = 1;
              this.propForm.selectId = this.dialysisPrescription.bloodlines;
              this.propForm.click_ref = "bloodlines";
              break;

            case "tubing_hemodialysis":
              this.propForm.type = 11;
              this.is_show = true;
              this.visibility = false;
              this.propForm.title = "血液净化补液管路(置换管)";
              this.propForm.list = [];
              this.propForm.optionList = [];
              this.propForm.optionList = goodInfoArray;
              this.propForm.isMultiple = 1;
              this.propForm.selectId = this.dialysisPrescription.tubing_hemodialysis;
              this.propForm.click_ref = "tubing_hemodialysis";
              break;

            case "package":
              this.propForm.type = 12;
              this.is_show = true;
              this.visibility = false;
              this.propForm.title = "护理包";
              this.propForm.list = [];
              this.propForm.optionList = [];
              this.propForm.optionList = goodInfoArray;
              this.propForm.isMultiple = 1;
              this.propForm.selectId = this.dialysisPrescription.package;
              this.propForm.click_ref = "package";
              break;

            case "a_liquid":
              this.propForm.type = 13;
              this.is_show = true;
              this.visibility = false;
              this.propForm.title = "A液";
              this.propForm.list = [];
              this.propForm.optionList = [];
              this.propForm.optionList = goodInfoArray;
              this.propForm.isMultiple = 1;
              this.propForm.selectId = this.dialysisPrescription.a_liquid;
              this.propForm.click_ref = "a_liquid";
              break;
          }
        }
      });
    },
    getValue(id) {
      if (id == 0 || id == "") {
        return "";
      }
      for (let i = 0; i < this.info.length; i++) {
        if (this.info[i].id == id) {
          return this.info[i].specification_name;
        }
      }
    },
    menuCancle: function() {
      this.is_show = false;
      this.visibility = true;
    },
    menuComfirm: function(val) {
      console.log(val);
      this.is_show = false;
      this.visibility = 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:
          if (val.selectId != -2) {
            this.dialysisPrescription.niprocart = val.selectId;
          } else {
            this.dialysisPrescription.niprocart = 0;
          }
          break;
        case 2:
          if (val.selectId != -2) {
            this.dialysisPrescription.jms = val.selectId;
          } else {
            this.dialysisPrescription.jms = 0;
          }
          break;
        case 3:
          if (val.selectId != -2) {
            this.dialysisPrescription.fistula_needle_set = val.selectId;
          } else {
            this.dialysisPrescription.fistula_needle_set = 0;
          }
          break;
        case 4:
          if (val.selectId != -2) {
            this.dialysisPrescription.fistula_needle_set_16 = val.selectId;
          } else {
            this.dialysisPrescription.fistula_needle_set_16 = 0;
          }
          break;
        case 5:
          if (val.selectId != -2) {
            this.dialysisPrescription.hemoperfusion = val.selectId;
          } else {
            this.dialysisPrescription.hemoperfusion = 0;
          }
          break;
        case 6:
          if (val.selectId != -2) {
            this.dialysisPrescription.dialyser_sterilised = val.selectId;
          } else {
            this.dialysisPrescription.dialyser_sterilised = 0;
          }
          break;
        case 7:
          if (val.selectId != -2) {
            this.dialysisPrescription.filtryzer = val.selectId;
          } else {
            this.dialysisPrescription.filtryzer = 0;
          }
          break;

        case 8:
          if (val.selectId != -2) {
            this.dialysisPrescription.dialyzers = val.selectId;
          } else {
            this.dialysisPrescription.dialyzers = 0;
          }
          break;

        case 9:
          if (val.selectId != -2) {
            this.dialysisPrescription.injector = val.selectId;
          } else {
            this.dialysisPrescription.injector = 0;
          }
          break;

        case 10:
          if (val.selectId != -2) {
            this.dialysisPrescription.bloodlines = val.selectId;
          } else {
            this.dialysisPrescription.bloodlines = 0;
          }
          break;

        case 11:
          if (val.selectId != -2) {
            this.dialysisPrescription.tubing_hemodialysis = val.selectId;
          } else {
            this.dialysisPrescription.tubing_hemodialysis = 0;
          }
          break;

        case 12:
          if (val.selectId != -2) {
            this.dialysisPrescription.package = val.selectId;
          } else {
            this.dialysisPrescription.package = 0;
          }
          break;

        case 13:
          if (val.selectId != -2) {
            this.dialysisPrescription.a_liquid = val.selectId;
          } else {
            this.dialysisPrescription.a_liquid = 0;
          }
          break;
      }
    },
    isShow(name) {
      var filedList = this.$store.getters.user.fileds;

      for (let i = 0; i < filedList.length; i++) {
        if (
          filedList[i].module == 1 &&
          filedList[i].filed_name_cn == name &&
          filedList[i].is_show == 1
        ) {
          return true;
        }
      }
      return false;
    }
  }
};
</script>

<style style="stylesheet/scss" scoped>
.DialogContent {
  /* padding-bottom:2rem !important; */

  .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;
  }
}
</style>