You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
2.0 KiB
71 lines
2.0 KiB
1 year ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<platform-grid
|
||
|
|
ref="i18nGridRef"
|
||
|
|
:table-props="{ borderded: false, flat: true }"
|
||
|
|
:table-title="i18nConfigure.tableTitle"
|
||
|
|
:table-init-load-data="i18nConfigure.tableInitLoadData"
|
||
|
|
:table-row-key="i18nConfigure.tableRowKey"
|
||
|
|
:table-data-url="i18nConfigure.tableDataUrl"
|
||
|
|
:table-columns="i18nConfigure.tableColumns"
|
||
|
|
:table-buttons="i18nConfigure.tableButtons"
|
||
|
|
:add-form-props="i18nConfigure.addFormProps"
|
||
|
|
:table-show-sort-no="false"
|
||
|
|
:table-dense="true"
|
||
|
|
:table-row-drag="true"
|
||
|
|
:table-pagination="i18nConfigure.tablePagination"
|
||
|
|
>
|
||
|
|
</platform-grid>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { onMounted, ref } from 'vue';
|
||
|
|
import { useI18n } from 'vue-i18n';
|
||
|
|
import { Environment, axios } from 'platform-core';
|
||
|
|
|
||
|
|
const { t } = useI18n();
|
||
|
|
|
||
|
|
const Language = {
|
||
|
|
en: '英文',
|
||
|
|
zh_CN: '简体中文',
|
||
|
|
tw_CN: '繁体中文',
|
||
|
|
};
|
||
|
|
|
||
|
|
const LanguageOptions = [
|
||
|
|
{ label: '英文', value: 'en' },
|
||
|
|
{ label: '简体中文', value: 'zh_CN' },
|
||
|
|
{ label: '繁体中文', value: 'tw_CN' },
|
||
|
|
];
|
||
|
|
|
||
|
|
const i18nGridRef = ref();
|
||
|
|
const i18nConfigure = {
|
||
|
|
tableTitle: '多语言消息列表',
|
||
|
|
tableInitLoadData: true,
|
||
|
|
tableRowKey: 'id',
|
||
|
|
tableDataUrl: Environment.apiContextPath('/api/system/i18n'),
|
||
|
|
tablePagination: {
|
||
|
|
sortBy: 'code',
|
||
|
|
descending: false,
|
||
|
|
reqPageStart: 0,
|
||
|
|
rowsPerPage: 20,
|
||
|
|
},
|
||
|
|
tableColumns: [
|
||
|
|
{ name: 'code', label: t('code') },
|
||
|
|
{ name: 'lang', label: t('lang'), format: (value) => Language[value] },
|
||
|
|
{ name: 'message', label: t('message') },
|
||
|
|
],
|
||
|
|
tableButtons: ['refresh', 'add', 'edit', 'delete'],
|
||
|
|
addFormProps: {
|
||
|
|
dialogInitWidth: '50%',
|
||
|
|
dialogInitHeight: '90%',
|
||
|
|
formColsNumber: 1,
|
||
|
|
formColsAuto: false,
|
||
|
|
formFields: [
|
||
|
|
{ modelName: 'code', label: t('code'), type: 'text', required: true },
|
||
|
|
{ modelName: 'lang', label: t('lang'), type: 'select', required: true, options: LanguageOptions },
|
||
|
|
{ modelName: 'message', label: t('message'), type: 'text', required: true },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|