feat: Batch transfer tool

Author: wangdan-fit2cloud

ui/src/api/tool/tool.ts

@@ -312,7 +312,7 @@ const delMulTool: (data: any, loading?: Ref<boolean>) => Promise<Result<boolean>
   data,
   loading,
 ) => {
-  return put(`${prefix.value}/tool/batch_delete`, { id_list: data }, undefined, loading)
+  return put(`${prefix.value}/batch_delete`, { id_list: data }, undefined, loading)
 }
 /**
  * 批量删除工具
@@ -326,7 +326,7 @@ const putMulMoveTool: (data: any, loading?: Ref<boolean>) => Promise<Result<bool
   data,
   loading,
 ) => {
-  return put(`${prefix.value}/tool/batch_move`, data, undefined, loading)
+  return put(`${prefix.value}/batch_move`, data, undefined, loading)
 }
 export default {
   getToolList,

ui/src/components/folder-breadcrumb/index.vue

@@ -6,7 +6,7 @@
     <template v-if="breadcrumbData?.length > 3">
       <el-breadcrumb-item>
         <el-button link @click="handleClick(breadcrumbData[0])" :title="breadcrumbData[0].name">
-          <span class="ellipsis"> {{ breadcrumbData[0].name }}</span>
+          <span class="ellipsis" style="max-width: 60px"> {{ breadcrumbData[0].name }}</span>
         </el-button>
       </el-breadcrumb-item>
       <el-breadcrumb-item>
@@ -15,19 +15,27 @@
         </el-button>
       </el-breadcrumb-item>
       <el-breadcrumb-item>
-        <h5 class="ml-4 ellipsis" :title="breadcrumbData[breadcrumbData.length - 1].name">
+        <h5
+          class="ml-4 ellipsis"
+          :title="breadcrumbData[breadcrumbData.length - 1].name"
+        >
           {{ breadcrumbData[breadcrumbData.length - 1].name }}
         </h5>
       </el-breadcrumb-item>
     </template>
     <template v-else>
       <el-breadcrumb-item v-for="(item, index) in breadcrumbData" :key="index">
-        <h5 class="ml-4 ellipsis" v-if="index === breadcrumbData.length - 1" :title="item.name">
+        <h5
+          class="ml-4 ellipsis"
+          style="max-width: 100px"
+          v-if="index === breadcrumbData.length - 1"
+          :title="item.name"
+        >
           {{ item.name }}
         </h5>
 
         <el-button v-else link @click="handleClick(item)" :title="item.name">
-          <span class="ellipsis"> {{ item.name }}</span>
+          <span class="ellipsis" style="max-width: 60px"> {{ item.name }}</span>
         </el-button>
       </el-breadcrumb-item>
     </template>
@@ -39,7 +47,7 @@ import { computed } from 'vue'
 import { TreeToFlatten } from '@/utils/array'
 defineOptions({ name: 'FolderBreadcrumb' })
 import useStore from '@/stores'
-import {i18n_name} from "@/utils/common.ts";
+import { i18n_name } from '@/utils/common.ts'
 const { folder, user } = useStore()
 
 const props = defineProps({

ui/src/components/layout-container/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="layout-container flex h-full">
+  <div class="layout-container flex h-full" :class="isCollapse ? 'layout-container__collapse' : ''">
     <div
       :class="`layout-container__left border-r ${isCollapse ? 'hidden' : ''}`"
       :style="{ width: isCollapse ? 0 : `${leftWidth}px` }"
@@ -150,5 +150,10 @@ onUnmounted(() => {
     flex: 1;
     overflow: hidden;
   }
+  &__collapse {
+    :deep(.mul-operation) {
+      width: 100% !important;
+    }
+  }
 }
 </style>

ui/src/locales/lang/en-US/views/tool.ts

@@ -65,6 +65,7 @@ export default {
   },
   delete: {
     confirmTitle: 'Confirm deletion of tool:',
+    confirmTitle2: 'tools?',
     confirmMessage:
       'Deleting this tool will cause errors in agent that reference it when they are queried. Please proceed with caution.',
     resourceCountMessage:

ui/src/locales/lang/zh-CN/views/tool.ts

@@ -62,6 +62,7 @@ export default {
 
   delete: {
     confirmTitle: '是否刪除工具',
+    confirmTitle2: '个工具?',
     confirmMessage: '删除后，引用了该工具的智能体提问时会报错 ，请谨慎操作。',
     resourceCountMessage: '此工具关联 {count} 个资源，删除后无法使用，请谨慎操作。',
   },

ui/src/locales/lang/zh-Hant/views/tool.ts

@@ -64,6 +64,7 @@ export default {
   },
   delete: {
     confirmTitle: '是否刪除工具',
+    confirmTitle2: '个工具?',
     confirmMessage: '刪除後，引用該工具的智能體在查詢時會報錯，請謹慎操作。',
     resourceCountMessage: '此工具關聯 {count} 個資源，刪除後無法使用，請謹慎操作。',
   },

ui/src/views/paragraph/index.vue

@@ -158,32 +158,51 @@
             </el-scrollbar>
           </div>
         </div>
-      </LayoutContainer>
-
-      <div class="mul-operation border-t w-full flex align-center" v-if="isBatch === true">
-        <el-button :disabled="multipleSelection.length === 0" @click="openGenerateDialog()">
-          {{ $t('views.document.generateQuestion.title') }}
-        </el-button>
-        <el-button :disabled="multipleSelection.length === 0" @click="openSelectDocumentDialog()">
-          {{ $t('views.document.setting.migration') }}
-        </el-button>
+        <div class="mul-operation border-t w-full" v-if="isBatch === true">
+          <div class="flex align-center" style="max-width: 1000px; margin: auto; flex-grow: 1">
+            <el-checkbox
+              v-model="checkAll"
+              :indeterminate="isIndeterminate"
+              @change="handleCheckAllChange"
+            >
+              {{ $t('common.allCheck') }}
+            </el-checkbox>
+            <el-button
+              class="ml-16"
+              :disabled="multipleSelection.length === 0"
+              @click="openGenerateDialog()"
+            >
+              {{ $t('views.document.generateQuestion.title') }}
+            </el-button>
+            <el-button
+              :disabled="multipleSelection.length === 0"
+              @click="openSelectDocumentDialog()"
+            >
+              {{ $t('views.document.setting.migration') }}
+            </el-button>
 
-        <el-button :disabled="multipleSelection.length === 0" @click="deleteMulParagraph">
-          {{ $t('common.delete') }}
-        </el-button>
-        <span class="color-secondary ml-24 mr-16">
-          {{ $t('common.selected') }} {{ multipleSelection.length }}
-          {{ $t('views.document.items') }}
-        </span>
-        <el-button
-          link
-          type="primary"
-          v-if="multipleSelection.length > 0"
-          @click="multipleSelection = []"
-        >
-          {{ $t('common.clear') }}
-        </el-button>
-      </div>
+            <el-button :disabled="multipleSelection.length === 0" @click="deleteMulParagraph">
+              {{ $t('common.delete') }}
+            </el-button>
+            <span class="color-secondary ml-24 mr-16">
+              {{ $t('common.selected') }} {{ multipleSelection.length }}
+              {{ $t('views.document.items') }}
+            </span>
+            <span class="color-secondary mr-16">
+              {{ $t('common.total') }} {{ paginationConfig.total }}
+              {{ $t('views.document.items') }}
+            </span>
+            <el-button
+              link
+              type="primary"
+              v-if="multipleSelection.length > 0"
+              @click="multipleSelection = []"
+            >
+              {{ $t('common.clear') }}
+            </el-button>
+          </div>
+        </div>
+      </LayoutContainer>
     </el-card>
     <ParagraphDialog
       ref="ParagraphDialogRef"
@@ -203,6 +222,7 @@
 <script setup lang="ts">
 import { reactive, ref, onMounted, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
+import type { CheckboxValueType } from 'element-plus'
 import ParagraphDialog from './component/ParagraphDialog.vue'
 import ParagraphCard from './component/ParagraphCard.vue'
 import SelectDocumentDialog from './component/SelectDocumentDialog.vue'
@@ -275,6 +295,17 @@ const handleClick = (e: MouseEvent, ele: any) => {
 // 批量操作
 const isBatch = ref(false)
 const multipleSelection = ref<any[]>([])
+const checkAll = ref(false)
+const isIndeterminate = computed(() => {
+  return (
+    multipleSelection.value.length > 0 &&
+    multipleSelection.value.length < paragraphDetail.value.length
+  )
+})
+const handleCheckAllChange = (val: CheckboxValueType) => {
+  multipleSelection.value = val ? paragraphDetail.value.map((v) => v.id) : []
+  checkAll.value = val as boolean
+}
 
 function toggleSelect(id: number) {
   const index = multipleSelection.value.indexOf(id)
@@ -472,11 +503,6 @@ onMounted(() => {
     box-sizing: border-box;
     .mul-operation {
       position: absolute;
-      bottom: 0;
-      left: 0;
-      padding: 16px 24px;
-      box-sizing: border-box;
-      background: #ffffff;
     }
   }
   .paragraph-card {

ui/src/views/tool/component/ToolListContainer.vue

@@ -617,9 +617,7 @@ const isBatch = ref(false)
 const multipleSelection = ref<any[]>([])
 const checkAll = ref(false)
 const isIndeterminate = computed(() => {
-  return (
-    multipleSelection.value.length > 0 && multipleSelection.value.length < tool.toolList.length
-  )
+  return multipleSelection.value.length > 0 && multipleSelection.value.length < tool.toolList.length
 })
 function batchSelectedHandle(bool: boolean) {
   isBatch.value = bool
@@ -648,7 +646,7 @@ const checkboxChange = (data?: any) => {
 
 function deleteMulTool() {
   MsgConfirm(
-    `${t('views.document.delete.confirmTitle1')} ${multipleSelection.value.length} ${t('views.document.delete.confirmTitle2')}`,
+    `${t('views.document.delete.confirmTitle1')} ${multipleSelection.value.length} ${t('views.tool.delete.confirmTitle2')}`,
     t('views.paragraph.delete.confirmMessage'),
     {
       confirmButtonText: t('common.confirm'),
@@ -659,6 +657,7 @@ function deleteMulTool() {
       loadSharedApi({ type: 'tool', systemType: apiType.value })
         .delMulTool(multipleSelection.value, changeStateloading)
         .then(() => {
+          batchSelectedHandle(false)
           paginationConfig.current_page = 1
           tool.setToolList([])
           getList()
@@ -762,6 +761,7 @@ function refreshToolList(row: any) {
       tool.setToolList(list)
     }
   } else {
+    batchSelectedHandle(false)
     paginationConfig.current_page = 1
     tool.setToolList([])
     getList()