diagnosis.admin/src/views/diagnosis/Dialectical.vue

<template>
  <div class="dialectical flex-plane-center-top">
    <div class="dialectical-left">
      <!-- 头部 -->
      <header class="flex-vertical-center-l">
        <div class="screening flex-vertical-center-l">
          <div class="screening-title flex-vertical-center-l">
            <img src="~@/assets/filters.png" alt />
          </div>
          <div class="screening-item flex flex-col-center">
            <span>科室分类：</span>
            <div class="input">
              <!-- <el-select size="mini" v-model="type" placeholder="请选择" @change="classifyC">
                                <el-option :label="item.classname" :value="item.classid"
                                    v-for="(item,index) in classify" :key="index"></el-option>

              </el-select>-->
              <!-- <el-cascader size="mini" placeholder="请选择" :options="classify" :props="props" filterable>
              </el-cascader>-->
              <Cascader :list="classify" @change="classifyC"></Cascader>
            </div>
          </div>
          <div class="screening-item flex flex-col-center">
            <span>病症查询：</span>
            <div class="input">
              <el-select size="mini" filterable remote :filter-method="filterMethod" v-model="bingzheng"
                placeholder="请选择" @change="getSymptomsPain(1,'',bingzheng)">
                <el-option :label="item.groupname" :value="item.groupname" v-for="(item,index) in bingzhengS"
                  :key="index"></el-option>
                <!-- <el-option label="发烧" value="fs"></el-option> -->
              </el-select>
            </div>
          </div>
          <div class="screening-item flex flex-col-center" v-if="key2">
            <span>中医病名：</span>
            <div class="input">
              <el-input readonly size="mini" v-model="key2"></el-input>
            </div>
          </div>
        </div>

        <!-- <div class="screening flex-vertical-center-l">
                    <span>科室选择：</span>
                    <div class="screening_select">
                        <el-select v-model="keshi" placeholder="请选择">
                            <el-option label="内科" value="nk"></el-option>
                            <el-option label="外科" value="wk"></el-option>
                        </el-select>
                    </div>
        </div>-->
      </header>
      <!-- 底部 -->
      <section class="section">
        <div class="section-item" v-for="(item,index) in showBZdata" :key="index">
          <div class="department flex flex-row-left flex-col-center">
            <img src="~@/assets/znbz-add.png" alt />
            <span>{{item.parent_NAME}}</span>
          </div>

          <div class="department-item flex flex-row-left flex-col-top" v-for="(item1,index1) in item.classifyVoNewList"
            :key="index1">
            <div class="d-i-name">{{item1.classifyname}}</div>
            <div class="d-i-dis flex flex-col-top flex-row-left flex-wrap">
              <div class="dis-item" v-for="(item2,index2) in item1.group" :key="index2"
                @click="toQuestion(item2.groupid)">{{item2.groupname}}</div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <div class="dialectical-right">
      <div class="title flex-vertical-center-l">
        <!-- <span></span> -->
        <img src="~@/assets/znbz-add.png" alt />
        <div>我最常用</div>
      </div>
      <div class="list flex-vertical-between flex-wrap">
        <div class="item flex-center" @click="toQuestion(item.groupid)" v-for="(item,index) in oftenList" :key="index">
          {{item.groupname}}</div>
      </div>
      <div class="title flex-vertical-center-l">
        <!-- <span></span> -->
        <img src="~@/assets/znbz-add.png" alt />
        <div>常见病</div>
      </div>
      <div class="list flex-vertical-between flex-wrap">
        <div class="item flex-center" @click="toQuestion(item.groupid)" v-for="(item,index) in commonList" :key="index">
          {{item.groupname}}</div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    getDialecticalC,
    getSymptoms,
    getSymptomsPain
  } from "@/api/knowledge.js";
  import {
    getMyOfenUse,
    znQusetionShow
  } from "@/api/diagnosis.js";
  import Cascader from "@/components/ui/Cascader.vue";
  import IndexBar from "@/components/IndexBar.vue";
  import {
    mapGetters
  } from "vuex";
  import {addRecipeFrom} from '@/api/dataAnalysis';
  import {tryRun} from '@/tool';
  export default {
    components: {
      IndexBar,
      Cascader
    },
    data() {
      return {
        current: 0,
        type: "",
        bingzheng: "",
        keshi: "",
        classify: [],
        bingzhengS: [], // 选择器 病症查询\
        showBZdata: [],
        key: "",
        commonList: [],
        oftenList: [],
        total: 0,
        page: 1,
        key2: ""
      };
    },

    created() {
      this.getDialecticalC();
      this.getSymptoms(1);
      this.getSymptomsPain(1, "1", "");

      this.getCommonDis();
      this.getMyOfenUse();
    },
    beforeRouteEnter(to, from, next) {
      addRecipeFrom({ type: 0 }).catch()
      if (from.fullPath.indexOf("/index/dialecticalq") != -1) {
        next();
      } else {
        next(vm => {
          if (vm.$route.query.name) {
            vm.key2 = vm.$route.query.name;
            vm.getSymptoms1(1, "", vm.key2);
          } else {
            vm.key2 = "";
            vm._znQusetionShow();
          }
        });
      }
    },
    methods: {
      filterMethod(e) {
        let pinyin = /^[A-Za-z]+$/g;
        if (pinyin.test(e)) {
          this.getSymptoms(1, "1", e);
        } else {
          this.getSymptoms(1, "", e);
        }
      },
      // 分类选择框改变
      classifyC(e) {
        this.bingzheng = "";
        this.type = e.secondItem.classifyid ?
          e.secondItem.classifyid :
          e.firstItem.classid;
        this.bingzhengS = [];
        this.showBZdata = [];
        this.getSymptoms(1);
        this.getSymptomsPain(1, "1", this.key);
        this.current = 0;
      },
      toQuestion(id = "", type = "1") {
        const name = tryRun(() => this.bingzhengS.find(item => item.groupid === id).groupname);
        if (this.key2) {
          this.$router.push({
            path: `/index/dialecticalq`,
            query: {id, name, type: 3}
          });
        } else {
          this.$router.push({
            path: `/index/dialecticalq`,
            query: {id, name, type}
          });
        }

      },
      inBarc(e) {
        // console.log('e:', e)
        this.current = e.index;
        this.getSymptomsPain(1, "1", e.text);
        this.key = e.text;
      },
      // 分页面 切换
      pageChange(e) {
        // console.log(e, 'e');
        this.getSymptomsPain(e, "1", this.key);
      },

      //获取 分类
      async getDialecticalC() {
        let res = await getDialecticalC();
        if (res.code === 0) {
          // res.Data.forEach((item, index) => {
          //     item.classifys.forEach((item1, index1) => {
          //         this.classify.push(item1)
          //     })
          // })
          this.classify = res.data;
        }
      },
      // 获取症状
      async getSymptoms(type, serchtype = "", key = "") {
        let params = {
          classifyid: this.type,
          serchtype: serchtype,
          keyword: key
        };
        let res = await getSymptoms(params);
        if (res.ResultCode == 0) {
          if (type == 1) {
            this.bingzhengS = [];
            res.Data.forEach(item => {
              item.classifyVoNewList.forEach(item1 => {
                item1.group.forEach(item2 => {
                  this.bingzhengS.push(item2);
                });
              });
            });
          }
        }
      },
      // 获取症状 通过路由携带参数跳转页面
      async getSymptoms1(type, serchtype = "", key = "") {
        let params = {
          classifyid: this.type,
          serchtype: serchtype,
          keyword: key
        };
        let res = await getSymptoms(params);
        if (res.ResultCode == 0) {
          if (type == 1) {
            if (this.key2) {
              if (res.Data.length > 0) {
                this.toQuestion(
                  res.Data[0].classifyVoNewList[0].group[0].groupid,
                  3
                );
              }
            }
          }
        }
      },
      async getSymptomsPain(page, serchtype = "", key = "") {
        const loading = this.$loading({
          lock: true,
          text: "正在查询,请稍等",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)"
        });
        let params = {
          classifyid: this.type,
          serchtype: serchtype,
          keyword: key
          // limit: 15,
          // page: page
        };
        let res = await getSymptomsPain(params).catch(err => {
          loading.close();
        });
        if (res.ResultCode == 0) {
          this.showBZdata = [];
          this.total = res.Data.TotalRecordCount;
          // res.Data.Items.forEach(item => {
          //     item.group.forEach(item1 => {
          //         this.showBZdata.push(item1)
          //     })
          // })
          loading.close();

          this.showBZdata = res.Data.Items;
        }
      },
      // 获取右侧常见病
      async getCommonDis() {
        let res = await getSymptoms({
          usual: "Y"
        });
        if (res.ResultCode == 0) {
          this.commonList = [];
          res.Data.forEach(item => {
            item.classifyVoNewList.forEach(item1 => {
              item1.group.forEach(item2 => {
                this.commonList.push(item2);
              });
            });
          });
        }
      },
      async getMyOfenUse() {
        let res = await getMyOfenUse();
        if (res.ResultCode == 0) {
          this.oftenList = res.Data;
        }
      },
      // 获取回显数据
      async _znQusetionShow(next) {
        let res = await znQusetionShow({
          recordId: this.getPatiensInfo.pid
        }).catch(errr => {});
        if (res.ResultCode == 0) {
          if (res.Data.groupids) {
            this.toQuestion(res.Data.groupids, 2);
          }
        }
      }
    },
    computed: {
      ...mapGetters(["getPatiensInfo"])
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../style/common.scss";
  @import "../../style/base.scss";

  .dialectical-right {
    width: 230px;
    box-sizing: border-box;
    padding: 10px 10px;
    background: #ffffff;
    border-radius: 5px;
    margin-left: 10px;
    min-height: 470px;
    height: 82vh;
    overflow: auto;

    .title {
      img {
        width: 26px;
      }

      div {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #5386f6;
        margin-left: 10px;
      }
    }

    .list {
      margin-top: 10px;

      .item {
        width: 90px;
        border: 1px solid #5386f6;
        box-sizing: border-box;
        height: 30px;
        // background: #F5F5F5;
        border-radius: 5px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
        cursor: pointer;
        margin-bottom: 5px;
      }
    }

    .title:last-child {
      margin-top: 10px;
    }
  }

  .dialectical-left {
    flex: 1;
    overflow: hidden;
    height: 82vh;

    header {
      padding: 5px 5px;
      background: #ffffff;
      border-radius: 5px;
      margin-bottom: 10px;
      width: 100%;
      box-sizing: border-box;
    }

    section {
      padding: 5px 10px;
      background: #ffffff;
      border-radius: 5px;
      width: 100%;
      box-sizing: border-box;
      // display: flex;
      // align-items: flex-start;
      // justify-content: flex-start;
      overflow-y: auto;
      min-height: 410px;
      height: 93%;

      .section-item {
        margin-bottom: 10px;
      }

      .department {
        img {
          width: 26px;
        }

        span {
          font-size: 16px;
          color: #000;
          margin-left: 10px;
        }
      }

      .department-item {
        margin-top: 5px;

        .d-i-name {
          width: 50px;
          // text-align: right;
          margin-left: 36px;
          font-size: 16px;
          color: #000;
          margin-right: 10px;
        }

        .d-i-dis {
          flex: 1;
        }

        .dis-item {
          padding: 5px 10px;
          border-radius: 5px;
          border: 1px solid #5386f6;
          margin-right: 10px;
          margin-bottom: 10px;
          font-size: 14px;
          cursor: pointer;
        }
      }
    }
  }

  .screening_select::v-deep .el-select {
    width: 100%;
  }
</style>
<style lang="scss" scoped>
  @media screen and(min-width: 1681px) and(max-width: 1920px) {

    .dialectical-right,
    .dialectical-left {
      height: 88vh;
    }
  }

  @media screen and(min-width: 1601px) and(max-width: 1680px) {

    .dialectical-right,
    .dialectical-left {
      height: 88vh;
    }
  }

  @media screen and(min-width: 1440px) and(max-width: 1600px) {

    .dialectical-right,
    .dialectical-left {
      height: 86vh;
    }
  }

  @media screen and(min-width: 1360px) and(max-width: 1439px) {

    .dialectical-right,
    .dialectical-left {
      height: 83vh;
    }
  }
</style>