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

<template>
<!-- 同views/query/adviceSearch 一致 -->
  <div class="dashboard-container">
    <div class="block">
      <div class="barBtn-title">医嘱查询</div>
      <div class="bnh"></div>
      <div class="barBtn">
        <el-form ref="form" :model="formData" label-width="100px">
          <el-form-item v-for="(item, index) in formData.seniorList" :key="index">
            <!-- 下拉框开始 -->
            <el-select class="width150" filterable v-model="item.key" placeholder="请选择" @change="funSelect(index)">
              <el-option v-for="(item, index) in fieldList" :label="item.name" :value="item.id" :key="index"></el-option>
            </el-select>
            <!-- 下拉框结束 -->
            <span class="pind10"></span>
            <span v-if="item.key == 'YZQX'">
              <el-select class="width150" filterable v-model="item.value" placeholder="请选择">
                <el-option v-for="(item, index) in YZQXList" :key="index" :label="item.val" :value="item.id"></el-option>
              </el-select>
            </span>
            <span v-else-if="item.key == 'KZKS'">
              <el-select class="width150" filterable v-model="item.value" placeholder="请选择">
                <el-option v-for="(item, index) in KZKSList" :key="index" :label="item.val" :value="item.id"></el-option>
              </el-select>
            </span>
            <span v-else-if="item.key == 'BRKS'">
              <el-select class="width150" filterable v-model="item.value" placeholder="请选择">
                <el-option v-for="(item, index) in BRKSList" :key="index" :label="item.val" :value="item.id"></el-option>
              </el-select>
            </span>
            <span v-else>
              <el-input class="width150" v-model="item.value" placeholder=""></el-input>
            </span>
            <!-- 中间选择输入框结束 -->
            <span class="pind10"></span>
            <span class="pind10"></span>
            <!-- 增减重置选项按钮开始 -->
            <span>
              <el-button :disabled="formData.seniorList.length == 1" v-if="index != 0" type="primary" icon="el-icon-minus" @click="funDel(index)"></el-button>
              <el-button type="primary" icon="el-icon-plus" @click="funAdd" v-if="index == formData.seniorList.length - 1"></el-button>
            </span>
            <!-- 增减重置选项按钮结束 -->
          </el-form-item>
          <el-form-item label="开嘱时间">
            <el-date-picker v-model="formData.startTime" type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyyMMdd" placeholder="开始日期"></el-date-picker>
            <span class="pind10"></span>
            <el-date-picker v-model="formData.endTime" type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyyMMdd" placeholder="结束日期"></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div class="fBtn" style="position: relative">
        <el-button class="btn1" style="position: absolute; right: 270px" @click="reset">重置条件</el-button>
        <el-button class="btn2" @click="seachFunQuery">检索</el-button>
      </div>
    </div>
    <div class="tableBox">
      <div class="flextab" style="margin: 0; margin-bottom: 15px">
        <div class="flextabtitle-box">
          <div class="h-title">
            <span class="blue"></span>
            <span class="text">病案医嘱列表</span>
            <span class="titleName" v-if="paginationData.total != 0">
              例数:
              <span class="title-left-span">{{ paginationData.total }}</span>
              例
            </span>
          </div>
          <el-button class="title-left-btn" @click="funExport()">导出Excel</el-button>
        </div>
      </div>

      <div 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>
          <el-table-column prop="AAA28" label="病案号">
            <template slot-scope="scope">
              <span class="blue" @click="funGoto(scope.row.ZYH)">
                <template>
                  <div>
                    {{ scope.row.AAA28 }}
                  </div>
                </template>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="AAB01" label="入院时间"></el-table-column>
          <el-table-column prop="YZMC" label="医嘱名称"></el-table-column>
          <el-table-column prop="YCJL" label="剂量"></el-table-column>
          <el-table-column prop="SYPC" label="用法"></el-table-column>
          <el-table-column prop="BRKS" label="病人科室"></el-table-column>
          <el-table-column prop="KZKS" label="开嘱科室"></el-table-column>
          <el-table-column prop="YZQX" label="医嘱期效"></el-table-column>
          <el-table-column prop="AAC01" label="出院时间"></el-table-column>
        </el-table>
        <!-- 分页控制 -->
      </div>
      <el-pagination
        v-if="tableData && tableData.length !== 0"
        @size-change="SizeChangeEvent"
        @current-change="pageHasChanged"
        :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"
      ></el-pagination>
    </div>
  </div>
</template>

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

export default {
  name: 'adviceSearch',
  components: {
    Title,
    mPagination,
  },
  computed: {
    ...mapGetters(['name']),
  },
  data() {
    return {
      choice: 0,
      formData: {
        endTime: '',
        startTime: '',
        seniorList: [
          {
            key: '',
            value: '',
            type: '0',
          },
        ],
      },
      tableData: [],
      paginationData: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
      },
      fieldList: [],
      multipleSelection: [],
      setList: [],
      YZQXList: [], //医嘱起效列表
      KZKSList: [], //开嘱科室列表
      BRKSList: [], //病人列表
    };
  },
  mounted() {
    this.funQuery();
  },
  created() {
    this.searchCondition();
  },
  methods: {
    funGoto(val) {
      this.storageSet('getData', val);
      this.$router.push({ path: '/caseViews', query: { status: 1} })
    },
    indexAdd(index) {
      return index + 1 + (this.paginationData.currentPage - 1) * this.paginationData.pageSize;
    },
    funSelect(index) {
      this.formData.seniorList[index].value = '';
    },

    funSetList() {},

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    SizeChangeEvent(val) {
      this.paginationData.pageSize = val;
      this.funQuery();
    },
    pageHasChanged() {
      this.funQuery();
    },
    seachFunQuery() {
      this.paginationData.currentPage = 1;
      this.funQuery();
    },
    funDel(i) {
      let index = i;
      if (index == 0) {
        return;
      }
      let list = this.formData.seniorList;
      list.splice(index, 1);
      this.formData.seniorList = list;
    },
    funAdd() {
      this.formData.seniorList.push({
        key: '',
        value: '',
        type: '0',
      });
    },
    funQuery() {
      let pramse = {
        limit: this.paginationData.pageSize,
        page: this.paginationData.currentPage, //是当前页数 默认是0 。普通检索的参数是
      };
      this.formData.seniorList.forEach(item => {
        if (item.key == 'AAA28') {
          pramse.AAA28 = item.value;
        }
        if (item.key == 'YZQX') {
          pramse.YZQX = item.value;
        }
        if (item.key == 'BRKS') {
          pramse.BRKS = item.value;
        }
        if (item.key == 'KZKS') {
          pramse.KZKS = item.value;
        }
        if (item.key == 'YZMC') {
          pramse.YZMC = item.value;
        }
      });

      pramse.start = this.formData.startTime;
      pramse.end = this.formData.endTime;

      this.$axios.post('/getDoctorAdvice', pramse).then(res => {
        this.tableData = res.data.list || [];
        this.paginationData.total = res.data.total;
      });
    },

    reset() {
      // 重置数据
      this.paginationData.currentPage = 1;
      Object.assign(this.$data.formData, this.$options.data().formData);
      this.funQuery();
    },
    searchCondition() {
      this.$axios.post('/doctorAdviceSelect').then(res => {
        res.data.forEach((item, index) => {
          item.id = item.key;
          if (item.key == 'YZQX') {
            let YZQXArr = Object.keys(item.value);
            YZQXArr.forEach((jitem, index) => {
              this.YZQXList.push({ id: jitem, val: item.value[jitem] });
            });
          }
          if (item.key == 'KZKS') {
            let KZKSArr = Object.keys(item.value);
            KZKSArr.forEach((jitem, index) => {
              this.KZKSList.push({ id: jitem, val: item.value[jitem] });
            });
          }
          if (item.key == 'BRKS') {
            let BRKSArr = Object.keys(item.value);
            BRKSArr.forEach((jitem, index) => {
              this.BRKSList.push({ id: jitem, val: item.value[jitem] });
            });
          }
        });
        this.fieldList = res.data;
      });
    },

    funExport() {
      //查询
      let pramse = {
        limit: this.paginationData.pageSize,
        page: this.paginationData.currentPage, //是当前页数 默认是0 。普通检索的参数是
      };
      this.formData.seniorList.forEach(item => {
        if (item.key == 'AAA28') {
          pramse.AAA28 = item.value;
        }
        if (item.key == 'YZQX') {
          pramse.YZQX = item.value;
        }
        if (item.key == 'BRKS') {
          pramse.BRKS = item.value;
        }
        if (item.key == 'KZKS') {
          pramse.KZKS = item.value;
        }
        if (item.key == 'YZMC') {
          pramse.YZMC = item.value;
        }
      });
      pramse.start = this.formData.startTime;
      pramse.end = this.formData.endTime;

      let fileName = '医嘱列表';
      let httpUrl = '/doctorAdviceExport';

      this.funExeclPost(fileName, pramse, httpUrl, 'xlsx');
    },
    funExeclPost(fileName, pramse, httpUrl, format) {
      //导出
      let httpUrls = '/api' + httpUrl;
      downloadFile(httpUrls, pramse, format, fileName).then(res => {
        console.error('111', res);
      });
    },
  },
};
</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 30px;
  margin-bottom: 20px;
  .fBtn {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    .btn1 {
      background: #185da6;
      color: #fff;
    }
    .btn2 {
      width: 200px;
      color: #185da6;
      background: #d5e4ff;
    }
  }
  .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;
  }
  .barBtn-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px;
  }
  .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;
  }
}
.flextabtitle-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.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;
}
.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;
  padding-top: 30px;
  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;
  & > 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;
  background: #185da6;
  color: #fff;
}
.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;
  // margin-top:3px;
}
.marginLeft {
  margin-left: -110px;
}
</style>