merge

src/components/common/fileTable/fileRename.vue

@@ -0,0 +1,95 @@
+<template>
+  <Dialog v-model="visible" diaTitle="文件重命名" :width="600" @close="handleClose">
+    <el-form label-width="auto">
+      <el-form-item label="文件名称">
+        <el-input v-model="fileName" placeholder="请输入" clearable>
+          <template #append v-if="fileSuffix">{{ fileSuffix }}</template>
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div>
+        <el-button @click="handleClose">{{ $t('通用.取消') }}</el-button>
+        <el-button
+          type="primary"
+          :disabled="!fileName || fileName === originalFileName"
+          @click="handleSubmit"
+          >{{ $t('通用.确定') }}</el-button
+        >
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import Dialog from '@/components/common/dialog/index.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  fileId: {
+    type: [String, Number],
+    default: '',
+  },
+  fileNameField: {
+    type: String,
+    default: 'fileName',
+  },
+  fileData: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'finish']);
+
+const visible = ref(false);
+const currentFileId = ref<any>();
+const fileName = ref<any>();
+const originalFileName = ref<any>();
+const fileSuffix = ref<any>();
+
+// 监听 modelValue 变化
+watch(
+  () => props.modelValue,
+  (val) => {
+    visible.value = val;
+    if (val) {
+      currentFileId.value = props.fileId;
+      const originalFileNameValue = props.fileData[props.fileNameField] || '';
+
+      // 分离文件名和扩展名
+      if (originalFileNameValue.includes('.')) {
+        fileName.value = originalFileNameValue.substring(0, originalFileNameValue.lastIndexOf('.'));
+        fileSuffix.value = originalFileNameValue.substring(originalFileNameValue.lastIndexOf('.'));
+        originalFileName.value = fileName.value;
+      } else {
+        fileName.value = originalFileNameValue;
+        fileSuffix.value = '';
+        originalFileName.value = fileName.value;
+      }
+    }
+  }
+);
+
+// 监听 visible 变化，同步更新 modelValue
+watch(visible, (val) => {
+  emit('update:modelValue', val);
+});
+
+// 关闭对话框
+const handleClose = () => {
+  visible.value = false;
+};
+
+// 提交重命名
+const handleSubmit = () => {
+  // todo 调用重命名接口
+  emit('finish');
+  // 关闭对话框
+  handleClose();
+};
+</script>

src/components/common/fileTable/index.vue

@@ -29,10 +29,14 @@
         <slot :name="name" v-bind="slotData"></slot>
       </template>
     </BaseTable>
-    <FilePreview
-      v-model="previewVisible"
-      :fileId="previewFileId"
-      :type="currentNeedPreviewType || 'kkFile'"
+    <FilePreview v-model="previewVisible" :fileId="previewFileId" />
+    <!-- 重命名 -->
+    <FileRename
+      v-model="renameVisible"
+      :fileId="currentRenameId"
+      :fileNameField="fileNameField"
+      :fileData="currentRenameData"
+      @finish="renameFinishFun"
     />
   </div>
 </template>
@@ -41,42 +45,38 @@
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import BaseTable from '@/components/common/table/baseTable.vue';
 import FilePreview from '@/components/common/filePreview/index.vue';
-import { downloadFileById, isAcceptFileType } from '@/utils/file';
+import { downloadFileById } from '@/utils/file';
 import FileTypeChange from '@/components/common/fileTable/fileTypeChange.vue';
 import { ElMessage } from 'element-plus';
 import { dataDelFileApi } from '@/api/data/data';
+import FileRename from '@/components/common/fileTable/fileRename.vue';
 
 const props = defineProps({
   actionList: {
     type: Array,
     default: () => [],
   },
-  // 操作栏默认列表，不传默认需要所有
+  // 操作栏默认列表
   defaultActions: {
     type: Array,
     default: () => ['preview', 'download', 'delete'],
   },
-  // 预览方式  如果想用onlyOffice，则 fileNameField 必传
-  previewType: {
-    type: String,
-    default: 'kkFile',
-  },
-  // 文件名的字段 用后缀来判断是否支持用 onlyOffice 预览，当previewType为onlyOffice时必传
-  fileNameField: {
-    type: String,
-    default: '',
-  },
-  // 文件id的字段， 1）用于下载，预览； 2）用于在右键时高亮当前行, 默认查找顺序：id -> fileId -> uuid
+  // 文件id的字段， 1）用于操作文件； 2）用于在右键时高亮当前行, 默认查找顺序：id -> fileId -> uuid
   fileIdField: {
     type: String,
     default: 'id',
   },
-  // 是否需要右键菜单，默认不需要
+  // 文件名称字段
+  fileNameField: {
+    type: String,
+    default: 'fileName',
+  },
+  // 是否需要右键菜单，默认不需要【待开发】
   needContextMenu: {
     type: Boolean,
     default: false,
   },
-  // 文件标签字段
+  // 文件标签字段【待开发】
   fileTagField: {
     type: String,
     default: 'fileType',
@@ -86,7 +86,6 @@ const props = defineProps({
 const fileTableRef = ref();
 const previewVisible = ref(false);
 const previewFileId = ref('');
-const currentNeedPreviewType = ref(''); // 当前真实需要预览的方式
 
 // #region ---------------------------操作栏---------------------------
 // 默认的操作栏, 如果有业务判断，就在业务组件内部写
@@ -97,17 +96,6 @@ const defaultActionList = computed(() => [
           title: '预览',
           type: 'primary',
           click: (row: any) => {
-            // 弃用 0226 好像不需要设置预览方式了了，预览组件内部根据文件类型判断
-            // 如果外部没有传previewType或者传的是kkfile，则不需要额外处理；
-            // 如果传的是onlyOffice,那么需要把文件名字段也传过来，因为onlyOffice需要判断文件类型 isAcceptFileType
-            // if (props.previewType === 'onlyOffice' && props.fileNameField) {
-            //   currentNeedPreviewType.value = isAcceptFileType(
-            //     row[props.fileNameField],
-            //     'onlyOffice'
-            //   )
-            //     ? 'onlyOffice'
-            //     : 'kkFile';
-            // }
             // 文件唯一标识 [id -> fileId -> uuid], 如果传了，优先用传过来的，没传就按这个顺序找
             const fileId = row[props.fileIdField] || row.fileId || row.uuid;
             previewFileId.value = fileId;
@@ -136,6 +124,15 @@ const defaultActionList = computed(() => [
         },
       ]
     : []),
+  ...(props.defaultActions?.includes('rename')
+    ? [
+        {
+          title: '重命名',
+          type: 'primary',
+          click: (row: any) => renameFun(row[props.fileIdField] || row.fileId || row.uuid, row),
+        },
+      ]
+    : []),
 ]);
 
 const deleteFileFun = async (id: number) => {
@@ -153,6 +150,19 @@ const allActionList = computed(() => {
 const downloadFile = (id: any) => {
   downloadFileById(id);
 };
+// 文件重命名
+const renameVisible = ref(false);
+const currentRenameId = ref<any>();
+const currentRenameData = ref<any>({});
+
+const renameFun = (id: any, row: any) => {
+  currentRenameId.value = id;
+  currentRenameData.value = { ...row };
+  renameVisible.value = true;
+};
+const renameFinishFun = () => {
+  // dzh todo 刷新数据
+};
 // #endregion
 
 // #region ---------------------------右键菜单模块---------------------------
@@ -219,6 +229,7 @@ defineExpose({
     [
       'tableData',
       'tableRef',
+      'tableHeadVisible',
       'resetFun',
       'setDataFun',
       'getSearchParamsFun',
@@ -226,7 +237,6 @@ defineExpose({
       'setSearchParamsFun',
       'setSearchParamByKeyFun',
       'setOptionsFun',
-      'getTableDataFun',
     ].map((method) => [method, (...args: any[]) => fileTableRef.value?.[method](...args)])
   ),
 });