web_dist/src/components/zhu-yuan-yi-sheng/hui-zhen-shen-qing/TianJiaHuiZhenShenQing.vue

<template>
  <div style="width: 550px">
    <el-form ref="huiZhenShenQingForm"
             :model="huiZhenShenQing"
             :rules="huiZhenShenQingRules"
             label-width="100px">
      <el-form-item label="会诊科室:" prop="reqDept1">
        <el-select
            style="width: 120px"
            v-model="huiZhenShenQing.huiZhenKeShi"
            :remote-method="remoteMethodHuiZhenKeShi"
            clearable
            filterable
            placeholder="根据拼音首字母查找"
            remote
            value-key="code"
            @change="huiZhenYiShengPanDuan">
          <el-option v-for="item in deptList" :key="item.code" :label="item.name"
                     :value="deptOptionValue(item)">
            <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
            <el-divider direction="vertical"></el-divider>
            <span>{{ item.name }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="会诊类别:" prop="hzLevel">
        <el-select v-model="huiZhenShenQing.hzLevel" placeholder="请选择">
          <el-option v-for="item in huiZhenLeiBieList" :key="item.code" :label="item.name" :value="item.code"
                     clearable>
            <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
            <el-divider direction="vertical"/>
            <span>{{ item.name }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="会诊级别:" prop="hzType">
        <el-select v-model="huiZhenShenQing.hzType" :remote-method="remoteMethodHuiZhenKeShi"
                   clearable placeholder="请选择"
                   @change="huiZhenYiShengPanDuan">
          <el-option v-for="item in huiZhenTypeList" :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>{{ item.name }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="会诊医生:" prop="hzDoctor1">
        <el-select v-model="huiZhenShenQing.hzDoctor1"
                   clearable
                   filterable
                   remote
                   @change="autofillData"
                   :remote-method="inquireAboutTheConsultingDoctor">
          <el-option v-for="item in huiZhenYiShengList" :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:#67C23A">{{ item.name }}</span>
            <el-divider direction="vertical"></el-divider>
            <span style="color:#E6A23C">{{ item.deptName }}</span>
            <el-divider direction="vertical"></el-divider>
            <span style="color:#a5673f">{{ item.empTitName }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="自费:" prop="ybSelfFlag">
        <el-switch
            v-model="huiZhenShenQing.ybSelfFlag"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            active-text="是"
            inactive-color="#ff4949"
            inactive-text="否">
        </el-switch>
      </el-form-item>
      <el-form-item label="紧急:" prop="emergencyFlag">
        <el-switch
            v-model="huiZhenShenQing.emergencyFlag"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            active-text="是"
            inactive-color="#ff4949"
            inactive-text="否">
        </el-switch>
      </el-form-item>
      <el-form-item label="病情简介:" prop="reqComment">
        <el-input v-model="huiZhenShenQing.reqComment"
                  :rows="6"
                  placeholder="请输入内容"
                  type="textarea"/>
      </el-form-item>
      <el-form-item label="目前主要诊断:" prop="hzZd">
        <el-input v-model="huiZhenShenQing.hzZd"
                  :rows="6" maxlength="100"
                  placeholder="请输入内容"
                  show-word-limit
                  type="textarea"/>
      </el-form-item>
      <el-form-item label="会诊目的:" prop="hzMd">
        <el-input v-model="huiZhenShenQing.hzMd"
                  :rows="6"
                  placeholder="请输入内容"
                  type="textarea"/>
      </el-form-item>
      <el-button style="margin-left: 20px" type="success"
                 v-el-btn="huiZhenShenQingClick">
        申请
      </el-button>
      <el-tag style="margin-left: 20px">申请人：{{ huiZhenShenQing.name }}</el-tag>
      <el-tag style="margin-left: 20px">申请时间：{{ huiZhenShenQing.inputDate }}</el-tag>
    </el-form>
  </div>
</template>

<script name="TianJiaHuiZhenShenQing" setup>
import {
  getConsultingDoctorInfo,
  gethuiZhenLeiBie,
  huiZhenYiSheng, huoQuHuanZheZhuYaoZhenDuan,
  queryDept,
  submitHuiZhenShenQing
} from "@/api/case-front-sheet";
import {ElMessageBox} from "element-plus";
import {
  huanZheXinXi,
} from "@/views/hospitalization/zhu-yuan-yi-sheng/public-js/zhu-yuan-yi-sheng";
import store from "@/store"
import {getServerDateApi} from "@/api/public-api";


const emit = defineEmits(['close', 'successfulApplication'])

const windowSize = computed(() => {
  return store.state.app.windowSize
})
//会诊申请的字段
const huiZhenShenQing = ref({
  inpatientNo: '', //住院号
  admissTimes: '', //住院次数
  reqTimes: '', //请求时间
  reqComment: '', //请求简介
  inputId: '', //输入人的id
  inputDate: '', //输入的时间
  reqDate: '', //请求的时间 和 上面那个一样
  deptCode: '', //科室 code
  wardCode: '', //病房 code 和上面的一样
  reqDept1: '', //请求的 科室
  reqDeptName: '', //请求科室的名字
  statusFlag: '', // 状态标志 1 未读 2 已读
  hzType: '', // 会诊的级别
  hzLevel: '', // 会诊的类别
  hzZd: '', //目前的主要诊断
  hzMd: '', //会诊的目的
  actOrderNo: '', //新开的医嘱号
  hzDoctor1: '', //会诊的医生
  name: '', // 申请人
  emergencyFlag: 0, // 医嘱紧急
  ybSelfFlag: 0, // 自费
  huiZhenKeShi: {},
})

// 会诊医生
const huiZhenYiShengList = ref([])
// 科室
const deptList = ref([])
//会诊类别集合
const huiZhenLeiBieList = ref()
// 表格
const huiZhenShenQingForm = ref(null)
// 用户信息
const userInfo = store.state.user.info
// 会诊科室 option 的 值
const deptOptionValue = (item) => {
  item.dept = true
  return JSON.stringify(item)
}

//会诊医生判断 ， 要会诊医生在这个科室的 才可以
const huiZhenYiShengPanDuan = (val) => {
  popUpPrompt = false
  try {
    val = JSON.parse(val)
  } catch (e) {

  }
  if (val.dept) {
    huiZhenShenQing.value.reqDeptName = val.name
    huiZhenShenQing.value.reqDept1 = val.code
  }
  huiZhenShenQing.value.hzDoctor1 = null
  if (huiZhenShenQing.value.reqDept1 && huiZhenShenQing.value.hzType) {
    huiZhenYiSheng(huiZhenShenQing.value.reqDept1, huiZhenShenQing.value.hzType).then((res) => {
      huiZhenYiShengList.value = res
    })
  } else {
    huiZhenYiShengList.value = []
  }
}

//远程搜索会诊科室
const remoteMethodHuiZhenKeShi = (val) => {
  if (val !== '' && val.length > 0) {
    queryDept(val)
        .then((res) => {
          deptList.value = res
        })
        .catch(() => {
          deptList.value = []
        })
  }
}

// 数据校验
const huiZhenShenQingRules = ref({
  reqDept1: [{required: true, message: '会诊科室不能为空', trigger: 'change'}],
  hzType: [{required: true, message: '会诊的级别不能为空', trigger: 'change'}],
  hzLevel: [{required: true, message: '会诊的类别不能为空', trigger: 'change'}],
  reqComment: [{required: true, message: '病情简介不能为空', trigger: 'blur'}],
  hzZd: [
    {required: true, message: '目前主要诊断不能为空', trigger: 'blur'},
    {
      min: 3,
      max: 120,
      message: '长度在 3 到 100 个字符',
      trigger: 'blur',
    },
  ],
  hzMd: [{required: true, message: '会诊目的不能为空', trigger: 'blur'}],
})
//点击申请
const huiZhenShenQingClick = async () => {
  const form = unref(huiZhenShenQingForm)
  if (!form) return
  try {
    await form.validate()
    await ElMessageBox.confirm('请认真审核申请信息', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'info',
    })
    huiZhenShenQing.value.inpatientNo = huanZheXinXi.value.inpatientNo
    huiZhenShenQing.value.admissTimes = huanZheXinXi.value.admissTimes
    huiZhenShenQing.value.deptCode = huiZhenShenQing.value.wardCode = huanZheXinXi.value.zkWard
    await submitHuiZhenShenQing(huiZhenShenQing.value)
    emit('successfulApplication')
  } catch (error) {
  }
}

let popUpPrompt = false
const inquireAboutTheConsultingDoctor = (val) => {
  getConsultingDoctorInfo(val).then((res) => {
    if (res) {
      popUpPrompt = true
      huiZhenYiShengList.value = res
    }
  })
}

const autofillData = async (val) => {
  if (!popUpPrompt) return
  if (!val) return
  await nextTick()
  ElMessageBox.confirm('是否要自动填充数据。', '提示', {
    type: 'info',
    distinguishCancelAndClose: true,
  }).then(() => {
    let res = {}
    for (let i = 0, len = huiZhenYiShengList.value.length; i < len; i++) {
      let item = huiZhenYiShengList.value[i]
      if (item.code === val) {
        res = item
        break;
      }
    }

    let dept = {code: res.deptCode, name: res.deptName, dept: true}

    huiZhenShenQing.value.huiZhenKeShi = JSON.stringify(dept)
    deptList.value = [dept]
    huiZhenShenQing.value.reqDept1 = res.deptCode
    huiZhenShenQing.value.reqDeptName = res.deptName
    if (res.empTitCode === '3') {
      huiZhenShenQing.value.hzType = '1'
    } else if (res.empTitCode === '1') {
      huiZhenShenQing.value.hzType = '3'
    }


  }).catch((action) => {
    if (action === 'cancel') {
      huiZhenShenQing.value = {}
    } else {
      huiZhenShenQing.value.hzDoctor1 = ''
      huiZhenYiShengPanDuan({code: ''})
    }
  })
}

onMounted(() => {
  // xcHotKey(hotKey)
  huiZhenShenQing.value.name = userInfo.name
  getServerDateApi().then((res) => {
    huiZhenShenQing.value.inputDate = res
  })
  gethuiZhenLeiBie().then((res) => {
    huiZhenLeiBieList.value = res
  })
  huoQuHuanZheZhuYaoZhenDuan(huanZheXinXi.value.inpatientNo, huanZheXinXi.value.admissTimes).then((res) => {
    if (res !== null && res.length > 0) {
      for (let i = 0; i < res.length; i++) {
        huiZhenShenQing.value.hzZd += res[i].name + '，'
      }
    }
  })

})

let huiZhenTypeList = [
  {code: '1', name: '主治医师'},
  {code: '2', name: '副主任医生'},
  {code: '3', name: '主任医生'},
]
</script>

<style scoped>

</style>