feat: 标准库接入拖拽上传

2026-04-16 14:47:03 +08:00
parent 92d24fed7a
commit 9ff2d66e81
4 changed files with 252 additions and 170 deletions
--- a/src/components/common/resourceLibrary/detailModal.vue
+++ b/src/components/common/resourceLibrary/detailModal.vue
@@ -30,7 +30,7 @@
 </template>

 <script setup lang="ts">
-import { ref, computed, nextTick, watchEffect, watch } from 'vue';
+import { ref, computed, watch } from 'vue';
 import Dialog from '@/components/common/dialog/index.vue';
 import PoolTaskSelect from '@/components/pool/poolTaskSelect.vue';
 import TableForm from '@/components/common/table/tableForm.vue';
@@ -44,6 +44,7 @@ interface Props {
  confirmLoading?: boolean;
  moduleCode?: string;
  itemNum?: number;
+  dragFiles?: any[];
 }

 const props = withDefaults(defineProps<Props>(), {
@@ -54,6 +55,7 @@ const props = withDefaults(defineProps<Props>(), {
  confirmLoading: false,
  moduleCode: '',
  itemNum: 5,
+  dragFiles: () => [],
 });

 const emits = defineEmits<{
@@ -125,7 +127,11 @@ watch(
      resetFun();
      if (props.detail && props.detail.id) {
        initData();
+      } else if (props.dragFiles && props.dragFiles.length > 0) {
+        formData.value.originalName = props.dragFiles;
      }
+    } else {
+      resetFun();
    }
  }
 );
@@ -142,14 +148,6 @@ const initData = () => {
  initSnapshot(formData.value);
 };

-watchEffect(() => {
-  nextTick(() => {
-    if (props.detail && props.detail.id) {
-      initData();
-    }
-  });
-});
-
 const resetFun = () => {
  formData.value = {
    originalName: null,
--- a/src/components/common/resourceLibrary/resourceLibraryPage.vue
+++ b/src/components/common/resourceLibrary/resourceLibraryPage.vue
@@ -62,88 +62,102 @@
              />
            </div>
            <div class="table">
-              <FileTable
-                ref="baseTableRef"
-                :tableName="dynamicTableName"
-                :api="apiName"
-                :params="searchParams"
-                showIndex
-                :actionList="actionList"
-                :defaultActions="['rename', 'refresh']"
-                :exportApi="dataExportKnowledgeListApi"
-                fullHeight
-                :showExport="parsePermission(currentFolder?.permissionValue).export"
-                :exportFileName="$t('知识库.知识库列表')"
-                :exportParams="{
-                  ...searchParams,
-                  parentDirId: currentFolder?.id || '',
-                }"
-                @refresh="onFileTableRefreshFun"
-                @cell-dblclick="onCellDblclickFun"
+              <DragUploader
+                :disabled="
+                  readonly ||
+                  !currentFolder?.id ||
+                  !parsePermission(currentFolder?.permissionValue).import
+                "
+                @beforeUpload="beforeUploadFun"
              >
-                <template #leftOptions>
-                  <div v-if="!readonly">
+                <FileTable
+                  ref="baseTableRef"
+                  :tableName="dynamicTableName"
+                  :api="apiName"
+                  :params="searchParams"
+                  showIndex
+                  :actionList="actionList"
+                  :defaultActions="['rename', 'refresh']"
+                  :exportApi="dataExportKnowledgeListApi"
+                  fullHeight
+                  :showExport="parsePermission(currentFolder?.permissionValue).export"
+                  :exportFileName="$t('知识库.知识库列表')"
+                  :exportParams="{
+                    ...searchParams,
+                    parentDirId: currentFolder?.id || '',
+                  }"
+                  @refresh="onFileTableRefreshFun"
+                  @cell-dblclick="onCellDblclickFun"
+                >
+                  <template #leftOptions>
+                    <div v-if="!readonly">
+                      <el-button
+                        :icon="DArrowLeft"
+                        :disabled="navList.length <= 1"
+                        @click="backFun"
+                        >{{ $t('通用.返回上一级') }}</el-button
+                      >
+                      <el-button
+                        v-if="folderPermission.import"
+                        type="primary"
+                        :icon="Plus"
+                        :disabled="!currentFolder"
+                        @click="openModalFun"
+                      >
+                        {{ $t('知识库.上传') }}
+                      </el-button>
+                      <el-button :disabled="!currentFolder" @click="infoVisible = true">
+                        {{ $t('知识库.基本信息') }}
+                      </el-button>
+                    </div>
+                  </template>
+                  <template #originalName="{ row }">
+                    <span class="file-name">
+                      <template v-if="row.dataType === 1">
+                        <span class="name link" @dblclick="onCellDblclickFun(row)">
+                          {{ row.originalName }}
+                        </span>
+                      </template>
+                      <template v-else>
+                        <span class="name">{{ row.originalName }}</span>
+                      </template>
+                    </span>
+                  </template>
+                  <template #fileSize="{ row }">
+                    {{ formatFileSize(row.fileSize) }}
+                  </template>
+                  <template #versionNo="{ row }">
+                    {{ row.versionNo ? 'V' + row.versionNo : '--' }}
+                  </template>
+                  <template #poolInfos="{ row }">
+                    <PoolTaskSelect :modelValue="row.poolInfos" :editable="false" />
+                  </template>
+                  <!-- 需要审批时显示审批状态 -->
+                  <template v-if="needApproval" #approvalStatus="{ row, column }">
                    <el-button
-                      :icon="DArrowLeft"
-                      :disabled="navList.length <= 1"
-                      @click="backFun"
-                      >{{ $t('通用.返回上一级') }}</el-button
-                    >
-                    <el-button
-                      v-if="folderPermission.import"
+                      v-if="row.cidFlowId"
                      type="primary"
-                      :icon="Plus"
-                      :disabled="!currentFolder"
-                      @click="openModalFun"
+                      link
+                      @click="openProcessFun(row)"
                    >
-                      {{ $t('知识库.上传') }}
+                      {{ KNOWLEDGE_APPROVE_STATUS.O[row[column.field]] }}
                    </el-button>
-                    <el-button :disabled="!currentFolder" @click="infoVisible = true">
-                      {{ $t('知识库.基本信息') }}
+                    <span v-else>
+                      {{ KNOWLEDGE_APPROVE_STATUS.O[row[column.field]] }}
+                    </span>
+                  </template>
+                  <template v-if="needApproval" #approveType="{ row, column }">
+                    <el-button
+                      v-if="row.dataType === 2"
+                      type="primary"
+                      link
+                      @click="openProcessFun(row)"
+                    >
+                      {{ KNOWLEDGE_APPROVE_TYPE.O[row[column.field]] }}
                    </el-button>
-                  </div>
-                </template>
-                <template #originalName="{ row }">
-                  <span class="file-name">
-                    <template v-if="row.dataType === 1">
-                      <span class="name link" @dblclick="onCellDblclickFun(row)">
-                        {{ row.originalName }}
-                      </span>
-                    </template>
-                    <template v-else>
-                      <span class="name">{{ row.originalName }}</span>
-                    </template>
-                  </span>
-                </template>
-                <template #fileSize="{ row }">
-                  {{ formatFileSize(row.fileSize) }}
-                </template>
-                <template #versionNo="{ row }">
-                  {{ row.versionNo ? 'V' + row.versionNo : '--' }}
-                </template>
-                <template #poolInfos="{ row }">
-                  <PoolTaskSelect :modelValue="row.poolInfos" :editable="false" />
-                </template>
-                <!-- 需要审批时显示审批状态 -->
-                <template v-if="needApproval" #approvalStatus="{ row, column }">
-                  <el-button v-if="row.cidFlowId" type="primary" link @click="openProcessFun(row)">
-                    {{ KNOWLEDGE_APPROVE_STATUS.O[row[column.field]] }}
-                  </el-button>
-                  <span v-else>
-                    {{ KNOWLEDGE_APPROVE_STATUS.O[row[column.field]] }}
-                  </span>
-                </template>
-                <template v-if="needApproval" #approveType="{ row, column }">
-                  <el-button
-                    v-if="row.dataType === 2"
-                    type="primary"
-                    link
-                    @click="openProcessFun(row)"
-                  >
-                    {{ KNOWLEDGE_APPROVE_TYPE.O[row[column.field]] }}
-                  </el-button>
-                </template>
-              </FileTable>
+                  </template>
+                </FileTable>
+              </DragUploader>
            </div>
          </div>
        </template>
@@ -153,6 +167,7 @@
    <ApprovalProcess v-if="needApproval" v-model="processVisible" :flowId="currentRow?.cidFlowId" />
    <!-- 上传/编辑弹窗 -->
    <DetailModal
+      ref="detailModalRef"
      v-model="visible"
      :detail="currentRow"
      :folder="currentFolder"
@@ -160,6 +175,7 @@
      :moduleCode="moduleCode"
      :itemNum="needApproval ? 6 : 5"
      :confirmLoading="confirmLoading"
+      :dragFiles="tempUploadFiles"
      @confirm="onConfirmFun"
    />
    <!-- 文件夹弹窗 -->
@@ -206,6 +222,7 @@ import {
  onDeactivated,
  onMounted,
  ref,
+  watch,
  watchEffect,
  type Ref,
 } from 'vue';
@@ -245,6 +262,7 @@ import { parsePermission } from '@/utils/permission';
 import { useRoute } from 'vue-router';
 import { TABLE_NAME } from '@/utils/enum/tableName';
 import { DIR_TYPE } from '@/utils/enum/data';
+import DragUploader from '@/components/common/dragUploader/index.vue';

 interface Props {
  tableName?: string;
@@ -589,6 +607,14 @@ const visible = ref(false);
 const confirmLoading = ref(false);
 const infoVisible = ref(false);
 const currentRow = ref();
+const detailModalRef = ref();
+const tempUploadFiles = ref<any[]>([]);
+
+watch(visible, (val) => {
+  if (!val) {
+    tempUploadFiles.value = [];
+  }
+});

 const openModalFun = () => {
  visible.value = true;
@@ -748,6 +774,25 @@ const uploadFinishedFun = (data: any) => {
  }
 };

+const beforeUploadFun = (file: any) => {
+  if (file.size <= 0) {
+    ElMessage.warning('大小为0的文件已被过滤');
+    return false;
+  }
+
+  tempUploadFiles.value.push({
+    raw: file,
+    name: file.name,
+  });
+
+  if (!visible.value) {
+    currentRow.value = null;
+    visible.value = true;
+  }
+
+  return false;
+};
+
 onMounted(() => {
  if (props.readonly && props.targetFolder?.id) {
    currentFolder.value = props.targetFolder;
--- a/src/views/competenceCenter/knowledge/components/knowledgeDetailModal.vue
+++ b/src/views/competenceCenter/knowledge/components/knowledgeDetailModal.vue
@@ -38,7 +38,7 @@
 </template>

 <script setup lang="ts">
-import { ref, computed, nextTick, watchEffect, watch } from 'vue';
+import { ref, computed, watch } from 'vue';
 import Dialog from '@/components/common/dialog/index.vue';
 import PoolTaskSelect from '@/components/pool/poolTaskSelect.vue';
 import TableForm from '@/components/common/table/tableForm.vue';
@@ -50,6 +50,7 @@ interface Props {
  folder?: any;
  tableName: string;
  confirmLoading?: boolean;
+  dragFiles?: any[];
 }

 const props = withDefaults(defineProps<Props>(), {
@@ -58,6 +59,7 @@ const props = withDefaults(defineProps<Props>(), {
  folder: null,
  tableName: '',
  confirmLoading: false,
+  dragFiles: () => [],
 });
 const emits = defineEmits<{
  'update:modelValue': [val: boolean];
@@ -106,7 +108,11 @@ watch(
      resetFun();
      if (props.detail && props.detail.id) {
        initData();
+      } else if (props.dragFiles && props.dragFiles.length > 0) {
+        formData.value.originalName = props.dragFiles;
      }
+    } else {
+      resetFun();
    }
  }
 );
@@ -122,13 +128,6 @@ const initData = () => {
  formData.value.simulationPoolInfoList = props.detail?.poolInfos;
  initSnapshot(formData.value);
 };
-watchEffect(() => {
-  nextTick(() => {
-    if (props.detail && props.detail.id) {
-      initData();
-    }
-  });
-});
 const resetFun = () => {
  formData.value = {
    originalName: null,
--- a/src/views/competenceCenter/knowledge/index.vue
+++ b/src/views/competenceCenter/knowledge/index.vue
@@ -60,87 +60,97 @@
              />
            </div>
            <div class="table">
-              <FileTable
-                ref="baseTableRef"
-                :tableName="TABLE_NAME.SIMULATION_KNOWLEDGE"
-                :api="apiName"
-                :params="searchParams"
-                showIndex
-                :actionList="actionList"
-                :defaultActions="['rename', 'refresh']"
-                :exportApi="dataExportKnowledgeListApi"
-                :showExport="parsePermission(currentFolder?.permissionValue).export"
-                fullHeight
-                :exportFileName="$t('知识库.知识库列表')"
-                :exportParams="{
-                  ...searchParams,
-                  parentDirId: currentFolder?.id || '',
-                }"
-                @refresh="onFileTableRefreshFun"
-                @cell-dblclick="onCellDblclickFun"
+              <DragUploader
+                :disabled="!currentFolder?.id || !folderPermission.import"
+                @beforeUpload="beforeUploadFun"
              >
-                <template #leftOptions>
-                  <div>
+                <FileTable
+                  ref="baseTableRef"
+                  :tableName="TABLE_NAME.SIMULATION_KNOWLEDGE"
+                  :api="apiName"
+                  :params="searchParams"
+                  showIndex
+                  :actionList="actionList"
+                  :defaultActions="['rename', 'refresh']"
+                  :exportApi="dataExportKnowledgeListApi"
+                  :showExport="parsePermission(currentFolder?.permissionValue).export"
+                  fullHeight
+                  :exportFileName="$t('知识库.知识库列表')"
+                  :exportParams="{
+                    ...searchParams,
+                    parentDirId: currentFolder?.id || '',
+                  }"
+                  @refresh="onFileTableRefreshFun"
+                  @cell-dblclick="onCellDblclickFun"
+                >
+                  <template #leftOptions>
+                    <div>
+                      <el-button
+                        :icon="DArrowLeft"
+                        @click="backFun"
+                        :disabled="navList.length <= 1"
+                        >{{ $t('通用.返回上一级') }}</el-button
+                      >
+                      <el-button
+                        v-if="folderPermission.import"
+                        type="primary"
+                        :icon="Plus"
+                        @click="openModalFun"
+                        :disabled="!currentFolder"
+                      >
+                        {{ $t('知识库.上传') }}
+                      </el-button>
+                      <el-button @click="infoVisible = true" :disabled="!currentFolder">
+                        {{ $t('知识库.基本信息') }}
+                      </el-button>
+                    </div>
+                  </template>
+                  <template #originalName="{ row }">
+                    <span class="file-name">
+                      <template v-if="row.dataType === 1">
+                        <span class="name link" @dblclick="onCellDblclickFun(row)">
+                          {{ row.originalName }}
+                        </span>
+                      </template>
+                      <template v-else>
+                        <span class="name">{{ row.originalName }}</span>
+                      </template>
+                    </span>
+                  </template>
+                  <template #fileSize="{ row }">
+                    {{ formatFileSize(row.fileSize) }}
+                  </template>
+                  <template #versionNo="{ row }">
+                    {{ row.versionNo ? 'V' + row.versionNo : '--' }}
+                  </template>
+                  <template #poolInfos="{ row }">
+                    <PoolTaskSelect :modelValue="row.poolInfos" :editable="false" />
+                  </template>
+                  <template #approvalStatus="{ row, column }">
                    <el-button
-                      :icon="DArrowLeft"
-                      @click="backFun"
-                      :disabled="navList.length <= 1"
-                      >{{ $t('通用.返回上一级') }}</el-button
-                    >
-                    <el-button
-                      v-if="folderPermission.import"
+                      v-if="row.cidFlowId"
                      type="primary"
-                      :icon="Plus"
-                      @click="openModalFun"
-                      :disabled="!currentFolder"
+                      link
+                      @click="openProcessFun(row)"
                    >
-                      {{ $t('知识库.上传') }}
+                      {{ KNOWLEDGE_APPROVE_STATUS.O[row[column.field]] }}
                    </el-button>
-                    <el-button @click="infoVisible = true" :disabled="!currentFolder">
-                      {{ $t('知识库.基本信息') }}
-                    </el-button>
-                  </div>
-                </template>
-                <template #originalName="{ row }">
-                  <span class="file-name">
-                    <template v-if="row.dataType === 1">
-                      <span class="name link" @dblclick="onCellDblclickFun(row)">
-                        {{ row.originalName }}
-                      </span>
-                    </template>
-                    <template v-else>
-                      <span class="name">{{ row.originalName }}</span>
-                    </template>
-                  </span>
-                </template>
-                <template #fileSize="{ row }">
-                  {{ formatFileSize(row.fileSize) }}
-                </template>
-                <template #versionNo="{ row }">
-                  {{ row.versionNo ? 'V' + row.versionNo : '--' }}
-                </template>
-                <template #poolInfos="{ row }">
-                  <PoolTaskSelect :modelValue="row.poolInfos" :editable="false" />
-                </template>
-                <template #approvalStatus="{ row, column }">
-                  <el-button v-if="row.cidFlowId" type="primary" link @click="openProcessFun(row)">
-                    {{ KNOWLEDGE_APPROVE_STATUS.O[row[column.field]] }}
-                  </el-button>
-                  <span v-else>
-                    {{ KNOWLEDGE_APPROVE_STATUS.O[row[column.field]] }}
-                  </span>
-                </template>
-                <template #approveType="{ row, column }">
-                  <el-button
-                    v-if="row.dataType === 2"
-                    type="primary"
-                    link
-                    @click="openProcessFun(row)"
-                  >
-                    {{ KNOWLEDGE_APPROVE_TYPE.O[row[column.field]] }}</el-button
-                  >
-                </template>
-              </FileTable>
+                    <span v-else>
+                      {{ KNOWLEDGE_APPROVE_STATUS.O[row[column.field]] }}
+                    </span>
+                  </template>
+                  <template #approveType="{ row, column }">
+                    <el-button
+                      v-if="row.dataType === 2"
+                      type="primary"
+                      link
+                      @click="openProcessFun(row)"
+                    >
+                      {{ KNOWLEDGE_APPROVE_TYPE.O[row[column.field]] }}</el-button
+                    >
+                  </template>
+                </FileTable>
+              </DragUploader>
            </div>
          </div>
        </template>
@@ -148,11 +158,13 @@
    </div>
    <ApprovalProcess v-model="processVisible" :flowId="currentRow?.cidFlowId" />
    <KnowledgeDetailModal
+      ref="knowledgeDetailModalRef"
      v-model="visible"
      :detail="currentRow"
      :folder="currentFolder"
      :tableName="TABLE_NAME.SIMULATION_KNOWLEDGE"
      :confirmLoading="confirmLoading"
+      :dragFiles="tempUploadFiles"
      @confirm="onConfirmFun"
    />
    <FolderModal
@@ -183,7 +195,7 @@
 </template>

 <script lang="ts" setup>
-import { computed, ref, watchEffect, type Ref } from 'vue';
+import { computed, ref, watch, watchEffect, type Ref } from 'vue';
 import { DArrowLeft, Plus } from '@element-plus/icons-vue';
 import FileTable from '@/components/common/fileTable/index.vue';
 import FileTree from '@/components/common/fileTree/index.vue';
@@ -219,6 +231,7 @@ import { TABLE_NAME } from '@/utils/enum/tableName';
 import { downloadFileById } from '@/utils/file';
 import PoolTaskSelect from '@/components/pool/poolTaskSelect.vue';
 import { parsePermission } from '@/utils/permission';
+import DragUploader from '@/components/common/dragUploader/index.vue';

 const dataListDirKnowledgeApi = (params: any) => {
  return dataListDirApi({ ...params, dirType: DIR_TYPE.KNOWLEDGE });
@@ -460,6 +473,14 @@ const visible = ref(false);
 const confirmLoading = ref(false);
 const infoVisible = ref(false);
 const currentRow = ref();
+const knowledgeDetailModalRef = ref();
+const tempUploadFiles = ref<any[]>([]);
+
+watch(visible, (val) => {
+  if (!val) {
+    tempUploadFiles.value = [];
+  }
+});
 const openModalFun = () => {
  visible.value = true;
  currentRow.value = null;
@@ -585,6 +606,25 @@ const openProcessFun = (row: any) => {
  currentRow.value = row;
  processVisible.value = true;
 };
+
+const beforeUploadFun = (file: any) => {
+  if (file.size <= 0) {
+    ElMessage.warning('大小为0的文件已被过滤');
+    return false;
+  }
+
+  tempUploadFiles.value.push({
+    raw: file,
+    name: file.name,
+  });
+
+  if (!visible.value) {
+    currentRow.value = null;
+    visible.value = true;
+  }
+
+  return false;
+};
 </script>

 <style lang="scss" scoped>