From 4ff09e212f2eebdd389fd64662de3bb25a2dda07 Mon Sep 17 00:00:00 2001 From: bunny <1319900154@qq.com> Date: Wed, 9 Oct 2024 16:45:34 +0800 Subject: [PATCH] =?UTF-8?q?page:=20=F0=9F=93=84=20=E5=90=8E=E5=8F=B0?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E7=AE=A1=E7=90=86,=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E5=9B=BE=E6=A0=87=E7=AE=A1=E7=90=86=E5=92=8C=E8=B7=AF=E7=94=B1?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9B=BE=E6=A0=87=E4=B8=8D=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/v1/files.ts | 30 +++++ src/components/SelectIcon/Select.vue | 8 +- src/store/system/files.ts | 81 ++++++++++++ src/views/system/files/files-dialog.vue | 42 ++++++ src/views/system/files/index.vue | 120 ++++++++++++++++++ src/views/system/files/utils/columns.ts | 34 +++++ src/views/system/files/utils/hooks.ts | 106 ++++++++++++++++ src/views/system/files/utils/types.ts | 16 +++ .../system/menu/{form.vue => menu-dialog.vue} | 4 +- src/views/system/menu/utils/hooks.tsx | 2 +- .../menuIcon/menu-icon-select-icon-name.vue | 9 +- 11 files changed, 441 insertions(+), 11 deletions(-) create mode 100644 src/api/v1/files.ts create mode 100644 src/store/system/files.ts create mode 100644 src/views/system/files/files-dialog.vue create mode 100644 src/views/system/files/index.vue create mode 100644 src/views/system/files/utils/columns.ts create mode 100644 src/views/system/files/utils/hooks.ts create mode 100644 src/views/system/files/utils/types.ts rename src/views/system/menu/{form.vue => menu-dialog.vue} (96%) diff --git a/src/api/v1/files.ts b/src/api/v1/files.ts new file mode 100644 index 0000000..63d71bb --- /dev/null +++ b/src/api/v1/files.ts @@ -0,0 +1,30 @@ +import { http } from '@/api/service/request'; +import type { BaseResult, ResultTable } from '@/api/service/types'; + +/** + * 系统文件管理---获取系统文件管理列表 + */ +export const fetchGetFilesList = (data: any) => { + return http.request>('get', `files/getFilesList/${data.currentPage}/${data.pageSize}`, { params: data }); +}; + +/** + * 系统文件管理---添加系统文件管理 + */ +export const fetchAddFiles = (data: any) => { + return http.request>('post', 'files/addFiles', { data }); +}; + +/** + * 系统文件管理---更新系统文件管理 + */ +export const fetchUpdateFiles = (data: any) => { + return http.request>('put', 'files/updateFiles', { data }); +}; + +/** + * 系统文件管理---删除系统文件管理 + */ +export const fetchDeleteFiles = (data: any) => { + return http.request>('delete', 'files/deleteFiles', { data }); +}; diff --git a/src/components/SelectIcon/Select.vue b/src/components/SelectIcon/Select.vue index b9b8b03..764c923 100644 --- a/src/components/SelectIcon/Select.vue +++ b/src/components/SelectIcon/Select.vue @@ -35,7 +35,7 @@ const onSearch = async () => { innerForm.pageSize = data.pageSize; innerForm.total = data.total; - innerForm.value = false; + innerForm.loading = false; }; /** @@ -43,7 +43,7 @@ const onSearch = async () => { * @param value */ const onChangeIcon = (value: any) => { - form.value.icon = value.iconName; + form.value.icon = value.iconCode; }; /** @@ -57,7 +57,7 @@ const onClear = () => { * * 修改当前页 * @param value */ -const onCurrentChange = (value: string) => { +const onCurrentChange = (value: number) => { innerForm.currentPage = value; }; @@ -84,7 +84,7 @@ onMounted(() => { class="icon-item p-2 cursor-pointer mr-2 mt-1 flex justify-center items-center border border-[#e5e7eb]" @click="onChangeIcon(item)" > - + diff --git a/src/store/system/files.ts b/src/store/system/files.ts new file mode 100644 index 0000000..44e6358 --- /dev/null +++ b/src/store/system/files.ts @@ -0,0 +1,81 @@ +import { defineStore } from 'pinia'; +import { fetchAddFiles, fetchDeleteFiles, fetchGetFilesList, fetchUpdateFiles } from '@/api/v1/files'; +import { pageSizes } from '@/enums/baseConstant'; +import { storeMessage } from '@/utils/message'; +import { storePagination } from '@/store/useStorePagination'; + +/** + * 系统文件表 Store + */ +export const useFilesStore = defineStore('filesStore', { + state() { + return { + // 系统文件表列表 + datalist: [], + // 查询表单 + form: { + // 文件的名称 + filename: undefined, + // 文件在服务器上的存储路径 + filepath: undefined, + // 文件的MIME类型 + fileType: undefined, + // 下载数量 + downloadCount: undefined, + }, + // 分页查询结果 + pagination: { + currentPage: 1, + pageSize: 150, + total: 100, + pageSizes, + }, + // 加载 + loading: false, + }; + }, + getters: {}, + actions: { + /** + * * 获取系统文件表 + */ + async getFilesList() { + // 整理请求参数 + const data = { ...this.pagination, ...this.form }; + delete data.pageSizes; + delete data.total; + delete data.background; + + // 获取系统文件表列表 + const result = await fetchGetFilesList(data); + + // 公共页面函数hook + const pagination = storePagination.bind(this); + return pagination(result); + }, + + /** + * * 添加系统文件表 + */ + async addFiles(data: any) { + const result = await fetchAddFiles(data); + return storeMessage(result); + }, + + /** + * * 修改系统文件表 + */ + async updateFiles(data: any) { + const result = await fetchUpdateFiles(data); + return storeMessage(result); + }, + + /** + * * 删除系统文件表 + */ + async deleteFiles(data: any) { + const result = await fetchDeleteFiles(data); + return storeMessage(result); + }, + }, +}); diff --git a/src/views/system/files/files-dialog.vue b/src/views/system/files/files-dialog.vue new file mode 100644 index 0000000..b08d4ed --- /dev/null +++ b/src/views/system/files/files-dialog.vue @@ -0,0 +1,42 @@ + + + diff --git a/src/views/system/files/index.vue b/src/views/system/files/index.vue new file mode 100644 index 0000000..6cffead --- /dev/null +++ b/src/views/system/files/index.vue @@ -0,0 +1,120 @@ + + + diff --git a/src/views/system/files/utils/columns.ts b/src/views/system/files/utils/columns.ts new file mode 100644 index 0000000..955054f --- /dev/null +++ b/src/views/system/files/utils/columns.ts @@ -0,0 +1,34 @@ +import { reactive } from 'vue'; +import { $t } from '@/plugins/i18n'; + +// 表格列 +export const columns: TableColumnList = [ + { type: 'index', index: (index: number) => index + 1 }, + // { type: 'selection', align: 'left' }, + { label: $t('id'), prop: 'id' }, + // 文件的名称 + { label: $t('files_filename'), prop: 'filename' }, + // 文件在服务器上的存储路径 + { label: $t('files_filepath'), prop: 'filepath' }, + // 文件的MIME类型 + { label: $t('files_fileType'), prop: 'fileType' }, + // 下载数量 + { label: $t('files_downloadCount'), prop: 'downloadCount' }, + { label: $t('table.updateTime'), prop: 'updateTime', sortable: true, width: 160 }, + { label: $t('table.createTime'), prop: 'createTime', sortable: true, width: 160 }, + { label: $t('table.createUser'), prop: 'createUser', slot: 'createUser', width: 90 }, + { label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser', width: 90 }, + { label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' }, +]; + +// 添加规则 +export const rules = reactive({ + // 文件的名称 + filename: [{ required: true, message: `${$t('input')}${$t('files_filename')}`, trigger: 'blur' }], + // 文件在服务器上的存储路径 + filepath: [{ required: true, message: `${$t('input')}${$t('files_filepath')}`, trigger: 'blur' }], + // 文件的MIME类型 + fileType: [{ required: true, message: `${$t('input')}${$t('files_fileType')}`, trigger: 'blur' }], + // 下载数量 + downloadCount: [{ required: true, message: `${$t('input')}${$t('files_downloadCount')}`, trigger: 'blur' }], +}); diff --git a/src/views/system/files/utils/hooks.ts b/src/views/system/files/utils/hooks.ts new file mode 100644 index 0000000..058c6ac --- /dev/null +++ b/src/views/system/files/utils/hooks.ts @@ -0,0 +1,106 @@ +import { addDialog } from '@/components/BaseDialog/index'; +import FilesDialog from '@/views/system/files/files-dialog.vue'; +import { useFilesStore } from '@/store/system/files.ts'; +import { h, ref } from 'vue'; +import { messageBox } from '@/utils/message'; +import type { FormItemProps } from '@/views/system/files/utils/types'; +import { $t } from '@/plugins/i18n'; + +export const formRef = ref(); +const filesStore = useFilesStore(); + +/** + * * 搜索初始化系统文件表 + */ +export async function onSearch() { + filesStore.loading = true; + await filesStore.getFilesList(); + filesStore.loading = false; +} + +/** + * * 添加系统文件表 + */ +export function onAdd() { + addDialog({ + title: `${$t('add_new')}${$t('files')}`, + width: '30%', + props: { + formInline: { + filename: undefined, + filepath: undefined, + fileType: undefined, + downloadCount: undefined, + }, + }, + draggable: true, + fullscreenIcon: true, + closeOnClickModal: false, + contentRenderer: () => h(FilesDialog, { ref: formRef }), + beforeSure: (done, { options }) => { + const form = options.props.formInline as FormItemProps; + formRef.value.formRef.validate(async (valid: any) => { + if (!valid) return; + + const result = await filesStore.addFiles(form); + if (!result) return; + done(); + await onSearch(); + }); + }, + }); +} + +/** + * * 更新系统文件表 + * @param row + */ +export function onUpdate(row: any) { + addDialog({ + title: `${$t('modify')}${$t('files')}`, + width: '30%', + props: { + formInline: { + filename: row.filename, + filepath: row.filepath, + fileType: row.fileType, + downloadCount: row.downloadCount, + }, + }, + draggable: true, + fullscreenIcon: true, + closeOnClickModal: false, + contentRenderer: () => h(FilesDialog, { ref: formRef }), + beforeSure: (done, { options }) => { + const form = options.props.formInline as FormItemProps; + formRef.value.formRef.validate(async (valid: any) => { + if (!valid) return; + + const result = await filesStore.updateFiles({ ...form, id: row.id }); + if (!result) return; + done(); + await onSearch(); + }); + }, + }); +} + +/** + * * 删除系统文件表 + */ +export const onDelete = async (row: any) => { + const id = row.id; + + // 是否确认删除 + const result = await messageBox({ + title: $t('confirm_delete'), + showMessage: false, + confirmMessage: undefined, + cancelMessage: $t('cancel_delete'), + }); + if (!result) return; + + // 删除数据 + await filesStore.deleteFiles([id]); + await onSearch(); +}; diff --git a/src/views/system/files/utils/types.ts b/src/views/system/files/utils/types.ts new file mode 100644 index 0000000..ef4653a --- /dev/null +++ b/src/views/system/files/utils/types.ts @@ -0,0 +1,16 @@ +// 添加或者修改表单元素 +export interface FormItemProps { + // 文件的名称 + filename: string; + // 文件在服务器上的存储路径 + filepath: string; + // 文件的MIME类型 + fileType: string; + // 下载数量 + downloadCount: number; +} + +// 添加或修改表单Props +export interface FormProps { + formInline: FormItemProps; +} diff --git a/src/views/system/menu/form.vue b/src/views/system/menu/menu-dialog.vue similarity index 96% rename from src/views/system/menu/form.vue rename to src/views/system/menu/menu-dialog.vue index 07886e6..907d05a 100644 --- a/src/views/system/menu/form.vue +++ b/src/views/system/menu/menu-dialog.vue @@ -86,9 +86,7 @@ defineExpose({ menuFormRef: ruleFormRef }); - + diff --git a/src/views/system/menu/utils/hooks.tsx b/src/views/system/menu/utils/hooks.tsx index 84d4e02..9ac5ec1 100644 --- a/src/views/system/menu/utils/hooks.tsx +++ b/src/views/system/menu/utils/hooks.tsx @@ -1,4 +1,4 @@ -import editForm from '../form.vue'; +import editForm from '../menu-dialog.vue'; import { $t } from '@/plugins/i18n'; import { addDialog } from '@/components/BaseDialog/index'; import { h, ref } from 'vue'; diff --git a/src/views/system/menuIcon/menu-icon-select-icon-name.vue b/src/views/system/menuIcon/menu-icon-select-icon-name.vue index b488467..d2cf0c1 100644 --- a/src/views/system/menuIcon/menu-icon-select-icon-name.vue +++ b/src/views/system/menuIcon/menu-icon-select-icon-name.vue @@ -6,17 +6,20 @@ import LoadingSvg from '@/assets/svg/loading.svg'; import { FormProps } from '@/views/system/menuIcon/utils/types'; const props = withDefaults(defineProps(), { - formInline: () => ({}), + formInline: () => ({ + iconCode: '', + iconName: '', + }), }); const loading = ref(false); -const iconNameList = ref([]); +const iconNameList = ref(); const form = ref(props.formInline); /** * * 搜索 */ -const onRequestIconName = async (keyword: string) => { +const onRequestIconName = async (iconName: string) => { const data = { currentPage: 1, pageSize: 20, iconName }; loading.value = true;