refactor(supply/index.vue): 修复表格宽度问题_新增编辑删除自定义分组对接接口

src/api/bi/supply.js

@@ -27,7 +27,7 @@ export function addReportGroupAPI(data) {
     url: '/report/customer/core/group/save',
     method: 'post',
     data
-  }) 
+  })
 }
 
 // 新增/编辑自定义分组
@@ -36,5 +36,13 @@ export function editReportGroupAPI(data) {
     url: '/report/customer/core/group/insertOrUpdate',
     method: 'post',
     data
-  }) 
+  })
+}
+
+// 删除自定义分组
+export function deleteReportGroupAPI(groupId) {
+  return request({
+    url: `/report/customer/core/group/delete?groupId=${groupId}`,
+    method: 'DELETE'
+  })
 }
\ No newline at end of file

src/views/bi/supply/index.vue

@@ -75,7 +75,7 @@
                   <el-input v-else
                     v-model="group.groupName"
                     ref="groupNameRef"
-                    @blur="blue"></el-input>
+                    @blur="groupNameBlur(group)"></el-input>
                 </div>
                 <div class="card-header-right">
                   <el-button type="primary"
@@ -125,7 +125,7 @@
 </template>
 
 <script setup>
-import { getReportListAPI, getReportListBySelfAPI, getReportListByGroupAPI, addReportGroupAPI, editReportGroupAPI } from '@/api'
+import { getReportListAPI, getReportListBySelfAPI, getReportListByGroupAPI, addReportGroupAPI, editReportGroupAPI, deleteReportGroupAPI } from '@/api'
 import draggable from 'vuedraggable'
 const { proxy } = getCurrentInstance()
 const visible = ref(false)
@@ -162,13 +162,23 @@ const groupChange = async (e) => {
 }
 getReportList()
 
-// 修改分组名
+// 修改分组名-触发
 const changeGroupName = (group) => {
   group.showEdit = true
   nextTick(() => {
     proxy.$refs['groupNameRef'][0].focus()
   })
 }
+// 修改分组名-确认
+const groupNameBlur = async (group) => {
+  group.showEdit = false
+  await editReportGroupAPI({
+    groupId: group.groupId,
+    groupName: group.groupName,
+    categoryName: '供应链报表'
+  }) 
+}
+
 // 删除分组
 const removeGroupName = (group) => {
   // 判断组内还有下属表，给提示不让删除
@@ -177,8 +187,9 @@ const removeGroupName = (group) => {
     return
   }
   // 确认删除吗？
-  proxy.$modal.confirm('确认删除分组"' + group.groupName + '"？删除后下属报表自动回到左侧列表中').then(async () => {
+  proxy.$modal.confirm('确认删除分组"' + group.groupName + '"？').then(async () => {
     // 把当前分组的报表放到左侧
+    await deleteReportGroupAPI(group.groupId)
     reportList.value = reportList.value.concat(group.items)
     const index = groups.value.indexOf(group)
     groups.value.splice(index, 1)
@@ -186,12 +197,11 @@ const removeGroupName = (group) => {
 }
 // 新增分组
 const addGroups = async () => {
-
-  // await editReportGroupAPI({
-  //   groupName: '新分组',
-  //   categoryName: '供应链报表',
-  //   items: []
-  // })
+  await editReportGroupAPI({
+    groupName: '新分组',
+    categoryName: '供应链报表',
+    items: []
+  })
 
   groups.value.push({
     groupName: '新分组',
@@ -217,12 +227,7 @@ const addGroups = async () => {
       padding: 0 0 0 20px;
 
       .link_item {
-        padding: 10px 0;
-        width: 25%;
-        /* 超出宽度文字省略号 */
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        padding: 10px;
       }
     }
   }