web_dist/src/views/hospitalization/zhu-yuan-yi-sheng/shou-shu-shen-qing/ShouShuShenQing.vue

<template>
  <el-container>
    <el-header style="height: 30px">
      检查名称：
      <el-autocomplete v-model="orderName" :fetch-suggestions="querySearchAsync" clearable
                       style="width: 220px" @keyup.enter="dianJiChaXunShouShu(0)"></el-autocomplete>
      申请时间：
      <el-date-picker
          v-model="dateRange"
          :shortcuts="shortcuts"
          end-placeholder="结束日期"
          placeholder="选择日期"
          range-separator="至"
          size="mini"
          start-placeholder="开始日期"
          style="width: 280px"
          type="daterange"
      ></el-date-picker>
      <el-button icon="el-icon-search" type="primary" @click="dianJiChaXunShouShu(0)">查询</el-button>
      <el-button icon="el-icon-plus" type="success" @click="dianJiXinZhenShouShu">新增</el-button>
    </el-header>
    <el-container>
      <el-aside>
        <el-table :data="shouShuShuJu.data" :height="windowSize.h / 1.4" :row-class-name="rowClass">
          <el-table-column label="申请号" prop="recordId" show-overflow-tooltip></el-table-column>
          <el-table-column label="项目名称" prop="opName" show-overflow-tooltip></el-table-column>
          <el-table-column label="手术时间" prop="opDatetime" show-overflow-tooltip></el-table-column>
          <el-table-column fixed="right" label="操作" width="80">
            <template #default="scope">
              <el-button circle icon="el-icon-view" title="查看"
                         @click="dianJiChaKanShouShu(scope.row,scope.$index)"></el-button>
              <el-button circle icon="iconfont icon-dayin" title="打印"
                         @click="dianJiDaYing(scope.row,scope.$index)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            :current-page="shouShuShuJu.currentPage"
            :page-size="shouShuShuJu.pageSize"
            :total="shouShuShuJu.total"
            layout="total,prev, pager, next"
            small
            @current-change="handleCurrentChange">
        </el-pagination>
      </el-aside>
      <el-main>
        <da-ying-shou-shu-sheng-qing-dan ref="daYing" :height="windowSize.h / 1.4"></da-ying-shou-shu-sheng-qing-dan>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {computed, ref, watch} from "vue";
import {
  huoQuShouShu,
  huoQuShouShuMingCheng,
  huoQuShouShuShenQingDaYing
} from "@/api/zhu-yuan-yi-sheng/shou-shu-shen-qing";
import {huanZheXinXi, youWuXuanZheHuanZhe} from "@/views/hospitalization/zhu-yuan-yi-sheng/public-js/zhu-yuan-yi-sheng";
import {shortcuts} from '@/data/shortcuts'
import store from "@/store";
import DaYingShouShuShengQingDan from "@/components/zhu-yuan-yi-sheng/shou-shu-shen-qing/DaYingShouShuShengQingDan.vue";
import {stringNotBlank} from "@/utils/blank-utils";
import router from "@/router";

export default {
  name: "ShouShuShenQing",
  components: {DaYingShouShuShengQingDan},
  setup() {
    const windowSize = computed(() => {
      return store.state.app.windowSize
    })

    const orderName = ref('')
    const dateRange = ref([])
    const daYing = ref()
    const tableIndex = ref(-1)

    const shouShuShuJu = ref({
      data: [],
      currentPage: 1,
      pageSize: 20,
      total: 0
    })

    const dianJiChaXunShouShu = (val) => {
      const data = {
        patNo: huanZheXinXi.value.inpatientNo,
        times: huanZheXinXi.value.admissTimes,
        currentPage: shouShuShuJu.value.currentPage,
        pageSize: shouShuShuJu.value.pageSize,
        total: val
      }
      huoQuShouShu(data).then((res) => {
        if (val === 0) {
          shouShuShuJu.value.total = res.total
        }
        shouShuShuJu.value.data = res.records
      })
    }

    const querySearchAsync = (val, cd) => {
      if (youWuXuanZheHuanZhe()) return
      if (val.length > 1) {
        huoQuShouShuMingCheng(huanZheXinXi.value.inpatientNo, huanZheXinXi.value.admissTimes, val).then((res) => {
          cd(res)
        })
      }
    }

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

    const dianJiDaYing = (row, index) => {
      huoQuShouShuShenQingDaYing(huanZheXinXi.value.inpatientNo, huanZheXinXi.value.admissTimes, row.recordId).then((res) => {
        daYing.value.data = res
        tableIndex.value = index
        if (stringNotBlank(res.applyDate)) {
          res.applyDate = res.applyDate.split(" ")[0]
        }
        if (stringNotBlank(res.opDatetime)) {
          res.opDatetime = res.opDatetime.split(" ")[0]
        }
        setTimeout(() => {
          daYing.value.daYing()
        }, 500)
      })
    }

    const dianJiChaKanShouShu = (row, index) => {
      huoQuShouShuShenQingDaYing(huanZheXinXi.value.inpatientNo, huanZheXinXi.value.admissTimes, row.recordId).then((res) => {
        daYing.value.data = res
        tableIndex.value = index
        console.log(res)
        if (stringNotBlank(res.applyDate)) {
          res.applyDate = res.applyDate.split(" ")[0]
        }
        if (stringNotBlank(res.opDatetime)) {
          res.opDatetime = res.opDatetime.split(" ")[0]
        }
      })
    }

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

    const rowClass = ({rowIndex}) => {
      if (rowIndex === tableIndex.value) {
        return 'success-row'
      } else {
        return ''
      }
    }


    const dianJiXinZhenShouShu = () => {
      if (youWuXuanZheHuanZhe()) return
      router.push('/inpatient/zhuYuanYiSheng/xinZengShouShuShenQing')
    }


    return {
      orderName,
      dianJiChaXunShouShu,
      dateRange,
      shortcuts,
      querySearchAsync,
      shouShuShuJu,
      windowSize,
      handleCurrentChange,
      dianJiChaKanShouShu,
      dianJiDaYing,
      daYing,
      rowClass,
      dianJiXinZhenShouShu,
    }
  }
}
</script>

<style scoped>
:deep(.el-table .success-row) {
  background: rgba(71, 123, 220, 0.69);
}
</style>