GY_ceshi_web/src/views/outpatient/case/index.vue

<template>
  <div class="box">
    <div class="box_wrapper">
      <div class="title">门诊病历搜索</div>
      <!-- 搜索部分 -->
      <el-form ref="form" :model="form" class="search_wrapper">
        <el-form-item label="" style="textAlign: center;">
          <el-input v-model="form.keyword" placeholder="请输入关键词" clearable style="width: 480px;"></el-input>
        </el-form-item>
        <el-form-item label="患者年龄">
          <el-input-number
            v-model="form.start_nl"
            :min="1"
            :step="1"
            :controls="false"
            placeholder="起始年龄"
            style="width: 220px"
          ></el-input-number>
          <span class="pind5" />
          —
          <span class="pind5" />
          <el-input-number
            v-model="form.end_nl"
            :min="1"
            :step="1"
            :controls="false"
            placeholder="终止年龄"
            style="width: 220px"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item label="就诊时间">
          <el-date-picker
            v-model="form.start_time"
            type="date"
            :picker-options="pickerOptions1"
            placeholder="开始日期"
          />
          <span class="pind5" />
          —
          <span class="pind5" />
          <el-date-picker
            v-model="form.end_time"
            type="date"
            :picker-options="pickerOptions2"
            placeholder="结束日期"
          />
        </el-form-item>
        
        <el-form-item label="" style="text-align: center;">
          <el-button type="primary" style="width: 360px;" @click="onSearch">检索</el-button>
        </el-form-item>
      </el-form>
      <!-- 列表部分 -->
      <div class="table_wrapper">
        <div class="table_header">
          <Title :title="'检索结果'" style="float: left; margin-right: 15px;" />
          <span>例数：<span class="total"> {{ paginationData.total }} </span>例</span>
          <el-button-group style="float: right; margin-top: -15px;">
            <el-button :type="active? 'primary' : ''" @click="onTab(1)">列表</el-button>
            <el-button :type="!active? 'primary' : ''" @click="onTab(0)">详情</el-button>
          </el-button-group>
        </div>
        <div class="table_box">
          <el-table
            v-if="active"
            :data="tableData"
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="80"
              align="center">
            </el-table-column>
            <el-table-column
              prop="mzh"
              label="门诊号">
            </el-table-column>
            <el-table-column
              prop="nl"
              label="年龄">
            </el-table-column>
            <el-table-column
              prop="xb"
              label="性别">
            </el-table-column>
            <el-table-column
              prop="ks"
              label="科室">
            </el-table-column>
            <el-table-column
              prop="CJSJ"
              label="就诊时间">
            </el-table-column>
          </el-table>
          <div v-if="!active">
            <InfoCard v-for="(item, index) of infoData" :key="index" :item="item" />
            <el-empty v-if="!infoData.length" description="暂无数据"></el-empty>
          </div>
          <!-- 分页 -->
          <el-pagination
              v-if="tableData && tableData.length !== 0"
              @size-change="SizeChangeEvent"
              @current-change="pageHasChanged"
              :total="paginationData.total"
              background
              class="table-pagination"
              style="margin: 30px 0 ; float: right;"
              :page-size="paginationData.pageSize"
              :current-page.sync="paginationData.currentPage"
              layout="total, sizes, prev, pager, next, jumper"
            >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from '@/components/Title';
import InfoCard from './components/InfoCard'
import { dateFormat } from '@/utils/index'

  export default {
    components: {
      Title,
      InfoCard
    },
    data() {
      return {
        pickerOptions1: {
          disabledDate: (time) => {
            if (this.form.end_time) {
              return time.getTime() > new Date(this.form.end_time).getTime()
            } else {
              return time.getTime() > Date.now()
            }
          }
        },
        pickerOptions2: {
          disabledDate: (time) => {
            if (this.form.start_time) {
              return time.getTime() < new Date(this.form.start_time).getTime()
            } else {
              return time.getTime() > Date.now()
            }
          }
        },
        form: {
          keyword: '',
          start_nl: undefined,
          end_nl: undefined,
          start_time: '',
          end_time: ''
        },
        // 1:列表 0：详情
        active: 1,
        tableData: [],
        infoData: [],
        paginationData: {
          total: 0,
          currentPage: 1,
          pageSize: 10,
        },
      }
    },
    created() {
      this.getList()
    },
    methods: {
      // 获取列表
      getList() {
        const { currentPage, pageSize } = this.paginationData
        const { start_nl, end_nl, start_time, end_time, keyword } = this.form
        const params = {
          keyword,
          start_nl,
          end_nl,
          start_time: start_time ? dateFormat(start_time, 'YYYYMMDD') : '',
          end_time: end_time ? dateFormat(end_time, 'YYYYMMDD') : '',
          page: currentPage,
          page_size: pageSize
        }
        
        this.$axios.post('/get_omr_bl01_list', params).then(res => {
          this.tableData = res.data.data.list
          this.infoData  = res.data.data.detail
          this.paginationData.total = res.data.data.total
        })
      },
      // 列表 详情
      onTab(index) {
        this.active = index
      },
      // 分页
      SizeChangeEvent(val) {
        this.paginationData.pageSize = val;
        this.getList();
      },
      pageHasChanged() {
        this.getList();
      },
      // 搜索
      onSearch() {
        this.paginationData.currentPage = 1;
        this.getList();
      }
    }
  }
</script>

<style lang="scss" scoped>
.pind5 {
  padding: 0 5px;
}
.box {
  padding: 16px;
  .box_wrapper {
    padding: 16px;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    .title {
      font-size: 24px;
      text-align: center;
      font-weight: 600;
      padding-top: 40px;
      padding-bottom: 20px;
    }
  }
  .search_wrapper {
    width: 616px;
    margin: 0 auto 30px;
  }
  .table_wrapper {
    .table_header {
      padding-top: 15px;
      overflow: hidden;
      .total {
        color: #F56C6C;
      }
      span {
        font-weight: 600;
        padding-top: 2px;
      }
    }
  }
}
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
::v-deep.el-table .el-table__header tr th {
  background: #f1f6ff;
  color: #13171e;
  border-bottom: 0px;
}
::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: 5px 0px 0px 5px;
}
::v-deep.el-table .el-table__header tr th:nth-child(3) {
  border-radius: 0px 5px 5px 0px;
}
</style>