web_dist/src/views/med-tec-mod/MenZhenXiangMu.vue

<template>
  <div class="layout_container">
    <header>
      <div>
        <el-date-picker
            v-model="dateRange"
            :shortcuts="shortcuts"
            end-placeholder="结束日期"
            placeholder="选择日期"
            range-separator="至"
            start-placeholder="开始日期"
            style="width: 280px"
            type="daterange"
        ></el-date-picker>
        患者ID：
        <el-input v-model="patientId" clearable style="width: 120px" @blur="patientId = $event.target.value.trim()"
                  @keyup.enter="getMzPatientClick"></el-input>
        <el-select v-model="xiangMuZhuangTai" style="width: 90px">
          <el-option v-for="item in xiangMuZhuangTaiData" :key="item.code" :label="item.name" :value="item.code">
            <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
            <el-divider direction="vertical"></el-divider>
            <span :style="{ color: item.color }">{{ item.name }}</span>
          </el-option>
        </el-select>
        <el-button icon="Search" type="primary" @click="getMzPatientClick"> 查询</el-button>
        <el-button icon="Search" type="primary" @click="kuaiSuChaZhaoClick"> 快速查找</el-button>
        <el-button icon="Search" type="warning" @click="chaoZuoZhiNanDialog = true"> 操作指南</el-button>
        <el-button icon="Upload" type="success" @click="baoCunClick"> 保存</el-button>
      </div>
      <div>
        <el-tag effect="dark" size="large">患者姓名: {{ patient.name }}</el-tag>
        <el-tag effect="dark" size="large" type="warning">性别:{{ cptSex(patient.sex) }}</el-tag>
        <el-tag effect="dark" size="large">出生日期: {{ patient.birthDay }}</el-tag>
        <el-tag effect="dark" size="large" type="warning">诊疗卡: {{ patient.icCardNo }}</el-tag>
      </div>
    </header>

    <div class="layout_main layout_container layout-horizontal">
      <aside class="layout_el-table" style="width: 220px">
        <el-table :data="shouFeiData" highlight-current-row stripe
                  @cell-click="getFeiYongXinXiClick">
          <el-table-column label="收费信息">
            <el-table-column label="缴费日期" prop="chargeDate" width="80"></el-table-column>
            <el-table-column label="流水号">
              <template #default="scope">
                <el-popover :width="800" placement="right" trigger="click">
                  <template #reference>
                    <el-button type="success" @click="getFeiYongXinXiClick(scope.row)">{{
                        scope.row.realNo
                      }}
                    </el-button>
                  </template>
                  <el-table :data="feiYongData" height="calc(100vh - 50%)" highlight-current-row stripe>
                    <el-table-column label="缴费明细信息">
                      <el-table-column label="待确认标志" prop="confirmFlag">
                        <template #default="scope">
                          <span v-html="confirmFlag(scope.row.confirmFlag)"></span>
                        </template>
                      </el-table-column>
                      <el-table-column label="项目编码" prop="chargeItemCode"></el-table-column>
                      <el-table-column label="项目" prop="chargeName"></el-table-column>
                      <el-table-column label="金额" prop="chargeFee"></el-table-column>
                      <el-table-column label="确认时间" prop="confirmTime" width="80"></el-table-column>
                      <el-table-column label="确认人" prop="confirmIdName"></el-table-column>
                      <el-table-column label="执行科室" prop="execDeptName"></el-table-column>
                      <el-table-column label="申请号" prop="reqNo"></el-table-column>
                    </el-table-column>
                  </el-table>
                </el-popover>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </aside>
      <div class="layout_main layout_el-table">
        <el-table :data="keQueRenData" highlight-current-row stripe>
          <el-table-column label="本科室">
            <el-table-column label="待确认标志" prop="confirmFlag" width="250">
              <template #default="scope">
                <el-radio-group v-model="scope.row.confirmFlag">
                  <el-radio-button :disabled="scope.row.xiangMuZhuangTai === 1 || scope.row.xiangMuZhuangTai === 3"
                                   :value="0"> 未确认
                  </el-radio-button>
                  <el-radio-button :value="1">确认</el-radio-button>
                  <el-radio-button :value="3">取消</el-radio-button>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column label="项目编码" prop="chargeItemCode"></el-table-column>
            <el-table-column label="项目" prop="chargeName"></el-table-column>
            <el-table-column label="金额" prop="chargeFeeNew"></el-table-column>
            <el-table-column label="确认时间" prop="confirmTime" width="80"></el-table-column>
            <el-table-column label="确认人" prop="confirmIdName"></el-table-column>
            <el-table-column label="执行科室" prop="execDeptName"></el-table-column>
            <el-table-column label="申请号" prop="reqNo">
              <template #default="scope">
                <el-button type="success" @click="getMingXiClick(scope.row)">{{ scope.row.reqNo }}</el-button>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>

  <el-dialog v-model="kuaiSuChaZhaoDialog" title="点击表格中的姓名即可">
    <el-table
        :data="kuaiSuChaZhaoData.list.slice((kuaiSuChaZhaoData.currentPage - 1) * kuaiSuChaZhaoData.pageSize, kuaiSuChaZhaoData.pageSize * kuaiSuChaZhaoData.currentPage)"
        height="calc(100vh - 50%)"
        highlight-current-row
        stripe
        @cell-click="chaZhaoTable"
    >
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="门诊号" prop="patientId"></el-table-column>
    </el-table>
    <el-pagination
        :current-page="kuaiSuChaZhaoData.currentPage"
        :page-size="kuaiSuChaZhaoData.pageSize"
        :total="kuaiSuChaZhaoData.list.length"
        background
        layout="total,  prev, pager, next, jumper"
        @current-change="kuaiSuChaZhaoCurrent"
    >
    </el-pagination>
  </el-dialog>
  <el-dialog v-model="chaoZuoZhiNanDialog" title="操作指南">
    一、查询<br/><br/>
    1、选择好时间以及患者的门诊号（门诊号或者诊疗卡号），在选择是否查看已经确认的还是未确认的 点击查询即可。<br/>
    2、快速查询，只针对医生开了执行科室为本科室的才有用，没有带执行科室的请手动输入门诊号查询，是根据日期来查询的。<br/>
    3、如果感觉有点卡的话那么就日期范围选择短一些<br/><br/>
    二、数据<br/><br/>
    1、点击右边侧边栏的表格，开在本科室的项目就会显示在左边，点击流水号，能看到这个费用的明细<br/>
    2、点击中间的表格，选择您需要进行的操作。<br/>
    3、点击申请号，可也看见套餐的明细。<br/><br/>
    三、保存<br/><br/>
    1、在选择完数据后点击保存即可。 <br/>
  </el-dialog>

  <el-dialog v-model="detailsDialog.dialog"
             class="mz_que-fei_detailsDialog"
             title="明细">
    <div class="detail">
      申请单明细：
      <el-form label-width="80">
        <el-form-item label="症状:">
          {{ detailsDialog.details.req_comment }}
        </el-form-item>
        <el-form-item label="病史:">
          {{ detailsDialog.details.emr_hpi }}
        </el-form-item>
        <el-form-item label="体征:">
          {{ detailsDialog.details.emr_pe }}
        </el-form-item>
        <el-form-item label="备注:">
          {{ detailsDialog.details.jy_remark }}
        </el-form-item>
        <el-form-item label="申请医生:">
          <img :src="`http://172.16.32.167:8077/doctorSignatureImage/${detailsDialog.details.req_doctor}.png`"
               :alt="detailsDialog.details.req_doctor_name"
          />
        </el-form-item>
        <el-form-item label="申请科室:">
          {{ detailsDialog.details.req_ward_name }}
        </el-form-item>
      </el-form>
    </div>

    <div class="detail">
      费用明细：
      <el-table :data="detailsDialog.tableData"
                highlight-current-row
                stripe>
        <el-table-column label="项目编码" prop="chargeItemCode"></el-table-column>
        <el-table-column label="项目" prop="chargeName"></el-table-column>
        <el-table-column label="金额" prop="chargeFee"></el-table-column>
      </el-table>
    </div>

  </el-dialog>

</template>
<script setup>
import {shortcuts} from '@/data/shortcuts'
import {ref} from 'vue'
import {cptSex} from '@/utils/computed'
import {
  getFeiYongXinXi,
  getMzPatient, getReqDetailsByNo,
  kuaiSuChaZhao,
  menZhenXiangMuQuXiaoHuoQueRen
} from '@/api/zhu-yuan-yi-ji/men-zhen-xiang-mu'
import {getDateRangeFormatDate} from '@/utils/date'
import {ElMessage, ElMessageBox} from 'element-plus'
import {listIsBlank, stringIsBlank} from '@/utils/blank-utils'
import {isDev, needRule} from "@/utils/public";
import XEUtils from 'xe-utils'
import {useUserStore} from "@/pinia/user-store";

const userInfo = useUserStore().userInfo
const dateRange = ref(shortcuts[0].value)
const patientId = ref(isDev ? '339138-4' : '')
const xiangMuZhuangTai = ref(0)
const chargeDate = ref('')
const patient = ref({})
const shouFeiData = ref([])
const feiYongData = ref([])
const keQueRenData = ref([])
const danGeXingXi = ref([])

const detailsDialog = reactive({
  dialog: false,
  tableData: [],
  details: {}
})

const xiangMuZhuangTaiData = [
  {code: 0, name: '未确认'},
  {code: 1, name: '已确认'},
]

const getMzPatientClick = () => {
  lingShiBaoCunJiaoFeiMingXi.value = {}
  shouFeiData.value = []
  keQueRenData.value = []
  feiYongData.value = []
  danGeXingXi.value = []
  let dateR = getDateRangeFormatDate(dateRange.value)
  getMzPatient(patientId.value, xiangMuZhuangTai.value, dateR.startTime, dateR.endTime, userInfo.deptCode)
      .then((res) => {
        patientId.value = res.patientId
        patient.value = res
        patient.value.birthDay = patient.value.birthDay.split(' ')[0]
        shouFeiData.value = res.list
      })
      .catch(() => {
        patient.value = {}
      })
}

const lingShiBaoCunJiaoFeiMingXi = ref({})

function deptList(item) {
  return !!userInfo.partTimeDeptMap[item];
}

const getFeiYongXinXiClick = (val) => {
  chargeDate.value = val.chargeDate
  getFeiYongXinXi(val.realNo, val.patientId, val.times, xiangMuZhuangTai.value).then((res) => {
    keQueRenData.value = []
    feiYongData.value = res
    lingShiBaoCunJiaoFeiMingXi.value = XEUtils.clone(val)
    if (needRule(1)) {
      keQueRenData.value = XEUtils.clone(feiYongData.value, true)
    } else {
      keQueRenData.value = feiYongData.value.filter((item) => {
        return deptList(item.execDept) || stringIsBlank(item.execDept)
      })
    }
  })
}


const getMingXiClick = (val) => {
  if (typeof val.list !== 'undefined') {
    val.list.forEach((item) => {
      item.chargeFee = item.drugWin * item.quantity * item.unitPrice
    })
  }

  getReqDetailsByNo(val.patientId, val.reqNo).then((res) => {
    detailsDialog.dialog = true
    detailsDialog.details = res
  })

  detailsDialog.tableData = val.list || []
}

const baoCunClick = () => {
  const list = keQueRenData.value.filter((item) => {
    return item.confirmFlag !== item.oldConfirmFlag && item.confirmFlag !== 0
  })
  if (listIsBlank(list)) {
    return ElMessage.error('数据没有变化请勿点击')
  }
  ElMessageBox.confirm('请确认数据', '提示', {
    type: 'warning',
  })
      .then(() => {
        let baoCun = {
          list: list,
          realNo: lingShiBaoCunJiaoFeiMingXi.value.realNo,
          patientId: lingShiBaoCunJiaoFeiMingXi.value.patientId,
          times: lingShiBaoCunJiaoFeiMingXi.value.times,
          execDept: userInfo.deptCode,
        }
        menZhenXiangMuQuXiaoHuoQueRen(baoCun).then((res) => {
          keQueRenData.value = []
        })
      })
      .catch(() => {
      })
}

const kuaiSuChaZhaoDialog = ref(false)
const kuaiSuChaZhaoData = ref({
  currentPage: 1,
  pageSize: 10,
  list: [],
})
const chaoZuoZhiNanDialog = ref(false)

const kuaiSuChaZhaoClick = () => {
  let dateR = getDateRangeFormatDate(dateRange.value)
  kuaiSuChaZhao(dateR.startTime, dateR.endTime, userInfo.deptCode).then((res) => {
    kuaiSuChaZhaoData.value.list = res
    kuaiSuChaZhaoDialog.value = true
  })
}

const kuaiSuChaZhaoCurrent = (val) => {
  kuaiSuChaZhaoData.value.currentPage = val
}

const chaZhaoTable = (val) => {
  patientId.value = val.patientId
  getMzPatientClick()
}

function confirmFlag(val) {
  switch (val) {
    case 0:
      return '<span style="color:#E6A23C">未确认</span>'
    case 1:
      return '<span style="color:#67C23A">已确认</span>'
    case 3:
      return '<span style="color:#F56C6C">已取消</span>'
  }
}
</script>

<style lang="scss">
.mz_que-fei_detailsDialog {

  .detail {
    color: black;
    margin-bottom: 10px;
    padding: 20px;
    box-shadow: var(--el-box-shadow);
  }
}

</style>