fix: 🧩 多语言修改

mock/i18n.ts

@@ -1,16 +1,16 @@
-import { defineFakeRoute } from "vite-plugin-fake-server/client";
+import { defineFakeRoute } from 'vite-plugin-fake-server/client';
-import en from "./i18n/en";
+import en from './i18n/en';
-import zh from "./i18n/zh";
+import zh from './i18n/zh';
 
 export default defineFakeRoute([
-  {
+	{
-    url: "/mock/getI18n",
+		url: '/mock/getI18n',
-    method: "get",
+		method: 'get',
-    response: () => {
+		response: () => {
-      return {
+			return {
-        code: 200,
+				code: 200,
-        data: { zh, en, local: "zh" }
+				data: { zh, en, local: 'zh' },
-      };
+			};
-    }
+		},
-  }
+	},
 ]);

src/api/v1/i18n.ts

@@ -1,5 +1,5 @@
-import { http } from '@/api/service/mockRequest';
+import { http } from '@/api/service/request';
-import type { BaseResult } from '@/api/service/types';
+import type { BaseResult, ResultTable } from '@/api/service/types';
 
 /**
  * * 获取多语言内容
@@ -12,7 +12,7 @@ export const fetchGetI18n = () => {
  * 多语言管理---获取多语言列表
  */
 export const fetchGetI18nList = (data: any) => {
-	return http.request<BaseResult<object>>('get', `i18n/getI18nList/${data.page}/${data.pageSize}`, { data });
+	return http.request<BaseResult<ResultTable>>('get', `i18n/getI18nList/${data.currentPage}/${data.pageSize}`, { data });
 };
 
 /**
@@ -40,7 +40,7 @@ export const fetchDeleteI18n = (data: any) => {
  * 多语言类型管理---获取多语言类型列表
  */
 export const fetchGetI18nTypeList = () => {
-	return http.request<BaseResult<object>>('get', 'i18nType/getI18nTypeList');
+	return http.request<BaseResult<ResultTable>>('get', 'i18nType/getI18nTypeList');
 };
 
 /**
@@ -61,5 +61,5 @@ export const fetchUpdateI18nType = (data: any) => {
  * 多语言类型管理---删除多语言类型
  */
 export const fetchDeleteI18nType = (data: any) => {
-	return http.request<BaseResult<object>>('put', 'i18nType/deleteI18nType', { data });
+	return http.request<BaseResult<object>>('delete', 'i18nType/deleteI18nType', { data });
 };

src/enums/index.ts

@@ -1,12 +1,12 @@
 import type { OptionsType } from '@/components/ReSegmented';
 
-const menuTypeOptions: Array<OptionsType> = [
+export const menuTypeOptions: Array<OptionsType> = [
 	{ label: '菜单', value: 0 },
 	{ label: 'iframe', value: 1 },
 	{ label: '外链', value: 2 },
 ];
 
-const showLinkOptions: Array<OptionsType> = [
+export const showLinkOptions: Array<OptionsType> = [
 	{ label: '显示', tip: '会在菜单中显示', value: true },
 	{
 		label: '隐藏',
@@ -15,7 +15,7 @@ const showLinkOptions: Array<OptionsType> = [
 	},
 ];
 
-const fixedTagOptions: Array<OptionsType> = [
+export const fixedTagOptions: Array<OptionsType> = [
 	{
 		label: '固定',
 		tip: '当前菜单名称固定显示在标签页且不可关闭',
@@ -28,7 +28,7 @@ const fixedTagOptions: Array<OptionsType> = [
 	},
 ];
 
-const keepAliveOptions: Array<OptionsType> = [
+export const keepAliveOptions: Array<OptionsType> = [
 	{ label: '缓存', tip: '会保存该页面的整体状态，刷新后会清空状态', value: true },
 	{
 		label: '不缓存',
@@ -37,7 +37,7 @@ const keepAliveOptions: Array<OptionsType> = [
 	},
 ];
 
-const hiddenTagOptions: Array<OptionsType> = [
+export const hiddenTagOptions: Array<OptionsType> = [
 	{ label: '允许', tip: '当前菜单名称或自定义信息允许添加到标签页', value: false },
 	{
 		label: '禁止',
@@ -46,14 +46,17 @@ const hiddenTagOptions: Array<OptionsType> = [
 	},
 ];
 
-const showParentOptions: Array<OptionsType> = [
+export const showParentOptions: Array<OptionsType> = [
 	{ label: '显示', tip: '会显示父级菜单', value: true },
 	{ label: '隐藏', tip: '不会显示父级菜单', value: false },
 ];
 
-const frameLoadingOptions: Array<OptionsType> = [
+export const frameLoadingOptions: Array<OptionsType> = [
 	{ label: '开启', tip: '有首次加载动画', value: true },
 	{ label: '关闭', tip: '无首次加载动画', value: false },
 ];
 
-export { menuTypeOptions, showLinkOptions, fixedTagOptions, keepAliveOptions, hiddenTagOptions, showParentOptions, frameLoadingOptions };
+export const frameSureOptions: Array<OptionsType> = [
+	{ label: '是', tip: '有首次加载动画', value: true },
+	{ label: '否', tip: '无首次加载动画', value: false },
+];

src/store/i18n/i18n.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 import { fetchAddI18n, fetchDeleteI18n, fetchGetI18n, fetchGetI18nList, fetchUpdateI18n } from '@/api/v1/i18n';
 import { pageSizes } from '@/enums/baseConstant';
-import { storeMessage } from '@/utils/message';
+import { message, storeMessage } from '@/utils/message';
 
 export const userI18nStore = defineStore('i18nStore', {
 	persist: true,
@@ -10,9 +10,9 @@ export const userI18nStore = defineStore('i18nStore', {
 			// ? 多语言内容
 			i18n: {},
 			// 多语言列表
-			i18nDataList: [],
+			datalist: [],
-			// 多语言类型
+			// 查询表单
-			i18nTypeList: [],
+			form: { keyName: undefined, translation: undefined },
 			isAddShown: false,
 			// ? 分页查询结果
 			pagination: {
@@ -20,13 +20,10 @@ export const userI18nStore = defineStore('i18nStore', {
 				pageSize: 150,
 				total: 100,
 				pageSizes,
+				background: true,
 			},
 			// 加载
 			loading: false,
-			// 添加弹窗
-			addDialogVisible: false,
-			// 更新弹窗
-			updateDialogVisible: false,
 		};
 	},
 	getters: {},
@@ -51,9 +48,21 @@ export const userI18nStore = defineStore('i18nStore', {
 		/**
 		 * * 获取多语言列表
 		 */
-		async getI18nMangeList(data: any) {
+		async getI18nMangeList() {
+			const data = { ...this.pagination, ...this.form };
 			const result = await fetchGetI18nList(data);
-			return storeMessage(result);
+
+			// 如果成功赋值内容
+			if (result.code === 200) {
+				this.datalist = result.data.list;
+				this.pagination.currentPage = result.data.pageNo;
+				this.pagination.pageSize = result.data.pageSize;
+				this.pagination.total = result.data.total;
+				return true;
+			}
+
+			message(result.message, { type: 'error' });
+			return false;
 		},
 
 		/**

src/store/i18n/i18nType.ts

@@ -9,6 +9,8 @@ export const userI18nTypeStore = defineStore('i18nTypeStore', {
 		return {
 			// 多语言列表
 			datalist: [],
+			// 查询表单
+			form: { typeName: undefined, summary: undefined },
 			isAddShown: false,
 			// ? 分页查询结果
 			pagination: {
@@ -19,10 +21,6 @@ export const userI18nTypeStore = defineStore('i18nTypeStore', {
 			},
 			// 加载
 			loading: false,
-			// 添加弹窗
-			addDialogVisible: false,
-			// 更新弹窗
-			updateDialogVisible: false,
 		};
 	},
 	getters: {},
@@ -32,7 +30,11 @@ export const userI18nTypeStore = defineStore('i18nTypeStore', {
 		 */
 		async getI18nTypeList() {
 			const result = await fetchGetI18nTypeList();
-			return storeMessage(result);
+			if (result.code === 200) {
+				this.datalist = result.data;
+				return true;
+			}
+			return false;
 		},
 
 		/**

src/views/i18n/i18n-setting/i18n-dialog.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { FormInstance } from 'element-plus';
+import { rules } from '@/views/i18n/i18n-setting/utils/columns';
+import { FormProps } from '@/views/i18n/i18n-setting/utils/types';
+import { userI18nTypeStore } from '@/store/i18n/i18nType';
+
+const props = withDefaults(defineProps<FormProps>(), {
+	formInline: () => ({
+		keyName: '',
+		translation: '',
+		typeId: '',
+	}),
+});
+
+const ruleFormRef = ref<FormInstance>();
+const form = ref(props.formInline);
+const i18nTypeStore = userI18nTypeStore();
+
+defineExpose({ ruleFormRef });
+</script>
+
+<template>
+	<el-form ref="ruleFormRef" :model="form" :rules="rules" isDefault-icon label-position="left" label-width="135px">
+		<el-form-item label="选择添加语言分类" prop="typeId">
+			<el-select v-model="form.typeId" filterable placeholder="选择添加语言分类">
+				<el-option v-for="item in i18nTypeStore.datalist" :key="item.id" :label="item.typeName" :value="item.id" />
+			</el-select>
+		</el-form-item>
+
+		<el-form-item label="多语言key" prop="keyName">
+			<el-input v-model="form.keyName" clearable placeholder="输入多语言key" />
+		</el-form-item>
+
+		<el-form-item label="翻译" prop="translation">
+			<el-input v-model="form.translation" clearable placeholder="输入多语言翻译" />
+		</el-form-item>
+	</el-form>
+</template>

src/views/i18n/i18n-setting/index.vue

@@ -1,54 +1,103 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-import LanguageAdd from '@/views/i18n/i18n-setting/language-add.vue';
-import LanguageUpdate from '@/views/i18n/i18n-setting/language-update.vue';
 import { userI18nStore } from '@/store/i18n/i18n';
-import { addDialogVisible, getI18nDataList, onDelete, updateDialogVisible } from '@/views/i18n/i18n-setting/utils/hook';
+import { onAdd, onDelete, onSearch, onUpdate } from '@/views/i18n/i18n-setting/utils/hook';
 import { useRenderIcon } from '@/components/ReIcon/src/hooks';
 import AddFill from '@iconify-icons/ri/add-circle-line';
 import EditPen from '@iconify-icons/ep/edit-pen';
-import { $t } from '@/plugins/i18n';
 import Delete from '@iconify-icons/ep/delete';
 import PureTableBar from '@/components/TableBar/src/bar';
 import PureTable from '@pureadmin/table';
 import { columns } from '@/views/i18n/i18n-setting/utils/columns';
+import Refresh from '@iconify-icons/ep/refresh';
+import { resetForm } from '@/views/menu/utils/hook';
 
 const tableRef = ref();
+const formRef = ref();
 const i18nStore = userI18nStore();
 
+/**
+ * 重置表单
+ * @param formEl
+ */
+const resetForm = async formEl => {
+	if (!formEl) return;
+	formEl.resetFields();
+	await onSearch();
+};
+
+/**
+ * * 当前页改变时
+ */
+const onCurrentPageChange = async (value: number) => {
+	i18nStore.pagination.currentPage = value;
+	await onSearch();
+};
+
+/**
+ * * 当分页发生变化
+ * @param value
+ */
+const onPageSizeChange = async (value: number) => {
+	i18nStore.pagination.pageSize = value;
+	await onSearch();
+};
+
+/**
+ * * 选择框点击的行
+ * @param row
+ */
+const onSelectionChange = (row: any) => {
+	ids.value = row.map((item: any) => item.id);
+};
+
 onMounted(() => {
-	getI18nDataList();
+	onSearch();
 });
 </script>
 
 <template>
 	<div class="main">
-		<language-add v-if="addDialogVisible" />
+		<el-form ref="formRef" :inline="true" :model="i18nStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
-		<language-update v-if="updateDialogVisible" />
+			<el-form-item label="多语言key" prop="keyName">
+				<el-input v-model="i18nStore.form.keyName" class="!w-[180px]" clearable placeholder="输入多语言key" />
+			</el-form-item>
+			<el-form-item label="多语言翻译" prop="translation">
+				<el-input v-model="i18nStore.form.translation" class="!w-[180px]" clearable placeholder="输入多语言翻译" />
+			</el-form-item>
+			<el-form-item>
+				<el-button :icon="useRenderIcon('ri:search-line')" :loading="i18nStore.loading" type="primary" @click="onSearch"> 搜索 </el-button>
+				<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> 重置</el-button>
+			</el-form-item>
+		</el-form>
 
-		<PureTableBar :columns="columns" :tableRef="tableRef?.getTableRef()" title="多语言管理" @fullscreen="tableRef.setAdaptive()" @refresh="getI18nDataList">
+		<PureTableBar :columns="columns" :tableRef="tableRef?.getTableRef()" title="多语言管理" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
 			<template #buttons>
-				<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="addDialogVisible = true"> 添加多语言</el-button>
+				<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> 添加多语言</el-button>
 			</template>
 			<template v-slot="{ size, dynamicColumns }">
 				<pure-table
 					ref="tableRef"
 					:adaptiveConfig="{ offsetBottom: 45 }"
 					:columns="dynamicColumns"
-					:data="i18nStore.i18nDataList"
+					:data="i18nStore.datalist"
 					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
 					:loading="i18nStore.loading"
+					:pagination="i18nStore.pagination"
 					:size="size"
 					adaptive
 					align-whole="center"
 					row-key="id"
 					showOverflowTooltip
 					table-layout="auto"
+					@selection-change="onSelectionChange"
+					@page-size-change="onPageSizeChange"
+					@page-current-change="onCurrentPageChange"
 				>
 					<template #operation="{ row }">
-						<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary"> 修改 </el-button>
+						<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> 修改 </el-button>
 						<el-button v-show="row.menuType !== 3" :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary"> 新增 </el-button>
-						<el-popconfirm :title="`是否确认删除菜单名称为${$t(row.title)}的这条数据${row?.children?.length > 0 ? '注意下级菜单也会一并删除，请谨慎操作' : ''}`" @confirm="onDelete(row)">
+						<el-popconfirm :title="`是否确认删除 ${row.translation}数据`" @confirm="onDelete(row)">
 							<template #reference>
 								<el-button :icon="useRenderIcon(Delete)" :size="size" class="reset-margin" link type="primary"> 删除 </el-button>
 							</template>

src/views/i18n/i18n-setting/language-add.vue

@@ -1,67 +0,0 @@
-<script lang="ts" setup>
-import LanguageDialog from '@/views/i18n/i18n-setting/language-dialog.vue';
-import { reactive, ref } from 'vue';
-import { FormInstance } from 'element-plus';
-import { userI18nStore } from '@/store/i18n/i18n';
-import { addDialogVisible } from '@/views/i18n/i18n-setting/utils/hook';
-
-const i18nStore = userI18nStore();
-const dialogRef = ref();
-const form = reactive({
-	languageId: '',
-	keyName: '',
-	translate: '',
-	parentId: '',
-});
-
-/**
- * * 关闭弹窗
- */
-const onClose = () => {
-	addDialogVisible.value = false;
-};
-
-/**
- * * 添加内容
- */
-const onSubmit = (formEl: FormInstance | undefined) => {
-	if (!formEl) return;
-	formEl.validate(async valid => {
-		if (valid) {
-			// 添加内容
-			const result = await i18nStore.addI18n(form);
-			if (!result) return false;
-
-			// 添加成功后刷新数据
-			addDialogVisible.value = false;
-			await i18nStore.getI18nMangeList();
-		}
-	});
-};
-
-/**
- * * 继续添加内容
- */
-const onAddContinue = (value: any) => {
-	const formEl: FormInstance | undefined = value.ruleFormRef;
-	if (!formEl) return;
-	formEl.validate(async valid => {
-		if (valid) {
-			// 添加内容
-			const result = await i18nStore.addI18n(form);
-			if (!result) return false;
-
-			// 添加成功后刷新数据
-			await i18nStore.getI18nMangeList();
-		}
-	});
-};
-</script>
-
-<template>
-	<language-dialog ref="dialogRef" :form="form" :on-close="onClose" :on-submit="onSubmit" :visible="addDialogVisible" title="添加多语言内容">
-		<template #footer>
-			<el-button type="success" @click="onAddContinue(dialogRef)">继续添加</el-button>
-		</template>
-	</language-dialog>
-</template>

src/views/i18n/i18n-setting/language-dialog.vue

@@ -1,64 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-import { FormInstance } from 'element-plus';
-import SimpleDialog from '@/components/BaseDialog/SimpleDialog.vue';
-import { userI18nStore } from '@/store/i18n/i18n';
-import { rules } from '@/views/i18n/i18n-setting/utils/columns';
-
-defineProps({
-	// 是否显示弹窗
-	visible: {
-		type: Boolean,
-		default: false,
-	},
-	// 标题内容
-	title: {
-		type: String,
-	},
-	// 表单内容
-	form: {
-		type: Object as PropType<any>,
-	},
-	// 关闭弹窗
-	onClose: {
-		type: Function as PropType<any>,
-		default: () => {},
-	},
-	// 提交呢内容
-	onSubmit: {
-		type: Function as PropType<any>,
-		default: () => {},
-	},
-});
-
-const ruleFormRef = ref<FormInstance>();
-const i18nStore = userI18nStore();
-
-defineExpose({
-	ruleFormRef,
-});
-</script>
-
-<template>
-	<SimpleDialog :show="visible" :title="title" width="600" @onCancel="onClose" @onConfirm="onSubmit(ruleFormRef)">
-		<el-form ref="ruleFormRef" :model="form" :rules="rules" isDefault-icon label-position="left" label-width="135px">
-			<el-form-item label="选择添加语言分类" prop="languageId">
-				<el-select v-model="form.languageId!" filterable placeholder="选择添加语言分类">
-					<el-option v-for="item in i18nStore.i18nTypeList" :key="item.id" :label="item.value" :value="item.id" />
-				</el-select>
-			</el-form-item>
-
-			<el-form-item label="多语言key" prop="keyName">
-				<el-input v-model="form.keyName!" clearable placeholder="输入多语言key" />
-			</el-form-item>
-
-			<el-form-item label="翻译" prop="translate">
-				<el-input v-model="form.translate!" clearable placeholder="输入多语言翻译" />
-			</el-form-item>
-		</el-form>
-
-		<template #footer-add>
-			<slot name="footer" />
-		</template>
-	</SimpleDialog>
-</template>

src/views/i18n/i18n-setting/language-update.vue

@@ -1,37 +0,0 @@
-<script lang="ts" setup>
-import LanguageDialog from '@/views/i18n/i18n-setting/language-dialog.vue';
-import { FormInstance } from 'element-plus';
-import { userI18nStore } from '@/store/i18n/i18n';
-import { updateDialogVisible, updateForm } from '@/views/i18n/i18n-setting/utils/hook';
-
-const i18nStore = userI18nStore();
-
-/**
- * * 关闭弹窗
- */
-const onClose = () => {
-	updateDialogVisible.value = false;
-};
-
-/**
- * * 添加内容
- */
-const onSubmit = (formEl: FormInstance | undefined) => {
-	if (!formEl) return;
-	formEl.validate(async valid => {
-		if (valid) {
-			// 添加内容
-			const result = await i18nStore.updateI18n(updateForm);
-			if (!result) return false;
-
-			// 添加成功后刷新数据
-			updateDialogVisible.value = false;
-			await i18nStore.getI18nMangeList();
-		}
-	});
-};
-</script>
-
-<template>
-	<language-dialog :form="updateForm" :on-close="onClose" :on-submit="onSubmit" :visible="updateDialogVisible" title="修改多语言内容" />
-</template>

src/views/i18n/i18n-setting/utils/columns.tsx

@@ -3,19 +3,20 @@ import { reactive } from 'vue';
 import type { FormRules } from 'element-plus';
 
 export const columns: TableColumnList = [
-	// { type: 'selection' },
+	{ label: 'id', prop: 'id' },
-	// { type: 'index', label: 'table.tableNumber', width: 100 },
+	{ label: 'i18n_keyName', prop: 'keyName' },
-	{ label: 'i18n.keyName', prop: 'keyName' },
+	{ label: 'i18n_translation', prop: 'translation' },
-	{ label: 'i18n.translate', prop: 'translate' },
+	{ label: 'i18n_typeId', prop: 'typeId' },
-	{ label: 'i18n.languageSummary', prop: 'languageSummary' },
+	{ label: 'updateTime', prop: 'updateTime' },
-	{ label: 'i18n.languageName', prop: 'languageName' },
+	{ label: 'createTime', prop: 'createTime' },
-	{ label: 'i18n.parentKeyName', prop: 'parentKeyName' },
+	{ label: 'createUser', prop: 'createUser' },
-	{ label: 'table.operation', prop: 'operation', slot: 'operation' },
+	{ label: 'updateUser', prop: 'updateUser' },
+	{ label: 'operation', fixed: 'right', width: 210, slot: 'operation' },
 ];
 
 // 添加多语言表单规则
 export const rules = reactive<FormRules>({
-	languageId: [{ required: true, message: '选择添加语言分类', trigger: 'blur' }],
 	keyName: [{ required: true, message: '输入多语言key', trigger: 'blur' }],
-	translate: [{ required: true, message: '输入多语言翻译', trigger: 'blur' }],
+	translation: [{ required: true, message: '输入多语言翻译', trigger: 'blur' }],
+	typeId: [{ required: true, message: '选择添加语言分类', trigger: 'blur' }],
 });

src/views/i18n/i18n-setting/utils/hook.ts

@@ -1,11 +1,15 @@
-import { reactive, ref } from 'vue';
+import { h, reactive, ref } from 'vue';
 import { userI18nStore } from '@/store/i18n/i18n';
 import { messageBox } from '@/utils/message';
+import { addDialog } from '@/components/BaseDialog/index';
+import { deviceDetection } from '@pureadmin/utils';
+import I18nDialog from '@/views/i18n/i18n-setting/i18n-dialog.vue';
+import type { FormProps } from '@/views/i18n/i18n-setting/utils/types';
 
-export const addDialogVisible = ref(false);
+export const formRef = ref();
-export const updateDialogVisible = ref(false);
-
 const i18nStore = userI18nStore();
+const ids = ref<string[]>([]);
+
 // 更新表单数据
 export const updateForm = reactive({
 	id: '',
@@ -14,112 +18,88 @@ export const updateForm = reactive({
 	translate: '',
 	parentId: '',
 });
-// 彻底删除 id列表
-const ids = ref<string[]>([]);
 
 /**
  * * 查询内容
  */
-export const getI18nDataList = async () => {
+export const onSearch = async () => {
 	i18nStore.loading = true;
 	await i18nStore.getI18nMangeList();
 	i18nStore.loading = false;
 };
 
-/**
- * * 当前页改变时
- */
-export const onCurrentPageChange = async (value: number) => {
-	i18nStore.pagination.currentPage = value;
-	await getI18nDataList();
-};
-
-/**
- * * 当分页发生变化
- * @param value
- */
-export const onPageSizeChange = async (value: number) => {
-	i18nStore.pagination.pageSize = value;
-	await getI18nDataList();
-};
-
-/**
- * * 选择框点击的行
- * @param row
- */
-export const onSelectionChange = (row: any) => {
-	ids.value = row.map((item: any) => item.id);
-};
-
 /**
  * * 行内容添加
  * 打开添加弹窗
  */
-export const onRowAdd = () => {
+export const onAdd = () => {
-	addDialogVisible.value = true;
+	addDialog({
-};
+		title: `添加多语言`,
+		width: '30%',
+		props: { formInline: { keyName: '', translation: '', typeId: '' } },
+		draggable: true,
+		fullscreen: deviceDetection(),
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(I18nDialog, { ref: formRef }),
+		beforeSure: (done, { options }) => {
+			const form = options.props.formInline as FormProps;
+			formRef.value.ruleFormRef.validate(async (valid: any) => {
+				if (!valid) return;
 
-/**
+				const result = await i18nStore.addI18n(form);
- * * 批量彻底删除行
+				if (!result) return;
- */
+				done();
-export const onRowDelete = async () => {
+				await onSearch();
-	const isConfirm = await messageBox({
+			});
-		message: '是否确认批量删除(此操作不可逆)',
+		},
-		title: '删除警告',
-		showMessage: false,
-		confirmMessage: '删除成功',
-		cancelMessage: '取消删除',
 	});
-
-	if (isConfirm) {
-		const data = ids.value;
-		await i18nStore.deleteI18n(data);
-		await getI18nDataList();
-	}
-};
-/**
- * * 批量彻底删除行
- */
-export const onRowDeleteWithChildren = async () => {
-	const isConfirm = await messageBox({
-		message: '是否确认批量删除(此操作不可逆)',
-		title: '删除警告',
-		showMessage: false,
-		confirmMessage: '删除成功',
-		cancelMessage: '取消删除',
-	});
-
-	if (isConfirm) {
-		const data = ids.value;
-		await i18nStore.deleteI18n(data);
-		await getI18nDataList();
-	}
 };
 
 /**
  * * 当表格修改时
  */
 export const onUpdate = (row: any) => {
-	const data = row.row;
+	const id = row.id;
 
-	// 赋值内容
+	addDialog({
-	updateForm.id = data.id;
+		title: `更新多语言`,
-	updateForm.languageId = data.parentKeyName;
+		width: '30%',
-	updateForm.keyName = data.keyName;
+		props: { formInline: { keyName: row.keyName, translation: row.translation, typeId: row.typeId } },
-	updateForm.translate = data.translate;
+		draggable: true,
-	data.parentId != 0 && (updateForm.parentId = data.parentId);
+		fullscreen: deviceDetection(),
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(I18nDialog, { ref: formRef }),
+		beforeSure: (done, { options }) => {
+			const form = options.props.formInline as FormProps;
+			formRef.value.ruleFormRef.validate(async (valid: any) => {
+				if (!valid) return;
 
-	// 打开弹窗
+				const result = await i18nStore.updateI18n({ ...form, id });
-	updateDialogVisible.value = true;
+				if (!result) return;
+				done();
+				await onSearch();
+			});
+		},
+	});
 };
 
 /**
- * * 当删除时
+ * * 批量彻底删除行
- * @param row
  */
-export const onDelete = async (row: any) => {
+export const onDelete = async () => {
-	const id = row.row.id;
+	const isConfirm = await messageBox({
-	const form = { id };
+		message: '是否确认批量删除(此操作不可逆)',
-	await i18nStore.deleteI18n(form);
+		title: '删除警告',
-	await i18nStore.getI18nMangeList();
+		showMessage: false,
+		confirmMessage: '删除成功',
+		cancelMessage: '取消删除',
+	});
+
+	if (isConfirm) {
+		const data = ids.value;
+		await i18nStore.deleteI18n(data);
+		await onSearch();
+	}
 };

src/views/i18n/i18n-setting/utils/types.ts

@@ -0,0 +1,11 @@
+// 添加或者修改表单元素
+export interface FormItemProps {
+	keyName: string;
+	translation: string;
+	typeId: string;
+}
+
+// 添加或修改表单Props
+export interface FormProps {
+	formInline: FormItemProps;
+}

src/views/i18n/i18n-type-setting/add-i18n-type.vue

@@ -1,81 +0,0 @@
-<script lang="ts" setup>
-import SimpleDialog from '@/components/BaseDialog/SimpleDialog.vue';
-import { reactive, ref } from 'vue';
-import { ElMessage, FormInstance } from 'element-plus';
-import { addRules } from '@/views/i18n/i18n-type-setting/utils/rules';
-import { isDefaultOptions } from '@/enums/baseConstant';
-import { $t } from '@/plugins/i18n';
-import { userI18nStore } from '@/store/i18n/i18n';
-
-const formRef = ref<FormInstance>();
-const i18nStore = userI18nStore();
-const form = reactive({
-	languageName: '',
-	summary: '',
-	isDefault: false,
-});
-
-/**
- * * 提交内容
- * @param formEl
- */
-const submitForm = (formEl: FormInstance | undefined) => {
-	if (!formEl) return;
-	formEl.validate(async valid => {
-		if (valid) {
-			await i18nStore.addI18nType(form);
-			await i18nStore.getI18nTypeList();
-			i18nStore.isAddShown = false;
-		} else {
-			ElMessage.warning('请填写必填项');
-		}
-	});
-};
-
-/**
- * * 充值表单
- * @param formEl
- */
-const resetForm = (formEl: FormInstance | undefined) => {
-	if (!formEl) return;
-	formEl.resetFields();
-};
-
-/**
- * * 关闭弹窗
- */
-const onCancel = (value: boolean) => {
-	i18nStore.isAddShown = value;
-};
-</script>
-
-<template>
-	<SimpleDialog :show="i18nStore.isAddShown" width="600" @on-cancel="onCancel">
-		<template #header>
-			<h1>添加多语言种类</h1>
-		</template>
-
-		<el-form ref="formRef" :model="form" :rules="addRules" label-width="auto">
-			<el-form-item label="语言名称" prop="languageName">
-				<el-input v-model="form.languageName" autocomplete="off" type="text" />
-			</el-form-item>
-			<el-form-item label="语言详情" prop="summary">
-				<el-input v-model="form.summary" autocomplete="off" type="text" />
-			</el-form-item>
-			<el-form-item label="是否为默认语言" prop="isDefault">
-				<el-select v-model="form.isDefault" placeholder="选择是否为默认">
-					<el-option v-for="(item, index) in isDefaultOptions" :key="index" :label="item.label" :value="item.value" />
-				</el-select>
-			</el-form-item>
-		</el-form>
-
-		<!-- 确认底部 -->
-		<template #dialogFooter>
-			<el-button type="primary" @click="submitForm(formRef)">{{ $t('buttons.confirm') }}</el-button>
-			<el-button type="warning" @click="resetForm(formRef)">{{ $t('buttons.rest') }}</el-button>
-			<el-button @click="onCancel(false)">{{ $t('buttons.close') }}</el-button>
-		</template>
-	</SimpleDialog>
-</template>
-
-<style lang="scss" scoped></style>

src/views/i18n/i18n-type-setting/i18n-type-dialog.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { FormInstance } from 'element-plus';
+import { rules } from '@/views/i18n/i18n-type-setting/utils/columns';
+import { FormProps } from '@/views/i18n/i18n-type-setting/utils/types';
+import { frameSureOptions } from '@/enums';
+import Segmented from '@/components/ReSegmented';
+
+const props = withDefaults(defineProps<FormProps>(), {
+	formInline: () => ({
+		typeName: '',
+		summary: '',
+		isDefault: true,
+	}),
+});
+
+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="语言名称" prop="typeName">
+			<el-input v-model="form.typeName" autocomplete="off" type="text" />
+		</el-form-item>
+		<el-form-item label="语言详情" prop="summary">
+			<el-input v-model="form.summary" autocomplete="off" type="text" />
+		</el-form-item>
+		<el-form-item label="是否为默认语言" prop="isDefault">
+			<el-form-item label="是否为默认语言">
+				<Segmented :modelValue="form.isDefault ? 0 : 1" :options="frameSureOptions" @change="({ option: { value } }) => (form.isDefault = value)" />
+			</el-form-item>
+		</el-form-item>
+	</el-form>
+</template>

src/views/i18n/i18n-type-setting/index.vue

@@ -1,79 +1,61 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import { columns } from '@/views/i18n/i18n-type-setting/utils/columns';
-import { userI18nStore } from '@/store/i18n/i18n';
-import { messageBox } from '@/utils/message';
-import { addDialogVisible, getI18nDataList, onDelete } from '@/views/i18n/i18n-setting/utils/hook';
 import PureTableBar from '@/components/TableBar/src/bar';
 import { useRenderIcon } from '@/components/ReIcon/src/hooks';
 import AddFill from '@iconify-icons/ri/add-circle-line';
-import EditPen from '@iconify-icons/ep/edit-pen';
-import { $t } from '@/plugins/i18n';
-import Delete from '@iconify-icons/ep/delete';
 import PureTable from '@pureadmin/table';
-import AddI18nType from '@/views/i18n/i18n-type-setting/add-i18n-type.vue';
+import { userI18nTypeStore } from '@/store/i18n/i18nType';
+import { onAdd, onDelete, onSearch, onUpdate } from '@/views/i18n/i18n-type-setting/utils/hook';
+import Delete from '@iconify-icons/ep/delete';
+import EditPen from '@iconify-icons/ep/edit-pen';
+import TableIsDefaultTag from '@/components/TableBar/src/TableIsDefaultTag.vue';
+import { resetForm } from '@/views/menu/utils/hook';
+import Refresh from '@iconify-icons/ep/refresh';
 
-const i18nStore = userI18nStore();
 const tableRef = ref();
+const formRef = ref();
+const i18nTypeStore = userI18nTypeStore();
 
-/**
+const resetForm = async formEl => {
- * * 获取多语言类型
+	if (!formEl) return;
- */
+	formEl.resetFields();
-const getI18nType = () => {
+	await onSearch();
-	i18nStore.getI18nTypeList();
-};
-
-/**
- * * 表格的列添加语言类型
- */
-const onColumnAdd = () => {
-	i18nStore.isAddShown = true;
-};
-
-/**
- * * 删除多语言类容
- */
-const onColumnDelete = async (row: any, isPhysicalDelete: boolean) => {
-	const id = row.id;
-	const title = isPhysicalDelete ? '删除不可逆！' : '确认删除吗？';
-
-	messageBox({
-		message: `删除这条 【${row.summary}】 `,
-		title,
-		showMessage: false,
-		confirmMessage: undefined,
-		cancelMessage: '取消删除',
-	})
-		.then(result => {
-			if (result) {
-				i18nStore.deleteI18nType(id);
-			}
-			return result;
-		})
-		.then(result => result && getI18nType());
 };
 
 onMounted(() => {
-	getI18nType();
+	onSearch();
 });
 </script>
 
 <template>
 	<div class="main">
-		<!-- 添加多语言种类 -->
+		<el-form ref="formRef" :inline="true" :model="i18nTypeStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
-		<add-I18n-type />
+			<el-form-item label="类型名称" prop="title">
-		<PureTableBar :columns="columns" :tableRef="tableRef?.getTableRef()" title="多语言类型管理" @fullscreen="tableRef.setAdaptive()" @refresh="getI18nDataList">
+				<el-input v-model="i18nTypeStore.form.typeName" class="!w-[180px]" clearable placeholder="输入类型名称" />
+			</el-form-item>
+			<el-form-item label="类型解释" prop="title">
+				<el-input v-model="i18nTypeStore.form.summary" class="!w-[180px]" clearable placeholder="输入类型解释" />
+			</el-form-item>
+			<el-form-item>
+				<el-button :icon="useRenderIcon('ri:search-line')" :loading="i18nTypeStore.loading" type="primary" @click="onSearch"> 搜索 </el-button>
+				<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> 重置</el-button>
+			</el-form-item>
+		</el-form>
+
+		<PureTableBar :columns="columns" :tableRef="tableRef?.getTableRef()" title="多语言类型管理" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
 			<template #buttons>
-				<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="addDialogVisible = true"> 添加多语言 </el-button>
+				<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> 添加多语言类型</el-button>
 			</template>
+
 			<template v-slot="{ size, dynamicColumns }">
 				<pure-table
 					ref="tableRef"
 					:adaptiveConfig="{ offsetBottom: 45 }"
 					:columns="dynamicColumns"
-					:data="i18nStore.i18nDataList"
+					:data="i18nTypeStore.datalist"
 					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
-					:loading="i18nStore.loading"
+					:loading="i18nTypeStore.loading"
 					:size="size"
 					adaptive
 					align-whole="center"
@@ -81,10 +63,14 @@ onMounted(() => {
 					showOverflowTooltip
 					table-layout="auto"
 				>
+					<template #isDefault="{ row }">
+						<TableIsDefaultTag :status="row.isDefault" />
+					</template>
+
 					<template #operation="{ row }">
-						<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary"> 修改 </el-button>
+						<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> 修改 </el-button>
-						<el-button v-show="row.menuType !== 3" :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary"> 新增 </el-button>
+						<el-button :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd"> 新增 </el-button>
-						<el-popconfirm :title="`是否确认删除菜单名称为${$t(row.title)}的这条数据${row?.children?.length > 0 ? '注意下级菜单也会一并删除，请谨慎操作' : ''}`" @confirm="onDelete(row)">
+						<el-popconfirm :title="`是否确认删除 ${row.typeName}数据`" @confirm="onDelete(row)">
 							<template #reference>
 								<el-button :icon="useRenderIcon(Delete)" :size="size" class="reset-margin" link type="primary"> 删除 </el-button>
 							</template>

src/views/i18n/i18n-type-setting/utils/columns.tsx

@@ -1,76 +1,21 @@
-import { ref } from 'vue';
+import { reactive, ref } from 'vue';
-import { delObjectProperty } from '@pureadmin/utils';
-import { isDefaultOptions } from '@/enums/baseConstant';
-import TableIsDefaultTag from '@/components/TableBar/src/TableIsDefaultTag.vue';
-import { userI18nTypeStore } from '@/store/i18n/i18nType';
 
-const i18nTypeStore = userI18nTypeStore();
 export const editMap = ref({});
 
 export const columns: TableColumnList = [
-	// { type: 'index', label: '序号', width: 100 },
+	{ label: 'id', prop: 'id' },
-	{
+	{ label: 'i18n_languageName', prop: 'typeName' },
-		label: 'i18n.languageName',
+	{ label: 'i18n_summary', prop: 'summary' },
-		prop: 'languageName',
+	{ label: 'isDefault', prop: 'isDefault', slot: 'isDefault' },
-		cellRenderer({ row, index }) {
+	{ label: 'updateTime', prop: 'updateTime' },
-			return <>{editMap.value[index]?.editable ? <el-input v-model={row.languageName} /> : <p>{row.languageName}</p>}</>;
+	{ label: 'createTime', prop: 'createTime' },
-		},
+	{ label: 'createUser', prop: 'createUser' },
-	},
+	{ label: 'updateUser', prop: 'updateUser' },
-	{
+	{ label: 'operation', fixed: 'right', width: 210, slot: 'operation' },
-		label: 'i18n.languageSummary',
-		prop: 'summary',
-		cellRenderer({ row, index }) {
-			return <>{editMap.value[index]?.editable ? <el-input v-model={row.summary} /> : <p>{row.summary}</p>}</>;
-		},
-	},
-	{
-		label: 'i18n.isDefault',
-		prop: 'isDefault',
-		cellRenderer({ row, index }) {
-			return (
-				<>
-					{editMap.value[index]?.editable ? (
-						<el-select placeholder={'table.chooseIsDefault'} v-model={row.isDefault}>
-							{isDefaultOptions.map(item => (
-								<el-option key={item.value} label={item.label} value={item.value} />
-							))}
-						</el-select>
-					) : (
-						<TableIsDefaultTag status={row.isDefault} />
-					)}
-				</>
-			);
-		},
-	},
-	// ? 表格操作
-	{ label: 'table.operation', prop: 'op', slot: 'op', width: 160, fixed: 'right' },
 ];
 
-/**
+// 添加规则
- * * 编辑内容
+export const rules = reactive({
- * @param row
+	typeName: [{ required: true, message: '填写语言名称(例如：zh)', trigger: 'blur' }],
- * @param index
+	summary: [{ required: true, message: '填写语言详情', trigger: 'blur' }],
- */
+});
-export function onEdit(row: any, index: number) {
-	editMap.value[index] = Object.assign({ ...row, editable: true });
-}
-
-/**
- * * 保存修改
- * @param row
- * @param index
- */
-export async function onSave(row: any, index: number) {
-	await i18nTypeStore.updateI18nType(row);
-	editMap.value[index].editable = false;
-	await i18nTypeStore.getI18nTypeList();
-}
-
-/**
- * * 返回，不修改
- * @param index
- */
-export function onCancel(index: number) {
-	editMap.value[index].editable = false;
-	i18nTypeStore.datalist[index] = delObjectProperty(editMap.value[index], 'editable');
-}

src/views/i18n/i18n-type-setting/utils/hook.tsx

@@ -0,0 +1,97 @@
+import { deviceDetection } from '@pureadmin/utils';
+import { addDialog } from '@/components/BaseDialog/index';
+import AddI18nType from '@/views/i18n/i18n-type-setting/i18n-type-dialog.vue';
+import { userI18nTypeStore } from '@/store/i18n/i18nType';
+import { h, ref } from 'vue';
+import type { AddFormItemProps } from '@/views/i18n/i18n-type-setting/utils/types';
+import { messageBox } from '@/utils/message';
+
+export const formRef = ref();
+const i18nTypeStore = userI18nTypeStore();
+
+/**
+ * * 搜索初始化多语言类型
+ */
+export async function onSearch() {
+	i18nTypeStore.loading = true;
+	await i18nTypeStore.getI18nTypeList();
+	i18nTypeStore.loading = false;
+}
+
+/**
+ * * 添加多语言
+ */
+export function onAdd() {
+	addDialog({
+		title: `添加多语言类型`,
+		width: '30%',
+		props: {
+			formInline: { typeName: '', summary: '', isDefault: false },
+		},
+		draggable: true,
+		fullscreen: deviceDetection(),
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(AddI18nType, { ref: formRef }),
+		beforeSure: (done, { options }) => {
+			const form = options.props.formInline as AddFormItemProps;
+			formRef.value.formRef.validate(async (valid: any) => {
+				if (!valid) return;
+
+				const result = await i18nTypeStore.addI18nType(form);
+				if (!result) return;
+				done();
+				await onSearch();
+			});
+		},
+	});
+}
+
+/**
+ * * 更新内容
+ * @param row
+ */
+export function onUpdate(row: any) {
+	addDialog({
+		title: `修改多语言类型`,
+		width: '30%',
+		props: { formInline: { typeName: row.typeName, summary: row.summary, isDefault: row.isDefault } },
+		draggable: true,
+		fullscreen: deviceDetection(),
+		fullscreenIcon: true,
+		closeOnClickModal: false,
+		contentRenderer: () => h(AddI18nType, { ref: formRef }),
+		beforeSure: (done, { options }) => {
+			const form = options.props.formInline as AddFormItemProps;
+			formRef.value.formRef.validate(async (valid: any) => {
+				if (!valid) return;
+
+				const result = await i18nTypeStore.updateI18nType({ ...form, id: row.id });
+				if (!result) return;
+				done();
+				await onSearch();
+			});
+		},
+	});
+}
+
+/**
+ * * 删除多语言类容
+ */
+export const onDelete = async (row: any) => {
+	const id = row.id;
+
+	// 是否确认删除
+	const result = await messageBox({
+		message: `删除 【${row.summary}】 这条记录吗？`,
+		title: '确认删除吗？',
+		showMessage: false,
+		confirmMessage: undefined,
+		cancelMessage: '取消删除',
+	});
+	if (!result) return;
+
+	// 删除数据
+	await i18nTypeStore.deleteI18nType([id]);
+	await onSearch();
+};

src/views/i18n/i18n-type-setting/utils/rules.ts

@@ -1,12 +0,0 @@
-import type { FormRules } from 'element-plus';
-import { reactive } from 'vue';
-
-interface AddRuleForm {
-	languageName: string;
-	summary: string;
-}
-
-// 添加规则
-export const addRules = reactive<FormRules<AddRuleForm>>({
-	languageName: [{ required: true, message: '填写语言名称(例如：zh)', trigger: 'blur' }],
-});

src/views/i18n/i18n-type-setting/utils/types.ts

@@ -0,0 +1,11 @@
+// 添加或者修改表单元素
+export interface FormItemProps {
+	typeName: string;
+	summary: string;
+	isDefault: boolean;
+}
+
+// 添加或修改表单Props
+export interface FormProps {
+	formInline: FormItemProps;
+}

src/views/menu/index.vue

@@ -27,8 +27,8 @@ onMounted(() => {
 <template>
 	<div class="main">
 		<el-form ref="formRef" :inline="true" :model="form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
-			<el-form-item label="菜单名称：" prop="title">
+			<el-form-item label="菜单名称" prop="title">
-				<el-input v-model="form.title" class="!w-[180px]" clearable placeholder="请输入菜单名称" />
+				<el-input v-model="form.title" class="!w-[180px]" clearable placeholder="输入菜单名称" />
 			</el-form-item>
 			<el-form-item>
 				<el-button :icon="useRenderIcon('ri:search-line')" :loading="loading" type="primary" @click="onSearch"> 搜索 </el-button>
@@ -54,7 +54,6 @@ onMounted(() => {
 					row-key="id"
 					showOverflowTooltip
 					table-layout="auto"
-					@selection-change="handleSelectionChange"
 				>
 					<template #operation="{ row }">
 						<el-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="openDialog('修改', row)"> 修改 </el-button>

src/views/menu/utils/hook.tsx

@@ -44,10 +44,6 @@ export const resetForm = async formEl => {
 	await onSearch();
 };
 
-export const handleSelectionChange = (val: any) => {
-	console.log('handleSelectionChange', val);
-};
-
 export const onSearch = async () => {
 	loading.value = true;
 
@@ -110,25 +106,24 @@ export function openDialog(title = '新增', row?: FormItemProps) {
 		closeOnClickModal: false,
 		contentRenderer: () => h(editForm, { ref: formRef, formInline: null }),
 		beforeSure: (done, { options }) => {
-			const FormRef = formRef.value.menuFormRef;
+			const menuFormRef = formRef.value.menuFormRef;
 			const curData = options.props.formInline as FormItemProps;
-			FormRef.validate(async (valid: any) => {
+			menuFormRef.validate(async (valid: any) => {
-				if (valid) {
+				if (!valid) return;
-					delete curData.higherMenuOptions;
+				delete curData.higherMenuOptions;
 
-					let result = false;
+				let result: boolean;
-					if (title === '新增') {
+				if (title === '新增') {
-						result = await routerStore.addMenu(curData);
+					result = await routerStore.addMenu(curData);
-					} else {
+				} else {
-						curData.id = row.id;
+					curData.id = row.id;
-						result = await routerStore.updateMenu(curData);
+					result = await routerStore.updateMenu(curData);
-					}
+				}
 
-					// 刷新表格数据
+				// 刷新表格数据
-					if (result) {
+				if (result) {
-						done();
+					done();
-						await onSearch();
+					await onSearch();
-					}
 				}
 			});
 		},