手术安排和手术记录的路由

src/api/surgical-management/surgery-arrangement.js

@@ -23,4 +23,25 @@ export function modifySurgeryTimeApi(data) {
     })
 }
 
+export function getSurgeryRooms() {
+    return request({
+        url: '/surgeryArrangement/getSurgeryRooms',
+        method: 'get',
+    })
+}
 
+export function cancelSurgery(recordId) {
+    return request({
+        url: '/surgeryArrangement/cancelSurgery',
+        method: 'get',
+        params: { recordId }
+    })
+}
+
+export function updateArrangement(recordId, key, value) {
+    return request({
+        url: '/surgeryArrangement/updateArrangement',
+        method: 'get',
+        params: { recordId, key, value }
+    })
+}

src/router/modules/dashboard.js

@@ -679,6 +679,11 @@ const route = [
                 component: createNameComponent(() => import('@/views/surgical-management/SurgeryArrangement.vue')),
                 meta: {title: '手术安排'},
             },
+            {
+                path: 'surgeryRecord',
+                component: createNameComponent(() => import('@/views/surgical-management/SurgeryRecord.vue')),
+                meta: {title: '手术信息记录'},
+            },
         ],
     },
 

src/views/surgical-management/SurgeryArrangement.vue

@@ -1,170 +1,205 @@
 <template>
-  <el-container>
-    <el-header style="height: 30px">
-      病房:
-      <el-select v-model="queryParam.ward" clearable filterable>
+  <page-layer>
+    <template #header>
+      <el-date-picker
+          v-model="dateRange"
+          :shortcuts="shortcuts"
+          end-placeholder="结束日期"
+          range-separator="至"
+          start-placeholder="开始日期"
+          style="width: 220px"
+          type="daterange"
+      />
+      &nbsp;&nbsp;病房：
+      <el-select v-model="queryParam.ward" clearable filterable style="width: 120px">
         <el-option v-for="item in wardList" :key="item.code" :label="item.name" :value="item.code"></el-option>
       </el-select>
-      住院号:
-      <el-input v-model="queryParam.patNo" clearable style="width: 120px"></el-input>
-      状态:
+      &nbsp;&nbsp;住院号：
+      <el-input v-model="queryParam.patNo" clearable style="width: 100px"></el-input>
+      &nbsp;&nbsp;状态：
       <el-select v-model="queryParam.status" style="width: 80px">
         <el-option v-for="item in statusList" :key="item.code" :label="item.name" :value="item.code"></el-option>
       </el-select>
-      <el-date-picker
-        v-model="dateRange"
-        :shortcuts="shortcuts"
-        end-placeholder="结束日期"
-        range-separator="至"
-        start-placeholder="开始日期"
-        style="width: 220px"
-        type="daterange"
-      />
-      <el-divider direction="vertical" />
-      <el-radio-group v-model="queryParam.dateType">
-        <el-radio-button label="op_datetime">手术</el-radio-button>
-        <el-radio-button label="apply_date">申请</el-radio-button>
-      </el-radio-group>
+
       <el-divider direction="vertical" />
       <el-checkbox v-model="queryParam.jzFlag">急诊</el-checkbox>
       <el-divider direction="vertical" />
       <el-button icon="Search" type="primary" @click="clickQuery">查询</el-button>
-    </el-header>
-    <el-main>
-      <el-tag effect="dark" size="small" type="danger">急诊:{{ jiZhenJiShu }}条</el-tag>
-      <el-tag effect="dark" size="small" type="success">普通:{{ shouShuData.length - jiZhenJiShu }}条</el-tag>
-      <el-table :data="shouShuData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" :height="window.h - 120">
-        <el-table-column label="手术编号" prop="recordId">
+    </template>
+    <template #main>
+      <el-tag effect="dark" size="small" type="danger">急诊:{{ emergencyCount }}条</el-tag>
+      <el-tag effect="dark" size="small">普通:{{ surgeryList.length - emergencyCount }}条</el-tag>
+      <el-table :data="surgeryList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
+                :height="window.h - 60" border :row-class-name="differChargedRows"
+                header-cell-class-name="cell-border" cell-class-name="cell-border">
+        <el-table-column label="手术编号" prop="recordId" width="60">
           <template #default="scope">
-            <el-tag :type="scope.row.urgentClinicFlag === '1' ? 'danger' : 'success'" effect="dark" @click="clickToModifyTime(scope.row)">
+            <el-tag :type="scope.row.urgentClinicFlag === '1' ? 'danger' : ''" effect="dark" @click="clickToModifyTime(scope.row)">
               {{ scope.row.recordId }}
             </el-tag>
           </template>
         </el-table-column>
-        <el-table-column label="手术开始时间" prop="opStartDate"></el-table-column>
-        <el-table-column label="手术结束时间" prop="opEndDate"></el-table-column>
-        <el-table-column label="麻醉开始时间" prop="anstStartDate"></el-table-column>
-        <el-table-column label="麻醉结束时间" prop="anstEndDate"></el-table-column>
         <el-table-column label="日期" prop="opDatetime"></el-table-column>
         <el-table-column label="送出时间" prop="applyDate"></el-table-column>
-        <el-table-column label="手术间" prop="roomName"></el-table-column>
-        <el-table-column label="手术台次" prop="sstc"></el-table-column>
-        <el-table-column label="病房" prop="wardName"></el-table-column>
-        <el-table-column label="床号" prop="bedNo"></el-table-column>
-        <el-table-column label="住院号" prop="inpatientNo"></el-table-column>
-        <el-table-column label="姓名" prop="patientName"></el-table-column>
-        <el-table-column label="年龄" prop="age"></el-table-column>
-        <el-table-column label="性别" prop="sex"></el-table-column>
-        <el-table-column label="取消" prop="cancelId">
+        <el-table-column label="手术间" prop="roomName" width="80">
           <template #default="scope">
-            {{ scope.row.cancelId }}
+            <el-select v-model="scope.row.roomCode" @change="(roomCode) => handleArrangementChange(scope.row.recordId, 'room_code', roomCode)">
+              <el-option v-for="item in allRooms" :value="item.code" :label="item.name" :disabled="item.statusFlag === 2"></el-option>
+            </el-select>
           </template>
         </el-table-column>
-        <el-table-column label="诊断" prop="diagBeforeCode"></el-table-column>
+        <el-table-column label="病房" prop="wardName"></el-table-column>
+        <el-table-column label="床号" prop="bedNo" width="45"></el-table-column>
+        <el-table-column label="住院号" prop="inpatientNo" width="60"></el-table-column>
+        <el-table-column label="姓名" prop="patientName" width="60"></el-table-column>
+        <el-table-column label="年龄" prop="age" width="45"></el-table-column>
+        <el-table-column label="性别" prop="sex" width="45"></el-table-column>
         <el-table-column label="手术名称" prop="opName"></el-table-column>
-        <el-table-column label="麻醉方式" prop="hocusName"></el-table-column>
-        <el-table-column label="麻醉医生" prop="doctorMzYsName"></el-table-column>
-        <el-table-column label="麻醉护士" prop="doctorMzHsName"></el-table-column>
-        <el-table-column label="手术医生" prop="doctorZdName"></el-table-column>
-        <el-table-column label="实际手术医生" prop="applyDate"></el-table-column>
-        <el-table-column label="机械护士" prop="nurseQxName"></el-table-column>
-        <el-table-column label="巡回护士" prop="nurseXhName"></el-table-column>
-        <el-table-column label="申请医生" prop="applyDocName"></el-table-column>
-        <el-table-column label="分类" prop="urgentClinicFlag">
+        <el-table-column label="麻醉方式" prop="hocusName" width="60"></el-table-column>
+        <el-table-column label="麻醉医生" prop="doctorMzYsName" width="60"></el-table-column>
+        <el-table-column label="手术医生" width="60">
+          <template #default="scope">
+            <div style="width: 100%; min-height: 30px;" @click="beforeSearch(scope.row, 'doctorZd')">{{ scope.row.doctorZdName }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="器械护士" width="60">
+          <template #default="scope">
+            <div style="width: 100%; min-height: 30px;" @click="beforeSearch(scope.row, 'nurseQx')">{{ scope.row.nurseQxName }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="巡回护士" width="60">
+          <template #default="scope">
+            <div style="width: 100%; min-height: 30px;" @click="beforeSearch(scope.row, 'nurseXh')">{{ scope.row.nurseXhName }}</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="申请医生" prop="applyDocName" width="60"></el-table-column>
+        <el-table-column label="诊断" prop="diagBeforeOp"></el-table-column>
+        <el-table-column label="分类" width="70">
           <template #default="scope">
-            <span v-if="scope.row.urgentClinicFlag === '1'">急诊</span>
-            <span v-else>择期</span>
+            <el-select v-model="scope.row.urgentClinicFlag">
+              <el-option label="普通" value="0"></el-option>
+              <el-option label="急诊" value="1"></el-option>
+              <el-option label="择期" value="2"></el-option>
+              <el-option label="限期" value="3"></el-option>
+            </el-select>
           </template>
         </el-table-column>
-        <el-table-column label="手术班次" prop="ssbcName"></el-table-column>
-        <el-table-column label="级别" prop="opScaleName"></el-table-column>
-        <el-table-column label="体外标志" prop="twFlag">
+        <el-table-column label="手术班次" width="70">
           <template #default="scope">
-            <span v-if="scope.row.twFlag === '1'">
-              <el-tag>√</el-tag>
-            </span>
+            <el-select v-model="scope.row.ssbc">
+              <el-option label="正常" value="1"></el-option>
+              <el-option label="加班" value="2"></el-option>
+            </el-select>
           </template>
         </el-table-column>
+        <el-table-column label="级别" width="95">
+          <template #default="scope">
+            <el-select v-model="scope.row.opScale">
+              <el-option label="一级手术" value="4"></el-option>
+              <el-option label="二级手术" value="3"></el-option>
+              <el-option label="三级手术" value="2"></el-option>
+              <el-option label="四级手术" value="1"></el-option>
+            </el-select>
+          </template>
+        </el-table-column>
+<!--        <el-table-column label="体外标志" prop="twFlag">-->
+<!--          <template #default="scope">-->
+<!--            <span v-if="scope.row.twFlag === '1'">-->
+<!--              <el-tag>√</el-tag>-->
+<!--            </span>-->
+<!--          </template>-->
+<!--        </el-table-column>-->
+        <el-table-column label="手术台次" prop="sstc"></el-table-column>
         <el-table-column label="备注" prop="remark"></el-table-column>
+        <el-table-column label="手术开始时间" prop="opStartDate"></el-table-column>
+        <el-table-column label="手术结束时间" prop="opEndDate"></el-table-column>
+        <el-table-column label="麻醉开始时间" prop="anstStartDate"></el-table-column>
+        <el-table-column label="麻醉结束时间" prop="anstEndDate"></el-table-column>
+        <el-table-column fixed="right" label="操作" width="60">
+          <template #default="scope">
+            <el-button link type="danger" icon="Delete" @click.prevent="beforeCancelSurgery(scope.row)">
+              取消
+            </el-button>
+          </template>
+        </el-table-column>
       </el-table>
       <el-pagination
-        :current-page="currentPage"
-        :page-size="pageSize"
-        :total="shouShuData.length"
-        layout=" total,prev, pager, next"
-        @current-change="handleCurrentChange"
+          :current-page="currentPage"
+          :page-size="pageSize"
+          :total="surgeryList.length"
+          layout="total,prev, pager, next"
+          @current-change="handleCurrentChange"
       ></el-pagination>
-    </el-main>
-  </el-container>
-  <el-dialog v-model="modifySurgeryTime.dialog" :close-on-click-modal="false" title="编辑手术时间">
-    手术时间:
-    <el-date-picker
-      v-model="opDate"
-      :shortcuts="shortcuts"
-      end-placeholder="结束日期"
-      placeholder="选择日期"
-      range-separator="至"
-      size="small"
-      start-placeholder="开始日期"
-      style="width: 400px"
-      type="datetimerange"
-    ></el-date-picker>
-    <br />
-    <br />
-    麻醉时间:
-    <el-date-picker
-      v-model="anstDate"
-      :shortcuts="shortcuts"
-      end-placeholder="结束日期"
-      placeholder="选择日期"
-      range-separator="至"
-      size="small"
-      start-placeholder="开始日期"
-      style="width: 400px"
-      type="datetimerange"
-    ></el-date-picker>
+    </template>
+  </page-layer>
+  <el-dialog v-model="modifySurgeryTime.dialog" :close-on-click-modal="false" title="编辑手术时间" width="400px">
+    <div style="margin-bottom: 4px">
+      手术时间:
+    </div>
+    <el-date-picker v-model="opDate" :shortcuts="shortcuts" end-placeholder="结束日期" placeholder="选择日期"
+      range-separator="至" size="small" start-placeholder="开始日期" type="datetimerange"
+      style="width: 300px">
+    </el-date-picker>
+    <div style="margin-top: 16px; margin-bottom: 4px">
+      麻醉时间:
+    </div>
+    <el-date-picker v-model="anstDate" :shortcuts="shortcuts" end-placeholder="结束日期" placeholder="选择日期"
+      range-separator="至" size="small" start-placeholder="开始日期" type="datetimerange"
+      style="width: 300px">
+    </el-date-picker>
     <template #footer>
       <el-button icon="RefreshLeft" type="info" @click="modifySurgeryTime.dialog = false">取消</el-button>
       <el-button icon="Check" type="primary" @click="confirmDialog">确定</el-button>
     </template>
   </el-dialog>
+  <search v-if="showSearch" :title="titleOfSearch" target="physician" show-emp-dept @close="showSearch = false" @click-item="handleClickSearchResult"></search>
 </template>
 
 <script name="SurgeryArrangement" setup>
-import { getASurgicalWard, huoQuShouShuAnPaiXinXi, modifySurgeryTimeApi } from '@/api/surgical-management/surgery-arrangement'
+import {
+  getASurgicalWard,
+  getSurgeryRooms,
+  huoQuShouShuAnPaiXinXi,
+  modifySurgeryTimeApi,
+  cancelSurgery,
+  updateArrangement
+} from '@/api/surgical-management/surgery-arrangement'
 import { shortcuts } from '@/data/shortcuts.js'
 import { getDateRangeFormatDate, getDateRangeFormatDateTime } from '@/utils/date'
 import { listIsBlank, stringIsBlank, stringNotBlank } from '@/utils/blank-utils'
 import store from '@/store'
-import { ElMessage } from 'element-plus'
+import {ElMessage, ElMessageBox} from 'element-plus'
+import PageLayer from '@/layout/PageLayer.vue'
+import Search from '@/components/search/Index.vue'
 
 const window = computed(() => {
   return store.state.app.windowSize
 })
 
 let currentPage = $ref(1)
-let pageSize = $ref(20)
-let jiZhenJiShu = $ref(0)
+let pageSize = $ref(30)
+let emergencyCount = $ref(0)
 
 let wardList = $ref([])
+let allRooms = $ref([])
 let statusList = $ref([
-  { code: 1, name: '申请' },
-  { code: 2, name: '安排' },
-  { code: 3, name: '取消' },
-  { code: 4, name: '全部' },
+  { code: '0', name: '全部'},
+  { code: '1', name: '申请' },
+  { code: '2', name: '安排' },
+  { code: '3', name: '确认' },
+  { code: 'd', name: '取消' },
 ])
 let dateRange = $ref([shortcuts[0].value[0], shortcuts[0].value[1]])
 let queryParam = $ref({
   ward: '',
   patNo: '',
-  status: 4,
+  status: '0',
   startTime: '',
   endTime: '',
-  dateType: 'op_datetime', // applyDate 日期类型是手术日期还是申请日期
   jzFlag: false,
 })
 
-let shouShuData = $ref([])
+let surgeryList = $ref([])
 
 const clickQuery = () => {
   if (listIsBlank(dateRange)) {
@@ -175,12 +210,12 @@ const clickQuery = () => {
   queryParam.startTime = dateS.startTime
   queryParam.endTime = dateS.endTime
   huoQuShouShuAnPaiXinXi(queryParam).then((res) => {
-    shouShuData = res
-    jiZhenJiShu = 0
-    shouShuData.forEach((item) => {
+    surgeryList = res
+    emergencyCount = 0
+    surgeryList.forEach((item) => {
       if (stringNotBlank(item.urgentClinicFlag)) {
         if (item.urgentClinicFlag === '1') {
-          jiZhenJiShu++
+          emergencyCount++
         }
       }
     })
@@ -227,20 +262,118 @@ const confirmDialog = () => {
   modifySurgeryTimeApi(modifySurgeryTime)
 }
 
+const differChargedRows = ({ row }) => {
+  if (row.chargeSum && row.chargeSum > 0) {
+    return 'charged-row'
+  }
+}
+
+const beforeCancelSurgery = (row) => {
+  if (row.status === '3') {
+    ElMessage({
+      message: '已完成的手术不可取消。',
+      type: 'error',
+      duration: 2500,
+      showClose: true
+    })
+    return
+  }
+  ElMessageBox.confirm("是否确认取消该手术？", "提示", {
+    type: 'warning'
+  }).then(() => {
+    cancelSurgery(row.recordId).then(res => {
+      ElMessage({
+        message: res,
+        type: 'success',
+        duration: 2500,
+        showClose: true
+      })
+    })
+  })
+}
+
+let showSearch = $ref(false)
+let titleOfSearch = $ref('')
+let currentRow = $ref({})
+let currentKey = $ref('')
+const beforeSearch = (row, key) => {
+  currentRow = row
+  switch (key) {
+    case 'doctorZd':
+      currentKey = 'doctor_zd'
+      titleOfSearch = '手术医生';
+      break
+    case 'nurseQx':
+      currentKey = 'nurse_qx'
+      titleOfSearch = '器械护士';
+      break
+    case 'nurseXh':
+      currentKey = 'nurse_xh'
+      titleOfSearch = '巡回护士';
+      break
+  }
+  showSearch = true
+}
+const handleClickSearchResult = (item) => {
+  switch (currentKey) {
+    case 'doctor_zd':
+      currentRow.doctorZd = item.code
+      currentRow.doctorZdName = item.name
+      break
+    case 'nurse_qx':
+      currentRow.nurseQx = item.code
+      currentRow.nurseQxName = item.name
+      break
+    case 'nurse_xh':
+      currentRow.nurseXh = item.code
+      currentRow.nurseXhName = item.name
+      break
+  }
+  showSearch = false
+  handleArrangementChange(currentRow.recordId, currentKey, item.code)
+}
+
+const handleArrangementChange = (orderId, key, value) => {
+  updateArrangement(orderId, key, value)
+}
+
 onMounted(() => {
   getASurgicalWard().then((res) => {
     wardList = res
   })
+  getSurgeryRooms().then(res => {
+    allRooms = res
+  })
   clickQuery()
 })
 </script>
 
-<style>
-.el-table .error {
-  background-color: #fa7c7c;
+<style scoped>
+:deep(.el-table tbody tr:hover>td) {
+  background-color: unset !important;
+}
+
+:deep(.el-table .el-table-fixed-column--right .cell) {
+  width: 100%;
+  background: white;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+}
+
+:deep(.el-table .charged-row) {
+  background: rgba(142, 252, 142, 0.8);
+}
+
+:deep(.el-table .cell-border) {
+  border: 1px solid #555;
+  color: black;
+  padding: 0;
 }
 
-.el-table .success {
-  background-color: #72c449;
+:deep(.el-input__inner) {
+  color: black !important;
 }
 </style>

src/views/surgical-management/SurgeryRecord.vue

@@ -0,0 +1,23 @@
+<template>
+  <page-layer>
+    <template #header>
+      住院号：
+      <el-input style="width: 100px"></el-input>
+      &nbsp;&nbsp;病房：
+      <el-select style="width: 100px"></el-select>
+      &nbsp;&nbsp;状态：
+      <el-select style="width: 100px"></el-select>
+    </template>
+    <template #aside>
+      <el-table></el-table>
+    </template>
+    <template #main>
+      msdsd
+    </template>
+  </page-layer>
+</template>
+
+<script setup>
+import PageLayer from "@/layout/PageLayer.vue";
+
+</script>