auth/auth-web
auth
/
auth-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 🚀 批量删除多语言

This commit is contained in:
Bunny 2024-10-01 17:08:00 +08:00
parent 789190eff4
commit 575770ffeb
5 changed files with 55 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/TableBar/src/bar.tsx
View File

@ -187,7 +187,7 @@ export default defineComponent({
return () => ( 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 {...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>} {slots?.title ? slots.title() : <p class='font-bold truncate'>{props.title}</p>}
<div class='flex items-center justify-around'> <div class='flex items-center justify-around'>
{slots?.buttons ? <div class='flex mr-4'>{slots.buttons()}</div> : null} {slots?.buttons ? <div class='flex mr-4'>{slots.buttons()}</div> : null}

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

@ -1,7 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { userI18nStore } from '@/store/i18n/i18n'; 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 { useRenderIcon } from '@/components/ReIcon/src/hooks';
import AddFill from '@iconify-icons/ri/add-circle-line'; import AddFill from '@iconify-icons/ri/add-circle-line';
import EditPen from '@iconify-icons/ep/edit-pen'; import EditPen from '@iconify-icons/ep/edit-pen';
@ -44,6 +44,14 @@ const onPageSizeChange = async (value: number) => {
await onSearch(); await onSearch();
}; };
/**
* * 选择多行
* @param rows
*/
const onSelectionChange = (rows: Array<any>) => {
deleteIds.value = rows.map((row: any) => row.id);
};
onMounted(() => { onMounted(() => {
onSearch(); onSearch();
}); });
@ -67,14 +75,20 @@ onMounted(() => {
</el-form-item> </el-form-item>
</el-form> </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> <template #buttons>
<!-- 添加多语言 -->
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> {{ $t('add_multilingual') }} </el-button> <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>
<template v-slot="{ size, dynamicColumns }"> <template v-slot="{ size, dynamicColumns }">
<pure-table <pure-table
ref="tableRef" ref="tableRef"
:adaptiveConfig="{ offsetBottom: 45 }" :adaptiveConfig="{ offsetBottom: 96 }"
:columns="dynamicColumns" :columns="dynamicColumns"
:data="i18nStore.datalist" :data="i18nStore.datalist"
:header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }" :header-cell-style="{ background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)' }"
@ -87,7 +101,9 @@ onMounted(() => {
highlight-current-row highlight-current-row
row-key="id" row-key="id"
showOverflowTooltip showOverflowTooltip
stripe
table-layout="auto" table-layout="auto"
@selection-change="onSelectionChange"
@page-size-change="onPageSizeChange" @page-size-change="onPageSizeChange"
@page-current-change="onCurrentPageChange" @page-current-change="onCurrentPageChange"
> >

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

@ -4,12 +4,14 @@ import type { FormRules } from 'element-plus';
import { $t } from '@/plugins/i18n'; import { $t } from '@/plugins/i18n';
export const columns: TableColumnList = [ export const columns: TableColumnList = [
{ type: 'index', index: (index: number) => index + 1 },
{ type: 'selection', align: 'left' },
{ label: $t('id'), prop: 'id' }, { label: $t('id'), prop: 'id' },
{ label: $t('i18n.keyName'), prop: 'keyName' }, { label: $t('i18n.keyName'), prop: 'keyName' },
{ label: $t('i18n.translation'), prop: 'translation' }, { label: $t('i18n.translation'), prop: 'translation' },
{ label: $t('i18n.typeName'), prop: 'typeName' }, { label: $t('i18n.typeName'), prop: 'typeName' },
{ label: $t('table.updateTime'), prop: 'updateTime' }, { label: $t('table.updateTime'), prop: 'updateTime', sortable: true },
{ label: $t('table.createTime'), prop: 'createTime' }, { label: $t('table.createTime'), prop: 'createTime', sortable: true },
{ label: $t('table.createUser'), prop: 'createUser', slot: 'createUser' }, { label: $t('table.createUser'), prop: 'createUser', slot: 'createUser' },
{ label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser' }, { label: $t('table.updateUser'), prop: 'updateUser', slot: 'updateUser' },
{ label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' }, { label: $t('table.operation'), fixed: 'right', width: 210, slot: 'operation' },

19
src/views/i18n/i18n-setting/utils/hook.tsx
View File

@ -9,6 +9,7 @@ import { messageBox } from '@/utils/message';
export const formRef = ref(); export const formRef = ref();
const i18nStore = userI18nStore(); const i18nStore = userI18nStore();
export const deleteIds = ref([]);
/** /**
* * 查询内容 * * 查询内容
@ -123,3 +124,21 @@ export const onDelete = async (row: any) => {
await onSearch(); 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();
}
};

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

@ -33,19 +33,19 @@ onMounted(() => {
<template> <template>
<div class="main"> <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 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-form-item :label="$t('i18n_typeName')" prop="title">
<el-input v-model="i18nTypeStore.form.typeName" class="!w-[180px]" clearable placeholder="输入类型名称" /> <el-input v-model="i18nTypeStore.form.typeName" :placeholder="`${$t('input')}${$t('i18n_typeName')}`" class="!w-[180px]" clearable />
</el-form-item> </el-form-item>
<el-form-item label="类型解释" prop="title"> <el-form-item :label="$t('i18n_summary')" prop="title">
<el-input v-model="i18nTypeStore.form.summary" class="!w-[180px]" clearable placeholder="输入类型解释" /> <el-input v-model="i18nTypeStore.form.summary" :placeholder="`${$t('input')}${$t('i18n_summary')}`" class="!w-[180px]" clearable />
</el-form-item> </el-form-item>
<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('ri:search-line')" :loading="i18nTypeStore.loading" type="primary" @click="onSearch"> {{ $t('search') }} </el-button>
<el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> 重置</el-button> <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)"> {{ $t('buttons.reset') }}</el-button>
</el-form-item> </el-form-item>
</el-form> </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> <template #buttons>
<el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> 添加多语言类型</el-button> <el-button :icon="useRenderIcon(AddFill)" type="primary" @click="onAdd"> 添加多语言类型</el-button>
</template> </template>
@ -80,11 +80,13 @@ onMounted(() => {
</template> </template>
<template #operation="{ row }"> <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(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"> 新增 </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)"> <el-popconfirm :title="`是否确认删除 ${row.typeName}数据`" @confirm="onDelete(row)">
<template #reference> <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> </template>
</el-popconfirm> </el-popconfirm>
</template> </template>