feat: 🚀 批量删除多语言

src/components/TableBar/src/bar.tsx

@@ -187,7 +187,7 @@ export default defineComponent({
 		return () => (
 			<>
 				<div {...attrs} class={['w-[99/100]', 'px-2', 'pb-2', 'bg-bg_color', isFullscreen.value ? ['!w-full', '!h-full', 'z-[2002]', 'fixed', 'inset-0'] : 'mt-2']}>
-					<div class='flex justify-between w-full h-[60px] p-4'>
+					<div class='flex justify-between w-full h-[50px] p-3'>
 						{slots?.title ? slots.title() : <p class='font-bold truncate'>{props.title}</p>}
 						<div class='flex items-center justify-around'>
 							{slots?.buttons ? <div class='flex mr-4'>{slots.buttons()}</div> : null}

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import { userI18nStore } from '@/store/i18n/i18n';
-import { onAdd, onDelete, onSearch, onUpdate } from '@/views/i18n/i18n-setting/utils/hook';
+import { deleteIds, onAdd, onDelete, onDeleteBatch, 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';
@@ -44,6 +44,14 @@ const onPageSizeChange = async (value: number) => {
 	await onSearch();
 };
 
+/**
+ * * 选择多行
+ * @param rows
+ */
+const onSelectionChange = (rows: Array<any>) => {
+	deleteIds.value = rows.map((row: any) => row.id);
+};
+
 onMounted(() => {
 	onSearch();
 });
@@ -67,14 +75,20 @@ onMounted(() => {
 			</el-form-item>
 		</el-form>
 
-		<PureTableBar :columns="columns" :tableRef="tableRef?.getTableRef()" :title="$t('multilingual_management')" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
+		<PureTableBar :columns="columns" :title="$t('multilingual_management')" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
 			<template #buttons>
+				<!-- 添加多语言 -->
 				<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('add_multilingual') }} </el-button>
+				<!-- 批量删除按钮 -->
+				<el-button v-show="deleteIds.length > 0" :icon="useRenderIcon(Delete)" type="danger" @click="onDeleteBatch">
+					{{ $t('add_multilingual') }}
+				</el-button>
 			</template>
+
 			<template v-slot="{ size, dynamicColumns }">
 				<pure-table
 					ref="tableRef"
-					:adaptiveConfig="{ offsetBottom: 45 }"
+					:adaptiveConfig="{ offsetBottom: 96 }"
 					:columns="dynamicColumns"
 					:data="i18nStore.datalist"
 					:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
@@ -87,7 +101,9 @@ onMounted(() => {
 					highlight-current-row
 					row-key="id"
 					showOverflowTooltip
+					stripe
 					table-layout="auto"
+					@selection-change="onSelectionChange"
 					@page-size-change="onPageSizeChange"
 					@page-current-change="onCurrentPageChange"
 				>

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

@@ -4,12 +4,14 @@ import type { FormRules } from 'element-plus';
 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('i18n.keyName'), prop: 'keyName' },
 	{ label: $t('i18n.translation'), prop: 'translation' },
 	{ label: $t('i18n.typeName'), prop: 'typeName' },
-	{ label: $t('table.updateTime'), prop: 'updateTime' },
-	{ label: $t('table.createTime'), prop: 'createTime' },
+	{ label: $t('table.updateTime'), prop: 'updateTime', sortable: true },
+	{ label: $t('table.createTime'), prop: 'createTime', sortable: true },
 	{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser' },
 	{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser' },
 	{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },

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

@@ -9,6 +9,7 @@ import { messageBox } from '@/utils/message';
 
 export const formRef = ref();
 const i18nStore = userI18nStore();
+export const deleteIds = ref([]);
 
 /**
  * * 查询内容
@@ -123,3 +124,21 @@ export const onDelete = async (row: any) => {
 		await onSearch();
 	}
 };
+
+/**
+ * * 批量删除
+ */
+export const onDeleteBatch = async () => {
+	const isConfirm = await messageBox({
+		message: $t('confirm_delete'),
+		title: $t('delete_warning'),
+		showMessage: false,
+		confirmMessage: $t('delete_success'),
+		cancelMessage: $t('cancel_delete'),
+	});
+
+	if (isConfirm) {
+		await i18nStore.deleteI18n(deleteIds.value);
+		await onSearch();
+	}
+};

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

@@ -33,19 +33,19 @@ onMounted(() => {
 <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">
-			<el-form-item label="类型名称" prop="title">
-				<el-input v-model="i18nTypeStore.form.typeName" class="!w-[180px]" clearable placeholder="输入类型名称" />
+			<el-form-item :label="$t('i18n_typeName')" prop="title">
+				<el-input v-model="i18nTypeStore.form.typeName" :placeholder="`${$t('input')}${$t('i18n_typeName')}`" class="!w-[180px]" clearable />
 			</el-form-item>
-			<el-form-item label="类型解释" prop="title">
-				<el-input v-model="i18nTypeStore.form.summary" class="!w-[180px]" clearable placeholder="输入类型解释" />
+			<el-form-item :label="$t('i18n_summary')" prop="title">
+				<el-input v-model="i18nTypeStore.form.summary" :placeholder="`${$t('input')}${$t('i18n_summary')}`" class="!w-[180px]" clearable />
 			</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-button :icon="useRenderIcon('ri:search-line')" :loading="i18nTypeStore.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" :tableRef="tableRef?.getTableRef()" title="多语言类型管理" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
+		<PureTableBar :columns="columns" title="多语言类型管理" @fullscreen="tableRef.setAdaptive()" @refresh="onSearch">
 			<template #buttons>
 				<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> 添加多语言类型</el-button>
 			</template>
@@ -80,11 +80,13 @@ onMounted(() => {
 					</template>
 
 					<template #operation="{ 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-button :icon="useRenderIcon(EditPen)" :size="size" class="reset-margin" link type="primary" @click="onUpdate(row)"> {{ $t('modify') }} </el-button>
+						<el-button :icon="useRenderIcon(AddFill)" :size="size" class="reset-margin" link type="primary" @click="onAdd"> {{ $t('add_new') }} </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>
+								<el-button :icon="useRenderIcon(Delete)" :size="size" class="reset-margin" link type="primary">
+									{{ $t('delete') }}
+								</el-button>
 							</template>
 						</el-popconfirm>
 					</template>