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="small"
          start-placeholder="开始日期"
          style="width: 280px"
          type="daterange"
      ></el-date-picker>
      <el-button icon="Search" type="primary" @click="dianJiChaXunShouShu(0)">查询</el-button>
      <el-button icon="Plus" type="success" @click="dianJiXinZhenShouShu">新增</el-button>
    </el-header>
    <el-container>
      <el-aside style="width: 450px">
        <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="statusName" 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="120">
            <template #default="scope">
              <el-dropdown split-button type="primary" @click="dianJiChaKanShouShu(scope.row, scope.$index)">
                查看
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>
                      <el-button icon="Printer" type="warning" @click="dianJiDaYing(scope.row, scope.$index)">打印
                      </el-button>
                    </el-dropdown-item>
                    <br/>
                    <el-dropdown-item>
                      <el-button icon="Delete" type="danger" @click="dianJiShanChu(scope.row, scope.$index)"> 删除
                      </el-button>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </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.2"></da-ying-shou-shu-sheng-qing-dan>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup name="ShouShuShenQing">
import {computed, ref, watch} from 'vue'
import {
  huoQuShouShu,
  huoQuShouShuMingCheng,
  huoQuShouShuShenQingDaYing,
  shanChuShouShu
} 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'
import {ElMessageBox} from 'element-plus'

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]
    }
  })
}

const dianJiShanChu = (row, index) => {
  ElMessageBox.confirm(`您确定要删除【${row.opName}】吗？`, '提示', {})
      .then(() => {
        shanChuShouShu(row.recordId)
      })
      .catch(() => {
      })
}

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

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

const dianJiXinZhenShouShu = () => {
  router.push({
    name: 'xinZengShuJu',
    params: {
      name: '手术',
      passRule: true,
    },
    query: {
      path: '/inpatient/zhuYuanYiSheng/shouShuShenQing',
    },
  })
}

</script>

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