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-09-29 23:47:08 +08:00
parent 1d98efe92e
commit 7efa04759c
22 changed files with 458 additions and 555 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
mock/i18n.ts
View File

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

10
src/api/v1/i18n.ts
View File

@ -1,5 +1,5 @@
import { http } from '@/api/service/mockRequest';
import type { BaseResult } from '@/api/service/types';
import { http } from '@/api/service/request';
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 });
};

19
src/enums/index.ts
View File

@ -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 },
];

29
src/store/i18n/i18n.ts
View File

@ -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: [],
// 多语言类型
i18nTypeList: [],
datalist: [],
// 查询表单
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;
},
/**

12
src/store/i18n/i18nType.ts
View File

@ -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;
},
/**

39
src/views/i18n/i18n-setting/i18n-dialog.vue Normal file
View File

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

73
src/views/i18n/i18n-setting/index.vue
View File

@ -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" />
<language-update v-if="updateDialogVisible" />
<el-form ref="formRef" :inline="true" :model="i18nStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
<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>

67
src/views/i18n/i18n-setting/language-add.vue
View File

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

64
src/views/i18n/i18n-setting/language-dialog.vue
View File

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

37
src/views/i18n/i18n-setting/language-update.vue
View File

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

21
src/views/i18n/i18n-setting/utils/columns.tsx
View File

@ -3,19 +3,20 @@ import { reactive } from 'vue';
import type { FormRules } from 'element-plus';
export const columns: TableColumnList = [
// { type: 'selection' },
// { type: 'index', label: 'table.tableNumber', width: 100 },
{ label: 'i18n.keyName', prop: 'keyName' },
{ label: 'i18n.translate', prop: 'translate' },
{ label: 'i18n.languageSummary', prop: 'languageSummary' },
{ label: 'i18n.languageName', prop: 'languageName' },
{ label: 'i18n.parentKeyName', prop: 'parentKeyName' },
{ label: 'table.operation', prop: 'operation', slot: 'operation' },
{ label: 'id', prop: 'id' },
{ label: 'i18n_keyName', prop: 'keyName' },
{ label: 'i18n_translation', prop: 'translation' },
{ label: 'i18n_typeId', prop: 'typeId' },
{ label: 'updateTime', prop: 'updateTime' },
{ label: 'createTime', prop: 'createTime' },
{ label: 'createUser', prop: 'createUser' },
{ 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' }],
});

150
src/views/i18n/i18n-setting/utils/hook.ts
View File

@ -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 updateDialogVisible = ref(false);
export const formRef = ref();
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 = () => {
addDialogVisible.value = true;
};
export const onAdd = () => {
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;
/**
* * 批量彻底删除行
*/
export const onRowDelete = async () => {
const isConfirm = await messageBox({
message: '是否确认批量删除(此操作不可逆)',
title: '删除警告',
showMessage: false,
confirmMessage: '删除成功',
cancelMessage: '取消删除',
const result = await i18nStore.addI18n(form);
if (!result) return;
done();
await onSearch();
});
},
});
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;
// 赋值内容
updateForm.id = data.id;
updateForm.languageId = data.parentKeyName;
updateForm.keyName = data.keyName;
updateForm.translate = data.translate;
data.parentId != 0 && (updateForm.parentId = data.parentId);
addDialog({
title: `更新多语言`,
width: '30%',
props: { formInline: { keyName: row.keyName, translation: row.translation, typeId: row.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;
// 打开弹窗
updateDialogVisible.value = true;
const result = await i18nStore.updateI18n({ ...form, id });
if (!result) return;
done();
await onSearch();
});
},
});
};
/**
* * 当删除时
* @param row
* * 批量彻底删除行
*/
export const onDelete = async (row: any) => {
const id = row.row.id;
const form = { id };
await i18nStore.deleteI18n(form);
await i18nStore.getI18nMangeList();
export const onDelete = async () => {
const isConfirm = await messageBox({
message: '是否确认批量删除(此操作不可逆)',
title: '删除警告',
showMessage: false,
confirmMessage: '删除成功',
cancelMessage: '取消删除',
});
if (isConfirm) {
const data = ids.value;
await i18nStore.deleteI18n(data);
await onSearch();
}
};

11
src/views/i18n/i18n-setting/utils/types.ts Normal file
View File

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

81
src/views/i18n/i18n-type-setting/add-i18n-type.vue
View File

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

37
src/views/i18n/i18n-type-setting/i18n-type-dialog.vue Normal file
View File

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

92
src/views/i18n/i18n-type-setting/index.vue
View File

@ -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 getI18nType = () => {
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());
const resetForm = async formEl => {
if (!formEl) return;
formEl.resetFields();
await onSearch();
};
onMounted(() => {
getI18nType();
onSearch();
});
</script>
<template>
<div class="main">
<!-- 添加多语言种类 -->
<add-I18n-type />
<PureTableBar :columns="columns" :tableRef="tableRef?.getTableRef()" title="多语言类型管理" @fullscreen="tableRef.setAdaptive()" @refresh="getI18nDataList">
<el-form ref="formRef" :inline="true" :model="i18nTypeStore.form" class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto">
<el-form-item label="类型名称" prop="title">
<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 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-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> 修改 </el-button>
<el-button :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd"> 新增 </el-button>
<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>

85
src/views/i18n/i18n-type-setting/utils/columns.tsx
View File

@ -1,76 +1,21 @@
import { 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';
import { reactive, ref } from 'vue';
const i18nTypeStore = userI18nTypeStore();
export const editMap = ref({});
export const columns: TableColumnList = [
// { type: 'index', label: '序号', width: 100 },
{
label: 'i18n.languageName',
prop: 'languageName',
cellRenderer({ row, index }) {
return <>{editMap.value[index]?.editable ? <el-input v-model={row.languageName} /> : <p>{row.languageName}</p>}</>;
},
},
{
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' },
{ label: 'id', prop: 'id' },
{ label: 'i18n_languageName', prop: 'typeName' },
{ label: 'i18n_summary', prop: 'summary' },
{ label: 'isDefault', prop: 'isDefault', slot: 'isDefault' },
{ label: 'updateTime', prop: 'updateTime' },
{ label: 'createTime', prop: 'createTime' },
{ label: 'createUser', prop: 'createUser' },
{ label: 'updateUser', prop: 'updateUser' },
{ label: 'operation', fixed: 'right', width: 210, slot: 'operation' },
];
/**
* * 编辑内容
* @param row
* @param index
*/
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');
}
// 添加规则
export const rules = reactive({
typeName: [{ required: true, message: '填写语言名称(例如：zh)', trigger: 'blur' }],
summary: [{ required: true, message: '填写语言详情', trigger: 'blur' }],
});

97
src/views/i18n/i18n-type-setting/utils/hook.tsx Normal file
View File

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

12
src/views/i18n/i18n-type-setting/utils/rules.ts
View File

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

11
src/views/i18n/i18n-type-setting/utils/types.ts Normal file
View File

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

5
src/views/menu/index.vue
View File

@ -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-input v-model="form.title" class="!w-[180px]" clearable placeholder="请输入菜单名称" />
<el-form-item label="菜单名称" prop="title">
<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>

35
src/views/menu/utils/hook.tsx
View File

@ -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) => {
if (valid) {
delete curData.higherMenuOptions;
menuFormRef.validate(async (valid: any) => {
if (!valid) return;
delete curData.higherMenuOptions;
let result = false;
if (title === '新增') {
result = await routerStore.addMenu(curData);
} else {
curData.id = row.id;
result = await routerStore.updateMenu(curData);
}
let result: boolean;
if (title === '新增') {
result = await routerStore.addMenu(curData);
} else {
curData.id = row.id;
result = await routerStore.updateMenu(curData);
}
// 刷新表格数据
if (result) {
done();
await onSearch();
}
// 刷新表格数据
if (result) {
done();
await onSearch();
}
});
},