auth/auth-web
auth
/
auth-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 🧩 修改文件重做

This commit is contained in:
bunny 2024-10-14 14:12:43 +08:00
parent 757fb3db9f
commit b042370e92
9 changed files with 139 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/api/v1/files.ts
View File

@ -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' } });
};
/** 系统文件管理---删除系统文件管理 */

22
src/store/monitor/files.ts
View File

@ -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);

71
src/views/monitor/files/files-dialog.vue
View File

@ -1,9 +1,11 @@
<script lang="ts" setup>
import { ref } from 'vue';
import { FormInstance } from 'element-plus';
import { rules } from '@/views/monitor/files/utils/columns';
import { onMounted, ref } from 'vue';
import { FormInstance, genFileId, UploadProps, UploadRawFile } from 'element-plus';
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-item :label="$t('files_filename')" prop="filename">
<el-form ref="formRef" :model="form" :rules="form.isUpload ? uploadRules : addRules" label-width="auto">
<!-- 文件名称---上传显示 -->
<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>

12
src/views/monitor/files/utils/columns.ts
View File

@ -21,11 +21,17 @@ export const columns: TableColumnList = [
];
// 添加规则
export const rules = reactive({
// 文件的名称
filename: [{ required: true, message: `${$t('input')}${$t('files_filename')}`, trigger: 'blur' }],
export const addRules = reactive({
// 文件在服务器上的存储路径
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' }],
});

25
src/views/monitor/files/utils/hooks.ts
View File

@ -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: undefined,
downloadCount: 0,
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;

4
src/views/monitor/files/utils/types.ts
View File

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

5
src/views/system/dept/index.vue
View File

@ -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();

23
src/views/system/dept/user-select-search.vue
View File

@ -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';
// 添加或者修改表单元素
interface FormItemProps {
username: string;
manager: string;
}
// 添加或修改表单Props
interface FormProps {
formInline: FormItemProps;
}
import { FormProps } from '@/views/system/dept/utils/types';
const props = withDefaults(defineProps<FormProps>(), {
formInline: () => ({}),
formInline: () => ({
// 父级id
parentId: undefined,
// 管理者id
manager: undefined,
// 部门名称
deptName: undefined,
// 部门简介
summary: undefined,
}),
});
const adminUserStore = useAdminUserStore();

2
src/views/system/dept/utils/types.ts
View File

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