版本更新

openhis-ui-vue3/src/views/inpatientNurse/medicalOrderExecution/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <div style="display: flex; justify-content: space-between">
+    <div style="width: 20%; height: 90vh; border-right: solid 2px #e4e7ed">
+      <div
+        style="
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+          border-bottom: solid 2px #e4e7ed;
+        "
+      >
+        <el-icon
+          @click="refresh"
+          class="refresh-icon"
+          style="cursor: pointer; font-size: 20px; margin-right: 10px"
+        >
+          <Refresh />
+        </el-icon>
+      </div>
+      <el-tabs v-model="active" class="demo-tabs centered-tabs tab-header" @tab-click="handleClick">
+        <el-tab-pane label="在科" name="first" style="padding: 15px 10px">
+          <PatientList />
+        </el-tab-pane>
+        <el-tab-pane label="转科" name="second" style="padding: 0 10px">
+          <PatientList />
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+    <div style="width: 100%">
+      <el-tabs
+        v-model="activeName"
+        class="demo-tabs centered-tabs"
+        @tab-change="handleClick"
+      >
+        <el-tab-pane 
+          v-for="tab in prescriptionTabs" 
+          :key="tab.name"
+          :lazy="true" 
+          :label="tab.label" 
+          :name="tab.name"
+        >
+          <!-- 使用模板引用 -->
+          <PrescriptionList 
+            :exeStatus="exeStatus" 
+            :ref="(el) => setPrescriptionRef(el, tab.name)" 
+          />
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { getCurrentInstance } from 'vue';
+import PatientList from './components/patientList.vue';
+import PrescriptionList from './components/prescriptionList.vue';
+
+const activeName = ref('preparation');
+const active = ref('first');
+const exeStatus = ref(1);
+const { proxy } = getCurrentInstance();
+
+// 存储子组件引用的对象
+const prescriptionRefs = ref({});
+
+// 定义处方列表tabs配置
+const prescriptionTabs = [
+  { label: '待执行', name: 'preparation' },
+  { label: '已执行', name: 'completed' },
+  { label: '不执行', name: 'stopped' },
+  { label: '取消执行', name: 'cancel' }
+];
+
+// 设置处方组件引用
+function setPrescriptionRef(el, name) {
+  if (el) {
+    prescriptionRefs.value[name] = el;
+  }
+}
+
+function handleClick(tabName) {
+  // tabName是tab的name属性值
+  const activeTabName = tabName || activeName.value;
+  
+  switch(activeTabName){
+    case 'preparation':
+      exeStatus.value = 1;
+      break;
+    case 'completed':
+      exeStatus.value = 6;
+      break;
+    case 'stopped':
+      exeStatus.value = 5;
+      break;
+    case 'cancel':
+      exeStatus.value = 9;
+      break;
+  }
+  
+  // 调用子组件方法
+  nextTick(() => {
+    if (prescriptionRefs.value[activeTabName] && 
+        typeof prescriptionRefs.value[activeTabName].handleGetPrescription === 'function') {
+      prescriptionRefs.value[activeTabName].handleGetPrescription();
+    }
+  });
+}
+
+provide('handleGetPrescription', (value) => {
+  prescriptionRefs.value[activeName.value].handleGetPrescription();
+});
+</script>
+
+<style scoped>
+.centered-tabs :deep(.el-tabs__nav-wrap) {
+  display: flex;
+  justify-content: center;
+}
+
+.centered-tabs :deep(.el-tabs__nav-scroll) {
+  display: flex;
+  justify-content: center;
+}
+
+.tab-header :deep(.el-tabs__item) {
+  height: 50px !important;
+}
+
+.centered-tabs :deep(.el-tabs__nav) {
+  display: flex;
+  justify-content: center;
+}
+:deep(.el-tabs__header) {
+  margin: 0;
+}
+</style>