GY_ceshi_web/src/views/searchSystem/components/BLSearch.vue

<template>
  <div class="dashboard-container">
    <div class="block">
      <div class="barBtn">
        <el-radio-group v-model="choice" class="bnts" size="medium">
          <el-radio-button :label="0">普通检索</el-radio-button>
          <el-radio-button :label="1">高级检索</el-radio-button>
        </el-radio-group>
      </div>
      <div class="bnh" />
      <div v-if="choice == 0" class="bnh">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="">
            <el-input
              v-model="formData0.input"
              placeholder="输入关键字搜索"
              class="input-with-select width500"
            >
              <el-button
                slot="append"
                class="bule"
                icon="el-icon-search"
                @click="funQuery(0)"
                >检索</el-button
              >
            </el-input>
          </el-form-item>
        </el-form>
        <div style="margin: 15px" />
      </div>
      <div v-else class="barBtn">
        <el-form ref="form" :model="formData1" label-width="100px">
          <el-form-item
            v-for="(item, index) in formData1.seniorList"
            :key="index"
          >
            <!-- 下拉框开始 -->
            <el-select
              v-if="index != 0"
              v-model="item.select_type"
              :class="index != 0 ? 'marginLeft' : ''"
              class="width100"
              filterable
              placeholder=""
              :disabled="item.lock"
            >
              <!-- fieldList -->
              <el-option label="且" :value="0" />
              <el-option label="或者" :value="1" />
              <el-option label="不包含" :value="2" />
            </el-select>
            <span v-if="index != 0" class="pind10" />
            <el-select
              v-model="item.key"
              class="width150"
              filterable
              placeholder="请选择"
              @change="funSelect(index)"
              :disabled="item.lock"
            >
              <!-- fieldList -->
              <el-option
                v-for="(item, index) in fieldList"
                :key="index"
                :label="item.name"
                :value="item.id"
                :disabled="item.lock"
              />
            </el-select>
            <!-- 下拉框结束 -->

            <span class="pind10" />
            <!-- 中间选择输入框开始 -->
            <span v-if="item.key == 'AAC11N'">
              <el-select
                v-model="item.value"
                class="width150"
                filterable
                placeholder="请选择"
                :disabled="item.lock"
              >
                <el-option
                  v-for="(itemo, indexo) in departmentList"
                  :key="indexo"
                  :label="itemo.name"
                  :value="itemo.name"
                />
              </el-select>
            </span>
            <span v-else>
              <el-input v-model="item.value" class="width150" :disabled="item.lock" placeholder="请输入" />
            </span>
            <!-- 中间选择输入框结束 -->

            <span class="pind10" />
            <!-- 条件下拉开始 -->
            <el-select v-model="item.type" class="width90" :disabled="item.lock" placeholder="">
              <el-option label="精确" value="1" />
              <el-option label="模糊" value="0" />
            </el-select>
            <!-- 条件下拉结束 -->

            <span class="pind10" />
            <!-- 增减重置选项按钮开始 -->
            <span>
              <el-button
                v-if="index != 0 && !item.lock"
                :disabled="formData1.seniorList.length == 1"
                type="primary"
                icon="el-icon-minus"
                @click="funDel(index)"
              />
              <el-button
                v-if="index == formData1.seniorList.length - 1"
                type="primary"
                icon="el-icon-plus"
                @click="funAdd"
              />
              <el-button v-if="index === formData1.seniorList.length - 1 && searchNum" @click="onLockResult">结果中检索</el-button>
            </span>
            <!-- 增减重置选项按钮结束 -->
          </el-form-item>
          <el-form-item label="出院时间">
            <el-date-picker
              v-model="formData1.startTime"
              type="date"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyyMMdd"
              placeholder="开始日期"
		          :picker-options="pickerOptions"
              :disabled="lock"
            />
            <span class="pind10" />
            <el-date-picker
              v-model="formData1.endTime"
              type="date"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyyMMdd"
              placeholder="结束日期"
		          :picker-options="pickerOptions"
              :disabled="lock"
            />
          </el-form-item>

          <el-form-item label="住院天数">
            <el-input-number
              v-model="formData1.AAC04_start"
              :min="1"
              :step="1"
              :controls="false"
              placeholder="起始天数"
              style="width: 220px"
              :disabled="lock"
            ></el-input-number>
            <span class="pind10" />
            <el-input-number
              v-model="formData1.AAC04_end"
              :min="1"
              :step="1"
              :controls="false"
              placeholder="终止天数"
              style="width: 220px"
              :disabled="lock"
            ></el-input-number>
          </el-form-item>

          <el-form-item label="患者年龄">
            <el-input-number
              v-model="formData1.AAA04_start"
              :min="1"
              :step="1"
              :controls="false"
              :placeholder="formData1.ageType1 ? '起始年龄' : '起始天数'"
              style="width: 220px"
              :disabled="lock"
            ></el-input-number>
            <el-select v-model="formData1.ageType1" :disabled="lock" placeholder="请选择" style="width: 80px;">
              <el-option label="年龄" :value="1"></el-option>
              <el-option label="天数" :value="0"></el-option>
            </el-select>
            <span class="pind10" />
            ——
            <span class="pind10" />
            <el-input-number
              v-model="formData1.AAA04_end"
              :min="1"
              :step="1"
              :controls="false"
              :placeholder="formData1.ageType2 ? '终止年龄' : '终止天数'"
              style="width: 220px"
              :disabled="lock"
            ></el-input-number>
            <el-select v-model="formData1.ageType2" :disabled="lock" placeholder="请选择" style="width: 80px;">
              <el-option label="年龄" :value="1"></el-option>
              <el-option label="天数" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="choice == 1" class="fBtn" style="position: relative">
        <el-button
          class="btn11"
          @click="reset"
          >重置条件</el-button
        >
        <!-- <el-select
          v-model="formData1.seniorList1"
          class="inputOn"
          style="position: absolute; right: 30px"
          placeholder="检索历史"
          @change="funSetformData2"
        /> -->
        <el-button class="btn2" @click="funQuery(1)">检索</el-button>
      </div>
      <div v-else class="fBtn" style="position: relative">
        <el-select
          v-model="formData0.input1"
          style="position: absolute; right: 30px"
          placeholder="检索历史"
          @change="funSetList()"
        >
          <el-option
            v-for="(item, index) in setList"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
      </div>
    </div>
    <div class="tableBox">
      <div
        class="flextab"
        style="margin: 0; margin-bottom: 30px; display: block"
      >
        <div class="flextabtitle-box">
          <div class="h-title">
            <span class="blue" />
            <span class="text">检索结果</span>
            <span v-if="paginationData.total != 0" class="titleName">
              找到
              <span class="title-left-span">{{ paginationData.total }}</span>
              个例条相关结果
            </span>
          </div>
          <div class="title-right" style="margin-top: -30px">
            <div
              :class="onClass == '0' ? 'title-right-data' : ''"
              @click="funOnclass('0')"
            >
              列表
            </div>
            <div
              :class="onClass == '1' ? 'title-right-data' : ''"
              @click="funOnclass('1')"
            >
              详情
            </div>
          </div>
        </div>
      </div>
      <div v-if="onClass == '0'" class="conter" style="border: none">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="index"
            :index="indexAdd"
            label="序号"
            width="70px"
          />
          <el-table-column prop="AAA28" label="住院号">
            <template slot-scope="scope">
              <span class="blue" @click="funGoto(scope.row.MED_REC_ID)">
                <template>
                  <div>
                    {{ scope.row.AAA28 }}
                  </div>
                </template>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="AAA04" label="年龄" />
          <el-table-column prop="AAC11N" label="出院科室" />
          <el-table-column prop="AAB01" label="入院时间" />
          <el-table-column prop="AAC01" label="出院时间" />
        </el-table>
        <!-- 分页控制 -->
      </div>
      <div v-for="(item, index) in tableDataDetails" :key="index">
        <div v-if="onClass == '1'" class="conter">
          <div v-for="(i, j) in item.EMR_BL_BL01" :key="j">
            <div class="conter-title">
              病历名称：
              <span v-for="(k, q) in fieldList" :key="q" class="blue">{{
                i.BLLB == k.id ? k.name : ""
              }}</span>
            </div>
            <div class="conter-case">
              <div v-html="i.HJNR" />
            </div>
          </div>
          <!-- 结账单 -->
          <div v-if="item.FeeDetailed.length">
            <el-table
              :data="item.FeeDetailed"
              stripe
              style="width: 100%">
              <el-table-column
                prop="FYMC"
                label="费用名称">
                <template slot-scope="scope">
                  <span v-html="scope.row.FYMC[0]"></span>
                </template>
              </el-table-column>
              <el-table-column
                prop="JFRQ"
                label="计费日期">
              </el-table-column>
              <el-table-column
                prop="FYSL"
                label="费用数量">
              </el-table-column>
            </el-table>
          </div>
          <!-- 医嘱本 -->
          <div v-if="item.YZB.length">
            <el-table
              :data="item.YZB"
              stripe
              style="width: 100%">
              <el-table-column
                prop="YZMC"
                label="医嘱名称">
                <template slot-scope="scope">
                  <span v-html="scope.row.YZMC[0]"></span>
                </template>
              </el-table-column>
              <el-table-column
                prop="BRKS"
                label="开嘱科室">
              </el-table-column>
              <el-table-column
                prop="KZSJ"
                label="开嘱时间">
              </el-table-column>
              <el-table-column
                prop="ZJE"
                label="医嘱期限">
              </el-table-column>
            </el-table>
          </div>

          <div class="conter-num" style="margin-top: 10px;">
            病案号：
            <span class="yeleou">{{ item.AAA28 }}</span>
          </div>
          <div class="conter-time">
            出院时间：{{ item.AAC01 }}
          </div>
        </div>
      </div>
      <el-pagination
        v-if="tableData && tableData.length !== 0"
        :total="paginationData.total"
        background
        class="table-pagination"
        style="margin: 15px 0px"
        :page-size="paginationData.pageSize"
        :current-page.sync="paginationData.currentPage"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="SizeChangeEvent"
        @current-change="pageHasChanged"
      />
    </div>
  </div>
</template>

<script>
import Title from "@/components/Title";
import { mapGetters } from "vuex";
import mPagination from "@/components/m-pagination";

export default {
  name: "Dashboard",
  components: {
    Title,
    mPagination,
  },
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now(); 
        }
      },
      checked: false,
      choice: 0,
      formData0: {
        input: "",
        input1: "",
      },
      formData1: {
        ageday: "",
        age_start_type: 2,
        age_end_type: 2,
        ageyear: "",
        endTime: undefined,
        startTime: undefined,
        seniorList: [
          {
            select_type: 0,
            key: "",
            value: "",
            type: "0",
            lock: false
          },
        ],
        seniorList1: [],
        hospitalizationon: "",
        hospitalizationin: "",
        AAC04_start: undefined,
        AAC04_end: undefined,
        AAA04_start: undefined,
        AAA04_end: undefined,
        ageType1: 1,
        ageType2: 1
      },
      tableData: [],
      tableDataDetails: [],
      paginationData: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      fieldList: [
        { name: "出院记录", id: "1" },
        { name: "入院记录", id: "292" },
        { name: "病程记录", id: "294" },
        { name: "手术记录", id: "303" },
        { name: "病历讨论记录", id: "43" },
        { name: "授权同意类", id: "329" },
        { name: "评估评分表类", id: "79" },
        { name: "死亡记录类", id: "288" },
        { name: "24小时内记录类", id: "18" },
        { name: "医患沟通类", id: "34" },
        { name: "医疗常用表格", id: "87" },
        { name: "医嘱单", id: "49" },
        { name: "出院科室", id: "AAC11N" },
        { name: "费用明细", id: "FYMC" }
      ],
      keyList: [],
      Dayoptions: [],
      multipleSelection: [],
      onClass: 0,
      setListTwe: [],
      setList: [],
      departmentList: [],
      lock: false,
      searchNum: 0
    };
  },
  mounted() {
    if (this.storageGet("inputOn")) {
      this.formData0.input = JSON.parse(this.storageGet("inputOn"));
      this.storageRemove("inputOn");
    }
    if (this.storageGet("formData1")) {
      this.formData1 = JSON.parse(this.storageGet("formData1"));
      this.storageRemove("formData1");
    }
    if (this.storageGet("choice")) {
      this.choice = Number(this.storageGet("choice"));
      this.storageRemove("choice");
    }
    if (this.storageGet("setList")) {
      this.setList = JSON.parse(this.storageGet("setList"));
    }
    this.selectInfo();
    this.funQuery(0);
  },
  created() {},
  methods: {
    onLockResult() {
      this.lock = true
      this.formData1.seniorList.map(item => {
        if (!!item.value) {
          item.lock = true
        } else {
          item.lock = false
        }
      })
      this.funAdd()
    },
    indexAdd(index) {
      return (
        index +
        1 +
        (this.paginationData.currentPage - 1) * this.paginationData.pageSize
      );
    },
    funSelect(index) {
      this.formData1.seniorList[index].value = "";
    },
    selectInfo() {
      this.$axios.post("/selectInfo").then((res) => {
        // 支付方式 pay
        this.departmentList = res.data.department;
      });
    },
    funGoto(val) {
      this.storageSet("inputOn", JSON.stringify(this.formData0.input));
      this.storageSet("formData1", JSON.stringify(this.formData1));
      this.storageSet("choice", JSON.stringify(this.choice));
      this.storageSet("getData", val);
      this.goto("/caseViews");
    },
    funCeal() {
      this.$refs.multipleTable.clearSelection();
    },
    funSetformData2() {
      this.formData1.seniorList = this.formData1.seniorList1;
    },
    funSetList() {
      this.formData0.input = String(this.formData0.input1);
    },
    funOnclass(val) {
      this.onClass = val;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    SizeChangeEvent(val) {
      this.paginationData.pageSize = val;
      const num = this.lock ? 1 : 0
      this.funQuery(num);
    },
    pageHasChanged() {
      const num = this.lock ? 1 : 0
      this.funQuery(num);
    },
    funBlur() {
      if (this.formData1.ageday > 356) {
        this.formData1.ageday = 356;
      }
      if (this.formData1.ageyear > 150) {
        this.formData1.ageyear = 150;
      }
    },
    funBluron() {
      if (
        this.formData1.hospitalizationon &&
        this.formData1.hospitalizationin
      ) {
        if (
          this.formData1.hospitalizationon > this.formData1.hospitalizationin
        ) {
          this.$message("起止住院天数输入不正确");
        }
      }
    },
    funDel(i) {
      const index = i;
      if (index == 0) {
        return;
      }
      const list = this.formData1.seniorList;
      list.splice(index, 1);
      this.formData1.seniorList = list;
    },
    funAdd() {
      this.formData1.seniorList.push({
        key: "",
        select_type: 0,
        value: "",
        type: "0",
        lock: false
      });
    },
    funQuery(num) {
      const pramse = {
        limit: this.paginationData.pageSize,
        page: this.paginationData.currentPage, // 是当前页数 默认是0 。普通检索的参数是
      };
      let queryUrl = "normalSearch";
      if (this.choice == "0") {
        queryUrl = "normalSearch";
        // 普通检索
        pramse.keyword = this.formData0.input; // 关键字

        this.$axios3.post(queryUrl, pramse).then((res) => {
          this.tableData = res.data.data.list || [];
          this.tableDataDetails = res.data.data.detail || [];
          this.paginationData.total = res.data.data.total;
          if (this.choice == "0" && this.formData0.input) {
            this.setList.push(String(this.formData0.input));
            const listSetto = Array.from(new Set(this.setList));
            this.setList = listSetto;
            this.storageSet("setList", JSON.stringify(this.setList));
          }
        });
      } else {
        queryUrl = "search";
        // 高级检索
        pramse.field = this.formData1.seniorList;
        pramse.AAC01_start = this.formData1.startTime;
        pramse.AAC01_end = this.formData1.endTime;

        pramse.AAC04_start = this.formData1.AAC04_start;
        pramse.AAC04_end = this.formData1.AAC04_end;
        this.searchNum = num
        const { ageType1, ageType2 } = this.formData1
        // ageType1 = 1 年龄
        // ageType1 = 0 天数
        if (ageType1) {
          pramse.AAA04_start = this.formData1.AAA04_start;
        } else {
          pramse.AAA40_start =  this.formData1.AAA04_start
        }
        if (ageType2) {
          pramse.AAA04_end = this.formData1.AAA04_end;
        } else {
          pramse.AAA40_end =  this.formData1.AAA04_end
        }
        
        this.$axios3.post(queryUrl, pramse).then((res) => {
          this.tableData = res.data.data.list || [];
          this.tableDataDetails = res.data.data.detail || [];
          this.paginationData.total = res.data.data.total;
          if (this.choice == "0" && this.formData0.input) {
            this.setList.push(String(this.formData0.input));
            const listSetto = Array.from(new Set(this.setList));
            this.setList = listSetto;
            this.storageSet("setList", JSON.stringify(this.setList));
          }
        });
      }
    },
    funBluron() {
      if (
        this.formData1.hospitalizationon &&
        this.formData1.hospitalizationin
      ) {
        if (
          this.formData1.hospitalizationon > this.formData1.hospitalizationin
        ) {
          this.$message("起止住院天数输入不正确");
        }
      }
    },
    reset() {
      // 重置数据
      if (this.choice == 0) {
        Object.assign(this.$data.formData0, this.$options.data().formData0);
      } else {
        this.lock = false
        this.searchNum = 0
        Object.assign(this.$data.formData1, this.$options.data().formData1);
      }
    },
  },
};
</script>
  <style scoped>
::v-deep.el-pagination.is-background .btn-next,
::v-deep.el-pagination.is-background .btn-prev,
::v-deep.el-pagination.is-background .el-pager li {
  margin: 0 5px;
  background-color: #fff;
  color: #606266;
  min-width: 30px;
  border-radius: 2px;
  border: 1px solid #dfe3f3;
  line-height: 27px;
}
::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
  background: #7e8bab;
}
::v-deep.el-table .el-table__row td {
  color: #7e8bab;
  border-bottom: 1px solid #f4f4f4;
}
::v-deep.el-table .el-table__header tr th:first-child {
  border-radius: 10px 0px 0px 10px;
}
::v-deep.el-table .el-table__header tr th:last-child {
  border-radius: 0px 10px 10px 0px;
}
::v-deep.el-table .el-table__header tr th {
  background: #f1f6ff;
  color: #13171e;
  border-bottom: 0px;
}
</style>
  <style lang="scss" scoped>
.tableBox {
  background: #fff;
  padding: 19px;
  border-radius: 5px;
  font-size: 12px;
}
.block {
  background: #fff;
  border-radius: 5px;
  margin-bottom: 16px;
  padding: 20px;
  margin-bottom: 20px;
  .fBtn {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    .btn11 {
      position: absolute;
      right: 0;
    }
    .btn2 {
      color: #185da6;
      background: #d5e4ff;
      width: 240px;
    }
  }
  .bnh {
    margin: 0 auto;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .barBtn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .selects {
    width: 100%;
  }
  .rowsa {
    margin-bottom: 20px;
  }
}
.tableBox {
  background: #fff;
  padding: 19px;
  border-radius: 5px;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.pind {
  padding: 0 20px;
}
.pind10 {
  padding: 0 5px;
}
.width100 {
  width: 100px;
}
.width150 {
  width: 200px;
}
.width300 {
  width: 295px;
}
.width500 {
  width: 420px;
}
.width90 {
  width: 90px;
}
.blue {
  color: #185da6;
}
.h-title {
  display: flex;
  .blue {
    display: block;
    width: 6px;
    height: 17px;
    background: linear-gradient(180deg, #185da6 0%, #3195ff 100%);
    border-radius: 3px;
  }
  .text {
    font-size: 16px;
    font-weight: 600;
    color: #13171e;
    margin: 0 0 0 14px;
  }
}
.flextab-item {
  display: flex;
  align-items: center;
  margin-left: 20px;
}
.flextab-item > div {
  font-size: 15px;
  margin-right: 15px;
}
.flextab-item > div span.s-1 {
  color: #185da6;
}
.flextab-item > div span.s-2 {
  font-weight: bold;
}
.inputOn {
  width: 200px;
  margin: 10px 10px;
}
.search-title {
  padding: 20px 10px;
  // width: 900px;
  display: flex;
  justify-content: space-between;
}
.search-title-span {
  font-size: 20px;
  font-weight: 600;
  color: #13171e;
}
.conter {
  position: relative;
  margin: 20px 0;
  border: 1px solid skyblue;
  padding: 20px;
  border-radius: 5px;
}
.conter-title {
  font-size: 16px;
  font-weight: 600;
  color: #13171e;
}
.blue {
  color: #185da6;
  font-size: 16px;
  font-weight: 600;
}
.conter-case {
  margin: 20px 0;
  font-size: 15px;
  text-indent: 30px;
  line-height: 30px;
}
.conter-case1 {
  margin: 0 auto;
  margin: 50px 0;
}
.yeleou {
  font-size: 16px;
  color: rgb(233, 157, 66);
}
.conter-num {
  font-size: 15px;
  font-weight: 600;
}
.conter-time {
  font-size: 15px;
  padding-top: 10px;
  font-weight: 600;
}
.onQuery {
  padding: 0 20px;
  color: rgb(233, 157, 66);
}
.cont-title {
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: space-between;
}
.title-left {
  display: flex;
}
.title-right {
  width: 300px;
  display: flex;
  float: right;
  & > div {
    width: 150px;
    border: 1px solid #d5e4ff;
    text-align: center;
    padding: 10px 0;
  }
}
.title-right-data {
  background: #3195ff;
  color: #fff;
}
.title-left-p {
  line-height: 38px;
  padding: 0 20px;
  font-size: 16px;
  color: #13171e;
}
.title-left-span {
  color: #3195ff;
  font-size: 18px;
  padding: 0 5px;
  // font-weight: 600;
}
.title-left-btn {
  margin: 0 0 0 40px;
}
.title-left-checked {
  margin-top: 10px;
}
.conter-checked {
  position: absolute;
  top: 21px;
  left: 30px;
}
.bule {
  background: #3195ff !important;
  color: #fff !important;
}
.titleName {
  margin-left: 30px;
  vertical-align: top;
}
.marginLeft {
  margin-left: -110px;
}

::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
</style>