dev

src/components/common/goods/GoodsDetail.vue

@@ -45,17 +45,7 @@
         </el-table-column>
         <el-table-column label="使用方法" width="200">
           <template #default="scope">
-            <el-popover
+              <Usage v-model="usage"></Usage>
-                placement="bottom"
-                title=""
-                :width="200"
-                trigger="click"
-            >
-              <template #reference>
-                <el-input v-model="usage" placeholder="使用方法" style="width: 100px"></el-input>
-              </template>
-              <Usage :usageObj="usageObj" @clickItem="clickItem"></Usage>
-            </el-popover>
           </template>
         </el-table-column>
         <el-table-column prop="selectedPrice" label="单价" width="200">
@@ -132,7 +122,6 @@ import {post} from "@/utils/request.ts";
 import {ElMessage} from "element-plus";
 import {Delete} from "@element-plus/icons-vue";
 import Usage from "./goodsDetail/Usage.vue"
-import usageObj from "@/assets/config/directory/drugMedcWayCode.json"
 import {API} from "@/assets/config/API.ts";
 
 const props = defineProps({
@@ -259,9 +248,6 @@ const colosInfo = () => {
   getTotalPrice()
   emit('totalPriceChange')
 }
-const clickItem = (value: any) => {
-  usage.value = value
-}
 </script>
 <style scoped lang="scss">
 :deep(.el-table__cell) {

src/components/common/goods/goodsDetail/Usage.vue

@@ -1,25 +1,42 @@
 <script setup lang="ts">
-import {defineProps, onMounted} from "vue";
+import {defineModel, ref} from "vue";
+import usageObj from "@/assets/config/directory/drugMedcWayCode.json"
 
-const props = defineProps({
+const isVisible = ref<any>(false)
-  usageObj: {
+const usage = defineModel()
-    type: Object,
-    default: () => []
-  }
-});
 const emit = defineEmits(['clickItem'])
 const clickItem = (item: any) => {
-  console.log(item)
+  usage.value = item[1]
-  emit("clickItem",item[0])
+
+}
+const focus = () => {
+  isVisible.value = true
+}
+const handlerBlur = () => {
+  isVisible.value = false
 }
 </script>
 
 <template>
+  <el-popover
+      :visible="isVisible"
+      placement="bottom"
+      title=""
+      :width="200"
+      trigger="click"
+  >
+    <template #reference>
+      <el-input v-model="usage" placeholder="使用方法" @focus="focus" @blur="handlerBlur"></el-input>
+    </template>
     <div class="box">
-    <ul class="item-list">
+      <div class="item-list">
-      <div class="item" v-for="(item, index) in Object.entries(props.usageObj)" :key="index" @click="clickItem(item)">{{ item[1] }}</div>
+        <div class="item" v-for="(item, index) in Object.entries(usageObj)" :key="index" @click="clickItem(item)">
-    </ul>
+          {{ item[1] }}
         </div>
+      </div>
+    </div>
+  </el-popover>
+
 </template>
 
 <style scoped lang="scss">
@@ -35,10 +52,12 @@ const clickItem=(item:any)=>{
   border: 1px solid #ddd;
   z-index: 999;
 }
+
 .item-list {
   display: flex;
   flex-wrap: wrap;
 }
+
 .item {
   display: flex;
   width: 160px;
@@ -48,15 +67,18 @@ const clickItem=(item:any)=>{
   border: 1px solid #ededed;
   align-items: center;
   justify-content: center;
+
   &:hover {
     color: #fff;
     background: #4d6de4;
   }
+
   &.last-item {
     margin-right: 0; /* 最后一个元素不加右边距 */
   }
 
 }
+
 .active {
   background: #4d6de4 !important;
   color: #fff !important;

src/views/doc.vue

@@ -16,7 +16,7 @@ function convertToTreeData(data: any, parentPath: string = '') {
 
     if (item.path && item.comment) {
       treeData.push({
-        label: `${item.comment} (${item.path})`,
+        label: `${item.comment}`,
         path: item.path,
       });
     } else {
@@ -131,7 +131,24 @@ const apiInfo:any=ref(null);
   background-color: #ffffff;
   border-right: 1px solid #e4e7ed;
   overflow-y: auto;
+  // 新增二级导航缩进样式
+  :deep(.el-tree-node__children) {
+    padding-left: 20px; // 调整这个值可以控制缩进量
+    position: relative;
 
+    &::before {
+      content: "";
+      position: absolute;
+      left: 10px;
+      top: 0;
+      bottom: 0;
+      width: 1px;
+      background-color: #e4e7ed;
+    }
+    .el-tree-node__content {
+      padding-left: 10px !important; // 确保子节点也有适当缩进
+    }
+  }
   :deep(.el-tree-node__content) {
     height: 40px;
     line-height: 40px;