知识库选择

src/views/manage/knowledge/documents/document/index.vue

@@ -124,9 +124,9 @@
         :transfer="state.rename.transfer"
         @refresh="onSearch"
       />
-      <knowledgeSelectCom
-        v-model:show="state.knowledgeSelect.show"
-        :transfer="state.knowledgeSelect.transfer"
+      <moveSelectCom
+        v-model:show="state.moveSelect.show"
+        :transfer="state.moveSelect.transfer"
         @refresh="onSearch"
       />
     </template>
@@ -155,7 +155,7 @@ import { useDialogStore, useDictionaryStore } from '@/stores'
 import { ElMessage } from 'element-plus'
 import detailCom from './detail.vue'
 import renameCom from './rename.vue'
-import knowledgeSelectCom from './knowledge-select.vue'
+import moveSelectCom from './move-select.vue'
 import stageIndexCom from './stage-index.vue'
 import {
   documentArchive,
@@ -241,7 +241,7 @@ const state: any = reactive({
     show: false,
     transfer: {},
   },
-  knowledgeSelect: {
+  moveSelect: {
     show: false,
     transfer: {},
   },
@@ -410,21 +410,21 @@ const onRename = (row) => {
 }
 const onKnowledge = (row: any = null) => {
   if (row) {
-    state.knowledgeSelect.transfer = {
+    state.moveSelect.transfer = {
       row: JSON.parse(JSON.stringify(row)),
       type: 'text',
     }
-    state.knowledgeSelect.show = true
+    state.moveSelect.show = true
   } else {
     if (state.query.selected.length === 0) {
       ElMessage.warning('请至少选择一条记录！')
       return
     }
-    state.knowledgeSelect.transfer = {
+    state.moveSelect.transfer = {
       list: [...state.query.selected],
       type: 'text',
     }
-    state.knowledgeSelect.show = true
+    state.moveSelect.show = true
   }
 }
 const onStage = (row) => {

src/views/manage/knowledge/documents/document/knowledge-select.vue

@@ -1,26 +1,54 @@
 <template>
-  <CzrDialog
-    :show="show"
-    title="选择知识库"
-    @onClose="$emit('update:show', false)"
-    @onSubmit="onSubmit"
-    width="62.5rem"
-    height="auto"
-    :loading="state.loading"
-  >
-    <div class="bm-form">
-      <template v-for="item in state.list">
+  <div class="grid grid-cols-2 gap-4 rounded-lg bg-[var(--czr-dialog-bg)] p-4">
+    <template v-for="item in state.list">
+      <div
+        class="__hover relative col-span-1 flex flex-col overflow-hidden rounded-lg border-1 border-[#E6E8EA] px-6 py-4"
+        :class="{
+          active: state.selectedMap.has(item.id),
+          'border-[var(--czr-main-color)]': state.selectedMap.has(item.id),
+        }"
+        @click="onSelect(item)"
+      >
+        <div class="flex">
+          <img
+            src="@/assets/images/knowledge/knowledge-item-icon-2.png"
+            class="mr-2.5 h-11 w-11"
+          />
+          <div class="flex flex-1 flex-col justify-around overflow-hidden">
+            <div class="flex items-center">
+              <div
+                class="flex-1 text-[1.25rem] font-bold text-[#2E3238]"
+                v-title
+              >
+                {{ item.name }}
+              </div>
+            </div>
+            <div
+              class="flex items-center gap-2.5 text-[0.75rem] text-[#6F7889]"
+            >
+              <div>文档数:{{ item.docCount }}</div>
+              <div>|</div>
+              <div>字符:{{ item.wordCounts }}</div>
+              <div>|</div>
+              <div>创建者：{{ item.userName }}</div>
+            </div>
+          </div>
+        </div>
         <div
-          class="knowledge-item __hover"
-          :class="{ active: item.id == state.active.id }"
-          @click="() => (state.active = item)"
+          class="mt-2.5 mb-auto text-sm text-[#606266]"
+          style="line-height: 1.4rem"
+          v-title="{ lines: 2 }"
         >
-          <img src="@/assets/images/answer.png" />
-          <div v-title>{{ item.name }}</div>
+          {{ item.description }}
         </div>
-      </template>
-    </div>
-  </CzrDialog>
+        <template v-if="state.selectedMap.has(item.id)">
+          <div
+            class="absolute top-0 right-0 h-[2rem] w-[2rem] bg-[url('@/assets/images/knowledge/checked.png')]"
+          ></div>
+        </template>
+      </div>
+    </template>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -28,18 +56,14 @@ import {
   computed,
   getCurrentInstance,
   nextTick,
+  onMounted,
   reactive,
   ref,
   watch,
 } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
 import { useAppStore, useDialogStore, useDictionaryStore } from '@/stores'
 import { useRouter } from 'vue-router'
 import { datasetsGetAllByPage } from '@/api/modules/knowledge'
-import {
-  documentRemoveDataset,
-  documentRemoveDocument,
-} from '@/api/modules/knowledge/document'
 
 const router = useRouter()
 const DictionaryStore = useDictionaryStore()
@@ -48,22 +72,13 @@ const AppStore = useAppStore()
 const emit = defineEmits(['update:show', 'refresh'])
 const { proxy } = getCurrentInstance()
 const props = defineProps({
-  show: { default: false },
-  transfer: <any>{},
+  multiple: { default: false },
 })
 const state: any = reactive({
   loading: false,
   list: [],
-  active: '',
+  selectedMap: new Map(),
 })
-watch(
-  () => props.show,
-  (n) => {
-    if (n) {
-      initDictionary()
-    }
-  },
-)
 const initDictionary = () => {
   state.loading = true
   datasetsGetAllByPage({
@@ -79,82 +94,25 @@ const initDictionary = () => {
       state.loading = false
     })
 }
-const onSubmit = () => {
-  let tips = '请确认是否将'
-  if (props.transfer.row) {
-    tips += props.transfer.row.name
+const onSelect = (row) => {
+  if (state.selectedMap.has(row.id)) {
+    state.selectedMap.delete(row.id)
   } else {
-    tips += props.transfer.list.length + '个'
-    if (props.transfer.type === 'text') {
-      tips += '文档'
-    } else if (props.transfer.type === 'qa') {
-      tips += '问答'
+    if (!props.multiple) {
+      state.selectedMap.clear()
     }
+    state.selectedMap.set(row.id, row)
   }
-  tips += `迁移至${state.active.name}？`
-  if (state.active.id) {
-    DialogStore.confirm({
-      content: tips,
-      onSubmit: () => {
-        state.loading = true
-        let documentType = ''
-        if (props.transfer.type === 'text') {
-          documentType = 'TEXT_FILE'
-        } else if (props.transfer.type === 'qa') {
-          documentType = 'QA_QUESTION'
-        }
-        documentRemoveDataset({
-          datasetId: state.active.id,
-          docIds: props.transfer.row
-            ? [props.transfer.row.id]
-            : props.transfer.list.map((v) => v.id),
-          documentType: documentType,
-        })
-          .then(() => {
-            ElMessage.success(`迁移成功！`)
-            emit('update:show', false)
-            emit('refresh')
-          })
-          .catch(() => {})
-          .finally(() => {
-            state.loading = false
-          })
-      },
-    })
-  } else {
-    ElMessage.warning(`请选择知识库！`)
-  }
 }
+const getData = () => {
+  return Array.from(state.selectedMap.values())
+}
+onMounted(() => {
+  initDictionary()
+})
+defineExpose({
+  getData,
+})
 </script>
 
-<style lang="scss" scoped>
-.bm-form {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-  max-height: 36rem;
-  overflow-y: auto;
-  .knowledge-item {
-    height: 5.25rem;
-    box-shadow: 0rem 0.25rem 0.63rem 0rem rgba(40, 83, 247, 0.05);
-    border-radius: 0.63rem;
-    border: var(--czr-border);
-    display: flex;
-    align-items: center;
-    padding: 0 1.5rem;
-    font-weight: bold;
-    font-size: 1.25rem;
-    color: #2e3238;
-    gap: 1rem;
-    > img {
-      width: 2.13rem;
-      height: 2.12rem;
-    }
-    &.active {
-      background: #f3f5fe;
-      box-shadow: 0rem 0.25rem 0.63rem 0rem rgba(40, 83, 247, 0.05);
-      border-color: var(--czr-main-color);
-    }
-  }
-}
-</style>
+<style lang="scss" scoped></style>

src/views/manage/knowledge/documents/document/move-select.vue

@@ -0,0 +1,100 @@
+<template>
+  <CzrDialog
+    :show="show"
+    title="选择知识库"
+    @onClose="$emit('update:show', false)"
+    @onSubmit="onSubmit"
+    width="62.5rem"
+    height="auto"
+    :loading="state.loading"
+  >
+    <div class="max-h-140">
+      <knowledgeSelect ref="ref_knowledgeSelect" />
+    </div>
+  </CzrDialog>
+</template>
+
+<script setup lang="ts">
+import {
+  computed,
+  getCurrentInstance,
+  nextTick,
+  reactive,
+  ref,
+  watch,
+} from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useAppStore, useDialogStore, useDictionaryStore } from '@/stores'
+import { useRouter } from 'vue-router'
+import { datasetsGetAllByPage } from '@/api/modules/knowledge'
+import { documentRemoveDataset } from '@/api/modules/knowledge/document'
+import knowledgeSelect from './knowledge-select.vue'
+
+const router = useRouter()
+const DictionaryStore = useDictionaryStore()
+const DialogStore = useDialogStore()
+const AppStore = useAppStore()
+const emit = defineEmits(['update:show', 'refresh'])
+const { proxy } = getCurrentInstance()
+const props = defineProps({
+  show: { default: false },
+  transfer: <any>{},
+})
+const state: any = reactive({
+  loading: false,
+})
+const ref_knowledgeSelect = ref()
+const onSubmit = () => {
+  const arr = ref_knowledgeSelect.value.getData()
+  if (arr.length === 0) {
+    ElMessage.warning('请选择知识库！')
+    return
+  }
+  let tips = '请确认是否将'
+  if (props.transfer.row) {
+    tips += props.transfer.row.name
+  } else {
+    tips += props.transfer.list.length + '个'
+    if (props.transfer.type === 'text') {
+      tips += '文档'
+    } else if (props.transfer.type === 'qa') {
+      tips += '问答'
+    }
+  }
+  tips += `迁移至${arr[0].name}？`
+  if (arr[0].id) {
+    DialogStore.confirm({
+      content: tips,
+      onSubmit: () => {
+        state.loading = true
+        let documentType = ''
+        if (props.transfer.type === 'text') {
+          documentType = 'TEXT_FILE'
+        } else if (props.transfer.type === 'qa') {
+          documentType = 'QA_QUESTION'
+        }
+        documentRemoveDataset({
+          datasetId: arr[0].id,
+          docIds: props.transfer.row
+            ? [props.transfer.row.id]
+            : props.transfer.list.map((v) => v.id),
+          documentType: documentType,
+        })
+          .then(() => {
+            ElMessage.success(`迁移成功！`)
+            emit('update:show', false)
+            emit('refresh')
+          })
+          .catch(() => {})
+          .finally(() => {
+            state.loading = false
+          })
+      },
+    })
+  } else {
+    ElMessage.warning(`请选择知识库！`)
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/views/manage/knowledge/documents/document/stage-index.vue

@@ -121,9 +121,9 @@
         </template>
       </CzrTableCard>
     </div>
-    <knowledgeSelectCom
-      v-model:show="state.knowledgeSelect.show"
-      :transfer="state.knowledgeSelect.transfer"
+    <moveSelectCom
+      v-model:show="state.moveSelect.show"
+      :transfer="state.moveSelect.transfer"
       @refresh="onSearch"
     />
   </div>
@@ -136,7 +136,7 @@ import { debounce } from 'lodash'
 import SvgIcon from '@/components/SvgIcon/index.vue'
 import { ElMessage } from 'element-plus'
 import { useDialogStore } from '@/stores'
-import knowledgeSelectCom from './knowledge-select.vue'
+import moveSelectCom from './move-select.vue'
 import {
   documentGetSegmentsByPage,
   documentSegmentDelete,
@@ -168,7 +168,7 @@ const state: any = reactive({
     selectedMap: new Map(),
   },
   isSelect: false,
-  knowledgeSelect: {
+  moveSelect: {
     show: false,
     transfer: {},
   },