解决合并冲突

openhis-ui-vue3/src/views/inpatientDoctor/home/emr/index.vue

@@ -5,26 +5,31 @@
 -->
 <template>
   <div class="emr-use-container">
-    <div class="template-tree-container">
-      <div class="search-box">
-        <el-input placeholder="病历名称搜索..." v-model="queryParams.name">
-          <template #append>
-            <el-button @click="queryTemplateTree">查询</el-button>
-          </template>
-        </el-input>
+    <div class="disBtn" :class="{'disLeftBtnNor':leftShow,'disLeftBtnAct':!leftShow}" @click="disNode"><img src="../../../../assets/icons/svg/foldup.svg"></div>
+    <div class="disBtn" :class="{'disRightBtnNor':rightShow,'disRightBtnAct':!rightShow}" @click="disNode_R"><img src="../../../../assets/icons/svg/foldup.svg"></div>
+    <transition name="el-zoom-in-left">
+      <div class="template-tree-container" v-if="leftShow">
+        <div class="search-box">
+          <el-input placeholder="病历名称搜索..." v-model="queryParams.name">
+            <template #append>
+              <el-button @click="queryTemplateTree">查询</el-button>
+            </template>
+          </el-input>
+        </div>
+        <el-scrollbar class="template-tree-scrollbar">
+          <el-tree
+              ref="templateTree"
+              :data="templateData"
+              :props="defaultProps"
+              auto-expand-parent
+              node-key="id"
+              @node-click="handleNodeClick"
+              class="template-tree"
+          ></el-tree>
+        </el-scrollbar>
       </div>
-      <el-scrollbar class="template-tree-scrollbar">
-        <el-tree
-          ref="templateTree"
-          :data="templateData"
-          :props="defaultProps"
-          auto-expand-parent
-          node-key="id"
-          @node-click="handleNodeClick"
-          class="template-tree"
-        ></el-tree>
-      </el-scrollbar>
-    </div>
+    </transition>
+
     <div class="operate-container">
       <div class="operate-btns">
         <el-space>
@@ -40,25 +45,29 @@
         </el-scrollbar>
       </div>
     </div>
-    <div class="quickly-container">
-      <el-tabs v-model="quicklyactiveName" type="card">
-        <el-tab-pane label="历史" name="history">
-          <History
-            @historyClick="handleHistoryClick"
-            ref="historyRef"
-            v-model:definitionId="currentSelectTemplate.id"
-          />
-        </el-tab-pane>
-        <el-tab-pane label="模版" name="model">
-          <Template
-            @templateClick="handleTemplateClick"
-            ref="templateRef"
-            v-model:definitionId="currentSelectTemplate.id"
-            @edit="templateEdit"
-          />
-        </el-tab-pane>
-      </el-tabs>
-    </div>
+
+    <transition name="el-zoom-in-left">
+      <div class="quickly-container" v-if="rightShow">
+        <el-tabs v-model="quicklyactiveName" type="card">
+          <el-tab-pane label="历史" name="history">
+            <History
+                @historyClick="handleHistoryClick"
+                ref="historyRef"
+                v-model:definitionId="currentSelectTemplate.id"
+            />
+          </el-tab-pane>
+          <el-tab-pane label="模版" name="model">
+            <Template
+                @templateClick="handleTemplateClick"
+                ref="templateRef"
+                v-model:definitionId="currentSelectTemplate.id"
+                @edit="templateEdit"
+            />
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </transition>
+
     <TemplateEdit
       ref="templateEditRef"
       :formData="editTemplateForm"
@@ -93,6 +102,9 @@ const currentSelectTemplate = ref({
 const currentComponent = ref('');
 const emrComponentRef = ref(null);
 const quicklyactiveName = ref('history');
+const leftShow = ref(true);
+const rightShow = ref(true);
+
 
 // 树配置（模板树）
 const defaultProps = {
@@ -175,7 +187,6 @@ const handleSubmitOk = async (data) => {
   if (currentOperate.value === 'add') {
     //
     try {
-      // debugger;
       if (!patientInfo.value?.encounterId || !patientInfo.value?.patientId) {
         ElMessage.error('请先选择患者！');
         return;
@@ -263,11 +274,77 @@ onMounted(() => {
 });
 
 defineExpose({ state });
+
+const disNode = () => {
+  leftShow.value = !leftShow.value;
+}
+const disNode_R = () => {
+  rightShow.value = !rightShow.value;
+}
 </script>
 <style lang="scss" scoped>
 .emr-use-container {
   display: flex;
   height: 100%;
+  img {
+    width: 200%;
+    height: 200%;
+  }
+  .disBtn {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+  .disLeftBtnNor {
+    cursor: pointer;
+    position: absolute;
+    top: 40%;
+    left: 18%;
+    width: 20px;
+    height: 60px;
+    z-index: 1111;
+    img {
+      transform: rotate(-90deg) ;
+    }
+  }
+  .disLeftBtnAct {
+    cursor: pointer;
+    position: absolute;
+    top: 40%;
+    left: 0;
+    width: 20px;
+    height: 60px;
+    z-index: 1111;
+    img {
+      transform: rotate(90deg);
+    }
+  }
+  .disRightBtnNor {
+    cursor: pointer;
+    position: absolute;
+    top: 40%;
+    right: 18.5%;
+    width: 20px;
+    height: 60px;
+    z-index: 1111;
+    img {
+      transform: rotate(90deg);
+    }
+  }
+  .disRightBtnAct {
+    cursor: pointer;
+    position: absolute;
+    top: 40%;
+    right: 0;
+    width: 20px;
+    height: 60px;
+    z-index: 1111;
+    img {
+      transform: rotate(-90deg);
+    }
+  }
 
   .template-tree-container {
     border-right: 1px solid #ebeef5;
@@ -293,8 +370,9 @@ defineExpose({ state });
   }
 
   .operate-container {
-    width: 300px;
-    flex: auto;
+    width: 100%;
+    //width: 300px;
+    //flex: auto;
     display: flex;
     flex-direction: column;
     padding: 0 8px 8px 8px;
@@ -323,4 +401,12 @@ defineExpose({ state });
     }
   }
 }
+
+@layer utilities {
+  .transition-width {
+    transition-property: width;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+  }
+}
 </style>