|
@@ -1,15 +1,261 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- 123123
|
|
|
+ <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="请输入关键词" 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" />
|
|
|
+ </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'
|
|
|
+
|
|
|
export default {
|
|
|
-
|
|
|
+ components: {
|
|
|
+ Title,
|
|
|
+ InfoCard
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pickerOptions1: {
|
|
|
+ disabledDate: (time) => {
|
|
|
+ if (this.data.end_time) {
|
|
|
+ return time.getTime() > new Date(this.data.end_time).getTime()
|
|
|
+ } else {
|
|
|
+ return time.getTime() > Date.now()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ pickerOptions2: {
|
|
|
+ disabledDate: (time) => {
|
|
|
+ if (this.data.start_time) {
|
|
|
+ return time.getTime() < new Date(this.data.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 params = {
|
|
|
+ ...this.form,
|
|
|
+ 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>
|