xiangan_pc/src/page-subspecialty/views/modules/outpatientManagement/treat/index.vue

<template>
  <!-- 门诊治疗 -->
  <div class="patient-info">
    <div v-if="!detailViewVisible" style="height: 100%">
      <div class="patient-info-head">
        <el-form :inline="true" :model="dataForm" class="demo-form-inline" @keyup.enter.native="getDataListInitial()">
          <el-form-item label="登记号:">
            <el-input v-model="dataForm.patientId" size="small" clearable placeholder="登记号" @clear="getDataListInitial()" />
          </el-form-item>
          <el-form-item label="患者姓名:">
            <el-input v-model="dataForm.patientName" placeholder="患者姓名" size="small" clearable @clear="getDataListInitial()" />
          </el-form-item>
          <el-form-item label="身份证:">
            <el-input v-model="dataForm.patientIdNumber" size="small" clearable placeholder="身份证" @clear="getDataListInitial()" />
          </el-form-item>
          <el-form-item prop="dateRange" label="就诊时间" class="form-item-date">
            <el-date-picker
              v-model="nextVisitTime"
              size="small"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="dateChange"
            />
          </el-form-item>
          <el-form-item style="flex:1">
            <el-button type="primary" icon="el-icon-getDataListInitial" size="small" @click="getDataListInitial()">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="display: flex;justify-content: space-between;background-color: white;padding: 16px 16px 0">
        <div>
          <el-select v-model="dataForm.searchType" placeholder="请选择" style="width:120px;float: left;margin-right: 16px" size="small" @change="getDataListInitial">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button v-for="(item,index) in typeList" :key="index" style="margin-left: 0px" size="small" color="white" @click="handleType(item.value)">{{ item.label }}</el-button>
        </div>
        <div>
          <el-button type="primary" size="small" icon="el-icon-plus" @click="addOrUpdateHandle('','','新增患者')">新增</el-button>
          <el-button type="primary" size="small" @click="HISHandle">
            <svg-icon icon-class="icon-HIS-up" style="font-size:12px;" />
            <span style="padding-left:5px;vertical-align: middle;">HIS引入</span>
          </el-button>
        </div>
      </div>
      <div class="patient-info-content">
        <el-table
          ref="multipleTable"
          :data="dataList"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column prop="patientId" label="登记号" header-align="center" align="center" />
<!--          <el-table-column prop="patientId" label="就诊号" header-align="center" align="center" />-->
          <el-table-column label="状态" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.patientStatus | patientStatus }}
            </template>
          </el-table-column>
          <el-table-column prop="patientName" label="患者姓名" header-align="center" align="center" />
          <el-table-column label="出生日期" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.patientBirthday ? $options.filters.dateFilterTwo( scope.row.patientBirthday): '- ' }}
            </template>
          </el-table-column>
          <el-table-column prop="mzDoctorName" label="门诊医师" header-align="center" align="center" />
          <el-table-column prop="zlPorject" label="治疗项目" header-align="center" align="center" />
          <el-table-column prop="zlEye" label="眼别" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.zlEye === 'os' ? '左眼' : ( scope.row.zlEye === 'od' ? '右眼' : '') }}
            </template>
          </el-table-column>
          <el-table-column prop="patientSex" label="治疗医师" header-align="center" align="center" />
          <el-table-column prop="createDate" label="就诊时间" header-align="center" align="center" />
<!--          <el-table-column prop="callSort" label="分诊序号" header-align="center" align="center" />-->
          <!--          <el-table-column prop="patientSex" label="叫号状态" header-align="center" align="center">-->
          <!--            <template slot-scope="scope">-->
          <!--              {{ scope.row.callStatus | callStatus }}-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column prop="operation" label="操作" header-align="center" align="center" width="180">
            <template slot-scope="scope">
              <span
                style="color: #1890ff; padding-right: 8px"
                class="operation-details"
                @click="showDetail(scope.row, 1)"
              >开始</span>
              <span
                style="color: #1890ff; padding-right: 8px"
                class="operation-details"
                @click="showDetail(scope.row, 1)"
              >结束</span>
              <span
                style="color: #1890ff; padding-right: 8px"
                class="operation-details"
                @click="showDetail(scope.row, 2)"
              >患者360</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background layout="total,prev, pager, next" :total="total" :current-page.sync="page" @current-change="pageCurrentChangeHandle" />
      </div>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" :patient-type-list="patientTypeList" @refreshDataList="getDataListInitial" />
    <!-- HIS引入弹框 -->
    <his-add v-if="HisAddVisible" ref="HisAddRef" :is-search="'2'" />
    <!-- 详情页 -->
    <detail-view v-if="detailViewVisible" :only-read="onlyRead" :id="detailId" ref="viewRef" :is-search="'2'" :patient-id="patientId" :patient-id-number="patientIdNumber" @detailViewVisible="detailViewVisible=false" />
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import tableAutoHeight from '@/mixins/tableAutoHeight'
import AddOrUpdate from './patient-add-or-update'
import hisAdd from './HIS-add'
import detailView from '@/components/360View/index1' // 360试图
export default {
  components: {
    hisAdd,
    AddOrUpdate,
    detailView
  },
  filters: {
    callStatus(val) {
      switch (val) {
        case '1':
          return '未叫号'
          break
        case '2':
          return '已叫号'
          break
        case '3':
          return '过号'
          break
        case '4':
          return '呼叫中'
          break
        default:
          return val
      }
    },
    patientStatus(val) {
      switch (val) {
        case '1':
          return '未报到'
          break
        case '2':
          return '未诊断'
          break
        case '3':
          return '就诊中'
          break
        case '4':
          return '回诊'
          break
        case '5':
          return '已诊'
          break
        default:
          return val
      }
    }
  },
  mixins: [mixinViewModule, tableAutoHeight],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/patient/page',
        getDataListIsPage: true
      },
      options: [
        {
          value: '0',
          label: '今日'
        }, {
          value: '1',
          label: '近三天'
        }, {
          value: '2',
          label: '近一周'
        }, {
          value: '3',
          label: '近一个月 '
        }, {
          value: '',
          label: '全部'
        }],
      typeList: [
        {
          value: '',
          label: '全部'
        }, {
          value: '1',
          label: '未报到'
        }, {
          value: '2',
          label: '未诊'
        }, {
          value: '4',
          label: '回诊 '
        }, {
          value: '3',
          label: '就诊中'
        }, {
          value: '已诊',
          label: '已诊'
        }],
      nextVisitTime: [],
      patientTypeList: [],
      onlyRead: false,
      detailViewVisible: false,
      HisAddVisible: false,
      dataForm: {
        platform: 2,
        patientId: '',
        beginDate: '',
        endDate: '',
        searchType: '',
        patientName: '',
        patientStatus: '',
        patientIdNumber: ''
      },
      doctorNameList: [],
      currentTableList: [],
      time: '',
      patientId: '',
      patientIdNumber: '',
      detailId: ''
    }
  },
  watch: {
    $route(val) {
      // 如果两级以上就隐藏父级
      this.isShowPatient = !(val.matched.length > 2)
    }
  },
  created() {
    this.isShowPatient = !(this.$route.matched.length > 2)
    // this.getDoctorName()
    // this.gettPatType()
  },
  methods: {
    // 浏览
    browseClick(scopeRow) {
      window.sessionStorage.removeItem('itemCurrentIndex')
      window.sessionStorage.removeItem('itemListIndex')
      this.$router.push({
        path: '/seeDoctor',
        query: {
          info: this.$Base64.encode(JSON.stringify({
            patientIdNumber: scopeRow.patientIdNumber,
            patientCentreId: scopeRow.patientCentreId,
            title: '门诊'
            // crfId: scopeRow.crfId,
            // patientId: scopeRow.patientId
          }))
        }
      })
    },
    // 日期改变时
    dateChange(e) {
      this.dataForm.beginDate = e ? e[0] : ''
      this.dataForm.endDate = e ? e[1] : ''
      this.getDataListInitial()
    },
    // 根据就诊状态查询
    handleType(value) {
      this.dataForm.patientStatus = value
      this.getDataListInitial()
    },
    // 查看详情
    showDetail(scopeRow, index) {
      this.onlyRead = index !== 1
      this.detailViewVisible = true
      this.patientId = scopeRow.patientId
      this.patientIdNumber = scopeRow.patientIdNumber
      this.patientId = '797064'
      this.$nextTick(() => {
        // // 根据id获取患者信息--中间上侧患者信息
        this.$refs.viewRef.getPatientData()
        // // 获取时间轴数据--左侧时间轴
        this.$refs.viewRef.getTimeAxisData()
      })
    },
    // His引入
    HISHandle() {
      this.HisAddVisible = true
      this.$nextTick(() => {
        this.$refs.HisAddRef.init()
      })
    },
    // 获取管理师
    async getDoctorName() {
      const { data: res } = await this.$http.get('/pat/Manage/selectDoctorName', {
        params: {
          drgsName: window.localStorage.getItem('identity')
        }
      })
      if (res.code === 0) {
        this.doctorNameList = res.data
      } else {
        this.$message.error(res.msg)
      }
    }

  }
}
</script>
<style lang="scss" scoped>
.patient-info {
  height: 100%;
  .patient-info-head,
  .patient-info-content {
    background: #fff;
    .head {
      padding-bottom: 10px;
    }
  }
  .patient-info-content {
    width: 100%;
    padding: 10px 16px;
    box-sizing: border-box;
  }
  .patient-info-head {
    margin-bottom: 10px;
    padding: 10px 16px;
  }
  .operation-delete,
  .operation-details {
    cursor: pointer;
  }
}
</style>
<style lang="scss">
.patient-info {
  .patient-info-head {
    .el-form {
      display: flex;
      justify-content: space-between;
    }
    .el-form-item {
      display: flex;
    }
    .el-form-item__label {
      min-width: 75px;
    }
    .el-form-item {
      margin-bottom: 0;
      width: 25%;
    }
    .el-form-item__content,
    .el-select,
    .el-range-editor--small.el-input__inner {
      width: 100%;
    }
    .form-item-date .el-form-item__content {
        min-width: 180px;
      }
  }
  .el-select {
    width: 100%;
  }
}
</style>