wangjun
3 years ago
77 changed files with 12448 additions and 6367 deletions
File diff suppressed because it is too large
@ -0,0 +1,65 @@ |
|||
<template> |
|||
<BasicModal |
|||
:title="t('common.createText')" |
|||
:canFullscreen="false" |
|||
@ok="submit" |
|||
@cancel="cancel" |
|||
@register="registerLanguageModal" |
|||
> |
|||
<BasicForm @register="registerLanguageForm" /> |
|||
</BasicModal> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { BasicModal, useModalInner } from '/@/components/Modal'; |
|||
import { BasicForm, useForm } from '/@/components/Form/index'; |
|||
import { createFormSchema, createAsync } from './Index'; |
|||
import { useI18n } from '/@/hooks/web/useI18n'; |
|||
export default defineComponent({ |
|||
name: 'CreateLanguage', |
|||
components: { |
|||
BasicModal, |
|||
BasicForm, |
|||
}, |
|||
emits: ['reload', 'register'], |
|||
setup(_, { emit }) { |
|||
const { t } = useI18n(); |
|||
const [registerLanguageForm, { getFieldsValue, resetFields, validate }] = useForm({ |
|||
labelWidth: 120, |
|||
schemas: createFormSchema, |
|||
showActionButtonGroup: false, |
|||
}); |
|||
|
|||
const [registerLanguageModal, { changeOkLoading, closeModal }] = useModalInner(); |
|||
|
|||
const submit = async () => { |
|||
try { |
|||
const params = getFieldsValue(); |
|||
changeOkLoading(true); |
|||
await validate(); |
|||
await createAsync({ params }); |
|||
await resetFields(); |
|||
emit('reload'); |
|||
closeModal(); |
|||
} finally { |
|||
changeOkLoading(false); |
|||
} |
|||
}; |
|||
|
|||
const cancel = () => { |
|||
resetFields(); |
|||
closeModal(); |
|||
}; |
|||
return { |
|||
registerLanguageModal, |
|||
registerLanguageForm, |
|||
submit, |
|||
cancel, |
|||
t, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped></style> |
|||
@ -0,0 +1,160 @@ |
|||
import { FormSchema } from '/@/components/Table'; |
|||
import { BasicColumn } from '/@/components/Table'; |
|||
import { |
|||
LanguagesServiceProxy, |
|||
DeleteLanguageInput, |
|||
PageLanguageInput, |
|||
} from '/@/services/ServiceProxies'; |
|||
import { useI18n } from '/@/hooks/web/useI18n'; |
|||
|
|||
const { t } = useI18n(); |
|||
// 分页表格语言 BasicColumn
|
|||
export const tableColumns: BasicColumn[] = [ |
|||
{ |
|||
title: t('routes.admin.language_cultureName'), |
|||
dataIndex: 'cultureName', |
|||
}, |
|||
{ |
|||
title: t('routes.admin.language_uiCultureName'), |
|||
dataIndex: 'uiCultureName', |
|||
}, |
|||
{ |
|||
title: t('routes.admin.language_displayName'), |
|||
dataIndex: 'displayName', |
|||
}, |
|||
{ |
|||
title: t('routes.admin.language_flagIcon'), |
|||
dataIndex: 'flagIcon', |
|||
}, |
|||
{ |
|||
title: t('common.isEnabled'), |
|||
dataIndex: 'isEnabled', |
|||
}, |
|||
]; |
|||
|
|||
// 分页查询语言 FormSchema
|
|||
export const searchFormSchema: FormSchema[] = [ |
|||
{ |
|||
field: 'filter', |
|||
label: t('common.key'), |
|||
component: 'Input', |
|||
colProps: { span: 8 }, |
|||
}, |
|||
]; |
|||
|
|||
// 创建语言 FormSchema
|
|||
export const createFormSchema: FormSchema[] = [ |
|||
{ |
|||
field: 'cultureName', |
|||
label: t('routes.admin.language_cultureName'), |
|||
component: 'Input', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'uiCultureName', |
|||
label: t('routes.admin.language_uiCultureName'), |
|||
component: 'Input', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'displayName', |
|||
label: t('routes.admin.language_displayName'), |
|||
component: 'Input', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'isEnabled', |
|||
label: t('common.isEnabled'), |
|||
component: 'Switch', |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'flagIcon', |
|||
label: t('routes.admin.language_flagIcon'), |
|||
component: 'Input', |
|||
required: false, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
]; |
|||
|
|||
// 编辑语言 FormSchema
|
|||
export const updateFormSchema: FormSchema[] = [ |
|||
{ |
|||
field: 'id', |
|||
label: 'Id', |
|||
component: 'Input', |
|||
ifShow: false, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'cultureName', |
|||
label: t('routes.admin.language_cultureName'), |
|||
component: 'Input', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'uiCultureName', |
|||
label: t('routes.admin.language_uiCultureName'), |
|||
component: 'Input', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'displayName', |
|||
label: t('routes.admin.language_displayName'), |
|||
component: 'Input', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'isEnabled', |
|||
label: t('common.isEnabled'), |
|||
component: 'Switch', |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'flagIcon', |
|||
label: t('routes.admin.language_flagIcon'), |
|||
component: 'Input', |
|||
required: false, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
]; |
|||
|
|||
/** |
|||
* 分页查询语言 |
|||
*/ |
|||
export async function pageAsync(params: PageLanguageInput) { |
|||
const languageServiceProxy = new LanguagesServiceProxy(); |
|||
return languageServiceProxy.page(params); |
|||
} |
|||
|
|||
/** |
|||
* 创建语言 |
|||
*/ |
|||
export async function createAsync({ params }) { |
|||
const languageServiceProxy = new LanguagesServiceProxy(); |
|||
await languageServiceProxy.create(params); |
|||
} |
|||
|
|||
/** |
|||
* 更新语言 |
|||
*/ |
|||
export async function updateAsync({ params }) { |
|||
const languageServiceProxy = new LanguagesServiceProxy(); |
|||
await languageServiceProxy.update(params); |
|||
} |
|||
|
|||
/** |
|||
* 删除语言 |
|||
*/ |
|||
export async function deleteAsync({ id }) { |
|||
const languageServiceProxy = new LanguagesServiceProxy(); |
|||
const request = new DeleteLanguageInput(); |
|||
request.id = id; |
|||
await languageServiceProxy.delete(request); |
|||
} |
|||
@ -0,0 +1,129 @@ |
|||
<template> |
|||
<div> |
|||
<BasicTable @register="registerTable" size="small"> |
|||
<template #toolbar> |
|||
<a-button |
|||
preIcon="ant-design:plus-circle-outlined" |
|||
type="primary" |
|||
@click="openCreateLanguageModal" |
|||
> |
|||
{{ t('common.createText') }} |
|||
</a-button> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column.key === 'cultureName'"> |
|||
{{ record.cultureName }} |
|||
<Tag v-if="record.isDefault" color="green">{{ t('common.default') }}</Tag> |
|||
</template> |
|||
|
|||
<template v-if="column.key === 'isEnabled'"> |
|||
<Tag :color="record.isEnabled ? 'green' : 'red'"> |
|||
{{ record.isEnabled ? t('common.enabled') : t('common.disEnabled') }} |
|||
</Tag> |
|||
</template> |
|||
</template> |
|||
<template #action="{ record }"> |
|||
<TableAction |
|||
:actions="[ |
|||
{ |
|||
icon: 'clarity:note-edit-line', |
|||
label: t('common.editText'), |
|||
onClick: handleEdit.bind(null, record), |
|||
}, |
|||
{ |
|||
icon: 'ant-design:delete-outlined', |
|||
color: 'error', |
|||
label: t('common.delText'), |
|||
popConfirm: { |
|||
title: t('common.askDelete'), |
|||
placement: 'left', |
|||
confirm: handleDelete.bind(null, record), |
|||
}, |
|||
}, |
|||
]" |
|||
/> |
|||
</template> |
|||
</BasicTable> |
|||
|
|||
<CreateLanguage |
|||
@register="registerCreateLanguageModal" |
|||
@reload="reload" |
|||
:bodyStyle="{ 'padding-top': '0' }" |
|||
/> |
|||
<UpdateLanguage |
|||
@register="registerUpdateLanguageModal" |
|||
@reload="reload" |
|||
:bodyStyle="{ 'padding-top': '0' }" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { Tag } from 'ant-design-vue'; |
|||
import { BasicTable, TableAction, useTable } from '/@/components/Table'; |
|||
import { tableColumns, searchFormSchema, pageAsync, deleteAsync } from './Index'; |
|||
import { useModal } from '/@/components/Modal'; |
|||
import CreateLanguage from './CreateLanguage.vue'; |
|||
import UpdateLanguage from './UpdateLanguage.vue'; |
|||
import { useI18n } from '/@/hooks/web/useI18n'; |
|||
export default defineComponent({ |
|||
name: 'Language', |
|||
components: { |
|||
BasicTable, |
|||
TableAction, |
|||
CreateLanguage, |
|||
UpdateLanguage, |
|||
Tag, |
|||
}, |
|||
setup() { |
|||
const { t } = useI18n(); |
|||
// table配置 |
|||
const [registerTable, { reload }] = useTable({ |
|||
columns: tableColumns, |
|||
formConfig: { |
|||
labelWidth: 70, |
|||
schemas: searchFormSchema, |
|||
}, |
|||
api: pageAsync, |
|||
showTableSetting: true, |
|||
useSearchForm: true, |
|||
bordered: true, |
|||
canResize: true, |
|||
showIndexColumn: true, |
|||
immediate: true, |
|||
scroll: { x: true }, |
|||
actionColumn: { |
|||
width: 220, |
|||
title: t('common.action'), |
|||
dataIndex: 'action', |
|||
slots: { customRender: 'action' }, |
|||
}, |
|||
}); |
|||
const [registerCreateLanguageModal, { openModal: openCreateLanguageModal }] = useModal(); |
|||
const [registerUpdateLanguageModal, { openModal: openUpdateLanguageModal }] = useModal(); |
|||
|
|||
function handleEdit(record: Recordable) { |
|||
openUpdateLanguageModal(true, { |
|||
record: record, |
|||
}); |
|||
} |
|||
|
|||
async function handleDelete(record: Recordable) { |
|||
await deleteAsync({ id: record.id }); |
|||
await reload(); |
|||
} |
|||
|
|||
return { |
|||
t, |
|||
registerTable, |
|||
reload, |
|||
handleEdit, |
|||
handleDelete, |
|||
registerCreateLanguageModal, |
|||
registerUpdateLanguageModal, |
|||
openCreateLanguageModal, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,65 @@ |
|||
<template> |
|||
<BasicModal |
|||
:title="t('common.editText')" |
|||
:canFullscreen="false" |
|||
@ok="submit" |
|||
@register="registerLanguageModal" |
|||
> |
|||
<BasicForm @register="registerLanguageForm" /> |
|||
</BasicModal> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { BasicModal, useModalInner } from '/@/components/Modal'; |
|||
import { BasicForm, useForm } from '/@/components/Form/index'; |
|||
import { updateFormSchema, updateAsync } from './Index'; |
|||
import { useI18n } from '/@/hooks/web/useI18n'; |
|||
export default defineComponent({ |
|||
name: 'UpdateLanguage', |
|||
components: { |
|||
BasicModal, |
|||
BasicForm, |
|||
}, |
|||
emits: ['reload', 'register'], |
|||
setup(_, { emit }) { |
|||
const { t } = useI18n(); |
|||
const [registerLanguageForm, { getFieldsValue, setFieldsValue }] = useForm({ |
|||
labelWidth: 120, |
|||
schemas: updateFormSchema, |
|||
showActionButtonGroup: false, |
|||
}); |
|||
const [registerLanguageModal, { changeOkLoading, closeModal }] = useModalInner((data) => { |
|||
setFieldsValue({ |
|||
id: data.record.id, |
|||
cultureName: data.record.cultureName, |
|||
uiCultureName: data.record.uiCultureName, |
|||
displayName: data.record.displayName, |
|||
flagIcon: data.record.flagIcon, |
|||
isEnabled: data.record.isEnabled, |
|||
}); |
|||
}); |
|||
|
|||
const submit = async () => { |
|||
try { |
|||
const params = getFieldsValue(); |
|||
changeOkLoading(true); |
|||
await updateAsync({ params }); |
|||
closeModal(); |
|||
emit('reload'); |
|||
} finally { |
|||
changeOkLoading(false); |
|||
} |
|||
}; |
|||
|
|||
return { |
|||
registerLanguageModal, |
|||
registerLanguageForm, |
|||
submit, |
|||
t, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped></style> |
|||
@ -0,0 +1,65 @@ |
|||
<template> |
|||
<BasicModal |
|||
:title="t('common.createText')" |
|||
:canFullscreen="false" |
|||
@ok="submit" |
|||
@cancel="cancel" |
|||
@register="registerLanguageTextModal" |
|||
> |
|||
<BasicForm @register="registerLanguageTextForm" /> |
|||
</BasicModal> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { BasicModal, useModalInner } from '/@/components/Modal'; |
|||
import { BasicForm, useForm } from '/@/components/Form/index'; |
|||
import { createFormSchema, createAsync } from './Index'; |
|||
import { useI18n } from '/@/hooks/web/useI18n'; |
|||
export default defineComponent({ |
|||
name: 'CreateLanguageText', |
|||
components: { |
|||
BasicModal, |
|||
BasicForm, |
|||
}, |
|||
emits: ['reload', 'register'], |
|||
setup(_, { emit }) { |
|||
const { t } = useI18n(); |
|||
const [registerLanguageTextForm, { getFieldsValue, resetFields, validate }] = useForm({ |
|||
labelWidth: 120, |
|||
schemas: createFormSchema, |
|||
showActionButtonGroup: false, |
|||
}); |
|||
|
|||
const [registerLanguageTextModal, { changeOkLoading, closeModal }] = useModalInner(); |
|||
|
|||
const submit = async () => { |
|||
try { |
|||
const params = getFieldsValue(); |
|||
changeOkLoading(true); |
|||
await validate(); |
|||
await createAsync({ params }); |
|||
await resetFields(); |
|||
emit('reload'); |
|||
closeModal(); |
|||
} finally { |
|||
changeOkLoading(false); |
|||
} |
|||
}; |
|||
|
|||
const cancel = () => { |
|||
resetFields(); |
|||
closeModal(); |
|||
}; |
|||
return { |
|||
registerLanguageTextModal, |
|||
registerLanguageTextForm, |
|||
submit, |
|||
cancel, |
|||
t, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped></style> |
|||
@ -0,0 +1,201 @@ |
|||
import { FormSchema } from '/@/components/Table'; |
|||
import { BasicColumn } from '/@/components/Table'; |
|||
import { |
|||
LanguageTextsServiceProxy, |
|||
PageLanguageTextInput, |
|||
LanguagesServiceProxy, |
|||
} from '/@/services/ServiceProxies'; |
|||
import { useI18n } from '/@/hooks/web/useI18n'; |
|||
const { t } = useI18n(); |
|||
// 分页表格语言文本 BasicColumn
|
|||
export const tableColumns: BasicColumn[] = [ |
|||
{ |
|||
title: t('common.name'), |
|||
dataIndex: 'name', |
|||
}, |
|||
{ |
|||
title: t('common.value'), |
|||
dataIndex: 'value', |
|||
}, |
|||
{ |
|||
title: t('routes.admin.languageTexts_resourceName'), |
|||
dataIndex: 'resourceName', |
|||
}, |
|||
]; |
|||
|
|||
// 分页查询语言文本 FormSchema
|
|||
export const searchFormSchema: FormSchema[] = [ |
|||
{ |
|||
field: 'cultureName', |
|||
label: t('routes.admin.language_cultureName'), |
|||
labelWidth: 120, |
|||
component: 'ApiSelect', |
|||
defaultValue: 'zh-Hans', |
|||
colProps: { span: 4 }, |
|||
componentProps: () => { |
|||
return { |
|||
api: getLanguageAsync, |
|||
labelField: 'displayName', |
|||
valueField: 'cultureName', |
|||
showSearch: true, |
|||
optionFilterProp: 'label', |
|||
}; |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'resourceName', |
|||
label: t('routes.admin.languageTexts_resourceName'), |
|||
labelWidth: 120, |
|||
component: 'ApiSelect', |
|||
colProps: { span: 4 }, |
|||
componentProps: () => { |
|||
return { |
|||
api: getResourceAsync, |
|||
showSearch: true, |
|||
optionFilterProp: 'label', |
|||
}; |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'filter', |
|||
label: t('common.key'), |
|||
component: 'Input', |
|||
colProps: { span: 6 }, |
|||
}, |
|||
]; |
|||
|
|||
// 创建语言文本 FormSchema
|
|||
export const createFormSchema: FormSchema[] = [ |
|||
{ |
|||
field: 'cultureName', |
|||
label: t('routes.admin.language_cultureName'), |
|||
component: 'ApiSelect', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
componentProps: () => { |
|||
return { |
|||
api: getLanguageAsync, |
|||
labelField: 'displayName', |
|||
valueField: 'cultureName', |
|||
showSearch: true, |
|||
optionFilterProp: 'label', |
|||
}; |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'resourceName', |
|||
label: t('routes.admin.languageTexts_resourceName'), |
|||
component: 'ApiSelect', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
componentProps: () => { |
|||
return { |
|||
api: getResourceAsync, |
|||
showSearch: true, |
|||
optionFilterProp: 'label', |
|||
}; |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'name', |
|||
label: t('common.name'), |
|||
component: 'Input', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'value', |
|||
label: t('common.value'), |
|||
component: 'Input', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
]; |
|||
|
|||
// 编辑语言文本 FormSchema
|
|||
export const updateFormSchema: FormSchema[] = [ |
|||
{ |
|||
field: 'cultureName', |
|||
label: t('routes.admin.language_cultureName'), |
|||
component: 'ApiSelect', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
componentProps: () => { |
|||
return { |
|||
api: getLanguageAsync, |
|||
labelField: 'displayName', |
|||
valueField: 'cultureName', |
|||
showSearch: true, |
|||
optionFilterProp: 'label', |
|||
}; |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'resourceName', |
|||
label: t('routes.admin.languageTexts_resourceName'), |
|||
component: 'ApiSelect', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
componentProps: () => { |
|||
return { |
|||
api: getResourceAsync, |
|||
showSearch: true, |
|||
optionFilterProp: 'label', |
|||
}; |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'name', |
|||
label: t('common.name'), |
|||
component: 'Input', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'value', |
|||
label: t('common.value'), |
|||
component: 'Input', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
]; |
|||
|
|||
/** |
|||
* 查询语言 |
|||
*/ |
|||
export async function getLanguageAsync() { |
|||
const languagesServiceProxy = new LanguagesServiceProxy(); |
|||
return languagesServiceProxy.all(); |
|||
} |
|||
|
|||
/** |
|||
* 查询资源 |
|||
*/ |
|||
export async function getResourceAsync() { |
|||
const languageTextServiceProxy = new LanguageTextsServiceProxy(); |
|||
return languageTextServiceProxy.allResource(); |
|||
} |
|||
|
|||
/** |
|||
* 分页查询语言文本 |
|||
*/ |
|||
export async function pageAsync(params: PageLanguageTextInput) { |
|||
const languageTextServiceProxy = new LanguageTextsServiceProxy(); |
|||
return languageTextServiceProxy.page(params); |
|||
} |
|||
|
|||
/** |
|||
* 创建语言文本 |
|||
*/ |
|||
export async function createAsync({ params }) { |
|||
const languageTextServiceProxy = new LanguageTextsServiceProxy(); |
|||
await languageTextServiceProxy.create(params); |
|||
} |
|||
|
|||
/** |
|||
* 更新语言文本 |
|||
*/ |
|||
export async function updateAsync({ params }) { |
|||
const languageTextServiceProxy = new LanguageTextsServiceProxy(); |
|||
await languageTextServiceProxy.update(params); |
|||
} |
|||
@ -0,0 +1,104 @@ |
|||
<template> |
|||
<div> |
|||
<BasicTable @register="registerTable" size="small"> |
|||
<template #toolbar> |
|||
<a-button |
|||
preIcon="ant-design:plus-circle-outlined" |
|||
type="primary" |
|||
@click="openCreateLanguageTextModal" |
|||
> |
|||
{{ t('common.createText') }} |
|||
</a-button> |
|||
</template> |
|||
|
|||
<template #action="{ record }"> |
|||
<TableAction |
|||
:actions="[ |
|||
{ |
|||
icon: 'clarity:note-edit-line', |
|||
label: t('common.editText'), |
|||
onClick: handleEdit.bind(null, record), |
|||
}, |
|||
]" |
|||
/> |
|||
</template> |
|||
</BasicTable> |
|||
|
|||
<CreateLanguageText |
|||
@register="registerCreateLanguageTextModal" |
|||
@reload="reload" |
|||
:bodyStyle="{ 'padding-top': '0' }" |
|||
/> |
|||
<UpdateLanguageText |
|||
@register="registerUpdateLanguageTextModal" |
|||
@reload="reload" |
|||
:bodyStyle="{ 'padding-top': '0' }" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { BasicTable, TableAction, useTable } from '/@/components/Table'; |
|||
import { tableColumns, searchFormSchema, pageAsync } from './Index'; |
|||
import { useModal } from '/@/components/Modal'; |
|||
import CreateLanguageText from './CreateLanguageText.vue'; |
|||
import UpdateLanguageText from './UpdateLanguageText.vue'; |
|||
import { useI18n } from '/@/hooks/web/useI18n'; |
|||
export default defineComponent({ |
|||
name: 'LanguageText', |
|||
components: { |
|||
BasicTable, |
|||
TableAction, |
|||
CreateLanguageText, |
|||
UpdateLanguageText, |
|||
}, |
|||
setup() { |
|||
const { t } = useI18n(); |
|||
// table配置 |
|||
const [registerTable, { reload, getForm }] = useTable({ |
|||
columns: tableColumns, |
|||
formConfig: { |
|||
labelWidth: 70, |
|||
schemas: searchFormSchema, |
|||
}, |
|||
api: pageAsync, |
|||
showTableSetting: true, |
|||
useSearchForm: true, |
|||
bordered: true, |
|||
canResize: true, |
|||
showIndexColumn: true, |
|||
immediate: true, |
|||
scroll: { x: true }, |
|||
actionColumn: { |
|||
width: 220, |
|||
title: t('common.action'), |
|||
dataIndex: 'action', |
|||
slots: { customRender: 'action' }, |
|||
}, |
|||
}); |
|||
const [registerCreateLanguageTextModal, { openModal: openCreateLanguageTextModal }] = |
|||
useModal(); |
|||
const [registerUpdateLanguageTextModal, { openModal: openUpdateLanguageTextModal }] = |
|||
useModal(); |
|||
|
|||
function handleEdit(record: Recordable) { |
|||
let fieldValue = getForm().getFieldsValue(); |
|||
openUpdateLanguageTextModal(true, { |
|||
record: record, |
|||
cultureName: fieldValue.cultureName, |
|||
}); |
|||
} |
|||
|
|||
return { |
|||
registerTable, |
|||
reload, |
|||
handleEdit, |
|||
registerCreateLanguageTextModal, |
|||
registerUpdateLanguageTextModal, |
|||
openCreateLanguageTextModal, |
|||
t, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,63 @@ |
|||
<template> |
|||
<BasicModal |
|||
:title="t('common.editText')" |
|||
:canFullscreen="false" |
|||
@ok="submit" |
|||
@register="registerLanguageTextModal" |
|||
> |
|||
<BasicForm @register="registerLanguageTextForm" /> |
|||
</BasicModal> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { BasicModal, useModalInner } from '/@/components/Modal'; |
|||
import { BasicForm, useForm } from '/@/components/Form/index'; |
|||
import { updateFormSchema, updateAsync } from './Index'; |
|||
import { useI18n } from '/@/hooks/web/useI18n'; |
|||
export default defineComponent({ |
|||
name: 'UpdateLanguageText', |
|||
components: { |
|||
BasicModal, |
|||
BasicForm, |
|||
}, |
|||
emits: ['reload', 'register'], |
|||
setup(_, { emit }) { |
|||
const { t } = useI18n(); |
|||
const [registerLanguageTextForm, { getFieldsValue, setFieldsValue }] = useForm({ |
|||
labelWidth: 120, |
|||
schemas: updateFormSchema, |
|||
showActionButtonGroup: false, |
|||
}); |
|||
const [registerLanguageTextModal, { changeOkLoading, closeModal }] = useModalInner((data) => { |
|||
setFieldsValue({ |
|||
resourceName: data.record.resourceName, |
|||
cultureName: data.cultureName, |
|||
name: data.record.name, |
|||
value: data.record.value, |
|||
}); |
|||
}); |
|||
|
|||
const submit = async () => { |
|||
try { |
|||
const params = getFieldsValue(); |
|||
changeOkLoading(true); |
|||
await updateAsync({ params }); |
|||
closeModal(); |
|||
emit('reload'); |
|||
} finally { |
|||
changeOkLoading(false); |
|||
} |
|||
}; |
|||
|
|||
return { |
|||
registerLanguageTextModal, |
|||
registerLanguageTextForm, |
|||
submit, |
|||
t, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped></style> |
|||
File diff suppressed because it is too large
@ -0,0 +1,65 @@ |
|||
<template> |
|||
<BasicModal |
|||
:title="t('common.createText')" |
|||
:canFullscreen="false" |
|||
@ok="submit" |
|||
@cancel="cancel" |
|||
@register="registerLanguageModal" |
|||
> |
|||
<BasicForm @register="registerLanguageForm" /> |
|||
</BasicModal> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { BasicModal, useModalInner } from '/@/components/Modal'; |
|||
import { BasicForm, useForm } from '/@/components/Form/index'; |
|||
import { createFormSchema, createAsync } from './Index'; |
|||
import { useI18n } from '/@/hooks/web/useI18n'; |
|||
export default defineComponent({ |
|||
name: 'CreateLanguage', |
|||
components: { |
|||
BasicModal, |
|||
BasicForm, |
|||
}, |
|||
emits: ['reload', 'register'], |
|||
setup(_, { emit }) { |
|||
const { t } = useI18n(); |
|||
const [registerLanguageForm, { getFieldsValue, resetFields, validate }] = useForm({ |
|||
labelWidth: 120, |
|||
schemas: createFormSchema, |
|||
showActionButtonGroup: false, |
|||
}); |
|||
|
|||
const [registerLanguageModal, { changeOkLoading, closeModal }] = useModalInner(); |
|||
|
|||
const submit = async () => { |
|||
try { |
|||
const params = getFieldsValue(); |
|||
changeOkLoading(true); |
|||
await validate(); |
|||
await createAsync({ params }); |
|||
await resetFields(); |
|||
emit('reload'); |
|||
closeModal(); |
|||
} finally { |
|||
changeOkLoading(false); |
|||
} |
|||
}; |
|||
|
|||
const cancel = () => { |
|||
resetFields(); |
|||
closeModal(); |
|||
}; |
|||
return { |
|||
registerLanguageModal, |
|||
registerLanguageForm, |
|||
submit, |
|||
cancel, |
|||
t, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped></style> |
|||
@ -0,0 +1,160 @@ |
|||
import { FormSchema } from '/@/components/Table'; |
|||
import { BasicColumn } from '/@/components/Table'; |
|||
import { |
|||
LanguagesServiceProxy, |
|||
DeleteLanguageInput, |
|||
PageLanguageInput, |
|||
} from '/@/services/ServiceProxies'; |
|||
import { useI18n } from '/@/hooks/web/useI18n'; |
|||
|
|||
const { t } = useI18n(); |
|||
// 分页表格语言 BasicColumn
|
|||
export const tableColumns: BasicColumn[] = [ |
|||
{ |
|||
title: t('routes.admin.language_cultureName'), |
|||
dataIndex: 'cultureName', |
|||
}, |
|||
{ |
|||
title: t('routes.admin.language_uiCultureName'), |
|||
dataIndex: 'uiCultureName', |
|||
}, |
|||
{ |
|||
title: t('routes.admin.language_displayName'), |
|||
dataIndex: 'displayName', |
|||
}, |
|||
{ |
|||
title: t('routes.admin.language_flagIcon'), |
|||
dataIndex: 'flagIcon', |
|||
}, |
|||
{ |
|||
title: t('common.isEnabled'), |
|||
dataIndex: 'isEnabled', |
|||
}, |
|||
]; |
|||
|
|||
// 分页查询语言 FormSchema
|
|||
export const searchFormSchema: FormSchema[] = [ |
|||
{ |
|||
field: 'filter', |
|||
label: t('common.key'), |
|||
component: 'Input', |
|||
colProps: { span: 8 }, |
|||
}, |
|||
]; |
|||
|
|||
// 创建语言 FormSchema
|
|||
export const createFormSchema: FormSchema[] = [ |
|||
{ |
|||
field: 'cultureName', |
|||
label: t('routes.admin.language_cultureName'), |
|||
component: 'Input', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'uiCultureName', |
|||
label: t('routes.admin.language_uiCultureName'), |
|||
component: 'Input', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'displayName', |
|||
label: t('routes.admin.language_displayName'), |
|||
component: 'Input', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'isEnabled', |
|||
label: t('common.isEnabled'), |
|||
component: 'Switch', |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'flagIcon', |
|||
label: t('routes.admin.language_flagIcon'), |
|||
component: 'Input', |
|||
required: false, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
]; |
|||
|
|||
// 编辑语言 FormSchema
|
|||
export const updateFormSchema: FormSchema[] = [ |
|||
{ |
|||
field: 'id', |
|||
label: 'Id', |
|||
component: 'Input', |
|||
ifShow: false, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'cultureName', |
|||
label: t('routes.admin.language_cultureName'), |
|||
component: 'Input', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'uiCultureName', |
|||
label: t('routes.admin.language_uiCultureName'), |
|||
component: 'Input', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'displayName', |
|||
label: t('routes.admin.language_displayName'), |
|||
component: 'Input', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'isEnabled', |
|||
label: t('common.isEnabled'), |
|||
component: 'Switch', |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'flagIcon', |
|||
label: t('routes.admin.language_flagIcon'), |
|||
component: 'Input', |
|||
required: false, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
]; |
|||
|
|||
/** |
|||
* 分页查询语言 |
|||
*/ |
|||
export async function pageAsync(params: PageLanguageInput) { |
|||
const languageServiceProxy = new LanguagesServiceProxy(); |
|||
return languageServiceProxy.page(params); |
|||
} |
|||
|
|||
/** |
|||
* 创建语言 |
|||
*/ |
|||
export async function createAsync({ params }) { |
|||
const languageServiceProxy = new LanguagesServiceProxy(); |
|||
await languageServiceProxy.create(params); |
|||
} |
|||
|
|||
/** |
|||
* 更新语言 |
|||
*/ |
|||
export async function updateAsync({ params }) { |
|||
const languageServiceProxy = new LanguagesServiceProxy(); |
|||
await languageServiceProxy.update(params); |
|||
} |
|||
|
|||
/** |
|||
* 删除语言 |
|||
*/ |
|||
export async function deleteAsync({ id }) { |
|||
const languageServiceProxy = new LanguagesServiceProxy(); |
|||
const request = new DeleteLanguageInput(); |
|||
request.id = id; |
|||
await languageServiceProxy.delete(request); |
|||
} |
|||
@ -0,0 +1,129 @@ |
|||
<template> |
|||
<div> |
|||
<BasicTable @register="registerTable" size="small"> |
|||
<template #toolbar> |
|||
<a-button |
|||
preIcon="ant-design:plus-circle-outlined" |
|||
type="primary" |
|||
@click="openCreateLanguageModal" |
|||
> |
|||
{{ t('common.createText') }} |
|||
</a-button> |
|||
</template> |
|||
<template #bodyCell="{ column, record }"> |
|||
<template v-if="column.key === 'cultureName'"> |
|||
{{ record.cultureName }} |
|||
<Tag v-if="record.isDefault" color="green">{{ t('common.default') }}</Tag> |
|||
</template> |
|||
|
|||
<template v-if="column.key === 'isEnabled'"> |
|||
<Tag :color="record.isEnabled ? 'green' : 'red'"> |
|||
{{ record.isEnabled ? t('common.enabled') : t('common.disEnabled') }} |
|||
</Tag> |
|||
</template> |
|||
</template> |
|||
<template #action="{ record }"> |
|||
<TableAction |
|||
:actions="[ |
|||
{ |
|||
icon: 'clarity:note-edit-line', |
|||
label: t('common.editText'), |
|||
onClick: handleEdit.bind(null, record), |
|||
}, |
|||
{ |
|||
icon: 'ant-design:delete-outlined', |
|||
color: 'error', |
|||
label: t('common.delText'), |
|||
popConfirm: { |
|||
title: t('common.askDelete'), |
|||
placement: 'left', |
|||
confirm: handleDelete.bind(null, record), |
|||
}, |
|||
}, |
|||
]" |
|||
/> |
|||
</template> |
|||
</BasicTable> |
|||
|
|||
<CreateLanguage |
|||
@register="registerCreateLanguageModal" |
|||
@reload="reload" |
|||
:bodyStyle="{ 'padding-top': '0' }" |
|||
/> |
|||
<UpdateLanguage |
|||
@register="registerUpdateLanguageModal" |
|||
@reload="reload" |
|||
:bodyStyle="{ 'padding-top': '0' }" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { Tag } from 'ant-design-vue'; |
|||
import { BasicTable, TableAction, useTable } from '/@/components/Table'; |
|||
import { tableColumns, searchFormSchema, pageAsync, deleteAsync } from './Index'; |
|||
import { useModal } from '/@/components/Modal'; |
|||
import CreateLanguage from './CreateLanguage.vue'; |
|||
import UpdateLanguage from './UpdateLanguage.vue'; |
|||
import { useI18n } from '/@/hooks/web/useI18n'; |
|||
export default defineComponent({ |
|||
name: 'Language', |
|||
components: { |
|||
BasicTable, |
|||
TableAction, |
|||
CreateLanguage, |
|||
UpdateLanguage, |
|||
Tag, |
|||
}, |
|||
setup() { |
|||
const { t } = useI18n(); |
|||
// table配置 |
|||
const [registerTable, { reload }] = useTable({ |
|||
columns: tableColumns, |
|||
formConfig: { |
|||
labelWidth: 70, |
|||
schemas: searchFormSchema, |
|||
}, |
|||
api: pageAsync, |
|||
showTableSetting: true, |
|||
useSearchForm: true, |
|||
bordered: true, |
|||
canResize: true, |
|||
showIndexColumn: true, |
|||
immediate: true, |
|||
scroll: { x: true }, |
|||
actionColumn: { |
|||
width: 220, |
|||
title: t('common.action'), |
|||
dataIndex: 'action', |
|||
slots: { customRender: 'action' }, |
|||
}, |
|||
}); |
|||
const [registerCreateLanguageModal, { openModal: openCreateLanguageModal }] = useModal(); |
|||
const [registerUpdateLanguageModal, { openModal: openUpdateLanguageModal }] = useModal(); |
|||
|
|||
function handleEdit(record: Recordable) { |
|||
openUpdateLanguageModal(true, { |
|||
record: record, |
|||
}); |
|||
} |
|||
|
|||
async function handleDelete(record: Recordable) { |
|||
await deleteAsync({ id: record.id }); |
|||
await reload(); |
|||
} |
|||
|
|||
return { |
|||
t, |
|||
registerTable, |
|||
reload, |
|||
handleEdit, |
|||
handleDelete, |
|||
registerCreateLanguageModal, |
|||
registerUpdateLanguageModal, |
|||
openCreateLanguageModal, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,65 @@ |
|||
<template> |
|||
<BasicModal |
|||
:title="t('common.editText')" |
|||
:canFullscreen="false" |
|||
@ok="submit" |
|||
@register="registerLanguageModal" |
|||
> |
|||
<BasicForm @register="registerLanguageForm" /> |
|||
</BasicModal> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { BasicModal, useModalInner } from '/@/components/Modal'; |
|||
import { BasicForm, useForm } from '/@/components/Form/index'; |
|||
import { updateFormSchema, updateAsync } from './Index'; |
|||
import { useI18n } from '/@/hooks/web/useI18n'; |
|||
export default defineComponent({ |
|||
name: 'UpdateLanguage', |
|||
components: { |
|||
BasicModal, |
|||
BasicForm, |
|||
}, |
|||
emits: ['reload', 'register'], |
|||
setup(_, { emit }) { |
|||
const { t } = useI18n(); |
|||
const [registerLanguageForm, { getFieldsValue, setFieldsValue }] = useForm({ |
|||
labelWidth: 120, |
|||
schemas: updateFormSchema, |
|||
showActionButtonGroup: false, |
|||
}); |
|||
const [registerLanguageModal, { changeOkLoading, closeModal }] = useModalInner((data) => { |
|||
setFieldsValue({ |
|||
id: data.record.id, |
|||
cultureName: data.record.cultureName, |
|||
uiCultureName: data.record.uiCultureName, |
|||
displayName: data.record.displayName, |
|||
flagIcon: data.record.flagIcon, |
|||
isEnabled: data.record.isEnabled, |
|||
}); |
|||
}); |
|||
|
|||
const submit = async () => { |
|||
try { |
|||
const params = getFieldsValue(); |
|||
changeOkLoading(true); |
|||
await updateAsync({ params }); |
|||
closeModal(); |
|||
emit('reload'); |
|||
} finally { |
|||
changeOkLoading(false); |
|||
} |
|||
}; |
|||
|
|||
return { |
|||
registerLanguageModal, |
|||
registerLanguageForm, |
|||
submit, |
|||
t, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped></style> |
|||
@ -0,0 +1,65 @@ |
|||
<template> |
|||
<BasicModal |
|||
:title="t('common.createText')" |
|||
:canFullscreen="false" |
|||
@ok="submit" |
|||
@cancel="cancel" |
|||
@register="registerLanguageTextModal" |
|||
> |
|||
<BasicForm @register="registerLanguageTextForm" /> |
|||
</BasicModal> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { BasicModal, useModalInner } from '/@/components/Modal'; |
|||
import { BasicForm, useForm } from '/@/components/Form/index'; |
|||
import { createFormSchema, createAsync } from './Index'; |
|||
import { useI18n } from '/@/hooks/web/useI18n'; |
|||
export default defineComponent({ |
|||
name: 'CreateLanguageText', |
|||
components: { |
|||
BasicModal, |
|||
BasicForm, |
|||
}, |
|||
emits: ['reload', 'register'], |
|||
setup(_, { emit }) { |
|||
const { t } = useI18n(); |
|||
const [registerLanguageTextForm, { getFieldsValue, resetFields, validate }] = useForm({ |
|||
labelWidth: 120, |
|||
schemas: createFormSchema, |
|||
showActionButtonGroup: false, |
|||
}); |
|||
|
|||
const [registerLanguageTextModal, { changeOkLoading, closeModal }] = useModalInner(); |
|||
|
|||
const submit = async () => { |
|||
try { |
|||
const params = getFieldsValue(); |
|||
changeOkLoading(true); |
|||
await validate(); |
|||
await createAsync({ params }); |
|||
await resetFields(); |
|||
emit('reload'); |
|||
closeModal(); |
|||
} finally { |
|||
changeOkLoading(false); |
|||
} |
|||
}; |
|||
|
|||
const cancel = () => { |
|||
resetFields(); |
|||
closeModal(); |
|||
}; |
|||
return { |
|||
registerLanguageTextModal, |
|||
registerLanguageTextForm, |
|||
submit, |
|||
cancel, |
|||
t, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped></style> |
|||
@ -0,0 +1,201 @@ |
|||
import { FormSchema } from '/@/components/Table'; |
|||
import { BasicColumn } from '/@/components/Table'; |
|||
import { |
|||
LanguageTextsServiceProxy, |
|||
PageLanguageTextInput, |
|||
LanguagesServiceProxy, |
|||
} from '/@/services/ServiceProxies'; |
|||
import { useI18n } from '/@/hooks/web/useI18n'; |
|||
const { t } = useI18n(); |
|||
// 分页表格语言文本 BasicColumn
|
|||
export const tableColumns: BasicColumn[] = [ |
|||
{ |
|||
title: t('common.name'), |
|||
dataIndex: 'name', |
|||
}, |
|||
{ |
|||
title: t('common.value'), |
|||
dataIndex: 'value', |
|||
}, |
|||
{ |
|||
title: t('routes.admin.languageTexts_resourceName'), |
|||
dataIndex: 'resourceName', |
|||
}, |
|||
]; |
|||
|
|||
// 分页查询语言文本 FormSchema
|
|||
export const searchFormSchema: FormSchema[] = [ |
|||
{ |
|||
field: 'cultureName', |
|||
label: t('routes.admin.language_cultureName'), |
|||
labelWidth: 120, |
|||
component: 'ApiSelect', |
|||
defaultValue: 'zh-Hans', |
|||
colProps: { span: 4 }, |
|||
componentProps: () => { |
|||
return { |
|||
api: getLanguageAsync, |
|||
labelField: 'displayName', |
|||
valueField: 'cultureName', |
|||
showSearch: true, |
|||
optionFilterProp: 'label', |
|||
}; |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'resourceName', |
|||
label: t('routes.admin.languageTexts_resourceName'), |
|||
labelWidth: 120, |
|||
component: 'ApiSelect', |
|||
colProps: { span: 4 }, |
|||
componentProps: () => { |
|||
return { |
|||
api: getResourceAsync, |
|||
showSearch: true, |
|||
optionFilterProp: 'label', |
|||
}; |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'filter', |
|||
label: t('common.key'), |
|||
component: 'Input', |
|||
colProps: { span: 6 }, |
|||
}, |
|||
]; |
|||
|
|||
// 创建语言文本 FormSchema
|
|||
export const createFormSchema: FormSchema[] = [ |
|||
{ |
|||
field: 'cultureName', |
|||
label: t('routes.admin.language_cultureName'), |
|||
component: 'ApiSelect', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
componentProps: () => { |
|||
return { |
|||
api: getLanguageAsync, |
|||
labelField: 'displayName', |
|||
valueField: 'cultureName', |
|||
showSearch: true, |
|||
optionFilterProp: 'label', |
|||
}; |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'resourceName', |
|||
label: t('routes.admin.languageTexts_resourceName'), |
|||
component: 'ApiSelect', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
componentProps: () => { |
|||
return { |
|||
api: getResourceAsync, |
|||
showSearch: true, |
|||
optionFilterProp: 'label', |
|||
}; |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'name', |
|||
label: t('common.name'), |
|||
component: 'Input', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'value', |
|||
label: t('common.value'), |
|||
component: 'Input', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
]; |
|||
|
|||
// 编辑语言文本 FormSchema
|
|||
export const updateFormSchema: FormSchema[] = [ |
|||
{ |
|||
field: 'cultureName', |
|||
label: t('routes.admin.language_cultureName'), |
|||
component: 'ApiSelect', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
componentProps: () => { |
|||
return { |
|||
api: getLanguageAsync, |
|||
labelField: 'displayName', |
|||
valueField: 'cultureName', |
|||
showSearch: true, |
|||
optionFilterProp: 'label', |
|||
}; |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'resourceName', |
|||
label: t('routes.admin.languageTexts_resourceName'), |
|||
component: 'ApiSelect', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
componentProps: () => { |
|||
return { |
|||
api: getResourceAsync, |
|||
showSearch: true, |
|||
optionFilterProp: 'label', |
|||
}; |
|||
}, |
|||
}, |
|||
{ |
|||
field: 'name', |
|||
label: t('common.name'), |
|||
component: 'Input', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
{ |
|||
field: 'value', |
|||
label: t('common.value'), |
|||
component: 'Input', |
|||
required: true, |
|||
colProps: { span: 18 }, |
|||
}, |
|||
]; |
|||
|
|||
/** |
|||
* 查询语言 |
|||
*/ |
|||
export async function getLanguageAsync() { |
|||
const languagesServiceProxy = new LanguagesServiceProxy(); |
|||
return languagesServiceProxy.all(); |
|||
} |
|||
|
|||
/** |
|||
* 查询资源 |
|||
*/ |
|||
export async function getResourceAsync() { |
|||
const languageTextServiceProxy = new LanguageTextsServiceProxy(); |
|||
return languageTextServiceProxy.allResource(); |
|||
} |
|||
|
|||
/** |
|||
* 分页查询语言文本 |
|||
*/ |
|||
export async function pageAsync(params: PageLanguageTextInput) { |
|||
const languageTextServiceProxy = new LanguageTextsServiceProxy(); |
|||
return languageTextServiceProxy.page(params); |
|||
} |
|||
|
|||
/** |
|||
* 创建语言文本 |
|||
*/ |
|||
export async function createAsync({ params }) { |
|||
const languageTextServiceProxy = new LanguageTextsServiceProxy(); |
|||
await languageTextServiceProxy.create(params); |
|||
} |
|||
|
|||
/** |
|||
* 更新语言文本 |
|||
*/ |
|||
export async function updateAsync({ params }) { |
|||
const languageTextServiceProxy = new LanguageTextsServiceProxy(); |
|||
await languageTextServiceProxy.update(params); |
|||
} |
|||
@ -0,0 +1,104 @@ |
|||
<template> |
|||
<div> |
|||
<BasicTable @register="registerTable" size="small"> |
|||
<template #toolbar> |
|||
<a-button |
|||
preIcon="ant-design:plus-circle-outlined" |
|||
type="primary" |
|||
@click="openCreateLanguageTextModal" |
|||
> |
|||
{{ t('common.createText') }} |
|||
</a-button> |
|||
</template> |
|||
|
|||
<template #action="{ record }"> |
|||
<TableAction |
|||
:actions="[ |
|||
{ |
|||
icon: 'clarity:note-edit-line', |
|||
label: t('common.editText'), |
|||
onClick: handleEdit.bind(null, record), |
|||
}, |
|||
]" |
|||
/> |
|||
</template> |
|||
</BasicTable> |
|||
|
|||
<CreateLanguageText |
|||
@register="registerCreateLanguageTextModal" |
|||
@reload="reload" |
|||
:bodyStyle="{ 'padding-top': '0' }" |
|||
/> |
|||
<UpdateLanguageText |
|||
@register="registerUpdateLanguageTextModal" |
|||
@reload="reload" |
|||
:bodyStyle="{ 'padding-top': '0' }" |
|||
/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { BasicTable, TableAction, useTable } from '/@/components/Table'; |
|||
import { tableColumns, searchFormSchema, pageAsync } from './Index'; |
|||
import { useModal } from '/@/components/Modal'; |
|||
import CreateLanguageText from './CreateLanguageText.vue'; |
|||
import UpdateLanguageText from './UpdateLanguageText.vue'; |
|||
import { useI18n } from '/@/hooks/web/useI18n'; |
|||
export default defineComponent({ |
|||
name: 'LanguageText', |
|||
components: { |
|||
BasicTable, |
|||
TableAction, |
|||
CreateLanguageText, |
|||
UpdateLanguageText, |
|||
}, |
|||
setup() { |
|||
const { t } = useI18n(); |
|||
// table配置 |
|||
const [registerTable, { reload, getForm }] = useTable({ |
|||
columns: tableColumns, |
|||
formConfig: { |
|||
labelWidth: 70, |
|||
schemas: searchFormSchema, |
|||
}, |
|||
api: pageAsync, |
|||
showTableSetting: true, |
|||
useSearchForm: true, |
|||
bordered: true, |
|||
canResize: true, |
|||
showIndexColumn: true, |
|||
immediate: true, |
|||
scroll: { x: true }, |
|||
actionColumn: { |
|||
width: 220, |
|||
title: t('common.action'), |
|||
dataIndex: 'action', |
|||
slots: { customRender: 'action' }, |
|||
}, |
|||
}); |
|||
const [registerCreateLanguageTextModal, { openModal: openCreateLanguageTextModal }] = |
|||
useModal(); |
|||
const [registerUpdateLanguageTextModal, { openModal: openUpdateLanguageTextModal }] = |
|||
useModal(); |
|||
|
|||
function handleEdit(record: Recordable) { |
|||
let fieldValue = getForm().getFieldsValue(); |
|||
openUpdateLanguageTextModal(true, { |
|||
record: record, |
|||
cultureName: fieldValue.cultureName, |
|||
}); |
|||
} |
|||
|
|||
return { |
|||
registerTable, |
|||
reload, |
|||
handleEdit, |
|||
registerCreateLanguageTextModal, |
|||
registerUpdateLanguageTextModal, |
|||
openCreateLanguageTextModal, |
|||
t, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,63 @@ |
|||
<template> |
|||
<BasicModal |
|||
:title="t('common.editText')" |
|||
:canFullscreen="false" |
|||
@ok="submit" |
|||
@register="registerLanguageTextModal" |
|||
> |
|||
<BasicForm @register="registerLanguageTextForm" /> |
|||
</BasicModal> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent } from 'vue'; |
|||
import { BasicModal, useModalInner } from '/@/components/Modal'; |
|||
import { BasicForm, useForm } from '/@/components/Form/index'; |
|||
import { updateFormSchema, updateAsync } from './Index'; |
|||
import { useI18n } from '/@/hooks/web/useI18n'; |
|||
export default defineComponent({ |
|||
name: 'UpdateLanguageText', |
|||
components: { |
|||
BasicModal, |
|||
BasicForm, |
|||
}, |
|||
emits: ['reload', 'register'], |
|||
setup(_, { emit }) { |
|||
const { t } = useI18n(); |
|||
const [registerLanguageTextForm, { getFieldsValue, setFieldsValue }] = useForm({ |
|||
labelWidth: 120, |
|||
schemas: updateFormSchema, |
|||
showActionButtonGroup: false, |
|||
}); |
|||
const [registerLanguageTextModal, { changeOkLoading, closeModal }] = useModalInner((data) => { |
|||
setFieldsValue({ |
|||
resourceName: data.record.resourceName, |
|||
cultureName: data.cultureName, |
|||
name: data.record.name, |
|||
value: data.record.value, |
|||
}); |
|||
}); |
|||
|
|||
const submit = async () => { |
|||
try { |
|||
const params = getFieldsValue(); |
|||
changeOkLoading(true); |
|||
await updateAsync({ params }); |
|||
closeModal(); |
|||
emit('reload'); |
|||
} finally { |
|||
changeOkLoading(false); |
|||
} |
|||
}; |
|||
|
|||
return { |
|||
registerLanguageTextModal, |
|||
registerLanguageTextForm, |
|||
submit, |
|||
t, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped></style> |
|||
Loading…
Reference in new issue