[Fix][UI Next][V1.0.0-Alpha] Fix the problem of table multilingual switching in alarm instance management. (#8968)

This commit is contained in:
songjianet 2022-03-17 20:16:11 +08:00 committed by GitHub
parent 44c8d615a4
commit 451f2849c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 85 additions and 79 deletions

View File

@ -15,7 +15,7 @@
* limitations under the License. * limitations under the License.
*/ */
import { defineComponent, onMounted, ref, toRefs } from 'vue' import {defineComponent, onMounted, ref, toRefs, watch} from 'vue'
import { import {
NButton, NButton,
NInput, NInput,
@ -40,10 +40,12 @@ const AlarmInstanceManage = defineComponent({
const { t } = useI18n() const { t } = useI18n()
const showDetailModal = ref(false) const showDetailModal = ref(false)
const currentRecord = ref() const currentRecord = ref()
const columns = ref()
const { IS_ADMIN } = useUserInfo() const { IS_ADMIN } = useUserInfo()
const { data, changePage, changePageSize, deleteRecord, updateList } =
useTable()
const { columnsRef } = useColumns( const { getColumns } = useColumns(
(record: IRecord, type: 'edit' | 'delete') => { (record: IRecord, type: 'edit' | 'delete') => {
if (type === 'edit') { if (type === 'edit') {
showDetailModal.value = true showDetailModal.value = true
@ -54,9 +56,6 @@ const AlarmInstanceManage = defineComponent({
} }
) )
const { data, changePage, changePageSize, deleteRecord, updateList } =
useTable()
const onCreate = () => { const onCreate = () => {
currentRecord.value = null currentRecord.value = null
showDetailModal.value = true showDetailModal.value = true
@ -69,6 +68,11 @@ const AlarmInstanceManage = defineComponent({
onMounted(() => { onMounted(() => {
changePage(1) changePage(1)
columns.value = getColumns()
})
watch(useI18n().locale, () => {
columns.value = getColumns()
}) })
return { return {
@ -76,7 +80,7 @@ const AlarmInstanceManage = defineComponent({
IS_ADMIN, IS_ADMIN,
showDetailModal, showDetailModal,
currentRecord: currentRecord, currentRecord: currentRecord,
columnsRef, columns,
...toRefs(data), ...toRefs(data),
changePage, changePage,
changePageSize, changePageSize,
@ -91,7 +95,7 @@ const AlarmInstanceManage = defineComponent({
IS_ADMIN, IS_ADMIN,
currentRecord, currentRecord,
showDetailModal, showDetailModal,
columnsRef, columns,
list, list,
page, page,
pageSize, pageSize,
@ -141,7 +145,7 @@ const AlarmInstanceManage = defineComponent({
</Card> </Card>
<Card title='' class={styles['mt-8']}> <Card title='' class={styles['mt-8']}>
<NDataTable <NDataTable
columns={columnsRef} columns={columns}
data={list} data={list}
loading={loading} loading={loading}
striped striped

View File

@ -19,12 +19,13 @@ import { h } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { NButton, NIcon, NPopconfirm, NSpace } from 'naive-ui' import { NButton, NIcon, NPopconfirm, NSpace } from 'naive-ui'
import { EditOutlined, DeleteOutlined } from '@vicons/antd' import { EditOutlined, DeleteOutlined } from '@vicons/antd'
import { TableColumns } from './types' import type { TableColumns } from './types'
export function useColumns(onCallback: Function) { export function useColumns(onCallback: Function) {
const { t } = useI18n() const { t } = useI18n()
const columnsRef: TableColumns = [ const getColumns = (): TableColumns => {
return [
{ {
title: '#', title: '#',
key: 'index', key: 'index',
@ -93,8 +94,9 @@ export function useColumns(onCallback: Function) {
} }
} }
] ]
}
return { return {
columnsRef getColumns
} }
} }