feat: 应急管理-应急架构体系-队伍管理 一级队伍支持编辑

src/views/emergency/organization/team-management/leader-teams/LeaderTeam.vue

@@ -40,16 +40,14 @@
           <div
             v-show="showTeamOperation"
             class="leader-team__operation"
-            :class="{ 'adjust-menu-position': props.teamData.level !== 2 }"
+            :class="{ 'adjust-menu-position': props.teamData.level === 3 }"
             @click.stop
           >
             <div v-if="props.teamData.level !== 3" @mousedown="showAddTeamDialog()" class="leader-team__operation-item">
               新建队伍
             </div>
 
-            <div v-if="props.teamData.level !== 1" @click="handleDelete()" class="leader-team__operation-item">
-              删除队伍
-            </div>
+            <div @click="handleDelete()" class="leader-team__operation-item"> 删除队伍 </div>
           </div>
         </div>
       </template>
@@ -82,7 +80,7 @@
 
   const indentation = `${props.teamData.level * 10}px`;
 
-  const { leaderTeamTree, curTeam, loadingTeams } = storeToRefs(useTeamStore());
+  const { curTeam, loadingTeams } = storeToRefs(useTeamStore());
   const { getLeaderTeams, createTeam, deleteTeam, getSelectTeamInfo } = useTeamStore();
 
   const showTeamOperation = ref(false);
@@ -141,8 +139,6 @@
     // 单击事件
     if (event.detail === 1) {
       clickTimeout = setTimeout(() => {
-        if (props.teamData.teamId === leaderTeamTree.value.teamId) return;
-
         getSelectTeamInfo(props.teamData);
       }, 200);
     }
@@ -180,6 +176,7 @@
     .leader-team__title {
       height: 38px;
       width: 100%;
+      min-width: 95px;
       display: flex;
       justify-content: space-between;
       align-items: center;

src/views/emergency/organization/team-management/leader-teams/LeaderTeamBar.vue

@@ -4,12 +4,21 @@
 
     <div class="leader-team-bar__teams">
       <el-scrollbar>
-        <el-collapse v-model="activeTeam">
+        <div class="leader-team-bar__add-team" v-if="leaderTeamTree.teamId < 0" @click="showAddTeam">
+          <div class="leader-team-bar__add-team__icon">
+            <img src="@/assets/icons/nine-square-grid/add.png" />
+          </div>
+          <div>添加一级队伍</div>
+        </div>
+
+        <el-collapse v-model="activeTeam" v-else>
           <LeaderTeam :teamData="leaderTeamTree" :parentId="leaderTeamTree.teamId" @expand="expandCollapse" />
         </el-collapse>
       </el-scrollbar>
     </div>
   </div>
+
+  <AddTeam ref="addTeamRef" @emit-team-name="handleCreateTeam" />
 </template>
 
 <script lang="ts" setup>
@@ -17,20 +26,30 @@
   import { storeToRefs } from 'pinia';
   import { ElScrollbar, ElCollapse } from 'element-plus';
   import LeaderTeam from './LeaderTeam.vue';
+  import AddTeam from './components/AddTeam.vue';
   import useTeamStore from '../store/userTeam';
 
   const activeTeam = ref<number[]>([]);
+  const addTeamRef = ref<InstanceType<typeof AddTeam>>();
 
   const { leaderTeamTree } = storeToRefs(useTeamStore());
-  const { getLeaderTeams } = useTeamStore();
+  const { getLeaderTeams, createFirstLevelTeam } = useTeamStore();
 
   function expandCollapse(collapseId: number) {
     activeTeam.value.push(collapseId);
   }
 
+  function showAddTeam() {
+    addTeamRef.value?.dialogShow();
+  }
+
+  async function handleCreateTeam(teamName: string) {
+    await createFirstLevelTeam(teamName);
+    getLeaderTeams();
+  }
+
   onMounted(async () => {
     await getLeaderTeams();
-
     activeTeam.value.push(leaderTeamTree.value.teamId); // 默认展开一级队伍
   });
 </script>
@@ -52,6 +71,36 @@
       color: #333333;
       padding: 0px 16px;
       padding-right: 4px;
+
+      .leader-team-bar__add-team {
+        height: 34px;
+        width: 100cpx;
+        display: flex;
+        margin-right: 16px;
+        cursor: pointer;
+
+        &__icon {
+          margin-right: 12px;
+          position: relative;
+
+          img {
+            height: 24px;
+            width: 24px;
+          }
+
+          &::after {
+            content: '+';
+            position: absolute;
+            top: -4px;
+            left: 0;
+            right: 0;
+            font-size: 20px;
+            font-weight: 500;
+            color: #1777ff;
+            text-align: center;
+          }
+        }
+      }
     }
   }
 

src/views/emergency/organization/team-management/store/userTeam.ts

@@ -13,7 +13,7 @@ import {
 const useTeamStore = defineStore('useTeam', () => {
   // 左侧的领导队伍树
   const leaderTeamTree = ref<LeaderTeamType>({
-    teamId: 0,
+    teamId: -1, // -1默认为无队伍
     teamName: '',
     level: 1,
     memberCount: 0,
@@ -27,9 +27,12 @@ const useTeamStore = defineStore('useTeam', () => {
   const loadingTeamInfo = ref(false);
 
   async function getLeaderTeams() {
+    loadingTeams.value = true;
+
     const res = await queryLeaderTeam();
+    if (res) leaderTeamTree.value = setLevel(res);
 
-    leaderTeamTree.value = setLevel(res);
+    loadingTeams.value = false;
     return leaderTeamTree.value;
   }
 
@@ -41,6 +44,16 @@ const useTeamStore = defineStore('useTeam', () => {
     };
   }
 
+  async function createFirstLevelTeam(teamName: string) {
+    loadingTeams.value = true;
+
+    // 一级队伍parentId默认为0
+    const data = { parentId: 0, teamName };
+    await saveEmergencyTeamInfo(data).finally(() => {
+      loadingTeams.value = false;
+    });
+  }
+
   async function createTeam(team: LeaderTeamType, teamName: string) {
     loadingTeams.value = true;
 
@@ -60,12 +73,14 @@ const useTeamStore = defineStore('useTeam', () => {
 
   async function deleteTeam(team: LeaderTeamType) {
     // 由于请求接口有延迟，先本地删除后再调用接口
-    leaderTeamTree.value = filterNode(leaderTeamTree.value, team.teamId)!;
+    if (leaderTeamTree.value.teamId === team.teamId) {
+      clearData();
+    } else leaderTeamTree.value = filterNode(leaderTeamTree.value, team.teamId)!;
+
     deleteEmergencyTeam(team.teamId);
 
     if (team.teamId === curTeam.value?.teamId) {
-      curTeam.value = undefined;
-      teamAndPersonInfo.value = undefined;
+      clearCurTeam();
     }
   }
 
@@ -119,12 +134,16 @@ const useTeamStore = defineStore('useTeam', () => {
 
   function clearData() {
     leaderTeamTree.value = {
-      teamId: 0,
+      teamId: -1,
       teamName: '',
       level: 1,
       memberCount: 0,
       children: [],
     };
+    clearCurTeam();
+  }
+
+  function clearCurTeam() {
     curTeam.value = undefined;
     teamAndPersonInfo.value = undefined;
   }
@@ -136,6 +155,7 @@ const useTeamStore = defineStore('useTeam', () => {
     loadingTeams,
     loadingTeamInfo,
     getLeaderTeams,
+    createFirstLevelTeam,
     createTeam,
     deleteTeam,
     refreshCurTeamInfo,