fix: 🧩 修改文件重做

src/api/v1/files.ts

@@ -16,14 +16,24 @@ export const downloadFilesByFilepath = (data: any) => {
 	return http.request<any>('get', `files/downloadFilesByFilepath`, { params: data, responseType: 'blob' });
 };
 
+/** 系统文件管理---获取所有文件类型 */
+export const fetchGetAllMediaTypes = () => {
+	return http.request<BaseResult<any>>('get', `files/getAllMediaTypes`);
+};
+
+/** 系统文件管理---获取所有文件类型 */
+export const fetchGetAllFilesStoragePath = () => {
+	return http.request<BaseResult<any>>('get', `files/getAllFilesStoragePath`);
+};
+
 /** 系统文件管理---添加系统文件管理 */
 export const fetchAddFiles = (data: any) => {
-	return http.request<BaseResult<object>>('post', 'files/addFiles', { data });
+	return http.request<BaseResult<any>>('post', 'files/addFiles', { data }, { headers: { 'Content-Type': 'multipart/form-data' } });
 };
 
 /** 系统文件管理---更新系统文件管理 */
 export const fetchUpdateFiles = (data: any) => {
-	return http.request<BaseResult<object>>('put', 'files/updateFiles', { data });
+	return http.request<BaseResult<object>>('put', 'files/updateFiles', { data }, { headers: { 'Content-Type': 'multipart/form-data' } });
 };
 
 /** 系统文件管理---删除系统文件管理 */

src/store/monitor/files.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import { fetchAddFiles, fetchDeleteFiles, fetchGetFilesList, fetchUpdateFiles } from '@/api/v1/files';
+import { fetchAddFiles, fetchDeleteFiles, fetchGetAllFilesStoragePath, fetchGetAllMediaTypes, fetchGetFilesList, fetchUpdateFiles } from '@/api/v1/files';
 import { pageSizes } from '@/enums/baseConstant';
 import { storeMessage } from '@/utils/message';
 import { storePagination } from '@/store/useStorePagination';
@@ -12,6 +12,10 @@ export const useFilesStore = defineStore('filesStore', {
 		return {
 			// 系统文件表列表
 			datalist: [],
+			// 所有文件类型
+			allMediaTypes: [],
+			// 所有文件存储路径
+			allFilesStoragePath: [],
 			// 查询表单
 			form: {
 				// 文件的名称
@@ -52,6 +56,22 @@ export const useFilesStore = defineStore('filesStore', {
 			return pagination(result);
 		},
 
+		/** 获取所有文件类型 */
+		async getAllMediaTypes() {
+			const result = await fetchGetAllMediaTypes();
+			if (result.code === 200) {
+				this.allMediaTypes = result.data;
+			}
+		},
+
+		/** 获取所有文件类型 */
+		async getAllFilesStoragePath() {
+			const result = await fetchGetAllFilesStoragePath();
+			if (result.code === 200) {
+				this.allFilesStoragePath = result.data;
+			}
+		},
+
 		/** 添加系统文件表 */
 		async addFiles(data: any) {
 			const result = await fetchAddFiles(data);

src/views/monitor/files/files-dialog.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
-import { FormInstance } from 'element-plus';
+import { FormInstance, genFileId, UploadProps, UploadRawFile } from 'element-plus';
-import { rules } from '@/views/monitor/files/utils/columns';
+import { addRules, uploadRules } from '@/views/monitor/files/utils/columns';
 import { FormProps } from '@/views/monitor/files/utils/types';
 import { $t } from '@/plugins/i18n';
+import { useFilesStore } from '@/store/monitor/files';
+import { UploadFilled } from '@element-plus/icons-vue';
 
 const props = withDefaults(defineProps<FormProps>(), {
 	formInline: () => ({
@@ -15,28 +17,79 @@ const props = withDefaults(defineProps<FormProps>(), {
 		fileType: undefined,
 		// 下载数量
 		downloadCount: undefined,
+		// 文件列表
+		files: [],
+		// 是否是上传
+		isUpload: false,
 	}),
 });
 
 const formRef = ref<FormInstance>();
+const upload = ref();
 const form = ref(props.formInline);
+const filesStore = useFilesStore();
+
+const handleExceed: UploadProps['onExceed'] = files => {
+	upload.value!.clearFiles();
+	const file = files[0] as UploadRawFile;
+	file.uid = genFileId();
+	upload.value!.handleStart(file);
+};
+
+onMounted(() => {
+	filesStore.getAllMediaTypes();
+	filesStore.getAllFilesStoragePath();
+});
 
 defineExpose({ formRef });
 </script>
 
 <template>
-	<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
+	<el-form ref="formRef" :model="form" :rules="form.isUpload ? uploadRules : addRules" label-width="auto">
-		<el-form-item :label="$t('files_filename')" prop="filename">
+		<!-- 文件名称---上传显示 -->
+		<el-form-item v-show="form.isUpload" :label="$t('files_filename')" prop="filename">
 			<el-input v-model="form.filename" autocomplete="off" type="text" />
 		</el-form-item>
+
+		<!-- 文件路径---上传显示文本框 -->
 		<el-form-item :label="$t('files_filepath')" prop="filepath">
-			<el-input v-model="form.filepath" autocomplete="off" type="text" />
+			<el-input v-if="form.isUpload" v-model="form.filepath" autocomplete="off" disabled type="text" />
+
+			<el-select v-else v-model="form.filepath" :placeholder="$t('files_filepath')" clearable filterable>
+				<el-option v-for="(item, index) in filesStore.allFilesStoragePath" :key="index" :label="item" :navigationBar="false" :value="item" />
+			</el-select>
 		</el-form-item>
-		<el-form-item :label="$t('files_fileType')" prop="fileType">
+
-			<el-input v-model="form.fileType" autocomplete="off" type="text" />
+		<!-- 文件类型---上传显示 -->
+		<el-form-item v-show="form.isUpload" :label="$t('files_fileType')" prop="fileType">
+			<el-select v-model="form.fileType" :placeholder="$t('files_fileType')" clearable filterable>
+				<el-option v-for="(item, index) in filesStore.allMediaTypes" :key="index" :label="item" :navigationBar="false" :value="item" />
+			</el-select>
 		</el-form-item>
+
 		<el-form-item :label="$t('files_downloadCount')" prop="downloadCount">
-			<el-input v-model="form.downloadCount" autocomplete="off" type="text" />
+			<el-input v-model="form.downloadCount" :min="0" autocomplete="off" type="number" />
+		</el-form-item>
+
+		<!-- 文件列表---上传不显示 -->
+		<el-form-item :label="$t('files')" prop="files">
+			<el-upload v-if="form.isUpload" ref="upload" v-model:file-list="form.files" :auto-upload="false" :limit="1" :on-exceed="handleExceed" class="w-full" drag>
+				<el-icon class="el-icon--upload">
+					<UploadFilled />
+				</el-icon>
+				<div class="el-upload__text">
+					{{ $t('drop_file_here') }}/<em>{{ $t('click_to_upload') }}</em>
+				</div>
+			</el-upload>
+
+			<el-upload v-else v-model:file-list="form.files" :auto-upload="false" class="w-full" drag multiple>
+				<el-icon class="el-icon--upload">
+					<UploadFilled />
+				</el-icon>
+				<div class="el-upload__text">
+					{{ $t('drop_file_here') }}/<em>{{ $t('click_to_upload') }}</em>
+				</div>
+			</el-upload>
 		</el-form-item>
 	</el-form>
 </template>

src/views/monitor/files/utils/columns.ts

@@ -21,11 +21,17 @@ export const columns: TableColumnList = [
 ];
 
 // 添加规则
-export const rules = reactive({
+export const addRules = reactive({
-	// 文件的名称
-	filename: [{ required: true, message: `${$t('input')}${$t('files_filename')}`, trigger: 'blur' }],
 	// 文件在服务器上的存储路径
 	filepath: [{ required: true, message: `${$t('input')}${$t('files_filepath')}`, trigger: 'blur' }],
+	// 文件列表
+	files: [{ required: true, message: `${$t('files')}`, trigger: 'blur' }],
+});
+
+// 上传规则
+export const uploadRules = reactive({
+	// 文件的名称
+	filename: [{ required: true, message: `${$t('input')}${$t('files_filename')}`, trigger: 'blur' }],
 	// 文件的MIME类型
 	fileType: [{ required: true, message: `${$t('input')}${$t('files_fileType')}`, trigger: 'blur' }],
 });

src/views/monitor/files/utils/hooks.ts

@@ -7,6 +7,7 @@ import type { FormItemProps } from '@/views/monitor/files/utils/types';
 import { $t } from '@/plugins/i18n';
 import { downloadFilesByFileId, downloadFilesByFilepath } from '@/api/v1/files';
 import { download } from '@/utils/sso';
+import type { UploadFiles } from 'element-plus';
 
 // 选择的row列表
 export const selectRows = ref([]);
@@ -31,10 +32,10 @@ export function onAdd() {
 		width: '30%',
 		props: {
 			formInline: {
-				filename: undefined,
 				filepath: undefined,
-				fileType: undefined,
+				downloadCount: 0,
-				downloadCount: undefined,
+				files: [],
+				isAdd: false,
 			},
 		},
 		draggable: true,
@@ -46,7 +47,12 @@ export function onAdd() {
 			formRef.value.formRef.validate(async (valid: any) => {
 				if (!valid) return;
 
-				const result = await filesStore.addFiles(form);
+				// 添加文件
+				form.files = (form.files as UploadFiles).map(file => file.raw);
+				const data = { filepath: form.filepath, downloadCount: form.downloadCount, files: form.files };
+				const result = await filesStore.addFiles(data);
+
+				// 成功后关闭窗口
 				if (!result) return;
 				done();
 				await onSearch();
@@ -66,9 +72,10 @@ export function onUpdate(row: any) {
 		props: {
 			formInline: {
 				filename: row.filename,
-				filepath: row.filepath,
 				fileType: row.fileType,
+				filepath: row.filepath,
 				downloadCount: row.downloadCount,
+				isUpload: true,
 			},
 		},
 		draggable: true,
@@ -80,7 +87,11 @@ export function onUpdate(row: any) {
 			formRef.value.formRef.validate(async (valid: any) => {
 				if (!valid) return;
 
+				// 更新文件
+				form.files = (form.files as UploadFiles).map(file => file.raw);
 				const result = await filesStore.updateFiles({ ...form, id: row.id });
+
+				// 更新完成
 				if (!result) return;
 				done();
 				await onSearch();
@@ -89,9 +100,7 @@ export function onUpdate(row: any) {
 	});
 }
 
-/**
+/** 删除系统文件表 */
- * * 删除系统文件表
- */
 export const onDelete = async (row: any) => {
 	const id = row.id;
 

src/views/monitor/files/utils/types.ts

@@ -8,6 +8,10 @@ export interface FormItemProps {
 	fileType: string;
 	// 下载数量
 	downloadCount: number;
+	// 文件内容
+	files: any;
+	// 是否是上传
+	isUpload: boolean;
 }
 
 // 添加或修改表单Props

src/views/system/dept/index.vue

@@ -10,9 +10,10 @@ import EditPen from '@iconify-icons/ep/edit-pen';
 import Refresh from '@iconify-icons/ep/refresh';
 import { selectUserinfo } from '@/components/Table/Userinfo/columns';
 import { $t } from '@/plugins/i18n';
-import { useDeptStore } from '@/store/system/dept.ts';
+import { useDeptStore } from '@/store/system/dept';
 import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
 import { handleTree } from '@/utils/tree';
+import { FormInstance } from 'element-plus';
 
 const tableRef = ref();
 const formRef = ref();
@@ -48,7 +49,7 @@ const onSelectionChange = (rows: Array<any>) => {
  * 重置表单
  * @param formEl
  */
-const resetForm = async formEl => {
+const resetForm = async (formEl: FormInstance | undefined) => {
 	if (!formEl) return;
 	formEl.resetFields();
 	await onSearch();

src/views/system/dept/user-select-search.vue

@@ -3,20 +3,19 @@ import { $t } from '@/plugins/i18n';
 import { ref } from 'vue';
 import LoadingSvg from '@/assets/svg/loading.svg';
 import { useAdminUserStore } from '@/store/system/adminUser';
-
+import { FormProps } from '@/views/system/dept/utils/types';
-// 添加或者修改表单元素
-interface FormItemProps {
-	username: string;
-	manager: string;
-}
-
-// 添加或修改表单Props
-interface FormProps {
-	formInline: FormItemProps;
-}
 
 const props = withDefaults(defineProps<FormProps>(), {
-	formInline: () => ({}),
+	formInline: () => ({
+		// 父级id
+		parentId: undefined,
+		// 管理者id
+		manager: undefined,
+		// 部门名称
+		deptName: undefined,
+		// 部门简介
+		summary: undefined,
+	}),
 });
 
 const adminUserStore = useAdminUserStore();

src/views/system/dept/utils/types.ts

@@ -8,8 +8,6 @@ export interface FormItemProps {
 	deptName: string;
 	// 部门简介
 	summary: string;
-	// 备注信息
-	remarks: string;
 }
 
 // 添加或修改表单Props