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 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 prop="dateRange" label="预约时间" class="form-item-date">
            <el-date-picker
              v-model="appointRange"
              size="small"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="appointChange"
            />
          </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 style="display: flex;align-items: center">
          <el-select v-model="dataForm.searchType" 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" :class="[curIndex === index ? 'active' : '']" style="margin-left: 0px" size="small" color="white" @click="handleType(item.value, index)">{{ item.label }}</el-button>
          <div style="margin-left: 16px; display: flex;align-items: center">
            <span style="flex: 1">项目名称：</span>
            <el-select v-model="dataForm.projectCode" style="width:220px" placeholder="项目名称" size="small" @change="getDataListInitial">
              <el-option
                v-for="item in projectList"
                :key="item.itemId"
                :label="item.itemName"
                :value="item.itemId"
              />
            </el-select>
          </div>
        </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" width="120" />
          <!--          <el-table-column prop="patientId" label="就诊号" header-align="center" align="center" />-->
          <el-table-column label="状态" header-align="center" align="center" width="100">
            <template slot-scope="scope">
              {{ scope.row.patientStatus | patientStatus }}
            </template>
          </el-table-column>
          <el-table-column prop="patientName" label="患者姓名" header-align="center" align="center" width="100" />
          <el-table-column label="出生日期" header-align="center" align="center" width="110">
            <template slot-scope="scope">
              {{ scope.row.patientBirthday ? $options.filters.dateFilterTwo( scope.row.patientBirthday): '- ' }}
            </template>
          </el-table-column>
          <el-table-column prop="zlEye" label="眼别" header-align="center" align="center" width="100">
            <template slot-scope="scope">
              <el-select v-model="scope.row.zlEye" placeholder="" size="small" @change="value=>changeEyeType(value,scope)">
                <el-option
                  v-for="item in eyeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              {{ scope.row.zlEye === 'os' ? '左眼' : ( scope.row.zlEye === 'od' ? '右眼' : '') }}
            </template>
          </el-table-column>
          <el-table-column prop="mzDoctorName" label="门诊医师" header-align="center" align="center" width="100" />
          <el-table-column label="操作员" header-align="center" align="center" width="100">
            <template slot-scope="scope">
              {{ getOperator(scope.row.zlProjectList) }}
            </template>
          </el-table-column>
          <el-table-column prop="zlPorject" label="医疗项目" header-align="center" align="center">
            <template slot-scope="scope">
              {{ getYLProject(scope.row.zlProjectList) }}
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" header-align="center" align="center" />
          <el-table-column prop="updateDate" label="就诊时间" header-align="center" align="center" width="165" />
          <el-table-column prop="appointDate" label="预约时间" header-align="center" align="center" width="165" />
          <!--          <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="finishTreat(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" @refreshDataList="getDataListInitial" />
    <!-- HIS引入弹框 -->
    <his-add v-if="HisAddVisible" ref="HisAddRef" @openAdd="getHisData" />
    <!-- 详情页 -->
    <detail-view v-if="detailViewVisible" ref="viewRef" :only-read="onlyRead" :is-search="'2'" :patient-id="patientId" @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 '未叫号'
        case '2':
          return '已叫号'
        case '3':
          return '过号'
        case '4':
          return '呼叫中'
        default:
          return val
      }
    },
    patientStatus(val) {
      switch (val) {
        case '200':
          return '未报到'
        case '300':
          return '未诊断'
        case '400':
          return '已诊'
        default:
          return val
      }
    }
  },
  mixins: [mixinViewModule, tableAutoHeight],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/patient/page',
        getDataListIsPage: true
      },
      curIndex: 0,
      options: [
        {
          value: '0',
          label: '今天'
        }, {
          value: '1',
          label: '昨天'
        }, {
          value: '2',
          label: '前天'
        }, {
          value: '3',
          label: '近三天'
        }, {
          value: '4',
          label: '近一周'
        }, {
          value: '5',
          label: '近一个月 '
        }, {
          value: '6',
          label: '近半年 '
        }, {
          value: '',
          label: '全部'
        }],
      typeList: [
        {
          value: '',
          label: '全部'
        }, {
          value: '200',
          label: '未报到'
        }, {
          value: '300',
          label: '未诊'
        }, {
          value: '400',
          label: '已诊'
        }],
      eyeList: [{
        value: 'OD',
        label: 'OD'
      }, {
        value: 'OS',
        label: 'OS'
      }, {
        value: 'OU',
        label: 'OU'
      }],
      nextVisitTime: [],
      appointRange: [],
      onlyRead: false,
      detailViewVisible: false,
      HisAddVisible: false,
      dataForm: {
        platform: 2,
        patientId: '',
        beginDate: '',
        endDate: '',
        appointBeginDate: '',
        appointEndDate: '',
        searchType: '0',
        projectCode: '',
        patientName: '',
        patientStatus: '',
        patientIdNumber: ''
      },
      projectList: [],
      patientId: ''
    }
  },
  watch: {
    $route(val) {
      // 如果两级以上就隐藏父级
      this.isShowPatient = !(val.matched.length > 2)
    }
  },
  created() {
    this.isShowPatient = !(this.$route.matched.length > 2)
    this.queryProjectList()
  },
  methods: {
    // 展示列表项目列
    getYLProject(list) {
      if (!list.length) {
        return
      }
      const projects = list.map(item => item.porjectName).join('、')
      return projects
    },
    getHisData(val) {
      this.addOrUpdateHandle('', { ...val }, 'HIS引入')
    },
    // 展示列表操作者列
    getOperator(list) {
      if (!list.length) {
        return ''
      }
      return list[0].finishUserName
    },
    // 获取项目列表
    queryProjectList() {
      this.$http.get('/patient/getZlItemDict', { params: { category: 'T' }}).then(data => {
        this.projectList = data.data.data
        this.projectList.unshift({
          caseName: '',
          enable: 1,
          itemId: '',
          itemName: '全部项目'
        })
      })
    },
    changeEyeType(value, scope) {
      const idList = scope.row.zlProjectList.map(item => item.id)
      this.$http.post('/patient/updateProjectEyeType', {
        ids: idList,
        zlEye: value
      }).then(res => {
        if (res.data.data) {
          this.$message.error(res.data.data)
        }
      })
    },
    // 日期改变时
    dateChange(e) {
      this.dataForm.beginDate = e ? e[0] : ''
      this.dataForm.endDate = e ? e[1] : ''
      this.dataForm.searchType = e ? '' : '0'
      this.getDataListInitial()
    },
    // 日期改变时
    appointChange(e) {
      this.dataForm.appointBeginDate = e ? e[0] : ''
      this.dataForm.appointEndDate = e ? e[1] : ''
      this.dataForm.searchType = e ? '' : '0'
      this.getDataListInitial()
    },
    // 根据就诊状态查询
    handleType(value, index) {
      this.curIndex = index
      this.dataForm.patientStatus = value
      this.getDataListInitial()
    },
    async receiveTreat(item) {
      const { data: res } = await this.$http.get('/patient/updateSGDoctorAndJzStatus', {
        params: {
          isAppoint: item.isAppoint,
          patientId: item.patientId,
          jzNumber: item.jzNumber,
          platform: 2
        }
      })
      if (res.code === 0) {
      } else {
        this.$message.error(res.msg)
      }
    },
    finishTreat(scope) {
      const idList = scope.zlProjectList.map(item => item.id)
      if (!idList.length) {
        this.$message.error('项目状态更新失败')
        return
      }
      this.receiveTreat(scope)
      this.$http.post('/patient/updateProjectStatus', idList).then((res) => {
        this.$message.success(res.data.data)
        this.getDataListInitial()
      })
    },
    // 查看详情
    showDetail(scopeRow, index) {
      if (index === 1) {
        this.receiveTreat(scopeRow)
      }
      this.onlyRead = index !== 1
      this.detailViewVisible = true
      this.patientId = scopeRow.patientId
      const mzName = scopeRow.mzDoctorName ? scopeRow.mzDoctorName : ''
      const jzNumber = scopeRow.jzNumber ? scopeRow.jzNumber : ''
      window.localStorage.setItem('mzDoctorName', mzName)
      window.localStorage.setItem('jzNumber', jzNumber)
    },
    // His引入
    HISHandle() {
      this.HisAddVisible = true
      this.$nextTick(() => {
        this.$refs.HisAddRef.init()
      })
    }
  }
}
</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;
  }
  .operation-delete,
  .operation-details {
    cursor: pointer;
  }
  .active{
    color: #3ea3f6;
    background-color: #e0f2fd;
    border-color: #3ea3f6;
  }
}
</style>
<style lang="scss">
.patient-info {
  .patient-info-head {
    .el-form {
      display: flex;
      justify-content: space-between;
    }
    .el-form-item__content,
    .el-select,
    .el-range-editor--small.el-input__inner {
      width: 100%;
    }
    .el-form-item {
      display: flex;
      margin-bottom: 0;
      width: 25%;
    }
  }
}
</style>