提交代码

src/layout/index.vue

@@ -4,9 +4,12 @@
             <div class="layout_header">
                 <div class="header_left">
                     <div class="header_info">
-                        <el-select v-model="projectId" @change="projectIdChange">
-                            <el-option v-for="item in projectData" :key="item.projId" :label="item.projName" :value="item.projId" />
-                        </el-select>
+                        <div>
+                            <div class="project-name">{{ projectName }}</div>
+                            <el-select v-model="projectId" class="w-full" @change="projectIdChange">
+                                <el-option v-for="item in projectData" :key="item.projId" :label="item.projName" :value="item.projId" />
+                            </el-select>
+                        </div>
                     </div>
                 </div>
                 <div class="header_center">
@@ -35,7 +38,7 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 import { useAppStore } from '~src/store'
-import { getArrValue } from 'js-fast-way'
+import { arrIndex, getArrValue } from 'js-fast-way'
 import mainApi from '~api/data'
 import { useRouter } from 'vue-router'
 
@@ -52,18 +55,22 @@ onMounted(() => {
 //获取项目列表
 const projectData = ref([])
 const projectId = ref(null)
+const projectName = ref('')
 const getProjectList = async () => {
     const { data } = await mainApi.getProjectList()
     const res = getArrValue(data)
     projectData.value = res
     if (res.length > 0) {
         projectId.value = res[0].projId
+        projectName.value = res[0].projName
         useApp.setProjectId(res[0].projId)
     }
 }
 
 //项目切换
 const projectIdChange = (val) => {
+    const index = arrIndex(projectData.value, 'projId', val)
+    projectName.value = projectData.value[index].projName
     useApp.setProjectId(val)
 }
 

src/layout/layout.scss

@@ -19,6 +19,12 @@
                     display: flex;
                     align-items: center;
                     justify-content: flex-start;
+                    .project-name {
+                        padding-right: 50px;
+                        position: relative;
+                        top: 30px;
+                        z-index: -1;
+                    }
                 }
             }
             .header_center {