page: 📄 后台文件管理,修改图标管理和路由添加图标不显示问题

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<BaseResult<ResultTable>>('get', `files/getFilesList/${data.currentPage}/${data.pageSize}`, { params: data });
+};
+
+/**
+ * 系统文件管理---添加系统文件管理
+ */
+export const fetchAddFiles = (data: any) => {
+	return http.request<BaseResult<object>>('post', 'files/addFiles', { data });
+};
+
+/**
+ * 系统文件管理---更新系统文件管理
+ */
+export const fetchUpdateFiles = (data: any) => {
+	return http.request<BaseResult<object>>('put', 'files/updateFiles', { data });
+};
+
+/**
+ * 系统文件管理---删除系统文件管理
+ */
+export const fetchDeleteFiles = (data: any) => {
+	return http.request<BaseResult<object>>('delete', 'files/deleteFiles', { data });
+};

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)"
 				>
-					<IconifyIconOnline :icon="item.iconName" height="20px" width="20px" />
+					<IconifyIconOnline :icon="item.iconCode" height="20px" width="20px" />
 				</li>
 			</ul>
 			<el-empty v-show="innerForm.datalist.length === 0" :image-size="60" description="图标不存在" />

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);
+		},
+	},
+});

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

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { FormInstance } from 'element-plus';
+import { rules } from '@/views/system/files/utils/columns';
+import { FormProps } from '@/views/system/files/utils/types';
+import { $t } from '@/plugins/i18n';
+
+const props = withDefaults(defineProps<FormProps>(), {
+	formInline: () => ({
+		// 文件的名称
+		filename: undefined,
+		// 文件在服务器上的存储路径
+		filepath: undefined,
+		// 文件的MIME类型
+		fileType: undefined,
+		// 下载数量
+		downloadCount: undefined,
+	}),
+});
+
+const formRef = ref<FormInstance>();
+const form = ref(props.formInline);
+
+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-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-form-item>
+		<el-form-item :label="$t('files_fileType')" prop="fileType">
+			<el-input v-model="form.fileType" autocomplete="off" type="text" />
+		</el-form-item>
+		<el-form-item :label="$t('files_downloadCount')" prop="downloadCount">
+			<el-input v-model="form.downloadCount" autocomplete="off" type="text" />
+		</el-form-item>
+	</el-form>
+</template>

src/views/system/files/index.vue

@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { columns } from '@/views/system/files/utils/columns';
+import PureTableBar from '@/components/TableBar/src/bar';
+import AddFill from '@iconify-icons/ri/add-circle-line';
+import PureTable from '@pureadmin/table';
+import { onAdd, onDelete, onSearch, onUpdate } from '@/views/system/files/utils/hooks';
+import Delete from '@iconify-icons/ep/delete';
+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 { useFilesStore } from '@/store/system/files.ts';
+import { useRenderIcon } from '@/components/CommonIcon/src/hooks';
+
+const tableRef = ref();
+const formRef = ref();
+const filesStore = useFilesStore();
+
+/**
+ * * 当前页改变时
+ */
+const onCurrentPageChange = async (value: number) => {
+	filesStore.pagination.currentPage = value;
+	await onSearch();
+};
+
+/**
+ * * 当分页发生变化
+ * @param value
+ */
+const onPageSizeChange = async (value: number) => {
+	filesStore.pagination.pageSize = value;
+	await onSearch();
+};
+
+/**
+ * 重置表单
+ * @param formEl
+ */
+const resetForm = async formEl => {
+	if (!formEl) return;
+	formEl.resetFields();
+	await onSearch();
+};
+
+onMounted(() => {
+	onSearch();
+});
+</script>
+
+<template>
+	<div class="main">
+		<el-form ref="formRef" :inline="true" :model="filesStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
+			<el-form-item :label="$t('files_filename')" prop="filename">
+				<el-input v-model="filesStore.form.filename" :placeholder="`${$t('input')}${$t('files_filename')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+			<el-form-item :label="$t('files_filepath')" prop="filepath">
+				<el-input v-model="filesStore.form.filepath" :placeholder="`${$t('input')}${$t('files_filepath')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+			<el-form-item :label="$t('files_fileType')" prop="fileType">
+				<el-input v-model="filesStore.form.fileType" :placeholder="`${$t('input')}${$t('files_fileType')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+			<el-form-item :label="$t('files_downloadCount')" prop="downloadCount">
+				<el-input v-model="filesStore.form.downloadCount" :placeholder="`${$t('input')}${$t('files_downloadCount')}`" class="!w-[180px]" clearable />
+			</el-form-item>
+			<el-form-item>
+				<el-button :icon="useRenderIcon('ri:search-line')" :loading="filesStore.loading" type="primary" @click="onSearch"> {{ $t('search') }} </el-button>
+				<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> {{ $t('buttons.reset') }}</el-button>
+			</el-form-item>
+		</el-form>
+
+		<PureTableBar :columns="columns" title="系统文件管理" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
+			<template #buttons>
+				<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('add_new') }}</el-button>
+			</template>
+
+			<template v-slot="{ size, dynamicColumns }">
+				<pure-table
+					ref="tableRef"
+					:adaptiveConfig="{ offsetBottom: 96 }"
+					:columns="dynamicColumns"
+					:data="filesStore.datalist"
+					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
+					:loading="filesStore.loading"
+					:pagination="filesStore.pagination"
+					:size="size"
+					adaptive
+					align-whole="center"
+					border
+					highlight-current-row
+					row-key="id"
+					showOverflowTooltip
+					table-layout="auto"
+					@page-size-change="onPageSizeChange"
+					@page-current-change="onCurrentPageChange"
+				>
+					<template #createUser="{ row }">
+						<el-button link type="primary" @click="selectUserinfo(row.createUser)">{{ $t('table.createUser') }} </el-button>
+					</template>
+
+					<template #updateUser="{ row }">
+						<el-button link type="primary" @click="selectUserinfo(row.updateUser)">{{ $t('table.updateUser') }} </el-button>
+					</template>
+
+					<template #operation="{ row }">
+						<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> {{ $t('modify') }} </el-button>
+						<el-popconfirm :title="`是否确认删除 ${row.filename}数据`" @confirm="onDelete(row)">
+							<template #reference>
+								<el-button :icon="useRenderIcon(Delete)" :size="size" class="reset-margin" link type="primary">
+									{{ $t('delete') }}
+								</el-button>
+							</template>
+						</el-popconfirm>
+					</template>
+				</pure-table>
+			</template>
+		</PureTableBar>
+	</div>
+</template>

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' }],
+});

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();
+};

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;
+}

src/views/system/menu/menu-dialog.vue

@@ -86,9 +86,7 @@ defineExpose({ menuFormRef: ruleFormRef });
 
 			<re-col :sm="24" :value="12" :xs="24">
 				<el-form-item label="是否显示">
-					<el-switch v-model="newFormInline.visible" active-text="开启" inactive-text="隐藏" inline-prompt style="
-
---el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
+					<el-switch v-model="newFormInline.visible" active-text="开启" inactive-text="隐藏" inline-prompt style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
 				</el-form-item>
 			</re-col>
 		</el-row>

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';

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<FormProps>(), {
-	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;