web_dist/src/components/zhu-yuan-yi-sheng/YiZhuLuRuZhuJian.vue

<template>
  <el-container>
    <el-header style="height: 40px">
      <el-date-picker
          type="daterange"
          v-model="dateRange"
          placeholder="选择日期"
          size="mini"
          style="width: 220px"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :shortcuts="shortcuts"
      ></el-date-picker>
      医嘱名称：
      <el-select style="width: 120px" v-model="orderName" remote filterable clearable
                 :remote-method="remoteMethodChargeCode">
        <el-option v-for="item in yiZhuMingZiData" :key="item.name" :name="item.name" :value="item.name">
          <span>{{ item.name }}</span>
        </el-option>
      </el-select>
      频率：
      <el-select v-model="pinLv" size="mini" filterable clearable style="width: 120px">
        <el-option v-for="item in huanZhePinLvData" :key="item.name" :name="item.name" :value="item.name">
          <span>{{ item.name }}</span>
        </el-option>
      </el-select>
      <el-divider direction="vertical"></el-divider>
      <el-button type="primary" icon="el-icon-search" @click="chaXunYiZhuClick(0)">查询</el-button>
      <el-divider direction="vertical"></el-divider>
      <el-button type="primary" icon="el-icon-plus" @click="addYiZhuClick">添加</el-button>
      <el-divider direction="vertical"></el-divider>
      <el-tag type="info" effect="dark">录入</el-tag>
      <el-tag effect="dark" type="success">确认</el-tag>
      <el-tag effect="dark">执行</el-tag>
      <el-tag effect="dark" type="danger">停止</el-tag>

    </el-header>
    <el-main>
      <el-table :data="yiZhuPage.data" :height="(windowSize.h / 1.6) + huanZheXinXiHeight" row-key="actOrderNo" border
                highlight-current-row>
        <el-table-column label="医嘱号" prop="actOrderNo" width="90" fixed="left">
          <template #default="scope">
            <el-tag :type="getYiZhuFlag( scope.row.statusFlag)" effect="dark">{{ scope.row.actOrderNo }}</el-tag>
          </template>
        </el-table-column>
        <template v-for="(item,index) in elTableHeader">
          <el-table-column :label="item.name" :prop="item.code" :width="item.width">
            <template #default="scope" v-if="item.code === 'emergencyFlag' ||  item.code === 'ybSelfFlag'">
              <el-tag effect="dark" type="danger"
                      v-if="item.code === 'emergencyFlag' && scope.row.emergencyFlag === '1'">是
              </el-tag>
              <el-tag effect="dark" type="danger"
                      v-else-if="item.code === 'ybSelfFlag' && scope.row.ybSelfFlag === '1'">是
              </el-tag>
            </template>
          </el-table-column>
        </template>
        <el-table-column label="操作" fixed="right" width="150">
          <template #default="scope">
            <el-button>修改</el-button>
            <el-button>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="yiZhuPage.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="yiZhuPage.total"
          :current-page="yiZhuPage.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
      <tian-jia-huo-xiu-gai-yi-zhu ref="tianJiaXiuGaiYiZhu"></tian-jia-huo-xiu-gai-yi-zhu>
    </el-main>
  </el-container>
</template>

<script>
import {computed, ref, watch} from "vue";
import {shortcuts} from '../../data/shortcuts'
import {
  huanZheXinXi,
  huanZhePinLvData,
  huoQuYiZhuMingCheng,
  huoQuYiZhuShuJu,
  youWuXuanZheHuanZhe, huanZheXinXiHeight
} from "../../api/zhu-yuan-yi-sheng/yi-zhu-lu-ru";
import {getDateRangeFormatDate} from "../../utils/date";
import store from '../../store'
import {stringIsBlank, stringNotBlank} from '../../utils/blank-utils';
import TianJiaHuoXiuGaiYiZhu from "./TianJiaHuoXiuGaiYiZhu.vue";


export default {
  name: "YiZhuLuRuZhuJian",
  components: {TianJiaHuoXiuGaiYiZhu},
  setup(props, cxt) {
    const windowSize = computed(() => {
      return store.state.app.windowSize
    })

    const dateRange = ref('')
    // 根据医嘱的名字来进行搜索
    const orderName = ref('')
    const yiZhuMingZiData = ref([])
    // 获取频率
    const pinLv = ref('')
    // 分页
    const yiZhuPage = ref({
      currentPage: 1,
      pageSize: 30,
      total: 0,
      data: []
    })

    const remoteMethodChargeCode = (val) => {
      if (youWuXuanZheHuanZhe()) return
      if (val.length > 1) {
        huoQuYiZhuMingCheng(huanZheXinXi.value.inpatientNo, huanZheXinXi.value.admissTimes, val).then((res) => {
          yiZhuMingZiData.value = res
        })
      }
    }
    // 根据医嘱的名字来进行搜索 结束
    const chaXunYiZhuClick = (total) => {
      if (youWuXuanZheHuanZhe()) return
      const dateS = getDateRangeFormatDate(dateRange.value)
      let data = {
        currentPage: yiZhuPage.value.currentPage,
        pageSize: yiZhuPage.value.pageSize,
        total: total,
        patNo: huanZheXinXi.value.inpatientNo,
        times: huanZheXinXi.value.admissTimes,
        startTime: dateS.startTime,
        endTime: dateS.endTime,
        frequCode: pinLv.value,
        orderName: orderName.value
      }
      huoQuYiZhuShuJu(data).then((res) => {
        yiZhuPage.value.total = res.total
        yiZhuPage.value.data = res.records
      }).catch(e => {
        yiZhuPage.value.total = 0
        yiZhuPage.value.data = []
      })
    }


    const handleSizeChange = (val) => {
      yiZhuPage.value.pageSize = val
      chaXunYiZhuClick(yiZhuPage.value.total)
    }

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

    /**
     * 下面这里是添加医嘱了
     */
    const tianJiaXiuGaiYiZhu = ref(null)
    const addYiZhuClick = () => {
      if (youWuXuanZheHuanZhe()) return
      tianJiaXiuGaiYiZhu.value.dialog = true
      tianJiaXiuGaiYiZhu.value.title = '添加医嘱'
    }

    watch(() => huanZheXinXi.value, () => {
      chaXunYiZhuClick(0)
    })


    return {
      dateRange,
      shortcuts,
      orderName,
      yiZhuMingZiData,
      remoteMethodChargeCode,
      chaXunYiZhuClick,
      pinLv,
      huanZhePinLvData,
      yiZhuPage,
      windowSize,
      handleSizeChange,
      handleCurrentChange,
      huanZheXinXiHeight,
      stringNotBlank,
      elTableHeader: [
        {name: "医嘱名称", code: "orderName"},
        {name: "剂量", code: "doseUnitName"},
        {name: "频率", code: "frequCode"},
        {name: "给药方式", code: "supplyCodeName"},
        {name: "开始时间", code: "startTime"},
        {name: "结束时间", code: "enterTime"},
        {name: "医嘱时间", code: "orderTime"},
        {name: "紧急", code: "emergencyFlag"},
        {name: "医保自费", code: "ybSelfFlag"},
        {name: "医生", code: "physicianName"},
        {name: "费用标志", code: "selfBuyName"},
        {name: "执行科室", code: "execUnitName"},
        {name: "领量", code: "drugQuanName"},
        {name: "类别", code: "drugFlagName"},
        {name: "药房", code: "groupNoName"},
        {name: "序号", code: "serialName"},
        {name: "医保备注", code: "1"},
      ],
      getYiZhuFlag,
      addYiZhuClick,
      tianJiaXiuGaiYiZhu,
    }
  }
}

function getYiZhuFlag(val) {
  if (stringIsBlank(val)) {
    return 'warning'
  }
  switch (val) {
    case "1":
      return 'info'
    case "2":
      return 'success'
    case "3":
      return ''
    case "4":
      return ''
    case "5":
      return 'danger'
    default:
      return 'warning'
  }
}

</script>

<style scoped>
.el-table__row .el-table__row--level-0 {
  background: rgba(145, 247, 145, .5);
}
</style>