web_dist/src/views/data-modify/YzActOrderModify.vue

<template>
  <page-layer>
    <template #header>
      <el-input size="small" placeholder="在此输入住院号" @keyup.enter="query" v-model.trim="inpatientNo" clearable
                prefix-icon="Search" style="width: 300px">
        <template #prepend>住院号</template>
      </el-input>
      <el-input size="small" placeholder="在此输入医嘱号" oninput="value=value.replace(/[^\d]/g,'')"
                v-model.trim="actOrderNo" clearable prefix-icon="Search" style="width: 300px">
        <template #prepend>医嘱号</template>
      </el-input>
      <el-button type="primary" icon="Search" @click="query">查询</el-button>
      <el-button type="info" @click="chakan" icon="View">查看申请状态</el-button>
    </template>
    <template #aside>
      <el-table :height="tableHeight" stripe highlight-current-row
                :data="cptTable.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="text-align: center">
        <el-table-column label="医嘱号" prop="actOrderNo"></el-table-column>
        <el-table-column label="医嘱名称" show-overflow-tooltip prop="orderName"></el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button-group>
              <el-button text @click="tianjia(scope.row)" type="primary">添加</el-button>
              <el-button text @click="danGeShenQingClick(scope.row)" type="primary">申请</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :current-page="currentPage"
          small
          style="background-color: white"
          layout="prev, pager, next"
          :total="cptTable.length"
      >
      </el-pagination>
    </template>
    <template #main>
      <!-- 申请修改医嘱的开始时间和结束时间 -->
      <span>开始时间：</span>
      <el-date-picker type="datetime" placeholder="选择开始时间" v-model="tianJiaShenHe.startTime"></el-date-picker>
      <el-divider direction="vertical"></el-divider>
      <span>结束时间：</span>
      <el-date-picker type="datetime" placeholder="选择结束时间" v-model="tianJiaShenHe.endTime"></el-date-picker>
      <el-divider direction="vertical"></el-divider>
      <el-button @click="tijiaoshenqing" type="success">提交</el-button>
      <el-divider></el-divider>
      <!-- 这里是添加审核医嘱到表格中 -->
      <el-table :data="tianJiaShenHe.list" :height="tableHeight - 28">
        <el-table-column label="患者姓名" width="70" prop="patientName"></el-table-column>
        <el-table-column label="住院号" width="70" prop="inpatientNo"></el-table-column>
        <el-table-column label="医嘱号" show-overflow-tooltip width="70" prop="actOrderNo"></el-table-column>
        <el-table-column label="医嘱名称" show-overflow-tooltip prop="orderName"></el-table-column>
        <el-table-column label="频次" prop="frequCode"></el-table-column>
        <el-table-column label="医嘱时间" prop="orderTime"></el-table-column>
        <el-table-column label="开始时间" prop="startTime"></el-table-column>
        <el-table-column label="结束时间" prop="endTime"></el-table-column>
        <el-table-column label="删除">
          <template #default="scope">
            <el-button type="danger" size="small" icon="Delete" @click="shanchu(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 这里是查看审核状态的 -->
      <el-dialog v-model="dialogFormVisible" title="审核状态" :width="900">
        住院号：
        <el-input style="width: 120px" clearable @blur="shenHeInpatientNo = $event.target.value.trim()"
                  v-model="shenHeInpatientNo"></el-input>
        医嘱号：
        <el-input oninput="value=value.replace(/[^\d]/g,'')" style="width: 120px"
                  @blur="shenHeActOrderNo = $event.target.value.trim()" v-model="shenHeActOrderNo"></el-input>
        <el-divider direction="vertical"></el-divider>
        <el-button @click="queryZhuangTaiClick" type="primary">查询</el-button>
        <el-table :data="dialogTable" :height="tableHeight - 300">
          <el-table-column type="index"></el-table-column>
          <el-table-column label="住院号" prop="inpatientNo"></el-table-column>
          <el-table-column label="医嘱号" prop="actOrderNo"></el-table-column>
          <el-table-column label="审核状态">
            <template #default="scope">
              <span v-html="yZauditStatus(scope.row.auditFlag)"></span>
            </template>
          </el-table-column>
          <el-table-column label="申请备注" show-overflow-tooltip prop="proposeRemark"></el-table-column>
          <el-table-column label="审核人" prop="auditStaff"></el-table-column>
          <el-table-column label="审核备注" show-overflow-tooltip prop="auditRemark"></el-table-column>
          <el-table-column label="审核时间" width="80" prop="auditTime"></el-table-column>
        </el-table>
        <el-pagination
            layout="prev, pager, next, total"
            @current-change="shenHeXinXiCurrentChange"
            :total="shenHeXinxiTotal"
            :page-size="shenHeXinXiPageSize"
            background
        ></el-pagination>
      </el-dialog>
      <el-drawer v-model="danGeShenQingDrawer" title="申请修改医嘱" size="50%">
        <div style="margin-left: 20px; width: 90%">
          <el-descriptions border title="基本信息">
            <el-descriptions-item>
              <template #label>
                <i class="el-icon-user"></i>
                患者姓名
              </template>
              {{ danGeShenQingDrawerData.patientName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <i class="el-icon-s-order"></i>
                住院号
              </template>
              {{ danGeShenQingDrawerData.inpatientNo }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <i class="el-icon-s-order"></i>
                医嘱号
              </template>
              {{ danGeShenQingDrawerData.actOrderNo }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <i class="el-icon-s-claim"></i>
                医嘱名称
              </template>
              {{ danGeShenQingDrawerData.orderName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <i class="el-icon-house"></i>
                病房
              </template>
              {{ danGeShenQingDrawerData.wardCode }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <i class="el-icon-tickets"></i>
                频次
              </template>
              {{ danGeShenQingDrawerData.frequCode }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <i class="el-icon-time"></i>
                医嘱时间
              </template>
              {{ danGeShenQingDrawerData.orderTime }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <i class="el-icon-time"></i>
                开始时间
              </template>
              {{ danGeShenQingDrawerData.startTime }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <i class="el-icon-time"></i>
                结束时间
              </template>
              {{ danGeShenQingDrawerData.endTime }}
            </el-descriptions-item>
          </el-descriptions>
          <el-divider></el-divider>
          <el-row>
            <el-col :span="12">
              开始时间：
              <el-date-picker type="datetime" placeholder="修改开始时间"
                              v-model="danGeShenQingDrawerData.newStartTime"></el-date-picker>
            </el-col>
            <el-col :span="12">
              结束时间：
              <el-date-picker type="datetime" placeholder="修改结束时间"
                              v-model="danGeShenQingDrawerData.newEndTime"></el-date-picker>
            </el-col>
            <el-col :span="24">
              <br/>
              <el-input
                  type="textarea"
                  placeholder="申请备注"
                  maxlength="250"
                  @blur="danGeShenQingDrawerData.proposeRemark = $event.target.value.trim()"
                  show-word-limit
                  v-model="danGeShenQingDrawerData.proposeRemark"
              ></el-input>
            </el-col>
          </el-row>
          <br/>
          <el-button type="primary" @click="danGeShenQingSubmit">提交</el-button>
        </div>
      </el-drawer>
    </template>
  </page-layer>
</template>

<script>
import {reactive, ref} from '@vue/reactivity'
import {ElMessage, ElMessageBox} from 'element-plus'
import store from '@/store'
import {yZauditStatus} from '@/utils/computed'
import {yzModifyApply, yzQuery, chaKanZhuangTai, danGeShenQing} from '@/api/yz-data-mod/yz-xiugaiy'
import {formatDatetime} from '@/utils/date'
import {computed} from 'vue'
import router from '@/router'
import PageLayer from "@/layout/PageLayer";

export default {
  name: 'YzActOrderModify',
  components: {PageLayer},
  setup() {
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 70

    const inpatientNo = ref('')
    const actOrderNo = ref('')

    const handleCurrentChange = (val) => {
      currentPage.value = val
    }

    const currentPage = ref(1)
    const pageSize = ref(30)

    const zhiYin = ref(false)

    const queryTerm = reactive({
      actOrderNo: '',
      inpatientNo: '',
    })

    /**
     * 在输入医嘱的时候修值行这个方法
     * 动态的在 returnData 这个数据里面 查找到数据
     * 数据有变化就执行 这个方法*/
    const cptTable = computed(() => {
      return dataTable.value.filter((item) => {
        return item.actOrderNo.toString().indexOf(actOrderNo.value) > -1
      })
    })

    /**
     * 提交修改审核
     * 需要判断 是否选择了数据 以及修改的时间 必须填写一项
     * 修改成功后把表格里面的值清空
     * */
    const tijiaoshenqing = () => {
      if (!tianJiaShenHe.value.startTime && !tianJiaShenHe.value.endTime) {
        ElMessage.warning({
          title: '错误',
          message: '至少选择一项，需要修改的时间 (^～^;)ゞ',
          showClose: true,
        })
        return
      }
      if (tianJiaShenHe.value.list.length > 0) {
        ElMessageBox.prompt('共有 ' + tianJiaShenHe.value.list.length + ' 条申请。', '请填写申请备注', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info',
          inputPattern: /\S/,
          inputErrorMessage: '必填项不能为空,且不得超过100字 (∩•̀ω•́)⊃-*⋆',
        })
            .then(({value}) => {
              tianJiaShenHe.value.proposeRemark = value
              if (value.length > 100) {
                ElMessage({
                  type: ' warning',
                  title: '错误',
                  message: '审核备注不超过100字',
                  showClose: true,
                })
              } else {
                tianJiaShenHe.value.startTime = formatDatetime(tianJiaShenHe.value.startTime)
                tianJiaShenHe.value.endTime = formatDatetime(tianJiaShenHe.value.endTime)
                tianJiaShenHe.value.proposer = store.state.user.info.code
                yzModifyApply(tianJiaShenHe.value).then((res) => {
                  actOrderNos.value = []
                  tianJiaShenHe.value = {}
                  tianJiaShenHe.value.list = []
                })
              }
            })
            .catch(() => {
            })
      } else {
        ElMessage({
          type: 'warning',
          title: '错误',
          message: '还没有选择要申请医嘱',
          showClose: true,
        })
      }
    }

    const dialogFormVisible = ref(false)
    const dialogTable = ref([])

    //审核信息点击分页
    const shenHeXinXiCurrentChange = (val) => {
      shenHeXinXiCurrentPage.value = val
      chaKanZhuangTai(store.state.user.info.code, resShenHeActOrderNo, resShenHeInpatientNo, shenHeXinXiCurrentPage.value, shenHeXinXiPageSize.value).then((res) => {
        resShenHeInpatientNo = shenHeInpatientNo.value
        resShenHeActOrderNo = shenHeActOrderNo.value
        dialogFormVisible.value = true
        shenHeXinxiTotal.value = res.total
        dialogTable.value = res.data
      })
    }

    const shenHeXinxiTotal = ref(0)
    const shenHeXinXiPageSize = ref(10)
    const shenHeXinXiCurrentPage = ref(1)

    // 审核信息中 查询修改的数据
    const shenHeInpatientNo = ref('')
    const shenHeActOrderNo = ref('')

    let resShenHeInpatientNo = ''
    let resShenHeActOrderNo = ''

    /**
     * 点击查看 申请的状态
     */
    const chakan = () => {
      chaKanZhuangTai(store.state.user.info.code, resShenHeActOrderNo, resShenHeInpatientNo, shenHeXinXiCurrentPage.value, shenHeXinXiPageSize.value).then((res) => {
        dialogFormVisible.value = true
        shenHeXinxiTotal.value = res.total
        dialogTable.value = res.data
      })
    }
    //根据条件查询
    const queryZhuangTaiClick = () => {
      chaKanZhuangTai(store.state.user.info.code, shenHeActOrderNo.value, shenHeInpatientNo.value, shenHeXinXiCurrentPage.value, shenHeXinXiPageSize.value).then((res) => {
        resShenHeInpatientNo = shenHeInpatientNo.value
        resShenHeActOrderNo = shenHeActOrderNo.value
        dialogFormVisible.value = true
        shenHeXinxiTotal.value = res.total
        dialogTable.value = res.data
      })
    }

    //返回数据到页面中
    const dataTable = ref([])

    //执行添加医嘱 到 表格中
    const tianJiaShenHe = ref({
      list: [],
      startTime: '',
      endTime: '',
      proposeRemark: '',
      proposer: '',
    })

    //一个用来保存 需要修改的医嘱的数组
    const actOrderNos = ref([])
    /**
     * 点击添加把选中的数据添加到新的数据里面并显示到页面中
     * 不可以重复的添加
     */
    const tianjia = (val) => {
      if (actOrderNos.value.indexOf(val.actOrderNo) > -1) {
        ElMessage({
          title: '失败',
          message: '请勿重复添加 ( *￣▽￣)o ─═≡※:☆',
          type: 'warning',
          showClose: true,
        })
      } else {
        actOrderNos.value.push(val.actOrderNo)
        tianJiaShenHe.value.list.push(val)
      }
    }

    //删除申请表格里面的数据
    const shanchu = (index) => {
      tianJiaShenHe.value.list.splice(index, 1)
      actOrderNos.value.splice(index, 1)
    }
    //调用通知
    const choice = () => {
      ElMessage({
        type: 'warning',
        message: '至少填写一项,要修改的时间',
        showClose: true,
        duration: 2000,
      })
    }
    /**
     * 查询数据
     * 通过住院号和医嘱号 查找，住院号是必填的
     * */
    const query = () => {
      if (!inpatientNo.value) {
        ElMessage({
          type: 'warning',
          message: '住院号必填',
          showClose: true,
          duration: 2000,
        })
        return
      }
      queryTerm.actOrderNo = actOrderNo.value
      queryTerm.inpatientNo = inpatientNo.value
      yzQuery(queryTerm)
          .then((res) => {
            dataTable.value = res
          })
          .catch(() => {
            dataTable.value = []
          })
    }
    /**
     * 单个修改医嘱
     */
    const danGeShenQingDrawer = ref(false)
    const danGeShenQingClick = (val) => {
      danGeShenQingDrawer.value = true
      danGeShenQingDrawerData.value = val
    }

    const danGeShenQingDrawerData = ref()

    const danGeShenQingSubmit = () => {
      if (!danGeShenQingDrawerData.value.newStartTime && !danGeShenQingDrawerData.value.newEndTime) {
        choice()
        return
      } else if (!danGeShenQingDrawerData.value.proposeRemark) {
        ElMessage({
          type: 'warning',
          message: '申请备注不能为空',
          showClose: true,
          duration: 2500,
        })
        return
      }
      danGeShenQingDrawerData.value.newStartTime = formatDatetime(danGeShenQingDrawerData.value.newStartTime)
      danGeShenQingDrawerData.value.newEndTime = formatDatetime(danGeShenQingDrawerData.value.newEndTime)
      danGeShenQing(danGeShenQingDrawerData.value).then((res) => {
        danGeShenQingDrawer.value = false
      })
    }

    onActivated(() => {
      let patNo = router.currentRoute.value.query.patNo
      if (patNo) {
        inpatientNo.value = patNo
        query()
      }
    })

    return {
      actOrderNo,
      inpatientNo,
      query,
      tableHeight,
      queryTerm,
      handleCurrentChange,
      dataTable,
      currentPage,
      pageSize,
      tijiaoshenqing,
      chakan,
      dialogFormVisible,
      dialogTable,
      yZauditStatus,
      tianjia,
      tianJiaShenHe,
      shanchu,
      cptTable,
      zhiYin,
      danGeShenQingClick,
      danGeShenQingDrawer,
      danGeShenQingDrawerData,
      danGeShenQingSubmit,
      shenHeXinXiCurrentChange,
      shenHeXinxiTotal,
      shenHeXinXiPageSize,
      shenHeXinXiCurrentPage,
      shenHeInpatientNo,
      shenHeActOrderNo,
      queryZhuangTaiClick,
    }
  },
}
</script>

<style></style>