feat(all): 表格头支持国际化

This commit is contained in:
RubyLiu 2023-06-20 11:32:41 +08:00 committed by rubylliu
parent 84b6e88a99
commit ae8358ad89
6 changed files with 20 additions and 16 deletions

View File

@ -33,7 +33,7 @@ module.exports = {
'font-family-no-missing-generic-family-keyword': null, 'font-family-no-missing-generic-family-keyword': null,
'selector-type-no-unknown': null, 'selector-type-no-unknown': null,
'block-opening-brace-space-before': 'always', 'block-opening-brace-space-before': 'always',
'at-rule-no-unknown': null, 'at-rule-no-unknown': [true, { ignoreAtRules: ['apply', 'tailwind', 'variants', 'responsive', 'screen'] }],
'no-duplicate-selectors': null, 'no-duplicate-selectors': null,
'property-no-unknown': null, 'property-no-unknown': null,
'no-empty-source': null, 'no-empty-source': null,

View File

@ -32,7 +32,6 @@
import { watchEffect, reactive, ref, computed, onUnmounted } from 'vue'; import { watchEffect, reactive, ref, computed, onUnmounted } from 'vue';
import { CustomMoreActionItem, RenameType, UserGroupItem } from './type'; import { CustomMoreActionItem, RenameType, UserGroupItem } from './type';
import { ValidatedError } from '@arco-design/web-vue'; import { ValidatedError } from '@arco-design/web-vue';
import useUserGroupStore from '@/store/modules/system/usergroup';
const { t } = useI18n(); const { t } = useI18n();
const formRef = ref(); const formRef = ref();
@ -40,8 +39,6 @@
name: '', name: '',
}); });
const store = useUserGroupStore();
const props = defineProps<{ const props = defineProps<{
visible: boolean; visible: boolean;
defaultName: string; defaultName: string;

View File

@ -13,8 +13,13 @@
:selected-keys="props.selectedKeys" :selected-keys="props.selectedKeys"
@selection-change="(e) => selectionChange(e, true)" @selection-change="(e) => selectionChange(e, true)"
> >
<template v-for="(item, key, i) in slots" :key="i" #[key]="{ record, rowIndex, column }"> <template #columns>
<slot :name="key" v-bind="{ rowIndex, record, column }"></slot> <a-table-column v-for="(item, key) in props.columns" :key="key" v-bind="item" :title="t(item.title as string)">
<template #cell="{ column, record, rowIndex }">
<slot v-if="item.slotName" :name="item.slotName" v-bind="{ record, rowIndex, column }"></slot>
<template v-else>{{ record[item.dataIndex as string] }}</template>
</template>
</a-table-column>
</template> </template>
</a-table> </a-table>
<div v-if="selectCurrent > 0 && attrs.showSelectAll" class="mt-[21px]"> <div v-if="selectCurrent > 0 && attrs.showSelectAll" class="mt-[21px]">
@ -29,17 +34,20 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useSlots, useAttrs, computed, ref, onMounted } from 'vue'; import { useI18n } from '@/hooks/useI18n';
import { useAttrs, computed, ref, onMounted } from 'vue';
import selectAll from './select-all.vue'; import selectAll from './select-all.vue';
import { MsTableProps, SelectAllEnum, MsPaginationI, BatchActionParams, BatchActionConfig } from './type'; import { MsTableProps, SelectAllEnum, MsPaginationI, BatchActionParams, BatchActionConfig } from './type';
import BatchAction from './batchAction.vue'; import BatchAction from './batchAction.vue';
import type { TableData } from '@arco-design/web-vue'; import type { TableColumnData, TableData } from '@arco-design/web-vue';
const batchleft = ref('10px'); const batchleft = ref('10px');
const { t } = useI18n();
const props = defineProps<{ const props = defineProps<{
selectedKeys?: (string | number)[]; selectedKeys?: (string | number)[];
actionConfig?: BatchActionConfig; actionConfig?: BatchActionConfig;
columns?: TableColumnData[];
}>(); }>();
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'selectedChange', value: (string | number)[]): void; (e: 'selectedChange', value: (string | number)[]): void;
@ -49,7 +57,6 @@
// - // -
const selectCurrent = ref(0); const selectCurrent = ref(0);
const slots = useSlots();
const attrs = useAttrs(); const attrs = useAttrs();
const { rowKey, pagination }: Partial<MsTableProps> = attrs; const { rowKey, pagination }: Partial<MsTableProps> = attrs;

View File

@ -10,12 +10,12 @@
'ml-4': true, 'ml-4': true,
}" }"
type="outline" type="outline"
@click="emit('batchAction', element)" @click="handleSelect(element)"
>{{ t(element.label as string) }}</a-button >{{ t(element.label as string) }}</a-button
> >
</template> </template>
<div v-if="props.actionConfig.moreAction" class="relative top-[2px] ml-3 inline-block"> <div v-if="props.actionConfig.moreAction" class="relative top-[2px] ml-3 inline-block">
<a-dropdown position="tr"> <a-dropdown position="tr" @select="handleSelect">
<a-button type="outline"><a-icon-more /></a-button> <a-button type="outline"><a-icon-more /></a-button>
<template #content> <template #content>
<template v-for="element in props.actionConfig.moreAction" :key="element.label"> <template v-for="element in props.actionConfig.moreAction" :key="element.label">
@ -44,6 +44,9 @@
(e: 'batchAction', value: BatchActionParams): void; (e: 'batchAction', value: BatchActionParams): void;
(e: 'clear'): void; (e: 'clear'): void;
}>(); }>();
const handleSelect = (item: string | number | Record<string, any> | undefined | BatchActionParams) => {
emit('batchAction', item as BatchActionParams);
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

View File

@ -124,7 +124,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref, inject } from 'vue'; import { computed, ref, inject } from 'vue';
import { Message } from '@arco-design/web-vue'; import { Message } from '@arco-design/web-vue';
import { useDark, useToggle, useFullscreen } from '@vueuse/core'; import { useFullscreen } from '@vueuse/core';
import { useAppStore, useUserStore } from '@/store'; import { useAppStore, useUserStore } from '@/store';
import { LOCALE_OPTIONS } from '@/locale'; import { LOCALE_OPTIONS } from '@/locale';
import useLocale from '@/locale/useLocale'; import useLocale from '@/locale/useLocale';
@ -141,9 +141,6 @@
const avatar = computed(() => { const avatar = computed(() => {
return userStore.avatar; return userStore.avatar;
}); });
const theme = computed(() => {
return appStore.theme;
});
const topMenu = computed(() => appStore.topMenu && appStore.menu); const topMenu = computed(() => appStore.topMenu && appStore.menu);
// const setVisible = () => { // const setVisible = () => {
// appStore.updateSettings({ globalSettings: true }); // appStore.updateSettings({ globalSettings: true });

View File

@ -307,7 +307,7 @@
import useTable from '@/components/pure/ms-table/useTable'; import useTable from '@/components/pure/ms-table/useTable';
import MsButton from '@/components/pure/ms-button/index.vue'; import MsButton from '@/components/pure/ms-button/index.vue';
import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue'; import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
import { getUserList, batchCreateUser, updateUserInfo } from '@/api/modules/system/user'; import { getUserList, batchCreateUser } from '@/api/modules/system/user';
import { validateEmail, validatePhone } from '@/utils/validate'; import { validateEmail, validatePhone } from '@/utils/validate';
import batchModal from './components/batchModal.vue'; import batchModal from './components/batchModal.vue';