refactor(supply): 供应链报表添加自定义分组功能

src/views/bi/supply/index.vue

@@ -2,8 +2,10 @@
   <div class="app-container">
     <el-card class="container">
       <template #header>
-        <div class="card-header">
+        <div class="card-header-left">
           <span>常用报表</span>
+        </div>
+        <div class="card-header-right">
           <el-button class="custom"
             type="primary"
             link
@@ -38,13 +40,15 @@
         </div>
       </div>
     </el-card>
+    <!-- 自定义报表分组 -->
     <el-dialog title="编辑常用报表"
       v-model="visible">
       <div class="wrap">
+        <!-- 列表 -->
         <div class="left">
           <draggable v-model="reportList"
             group="reports"
-             ghost-class="dragging-item-left"
+            ghost-class="dragging-item-left"
             item-key="id">
             <template #item="{ element }">
               <div class="link_item">
@@ -58,6 +62,7 @@
             </template>
           </draggable>
         </div>
+        <!-- 编辑区 -->
         <div class="right">
           <div class="group-container">
             <el-card v-for="group in groups"
@@ -65,8 +70,24 @@
               class="group_card"
               :style="{ width: '100%' }">
               <template #header>
-                <div class="card-header">
-                  <span>{{ group.groupName }}</span>
+                <div class="card-header-left">
+                  <span v-if="!group.showEdit">{{ group.groupName }}</span>
+                  <el-input v-else
+                    v-model="group.groupName"
+                    ref="groupNameRef"
+                    @blur="group.showEdit = false"></el-input>
+                </div>
+                <div class="card-header-right">
+                  <el-button type="primary"
+                    text
+                    @click="changeGroupName(group)">
+                    重命名
+                  </el-button>
+                  <el-button type="danger"
+                    text
+                    @click="removeGroupName(group)">
+                    删除
+                  </el-button>
                 </div>
               </template>
               <draggable v-model="group.items"
@@ -87,6 +108,16 @@
               </draggable>
             </el-card>
           </div>
+          <!-- 新增分组 -->
+          <div class="add-group">
+            <el-button type="primary"
+              @click="groups.push({ groupName: '新分组', showEdit: false, items: [] })">
+              <el-icon>
+                <Plus />
+              </el-icon>
+              新增分组
+            </el-button>
+          </div>
         </div>
       </div>
     </el-dialog>
@@ -96,9 +127,11 @@
 <script setup>
 import { getReportListAPI, getReportListBySelfAPI, getReportListByGroupAPI, addReportGroupAPI } from '@/api'
 import draggable from 'vuedraggable'
+const { proxy } = getCurrentInstance()
 const visible = ref(false)
 const groups = ref([])
 
+
 const baseURL = ref(import.meta.env.VITE_APP_REPORT_URL + '/report')
 const reportList = ref([])
 const getReportList = async () => {
@@ -129,17 +162,33 @@ const groupChange = async (e) => {
   await addReportGroupAPI(groups.value)
 }
 getReportList()
+
+// 修改分组名
+const changeGroupName = (group) => {
+  group.showEdit = true
+  nextTick(() => {
+    proxy.$refs['groupNameRef'][0].focus()
+  })
+}
+// 删除分组
+const removeGroupName = (group) => {
+  // 判断组内还有下属表，给提示不让删除
+  if (group.items.length > 0) {
+    proxy.$message.error('分组内还有报表，无法删除，可重命名')
+    return 
+  }
+  // 确认删除吗？
+  proxy.$modal.confirm('确认删除分组"' + group.groupName + '"？删除后下属报表自动回到左侧列表中').then(async () => {
+    // 把当前分组的报表放到左侧
+    reportList.value = reportList.value.concat(group.items)
+    const index = groups.value.indexOf(group)
+    groups.value.splice(index, 1) 
+  })
+}
 </script>
 
 <style scoped
   lang="scss">
-  .el-card__header {
-    .custom {
-      float: right;
-      padding: 3px 0;
-    }
-  }
-
   .group_item {
     .group_name {
       display: flex;
@@ -172,9 +221,10 @@ getReportList()
     gap: 10px;
   }
 
-  .group-container{
+  .group-container {
     padding-right: 20px;
   }
+
   .group_card {
     margin-top: 20px;
   }
@@ -204,8 +254,29 @@ getReportList()
   .dragging-item-left {
     background-color: transparent;
   }
+
   .dragging-item {
     background-color: #a1ccf2;
   }
 
+  /* card 头部 */
+  ::v-deep(.el-card__header) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .card-header-right{
+      .el-button{
+        margin: 0;
+        padding: 10px;
+      }
+    }
+  }
+
+  .add-group{
+    margin-top: 20px;
+    .el-button{
+      width: 100%;
+    }
+  }
+
 </style>
\ No newline at end of file