web_dist/src/views/clinic/chronicDisease/ChronicDiseaseSearch.vue

<template>
  <div class="layout_container">
    <header>
      <el-input v-model="keyCode" class="w-50 m-2" style="width: 360px" placeholder="请输入姓名/证件号/门诊号/住院号" clearable>
        <template #prepend>关键字</template>
      </el-input>
      <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                      end-placeholder="结束日期" :shortcuts="shortcuts" style="width: 360px;margin-left: 3px"></el-date-picker>
      <el-select v-model="diseaseType" placeholder="请选择慢病类型" clearable style="width: 240px;margin-left: 3px">
        <el-option v-for="item in dics.getCrmClass" :key="item.code" :label="item.name" :value="item.code" />
      </el-select>
      <el-select v-model="delFlag" placeholder="请选择是否有效" clearable style="width: 160px;margin-left: 3px">
        <el-option v-for="item in delFlagOptions" :key="item.code" :label="item.name" :value="item.code" />
      </el-select>
      <el-button type="primary" icon="Search" @click="queryChronicDisease" style="margin-left: 5px">查询</el-button>
      <el-button type="primary" icon="Download" @click="exportData" style="margin-left: 5px">导出</el-button>
    </header>
    <div class="layout_main">
      <div class="layout_container">
        <div class="layout_main layout_el-table">
          <el-table :data="chronicDiseaseData.slice(pageSize * (currentPage - 1), pageSize * currentPage)" border
                    height="100%" highlight-current-row :row-style="rowStyle">
            <el-table-column type="index" label="序号" width="50" fixed />
            <el-table-column prop="pName" label="姓名" width="100" fixed />
            <el-table-column prop="socialNo" label="证件号" width="140" fixed />
            <el-table-column prop="sexValue" label="性别" />
            <el-table-column prop="age" label="年龄" />
            <el-table-column prop="hisMzNo" label="门诊号" width="100" />
            <el-table-column prop="hisZyNo" label="住院号" width="100" />
            <el-table-column prop="days" label="剩余回访天数" width="100" />
            <el-table-column prop="ptName" label="病人来源" width="120" />
            <el-table-column prop="relTel" label="联系电话" width="100" />
            <el-table-column prop="relNameTel" label="联系人电话" width="100" />
            <el-table-column prop="relName" label="联系人姓名" width="100" />
            <el-table-column prop="chronicDiseaseName" label="慢病类型" width="200" show-overflow-tooltip />
            <el-table-column prop="lastDate" label="确诊时间" width="100" />
            <el-table-column prop="pComment" label="患者重点随访监测事项" width="300" show-overflow-tooltip />
            <el-table-column prop="importLevel" label="病人等级" width="100">
              <template #default="scope">
                <span v-if="scope.row.importLevel === '1'">未住院患者</span>
                <span v-else-if="scope.row.importLevel === '2'">住院一次患者</span>
                <span v-else-if="scope.row.importLevel === '3'">住院两次及以上</span>
                <span v-else>{{ scope.row.importLevel }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="provinceName" label="省" width="100" />
            <el-table-column prop="cityName" label="市" width="100" />
            <el-table-column prop="areaName" label="区" width="100" />
            <el-table-column prop="detailAdress" label="详细地址" width="300" show-overflow-tooltip />
            <el-table-column prop="height" label="身高" width="80" />
            <el-table-column prop="weight" label="体重" width="80" />
            <el-table-column prop="temperature" label="体温" width="80" />
            <el-table-column prop="heartRate" label="心率" width="80" />
            <el-table-column prop="bloodPressure" label="收缩压/舒张压" width="100" />
            <el-table-column prop="bloodSugar" label="血糖" width="80" />
            <el-table-column prop="bloodOxygen" label="血氧" width="80" />
            <el-table-column prop="referPhysicianName" label="主管医生" width="100" />
            <el-table-column prop="userName" label="建档医生" width="100" />
            <el-table-column prop="createDate" label="建卡时间" width="140" />
            <el-table-column prop="visitDate" label="下次随访时间" width="100" />
            <el-table-column prop="delFlag" label="是否有效" width="80">
              <template #default="scope">
                <span v-if="scope.row.delFlag === '1'">作废</span>
                <span v-else></span>
              </template>
            </el-table-column>
            <el-table-column prop="cz" label="操作" width="120" fixed="right" align="center">
              <template #default="{ row }">
                <el-button v-if="row.delFlag !== '1'" @click="followUpClick(row)" type="primary">回访</el-button>
                <span v-if="delUser === '0'" style="padding-left: 5px;">
                  <el-button v-if="row.delFlag === '1'" @click="hfChronicDisease(row)" type="primary">恢复</el-button>
                  <el-button v-else @click="delChronicDisease(row)" type="warning">作废</el-button>
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>
          <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[15, 30, 45, 60]"
                         :total="chronicDiseaseData.length" layout="total, sizes, prev, pager, next, jumper" style="margin-top: 5px"
                         @size-change="handleSizeChange" @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="ChronicDiseaseSearch">
import { ref, onMounted, nextTick } from 'vue'
import { shortcuts, seltYearAndNowLast } from '@/data/shortcuts'
import { formatDate, getDateRangeFormatDate } from '@/utils/date'
import { ElMessage, ElMessageBox } from 'element-plus'
import { selectChronicDisease, getCrmDictionary, selectMbDelPermissions, delChronicDiseaseById, hfChronicDiseaseById } from "@/api/chronic-disease/chronic-disease"
import { Export } from '@/utils/ExportExcel'
import { clone } from '@/utils/clone'
import router from "@/router";

const pageSize = ref(30)
const currentPage = ref(1)
const handleSizeChange = (val) => {
  pageSize.value = val
}
const handleCurrentChange = (val) => {
  currentPage.value = val
}
const keyCode = ref('')
const chronicDiseaseData = ref([])
const diseaseType = ref('')
let dics = ref({})
const delUser = ref('')
const delFlag = ref('')
const start = formatDate(seltYearAndNowLast[1].value[0])
const end = formatDate(seltYearAndNowLast[1].value[1])
const dateRange = ref([])
const queryTerm = reactive({
  startTime: '',
  endTime: '',
  keyCode: '',
  diseaseType: '',
  delFlag: '',
})

const delFlagOptions = [{ code: '', name: '全部' }, { code: '0', name: '有效' }, { code: '1', name: '无效' }]

onMounted(() => {
  nextTick(async () => {
    queryMbDelPermissions()
    dics.value = await getCrmDictionary()
    queryTerm.startTime = start
    queryTerm.endTime = end + ' 23:59:59'
    dateRange.value = [start, end]
    queryChronicDisease()
  })
})

const queryMbDelPermissions = () => {
  selectMbDelPermissions()
    .then((res) => {
      delUser.value = res.qx
    });
}

// 查询慢病首次登记信息
const queryChronicDisease = () => {
  if (dateRange.value) {
    let dateS = getDateRangeFormatDate(dateRange.value)
    queryTerm.startTime = dateS.startTime
    queryTerm.endTime = dateS.endTime
  } else {
    queryTerm.startTime = start
    queryTerm.endTime = end
    ElMessage({
      type: 'info',
      message: '默认查询本月的数据',
      duration: 2500,
      showClose: true,
    })
  }

  queryTerm.keyCode = keyCode.value
  queryTerm.diseaseType = diseaseType.value
  queryTerm.delFlag = delFlag.value
  selectChronicDisease(queryTerm)
    .then((res) => {
      chronicDiseaseData.value = res
    });
}

const rowStyle = (row, rowIndex) => {
  if (row.row.days <= 0) {
    return {
      backgroundColor: "#e60012 !important",
      color: "#28A458 !important",
      cursor: "pointer",
    };
  } else if (row.row.days > 0 && row.row.days <= 7) {
    return {
      backgroundColor: "#ecd452 !important",
      color: "#28A458 !important",
      cursor: "pointer",
    };
  }
  return { cursor: "pointer" };
}

function followUpClick({ socialNo }) {
  router.push({
    name: 'chronicDiseaseQuestionnaire',
    query: {
      id: socialNo
    }
  })
}

function delChronicDisease({ pId }) {
  ElMessageBox.confirm("确定作废?", {
    cancelButtonText: '取消',
    confirmButtonText: '确定',
    type: 'warning',
    distinguishCancelAndClose: true,
    dangerouslyUseHTMLString: true
  }).then(() => {
    delChronicDiseaseById(pId).then((res) => {
      queryChronicDisease()
      ElMessage({
        type: "success",
        message: res.cg,
        duration: 2500,
        showClose: true,
      });
      return
    })
  })
}

function hfChronicDisease({ pId }) {
  ElMessageBox.confirm("确定恢复?", {
    cancelButtonText: '取消',
    confirmButtonText: '确定',
    type: 'warning',
    distinguishCancelAndClose: true,
    dangerouslyUseHTMLString: true
  }).then(() => {
    hfChronicDiseaseById(pId).then((res) => {
      queryChronicDisease()
      ElMessage({
        type: "success",
        message: res.cg,
        duration: 2500,
        showClose: true,
      });
      return
    })
  })
}

// 导出慢病基础信息
const exportData = () => {
  if (chronicDiseaseData.value.length === 0) {
    ElMessage({
      message: "没有可以导出的数据！",
      type: "warning",
      duration: 2500,
      showClose: true,
    });
  } else {
    const title = {
      pName: "姓名",
      socialNo: "证件号",
      sexValue: "性别",
      age: "年龄",
      hisMzNo: "门诊号",
      hisZyNo: "住院号",
      days: "剩余回访天数",
      ptName: "病人来源",
      relTel: "联系电话",
      relNameTel: "联系人电话",
      relName: "联系人姓名",
      chronicDiseaseName: "慢病类型",
      lastDate: "确诊时间",
      pComment: "患者重点随访监测事项",
      importLevel: "病人等级",
      provinceName: "省",
      cityName: "市",
      areaName: "区",
      detailAdress: "详细地址",
      height: "身高",
      weight: "体重",
      temperature: "体温",
      heartRate: "心率",
      bloodPressure: "收缩压/舒张压",
      bloodSugar: "血糖",
      bloodOxygen: "血氧",
      referPhysicianName: "主管医生",
      userName: "建档医生",
      createDate: "建卡时间",
      visitDate: "下次随访时间",
      delFlag: "是否有效"
    };

    const d = clone(chronicDiseaseData.value)
    d.forEach(val => {
      if (val.importLevel === '1') {
        val.importLevel = '未住院患者'
      } else if (val.importLevel === '2') {
        val.importLevel = '住院一次患者'
      } else if (val.importLevel === '3') {
        val.importLevel = '住院两次及以上'
      } else {
        val.importLevel = ''
      }

      if (val.delFlag === '1') {
        val.delFlag = '作废'
      } else {
        val.delFlag = ''
      }
    });

    Export(d, title, "慢病登记信息")
  }
}
</script>